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.
Here’s a preview of icon we are going to make.
In this tutorial, we will use resources below.
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.
Grab Wood and Knot Textures from VandelayPremier. Place the texture on top of the shape and reduce its Opacity to 60%.
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.
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.
Reduce its Opacity to 50%.
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.
Apply Layer Styles Inner Shadow, Inner Glow, and Gradient Overlay.
Here’s the result. We now have darken the lower base.
Ctrl-click lower base and make new layer. Click Edit > Stroke. Select black for its color with Width: 1 px.
Soften the stroke line by applying Gaussian Blur filter, Filter > Blur > Gaussian Blur.
Activate the Eraser tool. Select a big brush with low Opacity and 0% Hardness. Erase some of the line.
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.
Ctrl-click paper shape to make new selection based on its shape. Make new layer under the paper. Fill selection with black.
Soften the shadow by applying Gaussian Blur filter.
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.
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.
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.
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.
Deselect (Ctrl + D). Soften the shadow by applying Gaussian Blur filter.
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.
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.
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.
Make a new layer under the page. Paint a bigger shadow to make it appear more realistic.
So far, this is our result.
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.
Maker new layer behind the page and as usual paint its shadow.
Duplicate page and add another path on its corner. Set its mode to Intersect. Add Layer Style Inner Glow.
Ctrl-click shape. Make a new layer above the shape. Click Edit > Stroke with color #c9c4b6.
Erase some of the line. Use soft Eraser tool to erase some of the line.
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.
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.
Soften the line by applying Gaussian Blur filter.
Place the blurry lines between pages by changing its layer order on th Layers Panel.
Repeat this to other pages.
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.
Make new layer and convert it to Clipping Mask. paint subtle shadow on the page.
Add new layer behind the page and paint some shadows.
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.
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.
Add small rectangle and two triangles paths under the shape. Set its mode to Subtract.
Activate the Pen tool and click both vertical sides to add two new points.
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%.
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.
Draw a black polygon shape using Pen tool. See picture below for reference. Apply Layer Style Gradient Overlay.
Repeat the previous step to draw another polygon shape on each side of the previous shape.
Make new layer and paint shadow behind the shapes.
Below is the result in 100% magnification.
Activate the Pen tool and draw the paper clip handle. Use #d6cfc7 for its color. Add Layer Style Inner Glow and Bevel and Emboss.
Ctrl-click the shape to make new selection based on its shape. Click Select > modify > Contract 1 px.
Make new layer and fill selection with black.
Deselect (Ctrl + D). Apply Gaussian Blur. Erase unneeded shadow.
Again, ctrl-click the shape. Make a new layer behind the shape. Click Edit > Fill, Use: black.
Soften the shadow by applying Gaussian Blur.
Move the selection 5 px to the left.
Erase upper shadow using soft Eraser tool. Reduce layer’s Opacity if needed.
Paint another shadow behind the shape.
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.
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.
Make sure to place the text behind the paper clip.
To make it appears more realistic, let’s rotate the name too.
For final touch, I also add a line and a circle shape.
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.
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.
Published May 14th, 2012 by Mohammad Jeprie