To complete this tutorial, you will need Adobe Photoshop (or any other image editor that will export transparent TIFF files), Xcode and CandyBar installed on your Mac. Xcode is Apple’s free software development kit. You should be able to install Xcode from your computer’s install disk or download it off Apple’s Website. It’s also important to note that the newest version of Mac OS X, Leopard has moved to a maximum 512 pixel icon sizes. CandyBarallows you to organize your icons.

Designing The Icon

Designing the icon is up to you and your imagination. Here is a list though of things to keep in mind when designing your icon.

• Apple Human Interface Guidelines Apple has there own setguidelines and rules to which they expect icons to be created by.
• Plan Your Icon For Scale Like designing a logo, you need to be able to scale your icon from 16 x 16 pixels all the way now to 512 x 512 pixels with Leopard. For the 16 pixel icon you may want to take out elements. For example, for my RSS icon, I’m eliminating everything but the orange rss button.
• Leave Margins for Your Icon You don’t want one icon tooutwieght the others because of it’s size.

Exporting The Icon

I’ve create an easy to use Photoshop Template just for mapping out each icon size. This way you don’t have to bother creating multiple size documents and what not. Simply drag and drop the icon layer(s) onto the template and the duplicate and resize according to each size on the template. At this time you may want to sharpen icons at smaller sizes to give them more definition. Remember: you can use Fade controls (located under the Edit menu) after using the sharpen filter.

Now that you’ve completely resized your icons and are ready to make them into an icon, hide the back drop layer. Then go to File >> Save As. You want to format the document as a TIFF file with the options, “Layers” unchecked and “As A Copy” checked. A TIFF Options dialogue box should appear after hitting the save button. It’s important to have Compression set to “None” and “Save Transparency” checked. This way, the icon comes out exactly as you intended.

Important TIFF Settings to getting the best looking icon

Now all you have to do is duplicate the TIFF file four / five times (one for each size), and crop the file to elimante all other icons. Knowing where to crop the documents should be simple because the guides still remain from the Photoshop document.

Using Icon Composer & CandyBar

Icon Composer is located in the Applications >> Utilities in the Xcode folder. Once you’ve opened the application, creating the icon is easy as dragging the TIFF files over their appropiate sizes. Agree to Extract Mask when asked. Save a fresh ICNS file. The icon shouldn’t yet appear as the actual icon on the document. This is where CandyBar comes in handy. Just drag the .icns file into CandyBar and then drag out the icon image show in the application.

Icon Composer is as simple as dragging and dropping the TIFF files on to its appropriate spot.

Exporting a TIFF, and not a transparent PNG file from the Export to Web menu proved vital especially when exporting transparent images. This particular icon, when made into an icon using an exported PNG file will cause the smoke coming off the RSS to pixelate. This pixalation is fixed though when exported a TIFF file with tranparency.

Source

This tutorial will show you how to effectively create the iTunes icon found on all iPhones and iPod Touches. This tutorial will walk you through the various filters and layer styles needed to create this very sleek icon.

Step 1

First, open up a new document – 125 x 125 pixels at a resolution of 72 DPI. Fill your canvas with black.

Step 2

On a new layer, grab the rounded rectangle tool. With the radius set to 9 and your foreground set to white, draw in a rounded rectangle. Name this layer “icon base.”

Step 3

Apply the following gradient overlay. The color on the left of the gradient should be #a800ff while the color on the right should be set at #8a00ff.

Step 4

Hold Command (Ctrl for PC) and click on the thumbnail for the layer “icon base.” This will select the icon.

Step 5

Create a new layer, with the “icon base” still selected. Fill in the selection with white. Go ahead and name this layer “starburst” because it is where we will be making the starburst effect.

Step 6

With the layer “starburst” selected, go to Filter>Noise>Add Noise. Apply the following settings:

Step 7

Hit Command (Ctrl) + D to deselect the starburst layer. Go to Filter>Blur>Radial Blur and apply the following settings:

Step 8

This is what your image should look like thus far.

Step 9

Hold Command (Ctrl for PC) and click on the thumbnail for the layer “starburst.” This will select the burst you have. Now, hit Command+Shift+I to invert your selection. Hit delete to remove the extra starburst.

Step 10

Lower the opacity to 41%. Your icon should now look like this:

Step 11

On the “starburst” layer, add a layer mask. With a Black to White gradient, and the gradient set as Radial, drag from the center of the icon to the edge. This will clear out the starburst effect from the middle of the image.

Step 12

Create a new layer. Name it “Gloss.” Grab the Ellipse Tool and with your foreground as white, draw this shape:

Step 13

Hold Command (Ctrl for PC) and click on the thumbnail for the layer “gloss.” This will select the gloss you have. Now, hit Command+I to invert your selection. Hit delete to remove the extra gloss. Lower the opacity of this layer to 73%.

Step 14

Add a layer mask to the “gloss” layer. With a black to white gradient, drag from the middle of the icon to about the middle of the gloss. It should lower the opacity of the bottom half giving you something like this:

Step 15

I hope you named your layers for this one! Command+Click the thumbnail for “gloss.” Press Command+I. Then, Command+Option+Shift+Click the thumbnail for “icon base.” You should have a selection like this:

Step 16

Create a new layer and name it “shadow. Now, using a black to transparent gradient, drag your mouse like this while holding the Shift key:

Step 17

Lower the opacity of your “shadow” layer to 53%.

Step 18

Next, go ahead and grab your brush tool. Set the diameter to 100 and the hardness to 0. Create a new layer titled “bottom glow.” With white as your foreground color, simply make one brush right at the bottom of the icon.

Step 19

Crop out the brush from your “bottom glow” layer that is not in the icon. Lower the opacity of “bottom glow” to 45%.

Step 20

Now we are done with the overall icon. Next, we just need to add in the ring and the arrow. To start the ring, grab the elliptical marquee tool. Holding down the shift key, draw out a selection like this:

Step 21

Create a new layer titled “ring.” Fill in the selection you have with white. Next, go to the top menu and choose Select>Modify>Contract. Contract your selection by 5 pixels and hit delete.

Step 22

Apply the following layer style:

Step 23

Create a new layer titled “arrow.” Choose the arrow in your custom shapes pallet (U) and draw an arrow like this:

Step 24

Press Command+T to enter transform mode. Right click and choose “Rotate 90 Degrees CW.”

Step 25

Copy and paste the layer style from your “ring” layer onto your “arrow” layer. Your icon should look like this. Congratulations! You’re finished!

Extra

Have some fun messing around with different opacities, layer styles, colors, etc. There are literally endless possibilities.