I admit that I have mixed feelings about backgrounds on web pages. These can really add personality to a website, but they also can make reading the text of your site difficult and frustrating. To quote web designer David Siegel, "Gift-wrap makes poor stationery."

If you use backgrounds with discretion, however, they can add to a site's presence and look. Because HTML includes the capability to tile any image as a background, your background file can be quite small. You just have to make sure that it doesn't have obvious edges or pictures that end abruptly, unless that's what you want. In Figure 12.5, I've created a tile for a web page background, and I'm saving it as a GIF using the Save for Web dialog in Photoshop.

Figure 12.5. This tile combines several filters applied to a plain white background.

To convert the single tile into a background is easy: Open a page in your favorite web page layout program and import the image. Depending on the program, you might import it as an image and click a check box in the dialog box to make it a background. Some other web page layout programs such as InDesign and GoLive have a specific dialog for placing backgrounds. Netscape Composer's is called Page Colors and Background and is shown in Figure 12.6.

Figure 12.6. You can also preview text colors in the sample swatch.

Now, all you have to do is to be sure that when you upload your page to the web, the background image goes into the same folder as the page itself. Figure 12.7 shows the tiled background with some type and a picture (with transparency) placed over it.

Figure 12.7. The background looks even, and the tiling hardly shows at all.

Saving HTML with Images

If you are not using a web page construction program, but instead you are hand-coding your own web page hypertext, you probably already know that you need a few lines of text to describe the graphic being inserted. Without this HTML coding, nothing happens. For a static image, the coding is simply the source of the image file, its size, and its placement on the page. If the image has rollovers, is an animation, includes a special background color or background image, or will be used as a tiled background on a web page, you must save both the image and the associated HTML. With this saving option, HTML code is generated and an HTML file is saved along with a folder named, by default, Images.

To incorporate the artwork into an existing web page, you typically must copy and paste the HTML into the appropriate section of the web page's HTML document. The Images folder must be saved (and uploaded) with the HTML and other web page graphics.

Adding an Accent Stripe

Here's a trick for placing a stripe down one side of your page. Make a single tile that's a little wider than the width of the screen by as few pixels high as needed. Place your color and/or texture on it and then save it as a GIF or JPEG. The file will probably look something like Figure 12.8.

Figure 12.8. Note that this image has been cut off in the window. The background color continues across the entire screen.

When you place this file as a background, it is tiled vertically but not horizontally because it's already as wide as the screen. It's a good idea to check this in a high-resolution monitor setting to be sure you haven't left room for the stripe to tile again. You end up with a nice stripe, as wide as you care to make it, in the color and texture of your choice. It makes a good accent for a plain page, or you could design a wide stripe to set off a column of buttons. There's no limit except your own imagination.

Web graphics can also be sliceddivided into subsectionsand with ImageReady you can create special effects associated with the image. The image can change appearance depending on the mouse's location or behavior, and you can even create animations that play in the web browser window. You can hide one image behind another and have the second one appear gradually as you click on, or drag the mouse over, slices of the top image, hiding the top slices or toggling them behind the other image. To make a slice, use the Slice tool and drag the box over part of the picture. This action actually makes two slices: the one you defined and the rest of the image. Make as many slices as you need. Slices are automatically numbered as they are created.

When working with Adobe GoLive, you can add a rollover as a component by using Adobe's Smart Objects technology. GoLive generates the HTML automatically.

Building Animations

GIF animations are commonplace on web pages, and you'll probably see dogs wagging their tails endlessly, cats catching mice, leaves falling, balls bouncing…. It's enough to make you dizzy. Photoshop and ImageReady can create the graphic elements and add motion to any of these goodies. If they aren't too big and flashy, GIF animations can be very effective.

Animation is done, as it was 50 years ago, in layers. The difference is that for a GIF animation, each layer must be a complete frame with the entire picture in it. In the old days, you could put the body on one layer and the arms, which moved, on a different layer. Now, because the animation is accomplished by scrolling through the layers, everything needs to be kept together or you see an armless torso, followed by waving arms.

Figure 12.9 is an animation model, a Japanese Happy Cat. This one, in black, represents good health. You make him wave at you in a very simple three-step animation. I'm working on this animation in ImageReady, but you could also do it in Photoshop CS2, as of this revision.

Figure 12.9. This cat will soon wave his paw.

The first step is to open a new image file in Photoshop and then to copy the cat into it on a separate layer.

Next, duplicate the layer twice, so there are three layers in all. The bottom layer is the resting state for the animation, so you don't need to do anything to it. It will be the first frame in the animation. The second layer is the transition state, and the third layer is the final state. You can insert as many transition layers as you need. More steps give you smoother animation, and a much larger file. Unfortunately, it might not play well on some computers, or if the Internet is running slowly, as it sometimes does.

Now, move to the top layer and make the changes necessary to take the picture to the final state. In Figure 12.10, you can see the cat's paw moved to a fully extended wave position. To do so, cut it loose with the Lasso, rotate it, and fill in the gaps in black and pink with a small brush.

Figure 12.10. The waving cat.

Next, move to the middle layer. Because this is a small animation and the cat's paw has to move only a short distance, one middle step is enough. If the paw had farther to travel, you could put in more transitional steps, but the animation looks fine with just one step here. Cut the paw loose and rotate it halfway between where it is on the first and third layers. Again, use a small brush to fill in any gaps. Now your animation should look like Figure 12.11. The "art" part of the job is nearly complete.

Figure 12.11. Midpoint of the wave.

Finally, copy the middle layer and add it to the top of the stack; then copy the background layer and add it to the top so the cat's paw ends up where it started. You now have five layers.

In ImageReady, open the Animation palette. Open the pop-up menu and choose Make Frames from Layers. You see the frames in the Animation window and clicking the forward arrow runs through them so you can preview the animation.

From the pop-up menu at the bottom of the Animation palette, choose Forever or Other if you want the animation to go continuously. Otherwise, it runs its steps once and stops. If you choose Other, you can specify a number of repeatsusually 10 is plenty. If it seems to run too fast, you can add a delay between each frame in the animation by setting the Frame Delay value. Figure 12.12 shows the final settings for the animation. You don't need very many colors for this particular example, so you can make it a 16-color GIF with no noticeable change.

Figure 12.12. Here are the five frames in order.

Choose Save Optimized from the File menu to save your work as an animated GIF. Choose HTML and Images to let ImageReady write the code and optimize the individual frames. Then add it to the source code for the web page and place the frames in the image folder. Check it out in your regular browser, and thenif possiblein other browsers to make sure it works for all.

Creating Slices

Slices are not the easiest concept to grasp, but they can save you a lot of file space, after you determine what they are about. Recall that slices divide an image into smaller files. Each slice is an independent file, containing its own optimization settings, color palettes, URLs, rollover effects, and animation effects. Slices can give you increased image quality when you are working with documents that contain more than one kind of image or text and images. They can make pages seem to load faster because each slice becomes visible as soon as it's loaded, giving the viewer something to look at while the rest of the image loads. Slices also allow you to create image maps that do useful things when you click part of an image. They can take you to new pages, show an enlarged view of the slice, or anything else you care to program them to do.

Slices are assembled in an HTML table in the document's HTML file. By default, the document starts with one slice that comprises the entire document. You can then create more slices in the document. Both Photoshop and ImageReady automatically make additional slices to complete the full table in the HTML file.

Slices are created by dragging the Slice tool, which looks like a drawing of an X-Acto knife. Select it from the ImageReady toolbox or the Photoshop toolbox, or press the K key to activate it. Drag a selection box across the area you are slicing. If you make a slice across the middle of an image, by default, you have defined three slices: the slice itself and one above and one below where you have sliced. Slices that you create are called user-slices. Slices that Photoshop generates are called auto-slices. If you place a slice across the middle of a picture, Photoshop places auto-slices above and below it. Slices can be vertical as well as horizontal. Subslices are created when you overlap two or more user-slices. Figure 12.13 shows a sliced image.

Figure 12.13. The numbers in the upper-left corner of the sections are their slice numbers (slices 3 and 5 are hidden under slices 4 and 6).

Slice Options

Slices options (see Figure 12.14) are necessary only when you're working with a sliced image. They determine how the slice-related information is recorded in the HTML file. To open this pane, you can select Slices from the Photoshop Save for Web dialog box's Preset pane pop-up menu. Click the Next button to reach the Slices pane. In ImageReady, you can select Slices directly from the File, Output Settings submenu.

Figure 12.14. These options do not pertain to unsliced images.

The Save for Web dialog and ImageReady offer these options for slice-related HTML:

  • Generate Table: When you save a sliced image in Photoshop or ImageReady, you create a separate image from each slicethe slices are saved as individual files. The web browser requires HTML to tell it how to arrange those slices back into a cohesive whole, the original image. The browser uses the HTML to reassemble the jigsaw puzzle. You can generate an HTML table within which the slices are placed by using these options:

    • Empty Cells: Empty cells, used to ensure correct table spacing, can be recorded as single-pixel GIF images, with their width and height (W&H) recorded with the <IMG> (image) tag or the <TD> (table data) tag. The NoWrap option creates a nonstandard attribute and records W&H in the table data tag.

    • TD W&H: You can choose to include the width and height for all table data, never include the width and height, or let Save for Web determine when it is necessary. The Auto option is recommended.

      For in-depth information on creating and editing code for web pages, see Special Edition Using HTML and XHTML by Molly Holzschlag (Que, ISBN 0-7897-2731-5).

    • Spacer Cells: A row or column of empty cells can be generated to ensure that a table displays properly in the web browser window. Spacer cells are particularly important when slice boundaries don't align. Save for Web can generate the extra cells automatically, always, or never, and you can also choose to have the spacer cells only at the bottom of the table. Auto generation is recommended.

  • Generate CSS: With this function, you can create Cascading Style Sheets (CSS). The slices can be identified by a unique ID, in the <DIV> tag as an inline style, or by class.

  • Default Slice Naming: Save for Web offers six fields for choosing names for slices. You choose the name options from pop-up menus for each field. A generic sample name is generated based on your choices and is displayed below the six fields. The available options are shown in Figure 12.15.

    Figure 12.15. The slice names must be unique, so you must include at least one variable that changes from slice to slice.

The Output Settings dialog has five panes (see Figure 12.16). In addition, you can select from any available saved setting configurations from the pop-up menu at the top of the dialog.

Figure 12.16. These options determine the formatting of the HTML file generated by the Save for Web command.

HTML Options

The HTML pane of the Output Settings dialog governs how HTML is written (see Figure 12.16).

The Save for Web dialog offers these HTML options:

  • Output XHTML: Generate XHTML 1.0 Transitionalcompliant code when selected.

  • Tags Case: Create the HTML tags in all uppercase, uppercase and lowercase, or all lowercase. Web browsers can read tags in any stylethis option is primarily for your convenience. If you edit or review the HTML, you might prefer to have the tags stand out by putting them in uppercase.

  • Attribute Case: Record attributes in all uppercase, uppercase and lowercase, or all lowercase. Again, it makes no difference to the web browser.

  • Indent: Format the HTML to indent using tabs or a specified number of spaces. If you edit the HTML in a word-processing program, either is appropriate. However, some text editors don't recognize tabs, so specifying a number of spaces better preserves the indenting.

  • Line Endings: Macintosh uses carriage returns at the end of lines, Unix uses line feeds, and Windows uses both. If you know what platform will be hosting your website, choose that platform from the pop-up menu. Generally speaking, however, there is no need for concern.

  • Encoding: Select a customized text-encoding option. Options include ISO-8859-1, Mac OS Roman, and Unicode.

  • Include Comments: Add explanatory comments to the HTML. Comments do not appear in the web page but rather are used by web design programs and can be used by ImageReady when updating HTML.

  • Always Quote Attributes: Strict compliance with HTML standards requires that tag attributes be enclosed in quotation marks. The earliest web browsers also require the quotes. However, you should leave this option unchecked to allow the Save for Web dialog to include quotes only when necessary.

  • Always Add Alt Attribute: Images are identified in HTML by the <IMG> tag. When a browser can't display the image, it looks for the ALT attribute and displays any text entered there, along with a symbol indicating that the image wasn't found. Without the ALT attribute, nothing is displayed. Save for Web includes the ALT attribute and quotation marks; you open the HTML file in a web design program, word processor, or text editor to add a message within the quotes. If you don't add any message, just the symbol is displayed. ALT attributes maintain links, even if the image is missing. Be aware that ALT attributes are required for compliance with U.S. government accessibility standards.

  • Close All Tags: If the HTML will be incorporated into an XHTML page, select this check box. It ensures that all tags in the HTML have closing tags to match.

  • Include Zero Margins on Body Tag: Margins are used by the web browser much as they are used in a word-processing document to offset the document. When you include the margins, you can later simply change the zeros to your desired margin by editing the HTML document.

Special Edition Using Adobe Creative Suite 2
Special Edition Using Adobe Creative Suite 2
ISBN: 0789733676
EAN: 2147483647
Year: 2005
Pages: 426
Authors: Michael Smick

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: