Join over 55,891 Subscribers Today! FREE UPDATES!
Get The Only Freelancer crash course you will ever need to read!
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.
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.
Create new layer above it. Fill the layer with white. Click Filter > Noise > Add Noise. Give a small amount of monochromatic noise.
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.
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%.
Draw another gradient to the other side. See picture below to see light direction for each side.
Draw a black rectangle with 20% opacity. Add layer styles Bevel and Emboss and Outer Glow.
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.
Draw another black and white line to separate other panels.
Next, creating big scroll area. Using ellipse tool, shit+drag to draw a perfect circle. Add some layer styles.
Draw smaller circle inside previous one. Add another layer style.
Use polygon tool with 3 sides to draw two triangles.
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.
Duplicate crescent layer. Move it to other side of the scroll area. Hit ctrl+T and right-click choose Flip Vertical.
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.
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.
Duplicate the arrow and flip it vertically to create arrow for opposite direction. Give both arrow these layer styles to make them glow.
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.
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.
To make it looks more glossy, we’ll add some reflections. Again, select the upper part and add a transparent to white gradient.
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.
So far, here’s what we have.
Move on to the detail. Draw a black rectangle in top right corner. This will our cable’s head.
Draw a smaller rectangle. Use gray color and add Inner Shadow.
Inside the gray rectangle draw a USB symbol.
Duplicate the gray rectangle.
Add a bold B. Hit ctrl+T and flip it vertical and horizontal. Add Drop Shadow and Outer Glow.
Finally, draw a triangle shape. With tool brush hardness 95% draw a black cable. Underneath it draw the shadow manually.
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.
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.
Draw a rectangle in lower part of the pen. Add layer styles shown below.
Draw smaller rectangle in the middle of the pen’s button and add a gradient overlay.
Almost done! Draw a very small rectangle at the end of the pen.
Draw a black rounded rectangle on top of the pen. I also draw a very small reflection on it.
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.
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.
Hit D and shift+alt+Delete to fill the duplicated pen with black.
Give it a Gaussian blur and add a layer mask. Draw a white to black gradient until the shadow gradually fades away.
Here’s our wacom right now.
I don’t really like the plain white background. So, I found this texture and paste it under the Wacom.
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.
Wait! To help you following this tutorial, I also give you the psd file. Click here to download it.
Get The Only Freelancer crash course you will ever need to read!
4 Written Articles • Website
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!