Jul 20

Tagged in: design, Photoshop tutorials Comments:Add

How to Design Mini Icons

Numbers of people have asked me how to design my popular Mini Pixel Icon pack. 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 I used to create over 320 icons within a day.

Download Photoshop file

1. Create a new document

In Photoshop, create a new document 14 x 14px size with transparent background.

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.

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.

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.

5. Group all layers

In the Layers palette, select all layers and press Cmd+G to group all layers in a folder.

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.

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:

8. Export for web

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

Too lazy to do this tutorial? You can download my free mini icon set.

Delicious Stumbleupon Digg

Design Process of WDW Startdrawing.org

Comments

Pages: 7 6 5 4 3 2 1 » Show All

There are 67 comments (+Add)

• 67 venali http://www.venali.com.tr
  November 16th, 2008 at 4:07 pm

  nice job.

• 66 Tommy_Gun http://digitalni.nazory.cz
  September 20th, 2008 at 2:27 pm

  its useful. THX

• 65 Özel Dedektif http://www.dedektiftk.com
  September 19th, 2008 at 4:24 am

  thank you very much

• 64 Iso 9001 Kalite Belgesi http://www.iso.com.tr
  September 11th, 2008 at 2:06 am

  I can make my own site now. Thank you

• 63 Sam Yong http://thephpdeveloper.blogspot.com/
  September 10th, 2008 at 7:44 am

  hey great tutorial! i am using it on Fireworks instead of Photoshop haha.
  anyway great website design plus website coding.

  the comment preview comes out immediately!

• 62 Naseer Ahmad Mughal http://www.naseerahmad.com
  September 9th, 2008 at 9:42 am

  nice tutorial man, i like it.

• 61 Baby boobs
  August 15th, 2008 at 9:29 pm

  omg… i really didnt now this
  they should of said that before
  im going to do a icon right now
  wow!

  (:
  smile

• 60 Skezo
  August 7th, 2008 at 8:29 am

  Thx, nie tutorial, good start into icon-design

• 59 Splavek http://splavek.ic.cz
  August 7th, 2008 at 3:13 am

  Good lesson. Thanks.

• 58 People Search Dude http://www.spokeo.com
  July 31st, 2008 at 12:50 pm

  OMG! Right on…nice!

Pages: 7 6 5 4 3 2 1 » Show All

Post Your Comments

Name (required)

Mail (required)

Website

Comment Guidelines

• Please keep comments related to topic. And be nice, don't spam!
• Basic HTML tags are allowed:
  <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
• Note: un-related or spam comments will be deleted.

Live Comment Preview