How To Make Animated GIF Files w/ Extras

[SupersonicGeek]

Alright. So some people wanna learn how to make animated GIF files out of video clips. Well i'm going to show you how. I will also show you how to make some pretty basic effects on your animations such as text and fades. Be aware that i'm using Photoshop CS2 and ImageReady. This WILL work in Photoshop CS3. All you need is the animation window.

Programs you will need: Photoshop CS2 + ImageReady OR Photoshop CS3
VirtualDub 1.8.6
DivX Encoder for .avi files


Step 1: Open up VirtualDub and insert the video you would like to use. I am using T-Pain's video "Freeze" featuring Chris Brown.

Step 2: Find the first frame you would like to use.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/001.jpg
Take this frame and COPY it by pressing CTRL+1

Step 3: Open up a new document in Photoshop. Set the dimensions to 100x100 and the background to be transparent.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/002.jpg

Step 3: Take your copied image and paste it into the 100x100 image you have created.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/003.jpg
DO NOT RESIZE THE IMAGE YET. It is supposed to be that large. You will resize it later once you have ALL of your wanted images.

Step 4: Go back to VirtualDub and select your next frame by clicking the little double arrow that points to the right. By clicking that, it takes you to the next frame. I am personally going to use every other frame so I get the full speed. If you use every frame in the selection you are going to use, it will go half time when it is inserted into Internet Explorer or any other web browser. Although it will show up as normal speed in Photoshop/ImageReady, it will go half time on the internet. Keep copying and pasting each frame. To copy from VirtualDub you press CTRL+1...NOT CTRL+C.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/004.jpg

Step 5: Once you have all your frames, this is what your window should look like.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/005.jpg
NOTE: Yes, you do put the photos on TOP of each other in layers like so. You will see what this does later.

Step 6: Select all the layers that you have. Use this by holding down the CTRL key and selecting each frame. After you have done that, link the layers together by pressing the small chain at the bottom of the Layers window.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/006.jpg

Step 7: Now you are ready to resize your images. Press CTRL+T to the the Free Transform tool to work. To make sure that you don't stretch your image, hold down the SHIFT key while you are transforming the image.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/007.jpg
Yes, there is blank space around it, but that is because I am going to insert a background border to my image. You can do this with any picture. Just make sure you create a new layer when you add the background.

Step 8: After you have added you background and everything is all good, (if you are using Photoshop CS2 and ImageReady) press CTRL+SHIFT+M to export the image to ImageReady. If you are using Photoshop CS3, just open up the animation window.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/008.jpg

Step 9: If you look at the last layer number, you will see that this animation has 23 layers (not counting the layer for the background), therefore, I have to make 23 frames for the animation. To add frames to the animation, simply just click the little button that looks like a box inside a bigger box. It is on the left of the little trash can.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/009.jpg

Step 10: Go to frame 1 on the animation window and remove visibility from ALL layers EXCEPT your background and layer 1.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/010.jpg

Step 11: Go to frame 2 on the animation window and ADD visibility to layer 2. This gives you the next frame in your animation. Go to frame 3 and add visibility to layer 3. Keep going until you get to the last frame. You can play your animation by pressing the play button under the second frame.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/011.jpg

Step 12: You can now add effects. Say I want to make a fade-to-black effect to the end of my clip. Alright. So what you do is create another layer AFTER the last layer. Use your rectangle tool and make a black rectangle the size of the other video frames. Don't worry, if all your frames go black just go to the first frame and remove the visibility from the layer with the black.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/012.jpg

Step 13: Go to the last frame of the animation and add 3 new frames. Put the black layer visibility on all 3 of them.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/013.jpg

Step 14: Go to the last frame before the black frame and click on it. Go to the little button that looks like four dots kinda fading. It should be right next to the "new layer" button. It is called Tween.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/014.jpg

Step 15: Modify all the settings that I have in the next screenshot and then press OK.
http://i463.photobucket.com/albums/qq353/kalidesigns/Tutorial/15.jpg

Viola! There you have it. Now to export it, go to File>Save Optimized Image As.. and name the file whatever you want. MAKE SURE THE FILE IS IN GIF.

Here is what the final product looks like:
http://i463.photobucket.com/albums/qq353/kalidesigns/Animations/tutorialimage.gif

If you guys want tutorials on how to add other effects, just let me know and i'll post them up. Peace

[_alexandragrace]

thank you thank you ! ima try it right now!
post results soon :]

[bad romance.]

eeeeep. thank you. [:

[_alexandragrace]

http://img80.imageshack.us/img80/9991/fadeboysarebackeq0.gif

=]

[SupersonicGeek]

good job! i like it :)

[Zecxy Love]

thts sooo cool but i dont have those programs =] o well =] u make them amazing so ill just come to u when i want a new one haha

[andreinaHZ]

i don't have ImageReady but thanks your gifs is cute!

[Quoi.]

i suck.
my text won't
stay onto the last frame.lmfaoo.

[SupersonicGeek]

add the visibility fool

[Rachel*]

gonna try this out :]
gonna download the right programmes first, seems quite easy to do :]

[ak&jblover.]

i don't have photoshop, and i'm not a registered Adobe user... so, is there any other programs to do thiss?

[SupersonicGeek]

well you can easily register for free at adobe.com but you can probably find a torrent for imageready or photoshop. i don't like using other programs just because they're not as clean cut. i've noticed that a lot of animations made by other programs are really sloppy. photoshop allows you to fully customize you animations and whatnot

[chickanoodle.]

ah, finally an imageready tutorial (:
I'm trying this out as soon as the
computer that has photoshop
is repaired. hah, thanks for this.

[Rachel*]

itd work for me,except virtual dub hates me and doesnt work lol

[SupersonicGeek]

haha. well whats ur video file format thingy. lol. is it DivX?

[Leetje92]

What video file format should it be cause i've tried several things and it still doesn't work...

[SupersonicGeek]

What video file format should it be cause i've tried several things and it still doesn't work...

it should be in .avi and you should have a DivX encoder.

[melasaurus]

Just a question... how do you add and remove visability?

Thanks for the tutorial! :D

[SupersonicGeek]

there should be a little eye ball next to the layer. i have a picture there. if you still need help then just send me a pm or a profile post thingy or whatever its called

[melasaurus]

Oh woops, I didn't see that in the picture! Gotcha. Thanks so much :)

[SupersonicGeek]

haha. no problem. if you need anymore help just holla

[beeee.]

it should be in .avi and you should have a DivX encoder.
is this what that is?
http://www.divx.com/en/products/software/windows/divx

[SupersonicGeek]

yea. just get the encoder. all the rest of that stuff is crap

[beeee.]

^
haha ok. (:

omfg i feel stupid. lmfao.
click download, and encoder will be in it?
just woken up. brain half asleep. (:

[SupersonicGeek]

oh and i'm gonna write up that tutorial for downloading videos in a sec...so hold on tight. haha. lmfao

[beeee.]

haha ok. (:

[efronizer.]

this is what it keeps telling me. is it because i don't have the divx encoder thing?
oh and my vids are in the .avi format also.

http://i41.tinypic.com/i28rhe.png

[beeee.]

^
tells me that too.

[SupersonicGeek]

yea. it's most likely cuz u don't have DivX encoder and your .avi file is not in DivX format. what video converter do you use?

[efronizer.]

yea. it's most likely cuz u don't have DivX encoder and your .avi file is not in DivX format. what video converter do you use?

oh okay. but i use the youtube downloader and convert them to .avi

[SupersonicGeek]

ohh. alright well i'll post a tut for correctly downloading videos and converting them for vdub

[efronizer.]

okay thanks. no rush (:

[beeee.]

woo.
i downloaded that thingymabob you need. DivX thing, and it worked!
a vid from youtube i can now open in VirtualDub!
need to figure how to do this all over again! haha. noo.

going to have another go at this tomorrow (:

[efronizer.]

woo.
i downloaded that thingymabob you need. DivX thing, and it worked!
a vid from youtube i can now open in VirtualDub!
need to figure how to do this all over again! haha. noo.

going to have another go at this tomorrow (:

how did you download and where? I tried, but I couldn;t find anything. (:

[beeee.]

http://www.divx.com/en/products/software/windows/divx (http://www.divx.com/en/products/software/windows/divx)

edit. i tried it. now look at my avii. yay.
going to keep trying till i get used to it! Hahah!

[_alexandragrace]

you know this DViX converter, is there a way to download the NON-trial one? ((:

[beeee.]

is there anyway to make the animations, a better quality?
but still small enough to use on the forum?

[SupersonicGeek]

^^ yea. there is. i'm writing the tutorial right now on how to download the vids in hq and hd.

[SupersonicGeek]

tut added (:

[beeee.]

thankyouu. (:

[Peaseful Wallpaper]

i don't have photoshop, and i'm not a registered Adobe user... so, is there any other programs to do thiss?

Video Avatar (http://geovid.com/Video_Avatar/) - the name speaks for itself :)
Personally I find the way that is described in the tutorial too complicated :confused:

[SupersonicGeek]

^^it's actually REALLY simple. you just gotta do it a few times

[Peaseful Wallpaper]

ok, i'm gonna try (:

[PINTO.]

I made it, i just wanna know why is mine so slow. LOL
http://i227.photobucket.com/albums/dd282/Oiopedia/ArchieMovingIcon.gif

[SupersonicGeek]

^^ use every other frame. idk why it goes slow when u use every frame

[Rachel*]

step 9 isnt working too well for me? it keeps putting the same layer in the animation window

[SupersonicGeek]

you gotta first add the frames, and then use your visibility. at first you have only visibility for the first frame, then on the next you add another. if that doesn't work, check your opacity. if you still need help, let me know.

[Funhouse_x]

what kind of file do u need? 'cos when i try with avi files its jst comin out like a white screen? =S x

[Funhouse_x]

bumpp?? :(
x

[Funhouse_x]

Bumppp?
x

[SupersonicGeek]

do you have the DivX encoder?

[Funhouse_x]

uhm.. yea i think i hve the right one..
x

[Funhouse_x]

woohoo i managed to do it xD haha.
not very good but oh well lol

http://i247.photobucket.com/albums/gg135/x_TakeABow_x/animations/Nick1.gif

i wanted to add text, but i wanted it like.. diagonal and when i tried it kept comin up with blue lines and moving the wrong thing :-S lol

[Funhouse_x]

nvm i've worked it out ;) hehe
http://i247.photobucket.com/albums/gg135/x_TakeABow_x/animations/Eoghan3.gif

[_niley]

the fading doesnt work with me i get this..
http://i43.tinypic.com/2qncim9.gif

[Rachel*]

The file is too big too upload onto zefron,any tips on making the size of the file smaller without losing the quality of the image?

[beeee.]

ok, uhh,
is there anyway, i can have the DivX thingymabob,
without having to buy? because
i really odnt know how much it is.
i cant find it online in pcworld.
because its lie expiredd.
lmfao.

[brokenmiracle.]

DivX download:

link#1 ( (http://fileforum.betanews.com/detail/DivX-for-Windows/995526772/1)20, 150 kb or 2.46mb)
link#2 (http://www.download3k.com/MP3-Audio-Video/Video-Utilities-Codecs/Download-DivX-for-Windows-incl.-DivX-Player.html) (18.44mb)

[bad romance.]

can you post a tut on how to add text ON the animation?
you know, like your avi? i was trying but i'm like, really dumb.
hahaa. thank youu!

[_alexandragrace]

keep the eye visable on the text layer in your layer palette ((:

[SupersonicGeek]

yea. what _alexandragrace said.
just add a text layer, and keep it visible on all frames. if you want me to post a pic to show u, let me know.