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 on a single size - for instance the icon set http://designdeck.co.uk/a/1245) only comes in a 48x48px size.

What would be the best approach to resize this icon set to 24x24px or 32x32px in Photoshop?

I haven't been able to find any good tutorial for newbies online. Thanks

Answer

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.