How To: Make The Viget Inspire Author Thumbnails
Doug Avery, Former Senior Developer
Since Viget Inspire blog launched, I've received a lot of questions about the little user thumbnails we made for the Viget designers. Is it just a Photoshop filter we slap on carelessly? Are they painstakingly drawn by hand and watercolored over a period of several hours? The answer is (unfortunately), neither as cool as hand-drawing or as easy as a filter, but we've got it down to a pretty streamlined process at this point. Like the background "how to" post from last month, this tutorial has a lot of of textures and hues, manipulated and blended in the layers palette.
Begin With a Photo
The team agreed that Samantha's old picture didn't turn out as well as it could've, so I'm going to remake hers and walk you through the process. We begin by getting a different photo of Sam for the new thumbnail, and taking it right into Illustrator.
When you're doing a trace like this, you want to plan out what types of lines and objects you'll be tracing before you begin. With the Viget Inspire pictures, I decided to go with hair, glasses, eyebrows and eyes as the main shapes, and to fill in the rest of the pictures with pieces from the actual photo (more on that later). So first, we're going to trace her eyes, very simply, with the pen tool.
Now that we have all our shapes, we want to merge them into one using tools in the Pathfinder palette. "Add To Shape Area" to combine the black ones, and use "Subtract From Shape Area" to punch the the whites shapes as holes into the black area. Now we have one black shape.
The Return of an Old Friend
We're going to grab the same watercolor texture used in the last tutorial and get some more mileage out of it. We're looking for a complex texture with some random, organic shifts in the color, and that image is going to be perfect for our needs.
Just paste Samantha into Photoshop, as a Vector Image, and resize to the appropriate shape. Then, paste the watercolor in a layer above her, and option-click the space between the layers to mask one into the other.
This part is mostly just playing around until it feels right. I probably could accomplish this all with fewer layers, but it's nice to have more in place so you can go back and adjust pieces of the image at the end.
Adding In The Details
I actually came to this next series of steps during a time crunch. I'd spent a while trying to draw some decent-looking mouths, but couldn't really get them to work. The mouth is a really subtle piece of the face, making especially hard to illustrate in a single dark color, so I thought I'd compromise by ghosting in some features using the original photo.
Everything Must Match
At this point, I like to zoom out and look at the thumbnail next to the other ones I've made. Is it too light? Too green, too blue? A few adjustments will fix it.
The Finishing Touch
I like to add a bit of "bleed" to all the watercolor images, just to give them another interesting texture. This just means reusing the watercolor graphic in a random way behind the image.
Since we produce these images at final size, the versions in the post were a little blurry and zoomed-in. Here's the real final image:
In the end, it's not so much of a fixed technique as it is establishing a goal and sort of wandering towards it, always using layers and effects that you can turn off or tweak later on. I'm still learning the best way to do these, (and I might redo a few more of them in the near future), so if you have any tips or know of any similar techniques, post'em in the comments.