Steps for Completing your Project Web Site

Background Graphics

Is there a part of your page that you want to tile all the way along the side, or all the way across from the left to right side of the screen? If so, that graphic should be a background image.

Background images work best as either long vertical or long horizontal images so that they can tile across your page.

If you want a solid vertical stripe down the side of your page, then your background image should be a horizontal graphic.

For horizontal backgrounds like this one (it will look like a solid stripe running down the left side of the page) make sure your graphic is at least 1600 pixels wide.

See this page

If you want a horizontal stripe across the center or top of your page, then your background image should be a vertical graphic.

For vertical backgrounds like this one (it will look like a large stripe of color(s) running horizontally across your page) make sure your graphic has a height of at least 2000 pixels-- and maybe more depending on if you have a lot of content to scroll.

See this page

Exporting Background Graphics

Notice in the Eldertek design, there is a gray stripe running down the page. Because we want this image to go all the way from the top to the bottom of the screen, this image will be a background image.

This stripe is blue at the top, but it will be easier to make that blue part of the header graphic, and leave the background as a solid gray strip.

HOW NOT TO DO IT:

Don't draw a slice around part of your layout in Fireworks and export that to be a background image.

Because background images must be very long or very wide to display correctly on different monitors and screen resolutions, you should create this image seperately in Photoshop.

How Can You Be Exact?

1. In Photoshop, open your layout and temporarily flatten the layers (you will undo this step later). Do this by going to Layer-->Flatten Image

2. Then use the rectangle marquee tool to take a sample of the background stripe.

3. Copy this (control-c or Edit-->Copy).

If you get the following message, it means that you did not flatten the image.

4. Go to File-->New and click OK to accept the dimensions of the new file.

5. Paste (control-v or Edit-->Paste).

6. Now expand the canvas by making it really wide or really tall (tall for a horizontal stripe, long for a vertical stripe like this one.)

a. First, select what color you want this new longer part of the graphic to be. In this example, we want it to be white.

b. Then expand the canvas by going to Image-->Canvas Size

Change the dimensions to pixels, set the direction that you want the canvas to expand, and change the width (or height for a background that displays a horizontal stripe instead of a vertical one). Click OK.

7. Now you have your background image.

Save it for the Web by going to File-->Save For Web and saving it in your images folder of your new project.

8. Go back to your layout and UNDO the Flattened Image command. You can do this by going to Edit-->Step backwards, or close the file without saving the changes. If you accidentally save the flattened image as your layout, you'll lose all of your seperate layers and will not be able to work with this file again, so BE CAREFUL HERE!!!

Previous Step                  Next Step