JPHiP Forum

General => Akihabara => Geek Guides => Topic started by: maliciel on September 27, 2005, 07:07:13 AM

Title: Animated gif tutorial
Post by: maliciel on September 27, 2005, 07:07:13 AM
I did this for another forum. I thought it'd be useful. o_o

Tools needed to make a faptastic animated .gifNote : Imageready comes with Photoshop

Pre-making

When you're at the VDubMod site, download VirtualDubMod_1_5_10_2_All_inclusive.zip and extract it to your favourite directory. Then click on VirtualDubMod.exe to run it~

Watch the video, and note down the approximate time you want the gif to start and end.

Note : You can use other VDubs, you just need to have the 'save image sequence' command

Step by step~

Open up vdubmod. Click Open video file..and browse to the video you want to use. After you open it, you should get the frames displayed~

(http://img367.imageshack.us/img367/5747/tut0012jv.jpg)

If your intended gif starts at the start of the video, you can skip these next three steps. Click Edit -> Set Selection Start. This sets a selection.

(http://img352.imageshack.us/img352/5801/tut011ki.jpg)

Now, Edit -> Go to.. and put in the time (which you noted when you viewed the video. This would seek to that time. If you're on a blurry frame, click >> (at the bottom of the frames) as much as needed, to get a good frame/good starting point for your .gif

(http://img381.imageshack.us/img381/7483/tutgoto7lh.jpg)

Now, when you picked a good frame for your .gif to start on, go to Edit -> Set Selection End. This would result in a part of the time-bar on your video to be highlighted. After that, just press the Delete button on your keyboard. This would shorten the vid, to start at the beginning of your gif.

(http://img352.imageshack.us/img352/500/tut19ej.jpg)

Now, use >> or if you have the time copied down, use Go To.. to go to the end of your intended gif. Again, use << or >> to set a good ending frame. Then, use Edit -> Set Selection Start. After that, just drag the seeker all the way till the end, use Edit -> Set Selection End, and press Delete. This will narrow the vid down alot more, and you'll get a vid with just the frames you want. Congrats, you're halfway through!

(http://img352.imageshack.us/img352/9233/tut25sc.jpg)

Now, click File -> Save image sequence to save all your frames into individual images for the .gif

(http://img352.imageshack.us/img352/7840/tut30zd.jpg)

When you select a directory to save to, make sure it's already made beforehand, because VDubMod will not automatically make it for you. I recommend .png, because that's the only format i've tried. :lol:

(http://img352.imageshack.us/img352/9500/tut41ld.jpg)

Now, you can close VdubMod after it's done saving. Open ImageReady. File -> Import -> Folder as frames

(http://img352.imageshack.us/img352/9334/tut53gc.jpg)

Self-explanatory. Select the folder you saved the frames in. And no, you don't get to ask what I blurred out. :p

(http://img352.imageshack.us/img352/2771/tut67wv.jpg)

Now, it's up to you to do cropping, or anything you want. Remember to resize so it won't be fucking huge. People tend to get angry when you do that. Now, go to Save Optimized As.., to save your gif. This should get it saved as an animated gif. Voila.

(http://img352.imageshack.us/img352/7275/tut77yv.jpg)

This was my end result~ (http://img142.imageshack.us/img142/6301/reinamako1km.gif)

This concludes the tutorial. I hope you guys found this useful~

(http://img142.imageshack.us/img142/6301/reinamako1km.gif)
Title: Animated gif tutorial
Post by: shadowstar on September 27, 2005, 08:35:26 AM
awesome-ness.

thanks Mal! I already know how make animated GIF's, but this has lots of awesome tips :heart:
Title: Animated gif tutorial
Post by: TheQuickening on September 27, 2005, 04:05:24 PM
Hmmmm...seems pretty straightforward.   Now wait and see how many people start popping up with ani-gifs in their sigs and avvys.  :D  :D  :D
Title: Animated gif tutorial
Post by: nori-p on September 28, 2005, 09:02:12 AM
Thank you very much!!!

I've been wondering how to make a GIF.
Title: Animated gif tutorial
Post by: Sexy Beam on September 29, 2005, 02:37:45 AM
Oh. o_O

See, I used to just take a screen shot... One by one and animate it on ImageReady. But it took A VERY LONG TIME. XD So I gave it up cos it was too time consuming. XD

Thanks! :D
Title: Animated gif tutorial
Post by: kuno_thunder on September 29, 2005, 08:50:15 AM
Hmm, seems like ImageReady doesn't like my computer.  Oh well, hopefully a complete reformat and Windows XP will change all of that.
Title: Animated gif tutorial
Post by: Kennethzzz on March 08, 2006, 01:42:32 PM
oo thx for the guide
Title: Animated gif tutorial
Post by: Yasu on March 08, 2006, 02:26:25 PM
Hey, thanks, Mal!

I'm glad someone found this and bumped it ~
Title: Animated gif tutorial
Post by: sothich on April 05, 2006, 12:52:52 AM
wow thanks Maliciel so much for this tut
Title: Animated gif tutorial
Post by: sothich on April 05, 2006, 11:02:35 PM
yeahh I have the first Animated gif  :bounce:

(http://img20.imageshack.us/img20/6076/rikabyebye3cq.gif)

tks Maliciel again ^.^
Title: Animated gif tutorial
Post by: Vodka on April 06, 2006, 05:58:52 PM
Great tutorial! (probably more informative than any of my Math or Physics tutorials)
Title: Animated gif tutorial
Post by: Tao Priest on April 14, 2006, 02:20:28 AM
I will try it at the weekend!  :D Thx for the tutorial!
Title: Animated gif tutorial
Post by: Stone_Bone on April 15, 2006, 01:53:48 PM
I try to use it :D Thanks i searched such a Tutorial since long ago ^__^ *ieeeek*
Title: Animated gif tutorial
Post by: ziggurat on October 03, 2006, 06:17:17 AM
Thanks mal! great tutorial. i need to know what is the blurred up entry.. lol
Title: Animated gif tutorial
Post by: num2son on December 15, 2006, 05:10:10 AM
Thanks again.
Title: Animated gif tutorial
Post by: Fracture on December 16, 2006, 03:20:26 AM
Quote from: num2son;259681
http://img258.imageshack.us/img258/2264/untitled1sa0.gif
This is the first one i made Gza - Liquid Swords

THANKS ALOT MAN
It's a good start, you should probably scale down the dimensions, though.  One and a half megs is huge for such a short clip.

Also, if you're using ImageReady, familiarize yourself with the optimization pane, you can drop out a lot of unnecessary colors and what-not.
Title: Animated gif tutorial
Post by: AiChan on December 17, 2006, 11:31:32 AM
Thanks alot for this guide. I'm gonna try it later today.
Title: Animated gif tutorial
Post by: N1CK70 on December 17, 2006, 04:33:15 PM
Sweet tut, thanks a bunch :D
Title: Animated gif tutorial
Post by: drobin on December 22, 2006, 08:12:10 AM
cool tanks man i realy wanted to know how to do a gif XD
Title: Animated gif tutorial
Post by: num2son on January 16, 2007, 01:02:47 AM
I have to say thanks again for the tutorial, I've made a dozen since.
Title: Animated gif tutorial
Post by: RatBastich on January 16, 2007, 02:24:04 AM
Anyone know if a animated gif can be made without dither?
Thats pretty much why I don't like doing ani gif's anymore, dither always messing it up.
Title: Animated gif tutorial
Post by: Fracture on January 16, 2007, 05:04:36 AM
^ Yup, with IR you can scale it or turn it off completely.
Title: Animated gif tutorial
Post by: dorobo on February 12, 2007, 05:50:34 AM
ty wanted to learn how to make gifs so badly
Title: Animated gif tutorial
Post by: martincello on February 27, 2007, 10:38:40 PM
thanxx for your tutorial.
it makes so easy !!:D
Title: Animated gif tutorial
Post by: Koolmon93 on February 28, 2007, 08:28:10 AM
Ummm, I can't find ImageReady anymore... lol..
Title: Animated gif tutorial
Post by: fullyinsane on March 04, 2007, 04:14:20 PM
hm...i forgot the softwares i used few years ago to make gif...so ill be using this in the future...
Title: Re: Animated gif tutorial
Post by: panida on April 27, 2007, 10:31:31 AM
Thx I will try it
Title: Re: Animated gif tutorial
Post by: dat on April 27, 2007, 11:02:26 AM
thanks im gonna try it out later
Title: Re: Animated gif tutorial
Post by: Rick-e on April 27, 2007, 04:08:18 PM
Thanks for the tutorial! does anyone have any suggestion on how to reduce the file size? currently all I know is to:
-reduce the picture size (duh), and:
-erase some frames, like if there are 10 frames then I delete frame 2,4,6,8,10

anyone knows of a better way? :p
Title: Re: Animated gif tutorial
Post by: Fracture on April 28, 2007, 12:17:44 PM
-reduce the picture size (duh), and:
-erase some frames, like if there are 10 frames then I delete frame 2,4,6,8,10

These are the most important, you should have some mercy on other people's bandwidth and do these for every single gif you make.  Sorry, I die a little every time I see someone posting a five-second gif that's over a megabyte, when about one minute's worth of optimization could have cut it in half without losing quality.

There's more you can do, say hello to the IR optimization pane:

(http://img228.imageshack.us/img228/8236/optxv6.gif)

- Optimize the palette.  IR defaults to the maximum color count (256) when in fact you almost never need that many.  If you have a lot of time and patience, you can really go nuts with this and manually pick only the colors you need.  Most of the time though it's enough to let IR decide which colors to prune.  The easiest way is to try dropping the count from 256 to 128; if it looks bad increase it a little until you find a setting you can live with, otherwise keep going down until you can't cut anymore without dropping a vital color.

- Adjust the dither.  Dither can be good in that sometimes you can lower the color count by rather a lot and it will mask the effect.  Other times it's best to scale it down or just turn it off.  My advice is to play around with it to see what looks best, you can usually shave off a few kb by experimenting with dither.

- Increase the lossy.  I'm willing to bet that there's not a person alive that can detect the difference between a gif at 0% lossy and one at 5% with the naked eye.  It's not much of a difference in terms of size but it may be just enough to get an avatar under 50kb or whatever.

- Remove redundant frames.  This isn't usually an issue when you're working with a live-action source, but if you're cutting from other stuff (like Flash animations or cartoons) there will probably be several identical or near-identical frames.  If you have a double, junk the first one and double the delay on the second.  No one will ever know the difference.  Open this gif in IR and look at the frame delay, you'll see where a ton of redundancy was cut:
(http://i140.photobucket.com/albums/r31/SayumiBeam/slippers2.gif)

This is way more than I meant to type so I'm gonna stop now.
Title: Re: Animated gif tutorial
Post by: kukine on August 21, 2007, 09:08:27 AM
Now I know how to properly make an efficient gif. Thx~
Title: Re: Animated gif tutorial
Post by: Maxis on November 02, 2007, 09:27:23 AM
what is the use Adobe Imageready ?
Title: Re: Animated gif tutorial
Post by: WaiRai on November 15, 2007, 07:49:34 AM
hello... can i use the tutorial of making gif to put in the forum that i joined.. really glad if u can give permission

ONEGAI!!
Title: Re: Animated gif tutorial
Post by: WingZero84 on May 23, 2009, 10:21:11 AM
 Thank you for the guide.
Title: Re: Animated gif tutorial
Post by: whiteleppard on February 21, 2010, 07:08:01 PM
I found this guide very useful, thanks for posting it.  I've tried various programs, and many different methods, and this one was by far the easiest one. 
Title: Re: Animated gif tutorial
Post by: JFC on December 18, 2012, 07:26:27 AM
Found these through random online surfing; thought they might come in handy for anyone that may have CS5 or CS6 but who may not know how to use them for GIF-making. :thumbsup

After all, mal's awesome tutorial was made waaaaaaaaaaaaaaaaaaaaaaaaaaaaay back during JPH!P's first year, and the available software has changed a bit since then.  :nervous


http://www.briandalessandro.com/blog/create-an-animated-gif-in-photoshop-cs5/ (http://www.briandalessandro.com/blog/create-an-animated-gif-in-photoshop-cs5/)

http://www.briandalessandro.com/blog/convert-a-video-file-into-an-animated-gif-with-photoshop/ (http://www.briandalessandro.com/blog/convert-a-video-file-into-an-animated-gif-with-photoshop/)

http://jaggedlittlefangs.tumblr.com/post/14637979304/tutorial-on-how-to-make-gifs-with-kmplayer-and (http://jaggedlittlefangs.tumblr.com/post/14637979304/tutorial-on-how-to-make-gifs-with-kmplayer-and)
Title: Re: Animated gif tutorial
Post by: nimrod on May 10, 2014, 11:27:34 AM
Why so complicated ?

I'm only using gifcam and it works fine, there is no resolution or file limit except your screen
http://blog.bahraniapps.com/?page_id=21 (http://blog.bahraniapps.com/?page_id=21)
for more features and tutorials see blog

see my gifs @
http://nimrahwt.tumblr.com/ (http://nimrahwt.tumblr.com/)
all done with gifcam:
(http://abload.de/img/reinadesign10oxj3g.gif)(http://24.media.tumblr.com/941e2afccd1189bbad6d89c31b2fdbba/tumblr_n5b59mjPiL1tnos68o4_r1_250.gif)

you can also  add text or loop it, or make it monochrome/black+white and you can always see the filesize (preview) or export to avi
(http://24.media.tumblr.com/116c1b3b48d77dc070e005287601b2fe/tumblr_n3o9zb9Rq71tnos68o2_r1_400.gif)(http://37.media.tumblr.com/fcc953f3d2cf6ed4597597cc540c7aba/tumblr_n52zwfA6iO1tnos68o1_400.gif)
(http://abload.de/thumb/unbenannt5hiba.png) (http://abload.de/image.php?img=unbenannt5hiba.png)
I'm using 16fps most of the time and change the delay to 0,08 seconds (in edit mode click on any delay field and hold shift and move the mouse to the left or right side)
(http://abload.de/thumb/unbenannt2hzqy.png) (http://abload.de/image.php?img=unbenannt2hzqy.png)
Title: Re: Animated gif tutorial
Post by: scorn on February 20, 2016, 06:29:44 PM
Hi,

Which gif solutions (freeware) will work with making gifs (like 12-second long ones) from youtube video links?