Wednesday, January 29, 2014

Photo Tutorial: Making a banner collage for your blog

You may have noticed that this website recently got a little facelift! I'd been meaning to update the header for quite some time now, but only recently did I find a chunk of spare time in which to create the photo collage. In total, this project took me about four hours to complete - but about half that time was spent in trial-and-error mode, trying to figure out exactly how to accomplish exactly what I wanted. I'm insanely happy with the results and want to share what I learned so that you too can make your own awesome blog header (without wasting time figuring it all out)!

Some quick housekeeping before we get started - this is a tutorial designed for websites in Blogger, the blogging platform owned and operated by Google. I edited and created the banner in Picasa, (the photo software also owned by Google), so make sure you have downloaded and installed the appropriate software before you continue.

Step 1 - pick your pics
Select the photos you want to appear in your collage by scrolling through your photo library in Picasa and clicking on the desired photo. You'll see a tiny thumbnail appear in the down left corner of your screen; select the thumbnail and then click the green thumb tack to the right - that will hold that and any other photos you wish to include in the collage. Continue to look through your library and select the rest of the pictures you want for your banner (personally, I like an odd number of images). If you no longer want to include a particular photo, click the red circle to de-select the image.

Step 2 - create a collage
Once you've collected the images you want to use, select Create - Picture Collage from the top of the screen.

It'll automatically create a Picture Pile, which will look like a huge mess of pictures - this is completely ok, because you'll manually fix all this in just a moment. To the left of your picture pile is a bunch of settings - make sure that you've selected:
   -Picture Borders - just a picture without a border
   -Background Options - Solid Color (I initially chose black, then changed it to white)
   -Page Format - 4:3 Standard screen
   -Landscape - orient your design horizontally
   -De-select Draw Shadows
   -De-select Show Captions

Step 3 - crop your images
Next, you'll need to crop each of your images to the same size. Right click on each image, then select View and Edit from the options bar. This will take you back to the familiar Picassa editing page. Chose Crop from the lefthand menu, then select Add Custom Aspect Ratio from the dimensions menu. When the size prompt pops up, type in 435 x 910 - this allows you to create a consistent rectangular size for all of your images.

Select that size for your crop, then go ahead and decide what part of your photo you want to include in your banner. The three squares underneath the crop size allow you to chose the amount of zoom you want in your crop. It's up to you which you want to use, but I suggest keeping that consistent across all your photos as well. Use the Rotate button to turn the crop from Landscape to Portrait. Once you've set the crop to your ideal placement, click Apply, then go back to your collage by clicking the Collage tap on the upper righthand corner of your window. Repeat this cropping process for all of your pictures.

Step 4 - arrange your images
By now, your collage probably looks like a random assortment of rectangular images that might not even be the same size. Fix this by manually moving the photos into a line. The circle that appears when you click on a photo is what allows you to rotate and resize (move your mouse up, down, in, out, etc.). Make sure all your pictures are completely straight and the same size. When you make your line of photos, leave about two inches of solid color at the bottom for your eventual title. You will crop all the excess background at the end, so don't worry if there's too much white above or around your collage.

If you decide that you want a different picture, click the Clips tab to the left and choose another photo from your library. Alternatively, if you decide you no longer want a selected picture in your collage, just right click on that image and choose Remove. I ended up not using two of the photos I thought I'd include.

Step 5 - finalize your collage
When you have all your pictures lined up in a fun and fantastic order (this is the first thing that your readers will see when they visit your website, after all!), click Create Collage on the lefthand side of your window. You will now be viewing your collage in the picture editing screen. If you want to make any changes to your collage, click the Edit Collage tab at the top of the screen. If not, this is where you can write your blog's title on the bottom of your collage.

Step 6 - add text to your collage
Click the Text button on the lefthand side. Choose your font, size, and color, and place your cursor where you want the text to appear. Then start typing! Do you want to include just your blog's title, or do you want to add a short description as well? For the purposes of this exercise, I pretended my blog was about beaches and palm trees (probably because it's still 12 degrees in New York City and if it stays like this for one more day I might lose my mind...but I digress). When you're satisfied with the text, click Apply.

Step 7 - crop your final image
One more thing to do in Picassa - crop your image to include the text. Click the Crop button on the lefthand side and you'll be taken to that same cropping page you were on before. This time though, select Manual from the drop down menu - this will allow you to manually adjust your crop to include only what you want (i.e., just the picture and text, no other blank space). Draw a rectangle around your image, and then adjust the edges to your desired crop. Use the preview function to make sure your crop looks just right, and then click Apply.

Step 8 - export your photo
Now you need to get your photo out of Picassa. Click Export on the bottom of your screen. The window that pops up will allow you to chose where you want your photo to end up (I sent mine to my desktop), and it will ask you what size you want your image - make sure you resize your image to 900 pixels - otherwise it will be too large to use as your header.

Step 9 - make that banner yours
Open Blogger in your internet browser, and make your way to your list of posts. Click the Layout option in the lefthand column, and then edit your Header. Choose to upload an image - select your collage, and make sure you choose Instead of Title and Description, otherwise you'll have double titles. Save your settings, and enjoy your new look!

No comments:

Post a Comment