Web Policies

Four Easy Steps to Getting a Nice Fading Photo into Your Header

Step 1

Open the template file in Fireworks. It's located at \\srv4\header_templates\right_photo_template.png. Or if you're lazy like me, you can just drag the PNG below to Fireworks:

Note that this file has three layers. They're called Linefade, Photo, and Background. The one we're concerned with is Photo.

Step 2

Now open the image that you wish to insert into the template. Crop/resize it to 200 x 53, so that it fits the header.We'll use this image for demonstration:

Step 3

Now, copy the image to the clipboard and go back to the template image. On the Layers palette, click on the leftmost box on the Photo layer so it has a blue rectangle around it.

Now press Ctrl+V (Apple+V) or go to Edit > Paste to paste your image into the layer.

Next, you need to cut the image (ctrl+X or Apple+ X).

Now, you need to click on the "Your Image Goes Here" in the layers tab at the right. Then, you can hit ctrl+shift+V (Apple+Shift+V) or do an edit-paste into and your image will replace the "Your Image Goes Here" text and the template should now looks like this:

Step 4

The image is now finished and ready for insertion into your header, but first you must export it. For a photo like the above, it's advisable to export it as a JPEG with the Quality set to 75 or 80. If it is a graphic such as the Sesquicentennial logo, your best bet is to export it as a PNG set to "PNG 8" (palette-based) and Colors set as low as possible without losing much quality. However, you will probably want this to be at least 64 due to the gradient effect. Fortunately, PNG's compression algorithms have some extra features for compressing gradients.

Using JPEG, our demonstration file compressed to about 3.3 kB:

Thank you for choosing this tutorial. Go back to the index, if you'd like.