PREPARING BACKGROUNDS
| 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 ImagesIf 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 StripeHere'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 AnimationsGIF 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 SlicesSlices 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 OptionsSlices 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:
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 OptionsThe 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:
|
EAN: 2147483647
Pages: 426