Expression Blend and Design

The team blog of the Expression Blend and Design products.

Blending Photos

Blending Photos

  • Comments 6

Blending one photo into another is a popular way to display photos in scrapbooks. Using a gradient and the Eraser blending mode, Expression Design makes it easy to blend photos.

For this tutorial I'm using two photos from the Microsoft Office Clip Art Gallery to create the following vignette.

Remembering

To follow along, right click on the images below and save them to your hard drive.

The first image is a boy on a swing which we'll put on a layer by itself. Create a new document by choosing File > New from the menu bar and setting the Height and Width fields to 800 pixels (or larger) in the New Document dialog box. Choose File > Import, navigate to the saved file and click Open on the resulting dialog box to import the image.

Boy on Swing

The second image needs to go on a separate layer. Click on the New layer button in the lower, right corner of the Layers panel which will create a new layer named Layer 2. (You can rename layers by double clicking on the existing layer name and typing in a new name.) Insert the following image into the new layer in the same manner you inserted the boy on a swing image above.

All grown up

To align the images, select them and choose 'Centers' using the Align option box on the Action Bar.

Align centers

Next, click the Lock icon on Layer 1 to lock the layer so it isn't disturbed as you working on Layer 2.

Now we're ready to start blending. Choose the Rectangle tool in the Toolbox (5th tool down from the top) and drag a rectangle slightly larger than the man image. (Making the rectangle slightly larger ensures that you don't have any unwanted edges showing in the final result.) Click on the Fill tab in the Appearance panel and then choose the default gradient fill in the Fill Type section.

Fill type section

You now have a rectangle with the default black to white gradient applied. (A gradient is applied to an object in the direction it appears on the Gradient Bar.) At the moment, both of our gradient stops are set to 100%. Click on the right most gradient stop (the white one) and change the Stop Alpha value to 0% by moving the value slider all the way to the left. (An alternate way to enter a value is to click once on the value slider, type in a value and click the Enter key on your keyboard.)

Stop Alpha value box

We're going to use this rectangle object as a transparency mask. Once we enable the Eraser blending mode, the mask will erase down through the image below, revealing the image on the layer below, according to the degree of transparency in the mask. With the gradient object selected, open the Advanced Properties section of the Appearance panel by clicking the downward pointing arrow at the bottom of the panel.

Advanced properties

Click the Blending mode drop down box and choose Eraser from the list of blend mode options.

Eraser blending mode

Wonderful! The Eraser mode erased down through 100% of the left side of the gradient because the left most gradient node was set to 100% opacity and didn't erase at all through the right side of the gradient because this gradient stop was set to 0% opacity. All that is left to do is to move the gradient stops until you reach the look you're after. You move gradient stops by clicking on them and sliding them along the gradient bar. I moved the right most gradient stop to the left to reveal more of the man's face. You can also move the mid point marker to the right or left to define your opacity mask even further.

Midpoint marker

Happy blending!

 

Leave a Comment
  • Please add 2 and 2 and type the answer here:
  • Post
Page 1 of 1 (6 items)