Photoshop Newbies: Understanding layer masks and seeing George Bush and John McCain naked together

By Jim on October 7th, 2008 | Posted in Photoshop Tutorials | 4 Comments
Tags: , , , ,

For all you green-eared Photoshoppers out there, I’d like to try and de-mystify how layer masks work in Photoshop a little bit. I feel that a proper understanding of layer masks are one of the most important aspects of learning Photoshop. This quick tutorial should give you a general understanding of what the hell a layer mask is, and how the hell to use it.

With McCain's head finished up, and a nice soft photo filter layer on top of it all, our project working with layer masks is complete.

In this layer mask tutorial, we'll learn to fuck with Bush and McCain in the buff.

What the hell is a layer mask?

To start off, lets first talk about what a layer mask is and how we can use it. Masks are a way to show or hide something beneath it, or in this case, show or hide the artwork on the layer that the mask is attached to. To visualize how we can use masks, pretend you have two sheets of opaque (you can’t see through it) paper. If you stack the two sheets of paper together, the top piece is now ‘masking’ out the bottom piece. If we were to cut a circle hole in the top piece of paper, a circle of the bottom paper would show through. Pretty elementary stuff. Layer masks let you show or hide whatever is beneath it or attached to it.

So in Photoshop, say we have a picture of a desert and another picture of a siberian tiger. We could mask out the background of the tiger, and it would look like he’s in the desert. I know, holy fucking wow.

Using layer masks in the real world

As an asshole that spends a good 22-23 hours a day staring at Photoshop, I probably create about a hundred million layer masks a day. Without them, things would be a LOT more work, and the quality of my work would certainly suffer. Enough bullshitting though, lets crank up Photoshop and try a few basic techniques that show off the power of layer masks.

To start, we need an assortment of pictures that we can mask the living shit out of. Luckily for you, I did all the dirty work and found these three gems that will all work well together. You can tell that a professional photographer shot all of these shots; lighting conditions are very controlled, color, contrast, exposure and focus are all spot on. Plus, we’re allowed to use them for free, so that is pretty rad of that website photographer and Wiki and boy am I grateful. :)

Here's our stock image of our couple to start things off.

Here's our stock image of our couple to start things off.

Here's a picture of George Bush from the Wiki Commons. Good lighting and professional quality make this a winner to mask.

Here's a picture of George Bush from the Wiki Commons. Good lighting and professional quality make this a winner to mask.

And here's Senator John McCain, which we're also allowed to use because it's property of the federales. Oooohhh...

And here's Senator John McCain, which we're also allowed to use because it's property of the federales. Oooohhh...

Getting started with masks

Start by opening the couple. We’ll use this image as our base, and drag our soon-to-be-masked layer heads over top. First though, lets get a little feel for how layer masks work. Lets take our two guys first, and pretend we have to make a match.com profile for a minute and mask an ex-boyfriend out of the picture. What we wanna do first is double click that Background layer in the layers palette. Name it ‘Couple’ or something easy.

Next, hold the command (or control key on Windows) and click the little new layer icon at the bottom of the layers palette. Holding command places this new layer beneath the selected layer, rather than on top. Fill this new layer in with black, and rename it Background. Your layers palette should now be setup like so:

Here's a quick view of what your layers palette should look like. Pay attention to the blending mode, add layer mask and add new layer buttons.

Here's a quick view of what your layers palette should look like. Pay attention to the blending mode, add layer mask and add new layer buttons.

Now, lets keep playing make believe and create a mask already. For some reason my heart goes out more to the guy on the right, so I say we shitcan Stan from the Golden Girls on the left and stick with our guy on the left for now. Select the Couple layer in the layers palette, and add a layer mask by clicking on the add layer mask button at the bottom. Two thumbnails should now appear on the layer. The left most thumbnail remains our couple, while the right thumbnail is showing all white. Remember, all white = no mask. Think back to your b.s. sheets of paper a minute ago, but pretend the top one is a clear blank sheet of transparency paper. Because its clear (or white, in this case) we can see the bottom sheet of paper like nobodys business. But if we were to fill in the entire blank transparency paper with a big fat black Sharpie marker, we would no longer see the paper beneath it. All we would see is a solid black sheet of Sharpie marker lines that someone probably spent wayyy too much time filling in.

Now with our couple layer selected, and our new mask added, lets drag a rectangle marquee selection over the whole right side of the image, right between the arms of Stanley Zbornak and us. So it looks something like so:

Here's our marquee tool selecting Stan Zbornak. We'll use this to start off our mask.

Here's our marquee tool selecting Stan Zbornak. We'll use this to start off our mask.

Now, if we were amateur computer losers, we could fill this black, send it to our friends and it would be funny for a minute and then hit the trash can. If we simply fill this area black, we can’t go back and reuse Stan at all, and that sucks, because Stan seemed like a pretty cool guy to me. And Dorothy I mean he was a sharp guy, and sharp guys don’t usually marry retards.

Or if we were slightly higher up on the totem pole than than computer loser, we could create a new layer, fill it black, and still have access to our guy in the layer below. Well, thats just lame for one, and for two, it doesn’t teach us how to use masks.

But thank god we’re neither of those So what we’re gonna do now is fill in our marquee selection with black, making sure that we’re filling the layer MASK, and not the layer itself. Beginning Photoshoppers could seemingly get frustrated with something like this… be sure to take care when working with layer masks that you understand the layer and the layer mask can be selected independently.

If all is well, all we should see now is our dude, Stan should be gone now except for a little part of his foot. Lets grab a 19px paintbrush now and making sure we still have black as our color, zoom in to the foot area all close. Here’s what we should see:

Other than a little bit of his stinky foot, we've nearly eliminated Stan from our match.com picture. Hell yeah.

Other than a little bit of his stinky foot, we've nearly eliminated Stan from our match.com picture. Hell yeah.

Now, because our marquee tool is still active, we’re not going to be able to paint outside of it. Deselect our marquee tool, and using our paintbrush, lets just paint our the foot that hangs over our mask:

Here we've masked off the excessive foot with our brush tool on the layer mask.

Here we've masked off the excessive foot with our brush tool on the layer mask.

Pretty easy stuff. But lets say we fucked up a bit and accidentally masked over our guys leg. This is where the benefits of masking really start to pay off. Now we can change our brush to white, and simply unmask the areas we messed up. Here, you can see how I screwed up and covered up homeboys left leg, but painting white allows me to easily go back and correct my mistakes.

What a drag, I painted over the wrong guys shit. Luckily, layer masks let us fix goofups like this rather easily.

What a drag, I painted over the wrong guys shit. Luckily, layer masks let us fix goofups like this rather easily.

Using white instead of black allows us to 'fix' our mistakes easily within the layer mask.

Using white instead of black allows us to 'fix' our mistakes easily within the layer mask.

Now, because we’re working in black and white when it comes to layer masks, we could easily invert the mask if we liked Stan better, and the other guy was a real dick and we wanted to shitcan him. Choose Image > Adjustments > Invert, and Stan should now appear. Alright, that gives us a general idea of how layers work. You could get fancier by using a soft brush, and fading things out from a background, like hair, perhaps. You should be getting the drift of how layers are starting to work.

Once we invert our white to black layer mask, Zbornak is rezborn.

Once we invert our white to black layer mask, Zbornak is rezborn.

Having some fun

Now lets have a little fun. Lets open up our other two photos next and drag them onto our existing document. We can hide one while we work on the other, I’m gonna start with George because John is still a wannabe, and a seemingly soon-to-be-unelected. I opened George up in Photoshop, pressed command+a, command+c, command+v, scaled the image to fit inside our existing canvas size, and now we can start masking.

With George’s layer selected, add a layer mask, and choose the 19px Hard Round brush, with black as your color. For some reason, I like to start at the top center of peoples heads, and work my way down. It doesn’t matter where you start, but zoom in real good and close. Here’s what all your goings on and shit should look like right now:

We're about ready to start masking. Lets get a quick feel for the brush before diving right in though.

We're about ready to start masking. Lets get a quick feel for the brush before diving right in though.

Before you start digging in, take a couple of practice strokes way outside of his head to get the feel of the brush. Try holding the shift key between your clicks, you can make the brush paint in a straight line. We’re going to use this to our advantage. Try to mask out a stop sign shape holding the shift key, so your sides are straight. When you’re done, you should have something like this. Now, undo the stop sign, and try to make more of a circle. Still use your shift key and see if you can get the sides to ‘blend’ for lack of better term, and appear to be more of a circle. Here’s what you’re aiming at:

Using the shift key and brush method, we can make a stop sign shape.

Using the shift key and brush method, we can make a stop sign shape.

This time try to get your circle a bit smoother than your stop sign. Learn to facet your strokes and your masks will come out nicer. :)

This time try to get your circle a bit smoother than your stop sign. Learn to facet your strokes and your masks will come out nicer. :)

Using the shift key lets us mask right along rather quickly, and lets us ‘facet’ a nice smooth edge instead of trying to painstakingly do it with the mouse. The more you practice this technique the better you’ll get. Many Photoshop guys like to use the pen tool to make these types of masks. Well, I hate that way because a) I hate the fucking pen tool, and b) it doesn’t allow us the flexibility this way does. Doing this, we use different combinations of soft brushes to fade certain parts, where the pen tool gives us an unnatural hard edge. But either way will get the job done I suppose.

Lets get back to George. Undoing our practice strokes, we can start from the top of his head, working down. When I get near the bottom of the screen, while I’m working I just press space bar to get the hand cursor thing, and move my canvas back to where I’m squared up. Hopefully, that wasn’t confusing as shit, but I don’t know a better way to explain it.

As you mask, you’ll come to some spots, like above and over the ears for instance, that you’ll be unable to get with the 19px brush. For that, I usually skip over my first go round and then come back with smaller and smaller brushes until I’m down to a 1 or 2px brush hitting really fine details such as in chunks of hair or something that requires the tiniest of masking.

When masking tight spots, just use a smaller brush and zoom way the shit in there.

When masking tight spots, just use a smaller brush and zoom way the shit in there.

After masking around his head is complete, there’s several different ways you can quickly blast away the rest. Using big marquee tools lets you take out big chunks at a time. Do whatever works best for you. When your face is completely floating and your masking looks pretty good, lets go ahead and apply the layer to the mask by right-clicking on the layer mask thumbnail in the layers palette. Choose Apply Layer Mask.

Right-clicking on the layer mask thumbnail allows you to Apply a Layer Mask.

Right-clicking on the layer mask thumbnail allows you to Apply a Layer Mask.

Now that we’ve got a fully floating George head to fuck with, lets duplicate the layer and do our edits on the cloned version. This allows us to go back and screw with the fullsize later on, and also covers our ass if we fuck up this thing something fierce. Start by showing the Couple layer again, and resize the duplicated george head to closely resemble the size of our couples heads. If you haven’t already (like me), delete the layer mask on the Couple layer by right-clicking on the layer mask thumbnail and choosing Delete Layer Mask.

Positioning a presidents head

Once your head is scaled down, you may notice it looking a tad fuzzy. Filter > Sharpen should take care of that for us right away. While we’re at it, lets sharpen up our Couple layer, as it looks a tad fuzzy now.

Sharpening scaled-down bitmap graphics generally helps them look much crispier and more professional.

Sharpening scaled-down bitmap graphics generally helps them look much crispier and more professional.

While our couple layer is selected, now would be a good time to play with another mask. Create a new mask on the Couple layer, and again choose your 19px hard brush with black as your color. zoom way into the guy we want to make Bush. I’m gonna go with Stans head first. All we’re trying to do now is mask out Stan’s head. We wanna preserve the area directly below his chin so we can work it in nicely with our new face. After masking, here’s what I get. I’ve put an orange layer behind my couple to better illustrate where I ended up masking:

I filled an orange area behind my mask to better illustrate where we need to mask. Notice how we leave a little chin in place just for safety.

I filled an orange area behind my mask to better illustrate where we need to mask. Notice how we leave a little chin in place just for safety.

After masking Stan's head, we can place Bush's head in the spot and all looks pretty OK.

After masking Stan's head, we can place Bush's head in the spot and all looks pretty OK.

Fixing color problems with Hue/Saturation and Color Balance

Now, it should be quite easy to move our George head in place of the dudes head. Looks pretty good, but to me, the color is slightly off, and the lighting is far more even than the rest of the picture. Definitely could use some easy treatments to get it looking more accurate. We’ll do a few things with layer masks, but won’t go super super accuracy since that’s a bit beyond the scope of this article. But what we’ll tackle first is matching the color balance a little bit closer. Go to Image > Adjustments > Color Balance, and enter in the following values for Red, Green and Blue respectively: -1, +5, -6. This should get our color tweaked just enough to more closely resemble our dudes’ skin.

Adjust the Color Balance according to this. This will match us up really closely with the couples' skin tones.

Adjust the Color Balance according to this. This will match us up really closely with the couples' skin tones.

Next, we’re gonna have to address the differences in shadows. Compare Georges head to the guy on the right. Look how much more shadow action he has going on compared to W. Luckily, with a little finagling and masking we can match that quite nicely. Lets first duplicate our George head. Choose Image > Adjustments > Match Color. Where it says Source, change this to gay_couple.jpg, or whatever you saved this main file as. For the Layer, choose the Couple layer. If you look at the preview on your main image, you should see W’s face get really dark. Now lets tweak this just a hair. Set the Luminance to 149, the Color Intensity to 122, and Fade to 38. Click OK and we’ve got a shadows that closely resemble the dude next door. Alright!

Adjust your Match Color settings to what I've got here, it will give us just the right shadow for the effect we need.

Adjust your Match Color settings to what I've got here, it will give us just the right shadow for the effect we need.

Now that our shadows look close to accurate, we can start masking the shadow layer to reveal the lighter layer beneath.

Now that our shadows look close to accurate, we can start masking the shadow layer to reveal the lighter layer beneath.

If your shadow face looks like mine, you’re in great shape. We can now work the piss out of our magical masking knowledge and get the light parts of George’s face to shine back through. Working still with our George shadow dark head layer selected, add a mask to that sob. Choose the Soft Round 35 pixel brush, and make sure black is your color. Set your brush opacity down a bit by pressing the 7 key, and start masking off the left side of W’s face. Go over some of the highlights a few times, and give it try. Don’t be afraid to fill your mask back to white and experiment with different brush sizes and opacities. It will take a bit of playing with, but you should get it in no time. Use the guy next to him as a guide on where to add highlights. Try playing with the white and black brushes to add and remove shadow.

Now with Bush in the right spot, we can repeat all those darn steps using McCain's face.

Now with Bush in the right spot, we can repeat all those darn steps using McCain's face.

With McCain's head finished up, and a nice soft photo filter layer on top of it all, our project working with layer masks is complete.

With McCain's head finished up, and a nice soft photo filter layer on top of it all, our project working with layer masks is complete.

Following pretty much all of the same steps above, we can add McCain’s face much the same way. In the end, this should be a great little practice exercise for exploring layers. I hope you guys get something out of it and it’s somewhat easy to find. Hopefully you’re not just more frustrated than before and hate my guts. I’ve zipped and uploaded my original Photoshop file here if you’d like it to use as a reference.

4 Comments

  • Nice tutorial! Subject matter’s a bit strange, and a little creepy. But they look pretty happy together! :D

    Comment by Steve on October 7, 2008

  • OMG…creepy doesn’t even begin to describe that picture. I think I might yak..LOL

    Comment by Jackie on October 7, 2008

  • [...] To get started, we need to create a new document. For the hell of it, we’ll make a skyscraper banner with a size of 160×600 pixels at 72dpi. We’ll also need a good picture of Dole’s asshole face. You can grab yours from the Elizabeth Dole Wiki page, or use my pre-made Dole head as shown below. If you didn’t already download it, here’s the Psd. If you’re not a punk, you already know how to cut out someone’s head for further butchering. [...]

    Pingback by How to make an animated gif 160x600 skyscraper banner using Photoshop | Jim Jamesson on November 16, 2008

  • That is very impressive, very nice and funny.
    Thanks

    Comment by gulab sheer on October 23, 2009

Leave a comment

Groovy Web Design - Asheville, NC

Photoshop Tips & Tricks

Using transparent PNGs are great, but make sure that your visitors’ browsers are able to see the transparent PNG images. Several versions of Internet Explorer will not display your transparent PNGs properly, so if 80% of your visitors are using IE6, transparent PNGs are probably not the way to go and not safe to use.

Suggest a Photoshop Tutorial topic if you're having a Photoshop issue!