Old School Microphone Design

Jul 29
2010

In this tutorial, we are going to show you how to design an old school microphone.

Step 1:

Let’s start out by creating a new file. I used a 500×500 pixels canvas set at 72dpi, and I filled my background with white. Now create a layer set and name it ‘Microphone’. In a new layer draw a dark gray rounded rectangle with #424645 color shade and 43 x 104 px dimensions.

Step 2:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Satin and Pattern Overlay blending options to your dark gray rounded rectangle layer.

Result:

Step 3:

Add a marquee selection around your dark gray rounded rectangle through Layer > Load Selection. Then cut the top half of the selection and fill it with #BFC3C2 color shade.

Step 4:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow, Inner Glow and Gradient Overlay blending options to your cut out rounded rectangle layer.

Result:

Step 5:

In a new layer draw a rectangle with #ECEBE9 color shade 47 x 8 px dimensions./p>

Step 6:

Under Layer Style(Layer > Layer Style) add a Drop Shadow and Gradient Overlay blending options to your rectangle layer.

Result:

Step 7:

Duplicate the gray rectangle design twice and position them below the first. Then in a new layer make a black rounded rectangle with the same size as your dark gray rounded rectangle.

Step 8:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Glow and Satin blending options to your black rounded rectangle layer. Then set the layer’s blending mode to Lighten.

Result:

Step 9:

In a new layer draw a small dark gray rectangle with #656565 color shade and 7 x 7 px dimensions.

Step 10:

Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to the small dark gray rectangle layer.

Result:

Step 11:

In a new layer add a small vertical dark gray rectangle next to the small dark gray rectangle design. Then add the same layer styles from the last step. Now add the same design on the opposite end of the microphone.

Step 12:

In a new layer draw a large gray rounded rectangle with #909090 color shade and 56 x 108 px dimensions. Then go to Select > Load Selection, use default settings to add a marquee selection around the large rounded rectangle. Now go back to Select > Modify > Contract, contract by 4 px and cut out the selection. Cut the top corners of the gray rounded rectangle border and position it with the microphone design.

Step 13:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to the cut out gray rounded rectangle border.

Result:

Step 14:

In a new layer draw a small gray rectangle with #909090 color shade and 17 x 9 px dimensions on the bottom of the cut out rounded rectangle border design.

Step 15:

Under Layer Style(Layer > Layer Style) add a Satin and Gradient Overlay blending options to the small gray rectangle layer.

Result:

Step 16:

In a new layer draw a small but long gray rectangle with #909090 color shade and 66 x 7 px dimensions below the small rectangle design.

Step 17:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Satin and Gradient Overlay blending options to the second small gray rectangle layer.

Result:

Step 18:

Merge the ‘Microphone’ layer set through Layer > Merge Layer Set. Then under Layer Style(Layer > Layer Style) add an Inner Shadow, blending option.

Result:

Results:

Old School Microphone Design.

Free Professional Developer Icon Sets

Jul 29
2010

Nothing gets a web designer more excited than a good high quality and (especially) FREE icon set. And that is exactly what we have for you in today’s design news round-up.

You will find five fresh sets that that are perfect for web and mobile app developers, and all are completely free.

200+ Exclusive Free Icons: “Reflection”

200+ Exclusive Free Icons: “Reflection”

You’ll find these icons great to use at small sizes, such as for website navigation, menus and more. Both vector and raster versions are included.

The set contains 208 icons and is available free of charge for personal and commercial projects, with attribution required.
200+ Exclusive Free Icons: “Reflection”

Free Mobile Berries

Free Mobile Berries

This set contains 80 icons, sized at 64×64px and are in .png format.
Free Mobile Berries

Content Management System Icon Set

Content Management System Icon Set

This CMS Icon Set is made up of 12 high quality icons sized at 48×48px, and available in .png-format. The set was designed to be used in content management systems, but can also be useful for other user interface designs. You can use the set for all of your projects for free and without any restrictions.
Content Management System Icon Set

Designer Icons – Professionally Hand-Crafted Free Icon Set

Designer Icons – Professionally Hand-Crafted Free Icon Set

12 Professionally Hand-Crafted icons for designers and creatives. Each Icon is 32×32px with a transparent background.
Designer Icons – Professionally Hand-Crafted Free Icon Set

Tron Legacy Social Icons

Tron Legacy Social Icons

This social media set has been inspired by the classic movie Tron. In total there are 20 icons, and the download package has the PNG, BMP, GIF, ICO and AI versions.
Tron Legacy Social Icons

By Paul Andrew (Speckyboyand speckyboy@twitter).