How to Draw A Very Detailed RadioTape From The 80′s
Mohammad Jeprie Posted on 06. Apr, 2010 | Comment in!

Remember the old days where cassette tape and FM radio still rules? The Rolling Stones, Beatles, and Ozzy Osborne was the king! Great memory isn’t it? And of course you’ll remember the gadget we use at that time. It’s much bigger than iPad, but no one complains! Radio tape. In this tutorial, we’ll recreate a radio tape from the 80′s using only Photoshop.
First, let’s take a look at the image we’ll be creating. Click here or click on the image to see it in full resolution.
Every shape in this radiotape is made from vector shape. So, if I say “Draw a circle”, it means circle from shape not from elliptical marquee. Because every shape made from vector shape, the final outcome is scalable. We can resize it to any size we want. Sound good? Let’s move on!
Source Needed
Step 1-Base
We’ll start by creating base for this radiotape’s body. Create a rounded rectangle with radius 20 px. In both side, draw two rectangle and choose subtract. Add Bevel and Emboss to this shape.


Step 2
Using rounded rectangle tool draw two base for speaker. For its feet, just draw two small rectangle on the bottom.

Step 3
Ctrl+click the base. Create new layer, fill it with white, and changee blend mode to Multiply. Click Filter > Noise > Add Noise. Use small Amount and select Monochromatic. This small step will add a bit of texture to the body.

Step 4
Draw a rectangle in the middle. This will be the base for tape deck. Add some layer styles.


Step 5-Create Tape Deck
For tape deck, draw a rectangle. Duplicate the rectangle and make it smaller, from the option bar choose subtract to create hole on the bigger rectangle.

Step 6
Under tape deck, draw another rectangle and add a poligon.

Step 7
Manually draw shadow inside the tape deck. Create circle shape and add these layer styles.

Step 8
Draw smaller circle and add some rectangles. Duplicate these shape until we have the tape inside.

Step 9
Draw a reounded rectangle behind the tape’s circle. Between the two circles draw a rectangle.

Step 10
Draw a circle shape, change it to clipping mask until it gos inside the rectangle. Add gradient overlay with type Noise and use blend mode Luminosity. This circle with gradient will be the magnetic tape.

Step 11
Duplicate the magnetic tape and resize it. Add some detail like the tape side (A or B) and Auto Stop System sign.

Step 12-Create Tape Control
Now, we’ll create the tape’s controller. Draw a rectangle under the tape deck. Add these layer styles.

Step 13-Create Tape Controller
Draw a rectangle and a poligon behind it. Add some detail like record symbol, text.

Step 14
Duplicate this tape controller for other function. Move the play button down to add a realistic look.

Step 15-Draw Battery Indicator and Counter
For battery indicator draw a red rectangle with red outer glow.

Step 16
Next, create a rectangle with dark inner glow.

Step 17
Inside the rectangle draw small box. Using pen tool draw some polygons as shown below.


Step 18
For the equalizer indicator, draw some black rectangles. Duplicate all and change its color to red. Add red Outer Glow and delete some of them so only a few lights is on.

Step 19
Add some details.

Step 20
I hope you’re still with me. Here’s what we have so far.

Step 21-Small Speakers
Draw a ring by creating a big circle. Duplicate it and make it smaller. Select subtract from the option bar.

Step 22
Dulicate the ring and resize it. Create some rectangles surrounding both rings.

Step 23
Create new layer. Click Edit > Fill. Load spiderman pattern from brusheezy. Resize the pattern.

Step 24
Add layer mask and paint pattern outside the speaker with black to hide it. Duplicate the small speaker and put it on the other side.

Step 25-Big Speakers
Start by creating a big rounded rectangle for the speaker’s base. Add outer glow styles to give it a 3D look.

Step 26
Draw a big circle. Hit ctrl+alt+G to convert layer to Clipping Mask.

Step 27
Add smaller circle.

Step 28
Paint some white on top of the circle and give it Gaussian Blur with big radius.

Step 29
Create smaller circle. Add these layer styles.

Step 30
Create ring shape above this circle and some layer styles.

Step 31
Create bigger ring shape with these layer styles.

Step 32
Create a smaller ring above the previous ring.

Step 33
We need to add some reflection on center of the speaker. Paint with white and add Gaussian Blur.

Step 34
We need another pattern to cover the big speaker. Create new file, 800×600 px, background transparent, and fill it with metal pattern from bittbox.
We need bigger hole in this pattern. To do this, ctrl+click the pattern to select it. Click Select > Modify > Contract and select 2 px. Hit ctrl+shift+I to invert the selection and hit Delete.

Step 35
Paste the pattern on top of our big speaker. Resize it and add layer mask to hide unneeded pattern. Add layer styles shown below to give the pattern a metalic look.


Step 36-Input Selector
Draw a rounded rectangle for the selector’s base. Add smaller rectangle with these layer styles.

Step 37
Again, draw smaller rectangle inside the previous one.

Step 38
Create the selector by drawing a small rectangle first then add poligons behind it.

Step 39
Duplicate the selector and add some details.

Step 40-Another Selector
We’ll add a circle shape selector. Draw a small circle and add inner shadow.

Step 41
Draw smaller circle and inside it draw small rectangle. From the option bar select subtract.

Step 42
Duplicate circle and resize it. Draw another rectangle and choose subtract. We’re done with the first selector. Duplicate it and add some details.

Step 43-Radio
Draw a big rectangle.

Step 44
Inside the rectangle draw rounded rectangle.

Step 45
Add shadow and some text.

Step 46
Now for the radio frequency selector, draw big circle.

Step 47
Inside the circle draw another smaller circle.

Step 48
Ctrl+click the frequency selector to select it. Create new layer, click Filter > Noise > Add Noise. Click Filter > Blur > Radial Blur. Change layer’s blend mode to Multiply.

Step 49
To add reflection to the selector, draw a poligon and fill it with. Add Gaussian Blur and change its opacity to 30%.

Step 50-Top Button
Add button on top of the radiotape by drawing a small rounded rectangle and add these layer styles.

Step 51
For push button, draw a rectangle and a Gradient Overlay.

Step 52-Add 3D Look
Create this shape behind the radiotape and add gradient overlay. This will add depth to the radiotape’s body and make it looks 3D.

Step 53-Handle
Draw a rounded rectangle on top. Draw another rectangle inside it and choose subtract.

Step 54
Draw black rounded rectangle for hand handle.

Step 55
Next to the handle draw a rectangle and add Gradient Overlay.

Step 56
Draw smaller rectangle inside previous rectangle.

Step 57
Add few small rectangles with these layer styles. Duplicate all this handle and put it on the other side.

Step 58-Adding Shadow
Create new layer underneath every layers. Create elliptical selection and fill it with black. Add Gaussian Blur to soften it. Don’t forget to add small shadow on the feet.

Step 59
This radiotape is too clean. I want to make it looks olsd. So, I download a grunge texture and put it on top of this radiotape and change its blend mode to Multiply.

Conclusions
Click here or click on the image to see our final image in full resolution. I hope you like it.
If you enjoyed reading, consider sharing it on one of these social bookmarking sites.
Enjoy this Post? Subscribe to Tutorial Lounge









Tweets that mention How to Draw A Very Detailed RadioTape From The 80's | Tutorial Lounge -- Topsy.com
April 06, 2010
[...] This post was mentioned on Twitter by Blueprint DesignBlog and Tutorial Lounge, Nida. Nida said: RT @tutoriallounge How to Draw A Very Detailed RadioTape From The 80's | Tutorial Lounge http://bit.ly/da5cGR [...]
Graphic Geoff
April 06, 2010
Great tutorial!
julio
April 06, 2010
Great tutorial!
Servefault.com
April 06, 2010
How to Draw A Very Detailed RadioTape From The 80′s…
Thank you for submitting this cool story – Trackback from Servefault.com…
[User Link:How to Draw A Very Detailed RadioTape From The 80's] | Tips for Designers and Developers | tripwire magazine
April 06, 2010
[...] How to Draw A Very Detailed RadioTape From The 80’s [...]
Tutorials Palace
April 06, 2010
very nice and creative tutorial
Espreson
April 07, 2010
Lots of new things to be learned from this tutorial…
jeprie
April 07, 2010
@All: Thanks. Glad to know you like it.
Урок photoshop. Стерео радио магнитолу | Все для графического дизайнера
April 07, 2010
[...] выполняется в векторе и очень детализированный. Учимся вектор, [...]
All Magic! Change Your Hairstyle As You Like » Blog Archive » All New Fashion Style for Female Bags
April 08, 2010
[...] How to Draw A Very Detailed RadioTape From The 80's | Tutorial Lounge [...]
150+ Irresistible Fresh Articles for Designers and Developers | tripwire magazine
April 08, 2010
[...] How to Draw A Very Detailed RadioTape From The 80’s [...]
Follow Friday: Best of Web #22 Inspiration, Tutorials, Freebies
April 09, 2010
[...] 25 Outstanding Photoshop Lighting Effect Tutorials 2. How to Draw A Very Detailed RadioTape From The 80’s 3. Create a Cardboard Box Filled With Glossy Icons 4. 80 Best Photoshop Text Effects [...]
Ellure Blog » 포토샵으로 Radio 그리기
April 10, 2010
[...] Tutorial 바로가기 [...]
Draw a 80’s Radio Tape Tutorial and Free Icon Download | DesainDigital
April 10, 2010
[...] my latest project, How to Draw a Very Detailed RadioTape from the 80’s at TutorialLounge. Click here to see full tutorial and link to download the PSD file [...]
This Weeks Twitter Design News Roundup N.32 - Speckyboy Design Magazine
April 13, 2010
[...] How to Draw A Very Detailed RadioTape – Photoshop Tutorial [...]
This Weeks Twitter Design News Roundup N.32 - Programming Blog
April 13, 2010
[...] How to Draw A Very Detailed RadioTape – Photoshop Tutorial [...]
HD Guy
April 13, 2010
The result looks amazing! Congrats
This Weeks Twitter Design News Roundup N.32 | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more!
April 14, 2010
[...] How to Draw A Very Detailed RadioTape – Photoshop Tutorial [...]
This Weeks Twitter Design News Roundup N.32 | Forum on China Wholesale Lots
April 20, 2010
[...] How to Draw A Very Detailed RadioTape – Photoshop Tutorial [...]
Tweets that mention How to Draw A Very Detailed RadioTape From The 80's | Tutorial Lounge -- Topsy.com
April 21, 2010
[...] This post was mentioned on Twitter by Stephan Rene. Stephan Rene said: Art: http://www.tutoriallounge.com/2010/04/how-to-draw-a-very-detailed-radiotape-from-the-80s [...]
Aisha
April 24, 2010
Thanks for sharing these resources. Loved them
ilham
July 14, 2010
wow, i will try it. i hope i can do it, because i am not this picture is made from photoshop