For PSP V7Home   >   Tutorials   >   PSP 5 & 6 Effects   >
Valentine Web Banner and Bar
E-mail this tutorial to a friend  Email to Friend

Valentine Web Banner and Bar
Created by: Carolyn Ross

Valentine Banner
Valentine Bar

Download this tutorial fileDownload file 1

Download this tutorial fileDownload file 2
To prepare for this tutorial you will need a number of Valentine postcard images or simply images with a Valentine theme, roses, candy, hearts, etc. There are some in the first download file, but gather as many as you can find before you begin. The colors will not matter for the completed banner.

The second download file is a tube that we will need for the bar in the second part of this tutorial. Just place it into your "...\Paint Shop Pro\Tubes" folder before you begin (PSP 5 users take the "MyHeart_v5.tub" file, PSP 6 users the "MyHeart_v6.tub" file). PSP 5 users also have to edit the file "Tubes.ctl" in their Tubes folder with the Notepad editor: At the end of the file, just fill in these lines (you can copy them here and paste them into the Tubes.ctl file):
TubeName:MyHeart_v5
TubeFile:MyHeart_v5.tub
StepSize:10
TubesAcross:1
TubesDown:1
TotalTubes:1
TubePlacementMode:0
TubeSelectionMode:0

Valentine Banner

Begin a new document for the banner 600 x 100, background white.
Open all the files that you will be using for your banner background. I used 7 small postcard-type images to fill my banner, but it will depend upon the size and placement of your images to determine how many you will use.
Click on one of the Valentine images to activate it and, using your Selection tool set to Rectangle or Ellipse, make a selection of the interior, leaving a margin around your selection.
Go to Selection || Modify || Feather and feather the image by about 10 pixels. Press Ctrl-C (Edit || Copy) to copy.


Click on your banner image and press Ctrl-L (Edit || Paste || As New Layer) to paste the image as a new layer. Use the Deformation tool to shrink, rotate and place the image along the banner bar. Later you will be feathering this image as well, so keep the main part of the picture, the part you want to see, closer to the middle area of the banner.

Notice that I have pulled the viewing edges, this makes it easier to grab the Deformation tool handles when placing the pictures.

Click to activate another image and repeat the same process, selecting, feathering and copying. Continue to place the images along the banner, trying to fill the banner with the postcard pictures. You can move the layers around in the layer palette as well, till the images are to your liking.
PSP 5:     PSP 6: Turn off your background layer, be sure that one of the other layers is the active layer and go to Layers || Merge || Merge Visible.
Convert the image to greyscale: Colors || Greyscale, and then go to Colors || Increase color depth || 16 million colors. Then use Colors || Colorize. You can colorize to a color that you like. I used a Hue of 247 with a Saturation of 100 to get a reddish color. Click on OK when you are done.
While still on your merged layer, double-click on your Selection tool. Enter the following:
Left = 20
Right = 575
Top = 21
Bottom = 80
Custom size and position = selected
Then go to Selections || Modify || Feather and feather by 10. Invert the selection (Selections || Invert) and press Delete. Deselect (Ctrl-D) and reduce the opacity to 40 by sliding the opacity slider in your layer palette for the merged layer to the left.
Your background color should be the color of your web page. If you have a texture on your page, you should have the same texture as the background of your picture. If I made a page with a very light pink background (R248 G238 B248), I would fill my background with that. You can just leave it white if you will have a white page.
Be sure you are on your merged layer and double-click on the Crop tool. Choose "Select opaque area - current layer" and your image will be selected, click on OK and then on "Crop Image" in your Control / Tool Options palette.
Create your title now. I chose a 48-point font called "Leslie" but you can choose any font that you like and a size that is very visible. Make sure you have checked Antialias and Floating Selection.
Once you have your text positioned, add a drop shadow if you like (Image || Effects || Drop Shadow). I added a drop shadow with a color (R=128, G=0, B=0) in the same family as my red text so it would have just a hint of color. You can save your file as a *.psp file in case you decide to change the text and reuse your banner, but save it as a *.jpg for use on the web.

In PSP 6 you can go to File || Export || Jpeg Optimizer for that. I used:
Compression = 35
Format = Progressive

Valentine Bar

To create your horizontal bar is really easy. Begin with a new image, 600 x 10 pixels, background white.
Use the color red (R=255, G=0, B=0) as your foreground color, set your background color to white.
Begin by opening your Tubes tool and picking Myheart, which you downloaded and placed into the proper directory earlier. Click to position a heart into the right edge of your image. You can magnify the work area to help you see what you are doing.
PSP 5: Next use your Line tool and set it to:
Line Type = Normal
Width = 1
Antialias = checked

PSP 6: Next use your Drawing tool and set it to:
Type = Single Line
Style = Stroked
Width = 1
Antialias = checked
Create as vector = unchecked

Beginning at the center of the very left edge of your image, hold the shift key down as you draw a straight line ending at the beginning edge of the heart.
If you wish you can now draw a little arrow at the end of the line, pointing to the heart. Draw it with the Line / Drawing tool and fill the center with the Paint Brush, síze set to 1.
PSP 5: To save your bar as a transparent GIF, you first have to set the palette transparency: Go to Colors || Set Palette Transparency. You're asked if you want to decrease colours to 256, click on "Yes". In the following dialog box, choose "Optimized Octree" for the Palette, "Error diffusion" for the Reduction Method, and check "Reduce color bleeding" in the Options panel, then click on OK. Now select "Set the transparency value to the current background color" and click on OK again.

You can now go to File || Save As and select "CompuServe Graphics Interchange (*.gif)" in the File-Type drop-down box. Click on "Options" and make sure that "Version 89a" is selected since the older version doesn't support transparency. Click on OK, name your bar and save.

PSP 6: To save your bar as a transparent GIF go to File || Export || GIF Optimizer.

On the Transparency tab, check "Areas that match this color" and change the color to white by clicking in the color box and picking white. Change the Tolerance to 40%, which is quite high but will pick up any white pixels surrounding the red line.

On the Partial Transparency tab you can check "Use full transparency for pixels below 4% opacity" and "Yes, blend with the background color" (which should be set to the color of your web page; click on the color box to change it if it is not.)

On the Colors tab you can set the number of colors to 256 with 0% dithering and check "Optimized Octree", but do not check "Include Windows' colors".

On the Format tab, check "Interlaced"; "Version 89a" should be selected already.

Click on OK and save your horizontal bar as a GIF.