Objective

To learn to use Adobe Illustrator tools by example. To learn design principles by recreating the map below:

Discussion

Compare the before and after versions of this map. What makes the schematic version more unified? What information has been removed? How does simplicity create clearer communication?

Procedure

Prepping for the exercise

1. download starter files
2. launch Illustrator
3. file > new (CMYK, letter, portrait); save as "mtd.ai"
4. practice illustrator navigation shortcuts (space=hand, space+cmd=zoom in, space+cmd+opt= zoom out; cmd zero=fit in window)
5. expand dock
6. view> show grid (cmd+"); view > snap to grid (cmd+shift+")
7. file > place "mtd-campus-before.jpg" (template=yes)
8. scale image to fit page (unlock layer)
9. edit > preferences > guides & grid: gridline=36pt (.5in); subdivision=4; grid in back=no
10. new layer "key": draw circles and assign fill colors for each bus line (21, 22, 23e, 23w, 26)
11. new layer "type": label each circle (10pt Helvetica Cond Bold)
12. window > swatches: select all unused (flyout menu); delete
13. adjust color formulas, make swatches global

Drawing the map

1. new layer "23w" (color=violet); lock other layers
2. pen tool: stroke=purple, weight=4pt
3. draw route based on template
4. draw triangle (rotate square 45°, delete bottom anchor); fill=purple; stroke=white, weight=1pt
5. repeat with other routes
6. add street names on "type" layer
7. dashed line: dash=12pt, gap=3pt
8. save, save as "mtd2.ai"
9. delete "template" layer, reposition art

Finishing the map

1. new layer "box": draw black box
2. add additional type from "mtd.rtf"
3. copy and paste logo from "mtd-logo.ai" (fill=white)
4. save, print

Grading

1. add your name to the bottom of the file
2. file > save for web: preset=GIF 32 no dither, image size=800px wide
3. publish GIF as a link from your projects page
4. submit a color laser proof with your name on it for grading
5. file graded proof in your 3-ring binder for individual review