Designing a Button Style Custom Icon

This tutorial will explain the process of designing and creating an icon from one of my favourite sets of custom icons. This dark, metallic and slightly glossy set was produced for a ‘button-type’ custom icon design to be used in a PDA driven software application. The icons all feature the same ‘button’ background  – which is what we will focus on – and have quite simple, slick graphics and symbols over the background. The sample icon used in this tutorial is 60 x 60 pixels, although some of the set was also produced in a 35 x 35 pixel size.

The Button-style Background

I really like the perforated effect of the button, with the highlighted bevel, and it’s the most important part of this particular icon set. Here’s how they were made: first thing to do is generate the perforated dots pattern. I did this by producing a row of dots with even spacing, duplicating the row, shifting down and shifting it along the X axis until dots on opposing rows were halfway along each other, or another way to specify the actual shift distance is to move the row the sum of circle width plus the space between, divided by two. I generated the graphics for this in Illustrator, but you could use Photoshop, Fireworks or any half-decent graphics software. You should hopefully end up with something like this:

How to design an icon

I then copy and paste this graphic into Photoshop from Illustrator, so I can scale it without worrying about degrading the artifact. So, now we have the perforated pattern, we need the button to use it on. Here’s a step-by-step guide:

  1. Draw a square, 58 x 58 pixels with radius corners using the shape tool. To ensure sharp edges draw the shape viewing at 100% size, or use guides, otherwise the edges will more than likely be blurred due to the fact that the shape will not start on a whole pixel integer.
  2. Apply a 1 pixel stroke. I chose a ‘steel grey’ colour for the stroke and filled the shape in black.
  3. To add the bottom right corner metallic bevel to the icon background, I duplicated the square shape and removed all effects and set the fill to 0% in the layers panel. A stroke of 4 pixels was added with the position dropdown set to ‘inside’; logically this applies the stroke from the edge of the shape inwards, so that the original 1 pixel stroke is still visible (on another copy of the shape). To achieve the metallic look, choose ‘gradient’ fill type on the stoke properties and use black and a lighter grey than the 1 pixel stroke (in this case, steel grey). Use the angle and scale options of the gradient settings to tweak and suit to taste.
  4. Now to add the perforation effect. Firstly, apply a fill colour – I used dark grey – and an inner shadow which is lighter to give the impression of light hitting the ‘lip’ at the bottom of the perforation holes. I’d suggest making just a 1 pixel hard edged shadow (basically as small as possible as the dots themselves are small). Make the perforated artifact layer in a group in the layers panels, then use the original round cornered square to make a mask of the folder – this will ensure that the about-to-be-faded edges of the perforation does not slyly exceed the dimensions of the button. The next step is to use the eraser to delete around the edge of the folder mask to soften the edges of the perforation.
  5. Finally, we’re going to add a highlight. Again use the background shape square to make a selection (ctrl+click the shape in layers panel), add a new layer on top of all others and fill white, use the circle selection tool to remove the lower half leaving a nice arc finish. I then use a gradient overlay with varying degrees of transparency but you can use the eraser to remove areas, although I find the former leaves you room for later changes. Voila! Hopefully you’ll have something that looks similar.

How to design a custom icon

With this stage complete you have the basis for the entire set of icons, with a clear and distinct graphical consistency throughout. This is a good way to have a strong identity for a custom icon set but it is not always practical, especially with smaller icons as usually the detail of the background or button uses too much of the very precious pixel real estate. Anyway, now time to add the icon to the button background…

Creating the Icon Subject

The house icon was produced in Photoshop but could be drawn in almost any graphics software. I drew it larger than required because at the time of development there was potential that it would be used on larger sizes (which incidentally, never materialised). I’m going to give brief steps to this, as really the icon could be anything at all, and I will show some more examples of the final set at the end of this tutorial.

  1. Draw the basic shapes: I used the shape polygon tool, so that I had the freedom to tweak angles without having to redraw – you can just move the control points around as you would in vector graphics software. Here you can see five basic shapes: roof top, roof return, front elevation, side elevation and doors and windows as one shape (as they will receive the same effects it saves a little time and effort to make them all on the same shape layer).
  2. Next up it’s time to add some colour, strokes and simple gradients. The key here is to keep it simple as final detail added after, such as highlights, will affect the icon as a whole so we will apply them once the basic colouring is complete to a layer that covers the whole icon.
  3. The final step is to add finer detail and highlights, such as the edge on the roof, the curved highlight and the highlights on the windows and doors.

How to design an icon

Compiling the Icon

Now scale the icon graphic to suit the button background, put in place and tweak as desired. I placed a dark shadow over the bottom left corner of the icon, and muted the colours to suit the rest of the set…

How to design a custom icon

Finally, here are a few other icons from the set also in the smaller 35 pixel size (see the Icon Scaling tutorial). I still really like these custom icons, even after a couple of years. It’s worth noting that the perforated effect is about at its limit in terms of small size – in fact there were one or two icons in this set that were required at 16 x 16 pixels – these used a steel grey stroke with a plain black button with no perforated pattern.

How to design a custom icon

Looking for delicious Custom Icons?

Professional custom designed App Icons, stand out in the App Store and get your App noticed. We have a team of 8 amazing Icon designers ready to transform your App.

Check out our Custom Icon Design service:

Custom Icon Design

Custom Icon

0 thoughts on “Step-by-step: How to Design a Custom Icon”

  1. Dan says:

    Any ideas for an icon to go with my website at http://BoqueteLots.com? We talk about travel, immigration and real estate ideas. Thanks!

    1. Hi Dan,

      That is a pretty open ended question but I would be happy to discuss your requirements, if you want to drop me an email.

      Cheers,

      Adam 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *