The Background Layout Template
There are many PSPer's who have their own blog and have been using background layouts created by others. This tutorial is to help you create your own background layout for your own blog.
What I have done is created a PSP template for you, for a two column width layout, that is 1500 x 780, which you can download here.
Step 1
When you open the template - you will see the white layer extends the full length and width of the template. The purple layer is the entire width of the panel on both sides, and the aqua layer is a portion of the purple panel.
When creating your background layout, you can colorize the white layer to any color you wish or flood fill a paper design on this layer. This area (between the two panels) is where your blog graphics and text will go.
Step 3
With the panels - you have the option to only use the large panels for your background layout (the purple layer) or to add a two panel background layout (adding the aqua panels). For each layer of the panels, you can flood fill with your favorite papers. You can also add your favorite elements to the panels as well. The white portion, in the middle of the two columns, is the size for your text and graphics in a two column template.
Step 4
When you have finished creating your background layout, first, save your file as a PSP file with all the Layers intact. Now go to Layers/Merge/Merge all Flatten, rename the file, and save as a gif file. You should have two files now - one a PSP file and one a gif file. The reason you are saving a psp file is so that if adjustments are needed, you have all your layers intact and making any revison is very easy. DO NOT SAVE your flatten file as a JPG but do save as a gif file and I will explain why. For those of you who have FREE photobucket accounts - you will not be able to upload and keep the file size of a jpg. Because of its density, Photobucket will compress it. But you will be able to upload a gif which is an optimized file and is less dense than a jpg. You will be able to retain the entire size of the layout file after uploading it to Photobucket.
Step 5
If you wish to make a matching header, open a new transparent image with a width probably no larger than 660 (you want it to fit nicely within the text area). Add your text and graphics. Go to Layers/Merge/Merge Visible and save as a png file. A png file will work with any color background. This size will work with Photobucket and will retain its full size when uploaded.
Uploading to Photobucket
Step 1
In Photobucket, you will do the following before uploading - click where it says options and select 1 megabyte file size. See screenshot below:
Step 2
Upload your images to Photobucket.
Customizing Your Blog
Step 1
Once you have uploaded your header and background layout images, you will be customizing your blog. To start out with, make sure your original Template is a Minima Template. To do that, do the following:
1. At the very top, right hand side of the blog - Click Customize. You will be taken to the "Add and Arrange Page Elements" screen.
2. Click the Layout Tab
3. Click the Edit Html Tab
4. In your html file, you will have something like this:
Blogger Template Style
Name: Minima
If your Template Style is not Minima, select a new template style by clicking the Layout Tab and Select New Template Tab. Do not worry, changing the template style will not delete any of your gadgets or text.
Step 2
Go back to "Add and Arrange Page Elements" screen and left click the bottom centered rectangle which says add a gadget (this is where you will add the new background layout). Once you click that you will see this screen. Left click on HTML/Java Script.
1. You should now have a screen that says Configure HTML/Java Script.
2. At the top, you will see an area called Title. Type in the name of your layout.
2 Below you will have an area called Content. Copy and paste the html that I have below in the white box.
In the area that is red, between the parentheses, take out the words direct link and replace with your Photobucket html direct link of your background layout. Do not remove the parentheses. The Photobucket html direct link code needs to be placed inside the parentheses.
If you already have a background layout that you have added before this new one, do remove it - otherwise the one you have created will not show up. You will see if you have a previous one on the layout page in one of the bottom rectangles. What I do is save the coding of a previous background layout in Notepad (as a txt file) in case I want to use it again at a later date.
Step 3
1. Go back to the "Add and Arrange Page Elements" screen and this time left click the top centered Rectangle. This is where the header goes.
2. First left click where it says Remove Image (if you had a previous header).
3. Check off from web and in that box add your Photobucket direct link for your header.
4. At placement: Click instead of title and description
5. Click save. 
Testing Your Background Layout
What I do is save my layout as a psp file in layers and save a second file that is flattened as a gif. Then I try it out on my blog to see how it looks. You may find sometimes you do not have enough side background showing, or you may see your graphics are only partially showing on the sides, top or bottom of your blog. Keep your blog open and open your Paint Shop Pro program. Using your PSP file, make the adjustments needed, and resave both your psp and flattened gif file. Reupload you gif file and try it out. Remember, as long as you have your PSP file in layers, adjustments are easy!
You may also notice your bottom panel is not showing enough on either side. If that is the case, on the panel above, make it a bit thinner by using the deform tool and pushing the sides inward to reveal more of the bottom background.
Comments and Sharing Your Results
Please do let me know how this tutorial worked for you. If you have created your own Customized Background Layout, do share the link with me so I can see! You can post your comments at the Blog or email me here.
