Video icon 64
Upgrade your design skills with practical video courses from Tuts+. Start your free trial today.
Advertisement

Create a Mobile Weather App Interface in Photoshop

by

Mobile app design is one of the fastest growing fields in the design industry. In this tutorial, we will show you how to design a mobile app design interface using many of the tools in Adobe Photoshop. We will begin by showing you how to set up a grid and create a simple background. We will then show you how to take advantage of the Snap to Grid feature and use basic masking and vector shapes to create a set of flat icons. Finally, we will use the Rectangle Tool, some text, and basic blending and aligning techniques to create the additional components of a weather app interface. Let’s get started!


1. Create a New Document & Setup a Grid

Open Photoshop and hit Command/Ctrl + N to create a new document. Set the width at 640px and the height at 1136px, enter the rest of the attributes shown in the following image then click OK. Enable the Grid (View > Show > Grid) and the Snap to Grid (View > Snap To > Grid). For starters you will need a grid every 5px, so simply go to Edit > Preferences > Guides, Grid & Slices and focus on the Grid section. Enter 5 in the Gridline Every box and 1 in the Subdivision box. Also, set the grid color at #a7a7a7. Once you have set all these properties click OK. Don't get discouraged by all that grid. It will ease your work and you can easily disable/enable it using the Command/Ctrl + " keyboard shortcut. You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes.

Mobile Weather App Interface

2. Change the Color of the Background and Create the Weather Icons

Step 1

Focus on the Layers panel (Window > Layers), hold the Alt key from your keyboard and simply double click on the existing "Background" layer to unclock it. Make sure that your layer stays selected and move to the Toolbar. Click on the foreground color and replace the existing color attributes with #bebebe. Grab the Paint Bucket Tool and simply click inside your canvas. In the end things should look like in the following image.

Mobile Weather App Interface

Step 2

Set the foreground color at white (#ffffff), pick the Rounded Rectangle Tool, focus on the top bar and set the Radius at 10px. Move to your canvas and simply create a 55 x 20px rounded rectangle, the Snap to Grid will ease your work. Make sure that this white shape stays selected and switch to the Ellipse Tool. Check the Add button from the top bar then simply add a 30px circle as shown in the second image. Make sure that your white vector shape continues to remain selected and using the Ellipse Tool, add a 35px circle as shown int he third image. Finally, using the same tool, add a 25px circle as shown in the fourth image. Move to the Layers panel, double click on the vector shape made in this step and simply name it "cloudyIcon".

Mobile Weather App Interface

Step 3

Using Ellipse Tool, create a 25px circle. Make sure that this new vector shape stays selected, continue with the Ellipse Tool, check the Add button from the top bar and simply add a 5px circle as shown in the second image. Switch to the Direct Selection Tool (or the Path Selection Tool), hold the Alt key from your keyboard, click inside that tiny, 5px circle then simply drag it down as shown in the third image.

Mobile Weather App Interface

Step 4

Keep focusing on the vector shape made in the previous step and add six more copies of that 5px circle as shown in the following images. Once you're done, move to the Layers panel and name this new vector shape "sunnyIcon".

Mobile Weather App Interface

Step 5

Reselect your "cloudyIcon" vector shape and duplicate it (Command/Ctrl + J). Select this copy and drag it a few pixels to the right to separate it from the original shape. Keep focusing on this copy and grab the Rounded Rectangle Tool. Make sure that the Radius is set at 10px then create a 5 x 15px vector shape and place it as shown in the second image. Select this new rounded rectangle and hit Command/Ctrl + T (or go to Edit > Free Transform). Focus on the top bar, enter a 30.00 degrees angle then hit Enter. In the end things should look like in the third image. Make sure that the Rounded Rectangle Tool is still active, create a 5 x 25px vector shape and place it as shown in the fourth image. Select this new rounded rectangle and rotate it 30.00 degrees like you did with the previous one. Using the Rounded Rectangle Tool, create a new 5 x 15px vector shape, place it as shown in the sixth image then rotate it 30.00 degrees. Using the same tool, create a third 5 x 15px vector shape, place it as shown in the eighth image then rotate it 30.00 degrees. In the end thigs should look like in the ninth image.

Mobile Weather App Interface

Step 6

Focus on the Layers panel, reeselect the copy of that "cloudyIcon" vector shape along with the four rotated rounded rectangles and hit Command/Ctrl + G to Group them. Keep focusing on the Layers panel and simply name this new group "rainyIcon"

Mobile Weather App Interface

Step 7

Reselect your "cloudyIcon" vector shape and duplicate it (Command/Ctrl + J). Select this copy and drag it a few pixels to the right to separate it from the original shape. Keep focusing on this copy and grab the Direct Selection Tool. Select the four anchor points highlighted in the first image then simply hit the Delete button from your Keyboard. In the end things should look like in the second image. Reselect yout "sunnyIcon" vector shape and duplicate it (Command/Ctrl + J). Select this copy and place it as shown in the third image.

Mobile Weather App Interface

Step 8

Keep focusing on the vector shapes made in the previous step. Move to the Layers panel, hold the Command/Ctrl key from your keyboard and simply click on that copy of the "cloudyIcon" vector shape to load a selection around it. Make sure that it stays active and go to Select > Modify > Expand. Enter "2" in that new window and click OK. Move to the Layers panel, select the copy of the "sunnyIcon" vector shape, hold the Alt key from your keyboard and simply click on the Add layer mask button. In the end your masked sun should look like in the third image. Hit Command/Ctrl + D to get rid of that selection, move to the Layers panel, select the two vector shape that make up this new icon and Group them (Command/Ctrl + G). Keep focusing on the Layers panel and name this new group "mostlyCloudyIcon".

Mobile Weather App Interface

Step 9

Reselect your "cloudyIcon" vector shape and duplicate it (Command/Ctrl + J). Select this copy and drag it a few pixels to the left to separate it from the original shape. Make sure that this new vector shape is selected and hit Command/Ctrl + T (or go to Edit > Free Transform). Focus on the top bar, check the Mentain aspect ratio button, enter 50.00% in the width (or height) box then hit Enter. Reselect yout "sunnyIcon" vector shape and duplicate it (Command/Ctrl + J). Select this copy and place it as shown in the third image.

Mobile Weather App Interface

Step 10

Keep focusing on the vector shapes made in the previous step. Move to the Layers panel and load a simple selection around that little cloud. Make sure that it stays active and go to Select > Modify > Expand. Enter "2" in that new window and click OK. Move to the Layers panel, reselect the copy of that "sunnyIcon" vector shape, hold the Alt key from your keyboard and simply click on the Add layer mask button. In the end your masked sun should look like in the third image. Get rid of that selection (Command/Ctrl + D), move to the Layers panel, select the two vector shape that make up this new icon and Group them (Command/Ctrl + G). Keep focusing on the Layers panel and name this new group "mostlySunnyIcon".

Mobile Weather App Interface

3. Create the 7 Days Weather Forecast Side of the App

Step 1

For the following steps you will need a grid every 10px, so simply go to Edit > Preferences > Guides, Grid & Slices and enter 10 in the Gridline Every box. Set the foreground color at #00aeef, pick the Rectangle Tool, create a 640 x 100px vector shape and place it exactly as shown in the following image. The grid and the snap to grid should ease your work.

Mobile Weather App Interface

Step 2

Set the foreground color at #ff0000, pick the Rectangle Tool, create an 80px square and place it exactly as shown in the following image.

Mobile Weather App Interface

Step 3

Focus on the Layers panel, and select the blue rectangle and the red square. Move to your canvas, grab the Move Tool (V), hold the Alt and Shift keys from your keyboard then simply click and drag your selected vector shapes 100px up. Return to the Layers panel, focus on the copy of that blue rectangle and simply replace the blue with #8dc63f. In the end things should look like in the following image.

Mobile Weather App Interface

Step 4

Multiply those blue, green and red vector shapes and spread the copies as shown in the following image. Take full advantage of the Snap to Grid feature and make sure that you avoid overlapping or gaps.

Mobile Weather App Interface

Step 5

Focus on the top, red square. Select your "mostlySunnyIcon" group and place it roughly as shown in the first image. Move to the Layers panel, load a selection around that red square and make sure that your "mostlySunnyIcon" group is still selected. Grab the Move Tool (V), focus on the top bar and simply click the Align vertical centers and Align horizontal centers buttons. In the end your "mostlySunnyIcon" groups should be placed in the center of the red square as shown in the third image. Don't forget to get rid of that selection (Command/Ctrl + D).

Mobile Weather App Interface

Step 6

Select the rest of the icons one by one and use the techniques mentioned in the previous step to align them as shown in the following image.

Mobile Weather App Interface

Step 7

Focus on the Layers panel, select all red squares and simply hit the Delete key from your keyboard to remove them. Next, you need to change the colors used for the green and blue rectangles. Basically, we'll associate a color with each icon. Focus on the rectangle that lies behind the "sunnyIcon" vector shape and replace the existing color with #ffbc53. Move to the rectangles that lie behind your "mostlySunnyIcon" group and replace the existing color with #ffda71. Continue with the rectangles that lie behind the "mostlyCloudyIcon" group and replace the existing colors with #c9caa3. Move to the rectangle that lies behind the "cloudyIcon" vector shape and replace the existing color with #bccccc. Finally, select the rectangle that lies behind the "rainyIcon" group and replace the existing color with #a8b8b8.

Mobile Weather App Interface

Step 8

Set the foreground color at black (#000000), pick the Rectangle Tool, create a 110 x 700px vector shape and place it as shown in the first image. Make sure that this black rectangle stays selected, focus on the Layers panel, and lower the Opacity to 3%.

Mobile Weather App Interface

Step 9

Set the foreground color at white, pick the Rectangle Tool, create a new 110 x 700px vector shape and place it as shown in the first image. Make sure that this white rectangle stays selected, focus on the Layers panel, and lower the Opacity to 7%.

Mobile Weather App Interface

Step 10

For the following steps you will need a grid every 5px, so simply go to Edit > Preferences > Guides, Grid & Slices and enter 5 in the Gridline Every box. Focus on the left side of the top, yellow rectangle and pick the Horizontal Type Tool (T). Simply click on your canvas and add the "Tuesday" piece of text. Make sure that this new piece of text stays selected and open the Character panel (Window > Character). Pick the Calibri font, set the style at Bold the size at 35pt and the color at white. Get back to your canvas and make sure that your piece of text is placed as shown in the first image. Return to the Layers panel and double click on your piece of text to open the Layer Style window. Check the Drop Shadow box, enter the properties shown in the following image then click OK. Keep focusing on the Layers panel, right click on your piece of text and go to Copy Layer Style. We'll use the these layer style attributes for the text that will be added later.

Mobile Weather App Interface
Mobile Weather App Interface

Step 11

Make sure that the Horizontal Type Tool is still active, add the remaining day names as shown in the following image and use the same Character attributes. Make sure that these new pieces of text are selected, focus on the Layers panel, right click on one of these texts and simply go to Paste Layer Style.

Mobile Weather App Interface

Step 12

Make sure that the Horizontal Type Tool is still active, add the temperature values as shown in the following image and apply the same Character attributes used for the day names. Also, add the Layer Style attributes using that same Paste Layer Style option.

Mobile Weather App Interface

Step 13

Make sure that the Horizontal Type Tool is still active and add the "hi"and "lo" pieces of text as shown in the following image. Use the same font, style and color, but decrease the size to 14pt. Select all these pieces of text and add the subtle Layer Style attributes using the Paste Layer Style option.

Mobile Weather App Interface

Step 14

For the following steps you will need a grid every 1px, so simply go to Edit > Preferences > Guides, Grid & Slices and enter 1 in the Gridline Every box. Set the foreground color at white, pick the Ellipse Tool and create a 20px circle. Make sure that this new vector shape stays selected and switch to the Rectangle Tool. Check the Subtract button from the top bar then simply draw a 10 x 7px rectangle as shown in the second image. Grab the Delete Anchor Point Tool and click on the anchor point highlighted in the second image to easily remove it. Pick the Direct Selection Tool, select the anchor point highlighted in the third image and simply drag it 5px to the right. In the end things should look like in the fourth image. Move to the Layers panel, find the vector shape made in this step and name it "arrow".

Mobile Weather App Interface

Step 15

Reselect your "arrow" vector shape, place it as shown in the following then focus on the Layers panel. First, change the Blending Mode to Soft Light then lower the Opacity to 75%.

Mobile Weather App Interface

Step 16

Multiply (Command/Ctrl + J) your "arrow" vector shape and spread the copies as shown in the following image.

Mobile Weather App Interface

4.Create the Today Weather Forecast Side of the App

Step 1

For the following steps you will need a grid every 10px, so simply go to Edit > Preferences > Guides, Grid & Slices and enter 10 in the Gridline Every box. Set the foreground color at #ffbc53, pick the Rectangle Tool, create a 320 x 400px vector shape and place it as shown in the following image.

Mobile Weather App Interface

Step 2

Set the foreground color at #ffda71, pick the Rectangle Tool, create a 320 x 100px vector shape and place it as shown in the following image. Set the foreground color at #ffbc53, create a second 320 x 100px vector shape and place it as shown in the following image. Set the foreground color at #c9caa3, create a third 320 x 100px vector shape and place it as shown in the following image. Set the foreground color at #a3d1ff, create a fourth 320 x 100px vector shape and place it as shown in the following image.

Mobile Weather App Interface

Step 3

Focus on the Layers panel and open the Layer Style window for the yellow vector shape made in the previous step. Activate the Inner Shadow, enter the properties shown in the following image and click OK. Focus on the Layers panel, hold the Alt key from your keyboard, click on the little fx icon that stands for your yellow rectangle, simply drag it unto the khaki rectangle and release the mouse button. Repeat this technique for the grey rectangle. In the end things should look like in the second image.

Mobile Weather App Interface
Mobile Weather App Interface

Step 4

For the following steps you will need a grid every 5px, so simply go to Edit > Preferences > Guides, Grid & Slices and enter 5 in the Gridline Every box. Using the Horizontal Type Tool, add the "Morning", "Afternoon", "Evening" and "Overnight" pieces of text and place them as shown in the following image. Use the Calibri font, set the style at Bold, the size at 30pt and the color white. Make sure that all four pieces of text are selected and go to Paste Layer Style.

Mobile Weather App Interface

Step 5

Make sure that the Horizontal Type Tool is still active, add the temperature values and apply the same Character attributes used for the text. Select all these numbers and go to Paste Layer Style.

Mobile Weather App Interface

Step 6

Make sure that the Horizontal Type Tool is still active and add the "hi"and "lo" pieces of text as shown in the following image. Use the same font, style and color, but decrease the size to 14pt. Select all these pieces of text and go to Paste Layer Style.

Mobile Weather App Interface

Step 7

Focus on the Layers panel, reselect your "sunnyIcon" vector shape and duplicate it (Command/Ctrl + J). Select this copy, place it as shown in the first image and hit Command/Ctrl + T. Focus on the top bar, check the Mentain aspect ratio button, enter 200.00% in the width (or height) box then hit Enter. In the end things should look like in the second image.

Mobile Weather App Interface

Step 8

Using the Horizontal Type Tool and the "Melbourne,", "Australia", "Sunny" and "25°C" pieces of text. Use the Character attributes show below and place them roughly as shown in the following image. Once you're done, reselect all these pieces of text and go to Paste Layer Style.

Mobile Weather App Interface

Step 9

Focus on the Layers panel, reselect one of your "arrow" vector shapes and duplicate it (Command/Ctrl + J). Select this copy and place it as shown in the following image.

Mobile Weather App Interface

5. Create the Bottom Dark Bar

Step 1

For the final steps you will need a grid every 1px, so simply go to Edit > Preferences > Guides, Grid & Slices and enter 1 in the Gridline Every box. Set the foreground color at #323232, pick the Rectangle Tool, create a 640 x 32px vector shape and place it as shown in the following image.

Mobile Weather App Interface

Step 2

Using the Horizontal Type Tool, add the "Daily Weather Forecast Brought to you by: Lorem Ipsum Bureau of Meteorology" piece of text and place it as shown in the first image. Use the Calibri font then set the size at 15pt and the color at #505050. Return to the Layers panel and open the Layer Style window for this dark piece of text. Check the Drop Shadow box, enter the properties shown in the following image, click OK and you're done.

Mobile Weather App Interface
Mobile Weather App Interface

Congratulations! You're Done!

Here is how it should look. I hope you've enjoyed this tutorial and can apply these techniques in your future projects.

Mobile Weather App Interface

Here is how it should look on a screen.

Mobile Weather App Interface
Advertisement