How to Create a Realistic and Sleek Wacom Bamboo [Highly Detailed]

Advertisment

In this tutorial, we will create a highly realistic and Sleek Wacom Bamboo. The process on creating this image is quite complicated but I’ll try to explain it as clear as I can. Each step will be accompanied with screenshots and sometimes I will add notes for better understanding.

Before we start, let’s see what we’ll be creating below. Notice that you can even see the USB symbol on its cable. As I said, highly realistic.

Our Final Output

Step 1-Creating Wacom’s Base

Start by creating a new file, 512×512 px, RGB, 72 dpi, white background. Create a rounded rectangle with 5 px radius. Add some drop shadow. This will be our Wacom’s main body.

Step 2

Create new layer above it. Fill the layer with white. Click Filter > Noise > Add Noise. Give a small amount of monochromatic noise.

Step 3

Hit ctrl+alt+G to turn layer into a clipping mask. Change blend mode to Multiply and lower its opacity to 50%. This way, our Wacom will have a bit of texture on it.

Step 4-Add 3D Look

Currently, our Wacom looks very flat. It’s just a 2D rectangle. To turn it to a 3D shape we can’t just use a bevel and emboss style. We’ll play with lights and shading to do that. In new layer, create a transparent to white gradient in lower part of wacom. Change its opacity to 20%.

Step 5

Draw another gradient to the other side. See picture below to see light direction for each side.

Step 6

Draw a black rectangle with 20% opacity. Add layer styles Bevel and Emboss and Outer Glow.

Step 7-Separating Buttons

Now, we need to create gap between Wacom’s panel and its body. The trick here is using thin line in white and black. Together, these two lines create depth and make our brain thinks “It’s a 3D shape!”

Create new layer. With pencil tool, diameter 1 px, opacity 70%, draw a black line. Underneath it, draw another line, this time white with 50% opacity.

Step 8

Draw another black and white line to separate other panels.

Step 9-Scroll Area

Next, creating big scroll area. Using ellipse tool, shit+drag to draw a perfect circle. Add some layer styles.

Step 10

Draw smaller circle inside previous one. Add another layer style.

Step 11

Use polygon tool with 3 sides to draw two triangles.

Step 12

Inside the scroll area, draw a circle. Select the path circle, hit ctrl+C and ctrl+V. Press right and down arrow few times to move it. In the option bar select subtract to create a crescent shape. Next, draw path to remove top part of the crescent.

Step 13

Duplicate crescent layer. Move it to other side of the scroll area. Hit ctrl+T and right-click choose Flip Vertical.

Step 14

Write FN1 and FN2 in lower button. I use a bold italic Helvetica here. If you don’t have Helvetica, you can use similar sans-serif font like Arial. Add layer styles shown below.

Step 15

Next step is creating arrow for next and previous button. Draw arrow directly using pen tool is not recommended. It’s just too hard.

Here’s what I prefer to do, create a blue rectangle then using pen tool click one of its top corner. We have a triangle now.

Select the path and duplicate it. Move it by pressing left and top arrow a few times. Choose subtract from the option bar.

Last thing to do is select both path and rotate it -45 degree.

Step 16

Duplicate the arrow and flip it vertically to create arrow for opposite direction. Give both arrow these layer styles to make them glow.

Step 17

Wacom put a small light under the button and it make the indicator really glow. So, create a new layer. Activate brush tool and choose star shape brush. With foreground set to light blue, click once on top of every button indicator to give them subtle sparkle.

Step 18

Upper part of bamboo and its lower are different. The upper part is very slick and glossy. Select the upper part and add adjustment layer Curves. In the Curves dialog box create a small S curves and hit OK This will increase its contrast and give it a glossy look.

Step 19

To make it looks more glossy, we’ll add some reflections. Again, select the upper part and add a transparent to white gradient.

Step 20

Don’t forget the brand. Here, i just use a light italic helvetica and wrote BAMBOO. Then I add a layer mask and paint the line inside B with black.

Step 21

So far, here’s what we have.

Step 22-Creating Cable

Move on to the detail. Draw a black rectangle in top right corner. This will our cable’s head.

Step 23

Draw a smaller rectangle. Use gray color and add Inner Shadow.

Step 24

Inside the gray rectangle draw a USB symbol.

Step 25

Duplicate the gray rectangle.

Step 26

Add a bold B. Hit ctrl+T and flip it vertical and horizontal. Add Drop Shadow and Outer Glow.

Step 27

Finally, draw a triangle shape. With tool brush hardness 95% draw a black cable. Underneath it draw the shadow manually.

Step 28-Drawing Pen

To make things easier we’ll create pen in a separate file. We start from a simple gray rounded rectangle with 5 px radius. Select some points using white arrow tool and move it until we have basic pen shape. To give a 3D look add gradient overlay.

Step 29

Upper part of the pen is very slick and glossy. Draw a black shape, hit ctrl+alt+G to create clipping mask. Add gradient overlay.

Step 30-Creating Pen’s Button

Draw a rectangle in lower part of the pen. Add layer styles shown below.

Step 31

Draw smaller rectangle in the middle of the pen’s button and add a gradient overlay.

Step 32

Almost done! Draw a very small rectangle at the end of the pen.

Step 33

Draw a black rounded rectangle on top of the pen. I also draw a very small reflection on it.

Step 34

Our pen is done! Now, we’ll import it to our wacom picture. Select all layers and right-click choose Convert to Smart Objects.

Drag our new smart object to Wacom file. Hit ctrl+T and rotate it.

Step 35

Duplicate the pen, right click and choose rasterize layer. Hit ctrl+T and distort it until it seems laying on our wacom. This pen will be our shadow.

Step 36

Hit D and shift+alt+Delete to fill the duplicated pen with black.

Step 37

Give it a Gaussian blur and add a layer mask. Draw a white to black gradient until the shadow gradually fades away.

Step 38

Here’s our wacom right now.

Step 39

I don’t really like the plain white background. So, I found this texture and paste it under the Wacom.

Conclusion

For final touch, i want to make Wacom really stands out from the background. I create a new layer. Fill it with a radial gradient gray to white. Change the blend mode to Overlay. That’s it! I hope you have some fun with this tutorial and learn something new.

Free download PSD file

Wait! To help you following this tutorial, I also give you the psd file. Click here to download it.