Design a mobile application in Photoshop

In this tutorial, I will show you how to create a design for a notebook application.

Final image:

Lesson resources:

Step 1

Create a new document 640×960 pixels in size, with a resolution of 326.

Step 2

Create a group and name it “Background”. Open the image of the wooden floor and transfer it to the main document. Reduce the layer with the floor, mirror it (Ctrl + T) and apply layer styles Color overlay and Gradient overlay:

Step 3

Create a new group and name it “Header”. Tool Rectangle (Rectangle Tool) (U) Draw a shape like in the screenshot. Activate the tool Horizontal text (Horizontal Type Tool) (T), select the font Font to Myriad Pro, bold, size 5.32 pt and write the word “iPhone” in the upper left corner.

Change the font size to 6.21 pt and write “13:15 PM” in the center of the document. Tool Rectangle (Rectangle Tool) (U) in the upper right corner of the document draw the shape of the battery.

Step 4

Create a new group called “Left Button”. Tool Pen (Pen Tool) (P) Draw a shape like in the screenshot. For the shape, use color # 131313. Decrease the parameter Fill (Fill) for this shape up to 10% and apply some layer styles Emboss / Bevel and Gradient overlay.

Tool Pen (Pen Tool) (P) Draw another one above the previous one. For the second shape, use color # 776855 and also apply layer styles: Shadow, Inner Glow, Gradient Overlay, Stroke.

Step 5

Tool Horizontal text (Horizontal Type Tool) (T) write the word “Back”. To write text, use the font Font Arial, Regular type, and apply styles to this layer as well. Emboss / Bevel:

Step 6

Repeat steps 4 and 5 to draw additional buttons:

Step 7

Create a new group called “Dots”. Tool Ellipse (Ellipse Tool) (U) and draw four black circles (# 000000). Reduce the Fill parameter to 50% and apply layer styles Shadow.

Also, draw another circle, smaller, white (#ffffff) and also apply layer styles. Shadow:

Step 8

Create a new group called “Body”. Tool Rounded Rectangle (Rounded Rectangle Tool) (U) with a radius of 2 pixels, draw a shape using the color # e8e5e5. Apply layer styles to the shape: Shadow, Inner Glow, Stroke.

Step 9

Tool Rounded Rectangle (Rounded Rectangle Tool) (U) Draw a shape slightly larger than in the previous step. Use # e9e5e6 for painting, and then apply layer styles: Internal Glow, Stroke.

Step 10

Tool Rounded Rectangle (Rounded Rectangle Tool) (U) Draw a larger shape than in the previous step. To paint, use color # f1f1f1 and apply layer styles: Internal glow, Stroke.

Step 11

Create a new group and name it “Lines”, select the tool Rectangle (Rectangle Tool) (U) and color # d1d1d1 draw small horizontal lines. Now, with the same tool, draw large horizontal lines with the color # 7e7e7e.

Step 12

With the tool Rectangle (Rectangle Tool) (U) draw vertical lines using color # b2b2b2. Also, draw two lines with the color # e73232 on the left and right side:

Step 13

Select the layer with the last sheet of paper and hold down the Ctrl key and select the “Lines Group” group. Duplicate the group and convert it into a smart object. Tool Lasso (Lasso Tool) (L) draw a selection as shown in the screenshot and add a layer mask:

Step 14

To the smart object created in the previous step, apply the command Deformation (Edit – Transform – Warp) (Edit> Transform> Warp). Distort the shape as in the screenshot. Small hard brush and paint over the area under the smart object.

Tool Rectangular areadischarge with the Shift key pressed, load the selection as shown in the screenshot and delete the selected area. Reduce the opacity to 25%.

Step 15

Let’s work with the top of the smart object. Choose a small brush and black color (# 000000), create a new layer, add to it clipping mask and draw two lines as in the first screenshot. Reduce the layer opacity to 10%.

Again create a new layer with a clipping mask and a brush with white color (#ffffff) paint over the right side of the smart object.

Step 16

Create a new group called “Margin”. Using the Rounded Rectangle Tool (U) with a radius of 4 pixels, draw a shape like in the screenshot. Use # e0dcdc for drawing, and then apply layer styles: Embossing / Bevel, Stroke.

Step 17

Choose a tool Arbitrary shape (Custom Shape Tool) (U) and from the list of shapes, select the shape Circle Frame. Draw the shape with # c4c4c4 and apply layer styles to it. Reduce the Fill parameter to 65% and apply layer styles. Tool Ellipse (Ellipse Tool) (U) draw a small circle (#ffffff) in the center of the Circle Frame shape and reduce the Fill setting to 65%:

Step 18

Create a group called “Slider” and tool Rectangle with rounded edges (Rounded Rectangle Tool) (U) with a radius of 2 pixels, draw a shape, as in the screenshot. Use # 272727 for drawing, and then change the blending mode to Overlap (Overlay).
Tool Rounded Rectangle (Rounded Rectangle Tool) (U) draw another shape similar to the first one (use # 323232 color for drawing).

Step 19

Create a new group and name it “Text”. Tool Horizontal text (Horizontal Type Tool) (T) Font to Myriad Pro font size 7. 97 pt write text.

Step 20

Tool Rounded Rectangle (Rounded Rectangle Tool) (U) with a radius of 2 pixels, draw a shape, as in the screenshot. Place this shape over the word “eat breakfast and take the trash out”.

Step 21

Create a group called “Nail”. Tool Pen (Pen Tool) draw a shape as shown in the screenshot and fill it with # 646466 color. Then, using a small black brush (# 000000), draw a stroke on the right side of the “nail” layer. Add a clipping mask to this layer and lower the opacity to 43%.

Draw another stroke with a small brush with color # 8e8e90. Tool Ellipse (Ellipse Tool) (U) draw a small ellipse using color # 838390 and apply a filter Gaussian blur (Filter – Blur – Gaussian Blur) (Filter> Blur> Gaussian Blur). Use a 2px radius for blurring. Duplicate this layer (Ctrl + J), reduce and blend with the edge.

Step 22

Duplicate the Nails Group four times and place duplicates like in the screenshot:

Final image:

Like this post? Please share to your friends: