Draw Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 2

Using Direct Selection Tool, select top corners and then click and drag the tiny circle to adjust the rounded rectangle radius.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 3

Repeat the same step to the lower corner. This time, the radius should be smaller than the upper corners.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 4

Add a small rounded rectangle shape on top of the pen.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 6

Right click the shape and select Transform > Reflect. In the next dialog box, select Vertical and click Copy

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

So far, this is the shape we have. We need to draw some more shapes to complete it.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 9: Drawing The Pen’s Clip

We continue by adding the clip shape. We can draw it manually using The Pen Tool.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 10

Behind the clip add a curved rectangle shape for the ring that hold the clip onto the barrel.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

From now on, each line is independent and can be edited individually.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 18: Importing The Vector Shape

Hit Ctrl + V to paste the vector shapes we created earlier in Illustrator. Paste them as Shape Layer.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 21

Do the same with the pen’s socket. We use almost white color here.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 22

Continue with the other shape. For comparison, I place the pen behind white and black background.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 23: Add Extra Shapes

Let’s add another shape. Draw a shape covering the barrel right underneath the rubber grip.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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%.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 26

Add a rectangular shape behind the barrel. This shape should be translucent too. Set its Opacity to 30%.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 28

Draw an ellipse with darker color and place it on top of the previous shape.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 29

Add a thin semi circle shape on the socket. Set its color to dark gray.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

It was made by stacking two socket shape and set the top shape to Subtract Front Shape mode.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

As seen here. Part of our pen should be translucent and allows us to see the background behind it.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 32

Add a new layer and make a rectangular selection using The Marquee Tool. Click and drag to draw gradient inside the selection.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 33

Click Image > Adjustments > Desaturate.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 35

Place the gradient between the barrel and the other parts. You can resize it if necessary.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 40

Change the layer’s blend mode to Screen and reduce its Opacity.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 42

Hit Ctrl + D to remove the selection.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 44

Add light reflection using same previous procedure.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Here’s what we have in 100% magnification.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 46

Soften the stroke using Gaussian Blur. Click Filter > Blur > Gaussian Blur. This should add shadow on the barrel’s edge.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 47

Reduce the shadow to keep it subtle by adjusting its layer’s Opacity to 50%.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

And here’s the result after adding the layer styles.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 49

Add a new layer. Now, add white stroke using soft Brush Tool.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 50

Reduce the layer’s Opacity to keep the highlight subtle.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 51

Add new layer and draw stronger highlight. Again, reduce its Opacity.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 52

Add more layer, this time paint black to add shadow.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 54

Reduce the layer’s Opacity. Turn the layers into clipping mask to keep the pixel contained inside the upper barrel.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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%.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 56

Again, add stronger and smaller highlight to make the result as realistic as possible.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 57: Fixing The Pen’s Clip

Draw a black vector shape between the clip and ring behind it. See picture below for reference.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 59

Draw another shadow to make sure the result is realistic.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 62

On the other hand, you will also need stronger highlight on the same surface by painting with white.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 65

Convert the layer into clipping mask to constrain the shadow inside the socket.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 66

Using same technique mentioned above, add harsh lighting on the socket’s surface.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 68

On the ring’s surface, paint another lighting.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 72

Let’s add lighting onto the S lines by double clicking the layer and activate Bevel & Emboss, Inner Shadow, and Gradient Overlay.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 74

Double click the rubber grip layer and then add Inner Glow and Gradient Overlay.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

You will see that the rubber grip now appears more realistic with shadow on its sides.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Here’s the result in 100% magnification.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 82

Use same step to make left side of the cover.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 83: Rear Cover

We have made the front cover. Now, its time to draw its rear cover. Use same technique explained earlier.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 85

Activate The Gradient Tool. Click the preview gradient box to manually compose the gradient.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 87

Remove the color using shortcut Ctrl + Shift + U for Desaturate. We don’t need the color, we just need its lightness variation.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 88

Increase the contrast by applying Levels. Click Ctrl + L. Move the triangles closer to the center until the contrast increases.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 90

Double click the layer and apply subtle Gradient Overlay.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 91

Add another pile of paper stack on top side.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 92

Paint shadow on edge of the paper stack.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 93

You also need to paint the paper’s shadow on the rear cover’s surface.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 95

Duplicate the circle shape by Alt – dragging it. Place it below the original shape.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 96

Continue until we have enough circle shapes on the cover.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 97

We need to align all the holes. Select all the holes and then click Align to Selection icon on the Option Bar.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 101

Paste the holes (Ctrl + V) we copied earlier.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Here’s what we have so far.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 105

Duplicate the layer shape by hitting Ctrl + J. Remember, each ring has to be in separate layer.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 106

Continue duplicating each ring into its own separate layer.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Once we are done, reveal the book component we drew earlier and hide the photo reference.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 108

Repeat this to the other rings.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

This is the ring’s appearance after layer styles are applied.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 111

Right click the other ring layer and then select Paste Layer Style.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Here’s the result after all rings are given the layer style.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

These are the same rings but with added background just to hep you see the image easier.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 113

Apply Gaussian Blur filter (Filter > Blur > Gaussian Blur) to soften the rings to be used as a shadow.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 115

Again, duplicate the original rings’ shadow and then transform it until we have nice shadow on the book’s side.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 116

Add another Gaussian Blur filter to soften the shadow even more. Erase unneeded shadow and reduce its layer’s Opacity.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 118

Apply Gaussian Blur filter to soften the shadow (Filter > Blur > Gaussian Blur.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 119

Hit Ctrl + T to transform the shadow. Hold Ctrl and then drag its corner until it laid out on the floor.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 120

Once you are happy with the position, reduce its layer Opacity.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 121

Add layer mask to the book’s shadow and add white to black gradient to fade the furthest shadow.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 122

Add another shadow. This will add realism to the image because in real life light bounces and produce multiple shadows.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 124

Return to the book file. Paste the pen using shortcut Ctrl + V.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Step 125

Hit Ctrl + T and then click and drag outside the transformation box to rotate the pen.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Finally, here is the result in 100% magnification.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

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.

Draw Realistic Pen and Book Icon Using Photoshop and Illustrator

Tags:

  • My name is James and I have been using Photoshop since version 5.0 (long time ago!). PSD Vault is my spare time hobby and I write majority of the Photoshop tutorials and articles here. I hope you enjoy my blog, and feel free to leave a comment or contact me if you have any questions.

  • Show Comments

You May Also Like

5 Useful Little Photoshop Tricks to Add Extra Elegance For Your Design

Recently I have been focusing on providing some simple, beginner-leveled photoshop tutorials here on ...

Create a Realistic Nebula Scene From Scratch

In this tutorial, I will show you the steps I took to create a ...