Animate Mobile Interfaces with Adobe Illustrator and Adobe After Effectsのトレーニングコース

Introduction

Adobe Illustrator and Adobe After Effects

• Assets and components used in Adobe Illustrator and Adobe After Effects
• Design system environments in Adobe Illustrator and Adobe After Effects

Overview of Web Design

• UX vs UI
• Low-fidelity design vs high-fidelity design vs responsive mobile design

Preparing the Development Environment

• Installng Adobe Illustrator
• Instaling Adobe After Effects

Planning and Animating with Adobe Illustrator

• Creating a sitemap
• Creating a low-fidelity wireframe
• Creating a high-fidelity wireframe
• Creating a mobile wireframe
• Designing with column grids
• Using Illustrator templates
• Adding colors and fonts
• Adding and cleaning up images
• Using layers
• Creating symbols and icons
• Finalizing for standards in responsive mobile applications

Animating with Adobe After Effects

• Importing artwork from Adobe Illustrator
• Creating reusable components
• Building dashboard tiles and dashboard screens
• Finalizing the dashboard tiles and dashboard screens
• Animating elements and screens
• Creating and adding animations
• Finalizing the animations
• Exporting all final sequences as a gif

Summary and Conclusion