How To Create A Custom Web Banner Using Canva | Greg Jeffries | Skillshare

How To Create A Custom Web Banner Using Canva

Greg Jeffries, Designer • Entrepreneur • Internet Marketer

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

      1:06
    • 2. Canva Banner Tutorial

      13:06

About This Class

In this short course I'll be showing you how to create a simple web banner design from a design that I like. I'll be walking you through step-by-step exactly how I replicated the banner I liked in just a few minutes using Canva, a free online design software, and how you can do the same.

Transcripts

1. Introduction: Henry Jeffreys here. And in this short course, I'm going to walk you through step by step and show you how to replicate a banner design a Web banners sign out there that you may want to copy or mimic. Oh, duplicate in a simple Web based design software called Can. But if you got a camera dot com, you can check it out for free and basically can't a large to do most of the most of the things that photo shop allows you to do that. 99% of people that use photo shop that aren't like you know doing designed for a living are using it for for basically making designs for banners And, um, you know, kindle covers and things like that so you can do all these different types of designs and actually has a template it out. You just like the template you want going there create, you know, has a Leeds, different elements and text background. You can upload your own custom designs as well took great custom designed. So in the short course, I'm going to be showing you how to duplicate this better design here and how how I went about creating it and just a couple of minutes in can vote for free. So look forward to seeing you in the next lecture. 2. Canva Banner Tutorial: right in this video, I'm gonna show you how to recreate a banner ad to make it your own. So if you find a come across a banner ad that you like and you want to recreate it, you like the colors you like their style of the fun. You like some of the imagery and you want to recreate it for yourself. I'm gonna show you how to do that with a free and simple Web based design tool called Canda . So this is the image that I'm going going to duplicate here and kind of mimic. And this is the finish product here. This is the image that I've chosen to duplicate, and this is kind of what I came up with. So it's like 99% the same image here. I'm going to show you How did that within campus so can use a free tool. You could go to camera dot com and check it outside for free accounts can Like Photoshopped , it does have some paid options on, uh, things that you can pay for with, like, text and different elements. But 99% of it is free. So for most of your design purposes. You can do everything you want with that. You know, 99% of people that use photo shot for you can do it with camera for free. So going to show you how I created this? So first, I think you can come up to create a design. But I already have this open. That should open up this tab here. This screen here. So I scrolled down here too Away the bottom two ads. And it's basically it comes with all these templates. So it already knows, You know, the most popular dimensions of different different types of images. So these air web images. So I just came down here under 300 pixels by 250. I think this is actually 3 20 by 200. It's kind of a weird, weird size, but it looks like about 300 by 2 50 I think they just get the image dimensions wrong. So I click that and then here is your canvas here. And so what I did first was I just created some rectangles to create these background shapes here. So I came on here under elements. All the different little elements are under the Elements tab here. And so I came here under sheet and clicked for the square and just started. You can have your zoom in, Zoom out over here, says, zoomed out a little bit and just started dragging a rectangle over here. And then I have a free toolbar plug in for chrome called Color Zilla that allows me to capture a particular color on the screen. So if I want to know what with Color Blue, this is or this orange color here, I could just come appear to color zilla and click it click pick color from Page, and they schooled over here clicked on that color, copied to the clipboard, then a Kim over here and clicked, uh, color zilla color picker and then just copied that. And then I came over here, Teoh. But I'm selected the rectangle click down here and document colors. These air some default colors. If you click on the plus side, it will bring up this little box where you can enter in a copy and paste that custom color there and just copy that in there and boom, we've got that color. So I'm going to do the same thing for this bottom rectangle. Here, we can either create a new box or come appear to copy and copy that box and just drag this down here below. I'm just gonna copy that, and then I'm going to come over here. The screen again. Copy this orange color. It's color. Pick color from page. Copy that color. Come back over here. Copy that cover that we just selected. Change the color click. Add and equip the plus sign again. Pace that color then. And boom. I got the bottom color of the design. Next will add these circle shapes in here with the images. So I'm just going to add the several shapes. They've got a couple different options here. If you really want this, if you really want this border around here, but you can do is create. You can just add to, um, two different circles and have one of them be white and the other one could be a different color if you want to do that. But just for the sake of this demonstration to speed things up, I'm going to go with this circle. That kind of looks the same, but it's only one color, so I'm just going to adjust that down and make that white and then to copy that, I'm just going to copy that twice. And then if we click around, it's got some it snaps into place when it finds the center. So that would be the centre circle. And then to make this all even, you know, get this on the same, get these triples on the same line, I'll snap them together. And then if it click on the image and we I wanna Max, if used the arrow keys will go over just a tiny bit. Or if you use shift and the arrows don't go over just a little bit more. So I'm just going to use shift and the arrow keys and we'll put those there and then I'm going to create this, uh, the button down here that says down load here. Now, I don't really know how to create a ingredient, but, you know, it seems to be the design trend these days for everything. Everything is kind of going back to solve it. Code designs with iPhone, APS and even banner designs us up, so I'm going to leave that out. There is a way to do that, I'm sure. And if off all else fails, you concretely upload your own image into a canvas and drag that as a background to use background, radiant to use. But for this button, since it has rounded edges, I'm going to go with this square image that has rounded edges instead of the straight square here. Gonna just this down and may justice down a little bit more, and that's gonna be our button. And then same thing with the color. We're just gonna compared to the color picker. Click that yellow come back over here. Um, not really the yellow I want. So let's try that again. Oh, I see. And copy that. And if it's not things that color, we could just use yellow. I think it's It's when I'm hovering over there. It's It's getting that hovered over yellow, so we'll just go with the default yellow for this. It's pretty pretty similar. And then let's create that circle Aero there for that. We just need to circle drag that over here, make it white, And then I think it was actually read. Yep, bread. And then, um, there are a couple of arrows that I found. If you type in arrow, there are a couple that are in there. If you don't find one that you like, you know you can choose like this one. Turn it around. And you know this isn't this is just the tip of an arrow, but to kind of make that error that we see, we can start with that and then come back here to shapes and select the square, the stem of the the arrow. But that in here kind of get it all lined. And then we'll make that white and zoom in a little bit so we could get it all lined up on Make this guy white that all lined. And we could select both the days by selecting selecting one clicking shift, selecting the other one. And then we could just use the arrow keys to move it down just slightly. Can I assume out? And that's our arrow. And then for the download here, come over here to text. I just select you select one of these headings will change the five, and I'm gonna click, uh, download here and then we'll find a farm for this. I'm just going to go with this. L Ron Aileron heavy. Make it bold. See how that looks. And then for the the final size, we're just gonna take this down a little bit, maybe 14. Just this, then that's our download here. Got it aligned vertically. And then for the text of the, uh up at the top, I just typed at M. Then they're going to use the same fought it only come, Campbell. It comes with a handful of fonts. So you have to find something. It's close to What you're looking for is possible. So it's gonna type that end legally. Still, this I've got it on, uh, caps lock, Uh, in case you're wondering, so I make this a little bit a little bit bigger, and I get white ad. Just copy this. Billy nears top and then copy it again. Sales funnels, exclamation. They're aligned this on that. We can align this one, make a little bit bigger and then changed the color of it. Come up here. Copy the color, then had it to the document. Colors pasted in their boom. We got that color change the color of this one boom. And then we can maybe make this one a little bit bigger. And, uh, that's basically the same image. The only thing we left out is the actual icons, but you can just swipe those copying paces, drag and drop those into a like a paint program, which are free imaging program, which should be available on Mac and PC. If you want that exact image or if you want to create, you have your own custom image in there. But 99% of that really took create exactly in Canberra. You got the same colors, you know, and you could just save this for later. You can say this, and when you come back to your your when you log into dashboard camera, it'll have your safe designs. And then just to export this what you're happy with it. You can click, download and downloaded as either a G pig or P and G. So so that's how to quickly and easily make your own banners. Designs within Campbell with just a couple of minutes. If you come across a banner design web, better designed that you want to use for your own, use his own purposes than that's how quick and easy it is. Teoh do so it only took me a couple of minutes to do that. So if you have banners that you're creating for yourself for others, I quickly and easily do that for yourself or for others. If you want to offer this is a service and can vote makes it a lot simpler. And it's, you know, post as opposed to photo shop. It's completely free so highly encourage you to check out Can va site for a free account so you can get started designing stuff for your Web based projects today?