15/06/2011 - susana

Icon design, the ultimate guide

Everyday we’re permanently interacting with icons, from the TV to the metro station and our mobile, icons are present everywhere as an important element that helps people interact with their surroundings without using any spoken or written language. Creating an icon is a whole science that hundreds study, from semiotics to graphic languages, understanding how to represent something and make it universally understandable is a complete learning process.

Today we want to share our experience here at Iconshock and bring you a complete handbook that will show you all the steps that creating an icon leads, from listening to the client’s needs to defining the fittest style, this article will show you how to begin and conclude an icon design process successfully.

Icon design

The more you ask, the more accurate the result will

Unless you’re going to create an icon for personal reasons (enlarging your portfolio, experiment a new graphic style, offer a giveaway), you will always have a client with specific tastes and needs that you need to please. It’s important to understand that even if you have the largest library of icons and cutting edge skills, the client only knows that he wants a ‘compelling’ icon to place on his website, so it’s up to you to make him understand what an icon design process carries and also interpret the client as accurate as possible to provide excellent results in short times.

But how can you interpret what your client wants?, for start you can make him some key questions that will help you schedule the project and define the best way to approach the job:

  1. What does the client’s business do?, you need to understand who are you working with to create something appropriate and attractive.
  2. Is he/her looking for an unique (custom) icon or an entire set?, this will help you realize if you need to create a whole identity or just go crazy with a single object.
  3. What colors will look better on the site / app and will make the icons stand out?
  4. Does he want something really simple and effective or is he looking for something more detailed and attractive?, this will give you a hint on how much time you will be spending on this job.
  5. Does the client have a general idea of how he wants the icon to look like?, if you can obtain an initial doodle made by the client himself, the process will be a lot easier because as the adage says, a picture is worth a thousand words.

These five initial questions will help you a lot to define the look and feel that the icon is going to have, so now you only have to worry about the technical part after figuring out how the icon is going to look like, it’s very important to pass this first step of the process carefully to avoid later issues. If you’re going to make a complete icon set, you can send a small requirements format to the client where he can give you some insights on how he want the icons to look like.

icondesign02

Download Icon Design Requirements example (PDF)

Looking references

Once you know what the client wants exactly, you can proceed with the design process, we consider important to look at other people’s work to see how they’ve solved similar queries and what’s the current trend in that area. It’s important to keep this as references-only and never fall into plagiarism.

It could be useful to share this stage with the client, as he will probably find new ideas in the process and the final results will be even better (this is only for reference, remember that you're selling the best icon design service that the client has ever had).

You can take a look at Iconshock – Icon Sets to find tons of great references

icondesign01

Defining the style

By this point the client has probably approved the project and you can start working on the icons. Now it’s very important to establish the style that the icons are going to have and in order to do this, this means selecting the color palette, perspective, complexity level and more. Defining style means that you must establish the following aspects:

There are many different ways for representing the same object, some more complex than others but at the end they all represent the same thing. Once you start working your client, you must define the fittest style for the project, which does not mean necessarily using the most realistic style available.

To put an example, if you look into Iconshock you will find that for a single object we have several styles to represent it, ranging from the realistic Super Vista and Real Vista to the cleanest and simpler styles of Clean and Office. If your client is for example a web design supplier, the best style for his site will be something realistic that catches people instantly, but if the client wants the icons for his new blog, a simple and clean style works wonderfully.

Even if you have dozens of styles to work with, the best thing to do is make a previous filter by yourself before reaching the client, that way he will be able to make the decision with ease and you will also be able to aid him with the selection.

icondesign07

Glossy

Although this is a trend that is starting to disappear along with the whole web 2.0 era, glossy icons are still present in our surroundings and that’s we decided to talk about them.

icondesign38

Making a glossy icons is easier than it seems, you just need to dominate its key features. First of all, they all have a characteristic brilliant halo that is the result of adding an opacity shape on top the icon, just like the following example:

icondesign39

First you create a basic layout and fill it with vivid gradients, then you start adding highlights on the sides to add more brilliance.

icondesign40

Then you insert what is probably the most iconic feature of glossy icons, a transversal section that emulates a strong highlight that emulates a glass appearance.

icondesign41

Glossy icons play a lot with transparencies and overlapping shapes, you just need to add many highlights and keep the color palette highly contrasted to generate the glossy effect.

icondesign42

Glossy icons make a lot of use of lights and shadows to generate contrast, on this symbol you can notice that through the use of several lights and shadows, a 3D vibe is generated.

icondesign43

One final aspect that you should incorporate to create a truly glossy icons is insert light reflections and shadows using opacity masks, this detail will complete the creation of a glossy look.

Some examples

As we said before, the glossy trend is starting to disappear, but still you can find some great examples in several websites, such as the ones we like to show you next.

icondesign44

As you can see, these icons reunite most of the features that you find in the glossy style.

icondesign45

As you can see on the dartboard icon, there are some subtle highlights and shadows on it, same thing happens with the earth globe icon.

icondesign46

The color palette icon is the clearest example of glossiness on this site with its little highlights, subtle shadows and vivid gradients.

icondesign47

These social icons are a clear example of the glossy look, as you can appreciate the brilliant halo on top of them and the vivid gradients.

icondesign48

On this site you can find the glossy look in both the icons and the ‘Buy Now’ button, the highlights and shadows are present in all the designs.

Simple / Clean

These icons are getting very popular nowadays, specially in mobile applications and web design. This style features simplistic shapes, basic details and reduced color palettes, usually displaying a matte palette and most important, focusing in abstraction.

icondesign49

There’s no real technique on how to create clean icons like there is with glossy, though there are some points that you need to consider if you want to achieve this style. Clean icons have a minimum amount of details and yet they manage to represent what they’re looking for, gradients must be smoother than in the glossy style as well as shadows. You can realize when a clean icon has been properly made if it does look good in most websites.

Clean icons examples

To give you a hint on how clean / simple icons look like, let’s take a look at some websites that have implemented these elements on their interfaces.

icondesign50

This is a perfect example of clean style. By using white plus another color and very basic shapes, the designer has managed to communicate the message successfully.

icondesign51

As you can see on this icons, it’s all about abstraction. You can interpret that the right icon is a transmission power even when it doesn’t have lots of details and stuff.

icondesign58

This is as minimal as you can get in icon design, simple shapes, plain colors and effective abstractions.

icondesign53

Even a multitasking, highly complex device like an iPhone can be abstracted using pure basic shapes.

icondesign54

Social icons are very similar from one page to another, but still this site managed to reduce them to their minimal expression.

Realistic

This tendency has been ruling lately in many spheres, realistic icons are elements that go beyond the basic iconography and generate highly complex and appealing designs that can be barely called icons instead of illustrations.

icondesign55

As you can see on the previous image, these icons defy the boundaries between what’s real and what’s not. Creating a realistic icon demands for you to have complete understanding of light properties, color control and minuteness for details.

icondesign56

To create a realistic icon, the ideal thing is to start from real life references, analyze how lights and shadows react on the object and how color is displayed under different environments.

Realistic icons in web design

Realistic icons are probably the most intricate designs on the field, often creating a single realistic icon takes the same time that several normal icons will take. Now let’s take a glance at some of the best examples of realistic icons in web design.

icondesign57

This compass design is a remarkable expression of realism in icon design. Great light and shadows management, thoughtful color palette and just a very detailed development.

icondesign59

It’s important to have a good control of perspective, as it is one of the most important aspects to create truly realistic icons.

icondesign60

Photoshop can be very helpful during the creation of realistic icons, as this website clearly shows.

icondesign61

A nice trick is to grab real life photographs and vectorize or digital paint them, that will give you a nice realistic effect.

icondesign62

You can combine realistic icons with photographs or real life elements to add even more realism to the design, as it can be seen on this example.

Front perspective

This style has been around for a while and every day is becoming more and more famous. Front perspective refers to those icons that have a 3D vibe but displayed as if the element was being watched from the front or an aerial perspective.

icondesign63

As you can see, this technique takes real life objects and displays them in a way that conserves their 3D look but at the same time are one-dimensional. The trick for making these icons is having a good reference and perspective notions, the rest is only technical skills.

Front perspective applied to web design

To give you an idea of how front-facing perspective icons work, we have found a few websites that make use of this unique style of icon designing, let’s see how they look before moving on to the next category of this article.

icondesign71

These are some of the beautiful front-facing icons we found while making our research, a well controlled color palette, little details and yet simple.

icondesign64

A nice appropriation of Twitter’s icon that while displaying a realistic bird icon utilizes the front-facing perspective to show it one-dimensionally.

icondesign65

Another great example of front-facing perspective recreated in a beautiful icon design.

icondesign66

These two icons are a beautiful interpretation of front-facing perspective, the shadows’ usage is remarkable.

icondesign67

On this site you can find some gorgeous front-facing icons with beautiful colors and subtle gradients.

icondesign68

Front-facing perspective can be harnessed for making icons that have naturally a plain perspective, e.g. sheet papers, clocks, etc.

3D

Similar to the Realistic category but without strictly requiring a high detail level, 3D icons are characterized for a good use of perspective that represents objects as if they were part of the real life. You are not forced to create hyper realistic designs but just to emulate the perspective.

icondesign69

These icons are an excellent way of combining realism with fantasy, as you can create lovely textures and experiment with colors and textures while conserving a correct usage of perspective.

3D icon examples

As we said before, the difference between 3D and realistic icons is that while realistic icons emulate real life objects in both perspective and details, 3D icons only emulate the perspective but without having to be extremely detailed on the process but instead developing crazier style, let’s see some examples of this style.

icondesign72

This is a clear example of a 3D perspective than yet does not have the amount of details to be realistic, while still being a nice icon design.

icondesign73

On this site we find a great example of 3D style. While the chest has indeed a well done perspective, it has been beautifully garnished with colors and details.

icondesign70

Although these icons could be classified as realistic, the carefulness they have been made with, makes them worthy of getting featured on this section.

icondesign74

A lovely Chinese food icon that though utilizes plain colors only, it actually displays a well proportioned 3D perspective.

icondesign75

MediaTemple has some pretty cool 3D icons with great details and shadows / lights management.

Outlined

This is one of the simplest styles in icon design, it uses only contour lines without fillings and is a very great solution for web design and mobile interfaces. These icons usually have monochromatic palettes and are often made using the pixel-perfect technique.

icondesign78

The premise for making outlined icons is not using fills at all, only contours and shapes must generate the icon and be capable of communicating the message. You can play with different line calibers in case you want to add depth to the design.

Outlined icon examples

Now let’s tale a look at some outlined icon examples from real websites around the world. We’ve chosen some of the best examples to help you get inspired on making nice outlined icons.

icondesign76

The portfolio of Oliver James Gosling features a nice couple of outlined lines on the contact section.

icondesign77

A beautiful set of outlined icons, you can notice the simplicity that they’ve been made with by using pure outlines and no fills at all.

icondesign79

Another lovely example of outlined icons, you can notice how with a few traces the designer has managed to represent the idea effectively.

icondesign80

Simple and clean, these outlined icons make a great job in communicating the message while keeping a sober design.

icondesign81

Another nice set of outlined icons, you might consider that they’re actually using fillings but that’s just playing with line’s caliber.

Stroke

Although the name may indicate that this is something very similar to the previous category, stroke icons are named like this because they have a strong line on their borders, just like when you add the ‘Stroke’ effect in Photoshop. This style is often used when you have mixed backgrounds and you don’t want your icons to merge with the rest.

icondesign82

These strokes can consist in simple strong lines or be combined with other effects such as drop shadows or glows. The point is to make the icon stand out from the background.

Some examples of stroke icons

To help you understand a little better how stroke icons work, let’s take a peek at some examples of stroke icons that have been implemented in actual websites.

icondesign83

The Carbonmade website does not only employ strokes to make its icons to stand out but also generates a whole aesthetic that has become iconic of this site.

icondesign84

If you browse in Iconshock, you can find an entire collection of beautiful stroke icons that make use of a strong black line to stand out in front of different kinds of backgrounds.

icondesign85

Another nice set of strong icons, you can notice how the combination of strong white borders and shadow effects makes them stand out from the rest of the scene.

icondesign86

Black or white, either one of these choices work great when it comes to making an icon stand out.

icondesign87

Strong is specially useful when you small icons like these, adding a strong line on the border along with some shadows makes them stand out despite of being small.

Monochrome

No, it’s not black and white. Monochrome icons make reference to those designs that whatever color they have, they will always look the same, which means that they have no textures or hues at all. Unlike outlined icons, monochrome icons can have fillings in their designs. These icons can be also considered as pictograms.

icondesign90

Simple and easy to read, these icons work specially well in mobile devices where you have to display several elements in small screens.

Monochrome icons in web design

To give you a better approach to what monochrome icons look like, let’s take a look at some of the nicest examples that can be found in some websites around the world.

icondesign89

This style also applies to social icons, as you can see on this example where they’ve been simplified to a one-channel version.

icondesign91

You can utilize subtle shading effects in monochrome icons as they will not affect the general idea of the design but instead will add some depth and richness.

icondesign88

The great thing about monochrome icons is that no matter where you place them, they will always look the same thanks to their simplicity.

icondesign92

Monochrome icons have the characteristic of being absolutely simple and display an excellent abstraction of complex elements by taking only their main features.

icondesign93

As you can see, even complex elements such as a digital camera can be abstracted by only taking its key features to transform them into monochrome icons.

Handmade

One of the most popular styles of these days, handmade icons are all those designs that emulate or are actually created without any use of pixel-perfect of vector techniques. These icons usually have a sketch, oil or any manual technique appearance. Using these icons can give a lot of warmness thanks to the fact that they represent human hands behind them.

icondesign94

Although these icons give you more freedom than any other style, it’s important to maintain a certain graphic level because a lame doodle cannot be considered as an actual handmade icon.

Examples of handmade icons

To give you a nice shot of inspiration, we have gathered a few examples of nice handmade icons used in web design, remember that as long as you conserve that manual texture that programs can hardly recreate, you can consider your icons as handmade, even if they’re not.

icondesign95

Some Photoshop / Illustrator filters can help you emulate a nice sketch appearance to give your icons the handmade look.

icondesign96

Even if they’re doodles, is very important that all your icons communicate effectively their meaning, otherwise they will be simple drawings.

icondesign97

You can take things even more far by making the whole site to look like a handmade creation, this site is a great example of lovely handmade icons plus a gorgeous search bar.

icondesign98

With the handmade technique you can even emulate famous artist styles. A while ago we developed this beautiful Picasso-like set of icons for our friends at Six Revisions.

icondesign99

Another great set of handmade icons, these beautiful designs have been made by Jonathan Patterson and emulate a lovely pen / ink texture.

Pixel perfect

Finally we have the pixel-perfect technique. this was the original technique for making icons back in the nineties and it still has a lot of people mastering the technique thanks to the boom of mobile devices where you need to create extremely sharp icons. The tool by excellence for making pixel-perfect icons is Adobe Photoshop, though Illustrator and Fireworks can work in a certain level.

icondesign100

As you can see, the pixel-perfect technique allows you to create some of the most beautiful icons with a sharpness level that makes them viewable even at some of the smallest screen resolutions.

Pixel-perfect icons in web design

Although many people prefer big, vectorized icons, there’s still a selected niche that prefers pixel-perfect icons for their sites and applications. Our personal consideration is that both styles should be utilized to have a complete range of styles and sizes, now let’s take a look at some of the best pixel-perfect examples that you can find on the internet.

icondesign101

Making pixel-perfect icons requires a lot of concentration and dedication, as every pixel is an important part of the design, a single pixel that you place wrong and the whole design will be messed up and therefore will also stop being pixel-perfect.

icondesign102

Pixel-perfect icons are specially useful when you want your icons to occupy the less amount of space possible while still looking good and being easy to read.

icondesign103

Another beautiful example of pixel-perfect design is Iconshock Social Icons, this beautiful set has been carefully made by our design team to bring you the highest quality level at all sizes.

icondesign104

These beautiful social icons have been carefully made pixel by pixel, thanks to that you can clearly see what they’re despite of the fact of being extremely small.

icondesign105

And for the final example we have this amazing set of user icons exclusively by Iconshock, you can realize the amount of detail that has been put in every icon by our pixel art experts.

Perspective

Although there are many ways of representing an icon’s perspective, the two main styles that we often see are 3/4 and frontal. 3/4 icons are those elements whose perspective emulates real life objects and the angle between two of the axes goes usually around 120 degrees, this style works great when you want to represent complex objects from real life, such as vehicles, buildings, home appliances and others. It’s not recommendable to utilize realistic perspective in mobile icons, as they will lose many details in the small mobile screens.

icondesign03

On the other hand we have frontal icons, this style is perfect for mobile devices and simple designs, this is also the most popular icon style due the fact that it can be implemented in different places with ease. Although using 3/4 icons lets you make a more realistic representation, frontal icons are easier to read and work almost everywhere.

icondesign04

A classic example of frontal perspective can be found in social icons, you don’t have to create highly realistic elements to represent something like Facebook, you just need to keep it simple and make it easy to read by everyone.

Tip: If you’re going to make both small and big versions of the same icon, you can use 3/4 for the larger version, while a frontal perspective will work great in tiny measures.

Grayscale, hot?, how to decide the best color palette

At this point we have defined if the icons is going to be in perspective or frontal style, we’ve also determined how we’re going to work the lights and shadows, now it’s time to think about color. Beginners often commit the error of adding color just to make an icon look ‘pretty’, this is a faux pas in icon design because colors must be actually used to fortify the icon’s meaning.

There are different ways of working with color, though there are 3 main color styles that icon designers usually provide, and which is the usual package that we deliver to all the Iconshock clients, these color modes are hot, disabled and normal. The hot variation uses brighter colors and high saturation levels, this style was very popular during the heyday of the web 2.0, though the difference is that icons where excessively glossy during that era. Then we have disabled, which is just another way of saying gray scale, having a greyscale version of an icon is very useful for those cases when the app / website is going to be looked in black and white monitors, it’s also helpful to remove all color distractions and concentrate on the form. Finally we have normal, which is simply the original version of the icon without any color changes.

icondesign06

There are some tips that can help you make a good use of chromatic palettes, some of them are:

  1. Remember cultural references, if you attend to a funeral in most western countries, the etiquette dictates to wear black, while in a Japanese funeral the tradition is wearing white clothes.
  2. If you’re filling a small region, try not to use a white to black gradient, it’s better to use a light gray to dark gray gradient instead.
  3. Although you can experiment and use glazy colors along with desaturated tones, it’s better trying to emulate the actual colors in case that you’re illustrating a real life object.
  4. Think about backgrounds, if you’re doing a white icon that’s going to be over a clean and white interface, look for a way to make it stand out without changing its colors drastically.

If your strong is not color theory, we have found some very useful color tools on the web that can help you generate the perfect color palette for your icons:

Colorhunter

Adobe Kuler

Colorotate

Contrast A

Color Scheme Designer 3

Grab your pen and notebook

After years of working on the design field, one of the most important lessons that we’ve learned is that no matter how many gadgets and tools we have, there’s nothing better than the old pen and paper, even Harry Potter was first written in a napkin.

icondesign08

This stage is one of the most important phases when designing an icon, because you can experiment different styles, add or remove elements, discard ideas and finally come up with the first version of your design. Many designers make the mistake of jumping straight to Photoshop to try new filters and color combinations, leaving no room for the sketching process; usually when a designer skips the sketching phase, it will take him more time than it will to the person who spent a few minutes to draw down his ideas.

During the sketching phase you don’t have to worry about lights, shadows or textures, because what really matters is finding the skeleton that will later become the icon, so don’t worry about rough details and stuff. Another vantage of passing through the pen and paper phase is that your mind will not be influenced by other people’s work, something that usually happens when you jump straight to the computer and image stocks.

Once you have the sketches, you can transfer them to the computer and show them later to the client. On this point you can utilize digital mockup/wireframing tools to create a more elaborated version of these sketches and show them to the client, we found a few mockup tools that you will probably find really helpful for drawing down your ideas.

Cacoo

Lumzy

Creately

Onemotion

Online Sketch Pad

Starting your icon

Now that you know exactly how the icons are going to look, you can focus your efforts on the technical part, which is something that can only be mastered with patience and practice. Although we have established some key elements such as color, perspective and design style, we still need to determine something important, the size.

Working with different icon sizes

One of the main aspects that you need to clarify with your client from the beginning is the size, is he going  to prefer small sizes, large or both?. Why is so important to know the sizes?, when the smaller size that the client needs is 128 x 128, you can calmly create all the versions in vector, but when things change and the client wants something as small as 16 x 16 pixels, then it’s time to switch to Photoshop to create the small versions.

We’re no longer on the era when everything was seeing in 800 x 600 monitors, now we have enormous resolutions beyond 1900 x 1200 but also tiny screens due the humongous success of smartphones, this means that now you need to make not only larger but also really small icons to fit the different screen resolutions. On case you purchase an icon from our collection, you will receive it in several sizes, ranging from 400 – 256 pixels to small versions that can go as low as 16 x 16 pixels.

icondesign09

Single vector icon resized

As you can see, this house icon has been shrunk from its original vector version, though the quality does not suffer severely, you can realize the fuzziness that appears as it gets reduced.

icondesign10

Vector icon with pixel-perfect versions for small sizes

On this second example, vector has been used only for large sizes, while the pixel perfect technique has been employed for 48 x 48 and below. You can realize the great sharpness of these icons, even at tiny sizes such as 16 x 16 pixels.

Illustrator is excellent for making grand design elements (icons included) thanks to its intuitiveness and easiness, but when you grab a 512 px vectorial icon and try to shrink it down to 32 x 32 pixels, the only thing you are going to get is a blurred snot. To prevent this from happening, you’ll have to migrate to a bitmap-based program such as Photoshop and from there recreate the icon with just its basic components, so that’s when you know the effectiveness of an icon design, if it can be simplified / shrunk and still look good, then the designer will have done a great job.

Lights and shadows, how to use them

Concerning lights and shadows, it’s important to know the site / application where the icons are going to be, because some sites make realistic icons look great, whilst others look better with simplistic elements. If you decide to utilize lights and shadows, you should use the same light source in all the icons, to prevent the site from looking odd.

When you’re working for major companies such as Apple or Microsoft, they usually have their own icon design guidelines for you to follow. Another consideration you need to make is the kind of device where the icons are going to be displayed the most (PC, mobile, tablet, etc).

If you’re going to make a pixel perfect icon, you might want to experiment with blurred textures and gradients to add graphic richness to the design, though you must not overdo it because the crispiness might get compromised. For creating realistic shades, it’s recommendable to use Photoshop, but if you want to make some basic shadows, then Illustrator works fine.

Tip: For icons smaller than 64 x 64 pixels, it’s not recommendable to utilize shadows as they will affect the original design.

In the case that you want to make realistic icons, you must understand how light behaves and in order to do this you need to comprehend its three main properties. The first property we have is reflection, which is the property that let us see objects even if they cannot emit their own light, if you want to understand how reflection works, just grab a few elements with different textures and point a light source over them, then you will be able to infer how light is reflected over different materials.

Secondly we have refraction, which is a phenomenon that makes light to change its course when moving from one medium to another (e.g. air to water), there are many elements that produce light to refract, such as glass, water, air or plastic.

And finally we have light absorption, which is the property that every object has to reflect and absorb specific light rays, if we see an object blue, it means that all colors have been reflected but blue. If an object looks white is because the material is able to reflect all light sources, while if an object looks black, it means that it’s absorbing all the light.

As we said previously, larger companies have their own guidelines on how icons should look like, we have found the most important icon design guides that you should always keep in your bookmarks:

iOS Human Interface Guidelines

Apple Human Interface Guidelines

How to Design App Icons for iPhone and iPad

Android Icon Design Guidelines

Windows Icons Guidelines

What about gradients?

Gradients are one of the best solutions for generating realistic shadows. Photoshop and Illustrator have some differences on how they display gradients, though the essence is the same, the important thing is for you to understand how light behaves and then translate it into gradients.

To create a nice realistic gradient, you must consider three main light spots, brightest, darkest and middle point. Making a gradient is not as simple as placing a black to white gradient, because usually there’s more than one middle point when light falls over an object, the only way to do this correctly is to stare at real life objects.

Tip: Try not to use 100% whites and/or blacks, because that will make your icon look artificial, so it’s recommendable to go up to 90 % but never further. It’s also not advisable to use gradients in small icons, it’s better to use plain colors instead.

icondesign05

Strokes in icon design, how do they work?

Regarding strokes, you are free decide whether use them or not, it basically depends on the level of complexity and the graphic style that you want to achieve. There’s one thing that strokes are really good at, and that’s helping icons stand out, you can create a realistic or a simple icon and apply the same stroke effect in case that you need to place the icon on top of a colorful background or one with a similar color palette.

icondesign11

As you can see, despite the fact that the whole icon has certain level of realism, a plain stroke has been placed outside of it to make it stand out in complex backgrounds.

There’s another concept known as stroke icons, these elements consists in simple icons that are made using strokes only, no fills. Creating stroke icons is really simple, let’s see how they’re made in Adobe Illustrator. First thing to do is write a small rounded square with no fill and a thick stroke.

icondesign12

Then we expand the stroke to transform it into a fill, to do this you must click on Object>Expand and from there check the Stroke option.

icondesign13

And that’s it for creating a stroke icon, now you just need to make the other parts of the icon until you have something like this:

icondesign14

These icons are among the most simple and easy to read designs around, they will put on test your abstraction skills because technically, you won’t have to spend much time on the process.

Creating vector icons

If you already have some experience in graphic/web design, then you probably know that images can be classified in bitmap and vector, and that concept is highly important for any person who wants to start a career in icon designing. Let’s talk about vector images, these kind of images are made up from mathematical calculations that define an image’s location, color and size.

Unlike bitmaps, vectors are not pixel-filled images but a graphical interpretation made by the program based on advanced mathematical calculations, because pixels are not being affected, when you rescale a vector you’re not going to lose quality as you’re only changing some parameters in the formula. Something you have to know about vector images is that you’re limited to 8-bit per channel color depth (256 colors) and you cannot see the images without proper software. Some of the most known vector programs are Adobe Illustrator, Inkscape and AutoCAD.

Another difference is that vectors have inherent transparency properties, while bitmaps require additional information. Because vectors are not dependent of resolution, they are indeed a great choice for making icons, though there’s a problem when you scale a vector to small sizes such as 24 or 16 pixels, you will begin to see images kind of blurred. This happens because monitors are essentially pixel based displays, this means that when you’re making pixel-art, you can have the certainty that what you’re painting is what the monitor is actually displaying, vectors on the other hand, send a message to the software asking it to make a rendering of an equation on top of a preset pixel grid. There’s no command in vector system that can force the software to place with Robin Hood accuracy a tiny vector equation over a pixel grid.

The power of vector graphics relies on the fact that you can resize your images without resampling. This happens because vector images don’t fill individual pixels with information, they rather distribute the image on whatever size you tell them. This versatility and power is surprisingly what makes vectors flaw when scaled down to miniscule proportions. The same rule applies to typefaces. Vector fonts are indispensable in 99% of graphic work, but if you need a font below 9 px, then you’ll have to use bitmapped fonts.

Tips for making quality vector icons

Now that we have learned the difference between pixel and vector images, we can proceed with the creating process. We don’t have a Decalogue to share with you on how to make the best vector icons ever, but we can definitely give you some very useful tips for making vector icons in Illustrator based in our personal experience at Iconshock.

icondesign15

Illustrator’s gradients

Gradients are very common in vector icons, they help designers to add lots of details and lighting effects with ease, Creating gradients is really simple, on the type bar you can define the style of the gradient, which ranges between linear (unidirectional gradient) and radial (concentrically executed gradient); the other parameters that you can define are the angle and aspect radio, which can affect the direction and size of the gradient. Also you can define the opacity for each color marker (they can be as many as they fit on the gradient bar) to create nice transparences and textures.

The trick with gradients is to emulate believable textures and lights unless you’re looking for something fictional and/or unreal. Overlapping gradients often works well, so a good technique is to play with opacities to add more depth to your icons.

icondesign16

Focus on details

While pixel-art focuses on simplicity and abstraction, vector icons give you the freedom to add lots of details and small elements to enrich the quality of your icons. Creating complex shapes and elements is something very appreciated when purchasing a vector icon.

icondesign17

Integrating bitmap images

Despite the fact that vector gives you a lot of tools to create beautiful icons, there are some limitations such as making vector blurs. Vector programs are not the best option for creating these elements, though they have the option, thus is better to migrate these elements from a pixel-based program such as Photoshop.

icondesign18

There are different ways for embedding a bitmap image in Illustrator. The basic tactic is to copy paste the object but that usually damages the artwork; the most effective way is to export the bitmap into a PNG or TIFF file, which ensures a minimal lose of information once it gets imported inside the vectorial space. Make sure that you embed the file before sending it to your buddies because otherwise, your friend’s Illustrator will ask for the specific bitmap file in order to display it.

icondesign19

Compound paths

A couple of versions before, creating icons in Illustrator meant big files with lots of layers and folders because there was no method for joining them. Now we have great tools such as the pathfinder and compound paths. This last element allow us to connect separated objects into a single group and change its values as if it was a single element. This helps you save lot of time and reduces the amount of layers and groups on your Illustrator files.

icondesign20

Compound paths are easy to make, first you need to generate the vector objects that will become part of the group and that you think are going to have a similar appearance. Once you have the elements ready, select them and right click, then choose Make Compound Path and the magic will happen in front f your eyes, don’t worry if you regret later because you can always right click on the group and select Release Compound Path.

icondesign21

Blending modes

Blending mode is one of the nicest things that Photoshop and Illustrator have and still is one of the most forgotten elements by designers, who prefer to experiment with opacities and use the Eraser tool. Having blending modes is like having a cell sheet to play with in the old days, they give you many possibilities for playing with lights and shadows. A nice example of blending modes used on the creation of highlights can be appreciated on the next picture, where the highlight was created using a black and white gradient that thanks to the blending mode adjustment, has ended with this appearance.

icondesign22

You can combine blending modes in many ways, for example placing an object with a normal appearance and then a copy of it with color burn and a little higher size, that will give some sort of halo to the original object. There’s also the option of combining blending modes and opacities to create very attractive textures and graphics; you can do all of this in the Appearance panel, which can be accessed from the Window menu.

icondesign23

Creating vector icons means complexity, you need to harness the chance of adding details and small elements to the designs, which is something that can hardly be achieved in small pixel icons. Take advantage of all the different Illustrator tools and try to make something that really explodes the power of vectors.

Making pixel-perfect icons

This is the most advanced technique in icon designing and something that only a few have mastered. Although many people think that doing small, simple icons is a piece of cake, the truth is that it requires experience and a fully consciousness of the pixel theory. After years of practicing and experimenting, our design team has dominated a great technique on developing pixel-perfect icons and now we want to share our key premises with you. There are some key concepts that you need to comprehend in order to dominate the pixel-perfect technique and now we’re going to show you which are.

icondesign26

As vector graphics are designed for making complex, fully detailed icons, pixel is about simplicity and sharpness, so that’s the first premise you need to learn – “pixel-perfect icons mean simplicity and extreme sharpness”.

Setting up your workspace

Photoshop comes by default with an improving quality that adds a feather effect to contours, this is one of the most hideous things as it completely messes up any icon or web design, so in order to prevent this you’ll have to set up your Photoshop and leave it ready for working the pixel-perfect technique, the next picture shows you an example of the fuzzy feather that we’re talking about.

icondesign27

As you can see on the picture, a simple square is instantly damaged once we create it, because by default, Photoshop adds a translucent halo to make it look ‘better’, unfortunately this is not what we need for making pixel-perfect icons, so let’s see how to fix this once and for all. Go to Edit>Preferences>Units & Rulers.

icondesign30

Set up both the Rulers and Type units to pixels, then go to ‘Guides, Grid & Slices’.

icondesign31

This is one of the most important aspects for properly configuring Photoshop in pixel-perfect mode. By placing a gridline every 10 pixels along with 10 subdivisions, you will have a pixel-perfect grid for start working with your icons, it’s also a good idea to change the subdivision style to dots to help you visualize the process with ease.

icondesign32

This part is ready, now hit OK and go to View>Snap to and make sure that both Grid and Guides are checked, otherwise the changes that we did previously will be useless.

icondesign33

Finally, every time you make a new shape, make sure that the following ‘Snap to Pixels’ option is checked.

icondesign34

Once you have this set, you’re workspace is ready for creating the most beautiful pixel-perfect icons.

icondesign35

Bonus tip: There’s one problem that shows up even after you have configured your workspace, and that’s concerning lines, look what happens when you draw a line using the ‘line tool’.

icondesign36

As you can see, our beloved halo has returned, fortunately we can put and end to this once and for all, the trick is instead of using the ‘line tool’ to create lines (which is supposed to be the obvious), utilize the rectangle tool to generate a pixel-perfect line.

icondesign37

Although these guidelines will help you create pixel-perfect icons with ease, it’s important to state that this is a very crafted job, because there will be occasions where no matter what you do, the elements will pixelate, therefore you’ll have to adjust them manually, node by node, to create a 100% crispy icon.

Pixel-perfect technique on Illustrator

Although we have Photoshop for making pixel-art, there are stubborn designers who prefer to do everything on Illustrator, if you’re one of them, you probably know that there’s a way for adapting your Illustrator to create pixel-perfect icons. This method gives great results, though it’s still not the same as working pixels on a bitmap-based interface such as Photoshop’s.

icondesign24

Illustrator has a ‘pixel grid’ option that lets you snap every pixel you make (remember that vectors are not based on pixel but math calculations) to the pixel grid, making your icons look crispy and similar to the ones you can make in Photoshop.

icondesign25

You can read more about snap to pixels on Illustrator by visiting our sister page Tutorialshock.

Snap to pixels on Adobe Illustrator

Easy pixel-perfect with Fireworks

If you have read some of our previous articles, you’ve probably noticed that here at Iconshock we love Fireworks, it’s a great program for web designers that despite of not having the stack of tools that Illustrator and Photoshop have, it has all the essential features and a very intuitive workspace that makes it a great solution for every web designer.

Making pixel-perfect in Fireworks is extremely easy, let’s make a rounded rectangle without any special adjustments, you will see that it’s not pixel-perfect yet.

icondesign28

Can you notice the blurry halo?, it’s an attempt of the program to ‘smooth’ the shape’s appearance by adding a subtle feather. To fix this problem, you just need to press Ctrl + K and voilà!!!.

icondesign29

Now that annoying halo is gone and your shape is pixel-perfect, this trick can help you a lot to create simple icons in Fireworks with ease, so we hope this can be useful for you.

Exporting your icons, popular formats

Now that you have finished the icon, how can you turn it over to the client?, it’s probable that he doesn’t know a bit of Illustrator or Photoshop and hence he does not have those programs on his computer, which means that you’ll have to export. There are many different formats for exporting an icon, though the most popular are: ICO, JPEG, PNG and ICNS.

ICO is a file format created for computer icons in Microsoft Windows, these files often contain several small images at different sizes and color depths. Every icon that you see on Windows’ executable files is in ICO format.

By default Adobe Photoshop is not capable of exporting or working at all with ICO files, so you need to use format converters to transform other formats into ICO and vice versa, fortunately there’s a Photoshop plugin that gives you the chance of working with this format directly on the program:

ICO Converter

Convertico

ICO plugin for Adobe Photoshop

JPEG is the most common image format around, this format actually compress pictures with little quality loss (the compression level can go up to 10:1). Everytime you’re going to turn over a new icon job, it’s recommendable to include a JPEG version, as it can be opened in practically every computer around, though this format should be used only for previewing, never as a final result.

Considered the successor of JPEG, PNG is a bitmapped image format and video codec with a powerful lossless data compression system. Unlike JPEG, PNG is able to conserve transparencies, making it the ideal format for exporting average images, it can also support 24 and 32 bit color palettes, grayscale, alpha channels and RGBA images. This format is excellent for transferring images over the internet, though is not recommended for print work; along with JPEG, PNG files should always be included when exporting an icon set.

ICNS is the icon format employed in Apple’s Mac OS X. It supports icon sizes that range from 16×16 to 512×512 pixels, it has also support for 8 bit alpha channels and multiple image states. Icons with the fixed-sixe property can be scaled by the operating system and then displayed at any intermediate size.

Photoshop is not able to export ICNS files by default, so we made a complete search and we found three useful links with tools that can help you work things out with this icon format:

Axialis

IconBuilder for Windows

IconBuilder for Mac

Additional tips

Now we have reached the end of this article, the most thorough icon design guide that will help you master this technique, either if you want to make beautiful and complex vector icons or dedicate to pixel-art perfection. We hope you’ve found useful tips and secrets to make you a better icon designer, you are now an official icon-design apprentice and you’re ready for start creating your own designs. To conclude, here are some essential icon design tips that our design team wants to share with you:

  • When working in Photoshop, always create a duplicate of paths that you’re going to modify manually, it will save you time in case that you decide to move back to the original design.
  • Don’t forget to save and create a backup of your icons, the ideal is to have several copies in different channels (flash drives, e-mail, another computer, etc).
  • Avoid obvious solutions, people are trusting in you because you have more than technical skills for developing an innovative concept.
  • Practice a lot!, even the greatest icon designer in the world was a Photoshop or Illustrator amateur before becoming famous.
  • Ask for second opinions, even if you’re absolutely sure that you’re idea is the best, sometimes what you see is not what other people interpret while staring at your designs.
  • Try not to use text on top of your icons, typefaces are some of the most difficult elements to resize and it will consume you a lot of time, so unless it’s absolutely necessary, let the icon speak for itself.
  • Learn to differentiate icons from logos. While logos can be less obvious and use odd references, the purpose of icons is to effectively represent what it’s visually trying to show.
  • Make sure that the icon works well in both larger and small sizes, with and without details, vector and pixel-perfect versions are often necessary in order to create a complete and appealing icon set.
  • Always remember cultural differences, while in America a front-facing palm (hand) means ‘do not continue’, in some middle-east countries this is a way of saying ‘hello’.
  • Keep it simple, making an icon is not the same as drawing an illustration, the simple you make an icon, the easier to read it will be. If you want to see a clear example of this, please check PICOL’s website.

ThemeShock

15 Responses to “Icon design, the ultimate guide”

  1. Good guide for icon design.

  2. joyoge designers bookmarkNo Gravatar
    June 15th

    useful ultimate guide, thanks for post..

  3. VladimirNo Gravatar
    June 16th

    Wow!
    This is a very full of good info and examples article
    Thanks :)

  4. Scott
    June 19th

    Horrible “ultimate guide”. You should have called this article “examples of different style icons” Can’t believe I read through this junk.

  5. SolozaurNo Gravatar
    June 22nd

    I must agree in part with Scott! This is a great showcase of different styles and also a lot of great tips but this is just general stuff, not a start-to-end guide in creating these icons. For someone who looks to get started on making icons there isn’t much to use here, sadly.

  6. Awesome awesoem guide!!! I love it. While i’m leaning more towords logo design, this was really helpful. Now if you would just write a tutorial for logo design lol.

  7. DebbieNo Gravatar
    February 25th

    Wow – this is like taking a class! Very nice resource and overview for icon design.

  8. Vaishakh PushpothNo Gravatar
    June 11th

    Awesome write up Susana!
    This is the best one on icon design i have seen yet!

    Thanks!
    Vaishakh Pushpoth

  9. ing5.testNo Gravatar
    February 1st

    This is the comment of testing

  10. digital mockup/wireframing toolsNo Gravatar
    May 1st

    Hey under the section about diagramming you omitted a very popular tool, Lucidchart.  Great tool that can help with the creative process and very similar to the tools that you mentioned.

  11. adminNo Gravatar
    June 18th

    Hi,

    Thank you for the comment!. Indeed, Lucidchart is a great tool not very known back in 2011.

  12. Rachel WillNo Gravatar
    December 16th

    it’s really good to see simple step-by-step guide for icon design. i’ve never found such a simple instructions for creating and using icon designs. thanks.

  13. You are welcome. Thanks for reading us

  14. If you are looking for a great software to convert these Icons to Ico files you can use these to great websites:

    http://www.freeicoconverter.com
    http://www.faviconconverter.com

    The quality is amazing!

  15. adminNo Gravatar
    January 20th

    Thank you for the input

Leave a Reply

*