In the following tutorial you will learn how to create a soccer app interface using the Appearance panel in Adobe Illustrator. You'll create everything from the pitch, the players to the scoring system. So let's begin!
Step 1
Hit 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
Using the Rectangle Tool (M), create a 640 by 30px shape, fill it with black and place it in the top of your artboard. Continue with the Rectangle Tool (M), create a 640 by 45px shape, fill it with the linear gradient shown below and place it in the bottom of your artboard as shown in the following image.
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 second rectangle made in the previous step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and hit the down arrow once to move it 1px down. Reselect both copies, open the Pathfinder panel (Window > Pathfinder) and click on the Minus Front button. Fill the resulting shape with R=90 G=90 B=90.
Step 4
Reselect the second rectangle made in the second step and make two new 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 R=40 G=40 B=40.
Step 5
Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create five white rectangles and place them as shown in the following image. Follow the sizes pointed in the following image and make sure that you have a 10px gap between each of these shapes.
Step 6
Focus on the left, white rectangle made in the previous step and go to Effect > Stylize > Rounded Corners. Enter a 5px radius, click OK and go to Object > Expand Appearance. Select the resulting shape, make two copies in front (Control + C > Control + F > Control + F) and disable the Snap to Grid (View > Snap to Grid). 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=80 G=80 B=80.
Step 7
Select the rounded rectangle made in the beginning of the previous, focus on the Appearance panel and go to Effect > Stylize > Drop Shadow. Enter the data shown in the left window, click OK and go again to Effect > Stylize > Drop Shadow. Enter the data shown in the right window and click OK. Return to the Appearance panel and add a 1pt stroke for this shape. Select it, set its color at R=10 G=10 B=10 and align it to outside. Make sure that this shape remains selected, open the Graphic Style window and simply click on the "New Graphic Style" button. You'll need this graphic style in the next steps.
Step 8
Focus on the rest of the white rectangles, repeat the techniques mentioned in the sixth step then select all those rounded rectangles and use the graphic style saved in the previous step. Using the Type Tool (T), add the text shown in the second image. Use the "Chaparral Pro" font with the style set at Bold and the size set at 13pt. Select one of these pieces of text, focus on the Appearance panel and simply click on the Add New Fill button. Select this new fill, add the linear gradient shown in the following image and go to Effect > Stylize > Drop Shadow. Enter the data shown in the following image and click OK. Make sure that this piece of text is still selected then click again on the "New Graphic Style" button from the Graphic Styles panel. Select the rest of the text and simple click on the graphic style that you just saved.
Step 9
Select the Rounded Rectangle below the "Lineups" text, make a copy in front (Control + C > Control + F) and bring it to front (Shift + Control + ] ). Select it and focus on the Appearance panel. Remove the stroke and two Drop Shadow effects then select the fill, set its color at R=45 G=132 B=47 and change its Blending Mode to Color.
Step 10
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. Using the Rectangle Tool (M), create two, 2px squares, fill both shapes with black and place them as shown in the following image. Select these shapes and simply drag them inside the Swatches panel to turn them into pattern. Once you have your pattern you can remove those little squares from the Layers panel.
Step 11
Return to "gridline every 5px". So, go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Using the Rectangle Tool (M), create a 640 by 810px shape, fill it with white and place it as shown in the following image.
Step 12
Disable the Snap to Grid (View > Snap to Grid). Reselect the shape made 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 black and lower its Opacity to 15%.
Step 13
Reselect the shape made in the eleventh step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 3px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 10%.
Step 14
Reselect the shape made in the eleventh step and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 6px down. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with black and lower its Opacity to 5%.
Step 15
Enable the Snap to Grid (View > Snap to Grid). Reselect the three shapes made in the last three steps and go to Object > Transform > Reflect. Check the Horizontal button and click on the Copy button. Select the resulting shapes and place them as shown in the second image.
Step 16
Reselect the shape made in the eleventh step and replace the white with R=100 G=100 B=100. Focus on the Appearance panel and add two new fills for this rectangle. Select the first one and add the radial gradient shown below. Select the other new fill, lower its Opacity to 50% and add the pattern made in the tenth step. Move to the Layers panel and lock this rectangle to make sure that you won't accidentally select/move it.
Step 17
Using the Rectangle Tool (M), create a 470 by 720px shape, fill it with R=45 G=132 B=47 and place it as shown in the following image.
Step 18
Reselect the rectangle made in the previous step, focus on the Appearance panel and add a second fill. Select it, lower its Opacity to 30%, change the Blending Mode to Overlay and use the radial gradient shown in the following image.
Step 19
Reselect your green rectangle, add a third fill and select it from the Appearance panel. Make it black, lower its Opacity to 8%, change the Blending Mode to Multiply and go to Effect > Artistic > Film Grain. Enter the data shown below and click OK.
Step 20
Add a fourth fill for your green rectangle and select it from the Appearance panel. Make it white, lower its Opacity to 10%, change the Blending Mode to Multiply and go to Effect > Artistic > Sponge. Enter the data shown below and click OK.
Step 21
Reselect your green rectangle, add a 2pt Stroke Weight, set its color at R=102 G=194 B=0 and Align Stroke to Inside. Focus on the Appearance panel and add a second stroke for this shape using the Add New Stroke button. Select it, make it 1pt wide, set its color at R=0 G=85 B=34 and align it to inside.
Step 22
Reselect your green rectangle, add a new fill and drag it in the bottom of the Appearance panel. Make it black, lower its Opacity to 10% and go to Effect > Path > Offset Path. Enter a 1px Offset, click OK and go to Effect > Distort & Transform > Transform. Enter the data shown below, click OK and go to Effect > Stylize > Drop Shadow. Enter the data shown in the following image and click OK.
Step 23
Reselect your green rectangle, make sure that no fill or stroke is selected (in the Appearance panel) and go to Effect > Stylize > Rounded Corners. Enter a 5px radius, click OK and go to Effect > Stylize > Drop Shadow. Enter the data shown in the following image and click OK. Move to the Layers panel and lock this shape.
Step 24
Using the Rectangle Tool (M), create a 430 by 680px shape and place it as shown in the following image. Fill it with none, but add a 2pt, white stroke and Align Stroke to Inside. Switch to the Pen Tool (P), draw a 430px, horizontal path and place it as shown below.
Step 25
Focus on the top side of your green rectangle. Pick the Rectangle Tool(M), create a 115 by 40px shape and place it as shown in the first image. Fill it with none, but add a 2pt, white stroke and align it to inside. Continue with the Rectangle Tool (M), create a 265 by 115px shape, place it as shown in the second image and add a 2pt, white, aligned to inside stroke. Switch to the Ellipse Tool (L), create a 105 by 85px shape with a 2pt, white stroke and place it as shown in the third image.
Step 26
Reselect the second rectangle made in the previous step, make a copy in front (Control + C > Control + F) and bring it to front (Shift + Control + ] ). Select this copy along with the circle made in the previous step and click on the Minus Front button from the Pathfinder panel. Select the resulting shape, focus on the Appearance panel and make sure that the stroke is aligned to outside.
Step 27
Reselect the three shapes made in the last two steps and go to Object > Transform > Reflect. Check the Horizontal button and click on the Copy button. Select the resulting shapes and place them as shown in the second image.
Step 28
Using the Ellipse Tool (L), create a 120px circle and place it as shown in the first image. Fill it with none, but add a 2pt, white, aligned to inside stroke. Select this new shape and go to Object > Path > Offset Path. Enter a -58px Offset and click OK.
Step 29
Focus on the top side of your green rectangle. Using the Ellipse Tool (L), create two, 20px circles and place them as shown in the first image. Add a 2pt, white stroke for these new shapes. Switch to the Direct Selection Tool (A) and focus on the left circle. Select the top and the left anchor points and simply hit the Delete key from your keyboard. Move to the right circle, select the top and the right anchor points and delete them.
Step 30
Focus on the bottom side of your green rectangle. Using the Ellipse Tool (L), create two, 20px circles and place them as shown in the first image. Add a 2pt, white stroke for both shapes. Switch to the Direct Selection Tool(A) and focus on the left circle. Select the bottom and the left anchor point and delete them. Move to the right circle and remove the bottom and the right anchor points.
Step 31
Select all the shapes with a white stroke and go to Object > Path > Outline Stroke. Select the resulting shapes and click on the Unite button from the Pathfinder panel. Lower the Opacity of the resulting path to 90% and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK. Move to the Layers panel and lock this shape.
Step 32
For the following steps 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 28 by 42px shape, fill it with R=255 G=221 B=23 then go to Object > Path > Add Anchor Points twice. Switch to the Direct Selection Tool (A) and focus on the top side of this yellow rectangle. Select the left and the right anchor points and simply drag them 2px down. Reselect this yellow shape and go to Effect > Warp > Arc Lower. Enter the data shown below, click OK and go to Object > Expand Appearance.
Step 33
Using the Rectangle Tool (M), create two, 17 by 16 shapes and place them as shown in the first image. Fill both shapes with R=255 G=221 B=23. Switch to the Direct Selection Tool (A) and focus on the left rectangle. Select top, left anchor point and move it 5px down and 3px to the left. Move to the right rectangle, select the right anchor point and move it 5px down and 3px to the right. Reselect both shapes along with the other yellow shape made in the previous step and click on the Unite button from the Pathfinder panel.
Step 34
Using the Ellipse Tool (L), create a 12 by 7px shape and place it as shown in the first image. Select it along with the yellow path and click on the Minus Front button from the Pathfinder panel. Select the resulting shape and go to Effect > Stylize > Rounded Corners. Enter a 1px radius, click OK and go to Object > Expand Appearance.
Step 35
Reselect the yellow shape and make a copy in front (Control + C > Control + F). Using the Ellipse Tool (L), create a 14px circle, fill it with R=157 G=18 B=17 and place it as shown in the second image. Select this red shape along with the copy made in the beginning of the step and click on the Intersect button from the Pathfinder panel.
Step 36
Reselect the yellow shape and make a copy in front (Control + C > Control + F). Using the Ellipse Tool (L), create a 10 by 12px shape, fill it with R=255 G=186 B=0 and place it as shown in the second image. Select this orange shape along with the copy made in the beginning of the step and click on the Intersect button from the Pathfinder panel.
Step 37
Disable the Snap to Grid (View > Snap to Grid). Reselect the shape made 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 R=157 G=18 B=17.
Step 38
Reselect the yellow shape, focus on the Appearance panel and add three strokes. Select the bottom one, set its color at R=157 G=18 B=17, make it 4pt wide, align it to inside and lower its Opacity to 10%. Select the middle stroke, set its color at R=157 G=18 B=17, make it 2pt wide, align it to inside and lower its Opacity to 10%. Select the top stroke, set its color at R=157 G=18 B=17, make it 1pt wide, align it to inside and lower its Opacity to 10%. Keep focusing on the Appearance panel, select the fill and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.
Step 39
Reselect your yellow shape, 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 left window, click OK and go again to Effect > Stylize > Drop Shadow. Enter the data shown in the right window and click OK.
Step 40
Using the Type Tool (T) and add a simple number as shown below. Use the American Purpose font with the size set at 20pt and the color set at R=157 G=18 B=17. Enable the Snap to Grid (View > Snap to Grid), switch to the Ellipse Tool (L), create a 30 by 6px shape and place it as shown in the following image. Fill it with black, lower the Opacity to 20% then send it to back (Shift + Control + [ ) and go to Effect > Blur > Gaussian Blur. Enter a 5px radius and click OK. Select the piece of text and the shape added in this step along with the shapes made in the last eight steps and Group them (Control + G). This will be the soccer shirt.
Step 41
Reselect the group made in the previous step and make a copy in front (Control + C > Control + F). Focus on this copy and replace the existing colors with the ones pointed in the following image.
Step 42
Make a new copy of the group made in the previous step and replace the existing colors with the ones pointed in the following image.
Step 43
Return to "gridline every 5px". So, go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box. Enable the Rulers (Control + R) and draw six horizontal guides as shown in the following image.
Step 44
Multiply those shirt groups and spread them as shown in the following image. The guides added in the previous step will help you align them properly. When you're done get rid of those guides.
Step 45
Switch to "gridline every 1px". Using the Rectangle Tool (M), create a 4 by 7px and fill it with black. Continue with the Rectangle Tool(M), create an 8 by 5px shape, fill it with black and place it as shown in the second image. Switch to the Direct Selection Tool(A) and focus on this second rectangle. Select the top anchor point and go to Object > Path > Average (Alt + Control + J). Check the Both button and click OK. This should turn your rectangle into a triangle. Select it along with the other rectangle and click on the Unite button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image.
Step 46
Reselect the shape made in the previous step and go to Effect > Stylize > Rounded Corners. Enter a 1px radius, click OK and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK. Make sure that this shape is still selected, focus on the Appearance panel and add a 1pt stroke. Set its color at R=0 G=104 B=56 and align it to inside.
Step 47
Reselect the shape edited in the previous step and make a copy in front (Control + C > Control + F). Select it, rotate it 180 degrees and drag it to the left as shown below. Also, focus on the Appearance panel and replace the existing colors with the ones pointed in the following image. Select both arrows and Group them (Control + G). This will be the substitution symbol.
Step 48
Multiply the group made in the previous step and spread the copies as shown in the following image.
Step 49
Using the Rectangle Tool (M), create an 8 by 11px shape and fill it with the linear gradient shown in the following image. Select this new shape and go to Effect > Stylize > Rounded Corners. Enter a 2px radius, click OK and go to Effect > Stylize > Drop Shadow. Enter the data shown below, click OK and focus on the Appearance panel. Add a 1pt stroke, set its color at R=2555 G=186 B=0 and align it to inside. This will be the yellow card.
Step 50
Reselect the rectangle made in the previous step and make a copy in front (Control + C > Control + F). Select it, focus on the Appearance panel and replace the existing color with the ones pointed in the following image. This will be the red card.
Step 51
Multiply the shapes made in the last two steps and book some of those players as shown in the following image.
Step 52
Using the Ellipse Tool (L), create an 11px circle and fill it with black. Select this new shape, focus on the Appearance panel and add a second, black fill. Select the bottom fill and go to Effect > Stylize > Drop Shadow. Enter the data shown in the left window, click OK and go again to Effect > Stylize > Drop Shadow. Enter the data shown in the right window and click OK. Return to the Appearance panel, select the top fill, lower its Opacity to 30%, change the Blending Mode to Soft Light and go to Effect > Path > Offset Path. Enter a 1px Offset and click OK.
Step 53
Next, you'll need this vector soccer ball freebie from VectorTuts+. Drag it inside your AI file, resize it to 11 by 11px and place it as shown in the following image. Select it along with the circle made in the previous step and Group them (Control + G).
Step 54
Multiply the group made in the previous step and spread the copies as shown in the following image.
Step 55
Return to "gridline every 5px". Using the Rectangle Tool (M), create a 470 by 10px shape, fill it with black, place it as shown in the first image and go to Effect > Stylize > Rounded Corners. Enter a 3px radius, click OK and go to Object > Expand Appearance. Continue with the Rectangle Tool (M), create a 20 by 15px shape, fill it with black, place it as shown in the second image and go to Effect > Stylize > Rounded Corners. Enter a 5px radius, click OK and go to Object > Expand Appearance.
Step 56
Switch to "gridline every 1px" and focus on the second rounded rectangle made in the previous step. Using the Rectangle Tool (M), create a 2 by 5px shape, fill it with white and place it as shown in the first image. Continue with the Rectangle Tool (M), create a 5 by 2px shape, fill it with white and place it as shown in the second image. Select both rectangle and click on the Unite button from the Pathfinder panel. Select the resulting shape and go to Object > Transform > Rotate. Enter a 45 degrees angle and click OK.
Step 57
Open the Align panel (Window > Align). With the Selection Tool (V), select the shape made in the previous step along with the second rounded rectangle made in the fifty-fifth step. Click on the border of the rounded rectangle (it should get emphasized) then simply click on the Horizontal Align Center and Vertical Align Center buttons from the Align panel. In the end your white arrow shape should be placed as shown in the second image.
Step 58
Reselect the two shapes made in the fifty-fifth step and click on the Unite button from the Pathfinder panel. Select the resulting shape 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 R=80 G=80 B=80. Reselect the black shape made in the beginning of the step and simply click on the graphic style saved in the seventh step.
Step 59
Reselect the arrow shape made in the fifty-sixth step and focus on the Appearance panel. Replace the white with R=205 G=205 B=205 then add a 1pt stroke and set its color at R=10 G=10 B=10. Keep focusing on this shape, make sure that no fill or stroke is selected and go to Effect > Stylize > Rounded Corners. Enter a 1px radius, click OK and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.
Step 60
Return to "gridline every 5px". Using the Rectangle Tool (M), create a 130 by 15px shape, place it as shown in the first image and go to Effect > Stylize > Rounded Corners. Enter a 5px radius, click OK and go to Object > Expand Appearance. Select the resulting shape, make two copies in front (Control + C > Control + F > Control + F) and disable the Snap to Grid (View > Snap to Grid). 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=80 G=80 B=80. Reselect the rounded rectangle made in the beginning of the step and add the graphic style saved in the seventh step.
Step 61
Focus on the shapes made in the previous step, with the Type Tool (T), add a simple text as shown in the first image. Use the "Chaparral Pro" font with the style set at Bold and the size set at 10px. Select this piece of text and simply click on the graphic style saved in the eighth step.
Step 62
Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create a 640 by 75px shape, fill it with the linear gradient shown below and place it as shown in the first image. Select this rectangle, make two copies in front (Control + C > Control + F > Control + F) and disable the Snap to Grid (View > Snap to Grid). 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 black.
Step 63
Reselect the first rectangle made in the previous step and make two 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 R=80 G=80 B=80.
Step 64
Reselect the first rectangle made in the sixty-second 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 R=80 G=80 B=80.
Step 65
Reselect the first rectangle made in the sixty-second step 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 black.
Step 66
Enable the Snap to Grid (View > Snap to Grid). Using the Rectangle Tool (M), create a 175 by 35px shape, place it as shown in the first image and go to Effect > Stylize > Rounded Corners. Enter a 17px radius, click OK and go to Object > Expand Appearance. Disable the Snap to Grid (View > Snap to Grid) then select the resulting shape 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 R=80 G=80 B=80. Reselect the rounded rectangle made in the beginning of the step and add the graphic style saved in the seventh step.
Step 67
Focus on the shapes made in the previous step, with the Type Tool (T) and add tour text as shown in the first image. Use the "Extrangelo Edessa" font with the size set at 20px. Select this piece of text, add the graphic style saved in the eighth step then Group it (Control + G) along with the two shapes made in the previous step.
Step 68
Enable the Snap to Grid (View > Snap to Grid) and duplicate the group made in the previous step (Control + C > Control + F). Select this new group, drag it to the right and place it as shown in the first image. Get a copy of the yellow and the blue shirts and place them as shown in the second image. Make sure that you remove the numbers from the shirt.
Step 69
Disable the Snap to Grid (View > Snap to Grid). Using the Type Tool (T) and add the score. Use the "Chaparral Pro" font with the style set at bold and the size set at 30pt. Select these pieces of text, focus on the Appearance panel, add a new fill and use the linear gradient shown below. Select it and go to Effect > Stylize > Drop Shadow. Enter the data shown in the left window, click OK and again to Effect > Stylize > Drop Shadow. Enter the data shown in the right window and click OK.
Step 70
Enable the Snap to Grid (View > Snap to Grid) and switch to "gridline every 1px". Using the Rectangle Tool (M), create a 1 by 73px shape, fill it with black and place it as shown in the first image. Select it, and go to Effect > Stylize > Drop Shadow. Enter the data shown below, click OK and you're done.
Conclusion
Now your work is done. Here is how it should look.
