RESIZE YOUR LOGOS

"Okay, so now I'm going to show you how I make my logos, fave icons and Apple Touch icons and the exact sizes that I use. So even if you are not a designer, you can at least give those dimensions to your graphic designer or branding agency so that they can provide you your logo and you could simply upload them. It is good to know what we're doing here. This is only going to take a couple of minutes. So here I am in a program called Figma.

In earlier episodes, you've seen me look at these brand guidelines. This is in a platform called Figma. So if the UI is looking like this, it's not mobile CMS, this is Figma. Figma recently got bought by Adobe for about 20 billion I think, and Adobe's the company that makes Photoshop. So that just shows how good this tool is.

I like it, number one, because it allows us to collaborate. So different staff members can log in at the same time and we can also invite clients to log in and help us design bits and pieces. But it also works in the browser, and that means that even if someone's on a Mac or a PC, they can still use this tool without having to download anything. And there is a free version, at least at the time of this video on figma.com. So it's quite accessible to everybody for that reason. So in here I'm going to zoom into our logo, and you can see here I've set up some guides. So one of the first thing that I'll do here, if I just jump into the logos, you can see here's effectively my logo on the left. So if I just move this out, this is the image of my particular logo, but if I uploaded that this isn't going to have the padding in it, is it? This is kind of a weird size.

So if I was going to make this so I could upload it to the header area, so it's got some padding that I want to customize, then what I'll do is actually make a logo. So to do that, I'm going to press F, which means it's going to open up a frame. So in this particular frame, I'm going to make mine 400 by... Sorry, 420 by 200 high. The first thing people say is, "Why are you doing 200 pixels high when if we jump over into the website, I can tell you that the header is a 100 pixels high?" Well, earlier in the episode I talked about Retina screens, which are double the pixels. So when we're designing, we often like to design for double the pixels now to accommodate these new Apple screens. Otherwise, you might look at an image and it could be blurry. Okay?

So we'll see how that goes, but I like to future-proof my images and designs for that reason. So back over in Figma now, just to summarize, I've got a frame set up here, which is 420 pixels wide and 200 pixels high, and I've got this wrap around, which is 32px. So now I can take my image and I can position it to where I want it to go. Okay, so here's my image, but I might actually lock the proportions here and I might actually click scale on here. Now what that's allowing me to do is to scale this image up and hold the proportions. So I could actually make this image to the size I want to have it. So you could play around with this so that you can get it exactly how you like it. For me, I've already decided that I want this 32px pixel, which is 16.

So I position it exactly halfway. So you see the guideline there. So that's how I like mine in this instance. And then I've got 300 pixels here and 420 pixels there. That's 120, because of retina that's actually 60 pixels. So that's why I like that 60 pixel buffer so that our navigation can start on this side. So the width is going to be up to you, whatever you want to choose your width, whether it's 420 or whatever you want to make it. So I could change the name here to logo if I could spell. And then within here, I can now go and choose to export this. So if I go down to the bottom and click export, notice I'm choosing a PNG for the reasons we spoke about at the start of the video. This is going to allow us to have a transparent background.

Well, look at this. This isn't a transparent background yet, so I just note that there's this spot in here, show in exports. Well, if this is off, our background fill is not going to export. So that will export as a transparent PNG. Pretty useful if you want to see the background. But the other thing is here you can just take out the opacity and as long as you make sure you click in frame, if I've just got this, it's going to export this section. But if I click the actual frame itself, it's going to export the dimensions that we've just set up. And then you're going to have that perfectly aligned logo.

While we're here, we'll quickly show fave icons. As I said at the top there, I like to make my fave icons 100 by 100. It's totally fine if you've been provided a fave icon that's 32px by 32px, just take that and upload it and it will be absolutely fine. As I said, the reason why mine are 100 by 100 is because of Retina displays. But also I find that clients like to use their fave icons for other things around the website, and sometimes 32px is a little bit small. So I also like to save a bit of time there because I know at some point they're going to want to use that logo for something else, that icon for something else.

Now, similarly with the Apple touch, in this case, I would make my Apple Touch logo a bit bigger. 300 is a good size. So in this case, I would make mine 600. And so what I can do here is lock the proportions, go over to scale, and then actually make that, move it up to 600. Now, you could do it, drag here or you could simply type in 600 and that's going to make that perfect Apple Touch icon for you. Not like that, but like this. So in this case, I would rename this frame in here, Apple Touch icon. I would go over hit export, and we now have fave icons and our Apple Touch icon."