The following is a guest post by the first-rate illustrator Joe Lifrieri. Joe walks through his own process showing us not only how he does things but why. You can see Joe's portfolio and blog at Hugs for Monsters, email him at firstname.lastname@example.org, or catch him on twitter @hugsformonsters.
In a medium that relies heavily on geometric shapes and synthetic textures, handmade illustration serves as a great way to make a site feel a little less manufactured and a bit more human. There is an honest, humble charm in the tiny imperfections found in handmade things, and the right illustration can give your design something that so many others lack: a feeling of sincerity. The obvious obstacle to incorporating handmade illustration is that not every designer knows how to go about creating and implementing it into their sites. I'm here to share with you my process and some helpful tricks I've picked up along the way. As a bit of a caveat, this isn't a tutorial or a how-to, per se. This is a guide of my personal process which you can use to inform your own technique. The idea isn't to recreate an effect, but rather to inspire.
What you need:
- Pens (Extra fine point Pilots if you're desperate, Micron Pens of different widths if you want some flexibility)
- Plain ol' printer paper
- Tracing Paper
- Watercolor Paper (If you choose to color your drawings via watercolor and not digitally)
- Watercolor paint, brushes (for the above)
If you just can't work with paint, colored pencils, or markers, Bittbox has a great set of max-res watercolor brushes for Photoshop.
- Lightbox or light table
For this article, we'll be referring to a recently designed site of mine called Bomb Guts:
This particular illustration focuses on the background of the site. Also, rather than creating one large illustration, it is comprised of many small elements that were drawn, colored, scanned, and composited in Photoshop. When working with a complex illustration such as this one, I find that this method is very flexible and forgiving since it allows you to reposition individual elements at will.
Whole Sale, Retail, No Sale
First thing's first: you need an idea! While this is ultimately project specific, there's a few guidelines I can give you. This type of illustration, my style in particular, doesn't lend itself very well to ultra serious subject matter. Your best bet is to keep it on the fun, wild, weird, and lighter side of things.
Start sketching your idea out on the cheap printer paper in pencil. Establish the area you'd like the drawing to appear in (in terms of size and relation to the rest of the page) and begin sketching out your elements. Even if it's just general shapes or the direction you want the users eyes to move around in, it's a start! Work in layers and slowly fill in your desired area.
A lesson from my former drawing instructor is very helpful here in the pencil sketch stage. He would often stress the use of three different levels of element use in illustration with an old saying, "whole sale, retail, no sale". Let me break it down:
- Whole Sale refers to elements that you repeat many times throughout an illustration to create visual texture and a sense of consistency. Most often the simplest forms in your piece with the least detail.
- Retail refers to objects that are repeated several times throughout your piece to guide the user's eye around the illustration. Good for introducing new shapes or color.
- No Sale objects are used very few times, typically only once.
While pencil sketching, plan ahead and sort your elements into these three groups of rarity. This will make it easier to make decisions while adding new layers of elements. As you can see from Bomb Guts, I tend to use simple geometric forms for my most common or "whole sale" elements. Circles, arrows, and linework all look great when repeated in close proximity to one another and in varying scale. When distributing elements, especially on the "whole sale" level, its important to keep The Principle of Uneven Spacing in mind. From "Design Basics Index" by Jim Krause,
"Varied measurements around points-of-interest tend to heighten the visual interest and energy of the piece and convey a sense of creativity."
Simply put, try and make sure the spaces between your objects aren't all uniform. This helps to imply movement and variety. On a similar note, make sure that your objects aren't all ending on the same line. This makes a composition feel boxy, static, and to put it frankly, kinda boring. The negative space between objects becomes far less interesting when it becomes too uniform.
As far as your "retail" and "no sale" elements, its best to try and relate them to your subject matter. Make them special! Try and introduce new colors, shapes, and levels of detail. Use these elements to focus the user's attention and guide them to important areas on the page.
The Easy Part
I'll be making a few pieces from each section along with you to provide examples. Let's start with the "whole sale" and "retail" elements.
This is pretty simple stuff. Rather than trace directly from your drawing, you should create completely isolated objects on your paper of choice. When it comes to paper, it all depends on how you want to color your work. Colored pencil works fine on printer paper, marker works great on bristol or tracing paper if you color gently, and watercolor paint works best on watercolor paper. I've always been a fan of Strathmore papers, but Canson is a great brand too.
Ink is obviously less forgiving than pencil, so take your time and focus. Watch the tip of your pen and where you want it to go next. A little imperfection is a great thing, but if your shapes are coming out unrecognizably wonky, feel free to create a simple set of shapes in Photoshop or Illustrator to trace over. This is where your light table or tracing paper comes in handy.
While you'll ultimately be repeating these objects digitally in Photoshop, it's best to make multiple physical copies of each. This allows for slight differences, different line weights, and allows you to experiment with several colors before having to tweak Photoshop adjustment layers.
Color your elements however you like, cut them out with an Exacto, and place them aside.
I prefer to cut my elements out by hand for the imperfect edges it leaves. If you're uncomfortable or too impatient to use a blade, you can leave your images physically uncut and extract them entirely digitally later.
Next are the all-important "no sale" elements. These are very special, as they'll be what the user's eyes will settle on. In cases like Bomb Guts, they can even be used to draw attention to important parts of the layout, such as the navigation or romance copy. Try and introduce brand new shapes and colors to make these elements pop. Also extremely helpful is the use of extra detail and varied line weight to create depth. With these elements, you're attempting to capture the spirit of the site within a single object I like to make characters or mascots out of these elements. It gives the voice of the site a face to go along with it, and helps the users relate to the design.
Making your stand-out elements mascots adds a lot of personality to your site
As far as production goes: same as before. Sketch, ink, color, cut. Just take it extra slow: these should be your most polished elements.
Arrange as many of your images as you can comfortable fit on the scanner bed and scan them into Photoshop. Your results may come in clean and easy to extract with something as simple as the magic wand, but occasionally it will take a bit of effort. Here are some steps to help with extraction and retouching of individual elements.
Copy your background layer. We'll work solely on this copy and leave the original layer untouched in case you need to refer back to it later.
Next, apply a levels adjustment layer to increase contrast. This is pretty image specific, but you'll want to eliminate most of your gray tones and bring them closer to either black or white without blowing out the color in your element. Next, separate every object in your document into their own layers with the marquee or lasso tools.
When it comes to extracting your objects from the background, there's a lot of tools at your disposal. Stuff like selective color or the magic wand can work well if you have very clear differences between tones in your document, but can also be destructive and vague about what they will and won't select. I prefer to use layer masks. Unlike erasing, it's non destructive and you get a ton of control over exactly which pixels you will and won't select. You're essentially painting what you want visible on the layer.
By pressing the forward slash key while within a layer mask, you'll bring up a special visual mode that highlights areas you've made invisible with a red overlay.
It's okay to leave a little bit or a lot of paper around the edges of your element. It emphasizes the handmade nature of the project and gives it a little bit more of a "cut out" feel. Once it's extracted, feel free to bump up the saturation to combat the color fading that occurs during scanning. Finally, sharpen the layer via the Smart Sharpen filter. use a low pixel radius of 0.8 or 1.0 pixels and an amount somewhere between 50 and 70 percent.
A little spit and polish goes a long way. Looking good, big guy!
Repeat this process for each of your elements, varying adjustments like saturation and sharpness to accommodate each object's needs.
Laying It All Out
A strategy that helps some people is to scan their pencil sketch and lay it over their design at 60% opacity to help them place objects more quickly.
Once this is all done, open up your page design, copy over your elements, and begin to lay them out as you did in your pencil sketch, keeping in mind what we discussed earlier about the Principle of Uneven Spacing and being mindful of where objects end. Once you're all finished laying these elements out, apply any final layers of polish necessary, particularly saturation. If you find any areas don't feel full enough, print out a screenshot of the area and start sketching more of your "whole sale" elements in.
All finished! I hope this will inspire you to incorporate more handmade elements into your own work. If you have any questions, feel free to contact me at email@example.com