Design the Web: Animated Loading GIFs

Design the Web: Animated Loading GIFs

26mBeginner2013-08-08

Authors

Chris Converse

Chris Converse

Applies design and UX principles to technology

Course details

Have you ever needed an animated GIF to spice up a webpage or signal data is being downloaded? Learn to create custom animated graphics for your websites, mobile applications, and other interactive projects in Adobe Photoshop, with these quick and practical techniques from Chris Converse. Chris shows how to transform artwork into Smart Objects, animate layer effects with the Photoshop tween capabilities, and move and resize existing animations. Plus, CS6 users can find out how to keyframe animations with the advanced video-based Timeline panel.

Skills covered

Web GraphicsImage EditingWeb DesignPhotoshopPhotographyLimited SeriesAdobe

Concepts

Introduction

  • Welcome
  • Using the exercise files

Creating Frame-Based Animations

  • Setting up your artwork for nondestructive editing
  • Animating a gradient overlay effect
  • Modifying animations after they are created
  • Creating a branded animation

Creating Keyframe-Based Animations

  • Preparing artwork for keyframe animations
  • Animating Smart Object transformations
  • Final animations and publishing settings