How to Create a Simple, Left-Hand Bordered Background

Welcome to my first tutorial in the Absolute Beginners series. Like all other tuts in the beginner collection, this tut is short, sweet and most important of all: simple! So let's go! :)

Note: This tutorial may be downloaded or printed out for personal use only. It must not, under any circumstances, be taken from this site in its entirety or in parts and passed around Yahoo or MSN Groups, re-posted on other websites or passed on to other individuals. Placing a link on your Group's site or your own site is fine, and passing links around is also fine. But links ONLY please. There are logos available on my resources page if you wish to use one. Thank you for your co-operation.

As always, if you have any questions about this tut, or any comments or suggestions in general your feedback is always welcome. Just click on the link above to contact me.

1.  First of all, to see a finished version of what we'll be making, have a look right here. OK, now down to business. Open a new image that is 100 pixels wide by 100 pixels high with a transparent background (see below, left). File>New>Create New Image.

Tip: A quick way to open a new image is to simply click on the open new image icon in the top left-hand corner of the toolbar, which should look something like this: 

2.  Now open the materials palette....(see right). We'll need to change the foreground colour fill, so click on the colour changer (shown at 1) and then go to the pattern fill, (shown at 2)

3.  Click on the drop-down menu for the pattern fills and select the blue tartan pattern. Make sure the Angle setting is set to '0' and Scale is set to '100'. Click 'OK' (see below, left).

4.  Now we need to fill our image with the pattern. Go to the fill tool and click on it to select. Now move your mouse over the center of your image, and left-click to fill. This is what you should now see:

5.  Well, it's very pretty and all that.....but I know what you're thinking: where's the rest of it?! OK, now we'll take care of that part. Go to Image>Add Borders. (Note: this will bring up the Auto Actions dialogue box - just click OK and don't worry about it. If you'd like to know more about Auto Actions, you can find out more here, but it is NOT necessary to know this stuff for the sake of this tutorial.)

6.  Before we add the main part of our border, let's give the pattern edge some definition by putting a band on the edge of it. Run your mouse over the colour box inside the Add Borders dialogue, and you'll see it's changed into the eyedropper tool. Right-click on it, and this will bring up a smaller dialogue box with the most recent colours you've used in it. (Note, if your version of PSP8 is brand, spankin' new this section will be empty, so choose a colour from the permanent section at the bottom, see below).      7.  Click on whatever colour you wish. As you can see I chose a dark blue. Make sure the symmetric box is NOT checked, and then set the 'Right' border at 5 pixels. Just ignore the other settings. Now hit 'OK'. Boom! An instant border :)

8.  Just one more step and we've finished! Now, what we have is a pretty tartan square with a neat little band on the right-hand side of it....but for it to tile properly across, and down a web page we'll need to add a much bigger right-hand border. Open up the Add Borders dialogue box again. Repeat the same steps as above for adding a border, but this time choose white for the border colour. Once again leave the symmetric box unchecked, and go to the Right Border setting.....but this time instead of 5 pixels, enter 1200 in there. (This is so our border won't repeat itself across the page on larger monitors).

9.  Click 'OK' and that's it! Don't forget - save your image! File>Save As and give it whatever name you like. Voila! We've finished....and you've just created your very first left-hand bordered background. Congratulations :)