5 Tips for Creating Perfect Icons
For designers working on important projects, finding the perfect icons to compliment their designs can become a bit of an issue, but there are a few ways in which we usually solve this issue; downloading free and premium icons or outsourcing icon design to others. A lot of the time one of these options will work just fine, but what about the times when you just can't find those perfect icons?
- Free icons are a good choice for a lot of designs but you have to be careful with licensing issues, for example a lot of freely available icons actually require attribution if they are used for commercial projects (something a lot of designers regrettably neglect to remember)
- Premium resources are often the way forward as they offer icons in all shapes and sizes that you can simply download and drop them into your designs without worrying about licensing issues or attribution, but they can be pricey and aren't unique to your project.
- Outsourcing icon design to professional icon designers is a great way to make sure the icons you get are suitable for your project and 100% unique but it can be a lengthy, expensive process and there's still no guarantee the final product will be exactly what you're envisaging. So what's a designer to do?
- There is an often overlooked third option... icon D.I.Y.
Now, for those of us who aren't icon designers ourselves, icons are one of the most sought after design resources out there, and this is because icon design is as a very time consuming task, not to mention how daunting it can seem if you've never dabbled in custom icon design before.
The benefits to making your own icons are straight forward, other than the valuable skill and sense of achievement you'll get at the end of a project, you will be able to create the perfect icons in your own style that fit in with your website design perfectly.
So, if you're finding yourself searching endlessly for the perfect icons or just want to try your hand at iconography, here are some tips to help you when you take your first steps (or if you just want to brush up on your skills).
1. Remember, icons are just shapes
Sometimes when you see high quality icons you can get overwhelmed by the amount of detail and effects applied to them, so much so that you forget that the foundation and starting point for all icon design is shapes.
Want to make a '+' icon? Draw two rectangles overlapping in the center, want to make a speech bubble icon? Draw a rounded rectangle and a slanted triangle along the bottom edge, obviously these are very basic examples but the same principles apply to almost all icon design, just the same as if you were doing preliminary outlines for a life drawing in art class, start off with the basic geometric shapes and the rest will fall into place.
For drawing non-standard shapes, your friends are the Pen tool and Boolean/Pathfinder tools in common graphics applications. The Pen tool gives you total creative freedom with your shapes and Boolean/Pathfinder operations let you add and subtract shapes with other shapes to make new shapes.
2. Learn to love pixels
Get used to working at about 400% zoom when you're creating icons - it's the small details that make all the difference, and something you need to learn early on is that vectors don't love pixels, so you have to make sure you do!
The reason vectors aren't friends with pixels is that they work in a different ways to each other, vectors have infinite possibilities and scalability, so one way to look at is that they think pixels are holding them back, they ignore the pixels and can pass their sleek, slim lines though a single pixel in an infinite amount of different ways resulting in an almost as high amount of different outcomes for the actual pixels, results can vary from soft and fuzzy edges to perfectly crisp and clear works of art depending on where vector lines are drawn in relation to the grid of pixels .
Photoshop tip: the more you zoom in, the more control you have of vector shapes
3. Draw separate icons for smaller sizes
You might think drawing separate icons for different sizes is a bit primitive when you can just select all your layers and drag the corner anchor around to resize it but for drastic changes such as making a 16px version of a detailed 256px icon you will need to simplify the design.
Here's an example of what I mean, using icons from Icons Land
As you can see from the example to resize an icon from 256px to 64px may require a bit of tweaking, perhaps deleting non-essential details but for a jump to something as tiny as 16px a complete redraw is required, flattening the perspective of the icon and simplifying it's shape, all the while remembering to maintain the same look and feel for the icon.
4. Don't forget your semiotics
Semiotics is the research of signs and symbols and their individual meanings, the true test of an icon is to show it to somebody (without any description) and ask them "what does this mean?".
Your answers will undoubtedly always vary, as the study of semiotics itself is an ongoing one with people perceiving signs and symbols differently depending on their own personal opinions and experiences but a general rule of thumb is if your graphic designer work buddy and your grandma were both in the right ball park with their guesses then it should be ready to go!
5. Practice makes perfect
Of course, the golden rule for learning anything new, practice, practice, practice!
Try to avoid diving right into making icons because an urgent project needs them straight away too, take some time out on the weekend to design some icons just for you, don't pressure yourself with the idea of making tons of icons to form a set either, just relax and enjoy the thrill of trying something new again.
Focus on getting one or two simple ones done first, ones that you think you'll enjoy doing, and then work your way up, you'll be designing crisp, sharp, semantic icons in no time!
What are your thoughts?
How were your first experiences with icon design? got any tips to add to the list? let us know in the comments.