Best Web Magazine

In this tutorial we will show you how to create a detailed audio receiver icon using Photoshop’s vector editing capabilities. Let’s get started!

---

Tutorial Assets

The following assets were used during the production of this tutorial.

• Powered By Envato API logo

---

Step 1

Open Photoshop and create a new document sized at 900 px wide and 500 px high with resolution of 72 px/inch.

---

Step 2

Use the Rounded Rectangle Tool (U) with radius of 5px to draw light grey (#f0efef) rectangle. This rectangle will be the base of our receiver. Apply Bevel and Emboss from Layer Style panel.

---

Step 3

Cmd/Ctrl-click on Vector mask thumbnail to create selection, create new layer on top, add Clipping Mask, fill layer with white color, and then add noise by choosing Filter > Noise > Add Noise from the main menu with settings of 30%, Gaussian and Monochromatic.

Blur the noise by choosing Filter>Blur>Motion Blur with an angle of 0 and a distance of 55 pixels, to create brushed metal effect. Apply Gradient Overlay to this layer, change Blend Mode to Multiply and set Opacity to 80%.

---

Step 4

Pick up Rectangle Tool (U) and draw small black rectangle – “foot”, apply Gradient Overlay from Layer Style, and position this layer below receiver “body” layer.

Draw another black rectangle using Rectangle Tool (U) just below “foot” layer.

Repeat the process to create the other foot.

---

Step 5

Create grey (#6e6e6e) rectangle, using Rounded Rectangle Tool (U) with radius set to 3px and apply following layer styles.

Position this rectangle below receiver body using the image below as reference.

---

Step 6

Create black (#141414) rounded rectangle with radius of 70px and apply Bevel and Emboss and Stroke from Layer Style panel. Give this layer name “display”.

Cmd/Ctrl-click on Vector mask thumbnail to create selection, go to Select > Modify > Expand to expand selection by 3px, then create new layer just below rounded rectangle and fill it with black color. Clear the selection by pressing Cmd/Ctrl + D on keyboard. Name this layer “display background”.

---

Step 7

Let’s create dvd tray. Draw black rounded rectangle with 10px radius and position it like on the image below.

Cmd/Ctrl-click on Vector mask thumbnail of “display” to create selection around, make sure you are on “dvd tray” layer, inverse selection (Select > Inverse), and then hit Delete on keyboard to delete the top part of rectangle.

Add following layer styles to “dvd tray” layer.

Create selection around “dvd tray” layer (Cmd/Ctrl-click on layer thumbnail), expand selection by 3px (Select > Modify > Expand), create new layer below “dvd tray”, fill with black color and apply Bevel and Emboss.

Choose Custom Shape Tool (U), load Nature Shapes and draw Sun2 shape using #4c4c4c color.

---

Step 8

It’s time add command button. Grab Ellipse Tool (U), create black circle and add this blending options to the circle.

Draw a white circle in the middle of the prevoius one and add Outer Glow and Color Overlay.

Draw another circle (#242424) in the middle of the prevoius one, but just a bit smaller, and give this layer Gradient Overlay.

With Ellipse Tool (U) create one more circle (#1d1d1d) in the middle and apply Bevel and Emboss and Stoke from Layer Style panel.

Add command name in the middle using Horizontal Type Tool (T), and direction arrows using Polygon Tool (U). For the color use #777777.

---

Step 9

Using method explained in Step 8 create command button on the right side of the receiver. Create stop, play, pause, forward, rewind and eject commands using Rectangle and Polygon Tool. For the color use #777777.

---

Step 10

Use the Horizontal Type Tool (T) to add some text and numbers on display. Use a range of type sizes and weight to provide focus to the important elements. For the color use #64efdd. Add an Outer Glow using the same fill color.

---

Step 11

Open up a new document at 4px by 4px. Zoom into the document and use the Pencil Tool (B) to draw two horizontal lines across the canvas. Go to Edit > Define Pattern and give it a name of LED.

Add an Pattern Overlay to the text and numbers on display.

---

Step 13

Add more figures on display and apply Outer Glow and Pattern Overlay as described in Step 10 and Step11. The Musical sign can be found in Custom Shape Tool > Music Shapes > Eight Note, while the other signs can be easily created using Rectangle and Ellipse Tool.

---

Step 14

Cmd/Ctrl-click on “display background” to create selection around it, create new layer on top, drag a white to transparent gradient, from top to bottom, to create a highlight, then change the Blend Mode to Soft Light.

---

Step 15

In this step we are going to add phones and aux inputs. Draw circle using Ellipse Tool and fill it with #777777 color. Edit Layer Styles to include Inner Shadow, Inner Glow, Bevel and Emboss and set Fill to 0%.

Create another circle using #777777 color and scale into position to sit centrally. Set Fill to 0% and apply following layer styles.

Create one more circle using #353535 and place it centrally. Add input name using Type Tool and apply Drop Shadow. Group these layers into "phones" group.

Duplicate “phones” group, move it a bit to the right and change input name to AUX and group name to “aux”.

---

Step 16

Let’s move on. It’s time to create USB connector. Grab Rectangle Tool and draw black rectangle. Set Fill to 0% and add layer styles.

Draw another black rectangle, a bit smaller then previous one, lower Fill to 0%, open Layer Styles and apply Drop Shadow, Gradient Overlay and Stroke.

Draw one more black rectangle, again bit smaller then previous one, and apply following layer styles.

Finally create one more black rectangle, set Fill to 0%, double click on layer to open Layer Style and apply Inner Glow, Gradient Overlay and Stroke.

At the end add connector title and signs. Apply Drop Shadow to text and signs.

---

Step 17

In this step we will create command buttons. With the Ellipse Tool (U) create a grey (#777777) circle, set Fill to 0% and add Inner Shadow, Inner Glow and Bevel and Emboss.

Add another circle, smaller then first one, open Layer Style, apply Inner Shadow, Outer Glow, Inner Glow, Gradient Overlay and Fill to 0%.

It’s time for another circle but this light grey (#e4e4e4), and the add following Layer Styles.

The last circle – set Fill to 0% and apply Outer Glow and Gradient Overlay from Layer Style panel.

Finish this step by adding title to the button. Also apply Drop Shadow.

---

Step 18

Use method explaind in Step 17 to create input and volume buttons.

---

Step 19

Add receiver model number using Type Tool and apply Drop Shadow from Layer Style panel.

Open up Powered By Envato API logo (listed in Tutorial Assets) in Photoshop, grab only Envato logo, and import in our design. Scale it down and position like on the image below. Double click on layer to open Layer Style, and give this layer Inner Shadow, Bevel and Emboss and Color Overlay.

---

Step 20

We’re almost there! Create new layer just above background layer, create an ellipse selection and fill it with black. Go to Filter > Blur > Gaussian Blur and apply blur with a 8px radius.

Create new layer above our shadow layer, then create ellipse selection with Elliptical Marquee Tool (M), around left “foot”, fill it with black, and give this layer Gaussian Blur with 2px radius. Lower the Opacity to 90%.

Duplicate this layer (Cmd/Ctrl + J) and position it below the right “foot”.

Finally apply Gradient Overlay to the background.

---

Conclusion

That’s it. I hope you learned something new from this tutorial and I also hope you liked it and had fun!

Similar Posts

• Create a Detailed Vintage Television Icon in Photoshop
• Create a Shiny Psdtuts+ Folder Icon in Photoshop
• Create a Cardboard Box Filled With Glossy Icons
• Quick Tip: How to Make a Glossy Web Style Rounded Button
• Create a Knife in Photoshop

< Previous Post Next Post >