LINK TO FINAL CLASS:
HAND DRAWN ANIMATION: Create an Animated Gif in Adobe Photoshop

CLASS DESCRIPTION:

Learn how to easily create hand drawn animation in Adobe Photoshop!

Have you ever wanted to spruce up your website or social with fun, personalized animated gifs? It’s actually pretty simple! In this class, you’ll learn the basics of traditional animation and how to use the Video Timeline tool in Photoshop to create fun hand drawn animations. This class will be a great first step for anyone who is familiar with photoshop and wants to start learning animation.

Hand Drawn Animation: Create an Animated Gif in Photoshop - image 1 - student project

What you'll learn:

Fundamentals of traditional 2D animation
Setting up photoshop file
Basics of the video timeline tool
Creating layer frames to animate characters and text
Workflow and organizing of frames
Animating with a video layer
Exporting your animation as a video or animated gif

What you'll make:

At the end of the class, you will have created a personalized hand drawn gif that will impress others, as well as some useful skills to create additional personalized animations.

What you'll need:

Adobe Photoshop (free trial of the software program at Adobe.com)
Not required but would recommend a drawing tablet or iPad with Apple pencil.

PROJECT DESCRIPTION:

For this project, you will be creating a custom hand drawn gif made up of three parts:

A primary animation, which can be as simple as a character waving or a bouncy doodle
An animated hand drawn word or phrase
And a fun transition effect

Hand Drawn Animation: Create an Animated Gif in Photoshop - image 2 - student project

In order to create your animation you will:

Select the concept for your animation
Set up your photoshop file
Sketch each keyframe for the primary animation
Then draw the inbetween frames
Apply frame animation technique to hand drawn text
Create a transition effect animation using a video layer
Lastly, export your animation as a gif

What You'll Need:

For this project, you will need Adobe Photoshop. If you don't have Photoshop you can get a free trial of the software program at Adobe.com. Also a drawing tablet or an iPad with Apple pencil is recommended but not required.

Deliverables:

Sketch or one of your key frames
A brief blurb about your animation concept
Final animated gif
Bonus: Add color to your final gif

If you have any questions throughout the class, please leave a comment in the Discussions section of this class and I'll be happy to help. I can't wait to see all your personalized animations!

CLASS OUTLINE:

Class Planning Document

INITIAL CLASS TRAILER:

CLASS LEARNINGS:
I learned a lot while going through the Skillshare Teacher Challenge and creating this class and wanted to share a summary of my learnings to help any teachers that are going through the program.

I think the biggest struggle I had in creating this class was narrowing the scope and focus of the class and project. Looking back at the planning stage I had a really vague plan for the class project and I think it would have been better to simplify the project and focus on one aspect students would animate. And would just spend more time explaining that technique and providing more examples.

Another struggle I faced was having multiple rounds of edits for videos, especially my intro video. Moving forward, I now focus on creating content and editing the lessons first and then focus on filming the talking heads for the intro and wrap-up videos last. This has allowed me to be able to really approach the intro as the class trailer and easily pull from the content from the core lessons to help students preview the class experience and has led to fewer edits in more recent classes I have worked on.

Instagram:
@isaiahcardonakc

Isaiah Cardona

Art Director & Motion Designer

1,146

40