For PSP V7Home   >   Tutorials   >   PSP 7 Effects   >
Film Strip Border
Download this tutorialDownload (162kb)
E-mail this tutorial to a friendEmail to Friend

Working with Tubes 'Film Strip Border'

Created by: Ped


(Updated for PSP v7 by the Prof)

...

(Prof's Note: The Film Strip Border, created by Ped, uses images in a film strip fashion. Any image may be used from photographs, PSP images created from various features or from Tubes. This Film Strip approach provides a very unique way for one to display their works of art on a web page. The side border used here in the introduction is the border created by Ped. -- Enjoy the Tutorial, and Thanks to Ped for sharing it with us. )


This is my first attempt at a tutorial and I hope that you enjoy it. Now like any other tutorial my settings are not the only ones you can use, they are just the ones I used to make the border on this page. The download file contains the border I used plus the five individual images.

All the images were made in Paint Shop Pro using Tubes... most of them from the JASC Software free tube downloads, or were native to Paint Shop Pro version, 5.01.

I do hope you find this tutorial helpful in some way... and will e-mail me at: theped@hotmail.com if you want to comment on this tutorial.

This tutorial came about because a lot of people were wondering how I created the background at my Ares page. So, the technique is the same, even if the images are different.

 

The Images

Open the images you want to use for the side border (any image or ones you created with tubes) or open the JPEG files from the download. My files are 320 pixels wide by 240 pixels high.

If you use my files, you will want to resize them (as you will with other files too). We want border images to be approximately 100 - 150 pixels wide. Mine are 112 pixels wide in the side border image.

  • Use: Window || Duplicate and then close original
  • Use: Image || Resize
    • Pixel Size = Checked
    • Width = 112 (Height will get set automatically = 84)
    • Resize Type = Smart Size
    • Resize All Layers = Checked
    • Maintain Aspect Ratio = Checked
    • Click on OK
  • Repeat above for all files to be used.
 

Setting up the Border

Create a new canvas 300 x 600, white background & 16 million colors.

You also might find using the Zoom Tool will aide when moving the images into their correct position in the following instructions.

  • Copy each image you are using. [Control]+[C]
  • Paste it as a new image on your canvas. [Control]+[L]
  • Use the Mover Tool and move the image, the first to the top left and then each subsequent one underneath. Also make sure the right sides of all images line up vertically.
  • Also, make sure there are no white spaces between the images top and bottom of images.

  • The order of the images I used is: Candy, Leaves, Fire, Coins, Roses

  • If your canvas needs more height,
    • Use Image || Canvas Size
    • Set the height desired.
    • Set Center Horizontal = Unchecked
    • Set Center Vertical = Unchecked
    • Make sure the Top, Left and Right settings = 0
    • The Bottom Setting will reflect the pixels to be added
    • If the Bottom is not White, Use the Magic Wand on that section and then Flood Fill with White

  • Your end result with the downloaded images will be 6 Layers (The five images plus the background).
  • If there is White still at the Bottom, we will remove it later.

  • Once all images are pasted in your canvas, Turn Off the Background Layer, make sure one of the other layers is highlighted and use Layers || Merge Visible.
  • Label this Layer, 'Images'.
  • Turn on your Background Layer.
 

The Text Border

  • Open a New Canvas 200 x 50 Pixels, White Background, 16 M Colors
  • Set your Background Color to one that nicely contrasts with your images. If you are using the Download images, use a dark blue (9,102,172 or hex #0966AC)
  • Use the Flood Fill Tool and paint your new Canvas dark blue.
  • Create a New Layer Labeled 'Text'
  • Use the Text Tool ('A' Icon on Tool Palette)
  • Click in the Canvas
    • Stroke = Null
    • Fill = Solid White
    • Font Name = Your Choice (Mine is Arial Narrow, Bold)
    • Font Size = Around 10 - 12
    • Message = Your Choice (Mine is 'Tutorial Background')
    • Floating = Checked
    • Antialias = Checked
    • Click on OK
    • If the Text is not well centered, use the mouse and hold mouse button down on the text in the canvas and drag to center it.
    • Then, in the Layer Palette, Right Click on the Floating Selection and select 'Defloat'
    • Deselect [Control]+[D]
 

Crop the Text

  • Use the Selection Tool
  • Set Style = Rectangle
  • Feather = 0
  • Antialias = Unchedked
  • Draw a Selection around the Text with just a bit of blue surrounding it.
  • Then, use Image || Crop to Selection
  • Use: Image || Resize
    • Set Height = 20
    • Set Resize All Layer = Checked
    • Set Maintain Ratio = Checked
  • Use: Effects || Sharpen || Sharpen to sharpen the text
  • Add ten pixels to the right side and left sides
    • Make sure your Background Color is the color you used above (9,102,172 or hex #0966AC)
    • Use: Canvas Size
    • New Width = Current Width Plus 20
      (Mine is 103 + 20 = 123)
    • New Height = 20
      (No Change)
    • Center Horizontal and Vertical = Checked
    • Click on OK
  • Turn off the Text Layer
  • Highlight the Background Layer
  • Flood Fill (Right Click) with dark blue to remove any extraneous lines
  • Turn on the Text Layer
  • Use: Layers || Merge All
  • Save the File as a Gif File (Name = filmbdr_v7Text.gif)
  • Rotate image (Image || Rotate), Left = 90 Degrees
  • The words should now Run up.
 

Add the Text to Border Images

When we add the text to the border, you may find that you will not be able to line all the text correctly the first time due to the size (height) of the text image. You will need to adjust the height accordingly and try again. My initial words images was a 20 x 124 image and ultimately I resized it using Canvas Size to an image of 20 x 104 and then I had to add one more image and position it under the others to cover over the white space left.

To resize the Text image use Image || Canvas Size

  • Then set both Horizontal and Vertical Centering = Checked
  • Then adjust your Height to at least 4 pixels less that the current height.

To Paste the Text Image to the Main Canvas with the Border Images:

  • Copy the Words Image [Control]+[C]
  • Highlight the Main Border Image
  • Paste as a New Layer [Control]+L]
  • Use the Mover Tool

    Move the image starting at the bottom of your border and line up the bottom edges. (You may want to zoom your border canvas to have a better view of the alignment needed)

Repeat using [Control]+[L] and move this image to the Top of your border.

Repeat again [Control]+[L] and move the image underneath the top words. Continue until you have all necessary words aligned properly.

I initially used four images and then still had a bit of white space between the bottom words and the next higher words. I pasted one more words image and moved it to fill in the white space.

As a side note... It was suggested to me that the Flood fill method, using patterns and selections would be easier.. using this method will sometimes require more work to achieve a seamless tiling effect.

Prof's Note: To use this method you might try the following:

  • First, note the width of your border image: (Mine is 112)
  • Then, note the width of your word image: (Mine is 20)
  • Then, note the height of your total border images: (Mine is 418)
  • Double Click on the Selection Tool
  • Set Left = Your Border Width (112)
  • Set Right = Your Border width plus your word image width (112 + 20 = 132)
  • Set Top = 0
  • Set Bottom = Your Total Border Height (418)

  • Now, in your Styles Box, click on the right arrow and set Patterns (the dotted icon -3rd from left)
  • Click in the Styles Box and scroll up to locate your words image that you have created and used for the above.
  • Highlight that image

  • Finally, use your Flood Fill Tool and Flood Fill the Selection.
 

Save Your Images

First, save both the border image with is layers and word border text and save the Words Image. Save both as PSP files.

  • Use: File || Save As and select the PSP format.
  • Use a Filename you will remember: (Border.PSP & Words.PSP)

At this point you do not need the Words image so just close it.

 

Set the Border Image

Highlight the Border Canvas. Also you might want to Zoom your image to better see the bottom crop line before you crop the image.

  • Use: Window || Duplicate to preserve your PSP image
  • Close the PSP image
  • On the Duplicate Image, use: Layers || Merge All
  • Then use the Crop Tool:
    • Start at bottom of the border images
    • Draw to the top of the canvas
    • Draw to the right side of the canvas
    • Place your mouse cursor over the left side of the selection and when it changes to a double arrow, hold down mouse button and drag to the left side of the canvas. Release mouse button.
    • Check the bottom line to make sure it is even with the bottom border image. If not, place cursor over bottom line until it changes to a double arrow. Hold down the button and drag to align. Then release mouse button.
    • When satisfied, click on the Crop Image Button.
    • To get the correct width for your border image:
      • Set background = White (255,255,255)
      • Use Image || Canvas Size
      • Set Width = 1200
      • Set Height to height of your image (Mine is 418)
      • Set both Horizontal and Vertical Centering = Unchecked
      • Set Top, Bottom, & Left = 0
      • Right will set automatically.
      • Click on OK.
    • Finally, save your image as a GIF file.
      • Use Colors || Decrease Color Depth = 256 colors, Set Palette to Optimized Octree and set Reduction Method to Error Diffusion.
      • Click on OK
      • Use: File || Save As and select the GIF format. Use a filename such as filmbdr_v7.gif for the file name.

Now we're done.. hope you enjoyed this tutorial.