Sep 04

How to Create an Icon – Step by Step Tutorial

Wed, 09/04/2013 - 17:25 — julie

Icon design is nothing new. But with companies and designers always looking for a way to distinguish themselves, custom icon design has been getting more & more popular. Being an icon designer can even be a full time job now. With the ever growing mobile/apps and icons becoming more and more creative. So what makes a good custom icon design? In this tutorial, I am going to walk you through the steps how to create an icon for a new site or application.

Intent: One of the first things you should determine is the intent of this custom icon. Yes, usually the main job of an icon is to be clicked. But they are a few other questions you should ask before you start designing. Here are a few sample questions that I ask: What is the tone of the overall site & this icon (professional, fun, funny, serious,etc)? Do you have a particular style in mind (flat,cartoon,abstract,realistic,minimal,etc)?  HINT: Have visual examples to accompany these questions. Visual examples will help you decide exactly what they are looking for and will minimize the amount of revisions.

Mind Mapping: A mind map is a diagram used to visually outline information. A mind map is often created around a single word or text, placed in the center, to which associated ideas, words and concepts are added. This can help you see all possible ideas and get beyond the obvious solution to your design problems. It can be created on paper or their are several free mind mapping programs out there. One of my favorites is This site allows you to easily create mind maps, save them digitally and even change colors.

Icon Mind Map

Sketching: Still the best way to get your ideas out is good old pencil to paper. Sketch all your ideas. Use your mind map for inspiration. Take this time to explore all possibilities and don’t worry about mistakes. Make sure they remain loose but organized so you can show them to your client or boss for approval. HINT: When sketching an icon use graph paper to keep all sizes proportional and stay within a grid.

Icon SketchSketch 2

Get creative but not overly artsy: What is the main goal when creating a custom icon? It is that is it’s easily recognizable. Make sure your design and the imagery you use can be understood by a wide audience. Stay away from inside jokes or imagery that confuses the user. It might be a really clever and creative idea but if it leaves the user confused, the design has failed. This may fluctuate depending on what your target audience is but when in doubt keep it universal. HINT: The best way to see if people get your icon is to show it to people. Get other people’s opinions. Non-artists and designers are the best for this because they will be the majority of people using the site.  

Color Scheme: Picking a color scheme for an icon design can be different than when picking one for web or print design. The majority of the time an icon is a simple one or two color design. HINT: Don’t always resort to black and white for icon colors. Use the colors in the site or from the logo to give a more personal touch. If an icon is going to utilize full color make sure you try it on the site before you commit to a color palette. Questions to ask: Does the icon get lost in all the other images? Does the icon match the overall color scheme of the site? Does the icon look out of place? Can you tell the icon needs to be clicked?

Custom Icon Flat Design: As most web designers know flat design is a huge trend right now. It can also be a great way to create unique icon designs. What are some tips for flat icon design? First, I suggest you use a vector program such as Illustrator. Keeping your icon design vector makes flat design so much easier. Use blocks of color to shade areas instead of using a gradient. Use thick strokes around your artwork to add accents to your icon. Lastly, instead of a drop shadow using s solid black or grey behind your icon to create dimension.

Flat icon design

Encasements: When creating an icon it’s always helpful to have the image (and text if applicable) encased in some way. The most popular are circular or square but don’t be afraid to experiment with slightly different shapes. The goal of an encasement is to unify all elements in the icon design. It’s also helpful in identifying the icon as clickable if it follows this format. HINT: If you have multiple icons on a page keep a consistent shape throughout. Don’t mix circular icons with rectangular ones. 

Consider Sizes: This may seem like a no brainer but I can’t tell you how many designs I’ve seen that the icon looses all detail when it shrinks. When designing for mobile this becomes particularly important. Your icon may look great on your monitor but how does it look when it’s on your phone. This is also a great advantage of using Illustrator because you can quickly see how the icon will look at various sizes. FACT: Flat design tends to resize easier than other icon design.

icon sizes

Black and White: Seeing how your icon recreates in black and white can be a good test too see if you need to cut out some of the detail. This test is used in design all the time and can really help you evaluate your design. If it can’t be reduced to just black and white try just greyscale. The icon should be identifiable even with the absence of color.

Options: Show as many options of your icon as you can. Show different color combinations, layouts and shape options. This can really minimize the amount of redo’s you have to do. Plus it really gives the client the best chance of choosing their favorite design instead of settling because of lack of options. HINT: Also show your icon on different background colors and textures. It doesn’t have to work on all colors but it should look good on most of them.

Icon Options

Do you have any suggestions or tips on how to create an icon after reading this tutorial? Do you have a custom icon you designed that you would like to share? Make sure to leave your comments below.

The post How to Create an Icon – Step by Step Tutorial appeared first on Design Inspiration | How to Design a Website.

Copyright 2009. E-mail Me
Auto Spare Parts