Anatomy of an Illustration

The reality: We have zero budget for hired guns—nor do we inherently know much about editorial illustration. Instead, we’ve always tackled Cognition in a true DIY manner. Our illustrators are Happy Cog employees volunteering to help out. In fact, the only trained illustrator on staff is…wait for it…our Business Development Director, Joe Rinaldi.

Each week, one of our seven illustrators takes a turn in the rotation. To keep the overall effort from being too bureaucratic, each illustrator works directly with the author to discuss the direction for the art. So, how do you craft an editorial illustration process that is decentralized yet still conforms to a consistent art direction? As all designers know, a smart process and specific constraints are your allies.

Constraints for Freedom

Constraint 1: Don’t overwhelm. Large canvases tend to create nervousness. Our image is petite on purpose. That means an increased focus on the idea and less ephemera.

Constraint 2: Offload some of the decisions. We work with a limited color palette. The reduced color options ensure that each illustration will fit in with the entire Cognition family and take that burden off of the illustrators.

Constraint 3: Time is never in abundance. Timeboxing the effort helps to clarify when decisions need to be made or diagnose when a specific step is dragging. A draft of the article is due on Monday, and the illustration needs to be prepped and ready by Wednesday for a Thursday launch. Combine that with normal agency duties, and you can see how crucial it is to be time-efficient. Not all of our illustrators timebox. To better monitor my own efforts, I’ve honed my process to ensure I create (idea to completion) the entire illustration in a three-hour window. Disclaimer: Not every illustration actually hits that mark, but most come close.

The Magic Revealed

Another meaningless milestone: I’ve now contributed 25 illustrations for Cognition (and have had my hand in another 10–12, assisting in the idea or production). Look between the lines again. As a result of all these attempts, I now have a clear process that makes the best use of limited time. Let me divulge the important steps that save me time while I craft the style and form of my illustrations:

Step 1: It’s all about the idea (Tools: pencil, paper, and your mind).

Strong editorial illustration is infused with a core truth about the article it supports. How to actually uncover this didn’t occur to me until I had a conversation with Yesenia Perez-Cruz regarding a lecture she attended by renown illustrators and designers, The Heads of State.

Their concepts are born from trying to combine two separate ideas into a forced connection. The practice of forced connection provides the opportunity to discuss the absurd, impractical, or potentially intriguing results of the mash-up. In order to successfully integrate this approach into my process, I needed a tool— mind mapping.

Listing all of the derivative words and ideas directly (or loosely) tied to the article’s main idea is therapeutic. This list becomes the first visual artifact in finding potential connections and surfacing a concept.

To be honest, this doesn’t always lead to a slam dunk. Often, I need to abandon mind mapping for a day and wait until my mind settles down and begins its own processing work. At least half of my illustration concept epiphanies have occurred in the shower or during the morning commute when my mind was a bit more adrift and relaxed to make that successful connection.

Step 2: Sketch and Layer (Tools: pencil, paper, and scanner)

With a forced connection concept firmly rooted in my brain, I then determine the form the illustration will take. For me, form is directly linked to style. Drawing by hand has become the fastest and most successful method for me to create form.

Rough thumbnails for layout quickly evolve into layered sketches; each object (the background, the foreground, the shadowing) is an individual sketch and scan, so that final compositing is easier and quicker. If I need source material to help me define something, I use stock imagery and rely on tracing paper and a steady hand. The key, though, is to keep the drawing dissected into as many layers as possible.

Step 3: Vectorize (Tools: Photoshop, Illustrator)

I want my illustration assets to be as malleable as possible, so to set myself up for successful compositing, each layer needs to be a vector.

After scanning each sketch, I adjust the levels in Photoshop to ensure a strong contrast, then copy the image into Illustrator. There, the Image Trace tool is my best friend.

It might take some fiddling in the settings to get the result I want, but well-drawn source material should translate clearly. Once I’m happy with the vectorization, I hit Expand to finally render the drawing and make each individual piece selectable. (A few Ungroups are usually necessary.)

For years, this next maneuver eluded me. My knowledge of Illustrator didn’t include the understanding that I could select all objects based on common color or stroke. This crucial part enables manipulation of just the foreground part of the scanned drawing that is now vectorized and gets rid of any negative space fills that are a left over from the Image Tracing.

In Illustrator, I use the Direct Selection tool to select any white elements that have been added automatically during the Image Tracing. The resulting vector object shouldn’t have any shapes or fills that aren’t necessary for compositing. Then, I navigate to the Select menu option and choose Same > Fill & Stroke. This automatically selects all the “white” objects in my vectorized drawing.

Hitting delete never felt better.

The resulting drawing in Illustrator should match what was on my paper. Now, the fun begins.

Step 4: Compositing (Tools: Photoshop)

The final illustration compositing happens in Photoshop. I’m quicker in Photoshop, so it has always been my tool of choice. The transition from AI-to-PSD begins with copying and pasting each scanned object (one by one—not together) into Happy Cog’s preset Photoshop template.

To ensure scalability and easy manipulation of color, I use Shape Layers instead of any of the other objects.

Once in Photoshop, each copied vectorized drawing is its own scalable, colorable element on its own layer. This lets me re-layer or individually manipulate each element. Using ye olde imagination is often rewarded at this juncture. Do not allow yourself to be handcuffed by your original sketches. Manipulating each object and letting happy accidents occur can help shape the final form and bring the illustration to life in ways that often can’t be sketched or planned.

(Note: Want to see the final result? Read Patrick Marsceill’s great article on prototyping)

The Last Draw

Editorial illustrations work an entirely different part of our designer brains. I’m proud of the body of work our team has created in support of Cognition. Yes, it would have been easier to write articles without illustrations or just give all illustrations to one person, but the opportunity to stretch our own skill sets has made us learn and grow.

As a result, we have become better problem solvers. Having the confidence to say, “Hey, I don’t know what I’m doing, but I’m going to learn,” is how we can differentiate ourselves and improve our skills as professionals. Remember, no one is ever an expert when trying something for the first time.

Back to Top