“This is the file format of the internet generation. It’s our vinyl, our compact disc.” David Hayes, head of creative strategy for Tumblr.
What is the deal with GIFs?
Assignment
You will be creating an animated gif for The Unsatisfying Challenge. During the summer of 2016, the motion design studio Parallel directed the video you see above about unsatisfying situations: the frustrating, annoying, disappointing little things of everyday life, that are so painful to live or even to watch.
They quickly realized that there are a lot of other situations that would be fun to see animated, so they decided to run an animation challenge around this idea. Now this challenge is being posed to you. What do you find unsatisfying?
Specs
- start with 2 seconds of a title card (title must begin with “The”)
- at least 5 seconds of animation including title card
- your video must be 1080×1080 square pixels
- file format: GIF
- 12 frames per second (for example: 5s x 12fps = 60 frames, 10s x 12fps = 120 frames)
- It must loop, which means the last frame should lead seamlessly into the first frame
- art direction, colors, style are totally up to you
- music or sound design is not required. If you are experienced in this area, you may add copyright-free sound however if you like.
Objectives
- Experiencing the hands-on approach of frame-by-frame animation
- Understanding animation basics: frames per second (frame rate), shooting ratio, keyframes, in-betweens, etc.
- Considering rhythm, duration, pacing
- Exploring motion and screen space
- Focusing on composition and quality of asset creation
- Pushing innovation of animation
- Telling a short narrative – beginning, middle, end
How to make an animated gif using Photoshop.
- Demo Video / Step-by-Step: Animated GIF Methods in Photoshop
- Files: Additional example files to look at
Optional Tools
- Using Rough Animator
- Using Procreate (skip to 2:30)
How to Export in either PSD or AE
You can use Photoshop to create the GIF. File > Export > Save For Web (Legacy) and choose GIF > Looping > Forever
If you also want to render a video of your GIF so you can put it on Instagram, then follow these steps in Photoshop: Go to Export > Render Video. Give it a name and select the location where you wish to save it. Leave other settings – you want Adobe Media Encoder > H.264 > 1080×1080. Make sure the frame rate is set to 12.
If you create GIF in After Effects, set your Composition Settings to 12fps before starting. When finished go to Export > Add to Adobe Media Encoder > Preset Browser > Image Sequence > GIF > Animated GIF – drag and drop this preset to your file in the Queue.
Animated GIF Inspiration
Student Examples Reconnect – Won a Student Motion Design award this year.
Professional Examples
Schedule:
9.23 – gif assigned
9.25 – midnight– list of ideas, storyboard, inspo turned in on Exercise1 Slack Channel
9.28 – turn in on Exercise1 Slack Channel
Deliverables:
- Finished GIF uploaded to Exercise1 Slack Channel (1080 x 1080px, 12fps, 5s–10s, gif)
- Upload rough sketches/storyboards , brainstorm, inspo to Exercise1 Slack Channel
This exercise is not graded but needs to be completed.