Creating an app loader from app's logo
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:
- Prepare file for animation
- Usually, Adobe Illustrator CC is the best solution to prepare the file. To make the animation you need to put each element, that you want to animate, in different layers. This is a very important step because if you have only one layer, you wouldn't be able to separate those elements.
- Specify how long the animation will last
- Duration is important because in After Effect you can specify the duration divided into frames. Usually, 1 second has 25 frames. By positioning keyframes in a time interval with manipulations on certain elements we achieve the effect of motion and animation.
- Make an animation plan
- Write the script with ideas and explain how each element moves or changes.
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.
