Home of GraphicOriginals.com Pysanky, decorated eggs, egg art Other art offerings About the artist, family pages, photo gallery Web graphics, personal page sets, icons, cursors Links to additional sites and recommendations Contact and Paypal link

TUTORIALS


Side-border with Textured Background and Contrasting Divider




You will need three images, one for the border, one for the background of your page and also an image of a vertical bar for the divider. These are the ones I am using for the demonstration; you may download them to practice with if you wish. You may not use the background you make with these images, they are just for practice.

circus border image   circus border image.  divider   divider bar.  bkgrnd tile  background image for the page.

I would recommend that you make your border no more than 100 pixels wide. Remember, it takes up text space on your page.

Open a new image. Make the width 1100; the height should be the height of your border image (mine is 296) .

Now that we have all our elements, we are ready to start.

To make things easier to work with later, click on the Mover tool.  mover toolThis will now be available to use when we need it.

Click on your border image to activate it. Copy it by clicking on the copy icon.  copy icon

Click on the new, blank image. Now click Paste As A New Selection.  paste as a new selection icon

This will place the border on the new image. Move it into position at the far left. A left click will release it into position but it is still selected; you can tell this by the marquee around it. If you find that it is not where you want it, position your cursor over the image and the Mover Tool will appear. This shows that you can now move it into a new position.   

circus border 2nd stage

Activate your vertical divider bar image. Copy it by using the copy icon again.   copy icon

Activate your new image with the border image in it and click on Paste As A New Selection again. Move the bar next to the border image and left click when it is in the correct position. If it is not where you want it, position your cursor over it, and the Mover will allow you to redo it.

This is what you should have in your new image at this time. This is before I deselected the divider, you can still see the marquee.

circus border 3rd stage

Now we will deselect everything so we can proceed.

Go to the Menu bar and choose Selections, Select None.  select none


We want to fill the remaining page on the right with the background texture. This is how we do it.

Choose your Flood Fill tool.  flood fill tool icon  On your Tool Options Palette, choose Pattern for the Fill style.

flood fill pattern choice

Click on the second tab (with the grid pattern). This allows you to choose what pattern you want to use for the fill.

Choose the pattern of your background texture. You can see what you have selected in the preview window. It may not be labeled the current pattern.

flood fill pattern choice

Now activate the new image with the border and divider and flood fill the right side by clicking on it with the Flood Fill tool.

Now you have an image that looks like this:  circus border 4th staage

Very pretty but we need to be sure it will tile properly with no breaks. This is how I check to be sure.

Open a new image, in this case, 600 x 1100 will do.

Now go back to the Flood Fill Options palette, to the second tab, and choose the image that you have made that has the border, divider bar and background fill, it will have the same label as above; for us, Image 4. Here is what it will look like; since it shows the entire page, it is very small but you can see it is what we just made.

flood fill pattern

Now Flood Fill the new large blank image. Zoom in on the 300 area to see if there are any areas that need fixing. Oops! I see a blank space between my images and down the left side. Can you see them here?

circus border break

This is also easy to fix. Go back to your Flood Fill and for the pattern, choose the background texture. If you have closed this, then go find it and bring it back into the workspace. The Flood Fill pattern option will only let you choose images in the workspace.

Now, back to the border and click on these gaps and they will fill in with the pattern. Here is the completed section.

circus border break fixed

You are finished!! Save it as a .gif and use it for a background by placing it in the Body tag of your page. (background="your new image.gif" )

Would you like to see it full size? Click here.

I hope you have had fun. Questions? I've got mail!

Copyright 1999 Barbara Novak