Categories
Online Marketing

Pixlr Tutorial – Example creating a website header/logo

Now, most of the time, I actually outsource graphics, and I do that because a it’s very cost effective to pay. Somebody else another designer to do that for me and secondly, really to be honest, if I’m honest with you graphics, is not really my forte at all.

Okay, now everyone’s different, of course, but I think that’s an important point because you don’t have to be. You know greater every single thing to be successful in business, whether it’s online or offline. What you do need to do is is be able to delegate those things that you don’t like, or that you’re not keen on to other people. Okay, so you get more leverage and you actually can move forward.

So I think that’s an important thing that I wanted to mention at the start, but that said, I do create very simple graphics from time to time. Things like you know when I have a piece of text on a sales page, maybe with a little image on it, and things like that. So very simple stuff, and this is the tool I use. I’ve tried lots of different tools on the web and software programs and and so on, but this is absolutely my favorite and it’s something that I really recommend to you, and this is sort of why I wanted to share it with you.

So the website I’m talking about is called Pixlr all right. If you go to p IX, lr p IX, lr searching google here we go pixlr.Com and I can go there and you’ll get some different options. Now I’m going to choose the second option, which is the one I use on what I recommend to you: the advanced option: okay, so we’ll click there and you can either work on a previous image or you can actually create a new one.

Let’s create a new one and what I thought we’d do is create a very simple website, banner okay, so the header really fought for the top of your website and again. This is something that I would normally outsource and it’ll, probably look completely terrible as well health, but really the only purpose of this article. So I can tell you about this tool and show you some of the basic functions in it.

Okay, so please keep that in mind and don’t be too critical of that. You know the monstrosity that I’m about to create right. It’s really just to show you around the tool, so you can actually use it yourself, all right. So what we’ll do we call? This header – or we call it that a little web site header about that, okay and what I want to do actually is – is create this a specific width and height.

Now I actually have a website. Let me go to that website here and you can see it’s complete sort of blank web site very simple, just won’t post and a page here, and it’s just really a test web site that I use for trying out different things and and experimenting with. So what we can do is actually go into the backend of that website, okay into the WordPress dashboard, and what I’ll do is I’ll, come down to appearance and just to show you to start with.

If I go to themes, you’ll see I’m running the 2012 theme here. Okay, now there are premium themes you you can get. I I use and recommends a thesis and also we themes are excellent. Okay, but they’re going to cost you sort of $ 97, maybe even a little bit more. So if you’re looking for a free theme and you’re not ready to invest in it in a kind of paid theme that actually the WordPress themes 2012 and I think there’s a 2011 as well – oh really really pretty good and you can get some great looking websites.

You know, and they actually have some quite good customisation features on them as well. So I just wanted to point that out before we get into the actual head of stuff. But if I go to appearance and header now – and you can see that it’s saying with a custom header that suggested width is 960 pixels and the height is 250 okay, so let’s actually go and set that in in pixel, ah okay, so 960 by 250. So I’ll go back and I’m going to put in 960 and we’ll go to Heights here, 250.

All right and we’ll click. Ok, they can see what happened is if I bring this window down. This is the image that I’m the blank image that I’m going to design and you can resize this. You can drag it down a little bit and you can see that white rectangle. There is actually what will be my header all right now it is going to look bad like I said, but I just want to show you the functions. So the first thing we can do is say: let’s make the background a different color.

So for that I can go to the tools here on the left and select the paint bucket tool. Alright, so select that just click there and let’s just have a different color. So I’ll click down here and you’ve got a color selector. So, let’s go for some kind of blue: shall we something like that? I think maybe there and I’ll bring this across very light. Blue there we go and I’ll click, OK and then all I do is left click in this area and we change the background.

Color. Okay, now, the next thing I thought would be good to have an image on it. Okay, so what I’ve done is I’ve found this image, which is actually off the stock exchange website? It’s got the weirdest URL ever. I think, and it’s a sx c dot. Hu s, X, C, dot, hu, so very strange I’ve yet to find a weirder URL. But anyway, let’s what I thought we did just create a pretend: it’s a photography website; ok, because that’s a very profitable niche online okay.

So what we’ll do is right. Click here we’ll go save image as and I’m just going to put this click Save and I’m going to put my desktop so there it goes into the desktop, we’ll go back to Pixlr. Now the next thing to understand, if you’re new to this is about layers. Now people get quite confused about layers, but really and you’ll see these in action in a moment and all the layer is is a different components of the image that you’re creating and they’re independent.

That’s why they’re really useful, because you can work on the layers separately? Okay, without affecting the other layers, so if you imagine that the best analogy, I think, is, if you imagine somebody who creates an oil painting, they might start off and they might put in the sky. Okay. Well, that’s the first layer, then they might put in the sea. Okay, the ocean, that’s the second layer, but no I put in the land, that’s a third layer, then they might be putting some say: trees, okay and that’s a fourth layer.

Now, if you do that in a program like Pixlr, those four different layers will be independent. So if you put the tree on top of the the the land and the sea, then if you decide later on, I don’t like the tree, and I want to change it. You could remove that tree and you’ll still have the land and the ocean and the sky and everything behind it. So I hope that kind of makes sense, but I think when we go into this in a bit more detail, you’ll you’ll stop it’ll start to make sense.

So what we can do is firstly open this image. Okay, the camera has a layer, so I’m going to go to layer and I’m going to go to open image as layer, okay, so we’ll select that and I’ll select. This is the image I just downloaded. Okay, so I will click open there, and here we go now, there’s a couple of problems with this. Isn’t, though, that one is, I think it’s a bit too big, so I’m going to reduce the size of it, but also it’s got this white background around it.

So let’s solve these two problems. The first thing is, you can see that it’s actually opened as different layer. Okay, so if them, basically, I resize this. It will just resize this camera because that’s the that’s the layer layer, one it’s called here, okay, so it won’t affect the other. The other background image. So what I’m going to do is go up to edit and free transform here. Okay, so edit and free transform – and you can see the image is highlighted now, if you just drag it, what will happen? Is you can change all the dimensions of it? Okay, you can even turn it upside down.

It’s amazing, okay, but that’s not really what we want. Okay. So when I click outside it’s going to say, do you want to apply the changes? No, I don’t we’ll go back to how it was so again, I’m going to select edit and free transform and I’m going to keep the image in proportion and the way I can do that is just hold down shift on my keyboard. So I’ll just make this a bit smaller and I think that’s probably about the right size.

Okay, so that’s good, alright and then I’ll click outside do I want to apply the changes? Yes, please. I do okay, so I click yes now. The next thing is, I think I would like to move the image over to the right. So what I can do is go up here to the move tool: okay, click there and just hold the left mouse button down and just drag this over. Okay. So put that there, I think yeah some somewhere like that there, I think I’ll, be fine and then also I’d like to get rid of this white around it now.

The way I can do that is actually go over to this tool, which is called the sorry. This one, which is called the wand tool – okay, that so the wand click there and all I’m going to do – is click on the white area. Now, if you look closely, hopefully you can see a sort of moving dotted line around. It were dashed line. Now, if I just click delete on my keyboard, okay, that removes that image. So basically that’s become spare ins and the the image below it, which is the background layer is showing through and that’s exactly what I want.

Okay. So that’s good! Now what I’m going to do is actually get to. Oh, that’s! Fine! Okay! So that’s that’s! Okay! Now what we can do next is actually go to put some text. Okay, so I’m going to click on a which is the text tool or the type tool is called, and I’m going to put in the title of my website, which I’m just going to call it something stupid like Ready, Steady, shoot, it’s probably a terrible name, but You know it’s just an example.

Okay, like I said now, the color is actually wrong because it’s actually the same as the background color, which is why you can’t see the text. So let’s change that. First of all, i’m going to click there and we’ll just make. Let’s just make it black: okay, it probably wouldn’t be black, but we’ll just use that as an example. Okay, so I’ll move that down there. That’s great and we’ll click. Ok! Now, let’s make this a little bit bigger and also bolt or make it bold here and we’ll increase the size.

Alright, ready, steady, shoot, okay, alright, so that’s good or well! That’ll do anyway. Alright, that’s okay and I think what we’ll do is just move this text down a little bit, so we go back to the move tool and we’ll just drag this down a little bit like that. Okay and we can put in it. Let’s put in a sub title as well, so I can call this photography tips for beginners, okay and again, we’ll put this in.

I don’t know we’ll put this in sort of gray color. Shall we something like that see how that looks? Okay and we’ll make it a bit smaller, something like that, maybe a little bit yeah that’ll do and let’s make it its Halleck as well, all right, we’ll click. Okay. We need to leave this again, so we’ll click on the move tool again and put this there. All right and basically, you can start to see how the image can come together again.

Obviously you can spend a lot more time on this than I am here, but so hopefully it gives you an idea of some of the functions. Some of the other things you can do. Actually, if you see we’ve got several layers now one for each element on on the image which is really useful, because then we can. We can work on those in those elements separately without affecting the others. But if I go back to the main title, which is Ready, Steady shoots or click there, okay there’s a little button here, which is basically called layer.

Styles and you can change the text a little bit here. So if I click there just show you you click put in things like drop shadows. So if I click there and also click on that, one get some options. Move this down a little bit and you can see if you play around with this. Okay. Just do it quickly, you can actually put in a little shadow, maybe like that okay loads of other options here you can play around with them, but I think that that’ll do for now, so we click, OK and then the next thing to do.

Let’s just crop! This a little bit so what I’m going to do is go up to the crop tool and we shall just do this. I think so make it a little bit not as high. I think that’s our work so we’ll just select that and I’m just going to click enter on my keyboard. Okay, brilliant – and I think you know we could go on and on, but I think that’s enough to just show you some of the things that you can do so all I’ll do.

Is click file save okay? Now you can save the project if you like. So if you want to come back and work on this with all the layers and just where you left off, then you can set and select this option, which is layered Pixlr image, that’s very useful, but what we’ll do is just save it as a JPEG. I think to begin with so just a standard file and we’ll do that. We’ll click, OK and I’ll just put save this in my desktop alright.

So if I go to my desktop now – and you can see website header here there – we go that’s the image we just created. Now we want. What we need to do is get this onto the website. So I’m going to go back to my website where we were in the header section. Earlier: click on choose file, web site, header, open click on upload, don’t forget to do that. There we go now, you can actually crop it here say we don’t really want to do that.

So I’m going to drag that over there, click on crop and publish okay, that’s good and then we’ll go back to the blog and, let’s refresh the blog. So if we’ve done this correctly website, header should appear and there we go. Ok, so we’ve got our website header. So you can see it doesn’t look great. That’s all. I know that, but I just wanted to show you. You know how you can do different styles and backgrounds, and that kind of thing get it on on the site and how you can include images as well.

On a different colored background, that’s a really useful little trick that I actually use some sort of probably once a week or twice a week. I I end up doing that for various reasons. So it’s a worthwhile piece of knowledge to have, but you can see it’s a lot of fun and you can get stuck in and, like you know like I said, if you aren’t really into graphics and you don’t feel it’s in your skill set, you don’t enjoy It so much that’s a bit like you’re a bit like me, in which case you can outsource most of the work, but still it’s still useful to be able to do this kind of thing just to get them.

You know do some basic basic images which you can do quickly, because sometimes it’s good. You just want one little thing and it’s good to be able to do that yourself rather than having to wait. You know 24 hours or 48 hours for a designer to get back to you, okay and equally. If you want to change something, then you can use these techniques as well. So I hope that helps. Thank you very much for reading.

Let me know what you think and talk soon take care bye,

Need a logo????

 

By Jimmy Dagger

Find out my interests on my awesome blog!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.