Create a Sleek Book App Icon in Illustrator

Tweet

Mobile devices have risen to peak popularity, and they’ve proven themselves to be more than a fleeting fad. While they’re not ideal or universally accepted for media creation, media consumption is where they truly excel. The demand for mobile devices and accompanying media consumption software has created stiff competition among designers. Most are focusing on fitting their software, services, or multimedia onto tablet-sized touch screens. A stunning, eye-catching app icon is one great way to help your app stand out from the crowd; a well-designed icon will result in more downloads, more purchases, and increased credibility and trust in your brand.

In this tutorial, I’ll show you how to create a gorgeous book app icon in Illustrator. We’ll use various shape tools, gradient tools, and various options in the object and effect menu to achieve the final outcome. I hope you learn some handy tips along the way. So, let’s get started!

Resources:

Free Leather Textures

Final result:

Book App Icon
(Download the finished, layered Illustrator file.)

Step 1

Create a new document in Illustrator with a 600px width and a 500px height.
1

Step 2

Now, set #C63D21 as your fill color and select the rectangle tool (“M”) to draw the rectangle shown below. Press the “Shift” key while drawing the rectangle to get a perfect square. Label it as “Frame”.
Select it by pressing the ring-shaped target present at the right side of respective layer and go to “Effect” > “Stylize” > “Round Corners”. Enter a 30px value here to turn it into a rounded rectangle, and go to “Object” > “Expand Appearance”. Once you are done, lock this layer and hide it. This is the base of our app icon, which we’ll use later to crop out other details.
Book App Icon

Step 3

Next, we’ll make the icon’s front. Draw another rectangle like the one shown below. Select it and go to “Effect” > “Stylize” > “Round Corners”. Again, enter a 30px value. After that, go to “Object” > “Expand Appearance”.
Book App Icon

Draw another vertical rectangle covering the left corners of the previous rectangle. Now, select both rectangles and hit “Minus Front” in the pathfinder panel (Shift + Ctrl + F9).
Book App Icon

Step 4

Next, we’ll give our book cover some thickness. Select the new shape and press Ctrl + “C” to copy it. Now, press Ctrl + “B” to paste in back. Drag the copy downwards 5-6 steps and change its fill color to #8E1F10.
Book App Icon

Step 5

To make highlights, select the top cover layer and press Ctrl + “C” to copy it. Now press Ctrl + “F” twice to paste in front. Click on the topmost copy and drag it 2 steps upwards using the selection tool (“V”). After that, select the two copies and hit “Minus Front” in the pathfinder panel (Shift + Ctrl + F9). Change the fill color of the resulting shape to #FFFFFF. Change its blending mode to “Soft Light” and reduce its opacity to 75% within the transparency panel (Shift + Ctrl + F10).
Book App Icon

Step 6

Select all of the layers comprising the front book cover and choose “Collect in New Layer” from the fly-out menu present at the top-right corner of the layers panel. Label it as “Front”. Duplicate and place it behind the original layer. Label this new duplicate as “Back”. Unhide the “Frame” layer and position the “Back” layer along the lower border of “Frame” as shown below.
Book App Icon

Step 7

Next, we’ll make the book cover binding. Draw a rectangle with #272727 as your fill color. To confine it within the icon, duplicate the “Frame” layer and place this new copy above the rest of the layers. Now, select the rectangle and “Frame copy” layer and hit “Intersect” within the pathfinder panel to get the shape shown below. Change its fill color once again to #272727.
Book App Icon

Step 8

Now, select the ellipse tool and draw an ellipse as shown below. Set its fill color to “none” and give it color #272727 as a stroke color (Stroke weight: 6.65pt). It should be on top of the book cover thickness but not the highlights. Make sure that stroke is aligned to “Inside”. You can ensure this through the stroke panel. Label the layer as “Curve”.
Book App Icon

Step 9

Select the “Curve” and go to “Object” > “Expand Appearance”. Draw a rectangle covering the right half of the ring. Now, select both the rectangle and curve layers and hit “Minus Front” within the pathfinder panel.
Book App Icon

To make highlights, select the “Curve” layer and press Ctrl + “C” to copy it. Now press Ctrl + “B” to paste in back. Change its fill color to #58595B and drag it 2 steps upward.
Book App Icon

Select the highlight “Curve” layer; press Ctrl + “C” to copy it. Now press Ctrl + “B” to paste in back. Change its fill color to black and drag it 3-4 steps upwards as shown below.
Book App Icon

Step 10

Now, duplicate the highlight “Curve” layer and place it above the binding rectangle layer. Select both layers and hit “Minus Front” within the pathfinder panel.
Book App Icon

Place the black curve layer behind the book binding layer.
Book App Icon

Step11

Next, we’ll make the book pages. Select the rectangle tool to draw the rectangle shown below with #F1F2F2 as the fill color and #BCBEC0 as the stroke color (Stroke weight: 0.75pt).
Book App Icon

Convert it into a rounded rectangle by going to “Effect” > “Stylize” > “Round Corners”. Enter a 30px value. After that, go to “Object” > “Expand Appearance”.
Book App Icon

Step 12

Select the rectangle and go to “Effect” > “Distort & Transform” > “Transform”. Enter the following values here to make more pages.
Book App Icon

Now, go to “Object” > “Expand Appearance”. To confine the pages within the icon, duplicate the frame layer, set its fill to “none,” and bring it above the pages. Now, select both the frame copy and pages and go to “Object” > “Clipping Mask” > “Make”.
Book App Icon

Step 13

To make a shadow, select the bottom most page and press Ctrl + “C” to copy it. Now, press Ctrl + “B” to paste in back. Change its fill color to black and drag it 1 step downwards and towards the right.
Book App Icon

Select it and go to “Effect” > “Blur” > “Gaussian Blur”. Apply a 2px Gaussian blur effect to it. After that, change the blending mode of this layer to “Multiply” and reduce its opacity to 75%.
Book App Icon

Step 14

Select the pen tool and draw the following shape above the pages with a black fill color.
Book App Icon

Change its blending mode to “Multiply” and set its opacity to 50%. You can blur it using a 1-2px Gaussian blur effect.
Book App Icon

Step 15

We’ll apply some shading over the pages now. Duplicate the lower most page layer and place it above the rest of the pages but below the clipping mask. Apply the following gradient on it using the gradient tool.
Book App Icon

Change the blending mode of gradient layer to “Multiply” with 75% opacity.
Book App Icon

Step 16

Next, we’ll apply the leather texture over the book. Load the texture file in Illustrator, copy, and paste it in your document above the rest of the layers. Resize it using the selection tool (“V”). Now, apply book’s front layer clipping mask to it using the same technique used before in step 12.
Book App Icon

Change the blending mode of texture to “Soft light” and set opacity to 60%.
Book App Icon

Step 17

Duplicate the front layer and place it above the texture. Now, apply the following gradient on it. Change its blending mode to “Soft light” and set opacity to 50%.
Book App Icon

Step 18

Now, apply leather texture and the following gradient over the binding layer. Change the blending mode of the gradient layer to “Overlay” and set its opacity to 40%.
Book App Icon

Step 19

Select the pen tool to draw the curve shown below. Set the fill color to “none” and pick #5E5D5B as your stroke color (Stroke weight: 4pt).
Book App Icon

Select the stroke and go to “Object” > “Expand Appearance”. Now, select the stroke layer and double-click the contents in the appearance panel (Shift + F6). Select the “Fill” attribute and click on the “Duplicate Selected Item” icon present at the bottom of the appearance panel. Apply the following gradient to this new fill attribute. Change its blending mode to “Color Dodge” with 25% opacity.
Book App Icon
Duplicate the current shape; remove the gradient attribute from the appearance panel. Place it below the original layer and drag a bit downwards. Now, duplicate both of these curves and position them as shown below. Once you are done, apply a clipping mask to confine them to the binding shape.
Book App Icon

Step 20

Next, we’ll apply a few stitches to the book cover. Draw a line using the pen tool with a 2pt black stroke. Apply the following settings within the stroke panel to get the same stitched effect that I employed.
Book App Icon

Duplicate this layer, change the stroke color of the original layer to white, and drag it 1 step towards the left. Decrease its opacity to 75%. Now, select both the black and white strokes, duplicate them, and position them at the junction of the binding and the front cover as shown below.
Book App Icon

Step 21

Select the front cover layer and go to “Object” > “Path” > “Offset Path”. Apply the following settings here. Set the fill to “None” for this new shape and give it a 2pt dashed stroke with the same settings as explained in step 20. After that, go to “Object” > “Expand Appearance”. Now, select the eraser tool and erase the stitches from the area shown below.
Book App Icon

Select the stitches and go to “Effect” > “Stylize” > “Drop Shadow”. Apply the following settings here.
Book App Icon

Step 22

Paste your logo onto a new layer and decrease its height using the selection tool (“V”). Duplicate it and apply the following gradient to it. Change the blending mode of this new gradient layer to “Screen” with 30% opacity.
22

Book App Icon

Step 23

Our book app icon is almost ready; now we’ll make its shadow. Draw a thin rectangle below the rest of the layers using the rounded rectangle tool with a pure black fill color.
Book App Icon

Step 24

Select the rectangle and apply a 3px Gaussian blur effect to it.
24

Final result:

Book App Icon

That’s it guys. I Hope you enjoyed the tutorial and learned something useful. Let us know what you think!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • CodinCat

    Wow..
    It looks really sophisticated, delicate, and….. difficult for me,
    but you created it just like eating pie.
    hmm…it’s time to learn illustrator.

    • Anum

      Glad you liked the tutorial, Thanks

  • Andries

    Great, great tut, thnx. I think only that a better drop shadow with ‘multiply’ setting in the final would be more convincable and my mind keeps funny thinking that perspective isn’t correct. I would tweak the top lines of the book a little closer to each other so perspective is more natural.

  • Mike Henden

    Really nice little piece of skeuomorphism here… thx for the tut!!

  • Wynne Hunkler

    What Mike said …

  • Anum

    Thanks everyone…

  • Anonymous

    Great tutorial. Thumb up!