Rollover animation workflow

R
Posted By
ronviers
Feb 10, 2007
Views
550
Replies
6
Status
Closed
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

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

MR
Mike Russell
Feb 10, 2007
wrote in message
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/
R
ronviers
Feb 10, 2007
On Feb 10, 3:38 am, "Mike Russell" <
MOVE> wrote:
wrote in message

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 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
MR
Mike Russell
Feb 11, 2007
wrote in message
[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/
R
ronviers
Feb 11, 2007
On Feb 10, 8:37 pm, "Mike Russell" <
MOVE> wrote:
wrote in message

[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 Russellwww.curvemeister.com/forum/

Animated GIFs look like the ticket – thanks.
R
ronviers
Feb 11, 2007
On Feb 10, 8:37 pm, "Mike Russell" <
MOVE> wrote:
wrote in message

[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 Russellwww.curvemeister.com/forum/

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.
MR
Mike Russell
Feb 11, 2007
wrote in message
….
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/

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

Related Discussion Topics

Nice and short text about related topics in discussion sections