Hey everybody, you may have noticed that we just launched the new #bigomaha site. You may have also noticed that a great deal of it is hand-illustrated. This presented a bit of a problem, because in order for us to be able to achieve the most liquid and dynamic layout, every bit of hand drawn text or illustration on the site needed to have a nice, clean, perfect transparency.

So what is the best method for pulling something off of a white background while keeping all of its detailed nuances not only on the edges, but throughout the form of the line? Your instincts may send you right to the magic wand tool, or some other method of direct selection. While that somewhat solves the problem of isolating the line from the page, it does so imperfectly, and it loses all of the detail from inside the line. To be honest, this is a problem that I’ve wrestled with for years on various web projects, and I’ve only just figured out a really consistently great solution.

Adam's Illustration of Brian WongThe color-corrected, flattened version of one of Adam’s Illustrations.

The Solution

Let’s take, for example, one of Adam’s illustrations from the Big Omaha site. First, some basic color correcting, making sure not to blow out the detail, but to clearly separate the intended background from the foreground. After you have a satisfactory black and white image, it can be broken down into a simple ten step process:

  1. Make sure your background color is set to black
    (for step #9)
  2. Select the canvas (⌘ + A)
  3. Copy (⌘ + C)
  4. Toggle into Quick Mask mode (Q)
  5. Paste (⌘ + V)
  6. Toggle out of Quick Mask mode (Q)
  7. Inverse the resulting selection (Shift + ⌘ + I)
  8. Start a new layer (Shift + ⌘ + N)
  9. Fill the new layer with Black (⌘ + delete)
  10. Enjoy
Adam's Illustration of Brian Wong in PinkThe completed, perfect-transparency version of Adam’s Illustration.

The result of the filled layer gives you a completely unadulterated version of the ink separated from the page, and it allows you to use Photoshop layer styles and other functions to modify the color and anything else you can think of.

For proof of how great this technique works, drag the image above to your desktop. Or see a lot more transparency on the Big Omaha 2012 site.

View the project page for Big Omaha 2012.