Radar Icon in Photoshop

January 10, 2011

from abduzeedo's blog










Radar Icon in Photoshop



























Tags

• icon
  
• icon design
  
• photoshop
  
• tutorial
  

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



Click here to download the Photoshop file used for this tutorial


Abduzeedo