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.

Design Notes Icon for an iPhone Application in Photoshop

Tutorial Resources

In this tutorial, we will use resources below.

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.

Design Notes Icon for an iPhone Application in Photoshop

Step 2

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


Design Notes Icon for an iPhone Application in Photoshop

Step 3

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

Design Notes Icon for an iPhone Application in Photoshop

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

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Below is the result after the Layer Styles are added.

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

Step 5

Reduce its Opacity to 50%.

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

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

Design Notes Icon for an iPhone Application in Photoshop

Step 7

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

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

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

Design Notes Icon for an iPhone Application in Photoshop

Step 8

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

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Step 9

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

Design Notes Icon for an iPhone Application in Photoshop

Step 10

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

Design Notes Icon for an iPhone Application in Photoshop

Step 11

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

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Erase some of the line using Eraser tool.

Design Notes Icon for an iPhone Application in Photoshop

Step 12: Add Papers

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

Design Notes Icon for an iPhone Application in Photoshop

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

Design Notes Icon for an iPhone Application in Photoshop

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

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Step 13

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

Design Notes Icon for an iPhone Application in Photoshop

Step 14

Soften the shadow by applying Gaussian Blur filter.

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

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

Design Notes Icon for an iPhone Application in Photoshop

Step 16

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

Design Notes Icon for an iPhone Application in Photoshop

Reduce its Opacity.

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

Step 19

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

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

Step 24

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

Design Notes Icon for an iPhone Application in Photoshop

So far, this is our result.

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

Step 26

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

Design Notes Icon for an iPhone Application in Photoshop

Step 27

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

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Step 28

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

Design Notes Icon for an iPhone Application in Photoshop

Step 29

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

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

Step 31

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

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

Step 33

Soften the line by applying Gaussian Blur filter.

Design Notes Icon for an iPhone Application in Photoshop

Step 34

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

Design Notes Icon for an iPhone Application in Photoshop

Step 35

Repeat this to other pages.

Design Notes Icon for an iPhone Application in Photoshop

Step 36

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

Design Notes Icon for an iPhone Application in Photoshop

Step 37: Add Torn Page

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

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Step 38

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

Design Notes Icon for an iPhone Application in Photoshop

Step 39

Add new layer behind the page and paint some shadows.

Design Notes Icon for an iPhone Application in Photoshop

Step 40

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

Design Notes Icon for an iPhone Application in Photoshop

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

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Step 41

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

Design Notes Icon for an iPhone Application in Photoshop

Step 42: Add Paper Clip

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

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Step 43

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

Design Notes Icon for an iPhone Application in Photoshop

Step 44

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

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

Below is the result in 100%.

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

Step 47

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

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Step 48

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

Design Notes Icon for an iPhone Application in Photoshop

Step 49

Make new layer and paint shadow behind the shapes.

Design Notes Icon for an iPhone Application in Photoshop

Below is the result in 100% magnification.

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Step 51

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

Design Notes Icon for an iPhone Application in Photoshop

Step 52

Make new layer and fill selection with black.

Design Notes Icon for an iPhone Application in Photoshop

Step 53

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

Design Notes Icon for an iPhone Application in Photoshop

Step 54

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

Design Notes Icon for an iPhone Application in Photoshop

Step 55

Soften the shadow by applying Gaussian Blur.

Design Notes Icon for an iPhone Application in Photoshop

Move the selection 5 px to the left.

Design Notes Icon for an iPhone Application in Photoshop

Step 56

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

Design Notes Icon for an iPhone Application in Photoshop

Step 57

Paint another shadow behind the shape.

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Step 60: Scribble

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

Design Notes Icon for an iPhone Application in Photoshop

Step 61: Add Application Title

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

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Design Notes Icon for an iPhone Application in Photoshop

Step 62

Make sure to place the text behind the paper clip.

Design Notes Icon for an iPhone Application in Photoshop

Step 63

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

Design Notes Icon for an iPhone Application in Photoshop

Step 64

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

Design Notes Icon for an iPhone Application in Photoshop

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.

Design Notes Icon for an iPhone Application in Photoshop

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

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

4 Responses

Comments are now closed on this post.

  • Awesome!!!
    Clean and professional. Thanks for sharing, I will try too.

  • aledesign.it, May 15, 2012

    Wonderful tutorial..so nice this icon for app..Thanks for sharing..Useful and very professional. Thanks…thanks

  • All Web Design Info, May 15, 2012

    Great Post! which font you are using?

  • muhammad godc, May 20, 2012

    nice tutorial, thanks for sharing ..

Close