Draw a realistic controller of the Play Station console • Adobe Photoshop Tutorials

In this tutorial, you will learn and learn how to create a realistic Play Station controller from scratch in Photoshop using basic tools such as shapes, brushes, and layer styles.
Let’s start!

In the tutorial we will use textures.

Step 1

Let’s start by drawing a sketch. Use the photo as a reference and with the tool Pen ? (Pen Tool) Draw each part of the joystick separately.

Step 2

To make it clear, the author painted each part using bright colors. It helps to differentiate each element from the others.

Step 3 Main body

Duplicate the pen shape and place the layers in a separate group. Change the color to dark gray.

Step 4

Use the skin texture by placing it on top of the handle.

Step 5

Press Ctrl + Alt + G to convert the layer to a clipping mask. In this case, the texture will not go beyond the handle.

Step 6

Create a new layer and convert to a clipping mask. Thus, everything that we draw on this layer will always be inside the pen. And so, draw some shadows and highlights on the pen. See the screenshot below for reference. For more control, you can draw each nuance on a separate layer. With this technique, you can easily reduce the opacity of the layers to change the shadow or highlight effect.

Step 7

Draw a gray rectangle and place it below the pen. Double click on this layer to open the layer style window. Add a Inner shadow (Inner Shadow) and Gradient overlay (Gradient Overlay).

Step 8

Create a new layer on top of the previous shape and draw a white highlight in its upper right corner. Press Ctrl + Alt + G to convert the layer to a clipping mask.

Step 9

Load a selection rectangle and create a new layer. Fill the selection with black using the command Editing – Fill (Edit> Fill). Now add noise to the menu. Filter – Noise – Add Noise (Filter> Noise> Add Noise). For the settings, use the screenshot below and do not forget to check the box Monochrome (Monochromatic) so that the noise is black and white.

Step 10

Change the blending mode to Screen (Screen) and reduce Opacity (Opacity) up to 30%. Thus, we added a noise texture to the shape and it became more natural.

Step 11

Draw two circle shapes.

Step 12

Again, add noise to the surface, creating a black layer on top and applying Filter – Noise – Add Noise (Filter> Noise> Add Noise).

Step 13

Change the blending mode to Screen (Screen) and reduce Opacity (Opacity) up to 30%.

Create a new layer and draw shadows at the bottom of the shapes.

Step 15

Let’s add some shadow around the edges of the circle. This will add a 3D view to the shape. Create a new layer above the circle layer and convert it to a clipping mask. Download the shape selection (Ctrl + click) and go to the menu Editing – Stroke (Edit> Stroke). Choose black. Now we have a black line along the edge of the circle.

Step 16

Make the stroke softer in the menu. Filter – Blur – Gaussian Blur (Filter> Blur> Gaussian Blur). Decrease Opacity (Opacity) this layer up to 10%.

Step 17

Create a new layer and add highlights by painting in white on the top of the circle shape.

Step 18

Repeat step 16, but this time we will add a highlight and use a white stroke for this.

Step 19

Apply Filter – Blur – Gaussian Blur (Filter> Blur> Gaussian Blur).

Step 20

Activate the tool Move (Move Tool) and click the down and left arrows on the keyboard to move the layer 2 pixels in these directions.

Step 21

Reduce the opacity of this layer and erase some parts of the highlights we just made. Use the tool Eraser (Eraser Tool) with a soft brush zero Stiffness (Hardness) and work, reducing its opacity to low values. This can be done in the top settings menu.

Step 22

Repeat the previous steps to add and process the highlight on the opposite side.

Step 23

Add more highlights using the same technique.

Step 24

Draw more circles below previous circles. This time we need them to be darker. This will add a 3D illusion to the upper circles.

This is what these figures look like.

Step 25

Add soft highlights to the edges.

Step 26

Below you can see the difference before and after adding the latest shapes.

Step 27

Activate the tool Brush (Brush tool) with low Opacity (Opacity). Draw black in the specified areas to add a barely noticeable shadow next to the previous circles. This will strengthen the 3D illusion.

Step 28

Draw a rectangle with rounded corners with a radius of 5 pixels.

Step 29

Duplicate the shape and using the transformation command Ctrl + T rotate it 90 degrees.

Step 30

Activate the tool Pen (Pen tool) and add a small contour at a right angle.

Below you can see its details in larger magnification.

Below is the result in 100% size.

Step 31

Add a stroke around the plus sign area. Use the same technique as before to add highlights. Also apply Filter – Blur – Gaussian Blur (Filter> Blur> Gaussian Blur).

Step 32

Decrease Opacity (Opacity) this layer up to 10%.

Step 33

Add more highlights by manually drawing them with Brushes (Brush) 1 pixel and white.

Step 34

Add more details to the surface, such as reflection.

Step 35

Draw four gray round shapes for the action buttons and apply the following layer styles.

Stamping (Bevel and Emboss)

Inner shadow (Inner Shadow)

Inner Glow

Gradient overlay (Gradient Overlay)

Shadow (Drop Shadow)

Now add glare to the buttons. To do this, create a new layer, convert it to a clipping mask, select the circles (Ctrl + click on the layer thumbnail) and add a white stroke of 1 pixel. Use the same technique described in step 16.

Step 37

Make the stroke softer by applying Filter – Blur – Gaussian Blur (Filter> Blur> Gaussian Blur). The value in the screenshot.

Step 38

Here is the result Before and After adding highlights, as you can see, this is not enough.

Step 39

Add a soft white stroke on the edges of the buttons and erase a bit of it. This technique we used earlier.

Step 40

Draw shapes with icons for the buttons and place them in a group. In CS6, you can double-click on a group to apply layer styles to the whole group. If you use an earlier version, then apply styles to each of the layers with icons.

External glow (Outer Glow)

Again, load the selection of buttons, create a new layer and add a white stroke of 1 pixel.

Step 42

Use the tool Eraser (Eraser Tool) with a soft brush and erase part of the stroke.

Step 43

Press Ctrl + click on the thumbnail of the layer with the buttons in order to load their selection. Then create a new layer, place it below the buttons and fill it with black.

Step 44

Apply Filter – Blur – Gaussian Blur (Filter> Blur> Gaussian Blur). The value in the screenshot below.

Step 45

Apply Filter – Blur – Motion Blur (Filter-Blur-Motion Blur).

Step 46

Decrease Opacity (Opacity) of this layer up to 50%.

Step 47

Draw a bigger round shape and place it below the buttons in the layers palette. Use black for it.

These will be the holes for the buttons. As you can see, the difference is not great, but it looks more realistic.

Step 48

Create a new layer and load the selection of the previous shapes. Apply a stroke, as it was done before – a white one pixel.

Step 49

Use the tool Eraser (Eraser Tool) with a soft brush and erase part of the stroke.

Step 50

Now draw the shapes for the guide holes. You can draw them with Pen (Pen Tool) or edit the outline of the rounded shape.

Step 51

Apply the following layer styles.

Step 52

Draw a similar shape, but this time less and lighter color. These will be the guide buttons.

Step 53

Apply the following layer styles to add a 3D look to the edges.

Step 54

Create a new layer, load the selection of buttons and in the menu Editing – Stroke (Edit> Stroke) add a black stroke on the edges of the buttons.

Step 55

Make the stroke softer in the menu. Filter – Blur – Gaussian Blur (Filter> Blur> Gaussian Blur).

Step 56

Click the arrows on the keyboard down and left three times to shift the layer by 3 pixels in these directions.

Step 57

Remove some stroke lines.

Step 58

Now load the selection of the guide buttons, create a new layer and fill it with black. Add noise to the menu Filter – Noise – Add Noise (Filter> Noise> Add Noise).

Step 59

Change the blending mode to Screen (Screen) and reduce Opacity (Opacity).

Step 60

Add a white stroke at the edges of the buttons and also erase some of it.

Step 61

Draw triangles for each button. Add Emboss style (Bevel and Emboss) and reduce Fill (Fill) at 0%.

Step 62

Load a selection of triangles, create a new layer and add a 1 pixel white stroke. Erase part of the stroke to make it look like a glare.

Step 63

Add a shadow behind the guide buttons. Load their selection, create a new layer and fill with black, place it under the layer with buttons and soften in the menu Filter – Blur – Gaussian Blur (Filter> Blur> Gaussian Blur).

Step 64

Add a highlight on the buttons.

Step 65. Draw the left and right buttons

Draw basic shapes for the left and right buttons.

Step 66

Apply the following layer styles.

Step 67

For the 3D effect, draw two more small figures of a lighter color.

Step 68

Create a new layer and draw soft highlights.

Step 69

Create a new layer, load the shape selection and fill it with black. Then apply noise in the menu Filter – Noise – Add Noise (Filter> Noise> Add Noise). Change the blending mode to Screen (Screen) and reduce Opacity (Opacity) up to 20%.

Step 70

Add another highlight on the figure. Use the tool Brush (Brush tool) and draw it by hand.

Step 71

Add a soft white curved line for the flare.

This detail is very small, so you can see it in an enlarged view.

Step 72

Using the tool Text (Type tool), write the letters L and R.

Decrease Fill (Fill) layer at 0% and apply these styles:

Step 73

Draw a shape for the button and apply the following styles.

Step 74

Create a new layer and manually draw some highlights.

Below you can see the details in higher magnification.

Step 75

Manually draw a highlight on the button surface.

Step 76

Draw a rectangle at the bottom of the main controller shape. Apply style Gradient overlay (Gradient Overlay) to add a highlight below.

Step 77

Add a mask to the layer and a linear gradient from black to white on the mask; hide the upper part of the shape.

Step 78

Create a new layer and draw a soft black line at the top. Decrease Opacity (Opacity) lines up to 30%.

Step 79

Add a rectangular shape at the top of the controller behind the black line.

Step 80

Draw two 1 pixel rectangles. Their color should be black and white.

Step 81

Draw small rectangles for the LEDs.

Step 82. Joysticks

Draw two shapes with a circle and apply the following layer styles.

Step 83

Add a layer mask and erase the areas indicated in the screenshot until it disappears.

Step 84

Add a new layer and convert it to a clipping mask. Draw some highlights and shadows until the shapes fit into the base of the controller.

Step 85

Draw the bottom of the joystick and add the following layer styles:

Step 86

Manually draw shadows and reflections on the surface for a more natural look.

Step 87

Add shadows on the handles areas.

Step 88

Now let’s work on the hole for the joysticks. Draw two dark circles and two other circles inside the first smaller and lighter. Add a new layer and convert it to a clipping mask. Draw white highlights on the shapes.

Step 89

Draw two circles of even lighter color. Apply the following layer styles.

Step 90

Now load the selection of circles, create a new layer and fill it with black color. Add noise to the menu Filter – Noise – Add Noise (Filter> Noise> Add Noise). Change the blending mode to Screen (Screen) and reduce Opacity (Opacity) up to 30%.

Step 91

Add a new layer and convert it to a clipping mask. Draw more highlights on the shapes. Try to focus the highlights in the center, since we need the appearance of the joystick to appear three-dimensional.

Step 92

Draw a black rectangle 1 pixel wide. Reduce the opacity of this layer.

Step 93

Select the contour and press the key combination Ctrl + alt + t, to duplicate and transform it. In the Top Settings panel, set the rotation angle to 5 degrees.

Step 94

Press combination Сtrl + Shit + Alt + T, to repeat the action. Continue until you complete a full circle.

Step 95

Duplicate the shape layer and change the color to white, and then move the copy down 1 pixel to add a bump effect. Pick up Opacity (Opacity) for layers with lines.