Tutorial written Nov. 15, 2001

I suggest that for the first background that you make you use my textures.
So that you can get the feel for how this type background should be done.
If a heavy print or a texture with a lot of detail is used it's harder to match the seams
when cut and put back together in HTML. This is something you will have to play
with once you've gotten some experience in making this type background.
 

To see the background we will be creating in this lesson click here.

What's Needed for this tut..

You can download a trial version of PSP7
 

html zip
On your desktop create a folder named Images.
In this folder unzip the html.zip

My texture..

Right click on texture tile and Choose "Save As" save to the folder you created
on your desktop. Open texture in PSP and set aside.
 

1.) Open a 700x700 transparent
Set foreground to pattern, find the DBA_texture1.jpg of mine that you
have open in PSP.
Add a new Layer naming it background. Flood fill this layer with the texture.

2.) Set foreground to solid color #8E672D
Preset Tools, set to
Rectangle
Antialias Checked
Create as a vector Checked
Line width set to 10

Have your canvas zoomed out by 1 so that you can see the whole canvas.
You don't have to be perfect in sizing your rectangle but get pretty close.
Leave a small area on top, bottom and both sides like this...

Once you have it like you want, go to Layers Covert to Raster. Go to Edit, Copy.
Now let's undo the vector rectangle we made so that we can paste the copy back
as a new layer and it will be centered on your canvas perfectly. Undo all the way back
to your texture layer. Now go to Edit, paste as new layer. On your palette rename this
layer to border1.

3.) Preset tools Same as above except change line width to 6
Change foreground color to #116311

Draw another rectangle inside of the brown one. Make it just a tad smaller, like this..

Convert to Raster. Go to Edit, Copy. Back to canvas and undo the rectangle.
Edit, Paste as New layer. It should be centered now! Hide Layer1, and your
background layer. Merge two border layers visible. Rename to border.

4.) Go to View, Normal View. Scroll to the top of your image.
Selections, Tool set to Rectangle, Antialias UNchecked.  Feather 0

In the left hand corner select the corner area like this...

Go to Edit, Copy. Now paste this as a new IMAGE to have for later use.

5.) Back to your canvas. Selection, select none.
Go to Edit, Paste as new layer.
You should see your corner piece. Click on the Deformation Tool, now rotate
the corner piece so that the points are downward. Like this..

Set the deformation. Using the mover tool, move the corner piece to the left hand top of
your background. Over lap the ends of the corner piece over your border. Like this..

6.) Go to Edit and hit Copy. Edit, Paste as new IMAGE. This is so we don't have
to go through the rotating each time.

7.) Use your Eraser Tool set to
Square
Size5
Hardness, Opacity and Density set to 100
Step 25
Zoom in if you need to..
Remove the area of the corner piece that overlaps on to your border like this...

Go to Layer Duplicate, Image Mirror. You should have one in the right corner now.
Move it into position if needed.

8.) Go to your rotated corner piece we pasted as a new layer. Make it your active
image. Go to Edit, Copy. Now back to your background canvas. Go to Edit, Paste
as new layer. Move into position beside the left corner you have there. Use the
eraser tool to remove the area that over laps onto your border. Copy & paste this
layer all a long the top of your border until you reach the right side. Do any pacing
adjustment you might need.
(tip.. I found this easiest to do by turning on my ruler and placing a corner piece
in the center of my frame then working from the center to each end piece.)
You should end up with something like this...

Hide Layer 1, background layer, and border layer. Merge all corner pieces visible. Rename
as detail.

9.) Scroll down to your right bottom corner.
Now remember that first copy we made of our corner piece? Not the rotated one but the
other one.
Make it active. Go to Edit, Copy. Back to your background canvas and paste as new layer.
Move this corner piece into position in the right lower corner of you canvas. I did not have
to use the eraser tool to remove any overlap on this but you may have to. Here is what mine
looks like...

Go to Layers, Duplicate. Image Mirror. You should have a corner piece on the left side
now. Adjust position if needed.

10.) Hide Layer1 and background layer. Merge layers visible, rename to frame.
You should have something that looks like this, but larger of course...

11.) Now we are to the point where we could put a inner bevel on our frame layer or add a
Blade Pro preset or just a simple drop shadow. Play around here and find something you
like. I'm leaving mine as it is.

12.) When you are finished with whatever you decided to do to your frame layer. Merge All
layers Flatten. Save As this as framebg.psp

Now you know this would be way to large to use on a page, so we need to cut it up into 3
usable pieces. We will have a top, a middle and a bottom when we are finished.

NOTE..... Before we start cutting out our pieces let me explain a little of how this type
background works. The top and bottom parts of this background will actually be images,
not backgrounds. They will be just like you add a banner or any other image to a page.
The middle section is what will be the actual table background and will grow as you add
text and images. Now with that in mind lets get started.

13.) Go to Windows, Duplicate, do this 3 times so that you have 3 duplicates of the
framebg.psp. Now close the original framebg.psp We will be working with our 3 duplicates.

14.) Make active one of the duplicate layers. Go to View and bring it up to Normal Viewing size.
Scroll the window all the way to the top so you can see all of the top of the image.
Double click on the Crop Tool  It will bring up a box. Set to the settings below..

Click ok. Now place your mouse inside the lines on the image and double click to make the cut.
You should now have an image that is 700x122.
Save this image to your Images folder I had you make as top.jpg
All the sections we do will be saved to this folder.

15.) Make Active the second duplicate, bring up to Normal Viewing Size. Double click on the
crop tool as before, set to these settings...

Click ok once again. Place you mouse inside the box and double click. Your image should now
be 700x104. Save this image as middle.jpg

16.)Make active your last duplicate, bring up to normal viewing size. Using the Crop Tool with
these settings...

Click ok once again. Place you mouse inside the box and double click. Your image should now
be 700x150. Save this image as bottom.jpg

(NOTE.. you can save as a gif to save on file size. But since I provided the purple background for
you and it is saved as a jpg that is why we will save the other images as a jpg also, so that the color quality
and sharpness will match.)

WHEW!! That part is finished. Take a break, stretch your legs for a bit, the hard part is over!! *L*
Now we get into the actual putting it all back together in html.

Ready now??
17.) Because there are so many different web editors and then there are those that prefer to write their
own html, it's next to impossible to teach you how to set this type background up in all the different editors.
So here is what I have done. I have provided the html for you.
Go to your Images folder that I had you make. Right click on the html.html, choose Rename,
rename to html.txt hit the Enter key on your keyboard to set the new name. You will receive this message...

 Click yes.

18.)Now double click on the html.txt file and it will open in Notepad.
You should have a page that looks something like this...

18a.) Note where the html has < title > Framed Background< / title > This is the name of the page that
shows up in your browser window bar when visiting the page. You can change the Framed Background to
anything you want it to say.

19.) Yours will have a few spaces between some areas and have several more breaks than
mine, because I have condensed mine to be able to get a screenshot of it all.
If you are familiar with html you will probably have no problem knowing how to change the colors of
the text, links etc. But for those that aren't lets take a closer look at these.

20.) Look just below the /head and see the body text?

body text=#009900 you can change the #009900 to any color you want the text on your page to be.
bgcolor is what color the background will be before your textured background loads, this can also be
changed to any color you would like. Also the link, vlink and alink colors can be changed.
Now look at background=Images/astrobg.jpg ( Here we need to change the name of this to
DBA_texture1.jpg
This is where you put your main background URL. For this type background leave the body margins
as they are.

21.) Now lets study for a second the table background..

For this type background we don't want a border on our table so leave BORDER and CELLSPACING
set to 0.
See where it says BACKGROUND= this is where you would place the URL for the location of the middle
section of your framed background that we made. You would replace Images/middle.jpg with what the URL
is once you have it uploaded on a site. If you make another background like this the height we used for this
one does not have to be the same, but the width (700) does or it throws off the table and will not line up with
the top and bottom images.

22.) Now on to the top image..

As you can see the < tr < td sets up the table for your top image. Note it is not a background it is an image.
see the img SRC= " Images/top.jpg "  you will replace the Images/top.jpg with the URL for the top.jpg of your
image we made.
Take a look at the height = 122. Remember we cut our top image to 700x122? This tells our table how large
the image is. If you make other backgrounds like this and the height is larger (remember the width has to be
700 for this background) or smaller, then you will need to change the height on the html to the height the
finished image is.

23.) This next part gives us the table that our text and images will be on. Our background for this table
has already been set in # 24

You can replace the < br > with < p > in places if you want to have more space in between images and text
or add more if needed.
Place all text/images after the < td > but before the< /td >

24.) We are now down to our bottom image. Take a look at this section in the code..

Looks almost like the one in 25 doesn't it?
Well it is basically, but this is where our bottom image goes. This sets up the table for our bottom
image. Just like discussed in 25 you replace the Images/bottom.jpg with the URL of your bottom image we
made. Note too, it has a height and width there. Once again just like with the top image the height can be
changed if you make another background like this that is longer or shorter than the 150 we used here. BUT
just like with the top and middle the width has to stay at 700 in order for this code to work.

Okay now that we have gone over the html for making this type background I hope you understand a little
better how it works. So try putting yours together.

Go to your site now and upload the astrobg.jpg, top.jpg, middle.jpg, & bottom.jpg
Once they are uploaded, copy the URL for astrobg.jpg. Go to Notepad with the html.txt open, paste the
URL for astrobg.jpg in the code as I've explained (see #23)

Now copy and paste the URL for the middle.jpg where it belongs. (see #21)

Copy the top.jpg and paste the URL where it belongs (see #22)

Copy the bottom.jpg and paste the URL where it belongs (see #24)

In Notepad go to File and click SAVE.
Once saved close Notepad. Go back to your Images Folder right click on the htm.txt and rename to
html.html. You will get that window again like shown in #20, click yes.
Now go back to your site and upload the html.html to your site.
Now view the page. If you have done it correctly you should see your page all put together in a framed
background like the example one linked at the beginning of this tute.

Well that's it. I hope you have found this tutorial helpful in understanding how to make a framed background,
and how the html works to put it all together on a site. There are so many different ways you can do a framed
background other than using the frames like we did here. I hope this tutorial will inspire you to experiment with
different ways. You can find several more examples of framed backgrounds on my site, if you would like to
browse around a link to Designs By Astro is below.
Have fun!!