How to Make an Icon – from A to Z (part one)
Posted in: How-To
Whether if it is on your desktop, on a web page, or in your cell phone menu, an icon represents one of the simplest and most efficient means of communication. Ever since the dawning age of Graphical User Interface, it has been a primary element of interaction between a user and his artificial surrounding.
A Picture Speaks a Thousand Words.
An idea of conveying a message through a simple graphic is not new, and certainly is not related exclusively to the development of GUI. Symbols – pictograms – are known to us since the ancient Stone Age, when man used to carve them into rocks; even the ‘fragile’ sign on the box of your new TV is a remnant of those times!
To an average reader, this kind of introduction may seem a bit boring, like we are back in school… Besides, what does a prehistoric man or a picture on a box has to do with my shiny, new icon? Well, they do! SIMPLICITY AND PURE, HEALTHY LOGIC!! Just like the ancient fisherman knows that a river is rich with fish if he sees a simplified picture of it carved in a nearby cave, and just like my dad knows that he can kiss his big screen TV goodbye if he drops the box with a picture of a broken glass, a user of an application should be able to know what he could expect after clicking on your shiny, new icon.
The Process.
Just like the subtitle said, the process of creating an icon is the primary topic of this post. If you were expecting a walkthrough, a tutorial where I would tell you to click on this, then click on that, and then press Ctrl+Shift+I… it’s not going to happen! If you were expecting that, I would suggest that you get a book and start learning your software from scratch. Oh, and bytheway, we will be using Photoshop during this presentation.
Preparations & Sketching.
The first thing you need to do is get to know the client, i.e. get to know his needs, and the needs of his application. I know we have already talked about it before, and will probably talk about it in our future posts, but it really is an essential step!
The next step would be research – collecting as many pieces of information on what your icon should represent. After that, the next logical step would be to determine the color scheme and the style. This is important because you don’t want your icon to appear as if it doesn’t belong.
When you have gotten to know your project a little better, it is time to apply your illustrating skills, which – in my humble opinion – are of essence when you are trying to put your thoughts to a piece of paper, without losing anything in the process. This is the first tangible step in our process – a Sketch!
You should really try to have a final outline of an icon on paper before you even think of using the Photoshop. It’s just like in web design – a precisely defined wireframe is something you have before moving on to the design itself. Making something without a clearly set goal is usually in vain. During the creative process, you are going to experience a lot of changes of various sorts, different concepts, and sometimes an icon ends up in the trash because it is a failure, even though you thought you did everything right. To prevent this from happening, you really should have a plan, a goal in mind, and you should stick to it.
For the purpose of this post, I have created an Address Book icon.
Try using the symbols an average user would know from everyday life, or from other commonly used interfaces. For example, if you were to design an icon which tells the user it switches something on or off, which form would you chose: a light switch on the wall, or a key in an ignition lock of a car? In both cases, turning something on and off is symbolized, but in the latter, a key is going to be a clear association to a password protected area, which is not the effect we were hoping to achieve.
Let’s get back to our icon… The Address Book is something almost everyone has met at some point in their life, and it is usually just a notebook with alphabetically bookmarked pages, so we could find a contact more quickly. If we were to literally copy the form of an average address book, our icon would look more like a regular book, or a plain notebook. This is why I am adding a silhouette of a person, and bookmarks on the side. This way the user is aware that after clicking on this icon it is an address book that is starting, and not a musical player. Unless, of course, someone is toying with you, and has switched it on purpose. ;)
Fire up the Photoshop!
Now it is time for us to actually make the icon. Among other things we have discussed with the client earlier was the dimension of the icon. Although the most common scenario is that you have to deliver various sizes of one icon, for this topic I have adopted one size (256px by 256px). A detailed discussion concerning different scales of one icon will be a topic of another post.
Shapes, shapes.
The first thing I am going to do is set up a grid, matching the required dimensions, and I am placing my work inside this grid, so that the icon does not exceed the desired size. Using Shape Tool I’m creating the basic, primary elements, trying right from the start to stick with the chosen color scheme.
To add the details, there is the Pen Tool, and we need details so that our icon will look more like the sketch we made earlier.
I am going to add some Gradient on to the front shape, thus determining right from the start the position of the light source, and allowing the remaining elements to be shaded accordingly.
The silhouette of a person on the front cover was another thing created using the Pen Tool, also the pages of the address book. The contents of this layer were positioned between the front and back cover, adding to the feeling of thickness, and accordingly the depth of the icon.
Everything You Always Wanted to Know About Sex * But Were Afraid to Ask psp
Shades, shades.
One of the two ways I most commonly use for shading is Layer Style Gradient Overlay. The other one I use for precise shading – basically I just select the desired shape and use plain Gradient and Brush Tools to dose the amount of shade.
Next is scaling the silhouette and positioning it to the front cover; with the right amount of Drop Shadow, Color Overlay and Inner Shadow, I you can fake the effect of imprint.
Now that I almost have the final result before me, it is time to move on to the details. The final touch before detailing is the background (which is blue in my case) – it makes the icon fit in with the surrounding.
Details, Details, Details!
download The Lost Samaritan dvd The Nativity Story movie Treasure Seekers: Mysteries of the Nile ipod
Often a tiniest detail can introduce a new dimension to your work – a fresh look, a new feel, more pleasant to the eyes. However, excessive or inappropriate detailing of the basic form can violate the quality of the icon, or even change the symbolics. So, be careful and moderate with the details.
The work itself isn’t that different from the techniques we have already discussed. It all comes down to drawing shapes, selecting and shading them properly. The only filter I used here is Gaussian Blur which I used to create the shade applied to the black oval shape.
What’s next?!
We could talk for hours, days even, about scale, color modifications, deliveries and integration… For my next post, I chose to speak about dimensioning and scaling the icon, but if anyone has a different question, please post it in the comments section and I would be happy to answer it in one of my next posts.
A thing or two for the end.
The purpose of this post was to go over the basics, bringing the process of making of an icon one step closer to an average user. We see these icons on a daily basis, without really understanding that the road that leads to a great icon isn’t as quick and easy as we might think.
I am posting the source .psd file as well, just in case anyone is determined to become an icon maker! :D Until the next post, enjoy!
Excellent article / tutorial. Keep them coming :-)
Good article.
Excellent tutorial!!!
Excellent tutorial!!!
Sorry, forgot to add great post! Can’t wait to see your next post!