Blog: Secrets from the Chef

Tools: Chapter 1, the vector-based one

Dmitri JoukovAuthor: Dmitri Joukov
14 June 2006

The Birth of VenusAt the dawning of my creative career the one and only vector-based drawing program was Corel Draw. I didn’t even care to think there were any other. Corel Draw was perfect until you had to rasterize your work. It was the worst I have ever seen in my life. To import your work in Photoshop, you had to save the vector in the EPS format, which is alien to Corel and kin to Adobe, losing some effects at the time.

Thus, my acquaintance with Adobe Illustrator was the result of despair. Yegor, he is a true martyr. He went through Corel Draw, Xara and Macromedia Fireworks, and he had yet a lot to suffer, hadn’t he chosen Adobe Illustrator. And it was only Denis the smart boy, who decided to master the vector-based thing by Adobe and even bought a book on the subject.

I’m saying all this to let you know that Adobe Illustrator is not the choice dictated by our ideology, as some might think; it is the only tool suitable for making vector-based icons. Had we the opportunity, we’d eagerly change it for something else. Illustrator would have won the first prize in the contest for the worst and most carelessly written $500-priced program. The quantity of errors stuns your mind and sometimes makes you just livid. Well, let’s not go too deep in the sad thoughts…

Let’s turn to the good things. Adobe Illustrator has gathered some features that are nowhere to be found in the same composition (I am very much in hopes that they will).

Like all decent designers, I made my first icons in the pixel graphic technique using Adobe Photoshop. In one of articles by Roma Voronezhsky I learned that for each file you can open multiple windows with different zooming in each of them. It is not a surprise, that the same feature appeared in a different product of Adobe-of course, I am speaking about Illustrator.

New window

Regardless of the fact that now, in the 21st century, the majority of icons is made in vector-based programs, their output is still raster-based. Many might think it’s the fault of the lazy programmers unable to implement the support of actual vector icons. In reality, a soulless machine cannot rasterize vector-based icons on a small scale (down to 48×48 pixels) preserving their clarity and legibility. You need a touch of the master here. You probably have guessed it right, I am saying that our hands are quite fit for the purpose. This is why our works have gained some popularity. For many people it was a mystery, how do we get such clarity? It’s easy! We see the same pixels, but we see them damn big. The magical wonderful Pixel Preview does the job.

Pixel preview

As you can see on the picture below, multiple windows for the same file and the Pixel Preview can do magic!

Three window view

  1. In the lower window, the biggest one, we do the drawing.
  2. In the top-right window we see the ready work in actual 100% size.
  3. In the top-left window we can see whether or not our lines fit the pixels.

Most often, you need pictograms of fixed sizes. Of course, designers use templates to see the limit of the drawing. How do we make them disappear when exporting to Photoshop? It’s easy: you create a new layer for them and mark a tick next to the Template option in the layer options. Voila!

Layer options

Nowadays, when Adobe Photoshop has become a de facto standard, one of the main requirements to any vector-based drawing program is the easy exporting of the work in the Photoshop. Illustrator, however, has hidden difficulties here as well; fortunately, there is a way to avoid them. You can find more information on this point in Yegor’s article “Rasterizing in Adobe Illustrator”.

Slice toolsWhile you perform your export and create intermediate images to show to your client, you can do without Photoshop. I hope everyone knows that Illustrator (like its raster-based ’brother’) has the “Save for Web” function, and the most attentive have most likely noticed some slices being mentioned in several menus. It is a topic for another article, so I’ll just make a short notice regarding it. This tool will help you to mark certain regions which will be saved to separate files when you use the “Save for web” option. However, our favorite Illustrator turned out to be Adobe’s unloved son (or should we say an unloved daughter?) In Photoshop, you can name the slices when you are working on your image. In Illustrator it’s all different. You name the files and select the export format and the optimization method only in the “Save for web” dialog window, which is not very comfortable. I also should say, that while using this method of export one should not neglect the rasterization technique described in the article “Rasterizing in Adobe Illustrator”. Especially important it is for your fonts.

As the final thing, I want you all to pray together that the next Illustrator version (version with the infamous #13) would be written decently and would not hang up at the most unsuitable moment.

I came near forgetting to welcome you to download the file, which was used to illustrate this article.

Terms of Use

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


Thank you very much for sharing all those valuable tricks, i love this website and all the Quality of Your icons.

Reply Anwar, 28 October 2007

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.