Jul 20
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.
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.
Design Process of WDW Startdrawing.org
Comments
Pages: 9 8 7 6 5 4 3 2 1 » Show All
There are 82 comments (+Add)
Pages: 9 8 7 6 5 4 3 2 1 » Show All
Post Your Comments
Loading ...
82 Dhannajay
April 2nd, 2009 at 12:20 am
Can any body from u give the icon of word (MRP III)
81 www.belgelendirme.com.tr http://www.belgelendirme.com.tr
March 24th, 2009 at 9:59 am
thank you
80 Vijay Anand
March 6th, 2009 at 1:38 am
Hey man i was blinking how peoples are doing this.. you are Great man… thx for the Best tutorial. Love you man.
79 Maxi http://blog.zforum.ro
February 23rd, 2009 at 10:51 am
Sweet thanks.
78 Needle Detector Machine http://www.0769jc.com
February 20th, 2009 at 9:57 pm
I can make my own site now. Thank you
77 Samson http://www.flyingpens.com
February 5th, 2009 at 1:07 pm
Good tutrials for beginners.
76 Steve http://www.hostskynet.com
January 12th, 2009 at 4:04 pm
I forgot to say I didn’t want to create a icon for a desktop application, I wanted to create a favicon for a web site… and it was very useful, by the way I love your comment system, is it a widget for wordpress?
75 Steve http://www.hostskynet.com
January 12th, 2009 at 4:01 pm
I used gimp and I was able to get similar results, very good tutorial. thank you!
74 ce belgesi http://www.ce.gen.tr
January 10th, 2009 at 8:40 am
great tutorial, but I don’t use photoshop , I use psp,
thanks
73 Michael http://www.i-trec.com
December 31st, 2008 at 3:49 am
Marvellous tutorial … thank you so much!!!