NOTE: This page might take a moment to load

Nothing sums up things like an animated GIF, and if you've spent any time on the Internet you've undoubtedly seen a few. For those who arrived late to class, an animated GIF is a digital picture format that has the ability to display animation. GIF format makes it possible to watch motion in a frame without having to use a video hosting service like Youtube or Vimeo.
The simple I ♥ bacon image above is an example of an animated GIF.

Animated GIFs, like its JIF peanut butter namesake, are amazing when prepared right and disastrous when handled wrong. This Instructable will cover 4 different methods:
  • Using a free online method - video and images into GIF
  • Using Photoshop or GIMP - images only into GIF
  • Using iWisoft -  video only into GIF
Some examples on how animated GIFs can be used are:

image sequences - flamethrower Jack-o_lantern

Photosop awesomesauce - animated pizza GIFs

explaining a concept or idea - Energy-Saving Light

showcase an item - fuzz of 1000 faces

assembly animation - collapsible box

high FPS repeating movies

entire YouTube video

There's almost no limit to how animated GIF's can be used. I'll do my best to cover the basics on how animated GIFs are made, and provide examples for you to try yourself with files (found at the bottom of this step, and Step 4 and 5). The methods shown are a few of many different ways to make animated GIFs. There are alternative methods using the same programs, and there may be easier and better methods not discussed at all. Please feel free to share your thoughts in the comments below.

↓ grab the Photoshop and GIMP templates here

Step 1: GIF limitations

"@______.gif - image from marc kjerland used under Creative Commons 2.0

what makes a good animatied GIF?
I think the most important thing is camera stability. When considering which pictures or video to use try to chose scenes with consistency in frame and subject. Moving shots/subjects can work, but the most effective animated GIF's have a frame of reference which your eyes can lock onto and your brain has an easier time understanding what's going on. And, because animated GIF's are usually short/small this makes it even more important.

loss of colour/definition:
GIF's are great to convey action but aren't so good at replicating a realistic colour spectrum.
"The format supports up to 8 bits per pixel thus allowing a single image to reference a palette of up to 256 distinct colors. The colors are chosen from the 24-bit RGB color space. It also supports animations and allows a separate palette of 256 colors for each frame. The color limitation makes the GIF format unsuitable for reproducing color photographs and other images with continuous color, but it is well-suited for simpler images such as graphics or logos with solid areas of color."
This effect is called posterizatrion

Animated GIF files are usually small, this usually means small in dimension or short in length, or both. When deciding what to make a GIF animation of consider the output size and length. Animated GIF's will not play correctly if reduced through inline HTML (using  <img width="size")

when using programs like Photoshop and GIMP there are huge areas where you can push the boundaries of making an animated GIF. The techniques I show are just the basics, with a little trial and error you can create some interesting results.
I've made a gif file with a animator caled pivot stickfigure animator.
<p>Rad GIF! Enjoy the Pro Membership.</p>
<p>Here is my GIF. The link is - <a href="http://www.instructables.com/id/My-Gif-of-Solving-A-Rubiks-Cube/" rel="nofollow">http://www.instructables.com/id/My-Gif-of-Solving-A-Rubiks-Cube/</a></p>
<p>I can tell it's a GIF, but it looks like it's not animating. </p>
<p>I don't need the membership, but wanted to say thanks for making this Instructable and share what it helped me make! This is for <a href="http://www.instructables.com/id/The-Mooshroom-Hat/" rel="nofollow">The Mooshroom Hat</a> Instructable. (For some reason, the gif works on the Instructable, and using the gif's link, but not in the comments here.)</p>
&quot;I used GIMP 2.8 ... When I found the images I wanted I opened up Photoshop &quot;??
Good catch. It now reads &quot;I opened up <em>GIMP</em>&quot;.<br /> This was a tough project to write up, as the GIMP and PS methods are very similar. Thanks for looking out!
I had trouble with the image size, and searched your instructable for guidance. I then reduced the image and was able to successfully upload an animated gif to the website. Thanks! <a href="http://www.instructables.com/id/Wine-soakedsauteed-Eggplant-Parmesan/?ALLSTEPS" rel="nofollow"> <img alt="Layering Eggplant Parmesan" border="2" src="http://www.instructables.com/files/orig/FEL/063Y/HFSHUQ8M/FEL063YHFSHUQ8M.gif" style="border: 2.0px solid black;max-width: 100.0%;"> </a>
mmm that looks tasty. Thanks for sharing, enjoy the membership and patch!
It's finished :D <br>http://www.instructables.com/id/Kaleidocycle/ <br> Uploader isn't working for comments :(
Great work, Emily! The GIF really shows off how this works. <br />Thanks for sharing. Enjoy the patch and the membership!
Don't have photoshop, can't install Gimp, to the internet then
So, this tells me a lot about your feelings for bacon :P <br>Love the ible, gonna try it
Thanks, Emily. <br />Making GIFs is fun and pretty easy. To show how deep my passion for bacon runs, the digital patch I'm awarding to people that post their own GIFs here is the I ♥ bacon animated GIF.
Trying this tonight, hope I can make it work for my new instructable, I'll show it to you when it's on!
Thank you sooooo much for your instructable....was clueless in how to do it...and I <u><strong><em>needed</em></strong></u> it to illustrate how to bend wood in this instructable<br> http://www.instructables.com/id/Easy-DIY-Bent-Plywood-Light-Fixtues/
Your animated GIF explains that bend so well. Thanks for sharing your GIF (and technique), enjoy the patch and 3-month Pro!
I finally used it, thanks a lot for the explanation! <a href="http://www.instructables.com/id/Pythagorean-Cup/" rel="nofollow">http://www.instructables.com/id/Pythagorean-Cup/</a>
Nice work! The GIF really explains the concept of that glass perfectly. <br />Can't wait to see what you come up with next!
Thank you and thanks a lot for the patch! I'm not sure myself what the next thing will be, but I'm meeting with a friend tomorrow to experiment a bit for the candy contest.
wow! <br>cool!
<a href="http://www.instructables.com/id/Crafters-Toolbox/" rel="nofollow"><img src="http://i.picasion.com/pic65/bc8157378f91830858d26391baaac5fc.gif"></a><br> Did it!! :D
Thanks for the instructable!! I really enjoyed it. You can either click on the GIF above that links to the 'ible, or you can click <a href="http://www.instructables.com/id/Crafters-Toolbox/" rel="nofollow">here.</a>
Very cute, thanks for sharing! <br />Enjoy the patch and 3-month Pro membership.
Nice work Mike and Audrey!
I love how Gifs are making a comeback! It's much more relaxing watching a several second silent film rather than waiting for an annoying video to load.
My head hurts!
lol... mine, too! ;-D
This is really helpful, thank you and thank you for telling me! I'm for sure going to use it in the future.
nevermind i cant show you the code i am using allready / but anyways how do i use animated giff in ebay posting with html
woops <br> <br>with this <br> <br>xcenter&gt; <br> <br><a href="http://cgi3.ebay.com/aw-cgi/eBayISAPI.dll?ViewListedItems&userid=" rel="nofollow">See My Other Auctions!</a>
with this <br> <br> <br> <br><a href="http://cgi3.ebay.com/aw-cgi/eBayISAPI.dll?ViewListedItems&userid=USER" rel="nofollow">See My Other Auctions!</a>
i had a question .. <br>what would be the html code for putting animated giff into ebay listing
I used photoshop to make a GIF of removing waffle cookies in step 7 of <a href="http://www.instructables.com/id/Quick-gluten-free-optional-Chocolate-Waffle-Cook/" rel="nofollow">this instructable</a> (how can I link to that specific step?)&nbsp;<br> Thanks!
That's one tasty GIF, enjoy the patch and Pro membership!
Thanks for the 'ible Mike. http://www.instructables.com/id/Animated-Gifs-101/
Those are great, thanks for sharing! <br />You've been patched and awarded a 3-month Pro.
This info is very useful, Mike.

About This Instructable


171 favorites


Bio: I'm Mike and I make crazy things at Instructables HQ. Follow me and try a few of my projects for yourself!
More by mikeasaurus: Doorknob key rack hangover cures dog ties
Add instructable to: