oWeek 7 Parts I & II: Storytelling & Animation

At the end of this lesson, students will be able to:

1. Create an animated GIF using Photoshop
2. Develop a story represented in a digital image or series of images

Single Image Story

The image below has a discomforting color scheme of a monochromatic figure in a field of red flowers. A red ribbon masks her eyes and the sky is a brooding blue in the background. Perhaps the girl is imaged in black and white to set her apart from the ordinary world, as her sight is diminished, so is she. In this case, we can only conjecture. There is a story but it is up to the viewer to determine.

Great visual content is not distracting but engages people with what they are interested in looking at. How about the image below?   A boy is waking up and he feels super strong today! Even though the lighting is dull, it’s the feeling that catches our eye, the shadow dominates the image and is one of strength and success. This story seems obvious and it might be used to tell the story of a good night’s sleep or sell a sleep aid product.

Three Image Storytelling

You can also tell a story with a series of images. This technique helps to simplify and capture a look and feel and helps you think about the photographs you are taking or working with in a new way.    Although we will not be creating a three image story this week, sometimes using a series of images can help you develop your story or to focus your ideas during the storytelling process. The three image story technique involves:

1. The establishing shot – the first picture in the series establishes the context of the story and usually is a wide-view
2. The relationship – the second picture in the series connects the three images and also provides the focus of the story, often with action implied.
3. The details – the third picture completes the story with an often unseen or implied detail of the others.

Have a look at this example:

The image on the left sets the context but there is some mystery to it as well, what are the specks on the landscape that we are looking at? The image in the middle zooms in to show an action that connects the two outer images and the third image both completes the idea and sends it forward toward a potential new story.

This example was put together in Photoshop and if you look at the layers from the image, you’ll see that the colors were altered in the left two images in order to unify the look and feel. Also, an Iris Blur was added to the middle image in order to focus on the action (see below). It is important when setting up your story that the images work together and are not just a series of pretty pictures, there is a flow to them visually in terms of color or texture as well as with content.

Storytelling through short-form animation

The animated GIF format is a great way to tell a very brief story and they’re easy to create with either a series of images or frames from a video. What your story is and how you will tell it may take time, even if it is seemingly simple.

Have a look at this fun animated GIF story below

The artist, Julie Murphy, explains this piece: “I accepted the challenge of illustrating National Chocolate Milkshake Day with some trepidation, as I don’t digest large amounts of milk well. Chocolate milkshakes look beautiful, however, and I’m always tempted to drink one. I created a creature, the Bisonunicorn, to illustrate this conflicted relationship.”  

The artist’s story comes through wonderfully in this short animation and I think most of us can relate to giving into some food temptation and not feeling so great afterward.   This is also a great example of a hand-drawn 2D animation that could be layered and animated in Photoshop.

Stop Motion Story

Many animated GIFs can be considered a sort of digital stop motion animation maybe with hand drawn elements included.

There are a few ways to deal with moving images in Photoshop. This week we will use “frames’ in this week’s exercise similar to a stop motion animation to make an animated GIF.

Tips: to make your animation loop smoothly, first think about repetitive motions and select a motion you think you can draw without much difficulty. Plan your animation before you start drawing and keep it simple. Second, figure out how you want to start and end. If the first frame and the last frame are similar, it’s less likely you’d get a gap or jump in the animation when it’s played repeatedly. Lastly, don’t struggle with your first attempt. You can start over if it doesn’t go well. You can also make three frames and then repeat the second frame as the fourth frame to return back to the starting position.

Here is a demonstration for how to make a very simple animated gif with 4 frames.  You can make more than 4 frames if you like just keep in mind the animation should loop smoothly.

•  A Picture Is Worth A Thousand Words: Digital Storytelling.  
• Digital Storytelling Resources and Examples
• The Three Picture Story

Here is a good example of image manipulation at work. This example took the artist about 2 hours to complete.

Create a simple animation, which loops without a gap/jump. Plan the animation first and storyboard the action (sketch out what is going to happen on paper, scene by scene). You can also try multiple times if the first attempt doesn’t work. Use your pen tablet to draw with the brush tool. Simple graphics, like a stick figure is OK, but make sure the animation  plays continuously without a gap or jump  in the motion. Watch the video in “Animation with Frames” above for how to do this.

Keep the animation simple, as you also have the Assignment #2 due this week for before/after.

Keep the resolution of the final output to  400 x 400 pixels or smaller.    (If you are not sure of the dimensions, please open the top menu “Image -> Image size’ and look at “Dimensions’  information. It’s best to do this before you get started and create a new document with the correct size).

Save your project as .PSD file first and then save as an  animated GIF  file.

Please make sure to fulfill the requirements below:

• Animation shows smooth motion(s)
• Animation loops without a noticeable gap
• The image resolution is 400×400 pixels or less
• GIF file format, looping option set to “forever’

Take a photograph, make drastic changes to the image based on a story you make up about the situation and show “before’ and “after’ pictures.   A big part of this assignment is planning and taking photographs  for the assignment. Please come up with your idea first, and take photographs and choose one for your project.  Please do not use images from the Internet or photographs you already have.

Professional storytellers manipulating images might use a storyboard or sketch to determine where they are going with the visual elements of the story. You may want to print out your image and make notes about the elements you are going to add and why.   There is no limit to the changes you can make to the image but try to keep at least some of the original image intact so we can tell it is the same scene.

Story Scene Text – Think about what is happening in the image and write a short statement to accompany it and set the scene. Answer some basics – who, what, when, where, why, or how.   For example, “It is the year 2198, one year since the aliens arrived on our planet from a distant galaxy. Human assimilation is nearly complete.”

Option 1:  Take a photograph  of yourself, someone you know and make drastic changes to the image. Please get a permission from the person and make sure they understand what you are going to do their image, if you are not using a self-portrait.

Option 2:  Take a photograph  of ordinary scene, like your dorm room, downtown Fairbanks, parking lot, or a campus building.  The photo should be taken for this assignment.  Do not use photos taken before this assignment or taken for other purposes.  The image resolution should be roughly 2000 x 1000 pixels.

Here is an example from a previous student whose story was post-apocalyptic in nature:

You can add elements to your final image but only use one image as the background – we’re going for before/after on one image.

*Upload your Before/After PSD file to your folder on Google Drive.

1. Create a new post on the course website and give it the category ‘Week 7’².
2. Upload the animated GIF you worked on in Exercise Part I.
3. Describe any challenges you encountered. Why did you choose to make this gif? What was your inspiration?
4. In the same post, upload the before/after images you worked on for Exercise Part II.
5. Also in the same post under the before/after, tell your story of what happened in the scene.

Please comment on last week’s posts.