Linework: moving from mapping to drawing

Working with paths, shapes, and masks in Adobe Illustrator

Alexander Arroyo

Published in

Beyond the Anthropocene

22 min readApr 7, 2022

§00_Premise and Objectives

This module covers working with vector-based drawing in Adobe Illustrator (AI). After completing this exercise, you will have:

Become familiar with AI user interface
Learned the basics of vector-based drawing using paths and shapes
Learned basic operations using selection techniques, shape- and path-related tools, compound paths and clipping masks
Explored basic techniques of scaling and layering

You will then post your work-in-progress to Are.na. The requirements for {L02} are listed at the end of this tutorial; you can jump to the assignment here.

§01_Prep

You will need to export vector data from QGIS for use in Illustrator. Follow the separate tutorial here.

Continue using best practices for file organization, management, and naming conventions; create a folder for your {L02} work (e.g., L02), and consider exporting all QGIS files into a subfolder, e.g. L02\qgis-exports.

There are a few files used in this tutorial that you may want to explore in order to follow along. You can find them in our Dropbox folder here.

01.1_Opening Illustrator

Launch Illustrator. You will be prompted to choose a template for your work. There are several options for different kinds of print and digital work. Since we will be outputting our drawings for a typical high resolution monitor, we will choose a higher resolution “Web” template from the “More Presets” menu. We can customize several options here, including the standard size, orientation (portrait or landscape) and number of “artboards” — you can think of this as an analog to a canvas or drawing surface. You can also give the file a name in the “More Settings” dialogue. Once you click “Create Document”, AI will create your new project document. You may also skip the “More Settings” step and create a document directly from the previous dialogue.

There are many customizable options for setting up your artboard; in the future Illustrator will list your recently used templates so you can bypass the longer set up process. You can also create and save your own template.

Begin to familiarize yourself with the interface. It should look something like this:

Depending on which “workspace” you’ve selected (Window > Workspace) you’ll see different tools (left) and panels (right). The default option is called Essentials and includes the tools and panels shown below.

Toolbar on the left; panels on the right

Like QGIS, the toolbars and panels are movable, allowing you to set up your preferred workspace. You can always add or remove these workspace elements by clicking Window and selecting the different panels you’d like to display or use. If you hover over any of the tools, a pop-up dialogue will show you what the tool does; you can click the “learn more” button to more importantly for your long-term facility with AI, the keyboard shortcut. As long as you’re not actively inputting text somewhere else (e.g., using the text tool in the artboard, or manually typing in a color value), you can simply type that single key to access the tool.

02_Creating Simple Linework

There are several ways to add linework to a project. The two principal ways we’ll explore in this tutorial are by using one of the line- or polygon-drawing tools. We will begin with the Pen (P) tool.

02.1_Basic Pen and Selection Operations

Click the Pen tool or type P. Navigate back to your artboard and begin making a shape by clicking a point. Notice that next to the tooltip is a tiny *; this indicates that you’re creating a new line segment. The first point will be the initial vertex in whatever geometry you choose to draw. Add more vertices by clicking around the imagined outline of your shape; you are now drawing a path. A path can be open or closed, i.e., it can be a single line segment (open), a series of connected line segments that do not end in a shared point (open), or a polygon.
You can round your angles at each vertex by clicking and holding. Drag in the direction you want to draw in order to deepen the curve.
Notice that there are pink annotations that pop up while you draw. These help you navigate your drawing by telling you exactly where you are (as a function of pixel location) and other useful information. In this case, as we hover over the vertex with which we began drawing the shape, the word Anchor appears; if you click on the first anchor, it will close the path. (A small o will also appear next to the tooltip.) Anchors are important, well, anchors in the drawing process. We’ll return to this below.

Next we’ll learn how to modify the shape by using our selection tools. Navigate to the direct selection tool or type A.

Click on an anchor. You’ll see that a dot appears inside the angle of the line segments. You can drag this to round (or “chamfer”) the sharp angle into a curve.
You can also move anchor points to drag the vertices into a different-looking shape.
You can click a vertex using direct selection and delete it; this will eliminate the two adjacent line segments. Alternatively, try selecting a path instead of an anchor; you can delete a single line segment in the same way.
Finally, if you want to redraw a portion of your path disconnected by a deletion, simply select the pen tool again. Click the anchor you want to start with; a small / indicator next to the tool tip lets you know that you’re about to connect a new path to an existing one. Finish the shape by clicking the last open anchor, closing the path.

A couple more basics using the pen tool. You can add and subtract vertices without deleting them or breaking a closed path. You can do so by long-pressing on the pen button, which will bring up a few more sub-tools. (You should explore the rest of the tool menu in a similar manner.) Click the add anchor point (+)or delete anchor point (-)option and try making some changes.

02.2_Structure and Scaling

You can also use various tools to help you draw a more structured path.

First, you can hold down the shift key while you draw; this will force your lines to move orthogonally.
Here’s where the anchors come in handy again; as you draw a rectangle, the annotations from the live guide will let you know when the leading vertex for your third line segment aligns with the first anchor.
Keep holding down shift and connect the final dot to complete your rectangle.

You can also use options in the View menu; Rulers > show ruler (command-R) and Show grid (command-’) can help organize your drawing compositionally. You can snap to the grid by selecting that option in the View menu or typing (command-shift-’).

The rulers and grid can be especially helpful when using the regular selection to move, scale, or rotate a path.

To do so, select the path and click one of the box-points that appear. Try moving them by clicking and dragging; you will scale the rectangle in the x or y dimension only.
If you want to scale in both x and y dimensions, click and drag while holding down the shift key.
You can rotate your path by hovering just outside a vertex; a curved, double-headed arrow will pop up next to the tooltip. Again, just click and drag.

NB: You can also use guides, which can be “pulled” out from each axis of the ruler. We don’t really need guides yet, since this will be a fairly simple drawing, but feel free to experiment.

03_Thinking Like a Vector

You’ve now been introduced to a few essentials for vector-based drawing. But what are vectors, and why are they different than other kinds of images? Unlike rasters, which make an image by assigning (color) values to cells within a grid, i.e, “picture elements” or pixels, vector-based geometries are composed of mathematically-defined elements or “geometric primitives”: points, lines, curves, and polygons. Because vectors are really just spatial relations expressed as geometric equations, they are “scale-free,” that is, independent of any particular scale. The fidelity of vector geometry is not bound to “resolution” like rasters, determined by the size of a pixel at a set scale. If you scale a raster image too far up or too far down, you’ll lose the coherence of the picture, and it will become blurry or indistinct. On the contrary, if you do similar operations on vector geometry, it remains entirely in tact. Consider a circle: in a raster image, if you scale up you’ll begin to see a jagged edge; the circle is really composed of squares that simply appear to be a circle at the right resolution. In a vector image, the circle is always a circle, i.e., an infinitely-sided polygon! From that point of view, your artboard is really just an arbitrary way to enclose what’s otherwise a necessarily infinite mathematical space — this will be familiar to anyone with experience in AutoCAD, Rhino, Sketchup, or other technical drawing, drafting, and design programs. From the perspective of drawing, all this really means is that to get the hang of Illustrator you have to think like a vector — through geometric primitives and the operations you can perform on them. Keep this in mind as you try to develop a feel for what Illustrator is and isn’t good at…

04_Building Shapes and Compound Paths

Let’s turn now to polygons. There are a few ways to draw simple shapes and then build out more complex geometries. For the purpose of this lab, we’ll look at four: the shape tool, the grid tool, and, for more complex geometries, the shape builder and pathfinder tools. Some of these tools create a compound set of two or more paths that are treated as a single geometry. This is called a compound path. Compound paths will allow us to do a few important things that simple paths cannot, viz., creating more complex clipping masks (covered in the §05).

04.1_Shapes

You can create basic shapes using the set of shape tools located underneath the pen tools. We’ll only be using the ellipse (L) but you can explore the others too, including rectangle, polygon, star, line segment, and rounded rectangle. We won’t cover those now, but they are more or less self-explanatory (there’s also plenty of support via Adobe for learning the basics of each tool which you can find on their website or under the Help>Tutorials menu).

Select the ellipse tool and navigate to your artboard. You can experiment with drawing variously sized ellipses by clicking and dragging.
Shift-click and drag to draw a circle.
The default “origin” of your ellipse will be the top-left vertex of a virtual bounding box calculated to frame your shape as you move. This can be a bit disorienting if you’re not using guides or another method to figure out where that origin should be. It may be easier to draw it from a center point; to do so, hold down the option key while you click and drag. Your cross-hair cursor will turn into a tiny bulls-eye, framed by a broken circle.

Alexandra Arènes, “Point of Life” Diagram, from Aït-Touati et al. 2019

As a first step in creating the kind of concentric ring-structure used for the precedent “Point of Life” drawing discussed in lecture and posted to Are.na, you can repeat this process by drawing new circles , rescaling and moving them using the selection tool as we did in §02.2.

You can also copy and paste your existing circle using the standard keyboard shortcuts and menu options. But you may want to do this more interactively using a selection tool trick.

Select the circle using the selection tool; now hold down the option key while clicking and dragging the shape. An exact copy will be “pulled out” from the original shape.
Repeat this process, then scale and move the circles into desired position.
Perhaps you want to offset the center points of the circles to look more like the Point of Life (POL) drawing by dragging the circles around, shown above.
Maybe you decide you actually want to have everything aligned concentrically rather than offset. Rather than simply undo the moves, you can use the align tools. You should see them in a panel to the right, depending on how your workspace is arranged. If not, you can always bring up the panel by selecting Windows > Align.
Test out what the different align and distribute tools do. To recenter the circles, we’ll use a two step process: horizontal align center and vertical align center.

On your own:

If you wish to be more precise, you can use the Object > Transform > Move menu option, or Command-Shift-M. There are other transform options you can play with here as well. For transformations that work with simple geometries, we recommend turning on the preview option (by clicking the check box) in the move dialogue. You will see a live preview of the transformation according to the parameters you’ve set; if you like what you see, click OK.
You can also make your transformation into a copying operation; the transform will leave the original in tact but create a copy with the transformation. This may be another good way to create the POL rings.

04.2_Grids

What we’re doing above is, in fact, a longer workflow for creating a grid. Grids are useful as organizational devices for composing an drawing in which placement carries information; that is, you want someone to understand that where you place an image means something specific. This is often an essential element of the diagram — a special kind of drawing with a surprisingly complex and technical history (we’ll return to this in lecture next week).

Like the shape tools, Illustrator has built in a shortcut for creating two types of grids: a rectangular grid and a polar grid. We’ll explore the basics of the polar grid below.

First, let’s create a new layer for the grid. Just like QGIS, layers are crucial for how you organize your drawing. Navigate to your layers panel on the right (or select it from Window > Layers) and find the + button at the bottom. Click it to create a new layer, or bypass the whole process using the keyboard shortcut Command-L. Now turn off your other layer by clicking the small eye button next to it, and make sure you select the new layer so that it’s the active drawing layer.
Select the polar grid tool in the toolbar (there is no assigned shortcut). Instead of dragging and clicking, simply click where you want your grid to begin (using the default top-left or option-click center point options).
A dialogue box will pop up allowing you to set several parameters, include size (in both x and y directions), number of concentric dividers (rings), and number of radial dividers (from the center to the edge of the outer ring).
To create something like the POL drawing structure, select however many concentric dividers you prefer, but set radial dividers to 0. Click OK.
By default, the grid will be created as a group, which treats your grid as a single object. You can group and ungroup objects using the Object menu or Command-G (group) and Command-Shift-G (ungroup).
To select or transform objects within a group, you can use the direct selection tool to select a path. Careful, as it will only select the segment of the path you click; to transform the whole path, switch to the selection tool by pressing v. You can also use the selection tool to isolate the paths within the group by double-clicking the group object. To exit isolation mode after making your modifications, press esc.

Select individual objects using layers panel; scale using scale dialogue.

Now navigate back to your layers panel. If you drop-down into your layer, you will see all the objects on that layer in hierarchical form. You should notice the new group listed in your layer, and each path nested under it.
However, you can still select individual paths by clicking to the right of each listed object in the layers panel. When selected, a small box the color of the layer will appear, and you’ll see the selected object on the artboard.
You can now transform individual objects within the group without ungrouping the object. Here we’re using the scale tool from the Object > Transform menu.
Remember to check the preview box if you want to see how it will affect your drawing.

04.3_Pathfinder and Shape Builder

Now let’s create our rings. We could do this in some very labor intensive and repetitious ways using the workflows already covered, but we’ll now introduce two new tools: the pathfinder and shape builder.

The pathfinder allows you to use a few boolean operations to create shapes. By selecting two more shapes, you can make a new shape using overlapping geometry. Note that this can be a very powerful tool for complex geometries, and is somewhat underutilized here.

Create a new layer and generate some circles. Make sure your circles are arranged in your layer from smallest on top to largest on bottom.
Select two circles and click the pathfinder panel (or find it using the Window > Pathfinder menu).
Test out what the different pathfinder modes do. In the example shown above, we try two: the unite function and the minus front. While the unite function simply merges the two geometries, the minus front creates an offset ring by subtracting the smallest, top-layer circle (“in front” with respect to the layer structure).
The pathfinder should now generate a new kind of shape — a compound path referenced above.
You can quickly test that the operation worked and you created a ring-shaped compound path: select your new shape and then press shift-x. This will swap the default fill and stroke assigned to your shape, turning it from white fill + black outline to black fill + white outline. Notice that the interior is empty; the white that appears is simply the artboard background. You can try using different colors by clicking the fill and stroke color tools to the bottom left of the toolbar, or the color panel to the right.

Now let’s move onto the shape builder. The shape builder automatically detects shapes created by a set of selected geometries; it’s essentially an interactive way of doing what the pathfinder does, and is great for simpler geometries.

Use `shape builder` to create compound paths

To begin, create a new layer for your shape builder geometries, and copy or move the polar grid circles there.
To move geometry from one layer to another, make sure all the desired geometry is selected in your layers panel; then simply drag to another layer. You can also select the geometry you want to move in the expanded/dropped-down layer, collapse the layer, then drag the box that appears alongside the layer name into a new layer. The box next to the source layer will appear slightly smaller than the box next to the target layer.
Ungroup the grid into individual paths, then transform and arrange the circles as you see fit. Select all the circles.
Now select the shape builder tool from the toolbar or press shift-M. Hover over your circles; you should see a grayed-out section appear where the shape builder detects a possible shape.
Now simply click each gray area to create a series of rings as compound shapes.

05_Clipping Masks

Now that we can make complex shapes using compound paths, we’ll learn how to make them into clipping masks. Simply put, a clipping mask is a shape that “clips” other raster or vector imagery using its geometry as an outline. Whatever falls outside the clipping area is “masked.” Imagine cutting out a shape from a blank piece of paper and then laying it on top of a pattern of some sort; you will only see the pattern inside the cut-out shape.

To make a clipping mask, you need two ingredients: your mask geometry and the graphic to be clipped. The mask always needs to be on top of the clipped graphic. You should continue to use well-labeled layers to help keep things organized. In the workflow below, each compound shape we built using the shape builder will be used as a clipping mask. For organizational purposes, each compound path ring has been relabeled “r1” (short for ring).

We can now bring in geometry to be clipped. We can do this in a couple of different ways: by manually copying and pasting some geometry from another Illustrator file or placing the complete geometry of another file into our project. If you have created or found existing vector artwork or geometry, open that file. For this tutorial, you can use the Sample-textures.ai file in DROPBOX\DATA\_ai-resources\L02 linked in the Prep section.

Open your file and select some geometry. It may be easiest to group it.
Create a new layer for that geometry, and place that layer below the shape builder clipping mask layer. Copy and paste the geometry into the new layer.
After composing the geometry underneath a desired ring, select both the ring to be used as a mask and the target geometry.
Using the Object > Clipping Mask menu or Command-7, create a clipping mask. The masked geometry will be moved to the clipping mask layer and nested in a new Clipping Mask group. You can unmask it at any time using the reverse operation ( Object > Clipping Mask > Release Clipping Mask or Shift-Command-7) or by dragging the clipped geometry out of the group.
If you want to double check on where the full extent of the clipped geometry is, you can use the outline view or command-Y. This will give you a “wireframe” view of whatever geometry is visible.
To transform the clipped geometry while maintaining the mask, use isolation mode by double clicking the clipping mask. Once you’re happy with how it looks, press esc.
You can repeat the same workflow for each ring with whatever target geometry you choose.

NB: Before clipping any especially complex geometry, make sure to save your file! Sometimes the clipping operation can be memory intensive.

06_Working with Imported Geometry

Working with vector geometry generated by QGIS can be a bit trickier than working with vector geometry generated in Illustrator or another vector drawing program (e.g., Inkscape). Unfortunately, some extraneous data always tends to be exported along with the geometry you want, and you may run into other issues with sizing, stroke width, patterns, etc. The first step is simply cleaning up your file. For this tutorial, we’ll use files found in DROPBOX\DATA\_ai-resources\L02\svg linked in the Prep section.

Clean up your file by finding the desired geometry via the layers panel or using direct selection

Start by opening your exported SVG or PDF and exploring the layers panel.
You’ll notice there are a lot of empty or redundant groups here; this is simply a translation problem from QGIS to SVG and PDF formats.
Clean up your file by finding the desired geometry via the layers panel, or by direct selecting the linework you want on the artboard. Move your geometry (which will almost always be grouped) somewhere safe (a new layer, for instance, or out of the group it shares with the empty or redundant sub-groups), and delete whatever your don’t need.
If using the direct selection method, navigate to the Selection menu; scroll down to Same > Appearance. This will select all geometry that shares fill, stroke, or other style features with the source geometry. If your layer is simple (e.g., undifferentiated by classification), this is a good approach.
Save your file — this can be an especially buggy process and you don’t want to lose your work!

Next we’ll prep the file for placement into our project file. Placing a file is preferable to copying and pasting when you have already set up the source file in organized, well-composed layers or views. Again, unfortunately the set up gets lost in translation, and you may need to make some minor adjustments. Below, for instance, we’ll need to rescale the artboard and image.

While the ratio of the artboard is (roughly) correct, the size is too small to bring easily into our other drawing.

You can check this by selecting the artboard tool (shift-O), then navigating to your properties panel.
There you’ll find the artboard size and position. Position is irrelevant here, but rescale it to the size of our other drawing (in this case, 1920 x 1080). If you click the chain link icon next to the width and height values, you can simply change one value and the other will automatically update while maintaining the proportional ratio.
Next you’ll want to rescale the geometry; you can do this in several ways we’ve covered, including calculating the ratio of the original artboard size to the new size, and using that ratio through the scale operation.
Don’t worry if it takes a moment to rescale the artwork — geospatial vector data can be quite heavy due to its geometric complexity.
We don’t, however, need the full extent of the artboard for placing the geometry into the project file, just the extents of the geometry. You can resize the artboard to fit the geometry by selecting the artboard tool again, then double clicking the geometry.
To zoom back in to the artboard extent, select View > Fit Artboard in Window or type Command-0.

Now it’s time to make sure the linework looks the way we want it to look (though we can change it later too). Here we’ll use the stroke and color panels.

Select the geometry, then select the stroke panel to the right. Here you can change the line width as you see fit. There are other options you can play with here too; we recommend testing out different options on simple geometry first, then more complex geometry after you have a sense of what you want to do compositionally.
Note that you can input a stroke value in whatever units you choose; the default here is inches, but if you input 1 px it will translate that into fractional inches.
Finally, change the color. Because we’re creating a monochrome drawing, we’ll simply change the orange hue to black using either the color panel to the right or the fill and stroke tools to the left. Double click the stroke tool outline to bring up the color picker. There are several ways to choose colors; here, because this drawing is bound for the web, we’ll check the only web colors option, which limits the available colors.
Once you’re happy with how things look, save your work; you may now close the file.

The final step is bringing the geometry into our project file by placing it.

Navigate to the File > Place menu or use the shortcut (Command-Shift-P).
Select the file, then click and drag from the top-left origin point to place it onto the artboard. The outline that appears is the artboard from your cleaned-up source file of QGIS-exported geometry.

Now repeat the clipping mask workflow detailed in §05!

NB: It may be helpful to zoom out a ways before placing your geometry; this will avoid the “runaway scrolling” effect you might accidentally initiate if you scroll outside the current view with a heavy source file.

Congratulations, you’re done!

{L02}

ASSIGNMENT OVERVIEW

For {L02}, explore the workflows from the tutorial using datasets from the class DATA repo on Dropbox. You may choose to work with any combination of raster and vector data, including the datasets we’ve used in the tutorial. You must use at least two other datasets for your original lab work. You may also choose to work with any other similarly-scaled datasets with which you’re familiar that aren’t included in the repo. Like {L01}, however, this lab is not about finding, managing and manipulating datasets, so make sure you’re comfortable working with any data outside the sets we’ve prepared.

After becoming comfortable with the workflows, you’ll compose your own version of the “Point of Life” diagram discussed in lecture and in this tutorial, using a selection of datasets of your choosing. Your composition should be framed around the prompts posed in class:

Which Anthropocene alternative most interests you? Why?
With which others is it most strongly aligned? Opposed?

Choose one alternative “Anthropo(s)cene” (you may use any from Chwałczyk’s Appendix, or another that you’ve come across, as long as you provide the source) that will provide the viewpoint for constructing your drawing. Imagine this as a sort of inversion or turning inside-out of a GSSP (golden spike) and its technical criteria (as per Lewis and Maslin 2015); your drawing will be constructed like a “golden ring” that internalizes some of the essential markers, elements, and constituents of what makes this particular (s)cene unique.

Consider the following:

who or what is the key protagonist(s) (or antagonist/s) of that alternative (s)cene? This could be a figure centered in that narrative from any number of perspectives, including a kind (or class) of person, a community, a part of an ecosystem, an animal, plant, or mineral, etc. Draw your Point of Life diagram from that perspective as best you can; you will expand on this for the midterm, so don’t worry if it feels a bit clumsy or under-researched at first.
what different layers or “rings” are needed to represent the key elements of that (s)cene?
how should the rings be organized from the embodied “skin” layer (or equivalent) to an atmospheric one?
which rings should be emphasized more than others through radius, adjacency, etc?

You are not required to incorporate the elements of the “Critical Zone” drawing from Arènes et al (2018), but if you feel comfortable with Illustrator and that conceptual framework enough to do so, feel free to experiment!

Your composition may be critical, creative, or simply an exercise with the basics of working between QGIS and Illustrator.

DELIVERABLES

For your {L02} post to the Lab WIP channel in Are.na (due Thursday, 4/14 at 9am):

After developing an original POL diagram with the questions above in mind, export your drawing as an SVG or PDF (using Save As > Format > Adobe PDF or Save As > Format > SVG). Your work-in-progress should show at least four rings using vector data exported from QGIS, demonstrating that you can i) get from QGIS to Illustrator and ii) effectively use compound paths and clipping masks to compose a drawing.
Give your block a simple but descriptive title that gives some insight into what you’re working with and what it shows, e.g., “{L02} Urbanocene: From City to the Operational Landscapes of Urbanization”.
In your description, include the following:

A list of datasets used; if they’re from outside the class repo, make sure to link to the original source.
A “narrative legend,” i.e., short and clear description of what’s being represented.
Tell us briefly why you chose the datasets you’ve used and how your composition represents the key elements or “markers” of the alternative Anthropo(s)cene you’ve chosen.
Reflect on some aspect of the workflow with a view to the strengths, limitations, and/or biases of the Point of Life diagram. Some potential prompts include: What about this strategy works? What doesn’t work? Does it work on its own, or would it work better in concert with other kinds of media (and if so, which kinds)? What other datasets, research, or skills would you need to make this effective?

Remember to keep it concise; you don’t need to write more than 300 words (excluding, if you wish, the listing of datasets, which can have lengthy titles).