Optimizing Images in ImageReady


Optimizing images in ImageReady is very similar to using the Save For Web feature in Photoshop. ImageReady s optimization capabilities include the following:

Live Preview Whenever you are working on a file in ImageReady, you can automatically see changes based on file type and optimization choices (see Figure 25.26).

click to expand
Figure 25.26: ImageReady s live preview enables you to see changes in a file as you make them. The Optimize palette enables you to format the image to your chosen specifications.

Choice of File Types ImageReady supports GIF, JPEG, PNG, WBMP, and PSD. Depending upon the file and your needs, you can adjust accordingly .

User-Level Control

Although you don t really need a working knowledge of optimization to use ImageReady, you will no doubt be empowered by understanding the basic rules of thumb when it comes to optimization:

  • Use GIFs when working with line art, flat color , few colors, or with animations. Cartoons and text usually work best as GIFs.

  • Use JPEGs for photographs and for art with many colors, shadows, or light gradations.

  • PNGs are useful for broad application, but they are not supported by older browsers.

  • SWFs are good for all kinds of animation, but they require a special browser plug-in and are not supported by older browsers.

Working with GIFs in ImageReady

The Optimize palette displays options for saving images as GIFs, JPEGs, or PNGs.

  1. In ImageReady, open the file mallard.psd in the ch25 folder on the CD.

  2. Click the 4-Up tab to display four versions of the image. Click the top-right image. Choose Window Optimized to display the Optimize palette.

  3. Choose GIF 128 Dithered from the Presets. Compare the optimized version to the original. The original s size is approximately 558 KB, compared to the optimized version of about 36 KB (see Figure 25.27). In this particular image, there is no great variation in quality, but the file size has been substantially reduced.

    click to expand
    Figure 25.27: The original mallard is at the upper left at 558 KB. The second image, at the upper right, displays the 128-color GIF at 36.63 KB. The image at the lower left is a 32-color GIF and is only 20.85 KB, and at the lower right is a 256-color PNG-8 with a file size of 41.74 KB.

  4. Click on of the lower images. Choose GIF 64 Dithered from the Presets and reduce the number of colors to 2. Typically, this will be too few colors for most images, but it s a good idea to get a feel for how the image would look at the lowest possible file size of under 3 KB.

  5. On the fourth image, bring the color number to 32, which gives you a great look but even better compression at about 30 KB than you had at the auto setting.

  6. Choose File Save Optimized As to save the GIF.

You can now make additional selections for your GIF, such as interlacing or transparency, by using the Optimize palette settings. Interlacing enables the GIF image to appear progressively on the page, and transparency is discussed later, in the Matting section.

Preparing JPEGs in ImageReady

For photographs and any image with significant amounts of gradations in light or shadow, JPEG is the file format of choice for the best look and compression. You can optimize an image as a JPEG to produce the best results for your photographs.

Follow these steps to prepare a JPEG in ImageReady:

  1. In ImageReady, open the file Liberty.psd in the ch25 folder on the CD.

    start sidebar
    GETTING INFORMATION ABOUT FILE SIZES

    Information about the file size of your images is available in the Save For Web option in Photoshop or the image window in ImageReady. You can display different information in each of these windows :

    • Select one of the tabs in the image window. Choose one of the options: Original, Optimized, 2-Up, or 4-Up. I like to set this option to 2-Up, which gives a comparison between the original file size and current file specifications.

    • In Photoshop, the information is at the bottom of each image. By clicking the arrow at the upper-right of the window, you can choose a baud rate at which to recalculate the information.

    • In ImageReady, choose information from the arrows at the bottom of the list. The first arrow indicates the size in which you are viewing the image. The second two arrows offer additional information, including the image s type, file size, and the possible speeds at which it will be downloaded.

    end sidebar
     
  2. When the file is open, go to the Optimize palette and choose JPEG from the File Format pull-down list.

  3. Click the 2-Up tab on the image.

  4. View the image by using Maximum, Very High, High, Medium, and Low JPEG settings in the Optimize palette. Try to find the setting that gives you the best quality and compression without causing artifacts on the image (see Figure 25.28).

    click to expand
    Figure 25.28: The extremes of JPEG settings. Notice the deterioration and artifacts in the image on the right, which is set to JPEG Low to produce a file size of only 12.85 KB, but at the expense of image quality.

    You can make further, custom adjustments by using the Quality slider bar. For example, if the quality at the Medium setting (30) is fine, but the Low setting (10) is showing artifacts, try moving the slider to a setting of 20 and seeing how the image s look and size add up.

  5. Choose File Save Optimized. Name your file. The Format pop-up list provides the following options:

    • HTML Only saves an HTML file with the images written into the code.

    • HTML And Images saves an HTML file with the images written into the code and a separate folder of the image or slices.

    • Images Only saves only the image or slices.

  6. Choose HTML And Images to create a document and files that are Web-ready. ImageReady will generate the image in a separate folder as well as the HTML file. You can now view your HTML file in the browser of your choice.

These kinds of decisions are the heart and soul of image optimization for the Web. It s always a balance of good looks and quick load times, and always based within the context of the page with which you are working.

Note  

To progressively render a JPEG, check the Progressive box. This enables supporting browsers to display the image incrementally.

Creating a Transparency Mask in Photoshop

If you d like an image to appear seamless against a patterned or solid background, you need to either make an image transparent or matte the image on the background color. This technique is especially important to use whenever your image isn t a rectangle.

The streamlined features in File Save For Web have replaced the GIF89a Export of former versions as the method of creating transparent GIF images. To create transparency on an optimized Web image, the image must be on a layer surrounded by transparency.

Let s knock out the background of an image:

  1. If Liberty.psd is still open in ImageReady, click the Edit in Photoshop button. Otherwise in Photoshop, open the Liberty.psd file in the ch25 folder on the CD.

  2. Choose the Magic Wand tool. In the Options bar, set the tolerance to 32 and clear the Contiguous box. Click on the blue area surrounding the Statue of Liberty.

  3. Choose Select Inverse to select the statue.

  4. Choose Layer New Layer Via Copy to isolate a copy of the statue on a separate layer.

  5. Target the new layer. Click the Background s visibility indicator so that it is not selected.

  6. Choose File Save For Web (see Figure 25.29). Choose GIF from the pop-up list and enter 16 for the number of colors. Notice that the Transparency option is active and that the image is displayed on a checkerboard, indicating transparency.

    click to expand
    Figure 25.29: Choosing Save For Web and GIF with transparency

  7. Choose 2-Up.

  8. Optimize the image as you did the opaque GIF. Try different settings and compare the results.

  9. Click the best image and click OK. Name the image and choose a location in the Save File dialog box. The image should look like Figure 25.30 on the browser.

    click to expand
    Figure 25.30: The transparent GIF displayed on the browser with the clouds background tile

Note  

Using the Magic Wand to select an object from its background, as you did in this example, leaves a ˜fringe of pixels tinted the background color. Select Layer Matting Defringe to recolor those fringe pixels with hues nearby pixels of the selected element. In this case, replacing sky blue with the green of Liberty s patina.

Matting

Browsers support either opacity or transparency. Unlike Photoshop, they do not display semitransparent layers . The idea of matting is to blend the edges of a shape with the background design of a page to simulate semitransparency and smooth out some of the rough edges. Transparency in Photoshop is layer-based ”in other words, the transparent areas that surround an area of a layer will be transparent in the browser. If you want an image to float on a patterned background, matting can help soften those edges. To apply matting to an image, follow these steps:

  1. In Photoshop, open the file Tile.psd in the ch25 folder on the CD.

  2. Choose the Eyedropper tool and sample a midtone green from the image. Click the foreground color swatch in the Tool palette to display the Color Picker. Check the Only Web Colors option. Write down the hexadecimal number of the color.

  3. Choose File New (see the dialog box in Figure 25.31). Name the file emerald_forest . Set the width to 468 and the height to 60 . Set the resolution to 72 pixels per inch, the mode to RGB Color 8-bit, and the contents to Transparent. Save the file in Photoshop format.

    click to expand
    Figure 25.31: The New dialog box

  4. Choose the Type tool. Type the words Emerald Forest . I used Herculanum Bold, 64 point, but you can use any typeface you please .

  5. Color the type yellow and add a Bevel and Emboss style to the text (see Figure 25.32).

    click to expand
    Figure 25.32: The Emerald Forest text with the Bevel and Emboss layer style applied

  6. Choose File Save For Web. From the Settings pop-up list, choose GIF 32 Dithered, as in Figure 25.33.

    click to expand
    Figure 25.33: The Save For Web settings

  7. Click on the matting swatch. Choose Other to bring up the Color Picker. Check the Web Colors Only option. Enter the hexadecimal value you recorded. This will place a green mat around the type to blend it into the pattern tile on the Web page.

  8. Click Save. You can now display the image in the browser against the patterned background (as in Figure 25.34).

    click to expand
    Figure 25.34: The Emerald Forest text displayed without matting (above). The Emerald Forest text displayed with matting on a patterned background (below).

Note  

If you frequently create images of a particular size that don t appear among the new file presets (for example, a 468 —60 Web banner), create a new preset. Click the Save Preset option to save your current settings. They ll appear as a file preset from now on.

Slicing Images in Photoshop and ImageReady

A group of small images downloads more efficiently in a browser than one large image. In Photoshop or ImageReady, you slice a Web image in order to divide it into smaller files to accelerate download time or to assign different compression or file formats to various parts of an image, particularly animations. Slicing is the process of cutting an image into pieces, saving the individual parts as image files, and writing an HTML document that reassembles the slices on-screen.

Note  

Slices can butt up only against each other or against the top, bottom, or sides of the image. You cannot cut a slice out of the center of the image unless it is adjacent to other slices.

You can slice the image with the Slice tool in either program. To slice an image, choose the Slice tool from the Tool palette, click the mouse, and drag the cursor where you want the slice.

The individual slices are saved as separate files, and an HTML document with table code is written that reassembles them on the browser. You can select a slice with the Slice Select tool either from the Tool palette in Photoshop and ImageReady or within the Save For Web dialog box in Photoshop. The slice can be repositioned, or different options can be designated for the slice.

By default, when you choose the Slice tool, you see that the image is really one slice. The number 1 appears in the upper-left corner of the slice. Each time you create a slice, a new sequential number is assigned to it (see Figure 25.35).

click to expand
Figure 25.35: The image before slicing, with the guides in place

After you re satisfied with your slice arrangement, save the image by using the Save For Web option. You can select an individual slice by choosing the Slice Select tool. If desired, you can optimize the slices individually or, if no slices are selected, as a group.

Another method of creating slices is to set guides and convert them:

  1. In ImageReady, open the image Bio_Web_Site.psd in the ch25 folder on the CD.

  2. Choose View Rulers.

  3. From the horizontal and vertical rulers, drag a guide along the design to isolate the sidebar and other important areas of the image. In this example, the guides isolate the photo of the orangutan and areas that are naturally suited to being separated into rectangles.

  4. Under Slices, choose Create Slices From Guides.

  5. Choose File Save Optimized. When the Save As dialog box appears, select HTML And Images from the Save As Type drop-down list, and All Slices from the Slice list. Click Save. Your image should now look like Figure 25.36.

    click to expand
    Figure 25.36: After slicing, Photoshop and ImageReady number the slices.

You can make a slice into a link to connect it to another Web page or URL. Click the slice you want to make into a link. Activate the Slice palette (choose Window Slice or, if the palette is visible, click the Slice tab). Enter the Name of the slice and the URL.

ImageReady saves the separate images, as well as the HTML code necessary, that are necessary to lay them out properly.

To view the results, open the HTML file in your browser, and you ll see that ImageReady maintains the integrity of your design while optimizing the sliced images in the best possible fashion.

Creating Tables in ImageReady

New  

In ImageReady CS, you can create tables within slices. A table basically slices up one or more slices into smaller subslices. Follow these steps:

  1. In ImageReady, open the image Bio_Web_Site.psd in the ch25 folder on the CD, if the file is not already open.

  2. Using one of the methods described in the preceding exercise, divide the image into at least two slices.

  3. Select one of the slices, either by clicking it with the Slice Select tool or by clicking its thumbnail in the Web Content palette.

  4. From the list, choose Slices Group Slices Into Table. Notice that a new, green table icon appears in the upper-right corner of the slice, indicating that this is a table. You can also create a table from a selected slice by changing its Type from Image to Table in the Slice palette (see Figure 25.37), or by clicking the Group Slice Into Table button at the bottom of the Web Content palette.

    click to expand
    Figure 25.37: Converting an image slice into a table

  5. If it s not already open, open the Web Content palette by choosing Window Web Content.

  6. Under Slices in the Web Content palette, find the table you created. If you cannot see the subslice, expand the table by clicking the triangle to the left of the table s thumbnail.

  7. Right-click the subslice in the Web Content palette and choose Divide Slice from the pop-up list (see Figure 25.38).

    click to expand
    Figure 25.38: Using the pop-up list from the Web Content palette to divide a slice

  8. In the Divide Slice dialog box, divide the slice in two both horizontally and vertically (see Figure 25.39). The original slice has now been subdivided into four slices. This feature is useful if you have one slice containing multiple images or graphics that you might want to maintain individually (see Figure 25.40).

    click to expand
    Figure 25.39: Dividing the slice into four equal subslices

    click to expand
    Figure 25.40: Use tables and subslices where your document has multiple individual images, closely grouped.

Subslices within tables act just like ordinary slices. You can create and modify them with the same tools and techniques, and use them as links to URLs.

You can group multiple slices into a single table by Shift-clicking the slices with the Slice Select tool or Shift-clicking the slices in the Web Content palette, and then choosing Slices Group Slices Into Table from the list. Tables cannot be nested; you cannot create a table inside of another table.




Photoshop CS Savvy
Photoshop CS Savvy
ISBN: 078214280X
EAN: 2147483647
Year: 2004
Pages: 355

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net