Motion Graphics Loops: 1 Photoshop Techniques

1h 16mIntermediate2016-06-24

Authors

Owen Lowery

Motion Graphics Artist and Animator

Course details

Learn how to create a looping animation for motion graphics and web design using Adobe Photoshop. Owen Lowery shows how to create animated loops in a variety of styles (including a hand-drawn look) and export them as different file types, suitable for web or video. Along the way, you'll learn how to set up a Photoshop workspace specifically for animation, animate layers in the Timeline, use onion skinning, and add color and texture to your animation. The results are exported as versatile animated GIFs and as video that can be used in other motion graphics programs such as After Effects.

Learning objectives
Working with the Photoshop Timeline panel and video layers
Animating frame by frame in Photoshop
Exporting animation and other media types to animated GIFs
Preparing After Effects animation loops for Photoshop

Skills covered

Motion GraphicsAfter EffectsPhotoshopMotion Graphics and VFXAdobeDeep Dive (X:Y)

Concepts

0. Introduction

01 - Welcome
02 - Using the exercise files

1. Setting Up the Photoshop Document and Timeline

03 - Photoshop settings
04 - Timeline settings

2. Frame-by-Frame Animation in Photoshop

05 - Animating layers in the Photoshop Timeline
06 - Onion skin settings
07 - Animating with video layers
08 - Editing layers in the Timeline
09 - Color and texture in the Timeline

3. Exporting Photoshop Animation to Video and GIFs

10 - Saving as an animated GIF with a transparent background
11 - Rendering as video with Adobe Media Encoder
12 - Exporting for After Effects

4. Importing Media for Conversion to an Animated GIF

13 - Importing image sequences for an animated GIF
14 - Importing video clips for an animated GIF (yule log)

Conclusion

15 - Next steps