Create a Flat Notebook Illustration

In the following tutorial you will learn how to create a flat notebook illustration in Graphic for iPhone.

For starters, you will learn how to setup a simple grid and how to create the main, pixel perfect shapes using the Snap to Grid feature along with some basic tools and vector shape building techniques. Taking full advantage of the Effects pane, you will learn how to add subtle shading and highlights for your shapes.

Finally, you'll learn how to to easily align shapes and paths to the pixel grid and how to work with layers.

Step 1

Start by tapping the plus button from the top-left corner of your screen to create a new document. Tap the Create Document button and then choose the Grid document style.

Focus on the right side of the Titlebar, tap that ruler icon to open the Properties panel and then tap the Canvas pane. Set both Width and Height to 600 px, select Pixels for the base unit, and be sure that the Pixel-Align Strokes feature is disabled, for now. 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.

Re-open the Properties panel and this time go to the Grid 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 the Grid Settings pane and enter 5 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=65 G=84 B=115 and then tap the Line color well. Drag the Alpha slider to 0% and this will simply make your line invisible.

Pick the Rounded Rectangle Tool, focus on the newly opened Tool Options pane and drag the Radius slider to 5. Move to yor canvas and simply create a 155 x 195 px shape - the grid and the Snap to Grid feature will ease your work.

Step 3

Set the Fill color to black (R=0 G=0 B=0) and pick the Rectangle Tool. Create a 5 x 195 px shape and place it exactly as shown in the first image.

Using the Move Tool, select both shapes made so far, open the Combine pane from the Properties panel and click that Subtract button.

Step 4

Make sure that your shape stays selected, focus on the right side of your Titlebar and tap the leftmost icon to open the Appearance panel. Go to the Effects pane and simply tap the existing Stroke. Set the Width to 1 pt, tap the Inside Alignment button and then tap the color well that stands for this Stroke. Replace the existing color with R=59 G=80 B=110 and make sure that the Alpha slider is set to 100%.

Step 5

Make sure that your shape stays selected, keep focusing on the Effects pane and check the box that stands for the existing Drop Shadow to activate it. Enter 1 in the Y box and 0 in the other two boxes and then tap the color well that stands for this effect. Replace the existing color with R=45 G=65 B=95 and be sure that the Alpha slider is set to 100%.

Step 6

Make sure that your shape stays selected, keep focusing on the Effects pane and add a second Drop Shadow using that plus button from the top, right corner of the pane. Select this new effect, enter 2 in the Y box and 0 in the other two boxes and then tap its color well. Set the color to R=34 G=54 B=85 and drag the Alpha slider to 15%.

Step 7

Make sure that your shape stays selected, keep focusing on the Effects pane and add a third Drop Shadow using that same plus button. Select this new effect and enter the attributes shown in the following image.

Step 8

Using the Rectangle Tool, create a 145 x 185 px shape and place it as shown in the following image. Make sure that it stays selected and focus on the Effects pane.

Tap the color well that stands for the Fill and then tap the Gradient and the Linear buttons. Set the angle to 0 degrees and then move to the gradient sliders. Tap the left one and set its color to R=245 G=245 B=242 and then tap the right one and se its color to R=235 G=235 B=232.

Return to the Effects pane, tap the cogweel icon that stands for one of those inactive effects and then go to Remove. This will simply delete your effect. Use the same technique to delete the rest of those inactive effects. It' not something that will change the look of your shape, but it will help you organise the effects to come.

Step 9

Make sure that your rectangle stays selected, keep focusing on the Effects pane and add a Drop Shadow using that same plus button. Select it and enter the attributes shown in the following image.

Step 10

Make sure that your rectangle stays selected, keep focusing on the Effects pane and add a second Drop Shadow. Select it and enter the attributes shown in the following image.

Step 11

Make sure that your rectangle stays selected, keep focusing on the Effects pane and add a third Drop Shadow. Select it and enter the attributes shown in the following image.

Step 12

Make sure that your rectangle stays selected, keep focusing on the Effects pane and add an Inner Shadow using that same plus button. Select it and enter the attributes shown in the following image.

Step 13

Make sure that your rectangle stays selected, keep focusing on the Effects pane and add a second Inner Shadow. Select it and enter the attributes shown in the following image.

Step 14

Make sure that your rectangle stays selected, keep focusing on the Effects pane and add a third Inner Shadow. Select it and enter the attributes shown in the following image.

Step 15

Make sure that your rectangle stays selected, keep focusing on the Effects pane and add a fourth Inner Shadow. Select it and enter the attributes shown in the following image.

Step 16

Make sure that your rectangle stays selected, keep focusing on the Effects pane and add a fifth Inner Shadow. Select it and enter the attributes shown in the following image.

Step 17

Make sure that your rectangle stays selected, keep focusing on the Effects pane and add a sixth Inner Shadow. Select it and enter the attributes shown in the following image.

Step 18

Move to your Toolbar, set the Fill color to R=65 G=85 B=115 and make sure that the Line is invisible. Pick the Rounded Rectangle Tool and set the Radius to 1. Focus on the top, right corner of the existing shapes, create a 5 px rounded square and place it as shown in the following image.

Make sure that your tiny shape is still selected and simply tap and hold to open that context menu. Use the Copy and Paste commands to multiply your selected shape. Using the Move Tool, select the newly made copy and place it as shown in the second image - once again, the grid and the Snap to Grid feature will come in handy.

Create a bunch of new copies and arrange them in a perfectly aligned column as shown in the third image. Pick the Path Selection Tool, focus on the newly opened Tool Options pane and activate the Add to Selection mode. This mode will allow you to easily select or add new shapes to an existing selection.

Select all your rounded squares, go to the Combine pane from the Properties panel and tap that Make button. This will turn your shapes into a simple compound path that can be selected and moved much easier.

Step 19

Make sure that your compound path is still selected, focus on the Effects pane, activate the existing Drop Shadow and enter the attributes shown in the following image.

Step 20

Make sure that your compound path is still selected, keep focusing on the Effects pane, activate the existing Inner Shadow and enter the attributes shown in the following image.

Step 21

Using the Pen Tool or the Line Tool, create a 110 px, horizontal path and place it as shown in the following image. Tap and hold with a second finger while dragging to create a perfect line.

Make sure that this new path stays selected and focus on your Toolbar. Be sure that there's no color set for the Fill and then set the Line color to R=31 G=120 B=181.

Step 22

Now, if you choose to export your design as an image you will notice that your horizontal line looks pretty blurred. This simply happens because the stroke applies to that line is not perfectly aligned to the pixels grid. To fix this issue, just go back to the Canvas pane and enable that Pixel-Align Strokes feature. Nothing will change inside your Graphic document, but you'll be able to notice the difference when you export your design as an image.

Step 23

Duplicate your horizontal path and drag the copy 10 px below the existing line. Keep multiplying this path, create fifteen new copies and make sure that you're always leaving a 10 px gap between these lines.

Once you're done, reselect the Path Selection Tool and activate that Add to Selection mode. Select all your horizontal paths, focus on the Combine pane and tap the Make button. Make sure that this new compound path stays selected and go to your Toolbar. Tap the Line color well and drag the Alpha slider to 30%.

Step 24

Using the Pen Tool (or the Line Tool), create a 170 px, vertical path and place it as shown in the following image. Make sure that is stays selected and focus on your toolbar. Tap the Line color well, replace the existing color with R=255 G=85 B=84 and drag the Alpha slider to 50%.

Step 25

Focus on the right side of your Titlebar and simply tap the rightmost icon to open the Layers pane. Tap the existing layer to open that context menu, and then tap the Duplicate command.

Now, you will need a grid every 1 px. This simply means that you need to return to the Grid pane from the Properties panel, open the Grid Settings pane and enter 1 px in both Spacing boxes.

Make sure that the layer copy made a few moments ago is still selected, pick the Move Tool and select all the shapes that lie inside your selected layer. Drag them to the right and leave a 3 px gap between your selected shapes and the ones that lies in the original layer. Tap and hold with a second finger while dragging to easily move your selection on only one axis (horizontally or vertically). Once again, the grid and the Snap to Grid feature will ease your work.

With all these shapes still selected, open the Geometry pane from the Properties panel and simply tap that Flip Horizontally button.

Step 26

Keep focusing on the layer copy, select only that gradient filled rectangle and focus on the Effects pane. Select the existing Inner Shadow effects one by one and simply inverse the Y Offset attributes.

Step 27

Open the Layers panel and add a third layer using that plus button from the bottom of the panel. Tap and hold on the thumbnail of this new layer to drag it in the bottom of the panel. Make sure that this layer stays selected and move to your Toolbar.

Make sure that the Line is invisible and set the Fill color to R=169 G=198 B=217. Using the Rectangle Tool, create a 600 px square and be sure that it covers your entire canvas.

Step 28

Re-open the Layers panel and add a fourth layer using that same plus button. Drag this new layer in the top of the panel and make sure that it stays selected.

Focus on your top rounded squares and pick the Rounded Rectangle Tool. Create a 21 x 1 px shape, set the color to R=45 G=45 B=50 and place it as shown in the first image. Duplicate this thin rounded rectangle, select the copy and drag it 2 px below the original shape as shown in the following image. Seelct both shapes made in this step and simply turn them into a new compound path.

Duplicate the compound path made a few moments ago, select the copy and drag it 10 px below the original shape. Repeat this techique and create a bunch of new copies as shown in the following image. Once you're done, select this entire column of compound paths and turn them into one compound path.

Step 29

Be sure that the compound path made in the previous step is still selected and focus on the Effects pane. Activate the existing Drop Shadow effect, enter 1 in the Y box and 0 in the other two boxes and then tap the color well that stands for this effect. Make sure that the color is set the black, drag the Alpha slider to 70% and then return to the Effects pane. Simply tap the cogwheel icon that stands for your Drop Shadow effect, go to Blend Mode and then select Soft Light from that list.

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: flatnotebook.idraw