Friday, January 2, 2009

Creating A Banner Image

Recently when I switched back from my Christmas-themed template to my standard template over at Destination: Austin Family, I forgot to add my banner image. Luckily Kathryn Doyle of California Genealogical Society and Library blog pointed this out to me while she was investigating ways to create and install images in your Blogger banner.

I leveraged Microsoft PowerPoint to create my image since I feel that my Adobe Photoshop Elements skills are not where they should be. Many people forget that once you create a page in PowerPoint you can save the slide as a PNG, BMP or JPG format file for use in other programs.

Here's how I created this image:

1. Open Microsoft PowerPoint and create a blank presentation.

2.  On the Insert menu, select Shapes, Rectangle and draw a rectangle the width of the presentation slide and about two inches high.

3. Right-click over the rectangle and select Format Shape.  Use the various options in the Format Shape dialog to select the desired Fill Color and to add or remove the line around the rectangle.  Click Close when finished.

4. You should now have a background upon which to insert your banner text.

5. On the Insert menu select Text Box and draw a text box the length of the banner.  Format the text to be centered, with a large font size (48 points or larger) and your desired font style.

6.  On the Insert menu select Pictures and locate various photos to insert on the banner.  Once a photo is inserted, you will need to resize it to fit and then align it with other photos on the banner.

7. Once the banner is complete, save the presentation in the Powerpoint format (ppt or pptx) for safekeeping.

8. To export the banner to a picture file format, on the File menu select Save As.  In the Save As dialog, locate the Save as type drop-down list and select TIF (a format which creates a very high resolution image).  Specify a location and click Save.

9. Next, when prompted, select Current Slide Only to save the presentation as a picture.

10. Open the TIF file in your photo management software.  I use Microsoft Picture Manager as shown below.  Use the Crop feature to crop out the "white space" above and below the banner, leaving only the image.

11. Export the file to the PNG or JPG formats which will reduce the file size and make it easier to upload to Blogger.

12. Go to the Dashboard for your blog in Blogger.  Select Layout and locate the Picture widget.  Click Edit.

13. In the Configure Image dialog, select Choose File and locate the PNG or JPG image which was just exported.  Also click Shrink To Fit.

14. The image will appear in the dialog.  Click Save.

Note:  This method of adding a large banner image will not work with all templates especially those that are not included in Blogger's standard set of templates.


Becky Jamison said...

You just keep outdoing yourself, Thomas! I don't even want to change my blog banner, but still want to give this a try. Thanks so much. You give such easy step-by-step instructions and I'm grateful! Gotta print this one out.

gtownma said...

My first try at a banner.. Will probably redo again but I think ok for a first try.. Thanks for the instructions.


gtownma said...

My first try at a banner, but I think it was ok for a first try. Will redo again later. Thanks for the instructions.

Tina Sansone

Kathryn Doyle said...

Thanks, Thomas for the step-by-step directions. I had no idea we could change the banner so easily! No more excuses for living with the same old template - time for a blog facelift!

Suzy said...

Wow! Thanks! I've been wondering how to easily create a new banner and using PowerPoint to do it was great. Your instructions for the creation worked well almost all the way through. I found that PowerPoint 2007 has the option to save as .jpg so I didn't need the image editor for that BUT I did need the image editor to crop out the white slide frame that was saved from PowerPoint, otherwise it threw off the whole layout when uploaded. Did I miss something?

Thomas MacEntee said...

Suzy - yes you did catch my glitch - you do need to somehow crop out the "white parts" of the image.

One way to get around this would be to create a custom slide layout in Powerpoint. I just figured that was a bit too technical and that most readers, being used to cropping photos, would be better able to crop the TIF once it was opened in the image editing software. I have updated the post with better instructions.


M. Diane Rogers said...

Thanks once again, Thomas, for posting such clear instructions and for giving me a push. I've been meaning to try this for some time - now I will!

DianaR said...

Thanks so much for posting this - great instructions! I have my new banner image up right now and it makes me smile every time I see it.

Bob Kramp said...

Nice instructions. Now, here's an impossible challenge. Would it not be neat to be able to click on an image in the banner and go to the specific blog entries for that image (similar to tags)? However, don't stay awake at night thinking about it.

Thomas MacEntee said...

But Bob, I do stay awake at night! There is a way to do this with html and it is called image mapping - you have to set x,y coordinates underlying the image.

I will do some research but back in the old days of hand coding image maps were tedious. I am certain that there are easier ways nowadays.

Colleen said...

I've been wanting to put a banner on my Oracle blog for a long time but had NO idea how. Thanks. Maybe I'll try this weekend if I get the cookbook done!