Members Area Tutorial: Create a Wooden Record Deck Using Photoshop’s Vector Capabilities
Hi there. In the following tutorial your will learn how to create an old record deck.
Final Image
As always, this is the final image that we’ll be creating:
Step 1
Open Photoshop and hit Control + N to create a new document. Enter all the data shown in the following image and click OK. Enable the Grid (View > Show > Grid) and the Snap to Grid (View > Snap To > Grid). For the moment you need a grid every 10px. Go to Edit > Preferences > Guides, Grid & Slices and focus on the Grid section. Enter 10 in the Gridline Every box and 1 in the Subdivision box. Also, set the color of the grid at #696969. Once you set all these properties click OK. Don’t get discouraged by all that grid. It will ease your work later. You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes.
Step 2
First you need this wood wallpaper that Laszlo Prekop was kind enough to offer. Save it to your hard drive, drag it inside your Ps file and resize it a little.
Step 3
Reselect the image added in the previous step and a vector mask by going to Layer > Vector Mask > Reveal All. Move to the Layers panel, make sure that the vector mask is selected and select the Rounded Rectangle. Set the radius at 10px and create a 490 by 460px shape. This will hide the content of the image outside the rounded rectangle.
Step 4
Move to the Layers panel and double click on the masked image to open the Layer Style window. Activate the Inner Glow, the Bevel and Emboss, the Gradient Overlay and the Stroke then enter the properties shown in the following images. The yellow zero from the Gradient Overlay section stands for opacity percentage.
Inner Glow Blending Options Settings
Blending Mode: Lighten
Opacity: 100%
Size: 1
Bevel and Emboss Options Settings
Style: Inner Bevel
Technique: Smooth
Depth: 500%
Direction: Up
Size: 4px
Soften: 0px
Angle: 90 degrees
Altitude: 50 degrees
Highlight Blending Mode: Screen
Highlight Opacity: 50%
Shadow Blending Mode: Multiply
Shadow Opacity: 20%
Gradient Overlay Blending Options Settings
Blend Mode: Multiply
Opacity: 35%
Style: Linear
Angle: 90 degrees
Scale: 100%
Stroke Blending Options Settings
Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Gradient
Style: Linear
Angle: 90 degrees
Scale: 100%
Step 5
Disable the Grid (View > Show > Grid). Pick the Rectangle Tool, open the Rectangle Options panel, check the Fixed Size button and enter 490px in the width box and 1px in the height box. Now, set the foreground color at #9e784a and simple click inside your document. This will create a 1 by 490px shape. Place it as shown in the following image then, open the Layer Style window and enter the properties shown in the following image.
Drop Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Angle: 90 degrees
Distance: 1px
Spread: 0px
Size: 0px
Step 6
Set the foreground color at #787878, pick the Ellipse Tool and create a 5px circle. Open the Layer Style window and enter the properties shown in the following images. Make three copies of this small circle then place them as shown in the following image.
Drop Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Angle: 90 degrees
Distance: 2px
Spread: 0px
Size: 0px
Inner Glow Blending Options Settings
Blending Mode: Normal
Opacity: 70%
Size: 3
Step 7
Re-enable the Grid (View > Show > Grid). Pick the Ellipse Tool, create a 400px circle and place it as shown in the following image. The fill color is not important.
Step 8
Reselect the vector shape created in the previous step, lower its Fill to 0%, open the Layer Style window and enter the properties shown in the following images. The white number from the Gradient Overlay section stands for location percentage.
Drop Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 50%
Angle: 90 degrees
Distance: 2px
Spread: 0px
Size: 1px
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 15%
Angle: 90 degrees
Distance: 3px
Choke: 0%
Size: 1px
Inner Glow Blending Options Settings
Blending Mode: Multiply
Opacity: 50%
Size: 13
Stroke Blending Options Settings
Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Gradient
Style: Linear
Angle: 90 degrees
Scale: 100%
Step 9
Set the foreground color at #0f0f0f, pick the Ellipse Tool, create a 380px circle and place it as shown in the following image.
Step 10
Reselect the vector shape created in the previous step and duplicate it (Control + J). Convert this copy to a smart object and ho to Filter > Noise > Add Noise. Enter the properties shown below, click OK and go to Filter > Blur > Radial Blur. Again, enter the data shown below and click OK.
Step 11
Reselect the vector shape created in the ninth step, open the Layer Style window and enter the properties shown in the following images.
Drop Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 50%
Angle: 90 degrees
Distance: 3px
Spread: 0px
Size: 5px
Stroke Blending Options Settings
Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Color
Step 12
Reselect the vector shape edited in the previous step and duplicate it (Control + J). Bring this copy to front (Shift + Control + ] ), change its blending mode to Lighten and open the Layer Style window. Activate the Gradient Overlay and enter the properties shown in the following image. Remember that the white numbers stand for location percentage.
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 5%
Style: Angle
Angle: 90 degrees
Scale: 100%
Step 13
Reselect the vector shape edited in the previous step and duplicate it. Select this copy, change its blending mode to Normal, open the Layer Style window and replace the exiting properties form the Gradient Overlay section with the ones shown in the following image.
Gradient Overlay Blending Options Settings
Blend Mode: Multiply
Opacity: 60%
Style: Linear
Angle: 90 degrees
Scale: 100%
Step 14
Select the smart object and the vector shapes created in the last five step and convert them to s smart object.
Step 15
Set the foreground color at #0f0f0f, pick the Ellipse Tool, create a 160px circle and place it as shown in the following image.
Step 16
Focus on the vector shape created in the previous step, open the Layer Style window and enter the properties shown in the following image.
Bevel and Emboss Options Settings
Style: Inner Bevel
Technique: Smooth
Depth: 100%
Direction: Up
Size: 2px
Soften: 0px
Angle: 90 degree
Altitude: 21 degrees
Highlight Blending Mode: Screen
Highlight Opacity: 20%
Shadow Blending Mode: Screen
Shadow Opacity: 8%
Step 17
Pick the Rectangle Tool, create a 220px by 140px shape and place it as shown in the following image. Lower its Fill to 0% and open the Layer Style window. Activate the Gradient Overlay and enter the properties shown in the following image.
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Style: Linear
Angle: 90 degrees
Scale: 100%
Step 18
Reselect the vector shape created in the previous step, convert it to a smart object and go to Edit > Transform > Perspective. Focus on the bottom, right corner and simply drag it up. In the end your rectangle should turn into a triangle. Duplicate it (Control + J). Select this copy, flip it horizontally (Edit > Transform > Flip Horizontal) and drag it to the right as shown in the third image. Select these to triangles and convert them to a smart object.
Step 19
Move to the Layers panel, hold Control and click on the smart object created in the fourteenth step. This will load a simple selection around your smart object. Now, with this selection still active, select the smart object created in the previous step and simply click on the Add Layer Mask button from the bottom of the Appearance panel. Get rid of the selection (Control + D), reselect your masked smart object and change its blending mode to Overlay.
Step 20
Pick the Ellipse Tool, create a 120px circle and place it as shown in the following image. The fill color is not important.
Step 21
Reselect the vector shape created in the previous step, open the Layer Style window and enter the properties shown in the following images.
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 50%
Angle: 90 degrees
Distance: 2px
Choke: 0%
Size: 0px
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Style: Linear
Angle: 90 degrees
Scale: 100%
Step 22
Pick the Ellipse Tool, create a 40px circle and place it as shown in the following image. Again, the fill color is not important.
Step 23
Reselect the vector shape created in the previous step, lower its Fill to 0%, open the Layer Style window and enter the properties shown in the following image.
Bevel and Emboss Options Settings
Style: Inner Bevel
Technique: Smooth
Depth: 100%
Direction: Up
Size: 2px
Soften: 0px
Angle: 90 degree
Altitude: 40 degrees
Highlight Blending Mode: Normal
Highlight Opacity: 50%
Shadow Blending Mode: Multiply
Shadow Opacity: 8%
Step 24
For the following step you will need a grid every 5px. Simply go to Edit > Preferences > Guides, Grid & Slices and enter 5 in the Gridline Every box. Pick the Ellipse Tool, create a 10px circle and place it as shown in the following image. Open the Layer Style window for this new vector shape and enter the properties shown in the following images.
Drop Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 15%
Angle: 90 degrees
Distance: 4px
Spread: 0px
Size: 2px
Inner Glow Blending Options Settings
Blending Mode: Normal
Opacity: 100%
Size: 3
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Style: Angle
Angle: 90 degrees
Scale: 100%
Stroke Blending Options Settings
Size: 2px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Gradient
Style: Linear
Angle: 90 degrees
Scale: 100%
Step 25
For the following step you will need a grid every 1px. So, go to Edit > Preferences > Guides, Grid & Slices and enter 1 in the Gridline Every box. Set the foreground color at #fff22a, pick the Ellipse Tool and create a 40px circle. Continue with the Ellipse Tool, set the foreground color at eac600, create a 34px circle and place it as shown in the second image.
Step 26
Set the foreground color at #b90a0a and pick the Rectangle Tool. Create a 10 by 14px shape and a 10 by 185px vector shape then place them as shown in the first image. Switch to the Rounded Rectangle Tool and set the radius at 2px. Set the foreground color at #92278f, create a 22 by 23px vector shape and place it as shown in the second image. Continue with the Rounded Rectangle Tool, set the foreground color at white, create a 22 by 22px vector shape and place it as shown in the second image. Switch to the Ellipse Tool, set the foreground color at #f7941d, create a 16px circle and place it as shown in the third image.
Step 27
Pick the Rounded Rectangle Tool and set the radius at 2px. Set the foreground color at #0072bc, create a 20 by 4px shape and place it as shown in the first image. Continue with the Rounded Rectangle Tool, set the foreground color at #3c8ecf, create a 17 by 40px shape and place it as shown in the first image. Select these two, blue shapes and hit Control + T. Rotate them 20 degrees then hit Enter.
Step 28
Pick the Rounded Rectangle Tool and set the radius at 2px. Set the foreground color at #31b547, create two, 3 by 30px shapes and place them as shown in the following image.
Step 29
Let’s add some color for the vector shapes created in the last four steps. Select the first yellow vector shape, open the Layer Style window and enter the properties shown in the following images.
Drop Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 80%
Angle: 90 degrees
Distance: 3px
Spread: 0px
Size: 1px
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 80%
Angle: 120 degrees
Distance: 1px
Choke: 0%
Size: 0px
Outer Glow Blending Options Settings
Blend Mode: Normal
Opacity: 25%
Spread: 0%
Size: 10px
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Style: Linear
Angle: 120 degrees
Scale: 100%
Stroke Blending Options Settings
Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Gradient
Style: Linear
Angle: 0 degrees
Scale: 100%
Step 30
Move to the second yellow vector shape, open the Layer Style window and enter the properties shown in the following images.
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 80%
Angle: 120 degrees
Distance: 1px
Choke: 0%
Size: 0px
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Style: Linear
Angle: 120 degrees
Scale: 100%
Stroke Blending Options Settings
Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Gradient
Style: Linear
Angle: 0 degrees
Scale: 100%
Step 31
Move to the top, red vector shape, open the Layer Style window and enter the properties shown in the following images.
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Angle: 180 degrees
Distance: 1px
Choke: 0%
Size: 0px
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Style: Linear
Angle: 90 degrees
Scale: 100%
Stroke Blending Options Settings
Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Gradient
Style: Linear
Angle: 0 degrees
Scale: 100%
Step 32
Move to the other red vector shape, open the Layer Style window and enter the properties shown in the following images.
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Angle: 180 degrees
Distance: 1px
Choke: 0%
Size: 0px
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Style: Linear
Angle: 90 degrees
Scale: 100%
Stroke Blending Options Settings
Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Gradient
Style: Linear
Angle: 0 degrees
Scale: 100%
Step 33
Focus on the white vector shape, open the Layer Style window and enter the properties shown in the following images.
Drop Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 80%
Angle: 135 degrees
Distance: 2px
Spread: 0px
Size: 2px
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 50%
Angle: 120 degrees
Distance: 1px
Choke: 0%
Size: 0px
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Style: Linear
Angle: 120 degrees
Scale: 100%
Stroke Blending Options Settings
Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Gradient
Style: Linear
Angle: 120 degrees
Scale: 100%
Step 34
Focus on the purple vector shape, open the Layer Style window and enter the properties shown in the following images.
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 50%
Angle: 120 degrees
Distance: 1px
Choke: 0%
Size: 0px
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Style: Linear
Angle: 120 degrees
Scale: 100%
Stroke Blending Options Settings
Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Gradient
Style: Linear
Angle: 0 degrees
Scale: 100%
Step 35
Focus on the orange vector shape, open the Layer Style window and enter the properties shown in the following images.
Bevel and Emboss Options Settings
Style: Inner Bevel
Technique: Smooth
Depth: 1000%
Direction: Up
Size: 0px
Soften: 0px
Angle: 130 degrees
Altitude: 30 degrees
Highlight Blending Mode: Normal
Highlight Opacity: 100%
Shadow Blending Mode: Normal
Shadow Opacity: 100%
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Style: Linear
Angle: 120 degrees
Scale: 100%
Step 36
Focus on the smaller, blue vector shape, open the Layer Style window and enter the properties shown in the following images.
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 70%
Angle: 90 degrees
Distance: 1px
Choke: 0%
Size: 0px
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Style: Linear
Angle: -30 degrees
Scale: 100%
Stroke Blending Options Settings
Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Color
Step 37
Focus on the second blue vector shape, open the Layer Style window and enter the properties shown in the following images.
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 60%
Angle: 120 degrees
Distance: 1px
Choke: 0%
Size: 0px
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Style: Linear
Angle: 60 degrees
Scale: 100%
Stroke Blending Options Settings
Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Gradient
Style: Linear
Angle: 0 degrees
Scale: 100%
Step 38
Move to the green vector shapes. First, replace the green with #514b48. Next, focus on the left shape, open the Layer Style window and enter the properties shown in the following images. Move to the right vector shape and open the Layer Style window. Enter the same properties shown below but inverse the angles.
Drop Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 50%
Angle: 0 degrees
Distance: 1px
Spread: 0px
Size: 1px
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 70%
Angle: -180 degrees
Distance: 1px
Choke: 0%
Size: 0px
Step 39
Duplicate the vector shapes edited in the last ten steps. Select these copies and convert them to a smart object. Lower its opacity to 0%, open the Layer Style window and enter the properties shown in the following image.
Color Overlay Options Settings
Blending Mode: Multiply
Opacity: 20%
Step 40
Reselect the smart object created in the previous step. Again, convert it to a smart object and go to Filter > Noise > Add Noise. Enter the properties shown below and click OK.
Step 41
Create a new layer (Shift + Control + Alt + N) and drag it above the smart object created in the previous step. Pick the Brush Tool and add several dashes using the colors and the brush properties shown in the following image.
Step 42
Right click on the layer created in the previous step and click on Create Clipping Mask. Once again, duplicate all the layers and vector shapes that make up this tonearm. Convert these copies to a smart object, lower the Fill to 0%, send it to back (Shift + Control + [ ) and open the Layer Style window. Enter the properties shown below and click OK.
Step 43
Select all the layers and vector shapes that make up the tonearm, group them (Control + G) and place it as shown in the following image.
Step 44
Set the foreground color at #332d2d and pick the Rectangle Tool. Create a 45 by 20px shape, open the Layer Style window and enter the properties shown below.
Drop Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 25%
Angle: 90 degrees
Distance: 2px
Spread: 0px
Size: 2px
Stroke Blending Options Settings
Size: 1px
Position: Outside
Blend Mode: Normal
Opacity: 100%
Fill Type: Gradient
Style: Linear
Angle: 90 degrees
Scale: 100%
Step 45
Set the foreground color at #0a0a0a, pick the Rounded Rectangle Tool and set the radius at 2px. Create a 35 by 10px shape and place it as shown in the following image. Open the Layer Style window and enter the properties shown below.
Outer Glow Blending Options Settings
Blend Mode: Normal
Opacity: 70%
Spread: 0%
Size: 5px
Step 46
Pick the Rounded Rectangle Tool and set the radius at 2px. Create a 23 by 18px shape and place it as shown in the following image. Open the Layer Style window and enter the properties shown below.
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 25%
Angle: 90 degrees
Distance: 2px
Choke: 0%
Size: 1px
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Style: Linear
Angle: 0 degrees
Scale: 100%
Step 47
Reselect the vector shape created in the previous step and duplicate it (Control + J). Clear the Layer Style for this copy, lower its Fill to 0%, open the Layer Style window and enter the properties shown below.
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 70%
Angle: -90 degrees
Distance: 2px
Choke: 0%
Size: 1px
Step 48
Pick the Rounded Rectangle Tool and set the foreground color at #c7a069. Create a 7 by 18px shape and place it as shown in the following image. Open the Layer Style window and enter the properties shown below.
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 30%
Angle: 90 degrees
Distance: 4px
Choke: 0%
Size: 1px
Step 49
Reselect the vector shape created in the previous step and duplicate it (Control + J). Clear the Layer Style for this copy, lower its Fill to 0%, open the Layer Style window and enter the properties shown below.
Inner Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 70%
Angle: -90 degrees
Distance: 3px
Choke: 0%
Size: 1px
Step 50
Select all the vector shapes that make up the button, group them (Control + G) and place it as shown in the following image.
Step 51
Pick the Type Tool and the "ON" and "OFF" text. Also, open the Layer Style window and enter the properties shown in the following images.
Drop Shadow Blending Options Settings
Blend Mode: Normal
Opacity: 70%
Angle: 90 degrees
Distance: 1px
Spread: 0px
Size: 0px
Gradient Overlay Blending Options Settings
Blend Mode: Normal
Opacity: 100%
Style: Linear
Angle: 90 degrees
Scale: 100%
Step 52
Return to "gridline every 10px". Pick the Rounded Rectangle and set the radius at 10px. Create a 490 by 460px vector shape an place it right above the existing shapes. The fill color is not very important.
Step 53
Focus on the vector shape created in the previous step. Lower its Fill to 0%, open the Layer Style window and enter the properties shown below.
Gradient Overlay Blending Options Settings
Blend Mode: Overlay
Opacity: 100%
Style: Linear
Angle: 90 degrees
Scale: 100%
Step 54
Finally, let’s add a simple, warm background. Set the foreground color at #fff22a, pick the Rectangle Tool and create a vector shape the size of your document. Open the Layer Style window and enter the properties shown in the following image.
Gradient Overlay Blending Options Settings
Blend Mode: Overlay
Opacity: 100%
Style: Radial
Angle: 90 degrees
Scale: 150%
Step 55
Duplicate the vector shape created in the previous step. Select this copy, lower its Fill to 0% then open the Layer Style window and enter the properties shown in the following image.
Inner Glow Blending Options Settings
Blending Mode: Normal
Opacity: 100%
Size: 250
And We’re Done!
Here is how your final result should look.
Member File Download
Download the original .psd file for this tutorial here:
Wow, this is amazing and very detailed. Every week more awesome stuff comes I wish the descriptions were more unique/colourful though. It seems a lot of time goes into these design so the nearly-always-the-same description and intro don’t do it justice. These tutorials and resources are awesome- make them sound exciting too!
Hey Ron. Thanks for the feedback. I’ll definitely aim to make the next features sound more exciting .