Advertisement
Interface Design

Create a Mobile Phone Weather App Interface

by

In the following tutorial you will learn how to create a mobile phone weather app interface. We’ll build the interface using pixel perfect alignment, quality vector shape building techniques, as well as gradient and lighting control. The result is a modern phone app interface. You can use these techniques to create your own app interfaces.


Step 1

Hit Command + N to create a new document. Enter 640 in the width box and 960 in the height box, then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the "Align New Objects to Pixel Grid" box is unchecked before you click OK.

Next, you'll need a grid every 10px. Go to Edit > Preferences > Guides & Grid, enter 10 in the Gridline every box and 1 in the Subdivisions box. Now, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid).

You can also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Unit > General. All these options will significantly increase your work speed.



Step 2

Pick the Rectangle Tool (M), create a shape the size of your artboard (640 by 960px), fill it with R=229, G=244, B=255, and make sure that it has no color set for the stroke.



Step 3

Reselect the shape created in the previous step and go to Object > Create Gradient Mesh. Enter the data shown in the following image and click OK. This should turn your rectangle into a simple mesh.



Step 4

Pick the Direct Selection Tool (A) and focus on the mesh created in the previous step. Select the the first and the last column of mesh points and set their color at R=148, G=201, B=227. Continue with the Direct Selection Tool (A) select the other four mesh point columns shown with arrows and set their color as shown in the following image. Move to the Layers panel and lock this mesh.



Step 5

Pick the Rectangle Tool (M) and create a 640 by 380px shape. Fill it with the linear gradient shown below and place it as shown in the following image. The yellow zero from the gradient image stands for opacity percentage. Again, make sure that this new shape has no color set for the stroke.



Step 6

Pick the Rectangle Tool (M) and create a 640 by 550px shape. Fill it with the linear gradient shown below, place it as shown in the following image and make sure that there's no color set for the stroke.



Step 7

Pick the Rectangle Tool(M) and create a 640 by 70px shape. Fill it with the linear gradient shown below, place it as shown in the following image and make sure that it has no color set for the stroke.



Step 8

For the following step you will need a grid every 1px. So, go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box. Pick the Rectangle Tool (M), create a 128 by 330px shape, fill it with a dark blue and place it as shown in the first image.

Select this new rectangle and go to Effect > Distort & Transform > Transform. Enter the data shown in the first image, click OK, and go to Object > Expand Appearance. In the end, you should have a group of five, perfectly aligned rectangles. Move to the Layers panel, select this group and ungroup it (Shift + Command + G).



Step 9

Focus on the left rectangle created in the previous step and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and hit the left arrow once to move it 1px to the left.

Reselect both copies, open the Pathfinder panel, and click on the Minus Front button. Fill the resulting shape with R=160, G=208, B=234. Reselect the left rectangle created in the previous step and make two new copies in front (Command + C > Command + F > Command + F).

This time select the bottom copy and hit the right arrow twice to move it 2px to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white. Select both shapes created in this step and group them (Command + G).



Step 10

Move to the next three dark blue rectangles created in the eighth step and repeat the technique mentioned in the previous step. In the end you should have four different groups of shape and it should look like the following image.



Step 11

Focus on the first group of shapes, the one created in the ninth step. Select it and make a copy in front (Command + C > Command + F). Select this new group and click on the Unite button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the second image and open the Transparency panel.

Select this new shape, along with the group created in the ninth step, open the fly-out menu of the Transparency panel and click on Make Opacity Mask. In the end, your masked group should look like the third image shown.



Step 12

Move to the other three groups and mask them like you did in the previous step.



Step 13

Delete the left, the middle, and the right blue rectangles created in the step 8. Select the remaining rectangles and pick the Direct Selection Tool (A). Select the top anchor points and drag them 50px up as shown in the second image.

Fill these shapes with the linear gradient shown in the third image and lower their Opacity to 30%. Remember that the yellow zeros from the gradient image stand for Opacity percentage white the white number stands for location percentage.



Step 14

Pick the Rectangle Tool (M) and create a new shape the size of your artboard. Select it, make sure that there's no color set for the fill. and add a 2pt stroke. Make it white and align it to inside. Move to the Appearance panel and add a second stroke for this shape using the Add New Stroke button. It's the little, black square icon located at the bottom, left corner of the Appearance panel.

Select this new stroke, make it 1pt wide, set its color at R=58, G=135, B=178, and align it to inside. Reselect the orange rectangle created in the seventh step and bring it to front (Shift + Command + ] ).



Step 15

Pick the Rectangle Tool (M) and create a 636 by 50px shape. Fill it with a dark blue, place it as shown in the following image and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 1px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=160, G=208, B=234.

Reselect the dark blue rectangle created in the beginning of the step and make two new copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 2px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white.



Step 16

Reselect the dark blue rectangle created in the previous step and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 1px up. Reselect both copies, click on the Minus Front button from the Pathfinder panel. and fill the resulting shape with R=160, G=208, B=234.

Reselect the dark blue rectangle created in the previous step and make two new copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 2px up. Reselect both copies, click on the Minus Front button from the Pathfinder panel,å and fill the resulting shape with white.



Step 17

Reselect the dark blue rectangle created in the fifteenth step, lower its Opacity to 50%, and replace the dark blue with the linear gradient shown below. Pick the Rectangle Tool (M), create a 125 by 150px shape, fill it with a dark blue, and place it as shown in the following image.



Step 18

Reselect the dark blue rectangle created in the previous step and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 1px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown below.

Reselect the dark blue rectangle created in the previous step and make two new copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 1px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Again, fill the resulting shape with the linear gradient shown below.



Step 19

Reselect the dark blue rectangle created in the step 17, lower its Opacity to 40%, and replace the dark blue with the linear gradient shown below. Select this rectangle, along with the two shapes created in the previous step, and group them (Command + G). Select this new group and go to Effect > Distort & Transform > Transform. Enter the data shown in the following image and click OK.



Step 20

Pick the Ellipse Tool (L), create a 5px circle, fill it with R=160, G=208, B=234, and place it as shown in the first image. Make sure that this new shape is still selected, focus on the Appearance panel, and add a second fill using the Add New Fill button. It's the little, white square icon located at the bottom of the Appearance panel.

Select this new fill, add the linear gradient shown below, and go to Effect > Path > Offset Path. Enter a -1px Offset and click OK. Reselect this circle, make sure that no fill or stroke is selected (in the Appearance panel) and go to Effect > Stylize > Drop Shadow. Enter the data shown below, click OK, and apply Effect > Distort & Transform > Transform. Again, enter the data shown in the following image and click OK.



Step 21

Pick the Rectangle Tool (M), create a 60 by 30px shape, fill it with a random color and go to Effect > Stylize > Rounded Corners. Enter a 15px radius, click OK and go to Object > Expand Appearance.

Switch to the Ellipse Tool (L), create a 30px and a 35px circle and place them as shown in the second image. Select the three shapes created in this step and click on the Unite button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image.



Step 22

Select the shape created in the previous step and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 2px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white. Reselect the shape created in the previous step and go to Object > Path > Offset Path. Enter a -5px Offset and click OK.

Select the resulting shape, make a copy in front (Command + C > Command + F), and move it 2px up. Reselect this moved copy, along with the original shape and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=160, G=208, B=234, and go to Effect > Blur > Gaussian Blur. Enter a 3px radius and click OK.



Step 23

Reselect the shape created in step 21 and focus on the Appearance panel. First, select the existing fill and go to Effect > Stylize > Inner Glow. Enter the data shown below and click OK. Next, add a second fill for this shape and drag it to the bottom of the Appearance panel.

Make sure that this new fill is selected, use the linear gradient shown below, and go to Effect > Path > Offset > Path. Enter a 2px Offset and click OK. Finally, go to Effect > Stylize > Drop Shadow. Enter the data shown in the following image and click OK. Select all the shapes created in the last two steps and group them (Command + G). Move to the Layers panel, find this new group, and name it "Cloud".



Step 24

Pick the Ellipse Tool (L), create a 35px circle, fill it with the linear gradient shown below, and place it as shown in the following image. Make sure that this new shape is still selected and focus on the Appearance panel.

Add a new fill and drag it to the bottom of the Appearance panel. Set its color at R=254, G=196, B=105, and go to Effect > Path > Offset Path. Enter a 3px Offset, click OK and go to Effect > Distort & Transform > Zig Zag. Enter the data shown below and click OK.



Step 25

Reselect the circle created in the previous step, add a third fill, and use the linear gradient shown below. Select this new fill from the Appearance panel and go to Effect > Path > Offset Path. Enter a -4px Offset, click OK, and go to Effect > Distort & Transform > Transform. Enter the data shown in the following image and click OK.



Step 26

Reselect the circle edited in the previous step, add a fourth fill, and use the linear gradient shown below. Select this new fill from the Appearance panel and go to Effect > Path > Offset Path. Enter a -7.5px Offset, click OK, and go to Effect > Distort & Transform > Transform. Enter the data shown in the following image and click OK. Finally, select this complex circle and drag it to the bottom of the "Cloud" group.



Step 27

Pick the Ellipse Tool (L), create a 10 by 20px shape and fill it with the linear gradient shown below. Focus on this squeezed circle, switch to the Convert Anchor Point Tool (Shift + C), and click on the top anchor point. Pick the Direct Selection Tool (A), select the top anchor point, and move it 5px up. In the end, your shape should look like the third image shown.



Step 28

Select the shape created in the previous step and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 2px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white.



Step 29

Reselect the shape created in step 27 and focus on the Appearance panel. Add a second fill and drag it in the bottom of the Appearance panel. Make sure that this new fill is selected, use the linear gradient shown below, and go to Effect > Path > Offset Path. Enter a 2px Offset and click OK.

Finally, go to Effect > Stylize > Drop Shadow. Enter the data shown in the following image and click OK. Select all the shapes created in the last two steps and group them (Command + G). Make a copy of this group, re-size it, then place the two groups as shown in the second image.



Step 30

Use the groups and the shapes created in the last nine steps and add them as shown in the following image.



Step 31

Pick the Ellipse Tool (L), create a 180px circle, fill it with the linear gradient shown below and place it as shown in the following image. Make sure that this new shape is still selected and focus on the Appearance panel.

Add a new fill and drag it in the bottom of the Appearance panel. Set its color at R=254, G=196, B=105, and go to Effect > Path > Offset Path. Enter a 3px Offset, click OK, and go to Effect > Distort & Transform > Zig Zag. Enter the data shown below and click OK.

Reselect the top fill from the Appearance panel, lower its Opacity to 70%, and go to Effect > Blur > Gaussian Blur. Enter an 8px radius and click OK.



Step 32

Reselect the circle created in the previous step, add a third fill, and use the linear gradient shown below. Select this new fill from the Appearance panel and go to Effect > Path > Offset Path. Enter a -4px Offset, click OK, and go to Effect > Distort & Transform > Transform. Enter the data shown in the following image, click OK, and go to Effect > Blur > Gaussian Blur. Enter a 15px radius and click OK.



Step 33

Reselect the circle edited in the previous step, add a fourth fill, and use the linear gradient shown below. Select this new fill from the Appearance panel and go to Effect > Path > Offset Path. Enter a -40px Offset, click OK and go to Effect > Distort & Transform > Transform. Enter the data shown in the following image, click OK and go to Effect > Blur > Gaussian Blur. Enter a 10px radius and click OK.



Step 34

Reselect the circle edited in the previous step, add a fifth fill, and use the linear gradient shown below. Select it from the Appearance panel, lower its Opacity to 30%, and go to Effect > Path > Offset Path. Enter a -50px Offset, click OK, and go to Effect > Distort&Transform > Transform. Enter the data shown in the following image and click OK.



Step 35

Pick the Rectangle Tool (M), create a 65 by 5px shape, and fill it with R=111, G=184, B=220. Grab the Ellipse Tool (L), create a 45px circle, and place it as shown in the second image. Select this new shape, make sure that there's no color set for the fill, but add a 5pt stroke, and set its color at R=111, G=184, B=220.

Switch to the Direct Selection Tool (A) and focus on the circle. Select the bottom anchor point and simply hit the Delete key from your keyboard. This should remove the bottom half of the circle. Select the remaining half and go to Object > Path > Outline Stroke.

Select the resulting shape, along with the rectangle created in the beginning of the step, and click on the Unite button from the Pathfinder panel.



Step 36

Reselect the shape created in the previous step and focus on the Appearance panel. Add a second fill, select it, add the linear gradient shown below, and go to Effect > Path > Offset > Path. Enter a -2px Offset and click OK. Finally, make sure that no fill or stroke is selected (in the Appearance panel) and go to Effect > Stylize > Drop Shadow. Enter the data shown in the following image and click OK.



Step 37

Reselect the shapes edited in the previous step and go to Object > Transform > Reflect. Check the Horizontal button and click on the Copy button. This will create a vertically, flipped copy of the selected shape.



Step 38

Select the two shapes from the previous step and place them as shown in the following image.



Step 39

Move up to the orange rectangle and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 1px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=222, G=95, B=41.

Reselect the orange rectangle and make two new copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 1px up and to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=222, G=95, B=41.



Step 40

Reselect the orange rectangle and make two copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 2px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=254, G=239, B=221.

Reselect the orange rectangle and make two new copies in front (Command + C > Command + F > Command + F). Select the top copy and move it 2px up and to the right. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=254, G=239, B=221.



Step 41

Pick the Type Tool (T) and add some text and place it as shown in the following image. Set its color at R=222, G=95, B=41, and use the Calibri font with the size set at 30pt. Select this text and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.



Step 42

Pick the Rectangle Tool (M), create a 15px square, and fill it with the linear gradient shown below. Add a 1pt stroke for this shape, set its color at R=222, G=95, B=41, and align it to inside.

Reselect this square, make sure that no fill or stroke is selected, and go to Effect > Stylize > Rounded Corners. Enter a 3px radius, click OK, and go to Effect > Stylize > Drop Shadow. Enter the data shown in the following image and click OK.



Step 43

Pick the Rectangle Tool (M), create a 5px square, fill it with R=222, G=95, B=41, and place it as shown in the first image. Switch to the Direct Selection Tool (A) and focus on this small square. Select the bottom anchor points and go to Object > Path > Average. Check the Both button and click OK. The resulting shape should look like a triangle.

Select it and go to Effect > Stylize > Rounded Corners. Enter a 1px radius and click OK. Reselect this triangle, along with the shape created in the previous step, and group them (Command + G). Select this new group and place it as shown in the third image. Pick the Rectangle Tool (M), create a 640 by 30px shape, fill it with black, and place it as shown in the third image.



Step 44

Finally, let's add some more text. First, the short day names. Use the Calibri bold font, set the size at 20pt, and the color at R=71, G=169, B=209. Select all this text and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.


Continue with the Type Tool (T) and add the rest of the text. It's all Calibri font (Bold or Regular). Don't forget to add the discrete Drop Shadow effect for all the text.




Conclusion

Now your work is done. Here is how it should look.


And after placing it in a phone design.


Related Posts