Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Designing A Rocket Icon In Adobe Fireworks

Many people know that Fireworks is a great tool for web design1, prototyping2 and UI design3. 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 skeuomorphism4 one year ago, titled “What Is Skeuomorphism?5” 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?6” It is a quick retrospective of icon design and mentions, among other things, one of the most famous icon designers ever, Susan Kare7.

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 Design8” 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? Link

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 debate9 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 Link

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 desktop10, 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, Illustrator11 and Sketch12.)

Files for This Tutorial Link

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

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!

Download the layered Fireworks PNG file [Rocket-Icon-Design.fw.png]14

Let’s get started!

All Vector? Yes! Link

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,00015), which is more than enough for the super-large HD displays of today’s mobile and desktop devices. And it also exports files to SVG16 format (with the help of a free extension17 that was covered in a recent article18 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.
Scale your vector illustrations in Fireworks to any size, while maintaining quality and detail.

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2013/08/26/mojo-motors-responsive-redesign-with-adobe-fireworks-part-1/
  2. 2 https://www.smashingmagazine.com/2012/07/03/interactive-prototypes-timesavers-adobe-fireworks/
  3. 3 https://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 https://www.smashingmagazine.com/wp-content/uploads/2014/09/Rocket-Icon-Design.fw.png
  14. 14 https://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 https://www.smashingmagazine.com/2013/11/06/even-more-fireworks-extensions-optimized-design-workflow/#exportcommands
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

Overview of this article


Page 1/5»

↑ Back to top Tweet itShare on Facebook

Advertisement

Fabio Benedetti is a creative Italian Designer and design enthusiast. He moved to the UK in 2007 after studying Languages and Humanities Computing at University of Pisa in Tuscany. He is now working as Visual Designer at Apple. His fields of expertise include UI design, Icon design and Software design. He also creates characters illustration and branding for various clients in his spare time. You can find some of his latest works on his Dribbble Page.

  1. 1

    Very interesting and detailed read! It’s been a while since I last used Fireworks, can’t argue that it’s a powerful tool. Looking forward for your next articles!

    6
    • 2

      Fabio Benedetti

      September 24, 2014 10:24 am

      I think you could achieve the same results with other tools, like Adobe Illustrator or Sketch, however I think Fireworks gives you a quicker a simpler approach for screen design, especially for icon design and ui design. I think we’ll have some more article covering these topics soon!

      5
  2. 3

    Thank you! What a fantastic tutorial! Please do more :)

    7
  3. 4
    • 5

      Yeah, it’s true, no further development… Nevertheless, in the next few months (or even a year or two), I think Fireworks will be okay. :-)

      Meanwhile, we should look for a new app that could possibly replace the powerful workflow that Fireworks always offered to user interface designers.

      9
    • 6

      No need for further development. Fireworks reached perfection.

      4
      • 7

        Fabio Benedetti

        September 26, 2014 1:17 pm

        You always need improvements, but I never found Fireworks was buggy or unstable. Also some great extensions were released in recent years, that made this tool excellent.

        3
  4. 8

    Thanks … i enjoyed reading this article it’s really useful, i will be waiting the next article.

    7
  5. 9

    Good to see other Fireworks users are still out there.

    9
  6. 10

    My Brushes is the only digital paint tool to work on UNLIMITED size canvas and PLAYBACK every drawing stroke on Mac OS X. mybrushes-app.com/MyBrushes-MAC.html

    -8
  7. 11

    Leepe Tutorials

    September 24, 2014 11:09 am

    Great work and Good Content.. Thumps UP.. :)

    3
  8. 12

    Great article! Thank you!

    I started using Fireworks years ago. Since then I love it!
    It is not only better product for graphics, icons and especially mobile UI, it also saves you more space on your machine. Fireworks source files are much smaller than those of Photoshop and Illustrator.

    My only problem with Fireworks is that it doesn’t save vector pdfs.

    And I just can’t accept the fact that Adobe has stopped it. :)

    9
  9. 13

    Hi!

    Am about to start trying out the tutorial but the link to the png file (at dropbox) is invalid :(

    0
  10. 15

    Hail fireworks!

    1
  11. 16

    This is simply one of the best Fireworks vector tutorials on the web. I can’t imagine the time it took getting those screenshots and putting together such easy and pleasant descriptions.

    I have been a Fireworks user myself since 2002 and there’s a lot I’ve done with the app, but nothing this fantastic. I usual turn to Cinema 4D to create 3d images in a bid to get perfect lights and reflections, but I’m glad you have shown me how to get something close in my well loved Fireworks.

    About Adobe discontinuing the program, I was saddened, like most users but I think it came close to perfection just before the end. The hundreds of extensions out there and the guys who remain committed to developing more will keep Fireworks relevant for years to come.

    And for guys like Fabio who make these unbelievable designs and tutorials, heaven will keep a special place for you all. Once again, many thanks!

    5
    • 17

      Fabio Benedetti

      September 30, 2014 11:35 am

      Wow @Farriel A, this is a super lovely comment! :) I am glad you enjoyed the tutorial and the illustration. There will be more stuff coming soon :)
      Thanks so much!

      2
  12. 18

    Great tutorial!
    P.S. : If somebody wants a flat version of this icon you can download it here:
    http://freeiconmaker.com/template/kFQ0_DIusja_71bICAOPWZVWBxNmy2n2Vk2YwcFD-aI

    0
  13. 19

    So great to see a Fireworks tutorial! I had never really used it before, but kept hearing that for a web designer it’s much better to use, so I wanted to dig in. I’m looking forward to seeing more Fireworks tutorials here especially say for website designing/template designing and such. Can we expect that?

    Thanks for sharing!

    3
  14. 20

    The rocket is amazing…

    I´m a front end designer for online desktop and mobile apps and apart from tons of html, css and javaScript I use Fireworks more than 60% of my time, Is an amazing tool, fast and lightwave, and love it when you need to create pixel-perfect icons.

    I miss how bad it looks in a retina display, hope adobe makes an update that looks like the others adobe”CC” programs

    3
  15. 21

    Mark Lindberg

    April 3, 2015 6:26 pm

    Love this article! So detailed and well explained. The icon looks awesome! Great job!

    0

↑ Back to top