Vector Map Drawing

Vector Map Drawing
http://www.vectordiary.com
By: Diana Toma
This tutorial will take you through the process of creating a Zoo Park map from scratch.
It’s all vector and besides the actual map with various elements, it also teach you on
drawing a parking lot, a logo and creating a legend for the map. By the end of this
tutorial, you will have all the necessary knowledge for drawing various maps and the
confidence to get map drawing projects. So let’s get started!
Page 1 of 25
COPYRIGHT © 2013 WWW.VECTORDIARY.COM. DO NOT REPRODUCE, REDISTRIBUTE, SELL OR PUBLISH IT.
Start the Project
1. Open a new document by going to File menu > New. Type the name and the
dimensions then hit OK.
Draw the Basic Map Shape

2. Grab the Pen Tool (P) and draw the outline of the map. If you have the blueprint
of the map, you can scan and place it in Illustrator and trace over the outline.
3. Using the Pen Tool (P) draw a path as shown. Having this path selected and also
the map-shape click Divide from the Pathfinder panel (Window menu >
Pathfinder) then Ungroup from the Object menu. As a result you will get the two
separate shapes, the actual map and the parking. Fill the shapes with the colors
indicated.
Page 2 of 25
4. Next, take the Pencil Tool (N) and draw some random shapes over the map. Fill
them with the color indicated then Group them (Ctrl+G). Go to Effect menu >
Stylize > Feather and apply a 5 px Radius to make the edges smoother then set
the Blending mode to Soft Light.
Drawing the Footpaths

5. Let’s start with the entrance. Use the Rectangle Tool (M) to draw a rectangle and
the Ellipse Tool (L) to draw a circle having the dimensions shown. Select them
both and click Subtract from shape area > Expand from the Pathfinder panel.
Next, draw a half circle and fill it with light brown. Use it to make 3 smaller copies
and just give them a 1 pt white stroke. Draw little white paths between these
shapes as in the image and the entrance is ready. You can now put it in the bottom
left corner of the map.
Page 3 of 25
6. Starting from the entrance draw with the Pen Tool (P) the footpaths, randomly.
Give them an 8 pt cream stroke.
7. Next, draw more shapes next to the footpaths using the Pen Tool (P) as shown
below (1). Continue with more shapes, circles and rectangles filled with the same
color (2).
8. Focus on the bottom right corner of the map and draw a path similar to the one
from below. Fill the shape with light brown and also select an 8 pt stroke. Next, draw
a few small circles and rectangles and give them a fill and a stroke using the colors
indicated.
Page 4 of 25
9. Use the Pen Tool (P) to draw more shapes as in the image then select the fill and
stroke colors indicated. Group these four shapes then go to Effect menu >
Stylize > Round Corners and apply a 3 px Radius.
10. Now, focus on the upper right corner of the map and draw a random shape with the
Pencil Tool (N). Following this shape draw another path right above and give it a
6 pt stroke (1). Continue with the 3 shorter paths (2) then with others that
connect this area with the other footpaths (3).
Page 5 of 25
11. Add more shapes in the same area as shown below to define the spots where the
animals will be.
Draw Various Map Elements

12. In the next image you can see some specific items like: cages, gift shops, a learning
center, little houses, sheds and we will focus on each of them in the following steps.
Page 6 of 25
13. Draw a simple house-shape made up of a rectangle and a triangle and fill them with
bright yellow. Next, draw the roof using the Pen Tool (P) and fill it with brown.
With the Rectangle Tool (M) draw four small rectangles and use them to make up
the fence as shown below. Group (Ctrl+G) the shapes that make up the fence and
reflect them to the other side. Finally, grab the Type Tool (T) and type Learning
Centre in the middle of the house. The font I’ve used is Myriad Pro, Bold, size of 7 pt.
Also increase the tracking value to 100 to spread the letters a little.
The gift shop is just a smaller version of the Learning Centre. Use the same font to
type GIFT SHOP.
14. Drawing the Ticketing house is similar. First, draw the body and the roof and use the
same fill colors. With the Rectangle Tool (M) draw four windows and align them
horizontally then give them a blue fill and a 0.5 pt black stroke. Type Ticketing using
the same font and settings shown at the previous step.
To create the fence first draw eight small rectangles and align them as in the image.
After that, use the Pen Tool (P) to draw a small curved path between each pair of
rectangles. These paths have a 0.5 pt black stroke applied.
Page 7 of 25
15. Let’s continue with the cages. Grab the Ellipse Tool (L) and draw a 47 x 27 px
ellipse then select orange as the fill color and a 1 pt black stroke. Draw another
ellipse above the first then switch to the Pen Tool (P) and draw the three slightly
curved paths, two on the sides and one in the middle. Give them a 1 pt black stroke.
Draw the remaining paths and the first cage is ready (1).
The second cage is similar. First draw the base-shape then the two curved paths,
one at each end using the Pen Tool (P). Draw two more in the middle then the
straight path that unites them at the top (2).
16. Start by drawing a triangle then with the Rectangle Tool (M) draw four legs at the
bottom. Continue with the thin rectangles on the roof and a small triangle at the top
filled with light brown (1).
Now, grab the Pen Tool (P) and draw a small rectangle then a curved path as
shown below. Place two straight paths having a 2 pt brown stroke at each end of
the arch then draw six more in between. Having these paths selected, press the
Round Cap option in the Stroke panel to get the rounded ends (2).
The last thing to do at this step is to draw two shapes like below or similar and fill
them with the orange shades indicated. Use the Line Segment Tool (\) to draw
a few straight paths in order to divide these shapes into smaller areas for the
animals (3).
Page 8 of 25
17. Take the Rectangle Tool (M) and draw a 20 x 20 px square filled with black. Drag
it into the Brushes panel (Window menu > Brushes) and choose New Scatter
Brush. Now, draw with the Pen Tool (P) the four paths you see below and stroke
them with this brush.
Having these paths selected, double click in the Appearance panel (Window menu
> Appearance) on the scatter brush applied to open the Stroke Options window.
There, change the settings as indicated and hit OK. You can see the result in the
image above.
Page 9 of 25
18. Still having these four paths selected, go to the Object menu and choose Expand
Appearance. As a result you will get the individual squares and you can now color
them as you want. At this point your zoo map should look like below.
19. The next item is the boat pond. Start by drawing a rectangle having the dimensions
shown then go to Effect menu > Warp > Bulge and apply the settings indicated.
From the Object menu choose Expand Appearance in order to expand the
effect applied. Now, put a circle at the top of this shape and one at the bottom like
in the image. Select the three shapes and click Add to shape area > Expand from
the Pathfinder panel.
Page 10 of 25
20. For a simple deck, draw three small rectangles and select brown as the fill color.
Group them then go to Effect m enu > W arp > Inflate and apply a minus 20%
Horizontal Distortion. After that, choose Expand Appearance from the Object
menu.
21. Arrange the pond and the deck as in the image. Select a blue fill and a dark blue
stroke for the pond then grab the Type Tool (T) and type Boat Pond using Myriad
Pro, Regular, size of 9 pt.
22. In this area of the map we will also place a railroad. First, draw a small brown
rectangle using the Rectangle Tool (M) then drag it into the Brushes panel and
choose New Pattern Brush. Next, draw with the Pen Tool (P) a path like below
and stroke it with this brush. Double click on the brush applied in the Appearance
panel to open the Stroke Options window, change the Scale and Spacing values
as shown and hit OK. The train tunnel is simply made of two basic shapes that you
can draw with the Pen Tool (P).
Page 11 of 25
23. Let’s add a second pond on the top left corner of the map. Simply draw a random
shape with the Pencil Tool (N) and color it as the first pond. Type The Pond using
Myriad Pro, Regular, size of 12 pt. Also in this area we will put some buildings. You
can use basic shapes to make them or you can draw them directly with the Pen
Tool (P). When you are done, type the text as in the image and use again Myriad
Pro, size of 10 pt.
24. Grab the Ellipse Tool (L) and draw a 40 x 40 px circle then switch to the Pen
Tool (P) and draw a triangle starting from the centre of the circle. Duplicate and
rotate the triangle 180 degrees then arrange it as shown below, tip to tip (1). With
the two pink shapes selected, go to Object menu > Transform > Rotate,
choose an angle of 60 degrees then hit Copy. Press Ctrl+D to repeat this action
and now you should have the other two pair of triangles (2). Next, Copy (Ctrl+C)
and Paste in front (Ctrl+F) the circle then select all the triangles and the copy of
the circle and click Subtract from shape area > Expand from the Pathfinder
panel (3). Fill the triangles with baby blue and the original circle with the radial
gradient shown using the same shade of blue, white and gray (4). Finally, draw a few
brown circles as the seats next to the playground umbrella.
Page 12 of 25
25. Every playground needs a swing therefore draw with the Pen Tool (P) a path like
below and give it a 2 pt black stroke. Continue with the legs in the back then with
the two rectangles having a 1.5 pt stroke and two tiny shapes as the seats. Select
everything and from the Object m enu choose Expand then color the swing with
the two shades of pink indicated.
For the rest area symbol, go to the Symbols panel (Window menu > Symbols),
open the Symbol Libraries Menu then select Maps. Find the symbol that we need
and drag it into your working area then press the Break Link to Symbol icon at
the bottom of the Symbols panel to expand it. Change the fill color from red to
brown. At this point you have all the items and you can arrange them on the map to
create the play area.
In the Maps category you can also see the other symbols that we will use later.
26. Here is the entire map and we will continue with more symbols. First, draw a
rectangle and give it a green fill. Find the Restaurant, Restrooms, Visitor Info and
Medical Facility symbols in the Maps category, drag them into your working area
then press the Break Link to Symbol icon to expand them. Arrange these
symbols above the rectangle as in the image then group everything. Multiply this
group and arrange a few in different places on your map.
Page 13 of 25
27. Next, create a simple arrow using a small rectangle and a triangle filled with black.
Multiply this arrow and arrange a few along the footpaths drawn at the beginning as
shown in the close-up. With the Type Tool (T) type Walking path using Myriad Pro,
Regular, size of 7 pt.
28. Now, focus on the area indicated and first draw three ellipses filled with blue. Make
three copies of the deck created at step 20 and arrange them as indicated in the
close-up. This time they will act as the seats for the spectators. If all we’re here
next to the Amphitheater, let’s write the name. Grab the Pen Tool (P) and draw an
arch then switch to the Type on a Path Tool, click on the path and start typing.
After that, select Expand from the Object menu. Now, let’s put the flowers in the
garden area. You can find this symbol in the Sym bol Libraries Menu > Flowers
> Hibiscus.
At this point we are done with all the map items.
Page 14 of 25
Arrange the Animals
29. Follow the links below and download the collections of animals that we need. Open
the files and copy the animal silhouettes into your map document. The ones that
I’ve used are highlighted with different colors. Some animals are available in the
Illustrator’s library so navigate to Symbol Libraries Menu > Nature and drag
them into your working area.
• Free Vector Animals by all-silhouettes
• Sea & Ocean Giants by all-silhouettes
• Birds Collection – Free Vector Graphics by Vector Open Stock
• 30 Different Flying Birds by IdealHut/Vecteezy.com
• Vector pigeons by all-silhouettes
30. Zoom on different areas of your map and arrange the animals on categories. For
example, the sea animals in one area, domestic animals in another, the fishes in the
Aquarium and the butterflies in one of the cages (1). Type the name of the animals
using Myriad Pro, Regular, size of 11 pt.
In the second image you can see the area right above the entrance and there we
have the birds. Also notice the Whale and Dolphin Theater and the Seal Stadium.
Page 15 of 25
31. In the upper right corner of the Zoo map is the African area. Arrange the vector
animal as shown in the first image then type their names. Use the same font.
Continue with the monkeys, the big cats and the rest of the animals. Place snakes
and lizards in the Reptile House and finish with some insects (2).
Define the Main Zoo Areas

32. We arranged the animals on categories for a reason, right? The main areas are listed
below along with the colors used, the font and the size. Also type Upper Park and
Lower Park then put all these names on the map where they belong.
Page 16 of 25
33. Grab the Rectangle Tool (M) and draw a thin rectangle then fill it with a linear
gradient using shades of gray. With the Ellipse Tool (L) draw a small ellipse at the
top and give it a gray fill. Now, take the Pen Tool (P) and draw a triangle shaped
flag then multiply it. Color the flags with different colors. Group all the shapes that
make up the poles with flags and make another copy. Move these two poles at the
entrance as shown in the close-up.
Page 17 of 25
34. If we are at the entrance let’s draw the Zoo Entrance sign. Take the Rounded
Rectangle Tool, click on your artboard and type the dimensions shown in the
window that opens up. Fill the shape with black. You can find the arrow by going to
Symbol Libraries Menu > Arrows > Arrow 28. Drag the symbol into your
working area then press the Break Link to Symbol icon at the bottom of the
Symbols panel. Rotate the arrow 90 degrees then put it above the rectangle.
With the Type Tool (T) type Zoo Entrance using the font and settings shown (1).
The Exit sign is made in the same way (2).
For the Parking sign start with a 74 x 33 px yellow rectangle then type Zoo Parking
using the font and the settings shown (3).
35. Arrange the three signs created at the previous step as shown in the close-up.
Page 18 of 25
Draw the Zoo Parking
36. Select the parking-shape and use the shade of gray indicated as the fill color. In the
Appearance panel, having this fill attribute selected, press the Duplicate
Selected Item icon at the bottom and as a result you will get a second fill above.
Keep the same fill color then go to Effect menu > Artistic > Film Grain and
apply the settings shown. Change the Blending mode to Overlay and reduce the
Opacity to 40% but only for this second fill. Also select a 1.5 pt gray stroke for
this shape.
To define the parking spaces draw a vertical path with the Line Segment Tool (\)
then shorter horizontal paths, as many as you need. Multiply the group of lines and
arrange them in the parking area.
Add the Trees

37. You can find the trees that I’ve used by going to Symbol Libraries Menu >
Nature > Trees 2 (see image at step 29). Drag the symbol into your working area,
press the Break Link to Symbol icon then Ungroup the trees. Select one of them
and replace the shades of green with the ones indicated. Multiply the new tree to
create other sizes then arrange them in different areas of your map as in the image.
Page 19 of 25
Draw the Streets
38. The actual map is ready but we will continue with the streets. Take the Pen Tool (P)
and draw some paths around the map like below. The path highlighted with red is
the main street and has a 12 pt light gray stroke applied. Duplicate this Stroke
attribute by pressing the Duplicate Selected Item icon at the bottom of the
Appearance panel, change the color from gray to white and decrease the weight
to 2 pt. With this path still selected, check the Dashed Line option in the Stroke
panel and type 8 pt in the dash box. The rest of the paths highlighted with black
have a 10 pt gray stroke.
39. Next, with the Type Tool (T) type some names for the streets using the font and
the settings shown. Rotate the names according to the streets then Expand them.
Also type Park Road North, South, East and West using Myriad Pro, Bold Italic, size
of 8 pt and put each one in the proper side of the map.
Page 20 of 25
Create the Legend
40. You are almost done and now it’s time to create the legend because every map
needs to have a legend. First, draw a 1000 x 980 px shape which is the size of the
document that you’ve chosen at the beginning of the tutorial. Fill it with light gray
just so we don’t leave the background completely white.
At the bottom of the background draw the cream and the brown rectangles having
the dimensions indicated. Type LEGEND and VISITOR AREAS using Myriad Pro, Bold,
size of 20 pt. Expand the text, change the fill color from black to cream, rotate 90
degrees and move them on top of the brown shapes.
41. Align all the symbols used so far then type the text next to each one. The No-smoke
symbol is from a collection of Danger Signs designed by all-silhouettes. Open the file
and copy the symbol into your document then change the fill color to red. Next,
type the names of the areas from your map and finally the program of the Zoo Park.
Page 21 of 25
Create the Zoo Logo
42. A Zoo Park needs a logo therefore we will make one. Start with a 61 x 61 px square
and select black as the fill color. Open the Symbol Libraries Menu and find the
Bird and Antelope symbols in the Tiki and Primitive categories. Drag them into
your working area and press the Break Link to Symbol icon at the bottom of the
Symbols panel to expand them. Arrange them above the square like in the image.
Copy (Ctrl+C) and Paste in front (Ctrl+F) the black square and first remove the
black fill. Now, select the two animals and the copy of the square and go to Object
menu > Clipping Mask > Make. Next, type the text you see below, Expand it and
arrange it around the square.
43. Move the logo created at the previous step in the upper left corner of the map. You
need to put a compass sign in the bottom right corner of the map and you can find
one in the Symbol Libraries Menu > Maps > Compass Rose.
At this point you can also mask the streets that cross over the background shape
and to do that, Copy (Ctrl+C) and Paste in front (Ctrl+F) the background then
remove the fill color. Select all the streets and also the copy of the background and
go to Object menu > Clipping Mask > Make.
Page 22 of 25
Draw the Map Grid
44. Navigate to Symbol Libraries Menu > Maps and drag the Distance Marker
symbol into your working area then press the Break Link to Symbol icon. This
symbol is very small therefore scale it about 600%. Draw a circle and arrange it at
the top of the shape then type the letter A using the font indicated and the color
white. Multiply this marker and simply change the letter to obtain the others (1).
Make a copy of the marker and the circle and rotate them minus 90 degrees then
type the number 1 on top. Multiply this marker and replace the number to obtain
the others (2).
45. To create the grid, take the Line Segment Tool (\) and draw a line in the place
where you want the grid to start and another one where it ends (1). With these lines
selected, go Object menu > Blend > Blend Options and choose 4 Specified
Steps. Go back to Object menu > Blend and select Make (2). Repeat the same
thing to create the blue horizontal lines (3).
Page 23 of 25
46. Select all the lines and choose Expand from the Object menu then select a 1.5 pt
green stroke for them. To adjust some of the lines, use the Direct Selection Tool
(A) to select only the bottom anchor points and move them up as shown. Finally,
place the marker signs and you are done.
Conclusion
Well done! The Zoo Park map is ready and you now have the necessary knowledge
for drawing maps in general. You can try other park shapes and themes and I would
love to see what you’ve done.
Page 24 of 25
If this tutorial has helped you, a comment on this tutorial would be highly
appreciated. Thanks for your support!
Visit www.vectordiary.com for more illustrator premium tutorials!
Page 25 of 25

Vector Map Drawing

Uploaded by

Copyright:

Available Formats

Vector Map Drawing

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Vector Map Drawing

Uploaded by

Copyright:

Available Formats

Vector Map Drawing

Draw the Basic Map Shape

Drawing the Footpaths

Draw Various Map Elements

At this point we are done with all the map items.

Define the Main Zoo Areas

Add the Trees

Visit www.vectordiary.com for more illustrator premium tutorials!

You might also like