Blog: Secrets from the Chef

Tools: Chapter 2, the raster-based one

Yegor GilyovAuthor: Yegor Gilyov
6 July 2006

You are probably beginning to boil over — it’s been three weeks since Dmitry revealed the mysteries of the vector stage of icon creation, so where is that continuation? Let me tell you why we made no haste.

The thing here is that we always try to cut down on this raster stage as much as possible. We take pains to dally that moment when we minimize Illustrator and launch Photoshop. I wish I’d never see that Photoshop! Where do I get that hatred to all designers’ holy cow? It’s nothing personal, I assure you. There is nothing bad I can say about Adobe Photoshop as a specimen of the class of raster editors, let alone the fact that it is crafted with more quality that our beloved vector-based Illustrator. My dislike lies not for the specific product but for all methods to edit an image whilst they are based on their raster output.

You can judge that, too. A vector-based image is made up by the author out of a whole lot of primitives, i.e. shapes and lines with all the possible effects applied. However complicated that image might be, there’s still an opportunity to get down to any of those constituents and change any of its properties. In raster editors it’s the other way. You make a stroke with a brush-and everything is lost: it is not a brush stroke, it is a lot of pixels not connected to each other however having become an indispensable part of the image over which that stroke was made. It’s like with paper, in the stone age! Now I feel Adobe Photoshop adepts start sharpening their quills to leave a viperous comment here, something about the need for the author to brush up the tutorial and learn more about Layers, Paths and other useful stuff. However this leopard won’t change its spots: however useful these functions are, one can not edit details of complicated images with the ease any vector-based editor gives you.

I allowed myself such an extensive and emotional intro to keep the reader from getting upset with me for the dry and short main body that goes below. It is true we try to do all the work in vector programs and the raster stage is left for the dullest routine operations, the description of which is as uninteresting as performance thereof.

So, what do we do with icons in Photoshop once we’ve exported them from the vector-based source using the methods described in the article “Rasterizing in Adobe Illustrator”? There is not much left to do. We sometimes apply the shadows. Sometimes we make the highlights (the icon state once the mouse hovers it). We make versions with rough edges (no anti-aliasing). And finally, we slice up the icon set into a plenty of separate files. The first and second operations are given a comprehensive description in the manual by Microsoft, so let us turn to rough edges and slicing.

That same manual says in two words why the icon files for windows are to have 256-color versions with 1-bit transparency, i.e. with rough edges. When running in 16-bit color mode, Windows XP used this variant of icons. It is only left for me to say that not all program developers have learned to display in their interfaces icons with 8-bit transparency (that is, with anti-aliasing) even in the system is running in 32-bit color mode. The day when we forget about rough edges like a bad dream is probably to come soon. Alas, not just yet.

Worse luck, the method to make rough edge icons out of vector icons with anti-aliasing described in the manual by Microsoft won’t do. Have I warned you that there will be nothing interesting or pleasant in this article? Get this: you will not like the most sound method. There is no method per se: you paint a pixel here, correct a pixel there, etc., until your icon looks more or less acceptable. Without semi-transparent pixels on edges, and against different backgrounds. Only manual perfection could give you a decent result in all cases.

Rough edges

Better luck is that we can do away with most of the trouble by using some automated draft editing method without forgetting about fine handwork. Some other time we’ll tell you about our way to get rid of anti-aliasing without too much mess (that’s for a different article).

When we are through with all the work, we only have to cut out all the versions of each icon and save them in files of specified sizes (I am in hopes you don’t think we make each icon in a separate file from scratch?). We are lucky not to have to do it manually thanks to Photoshop’s built-in “Save for Web” option. The developers’ idea was that web designers would be able to cut the web site templates into separate pictures and even generate HTML code. We don’t need that HTML, as a rule, but the possibility to cut and save fragments of the source picture in separate files, already named with the Slice Tool, is such a deliverance.

Save for Web

As one should have expected, the “Save for Web” function does the saving into separate files the icons for web applications in GIF and PNG formats. Moreover, if a Windows-application developer needs, say, toolbar icons in the BMP format, “Save for Web” will cope with this task perfectly. The main icons of Windows applications, however, as well as data file icons, are to be in the ICO format. “Save for Web” is not that smart. You need to use specific tools to save into ICO-files, such as IconBuilder for Mac and Axialis IconWorkshop for Windows.

This is where we stop. Mind you, we have not spoken about all instruments to use in icon creation. In every project we try to experiment and to find some new methods. We wish the same to you.

Terms of Use

These materials can be used for any purposes with obligatory indication of the author.

Leave a comment

You can log in with your twitter or facebook accounts. After authorisation on one of this sites, you'll be able to leave comments here.

Connect with Facebook

If you have an OpenID (for example, use it to authorise.

Log in with your Turbomilk account or register a new one.