What will we be learning?

In this video, we’ll be creating a very simple, but elegant logo using a couple online tools + Adobe Photoshop. Why spend hard earned money on a logo that you could make yourself?

As mentioned earlier, we’ll be using Photoshop to actually design our logo, however we will be looking at Bigstockphoto for icons or pre made logos that we may like. Also, we’ll be using dafont to download the best free fonts on the internet. Combining the three together, we will have an amazing logo and we’ll make it in about 10 minutes.

Why is creating your own logo important? How can I benefit from creating my logo in Photoshop?

Not only will you be saving a lot of money on something super simple, but you’ll be learning some valuable skills by using Photoshop. By learning how to create a logo in Photoshop, you’ll in turn be learning how to crop images, and edit images for your blog. So, it’s really a win-win. And for those who run low budget personal websites or blogs, this is great and exactly what you need to create an awesome logo.

[box]Video Title: How to make a logo in Illustrator
Video URL: https://www.youtube.com/watch?v=AFwx9q99__o
Accompanying Course: Beginner’s Guide to WordPress – Web Design Course[/box]

< Go Back to Video Tutorials List

Transcript: 

Alright so in this video, I want to show how to make a very simple logo for your blog. A lot of people ask. Now how do I create a textual logo. I don’t want anything too fancy but I just want it to be something besides this default text that our theme or wordpress itself, what I gives us. And so, you know, I want to just show you how, you can make something very simple, quite elegant as well for a little money.

Actually for free. And it will be quite simple to make. And we don’t need any experience. You know I have no experience in actually making logos. It’s not going to be anything fancy, but it will get the job done so you don’t have to pay, you know a very large sum of money, just for a logo. 

And the first thing that I want to show you is actually, you know, to make that icon or to actually get a logo. There is a number of ways to do that. The first one that I want to show you is just going on different stock websites. We are just going to type in vector logos or something like that. 

And you can find actually this quite a bit of logos on the stock photo websites that are easily customizable because they are vectors, so you can change the text very easily. And there may be something that you like. There would be a perfect logo that you like that will work really well for your website.

But another that you can. If you can’t find an actual direct logo like, something like this. It doesn’t fit well with your website or something like that, you know, another thing that you can use is kind of these icons. These icons are perfect because, if you would have seen on a lot of websites, they have, on the left side they have a little bit of an icon and then they have the text.

Or if you just want the text by yourself, that’s perfectly fine as well. And the one thing that’s good about this website that I am sure you would stock photos is that they actually provide a free trail, 7 day free trail. So you can actually try some of these different logos, try some of these different icons for free. 

You get 7 days, you get 5 pictures each day. So it’s good to just try and see what it is. So that kind of gives you an idea if you want some type of, I guess, icon or actual logo that’s made by, and these are all mad by designers and things like that. 

So that’s one option. But what I am going to show you is actually how to make one in illustrator. And to be very very simple, nothing too fancy. And so the first thing that I want to show you is, how do you get your font? How do you get your font? There is many many fonts that you can choose from. A lot of fonts within illustrator may not be the best, so where can you get additional fonts? 

And I think that a perfect place to get it is this website called dafont dot com and it has a bunch of free and also paid fonts that people, it’s kind of like a marketplace for fonts. And you can search this. There is really thousands of fonts that you could go through, you know. 

There is different types where this sans are more like, I guess you could say more professional looking or more basic looking. They have a, also, you know these cartoon like. They have, for example, these handwritten style fonts. And these are just fonts. You will install them just like you would. Any font you could type in Microsoft word, you could do in illustrator. 

So depending on what type of, you know, for example this will be perfect for, maybe some type of tumbler blog or maybe a blog that has more of a feminine feel to it or feminine look to it. These would be perfect fonts. And so that’s why dafont is such a good way to find these different fonts, or to make these quite good looking logos, even by themselves. Like for example, if this was your logo by itself that would be already perfect.

And it’s free to download at dafont. You literally would just type it into illustrator. Amber shaie, whatever your actual website name was. So it is very very simple in that regard. How do you go about finding a font that you like? Well one thing that I, that is there is different tools. This is a Google chrome extension, and it’s called whatfont. 

And so what it is, is it’s a Google extension where when you click it, you can just hover over different text and you can see what type of, what type of fonts it’s exactly using. This is just Facebook and so, you know for example, if you really were not creative at all, that you just wanted to, you know kind of emulate the same type of look by the same type of font. 

You can easily do that and either you find in the illustrator that font, if it isn’t there, you can go ahead and download it either on dafont or on other websites as well. So what we are going to do, is we are just going to pick a random font. It doesn’t really matter, I will stick to something sans saraff style, you could say. And I don’t know.

I don’t really know what exactly the style that we are looking for. But for example, let’s just, you know take this one. Quite simple, this one coolvetica. And so we are just going to download it. And so you can see that it downloads right away. 

And we will open up in our downloads. And all we are going to do is just double click on that coolvetica dot tf and then we are just going to install font. And this is on a mac. So it may be a little bit different if you are using Windows. And so you are just going to install it and we are just going to our font book. And it should be there. As you can see I installed a bunch of other fonts as well. You can see the coolvetica. It’s all right there. 

So from there all we are going to do now. The font is installed, so all we are going to do is open up illustrator. And so this is illustrator right now. So all we are going to do, actually paste it in, as you could see a small little icon that I found online that I liked.

And so what I did here was, I have, I guess. This is just. It specifies the size. This block right here, whatever is within this block, this is what’s actually going to be exported in our file. So what I did here was I chose something that was the width of 270 pixels by 68 pixels. And the reason why I did that was because if we go into our actual dashboard of wordpress and we go into appearance and header and different themes may or may not have this option.

But it will show us the actual suggested size, 270 pixels by 68. So that’s why I chose that. So anything within this box and it’s this button right here, the art board tool. And we have this little icon here, I just thought it would look interesting right next to it. You definitely don’t have to put it.

Well I want to show you just how to change the size of it. Ultimately we want the icon to fit in that little box. We are just going to go to object, transform and we are going to scale it down. And so this is the percentage that it is going to scale down and you can do it multiple times. Let’s just try 80 percent. 

And so we are then just going to paste it in right there. So it’s going to sit right there and its going to be basic icon that you know, some websites do have, some don’t. Some are just the text by itself. And so what I did here, I just grabbed the text tool and I am just going to start typing and so what we do is we look for the actual font that we just installed.

And it was this coolvetica. And then that’s just the name of what our website is and you could just make it of whatever size that you want. And so from here, what we can do is we really can explore it. this is something that we like that design, we like that look or we can end up deciding that, no we don’t like that, the look of this. 

We want to make something that’s a, you know a little bit different font. You can easily just change the font. Just go playing around with all the fonts, especially because they are free. You know, you have that flexibility.

But the next thing that I want to do is I want to show you where the header will actually end up going. And this is what our website looks like right now. And so as you can see it right there, the logo will be going up in this top left corner. And the background is black or it’s a darker colour.

So in that situation if we have a black text, it’s not going to look very good. It’s not going to look very good. It’s probably not going to show up very well. So what we are going to do here is we are just going to click on it, and this is our colour board and we are just going to select white.

And we can’t see it right now, but trust me, it is back there. And so when we export, it will actually export as a transparent logo. And that will allow it to, everything on the outside is going to be transparent. And so you would just that black background and then you will see the white text here. 

Another thing that we may want to do is maybe change this grey also to white, just because the same rationale. You would want it to maybe, stand out with that transparent background. And so the only thing that we are going to do now is go file, save for web and devices.

And if you can see here, you will see this checker board. But you also would see the logo somewhere in there. And then you probably can’t see

In this corner. But there is a transparency option and we are just going to click save…

So now all we have to do. Let’s just title it something. We will just call it our logo. And when we bring up our website again, and we go into our header, all we are going to do is drag it in and then click upload. And so now it will allow you to, you know crop it, if you didn’t do it into a proper size.

But since it’s of proper size, it’s going to work just fine. And just, just save that right there. And we will see how it looks now. We will see what ultimately our website or our logo look like. And so it looks something like this. And maybe what you had designed for may not be, depending on what type of look or what type of feel you want for your website.

And you can easily just do the exact same project and change the font. It is pretty much, bulk of your logo is simply just your font. And the fonts are all free. So in my opinion, you know, unless it’s something that really has to have a certain feel or a certain look to it, all of this can be done on your own. You can easily add, I guess a tagline underneath if you want to say what your website is more about.

You can easily add that in. It’s not a big deal. It’s not very hard to do. You just add a little text, another text box right underneath and you just make it a smaller font. So the logic of how to make a logo is all right there. 

You kind of have the basic understanding of how you would do that in illustrator and so now hopefully you would be able to kind of play around with, chose the best font that you like, chose one that will be more applicable to your actual website.