Besides Photoshop and Illustrator, which we mentioned in the previous article, Adobe Creative Cloud has another very useful application: Adobe After Effect CC. This application allows you to make visual effects and motion graphics for web, video and film. With After Effect CC, you can animate text und vector shapes and create effects through merging photos or videos. After Effect CC helped us to develop a loader for our new product (a web application) which is currently in development.
The idea was to animate application’s logo and use it as a loader while some background operation is being executed. The basic steps, which you need to conduct before you start to animate, are:
After you did all the steps above, you can launch After Effect CC, and if you did everything right you can start to animate elements. Optimal duration for loader is 3 seconds (75 frames) and animation should be in the infinitive loop. As you can see in the examples below, there are 6 different elements that we animated. To be able to make a best pick, we created 4 different versions of logo loader:
First of all, you need to set the order of showing each element by positioning them in a certain time interval. In the first and the second version, we used basic tools (move, scale, change color) for animation. The third and the fourth version were animated with special effects: mask and mosaic. When designing loaders, it is necessary to keep the uniqueness and simplicity. In most cases this can be achieved by using basic movements and transformations. Looking carefully through all designed loaders, we decided that the first loader is the best choice for our application:
We hope you like it as much as we do.
If you have any further questions or comments, please contact us.