We have received quite a few emails with requests about some icon design tutorials in Photoshop. I'm not an icon designer per se however I love icons and really admire guys that are good at that, including my friend Everaldo Coelho, currently working at Apple and great inspiration, including for this tutorial.
So in this tutorial I will show you how to create a Mac style radar icon in Photoshop. This could be done easily in Fireworks and in Illustrator, I am also thinking about doing that to practice more.
Step 1
Open Photoshop and create a new document, the one I'm using is 1024x1024 pixels. Also I added the linen background I created in one of my previous tutorials just to make it more stylish.
Step 2
With the Ellipse Tool (U) create a circle in the center of the document. You can create it with 500x500 pixels or depending the size of icon you want.
Step 3
Duplicate that circle and then resize it in order to create a sort of inner circle, the idea is create a border for our icon. Once you resized it click with the right button of the mouse over the icon of the layer in the Layers Panel and select "Select Pixel" in order to create a marquee selection of that area.
Step 4
Go to Layer>Layer Mask>Hide selection.
Step 5
To create the effect of a metallic border let's use Layer Styles. So go to Layer>Layer Styles>Drop Shadow. Then follow the values of the image below. You will use Inner Shadow, Bevel and Emboss and Color Overlay
Step 6
Here is the effect you will get after the layer styles.
Step 7
Add another circle using the Ellipse Tool (U). This one will be in black and will be in the center of the metallic border.
Step 8
Duplicate the circle and resize it so it's slightly smaller than the black circle, then go to Layer>Layer Style>Gradient Overlay. For the colors use #7a5511 for the light brown and #180f00 for the dark. For the other values use the image below.
Step 9
Add a new layer over the the circle with the gradient and then go to Layer>Create Clipping Mask. Now with the Brush Tool (B) paint using a very soft brush with #7a5511for the color right on top of the circle (1). Also add a new layer an paint again with the same color but with 5% opacity over the metallic border to create a brown reflection.
Step 10
Add a folder in the layers palette and change the blend mode of this folder to Color Dodge. Also mask this layer using the inner circle area for reference. Then using the Rectangle Tool (U) create a very thin line in white, make sure it's inside the folder with color dodge. Go to Filter>Blur>Gaussian Blur. Use .5 pixels for the Radius. After that change the Opacity to 70%. Duplicate this line and rotate it 90º. You will have a result like the image below.
Step 11
With the Ellipse Tool (U) add a circle in the middle of the radar, the color here won't matter because we will use layer styles to change it.
Step 12
For this circle the first thing to do is change the Fill Opacity to 0, then add a Outer Glow, Inner Shadow and Stroke. For the values use the image below.
Step 13
Here is the result you will get with after the layer styles.
Step 14
Now add a new layer inside the folder with color dodge and the with the Brush Tool (B) and white for the color paint a couple white spots. Because of the color dodge and the soft brush the circles will have a really nice light effect.
Step 15
Add more elements in order to make it look more realistic.
Step 16
Create a new rectangle with the Rectangle Tool (U) and then rotate it 45º. This rectangle will be also inside the folder with color dodge that we created it the step 10.
Step 17
Now with the Pen Tool (P) create a shape that covers the area from of one quadrant plus the 45º of the rectangle we created in the previous step.
Step 18
Go to Layer>Layer Styles>Blending Options. Change the Fill Opacity to 0 and then go to Gradient Overlay. Use Angle for the Style 50º angle and 55% Opacity also take a look at how I set up the gradient colors.
Step 19
This is the result you will have after the layer styles.
Step 20
Repeat the same thing we did in the step 2-4 and create another circle to use as border. This border will be between the glass of the radar and the black circle, it's the green one in the image below.
Step 21
Now let's apply more Layer Styes to add a more metallic look to our design. Use the image below for the values.
Step 22
Below you can see the look of the border after the layer styles.
Step 23
Now create a circle with the same diameter of the one that has the radar elements, then apply a Gradient Overlay on it using white for the start and end colors but the different opacities, like 0 for the start and 100 for the end. After that resize it a little bit horizontally only. Then using the Elliptical Marquee Tool (M) create an selection like the image below and hide that area of the selection with laery mask (Layer>Layer Mask>Hide Selection).
Step 24
Select all the layers used to create the radar interface including the circles with gradient overlay. After that duplicate them and merge the duplicated layers into a layer. Then go to Filter>Blur>Gaussian Blur. Use 15 pixels for the Radius. Change the opacity of this layer to Screen at 50%.
The idea of this layer is to increase the glowing effect.
Step 25
With the Eraser Tool (E), delete the areas that are dark in the radar interface to increase to contrast.
Conclusion
As you can see the whole idea of this tutorial was show you how to create a Mac style icon in Photoshop using basic tool and filters. You can even use more non-destructive features like smart objects in order to make it easier to resize.
Green Version
You can create different color schemes using the Hue and Saturation. To do that just go to Image>Adjustments>Hue and Saturation or Layer>New Adjustment Layer.
Download the Photoshop File
