Projectseven.com - Tutorials: Gradient Background Image Tiles

Gradient tiles

Background images are an easy way to punch up your website with color, texture, and light. The exercises that follow will serve as an introduction to creating Gradient background tiles. If you'd like to follow along, click on the ZIP icon to download the supporting files, and then create a new folder on your hard drive. Label the folder My Tiles. Unzip the supporting files into your new folder.

Download the supporting files

About gradient tiles

Gradient tiles can be used to add dramatic lighting effects and subtle shadows to a Web page. They can include a separate color or gradient to create a side or header bar at a huge savings in overall image file size. In this first of two gradient tile exercises, you'll learn how to create a vertical strip background tile with a header bar and lighting effect. This is the kind of tile to create when you plan to use a horizontal navigation system. Colors and patterns of vertical strip tiles are applied in horizontal bands. By clever spacing of these bands you can create perfect spaces for your logo and navbar. The trick is to design the logo or header text first, then design the background tile around it.

The owners of a local Bed & Breakfast would like us to design a brochure site for them. They have already established a visual identity for their business and would like us to base the site design on it. Here's a logo clipped from one of the goodie bags they place in guestrooms. The elements we want to reuse are the colors, beige, cream, white, and charcoal, and the background stripe.

Figure 8: B&B logo

Open Fireworks
Choose File > New to open a new document window

Make sure that rulers and guides are turned on by choosing View > Rulers, View >Guides, and last, View > Guides > Snap to Guides.

Set the canvas size to 600 pixels wide by 2000 pixels high.
Use the default White for canvas color.
Click OK to close the dialog box.

To add the first background rectangle to the canvas,

Select the Vector Rectangle tool and drag out a rectangle 600px wide by 300px high.
Align the rectangle to the top left by entering zeros in the X and Y boxes in the PI.

Next you'll add a gradient and texture to the rectangle.

Click on the down arrow of the fill type selector in the PI and choose Gradient > Linear.
Click in the Fill Color box in the PI to open the gradient editor.
Add a new color swatch to the center of the gradient ramp by clicking between the two existing ones.
Click on the swatch you just added to open a swatches pop-up and set its color to white
Click on the right swatch to open the swatches pop-up and enter the number #CAC5A8 in the text box at the top of the pop-up.
Use the same color, #CAC5A8 for the left gradient swatch.
Move the white swatch toward the left, to about 1/4 of the width of the ramp.

Figure 10: Positioning the white swatch

Press Enter to accept the changes and close the pop-up
Click on the rectangle to make the gradient rotation bar pop-up.
Rotate the gradient so the highlight is close to the top of the rectangle.

To add the stripe,

With the background rectangle selected, click on the down arrow of the Texture selector in the PI and scroll until you find the Line-Vert 1 texture.
Click on the Line-Vert 1 texture to select it, and then adjust the amount of texture to 100%

That takes care of the upper part of the tile. To add color and pattern to the lower part,

Clone the rectangle (Edit > Clone).
Use your arrow keys to move the clone down to where the beige color at the top of the clone blends with the beige color at the bottom of the original rectangle.
Lastly, drag the bottom edge of the lower rectangle to the bottom of the canvas.

Figure 11: Matching up the colors at the edges of the rectangles

You'll see that when you scroll up and down the canvas, it appears to be lit from overhead.
To finish the tile, you'll need to install some new styles in your Fireworks Styles panel.

Click on the menu expander icon at the top right of the styles panel (the wavy line thing) and select Import Styles.
In the Open dialog box, browse to the My Tiles folder and locate the Edwardian.stl file.
Click on the Edwardian.stl file to select it, and then on Open.

The new styles, Charcoal and Detail, are instantly loaded into the Fireworks styles panel.

The logo,

Type the name Edwardian Inn in a medium sized serif font.
Color it charcoal #595959.
Clone the text and color the clone white.
Use your arrow keys to reposition the white clone two pixels up and two to the left.
Move the repositioned white clone behind the original text by clicking on its thumbnail in the Layers panel, and dragging it below the thumbnail of the original.

The Edwardian era borrowed from the medieval, Tudor, Jacobean, Georgian, Arts and Crafts, and Art Nouveau styles. I've used P22 Arts and Crafts Hunter, which you'll find at My Font. Others that would work are Paul Lloyd's Bolton, Cleaver's Juvenia, Lewisham, Lightfoot, and Watson.

Type your logo text in the highlight at the top of the canvas.

Figure 12: The logo

To add a highlight to the top edge of the tile,

Select the Vector line tool and set the stroke color to white.
Press Shift and draw a line all the way across the canvas.
Set the stroke style to Hard, and the width to 3.
Move the white line to the top of the upper rectangle

To add a decorative detail,

Select the rectangle tool and drag out a 600px wide by 21px high rectangle.
Position the rectangle by typing 0 in the X box in the PI, 65 in the Y box., and then press Enter.
Apply the Detail style to the rectangle.
Move the center point of the rays in the detail below the 'a' in Edwardian by dragging the round gradient handle.

To add a button bar,

Drag out a 600px wide by 20px high rectangle.
Apply the Charcoal style to the rectangle
Position the button bar by entering 0 in the X box in the PI, 73 in the Y box, and then press Enter.

Figure 14: The finished logo

If you look closely at the image above, you'll notice that it begins with a dark stripe and ends with a light one. Therefore the background tile must begin with a dark stripe and end with a light one. To cut the background tile from your composition,

Zoom the document window to 400%.
Drag a guideline to the right side of the canvas, just to the right edge of a beige colored stripe.
Drag a second guideline to the right edge of a light colored stripe, about five stripes to the right of the first guideline.
Press and hold on the Crop tool to make the Export area tool fly out.
Drag the Export Area tool against your guidelines and all the way to the bottom of the canvas.

Figure 15: Cutting a background tile with the Export Area tool

Double click inside the selected area to open the cropped section in the Export Preview window (In FW 8, the Image Preview window.)
Export in JPEG format

To apply the tile to the background of your HTML page set the margins to zero, and allow the default tiling. Your style should look like this:

See it live

Let's take a look at the finished design as a page background

That's a wrap. Happy tiling!