: How to resize icon sets in Photoshop? When looking online for icons to use on my websites, I often find very well designed free icon sets. However, often these icon sets are only available

@Hamm6457569

This particular set is composed of shapes and text, so resizing is not going to impact quality, but you can't just downsize these icons. An icon is a special kind of infographic. Its purpose is to communicate easily-recognized information at any given size, so your first step, before you start scaling anything, is to identify what parts of the icon carry the information. These must remain legible, the rest is disposable.

In this case, the circle shapes don't carry any information, but in several cases their colors do, so you can't eliminate them. You can scale them freely, though. The graphical elements in the circles carry the vital information, so you must treat them more carefully.

Here's how to scale this set from 48 px to 24 px, working from the PSD:


Open the layer set for one of the icons. Let's pick the Google+ icon.
Select the circle and choose Edit > Transform > Scale. Be sure that the center point in the Transform control proxy is selected, and toggle the link between the W and H fields so your scaling is proportional.





Enter 50 in the W or H field and press Enter/Return.


At this point, your circle is 24 px in diameter, but the "g" and the "+" are too large.


Select both the "g" shape layer and the "+" text layer, and choose Edit > Transform > Scale as before, but this time, enter 80 in the W or H field and press Enter/Return.
Nudge the "g+" layers to center them in the circle.


This reduced icon still conveys the same information clearly, but is the size you need and will be consistent with the rest of the set when you have scaled them.

Treat the rest of the icons similarly. The circles define the boundaries, so they are all scaled 50%. The amount that you scale each graphic will vary (the Skype icon works better at 75% than 80%), so you'll have to experiment a bit. Experience will teach you as you go.

Different sizes will need different proportions and appropriate scaling amounts. The important thing is to differentiate what is information and what is decoration. You can scale or throw away decoration; you must keep information legible.

Pictorial "icons" and icons that have a lot of detail can't simply be scaled. They must be simplified when reduced in size so that the information remains clear, so you must create a different icon for smaller sizes. The same principle is followed in designing logos -- what works well on a poster may need to be greatly simplified for a business card -- and in type design.

Vote Up Vote Down

@Voss6371140

The answer applies both to vector and to rasterized icons.

If quality matters, you can't.


Large icons contain more details. Those details, which are nice on a 128×128 icon, would be disturbing on a 32×32 icon; instead of helping visually identify the icon, they will do the opposite. For example, a large icon of a keyboard may contain every key of the keyboard. For a 16×16 icon, four keys is enough: either you draw four and users understand that those are keys, or you draw more and everything becomes flat.

Let's try to see what happens. I take the graphically excellent keyboard icon used in Windows 7:



Now, compare, side by side, the downscaled icon on the left, and the icon I resized in Photoshop from the larger one:



The one on the left is pretty clear. On the right, I believe it's a strangely shaped PDA with a large screen, two buttons at the bottom of the screen and one large button at the very bottom. Let's see what happens when we go to an even smaller scale:



The icon on the left, used by Windows 7, is pretty clear, despite the low resolution. The icon on the right, the resized version of the large one, is completely meaningless: it might be a PDA, or a silver box, or anything else. Actually looks like PF-19686592 calculator for me.


Other factors than the object detail level must be taken in account:


a shadow, for example, is nice to have on a 64×64 icon, but the same shadow will look stupid on a 16×16 favicon.
the object may be rotated to be in perspective when the icon is large. When it's tiny, draw it flat.
the number of objects must decrease when the size decreases. For example a large icon of a notepad can feature a notepad with a pencil. On a smaller icon, there is no enough place to draw a pencil in a way it does not cover the notepad, and is recognized as a pencil at the same time.


Those rules are actually followed in Windows XP icons.

This means that if UX and design quality matters, you can't just scale down an icon and expect it to be as clear as the original one. Considering the icon set you link to in your question, you obviously don't want to keep a circle around the icon for 24×24 icons: remove the circle, and keep only the content.

Let's see what happens. This image:



becomes:



At the left, I removed the circle. At the right, I just scaled down the original image. Can you tell me what you see on the right side?

If quality doesn't matter, you just resize the image.

To achieve better quality, you may still want to:


Keep the same ratio (obviously),
Resize by dividing by multiples of two: from 128×128, you can get 32×32, but creating a 41×41 icon may give weird results,
Try with different resize algorithms. I expect lanczos working better, but maybe not for every icon. Sharpening may also increase or decrease the quality.

Vote Up Vote Down

@Steve758

I always do my icons in a vector format (using Illustrator) - in that way I can just export my art in any desired size, and any desired format. Well, not completely true, since I have to adjust the icons for pixel alignment. CS5 does a good job, but it doesn't cover up all the problems...

In photoshop, since you are using pixels, it will give you the best result if you develop your icons in the largest format you will need, and then downsize it. You should also use "unsharp mask" to make the downsized images crisper since they loose sharpness in the downsize algorithm.

Vote Up Vote Down