Blinky2004

Hi everyone!

I'm posting this in here because it involves using both PS and IR. And although it's actually more of a tutorial than a quick-tip, it's still more appropriately placed here, than elsewhere.
--------------------------------------------------------------------------------

[size=18px]Creating a "Paint Stroke" animation:[/size]

For this example tute, i'm going to refer to a simple logo i made. It's an eye, with a paint swish going around the inside.
From scratch, i created this logo using 2 separate layers: 1 for the eye bg, and one for the paint swish. If YOU have a logo like this that's all on 1 layer, then you'll have to separate the swish symbol from it, using any method you know how to. Either that, or Rubber Stamp the current swish symbol, and create a new one. The swish needs to be on it's own layer.

So now, you should have one layer in PS with the main body of the logo (the BG layer), and one above that containing only the swish symbol.

1) Now add a Layer Mask to the swish symbol layer. Using a brush that's large enough to cover the line thickness of the swish, paint over the entire swish with black, except a short section at the very start of the swish (see example image). This hides all but the starting stroke for the swish. And this starting stroke begins on the 2nd frame of the animation.

2) Duplicate the swish layer, then click the Layer Mask so it's active. Now switch the Foreground colour to white, and use that brush again to 'unhide' another short section of the swish symbol.

Repeat this procedure until you have completely revealed the entire swish symbol. Then hide all of the swish layers and leave just the main logo layer visible.

3) Now switch over to ImageReady (IR).
Leave the base layer visible at all times.

4) In the Animation preview strip, your first frame will be just the main logo by itself. So click the eye icon next to the swish layer to hide it. Now add a new frame. And now make the swish layer visible again. This is the 2nd frame of the animation.

5) Add another new frame, and this time, hide the first swish layer, while unhiding the 2nd swish layer. This should make the swish appear to be longer. Continue with this procedure until you've created a frame for every section of the swish symbol; and it's completely visible again.

Now under the FILE menu choose "Save Optimized As...".
Make sure the "Save as Type" menu shows only the "Images Only" option.
Click OK to export the animation, and you're done.

TIP: Depending on the complexity of your animation AND of your overall image, you may wish to play with the "Optimization" settings before saving out the animation. In most cases, a 'Perspective' colour palette of 32, with Dithering ON will suffice. But test a few settings out with your specific image, just to be sure everything looks ok.

HINT: Try to think of other ways you can apply this simple 'unhiding' technique to create other kinds of animation effects.

Hope folks will find some use for this info.
Cya!

-------------------------------------------------------------------------------
Below you see how the layer mask looks, and effects the first frame. And below that is what my layer palette looked like just prior to switching to ImageReady. Note the layer masks.

Blinky2004

And here's how the effect looks when complete...

NOTE: take notice for reference that this effect only uses 10 frames. And yet the animation looks fairly seamless.
Each persons image may take more or less, but generally, anymore than 10 and the file size can become unrealistic for Web purposes.

Using a 'Perspective' 16 colour palette, with Dithering ON... this animation is 2.08kb. It could've used 32 colours to smooth it's lines out, but that was not my real concern here.