Using animated GIFs in your web banners is a fun, eye-catching way to engage viewers. You can create basic animations in Photoshop, but if you really want to elevate your animations, After Effects can help you achieve a more dynamic and smoother look.
I will show you how to leverage After Effects’ video-editing capabilities for fluid animations. Then we will transfer our work into Photoshop to convert it into a GIF file.
We will transform this static banner from this:
Let’s get started!
Step 1: Preparation
Save all the assets that you’ll be using as individual files. Make sure your assets have a transparent background. For this example, I saved my assets as .png. Text and shapes can also be created in After Effects.
This is one of the items that is going to be animated.
Step 2: Animating in After Effects
Now that all the assets are ready to go, let’s dive into After Effects.
Creating a Composition
Open After Effects and create a new composition. Go to Composition > New Composition. A window will pop up where you can fill out all the specs of your project. Below you can see the specs for our example. The dimensions are 300 x 250 px, frame rate is 30 fps, and duration is 6 seconds. These all can be updated at anytime in ‘Composition Settings’ under the Composition tab.
Importing assets is as easy as dragging and dropping. Simply place your files into the ‘Project’ panel in the workspace. (Pictured below are my assets in the Project panel; they’re placed into a folder to keep organized.)
Adding assets into the Project panel.
Now we can start animating! Drag your assets into the ‘Composition’ panel or the ‘Timeline’ panel. Adding to either place will make them appear in both panels. Like in Photoshop, the top-most layer in the timeline will overlap the bottom layers, so adjust the layers accordingly.
Assets show in both Timeline and Composition.
I did not import the “+” and “=” sign that you see in the animation, so I will create them in After Effects. Text and shapes should be created in After Effects because they’ll have better quality.
For the animation, we want each item to grow sequentially, like an equation building out. We’ll start by reducing the scale of each item to 0%. To do this, select the layer you want to adjust, click to expand ‘Transform’, click on ‘Scale’ so it has an active marker in the timeline, and then set the percentage to ‘0%’. Below is an example of this using the first icon. Next, do this to the rest of the equation layers.
1equation.png layer has the scale set to 0%.
Now that we have all the equation layers dialed down to 0%, we can start animating the first item in the equation (layer ‘1equation.png’.) Move the current time indicator (blue line) to 06f (6th frame, given 30 frames per second). Next, change the scale back to 100%, and a marker will automatically appear.
1equation.png layer is set to scale to 100% at 06f.
Do the same thing for all of the equation layers, but make sure one starts after the other. For this example, each layer has a 06f space in between to give it some buffer space. You can always adjust the start and stop times by sliding the markers across the timeline.
This shows you the timing of each layer.
Now that the equation is done, let’s move on to animate the CTA (button). We want the light green button to look like it’s being clicked on. By adjusting the position of the top layer of the CTA, we can achieve this. Set the current time indicator to the start time of the button animation. Click on “Position” to set the marker on the timeline. Forward 04f, and nudge the button down so it completely covers the darker teal. Then forward 04f again and nudge it back to the original position. Now, it looks like the button is being “clicked”.
This shows you the positioning of the CTA.
The animation is completed but only took shy of three seconds. We can adjust the length of the composition by going to Composition > Composition Settings and shortening the time under ‘Duration’.
Double check your animation to make sure everything flows well and at the right timing.
Now it’s time to export our animation! Go to Composition> Pre-Render and a new section will pop up. Check your output settings to see if it’s correct, then click the ‘Render’ button. For this example, we will output it to a .mov file.
This screen will appear for rendering.
Step 3: Converting Animation to .Gif in Photoshop
Now it’s time to create the .gif using Photoshop.
Importing Frames to Layers
Create a new file in Photoshop with the same dimensions as your After Effects file. After you’ve created your new composition, go to File > Import > Video Frames to Layers and import your .mov file.
Video Frames to Layers…
If the timeline does not automatically appear, go to Window > Timeline.
On the bottom left, you can set how many times you want your animation to loop. For this example, I set it to ‘Forever’. After everything looks good, it is time to export it as a .gif. Go to File > Export > Save for Web. Choose the .gif format.
Saving as .gif
After all is saved, your animated .gif is good to go and ready for the world to see!
Thank you very much!