Create a banner picture
Need a picture to spruce up your Web site home page? Create a banner image to do the job.
Here you will learn how to find a good image for your banner, how to create your banner image in Fireworks and how to insert a banner into your Web page.
Find a good image for your banner
- The image you use for a Web site banner image must be at least 720 pixels wide and 240 pixels high in its original copy. Ideally, the image should be larger than this so that you can be selective when you crop the image. Save the original image in the folder for the section your Web page is in.
- Choose an image in which the main subject matter and/or action happens horizontally across the shot—you will be cropping the image to be very wide, but relatively short. If you use a vertical ("portrait") picture, it must be large enough from which to crop a horizontally-oriented picture.
- Look for images that include action, interesting expressions and lots of color.
- The image should be of relative high quality—not pixelated, dark or blurry.
Crop your image to create the banner
Follow these steps to create your banner image.
1. Open you original image in Fireworks.
2. Crop your image using the Marqee Tool (on your left). Once you select this tool, look in Properties for the "Style" box. Choose "Fixed Ratio" and in the two boxes below, enter the values 720 and 240.
3. Select the portion of the picture you want for the banner. Right click and choose "Crop Document". You should now see a cropped image that looks like a banner image.
4. Re-size your image by going to Modify>>Canvas>>Image Size and enter the value 720 into the width box. Click "OK".
5. To add the drop-shadow effect, go to Modify>>Canvas>>Canvas Size. In the height text box, enter the value 250. In the "Anchor:" area, click the top middle button. Click "OK."
6. In the Properties palette (bottom of Fireworks), click on the + sign after the word "Filters:". Go to "Shadow and Glow" and choose "Drop Shadow". A drop shadow should appear under your image.
8. Save a copy of your new banner. Go to File>>Image Preview and export (save) your photo in the images folder for the section your Web page is in, naming the image "banner.jpg", "banner2.jpg", "banner3.jpg" and so on. Make sure that you optimize your image before you save it in the appropriate folder.
9. Close your original image (it will still look like the cropped banner image) WITHOUT SAVING the changes you made to the image. You need to keep a copy of your original image in case you need to go back and make changes to it.
