How to apply some color. But we’re also going to look at some of the principles behind good logo design, but before we get started, let’s think about our client, so we’ve been asked to make a logo for a company called super splash. They run a swimming and water games activity center.
They are distinctly family friendly, so their target audience is parents of children aged between sub 2 and 16, and they do things like swimming lessons. Swimming parties for kids, they’ve got slides and all of that kind of stuff that kids love, obviously because they’re they’re attracting children. That’s part of the target audience, but ultimately it’s the parents who are going to drive the children there who are going to pay for the children to be there.
So all of their products needs to appeal both cleverly to the children so that they nag their parents into going, but also to parents that they are sufficiently informed and they also want to attend super splash. So, like I say they want a new logo they’re going through a rebrand at the moment, they’re going to be developing a new website as well, and some some advertising for their company. So we’re going to start off today with the logo and we’re going to be making a logo that looks a bit like this, so you can see, we’ve got quite a distinctive design.
There we’ve got some curved text and we’ve got a playful little splash in place of an exclamation mark. Before we go on to actually making it, then I just want to talk about some principles of logo design, a few things that you really need to keep in mind as you’re making logos. The first thing is to keep your logo very distinctive and recognizable instantly. That super splash is using quite definite colors and fonts, it’s not too cluttered, and that would easily stand out in various contexts.
That’s this! It’s quite strong! It’s quite bold! It’s relevant your logo design must be relevant if you’re going to use, shape or incorporate any any imagery into your logo. It’s got to be relevant to the product, so here we’ve got a nice kind of rounded sort of childish font because our target audience includes kids and we’ve got that playful water splash in the exclamation mark, which tells you straight away again.
It reinforces that sense of water and, of course, we’ve used blue, because that is the water colour, speaking of which then we want to have limited but appropriate on brand colour. When you are creating logos, you don’t want to use lots and lots of colors and there’s there’s a few reasons. One. It means that putting that logo against a background becomes increasingly more difficult because your logo needs to stand out from the background it needs.
To contrast the background, so if you have lots of colors like a different colour for every letter, then you might find that some letters disappear a sort of almost camouflage in the background, also when it comes to producing any products or merchandise, it’s actually very expensive. To use lots of different colors and if you’re going to put this on a t-shirt or on a mug or on a giant poster, then you want to keep your limits.
Your colors limited to probably no more than two or three. You also want to ensure that it’s not dependent on colour, so if, for any reason we had to present this as black on white or white on black, it would still look good. It would still have distinctive shape, so it doesn’t depend on the colour, but the color certainly brings attention and energy to the logo, and the final thing you need to realize, when you’re making logos is that we must make our logos vector-based now very very briefly.
There are two different ways of storing images on computers. One way is called bitmaps where every single pixel of an image is what makes up the actual image overall, so they’re like tiny little squares that make up the image and as you zoom them up and they get bigger and bigger and bigger, you start losing. You start seeing the pixels, as you start, stretching them, making them bigger, but contrast vector, based images are stored as coordinate values that actually tell the computer or software.
That’s opening the file, how to draw it in real time on the display. The advantage of that is that you can create your logo to any size. It’s infinitely scalable. You can make it as big as it needs to be to fit on the side of a building or as small as it needs to be, to go on a postage stamp and the computer will draw using relative, coordinates the logo in a pure and exact way. Other things that you get other advantages you get over vectors, it tends to be that they’re on a transparent background, so that you can place them on anywhere any other design and they’ll stand out.
There look good, but principally it’s to do with that ability to make your logo so much more versatile. You can, you can stretch it, make it nice and big without it losing quality. Also, people like t-shirt, printing companies, mug printing companies, pens things like that. They like vector based artwork because again they can layer that into their machining and they can create physical versions of your logo to a much higher quality.
So it’s very important. We make a vector-based logo. Okay, that is the clients background. This is the logo we’re going to be making and we’ve gone through some of the key principles of logo design. I think we’re ready to begin okay, so here we are in a serif draw plus we’ve got in a document open yet, and it asks us what we would like to do so we’re going to want to start a new drawing. We get several different templates.
We can choose from, but for now I think it’s easiest, we’ll just choose a4 portrait. It really won’t actually matter at this stage. Okay, so here’s our page and we are ready to start designing our logo. Now our logo is very text-based, so we want to start off by putting some text on to our page. So if I click over here I’ll hover over here, you see it says the artistic text tool so we’re going to click on that and click and drag so we get it quite a decent size and for my logo, I’m going to be using super and splash As two different words so that I can present them differently on the page, so that’s super now straight off, you can probably agree it’s not the most inspiring or suitable family-friendly font.
So if we just select the text go up to our fonts menu and have a look for a more suitable alternative and there are lots of different fonts we could choose from. And if you just hover the mouse over you’ll get a preview of what it looks. Like in each of the fonts, the one I quite like for this logo is called V AG, rounded bTW, so I click on that and there’s my first bit of text and I will do the same on another one.
Super flash and again I’m going to I’m going to select and change the font now that I’ve used V AG rounded it’s actually in my recent fonts list right at the top, so I can click it and get it nice and quickly, okay! So here I am, I’ve got two pieces of text. If I want to move anything on my page, then I need to make sure I’ve got this little pointer tool selected and then I can just click and drag and move things around.
I can also resize any text by grabbing from the corners and, if I hold shift as I grab it’ll, keep everything. No sorry if I don’t hold shift haha. If I don’t hold shift, it keeps it in proportion. If I do hold shift, then I can start stretching in either dimension, but actually I’d like to keep things in proportion. So we’ve got a super. I might make splashes bit smaller, okay, so we’re starting off.
Okay, now I’d like to add some color to these, so I’m going to select them both I’ll click on the first one hold down shift and click on the second one, and you see that my bounding box has now gone round. Both that means both are selected and from the color wheel. I can click inside this triangle which affects my sort of how light will dark have saturated. My color is, and then I can rotate the wheel by dragging on the outside, and I can choose different color swinging in a nice orange color like this okay good.
Now, I’d like to put some sort of nice curvature in, I think it’d just be a bit more exciting, so what we can do for that is if we go back and select our text. If I click back on my text tool, I’ve got my text selected. This, it says preset text paths and at the moment, there’s nothing selected well this option here that says curved text user-defined and there are lots of ones I could choose this.
One would make it sort of go round that a circle that one makes get straight. This would make an upward semicircle and and so on, I’m going to choose the user-defined box and you get to play around with it as you like. So I click on that and it instantly gives me a curving design which I can change. So if I click in here, I can move my endpoint and I can click on this little handle. I can change the angle of movement there and I quite like that.
That’s okay! I could bring that all around a bit and in a bit and to be honest at this stage, it’s going to be a bit of experimenting to see what works for you. But that’s quite good start. I can do the same with splash, so I’ve got it selected. I can choose preset text paths and I can choose a similar shape so that sort of fits inside my other one. Okay, not bad, and I can move them around again.
If I need to or resize them as I want – and I want to put an exclamation marks – that’s actually part of the company name, but rather than a boring, old exclamation mark, which I could do you know, look like that. That’s fine, that’s pretty cool, but actually I prefer to have a stylistic sort of shape and there are a number in this shape. Drop-Down here in draw plus of pre-built shapes you can use because of smiley faces, little clock, rectangles and circles.
Very useful arrow is also very useful, but there’s this nice sort of tear shape, which is perfect for a little splash, so I’m going to grab that shape, click and drag, and it’s created my basic shape. At the moment it has no no fill color and it’s just a black outline. It’s also sort of the wrong way round. So I’m going to make a few changes if we just click on it again with a pointer tool, we can just by moving the mouse out along the diagonal.
You see it changes to a rotating icon, so I can click and drag and I can rotate my little splash around and we can start filling it in. So if I click on fill – and I choose a sort of a nice blue color, like water and on the line right here – we go so there we get so I’ve got now a nice of special. I need a little circle or something here as well as part of the exclamation mark. So I go back to my quick shapes, choose the lips and click and drag, and if I hold shift at this stage it will lock the aspects.
It’s a perfect circle. I might just want to move it slightly and it’s picked up the same color settings that I’ve most recently used. So it’s identically, matched to my little T shape. Well, that’s looking pretty good. What I can do at this stage is, I can still move things around. Every part is independent, and so I can reorder resize. I could change the color of one part or the other if I wanted to, but I’m quite happy with what I’ve got.
So what I want to do is I’m going to select all of the shapes by just clicking and dragging a box around them, and it gives me option to group them. So I’m going to do that now I have wherever I click and drag. They are all together as one item, so all the remains is. I need to save my little bit of work and export it in a format that I can use on the web. So, first of all, let’s just save our project and we might want to save it as something like super splash.
Logo should really have done that earlier, just in case draw plus crash, and I lost all my work, but now that that’s saved, we need to export it because, although I’ve saved it, I’ve saved it in the Seraph draw plus format. I can’t use that on the web. I can’t send that out to other people’s computers than expect them to be able to view it unless they have draw plus as well. So what we do is we export into a common web friendly format that can be risa that can be redisplayed on other people’s computers.
To do that? Have your group selected by clicking on it, go to file and export and we’re going to export as a picture, and I want to export selected objects. It might say page in which case you’ll see there’s an awful lot of transparent unused space. We don’t want that. We want just have the selected object, just our logo exported and we get to choose the resolution. If we think we’re going to want to print it, you want to get us higher dpi, as you can.
If you’re going to show it on a screen, then normally 72 or 96 would would be fine, but in the in the day of Retina displays and better quality images, we probably need to go for about 200 dpi and then it’ll ask you to format, and there Are several different formats you can choose from? You probably are going to choose one of two formats you might choose SVG, which is a vector graphic format which does display in modern web browsers and can be infinitely scaled, and this would be a good format for sending to a printer or a publisher.
However, much more compatible is the PNG format. This is a bitmap format, so you are going to lose some of the benefits of it being a vector-based image, but it’s okay, because your source document is still a vector, so you can still resize your original to any size. You like we’re just exporting now to be used on a website, so PNG is fine, make sure the bit-depth is at first 2 bits if it’s at 24.
It doesn’t have enough bits to actually encode the transparent background than it will be on a white background, which will be a real pain when you want to show it on different backgrounds on your website. So if you choose 32 bit, you get the checkerboard back, which tells you this is transparent. Once you’ve got those settings, then you press, export they’ll, be ask you for what you want to call it.
It will helpfully use the name you’ve already chosen for your document. So that’s fine, so super special logo – press – save, hey I’ve already made one before so. Let me just let me call it super special, a new logo or something like that. Save and that’s now exported my PNG file and I can show it to you. If I go into my computer and if I were to load it up, there’s my lovely logo, as you can see, on a fully transparent background.
It’s nice and high quality and that’s ready to be used on any kind of merchandising or on the web. And I think my client would be really happy with that logo.
Need a logo????
