Create a Weather App Interface

In the following tutorial you will learn how to create a weather app interface in Graphic for iPad.

For starters you will learn how to setup a simple grid and how to create the background image. Taking full advantage of the grid and the Snap to Grid feature, you will learn how to create the main shapes and the subtle dividers. Using the Effects pane and some basic blending techniques, you will learn how to add color, shading and highlights for your shapes.

Finally, you will learn how to add a bunch of text and how to stylize it.

Step 1

From the Documents Browser, tap the plus button at the top-left corner of the Tool Options bar and choose the Grid document style.

Focus on the right side of the Tool Options bar and tap the Settings icon. Go to the Canvas pane, set the Width to 750 px and the Height to 1334 px, select Pixels for the base unit, and make sure that the Pixel-Align Strokes feature is disabled. When this setting is enabled, stroked objects are offset slightly to ensure that the stroke is drawn aligned to the pixel grid which guarantees a crisp look.

Next, we'll set up the document grid. Switch to the Grid & Rulers pane, make sure that the Snap to Grid feature is enabled and keep in mind that this is where you should come whenever you wish to enable or disable the grid or the Snap to Grid. Finally, open that Grid Settings pane, enter 1 px in both Spacing boxes and 0 lines in the Subdivisions box.

Step 2

Focus on the Toolbar and notice that by default the Fill color is set to white while the Line color is set to black. Tap the Fill color well and set its color to R=0 G=124 B=215 and then tap the Line color well. Drag the Alpha slider to 0% and this will simply make your line invisible.

Pick the Rectangle Tool, create a 750 x 1334 px shape and make sure that it covers your entire canvas - the grid and the Snap to Grid feature will ease your work.

Step 3

Now, you need to save this image (the L version) inside your Photos. Focus on your Toolbar, tap the Photos Tool and simply add the image saved a few moments ago.

Make sure that it stays selected and tap that rectangular icon from the right side of your Tool Options bar. Focus on the Arrange pane and simply drag that Order slider to the left which will send your image in the back.

Step 4

Make sure that your image is still selected, focus on the right side of your Tool Options bar and tap that ruler icon to open the Geometry panel.

Check the Constrain width and height button (highlighted in the following image) and then enter 1334 px 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 -740 px in the X box and 0 in the Y box and your image should end up positioned as shown in the following image.

Step 5

Reselect your blue rectangle along with that image, focus on the Combine pane and simply tap that Intersect command. In the end things should look like in the second image.

Tap the rightmost icon from your Tool Options bar to open the Layers panel. Open the existing layer and simply lock your image to make sure that you won't accidentally select/move it in the next steps.

Step 6

For the following steps you will need a grid every 5 px. Simply go to Grid and Rulers pane, open the Grid Settings and enter 5 px in both Spacing boxes. Return to your Toolbar, make sure that the Line is invisible and then set the Fill color to R=0 G=152 B=245.

Pick the Rounded Rectangle Tool, focus on the newly opened tool pane and drag the Radius slider to 10. Move to your canvas, create a 720 x 450 px shape and place it as shown in the following image.

Step 7

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

Step 8

Make sure that your smaller rounded rectangle is still selected and tap that paperclip icon from your Titlebar to open the Edit pane. Use the Copy and Paste in Place commands to add three copies of your selection in the same place.

Select the top copy and drag it 540 px to the right. Drag and hold, and then tap and hold with a second finger to easily move your selection on only one axis (horizontally or vertically). This should leave a 20 px gap between the edge of your shape and the edge of the canvas.

Using the Move Tool, select all four rounded rectangles. Open the Arrange pane and tap that Distribute Horizontally command. In the end, your rounded rectangles should be perfectly aligned, as shown in the following image.

Step 9

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

Step 10

Use the Copy and Paste commands from that Edit pane to multiply the rounded rectangle made in the previous step and place the copies as shown in the following image.

Step 11

For the following steps you will need a grid every 1 px. Re-open the Grid Settings pane and enter 1 px in both Spacing boxes. Get back to your Toolbar, make sure that the Stroke is invisible and then set the Fill color to black (R=0 G=0 B=0).

Focus on your left, 170 x 290 rounded rectangle. Using the Rectangle Tool, create a 166 x 2 px shape and place it exactly as shown in the following image.

Step 12

Multiply that black rectangle and place 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 to R=255 G=185 B=0.

Focus on your top, 720 x 170 rounded rectangle. Using the Rectangle Tool, create two, 2 x 166 px shapes and place them exactly as shown in the following image.

Step 14

Multiply your yellow rectangles and place the copies as shown in the following image. Make sure that all these shapes are perfectly aligned.

Step 15

Select the top, rounded rectangle, focus on the right side of your Titlebar and tap the leftmost icon. Move to the Effects pane, tap the color well that stands for the existing Fill, drag the Alpha slider to 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 pane. Select the Stroke, drag the Width slider to 2 pt and select the Inside Alignment button. Next, tap the color well that stands for your Stroke, drag the Alpha slider to 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 pane and add a second Stroke using the plus button located in the bottom, right corner of your pane.

Select this new Stroke and make sure that it lies below the other one. Drag the Width slider to 2 pt, select the Outside Alignment button and then tap the color well that stands for this new Stroke. Drag the Alpha slider to 15% and replace the existing color with a simple black.

Return to the Effects pane and tap the cogwheel icon that stands for your new Stroke. Tap the Blend Mode command, select the Soft Light blend mode then tap that Done button. In the end things should look like in the following image.

Step 18

Make sure that your top, rounded rectangle stays selected, keep focusing on the Effects pane and simply check the box that stands for the existing Inner Shadow to activate it. Enter 2 in the Y box and 0 in the other two boxes, change the Blend Mode to Soft Light and then tap the color well that stands for this effect. Drag the Alpha slider to 30% and replace the existing color with white. Don't forget to drag this effect right below the Fill.

Step 19

Make sure that your top, rounded rectangle stays selected, keep focusing on the Effects 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, open that Edit pane and this time tap the Copy Style command. Now, select all your blue shapes, re-open that Edit pane and tap the Paste Style command.

Step 21

Select one of those black rectangles and open the Effects pane. Focus on the Fill, change its Blend Mode to Soft Light and then tap the color well and drag the Alpha slider to 25%.

Step 22

Make sure that the rectangle edited in the previous step is still selected and keep focusing on the Effects 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, open the Edit pane and tap the Copy Style command. Select the remaining black rectangles, return to that Edit pane and tap the Paste Style command. In the end things should look like in the second image.

Step 24

Select one of your yellow rectangles and focus on the Effects pane. Tap the color well that stands for the existing Fill and then tap the Gradient Fill and Linear buttons. Set the angle to -90 degrees and then move to the gradient sliders. Select the left slider, drag the Alpha slider to 0% and replace the existing color with white. Move to the right gradient slider, drag the Alpha slider to 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 need this Set of Flat Weather Icons. Feel free to follow that tutorial and create your own icons 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

Pick the Text Tool and simply double tap inside that new field. Set the color to white, select the Arial Rounded MT font and make it Bold. Drag the font size slider to 75 and then simply add that tiny "21°" piece of text. Place it as shown in the following image and make sure that it stays selected.

Move to the Effects pane, activate the existing Drop Shadow and enter the attributes shown in the following image.

Step 29

Use that same **font, but decrease the Size to 50 pt. 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 pane, activate the existing Drop Shadow** and enter the attributes shown in the following image.

Step 30

Use the text attributes shown in the following image to add your new pieces of text and spread them as shown below. Use the same color and don't forget to add that subtle Drop Shadow effect applied on your existing pieces of text.

Step 33

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

Evening version

Overnight version

Finished Design

Congratulations, you've finished the tutorial!

Hope you've enjoyed learning some of the techniques and processes presented in these steps. As always, feel free to adjust the final design and make it your own.

Graphic File: weatherappinterface.idraw