How To Make A Header Image

Bowl of Cherries


A couple of months ago I guest posted an article about How To Make Printable Recipes Pages on Food Bloggers Unite and I liked the idea of food blogging how to posts. I wanted to start posting the how to food blogging posts right away but things got busy and it fell to the way side. For those of you that visit Closet Cooking regularly you may have noticed that I change my header image every couple of weeks and I was just about to change it again when I thought that it would be a nice way to start my how to food blogging posts. So today I will not be posting a recipe but rather a how to tutorial on creating a food blog header.

The first step in creating a foodie header for your blog is taking a picture of some food. The thing to keep in mind when taking your photo is that you are going to want to have text on top of the image and you want to be able to see the text. This means that you want an area of the photo that is not busy, a nice and simple area where the text will be visible. I like to try to take my header image photos on a white background so that the text can go over the white area and be clearly visible.

Once you have taken the photo, upload it to your computer and do any post processing that you want such as correcting the white balance or the exposure, etc.

Since I have been enjoying the fresh local cherries lately I decided to do a cherry header and the image above is what I started with after post processing.

Next you want to figure out how big your header image is if you already have one or decide how big you want it to be. My header image is 988 pixels wide by 92 pixels high so I will use those dimensions in this example. Open the photo in Photoshop or Elements and select the Rectangular Marquee Tool. Change the mode to fixed size and place the header image dimensions in the Width and Height fields like this:

Bowl of Cherries - Header Image


After you have set the dimensions when you click on the image a box the size of the dimensions that you entered will appear where you clicked. Whatever is in the box will become your header image. Normally the photo is much bigger than the header image so you are going to need to resize the photo and try to select what you want to appear in your header image. I usually have to resize the photo a few times until I get it just right. Below is a screenshot of what I selected.

Bowl of Cherries - Header Image


Once you have selected the part of the photo that you want to be your header image you can hit Ctrl + C to copy the selected area followed by Ctrl + N to open a new file followed by clicking on OK followed by Ctrl + V to paste the selected image into the new file followed by Ctrl + S to save it. At this point you are normally done and you can upload the image to your blogs header. (See below for instructions to upload the header image to blogger.)

I ran into a problem here in that when I selected what I wanted to be in my header image there was not enough room on the right and my header image was only 532 pixels wide when I needed 988 pixels. Not to worry there is a solution: I hit Ctrl + C to copy the selected area followed by Ctrl + N to open a new file.

Bowl of Cherries - Header Image


I changed the width to 988 pixels followed by OK and Ctrl + V to paste the selected image into the new one as follows:

Bowl of Cherries - Header Image


I now had the image above which wasn't really what I wanted either. So I selected the Rectangular Marquee Tool again and set the dimensions to the cut images size which was 532 pixels by 92 pixels and I selected the pasted image and hit Ctrl + X to cut the image and dragged the selected area to the far left and hit Ctrl + V to paste the image.

Bowl of Cherries - Header Image


Now I had a header image that was left justified but there was a line where the background of the photo ran out. This was easily fixed by selecting the Eydropper Tool and clicking on an area of the off white background from the photo and then selecting the Paint Bucket Tool and clicking on the perfectly white background of the new image to fill it with the same colour as the photos background. Then I just needed to save the file by hitting Ctrl + S followed by changing the file format to jpg and saving it.

I finally had my finished background image and all that was left was to upload it to blogger.

Note: If you do not have a nice solid background colour you could also add a new layer and add a gradient to fade out the image to white so that your header text is visible over the faded area.

How to upload the header image to Blogger:


Log on to Blogger and go to the Layout tab -> Click on the Edit link in the Header area -> Remove the old image if you have one -> Click the From your computer -> Browse and select the image header file followed by Save after it has been uploaded. You now have your header image.

The only issue that might remain is where your header text is. If the header text is centered or above the image part of the header image rather than the area that you set aside for the text then you will need to edit the HTML of your blogs template and set the header text to "text-align:right;" or "text-align:left;" as appropriate. Each template is different but for mine I had to edit the "#header h1" and the "#header .description" styles.

This post took a lot more effort to write than a recipe post! I hope that you find it useful. Please left me know by leaving a comment if you would like me to continue to post food blogging how to's in the future or if you would prefer that I just got to the food.

49 comments:

Steph said...

Thanks for posting this!! Now maybe I can come up something nicer w/ my blog..if I can take a nice pic first..haha

La Table De Nana said...

Really nice of you to share the tips! I like your cherry header~ Beautiful!

VeggieGirl said...

Great guide/information!! Thank you!!

nancy said...

Other how do you do it questions:

Do you eat all the food and not gain weight? Do you have someone help you eat the food? Do you exercise?

What about the cost? Have you ever added up the price difference in eating, let's say, frozen pizza, prepared grocery store meals, or meals rehydrated from a box compared to the daily cooking you now enjoy?

Fabulously Broke said...

I am loving this!

I was tinkering around with the idea of creating Photoshop & Blogger Tutorials and you've inspired me..!

I love to change my header image too.. it's a sickness

But my header images take me at least a whole day to complete, after a week of thinking about what I want it to look like

As a result, I only change them 3 times a year, if that.

Thanks for sharing :) I'm a huge & loyal fan of your food blog. My favourite out of ALL of them, by far.

Ninette said...

Thanks, Kevin. I was half wondering how I would change my header and now I just might do it now that you've taught me.

Lina said...

ohhh thanks for the how to! Im so retarded when it comes to this computer stuff...

Rosa's Yummy Yums said...

Thanks for the info!

Cheers,

Rosa

Pip Lincolne said...

Wow Kevin! Good work! What a great, informative and generous post. Awesome. x

Tien said...

Thanks for sharing, Kevin. I did not know how to do that. -Tien :)

James said...

I don't know about uploading, I need to download someone to do this for me.....

Tessa said...

Thank you so much for sharing this and how to make a printable recipe!! I was actually going to ask you how you made a printable page through email but you answered my question :)

Anncoo said...

Thanks for posting this. Really appreciate it.

♥Deeba @Passionate About Baking♥ said...

Great tutorial Kevin...& a beautiful bowl of cherries!I've still got to make friends with Photoshop.I get lost everytime I get in there!

Bunny said...

What a wonderful post Kevin, I hope you do more of the how to posts too!!

Mary at My New 30 said...

You know, that's super sweet of you to openly share things like this with your readers! Thanks so much for your great recipes, ideas and now, food blogging tips!!

Koolforkatz said...

Thank you for posting this. I need some work in this area. Your photos are amazing, too. I know photos of food are supposed to be hard.

Linda said...

This is fantastic. I hope you continue with posts like this in the future!

Rita said...

Very cool, Kevin, thanks for sharing I will give it a try.

Danny said...

Excellent post! Your guest post is really popular on FBU! Thanks so much for writing it...and also for the link!

Jan said...

I've always wanted to make one but never seem to find the time - great instructions Kevin! I will give it a go (once I have a picture that's good enough) lol

♥peachkins♥ said...

I love the new header Kevin!

giz said...

Great tutorial Kevin. Thanks for posting. So many of us have absolutely no clue - I'm at the head of the line.

Ciao Chow Linda said...

Thanks Kevin - I'm hoping to put this to use later this summer.

Ricki said...

Thanks for this (though I'm not sure I could manage it even w/ the tutorial!). How about some tutorials on how to take great photos like yours? ;)

Erin said...
This comment has been removed by the author.
Erin said...

Kevin-you must have read my mind. It was just Friday evening when I thought to myself, "I'd sure like to start blogging about High Altitude Baking!" Not a real tech saavy individual, this sort of information is really what I need to get going. Keep it coming!

Helene said...

I really enjoyed this post and I'm glad you took the time to write it. This is such a great tutorial for me. I'll be saving it. Thanks a lot Kevin.

Rachana Shakyawar said...

Very Tempting Picture!
Your blog and the header simply Rocks!

ChichaJo said...

Thanks for sharing this! I have long wanted to change the look of my blog, but since I have zero techno-knowledge to speak of it's been a challenge to say the least! Thanks for sharing your tips on headers...now if only I could finally learn Photoshop!

Sippity Sup said...

Good info... I have been toying with changing my look. GREG

Pam said...

Thanks Kevin! I have no image in my header, because I never could figure out how!!

Chef Fresco said...

Thanks Kevin!

Cynthia said...

A post that is very much appreciated. Thank you!

Mom2Be said...

thank you so much for posting this! I'm not very tech savy so I need every help I can get : )

DiAnais said...

This was very useful to me! I tried it right away and it came out beautiful. Thank you so much.

Liz said...

For those who don't have Photoshop, paint.net is a good, free program that I use quite a bit. Hopefully that helps someone. :)

Snooty Primadona said...

This was great! Maybe now I can actually do a nice header on my blog. Thanks so much for the information...

Rajitha said...

Thank you so much! I have been wanting to make a diff. header for a long time but did not know how to go about it....this sure helps...

mikky said...

very informative, kev... :D

Lynda said...

Thanks for posting this info, Kevin...I would love more how-to posts. I'm rather tech challenged and need all the help I can get! I'd also like to know how to get a third column on my blog.

Olga said...

Awesome post and I love your photo in the header. Unfortunately, I still can't figure mine out. It is driving me bonkers ;)

Divina Pe, RHN said...

Hello Kevin, you're good in food and recipes as well as tips on food blogging and technical stuff. I appreciate both. It's very helpful.

website design said...

very well said. thanks.. :)

Sam Sotiropoulos said...

Very nice tute! :-)

Cassandra said...

this is so helpful! thank you! the next time I give my blog a facelift I will refer to this post!

papawow said...

Great advise and I love the step-by-step screenshots. You have motivated to update my header, which is currently a small pile of Red Rooibus Tea, but no one would ever know that. It just looks like mulch... time for a change.

Jessica said...

Thank you so much!! I wouldn't have been able to put a header on my blog without your help!

Sara said...

Thank you Kevin! I still consider myself new to the world of blogging and I was trying to figure out how to have a header picture! This is on my "to-do-soon" list. You should definitely post more "how to" posts!

Post a Comment