As an Icon Designer I am a big fan of Adobe Fireworks, which doesn’t get the kudos of its more popular siblings such as Photoshop and Illustrator but there are some things it does far better and most revolve around its excellent handling of the PNG file format.
What is so great about PNG?
The PNG format is almost always the format of choice for icon designers as it supports 24bit colour and 8bit transparency – meaning nice antialiased curves and smooth transparency, and most software and mobile platforms support it well. Even ICO files, probably the second most popular format we are asked for, are still originated from PNG files for the best results.
This short tutorial will demonstrate the best method for rendering crisp icons from a simple icon design created in Illustrator by comparing the PNG rendering of Fireworks with Photoshop & Illustrator.
Rendering Crisp Icons from Illustrator
For this example we have created a simple vector drawing of a computer in Illustrator. This icon needs to be rendered at 16×16 pixels, which is always the hardest size and also the most important one to be rendered well with nice sharp detail.
The basic steps to ensure a crisp render are to make sure the canvas is the exact size of the required icon and that all lines and details in the illustration line up exactly to 1 pixel thickness. If you draw detail that is slightly thicker or thinner than 1 pixel, the output will be dithered as the software tries to replicate what you are drawing. If your lines exactly match the pixels then you are much more likely to get a nice crisp result.
Below you can see the original sketch on the Server Icon in Illustrator and next to it a version optimised for 16×16 pixels.
To render a PNG file from Illustrator you need to select File -> Save for Web & Devices… (Shortcut: Alt+Shft+Ctrl+S) and you are then presented with a preview before you commit to the export procedure.
The right hand side of the preview doesn’t look great so lets check it by deselecting the ‘Transparency’ tick-box.
Now you can clearly see that Illustrator has added some unwanted anti-aliasing to the right hand edge which at 100% will look like the right edge is thicker than the other lines. Sometimes this can be caused by not lining things up pixel perfect in the file but in this case it is Illustrator not doing a particularly good job of rendering.
Rendering Crisp Icons from Photoshop
We know Illustrator is a vector package, so maybe it’s no great shock that it doesn’t always do a perfect job with exporting PNG files. Let’s see if we can improve our icon by importing the AI file into Photoshop.
I find the easiest way to import an AI file into Photoshop is to drag the AI file over an open Photoshop Window but you can also do the same by selecting: File –> Open (Shortcut: ctrl+o) and navigating to your desired AI file and clicking the ‘Open’ button.
You are then presented with the Import Dialogue box.
Make sure you select ‘Srt Box’ in the Crop To drop down as this will make sure the imported file is exactly 16×16 pixels and will save you changing the canvas size later. Also check the Resolution is 72 pixels/inch and not some higher print resolution, then click ‘OK’.
Now you can see the icon in PS and it looks pretty good from here but is that some unwanted anti-aliasing on the upper of the two dark grey horizontal lines?
Let’s follow the exact same ‘Save for Web & Devices…’ export process as for Illustrator (Shortcut: Alt+Shft+Ctrl+S). We can also un-tick the ‘Transparency’ box to more accurately see how the file will actually look.
This isn’t looking good for Photoshop, it has that same issue with the tight hand edge as Illustrator but there is also some unwanted anti-aliasing within the image itself. I only have one more Image editor to try so it is over to Fireworks.
Rendering Crisp Icons from Fireworks
This process is almost identical to Photoshop but there are some differences worth noting. The import Dialogue Box for Fireworks is a little less grand but we don’t need to change anything on it, just click ‘OK’.
Now our Icon is safely in Fireworks and at first glance it looks much better than both Illustrator and Photoshop.
The other main difference in Fireworks is the keyboard shortcut for ‘Save to Web & devices’ which is the slightly less finger taxing: Ctrl+Shift+X
Once the Export Dialogue is open you can check the transparency by clicking on the ‘Options’ tab on the left hand side and then on the ‘Format’ drop drop down menu, selecting PNG 24 or PNG 32 (the latter being the transparent 32bit version).
As you can see the icon is looking the best we have seen so far.
And the winner is?
Ok you probably knew from the title which I think is the best Adobe product for rendering PNG files but let me show you all of the files I rendered so you can see for yourself.
I’ll admit you may need a magnifying glass to tell the difference on this very simple design but on more complicated designs it is really easy to lose clarity, which is why I’ll take any improvement I can get and in most cases this means using Fireworks.
If you have any comments or prefer a different technique, I’d love to hear from you.