Tuesday, January 04, 2005

Happy New Year everyone I wanted my first post of the year to be a bit more useful than normal so I have put together a quick photoshop tip for anyone wishing to create icons.

I had a conversation with Dan Cederholmfrom SimpleBits a while ago about Icon creation and told him about a very cool little thing you can do with Photoshop to make the process easier, I had assumed that this was common knowledge but as it isn't I thought it would be a good article for freaksauce, so here we go.


When creating an Icon you need to be zoomed in as far as you can go but how annoying is it to have to zoom out everytime you want to check your work? Well you don't have to, just follow these simple steps. First create a new document, say 40px square.


stage 1



Now the clever part go to Window>Arrange>New Window for xxx.psd (thanks for Albert Hardy for pointing out that this is specific to Photoshop CS, for earlier versions use Windows>Documents>New Window)


stage 2


Now you have an exact duplicate of your document as below:


stage 3


Now simply select one of the documents and zoom in to 1600%.


stage 4


Now as you work in the large window the changes are reflected in the small window so you can check your work in realtime, easy!


final stage



UPDATE:
I have had someone point out in my comments that I haven't explained what the next steps are to creating icons. Well, I usually create icons for web applications and Flash applications so no conversions have ever been necessary but I have on occasion needed to create a Favicon or two at which point you will need to convert your file to a '.ico' file. To do this you will need to use something like Icon Builder Pro or try checking this list of freeware and shareware Windows Icon utilities. If you are an OS X user this article on creating Favicons should point you in the right direction.

If anyone knows of any other tips or software regarding this article please leave a comment and I will include the information in the original post.

Jon 7:56 PM Permalink

Comments:

Wow, this really makes creating icon in PS easy. Thanks for the tips. Just want to add that in PS7, it is Windows>Documents>New Window.

That is a really great tip. Its a good thing for creating patterns as well. How do you create the icon file after you create it in Photoshop?

There is a donationware Windows Icon (ICO) file format plugin for Photoshop (Mac and Win) by Toby Thain.
http://www.telegraphics.com.au/sw/
I have also used PNG for Icons that have transparency.
link rel="icon" href="favicon.png" type="image/png"
cheers
Bruce

Post a Comment