10th Grade — Unit 9.5: Extension & Enrichment (Optional): Intro to Motion: Animated GIFs in Photoshop

🗓️ Before Class: Teacher Prep

Gather/set out: Computer with Photoshop, A simple multi-layer file (teacher-provided or built in class) to animate.
If today includes physical/hands-on work: make sure the classroom cameras are charged, working, and have a cleared SD card ready for photo uploads.
Pull up today's slide deck (see 🖥️ Slide Deck below) so it's ready to project.

🖥️ Slide Deck (project or share with students)

Short, on-the-board pacing slides for today's Do Now, agenda, vocabulary, and exit ticket -- the full detail lives in the handout above, not here.

Day 1

Open / download this slide PDF

Day 2

Open / download this slide PDF

🧑‍🏫 Substitute Teacher Guide

A scripted, step-by-step runsheet for today's class -- hand this to anyone covering the room who doesn't know the daily routine.

Day 1: 📋 Open Substitute Guide
Day 2: 📋 Open Substitute Guide

🎯 Essential Question

How do we use Photoshop's Timeline panel to build a simple looping animation?

📈 Learning Objectives

By the end of this lesson (2 Days), students will be able to:

Explain how a frame-based animation creates the illusion of motion.
Build a simple looping animation (2-4 frames) using Photoshop's Timeline panel.
Export the finished animation as a GIF.

📐 Standards Alignment

CDOS (Career Development & Occupational Studies)

CDOS 2 — Integrated Learning -- students will demonstrate how academic knowledge and skills are applied in the workplace and other settings.
CDOS 3a — Universal Foundation Skills -- basic literacy, communication, and problem-solving skills required for a career.
CDOS 3b — Career Majors -- knowledge and skills required for success within a specific career pathway (here, Digital Design).

ACP (Adobe Certified Professional) Photoshop Exam Objectives

ACP 3.1 — Use layers to manage design elements.

🎓 Study this for the ACP exam: Domain 3: Organizing Documents

📚 Key Vocabulary

Frame: One single still image in a sequence that, played quickly in order, creates the illusion of motion.
Timeline Panel: The Photoshop panel (Window > Timeline) used to sequence layers into frames and control an animation's timing.
Loop: An animation set to play its full sequence over and over automatically.

🧰 Materials & Tools

Computer with Photoshop
A simple multi-layer file (teacher-provided or built in class) to animate

🧠 Do Now (Warm-Up)

Flip through a physical flip-book (or picture one in your head). What makes the drawings look like they're moving?

📤 How You Submit This — For Credit

How you submit today's work depends on what kind of work it was. Physical/paper work (most of this semester so far): photograph it with a classroom camera, upload the photo from its SD card onto a computer, and save it into your portfolio -- that upload is your submission, and the physical piece itself is yours to keep, the same as in Grade 9 (your notebook is the one thing with a home base in the room, and even that's your call to bring home when you want it). Digital work (once you're producing files in Photoshop, second semester on): no camera needed -- instead, EXPORT the file. Export your finished project as a JPG, as a PNG, AND save a copy as a PSD (all three), then upload all three into your portfolio. Either way: the portfolio upload, with a description, is what actually counts as turning the assignment in for credit.

📁 Portfolio Update — Once a Week

Once a week, add your best finished or in-progress piece to your portfolio (the Google Drive folder you started in Grade 9, becoming your Google Sites portfolio in Lesson 10) with a 1-2 sentence caption: what it is, what tool/skill it used, and one thing you learned. Keep it current -- don't save it all for the portfolio-website lesson.

✍️ Example description for your Google Sites portfolio (fill in YOUR blanks -- don't just copy this):

For this piece, I made ______________ (name what you made) for “Intro to Motion: Animated GIFs in Photoshop.” This project asked: “How do we use Photoshop's Timeline panel to build a simple looping animation?” I used Frame by ______________ (explain how you used it in THIS piece). The hardest part was ______________, and I solved it by ______________. I'm proud of ______________ because ______________.

📋 Main Workshop / Lesson Sequence

This lesson spans 2 Days. Suggested pacing:

Day	Focus	Plan
Day 1	Frames & the Timeline Panel	Do Now (5 min, above). Mini-lesson (10 min): frame-based animation, and a demo of the Timeline panel turning layer visibility on/off into frames. Guided practice (15 min): as a class, build a simple 2-frame animation together (e.g. a blinking eye or a bouncing shape). Independent practice (15 min): build your own 2-4 frame animation from a provided multi-layer file. Save progress (5 min).
Day 2	Timing, Looping & Export	Do Now (5 min): what would happen if your frames played too fast or too slow? Workshop (30 min): adjust frame timing so the motion reads clearly, set the animation to loop, and finish your 2-4 frame animation. Export (10 min): export as a GIF and confirm it plays correctly outside Photoshop.

✅ Assessment & Exit Ticket

Exported GIF checked for correct looping playback and at least 2 clearly distinct, purposeful frames.

Exit Ticket: What was harder to get right: the individual frames, or the timing between them? Why?

📊 Pull up the anonymous Class Check-In for students to fill out before they go.

🧩 Differentiation & Accommodations

English Language Learners: provide translated or bilingual glossaries, visuals, and sentence frames; pair with a peer for meaningful participation. Students with IEPs: provide extended time, step-by-step checklists, and one-on-one or small-group support as specified in each student's plan. Attention-related needs: break the task into smaller steps, use visual timers, and minimize distractions. Students who finish early: extend the task by adding a second design variation, mentoring a classmate, or writing a short reflection connecting today's skill to a career pathway.