Sunday, 9 March 2014

Play | Icon design: Wheelie bin

I have occasionally done some work designing or adjusting icons for a leading Norwegian software developing company. They make geographical information systems which are used by many municipalities (so if you work for a 'kommune' in Norway, there is a good chance you have clicked on some of my work!).

I usually create the icon in 128 x 128 pixels first (the largest size, then scaling down to 64 x 64, 32 x 32, and 16 x 16 px respectively, ensuring the icon is still looking crisp and clear at every size. This often means thickening the lines a bit at every step, and, especially at the smallest size, simplifying the design.

The original icon package used by the company has a three-dimensional, slightly cartoonish feel to it, with clear colours and bold highlights. It is of course important that any additional icons created for them fit in with the rest.

The icon set I'm probably the most happy with is a collection of wheelie bins.


Creating the wheelie bin

I first found some images of the type of wheelie bins used in Norway, and one in the right angle at that:

Using Photoshop, I then started tracing every different surface area with the Pen Tool, set to Shape Layers:

After I had a complete bin, I added the appropriate Layer Styles to each shape. First Gradient Overlay to add the main depth:

Then, a combination of Drop Shadow, Inner Shadow, and Bevel and Emboss, tuning each to create just the right amount of reflection, highlight, and shadow:

Lastly, larger stylised shadows and highlights in the style of the main icons was added to the whole bin:

To make the icon stand out from the background, I added a Stroke at the very end. Final result (blue version, in all sizes):



Because I used Shape Layers to create the different parts of the bin, I could easily change the colours of those layers (simply double click the layer in the layers window and pick another colour), thereby creating different types of colour-coded bins (e.g. blue for paper, brown for organic waste etc.):

Thanks for watching!

No comments:

Post a Comment