Double Image Guestbook Tutorial

This tutorial was written using Paint Shop Pro 7

I do this for almost every webset I make!

When I'm making a graphic set the easiest way for me is to make a 500x400 image, fill it or create the background that I'm using on the page right there, then do each button from that. Most of my buttons are just text that blend with the background. Anyway lol that's how I'll show you how to make the guestbook buttons, but not quite as large lol

*Note* You'll see gray lines around some of the images (on the left side and top), those are just from the screen captures, not intended as part of the image.

Open a new image, transparent background 300 x 300

Fill it with your background color, texture or whatever you are using.
For this example I have first filled it with #8080FF, then used a Sandstone texture

Now you just need to put a tube or whatever image, put View, Sign, Guestbook on the image.

Now we want to select just the area of the image that we're going to use.. cut away the excess in other words. Go to your selection tool with the following settings.

Select around as close the image as you can get without cutting anything off.

Go to Image, Crop to Selection

Now we're going to break it in half making it two separate images, that fit together perfectly.
Click on your selection tool (if it's not still selected) and keep the same settings as above.
Select one side of the graphic, make sure to select that ENTIRE side otherwise the next step with get screwy. (if you are doing a graphic that has view at the top, and sign at the bottom just select the top or bottom half, in this example we are selecting the right or left side).

Now on your keyboard hit ctrl c (to copy), then ctrl v (to paste). Your Sign side is now a separate image, save that.

Go to Selections, Invert. This will select the exact opposite side of the image.

Do the same as above... on your keyboard hit ctrl c (to copy), then ctrl v (to paste). Your View side is now a separate image, save that.

You can just close the image you started with now, you don't need that anymore. You should now have your two separate images.
  

To put this on your site all you do is put it together, back to back.

<a href="yourguestbook.com/view"><img src="view.gif" border=0 alt="View"></a><a href="yourguestbook.com/sign"><img src="sign.gif" border=0 alt="Sign"></a>

The border=0 is so that you don't have a "link line" around your images. I also usually put in widths and heights for the images.

To look like this
ViewSign

:-) Rebecca

Back to Tutorials