Welcome ... I'm glad you stopped by for
Graphic + Internet related tutorials . . . Make a seamless border background
from an image, drawing, or whatever!


This was created in Paint Shop Pro© version 5. A lot of the steps would be similar in version 6.x and 7.x or other graphic programs. I've written this using terminology that, hopefully, is familiar to you, as you should be familiar with using PSP (or any graphic program) before attemping this side border background tutorial.


You can see the full view of this side-border Clematis flower set in the floral graphic section.


Using PSP 5, 6, or 7; lets me create items on a transparent background, which is helpful in a lot of situations. If you're using something else, you might be able to use the color-picker to set your background color on the various "steps" and copy an item, then paste it into your work "as a transparent selection". I know you can do that in PSP 4.X versions.

You can pretend these "things" are whatever item you want to make a graphic from. It could be anything, a drawn design, a bunch of graphics, it doesn't matter! Start placing them in the center area of your border piece. Once you're at a point that you feel the center area is done, stop and "re-arrange".

I call it ... stop, chop and switch.

    border step 1 img
  • Worked on the center of my image ...
  • Decided on the point where I wanted to "split" the side border.
     
  • With the selection tool, surround the top half of the image,
    then choose "image | cut" (or you can "copy" instead of "cut").
  • Opened a new image the exact same size as my original, and did a
    "image | paste as a new selection" placing my top half on the bottom.

border step 2 imgborder step 3 img


  • Go back to the original and choose "selection | invert" which will change the selection to the bottom half of the image.
     
  • Cut (or copy) that one, and paste into the new image, as a new selection, placing it at the top this time.
     
  • Now I know that the top and bottom edge of my background border will meet andblend perfectly!
  • Finish the graphic, filling in the center area ... and you're done!
  • What WAS the original top and bottom edge is now in the middle of the graphic.
    Because you split the center ... you know top and bottom will line up perfectly.
     
  • That's all there is to it. Granted it is some work, but, you will be rewarded with a seamless background border every time!

border step 4 img border step 5 img

WhhooooWhhoooo! Great news! Sandy Blair has created a free filter that will DO the 'switch top and bottom' FOR YOU!! Now that you know the process of getting your graphic ready to be seamless top and bottom, go grab the filter and save yourself a lot of work! Right now, look for the 'Downloads and Bonus Pack' section for this newest filter. Grab the 'bonus.zip' file that's in the 'few extra' link there. If you are new to 'filters', DO read the very helpful information near the bottom of the page, it will help you a lot.

A shrunk/miniature border background:
Finished border background - shrunk version
Now, all you have to do is place that border piece on the "body" section of your background! There are "edge effects" (like the drop shadow shown on the miniature version above) you can add to your border section while doing that ... but that's another tutorial! *g*

One note ... to ensure that your left side-border does not repeat on the right side of your visitor's monitor, possibly landing underneath your text and making it very difficult to read, make your border backgrounds *at least* 1300 pixels wide, 1600 is even better. You have no control over the monitor size and resolution your visitors might be using. So you should make sure your pages look good in all of them! Resolution information is on one of the help pages, in: Web Page Help.


Another way of handling an image, making sure it will be seamless when used as a side-border item.

Start with your original item, whatever it is.

I've put a multicolored oval in a box that has a semi patterened background here ... pretend it's any image you'd be using.
border piece tutorial # 2, step 1
"Stop, Chop, and Switch"
the top and bottom part of your image.
border piece tutorial # 2, step 2
You'll end up with this
border piece tutorial # 2, step 3

Now you can blend, touch up, clone, smooth (whatever!) the center part of the image. That area will become your top and bottom again in a few minutes.

When you've gotten the "ends" adusted as you want them, then chop the image again, putting it back the way it was.

 border piece tutorial # 2, step 4  You know that the top and bottom of the border piece will blend seamlessly when used on a web page!
border piece tutorial # 2, step 5
WhhooooWhhoooo! Great news! (if you missed the above) Sandy Blair has created a free filter that will DO the 'switch top and bottom' FOR YOU!! Now that you know the process of getting your graphic ready to be seamless top and bottom, go grab the filter and save yourself a lot of work! Right now, look for the 'Downloads and Bonus Pack' section for this newest filter, grab the 'bonus.zip' file that's in the 'few extra' link there. If you are new to 'filters', DO read the very helpful information near the bottom of the page.

Now, all you have to do is place that border piece with the "body" section of your background!
Finished border background - shrunk version




Tutorial © 1999 Roxy Flanagan
These copyrighted graphics are for free use, for this tutorial purposes only.
The tutorial graphics shown on these pages may NOT be placed in any collection or sold,
or copied and placed on ANY web site, or distributed in any way.
If you want to share this information with others, send this URL (web page address) to them!
Clematis flower border background © 1998 Roxy M. Flanagan.

Tube Use + Graphic Creation Tutorials:

Using TubesSeamless BorderSeamless TileVector Text on a Path using PSP
Combining Graphics and HTML
Fancy HTML tutorial:Triple Table HTML Page Layout

Webmasters, see the "Web Page Help" section for LOTS of information!

Internet Users Tutorials:
Downloading
from the Internet
Using WS_FTPUsing Winzip Installing both
pIRCh and mIRC
Popups
+ fancy IRC text

Tutorial List Page (+ links to more tutorial websites) ... Tutorial Rings Page

www.AutumnWeb.com SITEMAP


... total site menu @ Roxy's : Terms Of Use : Privacy Policy : Questions?
Copyright © 1997- by Roxy M. Flanagan + licensors; All Rights Reserved.
Links to MORE free graphics sites, Roxy Recommended!
Back to entrance + webrings @ Tutorials : Web Page Help : Tubes :
Roxy's Renditions™ @ http://www.autumnweb.com/Roxys/
Web Site Copyright © 1997- by Roxanne M. Flanagan, Autumn Web www.autumnweb.com

Roxy Recommends:
Autumn Web
Web Development

Personal+Business
Custom Web Graphics