Animated Menu’s

Follow these steps to create animated menus. This tutorial assumes you have a working knowledge of creating animations.

Mouse over the below menu items for a preview.

Download base file here.

Create Menu Shapes

A. Select the ‘Rectangle Tool U’.
B. Activate ‘Options Bar’ ‘Shape Layers’ feature for the ‘Rectangle Tool’.
C. As captured below, draw equal shapes to represent the background for your menus.
Choice of colors is up to you.

Animated Menus
Note:
Shapes 1-3 length below and that Shape 4 is used to hide portions of them.
Also make sure there is room above (my white area) for the animation.
Animated Menus

Create Text Captions.

A. Select ‘Shape 1’ Layer Thumbnail (encircled in red) in the Layers Palette.
B. Activate the Type Tool from the Toolbar..
C. Now mouse over the ‘Shape 1’ until you see the Type inside shape cursor as captured below.
Animated Menus

At seeing the above step C. type inside a shape cursor, click once and at the insertion point type the word ‘Home’, as I have captured below.
The new type layer is also added to the ‘Layers Palette’ directly above the ‘Shape 1 Layer’.

Animated Menus

The new type inside a shape defaults to the upper left corner, so go ‘Window/Character’ to bring the Character Palette and set the following format options.
A. Go to the Options Bar and Center Align the text.
B. Then go to the Character Palette and adjust the Base Line Shift integer (encircled in Red).
Adjust the Color, Font Face and Size to your preference.

Animated Menus

Link Menu Shape to Menu Caption.

Next, Hold the Shift key and select both the Home type Layer and Shape 1 Layer, then hit the Link icon located at the bottom of the Layers Palette.

Animated Menus
Repeat ‘Text Caption creation’ and ‘Linking process’ for the remaining two layers as I have captured below.
Animated Menus

Add Layer Based Slices

Ctrl + Click on each of the Shape Layers to multi-Select them from the Layers Palette.
Then go ‘Layer/New Layer Based Slices’ to add them all in one swoop, as captured below.

Animated Menus

Your document view should now have Layer based slices as captured below.

Animated Menus

Download Intermediate file here.

Animate the Menus.

From Photoshop hit the ‘Jump to ImageReady icon on the Toolbar.

In ImageReady, go ‘Window’ command and select ‘Animation’ and ‘Web Content’ to bring them to the foreground, as captured below.

1. Activate Shape 1 Layer.
2. Activate Slice 3 of Shape 1 Layer in the Web Content Palette.
3. Hit the add New Over State icon.

1. With the Over State still active…
2. Go to the Animation Palette and hit the duplicate current Frame icon (encircled in red)
3. The hold the SHIFT KEY and hit the UP ARROW KEY once to nudge the entire Shape 1 layer and its linked type layer upward.

Repeat the Duplicate Animation Frame, Shift + Up Arrow process so that there are three frames to the animation onto the OVER State.

Repeat Over State creation and 3 frame animation for the remaining two Shapes.

Download Final file here.

Multiple Animations on Remote Rollovers

As you probably realize ImageReady only allows for a single active animation.
However, there is a method to utilize multiple animations within a single document through the use of Remote Rollovers.

Note: Remote Rollovers is a feature for CS & CS2 users.
This tutorial assumes you have basic knowledge of animations and remote rollovers.

The below example just such an example.
Mouseover the first two colored buttons to view.

To begin download the base file for this tutorial.
I have laid out all the elements for this tutorial, and I will demonstrate the often over looked feature ofadding animations to rollovers.

Once downloaded, unzip and open in ImageReady.
Examine the file and become familiar with some of the common aspects that I used, primarily Layer Sets and Clipping Groups. Also all the layers I employed are vector layers. This actually helps in creating smaller file sizes as opposed to using pixel and or layer masked elements.

Let’s cut to the chase.

  1. Here is an active capture of the base file.

  2. Hold the Ctrl key (Mac:Command key) and multi-select Layers Btn1-3 and PlaceHolderShape as I have captured below.
    See Preview
  3. With those Layers selected, go ‘Layer/New Layer Based Slices’ to add slices in one swoop as captured below.
    Grey badge represents Auto Slices. Blue badge represents your Layer Based slices – these are the ones we will focus on.
    See Preview.
  4. Next:
    A. Expand the ‘Ani1’ elements Layer Set
    B. Bring the ‘Window/Animation’ Palette to the foreground
    C. Bring the ‘Window/Web Content’ Palette to the foreground
    D. In the Web Content Palette select slice ’03’, right click and from the list choose ‘Add Rollover State’
    See Preview.
  5. Next, with that ’03’ Slice ‘Over’ state still active:
    A. Go to the layers Palette and toggle OFF the ‘DefaultPlaceHolder’ layer set, as captured in the preview below.
    The elements in ‘Ani1’ Layer Set is now visible in the document view and now becomes the ACTIVE state (frame 1) in the Animation Palette.
    See Preview.
  6. Next, with that ’03’ Slice ‘Over’ state still active:
    A. Add a new Frame simply by clicking the ‘Duplicates Current Frame’ icon button command
    B. Select ‘Shape3 copy’ within ‘Ani1’ set and nudge it to your left (I held the Shift key and clicked the Left Arrow Key 14 times to get it my captured position)
    C. Select ‘Shape3’ within ‘Ani1’ set and nudge it to your right (I held the Shift key and clicked the Right Arrow Key 14 times to get it my captured position)
    See Preview.
  7. Next, with that ’03’ Slice ‘Over’ state still active:
    A. Add a new Frame simply by clicking the ‘Duplicates Current Frame’ icon button command
    B. ‘Shape3’ should still be actyive from the previous step, hold Shift key and click the Right Arrow Key until its off the screen
    C. Select ‘Shape3 copy’ again, hold the Shift key and click the Left Arrow Key until that layer also disappears off screen
    See Preview.
  8. Next, with that ’03’ Slice ‘Over’ state still active:
    A. Select the First Frame in the Animation Palette
    B. Click the ‘Tween’ icon command (highlighted blue in the preview)
    C. Set the desired Tween Options
    See Preview.
  9. Next, with that ’03’ Slice ‘Over’ state still active:
    A. Select Frame 5 in the Animation Palette
    B. Click the ‘Tween’ icon command
    C. Set the desired Tween Options
    See Preview.
  10. Next, with that ’03’ Slice ‘Over’ state still active:
    A. Select All the Frames
    B. Then on any one of the Loop controls change from ‘Forever’ to ‘ONCE’ as captured in the preview.
    See Preview.
  11. Next, with that ’03’ Slice ‘Over’ state still active:
    A. Click the pickwip icon of the Over State (highlighted in blue in the preview)…
    B. … drag and drop it onto Slice ’04’ in the document view.
    See Preview.
  12. Next, select the Normal state of Slice ’03’ (highlighted in blue in the preview) then go Save Optimized to preview your overall progress.
    Note: An animation symbol is now attached to the Over state in the Web Content Palette. (highlighted in red in the preview)
    See Preview.

Summary:
Create your base and animated elements in organized sets.
Apply Layer based slices.
Create an Over state to one of the Layer Base Slice.
Create an animation in the Over State.
Drag and drop the Remote RollOver pickwhip icon to a target slice as the container.

Since you have the base zip file, mimic the above routine to Layer Based Slice ’06’ using the elements inside ‘Ani2’ Layer Set for the animation.

ImageReady Channels

ImageReady, like Photoshop, can also make and utilize channels and are primarily used in the optimization process of outputting files for the web.

Here are the few simple steps needed to create channels within ImageReady.

Below is the base image used in this tutorial with the background already stripped from the image.
(See this ‘Blend If’ tutorial for creating quick background knockouts)

To begin open your image in ImageReady, select/activate the layer. (highlighted in blue).

Channels in ImageReady

Next, go ‘Select/Load Selection/’ and because the background is transparent, from the list choose ‘(LayerName) Transparency’, as I have captured below.

This will load/activate a selection (indicated by the marquee below) around the object.

Channels in ImageReady

With the Selection still active, go back to ‘Select’ menu command and from the list choose ‘Save Selection’ (Select > Save Selection).

You will be prompted with the ‘Save Selection’ dialog with the new channel options as captured below.

Give the new channel a the ‘Name’ as desired, then click OK.

Channels in ImageReady

To delete any unwanted channel’s go back to the Select command menu item and the ‘Delete Channel’ is now activated with the channel item in a pop-out list. (Select > Delete Channel > ‘Channel Name’)

Note: If you jumped to ImageReady from Photoshop with already existing channels and alpha channels, they will also appear in the list. As the sample captured list shows)

Channels in ImageReady

Now that you know you can create channels in ImageReady, what next?

The answer lies in the ‘Window/Optimize’ palette. As I have captured below and encased in red, the ‘Mask’ button can be used to load a Channel to modify color reduction or quality setting for your final output file.

Channels in ImageReady

Selecting the ‘Mask’ icon will prompt you with the following ‘Modify Quality Setting’ dialog. Select from the Channel list the one that was created earlier, as captured below.

Channels in ImageReady

Finally, white areas of the masks yield the highest quality & black areas of the masks yield the lowest quality. Adjust the sliders and hit OK.

Channels in ImageReady

Since the White areas of the mask contains the pixel information related to the chair object adjust the White Slider for a comfortable comprimise in quality.

Though not as flexible as Photoshop Channels Palette, ImagerReady provides some compensation for creation and interchangeable use of channels. So if channels are created in ImageReady, and you ‘Jump To’ Photoshop, they will still be available in Photoshop and vise a versa.

ImageReady Patterns

Ever want to create a Pattern in ImageReady & notice that it dosn’t quite follow through with the same easy process as Photoshop.

Well, this little tutorial will help solve that problem.

ImageReadys’ Define Pattern is a little quirky compared to Photoshop method. And even though it has a ‘Paint Bucket Tool’ where in Photoshop you would normally change the ‘Fill’ parameter from Foreground to Pattern, ImageReady does not.

The moment you ‘Edit/Define Pattern’ in ImageReady, it dosn’t prompt you with a dialog. It does however, capture it. Directly to the Clipboard.

To simulate this process do the following:

For the purpose of this tutorial I used the following image.

Select all (PC: Ctrl + A / Mac: Command + A) or use any of the Marquee Selection Tools and draw a selection on the image (or Layer that contains the pixel information).

Then go to the ‘Edit/Define Pattern’ menu command option, as captured below.

These two steps are exactly the same as in Photoshop except, at this point, you are not greeted with the ‘Pattern Name’ dialog.

So here is how to find that Pattern you just defined.

Start a new document in ImageReady (‘File/New’ document preset of your choice).

Create a new layer filled with any color. (Or double click the default locked ‘Background’ Layer to convert it to an edit able layer).

Note: The new layer cannot be transparent, thats why I sugest to fill it with any color

Right click, choose ‘Layer Style/Pattern Overlay’, as captured below.

Click the Pattern Selector drop arrow and from the list choose the very top option ‘User Defined Pattern’, as captured below.

This will now update the Pattern Overlay panel (as encased in red below) as well as your document.

Note: Adjust the above ‘Scale’ and ‘Opacity’ sliders to your liking.

Here is what the Layers Palette show look like.

Here is portion of the patterned document.

Other Notes:

1.) The ‘User Defined Pattern’ only captured the last performed ‘Edit/Define Pattern’ command.

To add to the Pattern list:
a) Skip the ‘Define Pattern’ step altogether & save your image as a native .psd or .jpg file into your ‘PresetsPatternsAdobe ImageReady Only’ folder.

So, for example, I saved the following image as heathrowe.psd to a predefined location solely used for ImageReady Patterns.

That way instead of relying on the ‘User Defined Pattern’ (Temporary Clipboard option), select the ‘Other’ option from the Pattern Selector options. Then browse for that .psd or .jpg file, stored in your custom patterns folder.

Or, simply save the same .psd file into the ‘[Drive Letter]:Program FilesAdobeAdobe Photoshop CSPresetsPatternsAdobe ImageReady Only’ folder, and it will appear in ImageReady’s predefined list, as I have captured below.

Note: If your saving the .psd file from ImageReady into the ‘…PatternsAdobe ImageReady Only’ folder, this will require an application restart in order for it to be visible.

b.) If your familiar with Illustrator, copy or recreate the desired Pattern into Illustrator then save as a .ai file into the ‘PresetsPatternsPostScript Patterns’ folder.

This will also be added to the predefined list.

ImageReady CS Remote Rollovers

Here’s a few steps to simulate simple to complex remote rollovers in the new ImageReady CS.

The basic premise behind remote rollovers is the simple fact that it enables you to reveal or hide another slices’ content within your layout.

To incorporate the remote rollover effect involves the basic use of rollovers. So to begin this tutorial, I have prepared a starter file for you to download a follow along. Download the File here. (Requires Winzip)

The basis of the download sample is captured below. A simple three button menu area with a another area (that I have boxed in with text), that will represent the target slice for the remote rollover.

As in the screen shot above, all content must be prepared and to make effective remote rollovers you will have to have content available in a hidden state. As I have captured below, the ‘Layers Palette’ contains multiple layers grouped by set. The current document represents the original or ‘Normal’ state. (In my case, the only alteration is that some layers are hidden)

To make an effective remote rollover, we first need Slices’ in our document. So go to ‘Window/Web Content’, if its not open already and position it alongside the ‘Layers Palette’ and your document preview window for easy management.

View a screen shot of my layout here.

So begin by selecting the ‘bgOne’ background layer (inside ‘Set’ entitled ‘Menu’) at the bottom of the ‘Layers Palette’, then right-click on that layer (Mac: Control + click) and from the context menu choose ‘Make Layer Based Slice’. (As I have captured below)
Alternatively: ‘Layer/New Layer Based Slice’

Some visual notices when you add a Slice to your layout.
View a screen shot here.

  • Preview window
    bgOne content is completely encased by a Slice with an auto generated slice number in order of the preceding ‘Auto Slices’ created by Photoshop. (Auto Slices are the light grey ones)
  • Layers Palette
    bgOne Layer now has the ‘Slice’ icon attached to it.
  • Web Content Palette
    The Slice is updated here also with an associated slice name auto generated according to the parameters in the ‘Edit/Preferences/Slices’ panel.

    Next, repeat the above ‘New Layer Based Slice’ procedure for both the ‘bgTwo’ and ‘bgThree’ Layers. The same visual notices should appear for those respective Layers also. (As captured in the following link)

    View a screen shot here.

    The final slice will be set on the (in this case) the ‘Border’ Layer, in the ‘Remote’ Layer Set. So repeat the above process.

    This slice will act as the remote target once any of the menu items are moused over. Right now, the ‘Normal’ state just has the text content, but as you can see in the above screen shot I have three image content layers in a hidden state that will be used for each of the three menu items.

    Next, go directly to the ‘Web Content’ Palette and activate (select) slice ‘bgOne’. Right click (Mac: Control + click) and choose ‘Add Rollover State’, as I have captured below.

    This will add the Over state to the web content palette as I have captured below.

    Now lets add the remote slice effect to this over state.
    Just to the right of this ‘Over’ state is whats called a Pickwhip icon , click on it, drag and drop it onto the ‘Border’ slice target we created earlier. (At the top of the Web Content Palette)(As I have captured below)

    Alternatively, click on the pickwhip, drag and drop it onto the same ‘Border’ slice area in the preview window as I have captured below.

    The slice is now updated and is que’d with a remote slice.
    How do you know for sure? Again, there are some visual indicators, both in the Preview Window and the Web Content As I have captured in the link below.

    View a screen shot here.

    Both the Preview and Web Content Palette indicate the trigger slice with a new slice badge called a Trigger badge icon (1) , and the target slice is indicated by a Remote badge (2) .

    Finally, we need to set the buttons ‘Over’ state remote target ‘Border’ slice to the corresponding (currently) hidden image layers.

    Select the ‘Over’ state for the ‘mouseover_startb_bgOne’ slice, then move over to the ‘Layers Palette’, click the eye next to the ‘This is an example…’ text layer to hide it, and click the empty box next to the ‘OneImage’ Layer to make it visible.

    View a screen shot here.

    Repeat the process for the other two ‘Over’ states (mouseover_startb_bgTwo & mouseover_startb_bgThree).
    Now that all slices are intact, complete with a trigger and target remote slice for the corresponding menu items, select the ‘Preview Document (Y)’ button on your Toolbar, to render a live preview within ImageReady.
    Or you can choose,’File/Preview In.’DefaultBrowserName’ (Ctrl + Alt + P).

    Finally, ‘File/Save Optimized As’ to save your html output and associated image files result.
    Note: When saving your final output, ensure that the active layer is in the ‘Normal’ state.

    Summary:
    1. Prepare Layered content in your document.
    2. Assign Layer Based Slices to the the appropriate Layers.
    3. Create ‘Over’ state for the menu/button items
    4. Set the ‘Trigger’ and ‘Remote’ attributes per ‘Over’ state.
    4. Save .psd & Save Optimized As, for html output.

    CLick Here to preview my final result.

    Download final .psd version here.


  • CSS Templates in ImageReady CS

    Here’s a few simple steps to publishing your web layouts CSS (Cascading Style Sheet) driven directly with ImageReady before it even reaches your favorite html editor.

    For more information on these CSS (Cascading Style Sheet) web standard consult W3C CSS Recommendations for further information.

    To begin this process without embarking on the making of a full layout (Like I did for the XHTML tutorial). Lets open up ImageReady CS, start a new document of any preset size.

    Next, go ‘Window/Actions’ to bring the Actions Palette to the foreground, if it isn’t already.

    Now, create a simple layout from a ‘Make Website’ action preset from the actions list.

    Activate the ‘Make Website’ then hit the ‘Play’ action playback button on the bottom of the Actions Palette, as I have captured below.

    Note: Make sure you have a blank document open as mentioned earlier, otherwise you will be prompted with a serious of error messages related to the action.(Which requires to be run on an active document)

    Once the ‘Make Website’ action is finished, you should have a document like the capture below.

    Click above image for a larger view!

    Click above image for a larger view!

    This action creates a ready made layout design, complete with 2-state roll-over navigational buttons and with slices. (As indicated by the blue/green border areas)

    An Important Note with this template to be aware of is that once you ‘Save Optimized As’ to generate the html file for the browser, this template generates not only one html file, but 6 html files. One for the ‘File Name’ preference you give it in the ‘Save Optimized As’ dialog box. The remaining 5 html files are automatically created for each button navigational item.

    This is a preference item that has to be set before you go to the ‘Save Optimized As’ command feature.
    To locate this preference, go to the far upper right of the ‘Optimized View’ document window, and click the ‘Output Settings’ menu button (Highlighted in Red below), and from the list choose ‘Other’. (Notice I have my own output settings in the list ‘heathrowe1’)

    Hit the ‘Next’ button on the right to go to the ‘Saving Html Files’ preference (As captured below), and the option to ‘Output Multiple Files’ is what produces the above extra navigational bottoms on the fly.
    Note: Untick the ‘Use Long Filename extension (*.html) will generate just the three letter .htm file name extension on output.


    Back to the web layout and creating the .css elements for the html pages. You may have noticed it already if you wondered through the above settings. To set up for css compatibility, go back to that same ‘Output Settings’ menu button (Highlighted in Red), and from the list choose ‘Other’. (As I have captured below)

    Hit the ‘Next’ button until you get to the ‘Slices’ options. Then simply, then simply activate the ‘Generate CSS’ feature, choosing one of the three style options(ID, Inline, By Class). (As I have captured below)

    I recommend the by ‘Id’ or ‘By Class’ options so that when you get to your html editor you can easily copy the entire style to an external style sheet file.

    Now with this feature active, the next time you go to ‘Save Optimized As’, ImageReady will include all the necessary .css style information embedded into your html file.

    Below is a brief comparison of choosing ‘Generate Table vs Generate CSS’:

    As the above indicates, the ‘Generate Table’ option produces the standard Table/Td/Tr tags to the layout scheme based on the template slice positions.

    ‘Generate CSS’ however, does not use the table/td/tr scheme, but a div tag with the appropriate id element (indicated by the red arrow) for the assigned css style.

    It’s not perfect, and theres a lot to consider when building a totally css driven site, which is why I pointed out the W3C Specification link above. But certainly, a quick way to migrate a tabula layout to css style layout.

    If you viewed this action preset web page layout in your default browser with the ‘Generate Table’ option activated, everything appears as it should.

    But when you activate the ‘Generate CSS’ option, not everything falls into place at should appear in the ImageReady Preview window.


    This occurred only due to the nature of how this action driven Create Web page was built. I quickly fixed this problem by going to the ‘Table’ Palette and changed the ‘W’ (Width) parameter from ‘Percent to Pixels. (This fixed the top overlapping Blue Band)

    To fix the bottom overlapping blue band, activate the ‘Slice Select Tool (O)’ and double click each of slices number 12/13/14 (respectively) and from within the ‘Slice Palette’ (which should appear to the foreground upon double clicking the slice) and change the ‘Background Color’ parameter from the default dark blue to ‘None’.

    Now lets say you want to use this css output capability at any given time.

    Simply, go back to the ‘Output Settings’ menu command and choose ‘Other’, as I have captured.

    Again browse (hit the ‘Next’ button, to the ‘Slices’ area and activate ‘Generate CSS’.
    Then to the right of the panel, hit the ‘Save’ command, and upon prompt give it a user friendly name as I have captured below. (Example heathroweCSS.iros) This should prompt you to the default ‘Output Optimized Settings’ folder.

    So, now the next time you want to use this css preset, go back to ‘Output Settings’ menu command and in the list is the new one just created. (As captured below) Select it and ‘Save Optimized As’ you layout with the new css settings.

    Note: Make sure to change the ‘Output Settings’ from your ‘Custom Name’ preset to ‘Default’ for future layouts that don’t require it.

    Note: The ‘heathrowe1’ preset in the list combines the above .css settings as well as the xhtml settings to achieve both XHTML Transitional & CSS standards.

    Additional CSS resources woth exploring:
    The Web Standards Project
    A List Apart