SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop Drawing Techniques Draw a Realistic Wacom Bamboo Tablet Part 2

Draw a Realistic Wacom Bamboo Tablet Part 2

In this second part of the tutorial, we are going to draw a realistic Wacom Bamboo. Make sure to imgread the first part, drawing the path in Illustrator.

Preview

Below is the final result of this tutorial.

 

Resourse Used

Following resource is used in this tutorial:

Step 1: Import Vector Path from Illustrator

Select all the paths we have made in Illustrator. Copy (Ctrl + C) and then paste it (Ctrl + V) in Photoshop.

img

In Photoshop, you will get a dialog box asking type of paste that you want. Because we want to export the vector path, we choose Path.

img

All the paths is now imported in a new path. You can find them inside Paths panel. Double click the path and change its name.

img

Step 2: Wacom Main Shape

Select wacom main shape path. Copy and then paste it on a new path. Click black and white icon on Layers panel to add new Adjustment Layer. Select Solid Color and set its color to #222327.

img

Step 3

Make new layer on top of previous shape. Fill it with white. Set its blend mode to Multiply. Convert it to Clipping by pressing Ctrl + Alt + G. Click Filter > Noise > Add Noise.

img

Step 4

Below is our result. The shape now has subtle texture on its surface. If your texture is not enough, you can simply duplicate the layer by pressing Ctrl + J.

img

Step 5

Make new layer. Set foregound color to white. Activate brush tool. Paint some highlights on indicated areas below. To get best result, make sure to paint patiently using low Opacity brush.

img

Step 6

Select inner shape of the wacom and paste it on a new path. Add new Adjustment Layer with color #111113.

img

Add following Layer Styles.

img

img

Step 7

Select main pad area path. Paste it on new path and add new Adjustment Layer Solid Color with color: #111113.

img

Again, add Layer Style Bevel and Emboss and Gradient Overlay.

img

img

Step 8

Hit Ctrl + J to duplicate the shape. Transform (Ctrl + T) it to 99% of its original size.

img

We still use previous Layer Style settings. But, this time set Direction on Bevel and Emboss to Up.

img

img

Here's our current result.

img

Step 9: Reflection

Duplicate Wacom inner shape that we have created in Step 6. Change its color to white and remove all its Layer Styles. Add a triangle shape and set its mode to Intersect.

img

Step 10

Reduce layer Opacity to 10%.

img

Step 11

Add Layer Mask onto the shape. Draw Linear Gradient from white to black until the reflection fades away.

img

Step 12: Wacom Drawing Pad

Activate Wacom drawing pad and convert it into a new Adjustment Layer Solid Color. Set its color to #2a2a2e.

img

Add Layer Style Gradient Overlay.

img

img

Step 13

Let's add texture onto the drawing pad to make it appears realistic. Make new layer and then fill it with white. Click Filter > Noise > Add Noise. Set blend mode to Multiply.

img

Step 14

Activate brush tool. Right click on canvas and set brush size to 1 px with 0% hardness.

img

Step 15

Make new layer above the drawing pad. Select rounded rectangle path inside the drawing pad. Right click and select Stroke Path.

img

In the next dialog box, select Brush.

img

Step 16

Convert layer to Clipping Mask by pressing Ctrl + Alt + G. This way, the stroke will stay inside the drawing pad.

img

Step 17: Buttons

Activate Pencil tool. Set its size to 1 px. Draw some black lineson indicated areas below.

img

Step 18

Next to the line, draw another white line. This time, decrease its Opacity to 30%. Combination of these black and white lines will create an inset effect.

img

Step 19

In the middle of the buttons, draw some white dots.

img

Step 20

Draw a white rectangular shape on the middle of the buttons. Add Layer Style Gradient Overlay.

img

img

Step 21

Draw an elliptical selection on top of the shape. make new layer and then fill it with white. Remove selection (Ctrl + D) and soften it with Gaussian Blur (Filter > Blur > Gaussian Blur). Reduce Opacity and then erase both its end using a very soft Eraser tool.

img

Step 22

Activate Brush tool and set foreground color to white. Draw subtle highlight on Wacom corner. This subtle highlight will add realism onto the shape.

img

Step 23: Shadow

Ctrl-click wacom basic shape to make new selection based on its shape.

img

Step 24

Make new layer and place it under all layers. Fill selection with black and then remove selection using shortcut Ctrl + D. Soften the shadow using Gaussian Blur (Filter > Blur > Gaussian Blur).

img

img

Step 25: Label

Draw a rectangle under the pad. You can use any color, it doesn't matter.

img

Step 26

Activate pen tool. Click on the rectangle to add new layer. Pull new point down. What we want here is a natural label shape.

img

Step 27

Grab fabric texture and place it above the label shape. Convert it into Clipping Mask by pressing Ctrl + Alt + G. This way, the texture will stay inside the label area.

img

Step 28

Make new layer and and convert it to Clipping Mask. Use soft brush tool to paint subtle highlight and shadow on the label. Because the layer has been converted into a Clipping Mask, anything you paint will goes inside the label. Draw black rectangle and put it behind the label. As you can see below, the label appears very natural.

img

Step 29

Make new layer above the label. Paint subtle shadow from the Wacom on the label.

img

Step 30

Add white text on top of the label.

img

Double click text layer and drag black slider on Underlying layer option to the middle.

img

This slider will bring up black pixel from layers underneath it. The result is natural looking text.

img

Step 31: Cable

Draw a black rectangle under the pad. Activate pen tool and click on the path to add new points. Drag new points until we have a natural looking cable.

img

Double click layer and add Layer Styles Bevel and Emboss.

img

Step 32

Ctrl-click cable to make new selection based on its shape. Move selection down a few pixels by pressing down arrow. Make new layer under the cable and fill selection with black.

img

Step 33

Soften the shadow by adding filter Gaussian Blur.

img

Step 34

Erase some part of the shadow to make it appears more realistic.

img

Step 35: Pen

We have finished drawing the pad, let's move on to work on the pen. To prevent it from distracting our work, put all layers into a new group and click eye icon on front of it to hide the pad.

Activate pen path and hit Ctrl + Enter to convert it into selection. Make new group layer and then click Add Layer Mask. Next, we will draw the pen inside this group layer.

img

Step 36

Activate pen main path. Click Add Adjustment Layer icon and select Solid Color. Set its color to #1b1c1e. Double click layer and add Layer Style Gradient Overlay.

img

img

Step 37

Use Brush tool to draw highlight on outer side of the pen. Reduce its Opacity to 40%.

img

Step 38

Draw a rounded rectangle on its center with color #141517.

img

Step 39

Ctrl-click shape we have just created. make new layer and fill it with white.

img

Step 40

Move selection up by pressing up arrow key a few times. Hit Delete key.

img

Click Select > Deselect to remove selection. Soften the highlight by adding filter Gaussian Blur.

img

Step 41: Pen button

Draw a rounded rectangle and set its color to #1d1e20.

img

Add Layer Styles Drop Shadow, Bevel and Emboss, and Gradient Overlay to change the button appearance into 3D.

img

img

img

You can see the result below.

img

Step 42

Zoom in using Zoom tool to see details on the button. Set foreground color to white. Activate Brush tool with radius 1 px. Paint subtle highlight on the button edges.

img

Step 43: Eraser

Draw a rounded rectangle with color #141517 for pen eraser. Put it under all shapes.

img

Add Layer Style Inner and Gradient Overlay.

img

img

Step 44

Make new layer above the eraser. Paint pen shadow on the eraser using soft brush.

img

Step 45

Use Zoom tool to see details on the eraser. Draw some subtle highlights using 1 px brush.

img

Step 46

Our current pen has no proper lighting. So, let's add one. Our light source is located on top right of the pen. Activate brush tool and paint highlight on the pen.

img

Step 47: Pen Tip

Draw a small black rectangle on top of the pen. Make new layer and then paint a small highlight on the tip using 1 px brush.

img

Step 48: Shadow

Remember that our pen is located in a group layer with layer mask. We made the group layer in Step 35. Now, we need to make pen shadow outside the group layer. Ctrl-click pen path to convert it to selection. Press left arrow key a few times to move the selection. Make new layer and place it under pen group layer. Fill selection with black. Remove selection using shortcut Ctrl + D or click Select > Deselect.

img

Step 49

Click Filter > Blur > Gaussian Blur to soften the shadow.

img

Step 50

Activate Eraser tool and set its Hardness to 0%. Erase top and bottom part of the shadow to make it realistic.

img

Step 51

We've done drawing the pen. Let's bring back the pad.

img

Step 52: Rotating the Pen.

let's rotate our pen position to make it natural. Activate pen shadow layer and pen group layer. Hit Ctrl + T to perform transformation. Drag outside the transformation frame to rotate the pen.

img

Final Result

Here is the final result of our drawing tutorial. Click on the image to see it in full size.

img

   
subscribe to newsletter