CoffeeShop Tutorial: Making your own Simple Blog Header


When I first started blogging I was completely overwhelmed by everything, including how to start a blog and make a blog header. See, I am one of those stubborn people who wants to do everything on my own, which often results in pretty hilarious creations... ;-) But part of the fun of having a blog is "doing it my way". If you want to start a blog and are overwhelmed, just go to Blogger and register for a free one. Then you can use their simple templates or pop on over to Our Blogger Templates and check out all of their amazing free blog templates. They even have those photo blogs which allow you to post huge images. Their instructions are very clear and even a novice such as myself was able to figure out how to change my Blogger template.

So now you have a great free blog and your template, but you need your own personal blog header. This is what makes your blog your own and they are so fun to design. Today I am going to show you how to design a simple header using Photoshop or Photoshop Elements.

First you have to figure out the size you want to make it. The templates that come with Blogger set your header no bigger than 660 pixels. Generally you want your header to be 660 to 800 pixels wide, 150 to 200 pixels high. The height actually can be whatever you want. However, being a Texan I believe bigger can be better and my headers are usually 1024 x 400. The template I use allows me to load up such a huge header. If you make your header big and it won't fit, blogger will shrink it to size.
BTW, just click on the images if you want to see them bigger.


Here is the image I am going to use for my header. We are cleaning up the old chicken pen so we can get some chickens (the boys are going to love having chickens), and I found this vintage chair in the coop. Well, vintage is perhaps not the correct word for this chair. OK, I found this piece of trash torn-up chair in the chicken coop and had to photograph it. A stay-at-home-Mom has to occasionally photograph something other than her kids or she will go crazy. :-)
Now use your crop tool to crop your blog header to size. I set this to 1024 pixels x 400 pixels, 300 dpi and moved it around until I found the area I wanted. You can crop at 72 dpi since this will be on the web.
I wanted a vignette on the lovely vintage chair image, so I ran the CoffeeShop Vintage action.
Then I flattened my image.
I wanted my text to be a color from my blog, so I selected my eyedropper tool and clicked on a soft brown. You can see it as my foreground color.
I added my text. If you want to make patterned text, please see the CoffeeShop Patterned Text Tutorial.

Then I wanted to outline my text. Click to select the text layer, and then open your Layer flydown menu and select Simplify Layer.
Now go up to Edit and select Stroke (outline) Selection. I outlined the outside of my text in dark brown set to 2 pixels. Now your text is nicely outlined. Flatten and save as a .jpg. If you use Blogger, just go into your Layout, click Edit on your header, and load your shiny new header!
On my next tutorial I will show you how to use clipping masks in your headers and templates (such as cards, business cards, storyboards, etc.).
Hope this all makes sense. Now go out there and start blogging!!!

14 Comments:

Jenn January 16, 2009 at 10:15 AM  

Thank you Rita!

I wanted to ask about the Our Blogger Templates...I have one that a friend helped me with creating...but when I tried to use one for my new blog, I could not get it to upload. Do you have any tips for getting other templates uploaded onto the blogger?

Thanks! jenn

J and R January 16, 2009 at 11:21 AM  

Yeah I'm the first one!!~~
Thank you Rita, I'll have to try this!

Reds January 16, 2009 at 11:28 AM  

Thanks Rita - I have been wanting to do a blog header for so long - can't wait to play!

Lori Decoite January 16, 2009 at 12:29 PM  

hi Rite -great tut- i played around and made a header-one question...in blogger where you upload the jpeg under "configure heading" it shows the name of my blog. It will not alow me to leave it blank, so my blog title comes up twice. You are probably like-HUH??? If you get a minute can you check out my new header and you will see what i mean :). Ty-lori
http://thedecoitefamily.blogspot.com/

Becca January 16, 2009 at 12:42 PM  

Great tutorial! Thanks!

Lori Decoite January 16, 2009 at 1:16 PM  

hey rita- i fixed my problem :) i had to click use "instead of blog description". Yippy!!!

Brooke - in Oregon January 18, 2009 at 6:23 PM  

I just changed my header after having it up for a year, THANK YOU!

Sonic-7 January 24, 2009 at 11:12 AM  

I was directed to this great site by a friend and this tutorial is exactly what I was looking for, but I have a question.

I am sing the Minima Stretch template for my blog and when I upload my image at 718pixels (which is what Blogger resizes to), the image only appears in the centre of my header, with blank space at either side.

Is there a way to get my image right across th epage in Minima Stretch ?

Marcee April 12, 2009 at 7:26 PM  

I was finally able to create a custom header! And it was SO easy. I had to adjust my measurements a bit, but other than that I had no troubles. Thanks so much!

mandi June 8, 2009 at 11:34 PM  

i've read this a couple times and actually used it today. thank you so much for all that you do! i really appreciate all of the hardwork you put in to make our lives a little easier. you're a rockstar for sure!

Dzny5 October 14, 2009 at 5:27 PM  

Rita, Thanks so much! This is great! Can you help me figure out how to make my header a slideshow?

Aimee Ferrin November 15, 2009 at 5:45 PM  

Thanks so much for your "easy to understand" instructions...I've been wondering for a long time how to do this!

Stephanie November 19, 2010 at 4:41 PM  

Thank you for the tutorial! I just created mine for the second time I put it here:

http://photography-by-stephanie.blogspot.com/

karen c August 2, 2013 at 4:02 PM  

Hi! I know this is an old post, but I have used it a few times for making new headers. I made a new one recently and blogger will not upload it. I have tried many times and it just won't do it. Do you have any idea? Could it be something I'm doing? Thanks so much for your input :)
Karen C