Subject: DMA - Digital media- 2014
Class 06 - Animated Gif Exercise
Create: things to do this week
1. Animated GIF exercise:
Animated GIFs are one of the earliest forms of animation available on the Internet through browsers. They quickly became superseded by Flash and video animation (although they have always been used for banner ads), but the animated GIF is currently enjoying a resurgence as a "retro" file format.
Check out this site for a short history of the GIF format:
Here are some sites with creative or fun examples of animated GIFs online:
Animated GIF by Paolo Ceric
The advantages of animated GIFs is that they are small in file size (if created properly), they can be used in any browser without a plugin (unlike flash and many video formats), and they can be created with image manipulation software, or by using free sites on the Web.
There are two popular ways to create animated GIF files:
There are plenty of tutorials online that can provide step-by step instructions, but here are a small selection that seem to be the best:
The main things to remember when creating an animated GIF are:
If you need some resources for today's exercise, grab these images and video clips:
Glitch Animation MP4 <- use this video file to turn frames into layers in Photoshop
right-click (or control-click on Mac) to save these images below:
Here's an example I whipped up with the above glitch images I am using for another project:
Here's the 0hotoshop PSD file I used for this animation (which I output at 50% pixel size) which you can download and open to see how it works.
Tunnel video MOV <- use this video file to turn frames into layers in Photoshop
here are the results:
Hint: don't' use the whole video clip. When you import a video into 0hotoshop using Video Frames to Layers, you can select a portion of the clip and choose every 4th or 5th frame - remember, many videos have 25-30 frames per second which is too many for an animated GIF.
Some websites that make animated GIFs:
Experiment in class with making your own animated GIF. Upload to your blog and make a post about it.
2. Wordpress site development - if you still need to take some time to customise your Wordpress site and populate it with content, you can do it in class.
Homework / Readings
If you don't complete your animated GIF in class, complete at least one in your own time with your own content & post to your blog.