Create an application interface for iPhone in Photoshop

Photoshop CS6 is more powerful editing tool than its predecessors. In this tutorial, I will show you how to create an iPhone application interface with the original iPhone resolution.

Final image:

Lesson resources:

Step 1

Create a new document with a size of 320×480 pixels.

Step 2

In this step we will create a background. In Photoshop CS6, there is an easy way to create vector shapes — we’ll use it.

Create a new layer called “Background” (Shift + Ctrl + N) and instrument Rectangle (Rectangle Tool) (R) and on the property bar at the top of the screen, select the shape mode (Shape).

Now click on the button next to the Shapes button to open the window. Fill type (Shape Fill Type). In the list that opens, select Gradient, set the parameters as shown in the screenshot. For gradient, use colors # 3F4042 and # 303133.

Click the mouse anywhere in the document to open a window where you can set the parameters for the future rectangle. Set it to 00x700px and click OK.

Highlight the entire document. (Ctrl + A), select the Move Tool (V Tool) (V) and on the property bar at the top of the screen, click the Align Horizontal Centers button, and then click Align bottom edge (Align Bottom Edges).

Double click on the “Background” layer and apply the Gradient fill fill layer. Make sure that the Dither parameter is enabled.

Step 3

Open the statusbar.psd file and import it into your Status Bar workgroup. Using the previous alignment method: select the entire document. (Ctrl + A), select the Move Tool (Move Tool) (V) and on the property bar at the top of the screen, click Align Horizontal Centers, and then click Align bottom edge (Align Bottom Edges).

Step 4

Under the Status Bar group, create a group called Navigation Bar. Choose a tool Rounded Rectangle (Rounded Rectangle Tool) (U) and on the property bar, select the parameters shown in the screenshot.

For gradient, use colors # 5F8F1D and # 99B83D. Click anywhere in the document to open a pop-up window for setting the future rectangle.

Align the center of the layer horizontally and vertically:

Tool Rectangle (Rectangle Tool) (U) Draw a rectangular shape. To fill, use the parameter Not colors (No color) from the Shape Fill Type panel.

Tool Outline selection (Path Selection Tool) (A) Create a shape from the rectangle you’ve just drawn. Copy the shape (Ctrl + C), go to the “Navigation Bar” layer and paste it (Ctrl + V). Now this shape is superimposed on the “Navigation Bar” layer.

Without changing the instrument Outline selection (Path Selection Tool) (A) On the property bar, select the Subtract Front Shape option.

Click the Path Operations button on the property bar again and select Merge Shape Components.

Using the tool Arrow (Direct Selection Tool) (A) select the bottom two points and move them until their shape height is 43 pixels.

Apply some layer styles to the “Navigation Bar” layer:

Step 5

Tool Rounded Rectangle (Rounded Rectangle Tool) (U) draw a shape using the settings you see in the screenshot. To fill the shape, use the Uniform fill (Solid Color) parameter from the Shape Fill Type parameter. Name this layer “Settings Bg”.

Apply some layer styles:

Go to the “Settings Bg” layer and align it vertically with the center of the “Nav Bg” layer, and align the horizontal by 6 pixels from the right edge of the document.

Open the icons.psd file and drag the “Settings” layer to the working document. Align the icon horizontally and vertically with the center of the layer.
“Settings Bg”.

Apply layer style Shadow (Drop Shadow):

Step 6

Tool Rounded Rectangle (Rounded Rectangle Tool) (U) Draw a shape with the parameters shown in the screenshot. To fill the shape, use a solid fill (Solid Color) from the Shape Fill Type settings window. Name this layer “Back Bg”.

Tool Add anchor point (Add Anchor Point Tool) add one control point on the left side of the rectangle and 14 pixels from the edge.

Use the Convert Point Tool tool to click on any control point.

Tool Arrow (Direct Selection Tool) (A) Move the control point 10 pixels to the left.

Tool Arrow (Direct Selection Tool) (A) Select the two reference points that are highlighted in red in the screenshot and move them 1 pixel to the left. Use the Convert Point Tool tool to click on each of the two control points.

Align the shape vertically with the center of the “Nav Bg” layer and also align horizontally 6 pixels from the left edge.

Step 7

Right-click on the “Settings Bg” layer and select Copy layer styles (Copy Layer Style). Now right-click on the “Back Bg” layer and select Paste layer styles (Paste Layer Style).

Add text to the button using the parameters shown in the screenshot. I used the font Helvetica Neue. Align the text in the center of the shape and copy the layer styles from the “Settings” layer onto it.

Also add text to the navigation bar using the parameters from the screenshot. Align the text in the center of the navigation bar.

Step 8

Create a new group (Ctrl + G) under the “Navigation Bar” group and name it “Position”. Choose a tool Rectangle (Rectangle Tool) (U), set the parameters for it, as shown in the screenshot and click anywhere in the document. Use colors # 2E2F30 and # 494A4C. Name this layer “Position Bg”.

Place this shape under the navigation bar. Make sure there is a 1 pixel gap between them. Align the shape in the center of the document.

Apply layer styles to the shape layer:

Step 9

Choose a tool Rounded Rectangle (Rounded Rectangle Tool) (U) with the values ​​shown in the screenshot. The radius value is 50 pixels.

Name the layer “Position Empty” and align it horizontally and vertically relative to the center of the layer “Position Bg”.

Apply layer styles:

Choose a tool Rounded Rectangle (Rounded Rectangle Tool) (U) and set its values, which are shown in the screenshot. Click anywhere in the document. For the gradient, use colors # 85AD2A, # A0D028, and # B6D028.

For a radius, set the value to 50 pixels. Name this layer “Position Full”.

Align the shape as shown in the screenshot and make sure that there is a gap of 2 pixels on all sides between the shape and the “Position Empty” layer.

Apply layer styles to the shape:

Step 10

Choose a tool Ellipse ( Ellipse Tool) (U), set the parameters for it, as shown in the screenshot and click anywhere in the document. For gradient, use colors # 444547 and # 5C5E61. Name this layer “Handle”.

Align the shape to the right edge of the “Position Full” layer.

Apply layer styles:

Select tool again Ellipse (Ellipse Tool) (U), set its parameters as shown in the screenshot and click anywhere in the document. For gradient, use colors # 636669 and # 38393B. Name this layer “Handle Circle”.

Align the shape in the center of the “Handle” layer.

On both sides of the slider write time. For writing text, use the font Helvetica Neue, Bold, size 10 points and color # B2B2B2. Place the text as shown in the screenshot:

Step 11

Create a new group and name it “Playback Controls”. Tool Ellipse (Ellipse Tool) (U) Draw a circle with a diameter of 50×50 pixels. Name this layer “Play Bg”.

Open the “Position” group, right-click on the “Handle” layer and select the item from the menu Copy Attributes Shapes (Copy Shape Attributes).

Return to the “Playback Controls” group, right-click on the “Play Bg” layer and select the item from the menu Paste shape attributes (Paste Shape Attributes) is a new feature in Photoshop CS6. So, instead of exposing the same attributes several times, you can copy them, and then paste them onto any shape.

Align the layer to the center of the document, and vertically 20 pixels below the “Position Bg” layer.

Apply layer styles:

Step 12

Right-click on the “Play Bg” layer and select Duplicate layer (Duplicate Layer). New layer name “Fast Backward Bg”.

Tool Outline selection (Path Selection Tool) (A) Click on the “Fast Backward Bg” layer and change the width and height values ​​to 34×34 pixels.

Align this layer to the center of the “Play Bg” layer, and horizontally align 8 pixels to the left.

Duplicate the “Fast Backward Bg” layer (Ctrl + J) and name the duplicate “Fast Forward Bg”. Align the layer to the center of the “Play Bg” layer, and horizontally align it to the right side.

Step 13

Draw a round shape with the parameters shown in the screenshot. For gradient, use colors 46484A and # 2C2D2E. Make sure the newly created layer is below all layers in the Playback Controls group.

Name the layer “Playback Bg” and align it horizontally and vertically with the layer “Play Bg”.

Duplicate the “Playback Bg” layer (Ctrl + J) and reduce the size to 48×48 pixels. To do this, use the method that was used in step 12. Align the layer to the center of the “Fast Backward Bg” layer.

Duplicate the layer again. (Ctrl + J) and center it on the “Fast Forward Bg” layer.

Import the “Fast Backward”, “Play” and “Fast Forward” layers from the icons.psd file (or find these icons yourself). Place the icons on the buttons as shown in the screenshot:

Select three layers with icons: hold down the Ctrl key and click on each of these layers. Reduce the opacity of these layers to 85%.

Import the “Speaker” and “Repeat” layers from the icons.psd file or find similar icons yourself. Place the icons as shown in the screenshot:

Apply a gradient to the imported icons. Tool Outline selection (Path Selection Tool) (A) Select the “Speaker” layer and set the parameters as in the screenshot. For gradient, use colors # 6B6C70 and # 797B80.

Copy the attributes from the “Speaker” layer, and then paste them onto the “Repeat” icon.

Add layers to the layers with the Speaker and Repeat icons:

Step 14

In this step we will put an album cover in our design. After that, we convert it into a smart object and reduce the size of the smart object to 50%. This must be done, because in the final step of this lesson we will change the resolution of the file. Thus, we will not lose the quality of the bitmap after reducing the size.

Open the albumcover-02.jpg image and place it in our document.

Transform layer at smart-an object (Layer – Smart Objects – Convert to Smart Object) (Layer> Smart Objects> Convert to Smart Object). Now transform the layer (Ctrl + T). Reduce its size to 50% and name this layer “Album Cover Center”.

Align the horizontal layer on the center of the document and vertically lower it below the layer “Play Bg” by 20 pixels.

Tool Rounded Rectangle (Rounded Rectangle Tool) (U) Draw a shape with the parameters shown in the screenshot. Set the size to 180×180 pixels. In the Shape Fill Type window, set the No Color parameter and set the radius to 3 pixels.

Align the shape in the center of the album cover image.

Now apply the shape to the album cover image by dragging the mouse from the thumbnail of the layer with a rounded rectangle to the thumbnail of the layer with the cover while holding the keys Ctrl + Alt. After the copy is created, delete the layer with the rounded rectangle, as it is no longer needed.

Step 15

Open the albumcover-01.jpg image and drag it to our document. Convert this layer to a smart object and reduce its size to 50%. Align this layer vertically with the “Album Cover Center” layer and horizontally 40 pixels to the left. Name this layer “Album Cover Left”.

Tool Rounded Rectangle (Rounded Rectangle Tool) (U) Draw a shape with the parameters shown in the screenshot. Set the size of the figure 160×160 pixels. In the Shape Fill Type window, set the No Color parameter and set the radius to 3 pixels.

Copy the shape of the rounded rectangle onto the “Album Cover Left” layer as described above and center it on the layer. After that, remove the layer with the shape.

Open the albumcover-03.jpg image and place it in our document. Copy it as described above, but this time align the image with the right side.

Step 16

Apply layer styles to the center of the cover:

Copy layer styles from the center of the cover and paste them onto the other two covers. Now, with the Shift key pressed, select the layers with the left and right sides of the cover and set the Fill parameter to 50%.

Tool Text (T) write the name of the song being played. Place the text a few pixels below the center of the cover.

Add another line with the text in which the author of the song will be listed. Align both lines with the text in the center.

Step 18

Using the tool Rounded Rectangle (Rectangle Tool) (U) Draw a shape with the parameters shown in the screenshot. For gradient, use colors # 292A2B and # 38393B.

Align the shape on the bottom left of the document.

Tool Add anchor point (Add Anchor Point Tool) add
two points with a small distance from each other, as shown in the screenshot.

Select two anchor points and move them up 6 pixels.

Tool Arrow (Direct Selection Tool) (A) move the points as shown in the screenshot:

Step 19

Duplicate the tabbed panel layer. (Ctrl + J) and flip it horizontally (Editing – Transformiro– Flip Horizontal / Edit> Transform Path> Flip Horizontal).

Move the duplicate to the bottom right corner of the document. Make sure there is no gap between the two figures.

Select both layers, right click on them and select Combine shapes (Merge Shapes).

As a result, this figure should turn out. As you can see, a vertical line runs along the center of the figure. This means that two shapes on one layer are not fully merged.

Tool Outline selection (Path Selection Tool) (A) click on the layer with the figure, then click on the button Operations with path (path operations) on the toolbar’s toolbar and select Merge Shape Components. Now the two figures are fully integrated. Name this layer “Tab Bar Bg”.

With active tool Arrow (Direct Selection) (A) it is noticeable that there are some unnecessary pivot points that were created during the union of the shapes. Always try to do so that when creating a curve there are no unnecessary reference points.

Delete unwanted anchor points with the Delete Anchor Point Tool tool by clicking these two points.

Apply styles to the “Tab Bar Bg” layer:

Step 20

In this step, we will create guides that will help align the tab bar.

Tool Rectangular Selection (Rectangular Marquee Tool) (M) draw a selection 60 pixels wide. Start drawing from the left side of the document.

Now pull the guide out of the vertical ruler and place it on the right edge of the selection. Enable feature Snapping to guides (View – Snap to – Guides) (View> Snap To> Guides).

Repeat the previous method of adding guides. Install guides with the distance shown in the screenshot.

Pull out the horizontal guides from the horizontal ruler and position them on the document with the distance shown in the screenshot:

Step 21

From the icons.psd file, drag the “Home” layer.

Tool Rectangular Selection (Rectangular Marquee Tool) (M) draw the shape:

Use the Move Tool (V) to click on the Align Vertical Centers and Align centers horizontally (Align Horizontal Centers).

Write the word “Home” using the parameters shown in the screenshot:

Align text vertically to the bottom of the guide and horizontally to the center of the icon.

Step 22

Repeat step 21, adding other icons and text (Favorites, Playlists and Search).

Step 23

Tool Rectangle (Rectangle Tool) (U) Draw a shape with the parameters that you see in the screenshot. To create a gradient, use colors # 5F8F1D and # 99B83D.

Align the shape so that its top edge touches the top horizontal guide and horizontally to the center of the tab bar. Layer layer name “Now Playing Bg”.

Apply some layer styles:

Transfer the Now Playing layer from the icons.psd file and change the color of this layer to black (# 000000).

Apply layer styles:

Align the icon horizontally with the center of the Now Playing Bg layer, and vertically a few pixels below the top edge.

Write the text “Now Playing” with the following parameters:

Align the text horizontally relative to the center of the button, and vertically lower the text a few pixels below. Copy layer styles from the Now Playing icon layer.

Step 24

We have finished creating all the design elements. There is only one last step – you need to adjust the resolution. go to menu Image – Image Size (Image> Image Size) and set the values ​​that are shown in the screenshot.

Note: Always try to create design elements in vector form. With this design method, you can easily customize, modify and scale them without loss of quality.

Final image:

Transfer: Slutskaya Svetlana

Like this post? Please share to your friends: