16. Saving For The Web



After creating the rollovers in ImageReady you have to export the file for the web. ImageReady will generate a HTML file that we will edit in Dreamweaver or in other HTML editor. A very important step before saving the file for the web is to identify the slices that have a graphic background (gradient, image etc.) let's say the slices that don't have a uniform background color but have "html text" on them. That's because when you'll save for the web every slice will become an image so you will not be able to edit it in a HTML editor. And when you have a graphic background for a "html text" that background needs to be exported without the text layer on it to be able to define the exported image as a background for that HTML table cell. The things will be more clear if you'll take a look at our Dreamweaver tutorials.

For the moment let's open the index.psd file in ImageReady. You will find the .psd file in templates/psd.

Now let's identify the "html text" layers and if their background is a solid color or a gradient, image etc. We identified the following "html text" layers with a non solid color background (in our example all the "html text" layers have non solid color background but in other templates you will notice that you have both solid color and graphic backgrounds or only solid color backgrounds):

Now that we have identified these specific layers we'll go to the Layers palette and hide that layers clicking on the "eye" icon of each layer:

Now the Layers palette and the layout will look like this:

The only thing you have to do now is saving the file for the web.

Go and select from the main menu File -> Save Optimized As...

ImageReady will optimize each image for the web. This process will create smaller files in terms of space required and also download time.

Go to template/html/html_version. You'll notice that there is already a file named index.html. This file is the final html file so DO NOT ERASE/OVERWRITE IT because this file will help us in the next tutorials. If you want to save you file for the web please create a new folder (click on the marked icon below) and then save your file there.

Note that you may export only the images and in that case you will have to recreate the page in html. In our case you select from "Save as type" the option "HTML and Images". You'll notice that ImageReady will create a specific folder for images named "Images". Now you have your layout saved as HTML. The next step is to open the HTML file in a HTML editor (in our case Dreamweaver) and to add the "html text", create the text links and edit the CSS file.