Header Tutorial Using Paint.net

I'm going to be creating a header that is for a fixed width template, so the dimensions will be around 750px by 150px. You can change that to suit yourself, if you're using a wider template. I will try and use some of the effects and techniques that you would commonly use for creating a header, just to give you some ideas of what you can do with the program.

Below, is a reduced size version of the header we are going to make. Follow the instructions, and you will be able to create a duplicate of it. Then let your imagination go, and create one for your own site. Let's get started.

Starting Your Header

Creating our canvas

Okay, let's make the header 760px wide, by 135 high. Thats a good size for Block Builder. A bit bigger than the original size, but the template should stretch to fit this size without any problems.The height is what you need to be concerned about, if replacing a Block Builder header. Make it exactly the same height...not 1 px less, or 1px more!

So use the select tool, and draw a rectangle of the correct size. You can see the dimensions at the bottom left of the screen. Use the paintbucket (in the tools menu) to color this black. Now, open up the Ferrari image that you created earlier.

Create a new layer, and in the layers window, look for the properties icon. Rename this "car". Then copy and paste you Ferrari onto this layer, NOT the background layer. You will end up with something like the image below.

Now create a layer that you will call "text". Draw a selection area, and then use the text tool to put in some text. I've chosen white copperplate gothic bold, in a larger size.

To get the header to where it is in the image below, I selected the text again. Then I copy and pasted it back into the layer called Text, and flipped the text.Effects/Flip vertical, then drag it to just below the original text. Next I used gaussian blur, and transparency to get a shadow effect. They are easy enopugh to find in your top menu.

Then I drew a new selection (again, on the text layer) and put in my byline in a smaller font.

Optional extra - transparency

I made the car fade out, so the right side blended in with the black background. What I did was draw a selection around the car, then used Gradient, in the tools menu. I then dragged the center nub around until the transparency looked right to my eye. The results can be seen in the image to the left.

I have also drawn a gradient over the text, then faded the bottom edge of the shadow. That gives a more realistic look to it.

Final touches

Then I saved it as a jpg. (I cropped the canvas off, to get the correct size for my header) The file size is about 20kb, so plenty small enough for quick loading. Below is the finished header. Click on the image to view fullsize (opens a new window).