How To Make An Animated Gif
Made Easy With Examples


I will make this as simple as I can. If you still have any problems or still don't quite understand, E-mailMe and I will try to help you.

You start with your picture, sometimes a large one works better. You want to be able to get a decent small picture from it without having to enlarge it. Doing that can sometimes make it blurry, or the object may appear much larger. You can always reduce the size much easier without distorting the picture.

Examples of the ones I used:

"Click here for picture 1"
"Click here for picture 3"

"975x960" 137.7K picture 1 "924x948" 127.8K picture 3


These pictures are extremey large so I went to Web Fx to reduce their size and the amount of bytes the pictures have.(WebFx will not output a picture wider than "400")


*Put in the Url of the picture


*Chose from the pull down box Apply "buttonize"


*Next at "low"


*Then at the bottom, with background color:#ffffff (#ffffff is white), I "erase" these leaving it blank so the background will be black


*Last click on "apply effect".


*Next "here it is" will appear with the new effect & new dimensions.

*Click onto the picture (you have to click onto the picture in order to get the temporary URL#)


*Then press onto your f-key that takes you to your transloader Freeloader File Uploader where you now transload it to your FTP account. (tripod, geocities, xoom etc...) Or you can use the one there provided for you, which is "Star Blvd".


When I name any of my new work, I keep the same name it is, but I add in the front of it either an "O-" for optimized (reduced bytes), "R-" (resized) or "button" (buttonized), so I'll know it's the same picture, only with a new effect. I normally use "gif" rather than "jpg", because gifs load faster. (*NOTE* animations have to be in a gif format or it will not be animated)


The new dimensions and byte size is now,

"button of picture 1" 400x393 with 15.3K bytes


"button of picture 3" 400x390 with 14.4K bytes


Width is usually first, then height. This procedure will not work on "animated" gifs, because they will loose their animation & become a still picture instead. I will tell you the best place to go to reduce the byte size for animations a little bit later.


It's easier if you have the all pictures you are going to use to create your small pictures from, in the same directory, but not neccesary. Although, in order to make an animation, all the pictures that are going to be used in it, will need their own subdirectory, for them "only".


You have to "Create" a sub-directory for them, for example, I used CJ (the name of the picture I'm using)


Now as I create all of the small pictures I'm going to use in my animation, I will upload them to that sub-directory.


Now to begin "cropping" small pictures like I did from the "2 Pictures" listed at the top of the page. It's also a good idea to have a scratch pad so you can write the calculations down as you are cropping the pictures. All the cropped pictures need to be the same size or it will not look right.


#1.)The url of your picture.


Either have all the urls you are going to use at hand or you can click onto your picture, and cut, copy, paste it's Url into your "go to" window.


#2.) Go to Image Magick.


Go to " ImageMagick Studio" go down to the bottom where it has URL. Type in the Url of your picture or paste the Url in if you chose to cut, copy & paste. Be sure to erase the http:// that is already there if you paste in your url. Now click on to view.


#3.) Step 1 of cropping a picture.


When your picture becomes visible, go to the top of the page and click on to "Transform"


Here is where you are going to need your scratch paper.

You are going to start cutting away from your picture, we'll call the excess, until you get the desired small picture that you like. There will be some trial & error here, so write down the different applications you'll need to get the overall view you like, what subtraction and addition you'll need to get your overall view, and finally the dimensions of the final picture you decided on.


#4.) Step 2 of cropping a picture.


Now click onto the button next to crop.


This is what you need to put in the box that requires the parematers that are going to taken off of your picture.

the width x height of your picture first:


(example: "my picture 1" before cropping) 975x960


Click on the thumbnail picture to get a larger view.


Now the part that is actually going to be taken off. This is where you might have to do alot of trial & error until you achieve your satisfied picture.

(example: my "picture 1" after first cropping) 975x960+420-525


Click on the thumbnail picture to get a larger view.


After the width x height, +420 tells how much to take off of the right side and -525 tells how much to take off of the bottom of the picture.


Now click onto transform at the bottom of the page. If you aren't satisfied with outcome of those demensions, hit back and try another number for (+ and - only). Or if you are satisfied with one and not the other, keep the number you like and change only the number of the one you don't like. Do this until you have finally achieved the correct amount you wanted taken off.


#5.) Step 3 of cropping a picture.


Click onto the transform button at the top agian.


Click onto crop again.


Now that you have obtained the correct amount of excess to be taken off the right side and bottom of the picture in the procedure above, you will do it again, but you will need to change a couple of things around this time.


You will do the same application again for the left side and top, but this time you need to put in the paremater box, the new width x height after the excess has been cropped off.


(Example: my "picture 1") 555x435


Now you will have to reverse the + and - here.


(Example: my "picture 1") I put 555x435-407+167


After the width x height the - and + now is what is to be cut off the left side and top.


The -407 is what is to be cut off of the left side and the +167 is what is to be cut off of the top. Again you will have to try different variations like you did in the previous procedure until you achieve the size you like. Remember if you don't like it you just hit the back key.

*See examples of reversed pictures in step #8.


#6.) Step 4 of cropping a picture.


Example: (my "picture 1") After cropping, my picture is now 134x268.


This is too large for the size I want my animation to be, so I had to resize it. After clicking onto resize, I erased the 106x80+2+2> that was in the resize box, and clicked onto half size at the bottom and then output. My new size is 74x134, which is the size all the in my animation will be.


#7.) "Output" your finished picture.

*Go to the top of the page and click onto "output"

*In the pulldown box choose gif

*Then single frame

*Click onto output at the bottom of the page.


I would rather use my preferred transloader so I I click onto the picture then I press my f-saver key usingDomani a Freeloader File Uploader to upload it to my FTP account (tripod, geocities, xoom etc...) You can also either use the proxy-server that is provided there for you. You put in your ftp account name where it says anonymous, the new name of your picture at the bottom, then go back up to the top and click onto upload. I've only used it a couple of times, but it is usually too busy to use. Or you can use the other one there which is Starblvd.


I uploaded it into the sub-directory that I created just for the pictures that are to be in the animation.

Remember, to make a nice looking animation all pictures have to be the same exact size. So write down the size of the first picture and make all of the pictures this size. You will do this same procedure for all the pictures being used.


#8.) Reversing a picture.


The 2 pictures I started with were extremely large, so I made smaller ones of them, which will also allow me to get a different pose from them. And usually you won't have to half size them either.


Now that I have 4 pictures to get a different pose from, I'm going to use each picture twice as well. I like to use the reverse side of each picture too.


After I have transloaded my first picture, I hit the back key until I can see the first page where the selection buttons are at the top of the page. Clicking onto the transform button at the top again, only this time at the bottom choose "flop" instead of crop. Click transform at the very bottom of the page, now click output and transload the new picture to your ftp account.


Remember each picture has to have it's own name, which can get confusing, so do what's best for you to know which one is which.

For example, you can keep the same name as the first one, except add an R (for reverse) in the front so you'll remember it better.


("Example" below)


The above Url is a "text image" & shows how it outputs the pictures. (In all stills)


Below is all my finished pictures and how I arranged them. Notice how I numbered them 1-8. I did this after I put them in the sub-directory. I then put them in the order that I wanted them to be in the animation. Do this by clicking onto "Rename" in the right side border of the directory. Put the number in front of the existing name, then click onto "rename this url" beneath it. (It will automatically add a number behind it as a precautionary measure not to name it as an already existing name. Just delete it.)


1-W-CJpicture1-b.gif 6k
2-W-buttonofpic3a.gif 8k
3-W-CJpicture1-a.gif 6k
4-W-buttonofpic3b.gif 8k
5-W-buttonofpic1b.gif 7k
6-W-CJpicture3-a.gif 7k
7-W-CJpicture3-b.gif 7k
8-W-buttonofpic1a.gif 7k


Be sure to rearrange your pictures until you get the look you want.


It's easier to do this if you click onto rename in your directory, and then just add the number in front of them as you want them to be first to last. (1, 2, 3 etc... As explained above)


To view & make your animation a "gif"


*After you have put all the images you want to animate (loop) into a single subdirectory on your homepage account.


*Put the name of the subdirectory (only) in the text field where it asks for your URL and hit the VIEW button


(*EXAMPLE) http://members.tripod.com/cjnjh/CJ/

*NOTE* Be sure to put a / (backslash is important) on the end of the URL other wise you will just get a text image of your subdirectory.


*On the next page you will see an image of the first item in your subdirectory. Go to the top of the screen and click on the "OUTPUT" tab.


*On the next page you only need to fill in the following boxes:


*-FORMAT: put a checkmark next to "GIF"


*-STORAGE TYPE: click on the radio button labeled "Multiple Images Per File" (or it won't be animated)


*-DELAY IN 1/100th OF A SECOND: don't use decimals here. 100 = 1 sec, 200 = 2 sec, and 300 = 3 seconds etc....(The lower the number, the faster it will go. Experiment, if you don't like it, hit your "BACK" key & try another number until you get what you like.)


*-LOOP: put a 0 here (This makes it continous)


*Go to the bottom of the page and click where it says Press to (Output) your image or (Reset) the form. Press Output for the finished image.


*On the next page just click onto any image to get the URL so you can transload it to your homepage account.

(Remember This)

You will not get the Url in order to transload it if you don't click onto a picture after the finished output.
Just clicking onto the picture, automatically stores the Url in your browser for when you click onto your preferred transloader.

*When giving this "animated gif" a name, give it one so that you'll remember it's animated.


For Example:

I chose cjani8.gif because it lets me know it's animated with 8 pictures.


You are now finished and it should now be in your FTP account.


#9.) Do not thumbnail an animation.


It will not work, instead you will get a group of stills or "text image" like I have in my arrangement just above.
You can only resize or halfsize an animation.


#10.) Trick I learned while making a thumbnail of a picture.


The size of my finished pictures are 74x134, I accidently found a way to make them slightly larger without blurring or distorting them.


If you click onto resize, erase the 106x80+2+2> (leave this in when making a thumbnail) in the paremeter box, then click onto thumbnail. Instead of them coming out the size of a thumbnail (110x86), they will be 100x136.


Example:



110x8674x134110x136
Sizes 74x134 and 110x136 looks the same size here, but I tested their size & it says that they are what I have.


#11.) Where to optimize (reduce bytes) in an animation and still pictures also without reducing it's overall size. "WebFx" will not output any pictures wider than "400".

This is the completed animation after I reduced the byte size at Owens4 tools


After you click onto Owens4 tools go down until you come to "Reduce Your Image Size (bytes) With Gifbot". Once here, you put in the Url of the picture you want to optimize and then click onto what type of output you want, a gif, jpg, or same as input and click onto "Optimize". It will then take you to the results page. Here your original picture will be at the top of the page with the details of how many bytes your picture contains.


In order to "Optimize" your picture, you will need to reduce the amount of colors in it to reduce the byte size. This will also reduce the loading time as well as saving you storage space. I usually start at the 16 color level, but this will depend on your picture quality output. Some pictures can go with even less colors and still maintain a good quality look.


Click onto the amount of colors you want to try, be sure to experiment with a few before making your final selection. After you click onto your choice of colors, your picture will come up again with the reduced colors. You will have to click onto the picture (in order to see the actual results & to download it).
Once you've found the picture that you are satisfied with the results, hit your download key to save your new picture in your server's storage (tripod, geocities or xoom etc...).
You will have to give this picture a "New Name" when you download it, so becareful in your choice as to not give it the same "EXACT" name. I keep the same name, but I add an "O-" in the front of it for two reasons. This will keep me from getting confused by not giving it a completely different name to remember, and it will also remind me that I have already "Optimized" this picture. You do what is best for you.


Here are 3 examples of my finished animation.(Left) The original,(Middle) the one I chose with reduced colors and (Right) one that has too many colors taken out.


"Cjani8.gif "O-CJani8.gif" "2-OO-CJani8.gif"


If you have any problems or questions E-mailMe and I will reply back to you as soon as possible.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~


CJ's Family Picture Page
(Pictures Of Me & My Family)


HOME PAGE


E-MAIL



Sign My Guestbook View My Guestbook



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~