Computer Tip-of-the-Week: Initial Blogger Setup and Blog Banner Size

Hi there!

Are you having problems getting your banner picture-size to fit the Blogger Header?  I know I did, and my friend just switched to Blogger and experienced a similar issue. 

The frustrating things is that Blogger books don't address the issue directly - and all of the forums and blogs we've checked don't really offer much advice beyond "just keep playing around with the size in Photoshop".  NOT helpful!!

We spent a great deal of time trying to troubleshoot this issue and thought that if we had this problem, maybe others out there in blogger-land might have similar issues.  So, here is what we came up with to deal with the banner-sizing issue.  This is a rather long posting - but it takes you pretty much step-by-step through how to find the size of your blog and how to size your banner picture.

First, I want to do a quick summary of initially setting up a blogger account because I don't want to assume what you do or don't know. 

The first thing you'll need to do is to get yourself a google account (you must have one in order to set up a Blogger blog).  Once you've done so, you'll need to follow Blogger's process for setting up a blog.  It's been streamlined a bit since I had set mine up, but basically, you'll be asked to provide or choose:
                                                                                                                                                         

• Your Google account logon and password
• A Title for your blog (my example in the above printscreen is: MY NEW BLOG NAME
• The web address you'd like to have listed with Blogger (In my printscreen above, I typed: MYBLOGNAME2).  In real life, my Re-Covered Treasure's blog address is re-coveredtreasures.blogspot.com.  FYI, you can add a custom domain later (through Google) or point your own domain to your blog (which is what I do with my domain www.re-coveredtreasures.com)
• Choose your Template (which means you can use the scrollbar to scroll through the general template styles available and then click on the one you like the best).  Don't worry, this can be changed easily later... just pick one that most closely resembles how you think you'd like your blog to look (you can personalize it with colors and backgrounds later - you really want to look at how the columns and main blog area appear).
• Then click Create Blog

Printscreen of Blog Setup screen in Blogger

Now you have the basic blog ready to post to - which you might want to do.  Click the Posts tab on the left-side menu and then click the New Post button.   You might want to have a post titled something like  "Stayed Tuned For Our New Blog"  in the title and then something like "Our blog will be available soon, please check back with us or subscribe to our blog and you'll see each post as it arrives!" in the post body.  And then click the Publish button at the top.  Now your potential readers will have something to look at when they find your blog.

 Ok so now that you have a blog - you will want to personalize it.  There are two ways to do that: Layout and Template. 

Template is the original design you chose.  Template is how you'll fine-tune the look of your blog (meaning colors, layout style, font, background picture or where you can remove the background picture if you'd rather just have a plain background!).  This is also where I finally discovered the little trick of how to size your banner to your blog!

Layout is based on the template you choose but you don't personalize the colors and styles here.  Instead this is where you add (or remove) gadgets.

This is a printscreen of my layout for Re-CoveredTreasures.Blogspot.com

                                                                                                                                                     
Gadgets are the neat little features that let you add fun things to your blog (for instance a Facebook Icon and link, an Etsy Store Link, or a Flickr Photo Slide Show).  Your banner, blog posts, blog pages, and Navigation Bar are also considered gadgets here.  Usually your template will allow you to add quite a variety of gadgets but it already has gadgets that Blogger felt you should have... so here is where you'd remove gadgets or add new ones . 

Layout is also where you add in your Favicon (little thumbnail picture representing you or your company) and where you add your banner picture, title, and tagline.  THIS is where my friend and I experienced an incredible amount of frustration because you upload your banner picture to the banner gadget and it looks great and then you click "preview" and find out that your banner is totally messed up!  Too big, too small, cut in half, or totally pixilated or blurry, or a bazillion other problems.

So here is what we discovered about Banner Pictures created in Photoshop Elements

• You can try resizing based on inches.  This is a great way to get your initial picture adjusted to a length and width that is appropriate for a banner.  I find that between 2-4 inches wide makes a nice-looking banner.  And your width can be anywhere from about 7 inches to 15 inches.  But inches can change from computer to computer, or web-browser to web-browser!  (we have found that Internet Explorer was harder to work with when dealing with Google products, and that Mozilla seemed more Google-friendly - but that is just a personal observation!!).

• It is better to re-size your banner based on pixels! But how do you know what pixel size works best??  That's where you need to click on your Template.   When you click on Template.  A group of templates appear and at the top is a large thumbnail picture with the caption Live On Blog - which is your blog and how it currently appears.   Click the CUSTOMIZE button and it will take you to the screen where you get to play around with your colors, fonts, and styles etc.  Remember from here, NOTHING is saved until you click the Apply to Blog button!!

(I am going to use my old blog Giftbaskets4Fun as my example here)

Printscreen of the Template option - note the CUSTOMIZE button under the Live On Blog thumbnail

 Once you've clicked the Customize button, it will take you to the Blogger Template Designer page which is a lot of fun to play with!  And if you interested, I can show you how to pick the specific colors you want to use on your blog (rather than just picking one assigned by Blogger).

Printscreen of the inital page you land on when you've clicked on Customize

But what you are interested in is the size of your blog.  So, what you need to click on is the Adjust Widths tab on the upper left of the print screen - in the grey bar across the top.

Printscreen of Adjust Widths page

 This is where you will adjust the widths of your columns.  NOTICE the white boxes at the right of the width slider bars!! This tells you how wide (in pixels!) your blog will be.   In my above printscreen, I apparently had the widths set to 860 pixels for the entire blog and 260 for the right column.  Notice that my banner does NOT fit this blog.  However, if I adjust the widths of the blog and column, I can make it fit better.  (although it leaves a VERY wide background section on both sides of the blog).

printscreen of widths adjusted to fit the small banner. 

      So here is what happens when I adjust that picture by Pixels in Photoshop Elements.   To do that, I opened up Photoshop Elements then:

• Opened my banner picture
• Save it as a new name (like banner version 2) - NEVER resize or edit your original picture!!!
• At the top of Elements, I clicked on Image, and then Resize, and then Image Size
• I have Resample Image, Constrain Proportions, and Scale Styles check-marked, and then I went to the pixel width and put in 860 pixels (which matches the width the of my entire blog according to Blogger).  
• FYI - 150 pixels height will give you about 2 inches of height (but in my web-browser on my computer, it looks about 1 inch tall)
• Save your image (I usually put the pixel size into the title of the image name so I know just how big I set it) as a JPEG.
• Now go to your Blogger Layout again (remember to save your changes before you leave Template Designer!).
• In the Blogger Layout, click on Edit Header (Blogger's word for Banner)
• If you have an image loaded, click remove image. 
• Once your image is gone, select "from your computer" next to the word Image, and then click the Browse button.
• Then find where you've saved your image on your computer and click on that image.
• The image will load - make sure it is the image you want (a small version of it will appear).
• Next choose your placement (personally I prefer "Have description placed after the image" because that caused the least amount of issues for me)
• Click Save

Now  while you're still in Layout, go to the upper right corner and click on Preview.  This should load a copy of how your blog currently looks in another tab of your web browser.  Does the banner/header look right to you??  If you want it a little bigger or smaller, now is the time to do that - you would have to go back to Photoshop Elements, open your original picture - save it as a new name, and then try resizing it with a smaller pixel amount if you want a less-wide banner or a larger pixel size if you want a wider banner.  You'll probably want to stay pretty close to the pixel size that Blogger says is your blog width. 

Why do I go back to the original?  Because each time you save a picture and then try and edit it again, you start blurring the picture and you will start seeing pixilation issues (where little squares start appearing in your whole photo/banner).  And once it's saved as a Jpeg, you can't really undo the changes you have made to the picture.  I usually save my edited photos as both a psd (Photoshop format) and a Jpeg (picture).  That way, I can usually go back into the psd file and undo editing and then do new editing.  But it is easy to become confused about what editing you've already done, so it is often easier to start over from the beginning rather than try and undo a previously edited photo.

I hope this helps you with your banners!  Feel free to let me know if this helps you with your banner problems.   I am not an expert, but I have certainly experienced my fair share of issues with Blogger!