How This Card Was Made

Making a Photo Illustration with Photoshop and Illustrator

Theme

The 2009 theme was “twitmas,” using twitter.com to comment on the impact of social media. A high-falutin’ concept admittedly, but it was a last-minute choice.

For two years, I’d had the 2009 card all planned out. It was going to be based on James Cameron’s long-awaited and eagerly-anticipated movie “Avatar.” I’d even done some mock-ups in January.

But in August, we got to see a 15-minute preview and, although technically impressive, the film seemed thematically uninspriring to me. (Of course, I ended up being alone in this thought as Avatar became the biggest-grossing movie of all time. Hmm.) Also it didn’t have an iconic image suitable for our card. So we scratched around for something else.

We wanted a theme that was topical, of-the-moment, that everyone could relate to as being emblematic of the current year. But we couldn’t think of one dominating subject in the media. So then we thought, why not tackle modern media itself? Yeh, sure.

Laid off from her job, Jennie had been updating her public relations background by learning about “social media” — blogs, Facebook, Twitter, LinkedIn and the like. We’d had more than a few laughs over the banality of “tweets” (twitter posts — “SMS” text messages of 140 characters or less) and the self-promotion of “FB” (Facebook). Yet, truth be told, our annual Christmas letters were similarly banal and self-promoting. Also, it seemed that online groups were, to us, that dreaded generational gap thing, where we just didn’t “get” it. What’s wrong with going for a pint at the pub? We’d become so out of touch. Maybe we could make some jokes about ourselves and society with social media as the theme.

Imagery

Image-wise, there was little to go on. I could do a fake Facebook page, or a “Brady Bunch”-style grid of our faces (as Facebook “Profile Pictures”, or avatar images) but those seemed a little dry and uncreative. Instead, I pretty much abandoned the theme and went with conceptual art that I was interested in. Perhaps, with Twitter-style text slapped on, I could pass it off as something to do with social media.

From last year, I still had a hankering to work with Shepard Fairey’s terrific Barack Obama “HOPE” poster. (For 2008, it got beat out by the more entertaining Sarah Palin theme). I loved the simple and iconic style. It reminded me of an album cover I’d always admired — “I Just Can’t Stop It“ (1980) by The Beat. Maybe I could mix that with the wonderful hip style of the Apple iPod ads — silhouettes against colorful backgrounds. Technically, this should be pretty simple, e.g. quick to produce. Since we were, as always, already behind schedule (with not enough time for something as complex as our "Lost" card), "quick" won.

Of course, it was not quick.



Photography

I tried several tests of photographing our side profiles against different light sources, including the sun.



In the end, a simple set-up in the kitchen worked best (the first picture of Roxy, above left).

I used the kitchen door as a gray background (something smooth to easily reference in Photoshop) and a large white card at 45° under the chin to balance the overhead light. The lighting and skin tones on the side of the faces were awful but that didn’t matter as only the profile (the edge of the face) was needed.

To remove any sense of perspective (i.e. to get a very "flat" image), I used a long lens (135mm). To ensure a sharp edge to each profile (i.e. to make everything in focus), I used a tripod, a high ISO (800), and a small aperture (f8).

As usual, my models wouldn’t cooperate. Redford would only interupt his game of Poptropica for one shot — fortunately I nailed it. Roxy, on the chosen day, was in a grumpy mood and refused to smile or have her hair combed (which is why I have time to write all this text today!). And Panang became afraid of the tripod and is (rightly) suspicious of any mass offering of biscuits. I imagine Annie Leibovitz has the same problems.


Dummy

Dummy #1

I made a rough mock-up in Photoshop to see how the elements would fit together. For the faces, I used Images/Adjustments/Threshold to get the two-tone effect. On Roxy’s face, I experimented with a blue gradient for the dark region and opacity/transparency for the light region (with a pattern showing through).

To get the right typeface for "Twitmas," I did some exhaustive search on the official Twitter font. Was it Pico? Arista? Alba? It seemed like a customized version of Pico and Arista. Then I found LogoTwitter and used that instead.

Twitter bird

I didn’t like dummy #1. The people seemed to be looking at something, but at what? I did some more research on Twitter and came across the official Twitter bird. Eureka! This was an excellent third element to tie the faces to the text and theme.

Dummy #2

The bird was perfect. It added a visual focus, and some levity with Panang ready to pounce. I repositioned the faces so that everyone was looking at the bird. Adding some Twitter clouds and a tweet really pulled the theme together. (That font, by the way, is the lovely humanist sans-serif typeface Lucida Grande.)

However, dummy #2 looked messy — the faces were incongruous with the background. The people were grainy photos while the Twitter stuff was tidy, clean vector art. The finished product needed to be much simpler. I tried various photo effects with Image/Adjustments/Posterize, but to no avail. Something had to change.

A scary thought came to me: Perhaps I should abandon Photoshop altogether and create everything as vector art in Illustrator? Ooh, sacrilege.


Illustrator

Well I should have stuck with Photoshop. That would have been the smart thing to do. And quick. It had been years since I last properly used Illustrator, and it took a long time to re-educate myself in the vagaries of the still-more-complex-than-it-need-be user interface. I mean, can you make those "handles" any smaller? And why do we need two pointers? A white one for this, a black one for that, how confusing. And after a week of searching I still can’t find out how to make text italic. Even Quark XPress can do that. Please Apple, buy Adobe. Ah, I digress.

I spent a long time experimenting with the promising-sounding "Live Trace" feature. In theory, this would automatically do everything I was looking for. But the results were too detailed, almost like a photo, and I couldn’t get the smooth, simple curves I was craving. So in the end I did it all by hand, "placing" a reference photo and then tracing the outlines using my mouse. Laborious, tedious, but the only way I could think of to get the control I wanted. Oh perfectionism, you are a curse.

Finished Product

The key graphics are rebuilt in Illustrator and the photos are placed for positioning.

This is as far as I got with the text.



houseofhudson

0 tweets

0 following

0 followers

0 listed

Twitter

1. A micro-blogging service to send messages of up to 140 characters.

2. One who tweets, has twote, or is, well, a twit.

Andrew qualifying for Boston at the California International Marathon. Roxy playing for the Shooting Stars and Redford playing for the PQ All-Stars.

<< Previous Year | Next Year >>

How This Card Was Made

Christmas Letters Main Page | House of Hudson | Email