How to Make Awesome Animated GIFs

Go directly to the Click Fraud infographic!In web years, animated GIFs are ancient.

From the beginning, they enlivened Geocities pages with animated construction workers, spinning globes, ubiquitous dancing babies, and other old school animated GIFs you saw on every site and forum signature.

Even if no one can agree on how to pronounce “GIF,” we can all agree that the web would be a very different place without them.

Though they aren’t used in quite the same way as they once were (and our eyes are thankful for more modern design trends), GIFs have never gone away. In fact, they’ve made a comeback around 2006-2008 when millennials first began to embrace the format. With GIF-friendly social platforms like Tumblr rising in popularity, animated GIFs became the most useful and efficient way to send a message, tell a story, or share a reaction. A picture is worth a thousand words, and the right GIF can convey exactly what you’re feeling without the need for any words at all.

GIFs aren’t just for Tumbloggers or retro webpages, either. They’re also emerging as a serious art form, called “motion photography.” Artists like Simon McCheung, Heather Buckley, and Uno Morales have become adept at manipulating photographs and digital art and bringing them to life. The styles and subjects of theses GIF artists include cartoons, abstract designs, optical illusions, and mesmerising geometric animations.

If you’re interested in becoming a pixel painter yourself, or need to find the right reaction GIF to add to your blog post, or have a video that you just know could be one of the funniest GIFs of all time, then you need to learn to create your own GIFs!

Luckily, it’s easier than ever if you have the right tools. If you need to know how to make your own GIF, just check out our guide below.

animated-gifs

How to Make Awesome Animated GIFs

Ah, animated GIFs! Think of what we’d miss without them: astounding basketball dunks, hilarious prat mishaps, and dancing animals — repeated over and over and over. If you’ve ever wanted to create one, pay attention — we have the info and it is super easy.

Easy GIF Tools

If you’ve got a minute, you can create an animated GIF. Really! Depending on what you want to do, it is as easy as loading a video and clicking “save.” There are several free and low cost tools that do the hard work for you.

  • Imgflip.com:
    • A GIF generator that allows you to create animated GIFs from video files or YouTube videos
    • Simply upload the video, and the GIF Generator allows you to:
      • Select the section of the video to use
      • Customize the image size
      • Control the frames per second
      • Add text to the GIF
      • Control the speed
      • Modify the number of times the GIF should loop — forever if you like
    • The free version has some limitations:
      • GIFs contain watermarks
      • Can only be 7 seconds long
    • Imgflip Pro allows you to create larger, smoother GIFs without a watermark for $9.95/month
  • GifCam:
    • A free Windows desktop application
    • Creates a transparent window on your screen that functions like a camera
      • Whatever is within the window will be recorded and converted into a GIF
      • Users can also record one frame at a time
    • Features
      • Reduces GIF file size by:
        • Drawing transparent pixels over anything it notices is the same from frame to frame
        • Introduces small delays when it notices a frame hasn’t changed, rather than adding new frames that display the same image
      • Easily add text to an image
      • Capture the cursor
      • Can record the full screen
  • GifMaker:
    • A free app for Android
    • Allows users to:
      • Create GIFs from photos or videos
      • Edit GIFs
      • Decorate GIFs with stickers
      • Create GIFs from YouTube videos
    • Offers robust editing abilities from your device so that you can:
      • Control frames per second
      • Modify image size
      • Change aspect ratio
      • Crop the video
      • Add text
  • GifBoom:
    • A free app for iOS and Android
    • Create GIFs from a series of up to 20 still images
    • Add special effects, text, and customize individual frames
    • Easily share GIFs through:
      • Texts
      • Facebook
      • Twitter
      • Tumblr
      • Email
      • Weibo
  • Gifs.com:
    • A website that allows you to convert YouTube videos into GIFs
    • Create a GIF quickly and simply
    • Once the GIF has been created, users can vote on them on the website
    • GIFs can be shared through Facebook, Twitter, Tumblr, and Reddit
      • The can also be embedded in a web page

If You Have Photoshop

If you are very serious about creating animated GIFs, you may need the power provided by Photoshop. The process as longer, and it can be difficult. But it creates great looking GIFs that are optimized for the internet.

  • Outside Photoshop
    • Select a video to use
      • Remember: the longer the section of video, the larger the GIF file will be
    • Prepare the video before bringing it into Photoshop
      • Trim the video until it only contains the clip you’d like to convert into a GIF
        • There are many different programs that allow you to trim videos
          • Windows computers come with Windows Movie Maker preinstalled
          • Macs come with iMovie preinstalled
          • There are various other options
      • Regardless of the program used, you’ll need to:
        • Set a Start point and an End point for your desired video clip
        • Save that clip as a new file
        • Use that file in the following steps using Photoshop
      • According to Digital Trends, you should keep your clips short
        • 2-3 seconds is good
        • 5 seconds is marginal
        • 10 or more seconds will create a large, unmanageable file
  • Inside Photoshop
    • Creating the GIF
      • Open the video in Photoshop by going to File → Import → Video Frames to Layers
        • This will convert the video into a series of still images, one image per layer
          • Bottom-most layer contains the first frame
          • Top-most layer contains the last frame
      • Then go to Window → Animation
        • This will show you the series of frames that will appear in your GIF
          • The fewer frames a GIF has, the quicker it will load on a computer
          • Deleting too many frames, however, can cause a GIF to look choppy
    • Editing the GIF
      • To make a looping GIF:
        • Click on the menu at the bottom left side under the frames and select “Forever”
      • To reduce the image size of the GIF, you may wish to crop the image to remove unimportant parts from it:
        • Select the Crop tool from the toolbar
        • Use the tool to select the part of the image you’d like to keep
        • Hit enter or press the “apply button” at the top
    • Saving the GIF
      • To convert the project into an animated GIF ready to share on the internet, go to File → Save for Web
        • In this dialog box, you’ll be able to modify a number of different qualities, including:
          • Color
            • The more colors the file has access to, the wider the palette the GIF will be able to use
            • Only use 128 colors if the GIF isn’t very colorful to begin with
          • Dither
            • Involves scattering colored pixels in an image to fool the eye into thinking a color palette is wider than it actually is
            • Higher dither creates a better looking image, but increases the file size
          • Lossy
            • Increasing lossy will deliberately decrease the quality of a GIF, useful if you’re trying to bring the file size down
        • Modify these settings until the GIF is 1 MB or smaller so that it will load quickly on most web pages
        • When finished, save the file into a folder
          • Share it!

Animated GIFs are a great way to make a point quickly and powerfully. All the tools we’ve discussed have various advantages and disadvantages: from the quick and dirty to the slow and careful. It all depends on how you want to work and what you want to create.

Sources: digitaltrends.com, wikihow.com, design.tutsplus.com, imgflip.com, blog.bahraniapps.com, play.google.com, support.gifboom.com, itunes.apple.com, gifyoutube.com, pcmag.com, blog.invasionapp.com

Sources

Download this infographic.

Embed Our Infographic On Your Site!

Get Exclusive "Subscribers Only" Content

Join our newsletter & be first to hear when we publish new posts.

Get Exclusive "Subscribers Only" Content

Join our newsletter & be first to hear when we publish new posts.

Twitter Facebook

Discussion

What Do You Think?

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>