I am available for freelance work - HIRE ME

Icons and the Web – Part 5: Creating and Modifying Icon Sets

posted by Matt Ward on May 2, 2010.

This is the fifth article in a six part series, in which we will discuss various aspects of using icons for the web! This particular article discusses some general areas that you might want to consider when creating, editing or adding to an existing icon set.

We’ve come a long way over the past few weeks, discussing what icons are and why they are important, where to find them, how to organize them and (most recently) some tips on how to best implement them into your own web designs! This will be the second to last installment of this series (and the last actual article), in which we will be looking at some things that you may want to keep in mind when creating and modifying icon sets.

Icons and the Web – Part 5: Creating and Modifying Icon Sets

Icons and the Web – Part 5: Creating and Modifying Icon Sets

Sometimes, you may find that nearly-perfect set that has almost everything you need. There’s just one or two key icons missing. Or, maybe you’ve implemented icons into a site and you (or your client) wants to change something or add in some new functionality. It can be incredibly frustrating to find that the set you built the site around just doesn’t have an appropriate icon.

There are a couple of things you can do when this problem strikes.

One option is to go back out there on the web and see if you can find something that would blend in nicely, even though it’s not from the same set. Many icons sets can have very similar styles and appearances, allowing you to blend them together while still maintaining consistency (as discussed in part 4).

On one recent project, I was using an icon set that met pretty everything I needed. One thing it was missing, however, was a Twitter icon. Given the hundreds (and probably thousands) of Twitter icons that exist out there on the internet, it was relatively easy for me to track down one that blended nicely into the site with the rest of the icons.

You won’t always be so lucky, though, and the other option for dealing with this issue is to either create a new icon, or at least significantly modify one that already exists. Here are some things that I’ve learned to consider through my own work in this area:

Pencil and Paper

One of the best places to start when doing any kind of icon development is always the good old fashioned pencil and paper. Go ahead and break out the old sketchpad (or Moleskine, if you are so inclined) and just start sketching. If you are creating a new set, let your imagination and creative juices flow. If you are editing or expanding on an existing set, the pencil and paper method can be a great way to create a study of the set, locating some of the common features or traits that really bring and hold the set together.

Also, always remember that the sketching stage should always be really natural and organic. There’s no need to create a perfect drawing facsimile of your final icon design. For example, consider this initial sketch, as featured on an icon design tutorial over on eyesontutorials:

Examples of sketching out an icon design

Examples of sketching out an icon design

The drawings themselves are really just rough and sketchy, and have only a conceptual relation to the final icon, which looks like this:

The final, fully rendered icon

The final, fully rendered icon

The point of working with pen and paper is just to get your mind working and rolling. In my experience, there is just something that much more natural about drawing by hand (and not on the computer), something which is able to work as a spark for imagination and creativity.

Quick Colour Changes

Probably the most common change that I typically want to make with a lot of the icons that I use is to change the colour. They might be awesome icons in their own right, but their colour might just not fit into the overall design that I’m working on. Depending on what kind file type I am working with, I can usually use either Photoshop or Illustrator to accomplish to make a change.

If the icons come in a raster format (usually PNG), I will often just use a Hue/Saturation adjustment layer to modify the colours. If I am working with multiple icons, I can also use this same adjustment to apply the change across the entire set. In my experience, this method usually works best with monochromatic icons, or for turning full colour icons into monochromatic icons.

You can also use the Hue/Saturation adjustment layers for more precise colour control. For more information about that, check out the tutorial that I recently wrote on this very subject: Quick Tip: Precision Colour Control in Photoshop.

If I am working with a set of vector icons (EPS or AI), extensive colour changes can usually be achieved by simply selecting the different shapes and adjust the colours as necessary. Of course, depending on the complexity of the icons, changing colour this way can likely become more than a little tedious – especially if there is significant use of the gradient mesh.

Using Swatches

Photoshop and Illustrator both have a swatches palettes that can be incredibly valuable tools when designing, editing or expanding icons sets, since they allow you quick access to standardized colours. Again, this can help you maintain consistency between the icons within a single set.

However, swatches in Photoshop actually work quite differently than swatches in Illustrator, which can have a fairly significant impact on how you can use them.

In Photoshop, swatches work in a way that is very similar to brushes, in that they are an application level function. This means that when you create a swatch it becomes available for every document that you open. If you want to keep your swatches organized by project, then you will likely want to export each swatch set that you create to its own file, then import them again as required.

In Illustrator, swatches exist as a document level function. Again, this is similar to the application’s use of brushes. Your group of saved swatches is actually stored inside of the document itself, meaning that the swatches that will be available in the palette will vary from file to file. Illustrator also allows you to create and store gradient swatches, which is something that doesn’t exist in Photoshop (at least not exactly – you can create and save gradients through separate functionality).

Given this difference, swatches in Photoshop work more as a quick colour selector, allowing you to very quickly apply identical colours throughout an icon design. They are even more useful in Illustrator, however, especially if you are editing or adding to a set that is built off of a specific swatch collection. If this is the case, then the specific swatches used will be saved right in the document, allowing you quick access to those colours and gradients.

That’s a lot of discussion so far. Let me show you what I mean. During the recent redesign of the Highland Marketing website, I implemented the Milky set from IconEden. This set is available as an EPS, which actually includes the complete set of swatches that are used throughout the set. As it turns out, I had to create a few extra icons that didn’t exist in the original pack, and was able to do so using the pre-existing swatches to help them match the rest of the set – without having to guess or use the eyedropper tool!

Original icons, new icons and the swatches

Original icons, new icons and the swatches

As you can see, swatches are a great tool for helping to create and edit icons with consistent colours.

Grids

One of the things that I have mentioned about looking for consistency between icons is to pay close attention to perspective – or what we could also call camera angle. Dramatic variation in either of these can cause visual inconsistency between icons.

Grids are a great way to help keep things in perspective (and proportion), and there are several different ways of approaching building on a grid, all depending on what you are trying to do.

The simplest of these options is probably to just use the grids that are available in both Photoshop and Illustrator. This works the best for flat, two dimensional icons – in other words, icons that have no real perspective. It can be used to maintain certain levels of proportion for the size of various elements.

If you are wanting to create icons with a common form of perspective, you can also create grids to help you with this too. First, if you understand basic concepts of two or three point perspective in traditional art, it can be useful to create a grid based on the simple perspective lines. For example, here is a simple two-point perspective grid that I created in Illustrator:

A grid based on 2-point perspective

A grid based on 2-point perspective

The perspective lines are pretty strong on this one, which would mean that, if I was to use the full artboard, the icons would have some strong perspective.

Of course, if you have already upgraded to CS5 (I have not), then your Illustrator will already have a built-in perspective grid. Check out the Adobe documentation for more details.

Another perspective option is to use an isometric grid. This technique is basically a means of creating the illusion of depth, without adhering to the specific rules of traditional artistic perspective. Wikipedia explains if like this:

Isometric projection is a method for visually representing three-dimensional objects in two dimensions in technical and engineering drawings. It is an axonometric projection in which the three coordinate axes appear equally foreshortened and the angles between any two of them are 120 degrees.

Basically, all of the main “perspective” lines adhere to a standardized grid in which, unlike my perspective grid, every single quadrant is identical in terms of area and angles. Here is a basic isometric grid that I created for a project:

A basic isometric grid

A basic isometric grid

Personally, if you’re working with icons that are set on an angle, I find that the isometric method is actually better to work with than traditional perspective, since all of the line work is standardized. It also make it easier to create a complete matrix of icons, all with the same apparent perspective! Here is an example of some really great isometric icons from monofactor:

Free Vector Icon Set 2 – Turqua – 3D Isometric Icons

Free Vector Icon Set 2 – Turqua – 3D Isometric Icons

Notice the consistency in the angles and the main perspective lines in these icons. As I’ve already mentioned, it really helps to bring the whole set together with a nice, consistent visual appeal!

Additional Resources

So, in this article, I’ve tried to cover some areas that I haven’t seen talked about a great deal when it comes to icon design (which is not to say that they haven’t been discussed at all). Of course, there are a thousand and one other things that I could touch on when it comes to this subject – vector vs. pixel formats and sizing for example, but we’ve done had a lot of discussion on the subject over the five parts in this series. So I’ll pretty much wrap it up now. If you want to read more, however, here are a few excellent resources for you to check out.

Conclusion

That pretty much bring our series on Icons and the Web to a close. Almost. This will definitely be the last article in the series, but I do have one more post planned – in the form of a free, 12 piece icon set designed by me exclusively for readers of the Echo Enduring Blog. It should be released soon, so keep an eye out for it.

In the meantime, I’d love to hear some feedback on this article and the series in general. Are there any other important elements to consider when creating icons, or about icons and the web in general. Please feel free to chime in with your own thoughts and opinions on this!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Feb 14, 2011

Keri says:

Just finished reading this series- Thanks for the great analysis & putting together such great resources. It really helped me to understand the uses of icons in design. Bookmarked =)

Leave a Comment

Copyright © Echo Enduring Media 2009-2014