Creating the Background Strip

Step 2

Create two graduated boxes, using whatever colour fits in with your site scheme. In our example, we’ve used black. The longer of the two boxes is designed to fit under our header area, whilst the smaller one is designed to fit above the header.

Both of these boxes should be the same width in pixels as your chosen tile. In our example, the tile was 160 px, so our boxes were also made 160 px wide.

Important Note: Make sure the outline colour of your boxes is set to “none”. Also note that the longer box has been set to fade to white and is about 800 px tall. This is because we always design our pages for a fixed length of about 1000 px. When all the elements of this design are pieced together, the total length of the graphic strip will be about 1000 px. If your pages are likely to be longer , simply adjust the length of the larger box accordingly.

Tip: If you’re designing for pages that are very long, create a box that will deal with your longest page, but don’t have the fade-out too far down the page. End the fade about 600 - 700 pixels from the top. It doesn’t matter that the background colour gradually disappears further down the page. What you’re trying to do is make a nice effect for your first screen-full of page veiw.

Move on to Step 3