Design an iPhone Icon for Notes Application in Photoshop

In this tutorial, I will show you how to draw a notes icon for an iPhone app using Photoshop. We will combine the power of Layer Styles and traditional drawing to achieve a realistic result.

Preview

Here’s a preview of icon we are going to make.

Tutorial Resources

In this tutorial, we will use resources below.

• Wood and Knot Textures from VandelayPremier.
• 26 Repeatable Pixel Pattern from PSDfreemium

Step 1

Let’s start by making a new file with size 550 px × 550 px. Acivate Rounded Rectangle tool. In the option Bar, set its Radius to 90 px. Click and drag on the canvas to draw a rounded rectangle with size 512 px x 512 px. Make sure the color is #efcb79.

Step 2

Grab Wood and Knot Textures from VandelayPremier. Place the texture on top of the shape and reduce its Opacity to 60%.

Step 3

Alt-drag vector mask from icon base which we have made on Step 1.

Add Layer Style Inner Shadow, Inner Glow, and Gradient Overlay with following settings.

Below is the result after the Layer Styles are added.

Step 4

Paste another wood and knot texture. We are going to use this texture on the lower base. This time rotate the texture a bit, about 10°. We need rotate it so the texture match the wood grain direction.

Step 5

Reduce its Opacity to 50%.

Step 6

Alt-drag the vector mask from the main base layer. Copy and paste the path to duplicate it. Move it up a few pixels and set its path mode to Subtract. By now, we should have extruded the base and get a three dimentional shape.

Below, you can see the result in 100% view.

Step 7

Apply Layer Styles Inner Shadow, Inner Glow, and Gradient Overlay.

Here’s the result. We now have darken the lower base.

Step 8

Ctrl-click lower base and make new layer. Click Edit > Stroke. Select black for its color with Width: 1 px.

Step 9

Soften the stroke line by applying Gaussian Blur filter, Filter > Blur > Gaussian Blur.

Step 10

Activate the Eraser tool. Select a big brush with low Opacity and 0% Hardness. Erase some of the line.

Step 11

Repeat previous step, but this time use white to add highlight.

Erase some of the line using Eraser tool.

Step 12: Add Papers

Draw smaller rounded rectangle shape with radius 60 px. Set its color to #f0e9d9.

Apply Layer Style Inner Glow, Pattern Overlay, and Stroke with following setting.

For the pattern, use one of the pixel pattern from PSDfreemium.

Step 13

Ctrl-click paper shape to make new selection based on its shape. Make new layer under the paper. Fill selection with black.

Step 14

Soften the shadow by applying Gaussian Blur filter.

Step 15

Click Edit > Transform > Warp. Click and drag the boxes to distort shadow shape. We want the shadow to be as natural as possible.

Once you are happy with the shape, hit Enter to accept the transformation.

Step 16

Ctrl-click the paper, make layer, and fill selection with black. Soften it using Gaussian Blur, this time use a bigger Radius.

Reduce its Opacity.

Step 17

Activate the paper shape then hit Ctrl + J to duplicate it. Hit Ctrl + T to transform the new paper. Drag outside the bounding box to rotate the paper a bit.

Step 18

Ctrl-click paper and make new layer underneath it, right above the previous paper. hit Ctrl + Alt + G to convert the layer to Clipping Mask. Fill selection with black.

Step 19

Deselect (Ctrl + D). Soften the shadow by applying Gaussian Blur filter.

Step 20

Keep repeating the same process to add more pages. Duplicate topmost page. Rotate it a bit or modify its lower points. Add new layer underneath it and convert it to Clipping Mask. Paint page shadow. In animation below, you can see progress I did in adding more pages.

Step 21: Add Curled Pages

Duplicate the topmost page. Activate Pen tool. Click its lower right corner to ad new point. Move the new point up to modify the paper shape. We are going to make it not so perfect and make it more realistic. Don’t forget to add some shadow behind the page.

Step 22

Duplicate page and add below path on its corner. Set its Path mode to Intersect. We are going to use this shape as a page curl. Remove active Layer Style and apply only Inner Glow.

Step 23

Make a new layer and convert it to Clipping Mask (Ctrl + Alt + G). Activate Brush tool with low Opacity and 0% Hardness. Paint black for subtle shadow on the shape edge and white for highlight on center of the shape.

Step 24

Make a new layer under the page. Paint a bigger shadow to make it appear more realistic.

So far, this is our result.

Step 25

Let’s add more page curl. Duplicate last page and modify its corner. Let’s move the corner up even further to add bigger page curl.

Step 26

Maker new layer behind the page and as usual paint its shadow.

Step 27

Duplicate page and add another path on its corner. Set its mode to Intersect. Add Layer Style Inner Glow.

Step 28

Ctrl-click shape. Make a new layer above the shape. Click Edit > Stroke with color #c9c4b6.

Step 29

Erase some of the line. Use soft Eraser tool to erase some of the line.

Step 30

Add a new layer above the shape and convert it to Clipping Mask. Paint shadow and highlight on the shape to add lighting and make it appear more realistic.

Step 31

Make new layer under the page curl and paint subtle shadow on the page.

Step 32: Add More Shadow Between Pages

Let’s work on the details. Make a new layer, draw an ellipse selection, fill it with black.

Step 33

Soften the line by applying Gaussian Blur filter.

Step 34

Place the blurry lines between pages by changing its layer order on th Layers Panel.

Step 35

Repeat this to other pages.

Step 36

Below, you can see that the pages stack now appears more realistic. We can see depth between each page.

Step 37: Add Torn Page

Duplicate topmost page and cut it by adding a path with path mode Intersect.

Step 38

Make new layer and convert it to Clipping Mask. paint subtle shadow on the page.

Step 39

Add new layer behind the page and paint some shadows.

Step 40

Use Pen tool to manually draw page curl. Use the same color as the other page.

Add Layer Style Inner Glow, Pattern Overlay, and Stroke.

Step 41

Add a new layer and paint curl shadow on its page.

Step 42: Add Paper Clip

Let’s draw a black rectangle shape. Add Gradient Overlay.

Step 43

Add small rectangle and two triangles paths under the shape. Set its mode to Subtract.

Step 44

Activate the Pen tool and click both vertical sides to add two new points.

Step 45

Alt-click to convert both points to sharp points. Select the points using Direct Selection tool and move them 3 px to the left.

Below is the result in 100%.

Step 46

Make new layer and convert it to Clipping Mask (Ctrl + Alt + G). Paint upper shape with black to add shadow. Add another layer and paint some highlights.

Step 47

Draw a black polygon shape using Pen tool. See picture below for reference. Apply Layer Style Gradient Overlay.

Step 48

Repeat the previous step to draw another polygon shape on each side of the previous shape.

Step 49

Make new layer and paint shadow behind the shapes.

Below is the result in 100% magnification.

Step 50

Activate the Pen tool and draw the paper clip handle. Use #d6cfc7 for its color. Add Layer Style Inner Glow and Bevel and Emboss.

Step 51

Ctrl-click the shape to make new selection based on its shape. Click Select > modify > Contract 1 px.

Step 52

Make new layer and fill selection with black.

Step 53

Deselect (Ctrl + D). Apply Gaussian Blur. Erase unneeded shadow.

Step 54

Again, ctrl-click the shape. Make a new layer behind the shape. Click Edit > Fill, Use: black.

Step 55

Soften the shadow by applying Gaussian Blur.

Move the selection 5 px to the left.

Step 56

Erase upper shadow using soft Eraser tool. Reduce layer’s Opacity if needed.

Step 57

Paint another shadow behind the shape.

Step 58

We’ve only finished drawing front face of the paper clip. We still need to work on the back. Draw a black shape and place it behind the papers.

Step 59

We’re done drawing the paper clip. We can just leave it that way, but it’s too perfect. Let’s make it more realistic by rotating it a bit. Select the paper clip, hit Ctrl + T, and click-drag to rotate it.

Step 60: Scribble

Add some random scribbles on the paper. You can simply write and draw something using the Brush tool.

Step 61: Add Application Title

Add the application name. In this tutorial, I use simple text and apply some Layer Styles.

Step 62

Make sure to place the text behind the paper clip.

Step 63

To make it appears more realistic, let’s rotate the name too.

Step 64

For final touch, I also add a line and a circle shape.

Final Result

Here is the final icon. I hope you learn some new techniques from this tutorial. If you have any question feel free to ask it in the comments below.

Download the PSD file for the icon.

About the Author:

Mohammad Jeprie is an author, blogger, and graphic designer from Indonesia. He knows some Photoshop techniques and loves sharing his knowledge with others. He runs PSDfreemium and DesainDigital where he regularly shares free design resources and some tutorials.

Follow Mohammad Jeprie: Website | Twitter

Published May 14th, 2012 by Mohammad Jeprie