Case Study: Creating A Custom App Icon

Custom application icons have always been an essential part of skinning/GUI modding and as the aqua-Windows simulation freak I am, I have always been very picky with my Windows skins and icons.

Therefore, imagine the horror when my favourite text editor, NoteTab Light has this terrible low-resolution icon:

Instead of slugging across the Internet looking for a custom-made one for this lovely app, I had the brainstorm to create one myself, and let you join in the process!

Top 3 Principles of Icon Creation

An icon must be:

• As expressive as possible
  since an icon represents a certain application/function, it must really express what that application/function does!
• As simple as possible
  An icon is typically 48 × 48 or 32 × 32 pixels big. With this little canvas, you can't afford to squeeze a whole painting into it. Just include what's essential, and keep it simple.
• As clean as possible
  As mentioned before, an icon's size is really small. Therefore, it should be clean and tidy; no flashy trendwhore-abstract-graphic stuff. I figure that's why Macintosh OSX icons are so popular...

OK, with all the theoretical mumbo-jumbo out of the way, let's look at our problem here.

Identify the Subject

As I said before, I wanted to create a custom icon for NoteTab Light, my favourite text editor, because it is plainly unattractive. It is low-resolution and it's blocky. It doesn't appeal to my fine tastes for good design.

Therefore, I decided to make a new icon which is based on the original icons. This is because I want to keep the relativity of the icon to the application -- a totally different icon will not remind me of NoteTab Light.

Just look at the screenshot of my Start Menu. The icon is very different, but the idea is basically the same: a red notebook with a white cross on it.

Improving From the Original Icon

As I said just now, I wanted to retain the original concept of the icon and improvise upon it because this creates a relation between the icon and the application itself. A completely new and different icon will not tell me what application the icon represents.

Therefore, I wanted to make a new "red notebook with a white cross on it" icon. I wanted to make it attractive so I chose a perspective view and a aqua feel for the icon.

Actually Doing the Icon!

First, I used the Pen Tool to create such a shape and filled it a bright red. Then, I whipped out the Burn Tool to darken the areas near to the edges a bit. This is the front cover of the notebook.

Then, I copied the layer and clicked on Image > Adjustments > Brightness & Contrast to darken it. After that, I pushed the copied cover a few pixels downwards.

Next, I CTRL + Clicked the cover layer to load a selection of the cover's shape. After that, I pressed Select > Modify > Contract to shrink the selection by 1 pixel. I filled the resultant selection with a white colour and pressed ALT + Down on the keyboard a few times to drag a greater "depth".

To create the glossy feeling, I used the Pen Tool to drag out a shape like the one above.

Then, I pressed the Load path as a selection button in the Paths Pallette. With the selection still active, I clicked on the "cover" layer while holding the CTRL + SHIFT + ALT keys on the keyboard. Then, I pressed Select > Modify > Contract and filled the selection with a white shade. The final step is to drop the layer opacity by 50%.

Adding the Small Details

Now, drag the shape shown with the Pen Tool. Then, load it as a selection and fill it white. Done!

The binding rings are created in a similar manner, using the Pen Tool to outline the shape and filling it grey. However, I went an extra step of darkening the edge of the ring to simulate shadows. It's small details like these that make an image really stand out from the rest.

And there we have it, a glorious reconstruction of the NoteTab Light logo!