Pinterest Stumbleupon Whatsapp
Ads by Google

create your own iconsThere are a vast number of free icon sets online, but if you want to roam beyond pure particular use, there are also a score of problems connected to them. Licensing and the lack of branding are just two of them.

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.

Icon Technicalities

Below are some specifications you should know concerning the icon format, most importantly image resolutions and file formats.

    Size

    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:

    • 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 **

    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 **.

    File Format

    For Windows, the most commonly used file format for icon distribution is ICO. The Mac counterpart is ICNS (Apple Icon Image Format).

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.

Ads by Google
    Unmistakable

    create your own iconsAbove 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).

    Uniformity

    create own iconsIf 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.

    Size

    create own iconsIcons 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:

    Pen Tool

    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 How To Use Photoshop Pen Tool How To Use Photoshop Pen Tool Read More .

    create your own icons

    ICO File Format Plug-In

    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.

    Layer Styles

    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!

  1. Aibek
    October 2, 2010 at 1:10 pm

    Simon, some really good tips here. thanks.

  2. Saikat Basu
    October 1, 2010 at 6:30 am

    Even for us bloggers, it's an useful skill to have. if not icons, we can always design our own favicons.

Leave a Reply

Your email address will not be published. Required fields are marked *