<img src="http://www.ubbdev.com/uzine/images/blam.gif" style="border: 1px black solid" align="left">Header Images Tutorial
By: Bookie

Final Result

In my opinion, one of the most important things to remember when making your UBB, is to make it so it can be viewed correctly on any computer no matter the shape or size. I'm going to help you get started on that, and better yet, in style. That's right, fasten your seatbelts because we're making headers!

Of course it would be too easy to design graphics if everybody used the same resolution, so just to through a bit of a challenge in there, we are not going to make any ordinary header, this one will fit on almost all resolutions, without the user having the image too small or too big.

Part One: Playing With Fireworks

Let's get started, launch up fireworks (the program that is), and create a new document. A good size to start with for a header is about 800x100. You don't want to make the beginning document too big in height because we have to remember our good friends using the 56k modems, and we don't want to leave them out either.

<img src="http://ubbdev.com/db/uploads/1012191059.gif" width="402" height="300" />

Once you have the new document open, we start by creating a base, or a background by this. The background is going to be a background image, so we have to use something continuous, gradients work well here. Select the rectangle tool (<img src="http://ubbdev.com/db/uploads/1012191237.gif" width="26" height="26" align="absmiddle" />), and make a rectangle that covers the entire canvas. Open up the fill docker (window > fill), and be sure to have the rectangle selected. Click on the dropdown menu where solid is selected, and select "linear". This will give you a linear type fill, but not only is it in the wrong direction, it is the wrong colors too! Uh oh... we better fix that. We will start with the colors. Click on the edit beside where it has the dropdown menu with "Black, White" selected. This brings up a small popup where you can adjust the gradient settings. In this tutorial I used the colors #CCCCCC and #FFFFFF. You can change the colors by simply clicking one of the two color tabs, and putting in the color, or selecting one of your own.

<img src="http://ubbdev.com/db/uploads/1012191127.gif" width="216" height="171" />

Now, we have the sideways gradient, but we want it to go up and down so we can use it as a background in the header. Select the Pointer Tool (<img src="http://ubbdev.com/db/uploads/1012191289.gif" width="26" height="26" align="absmiddle" />), and make sure the rectangle is selected. Now you've got a line with a black circle on one end, and a back square on the other. Click and drag the shaped and adjust them so they are verticle, instead of horizontal.

<img src="http://ubbdev.com/db/uploads/1012191409.gif" width="96" height="130" />

Now that we have a base for our header image, its time to think about what we are going to put on it. Usually just some basic text on the left side, and a logo, or other image on the right. Here I used a few odd fonts, for the text I used Orbus Multiserif and Demon (available at Font Empire ), and on the right side is a dingbat from the font Marines .

Using the letter D in the Marines font, I added a black border to the dingbat, I also added the reverse gradient fill of the background. Reverse it by simply switching the circle and square, but remember to use the pointer tool to get it to display! Then I clones the dingbat (edit > clone), and set turned off the fill.

<img src="http://ubbdev.com/db/uploads/1012191485.gif" width="58" height="83" />

Now that the dingbat has only a border, use the arrow keys and put it out of place a few pixels up and left. Do the same thing but move it in the opposite direction to get that effect. Then celect the 3 dingbas (shift+click), and open
up the layers docker (window > layers). Set the opacity to about 50%, and that should be looking nice by now.

<img src="http://ubbdev.com/db/uploads/1012191559.gif" width="209" height="70" />

Now, the last part, creating the text. Use the settings as seen in the picture below. <table width="100%" border="0" cellspacing="1" cellpadding="4"><tr><td width="1%" valign="top"><img src="http://ubbdev.com/db/uploads/1012191604.gif" width="420" height="343" /></td>
<td valign="top">
</td></tr></table>

Continued on page 2...

Then clone the text, and set it to a black border, with no fill. Move the text a few pixels up, and a few to the right. Next, add another text item, with the same name as your title, and a font that looks good. Set the color to one close to the background color, but just a little off. Then set the size so it just fits on the canvas, it can be a little bigger too. Try not to make it over half the size of the image, because we are slicing these up, and want them to fit on the 800x600 resolution. Adjust the opacity in the layers docker for the text to make it barely visible, but still noticable. Now the final touch. Creat a rectangle that is the same size as the large faded text you just created. Make a gradient fill, and using the pointer tool, fill it diagonally, from your chosen color, to white. In this image, i used the color #336699. once you have the diagonal gradient fill done. Open up the layers docker, and set the blend mode to Color, and the opacity to 50%.

<img src="http://ubbdev.com/db/uploads/1012191658.gif" width="212" height="60" />

Now, that looks pretty good doesn't it. But, it is only going to fit in one resolution! That's not what you wanted at all. This is where my favorite tool in fireworks come in... BEHOLD THE SLICE TOOL! Thats right, we are going to slice up the image using this tool, the left text part, the background, and the right logo. Select the slice tool (<img src="http://ubbdev.com/db/uploads/1012191852.gif" width="26" height="26" align="absmiddle" />), and drag over the three parts. First the left part, select the part from the beginning of the image, until after the large faded text. The next slice we just need a small part to use as the background, so select a small part of the
gradient fill. Lastly, select the logo portion. The following image is zoomed out at 50%, but you get the idea.

<img src="http://ubbdev.com/db/uploads/1012191717.gif" width="401" height="51" />

Now, exporting. Many people tend to get confused with fireworks, as it will only let you save as .png files. But they miss the export feature, which will let you export your image in a variety of different image types. Open up the Export Docker (window > export). Now click on the preview tab up beside the edit menu.

<img src="http://ubbdev.com/db/uploads/1012191950.gif" width="90" height="47" />

This will give you an idea what your image is going to look like when you export it. You may now adjust the settings in the export docker to fit your image right. To export, go to file > export, and enter in the file name. This will produce 3 different images. The left image, the background, and the right image.

<img src="http://ubbdev.com/db/uploads/1012192096.gif" width="515" height="441" />

This concludes the graphics portion of the tutorial. Now... moving on to the fun part.

Part Two: Putting Your Plan Into Action

I think it is safe to say you are done the hard part, now we just need to make that header come to life. You can start that by opening up wordpad. Create a new text document, or open an existing html document. We are going to want to add a border to our image, so we can to that by creating a table inside of a table. Do that by creating the following.<table width="95%" border="0" cellspacing="1" cellpadding="4" align="center"><tr><td width="57%"><font size="1"><table width="98%" cellpadding="0" cellspacing="0" align="center">

<tr bgcolor="#000000"><td>

<table width="100%" cellspacing="1" cellpadding="0">

<tr><td background="header_r1_c2.jpg">
</td>
</tr>
</table>


Of course, these are just my settings, you can adjust yours in any way you wish. In the first line you can adjust 'width="98%"' to fit whichever size you decide to use. On the second line you may adjust 'bgcolor="#000000"' to suit any color you wish, this will show up as the border color. The third line, you may change the border size by editing 'cellspacing="1"'. Don't foget to change the background image to suit the one that you have used. Next we move on to create yet another table.
<table width="95%" border="0" cellspacing="1" cellpadding="4" align="center"><tr><td width="57%"><font size="1"><table width="100%" cellpadding="0" cellspacing="0" align="center">

<tr><td valign="top">

<div align="left"><img src="header_r1_c1.jpg"></div>

</td><td valign="top">

<div align="right"><img src="header_r1_c3.jpg"></div>

</td></tr>

</table></font></td>
</tr>
</table>

The code above creates a table with two cells, one for each image. Don't forget
to rename the images to the names that you have used. Now that we have everything
displayed, we may go on to closing the table.
<table width="95%" border="0" cellspacing="1" cellpadding="4" align="center"><tr><td width="57%"><font size="1"></tr></td></table>

</tr></td></table></font></td>
</tr>
</table>

This closes the two tables created at the beginning. The <tr> tag creates a row, and the </tr> closes a row. The <td> tag creates a column, and the </td> closes a column. Now, save that html document, and open it up in your browser. Be sure to hold onto your hats folks, because you have just created yourself a spiffy new header!

<a href="http://www.clan-316.com/header.png">Click here for the .PNG file used in this tutorial.</a> (3 MB)

<a href="http://www.clan-316.com/header/index.html">Click here for the final HTML document of this tutorial.</a></font>