Web Motion: Create a Preloader
25mBeginner2014-01-28
Authors
Tom Green
Teacher, Author, Professor
Course details
Behold the lowly gif animation: it's making a comeback on the web, appearing as a preloader, or indicator that site content is loading. Join Tom Green, as he shows you how to make your own GIF-based preloader in this installment of Web Motion for Beginners. You'll learn how to export a series of fireworks-style explosions from After Effects, create an animated GIF in Photoshop or Fireworks (your choice), and make the GIF usable as a preloader in Edge Animate.
Skills covered
FireworksEdge AnimateWeb GraphicsWeb DesignAfter EffectsPhotoshopAdobeDeep Dive (X:Y)
Concepts
Create a Preloader
- 01 - Project overview and plan
- 02 - Creating the composition and preloader in After Effects
- 03 - Adding the particles in After Effects
- 04 - Rendering the composition in After Effects
- 05 - Animated GIF creation in Photoshop
- 06 - Animated GIF creation in Fireworks
- 07 - Assembly in Edge Animate
Related courses
- Principle for UX Design
- Principle for UX Design (2021)
- Web Motion: Create a Parallax Effect
- Web Motion: Create an Animated Banner Ad
- Motion Graphics Loops: 1 Photoshop Techniques
- Prototyping for Non-Designers
- Adobe Animate: Designing Interactive Experiences
- Motion Graphics Loops: 2 After Effects Techniques