Creating Aqua Images in Photoshop
Customizing Mac's Finder & Trash Icons
Changing Stubborn Icons That Use ICNS Files

Creating Aqua Images in Adobe Photoshop

Using these techniques you can aquify simple shapes. In this tutorial we will aquify a circle.

There are three characteristics that set an 'aqua' image apart from a flat image:

1. Glare
2. Proper Lighting
3. Drop Shadow

1. Creating Glare

Create a new window with a transparent background.

Tip: Even though OS X icons have a maximum area of 128x128, its best to start large and reduce the image size later. A safe size to start at is 256x256 pixels.

File: New...

- Create a perfectly round circle using the Elliptical Markee Tool by holding down the SHIFT key and dragging across the window.

- Use the Paint Bucket Tool to fill the ellipse with a solid color. Use grey if you are just learning how to aquify. You can always adjust the color later.

With the ellipse still intact create a new layer. Make sure this new layer, "Layer 2", is selected in your Layers Window.

Layer: New: Layer...

- Select your Linear Gradient Tool

- Set the Linear Gradient Tool options to "Foreground to Transparent" and set your Foreground Color to white. Drag the Gradient tool, starting from the top of the ellipse to halfway past the middle of the circle.

Use Distort to manipulate the gradient fill in "Layer 2" by pushing the bottom edges of the in towards eachother and smooshing the entire gradient in so that it leaves a small gap between itself and the rim of the main circle.

Edit: Transform: Distort

After you get the gradient to look right create an exact Duplicate of "Layer 2" and label it "Layer 3".

Layer: Duplicate Layer...

Use Flip Verticalto turn "Layer 3" upside-down and then move Layer 3 until it is in about the same position at the bottom of the circle as "Layer 2" is at the top of the circle.

Edit: Transform: Flip Vertical

Use Gaussian Blur to blur "Layer 3" until it looks blown out and softer than "Layer 2".

Tip: A radius of somewhere around 10 pixels usually works for the Gaussian Blur.

Filter: Blur: Gaussian Blur...

- Play with the opacity of layers "2" and "3" until you get something that looks right to you. If you are aquifying a colored object you may want to blend the colors by setting both layers to Overlay.

2. Proper Lighting

Select "Layer 1" and use the Lighting Effects filter on it. You will have to play with the light settings and direction until you get something that looks right.

Tip: It's always a good idea to make your light source in an aqua object come from the bottom up.

Filter: Render: Lighting Effects...

Add an Inner Glow to "Layer 1". Adjust the inner glow settings so that the glow color is black. Change the Blend mode to Mutiply. Then adjust the Size and Opacity of the glow until you get something that looks right.

Layer: Layer Style: Inner Glow

3. Drop Shadow

There are two different types of drop shadows you may put on an aqua object. Chose the one which is most appropriate for your design.

1. Flat Drop Shadow:
   Create a Drop Shadow on "Layer 1". You may have to tweak Opacity, Angle, Distance, Spread and Size before you get the desired effect.
   

   Layer: Layer Style: Drop Shadow...





2. 3D Drop Shadow:
   - The Elliptical shape you select here will translate to the shape of the Drop Shadow. Use the Elliptical Markee Tool to select a small flattened portion of "Layer 1", Copy it, Paste it in a New Layer,and then move the new layer underneath "Layer 1".






3. Create a Drop Shadow on this new object. Set the Angle to 90 degrees and adjust the Distance until the drop shadow of the new object just touches the bottom of the circle in "Layer 1". Adjust the Opacity, Spread, and Size accordingly.

   Layer: Layer Style: Drop Shadow...

After you get your image looking the way you want Merge Visible on everything, select the merged image, Copy it, Create a New Window and Paste your image there. This will eliminate all extra space around your image. You can then adjust the image size using:

Image: Image Size...

You should now have a 128x128 (or less) image on a single transparent layer in Photoshop. In order to turn this into an icon you'll need to download the IconBuilder plugin for Photoshop or paste your image into Iconographer. Instructions are provided with these tools.

This article was written by Matthew Bice for Xicons.com