How to Use Photoshop for the Web | 3 | WebReference

How to Use Photoshop for the Web | 3

How to Use Photoshop for the Web

Building Animations

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

Today's animation is done, as it was 50 years ago, using layers. Figure 24.10 is my animation model, a Japanese Happy Cat. This one, in black, represents good health. I'm going to make him wave at you in a very simple three-step animation.

The first step is to copy the cat into a new image file in Photoshop. (If you want to work along, the cat is in the collection of images that you can download from this book's companion website. See the Introduction if you've forgotten where the downloads are.)

Duplicate the layer twice, so you have three 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 our 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 will give you smoother animation, and a much larger file. Unfortunately, it might not play well on some computers, or if Internet traffic is tied up, as it sometimes is.

Move to the top layer and make the changes necessary to take the picture to the final state. In Figure 24.11, you can see that I have moved the cat's paw to a fully extended wave position. To do so, I cut it loose with the Lasso, rotated it, and filled in the gaps in black and pink with a small brush.

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, we could put in more transitional steps, but the animation will look 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 24.12. The "art" part of the job is nearly complete.

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

Now, open the Animation palette. Open the pop-up menu and choose Make Frames from Layers. You will see the frames in the Animation window, and clicking the forward arrow will run 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 it to go continuously. Otherwise, it will run its steps once and stop. If you choose Other, you can specify a number of repeats. If it seems to run too fast, you can add a delay between each frame in the animation by setting the Frame Delay value. Then save it as a GIF file with animation, either using Save for Web or by switching to ImageReady and using Save Optimized. Figure 24.13 shows the final settings for the animation as seen in ImageReady. You don't need very many colors for this particular example, so you can make it a 16-color GIF with no noticeable change.

When saving, choose HTML and Images to let ImageReady write the code and optimize the individual frames. Then copy that HTML code into the Web page file and place the frames in the image folder. Check the animation out in your regular browser, and then if possible in other browsers to make sure it works for all.

If you want to get serious about web page design and using HTML, run to your local bookstore or computer store and look for The Web Wizard's Guide to Photoshop. It's a great source for tips and tricks to spiff up your website.

Web Photo Gallery

Want to put your art on a web page? Sure. So do I, but those files can be huge. Wouldn't it be better to put up thumbnail images, and then let interested viewers click those thumbnails to see the large versions? Of course it would. But creating all those thumbnails, and then making the page and linking the images to it—well, that sounds like hard work.

Fortunately, there's a better way. Photoshop's Web Photo Gallery does the job for you. Layouts range from a simple page of thumbnails, each of which you can click to open a new window with a full-size view; table format, again with thumbnails; scrolling frames, to variations with patterned and colored backgrounds, including the familiar Microsoft navy and gray. You can also choose your own colors for background and type as well as for links. Last, there is a slide show format that changes images every 10 seconds. Figure 24.14 shows the Web Photo Gallery dialog box with the styles showing.

Try it Yourself

Making a Gallery Page

Let's practice making a gallery page:

1. Before you begin, make sure that all the images you want to include are in one folder. If you are planning to use the image filenames as titles, check the spellings and remove file extensions. Then choose File>Automate>Web Photo Gallery.

2. Styles, the first pop-up menu, lets you choose how the pictures will be displayed. Select one of these as described previously. Enter your email address if you want it to appear as an information contact.

3. In the Source Images section of the dialog box, Click Browse (Windows) or Choose (Mac OS) to locate your folder of pictures, and choose a destination where you'll save the web page. The Options section lets you set up a title banner for your work, determine the sizes of thumbnails and images, and set text and background colors.

4. Choose Options>Banner and enter a name for your page, as well as your own name if you want. Choose a font and size to display your type. There are only four fonts shown, all system fonts for Windows or Mac. If you try to hack the HTML code and put in your own fonts, chances are good that many of your website visitors won't have them and will see the type however it defaults. Bottom line: Don't bother.

5. Choose Large Images from the Options pop-up menu and set a size and quality for the large display images. Add a border if you want. Decide what information must be given.

6. Choose Thumbnails (see Figure 24.15) from the Options menu and choose whether to use no captions, use the filenames as captions, or add captions in the File Info dialog box for each image. You can also choose a font and size for the captions, and decide whether they'll have borders. If you're using a table or another simple layout, you might select the number of photos in rows and columns.

7. Choose Options>Custom Colors and choose appropriate colors for your page's background, banner, headline, and links.

8. Options>Security lets you place a copyright or other message on each picture. When everything's ready, click OK.

Photoshop will assemble the page according to your specifications. When it's complete, it will automatically open in your default browser. Figure 24.16 shows the web page I set up to show off my husband's newly rearranged home office.

Photoshop lists the images alphabetically. If you aren't happy with the type size or font, the background color, or any of the other settings you've made, now is the time to go back and change them. The File Info dialog box (choose File>File Info) holds captions, titles, and other important data. Once you've made your changes, run Web Photo Gallery again to update your pages.

Created: March 27, 2003
Revised: January 09, 2005