Guestbook by Lpage
  
Sign or View my guestbook

 Main
 tutorials
 graphics
 design
 site info
 links
 email

   Backgrounds Only

Seamless Sidebar Backgrounds

Explain Yourself!

One of the great graphics questions ever is: how do you get that background seamless? So that it repeats indefinitely and looks like it was meant that way? Well this tutorial will explain one method of getting sidebar backgrounds to mesh together smoothly. Get your PSP5 and your creativity handy, and read on.

[---------------------------]

The Image

We need to open a new image so we can start our texture on it and work with our background. Click on the new button, key ctrl-N on the keyboard, or to go File-->New in the menu. Type in 128x128 pixels, background color, and 16.7 Million colors. Click ok.

This will open us a new image window with the background color you have as the background color in your palette. Make sure you've chosen a color you like. The palette is the color gradient you see on the right side of your screen, and the two squares show the foreground and background colors, respectively. Just click on the color gradient to choose a color, or click in a square to bring up the color picker window.



[---------------------------]

Apply the Texture Controls Box

We need to decide on what we want our background to be. For this tutorial we're going to use one of the greatest features of PSP5: Picture Tubes.

    Picture Tube button This is the picture tube button on the toolbar.

Click the picture tube button. (In PSP, not here.) That should change your controls window to offer you choices of tubes and what size. For this tutorial I picked the Coins tube, but you can pick whichever one you want. Change the slider to make the images in the tube smaller or larger.



coin bg Click on the image to distribute the coins until it is entirely covered. Keep going until the image is pleasing to you. Go ahead -- have fun!

The next step takes advantage of the geometric selection tool.

    selection tool This is the selection tool button on the toolbar.

Double-click on the selection tool button. This will bring up a window, asking you to type in the coordinates you want selected.

[---------------------------]

Selection Window Type in as shown, with 0 for left and top, 128 for right, and 64 bottom. Make sure "Custom size and position" has a dot beside it. Click ok, which closes the window and surrounds the selection we want.

Then copy it -- ctrl-c on the keyboard, Edit-->Copy on the menu, or the copy button on the toolbar. Then paste it as a new image -- ctrl-v on the keyboard, or Edit-->Paste-->As New Image on the menu.

Then invert the selection. Selections-->Invert on the menu, or shift+ctrl+I on keyboard. Repeat the copy and paste as new image procedure. Do not, I repeat, do not unselect the selection in the background image.

At this point we should have 3 windows open. The original image with our background on it, and two open windows, each with one half of the image.

coin bg bg half 1 bg half 2
Image 1 - Background Image 2 Image 3

[---------------------------]

Hopefully you still have an active selection in Image 1. If so, then click on Image 2 and hit ctrl-c to copy it again. Then click back over to Image 1, and go to the menu: Edit-->Paste-->Into Selection.

Click on the menu again: Selections-->Invert. Click to Image 3, and copy it. Click back to Image 1, and Edit-->Paste-->Into Selection again.

new coin bg Our new image should appear similar to the one at the left, in that the middle of the image should appear "broken" and not smoothly mesh together. In our next step, we have to fix that.

Now click back onto the picture tube tool on the toolbar. Use it on the image directly over the middle, the "broken part" until you can't see anything else "broken". Make sure that you do NOT get any pictures onto the top or bottom of the image. Our purpose here is to only put pictures over the middle of the image.

smooth bg Now the image shows no broken parts. Hurray! See how easy that was?

Next we just need to make it into a sidebar background. Easy. Click on the menu: Image-->Canvas Size. That will bring up the Canvas Sizing window, which is a weasily little bugger, I'll tell you!



[---------------------------]

canvas sizing window Type in a wide width for the image -- I always use 1100. You want to make it wide enough so that the background will not repeat to the side and look funny on people's browsers. 1100 I figure pretty much covers most browsers. (Some people like to use 1500 or more) Leave the height the same as it is: 128.

Make sure that the two checkboxes for centering the image horizontally and vertically stay UNchecked. We do NOT want our background going anywhere -- we want it staying on the side! That is why you also need to check the numbers in the boxes below.

The numbers should read 0 for top, bottom, and left; right should be 128 pixels (which is our image height) less than the width you chose for the background. (For example, I chose 1100, and 1100 - 128 = 972.) Make sense? I hope so! Click ok.

The window should now have stretched out to the width you want. Now would be a good time to save your image and test it as a background. It *should* tile perfectly down the side of your screen, without showing any "broken" parts!



Congratulations, you've created a tiling sidebar background!

done bg

I like to use other effects on my backgrounds too, like blurring the edges and whatnot, but that's for another tutorial....


[---------------------------]

This site and -all- content copyright© Darklock Communications and Shena Delian O'Brien and is only to be used for non-profit pages. (Tutorials are free-for-all, but not to be reproduced.) This site is a just one part of what Darklock offers the web!