Spinning and Concentric Animations in Adobe Photoshop
Polar Coordinates: Part 2
Rendrboy's How Files, Copyright 1997 Pure Imagination, J. Scott Hamlin
Page 1


I may be a little loopy, but I totally dig spinning and/or concentric animations. It might be because they create a slight dizzying effect (I'm like trippin' on the Web, dude!--uh, sorry 'bout that: it's one of those "I'm skitzophrenic and so am I" things) or maybe it's just because their so easy to create. Whatever the case may be, I'm about to share with you one of my most cherished animation secrets. Admittedly, it's not much of a secret--in fact it's remarkably easy, but it's the doorway to a whole lotta fun and until now I wanted to keep all the fun to myself. But a more robust variation of this little gem will soon be published in my new Web animation book with O'Reilly Press, so I figured I might as well share.

This technique starts where the Polor Coordinates: part 1 technique left off. However, this technique gets a little help from another filter: the Offset filter.

Start by opening a new 100 pixel square, 72 ppi, RGB document in Photoshop. Turn on the rulers. Zoom into the upper left corner of the document and place two vertical guides, one at 10 pixels down from the left (guide 1) and one at 20 pixels down from the left (guide 2). Turn on Snap To Guides. Using guide 1, marquee-select a vertical rectangle that spans the height of the document and that goes from guide 1 to the left of the document. Fill the selection with a bright blue color. Now using guide 2, marquee-select a vertical rectangle that spans the height of the document and that goes from guide 2 to the guide 1. Fill the selection with a bright green color. See below (guides have been turned red).
Now, using guide 2, marquee-select a horizontal rectangle that spans the height of the document and that goes from guide 2 to the left side of the document. Select Define Pattern from the Edit menu. Deselect and select Fill from the Edit Menu. Select Pattern from the "Use" drop-down menu and click OK. Now your document should be filled with a blue and green vertically stripped pattern as shown below.
Open the Layers palette and drag the background layer to the Create New Layer icon to create a copy of the background. OK, now here's the trick: select the new layer and then select Offset from the Filter, Other menu. Change the Vertical setting to 0, the Horizonal setting to 4, select Wrap Around, and apply. Repeat this process 3 more times only duplicate the layer you just applied the Offset filter (rather than the background layer) to for the next frame of animation, and then duplicate it for the frame following that and so on. For the last three layers it should be as easy as creating a duplicate and reapplying (Control[pc] or Command[mac]+F). The result should be 5 layers (including the background layer) with the stripes moving horizontally in 4 pixel increments as shown below.
Select each layer and apply the Polar Coordinates filter to it using the Rectangular to Polar option. Your results should look like those shown below. If you look carefully, you will see that we now have the frames for a spinning animation. As shown below, when these layers are converted to frames in a GIF animation, they loop seamlessly. Slick, huh?!? That's just the beginning.


I'm barely surpressing a yawn
but I could use a little catnap--tell me more.