How to Design Mini Icons Adobe Photoshop Tutorial
 

Numbers of people have asked me how to design Mini Icons. In fact, they are relatively easy. All you need is just some basic Photoshop skills. Here I will show you how to use the Pencil tool to design pixel icons, and then re-use them to create a full collection. This is the technique that you can used to create over 320 icons within a day.


1. Create a new document

In Photoshop, create a new document 14 x 14px size with transparent background.
Attachment 2450
2. Draw shape outline

Use the Pencil tool, select 1px brush from the palette. Pick a dark gray color and start drawing the outline of the page icon. To draw a straight line, first click at the starting point, then hold down shift key and click at the ending point.
Attachment 2451
Tips: At any time if you want to erase the pixels, use the Eraser tool, select Pencil mode and 1px brush size.
3. Base gradient

Make a selection of the empty cutout by the Magic Wand tool. Create a new layer. Set your foreground color to light gray and background to white. Use Gradient tool, drag from top corner to lower corner diagonally.
Attachment 2452
4. Highlight and shadow

Create a new layer. Draw a 1px white inner top border to create the highlight effect. Then, draw a medium gray inner bottom border.
Attachment 2453
5. Group all layers

In the Layers palette, select all layers and press Ctrl+G to group all layers in a folder.
Attachment 2454
6. Draw a pencil

Again, start drawing the outline first and then fill the inner area with either solid color or gradient. When you are done, group these layers in a separate folder.
Attachment 2455
Tips: If you want to have consistent color throughout the icon set, store the colors that you have used in the color swatches.
7. Re-use them

Here shows how I re-used the layer groups to create entire collection:
Attachment 2456
8. Export for web

After you’ve done entire set, toggle (invisible / visible) the layer groups and save them for web (Ctrl+Alt+Shift+S).
Attachment 2457