Barack Obama’s Coldplay iPod + iTunes Commercial in Photoshop

Obama Preview This Photoshop tutorial will guide you through creating an effect in the vein of the most recent Coldplay iTunes commercial. The Coldplay commercial uses colorful backdrops, with various textures, smoke and lighting effects. For this tutorial, we’ll take a photo of Barack Obama, mask it, create a silhouet and create the colorful background. This tutorial includes a download to the PSD file so you can see how the layers are set up.
Download the Final PSD

Step 1: Obama I start out with a 1200 px x 800p x document with a black background. For the tutorial, I’ll use a photo of Barack Obama on Flickr. First, we’ll need to take the photo and strip Barack of the background. To do this, create a mask for the photo layer, and blacken out the mask layer with a hard brush around Obama. Once you’ve completely masked out Obama, bring the layer over the 1200 px by 800px document. Desaturate the layer by going to Image >> Adjustments >> Desaturate. Next you need to take a large soft black brush with a low opacity and darken his appearence. It’s up to you to decide how dark you want certain areas, but I wanted to make his hands and shirt appear lighter, so I made sure not to darken these areas too much. You’ll want to keep one side of Obama’s face brighter than the rest so that it appears light is hitting that area.

Barack Obama

Step 2: Color Background The next step involves creating the lighting behind the person. While you may be tempted to use radial gradients, I found using a soft low opacity brush did the best job. You want to keep the hardness of the brush to 0% and the opacity between 5% and 15%. Don’t be afraid either to keep all colors on one layer. The colors were the basic CMYK colors of Cyan (#019CFA) Magenta (#EB00C0) and Yellow (#F5DC08).

Colorful Background

Now that there is vibrant colors behind Obama, create a new layer above the colors layer. Take a white low opacity brush again, and lighten up the most vibrant part of the previous layer. This helps give a more realistic feel to the lights.

White Colors

Take a white brush again and on a new layer paint softly the area above Obama’s shoulders. Then set the blending mode of this layer “Overlay” and duplicate the layer. What this does is create the appearance of a burst of light directly behind Obama. As a final measurement to liven up the background, create a new layer filled with white, and set the blending mode to Overlay. Set the opacity of layer to 45%.

Whiten Background
Burst of Light

Step 3: Background Texture For this next step, we’ll require the two free Watercolor Textures from GoMedia’s Arsenal website. You can find the watercolors under “Freebies”. Desaturate the red and yellow watercolor ( Image >> Adjustments >> Desaturate ) and invert ( Image >> Adjustment >> Invert ). Set the blending mode of this layer to “Screen” so only the light shows through. Reduce the size and place the texture at the bottom left of Obama. For the blue texture, desaturate the layer, and set the blending mode to “Multiply”. Rotate and place this layer at near the top portion of Obama.

Texture

Step 4: Background Dots First create a new layer above everything but the photo of the person. This step will deal with using the brush tool and it’s settings. Set the brush to a diameter of 9 and a hardness of 100%. In the Brushes palette, set the Size, Scattering and Opacity Jitters up to 100%. Also set the spacing to 1000%. This will change the settings of the brush to create non-uniform circles randomly around the document. Once you’ve create a decent amount of circles around the lights, set the layer to blending mode “Overlay” and duplicate the layer.

Brush Settings 1Brush Settings 2Brush Settings 3Dots

Step 5: Smoke

On a new layer, take a small semi-soft white brush and make a scribbled line. Apply the Wave filter (Filters >> Distort >> Wave); the settings below worked for me. The take the Smudge Tool at 60% Strength and begin to smudge the line in an upwards direction. You can move around a whole section, but a key to creating a more flame look, only smudge the upper half of and particular section the scribble.

ScribbleMotion FilterMotion Filter Effect

I used the eraser tool to remove and darken some parts of the smoke. The next step is to give some color to the smoke via Hue / Saturation menu. Choose the colorize option, and move the saturation and Hue to the right, and the lightness to the left.

Hue Saturation

Another Way to do this by using stock photography of smoke. I took a stock photograph of smoke against a black background, and like the texture behind the Obama, you can set the blending mode to screen to get rid of the black background. I used a black brush to darken the smoke at the edges, and resized and changed the coloring.

Original SmokeSmoke Photo 2

Conclusion That’s all folks. If you give this tutorial try yourself, please feel free to leave a comment with a link to the image below. You can find the little Obama logo on his own download webpage. I’m including the PSD for this tutorial as well.

Final Result

17 Responses to “Barack Obama’s Coldplay iPod + iTunes Commercial in Photoshop”

  1. scott Says:

    Where’s McCain? Why not play fair?

  2. Dal Says:

    Obama… >.>

  3. Devin Says:

    @Scott – Obama’s internet following is HUGE, it would only make sense to make him the centerfold off the tutorial. I might take the time to create piece that pits the two against each other. Thanks for the idea.

  4. Dani_sb Says:

    Long time follower, first time commenter. Great tut. The best one I’ve seen on creating this iPod effect. I am going to try it out ASAP. Thanks

  5. Ben Says:

    Hey, it looks awesome and I’d love to try it out but I got stuck at the very beginning, where you say create a mask around Obama, I don’t know how to do that and couldn’t figure it out. The rest of it looks doable and I really want to learn how to do this kind of thing so can anyone explain briefly how to do it?

  6. Ben Says:

    ‘First, we’ll need to take the photo and strip Barack of the background. To do this, create a mask for the photo layer, and blacken out the mask layer with a hard brush around Obama. Once you’ve completely masked out Obama, bring the layer over the 1200 px by 800px document’. Thanks in advance!

  7. Will Says:

    @ ben – Create a new mask later (the symbol in the layers panel that is like a square with a circle inside it) while you have the Obama layer selected. Then get the black pen tool and go round Obama, with the mask selected, and colour anything you don’t want to be seen in black. If you make a mistake go over it in white and it will be visible again. This is quite easy, but probably not the best way to do it however. Using the pen tool is the best way.

  8. Ben Says:

    Thanks very much Will it’s been bugging me all day! :P I had a go at using the pen and I think I did what you meant, the result turned out like it was supposed to so I must’ve done (add anchor points around him and join them up, select the area and go mad with a large brush to colour just that area black?) Anyway thanks again I’ll crack on with the rest of the picture now and see how it turns out.

  9. Devin Says:

    @Ben Sorry I wasn’t more descriptive Ben about removing the background. Will did a great job at describing how to create the mask for a layer. There is multiple ways to remove the background, so I sometimes resist from being too descriptive about it (and it takes a lot of time & manual labor to remove the background). For example, you can use the eraser tool, pen tool, polygon lasso or magnetic lasso without even using a mask. If you want to use a mask (with is better because it’s non destructive to the layer) you could use the lassos, the pen tool or the brush.

  10. Welcome to Paradise Says:

    The tutorial is super cool. But one thing, Barack Obama seems to be all over the internet now-a-days. ;)

  11. arnoldsoko Says:

    YES!!! FINALLY i understand

    now how do u think this can be done in After effects or how did they move the particles was it 3d tracking and in 3d app ?

  12. Devin Says:

    @Arnold I don’t know how to do it in after effects, but try here:
    http://www.videocopilot.net/tutorials.html

  13. Steven Says:

    hey
    this will probably sound stupid, but I’m using PS7 and I can’t figure out how to adjust the hardness on a brush. garrr!!!
    if someone could explain how to do this quickly, it’d be much appreciated

  14. Oliver Says:

    http://www.flickr.com/photos/oliverprobert/2630596382/sizes/o/

    That’s my attempt… this is the first photoshop tutorial I’ve tried.

  15. Ryan Says:

    I was wondering how you got the watercolor images on there without the white background showing (the white background is attached to the watercolor image when you download it from the website you get it from).

  16. Chris P Says:

    i think barack obama is the best president.
    he is so cute in his suit

  17. MeggoSexxx Says:

    vrotmnenogi

Leave a Comment