Free Animated Text Logo Maker Online that actually works! Simple, fast and powerful application that will help you to create cool animated text logo for your company or business. This animated text generator is available for web site owners, blogger, designer and other professionals.
Free Animated Text Logo Maker Online is a free online tool for making text logos . This can be used to make animated text logo, logo maker, logo creator and all other kind of text logos. This tool enables you to build logos using your text and images on the best way possible. All you have to do is just type in your own words or letter that you want to appear as a logo and then pick the background and effects that you want it to appear as. Visit our website for more information about what we offer at http://www.freetextlogomakeronline.com
What an animated logo can do for your business
- Raise brand awareness
With a professionally animated logo you create a strong and memorable image for your brand. Animation will bring your logo to life and create a strong connection with your audience and potential clients in seconds.
- A professional and modern look
Having an animated logo for your corporate, product or website videos will add a sense of consistency and professionalism to your online presence. In fact, it can even give a professional flavor to any simple video or post and make it look like a valuable production.
- Support your brand story
Animated logos connect emotionally with the audience through the powerful combination of image, sound and motion. Animation conveys the vibe of your business 900% more efficient than a static image or any other media.
- It’s a one-time investment that pays off
Marketing often includes short-term trends that come and go. Investing in a professional-looking animated logo is a long-term investment. Buy once and use it forever in your videos.
How to animate a logo with After Effects in 7 steps
Step 1: Prepare the logo file
We’ll actually begin our logo animation tutorial in Adobe Illustrator (or the equivalent logo design software that you own). This is to make sure that our logo file is set up for animation.
Though animation software itself is raster based, logo source files should be in vector format. This allows them to be altered without sacrificing image quality (for example, scaling up a raster logo results in pixelation), and this will be useful later on when working with shape layers.
The logo should also be layered rather than grouped into a single object. This allows you to create more complex animations easily by animating separate parts of the logo. You can create new layers using the Add New Layer button at the bottom of the Layers panel, then copy and paste your logo pieces into them.
Finally, as animations are digital in nature, we are also working with RGB colors. If your Illustrator file is set to CMYK, you can change this by selecting your logo and navigating to Edit > Edit Colors > Convert to RGB.
Once you are ready, export your logo as a fully layered vector file. Because After Effects file types are in the Adobe family of software, I am going to save the logo I made as an AI (Adobe Illustrator) file, but there are a number of different vector file types to choose from if you are using a different software.
Step 2: Import the logo into After Effects
Open up After Effects. The interface may appear complicated at first glance, so let’s break down the essentials:
- Tool panel: This is where you can access basic graphics building tools such as the pen tool, type tool, etc.
- Project panel: This is where you manage and organize media files for your overall project.
- Composition window: This is the video preview window in which you can view the animation for the current composition (often referred to as a comp) that you are working on. Comps are essentially scenes that each have their own separate animation timelines. We’ll discuss compositions in more depth in the next section.
- Timeline: This is where you will build your animation. It consists of both the literal timeline on the right (where you will set up animation events to trigger on a time-based graph) and the comp area on the left (where you will layer and edit the attributes of your media assets).
- Control panel: This is where you can access various support functions such as media information, paragraph and alignment options, and the ready-made animation and visual effects libraries built into After Effects.
If you are unsure about any tool or button, hovering over it with your mouse will provide you with a description.
To import your logo file, simply drag and drop it into the Project panel or navigate to File > Import > File. Under the dialogue box that follows, choose to import the media as Footage and Merged Layers.
Step 3: Set up composition
A composition (comp) is a container that allows you to layer, edit and apply animations to media files. A larger production, such as a movie, will contain multiple comps that are organized in the project panel. So you can think of comps as a single scene within that movie, and each comp will have their own separate timeline. In our case, a logo animation that is less than five seconds long needs very few comps.
Let’s start with a simple background. Right click in the comp panel and choose New > Solid. Because my logo is white, I went with a black solid, but you may choose whatever color you want. In the following window, name the solid (“BG” in my case) and click the Make Comp Size button and select OK. Now drag your logo file from the project panel into the timeline panel and you should see your logo previewed in the comp window. If not, make sure you rearrange your layers by dragging the background solid underneath the logo file.
Right click the logo file in the comp panel and choose Create > Convert to Layered Comp. This will turn your logo file into another comp (you will see the icon has changed). Double clicking the logo file now will open up a new tab and take you into this new comp containing all of the separate layers you had set up in Illustrator. You can see now how comps work: they are essentially like nested folders.
If you wanted, you could convert each of these layers into their own comps by right-clicking and selecting Pre-compose. This would give that layer a separate animation timeline nested within the previous comp. And if you wanted to animate the entire logo at once, you would use the timeline associated with the primary comp.
With that out of the way, let’s get into how these timelines work for animation.
Step 4: Animate with keyframes
The way that After Effects (and most animation software) works is through keyframes. Keyframes are essentially markers that you can set along the timeline to identify when starting states and ending states for your animation should occur.
For example, let’s begin with a very simple animation: a fade-in. There are different attributes attached to an object, and attributes changed over a set amount of time is essentially what an animation is. To see these attributes, click the expand icon next to both the logo comp and the subsequent Transform property.
For a fading animation, you want to work with the attribute that measures the visibility of an object: Opacity. The opacity is set to 100% because the logo is completely visible by default.
Click the stopwatch icon next to Opacity, and you will see a diamond appear wherever your playhead marker (the drabble blue line crossing the timeline) has been set. This is a keyframe, basically a snapshot of the current value of the specified attribute. Move the keyframe by clicking and dragging it out to the 2 second mark on the timeline. Drag the playhead back to the 0 second mark, then create another keyframe and set the Opacity to 0%. Press the spacebar to preview the animation in the comp window.
You will see that you have created a gradual fade-in animation by changing the Opacity from 0% to 100% over the course of 2 seconds with just two keyframes. This is effectively how all animation is done in After Effects. You create a starting keyframe and an ending keyframe at different intervals along the timeline and After Effects automatically calculates the necessary frame transitions to get from point A to point B (traditionally called inbetweens in the animation biz).
You can see that there are a number of attributes that you can work with under the Transform property which we will explain briefly here. Feel free to experiment with keyframing and changing each of these to get a feel for their animation possibilities:
- Position: This attribute describes the position of the logo in X,Y space on the comp screen and allows you to animate linear movement.
- Scale: This attribute describes the size of the logo (as a percentage relative to the full size of the source file) and allows you to create growing or shrinking animations.
- Rotation: This attribute describes the orientation in degrees and allows you to create spinning animations.
Pro tip: When it comes to logo animation, it makes sense to work in reverse (as we did with the fade-in) since the animation is supposed to end on the finished, complete logo. This means you’ll need to create keyframes before you change anything so that you will have snapshots of the attribute values in their default state. You can then move those keyframes out to your intended end point on the timeline (however long you want the animation to last) and make new keyframes for changes at the start of the timeline.
Step 5: Animate your logo with shape layers
Now let’s get into some more interesting animation techniques through shape layers. Shape layers are objects that contain pathing information such as anchor points and connecting lines (similar to those in vector programs), and manipulating these opens the door to a whole host of animation possibilities beyond the Transform property.
First, we’re going to convert the logo into a shape layer. In the layered comp panel (the layers created from step 3), select all of your layers, right click and choose Create > Create Shapes from Vector Layer. You will see each layer is duplicated with a star next to it—this is a shape layer. Nested underneath the shape layer, you will find the Content property in addition to the Transform property. To the right of the Content property, you will also see the Add button which will allow you to select even more attributes to animate.
For my logo, I went with a pretty common and useful animation using the Trim Paths property. To do this, I added Trim Paths with the Add button to the shape layers for each letter, set the End attribute keyframe to 0% at the start of the timeline and 100% about 1 second later. As you can see, this makes the outline of the letters appear drawn by an invisible hand in real time.
In addition, I wanted to incorporate some accent animation to the background. Since I am working in black and white, I chose a looping tunnel effect reminiscent of the Twilight Zone. To do this, I used the polygon tool in the toolbar to draw a shape in the center of my comp, creating a new shape layer.
Then I added a Repeater property, centered the position and increased the number of copies. This duplicates the shape to create a seemingly infinite tunnel. Adjusting the scale increases the space in between each copy, and changing the rotation orients the copies in different directions for visual interest.
Finally, to animate this, I made an Offset keyframe of 0 at the start of the timeline and set it to a negative value later on in the timeline.
You are probably getting the idea that there are a lot of options for shape layers. This is true: there are full courses online dedicated to the subject and you should dedicate time to experimenting, practicing and learning.
I also can’t tell you which animation style will be right for your logo or what specific animation tools you will need to achieve that style. I can, however, give you advice on how to discover this for yourself. Look up inspiration from other animated logos such as your competitors, brands you admire and/or on a site like Pinterest or Dribbble—just as you did when you created the logo in the first place.
You will find that once you start analyzing these with your newfound knowledge of how to animate a logo that many are based around simple manipulations of shapes and transforms (even those that have clearly layered on advanced, stylized effects). Once you find a few that you like, you can work backwards in After Effects to try to reverse engineer these animations for practice.
Step 6: Adjust your animation timing
Let’s take a moment to talk about timing, which describes the pacing of animation frames throughout an animation. You can see a visual representation of timing by navigating to the Graph Editor. To do so, click the Graph icon (labeled Graph Editor if you hover over it) near the top of the timeline panel, and this will change the timeline into a linear graph.
If you click on one of your keyframe attributes, you will see a straight line from one keyframe to the next. Right now, because we’ve only been creating starting and ending point keyframes, we’ve left it up to After Effects to calculate the timing. With no direction, After Effects paces each animation frame evenly, resulting in a perfectly straight line.
However, varying the timing in a purposeful way is what gives animation a sense of realism. For example, in a bouncing ball animation, the ball moves slower at the height of its bounce and faster when it is closer to the ground because of momentum and gravity. In other words, it does not move at the same speed throughout the animation, and if it did, this would stand out as robotic.
The graph editor allows you to adjust the timing on your own animation using what are called bezier handles to transform the graph line into a curve. Towards the bottom right of the Graph Editor, you will see a number of icons of square points attached to lines—these are bezier tools.
Click on one of your keyframes and hover over the bezier tools until you find the one labeled Convert keyframes to Auto Bezier. When you click on this you will see a yellow handle appear in the graph. Dragging this handle around will cause the line to curve, and this will change the timing of your animation. Where the curve is more pronounced, the frames will play faster, and where the curve is smoother, the frames will play slower.
To really understand the nuances of how your own timing should be customized takes animation experience, and that’s why adjusting bezier curves by hand is a more advanced topic. For the purposes of this beginner tutorial, I recommend using the Easy Ease bezier tool (which applies an automatic curve to your selected keyframe) for all of your animation timing. You can apply Easy Ease to a keyframe outside of the Graph Editor by selecting a keyframe and right click.
Step 7: Export your animated logo
When you’re ready to export your finished animated logo, go to File > Export > Add to Adobe Media Encoder queue. After Effects will export as an mp4 file by default, which is fine for video. Since we want to create a shareable image file of our logo animation, we will be exporting as an animated GIF. In the Media Encoder window, click the arrow next to the highlighted blue line of text under the word Format and choose Animated GIF. You can also set the destination folder of your finished file by clicking the blue text under the words Output File.
Double click the highlighted blue text under the Preset to bring up the Export Settings window. There are a few options you want to pay attention to in order to bring the file size down: Quality (I put mine at 20), Frame Rate (I set mine to 10, though a higher frame rate (fps) is recommended for video) and the duration, which is the blue bar beneath the preview (I cropped mine to 4 seconds). Select OK to close this window.
Once you’re finished, select the green Play icon in the upper right corner of the Media Encoder and your file will render to your preferred destination folder. And there you have it: a finished logo animation!
Conclusion
If you want to share your thoughts with your audience, but are not sure how to do it, this text logo generator will help you to make your ideas clear. It is easy to use and it’s free.