Creating Web Banners

Another very common use of graphics on Web sites today is Web banners. Because most Web sites that use Web banners rotate the graphics, it's important that any Web banners you create are the correct size. The standard size for a Web banner is 468 pixels wide and 60 pixels high.

NOTE

The Web banner size of 468x60 was chosen because it takes up a full page width on a 640x480 display. Most people run at a resolution of at least 800x600 these days, but the standard size of Web banners remains 468x60.

Both PhotoImpact and Photoshop provide preset settings for creating Web banners. Figure 47.20 shows PhotoImpact's New Image dialog box configured for a Web banner. Figure 47.21 shows the same configuration in Photoshop.

Figure 47.20. The New Image dialog box in PhotoImpact configured for a new Web banner.

Figure 47.21. The New dialog box in Photoshop configured for a new Web banner.

Let's create a new Web banner for FrontPageCart.com, a new e-commerce Web site. If you look at its logo at http://www.frontpagecart.com, you will notice a beveled circle and the site name on a black background, as shown in Figure 47.22. Reproducing this in an attractive Web banner should be fairly simple with the powerful toolset provided by Photoshop or PhotoImpact.

Figure 47.22. FrontPageCart.com is a new e-commerce site for FrontPage and shows a great idea for a Web banner.

You will want to start with the red circle. Notice that the edge is slightly beveled. Using a bevel is an easy way to make an image appear three-dimensional. As shown in Figure 47.23, PhotoImpact uses the Button Designer dialog box to apply a bevel. Figure 47.24 shows the Photoshop's Layer Style dialog box with the Bevel and Emboss option selected. PhotoImpact offers more flexibility in this area because it allows for the easy configuration of multiple light sources, which light the object from the top and the bottom.

Figure 47.23. PhotoImpact's Button Designer allows for up to four light sources.

Figure 47.24. Photoshop's Bevel and Emboss options provide high quality output, but with only one light source.

To complete the banner, text needs to be added. Verdana was chosen as the font to use for the banner because it is the same font used in the original logo. Both PhotoImpact and Photoshop allow you to enter and format text directly on to the image. This is a great advantage because it lets you see what your text looks like in real-time. Figure 47.25 shows the Text Panel in PhotoImpact and the FrontPageCart.COM text entered in to the banner. Figure 47.26 shows the Photoshop equivalent.

Figure 47.25. PhotoImpact's Text Panel makes configuring text simple.

Figure 47.26. Photoshop's text tools are very similar to PhotoImpact's.

To finish out adding text, the COM part of the logo needs to be changed slightly. FrontPageCart uses Trebuchet MS as the font for the COM, and the size on those three letters is slightly reduced. PhotoImpact and Photoshop make it easy to change part of your text by simply selecting the text just as you would in a word processing program and changing the properties on it. Figure 47.27 shows the updated banner with the font corrected.

Figure 47.27. The text entry is complete and matches the look on the FrontPageCart Web site.

The last step in reproducing the FrontPageCart logo is to add a shadow to the text. PhotoImpact and Photoshop both offer comprehensive tools for configuring shadows. PhotoImpact's Shadow dialog box is shown in Figure 47.28. Figure 47.29 shows Photoshop's Drop Shadow options. Photoshop's capabilities far surpass PhotoImpact's in this area.

Figure 47.28. PhotoImpact configures shadows using the Shadow dialog box. This dialog box is more frustrating than Photoshop's Drop Shadow options.

Figure 47.29. Photoshop's Drop Shadow options are much easier to use than PhotoImpact's Shadow dialog box.

TIP

One thing I don't like about PhotoImpact is that an object must be selected prior to adding effects. When you select an object, a dotted line marches around the object and that can make it hard to clearly see the effects of your edits. Photoshop does not select layers in this way when you are applying effects.

PhotoImpact and Photoshop also provide tools that allow you to add shapes to an image to make it more interesting. By adding shapes to simple graphics, you can make them appear much more professional and interesting, and callouts are a great approach when you want to draw attention to something in particular.

The final touch for the banner is to add a description of what FrontPageCart is as well as a thin white border, and it's ready for adding to your Web site. Figure 47.30 shows the finished banner displayed on the Jimco Add-ins Web site.

Figure 47.30. The completed Web banner proudly displayed on the Jimco Add-ins Web site.