HomePhotoshopDreamweaverIllustrator
 
 

Photoshop - Animated GIF

These can appear a little 'cheesy' when you use them on a website (remember the 'Site under construction' ones a few years ago?)

However, there may be situations where you need something to illustrate a point so it's worth looking into how a simple animated GIF is created.

Firstly, why GIF? Well, the GIF file format is one that supports animation - Jpeg does not.  Next, the animation.  A simple form of animation can be used.  In our example, it consists of just three 'frames'.  Think of this technique like the old-time cards that used to have slightly different images on them.  When they were 'flicked', the image seemed to come to life.  Obviously, there are more sophisticated methods of animation such as Flash, but we'll stick with Photoshop and, if you're not familiar with ImageReady, this will be a simple (and painless) introduction.

Bat

This is the simple 'flying bat' we will create.  Start by finding a simple illustration of a bat (Google Images etc. - or just use our three examples below (right-click, Copy and paste into Photoshop).

Bat 1
Bat1
Bat 2
Bat 2
Bat 3
Bat 3

How you create the three different 'stages' of the bat is up to you.  Depending on your Photoshop skills, you can keep the body and head and remove the wings (lasso tool etc.) and redraw by using the Pen Tool. 

As we said, if you're not comfortable with this, just use our images.  All we need at this stage is three seperate layers, each having the different bat shapes on them.

In our example to the right, we have four layers.  This is not strictly necessary - you could just have the 'bat' layers transparent (this is important - the bat layers must only have the bat on them) - and allow the background colour of your web page to 'show through'.  We've made a bottom layer with the web page colur on it - it really doesn't matter.

Keep turning the visibility of the layers on and off and use the Move Tool to make sure the head and body of the bat are aligned.

This is the key to animation in Photoshop - you do all the preparation in Photoshop - making sure each animation state is on its own, separate layer.

Bat layers

Make sure the 'Animation' palette is visible (if it isn't, go to WINDOW...Animation) and, in the Layers palette make sure the visiblity of Bat 1 (see above) is on and the visibility of Bat 2 and Bat 3 is turned off.

If you have a layer with a background, make sure its visibility is on and 'lock this layer.

If you have done this correctly, your animation palette should look like the one to the right.

Animation palette

If all is correct, your layers - in ImageReady - should look those to the right:

  • Bat 1 layers is visible
  • Bat 2 and Bat 3 layers have their visibility turned off
  • The background layer (if you have one) has its visibility turned on and has been locked.
Bat layers

If all is OK, click on the 'New Frame' icon in the animation palette (shown in a red box below), turn the visibility of Bat 1 off, and turn on the visibilty of Bat 2:

Bat animation palette

Nearly there! Once more in the Animation palette, click the 'New Frame' icon, turn the visibility of Bat 2 off, and turn on the visibilty of Bat 3:

Bat animation palette

And that is almost it - a simple 3-frame animation. Now we'll 'time' the animation and make it ready (or 'optimized') so we can put it on a web page
At the right-hand end of the ImageReady animation palette os an outward-facing arrow.  Click on this an, from the drop-down menu choose Select All Frames.  This is very useful when you have a lot of frames).
Bat animation palette

All the frames will now be selected (they will be blue).  Next, click on any of the tiny drop-down arrows at the bottom of a frame.
This will produce a sub-menu where you can select a time that each frame will appear for. In more complex animations, you can set the timing for individual frames but here we'll choose a timing of 0.2 seconds - this will apply to all our three frames.

Bata nimation palette

Now we're ready to test our 'movie'. Click on the 'Play' button at the bottom of your Animation palette and the movie will be shown in animated form in the main document window.

Bat animation palette

Make sure theOptimize palette if visible (WINDOW...Optimize).  The main thing you need to check is that the format is GIF (remember, if it is JPEG, the animation will not work.)

Then go to FILE...Save Optimized As... and save the animation to the Images folder in your website.

Bat Optimize palette
©grafikhaus 2015 | sheffield-central.com