banners 101

In response to your request here is my banner tutorial. Trust me I know this is a lot of information, it took me a long time to put together, so just take it step by step and email me with any questions. Oh and I have been over this numerous times, but please forgive any typos as I'm sure I've missed some.

I'm using Photoshop CS2, but this would work the exact same for other versions of the software or PS elements. I am sure you could do similar things in other image editing programs, but I'm not as familiar with them so I can't help you there. Also I am using the Windows version of PS so will add the mac commands as I know them.

Step one - New Document
In PS go to File/New or ctrl N (cmd N for mac) and a pop-up menu (shown below) will open that will ask you to put in the appropriate info.
I've highlighted the changes you need to make. Most of your blogs are 660px wide, but you can change that number to whatever you want. I use 800px because the content of my blog is 800px wide. Height can also be changed to your preference, but I tend to always do around 250-275px, depending on what I'm doing. Make sure the resolution is set at 72px, which is best for web graphics. Also check that the color mode is set to RGB color.

click OK.

Step two - Add photo
You now have a blank canvas to design however you choose. I almost always use a photo so that is what I will show you.

First you need to open a photo by clicking file/open or ctrl O (cmd O for mac). Then you need to resize the photo you just opened by going to image/image size or ctrl+alt I (cmd+opt I for mac). A menu box appears (shown below) and I have highlighted the info that you need to change. First off make sure resample image has a check by it and that the resolution is set at 72 pixels/inch. Then change the width of the image under pixel dimensions to the width of your banner, so that would be 660px if you are following me from above. The height will automatically change.

Click OK. The photo will now appear smaller.

3. Step Three - Moving image
Now you want to move the image you just resized into the blank banner document. Do this by clicking the move tool or V. I have it circled above shown in the tool window. It is an arrow with what looks to be a + sign next to it. Next click on the image you just resized and while pushing the mouse button move cursor into the new banner document. Release finger. You should now see the photo in the banner. Next, using the same technique, move the image around until it is lined up where you want it to be.

Step Four - Add the finishing touches
This is where it gets a bit tricky and I would encourage you to get to know the PS program. This is your chance to design the banner however you choose. Making it yours. If you want to add text click on the T in the tools window (circled below). Next, click on the banner and type in the text. You can change font and size in the tool bar (circled below). You can also change color by double clicking on the white box in the tool window and picking what ever color you want from the pop-up menu.


Step Five - Saving file
To save file click File/Save As or Ctlr+shift S (cmd+shift S for mac). Make sure the file is saved as jpeg and not a psd. Save it to what ever folder you would like, preferably one you will remember (i save all mine to the same Web folder)

click ok.

Step Six - Upload to host site
You are now ready to get your banner hosted. We are lucky these days there are many sites that 0ffer to host your photos for free like Photobucket or you could also use Smugmug, however this one is not free. At any rate if you have an account to a web hosting site great, if not sign up for an one. Since I can't tell you how to navigate each site just follow the instructions on the web site to upload photos. It should be very easy and self explanatory. If you are still confused email me.

Keep in mind if you are using the new blogger template or page elements (described below) you do not have to host your banner. You can skip this step.

Step Seven - Add banner to blog
This has two different parts depending if you have the old template or the new upgraded template. Keep in mind you can still have the new blogger, but have the old template. You will know if you have the upgraded template if you change the look of your blog by customizing your template with page elements. Another indication is on your dashboard it will say Manage: posts, settings, layout (instead of template). Just so you are aware if you are using the new template your banner will have the blogger header around it like on Victoria's blog. There is no way I know around it.

For the Old Template
1. Go to your Dashboard, click template. Then look for this block of codes in the template:

It may look slightly different depending on your template design, but it should start with blog header and end with div. Disregard the red type

Next Replace that entire code with this code below...don't worry about screwing up as long as you don't hit save template you can always go back.

Next you need to get the url code of your banner from your host site and replace it with "your url here" that is in red. In smugmug it's as easy as rt clicking (ctrl click on mac) on the photo, click properties, and copy & paste the url. In photobucket it will be the code next to URL link under the photo.

Once you have replace the url click preview to make sure it looks the way you want and then save template.

Instructions for upgraded template
1. In your dashboard click Layout then click edit html. Next look for this block of codes in the template:

Change maxwidgets='1' to maxwidgets='4' and change showaddelement='no' to showaddelement='yes'. Click save template. Then click Page element tab to go back to layout. You will see an extra Add a Page Element above the Header.

Next click Add a Page Element and a pop-up will appear. Select Picture and click Add to blog. Another pop-up will appear that wants you to configure your image. It is best to leave the title blank. If you want a caption below the image, then fill it in your caption, otherwise leave it blank. If you have your photo stored on your computer, click Browse, then select the photo from your computer. If you want Blogger to size the image to fit into your header, then check the Shrink to fit (default). If you want the image to be exactly the size of your original image, then uncheck shink to fit. Click Save changes

If your photo is already hosted on the web ie photobucket or smugmug, then check From the web and type in the URL of the photo, and then click Save changes.

Of course always make sure to preview blog before making changes. If you don't like it you can always delete the page element and start again.

Good Luck and please let me know if you have any questions.
:)