Cathy's Web Set Tutorial


(Click on the above graphic for an 
explanation of the FBN skill ratings.)

I learned this basic framing idea from another tutorial several months ago.  I found an image I had made using this idea on my computer and thought I could make a nice web set using this method.  Unfortunately, like many sites I've visited in the past, I lost the bookmark when I reformatted my hard drive and forgot to back up all my files.  However, where there's a will, there's a way: I posted a message to the AnnexCafe PSP Tubes Newsgroup  and Donna was kind enough to send me the link for Christy's Rotated Frame Tutorial.  Thank you, Donna, for the link and thank you, Christy, for the original tutorial.  

The first thing I did was look for an image that I thought would make a good graphic for my set. I already knew that I wanted to use a flower, so that narrowed my search.  I found a tube I had made from a picture of a rosebud.  The bright, contrasting colors would work great with this type of graphic. Here is the picture I will be using:

Click to download zip file

If you'd like to follow along, you can click on the above picture and download the zip file of the rosebud graphic.  This is a PSP format with a transparent background.  (It is PSP5 compatible, so everyone will be able to use the file.)  Just unzip it to your hard drive and open in Paint Shop Pro. Copy the image and save the original on your hard drive! I suggest you make a new folder on your hard drive where you can save this tube and all the graphics you are going to make for your web set.

TIP: You can personalize your web set by choosing your own colors.  Perhaps you'd prefer to pick a shade of green or blue from the leaf rather than the pink color I chose. If you choose to do this, I suggest that you open a new image (50X50) and flood fill with the color you choose.  This way, you can always get the correct color by simply using the dropper tool and "picking" the color from your small image.

divider.jpg (3524 bytes)

The worst thing that can happen during a design process is to have your program crash, so make sure you save your image periodically during this process - I'll put a few reminders throughout the tutorial to help you out!

Your graphic needs to be a perfect square and this tube is 259 x 295 pixels. To adjust, click on Image and choose Canvas Size.  Change both the width and height to 500, and check both center boxes.  This will be much too large for our design, but at this point, you need the additional blank canvas.  I prefer to work with a larger image and reduce the size when I'm done, since reducing does not lose the detail the way increasing the size does.

Next we need to rotate our image by 45 degrees to the right.  I want a "diamond" frame around my image, but I have found that rotating the image after I've added the border with the inner bevel doesn't quite work.  By rotating the image now, I will be working with squares, which rotate much better, not to mention that squares are much easier to work with. Your image should look like this:

rotated.gif (13978 bytes)

You want to add two "frames" to this image with a space between them,
but we don't want to lose our transparency,  so we can't use the add border feature.  Add two layers to your image: name the first layer Inner Frame and the second layer Outer Frame.

Now would be a good time to save your image.

With the Inner Frame layer active double click on your selection tool and enter the following settings, and click OK:

selection.gif (7457 bytes)

Invert your selection and flood fill with the color you want to use for your  frame.  I chose the dark red from the rose (R251 B14 G74) with my eyedropper tool, since the inner bevel settings will lighten the color.  Double click your selection tool again and change the settings to:
Left: 65, Right: 435, Top: 65, Bottom: 435; click OK.  Invert your selection and hit delete. 

You will now be left with your "inner frame".  Using your magic wand, click on the frame you just created and apply the inner bevel effect, using the  following settings, and click OK:

 inner_bevel.gif (12490 bytes)

You will end up with this:

frame1.gif (15424 bytes)

Now would be a good time to save your image.


With the Outer Frame layer active double click on your selection tool and use the following dimensions: Left: 50 Right: 450 Top: 50 Bottom: 450, then click OK. Invert your selection and flood fill with your red color.

Double click your selection tool again and change the settings to: Left: 30, Right: 470, Top: 30, Bottom: 470; click OK. Invert your selection and hit delete.  You will now be left with your "outer frame". Using your magic wand, click on the frame you just created and apply the inner bevel effect - it will come up with the default "last used". Click OK.

Now, rotate your image 45 degrees to the left.  Image/Rotate or Ctrl+R - make sure all layers is checked! When you rotate your image, you change the canvas size. Our canvas is now 707 x 707 pixels and I hate working with
odd numbers, so let's take care of that now by changing our canvas
size to 700 x 700 pixels.

Now would be a good time to save your image.

Now we are ready to add our third frame.  Add a new layer and name it  Frame 3. With the Frame 3 layer active, double click on your selection tool and use the following settings: Left: 110, Right: 590, Top: 110, Bottom: 590, click OK.

Invert your selection and flood fill with red.   Double click your selection tool again and change the settings to: Left: 90, Right: 610, Top: 90, Bottom: 610; click OK.  Invert your selection and hit delete.  You will now be left with your "Frame 3".  Using your magic wand, click on the frame you just created and
apply the inner bevel effect.

Now click on the Frame 3 layer and drag it to the bottom, or click  Layers/Arrange/Send to Bottom, so that this frame is behind the others.

Now would be a good time to save your image.

Next we want to add the black background behind our flower. Click on the "Inner Frame" layer to make it active.  Using your magic wand, click anywhere inside your frame then expand your selection by 2.  Click on the "Frame 3" layer to make it active and flood fill with black. 

You now have the "basic" image for your web set.  Duplicate this image and save the original as "basic.psp".

basic.jpg (100253 bytes)

FlyByNightGraphics Tutorial Award

 

Next

Home

E-Mail

 

 

Please take the time to sign my guestbook.
Just click on my name below:

Sign Cathy's Guestbook  


people have visited this page (including you!)

All Art Work & Graphics Designed by Cathy
Copyright © 1999 - 2003 by Cathy. All rights reserved.
Revised: April 06, 2008
.