Making Multiple Web Graphics

This project uses two timesaving automation techniques. Break a file into individual graphics with Photoshop's Crop and Straighten Photos command. Then optimize those graphics all at once as Web-ready GIFs using an ImageReady droplet.

1.	Prepare a Single Image Open a file in Photoshop that has several graphics on a single layer. In the steps that follow you'll automatically separate these graphics into individual files and optimize them all as GIFs. Start by changing the single Background layer into a regular layer so you can make some of its pixels transparent. Double-click the Background layer A, and click OK in the New Layer dialog box to convert this layer to a regular layer. Select the Magic Wand tool in the toolbox. Control/right-click the tool icon at the far left of the Options bar and choose Reset Tool B to return the tool to its default settings. Click on the white background to select everything except the graphics C, and press Command/Ctrl-X to delete the selected area. The checkerboard represents transparency D. Press Command/Ctrl-D to deselect. TIP Background Layer Restrictions. A Background layer cannot have transparent pixels. Erasing on a Background layer displays the Background color from the toolbox. You can't move the layer's content or drag another layer beneath it. So you'll often want to change a Background layer to a regular layer.
2.	Crop the Image Automatically Next you'll separate the graphics in this image into individual files. You could do this with the slice tool. But there's a faster way. You'll use Photoshop's Crop and Straighten Photos command, which was designed to allow photos to be scanned together and then quickly separated and straightened. This feature works just as well on graphics like these that were created in a drawing program on a single layer. Choose File>Automate>Crop and Straighten Photos from Photoshop's menu bar. Wait just a second, and you'll have five separate images, each closely cropped to one of the graphics. Close the original image without saving. Save each of the individual graphics into one destination folder. Leave Format/Save as Type set to TIFF, and click OK in the TIFF Options dialog box to accept its defaults. Close all but one of the individual images, which you'll use to create an optimization droplet. TIP Clean Up the Crop. Sometimes the Crop and Straighten Photos command doesn't do a perfect job of cropping the individual images it produces. Try using the Crop tool or other editing tools on the individual images to tidy up the edges of the files.
3.	Jump to ImageReady With one of the individual graphics open, click the Edit in ImageReady button at the bottom of the Photoshop toolbox. That image opens in ImageReady, ready for further editing there. Set Up an Optimizing Workspace In ImageReady, click the 2-Up tab in the document window to see and compare the original graphic and a preview of the optimized graphic A. Open the Optimize palette (Window>Optimize). Click the double-pointed arrow on the Optimize tab to see all the palette's settings B. Click the Color Table icon on the Optimize palette C to open the Color Table palette D. Optimize the Graphic as a GIF Click in the preview pane of the document window A and choose the following settings in the Optimize palette B. Format: GIF Reduction: Selective Colors: 32 (This setting has the most impact on file size and appearance. These colors are visible in the Color Table palette C) Dither Method: No Dither Transparency: Checked (to maintain the transparent background pixels) Matte: None (This creates a hard-edged graphic with no halo; but if you know the color of the page background on which you plan to place these graphics, choose that color) Lossy: 10 (to further reduce file size) Add Metadata: Unchecked (to avoid inflating file size) The resulting GIF looks like the original image and is small in file size.
6.	Create a Droplet Creating a droplet is as easy as clicking the Droplet icon on the Optimize palette A and dragging to your desktop. The droplet appears on your desktop automatically named with the optimization settings B. INSIGHT What is a Droplet? A droplet is a small application that you can run on a single file or on a collection of files. A droplet generated from ImageReady's Optimize palette is used to optimize other files with the same settings. A droplet can also be created from ImageReady's or Photoshop's Actions palette and used to run that action on multiple files. Alternatively, if you want the chance to choose the name or location of the droplet, click the side arrow on the Optimize palette and choose Create Droplet. In the Save Optimized Settings as Droplet dialog box, give the droplet a name and location, and click OK. Close the graphic without saving.
7.	Edit the Droplet The droplet will save the optimized GIFs to the same folder as the original individual TIFF files by default. To save the optimized GIFs to a separate folder, double-click the droplet to open a droplet window A. In the droplet window, double-click Batch Options to open the Batch Options dialog box. In the Batch Options dialog box, leave Optimized checked, click the In button, and choose Specific Folder B. Then click the Choose button and navigate to a separate folder in which you want to save each of the optimized GIFs C. It's a good idea to also save a copy of the original individual graphics, containing the optimization settings you added. If you need to make a change to the files in the future, these will be the files to use. ImageReady will save a copy of each as a PSD file in the same folder as the original TIFFs if you check Original (same name and folder) in the Batch Options dialog box) D. Click OK to close the Batch Options dialog box. Then close the droplet window and click Save at the prompt to save your batch processing changes along with the droplet.
8.	Apply the Droplet Now you'll use the droplet to automatically optimize all the individual graphics you created earlier. Click and drag the folder that contains those graphics on top of the droplet on your desktop A. You can see the progress of the files as they process in the Batch Progress window B. View the Results Open the folder to which you saved the GIFs on your hard drive. You'll see five optimized GIFs ready to be brought into a Web-building program for inclusion on a Web page.

In this tutorial:

1. Automation
2. Batch Processing Photo Thumbnails
3. Making the Most of Actions
4. Making Multiple Web Graphics
5. Demystifying Droplets
6. Preparing Photos for Web with Conditional Actions
7. Design Multiple Pages in a Single File
8. Linking HTML Pages from Layer Comps
9. Outputting Multiple Linked Web Pages
10. Creating Dynamic Flash Web Banners
11. Creating and Importing External Data Sets