College of Arts, Victoria University
Class Website - http://multimedia.tafe.vu.edu.au/lisa/2014/ID2
Subject: ID2 - Interactive Design
Course: Advanced Diploma of Graphic Design (CUV60411)
Create: things to do this week
1. Animated GIF exercise:
Today you can continue to work on your Wordpress portfolios, but we will also do a little tutorial on how to make an animated GIF using Photoshop.
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.
Animated GIFs are a useful format when you want to show something animated that only has a few frames and its advantages are that the file size is small and any browser can play them without needing a plugin or app.
Animated GIFs should not take the place of video or complex Flash animations, but we can have a lot of fun with them and use them on the Wordpress site in Pages or Posts.
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 Photoshop PSD file I used for this animation (which I output at 50% pixel size) which you can download and oepn to see how it works.
Tunnel video MOV <- use this video file to turn frames into layers in photoshop
here are the results:
Hint: dont' use the whole video clip. When you import a video into Photoshop 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.
Some interesting websites and blogs by artists and designers
Some interesting image gallery sites (not blogs, but interesting ways of presenting visual content using web technologies)
Other useful and inspirational resources: