trees roads rivers draw maps adobe illustrator

Have you ever had the need to create a stylized map to match a certain design and not sure how to create one like a pro? Well I hope this tutorial will help you create your own stylized map like one.

Creating your own map will take some time but is pretty much straight forward and learning how to use layer appearance is pretty easy and will make your maps looking more professional. Download my sample Illustrator file at the bottom to practice or restyle for your own project.

For this demonstration, I am going to trace a map of mid-town, Manhattan in New York City with Adobe Illustrator CS4.

Step 1: Capture Screen Shot of Map

Captured a screen shot of your map with Google Maps. Open it in Illustrator.

Step 2: Set Map as Template

Lock the map screen shot in the bottom layer. Double-click on the layer in the Layers Panel to bring out the Layer options. You may check the template and have the image dim to 50% for easier tracing. You also have the option to print this image or not by checking the print box.

Step 3: Name Layers

Create multiple layers and name them accordingly. For example, create a layer for water and call that layer water. Create a layer for parks, small roads, medium sized roads, big roads etc. This will make stylizing the map easier later on. This is how I organized my layers. You can just create the same layers like mine if you like.

Create a layer and call it "work" and put this layer on top of everything else. We are going to start tracing everything in this layer with a 2pt red stroke so we can see clearly what is traced.

Step 4: Moving Elements to The Right Layers

Once everything is traced, it is time to select all the related objects and move them to their appropriate layers. For example, select all the lines that represent small roads and move them to the "small road" layer. Do the same for the big roads, parks, water, etc until you have moved everything from the "work" layer into your appropriate layers. (Note: Layer order is important. The road layers should be on top of all the land mass layers, the big road layer should be on top of the small road layer. The text layer should be on top of all the graphic layers.) Delete the work layer after everything is moved out of it.

Step 5: Setting Layer Appearances for Roads

Now comes the fun part. Instead of changing the stroke color and weight of our roads using the stroke panel, we are going to style them using Layer Appearance. Whatever we do with the layer appearances will apply to all the graphics within that layer. To do this, select the layer you want to style. We are going to style the small roads first. Click on the circle on the right of the layer to select everything in the layer. Go to the tool panel and turn off any fill and stroke color it will have. Pull up the "appearance" panel under the "window" drop-down menu if it is not out already. In the appearance panel, click on the pull down menu on the upper right-hand corner and select "Add New Stroke." Do that again to get a second stroke. You will see 2 strokes in the appearance panel now. Change the 2 stroke colors and weighs to match your design. The bottom stroke should be thicker than the stroke on top.

Repeat Step 4 for the other set of roads.

Step 6: Styling Land Masses

You may use Layer Appearance to style the land mass shapes as well but it is not necessary. I normally just select all the graphics within the layer and style the shapes using the stroke and fill option on the bottom of the tool panel. Layer Appearance are more useful for creating strokes with multiple stroke colors/weights and overlapping lines.

Step 7: Styling Names and Labels

For the street names, choose the font that you would like to use and type them out. Make sure the type layer is on top. If you would like to have your texts styled with a different color stroke, follow step 5. For this example, I will style the street names with a gray fill and a white stroke. You can look into the Appearance panel of my Illustrator file to see how this is done if you are unclear or lost with my instructions.

Summing Up

This is it. I hope you fill this useful. If you have any questions or comments about this tutorial, please let me know by writing in the comments area.

Download sample file here: MyDesignPad Manhattan Map

February 28th, 2010 | Tutorial

| 90343 Views | 33 Comments ›

lindsaycappasay.blogspot.com

Source: https://mydesignpad.com/how-to-draw-vector-maps-with-adobe-illustrator/

Share this post