[Guide]How to make an animated .gif

[macdawn]

Hi, recently, I wanted to learn more about things we could do with Photoshop, so I got a book to help me master it:

Photoshop CS: Top 100 Simplified Tips & Tricks
Denis Graham, Wiley Publishing, Inc, 2004

I thought it would be interesting to learn how to make animated gif, cos I have always been curious about all those moving banners, and I always wanted to learn how to do it... so I posted this thread to give some idea on how to make those niffy .gif banner :wink2:

Okie... firstly, you'll need a picture editing software. I am using Photoshop now, and that's the one the book is refering to.

1. First, you have to create a multiple layered .psd file (a photoshop format file with many different layers, the layers are the different 'scene' you want to have in your gif file.)
2. Then open the .psd in ImageReady, which is usually bundled with the photoshop programmes. On the top menu, click on Window, a drop down menu will appear, and select Animation. The Animation palette appears.
3. In the Animation palette, there will be a timestrip, which shows what you have in your file. Hide all layers from sight except the first layer.
4. Click on the Duplicate Current Frame button to add a frame to the selection.
5. Hide the first layer you have just worked on, and unhide the next layer.
6. Repeat steps 3 and 5, until all layers have individual frames.
7. Beneath each frame, there is a time selection drop menu, which allows you to select the delay between that frame and the next. Assign a delay time for all of the frames.
8. You can click on the Preview Document button to preview the animation you've created.
9. Make any adjustments you want to the animation time and frames, based on how it appeares when you previews it.
10. Save your animation by clicking on the File drop down menu, and select "Save Opitmized As..." and save your file as a .gif extension file..... and Voila! You have your own animated gif!


Hope that helps! You should have an idea what Photoshop's environment be like before you try your hand on this.... Enjoy! :happy:

-MacDawn
PS: Re-posted due to some....er... technical glinches :sweat: :whistle:

[vunsin]

I'm using Corel Draw. :sweat: Do you have any idea how I could make a gif file with this program? What's the equivalent of a psd file? :?

[Squall]

looks confusing to me :?
here how i do it..
if you wanted to make a animated .gif..you need a picture first..of course there will be many different layer(different object or words)
then u save it as photoshop format then open in imageready or just click the switch to imageready button in the photoshop..
now is the easier part..
you just Duplicate the frame in the animation palette
there will be 2 frame now...right?
just do what you want to the second frame..
like moving the words or adjust the opacity or even making it blink..
then u just tween it...
it is like adding frames in between so that the frames or changes slowly to the next frame
you don't need to add any time for the frames..
finally after you done what you want..
you can save it as a gif

here an example of my final product..i modify the opacity and tween it
http://img57.photobucket.com/albums/v173/SQuall_LH/games/sora_banner.gif

there are more looks of the final product
http://img57.photobucket.com/albums/v173/SQuall_LH/games/final.gif
http://img57.photobucket.com/albums/v173/SQuall_LH/games/5-4.gif
i personally prefer use the tween function

[feixuan]

I do like Squally do, its easier, But the way of Macdown do it, its OK too :happy:
My way to complete Bruce Lee Banner :
1. Go to phototshop, create background layer, I use transparency
2. Open file Bruce Lee that was edited already, I use Extract function [ctrl+alt+X] ..the way to extract ,pm me if you wanna know. Double click at that Layer for unlock it [its on the right at Layer palette] , drag this Bruce Lee to the Background Layer.
3. Open file Dragon that was edited already, use Extract again. do double click it at Layer palette for unlock image. Drag This Dragon to the background Layer.
4. Type words LQP on Blackground layer , do the effect on LQP , wanna know how to do the effect on LQP ,pm me
5. Create The blank that is under the LQP on the blackground layer, see? That function is on the Tool Palette , its call Customm shape tools(U) , select the style of the shape you want , its on tool bar above. and then do the effect like LQP word.
6. now you have many layer on the Blackground Layer, right?
7. Ctrl+shift+M ...for switch it to IMAGEREADY
8. Now you can see in Imageready. There are many palettes ,right?
OK focus on Animated Palete , and Layer palette
9. Click at the image on the Animation palette, then duplicate frame by click at Duplicates current frame at the bottom on Animated Palette
10. Now you can see there are two images at animated palette, right?
11. At first image frame ,what you want in this image, leave it. What you wanna take it off, click at Indicates Layer Visibility at the layer Palette, its like the eye, see?
click it out if you dont wanna see that layer.
12. Next frame repeat like steps 9
13. For times delay, its like how long you wanna see that layer, for my bruce lee banner, i use 2 seconds. It s upon the image frame you have, if you have more image layer, it ll be smoother.
14. Click at Select frame delay times at that image layer on Animated Palette, choose times you want, then do like this in every image layer.
15. Try to play The animation , by click at Plays/Stops Animation on Animation Palette. now its done

I hope you guys are not cunfused for my instructions :shy: anyway you can ask/post. If i know, i ll explain :D

[wackycashew]

i got rid of the old thread where someone asked how to use Adobe ImageReady since this thread is now more detailed and informative... here are the posts:

originally posted by lynette_swan

mmm actually i'm not the expert but i know some basic things (thanks to lepencil :D )

you mean that you want to make an animated gifs, right?
well, i usually use both Adobe Image Ready and Adobe Photoshop.
i try to explain how to make a simple (the simplest, maybe) animated gifs
First, made the "sketch" or i can say the background or the static pic that you don't want to animate and then jump to Image Ready (you know there's a button "jump to Image Ready" at the toolbar or "Ctrl-Shift-M")
and you will see an animation window, choose "duplicate current frame" it means like you made a new frame. and then jump again to photoshop, and for example you want to write "Jay Chou" and then jum again to image ready, and will be like this :

http://www.geocities.com/lynette_swan/help1.txt

and try the "tween" (tweens animation frame) set these things :
Layers : all layers
parameters : check all
Tween with : First frame
Frames To add : 4 -> it's up to you... ^^
and voila, try it by click the "play" button and "stop" to stop it...you have made a simple animated gif !!! :yeah: you also can set the time for each frame by clicking the "0-second" below each frame.
and to save your work, File -> Save Optimized As
i believe you can do it, just try to click here and there, :laughing: i'm sorry if you don't understand and if my explanation isn't enough.. :sweat:


Tutorial sites:

originally posted by KaiLien
http://www.animeadmirers.com/makinggifs.html

originally posted by sagara0510
http://www.thewebmachine.com/