: What is the recommended method of creating these icons? To learn the fundamentals of interface design, I am trying to replicate some better known app interfaces. The 'flatter' layout of many

@Jessie844

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.

Vote Up Vote Down