In this tutorial, we will learn how to draw pen and book icon from scratch using Photoshop and Illustrator. We will use basic tools such as Pen and Brush and combine them with layer style to get realistic result. Let’s begin!
This tutorial is written exclusively for PSD Vault by Indonesian Graphic Designer Mohammad Jeprie.
Final Result Preview – Draw Pen and Book Icon Tutorial
Here’s the icon that we are going to make in this tutorial.
PSD Vault VIP Membership
You can download the PSD File for this tutorial via the VIP Members Area for only $6.95/Month (or less)! You will not only get this PSD File, but also 200+ other PSD Files + Extra Goodies + Exclusive Photoshop tutorials there. Signup now and get exclusive!
Step 1: Drawing The Pen’s Basic In Illustrator
We will start by drawing the basic shape of the pen. We use Illustrator since it is easier and more reliable for vector drawing. But, if you don’t have Illustrator, you can stick with Photoshop. Basically, the drawing process on both softwares are similar. In Photoshop, you can use Pen Tool and Shape Tool to draw the shape.
Make a new file in Illustrator. You can use any size. We will draw the pen first. Using The Rounded Rectangle Tool, draw a rounded rectangle shape. This will be the main barrel of the pen.
Step 2
Using Direct Selection Tool, select top corners and then click and drag the tiny circle to adjust the rounded rectangle radius.
Step 3
Repeat the same step to the lower corner. This time, the radius should be smaller than the upper corners.
Step 4
Add a small rounded rectangle shape on top of the pen.
Step 5: Drawing The Pen’s Socket
We are going to build the pen’s socket. It has to be symmetric. Draw a half cone using The Pen Tool.
Step 6
Right click the shape and select Transform > Reflect. In the next dialog box, select Vertical and click Copy
Step 7
We already have two mirrored shape. Next, we need to combine it into the pen’s socket. Move the duplicate until we have a cone shape. Select two overlapped points on the end of each path and then right click and select Join. Repeat the same step to the lower points to join them into one single point and close the vector shape.
Step 8
As seen in the screenshot, there has to be a cut out at the bottom of the socket. It is place for then pen’s nib. Just like the socket, it is made of two mirrored half cone which are then combined into a single shape.
So far, this is the shape we have. We need to draw some more shapes to complete it.
Step 9: Drawing The Pen’s Clip
We continue by adding the clip shape. We can draw it manually using The Pen Tool.
Step 10
Behind the clip add a curved rectangle shape for the ring that hold the clip onto the barrel.
Step 11: Drawing The Pen’s Rubber Grip
We also need to draw the rubber shape on the bottom of the pen which is widely used to tighten the user’s grip. The bottom should have half circle shape and the upper part is made of an S shape.
Step 12
We also want to add some lines inside the rubber part to further strengthen the grip. Draw two S lines similar to the upper edge of the rubber part.
Step 13
Select both S lines. Click Object > Blend > Blend Option. Select Spacing: Specified Steps 7. Click Object > Blend > Make to create seven identical lines distributed between the original S lines. In total, we have nine S lines.
Step 14
We need to convert those S lines into a shape for easier editing. Make sure the lines are selected and then click Object > Expand. Put a tick mark on all the available option and then click OK.
From now on, each line is independent and can be edited individually.
Step 15
We have completed drawing the basic shape of the pen. We are going to export it to Photoshop. We still need to add some simple shapes, but we’ll just do that in Photoshop. For now, select all the lines and then hit Ctrl + C to copy them.
Step 16: Start working in Photoshop
Fire up Photoshop. Make a new file using Ctrl + N. You can use any size. Just click the OK button.
Step 17
Activate The Crop Tool. Click once and then drag the crop boundary to resize the canvas. Hit Enter to accept the new size.
Step 18: Importing The Vector Shape
Hit Ctrl + V to paste the vector shapes we created earlier in Illustrator. Paste them as Shape Layer.
Step 19
Next, we will place each shape into separate layer. Start by selecting the main barrel using The Path Selection Tool. Hit Ctrl + Shift + J to cut the shape into new separated layer shape.
Step 20: Colorize Each Part
To help us differentiate each shape, change their color. Double click the layer shape icon to change its color. In this case, we are going to set the pen’s color to blue. You are welcome to use any color. It’s your call.
Step 21
Do the same with the pen’s socket. We use almost white color here.
Step 22
Continue with the other shape. For comparison, I place the pen behind white and black background.
Step 23: Add Extra Shapes
Let’s add another shape. Draw a shape covering the barrel right underneath the rubber grip.
Step 24
We also want to have separate shape on top of the pen. We do this by duplicating the main barrel and add another with Intersect Shape Areas mode.
Step 25
We want to make the barrel translucent so we can show the ink inside. Activate the barrel layer and adjust its Opacity to 50%.
Step 26
Add a rectangular shape behind the barrel. This shape should be translucent too. Set its Opacity to 30%.
Step 27
Draw another shape, similar to the one created earlier, but this time shorter. Set its Opacity to bigger size. To show blue ink, we set the shape’s color to blue.
Step 28
Draw an ellipse with darker color and place it on top of the previous shape.
Step 29
Add a thin semi circle shape on the socket. Set its color to dark gray.
It was made by stacking two socket shape and set the top shape to Subtract Front Shape mode.
As seen here. Part of our pen should be translucent and allows us to see the background behind it.
Step 30: Adding Lighting and Shadow
Double click the barrel layer shape and add following layer styles. We are going to add shadow on its edge.
Step 31
We also need to add lighting to the surface. Activate The Gradient Tool and then click the gradient preview on The Option Bar to open up The Gradient Editor. In the next dialog box, select Noise as its Gradient Type. Click Randomize a few times until we get satisfying color sequence. We don’t need the color, actually. What we need is the contrast between the colors. Make sure you have nice alternate sequence of darker and lighter color.
Step 32
Add a new layer and make a rectangular selection using The Marquee Tool. Click and drag to draw gradient inside the selection.
Step 33
Click Image > Adjustments > Desaturate.
Step 34
Increase the contrast by applying Levels (Ctrl + L). Drag the black triangle on the input levels closer to the center to increase the contrast of the gradient. Click OK button.
Step 35
Place the gradient between the barrel and the other parts. You can resize it if necessary.
Step 36
Ctrl + click the barrel’s layer thumbnail to make new selection based on its pixel. Click the Add Layer Mask icon to constrain the gradient inside the barrel.
Step 37
Here’s the fun part. Change its layer blend mode to Overlay and reduce its Opacity. This step will turn the gradient into random light reflection seen on the barrel surface.
Step 38
We can take this further to make the lighting more complex and realistic. Add another gradient. This time set its blend mode to Screen to lighten the pixel underneath it.
Step 39
Let’s add another lighting onto the surface of the pen. Add new layer and then draw a rectangular white shape using The Pencil Tool.
Step 40
Change the layer’s blend mode to Screen and reduce its Opacity.
Step 41
Now, add shadow onto smaller detail, such as the shape behind the rubber grip, which we will just call it lower barrel. Start by making a rectangular selection and then paint with black using The Pen Tool. Make sure you have set the pen’s Hardness to 0% to get soft brush stroke.
Step 42
Hit Ctrl + D to remove the selection.
Step 43
We want to keep this shadow exclusive inside the shape. To do this, you have to make sure that the layer is placed right above the lower barrel layer. Then, hit Ctrl + Alt + G to convert the layer to clipping mask.
Step 44
Add light reflection using same previous procedure.
Here’s what we have in 100% magnification.
Step 45
Make a new layer. Ctrl + click the main barrel thumbnail layer to make a new selection based on its shape. Click Edit > Stroke. Set Width to 2 px, Color to black and then click OK.
Step 46
Soften the stroke using Gaussian Blur. Click Filter > Blur > Gaussian Blur. This should add shadow on the barrel’s edge.
Step 47
Reduce the shadow to keep it subtle by adjusting its layer’s Opacity to 50%.
Step 48
After we are done with the lighting on the main barrel’s surface, continue adding lighting on the other area. We will add one to the top part of the pen using layer styles. Double click its layer shape and activate Inner Shadow, Inner Glow, and Gradient Overlay. Use the following settings.
And here’s the result after adding the layer styles.
Step 49
Add a new layer. Now, add white stroke using soft Brush Tool.
Step 50
Reduce the layer’s Opacity to keep the highlight subtle.
Step 51
Add new layer and draw stronger highlight. Again, reduce its Opacity.
Step 52
Add more layer, this time paint black to add shadow.
Step 54
Reduce the layer’s Opacity. Turn the layers into clipping mask to keep the pixel contained inside the upper barrel.
Step 55
Add new layer. Paint white again using soft brush to add subtle reflection on top left corner of the pen. Keep it subtle by reducing its layer’s Opacity to 10%.
Step 56
Again, add stronger and smaller highlight to make the result as realistic as possible.
As you can see in the illustration below, we put the imaginary light source in the top left of the scene. Depend on the position of your light source, you may need to adjust your lighting differently.
Step 57: Fixing The Pen’s Clip
Draw a black vector shape between the clip and ring behind it. See picture below for reference.
Step 58
Add new layer and then paint black to add shadow of the clip onto the barrel. The Opacity should be low to keep it subtle.
Step 59
Draw another shadow to make sure the result is realistic.
Step 60
Double click the clip layer’s thumbnail and then activate Inner Shadow, Inner Glow, and Gradient Overlay. This will add gradient color on the clip and keep it away from flat appearance.
Step 61
We also need to add harsher light reflection on the clip surface since it is more reflective than the other part. Make new layer and then paint black line on top of the surface. You may want to reduce its layer’s Opacity if needed.
Step 62
On the other hand, you will also need stronger highlight on the same surface by painting with white.
Step 63
Let’s move on to the detail. Double click the ring layer that attached to the clip. Apply small Gradient Overlay and Drop Shadow.
Below you can see a very subtle shadow underneath the ring. It makes us believe that the shape is placed right on top of the main barrel.
Step 64: The Pen’s Socket
We also need to add lighting and shadow to the pen’s socket. Add new layer and paint soft shadow using The Brush Tool.
Step 65
Convert the layer into clipping mask to constrain the shadow inside the socket.
Step 66
Using same technique mentioned above, add harsh lighting on the socket’s surface.
Step 67
Add another layer and then paint soft shadow on the bottom of the socket. Convert the layer into clipping mask to make sure the pixel goes inside the socket.
Step 68
On the ring’s surface, paint another lighting.
Step 69: The Pen’s Nib
Zoom in to see the pen’s tip closer. Add new layer. Use The Brush Tool to paint soft shadow on the nib.
Step 70: The Rubber Grip
First, we don’t want see excess line on the rubber grip. Make sure the S lines layer is selected. To hide unused line segments, Ctrl – click the rubber grip layer’s thumbnail and then add layer mask. The unused line segments will be masked and hidden from sight.
Step 71
Activate The Tool Brush with low Opacity and then paint upper part of the layer mask with black to partially hide the upper S lines.
Step 72
Let’s add lighting onto the S lines by double clicking the layer and activate Bevel & Emboss, Inner Shadow, and Gradient Overlay.
Step 73
Add new layer above the rubber grip layer and convert it to clipping mask. Paint black on left and right side of the rubber grip edge to make it appears three dimentional.
Step 74
Double click the rubber grip layer and then add Inner Glow and Gradient Overlay.
You will see that the rubber grip now appears more realistic with shadow on its sides.
Step 75
If you zoom closely, you will notice that we need small shape for rear side of the rubber grip. We can simply draw a black shape using The Pen Tool.
Here’s the result in 100% magnification.
Step 76
Next, we want to add lighting on top part of the pen. Make new layer and then draw light reflection manually using The Brush Tool
Step 77
Add another new layer and then paint soft shadow in the indicated area. We are done drawing the pen. In the next step, we will draw the book.
Step 78: Drawing Book Icon
Drawing a book is fairly simple. It is just a box shape, actually. However, to draw convincing book you need to understand the concept of perspective. But, if you want to do it easier, you can just take photo of a real book and use it as a drawing reference. I’m not a good painter, so I prefer to use the later method. What I did was grab a book, put it on a table next to my computer, and then photograph it using my phone. Open up the photo in Photoshop. Next, we will trace the book.
Step 79: Front Cover
Activate The Pen Tool and set its mode to Shape. Click to trace the book’s front cover. For its color, you can use any color. In this case, light blue color is used.
Step 80
The cover’s color need to have a slight gradient because in real life there is no 100% solid color. Double click the layer shape and then activate Gradient Overlay. Adjust the gradient’s Opacity to be very low, about 13% or less.
Step 81
Duplicate the shape (Ctrl + J) and then move its points using The Direct Selection Tool until we have upper part of the book’s front cover.
Step 82
Use same step to make left side of the cover.
Step 83: Rear Cover
We have made the front cover. Now, its time to draw its rear cover. Use same technique explained earlier.
Step 84: Paper Stack
We need image of paper stack. Make new file. Click File > New. The canvas should be tall enough for the book. Just click OK.
Step 85
Activate The Gradient Tool. Click the preview gradient box to manually compose the gradient.
Step 86
In the next dialog box. Activate Noise and click Randomize. You may need to click Randomize button a few times to get gradient with multiple variation of brightness. Click and drag to fill the canvas with a gradient.
Step 87
Remove the color using shortcut Ctrl + Shift + U for Desaturate. We don’t need the color, we just need its lightness variation.
Step 88
Increase the contrast by applying Levels. Click Ctrl + L. Move the triangles closer to the center until the contrast increases.
Step 89
Copy the brightness gradient and paste it on top of the book. Transform it (Ctrl + T) and place it on left side of the book.
Step 90
Double click the layer and apply subtle Gradient Overlay.
Step 91
Add another pile of paper stack on top side.
Step 92
Paint shadow on edge of the paper stack.
Step 93
You also need to paint the paper’s shadow on the rear cover’s surface.
Step 94: Holes
Now we are going to add holes on the front cover. First, hide all the cover and paper to reveal the original reference photo. Start with drawing the first hole on the top using The Ellipse Tool. While clicking, hold Shift to constrain its proportion and come up with a circle shape.
Step 95
Duplicate the circle shape by Alt – dragging it. Place it below the original shape.
Step 96
Continue until we have enough circle shapes on the cover.
Step 97
We need to align all the holes. Select all the holes and then click Align to Selection icon on the Option Bar.
Step 98
Apply Transformation by hitting Ctrl + T. Right click the transformation’s bounding box and then select Skew. A confirmation dialog box may appear. Just click the OK button. Pull its corner until the shape matches the perspective of the front cover. The holes should appear as if they are on the cover’s surface, not just floating around.
Step 99
Copy all the holes we have just made by hitting Ctrl + C and then hide the layer. Activate the front cover again and paste the holes vector path. Set its mode to Subtract Front Shape. With this mode, the front cover now has holes on it.
Step 100
We also need to add inner part of the book that is shown inside the holes. Add a new layer shape with darker color covering all the holes.
Step 101
Paste the holes (Ctrl + V) we copied earlier.
Step 102
Move the shape layer behind the front cover. You will need to move the layer about 2 or 3 pixels to the left.
Step 103
We also want to see inner part of the paper that is seen inside the holes. Do this by simply adding a dark rectangular shape behind the front cover layer.
Here’s what we have so far.
Step 104: Rings
Next, we want to add a pack of rings that hold the book together. Each ring is made from a stack of two ellipse shapes with the smaller one is set in Subtract Front Shape mode.
Step 105
Duplicate the layer shape by hitting Ctrl + J. Remember, each ring has to be in separate layer.
Step 106
Continue duplicating each ring into its own separate layer.
Once we are done, reveal the book component we drew earlier and hide the photo reference.
Step 107
Add layer mask to the ring layer and then paint black on the ring segment that is supposed to be hidden inside the book.
Step 108
Repeat this to the other rings.
Step 109
We can make the ring appears more realistic by adding layer style/. Double click the layer and then in Layer Style dialog box activate Gradient Overlay, Bevel and Emboss, and Color Overlay. The ring’s color is defined in the Color Overlay setting.
This is the ring’s appearance after layer styles are applied.
Step 110
We need to apply the same layer style to the other ring layer. Right click on the layer which we have added layer style and then select Copy Layer Style.
Step 111
Right click the other ring layer and then select Paste Layer Style.
Here’s the result after all rings are given the layer style.
Step 112: Adding Shadows
We need to add the rings’ shadow. Hide all other layer including the background and hit Ctrl + Shift + C to copy the ring. Paste the copied rings onto new layer using shortcut Ctrl + Shift + V and then hit D, Shift + Alt + Delete to fill it with black.
These are the same rings but with added background just to hep you see the image easier.
Step 113
Apply Gaussian Blur filter (Filter > Blur > Gaussian Blur) to soften the rings to be used as a shadow.
Step 114
Duplicate the rings’ shadow using Ctrl + J. Hide the original rings’ shadow. Return to the duplicated rings’ shadow, hit Ctrl + T and then skew it until we have a nice shadow of the rings on the front cover. Erase unneeded shadow, which is the pixels outside the front cover, and reduce the layer’s Opacity.
Step 115
Again, duplicate the original rings’ shadow and then transform it until we have nice shadow on the book’s side.
Step 116
Add another Gaussian Blur filter to soften the shadow even more. Erase unneeded shadow and reduce its layer’s Opacity.
Step 117
We also have to add shadow on contact point between the book and the floor. You can do this manually by painting black using The Brush Tool.
Step 116
We also need the book’s main shadow. To do this, hide the background layer until we have only the book. Hit Ctrl + Shift + C then Ctrl + Shift + V to duplicate the book.
Step 117
Reveal back the background. Move to the book’s shadow layer to stay underneath the book. Change its color to black using shortcut D and then Shift + Alt + Delete.
Step 118
Apply Gaussian Blur filter to soften the shadow (Filter > Blur > Gaussian Blur.
Step 119
Hit Ctrl + T to transform the shadow. Hold Ctrl and then drag its corner until it laid out on the floor.
Step 120
Once you are happy with the position, reduce its layer Opacity.
Step 121
Add layer mask to the book’s shadow and add white to black gradient to fade the furthest shadow.
Step 122
Add another shadow. This will add realism to the image because in real life light bounces and produce multiple shadows.
Step 123: Importing The Pen
Time to bring back the pen. Open up the pen file. Hide its background. Copy the pen by selecting all the pixels (Ctrl + A) and then hit Ctrl + Shift + C.
Step 124
Return to the book file. Paste the pen using shortcut Ctrl + V.
Step 125
Hit Ctrl + T and then click and drag outside the transformation box to rotate the pen.
Step 126
Add new layer and place it between the book and the pen. Using The Brush Tool, paint the pen’s shadow manually on the book cover. Reduce its layer Opacity to keep the shadow subtle.
Finally, here is the result in 100% magnification.
Final Result
And finally, this is the result of our effort. I hope you enjoy this lengthy tutorial and get a sense on how to draw realistic object complete with its lighting using combination layer style and manual drawing.