Designing A Rocket Icon In Adobe Fireworks

Designing A Rocket Icon In Adobe Fireworks

• By Fabio Benedetti


• September 23rd, 2014


• TutorialsWorkflow


• 0 Comments

Many people know that Fireworks is a good apparatus for web design¹, prototyping² and UI design³. But what about idol design? Icon pattern is a really specific ability that overlaps illustration, shade pattern and, of course, visible design. An idol engineer needs to know lighting, proportions and, many importantly, a context of a idol itself.

The BBC published an engaging essay about idol pattern and skeuomorphism⁴ one year ago, patrician “What Is Skeuomorphism?⁵” It’s really value reading since it explains since icons mostly simulate a genuine universe and a meditative behind it.

Another flattering engaging review is “What We Can Learn From Early Icon Design?⁶” It is a discerning retrospective of idol pattern and mentions, among other things, one of a many famous idol designers ever, Susan Kare⁷.

I remember reading an essay a few years ago that really shabby my career as a designer. Some points in a essay were obvious, though they done me consider about icons in a opposite way. Sometimes, a best approach to learn is from mistakes we make or from mistakes that people some-more gifted than we have made. “10 Mistakes in Icon Design⁸” is a good review and a useful apparatus for anyone who wants to learn some-more about icons and idol design. It is comparatively old, dating behind to 2008, though some of a examples are still flattering sound. The essay stresses a significance of coherence in an idol set and how combination works (i.e. how many elements to use in an icon), and it gives critical tips on traffic with metaphors, with unsentimental examples. This is pivotal in a job.

Is a idol we are conceptualizing going to be used on a web? Perhaps in a mobile app? In a toolbar? Somewhere else? These are a questions that idol designers contingency asks themselves before starting work on a project. The answer will impact a icon’s details, reflections, shadows, credentials and many other features.

1. Fireworks And Icon Design

Why Fireworks?

I have been regulating Fireworks now for 9 prolonged years, formulating work that ranges from web pattern to formidable UI pattern and, in a final few years, idol pattern as well. Fireworks has valid to be glorious program for all of these tasks since it combines absolute matrix and bitmap modifying tools.

I am not going to revisit a long-running debate⁹ about what is a best apparatus for UI pattern (which customarily comes down to Photoshop and Fireworks). Above all, we am not a Fireworks evangelist. Ideas matter most — a choice of apparatus is adult to a designer. Nevertheless, I’ve beheld that many people blink a energy of Fireworks, dismissing it as second-tier software. Having a immeasurable volume of knowledge with both Photoshop and Fireworks, we can usually respond that, for speed and pixel-perfection, Fireworks is faster for shade design. It’s precise, easy to use and straightforward. That’s since we have picked it as a categorical apparatus in this step-by-step educational on idol design.

A Word About Icon Design

My thesis behind in university was on symbols, icons and pictograms. This theme was one of my favorites behind afterwards (and still is). What definitely preoccupied me was that we could convey a summary with an idol or symbol. Words aren’t indispensable for an idol to be accepted by a infancy of cultures in a universe (at least, if a idol is relevant). Designing for a destiny means accurately that. I’ve always found a thought of a noted embellishment to be interesting. Designing icons requires a lot of formulation and thinking: As in sketch and illustration, a engineer is obliged for selecting elements that will make a embellishment some-more or reduction relevant. Good icons spin opposite aspects of enlightenment into something distinct in many cultures and countries.

One of a many successful idol metaphors in complicated story is a desktop¹⁰, used in handling systems, where a desktop is treated like a place to reason documents, folders, archives, cinema and files. (We’ll speak about idol pattern in fact in a following paragraphs. If we like a topic, you’ll find some useful links in a “Further Reading” territory during a bottom of this article.)

Note: In this tutorial, we will try some ubiquitous beliefs that describe some-more to skeuomorphic pattern than to prosaic pattern (light, shadow, distance and proportion, etc.). we will also cover some ubiquitous techniques that we follow in idol design. So, by all means, collect adult your favorite apparatus to follow along, either it’s Illustrator, Sketch or Photoshop. I’ll be regulating Fireworks to uncover a core intensity and to pull parallels with other matrix tools. (This is my initial educational for Smashing Magazine. we devise to write a integrate of some-more articles that try idol pattern and a facilities of dual other renouned tools, Illustrator¹¹ and Sketch¹².)

Files for This Tutorial

To follow this educational fully, download a idol we will be designing:

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

This layered Fireworks PNG record will assistance we follow a routine step by step. The record is meant for reference. we inspire we to replicate a stairs in a new file, with a vacant canvas. Have fun!

¹⁴

Let’s get started!

All Vector? Yes!

We won’t be regulating any raster (i.e. bitmap) images. Everything will be combined with matrix shapes and live filters. This means we will be means to simply adjust a final picture to opposite sizes and resolutions.

Fireworks supports shade illustrations of adult to 6000 × 6000 pixels (actually, even adult to 10,000 × 10,000¹⁵), that is some-more than adequate for a super-large HD displays of today’s mobile and desktop devices. And it also exports files to SVG¹⁶ format (with a assistance of a giveaway extension¹⁷ that was lonesome in a new article¹⁸ on Smashing Magazine). Using SVG as an exporting format gives we a lot of flexibility. You can use a ensuing picture right on a web or revise it serve with flattering high fealty in many other striking pattern tools, including Adobe Illustrator CS6 and CC.

Scale your matrix illustrations in Fireworks to any size, while progressing peculiarity 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 https://dl.dropboxusercontent.com/u/2337409/Rocket-Icon-Design.fw.png


14. 14 https://dl.dropboxusercontent.com/u/2337409/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

↑ Back to topShare on Twitter

Designing A Rocket Icon In Adobe Fireworks