Linework: moving from mapping to drawing
Working with paths, shapes, and masks in Adobe Illustrator
§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.
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.
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 typeP
. 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 apath
. 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 smallo
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 apath
instead of ananchor
; 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 theanchor
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 theoption
key while you click and drag. Your cross-hair cursor will turn into a tiny bulls-eye, framed by a broken circle.
- 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 theoption
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 thealign
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 selectingWindows > Align
. - Test out what the different
align
anddistribute
tools do. To recenter the circles, we’ll use a two step process:horizontal align center
andvertical align center
.
On your own:
- If you wish to be more precise, you can use the
Object > Transform > Move
menu option, orCommand-Shift-M
. There are othertransform
options you can play with here as well. For transformations that work with simple geometries, we recommend turning on thepreview
option (by clicking the check box) in themove
dialogue. You will see a live preview of the transformation according to the parameters you’ve set; if you like what you see, clickOK
. - 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 yourlayers
panel on the right (or select it fromWindow > Layers
) and find the+
button at the bottom. Click it to create a new layer, or bypass the whole process using the keyboard shortcutCommand-L
. Now turn off your other layer by clicking the smalleye
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 oroption-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 setradial dividers
to0
. ClickOK
. - By default, the grid will be created as a
group
, which treats your grid as a single object. You cangroup
andungroup
objects using theObject
menu orCommand-G
(group) andCommand-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 theselection
tool by pressingv
. You can also use theselection
tool toisolate
the paths within the group bydouble-clicking
the group object. To exitisolation
mode after making your modifications, pressesc
.
- 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 newgroup
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 thescale
tool from theObject > 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 theWindow > Pathfinder
menu). - Test out what the different pathfinder modes do. In the example shown above, we try two: the
unite
function and theminus front
. While theunite
function simply merges the two geometries, theminus 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 — acompound 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 pressshift-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 thefill and stroke color
tools to the bottom left of the toolbar, or thecolor
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.
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 pressshift-M
. Hover over your circles; you should see a grayed-out section appear where theshape 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 orCommand-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
orShift-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 orcommand-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, pressesc
. - 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.
- 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 theSelection
menu; scroll down toSame > 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 yourproperties
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 typeCommand-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 thefill and stroke
tools to the left. Double click thestroke
tool outline to bring up thecolor picker
. There are several ways to choose colors; here, because this drawing is bound for the web, we’ll check theonly 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
orSave 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 usecompound paths
andclipping 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).