Digital Media Homepage

Subject: DMA - Digital media- 2013

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
College of Arts Office: City Flinders - Tel: 9919 1517

Class Website - http://multimedia.tafe.vu.edu.au/lisa/2013/DMA

 

Class 06 - Digital File Formats & Animated Gif Exercise

Class Activities

We will be continuing with Assessment Task 2 - Review (Glossary) of Common Digital Media Formats this week, so go to this assessment task document here to read all the requirements and specs for the task:

http://multimedia.tafe.vu.edu.au/lisa/2013/DMA/2013_DMA_AT2.html

 

This task is meant to be a self-directed research task which will enable you to increase your knowledge of common file formats and their usages. It is advantageous to know about formats such as:

  • Image
  • Audio
  • Video/Multimedia
  • 3D
  • Document
  • Hypertext / Hypermedia
  • Compressed/Archived files
  • Executable files
  • Mobile Apps

You may already be using many of these media formats and not really be aware of what they are and why they are used.

It is also important to make this task relevant to you as artists and to explore how artists are using these media in creative practice either to create artworks or to document artworks.

 

Here are a few links to help get your started:

http://www.translationdirectory.com/glossaries/glossary339.php

http://www.crutchfield.com/S-ssLSUNMVEpx/learn/learningcenter/home/fileformats_glossary.html

http://www.jiscdigitalmedia.ac.uk/glossary/

http://www.videobloom.com/glossary/

http://www.media.gatech.edu/glossary

Don't forget to reference your glossary with links for where you got your information. There wil lbe some cut & paste with this assessment task - which is fine - just reference all of the text that isn't your own.

 

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:
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:

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://creativetechs.com/tipsblog/build-animated-gifs-in-photoshop/

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 makea post about it.

 

2. Work on your Glossary - you can save all of your work in a Word document (or equivalent). You should be able to find all the information you need on the Internet. What will be more difficult will be applying this to creative praactice - finding examples of artworks that use these formats. You might need to be a bit canny and try to figure out what files are being used in multimedia projects. Ask me if you are having trouble finding content in different formats.

3. Blog development - if you still need to take some time to customise your blog and populate it with content, you can do it in class.

 

 

 

Homework / Readings

Work on your Glossary and make sure you bring all work to class next week.

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.

 

References

Glossaries

http://www.translationdirectory.com/glossaries/glossary339.php

http://www.crutchfield.com/S-ssLSUNMVEpx/learn/learningcenter/home/fileformats_glossary.html

http://www.jiscdigitalmedia.ac.uk/glossary/

http://www.videobloom.com/glossary/

http://www.media.gatech.edu/glossary

http://www.netlingo.com/