Custom Blog Headers: How to Design Your Blog Header in Photoshop

Phebe A. Durand
As blogs continue to grow in popularity, the demand to make one design stand out from the next grows as well. Using Photoshop, you can create a unique header for your blog that will make it stand out from the crowd. It only takes about 8 steps, and the best part of all is that blogs are one place where you can express your own personal style like nowhere else. Ready to dig right in?

One: The easiest way to begin is to install a layout that you basically like, and grab the header from that layout. For my examples, I'll be using the standard header for the Nucleus blog. Open your default header in Photoshop, create a new layer (Layer, New, Layer), and fill it with white.

Two: Your next step is pretty simple: locate usable artwork. Make sure that you use artwork that won't land you in a copyright battle - there are plenty of sites that offer free-to-use art. I'll be using this piece, available at www.clantemplates.com (I've sized it down considerably.)

Three: Once you've found your art, you need to clean the background off of it. The easiest way to do this is by using the magic wand. So, duplicate the original layer your art is on, and hit the background with the magic wand tool. Then, click the backspace key on your keyboard. Just like that - the background is gone. You may need to zoom in and use the eraser on some small bits.

Four: Now, just drag your artwork onto the default blog header. This is where you'll probably want to do some resizing of the artwork. Click "Edit", and choose "Free Transform". Then, hold the Shift key down on your keyboard while you resize - this will keep all proportions perfect.

Five: We're ready to start really making this a header. To start, fill your background with a color that compliments the artwork and will work for your blog design. Then, grab a lighter shade of that color to use drawing a long circle that goes outside the lines. Change this layer's mode to "Overlay".

Six: Now to add some visual interest - because, let's admit it, this is kind-of boring. First, select a contrasting color for your foreground color. Then, use your rectangle shape tool to draw a thin line along the lower 1/3 of the header. Finally, use a darker version of this color to create a slightly-thicker line along the left of the header. Add a 1-pixel stroke to each of these rectangles.

Seven: We've nearly got this baby done! We're going to do one more thing for visual interest first. Turn off the artwork layer by clicking they "eye" icon beside it. Then, right-click one of your other layers and choose "MergeVisible". This will place all the background layers on one single layer. Now, turn your artwork back on, and select your background layer. Select white (or, if the color of your blog page is something other than white, match that color) and draw a thin rectangle of this color behind the artwork on top and bottom, which will make it appear as if it is popping off the header slightly.

Eight: Finally, we're ready for text. Try adding more than your blog's title to the header - maybe a favorite tagline or quote, or a slogan-type text. Also play around with the font style you choose. Different fonts will create a different atmosphere. Keep the number of fonts down to three at the most.

Once you've added text, you're ready to save and upload to your blog!

Published by Phebe A. Durand

A journalist turned instructor who decided that a steady income wasn't worth creative frustration, Phebe Durand (Lolaness) now focuses on ways that technology can enrich our lives, her works range from writi...   View profile

  • Look for artwork that you can use freely, that expresses your personality, and looks good.
  • Use more than just your blog name in the header to add more of a feeling to the look.
  • Keep fonts down to 3 different styles at most to maintain a professional look.

6 Comments

Post a Comment
  • Kerbie Beck 4/6/2011

    Great post :) Thank you for posting this informative content .. I am looking forward to see more interesting and informative like this :)

    If you have time you can also visit this site :
    Photo Tech Photos and Photographers

  • Color Experts International 6/17/2010

    Awesome!
    It was really nice post! Thanks a lot for sharing...

    http://www.colorexpertsbd.com/

  • Clipping Path 6/17/2010

    Awesome!
    It was really nice post! Thanks a lot for sharing...

  • jayce 5/14/2010

    http://jayce-o.blogspot.com/

  • jayce 5/14/2010

    nice tutor, please visit my design blog for free logo and banner design:
    jayce-o-yesta

  • Chad 5/21/2009

    Great Article!
    By the way, take a look: http://www.vismomedia.com
    and get paid for hosting cool videos in your blogs.

Displaying Comments

To comment, please sign in to your Yahoo! account, or sign up for a new account.