Icons are inseparable part of a GUI (graphical user interfaces) design. I was downloading, buying and creating icons for ages, then one day I decided to make my own usable icon set. Something to help other GUI designers make work faster and better. This article explains in detail the process of creating and phases I was going through with this project, and may act as guidance when you decide to make something similar. I went down more than one creative path before finalizing this “GUI Design Icons” font.

Chapters

Since this article is little bit longer, I’ve split it into chapters. You can use these links to jump to desired chapter.

• The Idea
• Drawing icons in Adobe
  Illustrator
  • Locked padlock
  • Unlocked padlock
  • Adjustments, changes and
    fine-tuning
  • Loading icon
  • Combinations
  • Dividing lines
  • Preparing icons for final
    product
• Stencil ruler is
  finished, well, almost
• How the stencil ruler
  become a font
  • Export icons
    for FontLab
• Creating the font in FontLab
• Conclusion
   

The Idea

I was drawing sketches of graphic user interfaces literally for ages, and this idea was the whole time in my head. I thought about making a ruler – stencil – with every frequently needed icon used in GUI design?

Let’s face it – I have missed the chance of being the first. Somebody else had already made this. I found a nice, stainless ruler (stencil) from DesignCommision (see photo), which you can buy at uistencils.com.

I immediately ordered it. After seeing it live, I was even more determined to make one on my own. My idea was to execute this a little bit differently – with plastic. There is nothing wrong with stainless steel. It is shiny, modern, it’s nice. But you can not see though it, the edges are sharp, and it destroys the pencils and scrape your fingers (it’s not that bad, but working with it is not very comfortable).

At the beginning was a paper, loads of paper, pencils, felt tips and a lot of time. In the meantime (in the non-drawing time) I was exploring various GUIs, searching what can come in handy, and ended up with many papers full of drawings. These you can also see here (click for bigger photo). Once I decided that I had enough of sketching, I marked all the icons that I might try to recreate on computer. This is where I jumped into the second phase.

Drawing Icons in Adobe Illustrator

The time needed for sketches was nothing compared to time spent in Adobe Illustrator. As you can see, the icons are quite simple, but you have to care about maximum accuracy, as few point as possible (no needless points) and – the most important thing – consistency in style.

If you take a closer look at the ruler from DesignCommision, this is the biggest imperfection – the icons don’t have a unified style. Most of the icons are simple, but user icon have a very detailed outline. Most of the icons have similar size, but the play button is too big (and wide). Most of the icons are made from straight lines, but the "i" and book icons are unreasonably rounded… and so on.

Let me show you the process of creating two icons: the lock icon and loading animation icon. In the beginning, I created two guides (quite randomly) in the document – and I’ve tried to keep the icons sizes along these guides. Not that every icon is from the first guide to the second, but to roughly keep the scale the same.

Locked Padlock

The fastest to create icons is to imagine the icon as a compound of basic shapes. It’s always faster to delete half of a circle than to draw the half circle by hand (with the Pen Tool). Keeping the work with the Pen Tool to a minimum will help you create accurate shapes in a short amount of time. Instead of using the Pen Tool, try to think used basic shapes and the Pathfinder tools to break them apart as needed.

1. Lets start with making a Rectangle with a Round Corners effect applied (Menu > Effect > Stylize) applied to it. We could also draw the rounded rectangle with the Rounded Rectangle Tool, but this way the corners will keep the Radius even after resizing.
2. Now draw the base of the keyhole with the Ellipse Tool (hold Shift when drawing the circle). For perfect alignment use the button in the top bar, or use buttons in the Align palette.
3. The bottom part of the keyhole is drawn with the Rounded Rectangle Tool (press the up and down arrow keys to adjust the radius).
4. Also the top part of the padlock is drawn with this tool, here we just swap the fill and stroke (Shift + X). This means no fill and a bold stroke. Since the keyhole is not transparent but white, all you need to do to hide the bottom part of this last rounded rectangle is to send this object to back (right-click on the object, choose Arrange > Send to Back. We don’t need to worry about this for now though.

Unlocked padlock

The unlocked padlock icon is even simpler (and faster) to create.

1. First select and drag the whole icon to the side. While dragging, hold the Alt key to duplicate the object (or you can use Command + C and Command + V).
2. Move the top part leftwards and a little bit upwards (just like when you’re opening the real padlock).
3. And with the Pen Tool, add a new point (be sure the path is selected and the cursor shows a plus sign, otherwise you will not add the point to the current path).
4. Now choose the Direct Selection Tool (white arrow), select the unwanted point and hit the Delete key to delete them.
5. Find the Stroke palette and check that the path style is set to Round Cap.

Adjustments, Changes and Fine Tuning

Don’t think that you can make everything perfect on the first try – just like the padlock icons. In fact I’ve printed a lot of papers to see the icons in bigger size and on paper (believe it or not, paper is still better for adjustments). After that, I’ve added some details, adjusted some areas and deleted some parts. And then applied these changes in Illustrator.

The images below show my process. After printing the icons in a bigger size, I’ve picked the marker in the same color (don’t ask why gray, I just like it) and added some parts where I wasn’t satisfied. I’ve also
marked other imperfections with a red marker (like change of size, weight of stroke, etc). For deleting, I’ve used the white correction tape or just a piece of white sticker.

As you can see below, simpler icons are just lines in various lengths and angles, but with the same Weight.

Now back to the creation. Let’s look at how to create another icon – used for loading animations.

Loading Icon

1. Start with a line as show (use the Line Segment Tool). In the Stroke palette choose rounded ends (Round Cap) and same Weight as usual (in my case 4 px).
2. Copy this line and move it to the bottom – it can overreach the guide a little. The fastest way how to do this is to drag the line with the Shift and Alt keys pressed. Then select both lines and group them with Command + G – this step is very important! Otherwise the following transformation would change every line separately.
3. Select the Transform effect (Effect > Distort & Transform).
4. And all you need to do for the final icon is to set the copies to 5 and Angle to 30°. And that’s it.

Adjusting this icon is even simpler because it’s created from just two lines, all you need to do is:

1. Select one point in the top line.
2. Move it upwards.
3. Select one point in the second line, and move it downwards.
4. According to the duration of movement you can have icons from short lines, long lines or just small dots.

Combinations

One of main advantages of these icons should had been the possibility to combine them. For example to place a small plus sign beside the user icon to have an add user icon, or a small cross over the folder icon to create a remove folder icon. And so on. Below shows one example of a magnifying glass, which you can combine with a plus and minus sign.

My original plan was to add numbers, which could be placed for example over the calendar icon or into the comments bubble icon.

Here is how it looks in Illustrator – icon, in/over/beside which I’ve placed some example small icons to test the appearance.

To avoid the confusion between which icon is drawn and which is just copied, I’ve changed the color of the copied one to a lighter gray.

And now for testing…

…and printing, adjusting and changing.

I will briefly mention a very useful function in Adobe Illustrator. Artboards, which were introduced in Illustrator CS4 allow you to have multiple pages in one document. You can say – nothing new in competitive products, but consider the possibility of different sizes of the pages and different positions. You can add the pages, as you are adding the pages in your work. And so I was adding and adding the artboards…

…and I was moving unused icons sideways, while moving the final ones into the new artboards.

It helped me a lot, especially with printing and corrections. Without artboards, I would have to use layers, or one big document (but you can’t print just a part of this big canvas easily).

Dividing lines

I wanted to make the ruler really multi-purpose. I was thinking about every possible way how to make it even better. For example with adding dividing lines. In Illustrator it’s really simple, just draw a line and then, add a Zig Zag effect to make a jagged line (a), zigzag line (b), properly set the options in the Stroke window to make the lines dashed (c), or dotted (d).

Continue Learning…