Making GIF animations -how to

Homework giving you a headache? Math gives you a migraine? Can't quite figure out how to do something in photoshop? Never fear, the other members of CAA share their expertise in this forum.

Making GIF animations -how to

Postby Photosoph » Tue Mar 01, 2005 5:19 pm

Just a simple tutorial on some of the basics on how to make an animated gif. If you have any questions, just ask. Also look to the end of this post for some MS Paint colouring tips.

My tutorial for making Animating GIFs

First of all, you need two things:
1. A program to make gif images with. I use Microsoft Paint.
2. A program to make those gifs into an animation. A simple, free program to animate your images is UnFREEz. A link on where to download this is below.
Don't worry, it's legal. :)

http://www.whitsoftdev.com/unfreez/

The instructions on how to use UnFREEz are also on the same site.

There are many other programs out there for animating gifs, and they usually have a lot of features with them -but UnFREEz is simply for combining the images into an animation, and that's all we need it for.

There are also many ways of drawing the different frames for the gif animation. If you already have the images you want to animate, but they're not gifs, just save them as gifs (although they'll most likely loose a lot of quality) before animating them.

All right. Having said all that, this is the way I do my gif animations.

Instructions

1. In Microsoft Paint, make a new image (Ctrl + N). If you want to make the drawing area bigger, go to attributes (Ctrl + E) and change the width and height until you're happy. Now click on the pencil tool and draw your image.
Drawn outlines in Paint usually look messy. If you want to clean them up, zoom in and take out unwanted pixels.
2. Colour it, if you wish, and save it. A good way to name your image frames is by giving them a title, then a number.
For example, see my first frame : it's a picture of a blob: the first frame in my animation. I'd save it as 'Blob1'. (Yes, it is tiny :) )
3. Once you've saved it, click File - Save as... and save it as the next frame (using the same blob example, it would be the same image, only now it would be saved as 'Blob2'.)
4. Now change the image to make it into the next frame. For example, with my blob image I want to make an animation of the blob smiling. So for frame 2 I'll add a mouth to my picture. Example: blob frame 2.
Keep making more frames until your animation is complete, resaving each as a new file as you make them. So with my blob animation, in each frame I draw I'll make his smile wider, until at the last frame it's as wide as I want it to be. (View all frames -note: the weird picture is an example for one of the tips below).

5. Now that you've completed your frames, open the UnFREEz program. Then go to the folder where all your frames are kept. Left click on your first frame, hold down the left click button and drag it to the open UnFREEz program. If you can't see UnFREEz because your folder is hiding it, then drag it over to the UnFREEz title on your toolbar. Once your mouse is over the UnFREEz program or title, let it drop.
6. Your frame is now in the UnFREEz program. Click, drag and drop your second frame into the program. Repeat this until all your frames are there in their correct order.
7. Decide if you want your image to be looped or not. If your image is looped, it means that as soon as it finishes showing the last frame, it will show the first frame and the animation will start all over again. If you want it to be looped, check the 'loop animation' box. If you decide not to loop, your animation will stop at the last frame and not replay itself.
8. Now set the frame delay. The higher you set the frame delay, the slower your animation will be.
9. Click 'Make Animated GIF', name your animation, and save it where you want to save it.

Your animation is now complete! Enjoy!


Three colours in MS Paint

It took me ages to work this out :sweat: but you can actually choose three colours in MS Paint at once. To get the first one, left click on the colour you want. To select your second colour, right click on the colour you want. To select your third colour, hold Ctrl and click on the one you want.
To use your first colour, left click on the white space. To use your second colour, right click. To use your third, hold Ctrl and click.

Better shading in GIF images

In GIF images you can only use a few colours. If you want to shade your image, but the difference in the colours you're using is really annoying you, here's another technique to smooth the edges of two colours to blend them smoothly into one another.
Look at this picture. The big squares at the top represent pixels. See how I've only coloured every second pixel at the place where the two colours meet? That's what you do on your picture: zoom up and colour every second pixel. At the botton of the attached image you can see what it looks like if you zoom back out to 100% (note: at the beginning of this area of shading I have done one column of colouring every second pixel, and further down I have done two or three columns of this). It works better if you use colours a little closer to each other -in other words, this example would've looked much better if I'd used two blue colours that were closer to each other in their tone. But this is the basic technique to smooth the borders between two colours.
(0)>
((_\//
mm

[Quote=Photosoph]Well, t'was a good deduction, Mr. Holmes! *salutes Mr. Myoti Sherlock Homes* [/QUOTE]
Myoti wrote:Elementary, my dear Watsoph. XD

\(^_^)/
Still in rest and recovery mode. Posting may be sporadic at times. :pinned:
User avatar
Photosoph
 
Posts: 1528
Joined: Tue Jan 11, 2005 8:32 pm
Location: Kiwiland... fighting for mankind in the battle of human vs. sheep.

Return to Tutorials

Who is online

Users browsing this forum: No registered users and 146 guests