Streamlined Background Set
tutorial by Whisper

This tutorial was created and put on this site on June 20, 2005.
It is property of and ©2001-2005 to Whisper's Web Works.
Terms of Use

For this tutorial you will need:
Paint Shop Pro  ~ download a trial version.
Eye Candy 4000 ~ the demo version will not work for this.
A photo of your choosing.  If you would like to use the same one I am using click here,
then right click and save the image to your hard drive.
HTML knowledge or know how of an HTML editor.

This tutorial is written in four parts:
Making the background.
The Image Slicer.
Coding for the .HTML page.
Inserting an iframe into your page.

I do not profess to be able to teach HTML so please bear with me!

Open the photo you would like to use for your background set.

Shift + D

Close the original photo.

Resize your photo:
Width 800
Height will vary
Resample using Smart size
Maintain ratio checked
All layers checked

Edit > copy.

Open a new image:
800 x 600 pixels
Transparent
16.7 Million colors

File > Save as > streamlined.pspimage

Be sure to hit your save button on a regular basis!

Activate your selection tool and set at:
Rectangle
Feather 0
Anti-alias UNchecked

Set your cursor at x:0, y:0.  (These coordinates will be found in the bottom right of your PSP window.)

Click and drag down and to the right so that your coordinates are  800,100.

They will look like this:

Edit > Paste > Paste into selection.

(click to view full size screen shot.)

Selections > select none.

Layers > Duplicate.

Effects > Plugins > Eye Candy 4000 > Motion Trail > these settings:
Direction 270
Length 3000
Taper 0
Opacity 100

We should rename these layers just to keep things straight.

Right click on the top layer and rename it smear.

Right click on the bottom layer and rename it top.

Layers > Arrange > Bring to top.

Layers > New raster layer > name - background > ok.

Layers > Arrange > Send to bottom.

Flood fill the background layer with a light color from your smear, I am using #E6D9F7.

In your raster layer adjust the opacity of the smear layer.

I have set mine at 50.

Now let's add a title to the background.

Activate the top layer.

Activate your text tool and set the background color to solid and the same color you used to fill your image.

On your text tool bar set the create as to vector.

Click on the image to create your text.

Here are the settings I used:

Apply your text.

Activate the object selection tool.

Using the corner nodes of the bounding box you can stretch the text to fit the way you want it to look.

(click to view full size screen shot.)

If you want your text centered horizontally -
Objects > Align > Horz. center in canvas.

In your layer palette right click on the vector layer and convert to raster.

Effects > 3D effects > Inner bevel > these settings:
(Click to view a screen shot of the settings.)
Bevel  #1
Width  14
Smoothness  15
Depth  3
Ambience  0
Shininess  24
Color  White
Angle  315
Intensity  45
Elevation  30

Effects > 3D effects > Drop shadow > these settings:
(Click to view a screen shot of the settings.)
Vertical & Horizontal 2
Opacity 100
Blur 3.00
Color black

Image > Canvas size > these settings:
Width 798
Height 598
Placement center

(Depending on what version you have you may need to flatten your layers before adding the borders.
To do this you: Layers > Merge > Merge all flatten.)

Image > Add borders > these settings:
(Click to view a screen shot of the settings.)
Pixels
Color of your choice, I am using #E6D9F7
Symmetric 1

Now it is time to chop it up!

Onto part 2 ~ The Image Slicer.

Back     ~     Tutorial Index