The quick way to animated gif

planetFigure

Help Support planetFigure:

This site may earn a commission from merchant affiliate links, including eBay, Amazon, and others.

Calvin

A Fixture
Joined
Nov 2, 2004
Messages
945
Location
Uhu?
With the main distribution of the Photoshop version I use (7.0) also comes a program called 'ImageReady'. If you take a look at my avatar, you will see that it's an animated gif, with the fade effect. The same can be made using the pictures of your figures, allowing more than one photo in the same picture file. I do not have more figures to be used as samples, so you must be content with my avatar...

First of all, make sure to resize all you photos with the same size, it's quite simple. Open the Photoshop and after resizing the huge files coming from your camera, create a new file for every picture you have (from the File/New menu), select the 'pointer' tool from the floating toolbar and drag your resized picture over the new. After dropping it, center the photo using the mouse or the arrow keys. Be sure that every new picture you create have the same width/heigh. When done, save the new pictures with the Save for Web entry of the File menu and close the Photoshop (for the basics on the Photoshop, see at the previous thread 'Photoshop made easy').

Now start the ImageReady program and open the first picture. If not visible, go to the Window menu and select the Animation entry. You will see something like this:

openfile.jpg


Under the close button of the Animation window (on the upper right), there is another button (a little arrow into a circle) for the Animation menu. Click on it and choose the New Frame entry. The first frame of tha Animation will be duplicated with the same content.

Open now your second picture, go to its Animation menu and select the Copy Frame entry.

animenu.jpg


Go back on the first picture and make it the active window clicking on its title bar. Select with a mouse click the second frame, open the Animation menu and choose the Paste Frame entry. If another popup menu appears asking about the paste metodh, always select the Replace Frame option.

Repeat the same process for all the pictures you want to add to the Animation (open it, copy its main frame and paste it on the new frame created on the Animation of the first picture). This example only uses three pictures. When done, go to the first picture, select the first frame clicking on it, and do a right click on its blue border (where you see the '0 secs.' title). Set here the persistence time for this frame (I use a value of 2 seconds).

frametime.jpg


Do the same for all the frames and when done select again the first frame, clicking on it.
 
If you want to add the fade effect, you must click on the small button on the bottom line of the Animation Windows.

fade.jpg


Because you are on the first frame, when asked for, you must select the Next Frame option from the popup menu showing the Tweening features. The default value for the frames to be added (5) is good enough, so don't modify it. This is what you get.

tweening.jpg


For every added frame (the frames for the tweening effect) you must now set the delay (persistence) time, right clicking on the blue bottom border of the frame. Try using a value of 0,2.

Select now the second frame with one mouse click (the original, not the frame from the tweening set) and repeat the process, clicking on the fade button and selecting as the tweening method the Next Frame. Do it again for the third frame, but selecting the First Frame between the tweening options. Remember that for the last (original) frame you must select the 'First Frame' option, not the 'Next Frame'.

That's all. Go to the File menu and select the Save Optimized As entry. You will be asked for a .gif filename. Ensure that the listbox under the file name shows the Only Images option, you don't need to generate the HTML code also.

Only one thing about the animation size. The ImageReady uses some predefined sizes, and could fit yor pictures to its default. For the images I used for this article (which are 64 x 64) the ImageReady forces a size of 68 x 60. To override its defaults, go to the Section tab of the Animation window and set manually the width and heigh.

forcevalue.jpg


Feel free to ask any question you have.
 
I don't really have a need for this right now, but it was very interesting to see how it was done!

Francesca
 
Back
Top