Webmasters Gallery

Many people know that Fireworks is a great tool for web design¹, prototyping² and UI design³. But what about icon design? Icon design is a very specific skill that overlaps illustration, screen design and, of course, visual design. An icon designer needs to understand lighting, proportions and, most importantly, the context of the icon itself.

The BBC published an interesting article about icon design and skeuomorphism⁴ one year ago, titled “What Is Skeuomorphism?⁵” It’s definitely worth reading because it explains why icons often reflect the real world and the thinking behind it.

Another pretty interesting read is “What We Can Learn From Early Icon Design?⁶” It is a quick retrospective of icon design and mentions, among other things, one of the most famous icon designers ever, Susan Kare⁷.

I remember reading an article a few years ago that definitely influenced my career as a designer. Some points in the article were obvious, but they made me think about icons in a different way. Sometimes, the best way to learn is from mistakes you make or from mistakes that people more experienced than you have made. “10 Mistakes in Icon Design⁸” is a good read and a useful resource for anyone who wants to learn more about icons and icon design. It is relatively old, dating back to 2008, but some of the examples are still pretty sound. The article stresses the importance of consistency in an icon set and how composition works (i.e. how many elements to use in an icon), and it gives important tips on dealing with metaphors, with practical examples. This is key in our job.

Is the icon you are designing going to be used on the web? Perhaps in a mobile app? In a toolbar? Somewhere else? These are the questions that icon designers must asks themselves before starting work on a project. The answer will affect the icon’s details, reflections, shadows, background and many other features.

1. Fireworks And Icon Design

Why Fireworks?

I have been using Fireworks now for nine long years, creating work that ranges from web design to complex UI design and, in the last few years, icon design as well. Fireworks has proved to be excellent software for all of these tasks because it combines powerful vector and bitmap editing tools.

I am not going to revisit the long-running debate⁹ about what is the best tool for UI design (which usually comes down to Photoshop and Fireworks). Above all, I am not a Fireworks evangelist. Ideas matter most — the choice of tool is up to the designer. Nevertheless, I’ve noticed that many people underestimate the power of Fireworks, dismissing it as second-tier software. Having a vast amount of experience with both Photoshop and Fireworks, I can only respond that, for speed and pixel-perfection, Fireworks is faster for screen design. It’s precise, easy to use and straightforward. That’s why I have picked it as the main tool in this step-by-step tutorial on icon design.

A Word About Icon Design

My dissertation back in university was on symbols, icons and pictograms. This subject was one of my favorites back then (and still is). What utterly fascinated me was that you could convey a message with an icon or symbol. Words aren’t needed for an icon to be understood by the majority of cultures in the world (at least, if the icon is relevant). Designing for the future means exactly that. I’ve always found the idea of a memorable metaphor to be interesting. Designing icons requires a lot of planning and thinking: As in drawing and illustration, the designer is responsible for choosing elements that will make the metaphor more or less relevant. Good icons turn different aspects of culture into something comprehensible in many cultures and countries.

One of the most successful icon metaphors in modern history is the desktop¹⁰, used in operating systems, where the desktop is treated like a place to hold documents, folders, archives, pictures and files. (We’ll talk about icon design in detail in the following paragraphs. If you like the topic, you’ll find some useful links in the “Further Reading” section at the bottom of this article.)

Note: In this tutorial, we will explore some general principles that relate more to skeuomorphic design than to flat design (light, shadow, size and proportion, etc.). I will also cover some general techniques that I follow in icon design. So, by all means, pick up your favorite tool to follow along, whether it’s Illustrator, Sketch or Photoshop. I’ll be using Fireworks to show its core potential and to draw parallels with other vector tools. (This is my first tutorial for Smashing Magazine. I plan to write a couple of more articles that explore icon design and the features of two other popular tools, Illustrator¹¹ and Sketch¹².)

Files for This Tutorial

To follow this tutorial fully, download the icon we will be designing:

• Download Rocket-Icon-Design.fw.png¹³, a layered Fireworks PNG file

This layered Fireworks PNG file will help you follow the process step by step. The file is meant for reference. I encourage you to replicate the steps in a new file, with a blank canvas. Have fun!

¹⁴

Let’s get started!

All Vector? Yes!

We won’t be using any raster (i.e. bitmap) images. Everything will be created with vector shapes and live filters. This means you will be able to easily adapt the final image to different sizes and resolutions.

Fireworks supports screen illustrations of up to 6000 × 6000 pixels (actually, even up to 10,000 × 10,000¹⁵), which is more than enough for the super-large HD displays of today’s mobile and desktop devices. And it also exports files to SVG¹⁶ format (with the help of a free extension¹⁷ that was covered in a recent article¹⁸ on Smashing Magazine). Using SVG as an exporting format gives you a lot of flexibility. You can use the resulting image right on the web or edit it further with pretty high fidelity in many other graphic design tools, including Adobe Illustrator CS6 and CC.

Scale your vector illustrations in Fireworks to any size, while maintaining quality and detail.

Footnotes

1. 1 http://www.smashingmagazine.com/2013/08/26/mojo-motors-responsive-redesign-with-adobe-fireworks-part-1/
2. 2 http://www.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
3. 3 http://www.smashingmagazine.com/2012/05/07/refining-designs-adobe-fireworks/
4. 4 http://en.wikipedia.org/wiki/Skeuomorph
5. 5 http://www.bbc.co.uk/news/magazine-22840833
6. 6 http://www.creativefreedom.co.uk/icon-designers-blog/what-we-can-learn-from-early-icon-design/
7. 7 http://www.kare.com/
8. 8 http://turbomilk.com/blog/cookbook/icon_design/10_mistakes_in_icon_design/
9. 9 http://ivomynttinen.com/blog/the-endless-fireworks-vs-photoshop-battle/
10. 10 http://en.wikipedia.org/wiki/Desktop_metaphor
11. 11 https://www.adobe.com/products/illustrator.html
12. 12 http://www.bohemiancoding.com/sketch/
13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/09/Rocket-Icon-Design.fw.png
14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/09/Rocket-Icon-Design.fw.png
15. 15 https://graphicdesign.stackexchange.com/questions/9440/adobe-fireworks-cs6-maximum-image-dimension
16. 16 https://en.wikipedia.org/wiki/Scalable_Vector_Graphics
17. 17 http://fireworks.abeall.com/extensions/commands/#Export
18. 18 http://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/#exportcommands

The post Designing A Rocket Icon In Adobe Fireworks appeared first on Smashing Magazine.