Frame by Frame Animations

Using Photoshop to Create Stop-Motion Gifs
Digital Media and Design 1
Mixed grade levels

Students used Adobe Photoshop to create stop-motion animations. They used the .gif file format, which is a moving image file, to save and display their work. The students animated in a variety of styles of their choice, including frame by frame puppet manipulation, hand drawn images, digitally drawn images, photo manipulation, building virtual sets and characters in gaming platforms, and so on. 

I. Topic: Stop-Motion Animation
Content Area  

• Digital Art
  

Content Statement/Concept Statement

• Images played together appear to move
  

II. Objectives / Expected Learner Outcomes

• Students will use photoshop to create .gifs
  
• Students will use a variety of animation techniques, of their choice, to create a short animation. Options include hand drawing, digital drawing, manipulating and photographing objects, building sets and characters within virtual gaming platforms, manipulating photos or videos, or other ideas the students have.
  

III. Standards of Education
Related Virginia Visual Arts Standards of Learning

• AI.6 The student will use a variety of traditional and contemporary media (e.g., two-dimensional, three-dimensional, multidimensional) to create works of art.
  
• AI.12 The student will identify technological developments in the visual arts
  
• AI.13 The student will analyze works of art as representational, abstract, or nonrepresentational, including nonobjective and conceptual.
  
• AI.16 The student will evaluate how social, cultural, and historical context contribute to meaning in works of art and design.
  

Related Virginia Standards of Learning for Computer Technology

• C/T 9-12.1 Demonstrate an operational knowledge of various technologies.
  

• • A. Use various types of technology devices to perform learning tasks…
    
• C/T 9-12.2 Identify and use available technologies to help complete specific tasks.
  
  • A. Identify the specific uses for various types of technology and digital resources…
    
  • B. Use content-specific tools, software, and simulations to approach projects. • Use specialized tools...Use models and simulations to learn complex concepts, solve problems, and make decisions.
    
• C/T 9-12.3 Demonstrate an understanding of the strengths and weaknesses of various technologies for supporting different tasks...
  
  • A. Make appropriate choices when determining how to use different technologies for different purposes... Make use of self-help tutorials and manuals to troubleshoot and explore unfamiliar features in various tools.
    
  • B. Explore career opportunities in technology-related careers, and consider the roles technology will play in future career choices. • Explain how various careers incorporate technology...
    

III. Student Group Targeted

• Digital Media and Design 1
  
• Mixed grade levels
  

IV. Prerequisite skills/knowledge

• Students have used photoshop before but are not super familiar with it
  
• Students have seen gifs and know generally what they are
  

V. Time Required
4 weeks
Lesson 1: Photoshop refresh + Lesson 2: Practice Gifs
    2 class periods
Lesson 3: Animation gif -
    6 class periods
Lesson 4: Midpoint crit
    ½ class period
Lesson 5: Final crit
    1 class period

VI. Materials and Resources

• Computers with photoshop
  
• Materials will vary student to student. Potentials materials include:
  
  • Clay
    
  • Paper and 2D media (markers, paint, pastels, pencils, colored pencils)
    
  • Light table
    
  • Found objects
    
  • Camera and tripod
    
  • scanner
    

PRE-ASSESSMENT
(hand out before starting the unit and alter plans to accommodate prior student knowledge)


Digital Media and Design 1

Have you ever created a gif before?        yes            no        what’s this?

If yes, what program or app did you use to do it? ________________________

Have you ever animated before?         yes           no       what’s this?

If yes, what kind of animation did you do? ____________________________

How comfortable are you with photoshop?    beginner         okay           pro

Name a stop-motion artist, movie or show. ______________________________

What do you plan to do after graduating high school? ____________________________


LESSON 1: PHOTOSHOP REFRESH
V. Time Required

• 15 minutes 

VI. Materials and Resources

• Photoshop
  
• Laptops
  
• Access to internet or images already on computers
  

VII Instructional Strategies
Key Terms and Vocab

• Photoshop
  
• Tools
  
  • Magic wand
    
  • Transform (Ctrl T)
    
  • Ereaser
    
  • Crop
    

Discussion

• Before we start animating with Photoshop, we should be familiar with how the program works and be able to use it easily
  
• Save any image from the internet, pull it into photoshop and alter it as drastically as you can in 15 minutes. This will get you familiar with tools.
  
• Required skills
  
  • Isolate part of an image and erase the background using the magic wand to select and delete to erase.
    
  • Use Ctrl T to resize an image
    

Demonstration/guided practice

• I will walk around and help students who are stuck at various stages
  

Independent Practice

• Students will work for 15 minutes to alter images in PS
  

Check for Understanding

• If images are not isolated from the background, I will help students isolate and delete the background
  
• If students have issues with specific tasks and tools, I will come around to help fix issues
  

Time Flow

• 3 - downloading image
  
• 12 - edit in photoshop
  

Closure

• Review how this was just a practice assignment to make photoshop less intimidating
  
• Remind students of resources available to them
  
  • Tools reference sheet
    
  • Google - if you have an issue in photoshop, you’re 99% likely to not be the first one and someone has already figured out how to fix it.
    

VIII. Evaluation Strategies
Isolating image
0 No image submitted
1 Image has not been isolated from the background
2 Image has been partially isolated from the background
3 All of the background has been deleted to leave one part of the image.(With more difficult images, less needs to be deleted for full credit)

Transforming
0 Photo has not been transformed
1 Image shows evidence of being resized, rotated, skewed or otherwise transformed

Other edits
0 Image has not been edited in other ways.
1 Photo shows evidence of at least one other edit, such as color change, collaging multiple images, cropping, etc.
2 Photo shows evidence of multiple other edits, such as color change, collaging multiple images, cropping, etc.

LESSON 2: PRACTICE GIFS
VI. Materials and Resources

• Computer
  
• Photoshop
  
• Access to the internet
  
• Artist resources
  
  • http://cinemagraphs.com/
    
  • Erdal Inci http://giphy.com/gifs/erdalinci-art-2013-light-tGKHLAlkajYyc
    
  • Giphy.com/artists
    

VII. Itinerary and Instructional Strategies
Key terms/vocabulary to be introduced

• Gif
  
• Animation
  

Questioning strategies/discussion

• What is a gif? Graphics Interchange Format
  
• Where do you find them? (On the internet. They only live on the internet. They won’t play on your computer without the internet.)
  
• We’re going to make gifs using Photoshop
  

Demonstration/guided practice

• Practice Gif1: How to make a gif in CS6 using images:
  
  • Goal: make multiple images play and save as a gif
    
  • Directions based on the video: https://www.youtube.com/watch?v=-G__0AaG3Og
    

• Open photoshop
  
• Open images you wish to turn into a gif
  
  • File > open > select images > click OPEN
    
• Click window > Timeline. A bar should appear at the bottom of the window.
  
• In the center of the timeline bar at the bottom of the screen, click the dropdown arrow, then select “Create Frame Animation.” A frame should appear in the right corner of the timeline bar.  
  
• Do this in each image window until each has a frame.
  
• Click the timeline dropdown menu at the top right corner of the timeline bar. Select “Copy frame”
  
• In another image window, use the same drop down menu,and select “paste frame.” It will ask if you want to paste before or after the last frame. Choose and hit ok.There should now be 2 frames in in one window.
  
• Paste all other frames into one image tab.
  
• To change image order, hold and drag images into the order you desire
  
• In the bottom left part of the timeline bar, click the loop drop-down menu and select “forever”
  
• To change the length of each frame, click the drop-down arrow at the bottom corner of the frame and select the length you prefer. To do many at once, Ctrl +click to highlight multiple, then use the same drop-down arrow.
  
• To save, (depending on what version of PS you have) click File > Save for Web > Save OR File > Export > save for web
  
  • Gif should already be selected as format
    
• To view, drag and drop into google chrome
  

Student independent practice/activity

• Students will work to create gifs
  
• Resources:
  
  • http://tv.adobe.com/
    
  • http://www.creativebloq.com/
    

Demonstration / Guided Practice

• Practice Gif #2: Make an image grow and shrink in a loop
  
  • Open the same image multiple times in photoshop. To do this, open it once, then copy and paste it into new file windows
    
    • Ctrl A - select all
      
    • Ctrl C - copy
      
    • File > New > ok - create a new document. It should be the same size automatically
      
    • Ctrl V - paste
      
  • Save each image with a numbner, 1 - X
    
  • Alter the size of each image so each consecutive document is stretched larger than the last. Use the transform tool to stretch the image beyond the document borders.
    
  • Follow directions from practice gif 1 to create a frame animation with the images
    
  • To make the image appear to grow, order images so they go from least zoomed in to most zoomed in.
    
  • To make images appear to shrink, repeat images again from most zoomed in to least zoomed in. The largest and smallest do not need to be repeated
    
    • EX: if you have 5 images, the frames will run 1 2 3 4 5 4 3 2
      
  • Use practice gif 1 directions to loop and save the gif.
    
  • Slideshow: https://docs.google.com/presentation/d/1ilsO1_nZ7TVeuK7bmET5i01goyjfQOIYvbIp7V6vJm8/edit#slide=id.g1d160b95c7_0_115
    

Independent practice

• Students will work on their growing and shrinking gifs
  
• Any extra time should be spent creating extra practice gifs to extra credit.  
  

Checking for understanding

• Gif plays
  
• Gif is saved
  
• Gif grows and shrinks
  

• Time flow

• 10 - discussing gifs as art
  
• 15 - mess around on PS
  
• 5 - Introducing resources for instruction
  
• 60-90 - work on gifs
  

• Closure

VIII. Evaluation Strategies

Practice gif 1
0 Gif does not exist or is not turned in
1 Gif is saved incorrectly, uses 3 or fewer images, does not repeat
2 Gif is saved in the wrong format, uses at least 4 images, may play through only once instead of looping
3 Gif is saved as a gif, uses at least 5 images, plays on a repeated loop

Practice gif 2
0 Gif does not exist or is not turned in
1 Gif is saved in the wrong format, does not grow and shrink in logical order, uses 5 or fewer frames
2 Gif is saved in the wrong  format, grows and loops before shrinking or does not loop, or uses less than 8 frames
3 Gif is saved in the correct format, plays on a loop, grows and shrinks, has at least 8 frames

IX. Suggested Supplemental Activities

• Work on extra practice gifs
  
• Create gifs that use one image manipulated in ways other than growing and shrinking
  
• Share gifs or have a gif critique
  

LESSON 3: STOP MOTION ANIMATION THROUGH GIFS
V. Time Required

• 4 90 minute class periods
  

VI. Materials and Resources  

• Computer
  
• Camera
  
• Tripod
  
• Charcoal
  
• Paper
  
• Pencil
  
• Marker
  
• Objects to manipulate in stop motion
  

VII. Instructional Strategies
Key Terms/Vocab

• .gif
  
• Stop motion
  
• Frame by frame animation
  
• Frame rate
  

Questioning / Discussion Strategies

• Day 1: Introduce project
  
• Animation: The use of multiple images played in succession to imply movement or action
  
  • All animation is done frame by frame, many just play so fast you can’t see each individual frames
    
  • A gif in photoshop can be played at 10 frames / second at the fastest. The human brain can see each frame at this rate, but at 16 frames / second or higher, it reads seamlessly.
    
• Project: Create a frame by frame animation using photoshop and saving as a gif.
  
  • These animations will not have sound. A gif is an image format, and images can’t be saved with sound.
    
  • Animations must be 25+ frames (and be about 1-3 second long)
    
    • Students may work in groups but each person is still accountable for 25 frames, so the more people, the more frames required. (2 people = 50 frames, 3 people = 75 frames etc.)
      
  • Depending on room and access to materials, make sure there is a reliable system in place for students to tell me any specific materials they need
    
  • METHODS
    
    • Destruction Animation
      
      • This involves using one sheet of paper/canvas, drawing/painting on it, taking a photo, then drawing/painting the next frame directly on top, effectively destroying the first frame in the process
        
    • Draw all frames in photoshop
      
    • Start with a photo and alter the photo one frame at a time
      
      • This can include overlaying multiple photos, morphing photos, changing colors, or otherwise changing  
        
    • Work with puppets and sets
      
      • This is more traditional frame by frame, like the style of Tim Burton. Students may build sets and puppets, or use more found objects in settings that already exist
        
    • Building and animating within virtual worlds
      
      • Some gaming platforms (Minecraft, Sims, Zoo Tycoon, etc.) allow users to build sets and characters. Students can have the characters perform actions, and screenshot the game to create an animation.  
        
    • Other
      
      • if students have other ideas, they are welcome to talk with me and try them out.
        
    • NOT AN OPTION: download a video, separate the frames, and turn it into a gif.
      

• Start each day with a gif animation artist or artists
  
  • Many many gifs saved in slideshow. Saved from giphy.com. Not always school appropriate. Save at home or on teacher wifi.
    
    • https://docs.google.com/presentation/d/15A9Y-fumG3Ga31vLNdiH7UeOY_TjKnq6m6wCt8RfVOA/edit#slide=id.g1b4142dfb1_0_80
      
  • Headache by Jake Fried - Destruction Animation
    
    • https://vimeo.com/28815014
      
  • Sticky Man by Eduard Taberner - Handdrawn frame by frame in a real setting
    
    • https://vimeo.com/28815014
      
  • Kubo and the Two Strings behind the scenes
    
    • https://www.youtube.com/watch?v=zHyTYL1Z1aM&t=305s
      
    • https://www.youtube.com/watch?v=p4-6qJzeb3A
      
  • Stick It overlay scene
    
    • https://www.youtube.com/watch?v=H594Ees_qCI
      
  • Minecraft as a way to build virtual sets and characters
    
    • https://www.youtube.com/watch?v=-Of_yz-4iXs&t=187s
      

Demonstration / guided practice

• Play by ear - if there are specific things students need to see, demonstrate for them or for the whole class.
  
• Use a projector with photoshop open to refresh students on how to create gifs or to  troubleshoot issues.
  

Independent Practice

• Students will work independently or in groups on their animations.
  
  • They may need assistance obtaining materials specific to their projects
    
• Remind students to save in-progress work as .psd so they can access it again later. If they save as a gif before finishing, they cannot (easily) re-edit.  
  

Checking for Understanding

• Walk around and chat with students regularly about their ideas and progress
  

Closure

• Remind students each day where on the project timeline they should be, and remind them they are always welcome to come and work in other parts of the day if they are behind.
  
• Remind students every day that if there are materials they need, tell me so I can try to get them for next class.
  
• Remind them of any pertinent information coming in the following days (ie. schedule changes, guest artists)
  

VIII Assessment
Practice Gifs 

Animation is planned out
0 No sketch was turned in
1 Sketch shows 1-2 frames but does not tell of how the animation will progress
2 Sketch shows a few frames and gives an idea of how the animation with progress  
3 Sketch shows multiple frames and explains the general plan for progressing through the animation

Idea is original
0 No sketch turned in
1 Idea is directly copied from another artist
2 Idea is taken from another artist and altered slightly
3 Idea is original and unique to the artist, or references other work while taking a new approach to it

Animation


Creativity
0 No animation is turned in, or idea is plagiarized
1 Work is derivative and uses  very basic techniques and/or materials
2 Work is derivative but made unique by the and utilizes some unique techniques and/or materials
3 Work is original and utilizes unique techniques and/or materials

Effort / complexity
0 No animation is turned in
1 Work is very basic and uses simple techniques without embellishment or added effort
2 Work utilizes 1+ advanced techniques (within the media chosen by the artist). Each frame is given care and attention
3 Work is complex, and utilizes advanced techniques (within the media chosen by the artist). Each frame is given care and attention

25+ frames
0 Less than 5 frames
1 5+ frames
2 15+ frames
3 25+ frames

Material use / craftsmanship

0 No gif submitted 
1 Frames are messy and haphazard with little care and attention paid to detail
2 Frames are somewhat neat and some attention is given to detail and craftsmanship
3 Frames are neatly created with attention to detail and craftsmanship

Correct file format
0 File is saved as something other than .gif and cannot be played in a web browser
____
____
3 File is saved as .gif and can be played in a web browser


IX Supplemental Activities

• Bring in guest artists who work predominantly in animation
  
• Show a stop motion film to the class when the project is done and discuss the different techniques used, what roles people perform who work on the movie, etc.
  

LESSON 4: MID-POINT CRITIQUE
V. Time Required

• 90 minutes
  

VI. Materials and Resources

• Computers
  
• Photoshop
  
• Partially complete gifs students have made
  

VII. Instructional Strategies
Key Terms / Vocab

• Critique
  
• Constructive criticism
  

Discussion / Questioning strategies

• Discuss with students the purpose of a mid-point critique
  
  • To have peers help solve issues
    
  • To get feedback about how work is being interpreted
    
• Discuss how students are learning in a community of artists. The teacher is not the all-knowing source for help. Peers may be able to offer assistance as well, and students should practice relying on their peers for help with projects.
  
• Students must come up with at least one question they have regarding their work. It can be technical (ie. how do I add text to one frame and not another?) or content based (ie. does the animation moves too fast to be understood?)
  
• Students will get up to view and comment on 3+ gifs. If they cannot answer the question posted by the artist, they should answer one of the following questions?
  
  • What’s working well?
    
  • What’s not working well?
    
  • What would you suggest the artist change in this work? Why?
    
  • Is there something the artist should add or take away? Why?
    

Demonstration / guided practice

• I will show students how their computer screens should look for crit
  
  • Gif should be saved as a .gif and open and playing on the desktop. If students have not transferred images into photoshop or created frames with them, what progress they have made should be clearly displayed.
    
  • A note should be open on the desktop with at least one question.
    

Independent practice

• Students will save their gif at whatever stage it is currently at
  
• Students will open a note or blank document on their computers
  
• Students will come up with 1+ questions that they have about their work and write it on the note so others can respond.
  
• Students will get up and move to other seats to critique their peers gifs.
  

Checking for understanding

Closure

• Ask students if the feedback they received was helpful
  
• Are there any questions that students didn’t have answered? They may tell the whole class and see if anyone can help solve the issue
  
• Students should continue to work on animations  
  

Time flow

VIII. Assessment
Participation
0 Student did not participate
1 Student critiqued 1-2 gifs and left minimal comments
2 Student critiqued as least 3 gifs but left minimal comments
3 Student critiqued 3 or more gifs and left constructive feedback

IX. Supplemental Activities

• Critique of professional work as practice
  

LESSON 5: FINAL CRITIQUE
V. Time Required

• 90 minutes
  

VI. Materials and Resources

• Projector
  
• Computer
  
• Access to internet
  
• Place to send all completed gifs (schoology, google drive, etc)
  

VII. Instructional Strategies
Key Terms / Vocab

• Critique
  
• Constructive criticism
  

Discussion

• Critique is important to do at the end of a project to get an impression of how your work is seen by others, and what improvements you can make if you choose to create more work in the future.
  
• All gifs will be submitted and we’ll take the day to view them all on the projector in front of the class. Please don’t be nervous about sharing your work. If you’re very unhappy with it, this is an opportunity to learn how to fix it for the future.
  

Demonstration / Guided Practice

• Select any/all that apply to a given animation
  
  • How does the animation method work with the concept? Would you suggest the artist use another animation method?
    
  • Does the frame rate fit the animation? Would it be better faster or slower? Why?
    
  • How is the craftsmanship? What parts, if any, needed more attention?
    
  • Does the movement feel realistic and believable? Does it behave in an unexpected way?
    
  • Does the set or background make sense for the character(s) and story?
    
  • How is the timing? Does the action in the gif appear to obey the laws of physics or is something off about it?
    

Independent Practice

• Students will write a brief written reflection about their work after they have heard feedback from their peers:
  
  • Are you happy with your work? Why or why not?
    
  • What would you improve or change?
    
  • Did you enjoy this process? Would you do it again? Why or why not?
    

Checking for Understanding

• Each student must talk at least once. If they need more prompting to formulate an idea about
  

Time Flow

• Each gif will get 3-5 minutes for critique, depending on class size and number of students working in groups
  

Closure
VIII. Assessment
Submission of gif for critique
0 Student did not submit work for the class to view and critique
1 Student submitted incomplete work
2 Student submitted work in the wrong file format so it could not be played
3 Student submitted gif to be viewed and critiqued

Participation in critique
0 Student is quiet and visibly not engaged: often looking at a phone or working on other work
1 Student is occasionally engaged, offering a comment or two but mostly not paying attention
2 Student is quiet but visibly engaged. Alternatively, student is overly engaged and dominating the conversation
3 Student is visibly engaged and involved in the conversation, offering constructive criticism and also listening to others

Written reflection
0 Student did not submit work
1 Student does not answer all questions or answers with short phrases or single words
2 Student answers each question but in little detail.
3 Student answers each question thoroughly, in 1-2 sentences

IX. Supplemental Activities

LESSON 6: ANIMATED MOVIE VIEWING AND CRITIQUE
V. Time Required

• 120 minutes (90 for film viewing, 30 for crit/discussion)
  

VI. Materials and Resources

• Projector
  
• Movie
  
  • Kubo and the Two Strings
    
  • Tim Burton - Coraline, The Nightmare Before Christmas, The Corps Bride
    
  • Wallace and Grommet
    
  • Fanstastic Mr. Fox  
    

VII. Instructional Strategies
Key Terms / Vocab

• Production team
  
• Animation studio
  

Discussion

• Inform students that they will write a critique of the film when they are done watching it
  
• While watching the film students should look out for
  
  • How fast the frames play
    
  • What methods the animators used
    
  • Any specific scenes they were impressed by and why
    
  • What the sets include and what they are made of
    
  • What the puppets include and what they are made of
    
  • Lighting
    

Independent Practice

• Students will view the movie
  
• Students will write a critique of the film to turn in that answers 3 of the following questions. (They are the same as the ones from the students’ critique)
  
  • How does the animation method work with the concept? Would you suggest the artist use another animation method?
    
  • Does the frame rate fit the animation? Would it be better faster or slower? Why?
    
  • How is the craftsmanship? What parts, if any, needed more attention?
    
  • Does the movement feel realistic and believable? Does it behave in an unexpected way?
    
  • Does the set or background make sense for the characters) and story?
    
  • How is the timing? Does the action in the gif appear to obey the laws of physics or is something off about it?
    

Checking for Understanding

• Pause the movie periodically to point out specific things about the animation or ask students to reflect on certain parts
  

Time Flow

• 10 - discuss what in the film students should look for while watching
  
• 90 - watch film
  
• 20 - critique film
  

Closure

• Offer time to comment on the project. Who liked and who didn’t? What would you have liked to learn that you didn’t? What would you keep in it for future students? Etc.
  

VIII. Assessment
Written reflection
0 Student did not submit work
1 Student does not answer all questions or answers with short phrases or single words
2 Student answers each question but in little detail.
3 Student answers each question thoroughly, in 1-2 sentences

IX. Supplemental Activities

• Have students upload gifs to their preferred social media platform the class prior to critique and see what type of reaction it. Incorporate that feedback into the critique.