Type and Title Motion Design the Easy Way

[Music] [Eran Stern] Hello. So, I guess we will start. You don't need to answer me. Just need to take a look. [Music] So, this is not my show. This is your show. This is what we're going to create together. Actually, I'm going to do it. You just sit back, and I'm going to do all the heavy lifting, but my promise is that I will make you cry.

So, no AI today. How do you feel about it? I'm going to ghost buster it-- But I will use Ai, and Ps, and Ae. Anyhow, nice to meet you. My name is Eran. I'm going to sit down. I'm based in London. My accent is still based in Tel Aviv. I'm a motion designer, content creator. You are more than welcome to follow me. I'll give you all my details at the end. I'm working on my Leonard Cohen voice because this is the third day of MAX. I have many dad jokes, so, be prepared to have some laughs. You can stare at this echoing T, or you can read what we are going to do. I know that you already read about it, so, I'm not going to do this with you, because one of us is redundant, right? So, yeah, are you ready? Let's start. Excellent.

I have After Effects already open for you, especially for you. I knew you will come. And we're going to start with something really basic from, I guess, 30 years ago, and a lot of music references, by the way. My wife asked me if I can sing something from Oasis, so, I told her, "Oh, maybe." But this is massive attack.

So, I'm going to select this, and first, I want to format the text. So, I'll double-click inside and then double-click again to select the second line, or actually word, I should say. And I want to jump to at least the black, wait, and then I'll click again. And maybe double-click on the T, just to show you that we can select the text here. And here are some obscure keyboard shortcut that you know, that you don't know, but you probably need it. So, Command + Shift here on the Mac, it will be Control. So, just imagine that every time I'm saying Command, I'm also going to say Control. Every time I'm saying Option, it's Alt in your head if you are coming from Seattle. Anyhow so Command + Shift + K for capital letters. This is very cool. Command + Shift + L for left alignment, Command + Shift + R for right flash, Command + Shift + C for centering. So, just to open the day with some After Effects party trick. I'm going to also hover over here to the Properties panel. It says text. It's basically the Character panel, and I'm going to change it from metric, take a look at the text here, to an optical kerning, which is going to evaluate what is on screen and then make it a little bit more legible. Then I'm going to add, because it's free, a stroke, and you have few options here. I'm going to stick with all strokes over all fields because this is the guy I am. I just like to do this. There's no rhyme or reason behind it. And now, I'll select the Selection tool, go to the Effect menu because after all, this is After Effects.

I'll summarize it for you. Make sure to stay hydrated because I have a very dry sense of humor, right? So, this is it. So, I'm going to go to stimulation, and I'm going to apply the shutter effects. Now, if you apply something like this, remember this is Massive Attack, not another brick in the wall, so, this is not being flawed. But for some reason, this is what we are seeing. If you have any doubt, first, let's just switch it to render. But if you have any doubt, what specific effect does, if it happen that, you applied something and you moved the current time indicator and nothing is happening, you open a support ticket and still nothing is happening. All right, so, here is my tip for you. After Effects can send you an SMS or a text message. This is really cool, this one. Right click on the name of the effect, go to About, this is what it does.

The shutter effect will blow stuff up. Now, this is an old school effect. Before we have 3D text, before we have 3D objects, but it actually can render 3D titles. So first, let's just see what it does out of the box. Yeah, no, I don't think I'm going to use it. I'm going to park my current time indicator over here, and I'll open up the shape and change it from bricks to custom, which will allow me to reference the text itself as a layer. So, now it's going to take the letters, extrude them for free, as well as blow them up. Now, I'm going to make it a little bit more thicker, and notice this checkbox that nobody pay attention to, White Tiles Fixed. How many of you are using shutter and never think that this is here? Remember that I have white strokes, right? I'll check this box and the white text is going to stay on screen and everything else is going to basically blow away. I'm going to blow you away. All right. So, I'm going to also texture this. This is a little bit of a bitmap texture, but we can make it look a little bit more nicer by opening up the texture. This is all a single effect. I'm going to do everything with just one effect, look, man, no hands. So, I'm going to go with this color, maybe sample something from the scene and then make it a bit more brighter because I'm a bright person, and then I'm going to go with the side layer and change it, not here, and change it to use the color, so, we have something a little bit more fancy. Let's go to the beginning, press spacebar to-- This is, by the way, real time effect, but it is exploding a little bit too soon. Also, it just moved all over the place. Because this is a simulation effect, I can actually control the simulation, I have got powers, using the physics here. So, I can turn down the rotation speed as well as switch off the gravity. And again, let's just preview it. All right. Nicer, but it disappear. And also it starts immediately. I want to give some time for whoever is watching it, which is you, to process what you see. Now, I know that you already know what it says. But when you are animating stuff and you want to control the timing, and again, because this is a simulation effect, you can do it easily with the forces here. So, you've got two forces. Let's just settle with one, and this is the property that you want to change, the radius. I'm going to click to create a keyframe. Notice I'm at one second. Am I talking too fast? Too slow? Exactly at the correct pace? That's it. That's the feedback I want to know. All right. I'm going to move one frame before, and I'll change the radius to zero, so, nothing is going to happen at the beginning and then, boom, they're going to be blown away. Now, I want to add or introduce a little bit of 3D motion to it so, I can actually create a camera system or a camera inside After Effects. This effect is going to read the vanishing point of the camera. However, it also comes built in with the camera because this effect existed before After Effects had cameras. See how old I am? All right. So, let's just animate it really quickly. I'm going to, again, return to the one second mark, create a keyframe for the Z position, go to the end, and then move this slider all the way so, I can see those little bits and pieces. And then for the beginning, I'm actually going to do the opposite number. So, I'm going to just as if I'm Superman, come from behind the text. Now, if I preview it again, this is all playing in real time. I've got something which is super easy, super useful, took me less than five minutes, including my unfunny joke, to show you. And the only missing piece here is that this effect, because it is so old, doesn't support motion blur. You can switch motion blur on, you can switch it off. You can switch it on again, you can switch it off, it doesn't work. But again, we can force it to work by going again to the Effect menu, this Time under time, CC Force Motion Blur. So, hopefully you can see this is going to render a bit more of a nicer image to us at the cost of, again, watching progress bars. We're doomed to watch progress bars for the rest of our lives, so, let's just let it catch those frames. It's not a big price to pay because once it is finished, and it will be finished after I'm stalling for time of course, we will be able to see it works, as well as every time you are doing basically something like this, hide something on the timeline from your viewers. So, there is a shy guy here and there is also a sympathy swoosh. Let me see and hear it with the audio. I'm going to maximize the frame and play it for you. [Music] All right.

And I feel like Sara Nelson, for those of you who knows, she's the singer. All right. So, this is it. This is my first trick of the day. Hopefully, you learned something new. If you learn at least one new thing, it means that you are great, two new things, it's awesome. You are awesome. Three new things, it means that I am great. All right? So, I'm aiming for three. Right. Saying goodbye to this guy and opening another comp that I've cooked for you. And I'm using, by the way, draft 3D here with some fancy extrusions. This is the advanced 3D system, and because I'm using draft 3D, it means that I can just press the spacebar. Everything is going to be handled using the GPU, and we can see a real time preview. I'm going to show you later how I've created those cameras or maybe not, depending on how you will behave. We'll see. But for now, I want to make it a little bit more pretty because after all, we are professional designers, right? I'm working with a cursive font here, and I think I remember that I have some alternative glyphs. Everybody knows what they are. Right? Unfortunately, After Effects doesn't support them, so, I can't select alternative glyphs. However, I can ask Illustrator to help me. So, I can double click. Or Photoshop, if you're a Photoshop guy, don't get insulted. So, I'll double-click to select the text, copy to the memory by a very secret keyboard combination that I won't reveal, and then I'm going to go to the Type tool, click somewhere and paste. And look at this, everything survived, including the format. So, I'll highlight the A, just the A, and it will give me some alternative options to choose from. So, this is a much more prettier A and prettier P. Tried to say it a lot of times. Anyhow I'm going to select everything now, and I'm just going to use it as a bridge. So, copying it again, bringing After Effects to the front, the text is still selected. I'll paste those characters. It looks much better, but it can be even more because of course, you already know this, we can choose an optical kerning. This evaluates the spacing between the letters. It looks amazing. However, this is usually closed just to let you know, I'm just going to close it by default. There is a More option here. So, if you click on More, you have support for ligatures. So, notice, look at the text, memorize it, and then look at it again. So, notice how the T and the R and other characters are now merging nicely together. This is available on most cursive fonts but also on other fonts. So, always check those little checkbox if you want to at least appear as you know what you are doing. I'm going to move over here, and again, this is like a very-- I'm not sure how to describe it. It's something which is basically bothering me because I'm so compulsive. I'm going to hold down Option and then scroll up. This is going to scroll to the position of the mouse, and you see this quote mark? Well, I learned in typography, this should be outside of the box if I want to accept the Roman rules, Roman typography rules. However, it's going to be a little bit challenging to achieve that. So, I'm going to first zoom out so, I can show you that I can select this text, and this was secret handshake in After Effects. How can I convert it from a point text to a box text? Used to need to go through very specific ceremonies, not anymore. Thanks to the Properties panel, under the Paragraph settings, we just have a box for it. Box for text box. Can you see the irony? So, when I click this, suddenly, I can use all of the alignment options over here, which is great. It doesn't give me what I want yet, but the Fly Out menu here will allow you to use this every line composer, not just single line composer. You probably know this from other applications, so, this is again going to arrange the kerning better, but here is the cool stuff. I'll zoom in again. Let's just watch it together because this is almost a miracle. I'll go over here, Roman Hanging Punctuation. I'm going to select it. It's going to move the quotation or whatever, all the special characters outside. It's a small thing, it's a small word, I love you. That's it, so, now it looks much, much better. All right. Moving on. I'm going to throw a lot of stuff, so, you don't need to react to everything I do.

Okay. These hyphens basically are shouting, "Convert us to bullet points." Can you hear them? "Convert us to bullet points!" Yeah. I can hear them. So, double-click inside. If you're a lucky guy like me and you're working on a Mac, Option 8 will help you to do this. If you want to suffer or babysit your computer and you are working on Windows, Alt, and then on the Num Lock, 0149. Right? So, not this one, but the regular one. So, Yigal, this is just a love letter from me to you. And, of course, we can animate those lines, but I'll save it for the next example. Let's go over here, select the text. We'll just treat it really quickly by giving it some love, changing it to optical ligature. It's a small touch, but it looks much more professional. Now, you can charge a 1,000 pounds an hour. I want to show you another thing. I mean, black is beautiful, but there is another layer here, and this layer reference this one, and this is an HDR image, so, basically an equi rectangular 360 degree image that I found on the Internet floor of an orchestra. I'm not sure if this is the orchestra that paid me to do this, but I'm just going to use them and blur the heck out of them. And the way to do it, if I'll re enable this one and turn it on, is to use the CC Environment effect, which basically creates spherical projection from this 360. I'm not going to try and say it again, not breaking my mouth. And you can also play with the values here, but notice that because we have cameras in the scene, those guys are moving all over the place, taking most of the energy from the titles. So, let's just use exposure to switch them a little bit down and the camera lens blur to turn the focus just so it will be a bit condemned.

I think this is super cool, and you can, of course, now, if you're ready, switch off the draft 3D button because remember, we are just using the GPU so we can move fast. This is a little bit more expensive in terms of rendering because now we are going to use reflections and shadows, and it's going to take some time to process. And because I value your time, I'm just going to show you how it looks at the final stage, plus some music that I didn't play. [Music] And sorry for the distortion. I told you it wasn't me.

All right. Looking good so far. Let's switch gears to something that I've cooked ahead of time. Sorry, I can't help myself. So...

I want to make those titles a little bit more happier, and I'm also a lazy guy, so, I want to use some of the built-in presets to make it, of course, the easy way. Right? So, there are plenty of new stuff that's just added to After Effects in the last two cycles, actually 15 new animation presets. I want to show you just a few of them, but you are more than welcome to explore them later, not now. So, what I'll do, I'm going to go to the beginning of this layer by selecting it and then pressing I, so, I is the in, and then hide the Properties panel and make sure the effects and presets is on screen, open up the Animation Presets folder. Now, over here, you have plenty of stuff to choose from. If you love the Adobe Express presets, then you have In, Looping, and Out. By the way, these presets are kind of a unique animal in After Effects. Most of them, you need to be at the beginning of the layer, but just because I want you to see something if I'm speaking about it, the express presets don't care. They are based on expression. I think the name express suggests it. So, if I'll open up In and maybe select by double-clicking pop in, it's actually going to calculate the in of the layer, and it will pop the layer from the in. So, if I'm going to change this, I don't need to worry about keyframes and animation. Right? So, keyframes are for babies, animations and presets are for grownups. Anyhow, I'm going to undo this, go back to the beginning. Let's open it once again. And you know what? I'm going to do an index search as if I'm just hunting for my favorite tune. And my favorite tune for this morning is the Holographic Foil. Again, a new synthetic animation from the '90s. I'll double-click on it, and it's going to actually use bunch of effects, and I know the colors doesn't make sense, so, I'm going to maybe sample the color from the label and then preview it, and suddenly we have something that may work or may be very, very ugly. Totally up to you, but here it is. All right. I'll undo again, maybe twice. You know what? I'm going to change it to something else. Yes. I'm keeping ahead of myself. Let's try Hand Drawn. Again, a new effect. Double-click on it. This is, I think, works even nicer here. And you can apply it not to just text, to anything with an alpha channel. So again, the beauty of this session is that you can create everything you are seeing because this is not AI. This is super predictable. So, you can art direct it. You can use those sliders. This is just a starting point to have some fun with it. And since we are doing some vintage stuff, why won't we add some new filter or, again, preset, which is the VHS Flicker Effect? So, if you miss really the '90s or the '80s, then you can be kind and rewind, and you have some stuff that you can throw on your titles without doing anything and charge a lot of money if you want. Anyhow, so again, we are using or I am using the Draft 3D to preview it in real time, so, I don't need to worry about it. But sometimes you do need to cache all the files before you see a playback, so, just be patient with it. So, let's say we are old school. I'm going to undo what I did. I know you got attached to it, but I'm going to show you something else.

Bunch of presets here, dozens of them, especially under the text category. Right? So, folders inside folders. So, this is the After Effects theme. Right? We are expanding stuff all day long.

Some of the names are meaningful like, I know I need an espresso eye chart now, but some of them are less descriptive. So, another way to explore those is to select the layer that you want. Basically, this is a text, so, I'm going to apply an animation preset. Yeah. You can go from the Options menu. You can choose Browse Presets, or if you are brave, you can go to the animation menu, and this is the only command that you have except of Truck in Boris Mocha. Doesn't make any sense. Why this is available? Anyhow, I'm going to say Browse Preset. It will look like nothing is happening, but a few moments later, Bridge is going to launch. Now, these days, Bridge is a separate installation. Make sure you install it. I know that you know this. I'm here to state the obvious. This is part of my job. So, double-click inside text, double-click inside 3D, and suddenly we can preview those presets. So, we can have a look at them and we can see before we apply them what will happen. Now, the text is selected, remember, inside After Effects, all I need to do is double click. It's going to bring me back to After Effects, play to preview it. I'm so happy with this. I'm going to leave it.

I'm going to select this guy. Again, go to the beginning because those text presets are sensitive to timing, some of them. So, I'll bring back Bridge to the top. It's still running in the back, and maybe let's go with organic. Again, you can click and see how this looks. Some of them are showing their age.

But I'm going to go with this double helix, why not? And apply it. And I'm going to go just a little bit before, press play, and there is a little bit of an issue here. It starts to do its thing before the first line is already exposed. So, I want to give time to process it. I need to actually modify the preset. This is where I'm taking it. So, I'm just going to scroll and find where the title here above is fully revealed, and then I can select this guy, which has preset, and I can go to the Animation menu, and you've got two options. One of them is to reveal properties with animation, so, basically things which are animated. The second one is Reveal all Modified Properties. And you can also do this with keyboard shortcuts. So, if you want to remind yourself what you did, press U once the layer is selected. I'll do it again, and this is how it looks. So, this is going to show me basically everything which I have here. It's just going to open it up. I can now go and start to modify. So, I have a sixth sense when it comes to this project. Believe it or not, I prepared to this session. So, I'm going to just hint you that after a little bit of playing, I realized that if I'm going to limit-- This is basically a selection, so, if I'm going to limit the selection to 100, it's not going to start doing whatever it does. Right? So, I'm going to create a keyframe over here, and then one frame later, I'll return it back to zero. Effectively, I am in control, so, it will start the animation once I'm ready to start the animation. So, this is just to show you that you have a lot of things after you apply the preset. Always remember your client also have access to those animation presets, so, be careful if you just use the preset as is.

Again, I'm hiding stuff from you. So, I'm going to click on this shy person, which is going to reveal few hidden comps here. I'm going to switch them on and as well as this, and double-click on this guy to show you that what I have here is basically the same layer duplicated three times. So, this is text on a path. I'm going to show it to you in more detail in a moment, but this is what it does. This is vertical text. Did you know that After Effects offers vertical text, so, you are more than ready to take it with you to Japan. And this is what I did. You can just use it and then apply the path and make it climb up. And this is just to the text, but it looks almost like this helix that we saw before. And combined with everything that we're seeing here, it will look really interesting, but very dull. Now, to make it more nicer, you can apply effects, and probably you see that I have some effects going on here. But to be honest, if we really want to bring those colors and make them shine, we need to change the beats per channel. So, by default, After Effects is working with 256 gray levels for each one of the channels. I know it's a bit technical, but when you work with film and high def and other stuff, you can actually expand it. So, this is like basically 8 bit, 16 bit, and float if you're coming from, let's say, Photoshop. The way to change it, of course, you can click on it. It will open up a menu, but don't do this. Just hold down Option, click once, click again, and then this is going to change. I'm going to switch off Draft 3D to something which can present a wider spectrum of colors, creating something which almost looks hot. Right? So, always try it, and it will take some more time to render. So, again, I have a version that I've already rendered for you using the same principles just so you can see it in motion. Good stuff. Are we having fun? Some of you. Yeah. Hold it. Hold it. I want a standing ovation at the end.

All right. So, closing these guys up, and as promised, I want to show you some stuff with the path text. So, believe it or not, but I memorized the entire pie digits, so, I wrote it down. Not really. Anyhow, yeah.

Want to take this pie and create, because we are in Miami and I can't help myself, some sort of a hurricane or tornado. Right? I know. Oh, I know. Oh, no. It's a bit challenging to do it inside After Effects. However, we can use Illustrator to help us. So, I've got this file here that I prepared ahead of time. I can select it, and I can go to the Edit menu and select Edit Original, which is going to launch Illustrator. And I just want to show you how I've created this spiral. Basically, I use the Spiral tool. That's it.

But there is more to learn with the Spiral tool. Let's just move this guy outside. I'll start to draw my spiral holding now, I'm still clicking on my mouse, so, left mouse is pressed. I'll hold the spacebar to move it, and then I'll add some cursor arrows, so, I'm going to use the up and down arrows. And now, if I want to control the way I draw it, I'll hold on Command, which will allow me to decide on the fly how many things I want to create. So, of course, you can be as creative as possible with this. To save some time, I already have this spiral ready to go. So, I'll click on it to select it, copy it again using something that I won't reveal here, keyboard shortcut, and then I'll select it in the timeline and press paste to paste it as a mask. So, this is now part of the After Effects text. I know we just met you. Don't believe me. Although you see it, I want to show it to you. Here it is, mask number one. The color maybe is not the favorite color. You can always click on it and change the color, so, it will be a little bit more intrusive. And now, I want to use this path to make the text do this spiral move, and it's super easy. All you need to do is open the text properties, and you have some path options. Just marry it to the mask, and there you go. We are halfway there. But no one can read what's happening over here. I want to create some sort of this painting, like scale them down as they go. And for that, I'm going to close this guy. I can use Animator, and I can change the way the animator affect the text to create this special title. So, here's the Animator. What I would like to do is start with a scale value, remember, 100 is where we are starting, but I'm going to set it to 0, which is effectively going to make the text go away. However, I can tell it how I want it to go away by opening this very dangerous Range Selector 1, and underneath we have Advanced options, and advanced, remember, is just something that you don't know yet. But once I show it to you, it's no longer advanced. So, under Advanced, we have this Shape, and one of the options here, let's just zoom out, is Ramping. So, you can ramp up, you can ramp down, you can do whatever you want, but let's just try ramp up or ramp down just to show you how this works. In this case, ramp up is the direction. This will change depending on how you draw your spiral because every path that you bring to After Effects has a start and end point. So, in Illustrator, when you start to draw, the first anchor point is the start, so, this is why it doesn't make sense, ramp up. So, just for those of you who are shy, I'm delivering this geeky information. All right. We are going to close this. We are going to go to the Add menu again. Actually, you know what? I'm going to rename this one scale and leave it as is, then select the text and add another animator because I also want to type it down as it's spiral. So, I'm going to leave this one alone and then return to the animate. Notice I'm adding another one. This time, it's going to be an opacity, so, I can add as many animators as I want, and this is very deep. It's very deep. After Effects is very intimidating. I know I said the easy way. This is just a marketing term to have you enter the room. Maybe it's not so easy, but no worries. I'll show you how this works. I'll set it again to zero, which is going to cancel everything, but I can option-- Not option. I have this option, sorry, to animate it over time. Right? So, I can do this number. Right? So, let's just create a keyframe for the start, at the beginning, and four seconds sounds like a good value. It's not zero.

I want it to be zero. I'm a very accurate person. And then 100, and then it would look like this. And because I'm so accurate, it disturbed me. I'm sure that some of you that this is not starting here.

Right? All right. So, let's remedy this by pressing R to isolate the rotation, and then we can just eyeball it to where it needs to be. All right. So, for those of you who want to report, this is -20. And now, I want After Effects to help me animate it, so, I'm going to Option click on the word rotation, and I'm going to use basically time to animate it. So, After Effects is going to take the time value, and I'm going to multiply it, let's say, by -5. So, Shift + 8 is the multiplication. This is the expression. Super easy. Not as scary as you may think. I'll click outside, I'll go to the beginning, and this is going to start to rotate. But oh, my god, where is our -20? We have now expressed this text, so, it's overriding the value here. So, unfortunate. But lucky us, we know that if we're going to add the word value to this expression, it's going to take under account the value that I had before. So, now, with any luck, it's going to look as I want. And what's more important, I can still change this value after the effect, after effect.

All right. I'm going to again use this shy icon. Let's bring this over here so, we can see that indeed we have a pi symbol here. Everybody in the room knows how I got it. I went to Illustrator, got the glyph, copied, paste it over here. So, nothing important. But we can actually use the Track Matte option, so, I can take the opacity of the-- Sorry, the transparency, the alpha channel from the layer upstairs or downstairs. I'm going to just do that by pointing it using this Pick Whip, which is actually in the original version of After Effects, was part of the Indiana Jones crew. Doesn't matter. I'm going to invert it so, I have some window to the pi symbol, which is going to grow up. And when I look at it, hmm, I think to myself maybe I need to go to the Composition settings, change it to a wide screen comp, go, let's say-- I'll stick over here, it doesn't matter, and go and select the type, and I'm actually going Type Tool, double-click to create a title in the middle of the screen. And I'm going to write down, "Life of," and then I'm going to use one of my favorite fonts, which is the font that I'm using over here. So, this is the monostrand or whatever you want to call it because I think there are some silent letters here, it doesn't matter. I think that 165, very deliberate number. You'll see why in a moment, will work for me. And I want it to circle this shape, so again, I'm going to show you another After Effects party trick. I'm going to select the rounded-- Sorry, the Ellipse tool. Now, notice this is not a square comp. It is a widescreen comp, but if you're going to hold down Shift and double-click on this, it's going to create a perfect circle in the middle of the frame. This is also true for the square and other shapes. So, it's just going to save you a few clicks. Now, what I want to do is the same thing that I already showed you. So, open the path options, marry this to the mask. This time, I want it outside of the path, and to be honest, I want more copies, but remember I'm not going to type them because we don't have time and I'm worse typing in front of people as you already noticed. So, instead, I'm going to Option, click on this. Let's zoom in, and I'm actually going to use the repeat expression, which will allow you to repeat the text as many times as you need. So, let's say five. Who knows? Maybe this is our magic number. It is. Surprise! And I can press R now. Again, I'm going to express this using the time expression. This time, I'm going to multiply it by five, and suddenly out of almost nowhere, we have a trailer for a movie that you haven't seen or haven't read the book. You should definitely see it. There's nothing about pi in the movie, but again, this is the name.

All right.

I'm going to stop for air. And while you wait for me to breathe, I just want to show you a few other examples that are basically using the same principle. Now, I'm not going to go deep into each one of them. For that, I have a YouTube channel. Right? So, I'm going to show it to you at the end, and you will subscribe and like. This is the only thing you need to do, but I will show you how you can create it. So, if you want a step by step tutorial, this is basically using the same Tornado principle. However, I converted the text to per character 3D text, so, it's now swinging in 3D space, which is super cool, especially if you are around Soho and you want to have a beer. By the way, Soho in the UK is small office, home office, just in case you need an obscure trivia for whatever, your next game show. Another example is this guy, basically using the same principles. This time, it is writing itself on the screen, giving you a little bit of indication where you can enjoy or actually when, not where, the apricot bloom. Amazing. And this is also based on a true story. So, this is something that I did for the BBC, for the story of tape, BBC Four to be exact. And notice in this example, we have a depth of field, which is matching those reels. Right? And the way to get this, this is because this is all native After Effects. We're not using plug in. Nothing. It's just a simple checkbox in the camera, so, Enable Depth of Field. The moment you do this, the text is already going to use those values here, so, apertures and F stops and what have you, and you can, of course, change the blur level to just make it look as believable as possible. All right? Good stuff? Average stuff.

All right. I'm going to close everything, which is Command + W, just in case you're wondering.

Scalable vector graphics, you know all about them, you love them, but unfortunately you can't use them inside After Effects. I want to show you what I mean. So, I have this Photoshop document and an Illustrator one with the words that you can read. I'm going to Command + E to open it inside Photoshop, and this is now live text inside Photoshop. So, I have this one, in case you are wondering, this is a free font that you can download. Those colors are baked into the font. This is another option. This is another option. Most of us basically just know this guy, right? So, the emoji font, which is a scalable vector graphics, and this is great example. Maybe I want to, I don't know, use this. So, all I need to do is just save this document. I'll return back to After Effects. After Effects got a phone call from Photoshop. "I've got an update for you." I'm getting this. But I want to actually extrude it, use it with 3D, do fancy stuff. So, I actually need maybe all of the layers, but I was stupid and only imported a single layer when I did the import process. So, I can reimport it again, but this is not why you paid the admission price.

What you can do is right click on it and from the Create option, you have this wonderful feature to convert it to a layered comp. So, the moment I select it, this is now a composition inside this composition. If I double-click on it, we have access to all the layers that we just saw inside Photoshop. We don't need to do anything. This is wonderful. I mean, this is an imitation of the monkey, I guess. So, the emoji one. Right? This is Photoshop Live Text. After Effects is a pixel based application, so, we are getting actually the pixels. But we can do the same right clicking again, this time, go to Create, and convert it to an editable text, which is, of course, text that you can eat. And it is going away from us, not really, not really. I'm going to turn on the transparency grid. Unfortunately, as things stand now, After Effects doesn't support the color. So, you will be able to get a retro versions of these emojis, and you can work with them. However, I'm going to say, okay, enough. I'm going to try another route. I have another document, this time, from Illustrator. So, just to make it easy for you, here are the names of the fonts. Now, it is the same thing more or less without the emoji. We already know the emoji doesn't work. It does work, but you got the job, that's it.

It is live type here inside Illustrator, but it's also a scalable vector graphics, so, hopefully you are with me. I'm going to bring back After Effects to the front. I'll do the same thing. Again, I have just a single layer, so, I've got the flattened version of this Illustrator multilayer document. So, I can go to Create, Convert to layered comp. This is going to bring everything into my folder. I'm just going to close it, not to confuse you. Double-click and now I have access to all the individual things. I think that I actually want just this one. Let's just have a look at it. In this case, I can right click on it, Create, and Convert it to shapes. Now, this is still live font in Illustrator, but since the vector information is baked into those SVG fonts, we can actually do this quick turnaround and create a shape out of it. So, what we can do with this shape, we can copy it, of course, we can paste it over here as an individual shape, we can then turn on a very famous entrance of the British Museum, just in case you don't recognize it. I know none of you are recognizing it. Doesn't matter. I'm not get offended. And I'm going to stretch this all the way until the end. While you weren't noticing, actually I've applied the 3D camera tracker effect, which is effect that you can apply inside After Effects. It's basically just a black box. It will track the scene, and it will create a synthetic camera for you. This is it. This is the 3D camera tracker, which is mimicking the camera that was used to capture this shot. I also created a track null here, which is an invisible object. You can see this is sticking to the wall. Super easy stuff. Again, if you want more details, just contact me later. But for now, what I'll do is I'll select this colorful SVG text, convert it to a 3D layer, hold down the Shift key, and then I'll parent it to the track that I have created so it will jump, which will move to this location. So, already I've got something to report home about. Now, I'm going to also switch the engine render, the render engine, I should say, to the new one, the advanced 3D. You can also work with the Cinema 4D one if you want to, and this will help us to extrude the text. And I can sit all day here and show you other cool stuff. For example, we can animate those characters super easily, characters. Although they are shapes, After Effects, because they are shapes actually has these mathematical operations, some of you may recognize them from Illustrator. Right? So, Merge Paths, Offset Paths, Pucker & Bloat, it sounds familiar because it's the same technology. Believe it or not, it's the same company. So, I'm going to use Offset Path, which is just going to add this Offset path over here. Of course, if you just want to demonstrate in front a lot of people, you should definitely group those letters so, you won't confuse and scare the audience. So, this is what I'll do. Command + G will do it for me. And then for the offset path, notice I'm going to take it over here. I'll create a keyframe, let's say, with a value of, I don't know, five, and then I'll go over here. I'll zoom in so you can see what I'm doing. It's a little bit distracting with all of this help from After Effects, but I can now use this and animate them as time goes by. This is so cool. This is so easy. It looks like I walked for the entire-- Burned the midnight oil, but no. It's just super easy to create. And because it is so super easy to create, I just want to move quickly and show you what happens when you apply lights and shadows and other stuff. Again, we don't have time to cover everything, but let's say 10 minutes into the future or maybe even less, this is how it can look. And if you're not using scalable vector graphics, maybe you should consider doing it right now because it is so easy and, again, very predictable. All right. Close, close, close.

The next guy is variable fonts.

If only After Effects could animate variable fonts, oh, my god, it will save us so much time. For those of you who don't know, variable fonts basically stores continuous range of design variations. And you can get them for free from Adobe Fonts. I know you don't believe me, so, I recorded my screen. Right? So, here I am going to the Manage Fonts in the Creative Cloud app, clicking somewhere, and then I can immediately see all the variations of the variable font. If I'm an English speaker, I can select English. And I'm going to scroll down, like I have all the time in the world. Maybe stop over here. Click on this guy. And we have those levers here. Oh, if I could only have this inside After Effects and animate it over time. I'm building for it. Don't worry. I'll show you how to do it. But first, you need to sync the font. Right? So, make sure to click and sync the font. And with the new version of After Effects, let's say goodbye and thank you to this clip, I have this statement that you may or may not agree with, and I want to actually animate it. So, I already selected and installed this Nickel Gothic Variable. Notice that if I'm going to have a look at it, we have all those different weights, and what I want is to morph between those weights. Right? So, again, if you have access to the latest version, what you can do is you can-- I prepared a slide for you, are you ready for it? You can actually download the free script that Adobe cooked just for you and me. So, this is the URL. You can have a look at it. You can capture the QR code, which is going to give you all the details if you want to read the entire article. The official name, by the way, is scripting hooks for variable fonts. Very good starting line if you meet someone. How about working with scripting hooks for variable fonts? Of course, of course, I'm going to get you whatever you want. So, once you download the script, you need to drag it into the Script folder of After Effects. I know you know how to do it. And then I'm going to go to Scripts and launch it. This is it. It has this wonderful panel. First of all, it will ask you to recognize the font. So, what font are you using? And you can just look at your text panel, and in this case, these are all the variable fonts, by the way, on my system, so, your mileage will vary. I'm going to select this guy, and then I'm going to apply controls for axis. And now, what I have is two sliders here because depending on what the font has embedded inside, you may get more stuff. So, some of them have more options for you. But in this case, I'm just going to-- I don't like this oblique behavior. I'm going to start maybe from 10, and at the beginning I'll create a keyframe, and then I'll go to the middle, and then I'll set it to 100 so, it will be very bold and brave, and then I'm going to go to the end again, set it to 10. I know some of you are looking at their font, so here it is, rehearsal. We're going to do it again. So, selecting the second line, making sure the font is already recognized. By the way, you can switch it from here and then apply the controls. Thank you so much for the script. And then let's do the opposite. So, in this case, I'm going to start from 100, create a keyframe, move to two seconds. Oh, what a wonderful narration for such a boring process and then go to the end, and that's it. So, now, this is going to animate.

Crickets? I hear crickets? This is so wonderful. This is a godsend because I can't tell you how painful and soul-destroying the process is without this new capability. So, go ahead and use it, make sure that if you want to render, clear the cache because it has some weird behavior, so, sometimes it will flicker from time to time. All right, let's move to the next one, which is my recipe to create a multi bevel look. So, we all know that we can extrude text. This is, by the way, using the Draft 3D again, the advanced 3D renderer. We are looking at live models, 3D models, which are actually animated inside After Effects. You can see what I did ahead of time. All right? So, I can preview it from this angle or I can preview it from the camera angle, and one of them is really sad, another one is really happy because it is like it has like this multi bevel profile. And I want to show you how to do it because this is something that you can't do with the native tools of After Effects. So, let's select the word "Yard" and first of all, I'll open it up, open the geometry options, and I'll extrude it, let's say, 20 units. I'm not sure what is the value here, so units should do. I'm also going to give it a bevel of maybe two. So, this is my first one. Then I'm going to close this. I'm going to open the text because I'll need it in a moment, select this, and duplicate another version. Pressing Command + D will do the trick. Before I start, I'll open the text for this guy, and what I want to do is take the source text from the previous one. This means that I don't need to worry if I want to change the word later. It will make sense in a moment. Bear with me. Right. So, now, after doing this preparation, I'll go back to the geometry options. First, I'll select the text. I'll push it behind the previous one. I'll change the fill color. Let's try to sample a yellow one. We managed to do it. I'll change the bevel depth to four, and we have another instance.

I'll duplicate again, close this one, open the new one, change its bevel size to something bigger. By the way, when you drag it, it will cap at 10. However, you can click and you can type any number you want. It's going to be ugly, but you can do it. All right. So, just so you know, you are the boss. All right. So, this one wants to be behind the previous one and we're going to sample a red color for my swatches here, and you can see where I'm taking it. So, now, I have those two texts, but remember that if someone is breathing in my neck, let's say a client and say, "Well, it's not yard anymore, this is fest." All I need to do is just change the first one and everything is going to update automatically. And again, this is just showing you the real-time preview, but if I'll open up the final one, which is basically showing all the shadows and everything, it will look even more fancier. So, it's really cool, the new capabilities of After Effects with all the reflection and image based lighting. If you haven't seen it, you should definitely give it a try. It makes creating 3D titles really easy, even with zero knowledge of 3D.

All right, you remember what I promised at the beginning? We got there, finally. So, here it's another way to work using, in this case, shape layers to create something which is even more interesting in terms of 3D and bevel and creating some multiple levels of 3D. I'll select both layers, I'll convert them to 3D, I'll take the logo layer, I'm going to push it a little bit because they are occupying the same 3D space, so, it's like, I don't know, error. And then I'll right click on the logo layer. This is just two basic Illustrator layers. Nothing to write home about. But you can create shapes from those vectors, and this is going to switch off the visibility of the original one, letting us play with this guy. So, maybe 100 seems to work nicely here. I'm going to bring it a little bit more towards us, and then, of course, instead of logo outlines, I'm just going to take this outline words, cut it to the memory, then duplicate another instance. This is going to be the outlines. I'm so effective. I'm using what After Effects gave me already. Anyhow, it doesn't matter. Some of you appreciate it. Most of you don't know what I'm talking about. So, for this group, I actually want to click on the field, say thank you, I don't need you, I want a stroke, but there is a question mark here, meaning I need to add a stroke. It's not existing yet. So, I'll select the contents, I'll go to the Add Menu, I'll add a stroke. With any luck, this stroke is now over here. And of course, this stroke is an independent layer, meaning that I can move it above or underneath and I can do a lot of cool stuff with it. And for example, I'm not sure if you remember our friend Offset Path, right? So, I can apply Offset Path, and I can play with it, and I can create something which is really nice. And now, I can also animate those things. So, I can maybe put it over here, duplicate another instance, then let's take this guy, open the contents, open the Offset Path, one of my most favorite underrated mathematical operator, and I can bring it maybe even closer to us. I want you to look at the scene from a different location, so, I'll hold down the Option key and I'll move my camera so you can see how this is building up really nicely. Now, I can just animate each one of the layers as well as bring some light to the scene because the moment I'll add some lights, maybe just go with the point light for now, it's going to get a life of its own. This is looking like I'm working in Cinema 4D or Blender, but no. This is After Effects. I hate Blender. And I can do amazing stuff. I can also add some cameras and switch between the cameras as if I'm describing a football match. And this is exactly what I did in the final example. So, hopefully, you can see, and if not, I'm here to help you. I'll move to custom view one. So, the scene itself doesn't do much. Right? It just move-- Each one of the layers is just moving back and forth. But notice that we are looking at it from different cameras' angles, so, some of them are closer. This is, by the way, the Tim Burton trick. Remember the first Batman, the introduction of the Batman logo? This is what he did. Created the logo and the camera is basically just wandering around the logo. It's so iconic. You don't need even a single word. I'm not Tim Burton, but this is what I can do. And this is how it looks, again, without all the fancy expensive stuff of the reflection and other stuff. It looks really cool, and it was so easy to achieve starting with just a flat one single Illustrator layer that's stupid easy to create. And so, once you add more stuff to it, for example, a reflection layer, shadows and other stuff, it becomes much more interesting, and this is how it will look if you turn on all the, again, render expensive stuff, and maybe also add some music to it. So, let me just solo it and maximize and try to preview it for you. [Music] Cool. Are you crying? We need a good cry at least once a day. Right? Right. The best deal that you will get in MAX, not any freebies, t-shirt or stuff. Knowledge, right? So, I have plenty of extra stuff on my YouTube channel, like deep dives into those shape layers and camera tracking and all the things that you want to know and you didn't even know that you want to know. So, go ahead and visit me. Also, make sure to fill the survey. Excellent, excellent, excellent, five, five, five. I don't know. Make sure.

And if you want more of me, this is your quick response code, where you have access to a plethora of courses that I did for Linkedln Learning. So, I've got more than 30 courses on different topics of After Effects, Photoshop, Illustrator, Cinema 4D. If you don't have a premium membership, just use this contact button that you will find. I'll open the course for you for 72 hours. So, it's going to be a race, but it's going to be free, and who can argue with free stuff? No one. Thank you so much. Have a great day.

[Music]

In-Person On-Demand Session

Type and Title Motion Design the Easy Way - S6602

Sign in
ON DEMAND

Closed captions in English will be added in early November.

Share this page

Speakers

  • Eran Stern

    Eran Stern

    Motion Design Educator, Adobe Community Expert, Stern FX Ltd

Featured Products

Session Resources

Sign in to download session resources

About the Session

Elevate your text game and dive into After Effects type options. Explore motion paths and create captivating text animations. Seamlessly integrate SVG and variable fonts into your designs. Demystify 3D effects in minutes — extrusion, lighting, and camera angles. Join motion design educator Eran Stern on this exhilarating journey into the art of type and title motion design. Whether you’re a seasoned designer or a curious beginner, this session promises inspiration, creativity, and a dash of magic. Let’s make your text dance.

Eran will show you how to:

  • Make your text more legible with lesser known techniques
  • Leverage the built-in animation presets
  • Make the most of path animation
  • Work with SVG and variable fonts
  • Craft 3D typography in minutes

Technical Level: Beginner, Intermediate

Category: How To

Track: Video, Audio, and Motion

Audience: Art/Creative Director, Graphic Designer, Motion Designer, Post-Production Professional, Social Media Content Creator

This content is copyrighted by Adobe Inc. Any recording and posting of this content is strictly prohibited.


By accessing resources linked on this page ("Session Resources"), you agree that 1. Resources are Sample Files per our Terms of Use and 2. you will use Session Resources solely as directed by the applicable speaker.

Not sure which apps are best for you?

Take a minute. We’ll help you figure it out.