Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Behold the lowly gif animation: it's making a comeback on the web, appearing as a preloader, or indicator that site content is loading. Join Tom Green, as he shows you how to make your own GIF-based preloader in this installment of Web Motion for Beginners. You'll learn how to export a series of fireworks-style explosions from After Effects, create an animated GIF in Photoshop or Fireworks (your choice), and make the GIF usable as a preloader in Edge Animate.
Behold, the lowly GIF animation. Key to the secrets of the universe. Home of the elusive LOL cat. Bringer of the knowledge around how ice cream sandwiches are made. Though the lowly GIF has had a few rough years, it is making a remarkable comeback in the web universe. Used extensively, for example, by NASA, as you saw, to show us the marvels of the universe. The animated GIF is now being used to entertain and explain.
. And with the rise of motion graphics on the web, they are reappearing as preloaders merrily spinning away as the site's content loads into the browser. In this project, we're going to be creating a preloader, but it won't be your usual spinning ball countdown timer or other common animation. We're going to use exploding fireworks. Before we start, it is important to know the limitations of the format. It will help you as you produce the assets. First off, the GIF format uses a limited color palette.
This means you only get to use 256 colors or less. Now the upside of this of course, is small file size. Solid colors, not gradients, are best suited to the GIF format. Gradients tend to bend, a process called dithering, as the gradient colors are shifted to their nearest equivalents in the limited GIF color palette. This also explains why photographs are rarely, rarely as clear in the GIF format as they are in the JPEG. An animated GIF is closer to a flip book than a video.
This means each image in the sequence needs to be loaded and rendered by the browser. This is why the typical duration of an animated GIF is usually around two to three seconds. Also, size matters. Keep in mind, each image loads in sequence, so you have to keep the dimensions small, about 100 by 100 pixels, or smaller, to speed up the download and on screen rendering. Also, reduce the colors used to reduce the file size.
So what's the plan? We're going to create the fireworks explosions in After Effects, though any application that creates particle effects can be used. We'll work with three colors, red, green, and blue for the explosions, and keep the physical dimensions of the GIF to 100 by 100 pixels. We're going to output the project from After Effects and use two imaging applications, Fireworks and Photoshop, to do the same thing which is basically create the animated GIF using the output from Adobe After Effects. Again, any application that creates and animated GIF can be used here.
There are currently no FAQs about Web Motion for Beginners: Create a Preloader.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.