PART ONE

Let's create a border background for your webpage first.

1. Create a new canvas 200x200 - White background. Add a New Raster Layer (Layers>New Raster Layer.)

2. On the color palette, change the foreground color to BLUE (or whatever your color theme is.) Choose a TEXTURE for the foreground. I am using the Gravel Texture on my image. If you need more info on the color palette, please click for my tutorial.

3. Using the FLOOD Fill Tool , click to fill the canvas with the textured blue.

4. Click Effects>Texture Effects>FUR. Apply my settings below, or experiment with your own.

5. Okay, now let's make this seamless. Double-click the SELECTION Tool . We want to make the selection 100x100 in size.

Type the Left setting as 50 - Type the Right as 150. Type the Top setting as 50 - The Bottom as 150.

6. The 100x100 selection marquee appears in the center of your canvas. Click Selections>CONVERT TO SEAMLESS TILE.

NOTE: If you find that PSP gives you an error that it cannot complete the command because the selection is too close to the edge, just adjust your selection. But if you followed along with the dimensions in this tutorial, you shouldn't have a problem.

7. PSP creates a new image canvas for the new tile. DOUBLE-CLICK on the background layer on the Layer Palette. Rename the layer "side".

Save this new image. (You may opt to save the original canvas as well-save as a different name from the tile.) Click File>Save and type in a file name - borderbg.psp is a suggestion. Make sure that .psp is the file extension. Navigate to the folder on your hard drive where you save your images. You might want to create a new folder just for web images and/or backgrounds.

8. Next, click Image>CANVAS SIZE.

To create a full border background, the width of the canvas has to be adjusted to 1600 pixels so it will tile correctly on most any monitor.

Change the new width setting to 1600. UNcheck the two boxes for centering. Click on the Right Setting (at the bottom of the dialog box) and

it should automatically fill in 1500. If not, just type in 1500. Make sure the other settings for top, bottom and left all are 0.

Click OK

9. The canvas will now be 1600 pixels wide. You should see a transparent background. If not, Edit>Undo and go back to step 7 to rename the layer. Then resize the canvas again.

Click View>NORMAL VIEWING 1:1. Move the scroll bar to the far left so the tile is in view.

10. Add a New Raster Layer named "Background". Drag the new layer to the bottom of the Layer Palette.

11. On the color palette, choose a complimentary color for the foreground color. You may want to use the eye dropper color picker to choose a color from the tile.

Use the Flood Fill Tool to fill the background layer. (Do not fill with a texture.)

12. Add a New Raster Layer to the top of the Layer Palette. Name it "gold bar".

13. On the Color Palette, choose a golden yellow as the foreground/stroke color. Null for background color and no textures.

 

14. Click the LINE Tool . On the Options Palette:

Straight line. Width 15 Antialias checked

Draw a straight vertical line at the right edge of the tile.

14. Click Effects>3D Effects>INNER BEVEL. See my settings below.

15. Using the resize arrows on the bottom of the image window, drag the window so it is larger than the canvas. You will see crosshatch pattern around your canvas.

Still working on the "gold bar" layer, click the TRANSFORM Tool , and drag the top and bottom arrows to lengthen the bar. The top and bottom should be outside the canvas and on the crosshatch area, (this area will not be seen on your final image.) This way, when your background is tiled on your webpage, the sharp bevel on top and bottom will not show. It should blend better.

OPTIONAL: If you would like the bar to look exactly like mine, you may also want to add a second thinner line on top of the first bar line -

Add a new layer Draw a thinner line at 4 wide. Add an Inner Bevel (with a slightly lower width and depth) Use the Transform Tool in the same way as the first bar. If you have trouble seeing the smaller bar, View>Zoom In....

16. The only thing left to do now is Save again and Export as .jpg file. For more info on .jpg optimizing and exporting, please see step 4 in my Digital Images Tutorial.

PART TWO

The border background image should still be open.

1. Activate the "side" layer by clicking on it from the Layer Palette. Click Edit>COPY. Then Edit>Paste>PASTE AS NEW IMAGE.

The side border tile will be pasted as a new image on your workspace.

2. You can save this image as tile.psp for future use. It is a great seamless tile to use for other projects.

3. Create a new Canvas - 300 x 200 transparent background.

4. Click the SHAPE Tool . On the Tool Options Palette, select Rectangle, and Antialias. Line Width=4.

5. Change the Foreground/Stroke Color to the golden yellow used for the border background bar. Change the Background/Fill color to a pattern. Choose the border tile image (open on the workspace) from the pattern menu.

6. Draw a rectangular in the exact size and shape you would like for the button. It will have a golden yellow stroke with the blue fur tile as the fill.

Save the image as button.psp.

7. Click Effects>3D Effects>Inner Bevel. Use the same settings that were used for the border background bar.

8. Optionally, click Effects>3D>Drop Shadow - use the settings below or experiment with your own. Or use none at all.

9. Use the CROP Tool to crop the excess area around the button.

10. Let's tube this button so it can be used easily with different text. Click File>Export>PICTURE TUBE.

Keep most of the default settings, but make sure it is 1 cell across and down, with total cells = to 1. Type in the name of your tube. Click OK.

11. Click the PICTURE TUBE Tool and then click the tube menu from the Tool Options Palette. You will find your tube along with the other tubes from PSP. For more info on tubes, try Bonesy's PSP ToyBox where you will find a great tutorial on tubes, along with lots of other goodies.

12. Save and Close the button.psp image. Create a New Canvas. 200x200 Transparent background. Save the new image as a new file name.psp file.

Use the TUBE Tool and click once on your new canvas. There is your button!!!! Pretty neat, huh? Now whenever you want to create a button with new text, you can just add a button as a tube.

Speaking of text, let's customize the button.

13. Add a New Raster Layer - name it "text".

14. Click the TEXT Tool . Switch the Background/Fill color to the golden yellow and choose NULL for the foreground/Stroke color. No Textures.

Click on the button with your cursor. The Text Dialog Box will appear.

Select the Font Type and Size - a strong formal font would work well. Copperplate Gothic Bold is a good choice.

Type in what you would like on your button, in example HOME. Select the setting for Floating and Antialias. Leave the other settings as the default. Click OK.

15. The text will appear on the canvas surrounded by the "marching ants". Hover your cursor over the "floating selection" and when it changes to a mover icon, you can easily reposition the text on the button.

When you have the text correctly positioned, click Selections>SELECT NONE.

16. Apply the Inner Bevel effect (adjust the depth and width slightly lower than the last time) and add a Drop Shadow.

17. Add a New Raster Layer and name it "background". Move this layer to the bottom of the Layer Palette.

18. Change the Foreground color to the same blue color as the background in the border bg image. Flood Fill the background layer with the blue color.

19. Crop the canvas, Save, and Export as a .jpg file and that is it.

Create a new canvas for the additional buttons you might want.

PART THREE

All set to create the matching Header Text Graphic for your webpage? This one will be pretty easy compared to all the work you did with the buttons and background!

Unzip the tutorial's header_shape.zip file into the folder where the other matching psp images are saved. Remember where you saved it. The file will be used in Step 7.

1. Create a New Canvas. 500x200 Transparent Background. Save your image as heading.psp file.

2. Make sure the Fur Tile image file we created from the border background is still open on your workspace.

3. This is where you can use your own creativity. Change the Background/Fill color to what YOU would like to see as your fill - either the golden yellow or the blue Fur Tile pattern. Or maybe just plain blue. If you want a Stroke for your text, then choose a color for the Foreground color swatch. If not, choose NULL.

4. Using the same process as when text was added to the button, add TEXT to your canvas. See Step 13 in the Link Buttons tutorial.

5. Add an Inner Bevel and Drop Shadow.

6. On the Layer Panel, hide the Text Layer. Add a New Raster Layer - name it "shape" and move it to the bottom of the Layer Panel.

7. Click Selections>LOAD FROM DISK. Navigate to the header_shape.sel file you unzipped earlier. (from zip file.) Click OPEN. The selection will appear on the canvas.

8. Choose a Foreground/Fill color for your Shape. I chose the Fur Tile pattern. It is your choice! Use the Flood Fill Tool to fill the selection.

Click Selections>SELECT NONE.

9. Apply an Inner Bevel and Drop Shadow to the shape.

10. Add a New Raster Layer to the bottom of the Layer Palette - name it "background". Flood Fill with the solid blue color.

11. Crop, Save, and Export as .JPG file.