Forward 04f, and nudge the button down so it completely covers the darker teal. Click on “Position” to set the marker on the timeline. Set the current time indicator to the start time of the button animation. By adjusting the position of the top layer of the CTA, we can achieve this. We want the light green button to look like it’s being clicked on. Now that the equation is done, let’s move on to animate the CTA (button). You can always adjust the start and stop times by sliding the markers across the timeline. For this example, each layer has a 06f space in between to give it some buffer space. Next, change the scale back to 100%, and a marker will automatically appear.ġequation.png layer is set to scale to 100% at 06f.ĭo the same thing for all of the equation layers, but make sure one starts after the other. 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, do this to the rest of the equation layers.ġequation.png layer has the scale set to 0%. Below is an example of this using the first icon. 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%’. We’ll start by reducing the scale of each item to 0%. Text and shapes should be created in After Effects because they’ll have better quality.įor the animation, we want each item to grow sequentially, like an equation building out. I did not import the “+” and “=” sign that you see in the animation, so I will create them in After Effects. Like in Photoshop, the top-most layer in the timeline will overlap the bottom layers, so adjust the layers accordingly.Īssets show in both Timeline and Composition. Adding to either place will make them appear in both panels. Now we can start animating! Drag your assets into the ‘Composition’ panel or the ‘Timeline’ panel. (Pictured below are my assets in the Project panel they’re placed into a folder to keep organized.)Īdding assets into the Project panel. Simply place your files into the ‘Project’ panel in the workspace. Importing assets is as easy as dragging and dropping. These all can be updated at anytime in ‘Composition Settings’ under the Composition tab.
The dimensions are 300 x 250 px, frame rate is 30 fps, and duration is 6 seconds. Below you can see the specs for our example. A window will pop up where you can fill out all the specs of your project. Open After Effects and create a new composition. Now that all the assets are ready to go, let’s dive into After Effects. This is one of the items that is going to be animated. Text and shapes can also be created in After Effects. Make sure your assets have a transparent background. Save all the assets that you’ll be using as individual files. We will transform this static banner from this: Then we will transfer our work into Photoshop to convert it into a GIF file.
#ADOBE ANIMATE MY LOGO HOW TO#
I will show you how to leverage After Effects’ video-editing capabilities for fluid animations.
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.
Using animated GIFs in your web banners is a fun, eye-catching way to engage viewers.
0 kommentar(er)
