[Music] [Kyle Hamrick] We are here to talk about Motion. Okay? Who's excited? - [Audience] Whoo! - Whoo. I'll take it. Okay, I'm Kyle. I have been doing motion stuff, video stuff, all kinds of creative things for 20 something years at this point, and teaching about it for over half of that. I really like doing it, and I really like telling other people about it, hoping to get them excited about it too. So there you go. Hopefully, you're in moderately capable hands here. I will put this up again at the end. Please feel free to reach out to me with comments, questions, complaints, etcetera. So what are we going to talk about today in the next 58:30 minutes? Well, we're going to talk about motion as a form of design communication. How many of you would identify yourselves as designers, especially of static content primarily? Most of the hands in the room, which is what I expect. Yes.
So I'm going to talk about some of the fundamentals of actually adding this into your skill set. You already have a lot of great skills for making stuff look cool, and we can add some stuff on top of that, right? And I'm going to give you some of the crucial stuff, like some of the planning and the workflow, getting your brain in the right mode to be able to think about how to do this, and of course, some of the technical things. Again, you probably have a lot of technical things in your head, maybe how to print stuff, how to prep things for that. The world of video and motion has a lot of similar technical stuff. It's just different avenue, right? And then I'm going to show you some approachable techniques in a couple different Adobe apps. So, wherever you're at, whatever kind of stuff you're making, hopefully I show you something that you're like, "Ahh, yeah, I can see using that for what I do." So, if you leave here a little bit hyped about adding some kind of motion to what you do, I've done my job. Okay? So motion in all of its forms, and I'm talking about in sort of a digital representation, right? It's everywhere, right? We all have this little magical rectangle in our pocket that has all kinds of cool stuff on it. And we scroll past a bunch of animated ads to see other things that people added animation to. And of course, the UI of this device animates in all kinds of ways to communicate things back to us as we navigate through that. When you go out into a big city or something, you see animated billboards all over the place, right? When you go to McDonald's, those menu boards are now video screens and those are animated. It's all over the place. It's only getting more and more, and I suspect it's going to get aggressively, obnoxiously, so, within about another five years, right? All right. We're kind of here to talk about motion branding in addition to just these concepts. So, I'm going to do sort of a little pop quiz here. I know I didn't warn you there'd be questions, but now you're ready for it. So, when you know what this thing is, just shout it out.
Yeah, NBC. This is from the early '60s, I believe. I didn't research this, but I think this is from when color was a fairly new thing and so that seems part of it. But you probably recognized it before it actually got to the logo, right? Because you kind of understand the vibe and you see those colors. But partially the way it was moving sort of helped you. How about this one? Yeah, yeah. I said shout it out, not whisper it out. But yes, Universal. You got it from a spinning globe and a plane, right? Way before that word came up. And this is from like 1932, right? So motion branding, it's not a new concept, it's been around for a long time. What is relatively new is that it's accessible. I could use this laptop in my basement and make all kinds of cool stuff. I could make a Times Square billboard on this thing, right? And so because almost anyone can do this stuff if they take the time to learn how, kind of becoming the expectation. Most of you who identified as designers, I'm sure you've been feeling some pressure, either internal or external, to learn how to make some stuff move so, that it gets noticed on social media, if nothing else, right? Yeah, I'm seeing a lot of sort of semi frustrated nods out there. Yeah. And then that knowing chuckle when I said that line. Okay. How about this one? Google. Yeah. This is never going to resolve to a logo or anything. It's literally four circles, but you know exactly what it is. And what are these four dots doing? They're thinking. Yeah, they're moving, they're moving up and down, bouncing, whatever you want to say. But really, they're thinking or they're listening to you or something they're processing, right? They're communicating something back to you that they're responding to what you've done.
So motion is communication. Those four circles are talking back to you, right? All right. Obviously, yes, they're in slightly different positions. Can anyone tell me what the difference between these two circles is? I'll save you the time. There is none. They're identical. Okay. Yeah.
How about now? One's heavier, he says. And, yes, that is the expected answer. These are pixels, man. There's no weight here. But, yeah, one's heavier. By the way that these move, I've communicated to you that these are things that have weight. And they have a weight relative to one another that's clearly different. And they're rigid objects because they're not deforming at all when they bounce off of that surface. Oops, that's not a line, that's a surface now. We're in a universe with physics, right? Look at all this stuff that you add on to here by moving stuff and by the way it moves, specifically. If I had animated these extremely poorly, it would also give a very different vibe. Like, if I just-- I don't know. If I made it move wrong, I should add a third one that like just, I don't know, crumples up into a ball or something. So motion can create meaning, regardless of what your thing looks like. I could take a plain filled square and make you find it charming by the way it moves.
And then as you start applying these things on a broader level, especially across something like a brand or a product range or whatever that might be, you start creating cohesion because if you establish just like you have visual guidelines for a brand, you can establish guidelines for how a thing moves, how our brand moves. Is it playful? Is it serious? And now you've created this overarching universe for your thing. Even if you have elements that look totally different, they start all feeling like they're part of the same family.
I mentioned Google. They've gone through a couple iterations. They're now on version 3 of their material design guidelines, and they have been rocking motion guidelines as part of this for over a decade at this point. They were one of the first places that really, like, solidified some of this. And, obviously, Google has guidelines for things like how our logo animates and how you create things when you're making an ad for Google. But these guidelines apply to everything that lives in their universe because, of course, they have a lot of devices and people touch those things. They touch the little buttons and they move things. And the way that all of those things move to communicate back to you that they're understanding what you've done and they are responding to those things, that helps you feel like you're in the same universe and also communicates a certain Googleness back to you, right? By the way, those material design guidelines are freely available online. You can look through all of their sort of visual rules and motion rules. It's pretty cool.
Of course, if you're just trying to get noticed, just having motion in any form is also just good for attention. You know, if you're scrolling through social media, if you can even see a non-video post anymore, the ones that move definitely grab your attention more. So there's always that aspect too. Motion is kind of like waving at you, grabbing your attention. And if you use it right, you can direct people.
So we're going to do a little thought experiment here. All right. So you have been tasked with making an ad for these fancy new shoes, and, of course, they're on sale so that everyone wants to buy them. So you've got a shot of the product here. You've got the name of the company or whatever it is, and then you've got the sale offer. So we have completed our goal, right? But what if we were to add even just a tiny bit of motion, like a little low frame rate looping GIF with two or three frames? Okay, so let's think about what we could do with that. Well, instead of just having these shoes be here, they could be maybe walking, right? And now you're communicating what the product actually does, what it's used for, okay. Not that exciting, but like it's accomplishing something. It grabs some attention. But what if, again, just a few frames, what if instead of like this, you show the shoes like this? Now they're running, right? And so now you're communicating, okay, so the people who buy these shoes are athletic people. You're going to use these to run. They've got good support, like, again, you're adding a lot of sort of context by doing that. But what if instead you show the shoes like dancing, Right? Now this is a lifestyle brand. The people who buy these shoes are fun people who like to dance in their athletic shoes and whatever. I don't know, right? But what a different message you communicate with even just a couple frames, even if they're not even, like, motion per se. You're just kind of creating the idea of motion.
So I'm sure we're all quite familiar with templates in all of their various forms, and we know that they can be helpful, but they are often not particularly exciting. And often they're very limiting, right? And especially as you get in the world of motion templates, and many of them exist, and I mean I'm going to be showing you some later with some caveats.
So imagine, if you will, you got this cool motion template that you can drop your logo into and it goes-- Whatever. So you did that. You dropped your logo in there. Looks great. Ship it. And now you grab that same template and drop your logo in there and it goes-- And now you grab your logo and you drop it in there and it goes-- And they all look exactly the same, right? Logo is different, but the motion is the same, so there's nothing unique happening here. And so some of those things I was talking about earlier where you can use motion to kind of establish a feel like none of that's happening.
As you start getting into this universe, and I hope you do, even a little bit after today, this is a whole new thing. You're kind of shifting your brain, right? Be patient with yourself. Also because anything relating to animation is kind of time-consuming. That's a little bit of the part of the process. So not only am I telling you this so that you know, but I'm telling you this so that you can communicate that back to your boss who expects you to make a two-minute video next week when you get back from MAX after taking one lab. That is an unrealistic expectation.
Doing this stuff, especially if you lean into it as a career, requires kind of a broad skill set. But you know what, so does design. That's okay. It doesn't need to be scary, and you don't need to know all of these things to begin with. And I think most of you already have a big chunk of what's on this board already. But, really, if you're getting into to be a motion designer, like I call myself, that's a combination of graphic design and animation and a lot of filmmaking techniques, like storytelling and how you do that visually.
Or you can kind of go a little more technical with it, and it's design plus knowledge of how to work with time, like rhythm and pacing, how to work with motion, animation principles, and then a lot of the technical knowledge, like I said, like about video and how you might work with various formats and stuff.
Start simple. I'm going to show you some very approachable techniques that I think that you could literally do as soon as you walk out of this room. Let's start simple. If you have grand plans about making a Pixar movie or something, don't make that your first project.
It's always surprising. I love when people have very ambitious ideas, but that's a good thing to aim for in like year three or whatever, you know? Start small so you can be successful and you can be excited by it and then you can build on that. And you'll be surprised how effective simple things can be because even if you literally take an otherwise totally still design and you animate one texture on a thing, that can start being successful. This isn't the most exciting thing ever, but it's motion, kind of, and it's enough to start getting the job done. And And what if you put slightly different textures on a couple different shapes around your thing? You're kind of getting somewhere, right? That's a pretty easy technique.
Also, one of the greatest things about motion, regardless of where you're doing it, is in most cases, is completely non-destructive because you have to be able to change everything over time, which means you can always change anything. And yes, that's kind of a big, like, almost scarily open thing. But it means you can do whatever you want. You can experiment. And if you mess up, you can just undo. It's fine. It's a great, big playground, and you can do all kinds of cool stuff in it. So don't be afraid to just mess around.
Most of you identified as designers, so I want to help you realize that you have a good head start. Like I said, you already have an understanding of visual storytelling, often with some kind of progression if you've made anything with more than one image. And you understand visual metaphors. There's a ton of motion stuff that's just like balls moving around, right? And crucially for you, if you can make something look good and move in a simple way, it's actually way more effective than something that looks all right and moves really well. So you're well positioned.
So we're going to leverage what you already know. I'm going to jam a little bit of knowledge about time and motion, how to take advantage of that time that you have now, and show you some cool possibilities here. All right, easy one. What makes this more appealing than that? Contrast, yeah.
This has much higher contrast than its background, so it's easier to see and thus it grabs your attention compared to the one that's a little too close in value, right? So contrast, easy answer. Of course. Now you can do this to direct people's attention at the thing that you want them to see, right? I mean, if you caught that over there. Okay. So, of course when we're doing still design like contrast, obviously it's more than just this, but I'm using it as an entry point here. And, of course, once you start introducing motion, you do need to worry about contrast in this sense, right? Because if something moves, you need to be mindful of, well, if it moves past that other thing, now we need to go to our old friend drop shadow to make sure that we can see it, right? Or something better. But, hey, a well-used drop shadow, I think we all know, can be very effective. So you still need to worry about it here. And sometimes the fact that time is now in play, right? You need to be mindful of it like that. But let's think about contrast in the motion itself.
Which one of these are you looking at? Yeah. Because it's shouting at you, right? These are, again, visually identical, but one of them is grabbing your attention because of the way it moves, right? What if I do this? Now you don't know where to look because there's no contrast. Yeah. See, you got this.
What about this one? This is kind of a little more interesting case.
There's no necessarily right answer here. But I think in general, you're probably looking at that larger ball on the left. And of course, I'm using some other visual contrast stuff. There's size going on. The color is pretty similar.
And the small one's moving fast, but it's also kind of coming and going. And so I'm communicating to you, like, "You need to see that, but it's not really important enough to stick around and make you feel its presence the whole time." So I'm kind of establishing some hierarchy here, aren't I, again, just by the way the things are moving.
So let's talk a little bit about why this stuff matters and kind of how I've got some real world examples here. We can kind of point out some of these ideas. So at a crude level, a lot of this is just getting people to look at the thing. But then some examples of what you can communicate with this, right? So of course, as I already said, most of the social media platforms, if you're not posting video to some degree, it's just not even getting seen anymore, which is why we all have to make these silly-- like these things, right? So it is what it is. Hopefully, there's a world where we can just start posting still things again because that is also stuff that is cool, right? All right, here's an example that I love to start with because it's a big brand, and this is about the simplest thing ever. I feel no shade here, but I do feel like they kind of phoned this one in a little bit. It is technically accomplishing the goal of being a video file, and so it would get promoted as needed, right? And it is grabbing your attention, right? You're looking at that price. I think there are a lot of opportunities here to do more with this, and you could reinforce this message better. Even if you just took those kind of lines around the side, like those could pop around and add some extra emphasis. And if you do it right, you're also directing people's attention back at that $29, right? But you get the idea, right? And if you're already seeing ways this could be better, you're on the right track.
Okay, so this is by a guy named Bogdan that I know. He's a very talented motion designer, and he's done a lot of these collabs with illustrators, creating these just, like, really pleasant little illustrated animations, animated illustrations, however you want to say it. Look what's moving here. It's not a whole lot, right? And it's all very slow and subtle for the most part. There's a couple elements that move more, but they're still, like, pretty serene. He's not trying to punch you in the face with anything. As you start looking around, you might start noticing actually a lot of things are moving, like the plants and the cat's tail and stuff, but they're really subtle. They're just kind of little vibes, right? But again, if you do work that looks anything like this, even at just a structural level, start thinking about the ways that you could just have a couple little things moving, undulating, right, and how much life that could add to something that you've created.
Now one of the things I really like about working with time is that you can tell a story and you can control that story to some degree. So this right here, this is feeding us a sentence one word at a time, right? And if you were scrolling past this on social media, you're probably going to see those first two words, and you kind of want to see where it goes, right? So if you read that whole sentence, oopsie, you just saw all of our products too. Funny how that works, right? So, you get them hooked and they stick around for the rest of the thing, whereas with something like a little social media carousel, right, if that first image doesn't hook them enough that they scroll through, like they're never going to get to the end. But this kind of gets your hooks into them.
This is a friend of mine, Jenny runs a studio called Dreck, and she's been posting a lot of these kind of animated carousels. Basically, this is a thing that she offers to clients among many other services. And so I think this is really clever because she's not only explaining literally with words how these things work and how they can be effective but also literally showing you what the thing is. And most of the motion in here is actually fairly simple. It's pretty clean. I think it's very effective and she's doing some neat stuff that does require technical knowledge. But most of this is not like mind-blowingly complex animation.
Again, pretty achievable, I think, here.
Okay, no comments on the political nature of this, but I just saw this like two days ago, and I think this is such an effective example. All right, so just watch what this does.
Now if you just saw this as a static graph, you see that right there. And it communicates the thing, right? But showing you those bars and then going whoop, totally reframes the whole conversation, right? That right there is a great encapsulation of how powerful motion can be. Obviously, this has an agenda that it is communicating to you, and it wants to portray this data in a very certain way. And it does that extremely effectively by totally reframing what we're even talking about, right? I talked about this a minute ago, how kind of screen presence becomes a form of hierarchy. I really like this example too. The thing that you are looking at literally does not move. But because it stays around through the whole thing, you get all this other context. These are just kind of vibes that are being floated out at you. But the thing you're going to walk away with is that memory of that coffee cup, which you, of course, recognize without even seeing the logo.
Now motion communicates stuff, and I think this was also a really effective thing. This is from a couple years ago. Zoom did a rebrand when they finally cut up with themselves after they suddenly became the thing that all of us needed 24 hours a day. And so for them to take their logo and go from "Zoom to Zoooooom" and showing you literally all the things how we became this to all the things that you needed us to be, right? That's a pretty effective thing.
I really like this one, and I think this is good for the morning time too.
Take a sip of my coffee here. We'll just slow things down for a minute.
This is from Headspace, of course, and they do a lot of this kind of stuff. I think the design, it's really charming, but it's pretty clean. Like, there's really not that many elements. Pretty simple, the animation of, like, the text, for example, pretty straightforward. But this makes you smile, right? And might be happening already. If I leave this up a little bit longer, it'd definitely be the case. How many of you are starting to breathe in sync with this thing? Yeah? That's some power, right? This is like puppet master stuff.
Now, again, as we start applying this stuff more broadly across a full brand, you can do some really interesting things and then be communicating to people that cohesive, you know, same universe that you're creating. This is from a studio called Vucko, that has been specializing in motion branding. And they work with tiny little clients like this. And you can see here, this is just one of their sort of example things showing all the applications that this stuff went into. Of course, you see Spotify on your phone, on your web browser, whatever, but they also have Times Square billboards and Subway billboards and all kinds of other various whatevers. But even though these things, obviously, you're seeing some repeated elements here, but visually, there's a lot of different stuff going on. But you can feel how they're all part of the same universe, partially because the way they move, right? And I think this next example, also from Vucko, is even a better case of that. This is for the launch of Google Next. And, again, you can see the DNA that all of these share, even though some of these things look totally different and don't even have the logo in them. You can start feeling by the way the text animates and how that relates to the other pieces of this that it's all part of the same thing.
So be thinking about this if you are starting to add motion to your work and especially if you're doing it for your company or brand that if you-- You don't need to start off with this, but come up with some guidelines for consistency in the way things move. A lot of this is just intuitive too. Like, if you are making a video for whatever, someone's funeral, okay, you're not going to have the words go-- Unless that person was like a professional clown and that's appropriate, right? But context matters, right? A lot of this, you just feel what is right, just like a certain typeface feels correct for certain contexts. Things move the way that they are supposed to move for that thing. And if you are intentional about it, you can be really effective.
Okay. So we've reached roughly the halfway point, and so now we're going to step back from me talking about all of this what and why. I'm going to show you some how so that hopefully you can take these ideas that I've been packing into your head, show you some ways to take advantage of those.
Move my chair.
How are we doing so far? Good stuff? Okay.
All right. How many of you are using Express? Should be more hands. It's better than you give it credit for. I know that a lot of us probably think it's like, "Yeah, that's the thing, people don't know what they're doing," right? It's better than you think. Okay? And if nothing else, it's actually like a pretty effective delivery vehicle. But I'm going to show you some cool stuff in here, especially with animation. I bet a lot of you will be in it after this. So it's kind of the quick and easy create anything app, and I know that branding doesn't make us professionals want to go in there, but give it some credit. It is very streamlined, but it also makes it very approachable. Okay? And there are a lot of templates in here. You don't have to use them, but I'm going to right now to prove a point.
Express does have animation capabilities in it, and you can add videos in here, and you can do basic video and audio editing as well as graphics.
Let's come back. Okay. I'm going to hop over here into my web browser into Adobe Express, and I am just going to choose one of these templates for now just to kind of do that. But I'm going to let all of you choose one of these templates. I do think one of the kind of more beachy things is appropriate because of our locale here. So, like, maybe this one or one of these or down here, down here. Somebody shout one out. Orange one. This one? - Yeah. - Okay, great.
That's different than what we did yesterday, so perfect. And it's got a lot of stuff, which I like. Okay, so I'm going to click over here and you can see I've got all the elements here. They're all grouped right now. You don't have to ungroup them for what I'm about to do, but I think it gives you more control. So I'm going to go ahead and ungroup, and then click a couple times to kind of keep ungrouping just so that I actually can see what all these layers are because I know we all like to group things too, but this is a little over-grouped for my taste. Well, that's just-- There we go. That's got a lot of stuff. I like it. Okay. So some of you may already be aware that I could take one of these elements. Let's maybe find, okay, just these words here. Okay? It's these things here.
Now if I come over here to my left side panel, is this technically a Properties panel? I feel like it is, but I don't know if they call it that. If you look down here at the bottom, there's a little thing for animation. Every layer in here has that. And so you have a variety of they're preset based animations, but you can control them. If you look here, you have the ability to animate something in. You have what's called Loop, which is like a constant animation while it's up, and then you can animate it out, okay? So just kind of showing you an example here. I'll choose this one called Drift. You can just hover over it and it'll preview what it looks like. So I'll go ahead and click on that. Feels pretty good. See how I have little sliders here? So if I click again, I get the ability to change things like the duration, which direction it comes from. So that's pretty straightforward, right? Let's maybe have it come upwards just so we can kind of see something different. I don't think it looks very good, kind of getting a little mushy in there, but we could call that Loud, for example. We can make the duration faster and give it a very different feel than what it has. Yeah? So just to kind of show you, you can go through and you can do that individually on every single layer in here, and you can do some stuff pretty quickly. I'm going to go ahead and just remove all. But this brand new button we just got a couple days ago is called Animate All. And if you click on that, this is going to use the powers of AI. It does actually have some smarts behind it. It's kind of looking at the positions of everything, but it does do some analysis, so it's pretty cool. You can tell this, "Hey, I want to animate all of these things, and I want you to kind of help me do it in an easier way." Let's use Sunrise here. So that's going to kind of bring everything up from the bottom. So I'll just click that, and then it's done that for me. I'll just come down here and click this little play button so that I can see what it made. I don't think that's great. But, hey, we didn't have to do anything except literally click once, right? Technically twice, I guess.
You know what? Let's go ahead and remove that. Let's try waterfall and see if that works a little better. I think the fact that the text is kind of connected as two things is going to work against us a little bit in this case.
Okay, so that one's objectively worse, but I'm sticking with it. Okay. But you get the idea, right? And you see how easy it was to totally change the vibe, and I know that all of you can do this. So let's fine tune this a little bit here. I'm going to go ahead and go back, and that was just an in animation. Now maybe I want to give all of this a loop animation too. Do I want to animate all? Sure. Why not? Let's see what happens. Let's try popping. That's going to be super obnoxious. Ba-boom. There you go. That's so serene. So it looks like that's only going to do the animate on thing. Let's see what Bloom feels like.
Okay, let's see what Glide feels like. That might work better for this design.
Start over and do glide.
I still don't love it, but here we are. So I'm going to come up here and I've noticed that there's this texture layer up top. And I'm going to take that and just, like, make it a little bit bigger than my canvas here. Okay? I'm going to come back over here, and let's do a little animation just on this layer. Let's come to loop and maybe jitter, but then I'm going to bring that way down, bring down that intensity, bring down that speed. Let's see what that feels like.
Still maybe a little much, maybe just a little bit lower, a little bit lower here. And now pretty easy. Yeah, it's still a little much, but hopefully you get the idea. Like, if you're subtle with it, you could create just a little bit of life on a texture layer, right, in addition to having the things move in. And obviously, for this, you probably want to go with something a little more slower, kind of creating some vibes, maybe each of these little seashells. You know, I don't want to spend too much time here, but each of these could have like a little bit of bob to them or something like that. Start getting some ocean-y suggestions going on. And this is super accessible, right? And if you don't like it, you can just pick another one, play with the sliders, you're good to go. Now when I'm done with this, of course, you can download this as a video file and post it wherever you like. But in case you didn't know, with Express, you can also post directly to all the major social media platforms, and you can even schedule stuff in here. So if that kind of stuff is part of your job and you're not using Express, maybe you could check it out and see if that's better than the way that you're doing it now, yes. You know, I haven't done too much with, like, kind of saving this back out as a template. Like, this sticks with this project that I've made. So if I rename this as like beach thing, whatever, like I said, I mean, the cool thing about Express is now I could share this with you, and you could update the text every week for the new messaging that we're trying to do or whatever. And then you'd be able to keep updating it. Or think about this, you could use another tool, like Premiere or After Effects, and create a more complex thing and leave that one text layer turned off when you export it over to here, replace that text layer in here, add some animation, and now your marketing person could literally be the one doing all the messaging and sending it out, and you never have to touch it again.
So cool possibilities in here, right? Maybe a little better than you thought. Okay. So let's come back over here. This is from last year before the Animate All button worked. Paul Trani has been making a lot of cool stuff in Express. And even looking at this with what I just showed you, you'd probably be like, yeah, I could probably make that with one of my pieces. Yeah? Because a lot of it, there's some jitter over here, there's some bob over here. Like take a little bit of clicks, but you could get there pretty soon.
Now if you're doing more serious video work, how many of you use Premiere regularly? Okay. Quite a few. Good. Yeah. Video nerds. Love it.
You can do basic. Oh, you know what? I meant to do this while we were in Express. Let me come back here for just a second. You can do basic video work here in Express. I'm just going to grab something from Stock. We'll say beach. This is for a tropical hotel. So we're going to take this clip of the beach, bring it over here. You know what? I forgot to show you something else. I got all wrapped up. You can actually show the timeline. That's kind of important, right? So you can see the timeline, and crucially, you can actually see the layer timing of each of those layers we animated. And so if I really liked-- Where's our palm tree? Let's say we wanted that to come up much later just because it's, I don't know, whatever. You can just drag things around in here, and so now you'd have that same animation, and then the thing comes on last. Okay? Very, very easy to drag stuff around. It's not the most precise, but it's pretty approachable. So if I also wanted to add this clip of the beach here, I can just drag this over here and create it as a new scene, and then I can scrub around through it. And let's say a few seconds of that is plenty. So I can just drag here to trim that off. Maybe about five seconds is fine. And you know what? Let's grab some music too. So beach still, let's see what that gets us. We get some beach music or just sound effects? I want music. Tropical? There we go. That's just what I wanted. Okay. I'll drag this over here, and now we have-- Look, this isn't going to win any awards, but hopefully I've made my point how approachable this was to make. And the boss comes in, "Hey, you know what? I actually want that video clip first so that then people see the thing." "That's cool." You just drag it over here, and now that's all it is. Like, it's very easy to just drag things around in here, and then you're in the same ecosystem. And you can bring layered Photoshop and Illustrator files directly in here too. So you can design in a real place, but then use this for stuff like this, right? And just to show it, yes, you can indeed-- Where do I go to get rid of this background color? You can put graphics over video clips as well. So it may be easier with-- Whatever. I'll just grab a photo here just to kind of make the point. This is not going to make a lot of sense, but you can put graphics over videos. So you can put your logo over the footage and stuff too and still use those same animation options that way.
So for real this time, over to Premiere. If you're doing something where you need a little bit more precision, a little bit more control, Premiere is the place to do that video work. And if you are trying to do some graphics, some animation, Premiere has those capabilities as well. As a long time After Effects nerd, Premiere is not the place I would choose to do those, but it is capable.
Those of you that are using Premiere, how many of you are using Motion Graphics templates? Not nearly enough hands. Oh, okay. So these motion graphics templates, or Mogrts as the cool kids call them, are actually, again, really helpful. So I know I was kind of dissing on templates earlier, but we'll see. Now if you look in Premiere, in your Essential Graphics panel, you're going to find all of these templates, a ton of these come preinstalled. A lot of them are things like titles and there's a couple of these, like, really complex ones that are like sports intros and stuff. And like I said before, if you're using this exact template, you can change the colors and stuff, but it's going to look exactly like everyone else using it. But a lot of these are very useful. You can add some animated text and stuff like that to help do this without having to build it from scratch. But you can also build your own and then either in Premiere or in After Effects, and then you could share this with your editor or your junior editor or whatever that is. And especially if you're doing something regularly that needs to be updated all the time, like a podcast intro or something like that, then you could have a very streamlined thing that you could hand off to someone who barely even knows Premiere. And if they know how to do things like update text and change one color, then they could make these updates for you. So you can look through all kinds of stuff. There's tons of these on Adobe Stock, either for free or for sale also. But this is one that I have made myself. Let's quickly check out this amazing animation that I built. Okay. Pretty cool. Has a place for our guest's name and our guest's photo here. Now if you look over at that Essential Graphics panel, it updated. This is one that I built in After Effects, and so I was very intentional about the controls that I'm sending through to Premiere. So I can hand this off to my junior, and they can change the name of the guest to Kenny Keyframes here. And then, of course, we want to keep things fresh, so I gave them some color options. So they can just update this to this nice blue, that still works well with the color scheme. And then to be able to change the photo for the guest, there's this drop zone right here that I sent through, and you could drop a photo or a video into this. I do happen to have just a photo here already cut out of my next guest, Kenny Keyframes, and so I can just drop that right onto here, and boop, there it is. I might need to reposition him just a little bit because he's more straight on. Okay. Great. And now I'll just come back here and play my animation. All the animation is still there, still built in, but totally updated. It looks like a brand new thing, right? And, again, that was pretty easy. Just in case you don't know this, this is not a lesson about Premiere, but Premiere also has the ability to export to a ton of social media platforms directly, the more video based ones. So if you're not taking advantage of that, maybe you should be. Save you some clicks. Okay? Yes.
One more tip since we're here. You can save Mogrts in libraries and share them with your team or with whoever, and you can create specific libraries just for certain brands, stuff like that. So this is actually a really great way to share these Mogrt templates. Yeah. Okay. So before I show you anything in After Effects, which I'm going to show you just a little taste, I'm going to take a minute and talk about designing for animation. If you took my lab already, this is this is kind of the same information, so bear with me for a minute. But generally speaking, if you are used to designing things for one static frame, the way that you're going to structure your files is a little bit different if you're planning to make things move. Okay? Having, for example, 300 tiny adjustment layers of little color corrections, that's not super viable if you're going to send all those layers over to an animation program.
But you do want to layer things out as much as possible. Kind of think about which pieces need to move together, right? But you generally want to stay very non-destructive, and I'll show you an explicit example in a second. You want to kind of have some concept of how you want things to move, which things you want to move. But try to give yourself options. Okay? Like, if you want a texture to animate, make sure that you have enough of that texture that you can move it around on top of the thing where it's visible. Okay? For example, if you were making this stylish little circle and you wanted to do some nice brushed on highlight and shadow, a lot of us might press Ctrl or Command and click on that circle to make a selection, grab our brush, maybe click a new layer, and then you can brush that right on. And it looks great, right? And so you might end up with something like this. So you've got your highlight and shadow in different layers, so you can adjust the blending modes and the opacity, and it looks great, right? However, if you are taking this into animation, you have just created this, and those brush strokes can't do anything except be exactly where they already are. So if I were creating something like this, I would instead have every single one of those brush strokes be its own layer, and those are all totally independent from the circle, okay? Every one of those brush strokes just exists roughly in the position that I want it to. And then I could do something like group them and use a layer mask so that those only exist in the circle. Right? And I can replicate that look in After Effects so that I can only see them there. But the full brush stroke exists. And then when I bring that into animation, that's the difference between the red circle and the green circle because I let all of those be their own thing, and so I have the ability to move them around without seeing those edges, right? And once again, just a little bit of structuring and thinking ahead, what a difference you can make, right? Literally, the five-minute example I'm about to show you, you would be able to pull off this animated texture in After Effects. I believe it. And what a huge impact that makes compared to the red one. Now, if you are building in Photoshop and want to go to something like After Effects or similar if you're trying to animate stuff in Express, Every single Photoshop layer can become an After Effects layer. Okay.
If you put things inside of a group, it goes into what's called a pre-composition, kind of like a Smart Object, kind of like a group, sort of a little bit of both. And that means it looks like one layer in the After Effects timeline, but you get to reach inside and touch all the pieces that are in there.
Photoshop text can be converted directly into After Effects text, which means you could edit it in there and animate it in there. And not just animate it like move the whole thing, but like make every single character do cool stuff, right? And a lot of the layer styles and even some of the effects can go right over to After Effects too. So if you're already comfortable in Photoshop, you're like halfway there.
If you are an illustrator person, every top level illustrator layer can become an After Effects layer. If you are one of these people that just creates layer 1 and makes 9,000 things inside that, I always like to see how many people laugh at that. I think they know.
Every top level layer can become an After Effects layer. So you do need to do a little bit more organization and naming. Name those suckers.
So for example, if you have something like this, all of the pieces inside Bloom-O1 here will just become part of a layer called Bloom-O1. Okay? However, After Effects also has a really cool thing called shape layers. And you can convert these illustrator layers to those. A shape layer is kind of like a mini version of illustrator inside one layer, which can be a lot. It can be very useful. But you can actually get access to all that vector information or all that parametric information and change and animate all of those properties about each of those objects in there. It's pretty powerful. If you are working with print elements and also want to animate it, just know that you need to convert to RGB. The entire world of video is RGB. Don't bring CMYK files into After Effects. It will yell at you.
Everything in here is measured in pixels. So DPI, PPI, not a thing. You're just working with pixels. Okay? If you are working with like super big poster files and you also want to animate those, probably want to make them smaller before you come in because video is relatively low resolution and no one wants to work at a thing with everything at 5% scale. And it'll slow you down.
For those of you that are not video savvy, just to kind of give you a quick overview of some basic video technical stuff, common frame sizes. Again, video is not that high resolution. What you're looking at right now, the signal I suspect, is just HD, which is only 1,920 pixels on X horizontally and 1,080 pixels vertically on Y. Okay? So that's what this looks like. 1920x1080. You always say the X first.
If you're working in everyone's favorite vertical video format, that's just that spun 90 degrees, so that would be 1080x1920.
And then you might be familiar with 4K. All of our phones can record in 4K. Still not broadcast very much because it's actually a lot bigger file size. The numbers are only twice as much as standard HD. But if you remember back to, like, 3rd grade math, area doesn't work that way. So if you were putting HD signals into 4K, it's 1, 2, 3, 4 of them. And so a 4K file is 4 times the size to choke through the tubes of the Internet to get to your TV.
In After Effects, just because I'll be showing you this in a minute, it has a coordinate system that's actually exactly the same as Photoshop and Illustrator. Maybe you've just always ignored it in there because it doesn't matter so much unless you're trying to be precise, right? But once you start moving things, you really need to keep track of where things are. So the top left is always 0,0. And the bottom right-- Yeah, am I doing that correctly? Yeah. Is always whatever your frame size is. Okay, so 1920 pixels on X. Gets you to 1920,0 and then you do all of the Y, 1080 gets you to 1920,1080 in this case. The middle of any After Effects composition, the frame that you're looking at, is always exactly half of that frame size, so 960,540 in this case.
Since we're dealing with time, we're going to be dealing with what's called a Frame Rate. A video file is just a bunch of images packed into one container. And those images are called frames when you're in the world of video or film. And the number of them that you see every second is called your frame rate, okay? If you live here in America, you are used to seeing 30 frames per second on your TV, asterisk. If you're a video nerd, you know what I'm talking about. Don't worry about it. These people don't care. You don't care either. You just know it. If you are from Europe or some other parts of the world, you're used to seeing 25 frames per second on TV. When you go to the movies, you're used to seeing 24 frames from TV. So while modern televisions are better at dealing with this, if you've ever seen a British TV show or a movie that is conveniently formatted for your screen and you see that beautiful panorama shot as it pans and it goes-- Right? You all know what I'm talking about. That is because every 5th or 6th frame is actually being duplicated so that it adheres to the 30 frames per second broadcast standard that you are watching it in. Yeah. It's not just because they mess something up. It's just, yeah, how it works. So frame rate, especially as you start getting lower, you can really start seeing the difference. And you've, of course, seen this a lot on animated GIFs and stuff like that. And also animation, like cartoon animation, is often done at lower frame rates because it's a lot of work to draw every frame, right? But start looking at this, 24, if I showed you 30 also, you probably wouldn't really see the difference, 12, you start seeing it. As you get down to 4 and 2 frames per second, it's like really chunky, really staccato, right? You can use this stylistically to help communicate a certain thing. But what's really cool is if you look at 2, and you could maybe cover it with your hands so you don't see the other ones, but even if you only see the 2 extremes, your brain can see the motion there even if I don't give it to you. That's pretty cool. And again, if you're doing that intentionally, you can do some neat stuff with it. Fortunately, After Effects gives this a lot of this to you as presets. If you need to be in a certain format, just choose that, doesn't need to be scary.
After Effects can take almost any multimedia type, so it's just a big cool playground for whatever you want to throw at it. Anything from images to audio files to even 3D models. You can do all kinds of stuff. You can make visual effects for movies. You can create animated characters. You can make Times Square billboards. I've done pretty much all of these things in After Effects. I could do all of these with this little laptop right here. It's a very cool place. It does have a bit of a learning curve, but it's not nearly as scary as you think. I'm going to prove it real quick.
Quick tour of After Effects, and I do have one more session of my lab today. If you actually want to know how to do the clicks, don't worry about the clicks. I'm just showing you some stuff, right here in the middle, you can see your stuff, right? Look, it's stuff. I can move it around. Look, okay. If I put this on top of that thing, it's on top of it because when I look down here, yep, that layer is above that layer and I can to move it down. There we go. Works just like the layers you're already used to, right? Except here, this is a timeline, and so we have time moving horizontally. And so if I were to take this thing and trim it off right here, after I move past this past this point, oh, doesn't exist anymore. And I could, of course, add animation to this, so things move over time. Okay, everything that you create in here is based off of what are called keyframes, which is kind of the basis of most computer animation. And if you want to have something move from over here to over here, you just give it different values at different times for that property and then After Effects does it for you. Okay? So if I want this ball. As I drag this around, look up here at the position value or down here. Watch that position value move as I drag this around. So if I go up here, I'm going to get pretty close to 0,0, right? And if I go down here, I'm going to get pretty close to 1920,1080, right? Yeah. So, of course, I'll go back to the middle. That's 960,540, just like I told you. And you all remember all that number stuff because that's why we got into design, right? So let's say I want this ball to move across the screen. I can bring it over here and then come up here and click this circle next to position. It's called a stopwatch, and it's going to enable animation for this property. Boop. If you look down at my timeline, there's a little diamond down here. That's called a keyframe. It's holding this value at this time. If I move to a different time, now I can give it a different value, like over here. See how it kind of shows me where it was and where it's going? And so now if I come back over here and do a preview, ooh, animation. Two different values at two different times. So After Effects moves between them. Everything you do in here is based on this, whether it's something really clear like position or the properties and some weird effect that are changing over time. It's all the same. You're just feeding it different values at different times. Okay? If I want to change something about this animation, I can change the value. Like, instead of here, I could make this move over here. And now my animation would look like that. Okay? Or I can change the time at which that value occurs. So if I like this animation, but I think it's too slow, I could just move this second keyframe move that second value to happen sooner, right? So maybe I put it right there. Now this is going to go-- And then just sit there because I'm not giving it another value to move to, so it's just going to stay there until it gets another command, essentially. Or I could drag that all the way to the end, and now it'll do that same thing but super slow. Okay? I'm going to real quick build something from scratch for you lovely people. Check this out. Okay. I'm going to bring in this Photoshop document. It is layered. Boop. Look at that. Got all my layers. Okay. Cool. And I'm going to make this thing move. All right. So I'm going to start out real quick. Let's go ahead and just rename this thing to cow, and I'm going to do a little bit of recoloring so that I can just keep track of stuff. Okay? And because it's sometimes smart to sort of work backwards so I don't have to find these spots again, I'm going to go ahead and enable animation for these three properties. Jump back to the beginning. I know I'm going fast. Don't worry about it. Just feel the vibes of what's happening. Check this out. I moved this off screen, but I can still see where it is from the bounding box. Pretty helpful, right? I'm going to go ahead and move this up here, move this down here. And then maybe for our-- Okay. That's all right. But, like, everything's kind of happening at the same time. So instead, I could maybe offset things a little bit so they actually come in, like, make it move, and then you can actually read it as it comes in. Right? And then I could do something similar for our little cow friend here and maybe make that spin and scale in. So kind of retime that to maybe something like this, make it move. And now I'm kind of feeding it to you in a more interesting way. I could, of course, animate everything back off and create some looping textures here and maybe end up with an example that looks more like this. And I can very quickly show you this looping texture if you want. I'm technically 30 seconds over my time, but that's okay. I think you people like this enough. But you can start doing even cooler stuff by changing the type of keyframes that you use and create a totally different feel of motion. These balls all have the exact same values in terms of their horizontal movement. But the way that they are moving between those values has been finessed by me, and so it gives it a totally different feel, right? And so you could use that same animation that you just saw. I could tweak those the way it moves. I could tweak the timing, add a little bit of bounce going in and going out, and totally change up the vibe of this too, right? And so you can create a totally different feel for a thing by the way that you make it move.
All right. We are at the end, so I'm going to leave you with a challenge. As you walk out of here today, as you walk out of MAX feeling creatively inspired, I hope that you can take one of the things that I showed you today and make literally one thing move. I think all of you can do that. I believe it. And hopefully, most of you are excited to at least try that. Again, start simple. And of course, share it with somebody and ask for feedback. That somebody can be me. I'll tell you it looks great. I'll actually mean it. It's fine. I'm excited when other people get into this. But what I want you to really think about is ways to incorporate motion into what you already do, whether that's design, beautiful illustration, whatever it might be. Start making stuff move. If you're already working in video, you know about time. So start thinking of ways that you can bring graphics into that in a more integrated way.
What is the goal of what you're doing? Looking cool is totally fine at first, but think about that intentionality. What is that motion communicating? So thank you very much for your time here today. I hope that you have enjoyed this and are feeling like you found some interesting stuff in here. If you want to learn how to do this, I do have one more section of my lab. It's probably full, but maybe you can get in. I actually have a free course available from Adobe for how to do a lot of this. So if you want to do this on your own pace, I like your enthusiasm there. I'll give you this link in just a second. A lot of cool projects here and you get the project files so you can follow along with me. This is me. You can take this link and it will take you to get actually these slides as well as that free After Effects course that I just showed you. And please feel free to get in touch with me with any questions, comments, hate mail, whatever it might be. And every week, you can actually see me on Adobe Live on Wednesday mornings with my friend Evan Abrams. We do a show called Motion Design Hotline. I actually have stickers up here if you like stickers. And the whole premise of the show is that people ask us questions about mostly After Effects, but anything motion, and then we turn that into a show. So if you have questions about motion, ask us and we'll turn it into a show. Thank you very much. Enjoy the rest of MAX. Hope you enjoyed this.
[Music]
