Even if you’re not a software developer, learning to create your own icons is a tremendously useful skill. You can give your computer a unique skin or provide your services to the community and the corporate world.
This is by no means a complete icon design tutorial. We’re just getting you started on the rudimentary basics – technicalities, a design checklist, and an icon design toolset.
Below are some specifications you should know concerning the icon format, most importantly image resolutions and file formats.
- 16 x 16 px * **
- 24 x 24 px
- 32 x 32 px * **
- 48 x 48 px * **
- 64 x 64 px
- 96 x 96 px
- 128 x 128 px **
- 256 x 256 px **
- 512 x 512 px **
The importance of size is further discussed below. For now, we’ll stick to the technical aspects.
Icons are always square. This means that a rectangular icon will either be stretched out or sized down to respectively fill the entire canvas or fit in it. Either way, highly rectangular icons stand out in a bad way. The following icon sizes are the most common in use:
Windows XP advises the use of 16 x 16, 32 x 32, or 48 x 48 resolutions*. If none are available , it’ll resize the the icon that’s closest in resolution, up to 256 x 256. With desktop resolutions rising ever higher, it’s advised to always include larger resolutions. The Apple ICNS format supports sizes 16 x 16, 32 x 32, 48 x 48, 128 x 128, 256 x 256 and even 512 x 512 **.
The Icon Design Checklist
There is not one tutorial to design the perfect icon, time and time again. Different themes and designs require different approaches, and the ‘current trend’ is in a state of constant flux. Below are three major pillars of icon creation that have proven true time and time again. If you’re new at designing icons, make sure to keep the icon checklist in mind at all time.
Above all else, icons need to be unmistakable. The relation to your application must be obvious to all, across time, culture and age differences. Fight the temptation to create flashy icons that bear no relevance, and stick with a simple, solid and obvious design.
Don’t see this as an obstacle for your creativity; icons can be beautiful and thought-provoking, but shouldn’t be open for interpretation (read: guesswork at the user’s end).
If you’re designing an icon set, keep the design uniform.
Make sure you’ve got a common thread that interconnects these icons and shows the synergy to the users; the whole needs to be bigger than the sum of the parts.
Icons are always created in multiple sizes. This affects the design in more ways than one.
For starters, icons must look good and recognizable regardless of the size. Take down the contrast around the sides to avoid jagged edges and make important details stand out enough to retain focus in the smallest implementation of the icon.
On a technical level, icons are best designed using vectors, images composed of endlessly scalable shapes, rather than a set composition of pixels. Nevertheless, if your resolution is high enough, bitmaps will do just as well.
The Icon Design Toolset
Photoshop is a great application to design icons. You’ve got (nearly) all the tools you need to create vector graphics or manipulate bitmaps, and apply complex effects and shading. Most importantly will be following tools:
The Pen tool allows you to create scalable vector graphics. You can draw a shape by creating nodes and drag to adjust the curve of the line. It’s harder to use than it looks, but probably the best tool of choice. We wrote about the pen tool in the past, read Photoshop Pathing: How To Use Photoshop Pen Tool.
This Photoshop plug-in adds the ICO file format to your export settings. The installation method is dependent on your OS and Photoshop version, so be sure to check the website.
Apple Icon Composer
Sadly, there is no such tool for Apple’s ICNS file format. This free tool takes care of the problem instead. It comes with the Apple Xcode package, which you can download after a (tedious) sign-up process. Or you can Google for the download.
Hongkiat: 40+ Hand-Picked Icon Design Photoshop Tutorials
Design blog Hongkiat.com has compiled a list of over 40 different Photoshop icon design tutorials. This list covers all kinds of icons, and several degrees of difficulty. Browse the list for inspiration, and extrapolate the techniques used to realize your own designs.
Photoshop’s built-in layer styles are a great way to put the final touch to your icons. Open the layer style pane by double-clicking a layer, or right-clicking it in the layer overview. Use a 1px grey stroke with 40-50% opacity for your icon’s borders, and put your shadows at 110° for the best results. Try not to use shadows around the icon, though, as most operating systems already do this.
Do you have any other rudimentary tips on icon design? Let us know what you think in the comments section below!