Tips for small size Icon design in Photoshop


Here in this post i am going to give to some tips related to small size graphics design in photoshop.

First thing is that always use the square pixel in size, means the height and width of the canvas should be same.
You could use the large canvas size during the design like 200×200 pixels during designing process then resize it according to your need at the end.
Second important thing is that always use the higher dpi. I usually use 300.
If you are planning to design the icon with alpha channel means background should be transparent then use Transparent in the background options.
I would suggest not to use the Text on Icons but if its really necessary then always set the Anti-Aliasing option to None.

If you are designing the really small icon of the size 20×20 or 15×15 then try not to use too much colors there because its really mess up when u resize it.
I would always prefer to use the 1px darker color border outside the shape to be used as icon or use a inner shadow to make it more prominent than that of background on which it would be used later on.
At the end when you are finished all the design and its ready to go then go to image>>Image size, In the dialog box make sure that constrain proportion and Resample image are checked, use the Bicubic in Resampling method.

Thats all, save the image in your desired format….either gif,Png, or anyother.

Thanks…..

add :: Add :: add :: Digg :: add :: Stumble :: add :: seed :: :: :: TailRank

3 thoughts on “Tips for small size Icon design in Photoshop”

  1. Thank you for above. It’s exactly what I tried to find.

    But I have a trouble while following your advice above. As your recommend, I specified 300 ppi for my document but because what I am trying to make is icon, it should be displayed on screen which has only 72 ppi. When I resize image from 230 X 230 pixels to 23 X 23 pixels, and change resolution from 300 ppi to 72 ppi as my last task before save file into disk, the size of final image shrinks too small.

    Am I doing wrong anything?
    Am I supposed to make my document with 72 ppi from very beginning?

  2. @seachicken – it doesn’t matter what DPI you use, unless you plan to print your icon, or if you resample the icon using DPI (which is NOT the best way to do it, IMO).

    Here’s why:
    If you have an image of 300×300 pixels at 72dpi, your image displays on 300×300 screen pixels. If you have a 300×300 image at 300, or 500, or 1000 dpi, it still displays on 300×300 screen pixels. The number of pixels doesn’t change! It still has 90,000 pixels. The only time it comes into play is when you print, because then your printer has to decide how small to make those pixels to fit them into the the number of inches in the document.

    I prefer doing screen resolution work @ 72-150 ppi, because it is more convenient in PS.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s