Yellowlane

Confessions of a Pixel Perfectionist

Confessions of a Pixel Perfectionist

Confessions of a Pixel Perfectionist

3 Jun 2005 — 19 Comments

Adobe Illustrator CS

Admittedly, until the end of last year, I was a Freehand guy. I started using Freehand in 1993 when it was still owned by Aldus. When Mac OS X came around, Freehand became my logical tool to create the larger vector icons demanded by the Operating System. I quickly found that using Freehand to design icons at almost any size was the way to go.

Sadly, over the years, Macromedia has let Freehand slide a bit, and Adobe Illustrator has come on strong. When John Marstall came to work at Firewheel, he was an Illustrator master, and it took less than a year for him to make me a convert.

If your familiar with Freehand, making the jump to Illustrator can be a mental jump. It's far more technical, and far less "artistic." Not surprisingly though, this makes it a perfect tool for icon design.

Now, we start almost every project in Illustrator. Each icon resource is created at actual size. This means 16x16 pixel icons are still drawn at 16x16 pixels... even though Illustrator is a vector application. There's a misconception that because the artwork is vector you can scale it as large or as small as you want. This is not entirely true, especially when you deal in smaller sizes.

The advent of LCD screens has made attention to the pixel even more important than it was in the days of your 8-bit NES system and CRT tube displays. Mobile phones are another prime example of paying attention to your pixels.

When you shrink a 128x128 pixel image to 32x32, it may look acceptable (although far from perfect). When you shrink a 128x128 image to 16x16, it will look like crap. Hence, each and every icon we design is designed at actual size. If an icon requires both 32x32 and 16x16 sizes, we design custom resources for each one. And although Illustrator is a traditional vector application, it does a marvelous job with bitmap graphics, thanks to its invaluable Pixel Preview mode. Pixel Preview mode basically allows you to create precise bitmap art with Illustrators native vector tools.

Macromedia Fireworks is similar in this fashion, but Illustrator far surpasses it with its Photoshop integration and near flawless integration of Photoshop filters.

Once we finish an icon design in Illustrator, we use its Save For Web function to export our finished artwork in both 32-bit PNG and 8-bit GIF format. The PNGs you can use to create just about any 32-bit icon resource (we'll get to that later). The 8-bit GIFs will need some touch up. And this brings us to our next tool.

Adobe Photoshop CS

Are you surprised? I hope not. With Illustrator, our need for Photoshop is largely diminished these days, but it's still necessary for many tasks, especially when you're required to create clean up those 8-bit icons (GIFs, ICOs, BMPs, etc.).

We open our 8-bit GIFs (exported from Illustrator) into Photoshop, zoom in as close as possible, then use the eraser and pencil to clean up the icon. Then we simply save the GIF again. There's not a whole lot of magic here, just good ol' fashioned hard work.

Once the GIFs are complete, we're left with a clean set of both 32-bit (PNG) and 8-bit (GIF) images. If you're using the icons one the web, these formats should do the trick. However, if you need these icons for a desktop application, chances are you'll need a different format. We use several tools to help us make this next step.

Axialis IconWorkshop

IconWorkshop is a Windows-only application. We keep a Dell laptop and/or Virtual PC handy simply for tasks like converting PNGs to Windows ICO files. And IconWorkshop is our app of choice for converting large quantities of PNG files into ICOs. It's batch features are excellent, and it saves us a boatload of time.

IconBuilder Pro

For creating Mac icons, there's no easier tool than IconBuilder Pro, from IconFactory. With this amazing Photoshop plug-in (for both Mac and Windows), its terribly easy to save Mac and Windows icon resources directly from you PNG and GIF source art. As of this writing, it doesn't have any batch-processing features, which can make some tasks a little tedious. However, its ease-of-use largely makes up for this. In addition to IconBuilder, we'll also use Photoshop's Actions feature, as well as some OS X Terminal commands to speed up the creation of large quantities of Mac icons.

GIF Movie Gear

Finally, for certain tasks we'll also use GIF Movie Gear to aid in the creation of Windows ICO files. It's completely different from IconWorkshop, but when used together, they can be a killer combo. Again, this is a Windows only application.

ResEdit

No conversation about icons is complete without mentioning ResEdit, the classic 8-bit resource editor for your vintage Mac. We don't touch ResEdit much, but Firewheel artist, Brian Brasher, recently dusted it off, installed Classic, and began work on a new collection for IconBuffet. Look for its release soon.

In Conclusion

As you can see, we use a variety of tools to get the job done. In the end, tools are only as valuable as the craftsman who is using them. In the right hands, however, the results can be amazing. We've found the above to be essential to our creative process.

Currently, automation is our Holy Grail. Creating the artwork for icons is not that different from illustrating for print. Taking that artwork and creating icon resources with multiple resolutions and sizes—in a handful of file formats—is the chore. Gratefully, with three obsessive icon designers at Firewheel, we've come to find solutions to many of our problems.