Grow your CSS skills. Land your dream job.

Combining Hand-Drawn and Digital Illustration Techniques

Published by Guest Author

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 joe@hugsformonsters.com, 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)
  • Pencils
  • Plain ol' printer paper
  • Tracing Paper
  • Printer
  • Scanner

Optional:

  • 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.

Scanning

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 joe@hugsformonsters.com

Comments

  1. WOW!
    This is a pretty detailed post!

    Chris, this has always been a problem area for me – but won’t large images, combined with a CMS bloat the web page and make it slow for users?

    How can you best minimize these issues?
    Interlacing is a possible one, but not really for a large background image.

    • Look up CSS Sprites, it’s a great way to reduce the number of HTTP requests meaning the page can respond faster by downloading less images.

      Also if you think about it, it’s not that much. Most of it will go into the template background, header, and footer. Then it’s the little things that you will have to either put in sprites or just use over and over again.

    • Permalink to comment#

      File size is no doubt an issue, despite the fact that things like fiber are providing much faster loading times.

      Some things you can do are:
      CSS optimisation found Here or here
      Find programs to reduce the size of files (this can also be done a little bit in Photoshop when you [save for web]
      Also if you have the ability caching your images can help a lot for speedy loading.

  2. Steve-O
    Permalink to comment#

    Pretty cool. I might use this technique for my next site. This is the first time i heard of Wholesale, Retail, and No Sale.

  3. Wow! That’s how you do it. ;)

  4. I love these kinds of posts, where we get a peek behind the curtain in to the creative minds of people. I just caught word of this site last week and have to say I’m digging it. Thanks for sharing.

  5. I never looked at from this point of view. Great post!

  6. Really love the Illus and your style!!! Good posting!

  7. Thats a great post, really in depth, i love drawing random stuff for web design

  8. Permalink to comment#

    I’m glad I had the pleasure of having Joe design this site for us. He’s super enthusiastic about projects and actually cares about making compelling and mood fitting designs for websites. While I’d still be using the marquee tag, Joe is making custom dioramas and using mixed media to bring texture to our headers. All around talented dude and this article shows you the passion he has for this kind of stuff.

    Thanks again Joe, “you da man”

  9. Wow, great article!

    • Sotir
      Permalink to comment#

      Hate people who leave stupid comments…

    • Randy
      Permalink to comment#

      How does it feel to hate yourself?

    • ROFL!

      A very useful article. Nice to know how this kind of thing is done. I don’t plan on making this kind of site anytime soon, but I will take the Wholesale, Retail, No-Sale advice; a good way to remember those things.

      Thanks!

    • Hate people who spew negativity…

      This is one of my favorite articles on here in a while. Why is that “stupid”?

  10. I’ve always admired the hand-drawn sites (http://imwithsully.com/ is another good one, though with less drawing), but I’ve never been able to make it work for me. I’ll have to take some tips from here and try again.

  11. BebopDesigner
    Permalink to comment#

    Brilliant! Thanks for sharing.

  12. navin
    Permalink to comment#

    thanx for this

  13. Great post, I have everything in the list, so what am I waiting for? Never really worked in this way before but I imagine it could be interesting.

  14. By the way, I started working on a design some time ago that uses hand-drawn graphics:

    http://czentnar.try.hu/project/orchidea

    (sorry for double post!)

  15. Cool…we are working with a couple of illustrators at the moment…will show them the technique!

  16. lala
    Permalink to comment#

    very nice …specially in these times of generic css pages that all look alike…. (u know the boring portal look) – its all feels so bussiness like and generic to me

    i usually try to add some difference to my designes or at least some old school look to things and this is shure a great way to make a site step out a bit (or a lot :D )

  17. Aylan
    Permalink to comment#

    Fabulous post! Very Freshh!

  18. Very nice and I like your way of hand crafting things, it always give it that special element. I suggest a wacom tablet for anyone wanting to draw digitally on a computer, so much better than a mouse and it’ll save you a lot of time.

  19. About to make a theme like this for my site (we’re going to attempt to create multiple themes to show specific customers, who might not know what they want, designs and layouts that we’ve created without leaving our site, Css-Zen garden style ).

    I’m thinking about calling the hand drawn site “Art School Drop-Out”. I’ll be posting it in the forum when it’s finished. Thanks for the knowledge! It’s definitely difficult to know where you start making a website like this. this article has given me an interesting perspective on where to start. Thanks!

  20. I’ve had a design like this in my brain for a while now… own the domain but just need to get it down on paper!

    Thanks for showing us your process. I never thought about cutting out the elements and then scanning them! Gives it that extra ‘hand done’ touch!

  21. Permalink to comment#

    Looks cool man, i may have to dig out my old graffitti sketchpads and mess around with some drawn / digi effects!

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".