How to Design Animated Display Ads For Digital Marketing | Jaz Infante | Skillshare

How to Design Animated Display Ads For Digital Marketing

Jaz Infante, Designer // AIGA Board Member

How to Design Animated Display Ads For Digital Marketing

Jaz Infante, Designer // AIGA Board Member

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (31m)
    • 1. Introduction

      1:33
    • 2. Lesson 1 - Setting Up the File

      1:29
    • 3. Lesson 2 - How the Timeline Works

      6:23
    • 4. Lesson 3 - Keyframing Your Designs

      7:57
    • 5. Lesson 4 - Videos in Photoshop

      5:09
    • 6. Lesson 5 - Exporting Your Banner Ads

      8:36
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

247

Students

--

Projects

About This Class

A quick and easy introduction to designing simple animated digital marketing display ads using only Adobe Photoshop - no coding, no web apps. We'll first go over how to set up your file, best design practices/principles, and finally, how to export the display ads. 

Here's the link to the website where I source the free stock videos I discuss in Lesson 4: https://pixabay.com/videos/

And a link to a blank photoshop template you can use with all the art boards and sizes already created: https://drive.google.com/open?id=1ACFPyq8d9WTgvy2u8mJOR0E0TOiFt3ao

Meet Your Teacher

Teacher Profile Image

Jaz Infante

Designer // AIGA Board Member

Teacher

Hello, I'm Jaz! I'm a full-time visual designer and Board Member for the AIGA Los Angeles chapter. 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Introduction: Hello and welcome to my design for digital marketing course. This is part two of my previous course, where we learned how to set up design and export what are known as display ads in this video. Siri's we're going to use those exact same principles, but take them one step further by adding animations and transitions. So if you haven't watched my first course, I recommends going back and watching that before diving into this one. A lot of the things I talk about here will make more sense if you have the foundation we built. In course, one static display ads are relatively easy to design, but they have some limits, the main one being that it's a relatively small canvas, and sometimes you might have to add a lot of information on it. So it's easy for display ads toe look, crowded or not even be legible. Another shortcoming is that they aren't is eye catching As humans. Our eyes were naturally drawn towards movement, so display ads with effects and motion instantly draw more attention than a static, flat image. Now you can make thes with advanced coding methods, and there are even platforms out there that allow you to is essentially drag and drop elements onto a canvas, add some animations and then export in HTML file. However, you can also create some pretty interesting designs within Photoshopped, using only native tools to the APP and then simply export them as a Jiff, which is what we're going to be learning today, So let's begin. 2. Lesson 1 - Setting Up the File: as we learned in my first course, I have here a Photoshopped file with multiple different art boards and each our board represents a different ad size, and we've labeled them accordingly to help us keep everything organized. And we have our design elements clearly assembled on each I board. Aside from that, there's really only one change we need to make in order to start adding animation to these elements. And that change is that we need to open the timeline panel, which could be found by going into window and then selecting timeline. And now you'll see here in this new window that all of my art boards and layers are on this new timeline. And if I scrubbed this play head, you'll see that nothing moves. But once we start adding effects and key frames, this is how you'll be able to view and control them. And before I go on, I just want to address one quick workflow practice. I personally prefer to add in all of my design elements and then add in the transitions and the key frames. But we can also create elements and at key frames as you go on, build them simultaneously. It's just a matter of personal preference. And once you were in the process, you can decide for yourself what method works best for you. But for this tutorial, we're going to start with the foundation of having everything already laid out on your art board and then adding in the key frames retroactively. 3. Lesson 2 - How the Timeline Works: before we dive into anything further, I just want to take a quick second to explain how the timeline actually works. If you have experience working with video or motion graphics than some of these concepts will be familiar to you. But for those of you who have never worked with a timeline, I'm going to give you a really quick and simple run down. A key frame is basically a set moment, a rule that your element has to follow. And anything that happens before or after that moment is the animation or at least we perceive it as animation. Let me show you what I'm talking about. I have here a really simple Photoshopped file. I have a red circle and have named the layer ball. And if you go down here into my timeline, you'll see my layer here. And I have these three options for position, opacity and style. So I'm gonna do is I'm gonna set a key frame for this current position where it is right now. And I'm gonna do that by clicking this icon here next to position. So now this yellow triangle square diamond that appears here is my key frame and in order to set this animation, what I'm gonna do is I'm gonna actually scrub ahead 21 2nd I currently have my timeline set to 30 frames per second. So that's why you have the 15 frames. 30 frames is the one second. Then you can adjust thes, um, in your on your own when you kind of figure out what you're trying to dio. But I'm gonna skip ahead. And what I'm gonna do is the minute actually select the layer itself and I'm gonna move it over to the right, and when I let go, you'll see that now a new key frame has been set here. So now it's locked in this position. And if I go back to the beginning and I can either hit the space bar or press play on the by pressing this icon here and what it's gonna do, you'll see that now the ball is moving, or at least it appears like it's moving. Really. All it's doing is switching from this position to this position here. And but because we've locked in these key firms, it looks like it's moving, and I can also go ahead and say we know it at two seconds. I actually wanted to come up this way and I let go again. And now there's a new key frame set there. Right? So if I go back to the beginning and I press play and I was gonna hit that key frame and hit that key frame, right? So what it's doing is it's going from this position here. It's hitting this position here and now it's hitting this position here, right? And because we have those three set key frames, it gives us the illusion of animation. I can do the same thing with capacity, right? So I'm gonna go back to the beginning. I'm gonna lock in my opacity by enabling a key frame. Right? So now when it starts, it's a capacity 100. And I want to say that by the time it gets to this position here, I actually want the opacity to be zero, and I'm gonna set that actually right here in my layers panel zero and hit enter and again a new key frame has appeared here on the ball. This said it zero opacity, which means it's in a sense, disappeared. It's still there the later still there. But I change the opacity 20 to give it the illusion that it's disappeared, right? So I go back to the beginning and hit play. The ball is going to start doing its thing, and it's going to disappear. If I wanted it. Teoh stay at 100% capacity and only disappear at the last second. I have to go in and set a key frame closer toe where it actually start to disappear. So, like right about, say, right about here, I'll set a key frame for it to stay at 100%. So know what it's going to do is it's going to stay 100% capacity this entire time and then only in these last few frames is actually gonna disappear. So go back to beginning. I'll hit play. It stays 100% opacity, and now it disappears, right, And now hopefully you're starting to see that. As you start layering these different effects into onto your timeline, you can start to create some really interesting, interesting effects, right? I can actually even, for example, reverse the opacity, so let's say I'll just go ahead and select thes and delete thes opacity key frames. And I'll say I actually don't want I don't want the ball to start off at, UH, 100% passing and want to start a zero opacity. So had a key frame for zero opacity. And then I say I wanted to come in and look like it's appearing. So when I hit this key frame, it's a 100% and there we go and I've done the reverse. So the ball is going to start off coming in, and that gives us this really cool using in effect. It's like I said, hopefully another your kind starting to see that the more that you stuck these effects and the more that you play with this, the more kind of designs and possibilities. We have another kind of quick tip on this. If you want to play with timing, you can actually select these key friends themselves and move them around right. So currently I have it at the speed and it's pretty. It's pretty slow, right? Let's say I want it to happen really fast so I can actually select these key frames and move them closer to each other, right it's now because I've moved them closer to each other. Let's just do that. It's gonna look like it's happening. The transitions happening a lot faster because it's hitting these key frames in a much quicker sequence, right? So I'll hit play. And now it's going faster, right? I could even speed it up to even go faster than that would say. I want all of these. So I want the entire animation to happen within the 1st 15 frames, let's say which is pretty quick. So just do that and hit play and sped it up. I can also do the opposite where a spread everything out over. I currently have my timeline set to five seconds. So if I speed all of this removal of this back here now, this effect is gonna happen over almost five seconds, which means it's gonna be very slow, right? Exciting stuff 4. Lesson 3 - Keyframing Your Designs: as I stated earlier in the lesson, I like to first work by bringing in all of the elements onto the different art boards and then adding in the animations and the key frames. So that being said here is my file, and I think that Adam actually gonna scrub ahead. And I think the ad works well enough on its own. But I think we could make it more eye catching. So the first thing I'm gonna do is I'm gonna mentally plan what I want to Cheap, right? So I think in this instance, it be cool if maybe the first kind of headline that we saved $25,000 came and first followed by this blurb here and then finally, the button so that everything kind of builds in, um And so what I'm gonna do is I'm gonna start as I said in my one of my very first lessons that I always start with the 300 to 50 size clothes. It's the easiest to then kind of translate to the all the other sizes. And as you see here, I have all my elements on each art board and they're all labeled and assembled, and so everything that's on here, everything that's grouped and labeled here is also going to show up on my timeline. So again, this is really important. This is why it's really important to make sure that all of your, uh elements in and our boards are organized and assembled in a way that makes sense. So starting with this 300 by 2 50 am gonna come down here into the timeline and I'll show you what I did. So I have my are buoyed set to decide on my timeline set to six seconds, right. That's what I want. That's the span that I want everything to happen and I want to happen over the course of six seconds, and then I could just loop it. And, um so I'm gonna go ahead and go to the beginning. And so what I did here is I have this, um I have the thought bubble and we're again. We're watching this, our port here, the 300 to 50. I have the thought bubble, my logo and my background image start off from the get go, right, And then at one second is where I have the next instance, which is where we have the the first headline when we saved $25,000. And so what I did is I basically just had it not appear until this one second one. I could have done this by setting an opacity key three. My could have come him come in here and said in a passing key for him. So it starts at zero, and then it appears that one second, but another option, which is what I did in this instance because I didn't want it to kind of transition, and I wanted it to just kind of popped in. So what I did is, um I scrubbed it all the way to this thing. Instance here. And, um, you did that. So when you first kind of open up your timeline panel, it looks something like this right where it spans the entire Yeah, the entire timeline. And so I had it. I literally just kind of dragged this over right? And so I have it happened at this one second mark, right? And so now it doesn't appear right. Everything stays the same. And then here is where that layer first comes up, right and that's a very easy way of having things kind of appear in and out, right? So then the next thing that happens is it stays this way. And then I did the same thing here with this. This next headline comes in and I scrubbed it all the way will be here, right? So instead of having it come in and speak from the gecko, I scrubbed it to come in all the way in here, right? So that's what's happening here. Is that worse? This this layer doesn't appear until the play had reaches here. When gives us the effect of building in. And then the last thing I said I wanted is the I wanted the but in took appear last, and right now it's it looks like it's happening at the exact same time. I'm gonna go ahead and go toe, but and and as you can see here, all these layers are lined up. That's why they're happening in the exact same time. So I'm actually go ahead instead of this them and say, I don't want toe happen until this four second mark. So that's the learn more part of it. And in this amended the same thing for the button, right? So if I go beginning and again, we're watching this 303 100 by 2 51 7 minutes. Go ahead and zoom ins that we're only watching. This one can. I'm just gonna play it full speed and kind of see what what it looks like. Right? So there's loveable. There's the headline, then the second line and then the c t. And it looks blurred because it's, uh it hadn't rendered yet. And that's why that's why it looks blurred like that. So as you can see this blue line right here, that means Farage rendering. I go ahead and played it again, and I posited that it goes back to two resolution and that just has to do with your computer that you're working on. But I think there's a bit too much time between here, so I think, but this kind of stays on a little bit too long before this next line comes in. So I'm gonna drag this over. Someone say this comes in at two seconds. Yeah, right about there. And then I can move these toe happen a little bit sooner as Well, so they stay. They stay up longer to know again all hit space and will play it again full time. Think that's a bit too much time before the button comes up. Someone actually bring this over that way. There we go. No hit play. Yeah, and I like the way that that builds. And so then now all of the elements stay on at thieves, like for the rest of the duration. So I'm pretty content with us. Now s what I would do next. After I had kind of set, that is, I would go through every art board and do the exact same thing. And unfortunately, I have some bad news for you. There's really no shortcut for this. At least I'm not aware of one. If you can think of a faster way to do this than definitely send me a message and let me know. But in the meantime, I have to manually go through each of these art boards and set the key Frames are set, though the layers and the animations layer by layer. It's tedious. Yes, but that's why I like to design my ad first and lay everything out. So then, um, all I have to do is kind of go through. It's just kind of rote repetition when I'm going through every art board and setting every single thing to happen at the exact same time, Jen, and just sinking up all the key frames. So I already did this ahead of time. For the purposes of this lesson. To save time, I am. I already went through. And so if I toggle each are But you can see I already did the staggering part of it for all of them. Which is why when I play it, see here when I play, it all happens at the exact same time. And this is a really good way to see how your ads will kind of work across all the different sizes, right? So you can look and see that make sure that everything is happening at the exact same time . So this is what it should look like once you have all your key friends set on your art boards, and this is alone enough to create really great ads. But in the next video, I'm gonna show you how you can actually take it one step further. than this, right? So things like capacity changes. Um, sequencing. So, like having things kind of come in, um, at different times, um, movement and things like that. Those are all pretty basic level or entry level animations that dio. But in this next video, there's I'll show you in a slightly more advanced technique that can make some of your ads of really, really interesting. It's pretty simple, so stay tuned for that one. 5. Lesson 4 - Videos in Photoshop: Yes. You read that correctly. Photoshopped can actually process video files, but only using the timeline panel. So I'm gonna pull up this really cool video they have. And this is just a stock video that I pulled the for free from a online stop video website that I can link to in the description for this course is where I get some really cool inspiration from, but go ahead and play it. And it's just this very simple kind of abstracts video that I think would be really cool, um, to use as a background from one of my designs, right? And to make this in photo shop would be really, really complicated. Almost impossible, right? But I can actually use this exact video and put it into Photoshopped and have it play in the background of my art board. So I'll show you what I'm gonna do all come into photo shop and grab that file, and I'm really just gonna drag it onto my art board, right? And it comes in now as a smart object, You could see it right in here, and it looks static way. It looks like it's just on image, But if I go in and create video timeline. You see that this looks pretty familiar right now. It's It's on my timeline. We have this purple kind of layer, right? And the really cool thing is, if I go ahead and press play, it actually plays the video. So even though this is in photo shop, it's an art board and it's just a layer in photo shop. It actually, it's still playing the video, and I can export this and have that stay in motion. So now from here, let's say this was my banner ad and and I wanted Teoh add some, uh, button on the C t A and stuff, etcetera. I can build right on top of this as if it was just a background image. Right? Soldiers go ahead and say, You know, um, this is my company. There we go, and I'll just have this kind of you front. Great. Um, and all say that the spends the duration of the art board and now I'm going to create a button. Just come in here and I'll fill it with, uh, maybe this really cool kind of purple color. It's a bit brighter, something like That would be cool. There you go. I'm gonna go ahead and rast arised this because shape players don't give you Don't You can't add, um position and opacity. Key frames to shape layers. Almost there. Um, rast arise. First, I was gonna go ahead and maybe make this a little bit bigger, so I supplied that, right. So here's my button. And what I wanted to do is yes. Sorry about that. But I wanted to do is maybe a kind of want to float up, like had this really cool kind of floating affects. What I wanted to dio is maybe opposition it lower first, right and all. Hit that key frame and then I'll scrub up. And I wanted Teoh and, uh, over here. Right. So when you just go ahead and play that yeah, and then if I combine that with a posse T. So if I go from past City zero and then here change it to opacity 100 it might give it this cool kind of easing in effect. Yeah, there we go. That looks cool. And then we'll add in my click here go. Just that center that and so this What I'm gonna have it do, IHS. Let's see. So it's the button sets right there. So maybe right here is where I want the text to, um, they just have it appear and I think should ease in a bit. So I'll go ahead and set it, Teoh Capacity zero. And then very quickly, just over just a few Kiki frames, go to opacity 100 and now see how that looks. So players from the beginning Yeah, perfect. Right. And that's all done in photo shopping all again. Just have to scrub this all the way over. So it stays for the rest of banner ad and let's see, Play that. And there we go. 6. Lesson 5 - Exporting Your Banner Ads: now, when it comes tend to export these ads. It's actually not very different from the way we previously exported ads in my other lesson , where we were working with static ads. But there is an extra step that we have to do, and that is that we have to create slices. So inferno sha in order to export a Jiff, and the banner ad has to be either its own file. So if you, for example, just created, we're just working with one size, you could work directly within photo shop and, uh, just export that single one as a gift. But art boards can't be exported as Jeffs in and of themselves, at least not with this set up, which is kind of a limitation. But there's a work around, which is we have to create slices. So if I go into show slices, you'll see here that I kind of sliced up the area, the live area for each of these abs, right? And I'll show you in a new document how we did that. So let's say Mr Create, this new generic ad would say I had things in my timeline. So what I would do is, I would go appear into its the crop tool. But if I hold it down and go into the other options here, there's this slice tool. And so what I'm gonna do is I'm simply just going to from the corner, have dragged across, and I have created a slice, right? And so now this is it's almost kind of It's exactly as the name implies. You're just create, like, cut it, creating a cut out within Photoshopped. Right? So to go back to this file, what I did is I essentially just dragged and dropped over each of these to create a slice, right? And so you can see all of the slices it within within all of this Zoom in. Right. You see, I slice into this and created this rectangle slice slice, etcetera did the exact same thing for all the different sizes. Okay. And don't mind any of these other lines that show up that's just a result of of your slice on the way that Photoshopped kind of dictates this is Ah, this is a technique used for web design. Um and so it's ah, again, it's not used for this purpose is for these purposes, but it gives us a real equal work around that we could export. These are bored just just so Now that I've gone through and created a slice for each of these, I'll go to file export save for Web legacy, Okay, and now we'll get a new dialogue that comes up and in here. If I zoom out, you can see well, you can see all of my slices right? And so basically, what it's done is now that slice lets me so, like turns each of these art boards into select selections on the actual canvas. That's so this is where you'll see your your slices. So what I'll do is all set. Make sure that this is such a Jeff colors. Um, you have an option of increasing colors, right? Um, the general rule of thumb is, is that the more colors you used up to a max of 2 56 the larger the file sizes. So depending on how complicated your design is, you should, you know, kind of top toy with this. If in this instance, since it's an image of real people, I kind of want the colors to to stay accurate. I don't want any kind of weird cancellations. I'm gonna go ahead and set the colors to 56. I don't really work. I don't really set anything with selective or, um, this dithering or anything like that. I generally just tend to leave those alone. And then, um I think so, yes. If I slip selecting toe one of them, you'll see what that means, right? So if I set this then to 128 it reduces the amount of color. So just this which and then reduces the resolution and the quality, the quality of your job. But it's a very complicated ad and there's a lot of animations. You don't want your Jeff to be too big, because then it's not gonna load as quickly on websites, and it'll be a bit slow. So, um, I'm since this one is not too complicated. Also, 2 to 56. I don't change anything else other than this looping option. So down here, you can set it to loop just once, meaning the timeline will play through once. And then it will stop and will stay at whatever instance you left the timeline act or you can have it looked forever, meaning that it will play thrill and then it will go back to the beginning and play through again. And it'll do that continuously forever. You can also do other and select a specific number of times isolates that you only wanted to play through three times. You can set that here. So for this one again, because it's not very complicated. Um, I think it be okay if I said it to forever. And now an important thing here is I wanted to say I want to select safe right? Done Will just close the dialog and won't do anything. You actually want to make sure you come in and you hit safe annuals. Choose a destination. So I'll dio I'm just going to save it to my desktop Great and said to Jeff And, um, so right here again you want to do slices? So, actually, you know, let me just go through. So the options that you have will be all slices, all user sizes or are selected slices right, and I'll show you what that means. So if I cancel out of this for a second, all slices means is gonna export everything. So it's gonna even these, like, blank areas again. Eso this area is gonna export this even though there's no content on here, it is going to export these and I'll just be a blank. Jeff, Thank you. And and again, this was the slices is a web development tool. So for things like that, you you do wanna export all of the different assets. But for us, we we don't want any of that. We just want the stuff that's that we created, right? So users slices are the actual live areas that we created, right? So anything right here with this, um, blue rectangle in the top corner is a user sliced, meaning That's an area that we actually sliced out, um, on our own. And it's not a result of extra movements. So, like these we didn't carve on our own. It's just how photo shop responded Teoh. Once we were drying out our slices and so so again, and I just it saved. You can also do just selected slices, though that was that. Their adoption. So if I select this one, you see how it comes into full color and the other ones are kind of great out. And if I hold down the command key, um, sorry. The shift key I can select. Maybe if I just wanted to export just these three, that would be the selected slices, right? So I'm just going to make sure they're all, um, great out. I'm gonna hit, save. And in here where I see, um, do slices, I'm going to do all user slices. So again, it's only gonna do the slices that we carved out on her own. So I'm gonna hit, save, and it's gonna run through and do its patience Enough. I go to my desktop, though, should be this new folder that shows up and right in here you'll see that I have all of my jobs and a loop through forever. All right, and size wise, it's 18 kilobytes, which isn't big at all, which is great. Um, and I can kind of go through and just make sure that they all look fine. Looks like they're all playing through great. And so from here, you ready to go? You just send this off to whoever you need, Teoh, and you're done. You created an animal display out with absolutely zero coding required. I know this is that this last kind of parts of it with slices and exporting can get a little bit. Ah, was a little bit tricky. So feel free to reach out and send me any messages. If you need for the clarity or something is not working for you. Just let me know and I can dive into a little bit deeper with you. Thank you.