Advertisement

How to Create a School App Interface with Adobe Illustrator

by

In this tutorial, you will learn how to use the Appearance Panel, different drawing techniques and how to style text to create a school themed application interface. Let's begin!


Step 1

Press Control + 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 your click OK. Now, turn on the Grid (View > Grid) and the Snap to Grid (View > Snap to Grid).

Next, you'll need a grid every 5px. Go to Edit > Preferences > Guides & Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box. 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. Al these options will significantly increase your work speed.


Step 2

Pick the Rectangle Tool (M), create a 75 by 40px shape and fill it with the liner gradient shown in the following image. The white number from the gradient image stands for location percentage.


Step 3

Disable the Snap to Grid (View > Snap to Grid) then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px. Select the shape created in the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px down and to the left using the left and down arrows from your keyboard.

Select both copies, open the Pathfinder panel and click on the Minus Front button. Fill the resulting shape with white. Reselect the shape created in the previous step and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px to the right using the right arrow. Select both copies and click on the Minus Front button from the Pathfinder panel. Again, fill the resulting shape with white.


Step 4

Reselect both shapes created in the previous step and unite them using the Unite button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image and change its blending mode to Overlay. The yellow zero from the gradient image stands opacity percentage.


Step 5

Enable the Snap to Grid (View > Snap to Grid). Pick the Rectangle Tool (M), create a 10 by 40px shape, fill it the linear gradient shown in the following image and place it as shown in the first image. Focus on this new shape and grab the Direct Selection Tool (A). Select the right anchor points and drag them 5px up. The Snap to Grid will ease your work. In the end your shape should look like in the second image.


Step 6

Disable the Snap to Grid (View > Snap to Grid). Select the shape created in the previous step and make two copies in front (Control + C > Control + F > Control + 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 white.

Focus on this new shape, grab the Delete Anchor Point Tool (-) and remove the bottom, right anchor points simply by clicking on it. Keep focusing on this white shape, replace the flat color used for the fill with the linear gradient shown in the fifth image and change its blending mode to Overlay. Remember that the yellow zero from the gradient image stands opacity percentage.


Step 7

Enable the Snap to Grid (View > Snap to Grid). Reselect the two shapes created in the last two steps and go to Object > Transform > Reflect. Check the Vertical button then click on the Copy button. This will create a horizontally flipped copy of the selected shapes. Select these new shapes, drag them to the left and place them as shown in the second image. Again, the Snap to Grid will ease your work.


Step 8

Pick the Rectangle Tool (M), create a 75 by 5px shape, fill it with the linear gradient shown in the following image and place it as shown in the first image. Focus on this new shape and grab the Direct Selection Tool (A). Select the top, right anchor point and move it 10px to the right then select the top, left anchor point and move it 10px to the left. In the end your shape should look like in the second image.


Step 9

Pick the Rectangle Tool (M), create a 45 by 10px shape, fill it with the linear gradient shown in the following image and place it as shown in the first image. Focus on this new shape, grab the Add Anchor Point Tool (+) and add two new anchor points as shown in the second image. Once again, the Snap to Grid will make things a lot easier for you. Switch to the Direct Selection Tool (A), select these new anchor points and drag them 5px down. In the end your shape should look like in the third image.


Step 10

Disable the Snap to Grid (View > Snap to Grid). Select the shape created in the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=217 G=0 B=9 and change its blending mode to Multiply.


Step 11

Reselect the shape created in the ninth step, make a copy in front (Control + C > Control + F) and move it 1px up. Select this copy, make a new one (Control + C > Control + F) and move it 1px. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white. Focus on this new shape, grab the Delete Anchor Point Tool (-) and remove the top, left and the top, right anchor points. Make sure that this white shape is still selected and change its blending mode to Overlay.


Step 12

Select all the shapes created so far and group them (Control + G). Move to the Layers panel, select this new group and go to Effect > Stylize > Drop Shadow. Enter the data shown in the left window, click OK then go again to Effect > Stylize > Drop Shadow. Enter the data shown in the right window and click OK.


Step 13

Enable the Snap to Grid (View > Snap to Grid). Pick the Ellipse Tool (L), create a 125px circle, fill it with the radial gradient shown below and place it as shown in the following image.


Step 14

Disable the Snap to Grid (View > Snap to Grid). Reselect the shape created in the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1p down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white and lower its opacity to 50%.


Step 15

Reselect the 125px circle and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1p up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=100 G=0 B=9 and lower its opacity to 75%.


Step 16

Enable the Snap to Grid (View > Snap to Grid). Reselect the 125px circle and go to Object > Path > Offset Path. Enter a -5px Offset and click OK. Select the resulting shape and make a copy in front (Control + C > Control + F). Pick the Ellipse Tool (L), create a 125 by 115px shape and place it as shown in the third image. Select this new shape along with the copy of the shape created in beginning of the step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its opacity to 15% and change its blending mode to Overlay.


Step 17

Pick the Ellipse Tool (L), create a 145 by 105px shape and place it as shown in the first image. Select it along with the remaining shape created in the beginning of the previous step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white, lower its opacity to 30% and change the blending mode to Overlay.


Step 18

Reselect your 125px circle, focus on the Appearance panel and add a second fill using the Add New Fill button. Select this new fill, add the radial gradient shown in the following image, lower its opacity to 30% and go to Effect > Path > Offset Path. Enter a -3px Offset and click OK.


Step 19

Make sure that your circle stays selected, focus on the Appearance panel and add a third fill. Select it, add the radial gradient shown in the following image, lower its opacity to 50% and go to Effect > Path > Offset Path. Enter a -2px Offset and click OK.


Step 20

Keep focusing on the Appearance panel and add a fourth fill for your circle. Select it, add the radial gradient shown in the following image, lower its opacity to 30% and go to Effect > Path > Offset Path. Enter a -2px Offset and click OK.


Step 21

Add a 1pt stroke for your circle, set its color at R=180 G=0 B=9 and align it to outside. Focus on the Appearance panel, make sure that no fill or stroke is selected and go to Effect > Stylize > Drop Shadow. Enter the data shown in the left window, click OK then go again to Effect > Stylize > Drop Shadow. Enter the data shown in the right window and click OK.


Step 22

Pick the Ellipse Tool (L), create a 55 by 20px shape, fill it with white and place it as shown in the following image. Lower its opacity to 20%, change the blending mode to Overlay and go to Effect > Warp > Arc. Enter the data shown below and click OK.


Step 23

Pick the Ellipse Tool (L), create a 15px circle, fill it with the linear gradient shown below and place it as shown in the following image.


Step 24

Disable the Snap to Grid (View > Snap to Grid). Select the shape created in the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=88 G=88 B=88 and change its blending mode to Overlay.


Step 25

Reselect your 15px circle and make two new copies in front (Control + C > Control + F > Control + 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 the linear gradient shown in the following image and change its blending mode to Overlay.


Step 26

Reselect your 15px circle and go to Object > Path > Offset Path. Enter a 2px Offset and click OK. Select the resulting shape and make a copy in back (Control + C > Control + B). Move to the Layers panel, select this copy and move it 1px up. Reselect both shapes created in this step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with white, lower its opacity to 40% and go to Effect > Blur > Gaussian Blur. Enter a 1px radius and click OK.


Step 27

Reselect your 15px circle and go to Object > Path > Offset Path. Enter a 2px Offset and click OK. Select the resulting shape, make a copy in front (Control + C > Control + F) and move it 1px up. Reselect both shapes created in this step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=100 G=0 B=9, lower its opacity to 30% and go to Effect > Blur > Gaussian Blur. Enter a 1px radius and click OK.


Step 28

Pick the Ellipse Tool (L) and simply click somewhere on your artboard. Enter 5 in the width box and 3 in the height box then click OK. Obviously, this will create a 5 by 3px shape. Place it as shown in the following image, fill it with white, change its blending mode to Soft Light and go to Effect > Warp > Arc. Enter the data shown below and click OK.


Step 29

Reselect your 15px circle and add the two Drop Shadow effects shown in the following image.


Step 30

Enable the Snap to Grid (View > Snap to Grid). 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 6 by 13px shape, fill it with the linear gradient shown below and place it as shown in the following image.


Step 31

Focus on the shape created in the previous step and grab the Direct Selection Tool (A). Select the right anchor points, drag them 3px up then go to Effect > Stylize > Rounded Corners. Enter a 1px radius, click OK and go to Object > Expand Appearance.


Step 32

Disable the Snap to Grid (View > Snap to Grid). Select the shape created in the previous step and make two copies in front (Control + C > Control + F > Control + 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=120 G=0 B=9. Reselect the shape created in the previous step and go to Effect > Stylize > Drop Shadow. Enter the data shown in the following image and click OK.


Step 33

Enable the Snap to Grid (View > Snap to Grid) and return to "gridline every 5px". So, go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Pick the Ellipse Tool (L), create a 125px circle and place it as shown in the first image. Fill it with none but add a 6pt stroke. Grab the Direct Selection Tool (A), select the two anchor points highlighted in the first image and Press the Delete key from your keyboard. The resulting path should look like in the second image. Select it and go to Object > Path > Outline Stroke.


Step 34

Pick the Ellipse Tool (L), create a 20px circle, fill it with the radial gradient shown below and and place it as shown in following image.


Step 35

Again, 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) and create a simple rectangle that covers the grey path as shown in the first image. Select it along with the grey shape (created in step #33) and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the third image and make two copies in front (Control + C > Control + F > Control + F). You'll need them in the following steps.


Step 36

Return to "gridline every 5px". So, go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Reselect your grey circle and go to Object > Path > Offset Path. Enter a 1px Offset and click OK. Select the resulting shape along with one of the copies created in the finale of the previous step and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with R=100 G=0 B=9 and lower its opacity to 40%. Move to the Layers panel and drag this new shape below the grey circle.


Step 37

Reselect your grey circle and go to Object > Path > Offset Path. Enter a 2px Offset and click OK. Select the resulting shape along with the other copy created in the finale of step #35 and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with R=100 G=0 B=9 and lower its opacity to 40%. Again, move to the Layers panel and drag this new shape below the grey circle.


Step 38

Disable the Snap to Grid (View > Snap to Grid). Reselect the shape created in step #35 and make two copies in front (Control + C > Control + F > Control + 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 the linear gradient shown in the following image and change its blending mode to Overlay.


Step 39

Reselect the shape created in step #35 and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the R=100 G=0 B=9 and lower its opacity to 50%.


Step 40

Reselect the shape created in step #35 and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px up. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the R=100 G=0 B=9 and lower its opacity to 50%.


Step 41

Focus on the grey circle, select it and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1px up and to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its opacity to 15% and change the blending mode to Multiply.


Step 42

Reselect the grey circle and make two new copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px up and 2px to the left. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black, lower its opacity to 5% and change the blending mode to Multiply.


Step 43

Enable the Snap to Grid (View > Snap to Grid). First, select your grey circle and make a copy in front (Control + C > Control + F). Next, pick the Ellipse Tool (L), create 10px circle and place it as shown in the second image. Select this new shape along with the copy of the grey circle and click on the Intersect button from the Pathfinder panel. Fill the resulting shape with white and lower its opacity to 25%.


Step 44

Reselect your grey circle, make a copy in front (Control + C > Control + F) and bring it to front (Shift + Control + ] ). Fill this new shape with the radial gradient shown in the following image and change its blending mode to Overlay.


Step 45

Select all the shapes created in the last twelve steps and group them (Control + G). Select this new group and add the two Drop Shadow effects shown in the second image.


Step 46

Select all the shapes created so far and group them (Control + G). This will be your school bell. Move to the Layers panel and make it invisible.


Step 47

Focus on your entire artboard. Pick the Rectangle Tool (M) and create a 640 by 30px shape. Fill it with black and place it in the top of the artboard, as shown in the following image.


Step 48

Pick the Rectangle Tool (M) and create a 930 by 640px shape. Fill it with the radial gradient shown below and place it as shown in the following image.


Step 49

Reselect the shape crated in the previous step, focus on the Appearance panel and add a second fill. Make it black, lower its opacity to 15%, change the blending mode to Multiply and go to Effect > Sketch > Note Paper. Enter the data shown below and click OK. Keep focusing on the Appearance panel and add a third fill for your shape. You will need a built in pattern for this new fill.

Move to the Swatches panel, open the fly-out menu and go to Open Swatch Library > Patterns > Basic Graphics > Basic Graphics_Textures. This should open a new window with a simple set of built-in pattern. You will only need the “Diamond” pattern. Return to the Appearance panel, select that third fill, add the “Diamond” pattern, lower its opacity to 10%, change the blending mode to Multiply and go to Effect > Artistic > Film Grain. Enter the data shown below and click OK.


Step 50

Disable the Snap to Grid (View > Snap to Grid). Move to the Layers panel and turn on the visibility for your school bell. Select it, place it as shown in the fist image then re-size it using the Transform panel. First, make sure that the "Constrain Width and Height Proportions" button is checked then simply enter 230 in the width box.


Step 51

Pick the Type Tool (T) and add the text shown in the following image. Use the "Bradley Hand ITC font", set the size at 60px and the color at R=169 G=124 B=80. Select this text and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.


Step 52

Enable the Snap to Grid (View > Snap to Grid). Pick the Rectangle Tool (M), create a 160 by 210px shape, fill it with none but add a 10px stroke. Set its color at R=196 G=154 B=108 and align to inside. Make sure that this new shape is still selected and go to Object > Path > Offset Path. Enter a -10px radius and click OK. Select the resulting shape, decrease the stroke size to 5pt and set its color at R=86 G=65 B=52.


Step 53

Reselect the second rectangle created in the previous step and go to Object > Path > Offset Path. Enter a -5px Offset and click OK. Fill the resulting shape with R=58 G=90 B=77, remove the color from the stroke and go to Effect > Stylize > Rounded Corners. Enter a 10px radius, click OK and go to Object > Expand Appearance.


Step 54

Reselect the shape created in the previous step and add a second fill. Select it from the Appearance panel, lower its opacity to 50% and add the radial gradient shown in the following image.


Step 55

Reselect the shape created in the previous step and add a third fill. Select it, make it black, lower its opacity to 5%, change the blending mode to Multiply and go to Effect > Artistic > Film Grain. Enter the data shown below and click OK. Make sure that your shape is still selected and focus on the Appearance panel. Add a 2pt stroke, align it to inside, set its color at R=114 G=141 B=132 and lower the opacity to 70%. Keep focusing on the Appearance panel and add a second stroke for this shape. Make it 1pt wide, set its color at R=37 G=61 B=48 and align it to inside.


Step 56

Reselect the shape edited in the previous step and add a new fill. Drag it in the top of the Appearance panel (above the strokes), lower its opacity to 30%, change the blending mode to Multiply and use the linear gradient shown in the following image.


Step 57

Reselect the shape edited in the previous step, focus on the Appearance panel, make sure that no fill or stroke is selected and go to Effect > Stylize > Inner Glow. Enter the data shown below and click OK.


Step 58

Reselect the second rectangle created in step #52 (the one with the 5p stroke) and go to Effect > Stylize > Rounded Corners. Enter a 15px radius, click OK and go to Object > Path > Outline Stroke. Fill the resulting shape with the linear gradient shown in the following image.


Step 59

Reselect the shape created in the previous step, focus on the Appearance panel and add a second fill. Select it, add the linear gradient shown in the following image, lower its opacity to 30% and go to Effect > Path > Offset Path. Enter a -1.5px Offset and click OK.


Step 60

Reselect the first rectangle created in step #52 and go to Effect > Stylize > Rounded Corners. Enter a 25px radius, click OK and go to Object > Path > Outline Stroke. Select the resulting shape and click on the Unite button from the Pathfinder panel. This will allow you to add an aligned to inside stroke for this new compound path. Select it, make sure that it's filled with R=196 G=154 B=108 then add a second fill. Select this new fill, make it black, lower its opacity to 7%, change the blending mode to Multiply and go to Effect > Sketch > Graphic Pen. Enter the data shown below and click OK. Add a third fill for this shape and select it. Use the linear gradient shown in the following image, lower its opacity to 75% and change the blending mode to Overlay then go to Effect > Path > Offset Path. Enter a -4.5px Offset and click OK.


Step 61

Reselect the shape edited in the previous step and add two stroke. Select the bottom one, make it 2pt wide, set its color at R=225 G=204 B=162 and align it to inside. Select the top one, make it 1pt wide, set its color at R=139 G=194 B=60 and align it to inside. Return to the Appearance panel, make sure that no fill or stroke is selected and go to Effect > Stylize > Inner Glow. Enter the data shown below and click OK.


Step 62

Reselect the three shapes created and edited in the last ten steps and make a copy in back (Control + C > Control + B). Move to the Layers panel, select these copies and click on the Unite button from the Pathfinder panel. Fill the resulting shape with black then add the three Drop Shadow effects shown in the following image.


Step 63

Pick the Type Tool (T) and add a simple number. Now, this is where things might get a bit tricky. Select your numbers, focus on the toolbar and remove the color from the fill. This should make your number invisible. Keep it selected, move to the Appearance panel and simply add a new fill using the Add new Fill. Make it white. Now, your numbers should be visible. Return to the Appearance panel, select that white fill, lower its opacity to 30% and go to Effect > Stylize > Scribble. Enter the data shown below and click OK.


Step 64

Reselect your number, focus on the Appearance panel and add a second fill. Select it, make it white, lower its opacity to 80% and go to Effect > Stylize > Scribble. Enter the data shown below and click OK.


Step 65

Reselect your number, focus on the Appearance panel and add a 1pt, white stroke. Select it, lower its opacity to 70% and go to Effect > Distort & Transform > Roughen. Enter the data shown below and click OK.


Step 66

Reselect the number along with all the shapes that make up the little chalkboard and group them (Control + G). Make a copy of this group and drag it to the right as shown in the following image. Finally, you can easily edit the number using the Type Tool (T).


Conclusion

Now your work is done. Here is how it should look. I hope you've enjoyed this tut.

Advertisement
Related Posts