Monday, April 5, 2010

The Independent Blogger - Creating a One-of-a-Kind Header

paper with clip

So, you want to know how to make a header?


Of course you do!


Simple!

Easier said than done, huh?

Really, it is!

Well, simple for me, maybe not for others. But, if I can do it, you can definitely do it! Especially with these directions.

I always recommend using Photoshop to do most work, but if you don't have Photoshop, then Gimp will work as well. Go to HERE to get it for FREE.

My tutorials will be in Photoshop CS2. However, Gimp is so similar that hopefully you won't have any trouble keeping up.

The first thing you need to do is open up Photoshop and under "File" click on "New". In the window that pops up, change the width to 980 pixels and the height to 341 pixels.  Click "OK" when you are done.

Photoshop Header size 2

You can change these numbers according to the size you need on your blog.

Not sure what that would be?  Go to your Dashboard and click on the Layout for your blog.  Then click on Edit HTML. Scroll down to Where it says HEADER.  Under the HEADER section it will say what your current header size is.  It looks like this...

Fullscreen capture 452010 24236 PM.bmp

Remember that you can still change it if you prefer another size.  I suggest moving up or down in the number value by 10's until you reach the desired width and height.  I also suggest testing it before you go through the entire tutorial to realize it is too big or small.

The number settings I used in this tutorial are the same as the header on my blog page. Be sure that you are using pixels not inches.
 

Going back...this is what your image should look like...

Fullscreen capture 3272010 21454 PM.bmp

Next, go up to "Edit" and choose "Fill". Under the "Fill" menu and under the drop down list "Use", choose white then click "Ok".

Fullscreen capture 3272010 21738 PM.bmp

This will fill the checkerboard looking rectangle with a white background.

From here, you can do a number of things. You can add textures, pictures, text, whatever. I am going to take you through a simple example of my own, and then give you some links to a variety of great places where you can download free backgrounds, textures, and other fun items to use along with this tutorial to create your own header.

Going back to the header, download the following scrapbook papers to use in this tutorial and save them to a file on your computer.

This tutorial uses the
Sweet Scape Papers

In Photoshop, go to "File" and open the blue damask paper. You will need to resize the paper to fit on your header. To do this, go to "Image" and then to "Image Size". Once the menu pops up, change the width to the same width as your blog header then click "Ok". In this case it would be 980 pixels. Notice that it changes the Height also. This is ok!

image size

Once you have resized the paper, hold down the "Ctrl" button and type "A". This will choose the image you have just resized. Once you have typed "Ctrl A", type "Ctrl C". Make sure your cursor is over the image first. Lastly, once you have typed "Ctrl C", go back to your header image and type "Ctrl V". This should fill in your header space.

filled with pattern

Next you are going to open up the pink striped paper. Again you are going to have to resize the paper but, this time let's resize it to 680 pixels.

Go back up to "Image" and under the "Image Size" option menu, change the width to 680 pixels. Once more, with your cursor on top of the image, type "Ctrl A", then "Ctrl C". Then go back over to your header and (with cursor on image) type "Ctrl V".

What these steps are doing is selecting the image (Ctrl A), copying the image (Ctrl C), and then pasting the image (Ctrl V).

This is what your header should look like...

filled with pattern 2

Now open up the green lined paper and resize it to 400 pixels. Do the same steps as before; go to "Image", then "Image Size" and change the width to 400 pixels. Then once you have resized it, type "Ctrl A", then "Ctrl C". Then go back to the header and type "Ctrl V". This will put it in the center of the pink striped paper.

Next, type "Ctrl T". This selects the layer so that you can move it around. Move the layer around to any position you want it.

Moving slightly outside of the selection box will enable you to rotate the layer. Rotate the layer in any direction.

I added a Title (completely made up) and a few words on the lines of the green paper.

Here is what mine looks like...

filled with pattern 3

Change it around to your liking. You don't have to position it exactly like mine.

If you would like to add a photograph, you can do that also. I have not provided one for you. However, you can do this by opening up your own photo now.

Resize the picture to the size you want by going up to "Image" then "Image Size"and follow the same instructions as before... "Ctrl A", "Ctrl C", "Ctrl V". Once you have pasted it, you can type "Ctrl T" to select the image and move it to where you want it. You may even choose to use an entire image as the background for your header. In that case, skip the papers and simply resize the image to the same size of the header.

Here is my example...

filled with pattern 4

You can also add embellishments to your page. See that blank spot between the green layer and the photo? It bugs me to leave it blank as if something is missing. You can fill it with anything such as buttons, ribbons, more text, another photo, whatever. I will add some now to show you how it looks.

Always remember...

Ctrl A - select the image
Ctrl C - copy the image
Ctrl V - paste the image
Ctrl T - select the image to move it around

Here is my header with some embellishments...


filled with pattern 5

Lastly, you will want to add depth to your images to make them pop.

Go over to the right side of Photoshop to where it says "Layers"

layers

Scroll all the way down to the bottom of the layers and double click on "Layer 1" (it may even say "Background Layer"). A menu called "Layer Style" will pop up. Click on "Drop Shadow". Change opacity to 25%, Distance to 0 (zero)px, Spread to 0 (zero)%, and Size to 15 px, then click "Ok". You can play around with these numbers if you like.

Layer style

Once you have clicked "Ok", go back over to "Layers" and right click on "Layer 1". Choose "Copy Layer Style". Now, right click on all other layers and "Paste Layer Style".

Tip: If you want to move items in front of or behind another item, go over to layers and move them up or down in the list. Just click on the layer and drag it up or down.

There! You're Done!

Go up to File and save image two ways...

Save once in Photoshop format so that you can come back at any time to make changes.
Save a second time in JPEG format.

Please feel free to contact me with your questions.

Here are some great sites where you will find {wonderful} backgrounds and embellishments to help you create a one of a kind header. Most of them are FREE, which is what I like, but on some of them you will find a combination of free stuff and other items you can buy. I don't suggest purchasing anything simply because so many people out there offer a large assortment of free stuff.

Computer Scrapbook.com
Pixels & Ice Cream
Free Digital Scrapbooking.com

I would love for you to share your blog headers that you have created. Be sure to leave a comment with a link to your page.
Related Posts with Thumbnails