Intro

Creating icons is one of the biggest challenges in terms of visual design nowadays. An icon has the power to communicate something very quickly and in order to do that, it needs to be thought out and designed with the utmost accuracy.

This tutorial will show you how to create a 3D-looking icon, adding fine details and shadows, using textures and making the illustration very realistic with gradients and lights. At the end of the tutorial it will be hard to say which software you used to create the icon because of its depth and stunning look and feel.

Despite not being updated in Adobe’s CC launch last summer, designer Fabio Benedetti says that Fireworks is the best design tool for creating icons such as these – and you still get Fireworks CS6 with your Creative Cloud subscription. However, you can also achieve the results shown in this tutorial in Illustrator.

Fabio says that he finds Fireworks offers the best mix of tools for combining raster and vector graphics easily. Fireworks also allows you to achieve pixel-perfect results in a relatively short time – its simple interface makes the design workflow pleasant and straight-forward.

Time to complete

4 to 5 hours

Software needed

Fireworks CS6 or later, Photoshop CS6 or later, Illustrator CS6 or later

Tutorial files

The supporting files for this tutorial can be downloaded from here