Optimizing and Exporting

We are now going to optimize each slice and export them. Use the the "Slice Selection Tool". to select the gray_bar slice and hold down the shift key and click the blue_square slice. Since these are single color images we are going to optimize both of these at the same time as gifs. Use these settings to optimize the two slices.

Use the the "Slice Selection Tool". to select the header and then holding the shift key click on the footer too. Since these slices have complex color transitions it is best to save them as jpegs. Uses these settings.

The reason for the small amount of blur is to smooth out some of the pixelation often associated with jpeg images. This is not a common practice when optimizing photographs, because the photo will look out of focus.

To export these images use the "Slice Selection Tool". to select the header, footer, blue_square and the gray_bar and in the File menu choose "Save Optimized As". With this you have a few option. You can choose the destination (where the images and code will be saved) then click save or you can choose to save the HTML only and it will create an HTML page that will fit the layout you designed. The third option is what we are going to do. I want to just save the slices that we have selected, so in the "Save as type" dialog box choose "Images Only". Then below that choose "Selected Slices". The default in this is that ImageReady will save all the images in an "images" folder. You can click on the "Output Settings" box and in the lower part of this box deselect the "Put images in folder:" check box. I generally create the folder structure of a new website first before slicing the image up. Then click save.

The next step is to create the HTML page we will later use as a template for the rest of the website. If you are wondering why we did not save the center slices, the center large gray box is going to be for your content. The top and bottom blue horizontal bars (that are below and above the header and footer) are going to be where you will put the text links for navigation.

Key Note

I choose to do a design similar to the design used for our Graphic Web Design website to show you how this type of interface works. If you notice how the text seems to be indented in the content area, that is what the gray_bar image is for. You also need to change the background color of those cells to the same color (#CCCCCC) as the gray_bars, so that when the page grows in height it will still look the same. Where the text links are I merely made the background color (#374256) of the cell in the table the same color as the blue_square image. The changing of the colors on the text links is done with CSS (Cascading Styles Sheets). Let's move on and create the HTML template.