Animated GIFs Grid

Project Brief

1: The prompt for this project came from Rebecca Solnit's book, The Field Guide To Getting Lost. Students had access to two chapters from this book as part of the project brief, and were encouraged to read the entire book. Students were expected to at least skim the text to get an idea of the author's perspective. The student's job was to then explore this theme using one of the following approaches:

– traveling beyond one's comfort zone

– traveling to the unknown, mapping the unknown

– getting lost in the familiar, making the familiar unfamiliar

– feeling at home with being lost

– displacement

[NOTE: the prompt for this project has also been a randomly drawn adjective such as mammoth, boiling, limping, majestic, etc.]

2: Students are also assigned a specific principle of design (COLOR, SPACE, BALANCE, REPETITION, RHYTHM, CONTRAST, TEXTURE, ALIGNMENT, LINE, PROXIMITY, PATTERN, and SHAPE).

3: Students should think about the things that are interesting to them about the overall theme of getting lost AND how they might start to visually show that using the assigned design principle. Students are encouraged to write down whatever comes to mind when they combine these two things, and to write down lots of different ideas, the crazier the better.

4: Next students choose some of the most interesting words/ideas and create a set of 20 sketches showing 20 different ways they might visually convey getting lost and the design principle. The animated GIFs can utilize original drawings, original digital illustrations, original photographs, open source images they find on only the websites approve of for class (creative commons, unsplash, other open source repositories), text/type, shapes, textures, patterns, colors, and combinations of those things. ALL VISUAL ELEMENTS must be student created OR public domain/open source imagery students can prove they have the right to use. We will review the sketches in class to help each student choose some specific directions.

5: Next students will create 9 different animated GIFs that will sit in a grid together on a webpage and play simultaneously. The goal is to create 9 small animated moments/designs that somehow still connect back to each other in some way (narratively, visually, spatially) so that they seem to belong together on the page. Each GIF should be EXACTLY 400 pixels wide by 290 pixels tall, at 72 dpi. Each GIF should have at least 5 frames of animation (students are free to include up to 100 frames if desired).

We will look at rough versions of ALL NINE GIFs for the in process critique in class.

6: Using feedback from the in process critique, students revise and finalize their GIFs and start placing them into the web template. We will review these revised GIFs in the web template in class.

7: Using feedback from the revised GIFs review, students finalize their GIFs and the placement in the provided web template. (I will provide a demo in class about using the template, and will also provide a video tutorial.)

///// Things to consider

Students should consider rhythm, pacing, scale, motion, movement, placement, space, and narrative as they construct the 9 animated GIFs. There should be some kind of relationship among the 9 GIFs, and the page should be thoughtfully composed (which GIF goes where?).

Students must also carefully think about how the GIFs connect to the original theme and design principle assigned.

Learning Objectives

Goals of this project:

• To practice multiple ways of making images

• To practice using Photoshop

• To practice using Illustrator

• To practice thinking about images in motion

• To practice the process of iteration

• To learn how to create Animated GIFs

• To start thinking about how images convey meaning

Deliverables

– At least 20 thumbnail sketches

– In process versions of all 9 animated GIFs (at least the general look and feel and one frame for each)

– Revised in process versions of all 9 animated GIFs (at least 5 frames for each GIF, placed into web template)

– Final version of 9 animated GIFs, composed on web page template as instructed, and submitted as a compressed folder containing the 9 animated GIFs in the images folder AND the revised index.html file.

Readings/Resources

• Graphic Design The New Basics (2nd Edition), by Ellen Lupton and Jennifer Cole Phillips

• Steal Like an Artist: 10 Things Nobody Told You About Being Creative, by Austin Kleon

YouTube Video: What is the Treachery of Images? by Nerdwriter1; https://www.youtube.com/watch?v=atHQpANmHCE

Reflections

I have used a version of this project to start off the Principles of Design course I teach over three previous semesters. It works really well as a way to get students thinking about image making, and to force them to create a lot of images in a short amount of time. Students are allowed to use photography and hand-drawn illustration if they'd like, which can help them to feel more comfortable with the project if they already have those skills. Regardless they all have to manipulate their images in Photoshop and arrange them in the timeline to create their GIFs. I have found that this project allows for students well versed in art and design to excel, but the project also allows space for non-majors to create interesting work too. 

An important part of the process is that I provide basic tutorial videos about Photoshop and GIF making utilizing a few different methods, and I teach them how to open up GIFs they find online to dissect how the animators created the sense of movement. This gives each student the space to watch and rewatch the tutorials, and to learn in a few different modes. I also make sure we set aside a lot of time for them to work in class so I can be on hand to answer questions. Finally, I set up the web template used for the final submission and teach them how to manipulate the code to place their GIFs (I also post a video tutorial showing them how to use the template). I find that the use of the web template in this project helps to give students some familiarity when I teach principles and techniques related to web design later.

Critiques for this project are always a lot of fun, and generate a lot of great discussion and feedback. Because the image making methods vary from student to student, and the ways the students are able to create a sense of motion in the designs, the students always learn new techniques from each other. I also like using the design principles as part of the prompt because we can discuss them during the critique in a specific and targeted way. 

I don't have plans to change much about this project in the future. It's flexible enough to work with the differing levels and types of students I am working with, and is a great way to start off the class.

Other examples of this project can be viewed here:

– http://zahabidesign.com/GIFsGallery/

– http://zahabidesign.com/GIFsGallery3/