Blogger Header Tutorial

I've had a request to do a tutorial on creating a blog header. A fun Blog Header can mark a blog as unique and can lure a reader in from the get-go. If you have a couple of minutes, and a photo editing program, you can create a nice blog header in a few easy steps!

1. Open Photoshop (which is the photo editor I'm fond of using) and create a new file File>New…. For this example, I will be using dimensions of 800 pixels wide and 140 pixels high. You can change the resolution to 72 dpi, which isn't done in the photo below. Since you're using this on the web, 72dpi is fine.

2. First we will choose a color for the background by double-clicking on the color palette (on the top of the two little squares to your lower left) and choosing a color that you'd like your background to be. This color should compliment the colors on your blog. I selected a color from my photo (my awesome denim jacket) to be the foreground layer (the top color box) by clicking on the top of the two boxes, then when the screen of colors comes up, I move the eye dropper tool over my PHOTO and click on the jacket to get the color selected. Cool!

3. Selecting the paint bucket tool, you will click on the image and it will turn the background the color you just selected.

4. I'll show you some fun things you can do to design the header - but really, this is where you play! Think of it as a digital scrapbook page and have fun! Okay, I want to add a photo to my header, so I'm going to open a photo I like (File>Open)

5. If you want to crop the photo, or edit it at all - do that before you drag the photo onto the header. When your photo is the way you want it for the header, you will want to change the resolution to 72 dpi - or else your photo is going to be MASSIVE on your header. Go to Image>Image Size and change the resolution to 72 pixels/inch. Click OK. Your photo will shrink a lot - that's ok! Now drag your photo onto your header (click on the photo and hold the mouse down as you drag the mouse over the header - let go). Now you should have a copy of the photo on your header. You can close your original photo - do NOT save the changes!!

6. Now you can resize your photo on your header - move it wherever you like. Remember, it's time to play! Now I'm going to add a little border thingy (that's the technical term) next to my photo. First I create a new layer for my rectangle to go on (Layer>New>Layer>OK). Then I select a color for my border to be. I'm going to use white. If you want to change your squares back to black and white, just click on the tiny little black and white squares below the larger version of them. The larger 2 boxes will turn back to black and white.

7. I'm going to type some text now, using the "T" tool. Select the tool, then click somewhere on the header. Type your text, making changes to the font and size at the top. On my example, I used the "Century Gothic" font and the "Scriptina" font. I also added a drop shadow to my name (Layer>Layer Style>Drop Shadow) Remember, this is a very simple example. I KNOW you can do better than this - just TRY it :)

8. To finish off, I added some brushes that I bought from 2peas. Remember, we talked about how to use brushes in the watermark tutorial? And I'm done! You'll want to flatten your image when you're happy with it, and save it (File>Save) under whatever name you like. I'll choose "Header".

9. Now you want to put your header on your blog. Blogger has made this step relatively easy. You will want to go to to "Customize" at the top of your blog. Select "Template>Page Elements" You will see a layout of your blog, and at the top, under the Nav bar, you'll see a spot where it says the name of your blog plus "header". Click on "Edit". Now you will be able to upload your image (the header you just created). Also, where it says "Blog Title" - erase that. Once your photo uploads, below it you can choose the "placement". Choose "Instead of title and description" Then click "Save Changes". That should do it! Let me know, folks!