Interactive Design Homepage

College of Arts, Victoria University

Teacher Name: Lisa Cianci - email: lisa.cianci@vu.edu.au
Course Coordinator & Education Manager: Alan Morgans - email: alan.morgans@vu.edu.au

Class Website - http://multimedia.tafe.vu.edu.au/lisa/2014/ID2


Subject: ID2 - Interactive Design

Course: Advanced Diploma of Graphic Design (CUV60411)


CLASS 09

 

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:
http://www.ufunk.net/en/videos/a-short-history-of-the-animated-gif/

 

jack

Here are some sites with creative or fun examples of animated GIFs online:

Wired article: http://www.wired.com/2014/04/10-awesome-gifs-culled-in-a-worldwide-art-competition/?mbid=social_fb#slide-id-784241

Paolo Ceric: http://www.thisiscolossal.com/2013/08/paolo-ceric-gifs/

Erdal Inci: http://www.thisiscolossal.com/2013/05/new-cloned-video-gifs-from-erdal-inci/

Rrrrrrrroll: http://www.ufunk.net/en/artistes/gifs-rrrrrrrroll/

Design Boom: http://www.designboom.com/tag/animated-gif-art/

GIF paranoia: http://www.gifparanoia.org/

GIFbin: http://www.gifbin.com/

Awesome GIFs: http://awesomegifs.com/

Tumblr GIF tag: http://www.tumblr.com/tagged/gif

animated

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:

  • using a set of still images as frames as the animation
  • importing a short clip of video and converting it to animated GIF

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:

animate still images

http://helpx.adobe.com/en/photoshop/using/creating-timeline-animations.html

http://mysite.du.edu/~lmehran/download/gif_tutorial.pdf

animate a video clip

http://www.digitaltrends.com/social-media/how-to-make-an-animated-gif/

http://www.wikihow.com/Create-Animated-GIFs-Using-Photoshop

The main things to remember when creating an animated GIF are:

  • Go with the strengths of the GIF format - try to work with small image sizes or a very minimal video clip - the good thing about the GIF format is it works well with small file sizes making it quick to load. Creating a large and bloated GIF file really defeats the purpose of using the GIF format - you might as well use video.
  • Preparation - have your images / video clip prepared before-hand so that images line up or are the right orientation, size, format etc.
  • The Timeline panel needs to be open so you can manipulate your frames
  • Follow all steps - when working with still images, it can get confusing. Make sure you follow the steps in your selected tutorial and set the visibility of your layers to the correct settings to make sure you are getting the right playback
  • Check your properties - when saving for web, make sure you set all relevant properties such as the colour indexing and playback - "looping" or how many times you want the GIF to play.
  • Sometimes the "forever" loop doesn't work - you might need to check that if you want an infinite-looping GIF, that it works properly as sometimes even when you check that property in Photoshop, it doesn't save it, so just re-open the GIF in Photoshop and save another copy using "Save to Web"

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:

pic23 pic1 pic2 pic3 pic4 pic5 pic6 pic7 pic8 pic9 pic10 pic11 pic12 pic13 pic14 pic15 pic16 pic17 pic18 pic19 pic20 pic21 pic22

Here's an example I whipped up with the above glitch images I am using for another project:

copy

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:

tunnel

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:

http://imgflip.com/gifgenerator

http://gifmaker.me/

 

Experiment in class with making your own animated GIF. Upload to your blog and make a post about it.

 

 

 

 

 

 

 

References

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: