Welcome ... I'm glad you stopped by for
Graphic + Internet related tutorials . . . Using tubes
to create a seamless border background


Have you wondered HOW to get a "random pattern" side border to be seamless? I know I sure did when I started making graphics.

While I was making this one, I decided to save some "in progress" screen shots to show the way I learned how to do it. There may be other, even better ways, but this is one option.

This was created in Paint Shop Pro© version 5, but ver 6 and 7 are similar enough that you can use this tutorial too! 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.


Here is what a side-border background looks like - in 'shrunken' view
Finished border background - shrunk version
What I am going to concentrate on in this tutorial, is making the part that goes on the left side. Then, you can put the whole thing together later. It might be helpful if you also look at my "seamless border" tutorial on another page.

When I FIRST started making this set, I was going to use a textured pattern for the text area of the background. So, all my screen shots show that. When I got all done, I found the texture just didn't work right, so I redid everything. But, since I followed the same procedures, I didn't change the tutorial examples *g*.

I started with a trellis, and I have three of them here in .gif format, you can take home and use to experiment with. [ Trellis tube is also available. ] For YOUR side border project, you might want to cut off either the top or bottom horizontal bar so the repeat spacing is right.

trellis light  trellis medium  trellis dark

Using PSP 5 (or 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.


Using the clematis and clematis leaf tubes we created (to download), I opened a new image (with a transparent background) and sprayed it with the tube I had selected. You can place/click them one at a time and move your curser accross your blank image. Space them out because you are going to "select" certain ones that you want to use.

spray tube clematis flowers spray tube leaves


One thing I discovered with these clematis flowers, I "oopsed" and double clicked in one place -- but guess what, I LIKED that! It looked like the "double flower" clematis plants I had seen. So, after that, I did more "on purpose" *g*.
Some examples, in larger sizes - easier to see, are below.

So, while working on placing my leaves on the trellis first, I tried to create a vine look on the trellis. By being able to choose which leaf (and then flower) I wanted to place where, it gave me more control over the end result.

I worked on the overall look, and then worked on the center of my graphic to a point where I would feel that area was "done". This is where I stop and "re-arrange" the graphic to make sure it was going to tile seamlessly.


border step 1 img 

To create the leaf 'pieces' poking out from behind the trellis or around the edges, I selected different leaf "pieces". {magnifying the example here}

leaf piece

Because I'm working with layers in PSP 5, at this point I made a duplicate of my image and continued on. My orig. had one layer that was the texture, another layer that was the trellis, a third layer held the leaves, and the fourth layer had the flowers. I saved my orig to this point as a PSP image so I could come back to this step and redo things later if I need to.

Which, in this case, I did! So always save your work in PSP format that will keep the layers separate, and then you can continue to work on, or re-do your graphic, at any time later!

To "rearrange" the image, you need to merge all layers. COPY your PSP image, and merge it's layers. Then ...


  • Selected the point where I wanted to "split" the side border.
  • With the selection tool, surround the top half of the image, then choose "image | copy".
border step 2 img

  • Opened a new image the exact same size as my original. Flood fill with a color that is not part of your image. Then make a new layer on top of that one to place your border pieces on. ** Then do "image | paste as a new selection" placing my top half on the bottom.

    ** WHY? When there is a color behind what you're working on, it's easier to see if you have lined things up correctly :-) If you had a neon green color behind your pieces, you'd notice if you left any gaps, right?
     
  • Go back to the original and choose "selection | invert" which will change the selection to the bottom half of the image.
  • Copied that one, and pasted into the new image, as a new selection, placing it at the top this time.
border step 3 img

  • Now I know that the top and bottom edge of my background border will meet and blend perfectly!

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.

border step 4 img

What WAS the original top and bottom edge is now in the middle of the graphic. It's very easy to fill in some leaves and then add more flowers overall. You do need to stay away from the very top and bottom edges, but anywhere in between can be adjusted now to reach the desired effect!

border step 4 img border step 5 img

That's all there is to it. Granted it is some work, but, you will be rewarded with a seamless background border every time!

Above, I mentioned that the effect of the "double clematis flowers" was very nice. I experimented on a large blank background, clicking twice on the mouse in the same place. Since my clematis flower tube is different colors and different flowers, you will get several different looks by doing this. Dark on top of light, vice versa, and double dark or double light.

Single clicking for the tube will get:
{shown here at 100% size}

single flower 1 single flower 2


Double clicking for the tube can get ... WOW!

double flower 2double flower 3double flower 1double flower 4




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