Changing Photos that Are Part of the Template Layout

Tutorials   ·   March 30, 2009

Sometimes you will find photos in a template that are integrated into the design:

Perhaps you would like to keep the background, but change one of the photos of the women, and you find that the portion of the above image that’s in the html web page looks like this:

…where the woman cannot be separated from the background.

Launch Photoshop and go to File > Open. Navigate to the “psd” folder of your template package, and select a .psd file to open.

First, locate the layer the picture of the woman is in, since it is best to place your new replacement image in a layer directly above the original:
Choose the Move Tool from the toolbar, hold down the Ctrl key on your keyboard, and click once on the image of the woman.
The Layers palette will immediately show the correct layer as highlighted:

You can click on the eyeball icon to hide the layer if you wish to make sure it is the correct layer. Click the eyeball icon again to show the layer once more.

Next, open the image that you’ve chosen to replace the template’s image. (File > Open) If necessary, use Photoshop’s Free Transform option (Edit > Free Transform) to resize the image so the person in the photo is close to the same size as the woman in the template photo. Your new image needs to have no background in order for it to fit in well as a replacement. If the image has a solid color as its background, such as the white background of the sample photo pictured here, you can easily remove it by clicking on the white background with Photoshop’s Magic Eraser tool: If your replacement photo has a multicolored background, the Magic Eraser will only work up to a certain point. It may be necessary to use Photoshop’s Extract option (Filter > Extract from the top menu) to get rid of the entire background.

Once the background color(s) have been removed, the image will display with a checkerboard pattern as pictured here.

Position the new image’s window alongside the template’s window. Choose the Move Tool from the toolbar, click on the new image, and drag it into the template’s window:

A new layer is automatically created for the image you just dragged (highlighted Layer 55, above).

You can use Edit > Free Transform to further resize your new image in the template if necessary, and use the Marquis Selection tool to draw a box around any portion of your new image that you don’t want. Once a selection box has been drawn around an unwanted portion of the image, hit the Delete key on your keyboard to delete it. Turn off the Layer that holds the original image (Layer 41 in the sample photo here) so that you may see how your new image looks. Use the Eraser and the Smudge tools to clean up the edges of the new image, if necessary.

Your new image is now ready to be saved as an individual graphic to go into your web page.

See Also:

Using the Slice Lines in a Template or Producing New Slice Lines
Appropriate Naming Conventions for Saving Your Sliced Template
Optimizing Website Template File Size when Saving for Web

Table of Contents