| Author |
Message |
|
| Jonas M. Rogne |
 Posted: Wed Jul 04, 2007 3:22 pm |
 |
|
Moderator
Joined: 27 May 2007
Posts: 176
Location: Norway
|
How to make an animated GIF file
Quote: PNG is a much better format than GIF, and if you want animation you should use Flash or a video file (created with e.g. AfterEffects). However, simple animated gifs are still useful sometimes (e.g. for use here on the forum or as a profile image on places like DeviantArt).
Here I will quickly show how to make a very simple animated gif using Photoshop CS3. If you use CS2 scroll past the CS3 tutorial for more information.
--- Animated GIF ---
An animated gif is suited for low resolution illustrations, and is not suited for photographic elements. Photographs will create a large file size and also remember that GIF is limited to 256 colours. It does not support partial (alpha) transparency.
In this example I will use the simplest scenario. I have a Photoshop-file with all my frames as layers, so that I can create the animation simply by hiding/showing layers.
This is what my file looks like:
Step 1: Open up the animation palette.
The palette that opens will say "Animation (Timeline)" or "Animation (frames)". If it is set to timeline, you will have to go to this button:
...and click "convert to frame animation"
You now have a palette that looks like this:
Now, hide all the layers you don't want to show in the first frame.
Click duplicate frame and you will get a new frame (2).
Now, hide all the layers you don't want to show for the 2nd frame.
Click duplicate frame again and you will get a new frame (3).
Now, hide all the layers you don't want to show for the 3nd frame.
Repeat this process until you've got all the frames you want
(remember you don't need the last frame to be identical to the first frame as the animation will loop)
You should now have something like this:
As you can see, by default for me the frames last 10 seconds each. To change this, select all your frames by making sure the last one is selected, then while holding down shift, click the first frame.
Then click the time ("10 sec.") and choose a new timing. E.g. "0.1 seconds". Make sure the setting in the bottom left also sais "forever" to make the animation loop.
 
Now, press play to preview you animation to see if it looks ok.
If you're happy, we can now save this as an animated GIF. I recommend saving the PSD file as well or else you will not be able to properly edit your animation should you want to change things later.
To save as animated GIF go to "File > Save for web and devices..."
You will now get a big window that looks something like this:
- Make sure you have selected GIF (1).
- Uncheck Transparency unless you need it (6).
- Double-check the looping (2).
- Check that you have many frames (3).
- Preview your animation (4).
- Check that the file size is small enough (5).
Press save and give it a name that ends with .gif (I named mine "red_dot.gif"). You now have an animated gif!
Try opening it in your web browser to see how it looks. Different programs sometimes have a bad tendency to playing the back the gif at different speeds (noticeable with fast animations).
The final result: 
CS2 users (and older!):
CS2 had a program called "ImageReady" to handle things like gif animations. When your file is ready, click the big "send to imageready" button at the bottom of your tools palette.
Here you can have a timeline (frames) similar to that in photoshop cs3. Do the same process of adding new frames until happy. To save as a gif choose "save optimized as..." from the file menu.
(Detailed gif settings, metadata, etc, can be chosen in the different imageready palettes.)
Voila.
----------------
Tip:
If you get a file size (5) that is too big (e.g. 400kb would take a long time to load on a webpage) play around with the settings to reduce the size. Some tips:
- Reduce number of colours
- Turn off dithering (default: diffusion)
- Increase the "lossy" setting a tiny bit
If this is not enough, you will have to go back to your document and try something more drastic:
- Use less frames
- Decrease the resolution
- Remove gradients and photographic elements
- Make it as a Flash animation instead 
An example of an animation that really isn't well suited as GIF on web because of the size is the pinhole camera animation: http://www.ma.uccaepsom.co.uk/forum/viewtopic.php?t=73 - the first time you go there notice how slow the animation loads (500kb). |
Last edited by Jonas M. Rogne on Tue Sep 25, 2007 2:10 pm; edited 3 times in total
_________________
www.rognemedia.no - Grafisk design / Graphic design
http://chain.deviantart.com |
|
| Back to top |
    
|
| blue |
| Posted: Wed Jul 04, 2007 11:33 pm |
|
|
|
Moderator
Joined: 27 May 2007
Posts: 109
|
Oooh, high quality tutorial!!
Damian, we will be OK with this tips  |
_________________
*** blue
She is not here anymore but doing fine at other forums with same name. Good Bye. |
|
| Back to top |
|
| Damian |
| Posted: Fri Jul 06, 2007 9:14 pm |
|
|
Site Admin
Joined: 29 May 2007
Posts: 8
Location: Epsom
|
that is what I wanted to ask you and you have already done it - thanks for the tutorial.
D |
|
|
| Back to top |
|
| xinxinyang |
| Posted: Wed Sep 05, 2007 9:51 am |
|
|
Joined: 27 May 2007
Posts: 27
|
that's so helpful!
 |
_________________
 |
|
| Back to top |
|
| Jonas M. Rogne |
| Posted: Mon Oct 29, 2007 8:38 pm |
|
|
|
Moderator
Joined: 27 May 2007
Posts: 176
Location: Norway
|
|
| Back to top |
|
|
|
