What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

 

Adobe Photoshop Help & Tutorials

 Back to Topics

 

How to Develop Graphics for Web in Photoshop

About optimization

Top


    Optimization is the process of fine-tuning the display quality and file size of an image for use on the Web or other online media. Adobe Photoshop and Adobe ImageReady give you an effective range of controls for compressing the file size of an image while optimizing its online display quality.

    There are two methods of optimizing images:

  • For basic optimization, the Photoshop Save As command lets you save an image as a GIF, JPEG, PNG, or WBMP file. Depending on the file format, you can specify image quality, background transparency or matting, color display, and downloading method. However, any Web features--such as slices, links, animations, and rollovers--that you've added to a file are not preserved.
  • For complete information on using the Save As command to save an image as a GIF, JPEG, or PNG file,

  • For precise optimization, you can use the optimization features in Photoshop or ImageReady to preview optimized images in different file formats and with different file attributes. You can view multiple versions of an image simultaneously and modify optimization settings as you preview the image to select the best combination of settings for your needs. You can also specify transparency and matting, select options to control dithering, and resize the image to specified pixel dimensions or a specified percentage of the original size.
  • When you save an optimized file using the Save for Web (Photoshop) or Save Optimized (ImageReady) command, you can choose to generate an HTML file for the image. This file contains all the necessary information to display your image in a Web browser.

    The Save for Web (Photoshop) or Save Optimized (ImageReady) commands are designed specifically to provide a more robust and intuitive set of options for saving an image file for use on the Web. This includes a refined sensitivity to file size and image color palette that is unavailable from the Save As command. When creating graphics for Web use, the Save for Web / Save Optimized commands are recommended.

Optimizing images

Top


    In Photoshop, you use the Save for Web dialog box to select optimization options and preview optimized artwork. In ImageReady, you can view and work with optimized images at any time in the document window.

Using weighted optimization

Top


    Weighted optimization
    lets you smoothly vary optimization settings across an image using masks from text layers, shape layers, and alpha channels. This technique produces higher-quality results in critical image areas without sacrificing file size. With weighted optimization, you can produce gradual variations in GIF, PNG-8, and WBMP dithering, lossy GIF settings, and JPEG compression. Weighted optimization also lets you favor colors in selected image areas when you generate a color table.

    Image without weighted optimization (left), and with weighted optimization on text layers and vector shapes (right)
    Image without weighted optimization (left), and with weighted optimization on text layers and vector shapes (right)
Optimizing colors in GIF and PNG-8 images

Top


    Decreasing the number of colors in an image is a key factor in optimizing GIF and PNG-8 images. A reduced range of colors will often preserve good image quality while dramatically reducing the file space required to store extra colors.

    The color table gives you precise control over the colors in optimized GIF and PNG-8 images (as well as original images in indexed color mode). With a maximum of 256 colors, you can add and delete colors in the color table, shift selected colors to other colors or to transparency, and lock selected colors to prevent them from being dropped from the palette.

Working with hexadecimal values for color

Top


    You can view colors as hexadecimal values in the Info palette. In addition, you can copy colors as hexadecimal values to the Clipboard and paste them into an HTML document.

Using a droplet to automate optimization settings (ImageReady)

Top


    You can save Optimize palette settings for use on individual images or batches of images by creating a droplet, a small application that applies the optimization settings to an image or batch of images that you drag over the droplet icon. You can drag a droplet to the desktop or save it to a location on disk. When you create the droplet, you can choose where the images will be saved. When you drag an image over it, the droplet launches ImageReady if the program is not currently running.

    Note: You can also drag a droplet onto the ImageReady Actions palette to create an action step. Or you can drag a droplet from the Optimize palette onto a slice to apply the optimization settings to the slice. You cannot, however, drag a droplet from the desktop onto a slice.

To create a droplet for automating Optimize palette settings:

  1. With an image displayed in the image window, choose a compression format and compression options in the Optimize palette.
  2. Create a droplet by doing one of the following:
    • Drag the droplet icon Droplet icon from the Optimize palette onto the desktop.

    The droplet is named with a brief description of the compression settings, including file format and color palette, or quality setting information. You can rename the droplet as you do other desktop icons.

    • Click the droplet icon on the Optimize palette. Name the droplet, choose a location where the droplet will be saved, and click Save.
    • Choose Create Droplet from the Optimize palette menu. Name the droplet, choose a location where the droplet will be saved, and click Save.

To use a droplet:

  1. Drag a single image or a folder of images onto the droplet icon.

    As the images are processed, a progress bar appears.

  2. Do any of the following to control the processing:
    • To temporarily pause the processing, click Pause. You can then click Resume to continue the processing.
    • To cancel the processing, click Stop.
    • Let the process finish on its own.

    For more information on working with droplets,

Saving optimized images

Top


    When you've applied a combination of settings that achieve a balance between quality and file size, you're ready to save the optimized image.

To save an optimized image:

  1. Select the view with the desired optimization settings, and do one of the following:
    • (Photoshop) Click Save in the Save For Web dialog box.
    • (ImageReady) Choose File > Save Optimized to save the file in its current state. If you previously saved the optimized file using the File > Save Optimized command, applying the command again saves the file with the filename and Save options specified in the first save operation. The Save dialog box does not appear.
    • (ImageReady) Choose File > Save Optimized As to save an alternate version of the file with a different filename.
  2. Type a filename, and choose a location for the resulting file or files.
  3. Choose a Format option:
    • HTML and Images to generate all files required to use your artwork as a Web page. This includes an HTML file and separate image files for the slices in the artwork. The HTML file includes code for any links, image maps, and other effects in the document.
    • Images Only to save your artwork with the specified optimization settings. If the artwork contains multiple slices, each slice is saved as a separate file.
    • HTML Only to generate an HTML file but not save any image files.
  4. To set preferences for saving image files and HTML files, choose predefined output options from the Settings pop-up menu, or choose Other to set different options.
  5. Choose an option for slices from the pop-up menu:
    • All Slices to save all slices in the image.
    • Selected Slices to save only the selected slices. If you select this option in conjunction with the HTML and Images option, ImageReady or Photoshop generates the HTML code based on the outermost bounds of the selected slices, and generates auto-slices as needed to create a complete HTML table.
    • All User Slices to save only the slices that are user slices.

    Note: You must select the desired slices before starting this procedure.

    • (ImageReady) A slice selection to save only the slices in the selection. You must save a slice selection in order for this option to appear in the menu.
  6. Click Save.
Setting output options

Top


    When you save an optimized image as a Web page, you can specify how HTML files are formatted, how slices are named, how files are named, and how background images are handled. You set these options in the Output Settings dialog box.

 

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Explore Work Area  in Photoshop

Key Board Shortcuts in Photoshop:

How to get an Image into Photoshop and ImageReady

Keys for selecting tools in Photoshop

How to Producing Consistent Color in Photoshop

Keys for selecting tools in the Extract toolbox in Photoshop

Working with Color in Photoshop

Keys for selecting tools in the Liquify toolbox in Photoshop

How to do Color and Tonal Adjustments in Photoshop

Keys for working with Extract*, Liquify, and Pattern Maker* in Photoshop

How to work with Selections in Photoshop

Keys for using the File Browser in Photoshop

How to work with Transforming and Retouching in Photoshop

Keys for using the Filter Gallery in Photoshop

Keys for using the Actions palette in Photoshop

Learn Drawing in Photoshop

Keys for using the Camera Raw dialog box in Photoshop

Keys for using the Animation palette in ImageReady

Learn Painting in Photoshop

Keys for using Photomerge in Photoshop

Keys for using the Brushes palette in Photoshop

How to use Channels in Photoshop

Keys for working with blending modes in Photoshop

Keys for using the Channels palette  in Photoshop

How to Work with Layers in Photoshop

Keys for viewing images in Photoshop

Keys for using the Color palette in Photoshop

How to apply Filters & Special Effects in Photoshop

Keys for selecting and moving objects in Photoshop

Keys for using the Color Table palette in ImageReady

How to use Character & Type in Photoshop

Keys for editing paths in Photoshop

Keys for using the History palette in Photoshop

How to Design Webpage in Photoshop

Keys for painting objects in Photoshop

Keys for using the Info palette in Photoshop

How to Create Complex Web Graphics in ImageReady

Keys for transforming selections, selection borders, and paths in Photoshop

Keys for using the Layer Comps palette in Photoshop

How to Develop Graphics for Web in Photoshop

Keys for selecting, editing, and navigating through text in Photoshop

Keys for using the Layers palette in Photoshop

How to Save & Export Images

Keys for formatting type in Photoshop

Keys for using the Paths palette in Photoshop

How to Print in Photoshop

Keys for slicing and optimizing in Photoshop

Keys for using the Swatches palette in Photoshop

How to Create Automated Tasks in Photoshop

Keys for using palettes in Photoshop

(F) Function keys in Photoshop