5. Replacing Images With Text



Saving the .psd file as html from ImageReady creates an html file along with its images. This file has only images and no text. You have to replace some images with text and eventually to take that specific image to background.

Open the file index.html from template/html/html_version.

As you can see the content text (described in our Photoshop tutorials as "html text") is really text not an image. That's because we have already replaced the images generated by ImageReady with text (actually ImageReady created an html table and in every cell - that means every slice in Photoshop/ImageReady - it puts the resulted image in foreground not as background, image that has the same size with the slice from which it derives). So you have to put that image in background and in foreground to add text.

To replace an image placed in foreground inside a table cell you only have to click on it, delete it and write the text. To place the image in background it's very important to know that if the image is smaller that the table cell it will be repeated until it covers the entire cell, and if the image is bigger than the table cell only the area covered by the cell will be displayed. So the background image must have the same dimension with the cell.

In our page be sure that you are in the Standard mode and in the Split view mode. Go on and click on the image from the "welcome" paragraph. The image will be selected and its borders visible:

Selecting an image in the preview window automatically selects the line of code related with that image. Now press Delete or Backspace to delete the image. The image will be replaced by a "space" ( ). The empty cell now displays the page's general background because it doesn't have its own background.

Write some text and let's place the deleted image in background. To do that reveal (if it isn't already) the Properties palette. You'll notice that you have 2 options to add background ("Bg" on the palette). First is for images and the second for solid color.

Go the folder icon of the upper Bg option and browse to template/html/html_version/images to find the image we have just deleted, "wel2.jpg":

Now you'll notice that we have the same layout as before starting to delete and add the image in background. Actually it isn't the same. Now the html code is different and you can write over the image placed in background. So write something over the image:

Now you know how to place an image in background. To create a solid color background just go to the second Bg option and choose a color. When you have both an image and a solid color defined the image will be visible because the background "layers" order is that visible also from the Properties palette: Bg image upper, Bg color lower.

Don't save the new file over the original. It will help us in the next tutorials