Chapter 9: Preparing Your Artfor the Web


This chapter works with Photoshop’s and ImageReady’s tools for creating and editing images for the World Wide Web. You will learn how to optimize images and to create image maps and apply rollover effects using Photoshop and ImageReady.

Optimize Images for the Web

Images for use on the Web need to be efficient—the file size needs to be as small as possible without a noticeable loss in image quality. Smaller size means the images are transmitted and displayed faster, reducing the time it takes a web page to load. Three factors determine the file size of an image (for a set width and height): the file format (usually GIF, JPEG, or PNG), the number of colors (determined, in part, by the file format chosen), and the resolution of the image (in pixels per inch). Of the file types, GIF and JPEG formats are the most common. PNG is not as widely supported, though newer browsers do support it. Here are some characteristics of these common file types:

  • GIF (Graphic Interchange Format) images use an indexed palette of a maximum of 256 colors. Images with large areas of solid colors and sharp detail work best as GIFs. GIF also supports transparency, allowing the area under the transparent portions of the GIF to be visible.

  • JPEG (Joint Photographic Experts Group) format compresses an image to reduce the file size. This is a lossy system, one where colors are removed from the image in compression. JPEG supports 24-bit color, which yields approximately 16 million colors.

  • PNG (Portable Network Graphic Specifications) comes in two flavors: PNG-8, which is similar to GIF, and PNG-24, which is similar to JPEG but uses lossless compression (no colors are removed).

You set the file type, number of colors, and resolution when you save images.

Tip

The Save For Web dialog box automatically converts the image resolution to 72 pixels per inch, long considered the highest resolution needed for web work. If you wish to use a different image resolution, you must use Save As instead of Save For Web.

Optimize Using the Save For Web Dialog Box

Photoshop gives you two methods for saving images for the Web. The first is to use the Save As option in the File menu, selecting either the CompuServe GIF or JPEG formats. (This method is not available in ImageReady.) A more complete set of options is available using the Save For Web dialog box.

  1. With an image open in Photoshop, click File | Save For Web. The Save For Web dialog box will open, as shown in Figure 9-1.

    click to expand
    Figure 9-1: This Save For Web dialog box shows the 2-Up tab selected.

  2. Depending on your image type, read one of the following sections to learn how to optimize your image. The optimization options vary by file type.

    Tip

    The display option tabs on the Save For Web dialog box display multiple views of the image so that you can visually judge the effect of your optimization settings. You can display up to four versions of the image at a time.

    Note

    An algorithm is a procedure or a set of steps for performing an action. Photoshop uses algorithms for color reductions and dithering, among other uses.

Optimize a GIF or PNG-8 Image

GIF and PNG-8 images are very similar and use an indexed color palette. The optimization options are shown in Figure 9-2.

click to expand
Figure 9-2: These are the optimization options for GIF and PNG-8 images.

To optimize a GIF or PNG-8 image in Photoshop:

  1. With your image open in Photoshop, click File | Save For Web.

  2. Click the 2-Up tab so that you can see both the original and modified images side-by-side.

  3. Open the Optimized File Format drop-down list, and select GIF or PNG-8.

  4. Select the options you need.

    • Select the color reduction algorithm in the Color Reduction Algorithm drop-down list. See Table 9-1.

    • Select the dither algorithm in the Dither Algorithm drop-down list. See Table 9-2.

    • If you want an area of your GIF or PNG-8 to be transparent, select the Transparency check box.

    • If you are using transparency, select the transparency dither algorithm in the Transparency Dither Algorithm drop-down list.

    • If you want your GIF or PNG-8 image to be interlaced, select the Interlaced check box. Interlace loads the image in several passes rather than a single pass.

    • For GIF images, use the Lossy slider to select the amount of color removal you want. The more colors you remove, the higher the Lossy value and the smaller the file will be.

    • Use the Colors spinner to select the number of colors you want in your GIF or PNG-8 image. Fewer colors mean a smaller file size.

    • Click Matte and select your matte color from the drop-down list. See Table 9-3. The matte color sets the color that transparent pixels will be dithered against. This blends the edges of the transparent pixels with the background.

    • If you’ve selected a matte option, set the amount with the Amount slider.

    • Set the amount of web snap using the Web Snap slider. Web Snap shifts the colors in the image to the closest web-safe color. The higher the value, the more colors will be shifted.

    1. When you’re satisfied with your selections, click Save. The Save Optimized As dialog box opens.

    2. In the Save In drop-down list, select the location for your image, type the file name in the File Name text box, and verify the File Type. Then click Save.

      Table 9-1: Color Reduction Algorithms

      Name

      WHAT IT DOES

      Perceptual

      Creates a palette that gives precedence to colors for which the eye has greater sensitivity.

      Selective

      Favors broad areas of color and the preservation of web-safe colors.

      Adaptive

      Samples and uses the colors in the image rather than creating a full-spectrum palette.

      Restrictive (Web)

      Limits the palette to the 216 web-safe colors.

      Custom

      Allows you to create a custom palette by selecting the colors for the palette from the Color Table dialog box.

      Black & White

      Uses only black and white, which produces an effect similar to the halftones used in newspapers.

      Grayscale

      Uses only shades of gray, including black and white.

      Mac OS

      Uses the default Macintosh 8-bit system palette.

      Windows

      Uses the default Windows 8-bit system palette.

      Table 9-2: Dithering Algorithms

      Name

      What It Does

      Diffusion

      Applies a random pattern across adjacent pixels. You control the amount of dither using the Dither slider. More dither increases the number of colors and the file size.

      Pattern

      Applies a square pattern similar to a halftone.

      Noise

      Applies a random pattern similar to Diffusion without diffusing the pattern across adjacent pixels.

      Table 9-3: Matte Descriptions

      Name

      What It Does

      None

      Makes pixels with more than 50 percent transparency fully transparent and pixels that are 50 percent or less fully opaque.

      Eyedropper color

      Uses the color selected with the Eyedropper Tool.

      Black and White

      Uses black or white, respectively, for the matte color.

      Other

      Allows you to select a color using the Color Picker dialog box.

      Tip

      Not all of Photoshop’s editing options are available in indexed color mode, so it can be advantageous to work in RGB mode and convert the image to indexed color when it is saved. Photoshop will convert the image to indexed color when the image is saved as a GIF or PNG 8.

start sidebar
QuickSteps—Making Part of an Image Transparent

With GIF, PNG-8, and PNG-24 images, you can select a color to be transparent in the final image. This allows you to have images that appear to have irregular borders, among other effects.

Select a Color to Be Transparent

  1. If your image is not in Indexed Color mode, click Image | Mode | Indexed Color. The Indexed Color dialog box opens.

  2. Click Palette and select Custom from the drop-down list. This opens the Color Table dialog box.

    click to expand

  3. If your image is already in Indexed Color mode, click Image | Mode | Color Table to display the Color Table dialog box.

  4. Select the Eyedropper Tool and click the color you want to be transparent.

  5. Click OK to close the Color Table dialog box. If necessary, click OK to close the Indexed Color dialog box.

end sidebar

Optimize a JPEG Image

JPEG files are recommended for photographs and continuous tone images because they support more colors than the GIF format.

  1. With your image open in Photoshop, click File | Save For Web.

  2. Open the Optimized File Format drop-down list, and click JPEG from the drop-down list.

  3. Choose the options you want:

    • Select the degree of compression you want from the Compression drop-down list. Higher compression settings produce fewer colors and smaller images.

    • If you want the image to download in successive passes rather than in one pass, select the Progressive check box.

    • If you want to preserve the ICC profile (the color space) for the image, select the ICC Profile check box.

    • If you want the image optimized, select the Optimized check box. This feature, which is not supported by older browsers, creates a slightly smaller file.

    • If you want to use a compression setting not specified in the Compression Quality drop-down list, use the Quality slider to set the compression amount.

    • Use the Blur slider to set the amount of blur. This applies a Gaussian-type blur (an adjustable hazy effect caused by adding detail to the pixels) to the image and decreases the file size. Recommended values are 0.1 to 0.5.

    • Use the Matte drop-down list to select the matte color. The matte color is the fill color for pixels that were transparent in the original image.

    1. When you’re satisfied with your selections, click Save. The Save Optimized As dialog box opens.

    2. Use the Save In drop-down list to select the location for your image, enter the file name in the File Name text box, and click Save.

start sidebar
QuickSteps—Creating Your Own Optimization Settings

Photoshop has preset optimization settings, which you can add to, for optimizing images. The preset settings (presets) are available in the Saved Sets Of Optimized Settings drop-down list. You can create your own presets by selecting the options in the Save For Web dialog box and saving the configuration. To save your preset:

  1. Open the Optimized File Format drop-down list, click the file format from the drop-down list, and set the properties for the selected file format.

  2. Click the Optimize palette menu, and select Save Settings. The Save Optimization Settings dialog box is displayed.

  3. Type a descriptive name for the optimization settings. The name should clearly describe the settings.

  4. Leave the Save In directory and Save As Type file extension as they are, and click Save.

end sidebar

Optimize a PNG-24 Image

PNG-24 images are similar to JPEG images, but PNG-24, unlike JPEG, uses a lossless compression algorithm. This means that PNG-24 images tend to be larger, but PNG-24 can preserve 256 levels of transparency.

  1. With your image open in Photoshop, click File | Save For Web.

  2. Open the Optimized File Format drop-down list, and click PNG-24.

  3. To preserve any areas of transparency in the image, select the Transparency check box.

    • If you want the image to load in successive passes, select the Interlaced check box.

    • If you haven’t selected the transparency option, open the Matte drop-down list to select a matte color. This color replaces the transparent pixels.

    1. When you’re satisfied with your selections, click Save. The Save Optimized As dialog box opens.

    2. Open the Save In drop-down list, select a location for your image, type the file name in the File Name text box, and click Save.

      Tip

      The Compression drop-down list offers preset compression settings. You can also set the level of compression using the Quality slider. This gives you greater control of the compression level.

Save Optimized Images

Saving optimized images is similar to saving any other images.

  1. Click Save in the Save For Web dialog box. The Save Optimized As dialog box will be displayed.

  2. Open the Save In drop-down list to select a location for the file, and type the file name in the File Name text box.

  3. Open the Save As Type drop-down list, and select the format you want.

  4. Open the Settings drop-down list, and select your output settings. Click Other to view and select additional options.

  5. If there are slices in your image, open the Slices drop-down list, and select an option:

    • All Slices to save all the slices in the image

    • Selected Slices to save only the selected slices

    • All User Slices to save only the user slices in the image

    1. Click Save.

To save an optimized image in ImageReady:

  1. Click File | Save Optimized or Save Optimized As if you wish to preserve the original image.

  2. If you select Save Optimized As, the Save Optimized As dialog box is displayed. Otherwise, the image is simply saved.

  3. Open the Save In drop-down list, select a location for the file, and type the name of the file in the File Name text box.

  4. Open the Settings drop-down list, and select your output settings. Choose Other to specify additional options.

  5. If there are slices in your image, open the Slices drop-down list, and select an option.

  6. Click Save.

    Note

    Dithering is a technique that Photoshop uses to combine pixels of different colors to create new colors that are unavailable in the image or a color table. Dithering is used to prevent banding or to smooth distortions in color blending in images.

Work with Image Maps

Image maps allow you to define one or more areas of an image as web-page hyperlinks. You can make image maps by selecting areas using the Image Map tools (ImageReady only) or by using layers where each layer is a single hyperlink. Image maps can be either client-side or server-side. Client-side image maps are interpreted by the browser (the client), and server-side image maps are interpreted by the server. Client-side image maps are the default in ImageReady and are faster than server-side image maps, since it’s not necessary to contact the server to execute. Server-side image maps do not work with multiple-slice images.

Note

Matte, working the opposite of Transparency, fills transparent pixels with a chosen color to display a solid background, rather than a transparent one.

To create an image map using the Image Map tools:

  1. Open your image in ImageReady, or if it’s open in Photoshop, click the Edit In ImageReady button.

  2. Select the appropriate image map tool in the toolbox.

  3. With the Square or Circle Image Map tools, click to set one corner of the image map area, and drag to the opposite corner. With the Polygon Image Map tool, click to set the start of the image map area, move the pointer to the end of the segment, and click again. Repeat until the desired area is selected.

  4. Click Window | Image Map to open the Image Map palette, and enter a name for the image map in the Name text box.

  5. Open the URL drop-down list, and type the URL for the image map. If you’ve previously entered a URL, it will appear in the drop-down list. The URL can be an absolute reference (including the protocol, such as http, and the domain name) or a relative reference (the page and directory name, if applicable).

  6. Open the Target drop-down list, and if desired, select a target frame. If the page is part of a frameset, this can be the name of one of the frames in the frameset. Select among these options:

    • _blank opens a new browser to display the page.

    • _self displays the page in the same frame as the calling file.

    • _parent displays the page in the current top-level (parent) frame.

    • _top replaces all the current frames with the new page.

    1. Type the alternate text for the image in the Alt text box. The alternate text may be displayed in place of the image or as a tool tip (depending on the user’s browser settings).

    2. Click File | Save Optimized As. The Save Optimized As dialog box is displayed. Open the Save In drop-down list, and select the location for your files.

    3. Open the Save As Type drop-down list, click HTML And Images (*.html). This will save your image and the generated image map HTML code. You can save just the image or just the HTML code by selecting the appropriate option in the Save As Type drop-down list.

    4. If you already have a web page for your image map, select it from the list. If you are creating the web page, enter the name in the File Name text box. Click Save.

    5. To add areas to your image map, use the Image Map tools, and resave your work. Click File | Update HTML to update your HTML code as you work.

      Tip

      Use these three tools to define hotspots (the area in the image that has a hyperlink) in an image:

      • The Rectangle Image Map Tool for defining rectangles and squares.

      • The Circle Image Map Tool for defining ovals and circles.

      • The Polygon Image Map Tool for defining irregular areas.

      Tip

      Using _blank always opens a new browser to display the page. This is useful when you want to keep the browser with your web site open while displaying a page from another web site.

      Tip

      Web accessibility standards require text descriptions for all graphic elements, so providing alternate text for all your graphics is a good habit. Speech software reads these descriptions for users with low vision.

Work with Hexadecimal Values for Color

In web pages and Cascading Style Sheets (CSS), it’s common practice to specify RGB color values in hexadecimal notation. Hexadecimal is a base-16 numbering system, while the decimal system is base 10. The hexadecimal system uses the numbers zero through nine and the letters A through F (#00 to #0F to count from zero to fifteen). Hexadecimal color values are specified in the format #RRGGBB where RR is the value of the red component, GG is the value of the green component, and BB is the value of the blue component. For example, green is #00FF00 in hexadecimal and 0 255 0 in decimal; yellow, #FFFF00 and 255 255 0.

In the Color Picker, shown in Figure 9-3, the selected color values are displayed in both decimal (in the RGB text boxes) and hexadecimal (in the # text box). The hexadecimal value can be copied and pasted into web pages or other documents, such as style sheets.

click to expand
Figure 9-3: Color Picker shows the selected color in RGB and hexadecimal notation.

start sidebar
QuickSteps—Using Layers to Create Image Maps

When you use layers to create an image map, each hotspot is the shape of the content of the layer. If the content changes in size, so does the hotspot. This allows you to create very precise irregular-shaped hotspots that don’t require modification if the image is edited. The Layers palette is used extensively; so if it is not open on the screen, click Window | Layers.

  1. Select the layer to use for the hotspot in the Layers palette.

  2. To create a hotspot from a layer, you:

    • Click Layer | New Layer Based Image Map.

      –Or–

    • Click the Image Map palette menu, and select Promote Layer Based Image Map Area.

  3. Type the URL and other information in the Image Map palette.

    Tip

    To open the Output Settings dialog box from the Save Optimized or Save Optimized As dialog boxes, open the Settings drop-down list, and click Other.

end sidebar

Set Output Options

Use the Output Settings dialog box to set the output options for Photoshop and ImageReady. In ImageReady, you can also apply your saved output settings to other files. In Photoshop, open the Output Settings dialog box from the Save Optimized, Save Optimized As, or the Save For Web dialog boxes. Only the Save For Web dialog box allows you to save and load your settings.

  1. With an image open in Photoshop, click File | Save For Web.

  2. Click Optimize | Edit Output Settings. The Output Settings dialog box is opened.

You can select the different groups of output options from the drop-down list in the upper-left corner. The HTML options are listed in Table 9-4.

  1. Select Saving HTML Files from the drop-down list. The options you may choose to select are:

    • Use Long File Name Extension (.html) uses the HTML extension rather than the shorter HTM extension. In actual use, it makes no difference which is used.

    • Output Multiple HTML Files creates an HTML file for each selected state in rollover images. Whether to use single or multiple output files depends on the action triggered by each state.

    • HTML File Naming offers a number of options through drop-down lists for automatically generating file names when Output Multiple HTML Files is selected.

      click to expand

    1. Select Slices from the drop-down list. Select an option:

      • Generate Table creates an HTML table for displaying the slices.

      • Empty Cells sets the rules for how empty table cells are generated: GIF, IMG W&H (GIF spacer image, using the Image tag, IMG, with width and height specified); GIF, TD W&H (GIF spacer image, using the Table Data tag with width and height specified); and NoWrap, TD W&H (text is not wrapped, using the Table Data tag with width and height specified).

      • TD W&H sets when width and height values will be generated. The options are Auto, Always, and Never.

      • Spacer Cells controls whether or not a row of spacers cells will be generated. Some browsers allow space between cells, which destroys the effect of slices. A row of spacer cells at the top or bottom of the table can help ensure that the table will have the overall width specified. The options are: Auto, Auto (Bottom), Always, Always (Bottom), and Never.

      • Generate CSS generates a Cascading Style Sheet to display the slices rather than a table. Not all browsers fully support style sheets, which limits this method. You should test this with your target browser.

      • Referenced sets how the CSS elements will be referenced in the code—By ID (a unique ID value set in the code), Inline (style elements set in the DIV tag), or By Name (classes referenced by a unique ID).

      • Default Slice Naming provides options, through a series of drop-down lists, for automatically generating file names for each slice.

        click to expand

    2. Select Image Maps from the drop-down list to select the type of image map and the placement in the web page of the image map code. Client-side image maps are recommended because they don’t require a trip to the server to work. Server-side image maps can be either NCSA (National Center for Supercomputing Applications) or CERN (European Organization for Nuclear Research—the birthplace of the World Wide Web) standard. If you plan to use server-side image maps, you should check with your Internet service provider (ISP) to find which standards are supported. The image map code can be placed at the Top, in the Body, or at the Bottom of the web page. This is a matter of personal preference and makes no practical difference.

      click to expand

    3. Select Background from the drop-down list to place a background image on the web page. The background can be an image or a solid color. If you want to use an image, then the path to the image is entered in the Path text box. The Choose button allows you to browse to an image file. If you prefer a solid color, set the color with the BG Color drop-down list. You can choose None, Matte (the current matte color), Foreground, Background, one of the current palette colors, or a color chosen with the Color Picker.

      click to expand

    4. Select Saving Files from the drop-down list. There are options for saving optimized files, automatic file naming, and file name compatibility.

      • Put Images In Folder allows you to select a folder to put your optimized images in.

      • Use Long Filename Extensions uses the longer extensions (such as JPEG instead of JPG). This is a matter of personal preference and has no practical effect.

      • Copy Background Image When Saving saves the page background image (if used) with the optimized image.

      • File Naming offers a number of options through drop-down lists for automatically generating file names.

      • Filename Compatibility ensures any file names will be compatible with the selected operating systems.

      • Metadata provides information about the image. Information about an image can be saved with the image as metadata.

      • Add Custom ImageReady Metadata (Backward Compatibility) includes copyright and image description from the Image Info dialog box.

      • Add EXIF Metadata (JPEG Only) includes the information from digital cameras such as camera type, date and time of photo, and file size.

      • Add XMP Metadata is Adobe-specific information that can be shared between Adobe applications.

      • Write Minimal Set Of XMP is a subset of the metadata that includes file modification and output times, file dimensions, and format.

      • Include Reference To Source File stores the path to the original document.

      • Write XMP To Separate Files writes the metadata to a separate file rather than embedding it in the image file.

        click to expand

        click to expand

        Table 9-4: HTML Settings

        NAME

        Description

        Output XHTML

        Ensures the generated code conforms to the XHTML standard. If selected, some other options (such as Tag Case) are unavailable due to XHMTL requirements. XHTML has more stringent syntax than HTML

        Tag Case

        Sets the case of the HTML tags. The options are Lowercase, Uppercase, and Mixed Case (leading caps).

        Attribute Case

        Sets the case of the HTML tag attributes. The options are Lowercase, Mixed Case, Mixed With Initial Lower, and Uppercase.

        Indent

        Sets the type and amount of indent for indented lines. The options are Tabs, None, 1 Space, 2 Spaces, 4 Spaces, and 8 Spaces.

        Line Endings

        Sets the line endings for different operating systems. The options are Automatic, Mac (Macintosh), Win (Windows), and Unix.

        Encoding

        Sets the character encoding for the generated code. The options are Automatic (iso-8859-1), Western (iso-8859-1), Mac OS Roman (x-mac-roman), and Unicode™(utf-8). The iso-8859-1 character set is the standard set of characters used in Western European languages. Unicode™(utf-8) is a better choice if you need to support other languages.

        Include Comments

        Includes HTML comments within the HTML <!-- --> delimiters. Comments help understand what is happening on the page.

        Always Add Alt Attributes

        Includes the ALT attribute for those HTML tags where it is applicable, such as the image (IMG) tag. Web accessibility standards require the ALT attribute for all non-text elements. The ALT value will be empty, so you will need to enter the tag information separately.

        Always Quote Attributes

        Places quotes around the values of HTML tag attributes. HTML does not require quotes, but XHMTL and XML (Extensible Markup Language) do.

        Close All Tags

        Inserts the closing HTML tags for all tags that require them. HTML is generally forgiving of unclosed tags, but XHTML and XML are not.

        Include Zero Margins on Body Tag

        Adds the Margin attribute set to 0 (zero) to the BODY tag. This starts the page content in the upper-left corner of the browser with no margin. This is not supported by all browsers.




Photoshop CS QuickSteps
Photoshop CS4 QuickSteps
ISBN: 0071625372
EAN: 2147483647
Year: 2006
Pages: 59

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