What is the recommended method of creating these icons?

Question

To learn the fundamentals of interface design, I am trying to replicate some better known app interfaces. The 'flatter' layout of many iOS7 applications makes it relatively straightforward. However the toughest part by far has been the icons.

Deconstructing other PSDs available online, I have been able to reproduce the icons in Photoshop. Most often they seem to use the shape tools (rounded rectangle, line tool etc.) to mimic the shape, then merge them using Layer > Combine Shapes.

This works well for mimicry, but I suspect it is not really suitable for creation. The problem with this method is that it's difficult to get the icons pixel perfect. Also if the icon shape is complex, it requires a silly number of shapes to create the overall effect.

I don't necessarily need a step-by-step guide or link to tutorials. Just a pointer in the direction of which tools / programs are best suited for this job. What's the jist of the workflow?

Many, many thanks in advance.

Answer 1

Expanding on Scott's comment a bit... Here's why vector design applications like Adobe Illustrator (also, Corel Draw, Inkscape) are much much better suited for icon / pictogram design than raster / pixel design applications like Photoshop:

• Simple icons like these tend to be based on simple geometric shapes, lines and curves:

  • You don't get any benefit from the main advantages of raster design, which tend to be geared towards working with photographs and complex effects with lots of tones and shading (e.g. painting-style brushes).
  • You do get loads of benefit from the many tools in vector design applications for working with paths and shapes - e.g. in illustrator, the align window and pathfinder window, toggling smart guides on and off, and the pen tool. These are designed for exactly this sort of very precise shape-building. Bit more on that.

• Icons are often needed at varying sizes:

  • Vector-based designs are resolution independent so scaling designs up and down isn't an issue.
  • You'll sometimes want variants with more or less detail. Adding and removing subelements is much easier in vector design applications where they are separate paths or shapes.
  • See also: Best workflow for icon design: Start big, or start small?

• You'll almost always want a restricted, consistent colour palette:

  • Vector design applications are geared up for working with narrow swatch palettes. Raster design applications aren't as well set up for this: they're better suited for photos or digital painting where each pixel will normally be a slightly different tone. They can do it, but you'd be going against the grain.
  • If you're doing the flat design subtle gradient thing, then (in illustrator, don't know about the alternatives) you can store gradients and some other affects as swatches, to really easily re-use them precisely, which is handy for consistency across an icon set.