Tue 12 Jan
2010

Having Fun with Pains

Body

Last week, The Hype Machine, a sort of combination music meta-blog and playlist, published its round-up from the year just ended, including its listing of the top fifty bands of 2009, with each of the fifty slots illustrated by an invited visual artist. If you skip ahead, you’ll see that the indie pop contenders The Pains at Being Pure at Heart came in at number thirteen, and that the illustration was done by none other than yours truly.

Seeing Forest, Trees

What I produced was less of a traditional illustration, really, than a kind of typographic/photographic hypothetical.

I gave myself the assignment of designing something vaguely like a poster or an album cover, borrowing some aspects of those forms without actually serving any real purpose other than nominally marking the band’s place in the countdown. (By the way, their debut album was among my favorites for the last year; buy the CD or download from Amazon and I get a kickback). Mainly, I took the opportunity to have some fun.

By way of demonstrating my meager photo retouching talent, I thought I’d share the genesis of this illustration. It started with this photograph, one of a series of shots I took while visiting central Illinois, where my girlfriend’s parents have a view on a beautiful wooded area.

The first thing I did, obviously, was crop down the photo to match the 900 x 600 proportion that specified in Hype Machine’s brief to me. I tried to select as visually interesting an area as possible that, crucially, would form a kind of natural grid, as I knew I’d want to run type behind it.

Next step was to set the type, which is shown here with all of the funky kerning that I had to add in order for the words “Being Pure at Heart” to read from behind all of the branches.

In order to get the letterforms to recess, I created a new channel from the blue and red channels of the photo itself, adjusting the levels for maximum contrast.

Once I had that alpha channel, I used it as a layer mask, which achieves the desired effect of obscuring the portions of the letter forms that ‘stand behind’ the trees.

Obviously, the type wasn’t showing up very well against the light blue sky, and some additional contrast was in order. To do this, I added a few different layers of gradients on top of the imagery, setting them at about sixty percent transparency and setting the layers to multiply the gradient colors with the image data beneath. Here, a dark blue gradient, starting at full strength at the very top and diminishing to nothing about halfway down the image, is applied to darken the sky.

And here a bright orange gradient, starting at full strength at the bottom and diminishing to nothing about a third of the way up the image, is applied to warm up the trees.

I found that orange to be too chromatic though, and what I really wanted was for the thickest area of the trees to create a background solid enough to set smaller type against. So here I added a gradient of black to the bottom and set it to darken the tree trunks and deaden the warmth a bit.

Having achieved the relative contrast I was looking for, I stepped back and decided that the overall effect was a bit too artificial. So I used a levels layer to lighten the whole canvas.

Finally, I added the smaller blocks of text — which are purely decorative, really. The two blocks on the left and the right are passages taken from the band’s Wikipedia page, while the text running along the bottom is the track listing from their debut album. All of these smaller blocks of text were intended to be displayed too small to practically read; again, they weren’t intended to be functional but rather merely decorative.

That’s it. Again, you can see the illustration at a larger size over at Hype Machine. Not a whole lot of concept, and only a modicum of true Photoshop skillz, but, for me anyway, a nice bit of fun.

+

Remarks 7 total remarks were added before the post was closed.

Tue 12 Jan 2010 at 04:49 pm
Able Parris

I quite like this, Khoi. And thanks for sharing your process.

Tue 12 Jan 2010 at 06:53 pm
Kev Adamson

Fair play that is awesome :)

Tue 12 Jan 2010 at 09:38 pm
Cecilia Salinas

This is awesome, what is the typography used?

Wed 13 Jan 2010 at 11:10 am
Khoi Vinh

Cecilia: that’s good ol’ Futura Bold. Glad you liked it.

Thu 14 Jan 2010 at 05:27 pm
Kristina Schneider

One of my absolute favourites out of the 50 artworks. Thanks for sharing!

Fri 15 Jan 2010 at 02:41 pm
Anthony Volodkin

So cool that you shared the process!

Was a pleasure to have you contribute!

Sun 24 Jan 2010 at 07:39 pm
xtine

I think my students would love to see your PSD file - are you willing to share it?

Categories