Create a Weather App Interface

In the following tutorial you will learn how to create a weather app interface using Graphic's tools and effects.

Step 1

For this tutorial we'll create a new 750 x 1334 pixel document. Choose File > New (Command + N) to bring up the New Document pane. Select the Grid document style, set the document units to pixels, and set the document dimensions to 700 pixels wide by 1334 pixels high.

Next, we'll set up the document grid. Switch to the Grid pane in the Properties pane. If the Properties pane is not currently visible, you can click on the orange ruler icon above the Layers pane to show and hide the pane. Change the grid X Spacing and Y Spacing to 1px, set the Subdivisions to 0px, and enable Snap to Grid (Command + Shift + ').

Step 2

Focus on the Toolbar and you will notice that by default the Fill color is set to white while the Stroke color is set to black. Click on the fill color well and set the Fill color to R=0 G=152 B=245. Next, click on the Stroke color well and drag the Alpha slider to 0%, which will simply make the stroke invisible. Pick the Rectangle Tool (M), create a 750 x 1334px shape and make sure that it covers your entire canvas. The grid and the Snap to Grid feature will ease your work.

Step 3

Download this image and drag it inside your Graphic document. Make sure that it stays selected simply hit Shift + Command + [ to send it to back.

Step 4

Make sure that your image is still selected and focus on the Geometry section from the Properties pane. Check the Constrain width and height button (highlighted in the following image) then simply enter 1334px in the Height box. This will simply resize your image without messing the proportions. Keep focusing on this pane and move to the Position section. Enter -740px in the X box and 0 in the Y box and your image will be positioned as shown in the following image. In the end things should look like in the following image.

Step 5

Reselect your blue rectangle along with that image, focus on the Path Tools section from the Properties pane and simply click that Intersect button. Move to the Layers pane and simply lock the remaining image to make sure that you won't accidentally select/move it. In the end things should look like in the second image.

Step 6

Now, you will need a grid every 5px which simply means that you need to return to the Grid section from the Properties pane and enter 5px in both Spacing boxes. Return to your Toolbar, make sure that the Stroke is invisible and then set the Fill color at R=0 G=152 B=245. Grab the Rounded Rectangle Tool (Shift + M), focus on the Titlebar and drag the Corner Radius slider at 10pt. Move to your canvas, create a 720 x 450px shape and place it as shown in the following image.

Step 7

Make sure that the Rounded Rectangle Tool (Shift + M) is still active, create a 170 x 290px shape and place it as shown in the following image.

Step 8

Use the Command + C > Command + V keyboard shortcut to multiply the rounded rectangle made in the previous step and spread the copies as shown in the following image.

Step 9

Reselect the Rounded Rectangle Tool (Shift + M), create a 720 x 170px shape and place it as shown in the following image.

Step 10

Use that same Command + C > Command + V keyboard shortcut to multiply the rounded rectangle made in the previous step and spread the copies as shown in the following image.

Step 11

Now, you will need a grid every 1px which simply means that you need to return to the Grid section from the Properties pane and enter 1px in both Spacing boxes. Get back to your Toolbar, make sure that the Stroke is invisible and then set the Fill color at R=0 G=0 B=0. Focus on your left, 170 x 290 rounded rectangle. Using the Rectangle Tool (M), create a 166 x 2px shape and place it exactly as shown in the following image.

Step 12

Multiply that black rectangle (Command + C > Command > V) and spread the copies as shown in the following image. Make sure that all these shapes are perfectly aligned.

Step 13

Return to your Toolbar, make sure that the Stroke is still invisible and then set the Fill color at R=255 G=185 B=0. Focus on your top, 720 x 170 rounded rectangle. Using the Rectangle Tool (M), create two, 2 x 166px shapes and place them exactly as shown in the following image.

Step 14

Multiply your yellow rectangles (Command + C > Command > V) and spread the copies as shown in the following image. Make sure that all these shapes are perfectly aligned.

Step 15

Select the top, rounded rectangle and focus on the Effects section from the Appearance pane. If the Appearance pane is not currently visible, you can click on the blue icon above the Layers pane to show and hide the pane. Click the color box that stands for the existing Fill, drag the Alpha slider at 20% and replace the existing color with a simple white (R=255 G=255 B=255).

Step 16

Make sure that your top, rounded rectangle stays selected and keep focusing on the Effects section from the Appearance pane. Select the existing Stroke, drag the Width slider at 2pt and select Inside from the Position drop-down menu. Next, click the color box that stands for your Stroke, drag the Alpha slider at 10% and replace the existing color with a simple white.

Step 17

Make sure that your top, rounded rectangle stays selected, keep focusing on the Effects section from the Appearance pane and add a second Stroke using the plus button located in the bottom, left corner of your pane. Select the new Stroke, drag the Width slider at 2pt, select Outside from the Position drop-down menu and Soft Light from the Blend drop-down menu. Next, click the color box that stands for this new Stroke, drag the Alpha slider at 15% and replace the existing color with a simple black.

Step 18

Make sure that your top, rounded rectangle stays selected, keep focusing on the Effects section from the Appearance pane and simply check the little box that stands for the existing Inner Shadow to activate it. Enter 2 in the Y box and 0 in the other two boxes, select Soft Light from the Blend Mode drop-down menu and then click the color box that stands for this effect. Drag the Alpha slider at 30% and replace the existing color with white. Finally, drag this effect right below the Fill.

Step 19

Make sure that your top, rounded rectangle stays selected, keep focusing on the Effects section from the Appearance pane and add a second Inner Shadow using that same plus button. Select this new effect, drag it below the existing Inner Shadow and then enter the properties shown in the following image.

Step 20

Make sure that your top, rounded rectangle is still selected, right click anywhere on your canvas and go to Copy Style. Next, select all your blue, rounded rectangles, right click on your canvas and go to Paste Style. In the end things should look like in the second image.

Step 21

Select one of those black rectangles and focus on the Effects section from the Appearance pane. Focus on the existing Fill, select Soft Light from the Blend drop-down menu and then click the color box and drag the Alpha slider at 25%.

Step 22

Make sure that the rectangle edited in the previous step is still selected and keep focusing on the Effects section from the Appearance pane. Activate the existing Drop Shadow and enter the attributes shown in the following image.

Step 23

Make sure that the rectangle edited in the previous step is still selected, right click anywhere on your canvas and go to Copy Style. Now, select the remaining black rectangles, right click on your canvas and go to Paste Style. In the end things should look like in the second image.

Step 24

Select one of your yellow rectangles and focus on the Effects section from the Appearance pane. Select the existing Fill, select Linear Gradient from the Type drop-down menu, set the Angle at 90 degrees and then move to the gradient sliders. Select the left slider, drag the Alpha slider at 0% and replace the existing color with white. Move to the right gradient slider, drag the Alpha slider at 30% and replace the existing color with white.

Step 25

Once again, use the Copy Style and Paste Style commands to copy the attributes added in the previous step and paste them unto the remaining yellow rectangles.

Step 26

Now, you will this set of flat weather icons. Feel free to follow that tutorial or simply copy the icons from the Graphic file that can be downloaded in the finale of the tutorial. Paste all those icons inside your document and place them roughly as shown in the following image.

Step 27

Duplicate one of those weather icons, double its size and place it as shown in the following image.

Step 28

Finally, we'll add the text. First, go to your Toolbar, make sure that the Stroke is invisible and then set the Fill color at white. Grab the Text Tool (T) and focus on the Text section from the Appearance pane. Select the Arial Rounded MT Bold font, set the Size at 75pt and then simply click on your canvas. Add the "21°" piece of text, place it as shown in the following image and make sure that it stays selected. Move to the Effects section from the Appearance pane, activate the existing Drop Shadow and enter the attributes shown in the following image.

Step 29

Use that same Arial Rounded MT Bold font, but decrease the Size at 50pt. Add the "01:23" piece of text, place it as shown in the following image and make sure that it stays selected. Move to the Effects section from the Appearance pane, activate the existing Drop Shadow and enter the attributes shown in the following image.

Step 30

Now, use the text attributes shown in the following image, add the new piece of text and spread them as shown below. Use the same color and don't forget to add that subtle Drop Shadow effect mentioned in the previous steps. You can easily copy and paste it via the Effects section from the Appearance pane. Simply right click on your effect and go to Copy Drop Shadow and then right click again and go to Paste Drop Shadow. If you choose to use the Copy/Paste Style commands keep in mind that this technique also copies/pastes the font attributes.

Step 33

Finally, feel free to try a different background image. Here's the one for the morning.

Here's the one for the evening.

Here's the one for the overnight.

Finished Design

Congratulations, you've finished the tutorial!

Graphic File: WeatherAppInterface.idraw