Photoshop Tutorials:  Replacing Text and Images

To replace text and images in the .psd files that come with your template package, you must first select the layer that holds the item.

A shortcut to locating the appropriate layer is to Control-click (choose the Move Tool from the toolbar and hold down the Ctrl key on your keyboard while clicking with your mouse) on the text or image you wish to modify.  The Layers palette will immediately show the correct layer as highlighted in blue.

Fig. 1

As seen in Fig. 1, Ctrl-clicking on the image to the left snaps the Layers palette to its layer. 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. You may also wish to name the layer for future reference.  To do so, right-click on the Layer name in the palette and choose Layer Properties from the list.

Note: Text layers are marked by a T in the layers palette. If the layer shows a yellow alert next to the T, as shown in Fig. 2:

   Fig. 2

...then your computer does not yet have the font for it installed.  You will need to close Photoshop down completely, drag the font file(s) that came with your template into the Fonts folder on your hard drive, and then re-launch Photoshop.

Once you have located the layer the text is on and the layer is selected in the palette, choose the text tool from the toolbar (the T icon).  Place your cursor at the beginning of the text on the screen - the cursor will change to an I-prompt. Click and drag across the text to select it.  (Fig.3)  Then type your new text over the old. (Fig. 4)  While the text is selected, you may also change its size, as was done in Fig.4.

Fig. 3

Fig. 4

To replace an image in the template .psd with one of your own, follow the same layer-location steps as for text.  
When the appropriate layer is selected (blue), Ctrl-click on its name in the Layers palette. This will immediately give you a selection box around the corresponding image on the screen.  (Fig. 5)

   Fig. 5

With this selection made on the screen (the dotted border around the image), you may open the Info palette (Window>Info) to get the exact dimensions of the image you're going to replace.  Fig. 6 shows the Width and Height for the selected image as 145x84 pixels.

   Fig. 6

Next, open the new image that you wish to place in the design and resize it. (Image>Image Size).

Fig. 7	The Image Size in Fig. 7 shows the dimensions of the new image as 185 x 125 pixels.
Fig. 8	As shown in Fig. 8, check that the Constrain Proportions box is checked, then type in the desired width dimension - here, it is 145.  Because of the constrained proportions, the height dimension changes accordingly - here, to 98. Click OK to close the Image Size window.

Next, in the template .psd, the image you will replace should still be selected.   (If it isn't, follow the steps shown in Fig. 5 above.)

Click on your new image file and choose Select>All from the top menu (or Ctrl+A on your keyboard).  Your new image now has a selection border around it.

Go to Edit>Copy in the top menu to copy this image.
Then, click on the template .psd and choose Edit>Paste Into from the top menu. (Fig. 9)

   Fig. 9

Fig. 10

Your new image is now in the layer above the old image, and its layer shows that it has been pasted into a selected area (known as a Layer Mask), ensuring that it fits appropriately into the template design.

---

Note: In most of the .psd files that come with your template you will see paragraphs of text, known as body text.

These are included in the .psd file for you to visualize the entire layout, but you should not save them as graphic files. This text should be done in the html source code file for the web page. 

This is also the case for any forms pictured in your .psd files. Web forms such as these need to be created in the html file, not saved as graphics.

< Fig.11  -- body text/form

 

Table of Contents