Apr 27 2009

Adobe Photoshop Tip– Attack of the iPod People

iPod People, iCharacters, silhouettes–whatever you call them, they are those cool people who dance around in the iPod TV commercials and show up in the posters and billboards you might have seen around town and I’m going to show you how to make your own in Photoshop CS (this tutorial will work in other versions but will require some digging on your own to find out how).

Prep 1: Choose a picture

You’re going to need a photo of someone or something to iPodify and it should be reasonably high in resolution and size and should be in either RGB or CMYK mode. The picture I’m using here (used with the gracious permission of its subject, the lovely, brilliant and talented MacHottie from Inside Mac Radio and camera phone girl, Laura Burstein (read her blog)) is 1280 x 1707 pixels which works out to 4.25″ x 5.5ish” at 300 ppi.

(Thanks for the pic, Laura!!!)

There are several elements to a silhouette poster and each of them should be considered when choosing a picture:

1. Action: Your subject should be doing something. Even though this will be a still image, your subject should be doing something interesting. While many iPod users listen to their music while waiting for the bus, I have yet to see an iPod ad depicting a silhouetted form just standing around looking down the road for the 3 o’clock to downtown. Find a shot that looks dynamic. See above how Laura is striking a “Charlie’s Angels” pose?
2. The iPod: Now I’m not saying you have to have a shot with someone holding an iPod–not at all. But in order to really sell your finished image as an homage to the iPod silhouette ads, your subject should have something about them to highlight–something that takes on the importance of the iPod in your image.
3. Detail: One of the most common mistakes I’ve seen in tutorials showing how to replicate the iPod ad style is that they make the silhouette a true silhouette when, if you look at the ads, the people actually do show detail…not a lot…it’s really dark…but it’s there. So if you’ve attempted to simplify the process by shooting a silhouette that shows only a hard outline of your subject with a solid black fill within, you’ve probably gone too far.
4. Depth (optional): If your subject is going to be shown from head to toe (assuming it’s a person), you will have to consider that we will be adding a cast shadow that will place your subject in the three dimensional iPod universe making it all seem a bit more “real.” You’ll want to allow for that shadow by adding canvas space to your image before we get to deep into the tutorial. As indicated, this is optional since some images will be head and shoulder shots that do not show the floor or, quite possibly, you could be making an iPod silhouette of some kind of supernatural being like a vampire and therefore a shadow would not be necessary.

Prep 2: Choose a color

Once you’ve got your picture chosen, you’ll want to choose a color. A silhouette is nothing without a vibrant background by which to be silhouetted. The semi-somewhat-official iPod poster palette of colors goes something like this:

Which one should you choose? I dunno, try them all! As you will soon see the changing the color is the easy part of this tutorial.

Step 1: Ready the Canvas

Open the picture you plan to use. If this is a prized portrait, you might want to open a copy instead… unless you’d like to forever remember your child’s first steps as having taken place in the iPod universe.

Okay, so once you’ve opened your chosen picture, have a look at how much background you have. We may be adding a shadow so add some canvas to your image if it is cropped tight to the subject. If the image is cropped into the subject (i.e. parts of your future iPod person’s body are out of the picture and chopped off) then don’t bother adding more canvas…there’s not much you can do unless you want to artfully paint in the cropped-off bits. My picture of Laura has enough background for me to add a shadow later, so I won’t be adding any.

Step 2: Color Add a new layer for your background color. Name the layer “Colored background” and fill it with the color you chose in Prep 2. If you could not narrow your color choice down to a single hue, make a separate layer for each color you wish to test out. If you haven’t already, write the mix for one of your colors on a slip of paper.

Step 3: Extracting your subject

Duplicate the layer your subject is on (most likely the “Background” layer) and arrange that layer on top of your Colored Background layer(s). Name this layer “Sacrificial Layer”. Duplicate the Sacrificial Layer and arrange its clone at the top of the Layers palette (it’s probably already there). Name this layer “iPod person”. Now, make sure the “Sacrificial Layer” is selected in the Layers palette. Here comes the tricky part:

Go Filter>Extract…

Now you will be faced with the Extract filter interface. The Extract filter is a “destructive” filter that, with your help, will extract (thus the name) your subject from its background. What I mean by “destructive” is that once you have gone through the trouble of getting this filter to do all it can to isolate your iPod Person and have clicked “Ok”, the effect it has on the layer is no longer editable. It does not create a layer mask or clipping path–it deletes pixels. This is why I had you create the “Sacrificial Layer” and why we are applying the Extract filter to that layer and not the “iPod Person” layer.

The other scary thing about the Extract filter is that it is darned near impossible to teach in a text based tutorial like this. I had planned on writing a Photoshop Quick Tip explaining how to use this filter, but the tip soon exceeded the boundaries of what any rational person would classify as “quick.” So the best I can do for the time being is to give you the steps involved and the purposes of those steps:

1. Highlighting:
   The Edge Highlighter tool (looks like a fat felt tip marker) shows Photoshop the “border zone.” You’ll draw along the edge of your subject-like an outline. But, unlike an outline you need to draw about equally inside the edge and outside. The mark you make with this tool tells Photoshop, “Somewhere in the stroke of this line is where the edge is.” So if your subject has a hazy edge, you’re going to want to use a bigger brush size. But keep in mind: the finer the outline the better.Make sure your finished outline is a closed shape or that it starts and ends at the image’s edge. Also be sure to outline anywhere the background shows through within the outer border–such as if your subject has his hands on his hips looking heroic, he’ll have background showing through under his arms (unless he’s wearing a cape). I have a few areas like this around the left side of Laura’s face where her hair goes behind her shoulder a bit.

   You can use the Eraser tool (looks like an eraser …duh) to rub out any mistake you might make in highlighting. Holding down the Option key while using the Edge Highlighter tool also serves as an eraser.

   If you’re feeling really keen, you can try out “Smart Highlighting” which promises to follow the edge as you draw and even choose an appropriate brush width. It actually does a pretty good job and I highly recommend giving it a test drive. Smart Highlighting can be accessed by clicking the checkbox on the right side of the Extract filter interface or by holding down the Command key while using the Edge Highlighter tool. It can be a great time saver but can’t handle fine detail or low contrast edges very well.

2. Filling: Once you’ve highlighted the border zone, you’re going to have to tell Photoshop which side of the border you want to keep. Click the Fill tool (looks like a paint bucket) inside the border where you want Photoshop to save your subject from its background.\If the Fill tool spilled paint where you didn’t want it to, just click again in the same spot and it will remove the fill. Then you can grab the Highlight tool again and draw in the open spot where the paint flowed out and try again.
3. Previewing:
   Once you feel you have mastered Highlighting and Filling, look down at the bottom of the setting on the right hand side of the window and set the Display setting to “Other…” A color picker will pop up. Go ahead and enter in the values of the color you wrote down in step 2. Click the “Preview” button in the top right corner of the Extract filter window and let Photoshop have a crack at extracting based on your instructions.Once Photoshop is done attempting to extract your subject form its background, you may be completely disappointed with this filter. Is the subject in your original photo on a background that is very busy or similar in color to the subject? That will make it tough. If so, go to the Preview settings and set Show to “Original” and check both the “Show Highlight” and “Show Fill” boxes and you’ll be back to before the preview. Now check the “Textured Image” box in the Extraction settings above the Preview settings you just adjusted. Try clicking the Preview button again and see if the results are any better. If not, we’ll just have to make do somehow. There is more tweaking ahead still.
4. Cleanup and Edge Touchup: The Cleanup tool (looks like a paint brush on a square with circle inside it) will allow you to softly erase parts of the extracted image or, by holding down the Option key, paint them back in. You should go around the perimeter of your subject and make sure all his or her bits are still intact.If the problems lie more with the smoothness of the edges than the accuracy, use the Edge Touchup tool (looks like a fat felt tip marker on a square with circle inside it) to smooth out the roughness. You can even hold down the Command key while using it to smudge the edge to your liking.You are free at this stage to jump between the Cleanup and Edge Touchup tools, but any tweaking using the Highlighter tool or Fill tool will nullify anything you have worked for since clicking Preview. So, work at refining that edge, because once you’re done this, click “OK” and apply your extraction.

Man, that was like pulling teeth!

Once your Extraction has applied, Command-Click the Sacrificial Layer and select the iPod Person layer in the Layers palette. Go Layer>Add Layer Mask>Reveal Selection. You may now delete the Sacrificial Layer.

Now, with the layer mask of the iPod Person layer selected in the Layers palette, edit the mask to further refine the extraction. I like using the Smudge tool to smoosh the edge of the extraction a tiny bit so that they don’t look pixelated. This process will allow you to edit out any rough spots or refine any details that you missed or couldn’t get right in the Extract filter window.

You might even want to the Channels palette, click the eye next to the iPod Person Mask to the “on” position and turn off the eye next to RGB (or CMYK). This will allow you to look at just the mask and make sure it doesn’t have any black or white greeblies in places where they don’t belong. The Extract filter often leaves these things strewn about the highlight area and, though they may be difficult to see now, they will come back to haunt us later. Once you’re done, click the image thumbnail of the iPod Person layer.

Step 4: Paint it Black

As lovely as Laura looks, in order to complete this tutorial we are going to have to reduce her to little more than a silhouette–that is, after all, the point of this tutorial. But just in case we need to backtrack, lets silhouette a duplicate layer:

Duplicate the iPod Person layer and name it Silhouette. Click the preview eye next to the iPod Person layer “off.” Set the Silhouette layer’s blending mode to multiply and then go Image>Adjustments>Hue/Saturation and drag the Saturation slider all the way to the left. This will give Saturation a value of -100. Click OK.

Now, go Image>Adjustments>Levels and enter in a value of 158 in the first field on the Input Levels.

You should now see an effect similar to what I’ve shown you here on the left. Duplicate the Silhouette layer as many times as it takes to achieve the darker look you see here on the right. You don’t want to see too much of the subject’s face, in fact, I should probably go a bit darker with Laura here. You also want to watch that you don’t go so dark that you don’t see any detail, so go slow and don’t be afraid to use the Layer Opacity sliders.

Step 5: Put in the Pod

Whether your image has an actual iPod or not, there should be at least one item you spotlight as playing the roll of the iPod in this, your homage to the iPod ads.

To do this, we will create a new layer filled with white and set its blending mode to Multiply. Make sure it is on top of all the others. Don’t bother naming it, we’ll be deleting it in a second.

We will click the preview eyes next to the Background layer and any and all Color Background layers to the “off” position. This should leave us with nothing but the Silhouette layers showing and multiplied only over themselves.

Go Select>All and then Edit>Copy Merged. This will copy the state of the selected area of the Photoshop document as it is currently displayed as if it had its layers merged–very handy feature to have around.

With the topmost layer selected, go Edit>Paste. Now you can delete that white layer.

Name your newly pasted layer “iPod” and, with it selected, go Image>Adjustments>Threshold. Adjust the Threshold Level slider until as much of the object’s details are shown without it being overly white or overly black–we want the iPod in the image to be simplified. Mine came in at about 187. Click OK when you’re done.

Now, go Filter>Stylize>Diffuse… and choose the Anisotropic Mode.

Then, go Image>Adjustments>Levels and set the first field in the Output Levels to 170 and click OK.

Next, go Layer>Add Layer Mask>Hide All.

Turn the preview eye next to your Colored Background layer back on but leave the layer mask of the iPod layer highlighted in the Layers palette because next you’ll want to use the Brush tool to paint in the iPod.

BONUS POINTS

(skip this if your subject is not seen in contact with the floor)

If you noticed in the picture of the girl dancing on the green background I showed in Step 1, she not only has an iPod shuffle, but she also has a shadow being cast on the floor at her feet. These can be tough to do, but really add a nice touch of depth to the image.

The trick here is that we need to create a separate shadow for almost every point at which our subject touches the ground. That will mean two for me because I can fudge the front and heel of each of Laura’s shoes into one contact point pretty convincingly.

You will need to do the following for each point of contact your subject makes with the floor:

1. Decide which contact point on which you will focus for this shadow.
2. Create a new layer filled with white with the blending mode set to Multiply and an Opacity of 50%.
3. With this layer selected, Command-click the layer mask of a Silhouette layer. This will give you a selection in the shape of your subject.
4. Using the Rectangular Marquee tool and while holding down the Option key, draw selection boxes around any of the places where your subject makes contact with the floor other than the place you decided to focus on in the first step of this procedure. This will isolate just the contact point you are focusing on.
5. Go Select>Transform Selection.
6. With your mouse, move the Reference Point (the little cross-hair inside the Transform Selection bounding box) to the point or edge at which your subject touches the floor.
7. In the Options bar at the top of the screen enter the following values:W: 100%, H: 30%, Angle: 0.0°, H: 75° and V: 0.0° — don’t change the X and Y values at all. Hit Enter to set your values and Enter again to apply them to the selection.
8. Fill your transformed selection with Black. Deselect.
9. Go Layer>Add Layer Mask>Reveal All.
10. Reset your Foreground and Background colors (hit the D key).
11. Use the Gradient tool set with a Foreground to Background Linier Gradient in Normal Mode at 100% with no Reversal, Dither or Transparency.
12. Click and hold the Gradient Tool at the actual contact point we’re working on and, with the Shift key held down, drag slightly upward and release.
13. Highlight the layer thumbnail (as opposed to the layer mask) of this particular shadow and go Filter>Blur>Lens Blur…
14. Enter the values as shown here:
15. Repeat for all remaining points of contact.

Step 7: iType

Finally we get to the easy step: adding the text. Apple’s font of choice these days is their own special cut of Myriad, but any cut will look just fine here.

Grab the Horizontal Type tool select a nice cut of Myriad Bold in the Options bar and set the text color to white. You will have to choose the size and anti-alias method yourself–that’s up to your discretion.

Go ahead and type something appropriate for the image. It should be short–preferably one word–and it would be even better if it starts with a lower case “i” followed by an upper case letter… like iPod, right? I broke with that tradition and gave Laura’s iPod poster her signature moniker.

Then, if you like, in Myriad Semibold, you can add a centered bit of copy at the bottom sort of like the “10,000 songs in your pocket. Mac or PC.” that Apple has on their posters.

And then, my friends, you are done.

Conclusion

I hope you are able to have fun with this tutorial and make interesting and creative iPod-like images. I know it isn’t an easy tutorial but the results are very close to the iPod posters you’ve seen around town. If the instructions provided here have not been sufficient or if you have found errors, you are encouraged to let us know but, as previously stated, I cannot offer technical support of a nature specific to your image on such a complex procedure. It is in honor of those whom I’ve driven to frustration that I offer this graphic courtesy of Leo Laporte:

By admin • Articles, Graphics Tips • Comments Off • Tags: adobe photoshop tip, BestStuff, billboards, border, charlie s angels, click, Colored, command, extraction, finished image, gracious permission, Highlighting, image detail, laura burstein, mask, o clock, outline, palette, person, phone girl, Photoshop, photoshop cs, ppi, Sacrificial, shadow, silhouette, silhouettes, still image, subject, tool, Touchup, tv commercials