The Best and Easiest Way To Create HTML5 Display Ads | Jaz Infante | Skillshare

The Best and Easiest Way To Create HTML5 Display Ads

Jaz Infante, Designer // AIGA Board Member

The Best and Easiest Way To Create HTML5 Display Ads

Jaz Infante, Designer // AIGA Board Member

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

    • 2. Getting Started In Bannersnack

    • 3. Adding Backgrounds And Images

    • 4. Adding Text And Buttons

    • 5. Exporting The HTML5 Banner

  • --
  • 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.





About This Class


Digital display advertising is an ever-growing and increasingly popular form of advertising, so it's an important skill to have as a designer. The best performing display ads are HTML5 ads, which render the best quality ads. However, until recently it was difficult and cumbersome for non-developers to create HTML5 ads. Thankfully there are now a host of drag-and-drop platforms available to designers - the best being a platform called Bannersnack. In this series, I'll introduce you to Bannersnack and show you how easy it is to make amazing display ads that you can then export as HTML5 ads with the click of a button.

Check Out Bannersnack Here

Meet Your Teacher

Teacher Profile Image

Jaz Infante

Designer // AIGA Board Member


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!
  • Yes
  • Somewhat
  • Not really
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.



1. Introduction: hello and welcome to my course the best and easiest way to design display ads using HTML five. This is a follow up course where I discussed this topic and how to build display ads using photo shop and add animation using photo shop. And the crux of that course was that you use the timeline in photo shop, too. Add animations are you add animations using key frames and then you export it as a gift problem with that, though well, it is a solution. It's not the best solution, Um, in terms of, you know, this ever growing field of display marketing and digital marketing. Actually, the best way to do this is using HTML five ads because they render better, um, the effects air smoother and the your final output gets to be a little bit more complex and isn't limited in band with the with the same way that photo shop is. So I wanted to talk about how I do it and, um, kind of, you know, deep dive into into my own process. So I'm here on this website called Banner Snack and Banner Snack is the tool that I use. It's the tool that I have found to be the best and easiest way to do this. I've tried other platforms. A ton of them exist, but banner snack really is. It was the easiest to adopt and then get running with, um And so if you scroll down to the this is their landing page. If I scroll down, you'll see that, um one of the major perks of this is that it works with all the major ad networks. Um, and it has so many different export formats that, you know, once you designed them. You have so many different options for how you can export these. And it truly is, Um, just so much more in depth then than any other platform that I've tried out there. So I'm gonna go over here to my workspace. I'm gonna show you this display ad, and if I just quickly play it for you, this is something that was done in about, um, you know, 15 minutes, Max. Once you get all the assets together, it's it's very, very easy to get. Yeah, add the animations and get it up and running. So, um, we're going to talk about how ah, how to build something like this. And then, most importantly, then how do you export it and get it to Who needs to get it? Get it up and running on the Internet. So without dragging on too much, far too much longer, let's dive in and talk about building display ads using banner snack. 2. Getting Started In Bannersnack: right. So once you get up and running in banner snack, um, you will have access to what's called your workspace or might work space in this case. And, um, thankfully, price banner snack gives you the option to have a free child's that you contest out the software before you actually purchase it. And then once you do decide to move forward with it, there are a bunch of different pricing options for if you want to pay up front, if you want a monthly to fit different budgets and different needs. So, um, once you get all of that set up now you have a workspace, and you would go up to here to create new banner. Once you hit, create new and you'll have the option to create a single banner or create a banner set. Now, better set is incredible, Um, because you get to build an entire cohesive, um, network of display ads in a much simpler and more streamlined fashion. But for this tutorial, we're just gonna focus on building one before we get into the complex cities of building us set. So I would hit right here, make a single single banner, make a banner. And now I have these options here for the different sizes. Right? And the cool thing about it is that it kind of gives you what what size is they work for? Right? So this is a YouTube channel cover. This is a Facebook post. Um, so these air display ads Cesaire social media ones you can even now designed for print. I haven't explored this feature. I think I would I wouldn't go there with with that just yet, but, ah, so we're gonna make a display, and I'm just gonna use this large rectangle just to start off with. So I'm gonna select large rectangle. And now, by total this I basically I have my campus and my chemise is set to the size that I just selected. And I have a timeline down here. And so from here, this is pretty much the exact same thing. That's where I discussed in my photo shop class. Um, where's just timeline and you set key frames and animations. The cool thing about banner snack is that it has built in animations already, and so are transitions and things like that. So once you start adding elements, it's as simple as pushing a button. Teoh. You know, add animations to it, so I'll show you exactly what I'm talking about. I'm just gonna slept over here. Add text and I already have built in options. Um, you know, when you get better snack at least that the version of the pricing point that I signed up for give me access to a couple of different presets already. Eso If I would have slept any one of these, they would automatically be added to my campus, as you see here. But you can also just have your own text. So I would just do a headline text here, and then I have the option to move it around. Yeah, and you can see when I added it. It automatically creates a timeline for me, and it's by default. It's usually set to six seconds so I can go in here and change my tux to whatever I want. So this will be that's a copy and using now, this editor here I have options for changing the properties of this text so I can change the font and better. Stack is already pre loaded with, um, different web funds where you can upload your own funds as well. So I'm gonna go into Web funds and just pick pick one, and I can change the weight of it. I can change the size of it. The orientation if it's underlined the line height, that letter spacing truly have so many different options here. I can change the color of it, right? No, I has some color priest that's already been in built in and have a slider. I'm so I could just sort that or I could even just do. Ah, heads could if I know exactly what color I'm looking for. Um, I can add a drop shadow to it as well. All right, We're not going to get into these just yet, So let's say I upset my copy. And I know exactly what I'm trying to dio um, Now from here, I could go into my timeline. And the timeline for this asset is it gives you three options. You have a building, you have a middle effect, and you have a build out effect. And so show you what that does. If I quick into this building right here, you can see that there's this cover state with it. So if I click on that now I get get this new menu that lets me add different builds in for it. So if I select fade, for example, you can see how that the copy fades in. If I do a software do that. And so now I just have an entire library of different ways that this copy can build in. And so the number of features that you have depends on what, uh, what program you buy with banners snack. We have, like, a basic one. Um, for a more advanced one that gives you access to even more building effects. Can you do something like this? So I liked this. Ah, glide in. We'll just leave that there. Now, I have the options at a middle animation where I can have this bounce or move right se. And so this is what's gonna happen after it builds in, right? It could be just in added emphasis, and the last one would be a build out if I want this to, then build out and maybe make room for something else to come in. So let's see. I'm gonna have it slightly. Okay? So now I have said different building effects. And if I play this, I play the slide. You see that it comes in Wicker's and then it's gonna build out. And I can change the duration of this right by sliding the length, Let's say, wanted to glide in over 1.7 seconds instead. And I want this heartbeat happen over here instead. And to go for a bit longer. Yeah, right now I can preview it again. So it slides in. No, it's just that and then it slides out. I could even change the duration of this, citing my timeline. So they say, I want this to happen over seven seconds. I want this to be longer. There we go. And so hopefully you know, Now you can start to see how this will start building in and adding on each other. So in this next video, now, having understanding some of the basics, we're gonna talk about adding in assets like images and backgrounds and things like that and the best workflow for creating things in Bandersnatch 3. Adding Backgrounds And Images: So starting with a brand new blank canvas right that we've just created, I'm gonna go ahead. And the first thing I'm gonna do is create a shape players. That's right. Here. I'm gonna add a shape. And this is just a basic rectangle. I have different options here. Um, but I'm just gonna do a basic rectangle. And so now this element has appeared on my canvas, and I'm going to just skillets. The size that I wanted to be is about right there, and I'm gonna change the color. What I had in my example was a radiant. All right, so I'm here in color ingredients, and I'm gonna set it to and see for this one. I had it as Okay, great. Now just hit select. And for this color, I had it as now just hit select begin. There we go. Now that is my radiant. That's my basic down element. And as far as an animation, I had it set to anyone into very Oh, yeah. So I had a building. We go. So if I preview that, that's exactly what I wanted it to do. Yes, And I helped my shape the very next thing I want to add in is the actual image of the Google home. So I would go in here into add image and you have options for stock photos right there. Some, um, images already pulled up these air mainly unspool ash images, pics of a images you can see here some of the sources that they use, but you also have the options. Upload your own images. So if I would go here into my images, you can upload an image and it'll open your desktop and you'll have access to whatever assets you want. But I already went ahead and uploaded it in here. So it's in my in my photo library now. So select that. And now it's been added to my canvas. And so for this one, I think I had it set to slide, and I'm not going to change any color settings or anything like that. But I do want to change the transition. So how did this for a second? I had it slide rates. Here we go, you a little bit longer, and I think I had it not come in until after this flips up, and I only wanted it to come into about half way just off the chemist. So if I play that perfect, see how smooth and seamless that is. If I wanted to preview without everything else, there we go. So it's already starting to look really good, and that's taking all of, you know, two minutes once again, once you have all the assets already set up. So then in the next course, we're gonna talk about adding text and logos and the buttons as well. 4. Adding Text And Buttons: So now we're gonna start Eddie in the text on the logo and the button to this. So I would go in here first. I'm gonna add the logo. We're gonna add an image going to go to my images, and I would upload it here. But since I already did this, it's in my library already and you'll see that it has this tag here that says it's an SPG. And the reason they did that is because I'll show you why I did that. So I'm gonna click on it, and now it's gonna show up on my canvas. I come over here. If I just uploaded this as a PNG, I would be stuck with what I uploaded it as I can't change any elements of it. But an SPG gives me the option to then at it here directly and banner snack. So I go into color and you can see that I have the two colors that it uses already in here . So go ahead and go with this orange and I'll change it to the color that I wanted it to be . And this black I wanted it to be white. There we go, This was something that I could not do if I had just uploaded it as a static image, like a P and G or A J Peg. So skillet to what I want. And besides that I want. And just like we did before, um, I have it here on my timeline. I'll add in animation that I want. I think with this when I just want with basic and then had it and draw out and not come in until much later. Now another key workflow saying A set. As you can see once you start adding in elements, it just names them what the element is. So it's a it's best practice to actually rename these, and you just do that by double clicking into them. So now, instead of shape one, I'll just call this background image. One is the actual Google home. This call the Loco. It's always best practice to name your layers. Okay, I see where we left off looks good, and I'm going to then go over here and add in the text, and the first thing is going to be a headline. Text rates that's been added in here and using this panel, then, is where I would edit this. So going to tech my tech face was Poppins and I went with semi bold. The size was, but it down to about 20 about right. So left justified color was Wait, me. It's Nike and also just changed. Walk. So I want to wrap up here, and by clicking into that layer, I can go ahead and change the text itself. I said meet the all new Google home. No, I position it What I want change the alignment of this logo. Good. And, uh, now my text in here, I'll go ahead and add my animation to it. I want it to slide. Right. And I want to not come in until after after everything else comes in. Just afterward, I wanted to slide. Right. Great. So that would improve. Eunice. Great looking. Really good. Soon I had a subhead binds. I would go back and do the exact same thing. I was text. Um, I you have the option here of subheading text, body text. It's not a huge difference between the two honesty at you pick any of these and once you conform at it anyway, it really doesn't matter. What if you choose headline text, subheading, texture, body text. But I had here body text also lined, right? Also Poppins. We went with medium from this one. Hello. Was Wait. Okay. I think I said your smart. Then we'll change the width of this text box that it wraps on one line and same thing. I want this to come in after, and I want to slightly. Okay, that's good. So, again, I'll give you this, right? What's awesome? So, in the last element that I'm missing is a button, which is an option right in here. So I hear the ad bine. And now, when they click into this, you see that I have a bunch of different preset options. Um, And again, you can use thes as a starting point. But you also then have the option to edit any of them once you actually get into, um, get onto your campus. So let's say I went with this. Learn more right here. Close that out. You know, son, today it right in here. Down. I think this Go ahead and change the c t. A. I had it by now. I have the same text options before where I can change the typeface of it, that medium and then building for this and I can have it come in afterwards. You go ahead and add a effect to this. You will have its skill down and I could change. The color of this is well and the border of it now border is where you can control the actual rounded nous of the corner. So this is a 50 so it's pretty round. But if I went all the way down and make it squares, This is why I said it doesn't really matter what you choose in the presets. That's if you if you like a specific preset, you can go ahead and and use that. But then you do have the option to change it around afterwards. So I want us to be no rounded corners. I do want to have a border psycho light three border, and it wanted it toe Have no Phil. That would choose none. Yeah, my text now has to be also, like, very color my border baker. There we go. And I could even change the size of the but in itself, something like this. So Now I have all of my assets on here, and I can go ahead and play it. Great. It's looking really good. So now I'm going to finesse this just a little bit. And in my legs Next lesson. We'll talk about exporting this this and getting it, um, actually ready for production and exporting. 5. Exporting The HTML5 Banner: So here we are. This is the final add that I, uh, not tweaked and adjusted Teoh my exact liking. And so now it's set and ready. I'll preview it one more time just to make sure that everything is in the exact order that I want and it looks awesome. And so, um, I'll hit save just to make sure that saved. And here you can name it as whatever you want a little head and save it, Um, and this you can do at any stage of your workflow you can, you know, leave it and come back and, you know, be able to go back into any. It's this is your actual workspace where you have all of your display ads, you can go in and edit it. So leave it off at any stage and then come right back to it. So go back to that workflow or my workspace and in here, so here that once it's in my workspace, I have the option to view it, which would just preview it. I can download it. Um, then you have other options here at it in bed duplicated. So let's say you wanted to We use that as a starting point for a new display at you can go ahead and do that duplicated cetera, but I'm gonna go ahead and downloaded. And now, once I hit download, I have different options. I can download it just as aesthetic jpeg, PNG. I could download it as a Jeff or a Pdf. This is for if you're designing print, not something I recommend. But you do have that option. Here's the interesting part. You can download it as a HTML five. You have other options to download it as a, um, MP four. And this is an animated Jeff. So if you choose this Jeff, it exports as, ah flat Jeff with no animations. You choose this one with the play button, and it'll download it as a animated Jeff. And you you have that option. But we're gonna choose HTML five because that's the one that we're really after. So html five and now you have this option to do a standard HTML five, which is shows you here. It's Google ads compatible, and it's an entire HTML five package. Or you could do a custom ad network, depending on if your client uses something specific. So let's say for ours, we just want standard HTML so quick that one. And now it's just downloading. And there we go. It's downloaded a zip file. So go ahead and go into showing finder. Unzip it and you can see here I have an index file. I have all my image assets, right, My logo on my image. I have the embedded Java script. If I just double quick into this HTML, you'll see that it previews it for me. And that's exactly what? How it's going to show up? Uh, obviously not gonna be this exact size. Um, you know, she should be a little bit smaller. This is just scaled for the for the window. But we've been we'll go back to my download. So this zip file is what I would actually send off on. Um uh, you sent to whoever needs to get it, and I could go and double quick into it, and we name it depending on the campaign that it needs to be in. And it's truly that simple to toe work with this, Um, one final kind of no. On this is if they want the normally, you would just build this and send it off in the person in charge of uploading it to their ad network would be the one toe link link. It's where needs to go. But if they, for whatever reason, ask you to embed a link into it, let's say they want this buy now. Button to go to a specific place. You would go into, um, action and say on Click. I wanted to go to your girl and you could put in your custom your oil here and that will be actually embedded in the HTML file itself. But look again. Usually the person in charge of the ad network does this on their own, because really anywhere on this ad should be clickable Teoh and go to that exact your L. But again, that is an option. If you want different parts of it toe link to different areas. Let's say you had multiple scenes, different buttons, so you want a one button to go one place and another button to go somewhere else. You have the option, then, by going in here and adding an action to it. And that's truly how simple and easy banner snack makes it to create an export HTML five display ads hope this lesson was valuable to you as always. Let me know if you have any questions and I'm looking forward to seeing what you all can create, have a good one thinks