Sunday, January 20, 2013

Tips to Design a Blog Header

I have played around with my blog and finally got it looking like I have dreamed of for awhile and wanted to share a few tips over the next few weeks.

Each blog should have a header that stands out. There are three components that make up a great header, of course, after you follow step one and find the program you will use:

  1. You will want to find a photo editing (creating) program to use.  I use Pixlr to edit my headers.  Pixlr is free and has everything I need.  There are other programs such as gimp and inkscape.  In Pixlr, when you get to the website you will see a few options.  I always choose to click on Open Pixlr editor (Advanced) and then you will want to click on Create a New Image.  Make sure to make your header transparent by checking the box and then it will go with any background color you choose.

  2. Size:  The size of the header makes a difference.  My header is 960 pixels by 300.  To determine the width you will want to find out what the width of your blog is.  In blogger, you can do this by going to template - customize - adjust width and clicking on that to see what the width of the blog is.   Then you will want to determine how big or small you want yours.  I chose 300 because it is big enough to stand up, but small enough to let people see the blog title and first paragraph.  I don't want to keep people guessing for too long!  

  3. You will need some kind of illustration, photo, or graphic to make your header stand out.  Some ideas are: scrapbooking kits (google or bing to find the kits), free stock photos, photos that you have taken, illustrations or photos at Stock.XCHNG after you sign up (for free), royalty free illustrations on Istock, or you can have a custom illustration drawn for your website.  Once you have your image, you can copy and paste it into your header.

  4.  Title: You will want your blog title, or other wording and phrases on your header to stand out.  There are millions of different fonts available, but I found a tool at FontMeme that will turn the writing into a photo.  Once again, save the photo and then copy and paste it into your header.  Other options for the title and wording are scrapbook alphabets, the tool on pixlr and other editing programs, or using a document program to create the title, then using the snipping tool (comes with some versions of windows) or taking a snapshot using the "prt sc" button found on most keyboards and editing that to the size you want.
Photo editor tool header designIf you like a particular color from your image and want to use it as the color of your font, in Pixlr there is the tool shown to the left.  Use that to click on the color that you like, then click on the color in the bottom of the toolbar, and you can grab the color code to use.

My header has an illustration purchased on istockphoto and the fontmeme that I used was Pacifico in the Cursive Theme.  The follow buttons were image mapped into the header and I change the color when I change the design.  

The other tips I will write about are backgrounds, custom fonts, image mapping, and choosing the layout that will fit your blog.

If you do not know how to use photo editing software, or have a specific question on how to do something,   leave a comment below and include your email and I will reply with the answer.  Once you learn the photo editing software, you will be able to do so much!

Share this using the toolbar below or the floating buttons on the left hand side.
Related Posts Plugin for WordPress, Blogger...