Computer Graphics with Photoshop - Rollover animation workflow

Author

Rollover animation workflow

ronviers@gmail.com

2007-02-10, 3:14 am

Hi,

I thought, apparently mistakenly, that the Slice/Image Map tools would
not only define the area of an image to be active but also isolated
the areas of the image to be animated. I see now that when I animate a
button's appearance, by flipping though layers of Style changes, the
appearance of all my buttons change. So now I assume I need to
manually isolate the areas of the image that change. I am thinking
groups, masks and tons of layers, but before I do that I thought I
would ask if anyone knows of the best way to address this issue, or
even, if I am skipping a step that would do this automatically.

Thanks,
Ron

Mike Russell

2007-02-10, 6:14 am

<ronviers@XXXXXXXXXX> wrote in message
news:1171094646.079536.326770@h3g2000cwc.googlegroups.com...
> Hi,
>
> I thought, apparently mistakenly, that the Slice/Image Map tools would
> not only define the area of an image to be active but also isolated
> the areas of the image to be animated. I see now that when I animate a
> button's appearance, by flipping though layers of Style changes, the
> appearance of all my buttons change. So now I assume I need to
> manually isolate the areas of the image that change. I am thinking
> groups, masks and tons of layers, but before I do that I thought I
> would ask if anyone knows of the best way to address this issue, or
> even, if I am skipping a step that would do this automatically.

If you mean rollover etc. animations for a button, here is one way:

Slice all the buttons, then do a Save for Web for all the slices, once for
each combination of effects you are using, choosing an appropriate name for
each effect. Select only the images you need for your final result, and
specify Slices: Selected Slices, or save only the User Slices. If you
prefer not to use Save for Web, set Snap to Slices, and select just the
slice you need with the marquee tool, set the appropriate layer, do a
"Edit>Copy Merged" and paste it to a new image.

Suppose you have a row of buttons with text, and that you have an outer glow
style that you apply to the text for a roll over. Slice the buttons, give
each slice an appropriate name if necessary, and export two sets of images,
one for the normal button appearance named xxx, and another for the glowing
text versions, named xxx_over. The set of xxx_over images would then be
used for the rollover images. If you then had another style setting for a
pushed button, you would activate that style, and Save for Web using the
name xxx_down.

The Curvemeister nav buttons were done this way:
www.curvemeister.com
--
Mike Russell
www.curvemeister.com/forum/

ronviers@gmail.com

2007-02-10, 6:14 pm

On Feb 10, 3:38 am, "Mike Russell" <RE-MOVEm...@Curvemeister.comRE-
MOVE> wrote:
> <ronvi...@XXXXXXXXXX> wrote in message
>
> news:1171094646.079536.326770@h3g2000cwc.googlegroups.com...
>
>
>
> If you mean rollover etc. animations for a button, here is one way:
>
> Slice all the buttons, then do a Save for Web for all the slices, once for
> each combination of effects you are using, choosing an appropriate name for
> each effect. Select only the images you need for your final result, and
> specify Slices: Selected Slices, or save only the User Slices. If you
> prefer not to use Save for Web, set Snap to Slices, and select just the
> slice you need with the marquee tool, set the appropriate layer, do a
> "Edit>Copy Merged" and paste it to a new image.
>
> Suppose you have a row of buttons with text, and that you have an outer glow
> style that you apply to the text for a roll over. Slice the buttons, give
> each slice an appropriate name if necessary, and export two sets of images,
> one for the normal button appearance named xxx, and another for the glowing
> text versions, named xxx_over. The set of xxx_over images would then be
> used for the rollover images. If you then had another style setting for a
> pushed button, you would activate that style, and Save for Web using the
> name xxx_down.
>
> The Curvemeister nav buttons were done this way:www.curvemeister.com
> --
> Mike Russellwww.curvemeister.com/forum/

Hi Mike,
Thanks for the explanation and tips. Now I have to bring my pie-in-the-
sky expectations in-line with reality. My original concept had up to
thirty state changes per button, one Normal, ten Over, ten Out, and
one Select - not to mention the odd unexpected specular twinkle plus
pressure sensitive glows. It's no wonder that the web looks so boring.
Maybe my graphical surfaces would be better as application shells. I
want to go ahead and do it my way the ratchet it back for the web just
so I can see the distance between.

Thanks,
Ron

Mike Russell

2007-02-10, 10:14 pm

<ronviers@XXXXXXXXXX> wrote in message
news:1171145242.856285.180820@v33g2000cwv.googlegroups.com...
[re rollover states]
> Hi Mike,
> Thanks for the explanation and tips. Now I have to bring my pie-in-the-
> sky expectations in-line with reality. My original concept had up to
> thirty state changes per button, one Normal, ten Over, ten Out, and
> one Select - not to mention the odd unexpected specular twinkle plus
> pressure sensitive glows. It's no wonder that the web looks so boring.
> Maybe my graphical surfaces would be better as application shells. I
> want to go ahead and do it my way the ratchet it back for the web just
> so I can see the distance between.

One way to fancy things up is to use animated gifs, with bling bling and
other effects, for your rollover images. You can do these in ImageReady
easily, though I prefer Fireworks if that is available.
--

Mike Russell
www.curvemeister.com/forum/

ronviers@gmail.com

2007-02-11, 6:14 am

On Feb 10, 8:37 pm, "Mike Russell" <RE-MOVEm...@Curvemeister.comRE-
MOVE> wrote:
> <ronvi...@XXXXXXXXXX> wrote in message
>
> news:1171145242.856285.180820@v33g2000cwv.googlegroups.com...
> [re rollover states]
>
>
> One way to fancy things up is to use animated gifs, with bling bling and
> other effects, for your rollover images. You can do these in ImageReady
> easily, though I prefer Fireworks if that is available.
> --
>
> Mike Russellwww.curvemeister.com/forum/

Animated GIFs look like the ticket - thanks.

ronviers@gmail.com

2007-02-11, 6:14 am

Mike Russell

2007-02-11, 6:14 am

<ronviers@XXXXXXXXXX> wrote in message
news:1171190574.068185.178850@a34g2000cwb.googlegroups.com...
....
> I have been eyeing those Unify buttons since the first week I got PS.
> Now I am just, this close, to getting top push one for real - it will
> be a milestone.

Let us know when they are on line! Please warn us if we need to put
sunglasses on first.
--
Mike Russell
www.curvemeister.com/forum/