PI6 Sliced Web Page


When I was doing the Resource page for my new book, "PhotoImpact 6 Wizardry," I wanted to use a very big background tile, and I wanted to have my wizard on the left side of the image with a "framed" text area. Oh yes, and I wanted it to look good at both 800 X 600 and 1024 X 768 resolution! Is that too much to ask? Take a look at my workaround.

We all know we can build web pages in PI6, but getting them to look OK at different resolutions can be daunting. For example, my web stats tell me that while over half of the visitors to my pages view at 800 X 600, a good one-third or so are at 1024 X 768. The solution to the problem is to build an 800 X 600 web page image, slice it, and save it as an HTML document. Then you can tweak it in an HTML editor by discarding some of the images and replacing them with your own background.

If you want to, use one of your own objects for this tutorial, or you can download the .UFO zip file for my wizard, which will be positioned on the left side of the image. Then right click and save this tile to your hard drive.

background tile

Start by making a new True Color file 800 X 600 pixels. Open up the background tile and Copy it into the Clipboard. Choose Edit, Fill. From the Image tab, select Clipboard and click OK to fill the base image with the background tile. Open up the wizgirl.UFO file. With the Pick tool, drag her over onto the large web page image. Position her on the left side of the image.

position wizard on top left side

To add a faint glow around the wizard, right click and choose Shadow. The settings for the shadow are shown below. 

shadow settings

It may seem odd to make a light colored shadow like this one, but an opaque shadow in a pale color can be very effective against a darker background like this one. Right click and Merge All.

Let's add some lightning bolts coming from the wizard's fingertips. Open the EasyPalette's Lighting Gallery, Lightning. Right click on Lightning 4 and choose Modify Properties and Apply. When the Lighting dialog box opens, under Elements, Lightning 1 will be selected. The lightning is white. Click in the Color box and select white instead. Position the cursor in the Preview window until the cursor turns into crossed, double-headed arrows. Drag the lightning so it starts at the wizard's fingertips. Drag the other end of the lightning up to the top of the image (see arrow below).

 add lightning from fingertips

Under Elements, click Lightning 2 to select it. Note that this lightning is pale yellow. Click in the Color box and select white. Move the beginning of the lightning bolt so that it's coming from the wizard's fingertips, then drag the end of the bolt to about midway in the base image.

position second lightning bolt

Click OK to close the Lighting dialog box. 

Select the Text tool. In a font of your choice, in a fairly large size, type some header text for your web page. Choose a bright, contrasting color for the text. It need not be 3D, in fact you will probably get the best results from making 2D text, duplicating it, then editing the duplicate text to black. Position the black text underneath the color text, offsetting by a pixel or to to make a hard "shadow." Select both the black and the color text, right click, Merge as Single Object.

Now let's add a big rounded rectangle graphic for the text you'll add in your HTML editor. Select the Path Drawing tool. Click Shape, Custom Shape. From the Custom Shape dialog box, select Rounded Rectangle 2. Click in the Color box and select white. From the Mode dropdown list, choose 2D. Draw a big white rounded rectangle object. Turning on the Ruler will help you to judge how large the rectangle is. Make it about 500-600 pixels across and make sure that it's tall enough that it comes down well below the bottom of the wizard. Resize it with the Transform tool, if necessary.

add white rounded rectangle object

If you want to get really fancy, right click and Duplicate the Rounded Rectangle. Right click, Arrange, Send Backwards. Edit the duplicate object to a bright color. I chose the same orange color I used on the text. Switch to the Transform tool, Resize option, and resize the orange object so that it is just slightly larger than the white object, creating a "frame."

make a brightly colored duplicate "frame"

Select both rounded rectangle objects at the same time, then right click, Align, Center both. Be sure the text object is centered over the big white rounded rectangle. Right click, Merge All.

Now it's time to slice up the image. Choose Web, Slicer to open the Slicer dialog box. First thing, select JPG and choose a preset from the options available via the Image Optimizer icon, lower right corner. I'm using one of my own custom presets, an 85% Standard Optimized JPG.

select a JPG preset

Make 2 horizontal slices as shown below.

2 horizontal slices

Make 3 vertical slices as shown below. 

3 vertical slices

To preview the web page, choose File, Preview in Browser, and select your default browser. A browser window showing the HTML page will open. If you're in 1028 X 768 resolution, you'll see a big white space on the right side of your screen. Scroll down below the web page and you will find important information about the web page, including its total size, number of images, etc. Close the browser window when you are finished looking at the page.

Now let's add the HTML attributes to the web page before saving it. Select Web, HTML Properties. When the dialog box opens, provide the information needed from the General tab. Meta tags will be created for you according to the information you supply in the Keywords box.

HTML Properties, General tab

Disregard the Background tab. The background will be generated automatically.

Click the File Format tab. Select web image options from those available. The Image Optimizer settings you chose while slicing will be there.

File Format options

Click the Options tab and you will see that all options are selected by default. Leave them selected.  Note particularly that all images will be saved to an images subdirectory, which will be created for them automatically. Click OK to close the HTML Properties box.

Finally, it's time to save our web page. It is essential to remember that you should not use File, Save to save a web page. Instead, choose File, Save for Web, As HTML. When the Save As dialog box opens, save the web page to a folder on your hard drive.

Now it's time to doctor the web page up a little. Open it up in your HTML editor. Regardless of which HTML editor you use, you must do several things. 

First, make sure that the Top and Left margins for the document are 0 (zero)  pixels. 

Second, select and delete the three images in the right column only. Change the web page background to the big tile at the top of the page. This will fill in the empty white spaces. Since your table starts at 0, 0 pixels on the Top and Left, the table should blend seamlessly with the web page background.

Third, select and delete the big white image in the center of the table. The background tile will show through. Change the background color of this cell to white. Edit the alignment for the cell as desired. 

Now you can type your text into the middle of the large white rounded rectangle. Don't type too far across or you will throw the table out of alignment. At the end of each line, do a line break and continue typing.

add text to center cell

Remember, when you upload your page to your server, be sure to upload all of the images to an images folder on your server. 

When someone views your web page at 800 X 600 resolution, it will look just as you intended for it to look. If the page is viewed at 1024 X 768, they will see extra space on the right. The table will not be centered on the page, but they will not see an ugly empty area either.

extra space on right at high resolution

This tutorial uploaded 5/11/01

Do not duplicate, translate, copy, archive, appropriate or redistribute this document.


Back to Homepage