How To Make A Website Banner

******UPDATE: I wrote this tutorial a few weeks ago. I have changed Utterly Web’s header graphic since. For reference, here is what the previous header looked like:

older graphic

New tutorial coming soon for the current header! *******

Okay! In this post I will go over how to make the kind of banner you see on this website. The banner is a mix of text, some coloring with a tiny little image thrown in for good measure. You can also check out  how you can make a custom background for your website using GIMP.

But coming back to website banners..

The written instructions in this post will go best with the video:

Pull up any image editor that you fancy but for the purpose of this tutorial I am going to head to Pixlr. It’s a free, online image editor that’s accessible by one and all! So as a first step open up pixlr in a browser tab  by going to www.pixlr.com and select the ‘Advanced’ option. Then, click on ‘Create a new image’.

Website Header Step 1 in Pixlr

 

Then, enter the header dimensions. The one I am making is 1021 pixels wide, with a height of 150 pixels. Also, I am choosing to make a ‘transparent’ banner (by checking the “Transparent’ option) which in effect means that that the banner’s background will be the same as the website’s background.

Dimensions for the banner

When you click on ‘OK’ you will find a checkered layer open up in pixlr. A checkered is layer indicative of a transparent layer. On the left you will find the vertical toolbar, see image below. I have marked a few easy to use tools that will come in handy. And we’ll be using them shortly.

Pixlr Tools

Okay now your arsenal is full of some really good tools.

Add Text To The Web Banner

Lets start with the text tool (the “A” in the image above) and use it to make the text “Utterly WEB”. So, go ahead and click on the text tool and then click on the checkered layer. When you do that you’ll be presented with the text dialog box where you will make the selection pertaining to font type, size, color and so on. The image below shows the selections I have made –

Font Type : Cherry Swash

Font Size : 70

Bold Font

Color: #555555

Text Tool In Pixlr To Make Graphics

Then use the text field to type in the text you want on the header. You could even go the other way round. That is, first type in the text and then choose the font-related attributes. In fact, I think the latter will be a better way to do it.

With that done, before we move to the next step please take a look at the ‘Layers’ box on the right hand side –

The Layers Box In Pixlr

The box indicates that the image has two layers as of now. Layer 0 is the default layer which was created as soon as you created the image. The other layer ‘Utterly WEB’ was created when I used the text tool to type in the text on the image. Whenever you use the text tool, a new layer is automatically created. For other tools you will have to create the layer first. See the two icons at the bottom right of the Layers box? The first one is for creating a new layer and the second one is for trashing a layer.

Let’s use the ‘New Layer’ icon to add in another layer. Click on it and a ‘Layer 2’ will pop up-

Pixlr Second Layer

Tip: Double click on Layer 2 in the ‘Layer’s box and give it a name such as ‘background color’.

Okay then! Next, lets make the background for “WEB”.

With the Layer 2 selected in the ‘Layers’ box (just click on it to make sure it’s selected), take your cursor to the ‘Marquee’ tool (3rd tool from the top) and make a rectangle big enough to encompass the “WEB” text.

Make Graphics For Web Banner

Throw In Some Color Into The Header

Now, back in the tool bar click on the color box that you’ll find towards the bottom. and make a color selection in the dialog box. This is the color you want in the background of the text “WEB”.  I have chosen a shade of orange i.e. #e56100. With the color selection done, click on the bucket tool in the toolbar and take it to the rectangular area and click. The image should look like –

Use Bucket Tool To Add Color

Oops! The color has blocked out the text. That’s no good, is it now? Let’s fix that. In the ‘Layers’ box drag down ‘Layer 2’ so that it’s below the ‘Utterly WEB’ text layer. And there you go –

Free Image Editor For Web Design

On to the next layer. Let’s do the description text that appears below “Utterly WEB”. Just click on the text tool again and then click on the image. In the box that pops up, type in the text and choose the font attributes as before.

Font Type : Pacifico

Font Size : 30

Color: #bababa

At this point, the position of the text would probably be all messed up.  So before you hit OK in the text dialog, click on the ‘Move tool’ (second tool in the toolbar) and then click on the text again, drag it around to get its position right.

Add description text to website banner

 

Superimpose An Image On The Website Banner

We are almost done. All that’s needed is an image in the header. This step is a little tricky, but probably the one that will be most useful in your Pixlr adventures. The ability to combine images in Pixlr opens up a world of options for you! Save the best for the last, eh?

Here’s what we need to do in a nutshell –  first of all have the image you want to use in the banner ready on your computer. Next, we will use Pixlr to open the image on your computer and resize it if need be. Then we select the part of the image that we want to use, copy it and go back to the original image to paste it. Remember, we will paste it in a new layer. And that’s it.

Let me use a different image from the one you see in the current utterlyweb web banner. I’ll use an image of the WordPress icon. In Pixlr horizontal menu, go to File>Open Image and browse to the image you want to use. The image will open up atop the original image (the one we have been working on).

Superimpose an image of the WordPress Icon In the Header

 

If you look down at the bottom left corner of the WordPress logo, you will see that the image is 440 x 440, which is way to big for our header. I guess a bit of resizing is in order then! So in the Pixlr horizontal menu go to Image>Image Size and make the dimensions 100 x 100 instead. Now click on the Marquee tool in the tool bar and select the part of the image that you want to select. OR you could do Edit>Select All as well since in this case you need the entire image. In the Pixlr menu, go to Edit>Copy.

Now, click on the original image we were working on to activate it. Use the Layers box to open a new layer and with the new layer selected, go to Edit>Paste. You might need to use the move tool to position it right.

Final Pixlr Graphic

Finally, to save the image go to File>Save and in the dialog give the image a name and be sure to use a format extension as well such as PNG (for transparent images), PXD (if you want to save your work in layers and use Pixlr at a later point to work on the image) or JPEG (non-transparent images). Also, choose a format even though you have specified it in the name.  (I recommend you save it as PXD and PNG/JPEG so that you have the option of making changes to the image in case you need to).

Save.

save-image

And that’s that! Your website banner is all set!

How do you like that, huh?

 

Leave a Reply

Your email address will not be published. Required fields are marked *