Creating Icons

[designerdemarco]

Does anyone have experience creating icons? I need to create an icon for one of our programs at 32 x 32 pixels and seem to have a hard time with resolution. Would it be best to create the icon in Illustrator and then convert to an ISO file? Any information on icon creation would be helpful, as I am at a loss.

[Lukas Engqvist]

When you are working on icons 32x32 pixels is this at full colours or do you also have a limited colour palette?

start by making a new document for web setting it to 32x32 pixels. You most probably want to switch between working in pixel preview and ctrl-alt-Y (comand-option-Y on mac)

The tools in Illustrator work in vectors, even if you you want to find out how the simplified version of the icon will look.
You man want to have a grid for the pixels so that you know where th keep your lines.
And you may want to limit your palette to websafe colours.

when you are finished you will probably want to export the icons as .gif but save the illustrator file as it has more informatioon. If you are smart you may want to use layers for common stuff such as background buttons.

I am sure others will fill in, my area of expertese is within print ;P

[The Repro Kid]

Fun. I used to make a lot of icons way back in the Mac System 7-9 days.

You can make them in Photoshop if you like but sometimes it's easier to learn in an Icon Editor, at least at first, so you can more easily grasp the concept, then move to photoshop after you get the hang of it.

Illustrator is possible, but ultimately they need to be in pixels, and anything you do in Ill might not transfer to 32x32 very well. It's best to actually draw them in 32x32, which is what you must do with an icon editor, which is why I suggest starting with one to get the idea.

But remember, Icons are not just art, they are also resource files, and there is a lot more to them than just the picture. The resource part of it was fairly easy in old days, but with MacOSX it is now more involved than ever.

I think seeking out the program "Icon Factory" would be a good start. There may be others out there.

Why 32x32? are you on Mac OS 9?

[edit]Okay I looked it up, if you go to Icon Factory you need to look up their software "IconBuilder."

http://iconfactory.com/software/iconbuilder

There are probably other software available somewhere else.

Another source of info that I know of is this site:

http://interfacelift.com/icons-mac/index.php?sort=date

Go into their icon section and they have some info on creating icons.

[coningham]

I recommend creating the icon in Illustrator so that you can resize it later, either bigger or smaller.
I created some icons for WinXP, which can handle alpha transparency, so what I did was create the art in Illustrator, export it to .png using the desired dimensions (I worked with 16x16, 32x32 and 64x64) and imported the .png in and icon editor in order to create the .ico file.
Microangelo, http://www.microangelo.us/, is an icon editor that I would recommend, although there are others around, including free programs.

If, however, you won't be working with alpha transparency and need to use a limited palette, then you could work directly in the editor or, if you feel more comfortable, in Photoshop. This would be a pixel art work, so for each size that you might need, you would have to recreate the icon as just resizing not always produces good results.

[The Repro Kid]

I think mac os X are maybe 132x132 or somewhere abouts. they are pretty big.

[designerdemarco]

I was actually deciding between Illustrator and Photoshop from my icon creation. I am a little new to Illustrator and feel more comfortable in Photoshop, but I thought Illustrator would produce a better quality icon. I will be creating a 16x16 and 32x32 for our Document Mangement System software. As far as my color palette I will be working with our product colors (PMS 293 and 185), which I have web safe colors for. I am familiar with Microangelo and actually have the software on my PC. All of your input is extremely helpful, as this is my first attempt at an icon.

[The Repro Kid]

What is Microangelo?

[designerdemarco]

Repro-

Thank you for your resources but unfortanetly I am working on a PC vs a Mac. :(

I do have access to an icon editor, so I think I will attempt Microangelo considering I already have the software and then move to Photoshop.

The company I work for creates software for physicians and our new product requires both a 16 x 16 and 32 x 32 icon. Basically I get the specs and create whats needed. I usually don't ask any more questions, as they are programmers. Don't know if you had the pleasure of working with programmers, but let's just say they are one of a kind. :) I appreciate your help as it has shed some light on icon creation. Thank you!

[The Repro Kid]

Iconbuilder works with both mac and windows. It costs 79.00 but has demo version. It is a photoshop plug-in. I've never tried it.

[designerdemarco]

Repro,

I checked out the iconbulider and it's only $59.00 for the Windows version. I am going to try it out and see how it works. Thanks again!:D

[designerdemarco]

Repro,

I tried the Icon Builder plug in and it works great. They even have actions saved to make it even more simple.

Although I do have another question: I went ahead and created my icon in Photoshop and used the plug in to create an ico file, but on a remote desktop the icon looks jagged. How can jagged edges around an icon be corrected? Should I use the feather technique in Photoshop to help.

Any suggestions!

[The Repro Kid]

I haven't made any Icons since the Mac OS 7-9 days and those were different. I'm not familiar with Windows XP icons, I suspect they are similar in nature to MacOSX icons. I think these modern icons have the ability to use feathered masks, so you can create soft shadows, etc. so that may help. I'm pretty sure the iconfactory.com web site has more complete information on creating icons. It is an icon building community and I'm pretty sure they have their own forums on the subject. I'm sure you can find some info there.

[mitzs]

Repro,

I tried the Icon Builder plug in and it works great. They even have actions saved to make it even more simple.

Although I do have another question: I went ahead and created my icon in Photoshop and used the plug in to create an ico file, but on a remote desktop the icon looks jagged. How can jagged edges around an icon be corrected? Should I use the feather technique in Photoshop to help.

Any suggestions!


Design I came across this. Not sure if this is what you need since I am new to all this myself. They do have a video tut that you can watch too.

The most efficient method for creating an icon that works universally on any background is masking the entire icon in Photoshop to reduce unwanted edges. Then export with a 50% gray matte on the icon to eliminate the white 'halo' that occurs when you save an image with 1 bit transparency.


http://www.lullabot.com/articles/creating_awesome_new_icons