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.

Step 1

Below you can see the original sketch on the Server Icon in Illustrator and next to it a version optimised for 16×16 pixels.

Icon Design Tutorial

Step 2

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.

Icon Design Tutorial

The right hand side of the preview doesn’t look great so lets check it by deselecting the ‘Transparency’ tick-box.

Icon Design Tutorial

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.

Step 1

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.

Icon Design Tutorial

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?

Icon Design Tutorial

Step 2

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.

Icon Design Tutorial

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’.

Icon Design Tutorial

Now our Icon is safely in Fireworks and at first glance it looks much better than both Illustrator and Photoshop.

Icon Design Tutorial

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.

Icon Design Tutorial

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.

Icon Design Tutorial

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.

Cheers,

Adam

Adam Parrish

Owner and creative director at Creative Freedom Ltd. Unbelievably cool icon design expert, husband, and father of two awesome girls. A proper decent chappy and thoroughly fab to work with. Ok, so I wrote my own bio…

10 thoughts on “Why Fireworks Rocks for Rendering Crisp Icons”

  1. Seiko Perpetual says:

    Wow, that is a big difference. I like PNG, but I never use it because JPG always ends up being significantly smaller size. Even on small icon sizes, the compression ratio of JPG is always better. On the other hand they always lose a little clarity.

  2. I have found that PNG files are smaller than JPGs when there are less colors / typically with illustrations. I also like Fireworks!

  3. Corrie Crooks says:

    Hi, Thanks for this, really useful – Fireworks doesn’t seem to want to bring my style in though. I have a grey box with a darker grey 1px stroke, then and internal Glow of about 1px – it’s just bringing it in as a solid black box, any ideas? Thanks

  4. Corrie Crooks says:

    ….meant to say, I’m using Adobe Suite 5.5, importing a .AI file of a button into Fireworks. The button has a drop shadow which is importing correctly, the internal glow is not importing correctly.

  5. Hi Corrie,

    Unfortunately not all effects are supported on import, I guess because Fireworks was a Macromedia product and doesn’t come from the same code base. Anyway I would try looking at ways to import the ‘bits’ you want to apply an inner glow to and add the glow within Fireworks as it does have pretty good glow tools in the ‘Photoshop Live Effects’ filter.

    Not having seen your icon it is hard to recommend a particular technique and it may be the extra steps aren’t worth it in this case.

    Adam 🙂

  6. Corrie Crooks says:

    For anyone with the same issue, I found this link from Adobe that says to rasterise in Illustrator first:

    http://kb2.adobe.com/cps/405/kb405613.html

    I’m assuming this defeats the object of using Fireworks though if my file is rasterised by Illustrator?!

  7. If you had to rasterise then I wouldn’t bother personally.

    What you can do though is select the elements you want to apply the glow to in Illustrator and copy and paste into Fireworks. It doesn’t always work but quite often the pasted objects will still be vector and you can then manipulate and add the glow in Fireworks.

    I tend to use Illustrator to create the basic shapes I want and do any final effects work in Fireworks.

    Adam 🙂

  8. You dont find it too much of a multi-task-hell switching back and forwards that much ?
    I have really been anoyed by photoshop the more my passion is evolving for crisp and pixelperfect work. Photoshop is anoying like fog on the inside of ski-goggles when coming to that part imo unless im going oldschool Paint on it with a pencil, but the few times I have thrown myself over Fw, the frustration starts to set in and finally the ticking of the watch is getting louder and deadlines getting closer, so i never really got the motivation to stick by it… But since im reading this article, im apparently not quite ready to give up either. – Thanks for the read either way. It was good to hear someone elses story on Fw

  9. I think once you have your process down pat, swapping applications isn’t an issue, it just becomes another step. I do feel your pain though as Photoshop and Fireworks do things very differently on occasion and if you aren’t familiar, it can be a bit of a headache.

    Just to add to the confusion I sometimes use Axialis Icon Workshop to scale PNG files as it is probably even better than Fireworks but it won’t handle vector files unfortunately.

    http://www.creativefreedom.co.uk/icon-designers-blog/icon-design-software-more-oficon-workshop/

    Adam 🙂

  10. Lee C says:

    As someone who has been doing UI and game design since the very early 1980’s, the PNG format was a revelation when it appeared. I use save-for-web more than any other option in Photoshop.

    For icons though, I tend to shift to ProMotion for icon design as it is a more functional, pixel-based editor than Photoshop. It’s also more specifically game-design oriented, so that was a bonus point. I must confess, I tend to hand-draw the different sizes though… old habits as they say. 🙂

    Good info here though.

Leave a Reply

Your email address will not be published. Required fields are marked *