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 Lead Visual Designer at Alfresco. His fields of expertise include UI design, Icon design and Software design. He also creates characters illustration and branding, has been doing work for a wide range of clients, including BT, Intel, Visa and Thomson Reuters.

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

Next Step »