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: 12 11 10 9 8 7 6 5 4 3 2 … 1 » Show All
There are 114 comments (+Add)
Pages: 12 11 10 9 8 7 6 5 4 3 2 … 1 » Show All
Loading ...
114 anime http://watchanimeonline.us/
August 17th, 2010 at 4:40 pm
thanks for nice information about designing
113 fortune teller http://www.thewhatbox.com
July 18th, 2010 at 4:58 pm
Mini icons are a good idea. They would save me much needed space.
112 eka http://ekas0615.student.ipb.ac.id
July 16th, 2010 at 1:41 pm
nice post. i like it :p
111 P90X Coach Fletch http://4realfitnessonline.com
June 21st, 2010 at 6:18 pm
Great info on mini icons It should be very useful for my business.
110 handmade stackable rings http://www.nadinejewelry.com
May 29th, 2010 at 3:33 am
I am definitely interested in designing and using mini icons for my site and I am going to download your ready made set (free mini icon set) as well. Thanks for sharing your knowledge!
109 Sandra http://www.businessstrategy.com/
May 11th, 2010 at 3:44 pm
I just tried this a little bit ago and I must say thanks so much for your tutorial!
108 Web Design http://exmmedia.com
April 28th, 2010 at 8:22 pm
great read!!! THANKS so much for sharing
107 Stackable rings http://stackablebirthstonerings.net
April 25th, 2010 at 4:52 am
Hi,
Did it possible to be use this method using of the online editing tool rather than photoshop? I don’t have one but I would like to try out the methods that have been outlined above. Any advice will be appreciated.
Cheers!
106 Sally http://www.ultimatefitnessgear.com
March 9th, 2010 at 2:16 pm
Awesome! I have been wondering how to make mini icons. Thank you, for the information.
105 insanity workout http://pledgetostayfit.com/insanity-workout
February 23rd, 2010 at 7:18 pm
Great Post! Thanks so much! I figured this was the way to make the Mini Pixel icons, but I guess I needed to refresh my mind.