Monday, August 31, 2009

A Tutorial On How To Make A Blog Banner Using Picasa Instead Of Something Fancy and Complicated Like Photoshop

(a few examples of past headers I've made)
I’ve been asked SO many times how I make my collage header (also called banner) images. I came upon this free and easy way to make your Blogger blog look more original and professional...I was desperate and didn't want to pay for a blog designer, and didn't have time to learn Photoshop...I also LOVE the design process of changing things up once a month.
I promised a tutorial a long time ago, but knew I’d have to wait till the kids went back to school to spend the time to put on together. So here it goes.
First you need to download Picasa. It’s free and it should be easy to figure out how to get your pictures from your files into Picasa. Picasa is 'made' by Google and it won't make your computer blow up, or slow down, or act really weird...I swear. I really love using it…I’ve tried almost everything, and I think this is the best (and most self-explanatory) FREE editing system out there…especially if you are using Blogger. No one payed me to say that, really. (Don't you think they should?) I am really not very computer savvy, and I don't have the time to learn Photoshop right now, try as a might. So I've squeezed every ounce of juice out of Picasa and have been very happy with the results.

Once you download Picasa, it is easy to figure out how to 'Import' (there's a button) your pictures from your files into Picasa. (You can do them a file at a time just to see if you like it...no commitment, I swear!)
SO, let’s say you are in Picasa and you want to select 4 or 5 pictures (you will see, once you experiment, that a header can be made with a bunch of photos or just one and still look good).

Fullscreen capture 852009 112401 PM You are going to select a photo and press the Collage button on the bottom of the window. (You can edit your pic first if you want....see the left hand side for tons of options.)Fullscreen capture 852009 112627 PM In the Settings choices, you will choose Picture Pile because it allows you to work with a bunch of photos and manipulate them around in tons of ways. Fullscreen capture 852009 112749 PM Click and hold on your photo and drag it to the corner (or wherever you want it). (By the way…you can see that you can select different colors for the background…experiment away…the possibilities are endless. Also under background options you can select "Use Image". You can download free scrapbook paper and import that into Picasa and use that as a background image if you want something besides a solid color. I did this from here. You will see in my September banner I have chosen a pattern, but the one I have for August I chose a white background.) Fullscreen capture 852009 112825 PMSee that little grey circle on the photo? That allows you to make the photo bigger or smaller and also allows you to manipulate the angle…crooked or straight, and allows you to move it everywhere. If you look in the Settings box, you can also chose to add a white border, or a Polaroid border, or create a shadow on your photo.Fullscreen capture 852009 112840 PM Now you want to add more pictures. Click Clips right next to Settings. If you don’t see the photos you want to add go to Get More and it will take you back to your Picasa files. Click on your pictures there and then go back to the Collage file on top…see that button…next to Library. The picture you clicked on will show up in the little Collage window. Press the + button and it will be added. If you change your mind click on the photo you don’t want and press Remove. (You can also press View And Edit if you decide you want to use some of the cool editing features in Picasa to make your picture better-looking.)Fullscreen capture 852009 112905 PM For this example, I am lining up my photos as straight and evenly spaced as I can get them. Remember, the possibilities are endless though...they don't have to be straight. I DO try to keep them on the top 1/2 of the collage..yes, it looks funny at first, but you want your collage to be long and skinny..you will crop that bottom half off later, after you add text. Just work with the top 1/2 when making a header.

Fullscreen capture 852009 113039 PM When I’m set I press Create Collage.Fullscreen capture 852009 113133 PM That brings me back to the main Picasa page. I find my created Collage in the Library file, and click on it. Now what comes up is the basic editing features…Basic Fixes.Fullscreen capture 852009 113144 PM I find the Text button and press that…there you have TONS of choices of type. Play around and see what you like best…this is the “funnest” part…you can move the text where ever you want (even on top of the photos), make it whatever size you want (keep it on the page!), pick the opacity of the text, and determine the color you want it…it has the same grey circle that you manipulate around. Remember though…you want it rather long and skinny like a header normally looks so keep it up there in the 1/2 of the space provided.
Fullscreen capture 852009 113240 PM If you want to create a whole different grouping text, you can do that too. Just click the phrase you are finished with and move your cursor to a new spot…it doesn’t have to be the spot you want the type to show up, because remember…you can move it. Now you can choose the color, font and size of your new phrase.Fullscreen capture 852009 113332 PM After you have your words down, click the Apply button and you will go back to the basic Edits. You are going to Crop your Collage so it looks like a header, not a huge photo, so press Crop. I make it really even on all sides and bring the crop right up under the writing. Fullscreen capture 852009 113347 PM Press Apply when you are finished.Fullscreen capture 852009 113431 PM You are going to Export (see that button on the bottom?) your collage to your photo files. When you press Export a window like this will show up. That little slider bar lets you choose the size. If you have Minima Stretch* like me, choose 1024 pixels. If you have just plain Minima or Minima Lefty, use 640. Press OK and send them to a file.Fullscreen capture 852009 113446 PM Fullscreen capture 852009 113508 PM NOW, go to your blog and press the Layout tab. Press Edit on the header part (where your title is.)Fullscreen capture 852009 113613 PM Choose your Image (your collage) from your Files where you sent it. Make sure you press the “Instead of title and description” button first, and make sure the Shrink To Fit button is NOT checked before you upload your picture.Fullscreen capture 852009 113635 PM Press Save. If the Collage seems too big for you, just resend your collage at the next smaller size when Exporting to your photo files from Picasa.

HOW TO ERASE THAT BORDER THAT AUTOMATICALLY SHOW UP AROUND YOUR HEADER IMAGE
To get the border to disappear that automatically shows up around your Header Image is easy! Go to your blog Layout page and find the Edit HTML button. What will come up is a bunch of weird crap. It's actually super important weird crap but don't let it intimidate you. Just be really careful with it. Every little mark counts. Scroll slowly through till you find this: (see image below)
#header-wrapper {
margin:0 2% 10px;
border:2px solid $bordercolor;

#header { margin: 5px; border: 2px solid $bordercolor; text-align: center; color:$pagetitlecolor;
Change the number in blue to zero. This makes the border invisible. Make sure you press Save Template to save your changes. Now view blog. It's gone! (By the way making it 3 or 4 pxs makes it thicker! Or you can just make one invisible and keep the single line around your header. Pretty cool!)
Now your header image will not have a border.
Fullscreen capture 852009 113939 PM
Easy Peasy right??
Here's some great advice: Start a new blog...a sample, "fool around" blog, and just try stuff out on it. Google some tutorials...that's how I learned. In your Settings, you can choose to make that Sample Blog private, and hide it on your profile so no one sees it. Then play away...who cares if you mess up! You can see how things look on your Sample Blog first, practice, and then try it out on your new blog.

* If you have a new blog, you have to find the old blog design options hidden in a secret place.  Here's how:  In your dASHBOARD, go to the Design Tab.  You will see 3 tabs at the top: Page Elements, EDIT HTML, and Template Designer.  If you want the Stretch or Minima Templates they are in the EDIT HTML section, NOT the Template Designer section.   Hit EDIT HTML and scroll down to the orange : "Old Templates" section at the bottom.  Hit Select Layout Templates...you will see the Minima and Minima Stretch options!


Check out these cute headers made from this tutorial:
I'm so proud of you! (and I'm proud of me too, for actually explaining something and having it make any sense for once.)
Melissa's
Tawny's
Rachel's
Jennifer's
Beth's
Mandy's
Abbey's
Donna's
Casey's
Jodi's
Lindley's
Jaclyn's
Kelly's
Vicki's
Jenny's
Sara's
Cheryl's
(If you have one you would like to share, leave a comment below!)

If you want to get a little more creative with different fonts and scrapbook paper backgrounds, or are interested in making scrapbook pages with Picasa HERE is a great tutorial.

If you are still confused, HERE is a great step by step video series of tutorials on making collages with Picasa that can help you get started.

If you have completely given up and still need a blog banner, Heather makes the cutest ones I've ever seen and they are extremely affordable.  HERE is her shop, and HERE is her lovely blog.