In the first UI Animation in Photoshop tutorial, I have shown the way to do simple animations in Photoshop like moving, scaling and style changing – if you are new to this and haven’t check that out yet, I recommend you to look into Tutorial #1 before this.
In this second tutorial, I will share my experiences in applying easing into the animation made with Photoshop. Special thanks to Jovie Brett Bardoles for sharing his manual way of applying easing in his animations, which inspire me to explore and dig into the Timeline feature in Photoshop.
I have been using Photoshop to make UI animations for my work and it works surprisingly well (at least for me). Of course, Adobe After Effect is still the best tool to create complex and awesome animations, but with Photoshop, you can still create some simple and high quality UI animations to preview the animation idea to others. With some combination of animation properties, you can definitely create some rich animations that is sufficient for discussion. There are certain limitations in Photoshop compared to After Effects (of course!), but for someone who wanted to just use one tool for UI Design + simple UI Animations, Photoshop is one of the best tool that you can get (even if it’s not really designed for UI design).
This tutorial #1 will cover some basic procedures to create simple animations using the Timeline feature in Photoshop CS6+ (no GIMP or older Photoshop), so if you are totally new to this, I hope you will find this tutorial helpful for your first step in making UI animation using Photoshop. Let’s begin!