Love Nest

Correspondent Diederik Van Arkel made a request for more nitty-gritty posts on how I produce graphics, in response to my post about 1-bit images. I expect I'll do a lot of that over time, but I'll begin by describing what my Life Cycle of a Simple Risus Map only hints at: the way I construct a Risus map-graphic by working back-and-forth (and back, and forth, and back, and forth) between rasters and vectors.

---

In Toast of the Town, a Risus fantasy module you can snag for free if you'd like, the PCs are likely to meet a group of NPCs trapped underground in a place called the Nest, a repurposed room accessible from the town's sewers. Toast of the Town isn't a dungeon-crawl, so there's no real need to map the tunnels, but I felt a simple diagram of the Nest would be useful for the Game Master.

All Risus graphics are stick-figure drawings, which gives the game and its support material a goofy warmth I enjoy, and leverages my own absolute inability to draw. Like, I really can't draw. I do drafts of the stick-figures. And then sometimes the final stick-figure is a composite of parts of the drafts, because none of the individual drafts were tolerable. It's that bad.

So, while I have a decent visual sense and can make a pretty map if I want to, a Risus map needs to feel like Risus, which means it needs to be more like a "doodle" than a "drawing." With that in mind, let's follow the steps, to see how I use both Photoshop and Illustrator in a funky back-and-forth to get the doodle I want.

Step One: Scribble in the Art-Hole

Since this is a minor map and doesn't rate a full page, I wanted to fit the map to the page instead of the other way around. So, working with a draft of the laid-out module (you can see bits of copy poking in at the edges), I doodled the first draft directly onto the page, so I'd be 100% sure it would fit the aspect ratio of the "art hole" (what a lot of us call copy-spaces left empty for forthcoming illustrations). The original plan was to have the map where the hole was situated. As in all other creative pursuits, the plan didn't survive to the end, but that's usually a good sign.

It's Supposed to Be a Circle. My High-School Art Teacher Coddled Me.

As you can see, the very-basics are present: a round room with crushed radiating corridors, and two ways to get in: the secret door from the "sewers," and the tunnel leading to a kitchen basement that plays its own role in the adventure. Note my perfect handwriting. Even I'm no longer sure what word I'm labeling the radiating corridors with. Robe? Pole? This is why I'm a good typist.

Step Two: First Pass in Illustrator

In Adobe Illustrator, even a yutz like me can draw a circle and perfect straight lines, so the next step is a simplistic line-drawing using the Pen tool and some basic shapes in pure Illustrator vectors. While I want the map to be a doodle, I want it to be a better doodle than my doodle. I want the circle to be circular and the radiating corridors, crushed though they are, to be a uniform width in their non-crushed places.

In Illustrator, Even a Schmuck Like Me Can Almost Draw

Step Three: Tracing it to Pieces

I print out the Illustrator drawing, and trace it using a Flair marker (all Risus graphics are drawn with a Flair for consistency, and because that was the pen I chewed the most in grade school). At this point, I'm doing the actual doodle I'll use for the module, so the perfect circle acts as a guide, but I'm adding little notches to indicate grooves or supports in the walls, and I'm adding speckles of texture, and furniture and things: everything I know should be there ... sort of.

All Secret Sewer-Temples Available Pre-Furnished.
Ask Your Leasing Agent.

Because this is a planned process, I know I don't need to draw every piece of furniture, and I know I don't need to draw everything in its correct place, so I don't. I know I'll need more than three bits of bedding, for example, but I know that three different bedding symbols will be sufficient, in the final graphic, to make the whole thing feel hand-drawn, so I only draw three. What I'm doing is creating pieces, that I'll later be able to copy-paste and rotate and place correctly. I don't even attempt to draw the door in its correct place, because I know I'll only mess that up!

Step Four: Digital Tracing and Layout

I scan the Flair doodle at high resolution, and, in Photoshop, I simplify it to a 1-bit raster, and clean away any schmutz I don't want. I leave the lines in their rough, natural state for now.

At This Stage It's Just Like Playing in a Mapping Program

I leave Photoshop and bring the image over to Illustrator, where I use the Live Trace feature (Illustrator CS2 to CS5) or Image Trace feature (Illustrator CS6 onward) to trace it. When I first developed this technique for A Kringle in Time, I did the tracing in Adobe Streamline, and you can also use Corel Trace or the Potrace function built in to InkScape, or other methods. In digital graphics, "tracing" programs are those that create vectors from rasters. Tracing can be messy and fraught, and it's only a good idea in very specific instances ... but a simple line-drawing like this map is one of them.

Once the trace completes, I can expand the tracing and group together lines into sensible objects: crates, distilling gear (there's some alchemy, of a kind, happening in the Nest) bedding and so on. Since each object is a group of vectors, I can grab them with my mouse, move them around, duplicate them, spin them, mirror them and so on - they're now just symbols I can use at my discretion, including some stacking (that little pile of three crates I make). In this step, I use the vector-pieces to assemble the map into its final configuration.

Step 5: Smoothing

It's time to leave Illustrator and go back to Photoshop. I rasterize the map at a high resolution, and I apply a nice Gaussian Blur filter to it. Then I "harden" the blurred image by using the Contrast sliders (refer to the graphic for the slider settings). This trick is essential to the Risus look, which always has that kind of smoothing applied to my rough Flair ink-lines. Everything I'm doing to this map, I do to the LCBs (the stick-figures are called the LCBs; it means Little Cartoon Bastards).

To finish this step, I once again drop my bitmap to 1-bit, that magical, lovely format.

Step 6: Tinting and Finishing

So far, we've done a doodle, then an Illustrator drawing, then a physical tracing, then a cleaned-up scan, then a digital tracing, then some "refurnishing" in Illustrator, then rasterizing and smoothing in Photoshop. So we've gone from vector, to tracing, to raster, to vector, to raster again. Yikes. And now it's time to go back from raster to vector!

Vectors are Cold, Doodles are Warm.
When Combining Them, The Warmth Wins Out, Overall.

Back in Illustrator's cold embrace, I digitally trace this new 1-bit graphic, resulting in a new vector. But this time, the goal isn't to arrange the furniture, just to color it. Toast of the Town has a very specific "pale chocolate mint" color palette, which every stick-figure/doodle graphic conforms to, and I begin the finishes by hand-selecting each part of the new trace and applying the relevant color swatches. I finish the finishes by applying the labels, complete with label "halos" to keep the label text from blending too cleanly with the mappity background.

Amusingly (perhaps) the part I'm glossing over is that I create those halos with an entirely separate series of vector-to-raster-to-vector techniques (in photoshop I thicken the label text with a crude application of the Minimize filter, and then smooth it out with that same Gaussian Blur followed by extreme contrast).

Eventually, I end up with a nicely-layered Illustrator document, with map layers underneath label layers, and every visible thing a result of these multiple passes between raster and vector.

This is a Raster of the Final Vectors,
Which Means I Did it AGAIN. I'm Cruel to Doodles.
Click to Embiggen, if You're Into That.

Now, obviously, this is a lot of planning and a lot of steps to end up with a doodle map, and you're probably too cool for doodle maps. I get that. You are super cool; I've always said so. But if your brain is a creative brain, you're already seeing how this technique can apply to many other kinds of carefully-constructed graphics, and you'd be right about that.

If you're an experienced wizard with these tools, you might also be thinking: couldn't this be simplified by smoothing the raster before moving between Steps 2 and 3? It's true that I can, technically, shave a step there, and Risus Game Masters might never notice the difference. The reason I don't is the (beautiful) way the Gaussian technique smooths overlapped lines. Just a moment of reflection should reveal what I mean, but if you're still doubtful, try it yourself, and compare both methods using symbols that you overlap in Step 4. Look carefully at the overlap points in the final image. It's a tiny thing, I know, but this is what I get when I combine my zeal for excellence with my focus on ... badly-drawn stick art. If nothing else, this is how we get our recommended daily allowance of irony. Stay healthy, folks, and remember: my inbox is always open.