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|
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|
|Printscreen of the inital page you land on when you've clicked on Customize|
|Printscreen of Adjust Widths page|
|printscreen of widths adjusted to fit the small banner.|
- 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
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!