Triple Border Background Tutorial
Created January 11, 2002 © Copyright Moon's Designs
Property of Moon's Designs
This is my creation, any similarity to other tutorials
on the Internet is unintentional
Please do not copy or place this tutorial or any graphics
to any other place without written permission directly from
me. Thank you
When I started creating my Linkware Sets
I had several requests for how I set up the html for the triple
background, so I decided to write this tutorial and take it
one step further. I am also going to explain how I make the
tiles, strips and buttons. There are many creative people
using PSP and I want to help them in making their own sets.
My Linkware is designed for those who do not have a graphics
program or have no inclination in making their own sets.
This tutorial is a guideline as to how I
set up a webset. You will naturally want to make your set
to reflect your personality and creativity. The html is basic
for the triple border, you can change the text colors, cell
spacing and % to your tastes.
This tutorial is written in and for PSP Version
7.04 and assumes you have a working knowledge of PSP at an
intermediate - advanced level. I am sure this can easily be
done in Version 6 with a few adjustments in paths but I have
only used Version 7 so I can't make promises *S* This
tutorial also assumes you have a working knowledge of HTML.
You will need:
JASC's PSP (30 day free trial)- You can get it HERE
20/20 (if you want to make it seamless)- You can get it
HERE
This is a stand alone program that you just need to run.
The first thing you need to do is decide
on the color of your webset. I make my first background a
darker color. I also prefer to have stars (sparkles) on my
first background and sometimes animate it. I make my inside
border (the one you see here that I am typing on) a lighter
complementary color. My strip depends on my mood, LOL. I might
make it gold, silver, or a color in between by first background
and the inner background.
Here are the steps I use for setting up the
tiles for my Linkware.
Step 1:
Open a new image 150x150, 16 million colors, transparent background.
Set your foreground color to the darker color and flood fill
your background.
Step 2:
I like to add a little texture to my backgrounds. You can
either go to Effects-->Texture Effects-->Texture and
add your favorite one or if you have the Texturizer or Craquelure
plugins you can add one of those. I am sorry I cannot offer
either of those filters to you as they are copyright of Adobe.
If you should happen to have Adobe Photoshop 6.0, those filters
are in that program.
Step 3:
If you would like to add a sparkle
to your background now is the
time to do it. I prefer using
VM Natural Sparkle Filter that
you can download at HERE.
Step 4:
I then take my tile into 20/20 to make it seamless. Yes, there
are other filters out there that will make your tile seamless,
but I have found that 20/20 does the best job for me.
Go to Edit-->Copy (Ctrl+C) to make a copy
of your tile. Open up 20/20 and Paste as a new image (Ctrl+V).
Your tile will be in the center of your work area. On
the toolbar click on Image.
Click
on Seamless Tile and it will convert it before you very eyes.
I then copy it and bring it back to PSP and paste it. Then
save to your desired folder with the name tile1.jpg, or whatever
you want to name it. You can close both of these tiles. It
is not necessary to save the one that you made before making
it seamless.
Step 5:
Now it's time to make your inner tile. Follow steps 1 thru
4, although I don't add a sparkle to this tile *S*. After
you have made your seamless tile and have brought it back
into PSP, delete the other one so you don't get confused.
It is very important that you have the seamless tile for some
other uses that I will be explaining in a little bit. I save
the seamless tile twice. I first save it in PSP with the name
tileinfo.psp. I also save it as a .jpg. I usually name it
tile.jpg. You can close your .jpg tile but leave the tileinfo.psp
open.
That's how I set up my two tiles. I set up
the tileinfo.psp because I use different textures, fonts,
colors, etc. in my websets and I want to remember what I used,
especially if I need to make additional buttons for the set.
You can save all of the information by going to Image-->Image
Information and clicking on the Creator Information tab.
As you can see, above, I have the necessary
information that I wanted to save right here.
For your strip you can use a plain color,
a Blade Pro preset, Ulead Art Texturizer, a gradient ~~ well
just about anything. I prefer the Silver filter from Flaming
Pear. The Silver Filter is part of their Designer Sextet series.
It is not freeware, but you can purchase it HERE.
I normally make my strip 35x199, flood fill it with white
and then add my silver preset or a Blade Pro preset. I save
that as strip.jpg in my folder.
This is how I make my buttons, logos, guestbook
etc. Remember I told you about saving your seamless inner
tile because we were going to be using it later? Well, now
is the time I use it. On your PSP Color Palette in Styles,
you have your choice of a solid color, gradient or pattern.
Click on the arrow and choose pattern.
Click that on and you will get an edit button,
scroll up to your tileinfo (or whatever name you saved it
as) pattern and choose that.
The new image size depends on if I am making
a button, a bar, or guestbook. A welcome or enter button will
be larger than if I am making an E-mail button. Open a new
image to your desired size and flood fill it with your pattern.
Put what you want on that button and save it as a jpg in your
folder. Because you used the seamless pattern in floodfilling
it will blend in with your background. Here is an example.
Setting up the HTML
Many people just copy and paste the code
from my source and I don't have a problem with that, as long
as they begin with the <body> tag and not before. Unfortunately,
for some people on certain servers, or using some page editors,
the copying and pasting doesn't work.
Regardless, it is always a good idea to learn
to write your own HTML. This is the proper method (at least
what works well for me *grin*) in setting up your triple background
tables, or "nested" tables as some call it.
Upload your graphics that you will need to
your own file directory. Set up the page as follows. You will
have to change the name of your file to what you named it
and where it is located on your host (I have that in green).
