FanExtra Network

recorddeckthumb200

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:

DOWNLOAD .PSD FILE

Leave a comment

2 Comments:

  1. Ron says:

    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!

Leave a Comment:

Related Posts