We're MOVING!!! New templates after Oct. 24th, 2014 can be found on Free-3D-Textures.com.

Saturday, March 13, 2010

Simple Website Header Tutorial

Start by opening a new file of the size you require for your banner. For this tutorial we are going to use a standard width of 800 pixels. That's because there are still users with screen sizes at 800 pixels. You'll need to find out the size of your website header to create a suitable size. How high you set the pixels at is going to depend on the space you have to place your header in - in many applications you can set the height at your own choice and the website will adjust the header the space to fit. You'll have to know a little about your website or blog to decide on the height.

On this blog (the standard blogger template called Minima), the header is 650 pixels in width and I have set my image size at 648 pixels. That's because if you set it for 650, it covers the right edge of the frame. You can set the height and almost any size for the Minima header, and it will automatically adjust, so you can have a taller header than the one I am using.

The first thing we need is an idea. What is your website about? Gardening, biking, sewing, photography, fashion - whatever it is, your website header will be what identifies your site branding. You'll notice that all the headers on my different sites have a very similar design style - the header alone becomes identifiable as a site belonging to me. Those blogs and websites are "branded" with my style and logo, even though their names are different.

Once you've come up with an idea, then you need to decide on images. Naturally, this tutorial is about using images in your header, though website headers don't have to contain images. You'll also need to decide on a colour scheme - if you plan to use both a blog and a website, your colour schemes should be the same. This blog, one photo blog, my personal blog and my business website are all the same colour scheme - black and white with touches of yellow. A texture blog using a similar header is white and black, and the website it links to is also white and black. Keeping the same feel throughout your sites and blogs immediately gives visitors who travel through your sites the feeling that these are by the same person - that's branding. When someone can tell a blog is yours by it's header design and colour scheme then you've succeded in branding your business. This same style and feeling should be carried through to your business cards, letterheads, invoices, contracts, etc.

Here I've created by website header at 800 pixels wide by 450 pixels high. That's a little high for my taste, but may be too short for others. What sizes you use really depend on your own personal taste and design style, the space allowed for the header, and the page design.

My (fictitious) business is Motor-My-Cycle - restoring, buying and selling motorcycles. So I want a header that's got something about motorcycles. I've got my images chosen and my color scheme - black, blue, white and silver.

Open your first image, and size it to fit the height of your header - crop away the parts you don't want to use. Then choose "select all", then select edit and copy. Now minimize that image. Click on your blank (new) image and paste the first image into it (edit, paste). Don't worry about where it lands at the moment, unless this is the only image you plan to use.

Continue opening the images, sizing, cropping and copying them into the new image until you've got all you want. If your header is relatively small, you won't likely want too many. These images basically create the background for your text.

Once they are all loaded into the new image on their own layers, you can close all the other images. Now you being sorting out the arrangement and placement for your images. This is going to be a matter of taste, but in order to learn these simple methods, just follow the tutorial. You can rearrange your images once you've got the hang of it.


I've decided rather than having my pictures straight up and down and square I'm going to angle them for interest. To do that, make sure you have the layer active that you want to rotate (click on the layer). Now select "edit" and then "free transform". Grab one of the corner nodes and rotate your image to an angle you like. Hit "enter" to save the rotation. Move your image into the space you want it.

Simply continue transforming images - using either rotate or skew or distort - any of the transforms will work. Saving them as you find what you like. Here in this one, I've simply rotated the second image on the same angle as the first, and left the third image as it is. I've already decided I'm going to cut off some of the bottom because I found the 450 pixels too high for my liking, so I'm careful to make sure the parts of the images I want to keep are above the area I plan to cut.

If you want parts of your image transparent, make sure you are on the correct layer and use your eraser to remove the parts you don't want.

Play with your layout, turning, rotating, moving things until you've got something you like. Once you've got there, you'll be ready to add the text.


I've decided to reserve a large portion of this header for text, and that I want to a frame work to separate the images from the text. I've added a new layer where I'm going to create this frame.


I want the frame to be a silvery colour, so I've chosen a light gray to start with. On the empty layer, use your square selection and create a rectangle of the width and height for one section of your frame.

The one you see here is going to be a dividing line between text and images. Fill your selection with the colour you've chosen for your frame. Continue framing the header by selecting the other edges the same way, and filling them with your colour.

Here you can see my frame in place and ready to be embellished or styled.


I've decided I want part of the black motorcycle out over the frame, so I've copied part of the tire (draw a selection around the area you want to copy) and pasted it over the frame layer.


Now I've added the "bevel and emboss" style to layer with the frame on it. This one uses the inner bevel style, and I've selected "down" - you'll notice it seems to make the images pop off the page a little.


The last step is to add my text. Choose a font style that suits you and your business. For instance, it isn't a good choice to choose an elegrant script for my text on this image - unless of coursee the owner of the business is a woman, and she opts to do that to give this branding a feminine feeling. Try to choose somethat suits both the business and the person.

Okay, I've got my text in place, and I'm ready to save it. First, save your file as a layered .psd file. This allows you to make changes and adjustments later. Once you've saved the .psd file you can flatten the layers and save it as a .jpg to upload to your website or blog.


No comments: