I’m Mary Shaw, and I’m here to walk you through making a custom blog header using Melissa Esplin’s 2-in-1 blog kit. For this tutorial, I am using Adobe Photoshop CS4, but I’m sure the steps will be similar if you use Photoshop Elements.

This kit is a great way to add some personality to your blog, but creating your own header can be daunting.  Melissa has made it easy!  She set up both of the headers in this kit as .png files, and she put nice little transparent windows in the place to insert your header’s title.

First, I open the file in Photoshop.  I immediately saved it as a photoshop (.psd) file.   This will always be the version I open later to make changes.  When I am done, I will save it as a resized, web-ready .jpg or .gif, but retain my .psd file as well.

The next thing I want to do to my header is put a background color into the title window.  So I create a new layer by going to Layer > New > Layer… in Photoshop and then hitting “Enter.”   Then I have to choose a background color.  This is where the eyedropper came in handy.  It is great!  I double-click the color in the left-hand menu, and then click on a color I like in the header and hit “Enter.”

Third, I click the paint bucket tool.  YES, my screen did turn completely yellow.  I didn’t panic (okay, I admit, I panicked for half a second).  But it didn’t stay yellow.  The yellow layer just needs to be moved down “below” the header graphic.  To do that, I just drag Layer 1 down below Layer 0.

Now I need to add my blog title.  First, I click on the Type Tool.  Then I choose a font.  This one is called Pea Anna-Banana.   Third, I click on the font color in the top bar and used the eyedropper to choose a color in the header that I want for my text color.

Then I click inside the yellow box and type my blog title, “Mary the blogger.”  I center the text and choose a larger font size for “Mary” than I used for “the blogger.”  I use the Move Tool to move the words around until they are centered in the window.

There!  I have a header.  The .psd file consists of 3 layers.  The top layer is the blog graphic, the middle layer is the text , and the bottom layer is the yellow background color.  The top two layers can really be in any order, it’s just important that yellow layer is last.

Then I have to resize it.  The graphic is 1000 pixels wide, and you can either make the blog fit the graphic or the graphic fit the blog.  I have decided to shrink the graphic to fit the blog.  I am using Blogger’s “Minima” template, and 640 pixels wide is a good size for me.  So I go to the menu item Image > Image Size and change the width to 640 pixels.  The width was originally in “inches” so I had to change the drop-down to the right of the width to be “pixels;” the height automatically followed suit.  The height also automatically changed to the proper proportion, so I didn’t have to do any math (yay!).

Next, I need to save it for the web.  Photoshop has a great tool for saving images for the web.  It’s under File > Save for web and devices… and  I highly recommend you use this tool any time you put a graphic online.

It’s very important that you save your web images at the smallest size/resolution you can, because graphics that are viewed over the internet have to do a lot of traveling – and the lighter they pack, the better!  Believe me, you’re not doing anybody any favors by saving a graphic bigger than it has to be.

This particular graphic doesn’t use a lot of colors, so I can get away with a 32-color .gif format.

I hit “save,” and I am now ready to upload it to my blog.

I hope this tutorial helped inspire you to get creative with your blog header.  Remember, you can get Melissa Esplin’s Psychedelic Circus blog kit in our store.   Happy blogging!

Related posts

• Tutorial: How to make custom blog buttons
• Tutorial: How to create a WordPress blog
• Tutorial: How to add a shortcut icon to a Blogger blog
• How to set up a custom background in Blogger
• Tutorial: How to Save Layouts for the Web in Photoshop

Tags: Blogs, Mary Shaw, Melissa Esplin, Photoshop, Tutorials