Teevio

Illustrations As Design Elements

March 4th, 2015

I like to design things. The only problem is that while I’m good at layout, color and typography I’m just not that good at the artistic design-y part of designing. Maybe that’s what people call a UX or UI designer? I’ll let you decide what I am. What I do know is that if there’s a crutch to be used I’ll use it. Since I’ve been posting a ton of free illustrations, I thought I’d show you how I use them and how you can too. So raid the infirmary, stick those crutches under your pits and let’s get started.

Have an idea

The first order of business is to come up with something you want to design. If you notice in my site footer, I have a really cool old map of New York. I also have a really old pamphlet thingy with a nice drawing on it. Both of those design elements were pulled from illustrations that I found on the internet. The water color in the header is pulled from a page in Scuffy the Tugboat. I had ideas and then I figured out how to get those ideas implemented without actually having to do it myself and without stealing of course.

Ultra Hi-Res

Once you have your idea and the source material for that idea, you’ll need to make sure that the source material is as hi-res as possible. I found the New York map via Google Images and the pamphlet illustration via Flickr. Since I owned Scuffy the Tugboat I had no problem getting a hi-res scan of the page that I liked most.

Extraction

The reason for a hi-res source is so you can extract out the part you want. The higher the resolution the more forgiving the extraction will be. You’ll want to open up your source graphic in Photoshop (or similar program) and then you’ll want to use the Magic Wand to select and delete out the background. I usually start with the following settings:

  • Tolerance - 30
  • Anti-alias - Checked
  • Contiguous - Unchecked

thumb thumb

Oftentimes there will still be some straggling color. Do your best to magic wand that out as well, but don’t sweat it too much. The next step will actually cover over a multitude of straggling background colors.

Implementing

After you’ve deleted out the background and have the illustration left, you can slap this baby on top of whatever you want. The trick here is to experiment with color overlays, opacity and blending modes to get the desired effect you want.

Using a color overlay will get rid of any non-uniform color and gives a nice solid look to the illustration. But, changing the blending mode sometimes resolves this issue without having to put a color overlay on top. I use opacity mainly for aesthetics. In the following 2 photos I used all of these to achieve the desired look that I wanted.

thumb thumb

That’s all there is to it folks! If you’d like to practice with the assets I used, here’s a handy list of links. Some are free, some are not: