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
There are 106 comments (+Add)
Loading ...
1 SasaVtec http://www.directorymix.com
July 30th, 2007 at 4:55 am
This is a very nice tutorial thank you
2 Nathan Chapman http://pixl.utopiaplanitia.org
July 30th, 2007 at 6:44 am
Makes sense what you’ve done. Good, I like
3 Brendan DeBeasi http://dealitin.com
July 30th, 2007 at 11:06 pm
THanks, this is really great stuff you’ve been doing, and I love almost all of your work!
4 Ines http://www.purepleasuredesign.com
July 31st, 2007 at 4:33 am
Great tutorial … very useful!
5 srinivasarao http://www.splitcolors.com
July 31st, 2007 at 4:44 am
looks very nice and gr8 job
6 Katie http://www.pibby.com
July 31st, 2007 at 10:52 pm
Great tutorial, will definitely give it a try sometime!
7 Craig http://www.craigsoup.com
August 1st, 2007 at 9:43 am
Great tutorial! I don’t know why I thought it should be harder than this.
8 Anon
August 2nd, 2007 at 1:27 pm
Verrry Useful!
9 no name
August 3rd, 2007 at 6:42 am
nice tutorial!!! Good job
10 orlin
August 3rd, 2007 at 3:11 pm
Thanks — I’ll give it a try…
11 Melfina http://celestial-star.net
August 3rd, 2007 at 4:03 pm
That’s a nice tutorial. I find making a pixel star the most difficult icon, I can’t manage to make a proper one, it always looks anything but a star.
P.D: This is such a gorgeous design! you did an amazing job!
12 patatomic http://www.patatomic.com
August 7th, 2007 at 1:37 am
Have you tried doing this in Fireworks? I know that familiarity is a big deal when choosing a tool, but I can just about promise you that once you use Fireworks you may never go back to Photoshop for this kind of work.
Great stuff, by the way. Keep ‘em coming.
13 CrazyLeaf http://www.crazyleafdesign.com/blog/
August 10th, 2007 at 2:51 pm
Interesting tutorial.
14 Joris http://www.33xit.fr
August 11th, 2007 at 9:05 pm
Great !
15 Mellie
August 14th, 2007 at 5:36 am
nice tut!
16 Pedro Cunha http://www.wedgeworkx.com/
August 17th, 2007 at 6:40 am
Great!
17 Jenny http://thesocalledme.net
August 19th, 2007 at 10:54 pm
Awesome. Thanks.
18 Michael http://www.aquilino.at
August 22nd, 2007 at 4:40 am
thx
very nice!
19 markus http://www.webtagebu.ch
August 22nd, 2007 at 7:31 am
Very Nice!
20 Nathan Nash http://www.nathan-nash.com
August 26th, 2007 at 4:45 pm
very nice tutorial these will be fun to make.
21 John
August 30th, 2007 at 4:49 pm
I love your Mini Pixel Icons. I used them for an intranet system, and they were so nice to work with!
Now I’m trying to make my own Mini Pixel Icons with this super-tutorial!
22 BoltClock http://blog.NOVALISTIC.com
August 31st, 2007 at 10:51 am
Cool show/hide layer trick you got there sir
I’ll be sure to give this a try when redesigning my site.
23 PoxLine http://www.poxline.com
September 1st, 2007 at 10:21 am
Oh god !, it’s so nice tut. ! Thank so much !
24 eshark http://esharkdesign.com
September 13th, 2007 at 12:52 am
320 icons within a day!! Man.. you’re really awesome! Great tutorials.. for sure I’ll try this one out. Thanks!!
25 Daniel
September 16th, 2007 at 12:28 pm
NEED TO RESIZE?
Go to image > image size > choose 700% > check resample image > select nearest neighbour (best for hard edges).
No need to put up with tiny gifs!
Excellent tutorial, I’m here trying out all sorts, this has really got me into Pixel Art, thanks.
26 Darren Summers http://darrensummers.co.uk
September 21st, 2007 at 11:08 am
Great tutorial, I’ve wanted to get into icon design for a quite a while now. This is a great start.
Thanks
27 GrantMc Designs http://www.grantmc.co.uk
October 3rd, 2007 at 2:53 pm
great tutorial, i don’t normally comment on this site but i have been looking at it for a couple of weeks now, i love the design!
great content, Great Design, Great people!
28 rAfA vAlDéS
October 4th, 2007 at 1:20 pm
very cute tutorial, wonder for my learning in Photoshop, but sometimes i get confused cuz you’re on Mac and me on Windows, but i’m learning Cmd = Ctrl and Opt = Alt.
29 Cheryl Hau
October 18th, 2007 at 6:52 am
Hi, can you send me some website on how to make design i find alot of website but it does not let me design online on computer please send me some website you can email me any time you what thank you. Please write your name so i will know who email me! Thank You
30 Azat http://deleted
November 30th, 2007 at 1:22 pm
THANKS I’ll try do this one!!
31 Hatkirby http://www.fourisland.com
December 3rd, 2007 at 4:19 am
This tutorial…. I’m amazed. Wow. I used it to draw the little icons at the top of my website (www.fourisland.com) and NO-ONE yet believes I drew them! Thanks so much for this tutorial!
32 Dodik http://wikna.biz
December 17th, 2007 at 8:49 pm
cool! I I will make an attempt repeat it. now and for me to turn out
33 Joomlabased http://www.joomlabased.com
January 4th, 2008 at 4:29 pm
I dont have any problem square corners, my problem with round corners I can’t create rounded corner icons
.
34 readywpthemes http://readywpthemes.com
January 11th, 2008 at 7:28 am
Thanks for this great tutorial
35 Lazer Kesim http://www.somellazer.com/
January 25th, 2008 at 12:44 pm
hey you guyss,,this is a perfect tutorial thanks for that
36 Webmaster Search http://www.7-24.info
January 31st, 2008 at 8:47 pm
Just started to know your website.. it is a shame as a webmaster to have found you such a late stage.
37 Daily Common Sense http://www.dailycommonsense.com
February 18th, 2008 at 2:16 am
I really like your blog! Keep up the good work!
38 yoxx http://yoxx.blogspot.com
February 21st, 2008 at 12:49 am
very cute tutorial… thanks mate
39 hasan
February 29th, 2008 at 7:57 am
ia am a web writer
40 Dragolux http://www.tutorialwow.com/
March 3rd, 2008 at 8:58 pm
Very nice! Yet another great tutorial.
41 Kanal Açma Araçları http://www.berismakina.com/
March 5th, 2008 at 4:28 am
great tutorial very thanks to you..
42 Ze cesar
March 9th, 2008 at 9:54 am
Very nice tutorial. I´ll try to make my own set now. Thank YOU for the hints.
43 Mobil Hikaye http://www.mobilhikaye.com
April 12th, 2008 at 3:18 am
very good
44 Recabron
April 19th, 2008 at 2:04 pm
Thanx. New stuffs in photoshop always are welcome.
45 Human technology http://www.designforinteraction.eu/index.php/nl/Human-technology.html
April 19th, 2008 at 3:44 pm
Although I am not a fan of the ‘pixelish’ icons I always wondered how they are made. I didn’t expect them to be made in photoshop. Thanks.
46 php-web-developer http://www.php-web-developer.net
May 14th, 2008 at 8:39 am
since I am programmer, after reading this article tried this article and created some small icons..Really a great tutorial.keep it up.
47 SerpantiN http://sapehelp.ru
May 15th, 2008 at 3:56 am
Sweet. Thanks!
48 k00pa http://www.pelikoira.net
May 25th, 2008 at 5:40 am
Thanks for great tutorial!
It is so fun and easy to make icons! I must make my own icon pack!
49 sohil http://sohil.creative.googlepages.com/e-friendz
May 28th, 2008 at 6:39 am
fantastic
50 rukia_9
June 3rd, 2008 at 1:55 pm
wooooooooooow
soooo cuuuute ^^
thanks a looooot
51 Ahmed http://www.moondust.be/blog/
July 4th, 2008 at 5:38 pm
Pretty neat! You make it seem so easy.
52 JRSofty http://jrsofty1.stinkbugonline.com
July 9th, 2008 at 2:23 am
Thanks for putting me on the right track.
53 Iexhica http://superyessicanova.blogspot.com/
July 10th, 2008 at 4:07 pm
Muy buen tutorial!!!
Gracias por publicarlo
54 kral oyun http://www.rsoyun.com
July 13th, 2008 at 11:50 pm
Thanks for lesson.
55 bheema
July 18th, 2008 at 6:18 am
Great tutorial … very useful!
56 anjum
July 28th, 2008 at 6:23 am
wow good
57 Tom http://tomdoerr.net/blog
July 30th, 2008 at 11:45 am
Thanks for this!
58 People Search Dude http://www.spokeo.com
July 31st, 2008 at 12:50 pm
OMG! Right on…nice!
59 Splavek http://splavek.ic.cz
August 7th, 2008 at 3:13 am
Good lesson. Thanks.
60 Skezo
August 7th, 2008 at 8:29 am
Thx, nie tutorial, good start into icon-design
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
62 Naseer Ahmad Mughal http://www.naseerahmad.com
September 9th, 2008 at 9:42 am
nice tutorial man, i like it.
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!
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
65 Özel Dedektif http://www.dedektiftk.com
September 19th, 2008 at 4:24 am
thank you very much
66 Tommy_Gun http://digitalni.nazory.cz
September 20th, 2008 at 2:27 pm
its useful. THX
67 venali http://www.venali.com.tr
November 16th, 2008 at 4:07 pm
nice job.
68 ISO 14001 Belgelendirme http://www.fqcert.com
November 23rd, 2008 at 2:15 pm
I can make my own site now. Thank you
69 Belgelendirme http://www.wcs.com.tr
November 23rd, 2008 at 2:17 pm
nice tutorial man, i like it.
70 psaddict http://www.psaddict.com
November 30th, 2008 at 5:10 am
Added to http://www.psaddict.com
71 bhim http://not
December 4th, 2008 at 11:39 pm
strong design man i like it very much
72 Peter http://www.lastminutechalets.com
December 17th, 2008 at 5:17 pm
thx bro
73 Michael http://www.i-trec.com
December 31st, 2008 at 3:49 am
Marvellous tutorial … thank you so much!!!
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
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!
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?
77 Samson http://www.flyingpens.com
February 5th, 2009 at 1:07 pm
Good tutrials for beginners.
78 Needle Detector Machine http://www.0769jc.com
February 20th, 2009 at 9:57 pm
I can make my own site now. Thank you
79 Maxi http://blog.zforum.ro
February 23rd, 2009 at 10:51 am
Sweet thanks.
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.
81 www.belgelendirme.com.tr http://www.belgelendirme.com.tr
March 24th, 2009 at 9:59 am
thank you
82 Dhannajay
April 2nd, 2009 at 12:20 am
Can any body from u give the icon of word (MRP III)
83 Simon
July 20th, 2009 at 2:27 am
I’m a Chinese designer,thank you very much! Your way is the best to desin 16X16 mini icon!
84 roy
August 5th, 2009 at 5:40 pm
brilliant.
85 discount voucher codes http://www.vouchersmarter.co.uk
August 28th, 2009 at 12:57 am
great post! I like it!
86 Krutika Suchak
August 28th, 2009 at 1:22 am
Nice tutorials.. Thanks..
87 Bill http://fashionow.net
September 4th, 2009 at 10:07 pm
Cute, they are really mini.
88 Bill http://fashionow.net
September 4th, 2009 at 10:08 pm
I can make my own site now. Thank you
89 nahid
September 7th, 2009 at 12:47 am
gr8 tutorial, after long time, now i know how to create really small icon
90 bagsin http://handbagsurf.com
September 10th, 2009 at 7:14 pm
Thank you for this great tut. I love it.
91 Cyrus
September 21st, 2009 at 12:28 pm
Great , How to Design Mini Icons
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com
92 Noran
October 6th, 2009 at 2:59 am
Woow .. So nice
Thank you so much ^-^
93 jesse http://rexsole.com
October 9th, 2009 at 6:44 am
Awesome! just what I was looking for to make. Thank!
94 madz
October 14th, 2009 at 9:27 am
hi i am trying to make an icon in photoshop but i cant get the sizes right as i have types a name and changed it to a flame graphic in photoshop is their any way i can convert the file into a 35 by 35 pixel without the image being blurred out or do i have to start from scratch at 35 pixels to make the icon
95 Sydney
October 25th, 2009 at 3:01 pm
Thanks so much! I figured this was the way to make the Mini Pixel icons, but I guess I needed to refresh my mind. Great post!
96 Mike http://www.comastore.com
October 31st, 2009 at 4:17 am
Really cute mini icon
97 Jeon Yeo Jin
November 12th, 2009 at 8:12 pm
thank you so much! ^^
98 tepn
December 4th, 2009 at 9:28 am
really funny! i always wanted to learn to do it!
99 vincentdresses http://www.hibirdal.com
January 5th, 2010 at 11:24 pm
The designs showed here show what simple and tasteful design is all about. Another one to consider
100 Campervan Hire Australia http://www.uzoom.com.au/about-us
January 18th, 2010 at 9:09 pm
Great ideas on mini icons we can use this for some work we are doing now thank you.
101 graffiti vector http://vectorilla.com/index.php/tag/graffiti/
January 23rd, 2010 at 5:22 pm
Very helpful tutorial thanks
102 Andi http://www.andi-bernhard.de/grundofen.htm
February 2nd, 2010 at 2:11 pm
Thank you for this very interesting tutorial. Sometimes are the small and simple tricks the best one.
Kind regards
103 GlobalaTor http://globaltor.com
February 13th, 2010 at 10:48 pm
nice shared, great thanks
104 beachbody http://fitnesscoachrob.com
February 23rd, 2010 at 6:44 pm
hey thanks, been looking for something like this. Thanks for sharing
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.
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.