Intro

You'll want to download the resources before you start. If you haven't done it already, install the Circles quartz filter and the gradients. Since this is a more advanced tutorial you'll notice I'll assume some things, one is "Put everything on a new layer" even if I don't say it. Also you should know how to deselect a selection after we are done using it (CMD > D ), unless I mention to keep using it for another step.

Some of the intstructions have several slides that go with them, make sure to scroll down a bit if something doesn't make sense. I use a free screen measuring tool called Pixelstick in this tutorial go pick it up! I tried to keep the layers panel in view so you have a nice reference of the naming structure and which layer we are working on. With that said, let's move ahead!

Step 1 - Background

First start with a 800x600 canvas and we'll use a dark linen texture for a background to display our icon on.

Step 2 - Base Circles

To start our icon, on a new layer, pull a perfect 498px circle and fill with white.

On a new layer pull another perfect circle to 468px and center the selection inside the base circle, fill with #E3E3E3.

Now with the same selection, add a black 16px inner stroke by hitting SHIFT > CMD > O . You should have a dark ring.

CMD click on the dark ring again to get it's shape and go to Edit > Refine Selection and reduce the size to -6. On a new layer above the dark ring fill with white.

We want to blur this layer but keep it contained in side the dark ring, so once again CMD click on the dark ring thumbnail to get it's shape and then Filter > Blur > Gaussian Blur the white thin ring to about 22px.

Using the same selection one more time, on a new layer under the dark ring layer, fill with white. I know we can't see it noe, but we will use this as a highlight later on.

Step 3 - Metal Effect

CMD click on the base circle layer and get it's shape, then on a new layer right above the base circle add the new angle gradient, (found in resource download) turning it to match the picture below.

Now let's create some circular groves like you would find on a machined piece of aluminum. To do this we will use a third party quartz filter provided in the resources at the top, check and see if you already have this installed. If not, watch this video about installing quartz filters.

For the filter to work there has to be something on the layer first, so CMD click the base circle again and on a layer above the angle gradient fill with white. For now move this white circle over to the left edge of the canvas. We need to do this so the Circles filter will reach the center of our circle.

Now go to Filter > Quartz Composer > Other > Circles. Center the circles as close as you can, set the width to 7.00 and turn the sharpness down to 0.00.

To find the center of an object I use a free screen measuring tool called Pixelstick. Since we know our circle is 498px I can set Pixelstick to that amount and line up the outside markers on the edges of the circle, both vertical and horizontal. Adjust the Circles filter accordingly.

Bring the layer back in line with the base circle. Now we want the grooves but not the white parts so go to Edit > Select Color and sample a section of the white and hit ok.

Now that all the white is selected hit delete and voila!, we have just the grooves. Go ahead change the blending mode to Multiply and turn down the opacity to nicely blend in.

Quickly create this linear gradient, which is simply a white color stop in the center and two white color stops with there opacities set to 0 on either side.

CMD click on the Metal Angle Gradient to get it's shape and create a boundry for this light effect. Then on a new layer pull this gradient so it's centered horizontally across our icon. Change the blending mode to soft light and turn the opacity down to 56%.

Looking at the slide below you may be thinking, where did that Lighting layer come from? I forgot the screenshot on that, sorry. But it's just a new layer with a slight white to transparent radial gradient I used to lighten up the top of the icon in the overlay blending mode. Finally move these two layers down right above the Circle Grooves

Make a quick adjustment to the Outer Ring Inner white layer by turning the opacity down to 65%.

We are going to erase some of the inner white layer for more realistic lighting. Choose the eraser tool and adjust a round brush and options as shown below. Then erase the two areas that are in alignment with the dark parts of the metal shine. You may have to pass over several times each.

Go back to the Outer Ring Highlight layer and use the move tool and keyboard arrow keys to move this layer down and to the right to create a slight shine effect on the edges of the ring.

Next go back to the Round base 498px layer and move this layer up and to the left just a 1-2 pixels to create this same effect at the very top.

CMD select all of these layers shown, right click and group them together. Name the group Metal Icon Base. This will keep our layers nice and tidy.

Step 4 - Mic Stand

Time to build the mic stand. Start with a 108px wide by 14px tall rectangle selection and fill with black.

Next make the neck using a vertical rectangle of 20px wide by 54px high, and again fill with black. Center this above the base rectangle.

To make the "U" part we will have to build a selection shape by adding a round selection to a rectangle. Start with another vertical rectangle 178px wide by 150px high. Now switch to the Add Mode in the tool options box and choose the round marquee tool. Drag a perfect 178px circle using the SHIFT key as you pull.

Now here is the tricky part- As you are holding the mouse/trackpad down and the shift key, use your thumb to also hold the space bar and move the round selection to the end of the rectangle, line it up and let go of the space bar, mouse and finally the SHIFT key. If you don't get it perfect hit CMD > Z and try again.

Now with our new selection shape hit SHIFT > CMD > O and add a black 16px inner stroke.

Now using a center guideline and Pixelstick, line up the base, neck and U sections and command select these layers, right click and "merge layers" into one mic stand.

Let's cut off what we don't need, use the rectangular marquee tool and delete the top section.

We want to add a quick highlight layer. CMD click on the Mic stand layer to get it's shape and then on a new layer fill with white. Move this layer below the black mic stand layer and move it down 1 or 2px so it just peeks out.

Now just like we did on the dark ring we are going to add a thin white inner blur to the mic stand. CMD click the black mic stand layer to get it's shape and go to Edit > Refine Selection and reduce the size to -6px. Then on a new layer fill the selection with white.

Before we blur this layer we need to remove some of the thickness in the neck portion using the marquee tool and hit delete.

We want to blur this layer but contain it within the mic stand shape. To do this CMD click on the black mic stand layer again to get it's shape and then gaussian blur the thin white layer to 22px.

Use an soft brush eraser to erase any bright spots and finally turn the blurred layers opacity down to 65%.

Group these three layers together and name it... Mic Stand!