Prihlásiť sa · Slovenčina

Návody pre Photoshop 

How to optimize Photoshop CS2/CS3 settings for icon design

Here are my thoughts about designing icons in Adobe Photoshop:

- many respected icon designers consider Illustrator better tool to design icons - . I  do not own or know Illustrator, but I'm pretty good at Photoshop, and I found that it can be tweaked to create icons fast and easy too.

- the best way to design icons (even in small sizes) is vectors. In Photoshop, they are made with Shape and Pen tools. My personall approach is  to create vectors in solid colors (one vector in each layer) and then apply various layer effects, such as gradients and strokes.

So, what can be done to make Photoshop the best icon - designing tool?

First of all, have a plug-in to save icon files from photoshop files, such as IconBuilder from

It  is a good idea to have template file to start with. IconBuilder comes with Essential folder, including some of such templates (first picture shows one of them).

In View menu, go  to Show and enable Grid. I also recomments that you assign keyboard shortcut to that command - you will need to show and hide Grid often. To customize shortcuts, go  to Window menu - Workspace - Keyboard shortcuts (Photoshop CS2+ only).

Go to Photoshop Preferences - Guides, Grid and Slices. Set gridline to 1 pixel, and subdivisions to 1.

Now when you work with your design in large zoom (1200% zoom in  my screenshot) you will see the grid where each line is  a pixel. It  is not helpful in 100%-200% zoom, so use your brand new keyboard shortcut to hide the grid.

The last tweak is - go  to View manu again, make sure Snap is enabled and in Snap To menu, Grid is enabled.

Now, whenever you use Shape or Pen tool to draw vectors, they will automaticaly align to pixels. The result - your vector-based icons are looking great and sharp even in small sizes. If you want to draw a vector in the middle of  a pixel, simply hide the grid - and Photoshop will stop aligning to it.

a very quick example - I used pen tool to create 3 vectors...

...and then applied stroke and gradient to each layer...

... and here is how it looks at 100% zoom. Not the best icon, I know :) but this rough example took 20 seconds!

That's all, and good luck! May the world see better icons with your help :-)

← Aquawave - making of Frog - making of →

Komentáre 13

LeeLu · long ago
Thanks, I prefer to use Photoshop too! Very helpful. (Y)

MaKo · long ago
Useful tip: When you working with high level zoom it's very nice to see what you doing in normal zoom. window->documents->new window thats it! Now we can see everything in 2 states of zoom ^^)

zxxxy · 10 apríl 2008
can photoshop make format .icns?

Vlad Gerasimov · 10 apríl 2008
zxxxy: no, photoshop does not save icons.

sc · 19 august 2008
here is photoshop icon plug in hxxp://www.telegraphics(dot)com(dot)au/sw/ i have tried it and it works.

· 17 máj 2011

a · 20 december 2013

Vj · long ago
Nice tute, may be you wanna publish some of your icons as well. Nice work dude! Inspiring!

snehal · long ago
(Y) great ,cool, i learnt alot from u. thnks a lottttttttttttttttttttttttttttttt u make a great teacher dude.

Mike · long ago
nice tut indeed...very useful. thanx also to MaKo for that little extra tip in regards to zoom....also very useful. thanx guys.

duan · 5 máj 2008
Exellent! Thank you.

Ziontz · 12 august 2009
pixels are not aligned to grid ... they` are not snaping into the grid... what am i doing wrong?

· 15 august 2009
there's some wrong link with the Translate page.when i try to translate Adobe Photoshop Tutorials>How to optimize Photoshop CS2/CS3 settings for icon design,i see it's [!] Zoomed Pixels's text。

Pridať komentár

1 2 3 4 5 6