Web Design Tutorials osCommerce Template Tutorials
New osCommerce Templates osCommerce Specials osCommerce Forums Search Our Site Contact Us Resources Web Design Tutorials
Web Designers Library- Tutorials and Articles
Tutorial Search
  Advanced Search
 
Tutorial Menu
 
 Video Tutorials
  · Dreamweaver
  · osCommerce
  · Installations
 
 Photoshop
  · Tutorials
  Photoshop Basics
  Special Effects
  Text Effects
  3D Effects
  Textures & Patterns
  Web Layout
  Drawing Techniques
  Color Management
  Photo Editing
  ImageReady Animation
  Miscellaneous
  · Articles
 
 Web Design Basics
  · Design Principles
  · Website Usability
  · Color Theory
  · Templates & Tuning
 
 osCommerce
  · osCommerce Knowledgebase
  Catalog Area
  Installation and Upgrades
  Administration Tool
  General Information
  Developers Section
What's New
Latest Tutorials and Articles
Video Tutorials
osCommerce Tutorials
Template installation with cPanel and Ipswitch
Photoshop
Photoshop CS3: Output Sharpening
Change Color on an Object
Sunlight Effect
Autumn Effect
Eyes in Green Pea Pod
Web Design Basics
A To Z About RSS
Elements of Great Websites
The Next Generation Website Model
Why Use a Web Design Template?
Web Site Templates and Their Benefits
osCommerce
SSL - This page contains secure and non secure items
Post-Installation
Security - .htaccess
SSL - This page contains secure and non secure items
Tax Proposal
Photoshop : Tutorials : Photo Editing Last Updated: Apr 15th, 2008 - 18:38:37


Blending Faces
Author: Ettoremarzocchi.com
Authors Website: www.ettoremarzocchi.com
Apr 3, 2007, 12:37

Email this article
 Printer friendly page

Ever wanted to change someone's face?

Ever wanted to change someone's body?
Web Designers Library- Tutorials and Articles
Blending Faces


That's what we are going to do using Adobe Photoshop and few easy steps.

Surprising result guaranteed!

The goal: 

The goal of this Photoshop Tutorial is to blend together two different pictures and obtain a new one with exchanged faces.
Web Designers Library- Tutorials and Articles
Blending Faces


The starting material:

Our starting material will be one picture of Brigitte Bardot:
Web Designers Library- Tutorials and Articles
Blending Faces


...and a picture of Austin Powers:
Web Designers Library- Tutorials and Articles
Blending Faces


 

As always, if you want to start the tutorial using the same material we used you can simply download the original photos by clicking on it and save it (right click -> save as...)

Action:

Time to start the action!

Just launch Photoshop and open up both the pictures you are going to use.

Make sure Austin Powers is the active window (click on its title bar to give it focus) then Select -> All (or simply press Ctrl-A) to select the entire frame.

Then Edit->Copy (Ctrl-C) and move to the Brigitte's photo (click on its title bar), here paste the clipboard content by clicking on Edit->Paste (Ctrl-V).

Now you should have something like this:
Web Designers Library- Tutorials and Articles
Blending Faces


The next few steps are done in order to match the two faces size and orientation.

To better compare the two faces we are going to set opacity for the new Austin's layer to 50% or some value which lets you see enough of the top layer and enough of the bottom layer.

To change opacity you have to change its value in the layer's panel:
Web Designers Library- Tutorials and Articles
Blending Faces


Then we need to transform the Austin's layer to match Brigitte's face.

Choose Edit->Free Transform (Ctrl-T) and a bounding box with handles will appear around the layer:
Web Designers Library- Tutorials and Articles
Blending Faces


Now you can drag it around, scale it and rotate it, simply using those handles.

That's exactly what we are going to do.

Move it on Brigitte's face and scale it down a bit. Use the eyes and the mouth to match the size and the position. You can play around with the opacity again, to better see the result.

Depending on what you have in mind you can choose to make the new face slightly bigger, add some fun look or whatever you like.

In this tutorial we are going to do it clean, the fun effect will come out anyway ;)

Here's what we did:
Web Designers Library- Tutorials and Articles
Blending Faces


We just scaled it down a bit and moved in position.

Then we decided that flipping the layer horizontally produced a more convincing effect.

To do that just select Edit->Transform->Flip Horizontal.

Lastly we rotated it few degrees counterclockwise.

Layer mask technique:

The technique we are going to apply is the Layer Mask Technique. A Layer Mask is a greyscale mask linked to one specific layer. It works like a soft selection and lets you paint the layer's opacity with a brush.

If you paint it black the opacity is 0%.

If you paint it white the opacity is 100%.

256 greyscale tones can be used to paint in between values.

To create a new Layer Mask just select the layer you want to use and click on the Add Layer Mask button at the bottom part of the Layer Panel:
Web Designers Library- Tutorials and Articles
Blending Faces

Web Designers Library- Tutorials and Articles
Blending Faces


These masks are extremely useful.

Let's see how to use them at their most!

Blend softly the two layers: 

We have to remove all the white frame around Austin's face and make him softly merge the Brigitte's layer.

For this step a higher opacity value is often useful, letting you better control what's going on. We used 65%.

Make sure the foreground color is black and the background is white


Select the Brush tool along with a medium/big brush (30 px for our photo), 40% hardness.

Start painting some black strokes on Austin's white frame, you'll see it disappearing and start seeing Brigitte's hair instead:
Web Designers Library- Tutorials and Articles
Blending Faces


Notice the Layer's panel. In the small thumbnail beside the Austin face there's the thumbnail for the Layer Mask. We painted a couple of black strokes. But we didn't actually painted black color on the image, the black strokes are in the mask (the information of the layer is still there, it's just temporarily masked, we didn't affected the original image).

If you want to paint with your brush back onto the Austin's face you should make active the Layer content. To do this just left-click on it. To paint again on the mask click back on it.

And what if you want to see the Layer Mask content in the main window?

You can simply Alt-click on the Mask's thumbnail or on the Layer's thumbnail to switch from one view to the other.

With your soft brush still selected and the layer's mask active keep on painting until you masked away all the useless part of Austin, in order to make it fit on Brigitte's face.

The workflow will be very fast and linear:

We said that we are not deleting information, simply masking it.

This also means that if you paint a stroke you're not satisfied with you can simply press 'x' key on your keyboard to switch from foreground color to background color (from black to white) and paint back the information with the white brush.

This technique allows you to make and extra fine work because you can make a first rough mask with a big hard brush, then refine it with a soft brush and switch back and forth from mask and unmask to make it the way you like it the most.

Here's our work after few minutes brushing:
Web Designers Library- Tutorials and Articles
Blending Faces


Austin's opacity is restored to 100%.

That's starting to make sense!!

The use of Layer Mask helped us so much to mix the two layers softly and choose the correct selection of Austin to use.

But the colors are still pretty different and we don't want our beloved Austin Powers to be sticked onto Brigitte's body. They must be one!

Matching colors:

These are not necessary steps, this work is just made to improve the blending. If you're doing it for fun you can be satisfied already.

We are going to use two main function:

- Image->Adjustments->Color Balance
- Image->Adjustments->Levels

Make sure to make active Austin's Layer, click on its thumbnail (deselect the mask or we'll apply changes to the black and white mask).

Then open up the Color Balance window.

Here you can choose to adjust balance for Shadows, Midtones, Highlights.

Start from Midtones and drag back and forth each of the bars you have and look at the result. Keep adjusting until you see the color matches. Repeat for Shadows and Highlights.

here are the settings we used for these pictures:

- Midtones: -36 ; +5 ; +11 ;
- Shadows: -19 ; +13 ; +32 ;
- Highlights: +3 ; +1 ; -1 ;

Here's the result compared with the unbalanced version:
Web Designers Library- Tutorials and Articles
Blending Faces


That's much better.

Go for the Levels now:

The technique is the same, just look what happens sliding the bars back and forth. Until you're satisfied.

Here are the setting we used:

RGB Channel Input levels: 0 ; 0.94 ; 255
RGB Channel Output levels: 8 ; 233

And here's the result:
Web Designers Library- Tutorials and Articles
Blending Faces


ur improvements did a good job.

We then also subtracted 5 points from saturation (Image->Adjustments->Hue/Saturation)

And here's the final result:
Web Designers Library- Tutorials and Articles
Blending Faces


Uh! Now Austin has the real mojo!

Shagging!




Top of Page

 
Level Ten Hosting