How to make animated gifs

  • Thread starter Thread starter Woodrow
  • Start date Start date
  • Replies Replies 35
  • Views Views 5K

Woodrow

May Allah have mercy on him رحمة الله عليه
Messages
17,217
Reaction score
4,224
Gender
Male
Religion
Islam
:sl:

I enjoy making gif and have been doing so ever since I first got a PC way back when W98 first came out. For making animated gifs I use Paint and MS gifanimator. MS gifanimator is an old program. I do not believe it is available as a free download anymore. However, there are many free ones still available if you do a google search for free gifanimator.

I will go through the steps I used to make this gif.

ANIMATION2-1.gif


I first think of what I want the gif to look like and do. Next I make a folder on my desktop. This will be my working folder. In this case I named it "Bouncing"

untitled-1.jpg


I then start making my drawings with paint trying to imagine each step needed. In an animated gif. Nothing is actually moving. It is a series of drawings each drawing being in a different posistion. there is a lot of trial and error (at least for me) I save each drwing in gif format and put it in the folder.

11-1.jpg


I then select the drawings I will actually use in the gif, In this case I selected these:

1-1.gif


1A-1.gif


1B-1.gif


1C-1.gif


1D-1.gif


1E-1.gif


1F-1.gif


1G-1.gif


1H-1.gif


1I-1.gif


1J-1.gif


1K-1.gif


1L-1.gif


1M-1.gif


1N-1.gif


X-1.gif


XX-1.gif


In the next reply I will introduce you to a gif animator and how to put the pictures together
 
This is MS gifanimator. It is a simple basic one with no frills. Some of the newer ones have more bells and whistles plus a few neat tweaking frills. But they all work about the same and have the same basic buttons.

2-1.jpg


The first step is to click here to open a new project
3-1.jpg


Here I would like to mention that when you load your images you do them in the reverse order you want the gif to run. In other words you put in the last picture first and work backwards from there.

Our next step is to open the folder we want to select our pictures from
4-1.jpg


6-1.jpg


7-1.jpg



Next we begin adding the remainder of the drawings. Working backwards

8-1.jpg


9-1.jpg


9a-1.jpg


We continue doing so, remember working backwards, until we have all of the pictures loaded.

9b-1.jpg


We then click on animation and select the attributes we want:

9d-1.jpg


Next we click on image and select the length of time we want the image to be visible before moving to the next image. This is listed in 100ths of a second. For normal motion you want to set it for from 12 to 16 images per second or a speed of about 8 to 12 100ths of a second. Here for the first picure I used 100 so the picture would show for one second on the bouncing dot I set the first one at 100 and the rest at 20.

9e-1.jpg


After you finish with all of the frames preview your work

9f-1.jpg


Make any changes you need to make at this point, working on one frame at a time

When you are satisfied with what you have, save it to a folder
9g-1.jpg


SAVE-1.jpg


Please feel free to ask any questions. Most of this becomes self explanatory as you dive in and try it.
 
:sl:

JazaakAllah khairan Uncle for showing how to do this. I have always wandered how it was done but was too embarrassed to ask! It's late here now but InshaAllah I wil try it soon and will let you know how I get on.

JazaakAllah once again.

:sl:
 
I did find a source for MS Gifanimator. It is freeware.

http://www.toggle.com/lv/group/view/kl34879/Microsoft_GIF_Animator.htm


But it only works with W98, 2000, NT and XP not for Vista

This next one will work with all windows operating systems including Vista. I have not tried it it looks like it has the same features but the menu is on the side and not on top.(HL free gif animator)

http://www.brothersoft.com/hl-free-gif-animator-136055.html

this one looks nice. In fact I'm going to download it. I will tell about it after I make a few gifs with it.

http://download.cnet.com/Beneton-Movie-GIF/3000-2186_4-10566148.html?tag=mncol
 
:sl:

Ah, cool stuff! Jazakallaahu khayran for taking the time out for the detailed instructions. :)
 
:sl: Brother Woodrow !

I was wondering same thing since I downloaded gifanimation. I tried to learn it step by step very slowly :embarrass.

Woodrow gave us instructions, which is very helpful. Thank you !

By the way, I see you spend your time to post this thread by 4:34 AM til 6AM ?!? Have you get good sleep yet ? :phew
 
I redid the gif and used the "Beneton" (Last download link) it is a good program and you can do a lot of editing of each frame after you have it loaded. I did a little playing with it and this is my result.

xxxspecial-1.gif


It does seem to have a lot more features for editing the gif as you are making it. I'm going to play with it as I make more gifs and see what all it can do. I'm used to the old MS but I may get to like this one






:sl: Brother Woodrow !

I was wondering same thing since I downloaded gifanimation. I tried to learn it step by step very slowly :embarrass.

Woodrow gave us instructions, which is very helpful. Thank you !

By the way, I see you spend your time to post this thread by 4:34 AM til 6AM ?!? Have you get good sleep yet ? :phew

Our days have gotten very short it does not get light until about 8 am and it is dark by 4:30 PM so I now find myself going to bed very early, but waking up long before fajr.

Another month and we will only have about 4 hours daylight each day. Right now the sun stays low in the south, even at noon time.
 
I notice I need to change the duration on the first frame so it will stay up longer. I'll do that later
 
I redid the timing between the frames and I believe this now looks much better.

xxxspecial2-1.gif



The Beneton gif maker is exceptionally good for editing already made gifs. It has some real nice features I vave not seen in other ones. It is taking me a little time to find everything that can be done with it. As soon as I get a little more comfortable with it I'll post up how to use it like I did with MS
 
:sl: Uncle Woodrow,

Jazaakallah khairan for all this info. I downloaded the Beneton GIF Animator, but actually got stuck on Paint of all things! I'd never put text into Paint before and didn't know how to, and also I didn't know how to get all the images the same size! :embarrass I'd only ever used it to select parts of photos.

Alhamdulillah I've learned a lot about Paint whilst doing this...and...after having a little play, here's my first humble attempt - please forgive the primitiveness of it. And I know the message is way to early, but I couldn't think what else to write!

Oh... :( it is actually small but won't let me upload onto the forum as it says that my file is too big

This is the message I get:
Upload Errors
File.gif:
Your file of 45.5 KB bytes exceeds the forum's limit of 19.5 KB for this filetype.

...but it looks smaller than your picture to me...... I may have to re-do it all......let me have another look at it.
 
Last edited:
:sl:

Yes, I've compared mine against yours, mine's less than a 3rd of the size (could be quarter), and with smaller text. Mines 48KB, but it says that the gif limit for uploading onto the forum is 19KB I think. If I make each frame less than half the size that it already is, you won't be able to read it, so that's not worth doing. I don't know what to do....

Any suggestions?

Jazaakallah khair in advance

:sl:
 
Last edited:
:sl: Uncle,

Just wandered if you'd had any thoughts/ideas about this yet.

Incidentally, how did you upload the screenshots of your desktop, as they look quite big?

Also is it possible to increase the gif file size limit for uploading to say 50KB?

Jazaakallah khairan in advance for all your help.

:sl:
 
Last edited:
:sl: Uncle,

Just wandered if you'd had any thoughts/ideas about this yet.

Incidentally, how did your upload the screenshots of your desktop, as they look quite big?

Also is it possible to increase the gif file size limit for uploading to say 50?

Jazaakallah khairan in advance for all your help.

:sl:

I don't upload my images to the forum. I upload them to an image host. I use photobucket and then I use the img tags and the url of my picture and post it. That has no size limit for posting.

I'll do a series of pictures here on how to post images and also how to do screen shots of your PC. But, it won't be for a day or too, way past my bed time. Almost time to get up for fajr, and I have not been to bed yet.
 
Ooooh ok! Hmm, I really do have a lot to learn. I've just this minute registered on photobucket and am going to see if I can upload now.

EidMubarak.gif
 
Last edited:
Yaaaay!!!! :D

Alhamdulillah, it's working now! I'd used the wrong Photobucket link, but now I've got the right one, you can see my gif image in the post above.

See, that's another that I've learnt, how to use a photo hosting website. Sorry, as you can tell, technologically, I'm way behind comapred to most people.

Jazaakallah khairan katheeran fiddunyaa wal aakhirah for all your help Uncle!

:sl:
 
Last edited:
I am getting the hang of this now...this could be quite addictive!

However, I do need to get a bit more creative than just straight text...so that's something I'll play about with in future.

In the meantime, my first message was somewhat premature...so here's a more timely one!

Jaz.gif
 
I am getting the hang of this now...this could be quite addictive!

However, I do need to get a bit more creative than just straight text...so that's something I'll play about with in future.

In the meantime, my first message was somewhat premature...so here's a more timely one!





And Jazakallah Khayran to you also. You are getting the hang of it. Soon you will using the very same method with drawings. Flowers are a good starting subject.
 
At this point I am going to sidetrack from animations and try to explain how to post screen shots of your desk top, how to use an image host and how to post from an image host.

Saving a sreen shot is easy. simply push the button on your computer called "Print Screen" it may be abbreviated as "prt scr" or similar. As soon as you push the button open paint



a-1.jpg


Click on the edit button and when the menu opens click paste.

d-1.jpg


You should then get paint with your desk top on it.

e-1.jpg


Click on file and save to wherever you desire to save it. I always keep a folder on my desk top to use as as a working folder, in which I can save, upload and delete images as I desire.
 
Now that you have your desk top saved you need to save it to your image host. Since I have the pro version of photobucket I will show how to upload to upload to photobucket. all of the image hosts will be similar. Don't get scared of my screen shots of photobucket. I have over 30,000 images on it and about 100 seperate albums. Most people don't use that much. But, I use it for my online stores and have the pictures I use for them and my online catalogs.

Anyhow here is photobucket

f-1.jpg


The first thing I have to do is decide what album I want to upload the image to, so I scroll down to the album I am going to use.

g-1.jpg


I then open the folder by clicking on it

h-1.jpg


i-1.jpg


and upload my pictures from the folder on my desk top

k-1.jpg
 

Similar Threads

Back
Top