Ladies Camera Club

10 Nov 2008

How to make a blog header in blogger

I gots me a new header today and thought about the amount of times people ask how I make them - which is like, a lot! So I thought I'd share in the way I do it. There might be simpler ways but I manage just fine this way.
If you have Photoshop or Elements then you are half way to making your own header. It might help if you have a bit of digi know how but fear not... I can tell you the basics and you can faff about with the minor stuff at your own leisure.

This work progress is using Photoshop only (can be adapted for elements only Im not an elements expert. Hell, Im not even a photoshop expert)

  • First of all you need to make a new canvas and for blogger the perfect size is 750x175 pixels. Go to file/new in your photoshop programme.
  • A box will pop out and you need to select "custom" from the top drop down box
  • The width should be 750 and the height should be 175 and change the side size boxes to pixels and not cm or inches
  • The resolution can be as high as 300 if you want but for blogs you can just make it 72. Although I prefer 300 just in case I want to print it one day.
  • The colour mode ought to be RGB colour and the box next to it ought to be "8 bit"
  • Press ok when these steps have been carried out
  • You will now have a white rectangle box - this is your base layer.
  • If you want to change the colour, go to edit/fill and a box will pop out. On the contents section of the box, select colour from the drop down and a colour chart will appear. Select a colour using the colour sliders and then hit ok.
  • Now you need to start adding stuff and this is where free digi download sites such as THIS one can come in handy.
  • When you want to add a new shape or photo or text, you simply go to file/open and select an image from wherever you store your files. I want a paint swoosh as a base for my work so Im going to find it in my files and click open. It will now be brought to the photoshop work area.
  • Before I do anything, I want to change that bright red to green. To do that I go to layer/new adjustment layer/hue&saturation
  • I move the slider (as indicated with red circle) to the right and I move the saturation to the left and when its done I go to layer/merge layers to seal the deal.
  • To get that swoosh onto your header canvass you have to "push" that item onto your blog header rectangle. People are under the misconception that once you open a new image that it will land in the current file you are working on.
  • No it does not!
  • You have to push the new image into the workspace by clicking on the "move tool" which looks like this.
  • Once you have clicked on the move tool you need to place your mouse on the file you want to push into the header canvas. So you click and hold the picture and drag into the white rectangle.
  • Now your swoosh is in the header box.
  • And then you keep on opening new files and dragging them in the box...on top of each other until you have built up your header.
  • You want to add drop shadows? Like the one underneath the white fancy shape below? Ok, you go to layer/layer style/drop shadow and move the sliders (as indicated in the red rings) until you achieve a realistic shadow. Subtle and easy does it otherwise it looks to harsh.
  • Keep adding your layers as indicated above... really build it up with all those wonderful freebies out there! Or even buy them from the vast array of digi shops.
  • Sometimes though, you might want to change position of a layer from the top to the bottom for instance. To do this is simple.
  • You go to your layers palette on the right of your workspace. You click on the layer you wish to move. Then you drag it up or down the layers palette to position it where you fancy. Done
  • When you have the header you love (like my new baby below)
  • Save it as blog header on your desktop and now go to your blogger site. When you have signed in go to Layout or Customise. You need to click on "edit" on the top long box.
  • You will see a pop out box appear and you will need to "remove image" if there is already one there or click on the option of add image from computer.
  • Find the image from your desktop and click upload. Select the option "instead of title and description" and then hit save.
  • Wow - a brand new spanking header created by your lovely hands.
  • HOORAY!!!


Rosie (Freycob) said...

What a start you are! Do you like my Freycob blog banner? It was made by a lovely friend of mine HAHAHA!


Kate said...

Very cool header. Great directions too. :)

Rachel said...

thanks sooooo much for this, Its one of those things I have been meaning to do for ages... but then that goes for updating my blog too haha! but, seriously, thanks! ;o)

Marie said...

Great directions for headers. I do mine in PSE but these instructions seemed okay for using in that too. Unfortunately what I'm mostly lacking for my headers is inspiration, rather than techy know-how. I don't think you can put that in a tutorial though!


Zoe said...

Had no idea where to start and now I do - thank you! Will definitely have a go later


Monica said...

If you dpon't see me for ages you know what I am doing, thank you so much for tis you are a true star!!!! Hugs Monica xx

cannycrafter said...

This looks great, thanks for this, just need to get photoshop or photoshop elements!!!

D@nielle said...

LOL I should have read this earlier, but I'm sooooo behind on your blog and 2 days ago I googled how to do this. Love your new banner though, the trees on the side are also very cute !

Sam said...

Thank you so much for this wonderful post. Helped me get a header together for my new blog at

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

thanks for this tips