SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Beginner’s Tips & Tricks for Learning Icon Design

July 21, 2014 by Jake Rocheleau

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.

adobe photoshop icon design progress by ney ricardo

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.

gimp linux os screenshot image editor

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!

sketch 3 screenshot osx app design

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.

design tutsplus tutorial photoshop pen tool

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:

20 Great Examples Of Icons In Navigation Design

Filed Under: Photoshop Tagged With: icon design, icons, photoshop, tips

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022