Designing great app icons isn’t a solo endeavour on the part of a designer. Icons require careful feedback and consultation between clients and designers at each stage of development in order to ensure the final product is as good as it can be. Let’s start by talking about the idea of a ‘final’ product. Obviously,… Read more »
What to consider when designing Icon Colour Schemes We have looked at accessible icons and discussed the importance of colour for establishing an icon’s meaning and purpose. Although our earlier article focused mostly on design for visually impaired users, the basic concept can be extended to all users of icons. Colour is a key identifying… Read more »
Flat icon design does not mean boring – Dribbble Icon Design Examples Indeed, flat design can be beautiful and charming, attractive in its purity and simplicity. In a context of an over-abundance of information products, flat design can appear as an island of calm, stability and clarity. Many designers use the method of “almost” flat… Read more »
Despite the recent trend towards Flat Icon design, 3D icons are here to stay and a jolly good thing too. I am all for a bit of variety, but the thought of Flat Icon design being the only way to go did concern me for a while. I am very happy to see the evolution… Read more »
In this Illustrator icon design tutorial we look at creating a small set of ‘almost flat‘ icons from scratch. First, open the Adobe Illustrator and create a new document. Then create a rounded rectangle using Rounded Rectangle Tool with: Width:200px; Height:155px; Corner Radius:10px. After that create another Rectangle with: Width:36px; Height:36px; Rotate it 45°. Unite… Read more »
So here it is… I am very slowly falling in love with Android. This romance is still in its early stages. I am still metaphorically stealing glances from afar, working my way up to my ‘big move’. You see, I have been having a lukewarm affair with iOS for some years now. Never an Apple… Read more »
Although a good proportion of the icon design projects we work on follow an established icon style, such as those found in mobile Apps like iOS and Android or desktop software icons like Microsoft Office and Windows 7, the greatest demand is generally for custom icons in a unique style. Despite the shift in popularity… Read more »
Here is another great comic style illustration from David, one of my favourite Icon Designers at Creative Freedom. This time we have a Super-Villain with a decidedly bad temper which I am sure fans of the 2000 A.D. Comic will have no trouble recalling. Comic Style Icon DesignJudge Dredd Icons & IllustrationAs a kid I… Read more »
A look back at some of our historical Desktop Icon projects Before the advent of mobile devices a desktop icon was either a Windows application icon or a Mac application icon, both being used as graphical short-cuts to launch a software application or utility. Nowadays we have a plethora of mobile devices, tablets and other… Read more »
The evolution of the flat icon, to the ‘Almost Flat’ Icon Style OK, it’s time to nail my colours to the wall. Sorry, but I don’t like the flat icon style. I think they are boring and bland. When they first started appearing and even worse started becoming popular, I did get a little worried… Read more »
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:
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:
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.
Apply a 1 pixel stroke. I chose a ‘steel grey’ colour for the stroke and filled the shape in black.
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.
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.
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.
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.
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).
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.
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.
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…
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.
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.