LOGOS MASTERCLASSS

"Okay, so now you're ready for a bit of a logo's masterclass just to finish this session. Well, here I am on this website called March Dance, which is a website that I'm working on. If you see that I Scroll here, you can see that the logo changes. Now you can see here it's a festival in March, which goes from the first to the 31st. So we've designed this logo really to show the first to the 31st, and the logo perfectly animates there in a really, really nice way. But if I just Scroll down here, you can see that there's a few cool things going on here. Here's an animation that we've built in CSS and Java Scripts showing each artist moving through in the similar kind of logo triangle accents. So I might show this episode later in the Watch and Learn series, so make sure you subscribe to our YouTube channel for that.

Watch this. So we've looked at our logo there and we've looked at our on [inaudible 00:15:57] logo there, but if I come down here, we've got these client logos. Now look at these, these are all PNGs, right? There's no background. If that had a white background, that wouldn't look quite so good. But I've also put these accents within the pink here. So how have I done that? Well, let me show you now how we make these client logos so they're all nicely aligned as you can see here. They all just seem to work together. So if we jump back into my Figma file, you can see here's a logo that's been [inaudible 00:16:31]. It's just a JPEG with a white background. So I need to remove that background and then make these the Colours. I'll make this pink, and this will be the white accent. You can see the other logos that we made earlier.

Okay, well here's our frame. So this is just called frame one at this stage, and it's 800 by 600. I like my logos 400 by 300, four by three just seems to work. So if you are thinking about logos, you could have them in a square, but you'll find you get all this white space in here. So I like a four by three shape for my logos, typically. Anyway, I find when you look at all different types of logos, a four by three will generally work. So that's the first bit of advice. So we know about Retina displays now, don't we? So instead of 400 by 300, I've made mine 800 by 600. Okay. So in this 800 by 600, you can see at this time got a 64px padding. And this is going to be the guide area of where I'm going to drop the logo.

Sometimes the logo might be this shape and fall within these lines. Sometimes it might be wide. It will always be contained inside these lines. I don't want anything over-spilling outside of these lines. So as you know now, I'm just going to click on this, make sure it's locked, and I'm going to go over and click scale. And then I can just manually, okay, move this down. Now I know that this is 800 less 64px, so I could just instantly type in a size like 600 and something in here if I want to. But yeah, I don't really need to do that if I've got the scale on because I can really just move it to my particular size.

Now at this point, it is hard to see, because I've got an image with a white background here, my frame's also got a white background. I could go to the frame and at this point just get rid of this, [inaudible 00:18:40]. Now at this point, I could turn this into a different Colour. So I'll just put this as a kind of gray for now, and then we can see our logo in here that we're sizing. So I can just touch this up and make sure that it falls within that line and maybe change the sizing accordingly. We need to remove this white in the image. So how are we going to do that? Well, if I [inaudible 00:19:16] click on here. Notice that I've got some plugins in Figma, and this is a particularly reliable plugin called Remove BG.

And I can just hit run. And that is going to remove the background. So I'm just going to hit that and watch this. It removes the background. Now question that you're asking is, where do I get the Remove BG? So I've just thought that the easiest thing to do here is just show you the URL. So it's just Remove BG. That's a very simple, and then once you've installed it, you might need to restart Figma. But if I jump back to Figma now, I've now got an image without a background. Well, let's explore this further. Now, what do I need to do to Colour these in? Remember, I want to Colour this one in pink and this bit in white. So the first thing I'm going to do is press R to open up a rectangle. And I could Colour the whole thing. I could put a rectangle over the whole image here.

I'm just going to Colour this in pink so we can see that rectangle. So now I've got a rectangle on top of an image. You can see this here, rectangle image. I could name this at this point, like pink rectangle, but I'm just going to highlight both. And then I'm going to hit this. This is what we call a mask. So you can see now that's turned the whole of that image into a pink Colour. Well, I could hit R again now and highlight over the word proper. And now I could go and make this our white, and it's as simple as that. So now I could call this frame proper motion, which we can see here. Now, on this one, I probably would want to remove this background Colour, which as you know, I could simply go down on the opacity, but making sure I've got the whole thing highlighted.

Go to exports. We want to export it as a PNG. You can see when we do that show in exports, checkbox appears. Well, I can uncheck that 'cause we don't want that background fill in our export. So at which point, I click export proper motion. Okay, now we talked about a logo on Scroll. What if I wanted to make this to be that logo on Scroll? What if I wanted this bit ON Scroll to go white and this bit on Scroll to go pink? Well, I could just copy and paste and that's going to give us this alternative. Well, I could go in here to our rectangle and make this one white, and then I could go onto this one and make this one pink. Okay? Now, [inaudible 00:22:11] I would come back up here and I would call this one on Scroll. And now I can go and export this one as a PNG too.

And now I would go back into the logos area and that's where I would upload the first one as the logo and the second one as the logo on Scroll. And that will give us that nice effect that we can see on Alio, and we can also see on the March Dance website as such. So that's how we manage our logos, our logos on Scroll, but also applying logos."