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 Create Complex Web Graphics in ImageReady

About rollovers and states

Top


    A rollover is a Web effect in which different states of an image appear when a viewer performs a mouse action--such as rolling or clicking--over an area of the Web page. A state is defined by a specific configuration of the Layers palette, including layer location, styles, and other formatting options.

    By default, every image has one state--the Normal state. The Normal state corresponds to the appearance of an image when it is first loaded into a Web browser and no rollover effects have occurred. You can add states to an image that will occur when a viewer performs a mouse action--such as rolling or clicking--over an area of the Web page.

About working with layers in rollovers and animations

Top


    You work with layers in ImageReady to create rollover buttons and animations. Placing the image content for a rollover on its own layer allows you to make changes to the layer's style, visibility, and position to create rollover effects. Likewise, placing each element of an animation on its own layer establishes it as an independent object and enables you to change the position and appearance of the object across a series of frames.

    You can also work with rollover effects for layer slices other than the one you have selected. You can use these remote rollovers to create effects such as launching an application or running an animation in the Over state. See Creating remote rollovers.

    Illustration of a rollover. The button is on its own layer; effects are added to the layer to create a new appearance of the button for the Over state. The text for the word EVENTS is also on a separate layer.
    Illustration of a rollover. The button is on its own layer; effects are added to the layer to create a new appearance of the button for the Over state. The text for the word "EVENTS" is also on a separate layer.
    Illustration of an animation. The bicycle image is on its own layer; the position of the layer changes in each frame of the animation.
    Illustration of an animation. The bicycle image is on its own layer; the position of the layer changes in each frame of the animation.

Using the Web Content palette

Top


    The Web Content palette lets you create, view, and set options for the rollover states in an image. In addition to rollover states, the Web Content palette can display slices, image maps, and animation frames. Displaying slices and image maps helps you keep track of the elements in an image that contain rollover effects. Displaying animation frames makes it easy to see which states of an image contain animations.

    Illustration of The Web Content palette with slices, image maps, and animation frames with these callouts: A. Normal state B. Image map with Over state C. Slice visibility icon D. Indicates this slice has an active rollover state E. Drag the pickwhip to the image window to make the targeted slice remote for this rollover state F. Indicates that the down state has a remote slice associated with it G. Indicates that this slice has a remote target associated with it H. Indicates that this state has animation associated with it I. Indicates that this slice is a nested table J. Nested Slice info: slice number, layer-based indicator, remote-trigger badge K. Individual slice info: slice number, layer-based indicator L. Remote slice info: slice number, layer-based indicator, remote-target badge
    The Web Content palette with slices, image maps, and animation frames A. Normal state B. Image map with Over state C. Slice visibility icon D. Indicates this slice has an active rollover state E. Drag the pickwhip to the image window to make the targeted slice remote for this rollover state F. Indicates that the down state has a remote slice associated with it G. Indicates that this slice has a remote target associated with it H. Indicates that this state has animation associated with it I. Indicates that this slice is a nested table J. Nested Slice info: slice number, layer-based indicator, remote-trigger badge K. Individual slice info: slice number, layer-based indicator L. Remote slice info: slice number, layer-based indicator, remote-target badge

    Displaying the Web Content palette

    Choose Window > Web Content. A check mark indicates that the palette is showing.

    Using the Web Content palette menu

    Click the triangle Display palette menu button in the upper right corner of the palette to access commands for working with rollovers.

    Displaying slices and image maps in the Web Content palette

    In the Web Content palette, there are sections for Image Maps Image Maps icon and Slices Slice tool . Click the disclose triangle to view or hide them. An option in the Palette Options area of the Web Content palette menu toggles the display of slice badges, which are small icons on each slice that display the slice's current properties.

    Displaying animation frames in the Web Content palette

    Choose Palette Options from the Web Content palette menu. Select or deselect Include Animation Frames, and click OK.

    Changing the size of rollover thumbnails

    Choose Palette Options from the Web Content palette menu, and select a thumbnail size. For sizes other than None, select Object Bounds or Entire Document to determine the contents of thumbnails.

    Expanding and collapsing states, slices, and image maps

    Click the triangle to the left of an item in the Web Content palette. Alt-click (Windows) or Option-click (Mac OS) expands or contracts all options.

Creating and editing rollovers

Top


    You use the Web Content palette, in conjunction with the Layers palette, to add rollover effects to an image. When you save the image as a Web page, ImageReady adds JavaScript code to the resulting HTML file to specify rollover states.

Animations

Top


    ImageReady supports animations in Web pages, and provides tools for creating, editing, and displaying animations.

Optimizing animations

Top


    You can apply optimization settings to animated images just as you do to nonanimated images. You should always optimize an animation in GIF format because GIF is the only format in ImageReady that supports the display of animated images on the Web.

    Note: While you can optimize an image that includes animation in JPEG or PNG format, these formats do not support animation. The resulting Web page will display only the current frame of the animation.

    In addition to the standard optimization options for GIF format, you can optimize frames to include only areas that change from frame to frame. (This greatly reduces the file size of the animated GIF.) ImageReady also applies a special dithering technique to animations to ensure that dither patterns are consistent across all frames and to prevent flickering during playback. Due to these additional optimization functions, ImageReady may require more time to optimize an animated GIF than to optimize a standard GIF.

To optimize an animated image:

  1. Choose Optimize Animation from the Animation palette menu.
  2. Set the following options:
    • Bounding Box to crop each frame to the area that has changed from the preceding frame. Animation files created using this option are smaller but are incompatible with GIF editors that do not support the option. (This option is selected by default and is recommended.)
    • Redundant Pixel Removal to make transparent all pixels in a frame that are unchanged from the preceding frame. This option is selected by default and is recommended. The Transparency option in the Optimize palette must be selected for redundant pixel removal to work.

    Important: Set the frame disposal method to Automatic when using the Redundant Pixel Removal option.

  3. Click OK.
  4. Apply optimization settings.

    Tip iconWhen optimizing the colors in an animation, use the Adaptive, Perceptual, or Selective palette. This ensures that the colors are consistent across frames.

Viewing animations

Top


    Viewing an animation lets you preview the frames in timed sequence. You can preview an animation in ImageReady or in a Web browser.

To view an animation in ImageReady:

  1. Click the Play button Next button in the Animation palette. The animation is displayed in the document window. The animation repeats indefinitely unless you specified another repeat value in the Play Options dialog box.
  2. To stop the animation, click the Stop button Stop button .
  3. To rewind the animation, click the Selects First Frame button Selects First Frame button .

To preview an animation in a browser:

  1. Click the Preview in Default Browser button Preview In button in the toolbox or choose File > Preview In and select a browser from the submenu:
    • System Default Browser opens the browser you've set as your chosen one.
    • Other Browser lets you choose an application from your system.
    • Edit Browser List lets you add browsers to the Other Browser list.

    Note: Once you select a browser, the Default Browser button changes to the browser icon.

  2. Use the browser's Stop and Reload commands to stop or replay the animation.
Viewing animated images in Photoshop

Top


    When you open a file containing an animation in Photoshop, only the frame that was selected when you saved the file in ImageReady is displayed. You cannot edit the animation frames separately, play the animation, or save the animation as an animated GIF.

    If you add a new layer to the file while in Photoshop, the layer is added to all frames of the animation. However, the new layer will only appear in the selected frame when you reopen the file in ImageReady. If you change the stacking order of layers while in Photoshop, the stacking order of layers will be changed when you reopen the file in ImageReady.

Saving animations

Top


    You can save an animation as an animated GIF file, a QuickTime movie, or a SWF (Macromedia Flash) file. You can also save each frame in an animation as a separate file.For information on saving animations and other ImageReady files in the SWF format,

Exporting animation frames as files

Top


    You can export individual animation frames as files. You can export frames as Photoshop (PSD), GIF, JPEG, PNG 8, PNG 24, WBMP, or SWF.

    ImageReady provides a number of preset formats for animation files. You can also develop your own formats and add them to the library of presets.

To export animation frames as files:

  1. Choose File > Export > Animation Frames as Files.
  2. In the File Options area of the dialog box, do the following:
    • Enter a Base Name for new files. You may choose your own naming scheme if you wish.
    • Click the Set button to set the file naming convention for new files. You can choose from a number of different conventions and postfixes.
    • Click the Choose button to determine the location for saved files.
  3. In the Save Options area, select the following options:
    • Selected Frames Only to choose specific frames for export.
    • Preview to display the current layer settings in the document. Use the forward and backward triangles to cycle through your selections.
    • Apply to set the formatting preference.
  4. In the Format Options area, select a format from the Preset menu. You can save sets of formats and place them in a directory that ImageReady can see; this lets you build a library of presets from which to choose. You can also use an "unnamed" Preset, and fill in the appropriate values.
  5. Based on your chosen Preset, the Format item receives an automatic value, or you give it a value for "unnamed." The other options in the Format Options area are then filled in automatically to reflect the Preset/Format settings, or you can fill them in for your own unnamed Preset.
Opening and importing files as animations

Top


    You can use the animation features in ImageReady to edit animated GIFs, multilayered Photoshop files, and QuickTime movies.

 

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