
The left pane shows the image as it will be saved. Xara's internal renderer automatically snaps certain objects to the pixelgrid, so crispness is easy to attain. In Xara, this method works well, especially with properly aligned vectors. Using Xara's illustration tools, you can quickly adjust the vector objects to make new icons: This means you can easily snap to pixel-centers and pixel-borders. Also, the Xara file has a predefined grid (just like Rhino) which has been preset at half-pixel intervals. You can use this grid to align your objects. The Pixelgrid layer contains a red grid which corresponds with the pixels of a 24×24 icon. The Obj_Base layer contains all the objects that make up our icon, in this case, the blue faces and the black outline. The Guides layer contains a set of infinite lines that mark the boundaries of all icon areas (the red, dotted lines). This square is used to preserve the alignment and positioning of the foreground objects with respect to the pixel-grid. The only object in the Background layer is the green square behind the icon. Layers in the background (Guides and Background) are not included when Xara converts the vector drawing to a pixel image. In Xara, layers can reside either in the background or the foreground. The vector source images have been layered to ease the alignment and export tasks. If you have a good pixel-editor, these adjustments are peanuts: This is also tedious to do on a per-pixel basis. A good illusion of transparency is to highlight some occluded faces and to darken others. After we've changed the image hue, we also need to make it transparent. This is not impossible to do, it's just boring. First, the transitions between the sides of the box are anti-aliased, so we have to manually invent all those new blending colors. To make the box icon transparent and green, we cannot use the simple method of changing individual pixels. Since we've used the box icon before, we'll use it again here. Obviously this icon needs to be a green, transparent something. It would be nice to have a button that runs the command for us, and it would be even nicer to have a neat icon to accompany it. Now imagine we have a command (or a macro or alias or whatever) which applies a green glass material to an object and we use this command more than 261 times a day. This makes it easier to post-process the image. If you look closely at the image you'll notice that it is pixelated. I have also enabled the display of the pixel-grid (the dotted black lines). base images are 32 times larger than the icons. The original base images are twice this size, i.e. Note that the image displayed here is only 384×384 pixels large. If you do, you'll end up with the following: It's a useful tool but you don't necessarily want to use it to change a light bulb. Anti-aliasing is a bit like a jack-hammer in this respect. This means that an anti-aliased line is always more fuzzy than an aliased (or pixelated) line. Anti-aliasing is all fine and dandy, but it works by averaging pixels. The overlap in the other three pixels is so all-or-nothing that the blending is hardly visible. Actually, only the top pixel (column:4 row:8) has a notable blending. The amount of transparency in these pixels is directly linked to their amount of overlap. They are only partly obscured by the outline shape and as a result, the color of these pixels is not 100% black. It is the four pixels at the top and bottom of the outline shape which are interesting right now. None of these pixels contain any anti-aliasing. Nine pixels are completely overlapped by the outline and inherit the color of the outline without modification. Eleven pixels in column #4 are not overlapped by any object and are left completely transparent. The only object which overlaps this column is the black outline of the box. Since this information was available when the vector drawing was made, the vector shapes have neatly aligned to a 24×24 grid.

The size of the extracted image is 24×24 pixels. Both images are blended with a pink background. The second image shows the anti-aliased pixel bitmap extracted from the vector-drawing.

All the shapes are defined by line and bezier segments in a continuous space (i.e. It shows the on-screen rendering of vector objects. The first image is a screenshot of the program used to draw the image. Here are two images representing two manifestations of the same drawing.
