How to make your own animated GIFs

[Eruruu]

Ah ok, I'll give it a try. And my first gif ><

[felix]

Spoiler for Relys, Comments, Edits etc:

Originally Posted by Deathkillz

well sorry for being a total noob but is the tutorial on making the gif smaller (bytes) on the "Optimizing Gifs Tutorial" section? just to make sure

I remade it so it's easier to read and to find things... hopefully

Also added some of the most basic stuff... like how to post your image

If it's still not n00b friendly then please tell what's so hard about it... and, if possible, how to make it better...

//edit :
@ Shiryuu - post bellow

It's different then the one before you know...
Anyway... the reason is because this thread has starting to become futile... Look how many tutorials just to make borders... hell... more then half of them just say the same thing...

Why futile... because... for example Kira_Naruto ends up creating a How to Create border tutorial... then 2 post later Catgirls ends up creating one as well...

As long as this big post is noticed and people can learn to help themselves... is that wrong ...

Anyway... Thx for the feedback... I edited it so its shorter ...

//edit 2
Added Catgirls' tutorial from the Feedback forum...
Made a few adjustments...

==================== Index ====================

F.A.Q.

• For the Step by Step total newbie guide to making simple avatars please visit the... How to make your own animated Gifs (ImageReady/Virtual Dub)
  //Note : ImageReady comes with PhotoShop
• If you have problemes opening certain .avi files in VirtualDub make sure you have XviD
• To learn how to open a .mkv (the .h246 devils ^_^) or a .mp4 file in VirtualDub go Here
• To learn how to make borders please read... This Post
• VirtualDub can be found at www.virtualdub.org
• For a FREE program to make gifs go here http://www.gimp.org/
• To learn how to post your creations and other information please see the last part of this post

Category Index

1. Border Related Tutorials
   • » Go « Adding Border © Wandering_Youth
   • » Go « Borders in Gimp © Green²
   • » Go « Borders in ImageReady © sarcasteak
   • » Go « Making Borders © Kira_Naruto
   • » Go « Making Borders © Catgirls
   • » Go « Making Borders - Methodical Explanation (part1) © BlackCatXIII
   • » Go « Making Borders - Methodical Explanation (part2) © BlackCatXIII
   • » Go « Rounded Edge Tutorial © Yuiichi
   • » Go « Advanced Rounded Edges Tutorial © Yuiichi
   • » Go « One way to add a border to animated GIFs © Catgirls
   • » Go « Rounded Border Tutorial © BlackCatXIII
   
   
2. Making your Gifs/Stills smaller (bytes)
   • » Go « Optimizing Gifs Tutorial © BlackCatXIII with expansion by Kira_Naruto
   • » Go « Advanced Optimization Tutorial © Riker
   • » Go « Dynamic Optimizing Tutorial... © BlackCatXIII
   • » Go « Optimizing Tutorial © BlackCatXIII
   
   
3. How to Seperate Part of an Image Tutorials
   • » Go « Pen Tool Tutorial © Dragonwingz
   • » Go « Cutting Render using Quick Mask Tutorial © Kira_Naruto
   • » Go « Separating a character from e background © jevony
   
   
4. Text Related Tutorials
   • » Go « Shuffle Text Tutorial © Yuiichi
   • » Go « Getting/Using New Fonts Tutorial © SweetHoney
   • » Go « Getting/Using New Fonts Tutorial © BlackCatXIII
   • » Go « How to remove subtitles © Green²
   
   
5. Making Selections, Croping & Resizing Tutorials
   • » Go « How do you cut the part of the snapshot you don't need? © Pellissier with expansion by Kira_Naruto
   • » Go « Resize Picture Tutorial © Catgirls
   • » Go « How To Make Complex Selections Tutorial © BlackCatXIII
   • » Go « Resizing to Gif size © Kira_Naruto
   • » Go « How To Stop the Glue Effect... © Keios
   • » Go « First Frame in Animation thing... © Uzumaki626
   • » Go « How to stop changes in the first frame from effecting the rest © Lone Wolf
   • » Go « Croping in ImageRedy © Kaitou.DarK
   • » Go « Cropping & Resizing under GIMP for Windows © Green²
   • » Go « Alternative Cropping Technique © BlackCatXIII
   • » Go « How to resize without getting the pic become pixel © Amaranthine
   • » Go « How to crop different frames in different areas © Kira_Naruto
   
   
6. Troubleshouting Information
   • » Go « How to open mp4 files © Pellissier
   • » Go « Opening H.264 files © Green²
   • » Go « Gifs in Mac © 1.0.7.
   • » Go « What programs can I use for Linux so I can make my own animated GIFs? © Green²
   • » Go « Help with Rm Rmvb files © Weasel29
   • » Go « Frame Problem Solution (GIMP/Irfanview) © Green²
   
   
7. Alternative Frame Capturing Techniques
   • » Go « Frame Capture Guide (Media Player Classic 6.4.7.7) © Green²
   • » Go « Frame Capture Guide (Media Player Classic 6.4.7.8) © Green²
   • » Go « Image Capture Guide - ffdshow (build 5/1/2004) © Green²
   
   
8. Other
   • » Go « Brushes Sites © Yuiichi
   • » Go « Layer Blending Tips © Drake
   • » Go « Filters Tutorial © Kira_Naruto
   • » Go « Brush Background Tutorial © Yuiichi
   • » Go « Color Up Your Signature Tutorial © Kira_Naruto
   • » Go « Changing Colors Tutorial © Kira_Naruto
   • » Go « How to do a (non continuos) Loop Tutorial © Pellissier with expansion by Kira_Naruto
   • » Go « Short-cut Tutorial © evil-samurai
   • » Go « Inner Glow,Outer Glow © SweetHoney
   • » Go « Some PhotoShop benefits... © BlackCatXIII
   • » Go « How to put two animated sequences into one © Uzumaki626
   • » Go « Standard Animated GIF Guide for GIMP 2.0 for Windows © Green²
   • » Go « Animated GIF Guide for GIMP 2.0 for Windows (GAP Edition) © Green²
   • » Go « How to reduce frame rate © sarcasteak
   • » Go « Palani's Guide For Horizontal/Vertical Scrolling © Palani
   • » Go « How to make gifs faster © Keios
   • » Go « Gimp Animation Package "GAP" © Green²

What kind of signatures are allowed on AnimeSuki ?

Spoiler for Answer:

Originally Posted by AnimeSuki – Forum Rules - 3.1 Size Limits

In order to keep The Forum fast for those who wish to see signatures we feel it is necessary to impose limits. Various combinations of images and text are permitted in signatures; these are summarized below:

• Text Only
  Text only signatures may have a maximum of six (6) lines of text (including blank lines), assuming the default font size or smaller. Larger font sizes means that fewer lines are allowed.
• Images Only
  50,000 bytes or less: Maximum of 500 pixels wide x 160 pixels tall
• Image and Text
  Signatures with both text and images may have a maximum of two (2) lines of text, assuming the default font size or smaller. Larger font sizes are not permitted.
  50,000 bytes or less: Maximum of 500 pixels wide x 120 pixels tall

If multiple images are used, then the limits apply to all images combined.

Signature size problem... (common beginners mistake)... watch out for this or you'll get in trouble ^^

How do I post Images ?

Spoiler for Answer:

To place an image in a post you must first upload it to a imagehost site like ImageShack.us or PhotoBucket.com

Both of these sites offer this service for FREE

ImageShack.us

NOT recommended for Opera users

If you are an Opera user please make sure you have the Open all pop-ups option selected from the F12 menu...

When uploading images in ImageShack ...

1. Make sure you have these selected...
   
   
   
   In some cases the second is better unselected... to warn other members of high load time... and the actual size of the image (for example a 2000x2000 resolution image)...
   
   
2. Make sure you copy the Hotlink to forums (1)... it's design so that one click will select it all... for easy use ... also it contains the VBulletin code necessary for the image to be visible directly in the forum... with the settings above the image, no matter how big it is will show in the forum...
   
   
   
   
3. When uploading large images make sure you copy the Thumbnail for forums (1)
   
   

Here's an example of how an image looks if you copy Hotlink to forums (1)



Remember... copy this type of text : [URL=http://imageshack.us][IMG]http://img212.imageshack.us/img212/5725/randomsigy4iy.gif[/IMG][/URL]

Little tips...

• Don't post huge images in the forum (as in don't post them in the forum at there actual size... as long as they fit in a normal window it should be fine)... if you have a large one then post the thumbnail... if you don't follow this then an Admin/Mod might get angry...
• Try to avoid clicking Back in your browser... it tends to either cause errors or increase uploading time... well that's how it seemed from my perspective ... just use the frog icon on the left (it's a button )

PhotoBucket.com

Step 1. You must have an account... don't worry it's FREE
Step 2. After you create your account make sure you create several Folders... basically it's a bad idea to just upload them directly into your album... since if you eventually decide to move them or something the links will become invalid... and I've seen tons of posts with the "Upss I've seen to have moved my picture." error message from PhotoBucket

To create a Folder simply enter a name in New Sub-Album Name dialog box and press create...

For example... I have 3 folders... Avatars, Smilies and Misc...
Every little pic I don't care much about I upload in the Misc folder... including the image bellow...

To upload a pic into a folder click the folder name (as you would a link) to enter it... (note that the little ball just means it's selected... not that you're in it)

Step 3. After you've entered the Sub-Album you want click the Choose... button and select the image from your hdd...

If you wish to upload more images at once select the number you wish from the drop-down menu Submit Multiple Images... don't worry if you selected a larger number... blank spaces mean nothing...

This is one of the features that make PhotoBucket superior to ImageShack... since in ImageShack you need to pay for this option...

Step 4. Once you completed the previous step... hit the Submit button... and wait a little... once it's finished you should see your image(s) bellow... copy the Img text and place it in your post and it's done ^_^

How do I place an link in an image ?

Spoiler for Answer:

To make it simple... this is basically what the code is supposed to look like...

[url= <Adress of the Web Page you wish to link to> ] [IMG] <Adress of the Image> [/IMG] [/url]

For a detailed explanation please read Catgirls' Post

[Shiryuu]

^ How many times do you intend to post that long ass list? You could at least put in spoiler tags.

[Eruruu]

Got a simple question:
How come when I try to add text on the last frame for example, it shows up on the first one only?

[Amaranthine]

Text will show up on the frame you have selected when you create it. So if you want it on the last frame only, make sure you have the last frame selected. If you want it on all the frames, select the first one and then turn the text's visibility off and on again, like what BlackCatXIII said in her latest border tutorial. Make sure the text layer is on top of all the others as well.

[Eruruu]

I am on the designated frame, in my case the last one. However, nothing shows on the frame I selected, but its only on the first frame.

[WarpObscura]

This is probably the stupidest question ever, but anyway: If I am trying to make an animated GIF out of a non-AVI file, what do I do?
Find a "Format X" to AVI converter first?
Or what?
I am specifically looking for help with .wmv files, if that detail gives any aid.

[Green²]

Originally Posted by WarpObscura

This is probably the stupidest question ever, but anyway: If I am trying to make an animated GIF out of a non-AVI file, what do I do?
Find a "Format X" to AVI converter first?
Or what?
I am specifically looking for help with .wmv files, if that detail gives any aid.

Guide Opening H.264 files should also work on just about any playable video file as well. (.mov .wmv .mp4 .avi .mkv .mpg)

Directshow, so you probably will not have to apply any VFW stuff.

[WarpObscura]

Yeah, it works. Great! Thank you.

[felix]

Originally Posted by Eruruu

Got a simple question:
How come when I try to add text on the last frame for example, it shows up on the first one only?

Originally Posted by Eruruu

I am on the designated frame, in my case the last one. However, nothing shows on the frame I selected, but its only on the first frame.
You want text to show up the same on all of the frames right...

Solution :

1. Select the frame that the text the way you want it...
2. Select the layer...
3. Make sure the text layer is on top of every other layer... (move it if necessary)
4. Now just click these 3 buttons...
   
   
   

   From left to right they are... Unify Layer...

   • Position
     
   • Visibility
   • Style

5. Hit match when the dialog box comes...

   Now every frame should have the same settings as the one you were on...

____________________________

Those 3 little buttons should solve any other problems that involve fixed elements...
Like for example you have a border... added a some style... but it only shows on one frame... etc

[sasuke13]

Im trying to make an ani. GIF as well, I've deleted the between fames to try to make it smaller, but the size is still something like 300KB-something. I have a few newb questions:

How do I lower the the dither?

Do I have to decrease anything else othe than size?

On the tutorial, when it was talkng about the "new frame buttton" was it talking about the tweening frames icon? If so, how do I use it properly, and if not, where the heck is that new frames option?

And frame rate of 0 doesn't seem to be a problem for me. If I change it and make one frame rate different than another, it'll make it slower in the previews on IE and in Imageready. If it it IS supposed to be a problem, can someone tell me how to put framerates in properly? And give me a pic example?


Oh and also is there a reason why the end result GIF "flickers" on the edges? I mean it doesn't flicker On an image host like photobucket, but like when I preview it in Fax Viewer...something wrong?

[Potatochobit]

is there anyway to make the gif play forward and then play backwards in imageready?

[felix]

@ Rikichi

Wrong thread...

@ sasuke13

Quote please (not just the part you described...)

Anyway... I think I'll write a new tutorial on optimization... sum up about everything, add some stuff and include images to make it fool proof... probably make it like a simple guide people can follow to get they're gifs smaller...

@ Potatochobit

Duplicate frames... delete the first and last frame(from the duplicates) then reverse them (the duplicates)...

Of course if you were thinking what I think you were thinking then the answer is... no... with professional software no... but it's probably possible with dirty tricks... like it's possible to create gifs with more then 256 colours... True-Color GIF Example (32697 colours)

[Aiya Kasai]

QUOTED FROM TUTORIAL: You can add "Lossy" in which as described by a fellow member as making your GIF "dirty."

What exactly is lossy and how do you add it? It doesn't tell you how.

[Bloo Hyakki]

A question. VDub cannot use mepg-4 files, is there another program that can?

[felix]

@ Bloo Hyakki

Have your tried Green²s tutorial... Link

I know its for H264 files but it seems to work for anything...

[M.D. Geist]

Originally Posted by BlackCatXIII

@ Bloo Hyakki

Have your tried Green²s tutorial... Link

I know its for H264 files but it seems to work for anything...

*.rm files or realmedia files in general cant be used this way i think...

Other than that, mp4 and mkv should work fine

[felix]

Oh yes they can...
I've done it and it works fine (sorta)... of course the quality is too poor...
Also I suggest using VirtualDub mod...
And while they will open its kind of a pain to get the frames... but it is doable...

[Bloo Hyakki]

Thank you. I'll give it a try.
Edit: It doesn't work. Dx

VDub mod..?

[Green²]

Originally Posted by M.D. Geist

*.rm files or realmedia files in general cant be used this way i think...

Other than that, mp4 and mkv should work fine

Install RealMedia Splitter.
http://www.free-codecs.com/download/...a_Splitter.htm
There are Windows installers also available at the next download page, which should help make the installation a bit easier.

Once installed, then try the .avs script in VirtualDub.

Originally Posted by Bloo Hyakki

Thank you. I'll give it a try.
Edit: It doesn't work. Dx

When you open the script into VirtualDub, what errors do you get?

Is the file playable in your video player? (Perhaps within Windows Media Player? ...VLC and mplayer/MPUI don't count due to internal codecs)