Hypnosis Spirals & Hypnotic Animations

Now we get to the fun stuff and go through the process of creating an animation with PhotoShop. I personally think that Adobe Fireworks is much more suitable for animation and if you have Adobe Fireworks available you may consider doing your animation there with the image you have thus far created with PhotoShop. However this tutorial is focused on PhotoShop so we will do the complete job within the single tool.

This section contains several steps and is rather detailed. It is important to follow along at this point carefully. 

Again you should now have an image that looks similar to the one above. We are going to create the animation by using layers together with the animation panel.

If you look at your layers panel, you should see two layers there. The bottom layer is the original background that was created when the new document was created. The second layer was created when we pasted our spiral image into the document.

With layer 1, the layer that contains the spiral image, selected right click and choose "Duplicate Layer"

Name this new layer, "Layer 2", this is important because it will help you to keep things straight as you work through the animation process.

Now ensure the new "Layer 2" is selected for this next step. Select Edit > Transform > Rotate.

Within the parameters of the rotate action, enter 40 into the Angle Degrees box as shown above. This will start the image rotating clockwise. Should you choose to have your spiral rotate counter clockwise you would enter -40 in this box.

Next with Layer 2 selected, right click on it to bring up the popup window and select "Duplicate Layer" This time name the new layer "Layer 3". Just as before ensure layer 3 is selected and now we will rotate the image in this layer. Fortunately PhotoShop provides a short cut. We can simply select Edit > Transform > Again. This will repeat the last transformation performed so we do not have to worry about entering the value in the Angle Degrees box again. It will automatically enter that value for you.

Repeat these steps until you have a total of nine layers plus the background layer as shown above. Again these steps for each new layer are:

1. Right click on the last created layer and select "Duplicate Layer".
2. Name the layer "Layer #" where # is the next number in order.
3. Ensure the newly created layer is selected, and then select  Edit > Transform > Again

Next if you do not already have the animation panel open, open it by selecting Window > Animation.

There should be a single frame present in the animation panel. The first thing we want to do is set the timing of the animation on that first frame. It is important to do this while there is a single frame because all additional frames will take this new value, so the step here only has to be repeated once. Beneath the image of the frame, you should see some value and seconds, by default 0 seconds. Click on that to bring up the pop up window as shown above.

Here you can choose any value you wish and it will control the speed at which the spiral will spin once it is animated. You may also select "Other" to enter your own custom value. I have selected 0.2 for this tutorial, I have also found a custom value of  0.12 works quite well for a spiral GIF.

 Within the animation panel select its pop up menu by clicking on the menu icon which I have circled above to identify. In the pop up menu select "New Frame"

Continue creating new frames until there are a total of nine as shown above. 

Select Frame 1 in the animation panel

Go to your layers panel and turn off the "eye" next to each layer except for the background and layer 1. For this the background is always turned on so I will not mention it again.

Now back in the animation panel select Frame 2.

In the layers panel now turn off the "eye" on layer 1, and turn it on for layer 2 as shown. Repeat these steps for each frame in your animation. Always turning on only the layer number that corresponds to the frame number. 

Once you have completed working through each of the frames, you have completed your animation. All that is left now is to save your work as an animated gif. Go to File > Save for Web & Devices. From this screen select "Save" give it a name and you are all done.