Works for Me Wednesday: Blog Banner How-To

I entertain myself by designing a new blog banner frequently using my own pictures (or my family's). Many of my banners have been fairly makeshift as I have learned more and more about tweaking my template. My current header is my favorite so far, using pictures taken by my husband and son on a backpacking trip. Since a friend recently expressed interest in learning more about how to tweak her template, I thought I'd explain here what worked for me in making my blog banner.

Recently I came across a fun site called fd's Flickr Toys. I have an Flickr account, but it is not necessary to use the site. The Flickr toy I used to design my header was the Mosaic Maker. I arranged the pictures for the top of my blog using three columns and one row. Once I created my mosaic, I saved it to Flickr and to my computer.

The next handy site I visited was Picnik, a FREE, online photo editing site. After acquiring my mosaic from Flickr (alternatively, I could have uploaded it from my computer), I clicked on the "Create" tab and used the Frames option to add a drop-shadow. I saved this copy of my Mosaic.

I must confess that I added the text to my mosaic using Adobe Photoshop. I realize that not everyone has that software, but many people have some type of photo editing software that includes the option to add text.

After adding text to my mosaic and saving it, I re-sized the mosaic to fit my blog. I did this in Photoshop as well, but it is possible to do it in Picnik.

In blogger, I looked in Layout >> Edit HTML and found this in my code:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:780px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

This told me that the width of my header is 780 pixels.

In Picnik, upload the most recent copy of the mosaic, click on the resize tab, and type in the pixel width of your blog header in the first box. (Mine is 780) Make sure that you check off "Keep proportions." Save the re-sized mosaic. This is the copy that you will upload to the header section of your blog in "Layout."

If anyone tries to follow the above instructions for creating a banner and has trouble, please let me know and I will try to explain better...

Last week, I posted the instructions that helped me put together my current template. Another helpful link explaining how to design your own blog banner can be found HERE at Design Mom blog.

Flickr Toys Mosaic Maker and Picnik: Works for me!