Creating a Stylized Image

The next step in developing your web template is creating a custom graphic that will be located on each page of the site and adding some custom filters to modify the image colors.

1.	Download and extract the Fireworks files from the companion website. Browse to the Fireworks folder and open `custom_chopper_base.gif` in Fireworks. This file contains the image of a motorcycle with a transparent background (see Figure 7.4). Figure 7.4. Open the `custom_chopper_base.gif` file.
2.	Select the motorcycle by clicking anywhere on it and choose Filters, Adjust Color , Hue/Saturation from the menu bar.
3.	In the Hue/Saturation box, set the Hue to 225 , the Saturation to 100 , and the Lightness to . Check the Colorize check box and click OK. This changes the motorcycle color from black to blue (see Figure 7.5). Figure 7.5. By adjusting the hue and saturation, you can change the color of the entire motorcycle.
4.	Select the motorcycle and choose Edit, Copy (Ctrl+C or Cmd-C) from the menu bar.
5.	Switch over to the `retros_cycle_template.png` file by clicking the tab for the document. From the menu bar, choose Edit, Paste and the blue motorcycle is added to your page (see Figure 7.6). Don't worry that the image looks a little rough. Figure 7.6. The motorcycle has been added to the template page.
6.	To smooth out the edges of the image, select the motorcycle and choose Filters, Blur, Blur from the menu. Fireworks blurs the images slightly by blending the pixel colors together.
7.	Next, resize the motorcycle by selecting it and typing 225 in the W: field and 174 in the H: field. Reposition the image by typing 5 in the X: field and 5 in the Y: field. As you can see in Figure 7.7, the motorcycle has been properly placed in the page. Figure 7.7. The rough edges of the motorcycle have been refined and the image is in its final location.

Adding Text to the Template

Although most of the copy text for the web pages will be added later, when you edit the site in Dreamweaver, there are some text elements that you should add in Fireworks. Because text added via HTML is displayed with the system fonts, you can't be absolutely positive that any fonts beyond those that come with the operating system will display properly. If you use a font in your pages that isn't available to a visitor, the visitor's system adjusts and uses a font that is similar. This means that you can't control how your site is displayed on every machine.

To avoid this, you can use Fireworks to embed the text in an image. Because the text in the image doesn't rely on the font being present on the user 's machine, you can be confident that it will display correctly every time. In the case of this client, we'll add the company name , location, and contact information at the top of the site.

1.	In the `retros_cycles_template` file, select the Text tool and draw a text block above the blue dividing line and to the right of the motorcycle. Again, it doesn't matter how big it is or where it is located because you can adjust those properties later.
2.	In the text block, type `Retro's Cycles` . Create a second text box and type `12345 Main St Anywhere, USA (555)555-2222` .
3.	Create a third text block and type `emailus@retroscycles.com` .
4.	Select the first text block that you created. Click on the resize handle in any corner of the text block and adjust the height and width of the text block so that the width is 508 and the height is 79. Tip As you drag the resize handle around, watch the W: and H: fields in the Property inspector. They change as you move your mouse. Caution Do not try to manually enter values into the W: and H: fields of the Property inspector to adjust the height and width of your text block. Doing this results in skewed text.
5.	Next, adjust the positioning of the text block by typing `247` in the X: field in the Property inspector and `5` in the Y: field.
6.	Following the same procedures, select the second text block and set the width to `508` , the height to `79` , the X: position to 247 , and the Y: position to `90` .
7.	Do the same for the third text block and set the width to `494` , the height to `19` , the X: position to `246` , and the Y: position to `107` . You should now have three text blocks positioned in the page's header section (see Figure 7.8). Figure 7.8. The header text has been placed. Note Don't worry if your workspace doesn't look exactly like the figure. Depending on the font you use, your fonts might be significantly larger or smaller than the ones in the image. Just adjust your fonts accordingly so they fit on the screen and are similar to the image.
8.	Next, select the text in the first text box and set the font size to a size that fits well on the page. Adjust the font style to bold and choose any font type that you would like. Change the color of the font to `#0000FF` . The font in Figure 7.9 is Brush Flash. Figure 7.9. Adjust the font attributes and choose a custom font. Note To apply the changes to the font, you have to first select the text you want to change within the text block. If you want to adjust the font of the entire text block, you can do so by selecting the text block and then choosing the desired font from the Property inspector.
9.	Select the text in the second text block and adjust the font so that it is Arial, 15, bold, and has a color of `#000FF` . Do the same for the third text block (see Figure 7.10). Figure 7.10. Adjust the font properties for the second and third text blocks.
10.	Save the file.