For PSP V7Home   >   Tutorials   >   PSP 7 Effects   >
Valentine Web Banner and Bar
Download this tutorialDownload (29kb)
E-mail this tutorial to a friendEmail 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 preset shape that we will need for the bar in the second part of this tutorial. Just place it into your "...\Paint Shop Pro\Shapes" folder before you begin.


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.
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 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.

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.

Set your foreground style to Solid Color (click on the little arrow in the Foreground Style box and choose the icon on the left) and your background style to None (click on the little arrow in the Background Style box and choose the icon on the right). Click into the Foreground Style box to set your foreground color, use the color red (R=255, G=0, B=0).
Begin by opening your Preset Shapes tool and picking Myheart as the shape, which you downloaded and placed into the proper directory earlier. Check the boxes for "Retain style" and "Create as vector". Now drag a small heart at the right edge of the image. You can magnify the work area to help you see what you're doing.
Next use your Drawing tool and set it to:
Type = Single Line
Width = 1
Line style = #3 (arrow at end)
Antialias = checked
Create as vector = unchecked
Close path = 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.

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.