Advertisement

Create a Golf Themed, Vector Illustration

by

In the following tutorial you will learn how to create a vector golf illustration. It includes creating a golf hole scene, complete with numbered flag for the hole and a cutout section of turf where the golf ball has landed. You'll also learn to illustrate some dynamic text that fits well with the illustration's theme.


Step 1

Hit Command + N to create a new document. Enter 700 in the width box and 500 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 10px. Go to Edit > Preferences > Guides & Grid, enter 10 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. All these options will significantly increase your work speed.



Step 2

Pick the Ellipse Tool (L) and create a 300 by 100px shape. Fill it with R=0, G=148, B=68. Now remove the color from the stroke and go to Effect > Distort & Transform > Zig Zag. Enter the data shown below, click OK and go to Effect > Distort & Transform > Roughen. Again, enter the data show below, click OK and apply Object > Expand Appearance.



Step 3

Reselect the shape made in the previous step and go to Effect > 3D > Extrude & Bevel. Click on the More Options button and enter the data shown below.

Do not forget to check the "Draw Hidden Faces" box from the bottom of this window. It's really important. Now click OK and go to Object > Expand Appearance. Move to the Layers panel (Window > Layers) and you will find a new group.



Step 4

Move to the Layers panel and focus on the group created in the previous step. Click on the little arrow so that you can see the content of your group. It should contain five subgroups.

First, select the two, bottom subgroups and delete them. Next, select the second subgroup and hit the Unite button from the Pathfinder panel. Reselect the entire group and hit Shift + Command + G a few times until you get rid of all the groups.

In the end you should have three simple shapes inside your Layers panel. Don't worry if you can only spot two of them. The third one is hidden behind those two. Select the top, visible shape and go to the Layers panel. Double-click on it and enter "Top" in the Name box. Select the bottom, visible shape and name it "Bottom".

Finally, select the hidden shape from the Layers panel and name it "Back". Make sure that this final shape is placed in the bottom of the Layers panel.



Step 5

Disable the Snap to Grid (View > Snap to Grid), then got Edit > Preferences > General, and make sure that the Keyboard Increment is set at 1px.

Move to the Layers panel and focus on the "Back" shape. Select it, fill it with black and make a copy in front (Command + C > Command + F). Select this copy, lower its Opacity to 10%, then hit the down arrow three times and the left arrow ten times.



Step 6

Reselect "Back", make a new copy in front (Command + C > Command + F) and select it. Hit the down arrow three times and the right arrow ten times. Next, lower its Opacity to 40% and go to Effect > Blur > Gaussian Blur. Enter a 15px radius and click OK.



Step 7

Reselect the shape made in the previous step and make a copy in front. Select this copy and move to the Appearance panel. Remove the Gaussian Blur effect and lower the Opacity to 5%. Move to the Layers panel, select the original "Back" shape, lower its Opacity to 80% and go to Effect > Blur > Gaussian Blur. Enter a 3px radius and click OK.



Step 8

Re-enable the Snap to Grid (View > Snap to Grid). Pick the Rectangle Tool (M) and create a 5 by 50px shape. Fill it with white, place it as shown in the first image, and go to Effect > Distort & Transform > Transform. Enter the data shown below, click OK and go to Object > Expand Appearance. Select the resulting group of shapes and go to Object > Compound Path > Make. This will turn your group of shapes into one, simple path.



Step 9

Select the "Bottom" shape, make a copy in front (Command + C > Command + F), bring it to front (Shift + Command + Right Bracket key), and fill it with white. Select this fresh copy, along with the path created in the previous step, and go to the Transparency panel. Open the fly-out menu and click on Make Opacity Mask. In the end your path should look like the final image shown.



Step 10

Reselect the masked path from the previous step. Lower its Opacity to 80%, change the blending mode to Overlay and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK.



Step 11

Disable the Snap to Grid (View > Snap to Grid). Reselect "Bottom", make two copies in front (Command + C > Command + F > Command + F), and bring them to front (Shift + Command + Right Bracket key).

Select the top copy and hit the up arrow five times. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=0, G=76, B=35. Now lower its Opacity to 80% and change the blending mode to Overlay.



Step 12

Select the "Bottom" layer and fill it with the linear gradient shown in the first image. The white number from the gradient image stands for Location percentage. Reselect "Bottom", move to the Appearance panel, and click on the Add New Fill button. It's the little, white square from the bottom of the Appearance panel.

Obviously, this will add a new fill for your shape. Select it from the Appearance panel, 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.



Step 13

Take a closer look at the edges of "Bottom" and you'll notice that they're a bit pixelated. It's because of the Film Grain effect. It's not a big deal, but it's good to get rid of it. Here is one way you can do it: Select "Bottom" and make a copy in front. Select this copy and hit the D key from your keyboard. This will add the default properties (white fill and black stroke) for your copy.

Now, Remove the stroke. Select this white shape along with the original "Bottom" shape and go to the Transparency panel. Open the fly-out menu and click on Make Opacity Mask. Have a new look at the edges of "Bottom" and notice how the pixelated edges are gone. Remember this techniques, you will have to use it a few more times in the following steps.



Step 14

Move to the "Top" shape. Select it and make two copies in front. Select the top copy and hit the up arrow once. 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 third image.



Step 15

Reselect "Top" and go to Object > Path > Offset Path. Enter a -3px Offset and click OK. Select the resulting shape and make a copy in front. Select this copy and hit the up arrow once.

Reselect the two shapes created in this step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image and lower its Opacity to 60%. The yellow zeros from the gradient image stand for Opacity percentage.



Step 16

Reselect "Top" and go to Object > Path > Offset Path. Enter a -6px Offset and click OK. Select the resulting shape and make a copy in front.

Select this copy and hit the up arrow once. Reselect the two shapes created in this step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the final image and lower its Opacity to 30%.



Step 17

Select "Top" and fill it with the linear gradient shown in the first image. Add a second fill for this path and select it from the Appearance panel. Make it black, lower its Opacity to 7%, change the blending mode to Multiply and go to Effect > Artistic > Film Grain. Enter the data shown below and click OK.



Step 18

Again, you need to get rid of those pixelated edges. Make a copy of "Top", fill it with white and use it to mask the original "Top" shape. Basically, you need to repeat the techniques used in step 13.



Step 19

Pick the Ellipse Tool (L) and simply click somewhere on your artboard. Enter 25 in the width box and 10 in the height box, then click OK. This will create a 25 by 10px shape. Place it as shown in the first image. Fill it with R=147, G=149, B=152. Now add a second fill and use the linear gradient shown below.

Make sure that this ellipse is still selected and go to Object > Path > Offset Path. Enter a 1px Offset and click OK. Select the resulting shape and go to the Appearance panel. Remove the second fill, then select the remaining fill and use the linear gradient shown in the second image.



Step 20

Select the first shape created in the previous step and make two copies in front. Select the top copy and hit the down arrow twice. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting shape and go to the Appearance panel. Remove the extra fill, then select the remaining fill and use the linear gradient shown in the second image.



Step 21

Select the first shape created in the nineteenth step and make two copies in front. Select the top copy, then hit the up arrow and the left arrow twice. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting shape and go to the Appearance panel. Remove the extra fill, then select the remaining fill. Make it black and lower its Opacity to 5%.



Step 22

Re-enable the Snap to Grid. For the following step you will need a grid every 5px. Go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box.

Pick the Rectangle Tool (M), create a 5 by 40px shape, fill it with the linear gradient shown below and add a 0.5pt stroke. Align it to inside and set its color at R=188, G=190, B=192.

Reselect the entire path and go to Effect > Warp > Arc Upper. Enter the data shown below, click OK and go to Effect > Warp > Arc Lower. Again, enter the data shown below and click OK. In the end your shape should look like the following image.



Step 23

Pick the Rectangle Tool (M), create a 5 by 40px shape, and place it as shown in the following image. Fill it with the linear gradient shown below and add a 0.5pt stroke.

Align it to inside and set its color at R=150, G=30, B=45. Reselect the entire path and go to Effect > Warp > Arc Lower. Enter the data shown below and click OK. In the end your shape should look like the following image.



Step 24

Select the two shapes created in the last two steps and make two copies in front. Drag them up and place them as shown in the second image. The Snap to Grid should ease your work. Now, focus on the top gray shape. Select it, make a copy in front, bring it to front and drag it up as shown in the fourth image.



Step 25

Disable the Snap to Grid and pick the Rectangle Tool (M). Create a 2 by 280px shape and fill it with white. Place it as shown in the first image and lower its Opacity to 40%. In the end it should look like the second image shown.



Step 26

Re-enable the Snap to Grid. Pick the Rectangle Tool (M), create a 55 by 35px shape, and place it as shown in the first image. Fill it with the linear gradient shown in the first image.

Now switch to the Direct Selection Tool (A). Select the top, left anchor point and move it 15px down. Now select the bottom, left anchor point and move it 20px up.



Step 27

Pick the Type Tool (T), click on your artboard and add a simple, white number. Use the Calibri font with a size of 13pt. Select this text along with the shape created in the previous step and group them (Command + G). Select this fresh group and go to Effect > Warp > Flag. Enter the data shown below and click OK.



Step 28

Pick the Pen Tool (P), draw two horizontal paths (5px long), and place them as shown in the first image. Fill them with none, but add a 1pt stroke. Set the color at R=190, G=30, B=45.

Now go to the Stroke panel. Simply click on the Round Cap button from the Cap section. This will add a nice roundness for the ending points of your paths.



Step 29

Keep focusing on the two paths created in the previous step. Select them and go to the Appearance panel. Select the stroke from the Appearance panel and click on the Duplicate Selected Item button. It's the little file icon from the bottom of the Appearance panel.

Obviously, this will add a copy of the stroke. Select this new stroke, set the size at 0.3pt and the color at R=237, G=28, B=36. Now, your paths should look like the first image shown. Reselect both paths and go to Effect > Warp Arc. Enter the data shown below and click OK. This should add a nice bend for you paths.



Step 30

Select all the shapes created in the lst eight steps (the shapes that make up the flag) and group them (Command + G). Name this new group "Flag" and place it as shown in the second image.



Step 31

Pick the Rectangle Tool (M). Create a 20 by 10px shape, fill it with black and place it as shown in the first image. Select the first shape created in the nineteenth step and make a copy in front. Bring this copy to front. Select it along with the black rectangle and click on the Minus Front button from the Pathfinder panel.



Step 32

Select the shape created in the previous step, along with the "Flag" group, and go to the Transparency panel. Open the fly-out menu, click on Make Opacity Mask and uncheck the Clip box.



Step 33

Re-enable the Snap to Grid. For the following step you will need a grid every 1px. Go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box.

Pick the Ellipse Tool (L) and create a 14 by 8px shape. Fill it with black and lower its Opacity to 15%. Continue with the Ellipse Tool (L), create a 13px circle and place it as shown in the second image.

Fill it with the linear gradient shown below, then create seven smaller circles (2 by 2px). Place them as shown in the third image. Fill them with the same linear gradient and add a 0.15pt stroke (R=167, G=169, B=172).



Step 34

Disable the Snap to Grid and go to Edit > Preferences > General. Set the Keyboard Increment at 0.5px. Select the second circle created in the previous step and go to Object > Path > Offset Path. Enter a -0.5px offset and click OK.

Select the resulting shape, make a copy in front and move it 0.5px up. Reselect the two shapes created in this step and click on the Minus Front button from the Pathfinder panel. Fill the resulting shape with R=188, G=190, B=192.



Step 35

Reselect the first shape created in step 33 and go to Effect > Blur > Gaussian Blur. Enter a 1px radius and click OK. Select all the shapes created in the last two steps and group them (Command + G).



Step 36

Select the group created in the previous step and place it as shown in the following image.



Step 37

Let's continue with the background. Pick the Rectangle Tool (M) and create a shape the size of your artboard. Fill it with white, send it to back (Shift + Command + Left Bracket key) then add a second fill. Use the radial gradient shown below for this new fill.



Step 38

Reselect the shape created in the previous step and add a third fill. You will need a built-in pattern for this new fill. Move to the Swatches panel (Window > Swatches). Open the fly-out menu and go to Open Swatch Library > Patterns > Basic Graphics > Basic Graphics_Textures. A new window with a set of built-in patterns should open.

Return to the Appearance panel, make sure that the third fill is still selected, and click on the USGS 8 Sewage Disposal pattern. Now that the pattern is applied, lower its Opacity to 5%, and change the blending mode to Color Burn. Move to the Layers panel and lock this rectangle. Do not close the pattern window. You will need it again later.



Step 39

Let's continue with the text effect. First, you will need a built in brush. Move to the Brushes panel (Window > Brushes). Open the fly-out menu and go to Open Brush Library > Artistic > Artistic_Ink.

A new window with a set of built-in brushes should open. Focus on your Toolbar and Double-click on the Brush Tool. Set the Fidelity at 10px and the Smoothness at 0%, then click OK. Pick the Brush Tool (B) and select the "Tapered Round" brush. Set the stroke color at R=0, G=104, B=56, then draw your text. This might be a bit tricky. Most likely you won't reach a satisfactory result from the first attempt. When you're done select all the paths that make up your text and go to the Appearance panel.

Select the existing stroke and click on the Duplicate Selected Item from the bottom of the Appearance panel. Select the new stroke, set the color at R=0, G=148, B=68, and the size at 0.5pt.

Again, make a copy of this stroke and select it from the Appearance panel. Set the color at R=57, G=181, B=74, and the size at 0.15pt. In the end your paths should look like the following image. Now group them (Command + G).



Step 40

Select the group of paths created in the previous step and make a copy in front. Select this group copy and go to Object > Expand Appearance. Select the resulting shapes, click on the Unite button from the Pathfinder panel then go to Object > Compound Path > Make. Fill the resulting shape with none (fill & stroke) and name it "Text 01".



Step 41

Select "Text 01," make a copy in front and bring it to front. Fill it with black, lower its Opacity to 30%, change the blending mode to Color Burn, and go to Effect > Distort > Diffuse Glow. Enter the data shown below and click OK.



Step 42

Duplicate the shape created in the previous step. Fill this copy with white and use it to mask the shape created in the previous step.



Step 43

Make a copy of "Text 01" and bring it to front. Fill it with the linear gradient shown in the second image and change its blending mode to Overlay.



Step 44

Go to Edit > Preferences > General and enter 1 in the Keyboard Increment box. Select "Text 01," make two copies in front and bring them to front. Select the top copy and hit the up arrow and the left arrow twice.

Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting group of shapes and go to Object > Compound Path > Make. Fill the resulting path with white and change its blending mode to Overlay.



Step 45

Select "Text 01" make two copies in front and bring them to front. Select the top copy and hit the up arrow and the left arrow once.

Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting group of shapes and go to Object > Compound Path > Make. Fill the resulting path with R=147, G=149, B=152, and change its blending mode to Multiply.



Step 46

Make a new copy of "Text 01" and bring it to front. First, lower its Opacity to 30% and change the blending mode to Multiply. Next, select the fill and use the "USGS 22 Gravel Beach" pattern. Add a second fill for this path and use the "USGS 17A Shifting Sand" pattern. You can find both pattern in the Basic Graphics_Textures window.



Step 47

Make a new copy of "Text 01" and bring it to front. Add a 2pt stroke for this path and set its color at R=35, G=31, B=32. Add a second stroke for this path, and set its size at 1pt. Lower the Opacity of these two strokes to 15% and change their blending modes to Color Burn.



Step 48

Reselect the original group of brushes created in step 39 and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK. Now, select all the groups and shapes that make up this green text and group them (Command + G).



Step 49

Reselect the Brush Tool (B), pick the same brush ("Tapered Round") and add a second word. Use the same stroke properties, but change the colors. Once completed, group all the paths.



Step 50

Select the group created in the previous step and make a copy in front. Select this group copy and go to Object > Expand Appearance. Select the resulting shapes, click on the Unite button from the Pathfinder panel, then go to Object > Compound Path > Make. Fill the resulting shape with none (fill & stroke) and name it "Text 02".



Step 51

Select "Text 02", make a copy in front and bring it to front. Fill it with R=255, G=222, B=23. Now lower its Opacity to 30%, change the blending mode to Multiply, and go to Effect > Sketch > Bas Relief. Enter the data shown below and click OK.



Step 52

Duplicate the shape created in the previous step. Fill this copy with white and use it to mask the shape created in the previous step.



Step 53

Select "Text 02", make a copy in front and bring it to front. Fill it with black, lower its Opacity to 30%, change the blending mode to Multiply and go to Effect > Sketch > Torn Edges. Enter the data shown below and click OK.



Step 54

Duplicate the shape created in the previous step. Fill this copy with white and use it to mask the shape created in the previous step.



Step 55

Make a copy of "Text 02" and bring it to front. Fill it with the linear gradient shown in the second image, lower its Opacity to 50%, and change its blending mode to Multiply.



Step 56

Select "Text 02" make two copies in front and bring them to front. Select the top copy and hit the up arrow and the left arrow twice. Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting group of shapes and go to Object > Compound Path > Make. Fill the resulting path with white and change its blending mode to Overlay.



Step 57

Select "Text 02" make two copies in front and bring them to front. Select the top copy and hit the up arrow and the left arrow once.

Reselect both copies and click on the Minus Front button from the Pathfinder panel. Select the resulting group of shapes and go to Object > Compound Path > Make. Fill the resulting path with R=147, G=149, B=152 and change its blending mode to Multiply.



Step 58

Make a new copy of "Text 02" and bring it to front. First, lower its Opacity to 30% and change the blending mode to Multiply. Next, select the fill and use the "USGS 22 Gravel Beach" pattern. Add a second fill for this path and use the "USGS 17A Shifting Sand" pattern. Now you can close the patterns window.



Step 59

Make a new copy of "Text 02" and bring it to front. Add a 2pt stroke for this path and set its color at R=35, G=31, B=32. Add a second stroke for this path, and set its size at 1pt. Lower the Opacity of these two stroke to 15% and change their blending modes to Color Burn.



Step 60

Reselect the group of brushes created in step 49 and go to Effect > Stylize > Drop Shadow. Enter the data shown below and click OK. Now, select all the groups and shapes that make up this gray text and group them (Command + G).



Step 61

Reselect the remaining "Text 01" and "Text 02" paths and go to Object > Compound Path > Make. You will need the resulting path for a further step.



Step 62

Pick the Ellipse Tool (L), create a 5 by 5px shape and fill it with white. Move to the Appearance panel and select the fill. Lower its Opacity to 10% and go to Effect > Distort & Transform > Pucker&Bloat. Drag the slider to -50% and click OK.

Make sure that this fill is still selected and click on the Duplicate Selected Item from the bottom of the Appearance panel. Make sure that the second fill is added and then reselect the bottom fill. Go to Effect > Blur > Gaussian Blur and enter a 1px radius.



Step 63

Reselect the shape created in the previous step, make several copies and spread them across the text.



Step 64

Re-enable the Snap to Grid and return to gridline every 5px. So, go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box.

Grab the Rectangle Tool (M), create a 100 by 250px shape, fill it with white and place it as shown in the first image. Pick the Direct Selection Tool (A), select the top anchor points and go to Object > Path > Average. Check the Both button and click OK. The rectange should turn into a triangle. Make two copies of this shape, rotate them and place them as shown in the third image.



Step 65

Reselect the three shapes created in the previous step and focus on the Appearance panel. First, select the fill. Lower its Opacity to 10% and change the blending mode to Overlay. Next, add a 10pt, white stroke. Align it to inside, lower its Opacity to 15% and change the blending mode to Overlay. Finally, group these shapes (Command + G).



Step 66

Move to the Layers panel, find the compound path created in step 61 and bring it to front (Shift + Command + Right Bracket key). Select it, along with the group created in the previous step, and go to Object > Clipping Mask > Make.



Step 67

Move to the Layers panel, select the "Flag" group and make three copies. Move them to the left so that you can spot them easier.



Step 68

Resize the flag copies created in the previous step and place them as shown in the first image. Finally, reselect these groups one by one and add one of the two Warp effects shown below.



Conclusion

Now your work is done. Here is how it should look.


Advertisement