Designing Graphics for Your Web Site

In addition to making changes to existing graphics, you will often need to create new graphics completely from scratch. This is often the case when you are redesigning your Web site or designing a new Web site. It's often easiest to design a page inside your graphics software and then slice up the graphics for use in your Web site.

Figure 47.12 shows an image mock-up of a Web site design. This image was created at a size of 1500 pixels wide and 500 pixels in height. The banner at the top was then created inside a 3D graphics package and pasted into the image.

Figure 47.12. A Web page mock-up created in Adobe Photoshop.

graphics/47fig12.jpg

To make the image a bit more appealing, a gradient bar will be added below the banner. Gradients are visually appealing graphical elements that are easy to create and add a sense of depth to a graphic.

Creating the gradient bar is very easy in Photoshop using the Gradient Editor shown in Figure 47.13. The gradient is configured to move from a dark blue to a lighter blue. The gradient is then applied to a selection as shown in Figure 47.14 to make the bar.

Figure 47.13. The Gradient Editor in Photoshop. Gradients are great for adding depth to Web graphics.

graphics/47fig13.jpg

Figure 47.14. The gradient applied to a large rectangular selection.

graphics/47fig14.jpg

After adding the gradient bar, the only remaining item is a text logo for the site. Both Photoshop and PhotoImpact have excellent text tools to make adding professional looking text to an image easy. Figure 47.15 shows the mock-up with text added.

Figure 47.15. The graphics are now complete and ready to be prepared for the Web page.

graphics/47fig15.jpg

Slicing Graphics

The Web page mock-up was created as a single large file in order to make it easier to lay out the graphics in the proper proportion. Now that the graphic creation is complete, the graphics need to be prepared for the Web page.

Obviously, the graphics need to be as small as necessary. Therefore, all the extra whitespace around them needs to be removed. Because the Web page will have a white background, you can remove any empty white areas of the mock-up graphic.

Both PhotoImpact and Photoshop make it very easy to slice up an image. They also allow you to easily specify image optimization settings for individual slices. This is especially handy because not all slices in an image are created equal. Figure 47.16 shows the Web page mock-up with slices applied in PhotoImpact. Notice that the Jimco Add-ins logo is in its own slice and the flag in the banner is in its own slice. The flag should be saved as a JPEG image, but GIF is the best format for text. Both PhotoImpact and ImageReady make it easy to save each slice in the format you choose.

Figure 47.16. The Web page mock-up with slices applied in PhotoImpact. Notice that the Slice Panel dialog box allows for optimizer settings for each slice.

graphics/47fig16.gif

This Web page will consist of three different images. One will be the flag in the upper-left corner, another will be the Jimco Add-ins logo text, and the third will be the remainder of the banner to the right of the flag. The rest of the whitespace in the graphic will be discarded. Slices are created for each of the three graphics as shown in Figure 47.16.

Saving Slices

Adobe ImageReady is a bit more flexible than PhotoImpact when it comes to saving your slices. Figure 47.17 shows the Output Settings dialog box in ImageReady. These settings are used when you want ImageReady to generate the HTML file to contain your graphics. Although you can use FrontPage's Layout Tools to configure your Web page, it's often easier to let your graphics program do the work for you.

Figure 47.17. ImageReady makes quick work out of generating the HTML necessary to build your Web page.

graphics/47fig17.jpg

For more information on Layout Tools, see "Using Layout Tables," p. 201.


ImageReady allows you to choose whether you want it to create the HTML page for your images. In Figure 47.18, ImageReady is configured to save the HTML page and the images as indicated in the Save As Type dropdown. If you select Images Only, ImageReady will save only the images and no HTML. PhotoImpact does not offer this option. When you save slices using PhotoImpact, you must save the HTML page as well. Figure 47.19 shows the completed HTML page generated by ImageReady.

Figure 47.18. ImageReady offers more options than PhotoImpact when it comes to saving slices.

graphics/47fig18.jpg

Figure 47.19. The ImageReady-generated Web page opened in FrontPage. All that's left is adding content.

graphics/47fig19.jpg

Once the Web page has been saved by the graphics editing software, the images are ready to be imported into your Web site. You can then save the generated page as a Dynamic Web Template, and you're ready to add content for your new Web site.

graphics/troubleshooting_icon.jpg

If your images show up as broken links after importing your new HTML file, see "Images Broken After Saving" in the "Troubleshooting" section of this chapter.


For more information on Dynamic Web Templates, see "Creating Dynamic Web Templates," p. 412.




Special Edition Using Microsoft Office FrontPage 2003
Special Edition Using Microsoft Office FrontPage 2003
ISBN: 0789729547
EAN: 2147483647
Year: 2003
Pages: 443

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net