Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Create a Mobile Downloader App Interface in Photoshop

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

Photoshop is a fantastic app to create mockups for mobile applications. Its vector tools, combined with Layer Style effects, allow designers to quickly create layouts for their projects. In this tutorial, I will show you how to create a downloader app design for an iPhone, in Photoshop. Once completed, you will have a good understanding of how to create modern interface elements, as well as, charts and graphs in Photoshop. Let's get started!

Tutorial Assets

You will need the following assets to complete this tutorial. Please download them before you begin. If they are not available, please find alternatives.

1. Create a New Document

Step 1

Begin by creating a new file (File > New) 640 x 1136px, the standard dimensions for a retina iPhone 5 design. Map out guidelines; 20px on either side of the app to help you align elements. Your document should look like this.

2. Create Background Structure

In this step we are going to create the basic background structure for the app. If you look at the design, you will see that it is broken into three areas, the Top Bar, the Main Content Area, and the Lower Details Area.

46

Step 1

Select the Rectangle Tool (U) and draw a rectangle starting from the top of the document that is 120px high. Use the Info Window (F5) to see the dimensions of the shape.

68

This will be the Top Bar. Name the layer TopBar BG. Change the color to #1a242c.

69

Go to the Layers Panel (F7) and right click on the layer and choose Blending Options. Choose Drop Shadow and put a 2px drop shadow, Angle to 90 degrees with the color #2b3642.

Adding such a small drop shadow may feel pointless but I strongly believe that it's the smaller details that make the difference between a good design and a great design.

70
Your design should now look like this.

Step 2

We will now create the main content area. Using the same process as the Top Bar, create a shape using the Rectangle Tool (U) that is 640px wide by 620px high.

Use the color picker and pick #222c36. Name the layer Main Content BG.

71

Next go to the Layer Styles dialogue again and choose a drop shadow that is 8px in distance, a Spread of 100%, 90 degree angle, with the color #2b3642.

Position the main content background shape directly below the Top Bar. Put the main content shape 2px under the Top Bar layer so you can see the Top Bar's drop shadow.

So, the main structure should be taking shape now.

72

Step 3

The bottom bar can be created the same as the others. Create a rectangle shape positioned directly below the main content background shape that is 640px wide and 336px high. Choose the color #19222a. Name the layer Bottom BG.

73

Again, make sure to position the layer directly under the main content layer so you can see the drop shadow from the layer above. Your design should look something like this:

3. Top Navigation Bar

Let's move onto the Top Bar.

Step 1

Open the iOS7 GUI PSD (iPhone) PSD file provided in the Tutorial Assets. Take the white status bar, and place it by dragging and dropping it on top of the canvas. Position the status bar layer at the top.

Step 2

Open the Additional Icons PSD file provided in the Tutorial Assets. Next, drag and drop the left navigation icon (3 bars icon) from the additional icons PSD. Using the 20px guide on either side, position the left navigation icon in line with the left 20px padding guide.

Step 3

Next, drag the settings icon from the additional icons PSD, into your design and position it to the right of the canvas, again using the 20px padding guide. Your Top Bar is now finished.

4. Main Content Area

The main content area may look tricky but if you look at it carefully, it is just a series of circles. Let's focus on the larger group first.

Step 1

Create a circle that is 506px wide by 506px high. Name the layer Circle 1. Again, use the Info Window (F5) to ensure you have the correct dimensions. This will be the background circle. From the color picker choose #19222a as the shapes color. Center align the circle and position it 40px below the Top Bar.

57

Go to the Layers Panel (F7) and right click on the layer and choose Blending Options. Choose Drop Shadow and put a 1px drop shadow, Angle of 90 degrees with the color #2b3642.

49

This is the same effect that is on the Top Bar shape. Having similar small touches like this throughout the app creates consistency and adds to the perfection of the finished design.

Step 2

The next circle is to be is 436px wide by 436px high and positioned in the middle of the larger circle. Name the layer Circle 2. From the color picker choose #2b3642 as the shapes color.

Step 3

Another circle is then created at 385px wide by 385px high. From the color picker choose #222c36 as the shapes color. Name this layer Circle 3.

58

Next go to the Blending Options for the circle layer and choose an Inner Shadow. Change the Opacity to 5%, Distance to 30px and Size to 40px. From the color picker, choose #000000 for the color of the Inner Shadow. See below for the exact effect.

As you can see, the area is beginning to take shape now.

Step 4

The next circle is probably the trickiest one to execute. It's the orange progress indicator. Create a circle that is 458px wide by 458px high and place it in the center of the circles. Name this layer Circle 4.

59

Go to the Blending Options and put add a 45px Inner Stroke. Choose a gradient for the stroke as per the hex colors below:

Now change the fill of Circle 4 to 0%.

56

Step 5

Next, convert the layer to a smart object by going to Layer > Smart Object > Convert to Smart Object.

Once the layer has been converted to a smart object, put a drop shadow on the Circle 4 layer. Choose the color #000000, Opacity at 20%, Distance of 20px and Size at 80px. See below for exact details:

Step 6

Ok, next we have to decide what percentage the orange progress indicator is at. This is created by using a Layer Mask. In the tools bar, select the Polygonal Lasso Tool (L)

From the center of the Circle 4 layer make a selection similar to the image below.

Once you are happy with the selection, create the Layer Mask by going to Layer > Layer Mask > Hide Selection

Step 7

Now choose the Type Tool (T) and select the center of the circles area and type "62" with the following attributes:

  • Font: Arial Black
  • Size: 100pt
  • Color: #ffffff.

Now center the text within the circle.

60

Beside the "62", create another type layer and put in a "%"with the following details:

  • Font: Arial Regular
  • Size: 20pt
  • Color: #5b6773

Position the "%" as per the image below.

23

Step 8

Directly below the "62", create another type layer using the Type Tool (T). With the following details:

  • Font: Arial Regular
  • Size: 13pt
  • Tracking: 400
  • Color: #5b6773.

Then, type "DOWNLOAD" in capital letters.

Position this type layer as per the image below.

So we have the progress indicate complete, it should look something similar to this:

Step 9

Next up are the two smaller circular buttons. Using the padding guide on the left, create a circle using the Ellipse Tool (U), 100px wide by 100px high. From the color picker, choose #19222a. Name this layer Circle 5. Position this circle as per the image below.

Within that circle, create another smaller circle that is 78px wide by 78px high in diameter. Name this layer Circle 5a. From the color picker choose #2b3642.

Step 10

Select both layers, Circle 5 and Circle 5a and right click. Go to Duplicate Layers.

Once the layers are been duplicated, rename them Circle 6 and Circle 6a respectively and place them directly to the right to align with the right padding guide.

From the Additional Icons PSD file, copy over the Pause icon and position it centered within the Circle 5 layer.

61

From the Free Icon Set, locate the Link Icon (2nd row, 5th across). Copy the icon into your design and position it centered within the Circle 6 layer.

62

Use the Transform Tool (Command/Ctrl-T) and change its dimensions to 38px wide by 48px high (200% bigger). Clear any layer effect that is on the icon by right clicking on the layer and choosing Clear Layer Style. From the color picker choose #a8afb6.

5. Lower Area

Let's move onto the bottom section. This section is split into three rows.

Step 1

Select the Rectangle Tool (U) and draw a rectangle starting from the top of the document that is 108px high. Name the layer lower 1.

63

Double click on the layer thumbnail to change the color. On the color picker choose the color #19222a. Go to the Layers Panel (F7) and right click on the layer and choose Blending Options. Choose Drop Shadows and put a 1px Drop Shadow, Angle of 90 degrees with the color #2b3642.

Duplicate the Lower 1 layer and name the new layer Lower 2. Position directly below Lower 1. Repeat the layer duplication again and rename the new layer to Lower 3 and place that directly below the Lower 2 layer.

51

Step 2

Next we will create the small circular icons and content. The first icon will indicate that the user is currently downloading a file, so we need to use the orange progress indicator similar to what we did for the larger circle.

Using the left padding guide, create small circle 50px wide by 50px high within the Lower 1 layer area. Name it Lower Circle 1.

64

Go to the Blending Options for the layer and put a 3px Outer Stroke with the color #eb6c4d.

Now put the fill on the Lower Circle 1 layer to 0%.

Next convert the layer to a smart object by going to Layer > Smart Object > Convert to Smart Object.

Ok, next we have to decide what percentage the orange progress indicator is at. This is created by using a Layer Mask. In the tools bar, select the Polygonal Lasso Tool (L)

From the center of the Lower Circle 1 layer make a selection similar to the image below.

Once you are happy with the selection create the Layer Mask by going to Layer > Layer Mask > Hide Selection. From the free icon set supplied, locate the cloud icon with the down arrow (6th row, 5th across). Copy the icon into your design and position it centered within the Lower Circle 1 layer.

Clear any layer effect that is on the icon by right clicking on the layer and choosing Clear Layer Style. From the color picker choose #db664a. It should look something like this:

Step 3

To the right of the download indicator we are going to put some text. So select the Type Tool (T) and click approximately 30px to right of the layer Lower Circle 1. With the following details:

  • Font: Arial Regular
  • Size: 12pt
  • Color: #5b6773

Then, type LATEST DOWNLOAD in capitals.

65

Step 4

Next, select the Type Tool (T) and click to the right padding guide. Right align the text by selecting the below icon in the paragraph window (Window > Paragraph).

With the following details, type "55.1 of 81MB"

  • Font: Arial Black
  • Size: 20pt
  • Color: #a8afb6

Next go back and highlight "of" and "MB" and give them the following details:

  • Font: Arial Regular
  • Font Size: 12pt
  • Color: #5b6773.

It might take a bit of effort with the text spacing to make sure the text is sitting correctly. So once that is done your Lower 1 layer should look like this:

Step 5

In Lower 2, we need to enter similar information. Using the left padding guide, create small circle 50px wide by 50px high within the Lower 2 layer area. Name it Lower Circle 2. Go to the Blending Options for the layer and put a 3px outer stroke with the color #eb6c4d.

Now put the fill on the Lower Circle 2 layer to 0%. Again, From the free icon set also supplied, locate the cloud icon with the up arrow (6th row, 4th across). Copy the icon into your design and position it centered within the Lower Circle 2 layer.

Clear any layer effect that is on the icon by right clicking on the layer and choosing Clear Layer Style. From the color picker choose #3c4651

53

Step 6

To the right of the download indicator we are going to put some text. So select the Type Tool (T) and click approximately 30px to right of the layer Lower Circle 2. Type "LATEST UPLOADS" in capital letters with the following details:

  • Font: Arial Regular
  • Font Size: 12pt
  • Color: #5b6773
66

Step 7

Next simply make a duplicate of the text "55.1 of 89MB" by right clicking on the layer within the Layer Window and going to Duplicate Layer.

Drag the new Layer to Lower 2 and change the text to "127.4GB".

  • Font: Arial Black
  • Size: 20pt
  • Color: #a8afb6.

For GB, use the following attributes:

  • Font: Arial Regular
  • Size: 12pt
  • Color: #5b6773

Once finished the row should look like this.

Step 8

The final row, Lower 3, will be using the same structure as Lower 2. We need to repeat the same process as we did for the content in Lower 2.

So, using the left padding guide, create small circle 50px wide by 50px high within the Lower 2 layer area. Name it Lower Circle 3. Go to the Blending Options for the layer and put a 3px outer stroke with the color #eb6c4d.

Now put the fill on the Lower Circle 3 layer to 0%.

Again, From the free icon set also supplied, locate the plain cloud icon (6th row, 3rd across). Copy the icon into your design and position it centered within the Lower Circle 3 layer.

54

Step 9

To the right of the download indicator, we are going to insert some text. So select the Type Tool (T) and click approximately 30px to right of the layer Lower Circle 2. Type "SPACE USED" in capital letters using the following details:

  • Font: Arial Regular
  • Font: Size: 12pt
  • Color: #5b6773
67

Step 10

Finally, make a duplicate of the text "127.4GB" from Lower 2 by right clicking on the layer within the Layer Window and going to Duplicate Layer.

Drag the new Layer to Lower 3 and change the text to "46.9GB".

  • Font: Arial Black
  • Size: 20pt.
  • Color: #a8afb6

GB to be in:

  • Font: Arial Regular
  • Size: 12pt
  • Color: #5b6773
55

Conclusion

In this tutorial, I have shown you how to use layer masks, smart objects, and various other techniques to help you create an iPhone application design in Photoshop. I hope you've learned something from it all, and can use these techniques to create an app design of your own.

Advertisement