Photoshop Animated GIFs

Create Animations That Work Everywhere

With the rise of mobile devices, animated GIFs have regained popularity because they just work (unlike Flash animations which do not work on mobile devices). GIFs are an easy solution for short animations.

In this 6-hour class, you’ll learn how to create animated GIFs for websites, ads, or even HTML emails. Photoshop lets you create numerous types of animations. Learn how to hide and show elements, fading them in or out, move things from one place to another, use Photoshop’s video timeline, and more. You’ll even add short video clips, and learn tips and tricks to create seamless loops!

This course is for people that have prior experience using Photoshop, but want to learn how to create and optimize animated GIFs.

This Photoshop course is located at our design school, Noble Desktop, at 594 Broadway in SoHo.

  • icon for small classesSmall classes
  • icon for small classesComputer provided
  • icon for small classesBook included
  • icon for small classesFree retake

Register for a Class 

$325 6 Hours 594 Broadway, NYC In-person classroom training

This course is offered at our design school, Noble Desktop, in SoHo. View upcoming dates and register for this course directly on Noble Desktop’s website.

Register at nobledesktop.com 

What You'll Learn

  • Create animated GIFs for HTML emails, ads, and websites
  • Learn to use Photoshop’s Timeline to create complex animations
  • Use effects, filters, and video clips
  • Create seamless looping animations
  • Save your animations as animated GIFs
  • Learn tips & tricks for reducing file sizes

Full Course Syllabus

Download PDF Outline

Section 1

Creating a Simple Animated GIF

  • Creating a frame animation
  • Adding frames
  • Setting frame duration using the frame delay option
  • Testing the animation
  • Saving as an animated GIF

Intro to Tweening

  • Animating position to create movement
  • Animating opacity to fade elements in/out

Keeping GIF File Size Down

  • Tweening multiple parameters
  • Tips & tricks for reducing file size
  • Reworking the animation to reduce file size

Creating a Complex Animation

  • Using clipping masks to create custom animations
  • Manually animating an object
  • Using Unify Layer options
  • Making edits that apply to all frames

Section 2

Using Video in Animated GIFs

  • Specifying a range from a video to import
  • Converting video into a frame animation

Creating a Video Timeline

  • Using keyframes to animate the Position property
  • Animating the foods into & out of the box
  • Moving the outermost foods along a curve instead of a line
  • Moving, editing, & offsetting keyframes in the Timeline
  • Copy/pasting keyframe values

Seamless Video Looping & Animating a Layer’s Transform

  • Adding a video background as a Smart Object
  • Making the video background loop seamlessly
  • Animating a layer’s rotation using the Transform property

Embedding Animations in Smart Objects

  • Embedding an animation within a Smart Object
  • Adding a filter to an embedded animation
  • Copying Smart Objects
  • Final positioning & blending modes