Re: Mac OS X Icons Template (Photoshop techniques)
Re: Mac OS X Icons Template (Photoshop techniques)
- Subject: Re: Mac OS X Icons Template (Photoshop techniques)
- From: Matt Judy <email@hidden>
- Date: Thu, 13 Dec 2001 23:35:31 -0800
First off, the shadow of your icon should be drawn as if the light
source was directly above and in front of your monitor. All shading in
the icon should follow suit. For more on this, see:
http://developer.apple.com/techpubs/macosx/Essentials/AquaHIGuidelines/AHIGIcons/Icon_Perspectives.html
As for creating a Mac OS X icon, this is how I do it. Note that there
are places you may want to save a copy, just in case... I won't mention
them here.
Create your Photoshop document (128x128, transparent background). Create
a layer and fill it with white so you can see what your icon will look
like on a white background. Create the icon art in the layers above
your white layer.
Once your icon is drawn, including shadow, delete the white background
layer. Flatten the remaining layers. You'll now have the icon's
graphic (with transparency) above the Photoshop checkered background.
The next step is to create the alpha channel for your icon.
1. Hold down the Command key, and click the layer (in the Layer palette)
which contains your icon graphics. This will create a selection,
including transparency.
2. Click the "Channels" tab (next to the "Layers" tab) to bring up that
palette.
3. At the bottom of the Channels palette, there are 4 buttons. Click
the second one (if you hover your cursor over it, a tooltip will say
"Save selection as channel"). This will create your alpha
(transparency) channel for your icon.
4. Choose "Deselect" from the "Select" menu.
Now, you need to remove the transparency from your icon graphics. This
makes sure that your icon will anti-alias correctly on all background
colors, light and dark. Without this process, there may be a 'halo'
around your icon.
1. Select the "Layer" tab to bring up the layer palette, and click the
layer which contains your graphics.
2. Duplicate the layer. You can do this in many ways, but the fastest
is to drag the layer to the 3rd icon at the bottom of the Layers palette
(the one that looks like a dog-eared page).
3. Repeat the above step 8 times. You'll have 10 copies of the layer.
4. Select "Merge Visible" from the "Layer" menu.
5. Click the merged layer.
6. Repeat steps 2 through 5 three more times.
As you do this, you'll notice that the transparency is being removed
from your image. That is the idea. The transparency is provided by the
alpha mask you created in the first process, and your icon will
antialias correctly.
Now, create a new layer behind your icon graphics. Fill it with black.
Select "Flatten Image" from the "Layer" menu.
Save as format "TIFF", and make sure "Alpha Channels" is checked. You
can now use the IconComposer utility in /Developer/Applications/ to
build your Mac OS X icon.
You should also create a 32x32 and 16x16 icon representation. This
process is more simple... create an the icon, and a 1 bit mask. These
representations will only be used in the Finder windows, not in the
Dock. The Dock will always use a scaled version of the 128x128 icon.
IconComposer will output an .icns file. That's it. Hope that helps a bit.