[QUEEN OF HEARTS ...]

GIF Animation Tutorials -- Getting Started

Getting Started


Creating GIF animations is, in some ways, like creating other digital art. You fire up your imaging software of choice and create an image... or, in this case, many images. What you also need, though, is another program that'll enable you to put your images together so that they form the frames of an animation.

There are a number of animation packages available ranging in cost from free to quite expensive. I won't talk about them all, here, or even about a lot of them. This is not because I necessarily favor one over the others, but because I haven't had the time or the opportunity to use them all. Most of the ones I've seen are pretty similar and, whichever one you use, you should be able to follow along just fine.

The software I'll be using, at least for now, is Gamani.com's GIF Movie Gear. You can download a free trial version at Gamani.com and you can read our GIF Movie Gear review here.

The real work in creating an animation is not dependent upon the animation software. It's more dependent on you designing a string of images that, when strung together, will form the frames needed to create an animation. Whether you create these images/frames in Photoshop, Corel DRAW!, PSP, a combination of these (as I often do) or in a 3D rendering program, as I did to create the spinning logo in figure 1.1, doesn't really matter.

figure 1.1


Animations have become a pretty hot topic on the Web. At one time I'll admit that I wasn't really interested in designing animated GIFs, and many of the animated GIFs I saw on the Web were pretty cheesy. This has changed a lot, though, as new tools have been developed. In fact, if all you need is to animate some 3D text, you might want to check out Xara's 3D software. I have also written a review of Xara's 3D software that you might want to read.

One problem that'll rear its ugly head is the final size of your animation. Even by optimizing the GrafX Design logo (seen above in figure 1.1) and cutting the number of colors down to just 32 I wasn't able to get the filesize below 40kB. Unfortunately, cutting down an animation is often just a little difficult. There are many factors involved like the number of frames, redundant pixels, color depth and more.

Actually, the spinning logo started out as a much larger file. I cut many frames from it which really reduced its size. The final image is not nearly as smooth as the original, but it's a lot smaller. Gamani.com's GIF Movie Gear heplped me squeeze in the most image for the least bytes, though.

At this point I hope you'll pick up a GIF animation package from the Web and continue on with our


That's it

 

---

[QUEEN OF HEARTS ...]

General Animation

What exactly is animation?

figure 2.1


Animation implies movement of some kind. But even a flashing image, such as the red/green button in figure 2.1 could be considered an animation. For our purposes we'll consider any multi-frame image an animation.

Figure 2.1 was constructed in Photoshop with Kai's Power Tools used to add the two spheres. Two spheres? Yep. By having both a green and a red sphere and simply saving the two separate images and then combining them with an animation program I got a flashing button. This image could just as easily have been created with PSP and some of the techniques I describe in the PSP tutorials. The spheres may not have been so sophisticated, but the idea would have been the same.

Of course, some movement can take place in an animated image without the entire image, or all of the objects contained within it having to move. Figure 2.2 is a draft of an image that was intended for a children's science web site.

figure 2.2


To continue work on this image I would have animated the bubbles and added some dimension to the beaker. This draft was created quickly (to save time and money) to give the art director of the project some idea of what the finished animation would be like. I used Corel DRAW! to design the beaker and used Alien Skin's flame filter to add three separate flames. By saving each of the three iterations as separate GIFs and combining them with an animation program I produced the image in figure 2.2.

At least part of my point here is that there are many different types of animation. Most are created in much the same way as the two you see above. The most important part of the design process is to come up with an idea and then create the separate frames.

Animation can mean flashing, partial movement, shrinking and growing, movement in any, or each, of the three dimensions, spinning, etc...

In our next animated GIF tutorial I'll demonstrate step-by-step how you can create an animated spinning globe.


That's it.

 

---

[QUEEN OF HEARTS ...]

Creating an Animated Globe


Okay, you've gotta be asking yourself, why with so many spinning globes available on the 'net should I take the time to learn how to create one myself? EASY! With an animation you create yourself you're in total control. You choose the colors, the size, the shading (if any), etc... You could even paste your logo over the globe or have some text spinning around the world (if you've got the time and the inclination to undertake such a project).

You may also be wondering why I've chosen a higher-end animation to start with. Well... that's a bit more tricky. I've said before, in a tutorial that I'm not all that fond of "cheesy" animations and I was having a hard time coming up with an idea for a good tutorial. I really believe, though, that if you follow through with this you'll accomplish something pretty cool.

For this tutorial you'll need either Paint Shop Pro, Photoshop or some other image editing software and some GIF animation software. I'll be using Gamani.com's GIF Movie Gear. You can get a demo from their website at Gamani.com.

You'll also need a flat picture of the world. I'll be using this one:

World Map


If you can't get your hands on one you can borrow this one.

You may notice that the world is actually repeated twice. This is so there won't be any seams in the image as we animate it.

Well, I think you've got everything you need to start so let's get at it.

You may recall, if you read the previous tutorials, that an animation is merely a collection of frames that make up the movie or animation. That said, what needs to be done here, to put a spin on the globe, is create a series of globes from the map image.

Paint Shop Pro Specifics (Photoshop below)

In Paint Shop Pro you need to create the water part of the globe first. To do so:

Create a new 120x120 pixel image.

Select the Shapes tool and set the Shape to Circle and the Style to Fill.

Place the cursor at 10,10 and draw a 100xx100 circle (see figure 3.1).

figure 3.1 - the Oceans


NOTE: You can use the info displayed at the lower-left corner of the main window to help you place the cursor and to size the shape.


You'll need 11 (eleven) of these and they need to be exactly the same. One way to do this is to select the first one you've created (Selections, Select All) and paste the selection 10 times into new images (Edit, Copy -- done once then Edit, Paste , As New Image -- 10 times). These 11 blue circles are the oceans for each frame.

Select the Selection tool, set the Selection Type to Square and the Feather value to 0.

Position the cursor in the top-left corner and drag a 100x100 square selection.

Choose Edit, Copy then Edit, Paste, As New Selection (see figure 3.2).

figure 3.2 - first portion of map


You need the new image because you'll want to deform the portion of the map image into a circular shape.

Set the background color to white.

Choose Image, Enlarge Canvas and set both the Width and Height values to 120. Place a check mark in the Center box.

Choose Image, Deformations, Circle. This will warp the map image a little so that it's more circular or spherical.

Choose Edit, Copy.

Make one of the blue circles the active image by clicking on its title bar.

Choose Edit, Paste, As Transparent Selection (see figure 3.3).

figure 3.3 - first frame of globe


To create the next frame(s) make a 100x100 square selection starting 20 pixels to the right (i.e. for the second frame start at 0,20 for the third start at 0,40, etc...).

Make sure that you enlarge the canvas from 100x100 to 120x120 and that you run the Circle deformation filter on each portion of the map.

Once you've got all the frames (all 11 of them) you can save each one as a GIF. I suggest numbering them w01.gif, w02.gif, w03.gif ... w11.gif.

You PSP users can skip over the Photoshop part that comes next and move on to the animating portion...

Photoshop Specifics

Don't tell the Paint Shop Pro users, but the process is a little easier with Photoshop. Instead of creating separate images you can create one, multi-layered image.

Start off with the same double map as above.

Create a new 130x130 RGB image.

Select the Marquee tool and use the Options tab to set the Shape to Rectangular and the Style to Constrained Aspect Ratio.

Make a selection in the map image starting at 0,0. This will be a 100x100 pixel square selection using the map file provided above.

Choose Edit, Copy.

Make the 130x130 image active by clicking on its title bar and choose Edit, Paste.

Make the Map image active by clicking on its title bar. Move the selection 20 pixels hitting Shift-Right Arrow twice.

Choose Edit Copy.

Make the 130x130 image active and choose Edit Paste.

Continue moving the selection to the right and pasting it into the 130x130 image until you have 11 layers (plus the background.

Make the first layer active.

Set the Marquee tool's Shape to Elliptical and draw a round selection in the layer starting at the upper-left corner.

With the selection active choose Filter, Distort, Spherize. In the Spherize dialog box set the Amount to 100 and the Mode to Normal.

You should have a layer that resembles figure 3.4.

figure 3.4 - first frame of map


Activate the second layer and press CTRL-F to repeat the Spherize filter. Repeat this for all of the layers.

NOTE: If you notice small pieces of the map outside of the selected area simply choose Select, Invert and press the delete key to get rid of the bits.


Add a layer above the background layer.

Draw a 120 pixel circular selection in it starting at 5,5.

Set the foreground color to a deep blue and press ALT-Backspace to fill the selection with the blue color.

You may notice that the Photoshop image is green instead of black. This was easily accomplished in Photoshop. Set the foreground color to green. On each map layer set the Preserve Transparency on and press ALT-Backspace. This will turn the map image green.

Now that you have each of the map layers and the ocean (blue circle) it's time to save the file.

Because Gamani.com's GIF Movie Gear can open Photoshop files using the layers as frames I simply saved the file as a .psd (native Photoshop) file.

Animation Specifics

Now that you have all of the frames it's time to animate them.

Fire up GIF Movie Gear (or whichever animation program you're using).

In GIF Movie Gear choose File, Open.

In the Open dialog box, move to the folder that you saved the frame files in, whether you saved a collection of GIF files from Paint Shop Pro (or another image editor) or you saved a Photoshop .psd file.

If you saved your images as separate GIF files use the mouse to select the last file (w11.gif), hold down the SHIFT key and select the first frame file. This will automatically select all of the frames and put them in the proper order.

If you saved the file from Photoshop, you can simply open the layered Photoshop file.

Click Open to add all of the frames to the animation file.

You will, by default, see your animation previewed in the Preview Animation window.

After viewing the animation click the Stop button in the Preview Animation window.

Choose Animation, Optimize.

Select Shrink Palettes (Global and Local).

Turn on all of the options under Frame Reduction.

Click OK to optimize the animation. Choose Animation, Reduce Colors and set the number of colors (you can go quite low for this animation) and select No for Dither to Palette. Click OK.

Click Save As and give the file a name.

That's it! You've put your own spin on the World.

Animated Globe

 

---

[AYAZ]

Nice tutorial thanks.

 

---

ALLAH FARMATA HAI :
AEY BANDEY JO HUA
WO ACHA HUA .
JO HORAHA HAI ACHA HO RAHA HAI.
JO HOGA WO BHI ACHA HOGA.
TERA KIYA GAIYA JO TU ROTA HAI
TU KIA LAYA JO TU NE KHO DIYA.
JO LIYA YAHIN (DUNYA) SEI LIYA
JO DIYA YAHIN (DUNYA) PE DIYA
JO AAJ TERA HAI PEHLAY KISI AUR KA THA
AUR KAL KISI AUR KA HOGA.
TABDEELI KAINAAT KA MAMOOL HAI
BAS TU WO JAMA KAR JO TU SATH LEI KAR JANEY WALA HAI
YANI NAIK AMAAL.

[Hussain]

nice work

 

---

Hussain Ke Dushman Ki Sab Se Bari Baat Yeh Hai

Ke Woh Hussain Ka Dushman Hai...

[A L i]

nice ...

 

---

[RAJA_PAKIBOY]

[Da Only Ruler !!!]

Nice

 

---

[SIGPIC][/SIGPIC]

Zee n Payal n Anosh

^

Anosh Payal Best Valentine

[Irfa]

nice

 

---

Little Fairy,
Shine so bright.
Little Fairy,
Show your light.

Little Fairy,
I’m amazed.
Little Fairy,
You seem to blaze.

Little Fairy,
I love your allure.
Little fairy,
You are so pure.

Little fairy,
In case you flee,
Little fairy,
First shine on me.

[LAMS]

nice
thx for shairing

 

---