Blog Banner Tutorial

Happy Thursday Everyone! It's finally nice and chilly here in Texas so I'm snuggled up in my big cozy sweater enjoying the weather. As soon as I finish this post I need to get some laundry done because we will be going on a trip to Disney World the week after Thanksgiving! Woo Whoo!! The kids have NO IDEA and we want to keep it a secret up until the Disney bus comes to pick us up from the Orlando airport. So that means I have to pack and get everything together while Maddie is at school. She's way too nosy smart and will want to know why I'm packing. :) Lyndon, on the other hand, tends to be oblivious when it comes to things going on around him! 

Today I want to share with you a tutorial, "How to create a blog banner". I think most of us are trying to learn how to make our blogs better. Whether they be personal blogs or blogs to promote our businesses. It's important to have a nice looking banner as that is the first thing people see when they visit your blog. I hope you find this helpful!

(I made this tutorial several months ago while Dana over at MADE was having her "Create my Banner" contest.)

This is the banner that we will be creating together in Photoshop Elements:

To start go to FILE-->NEW-->BLANK FILE...
from here you will see a screen pop up like the one shown below:

To make the banner the same size as the one on Dana's blog use the amounts shown above. Width: 793 pixels, Height: 235 pixels, and Resolution: 72 pixels/inch.


Once you click "OK" you will see your blank banner all ready to design:

Obviously you won't want to make your banner look exactly like mine but as I show you how I created it you can use these techniques to come up with your own design.

To start my banner I made a yellow border by using the rounded rectangle tool to make a big rectangle right over the top of my white rectangle, leaving a border on the top and bottom but bringing the sides right to the edge of my first rectangle. (See the screen shot below.)

I changed the color to yellow and then using the paint bucket I clicked on the background thus painting it yellow and leaving a round white rectangle in the middle. (See the screen shot below.)

Now you will want to bring in all your photos that you want to use on your banner. (I used pictures directly from Dana's site by right clicking on the picture and clicking "save image as..." then you can save it to a folder on your own computer.) To open them up in Photoshop Elements click on FILE-->OPEN. All of your pictures will now be organized at the bottom of your screen.

After you've opened them all in elements you can start adding each picture to your banner. To do this double click on one of the pictures found at the bottom of the screen. Using the RECTANGULAR MARQUEE TOOL outline your entire picture resulting in a moving dashed line around your picture. Now click on the MOVE TOOL then click on your picture to drag it down to your banner found in the bottom of the screen. As you "let go" of your picture it will now appear on your banner.

Now your picture is on your banner but you will have to shrink it down to the size you want. To resize it simply hover your curser on one of the corners of your picture until you see a diagonal line with arrows at each end. If you click and drag that line in toward the picture the entire picture will shrink proportionately.

I like turning on the grid view which makes it easier to line up the edges of the pictures. To turn on the grid Click VIEW-->GRID.

As you bring in all your pictures and arrange them on your banner, zoom-in on your banner as it will help you align the pictures. To zoom-in push the apple key and "+" key for a mac or control key and "+" key for a PC. To zoom-out click the apple (or control) key and "-" key. (see the screen shot below)

Now that you've arranged all of your pictures on your banner, you can use the TYPE TOOL to write on your banner. To turn the text sideways (as I did for "MADE"), click on the text with the MOVE TOOL then hover your pointer over one of the corners until to see a small curved line with arrows on each side. Click on that curved line and move your cursor up or down to rotate your text.

Once you are finished creating your banner click FILE-->SAVE FOR WEB... You will then see this screen:

In the right column choose JPEG and MAXIMUM.  Then click OK. You will then be given the opportunity to name your file and chose where it will be saved. Now click SAVE and you're done!

Have a great day!

(NOTE: Want a step-by-step cheat sheet for crisper, colorful and eye catching pictures? Download the Key to Pictures Cheat and stop guessing on your camera’s manual settings.)