design: XAML image template-swapping part 1: creating images in Adobe Illustrator

This is the first of three articles on how to create and use vector images from Adobe Illustrator as XAML art in a WPF project. We'll be creating multiple “states” of an image in Illustrator, importing them into XAML using Expression Blend 3.0, and then wiring them up into a button using a trigger. This first article shows how to prepare the images in Adobe Illustrator CS4. The second article will cover importing the art into Blend, and the third article shows the template-switching technique that maps images to button states.

let's draw a picture

Begin by creating a new image in Illustrator (I'm using the CS4 version) at the default size it will be displayed. My example is 24x24 pixels. Name the layer something you can identify later during the Blend import. Set the document to RGB color mode using File | Document Color Mode | RGB Color, and use an RGB color palette. Careful readers will notice that I goofed up the color mode in the example. Sigh.

Drawing a gray rectangle that fills the entire artboard

Using the rectangle tool, create a light gray rectangle the full size of your artboard. Set the stroke to transparent. We'll delete this rectangle later, but it's important for the Blend import step. When Expression Blend imports vector art, it sets the canvas to be the size of the imported image, not the size of the artboard. This makes it very difficult to add adorners, lighting effects, and other good stuff in your source images and have them all show up in the right place in your XAML controls. Creating a rectangle the same size as your artboard tricks Blend into importing all the images the way you really want it to. The gray-rect background for our 24x24 icon is thus sized 24x24.

draw or import your image

Adding an asterisk text character

Next draw or import your image. I'm going to start with an asterisk symbol from the excellent Clickbits set of icon fonts. Icon fonts like Clickbits often make good starting points when developing small symbol graphics for an interface. Center the font character and set the point size as big as you can make it so that the symbol fits entirely within the window.

create outlines from your text character

Creating outlines from the text character

Now choose Type | Create Outlines to turn your type character into a vector. Follow up with Object | Path | Outline Stroke. Now you have a vector image you can work with.

fill and stroke

Giving the shape a gradient fill and stroke color

Move the vector layer up to eliminate the unneeded group. Now give it an interesting fill and stroke. For the fill, I chose a simple linear gradient and set the angle to -70 so that the lighting looks more natural. You'll want to keep a consistent gradient angle for similar images in your application. I've set the stroke at .25pt, positioned inside the vector image boundaries. Vector images seem to look sharper after importing when the stroke is positioned inside the shape; perhaps this improves the image's edge pixel alignment. Certainly it helps a thinner stroke appear with greater clarity. I've made the stroke color just slightly darker than the darkest value in the gradient.

pixel preview

Checking the Pixel Preview of the drawing

It's a good idea to look at the pixel view of the image every so often to make sure that the vector's native size antialiases well on pixel boundaries. Yes I know it's going to be a XAML vector and all that — it still matters. Use Ctrl + Alt + Y to toggle Pixel Preview mode on or off. This image looks pretty good so we'll save it as asterisk-normal.ai and call it finished. We'll use this image for the default (normal, unpressed) state of the button.

lit state

Creating a lit state version of the drawing

Now choose File | Save a Copy and call the copy asterisk-lit.ai. Open this new image. Rename the layers and then modify the fill gradient to have a brighter “lit” appearance, maintaining the same lighting angle. For this example, I'm keeping the same stroke color, but you will probably want to tweak this for your production art. Be careful not to reposition the asterisk vector layer: if you do, the various image states won't line up right in your application. Save the file.

disabled state

Creating a disabled state version of the drawing

Now do one last File | Save a Copy from either image and call the new file asterisk-disabled.ai. Rename the layers and then set the fill to be a disabled-looking gray and the stroke just a shade darker. Save the file when you're done.

disabled, normal, lit state images

Disabled, normal, and lit state images

We now have three variations of the same image: disabled, normal, and lit. Each of the images is positioned exactly the same against the 24x24 gray background rectangle. If I was creating variations of an icon this way for a standard web project, I'd probably create multiple artboards within a single Illustrator file, but Blend is helpless with multiple artboards, thus the three separate files. We'll import these into a XAML Resource Dictionary in the next article, XAML image template-swapping part 2: importing images using Expression Blend.