Aside from regular web & graphics design, the process of designing icons is vast and complex. Iconography can be created with a sketch or from a blank document in digital software. Digital icons can be created using either pixels or vectors. There are many options and the outcome is heavily reliant on the medium, such as websites or mobile apps.
I can’t teach everything on this subject but I would like to share a few tips for getting started with icon design. As with many other skills practice does make perfect – but you really need concentrated practice to expand your skillset. Since icons can range from highly-detailed OS X app icons down to thin line icons there is a wide landscape to cover. It’s best to pick a few icon types you wish to learn and just keep practicing.
Graphics Design Software
The most popular choices would typically be Adobe Photoshop or Illustrator. These are both great programs as the industry standard for any type of digital design. I would definitely have to recommend these pieces of software, although not everyone can manage to get a copy.
One nice alternative is GIMP which can run on Windows, Mac, and Linux. This larger OS support does make it slightly superior to other software which doesn’t usually get released for GNU Linux/Unix machines. GIMP behaves very much like Photoshop and although the interface is different, you can perform many of the same tasks. And best of all it’s completely free!
Another alternative for Mac is Sketch by Bohemian Coding. This app has a lot more features for UI designers and works great with raster or vector images. The unfortunate downside is that you need OS X to run Sketch, but if you have a Mac this is a cheaper alternative than Adobe software. A quick Google search will return plenty of helpful Sketch tutorials.
Mastering the Pen Tool
Somewhat of a vice to beginning designers, the pen tool is an absolute must-learn. This tool creates paths which can be turned into shapes or smart objects and scaled up to any size. Obviously it’s beneficial when creating icons because you get perfect lines and curves without relying on pixels.
However the biggest problem occurs when just starting to learn the pen tool. It’s very challenging because much of the learning process requires memorizing keyboard shortcuts for modifier tools.
Let me say that you can learn this tool very quickly if you practice every day or every week. It’s almost like riding a bike – seemingly impossible at first, but once you understand how it works you can do the activity without thinking about it. But those first few times you try it’s gonna be tough.
First hunt down some tutorials on YouTube which go over the different tools and modifiers. The pen tool is almost identical in Photoshop and Illustrator with similar tools to be found in other graphics design programs. Look for a tutorial explaining whichever software you’re using and really try to memorize those keyboard shortcuts.
Next all you need to do is practice! My favorite guide is this one from Tuts+ which gives you a handy little template for outlining. The best images to start with are company logos or simple cartoon characters because many of these graphics have smooth curves. Matching curves accurately will take a long time, but once you understand you’ll never forget. Then you can start building icon paths from scratch or even trace your own sketches.
Tutorials and Guides
Aside from pen tool tutorials there are many tutorials online which go over the process of icon design. Some focus on mobile app icons, others focus on simple interface design. There are dozens of different icon styles and you’ll want to find what most interests you.
More tutorials: 35 Excellent Icon Design Tutorials
A newer yet popular trend seems to be flat icons which use long shadows or vectorized shading for colors. It helps if you have some background in art/drawing so you know how to color the icon values appropriately. But if you want something easier try designing thin iOS-style tab bar icons which don’t use more than a single color.
Your priority should be scouting great tutorials and keeping them bookmarked for future reference. Try to do a couple each week and repeat the toughest ones if necessary. Over time repetition will teach you about the tools, methods, and design effects for creating brilliant icons.
Pick up Freebies
There are so many PSDs online nowadays that it seems crazy to ignore this market. 365psd is one of the more popular sites, releasing a new freebie PSD every day. But designers also like to release their work for free on networks such as Dribbble. Be sure to download a few and even keep a collection of your favorite freebies to revisit during your studies.
50 Free High Quality PSDs
The best part about free PSD or AI files is that you can dissect how they were built. This doesn’t mean you’ll always have the knowledge to duplicate the effects on your own. But it helps just to understand how many layers were used and what type of layer effects or blending modes were needed to create the graphic(s).
Also many free UI kits and other website mockups typically include icons. This may give you ideas for your own icons, plus a concept of how they might fit into the interface. Freebies don’t cost you any money so they’re a great place to start. Try to learn from the most talented designers and strive for that level of quality whenever possible.
There’s definitely no shortcut to learning anything about design. Ultimately it just takes a lot of practice and mistakes. Be sure to learn from your mistakes because you need to make the mistakes to learn from them. And more importantly don’t let mistakes get you down – remember it’s just part of the process. Keep practicing icon design and you’ll eventually reach a skill level where you feel more than comfortable with any icon style.
Some more examples of icon design in website layouts:
