Keeping things crisp when Scaling Icons

During a large custom icon design project with multiple application icon and interface icons, it can sometimes be a daunting task having to create multiple size versions of the same icon – assuming you’re working with pixel-based ‘bitmap’ raster icons. Indeed, in the majority of instances, it is not as simple as starting with the largest icon and scaling down, or is it?

With some tweaking and a keen eye, it is possible to use this method to a certain extent but you’ll still need to put grease to the elbow. Achieving the result you want does not happen by magic nor can it defy pixel logic. For instance, there’s very little chance you could start with a 256 pixel icon and bring it down to 16 pixels with less work than completely redrawing it. In a fair number of instances though, it may well be possible to use a 48 pixel ‘master’ icon as a base for 32 and 16 pixel icons by scaling down and ‘pixel tidying’.

This simple scaling down of a 256 pixel icon doesn’t provide effective results.

Before reading further into this scaling icons tutorial it is worth bearing in mind that we are assuming the use of Photoshop, but the methods will work in any respectable raster/pixel-based editing software. Of course, the shortcuts and interface terminology may vary.

Drop Shadows

In almost every instance, better results can be achieved by removing background drop shadows from the master icon (background refers to overall shadows for the artifacts within the icon that will usually make contact with the background) as they really do have a detrimental effect on the line work in smaller icons when scaled down. The icon’s drop shadow should be reapplied after resizing is complete if required – it’s important to allow for this when scaling down – For example, if you require a drop shadow to be reapplied to a freshly scaled down 16 pixel icon, you should scale the artifact (without its drop shadow) down to 15 pixels maximum if adding a 1 pixel shadow.

It may also be beneficial to remove other effects such as strokes, bevels, inner shadows, glows, small details. etc. Depending on the style, colours, detail and other attributes of the icon. A similar process of removal and carefully judged re-application once the icon is resized should be observed. A caveat applied to this (and most of this tutorial) is that it’s trial and error – some actions will work like a dream on certain icons and whilst not at all on others. ctrl+alt+z is your friend.

Icon Resizing

There are several ways to resize depending on the source files you have, the complexity of the icon and personal preference, amongst other variables. It is usually advisable to flatten the layers of the icon, or remove any effects (and reapply later) before resizing to avoid any effects scaling poorly – in most cases you really just want to be working with pixels at this stage, rather than effects. If the icon contains multiple artifacts or glyphs, flatten each of those separately and recompose after tidying (more on that later).

• ‘Image Size’. Assuming the canvas would be the exact size of the icon to start with, this would usually be the method employed to an already completed icon. Using this would perhaps suggest it’s not your original source file or you have no layered version and had previously flattened the icon by merging layers (in error of course, I mean, who would deliberately do such a thing?). This icon tutorial is written with the assumption that you do have the layered original. However, this may work perfectly well and it is an easy process: activate the dialogue using ‘ctrl+alt+i’ and simply input your desired size in ‘Pixel dimensions’ (Photoshop employs various options for this in a dropdown menu, with ‘bicubic sharper’ as the suggested method for reduction).
• Using ‘Scale’ input. Activated using ‘ctrl+t’ (or edit>transform>scale), this method allows you to input the desired pixel dimensions into fields which will resize the selected objects and layers. This process can sometimes yield good results, sometimes not; but it is worth a shot. Quite often though, the objects detail is lost with the scale ignoring whole pixel integers and blurring fine detail.
• Manual ‘Scale’. This method, activated as above, involves dragging the selection handles to manually scale artifacts and is usually my preferred method. It allows a ‘best hit’ for scaling to the closest pixel integer as you can carefully keep an eye on the redrawing when scaling, therefore giving a cleaner edge or detail. Use ‘shift’ to scale in proportion – however sometimes scaling vertically and horizontally separately gives more control to achieve whole integer edges.

Try to use which ever method works best for you, and gives you the best results for a particular icon. You may find yourself frequently using all three. Many icons are comprised of multiple artifacts, eg. a document and a glyph of some description, be it a star, a ‘+’ or an ‘x’. Sometimes these icons require each artifact to be scaled separately before recomposing them into a single icon again. This will give much better control of ‘pixel perfect’ dimensions and reduce the amount of tidying necessary to achieve the perfect finished icon. It’s also a very good advocate for keeping your master icon in (sensible) layers and folders so you can quickly and easily determine which layers belong where.

• The elements of the icon were separated before scaling
• The ‘A’ device was scaled
• The graph & icon background were redrawn

Icon Tidying

Once the master icon has been scaled down the areas to concentrate on tidying initially are any hard edge lines, as these will almost always need attention because the downsizing will leave former hard edges blurry, as they are no longer on whole integers – sometimes this may be the only area that needs attention in order to bring the icon up to standard. Always remove blurriest parts of the lines if at all possible, and concentrate on ‘hardening up’ the edges that retain the most colour, or are least transparent – I usually use the ‘Rectangular Marquee selection tool’ (shortcut ‘m’) to select areas that need to be re-filled with a hard edge. It pays to have the master close by for comparison and for eye-dropper purposes, as colours can change and often become a little murky when resizing, due to the blurring. It goes without saying that you’ll be working close in on these small icons, but after pretty much every step be sure to view at ‘actual pixels’ size to view the icon at its native size (ctrl+1). You may find that this initial step of tidying the hard edges produces a perfectly usual icon, more often that not though, further work may be required.

Of course, this is not an exact science and is wholly dependent on the style, detail, colours and other factors, so it’s pretty much a ‘suck it and see’ affair. Fear not though as there’s always ctrl+alt+z.

The icon in all sizes; 256, 48, 32 and 16 pixels. In each case the ‘A’ device was scaled, with the background and graphs requiring a redraw.