Making a mobile application site layout in Photoshop

Today we will create, using the Photoshop program, the layout of a mobile application website for the iPhone. We will use fairly simple methods to create our layout, and also we will re-apply several of the techniques used in our previous lessons.

  • Download the archive with materials for the lesson
  • ?PSD lesson

To begin, take a look at what we need to create. This is the final result of our work:

Step 1

Create a new document. Set the dimensions Width (Width) 980, Height (Height) 1200 pixels.

Step 2

Take a picture of the water with bubbles from additional materials and place it in your document. Take the tool “Rectangular area” (rectangular marquee tool (M)), select the rectangle, as in the screenshot below, and press the DELETE key, this will get rid of the branded watermark at the bottom of the image.

Step 3

Next, create a new layer by pressing CTRL + SHIFT + N. Then, take the tool again “Rectangular area” (rectangular marquee tool (M)), and use it to select an area 50 pixels high from the top of your document. Fill the selected area with black (# 000000) and set the value Opacity (Opacity) 58%. This will be the “header” of our site (header).

Step 4

At the very top of our cap, we must repeat the procedure from the previous step, i.e. select the area in the same way, but only a smaller height, also fill it with black color, and the value Opacity (Opacity) to put 42%. It should turn out, as in the screenshot below. Oh, and do not forget to do all this on separate layers!

Step 5

In this step, we need to draw the lower boundary of our header. To do this, take the tool “Area (horizontal line)” (Single Row Marquee Tool (M)) and select the area on the lower border of our site’s header. Fill it with white (#FFFFFF) and set the value Opacity (Opacity) 24%.

Step 6

After that, we will add a logo and navigation menu to our header. As a logo, we use just text. For it, take the font League Gothic, size 40 points, and to navigate, take the font Arial Bold, size 13 points. Color for both the logo and the menu use white (#FFFFFF).

Step 7

Next, place the pre-prepared image of the iPhone in our document. Then, using the tool “Rectangular area” (Rectangular marquee tool (M)) Draw an iPhone screen, and fill it with white (#FFFFFF).

Step 8

Now, transfer the image of wallpaper in the style of Win7 in your document. Make sure that this layer is above the layer with the screen drawn in the last step. Right-click on the wallpaper layer, and select from the pop-up menu Create clipping mask (Create Clipping Mask). Adjust the location of this image so that it appears correctly on the screen of our smartphone.

Step 9

This is how our iPhone screen with a logo looks like. For the text we used the font League Gothic, size 21 points, and the image of the drops we took from a set of custom shapes from additional materials.

Step 10

Now, let’s add a text block next to the device image. To create text, take the font Arial Regular, size 13 points. The title of the font font League Gothic, size 39 points. Also add the image of the AppStore button from additional materials. Before you install a button, it must be cut from a common file.

Step 11

Take the tool “Rectangular area” (rectangular marquee tool (M)) and select the bottom of your canvas. To do this, first create a new layer.

Step 12

Next, we will fill this selected area not just with a solid color, but apply a gradient to it using layer style (layer style). Parameters for Gradient overlays (Gradient Overlay) should be the following:

  • Gradient Colors by #ffffff k #eeecec

  • Blend mode (Blend mode): Normal (Normal)
  • Opacity (Opacity): 100%
  • Style (Style): Linear (Linear)
  • Angle (Angle): 90
  • Scale (Scale): 100%

Step 13

After that we add icons and text. Icons are taken from additional materials.

Headings for text blocks are performed using the Arial Bold font, size 19 points. The content part is done using the Arial Regular font, size 13 points, the color for both parts is # 3f3f3f.

Step 14

As for the block design with tweets, it was decided to use the Georgia Italic font, 16 points in size, color # 7f7f7f, the twitter logo in the form of a bird is taken from additional materials. Link color # 1161a9.

Next, with the tool “Rectangular area” (Rectangular marquee tool (M)) select the area for the footer and fill it with the color #ebeaea.

Step 15

Now, with the tool “Area (horizontal line)” (Single Row Marquee Tool (M)) draw the upper border of our footer and fill it with the color #bcbbbb, opacity (Opacity) down to 40%.

Step 16

Add a text logo to the left side of the footer, add a navigation menu to the right side. To do this, use the font Arial Regular, color # 555555. And the logo, and navigation is prescribed in upper case.

And so, our layout is ready!

Using simple techniques, you can create a great layout; you just need an idea and a goal that you will truly strive for. Hopefully, after this lesson, you learned to hone your skills, you should challenge yourself and create more different layouts.

Like this post? Please share to your friends: