DIY Custom Blog Design Part 4: Header

This is Part 4 of a series of tutorials, if you need to start at the beginning, click here. 

In this part of the tutorial, we will make a simple header and I will show you how to install it properly.

I am making my header in Photoshop CS5.  If you don't have Photoshop, you can use Paint.net it is similar to Photoshop, and 100% FREE!

Step #1: Making the Header

The first thing that I am going to do is create a Photoshop document the same width that we did the 3 column Template (1000px), and the height can be whatever you want (I chose 400px).

Next, I just started to place the different items that I wanted to use in my header :)

Then I used my Free Transform tool to size, rotate my objects and photos.

So now I have made a little layout out of my photos and digital scrapbook kit.

Now I am going to add a little depth to the elements by adding drop shadows.  What you need to do is double click on the layer that you want to add a drop shadow to, and a window will pop up, and you need to check the box next to Drop Shadow.  There you can adjust and add your drop shadow.  (Make sure your "Preview" is checked, so that you can see the adjustments you are making, as you make them)

Now that I have added a little depth with my shadows, I am going to finish it of with Text!

Now we need to save it for web as a png (you can save it as a jpeg if you like, but when I use any text, my preference is a png...).  If you would like to see an explanation of why I save what as what, CLICK HERE to view a post on it.

Step #2: Installing your Header

First, you are going to add your header image as you normally would here:

 When you upload, make sure that you select Instead of title and description, and do NOT select Shrink to Fit.  Then Click Save.

Now your Header will look like this.

Obviously, the borders around it look terrible, and we need to get rid of those, and we need to center it properly.  So go to your Edit HTML page, and find your #header-wrapper, and change the border to 0px.  So your #header-wrapper should now look like this.

Now go down to your #header, and change the 5px to 0px.  Also change the 1px to 0px on your border.  So now it should look like this.

Now you're Done!

Move on to DIY Custom Blog Design Part 5: Sidebar Titles