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 - Stencil ruler is
finished, well, almost -
How the stencil ruler
become a font - 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.
- 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.
- 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.
- The bottom part of the keyhole is drawn with the Rounded Rectangle Tool (press the up and down arrow keys to adjust the radius).
- 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.
- 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).
- Move the top part leftwards and a little bit upwards (just like when you're opening the real padlock).
- 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).
- Now choose the Direct Selection Tool (white arrow), select the unwanted point and hit the Delete key to delete them.
- 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
- 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).
- 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.
- Select the Transform effect (Effect > Distort & Transform).
- 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:
- Select one point in the top line.
- Move it upwards.
- Select one point in the second line, and move it downwards.
- 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).
Preparing Icons for the Final Product
Maybe you have noticed, that during the creation of the lock icon, we left the keyhole in white, so it looks like the hole, but it's not. You can simply detect this by changing the color of the underlying layer.
It didn't matter before, but for the final product, we need icons in only one color, without stroke and effect, and ideally as just one object. To achieve this, we'll use two functions Expand Appearance and Expand, and the Pathfinder palette. Here is the process:
- Start with selecting the body of the icon, which has the rounded corners effect applied, and can be converted into paths with the Expand Appearance function.
- Result is shown here.
- Select the keyhole, which is made from a circle and a rounded rectangle. Then convert it into one object with selecting both and choosing Unite function in the Pathfinder palette.
- Result is shown here.
- Subtract this keyhole from the body with the Minus Front function (same palette). Both screenshots look the same, but notice the left-bottom corner that shows the fill and stroke color. In the first picture, the fill color is a mixed (question mark).
- Here there is only one color used. This means the keyhole is really a hole in the object.
- The Strokes can be converted to fills with the Expand function.
- Result is shown here.
- And finally we connect the parts into one object with the Unite
function. - The connected part is without any redundant points, and so this is the final shape of the icon
If we move a dozens days later, we get into the phase where I had all icons finished and prepared this way. So I've created a new document in the size of the stencil ruler and started with placing these icons. As a bonus, I've added a few buttons.
Since it's a stencil ruler that will be cut out, the icons can not have floating parts - because there is no way how to make it. As you can see in the next picture, if you want to do something like me, you have to erase these parts (crossed parts), or join these parts with thin lines (circled).
Here are these "joining lines" in detail - see the antenna icon. You can also notice, that the fill in the battery icon is already deleted.
The ruler in it's final look in Illustrator looks like this. All I needed was just to find someone to manufacture it.
The Stencil Ruler is Finished, Well Almost
I've sent many e-mails to find the right company. At first, it appeared there would be no problem with getting it manufactured. Then I found out that there was a problem, and a big one. The icons were too small (sometimes laser cuts out the wrong part). The whole ruler was too thick (sometimes too thick to put a pencil in it), and the number of cuts made the price of the final product unrealistic.
After the early enthusiasm I had only one sample, many printed papers and an averseness of doing anything else with this project. So I put this project on hold, as there were many more enjoyable things to do...
How the Stencil Ruler Becomes a Font
After a few months of abandon, I started thinking about the project again. The ruler is gone, what about something else with these icons? What about a font, something like Windings, but with the style? The
enthusiasm was back, and I was working again. As you will see in a moment, creating a font from prepared icons like these is fun.
For the font job it was necessary to create another document (with only one artboard), sized 1000 by 1000 pt.
After that, I started copying the icons from the original document into separate layers and I resized these icons to match the document size (to fill the document nicely). Since all the icons were already without strokes and effects, resizing was a question of just one click. As well as placing the small icons into the middle of document - just use the Align palette. Select Align to Artboard and click Horizontal Align Center and Vertical Align Center to line everything up.
Now I was onto showing the big icons one by one and placing them in the right location in the face of small icons (in case these big icons can be combined with small ones). I made this by hand. As you can see in next picture, the icon for comments is shifted to the bottom, while the icon for document is shifted to the top. The last part of the picture shows the calendar icon with all the small icons shown to prevent outlines from overlapping.
The icon of fire shows that we have a document sized 1000 by 1000 pt, but in rare cases we can go over the boundaries. For bookmark icon (and some other special icons), we don't need to care about all the small icons. In the side hole we can place only a plus sign, minus sign and arrow.
Once all the icons were placed in the right spot, it was time to get them out from Illustrator. Of course in a way that they can be used in software for creating fonts (in our case FontLab, but it's the same for every other software).
Doing this by hand for almost 200 icons would take hours of work - any why do this when you can use a script? It's not a part of Illustrator, but I used a script. Which is available to those that order the font.
Working with script is really easy. Load it, run it, and you have all the layers exported as EPS files. And we are done with Illustrator.
Creating the Font in FontLab
Well, creating a font in FontLab is not for one article, it's a topic for a big book. But creating a "dingbats" font from prepared EPS icons is easy. As you will see, any other font creating software would do the job, because we just need to load the EPS files into individual characters and set the width.
At the beginning we have a new, empty font.
To create a new character, double-click into any box, then set the size (width) to 1000 (same as we did in Illustrator).
Import the desired EPS file and... that's it.
The procedure is little bit different with big icons. We want to show them behind the small ones, therefore we need them to occupy no space. Therefore we set their width to zero.
A quick test with the Preview window will show if it works properly. In the preview window I've started with the character "k" (icon of folder, which should have zero width). This means that the second character "V" (icon for reload), begins to display from the beginning, and therefore over the previous icon.
And that's all. After a hour of clicking the font is ready, so the only thing left is setting the name and exporting it.
The following photos show testing of the previews from Microsoft Word.
And now we have a complete font.
Conclusion
Thank you for reading your way through such a long article. I hope that you've learned something new and inspirational today. As you can see from the article, my original plans were quite different, but the resulting font turned out great. Sometimes you begin in one creative direction and end up going down a different creative path.
The "GUI Design Icons" font is available for purchase from myfonts.com.
Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.
