May 19, 2011

How to Make Your Own Blog Header

To start making your header, you will need to have software that is designed for editing/creating graphics. If you want to use Photoshop but have no plans for a profession in graphic design or photography, I highly recommend Photoshop Elements. It can do almost everything the professional version (CS4) can do, it just takes a few extra steps sometimes. You can find discounts or coupons from places like Amazon or Costco. You can also use Paint.net (for free, I haven't used it, only heard about it). Another option would be digital scrapbooking or card-making software like PrintMaster. I used PrintMaster for headers when I first started and it worked great. NEW: Another option for design software: is Pixlr (http://pixlr.com). It is very similar to Photoshop, it's free and requires no download of software. You do everything on the site and you can still save your work to your computer!

Although these instructions use Photoshop CS4, they can be adapted to Photoshop Elements or any other similar software.

**These instructions work best with the Blogger Minima template. (To get this template, follow steps 4-7 here.) If you use another Blogger template, your header may not be centered. Click here to learn how to center it.

Here are the instructions. Remember to click on an image to enlarge it.

1. Before you start, it is helpful to know how wide the space is on your blog for your header. To find out, go to your Design page and click Edit in the box that says "Header". At the bottom of the pop-up window you will see "Image will be shrunk to xxx pixels wide." You will have a number in place of xxx. This means that no matter how big you make your header, Blogger will shrink it down to the width listed.

If the header you create is bigger than the space provided, it will be OK. Blogger will shrink it down to size for you. However, if you make it smaller, Blogger will not stretch it for you. Doing so would make the image look blurry anyway.

To begin making your header, open a new file:
I usually make my headers 900 pixels wide by 450 pixels high. (This is about 12.5 x 6.25 in.) I use a resolution of 72 pixels/inch because some designers have requested that I do so when I use their elements. A transparent background is necessary if you want your header to be a shape other than a rectangle. Otherwise, white is fine.

2. Once your file is open, decorate it however you choose. I use digital scrapbook kits to decorate my headers. If you want to do the same, just be sure to check with the designer before you use any of their kits or graphics for your blog designs. Some do not allow you to use them on the web. Check their terms of use and/or send them an email to ask permission first.


This header was made using Just So Scrappy's kit Hope for Brady.

Add your title and description to the header. 

If you want to make a header that is a shape other than a rectangle, you need to use software that will allow you to save your header as a png file. (Wondering what a png file is? Read here.)

3. Once your header is created, the uploading process is fairly simple. Go to your Design page and click Edit in the Header rectangle:

When a small window pops-up, click "Instead of Title and Description" and "Shrink to Fit". You must do this first or it won't let you later. After you click those two choices, click Browse in the box that says "From your computer". Find the header that you have saved and click Save.


Click View Blog and you are done! You now have your own custom header!

16 comments:

  1. I just found you and would like to try your ideas for making a blog header using print master, but I'm confused about where to begin. You said to "open a file" and give a picture of that file, but you don't say where the file is that I'm to open. Would LOVE to know how to do this and hope my question makes sense.

    Thanks for your help!

    ReplyDelete
  2. Simply Keeping Home,

    I haven't used Print Master for a while so I can't remember the details of how it works, but I'll try to help. You need to open a blank document. I think there are a few options for blank projects in Print Master that you can open. You will have to browse through it to see if there is a size that will work.

    To add the decoration/embellishments, you will have to have clip art, digital scrapbook paper/embellishments, etc. Print Master has clip art, but I think their terms of use do not allow use of their images on the web. You will have to look into that before using them.

    I use digital scrapbook kits from the designers listed in my sidebar. If you buy a kit from them, check their terms of use first. Once the scrapbook kit files are downloaded, you can open them in Print Master, copy them to your file and then move them around to create your design.

    For a better tutorial on how to put together a design, look at my tutorial on How to Make Your Own Blog Button.

    ReplyDelete
  3. very very use full your above teaching.
    many more thanks really i am appreciated.

    ReplyDelete
  4. your intruction very help me..thanks alot

    ReplyDelete
  5. Thanks! I would like a shape other than a rectangle for my header. However, you can't tell because the background is white. How do I get my post background to be white, and still have a transparent background for my header?

    ReplyDelete
    Replies
    1. You need to make sure that your background is transparent and not white when you create the header. Then you need to make sure you save it as a transparent png file.

      You will also need to know how to shift your blog down so that the white background does not show up behind your header. I found a website that gives a great tutorial but her page seems to be down. I plan on posting about it the next few months. If I find the page again I will post the link.

      Delete
  6. Do you know how to have an html page as the blog header instead of just an image file? Thanks for your help!

    ReplyDelete
    Replies
    1. Can you show me an example of what you mean?

      Delete
  7. Can you provide some kind of graphics design software by which it is easy to design the header

    ReplyDelete
    Replies
    1. There are several listed at the top of this post.

      Delete
  8. I Want to Change Shape of header in my blog. Any Idea?
    windowstechnics

    ReplyDelete
  9. I'd purely tell you all “awesome information”
    Header Design

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Thanks for sharing. More information about web banner design in here.

    ReplyDelete
  13. wow... these are really simple and easy steps for creation.. thanks.. by HD Movies Download

    ReplyDelete

Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.