Left-Side Border
For this lesson you'll need to download this image. Right click and Save As in IE, or Save Image As in Netscape. We'll be making a very basic left side border with a drop shadow. You'll learn how to copy and paste an image into a new image and how to add the drop shadow.
These are the tools we'll be using for this lesson.
Once you have PSP started up, open a new image making the background white by going to:
File > New
Make the image 175 high and 1200 wide. The image may look small, this is when you use the zoom tool. Just left click and the image will get bigger and a right click will make it smaller. Then just minimize that for the time being.
The settings should look like this for a new image:
Now, open the image you downloaded and follow these steps:
- Click on the Magic Wand and place the cursor over any of the white area and left click
once. Your image should look like this:
Image1
- Go to the top of the page and click on Selections, then click on Invert. Now your image
should look like this:
Image 2
First, bring up the window for your new image, if it's been shrunk. Second, use the zoom tool to make it bigger. Third, click on the top bar of the original image, it should still look like Image 2.
- Go to Edit > Copy
- Click on the top bar of the new image
- Go to Edit > Paste > As New Selection
- You can move the image around by left clicking and holding the button down and releasing
it when you have it placed where you want it. For this lesson you'll want to place it to
the very left side of the new image. Like this:
Image 3
Next is to add the drop shadow. To do this leave the image as it looks in Image 3 and follow these steps:
- Go to Image > Effects > 3D Effects > Drop Shadow
- Set your settings as it looks in Image 4
Image 4
- Click OK
- Go to Selections > Select None
- It should now look like Image 5:
Image 5
- Click here to see as a full background.
To put your bordered background on a web page, add it into the <BODY> tag like this:
<BODY BACKGROUND="your_filename" ...... >To display your contents on a page with a bordered background, keeping them clear of the border, insert this simple code directly below your <BODY> tag:
<TABLE WIDTH=85% ALIGN=RIGHT><TR><TD>
Your content goes here......
then insert this code directly above your </BODY> tag:
</TD></TR></TABLE>.
You may need to adjust the WIDTH percentage to fit your particular background.
Congratulations! You did it! You can do all sorts of neat things once you have the bordered background in place. You can take your magic wand and select only the white area of the background and make it any color you wish for instance. Maybe even use the eye dropper and pick out a cool color from the picture itself. This is a great way to pick out a color for the background because you can match the colors better to enhance the bordered background picture. This is just the basics! You can use your individual artistic ability to create your very own great backgrounds. Next we will show you how to make a divider line for your bordered background to give it more of a finished look!
Take care in
the width of your border. If you make it too wide, you will not have much room left for your
page contents. Somewhere around 100 to 150 pixels is a good border width.
To learn a better way of setting up your page with a bordered background, take our Tables class.
The content and design of this site are the property
of WebTech University
and may not be used without written consent of the owner.
Copyright © 1998-2012 WebTech University. All rights reserved.
Privacy Statement