Category: Tech

In a lot of ways, backgrounds are the “first impression” for your home page. How many times have you visited a home page that immediately put you off because the background was not compatible with the type or the graphics. Or, if you are like me, so dark it hurts your eyes. Most web authors recommend light colored backgrounds in neutral colors. But, how do you make a background that will set your page apart from other pages. Just a little creativity and a good web graphics program like Paint Shop Pro is all you really need. If you are like me, you might find yourself obsessed with making backgrounds. I created “wallpaper” backgrounds for my home page from real wallpaper I scanned, then made into tiling graphics. All these wallpaper patterns are available for download on my “Free Graphics” page.

The following tutorials will teach you how to make edge backgrounds, seamless tile backgrounds, beveled backgrounds, embossed backgrounds and background sets.

 

For a great stain glass graphic, you can either start out with a pattern that is already colored (what I do in this tutorial since I feel I am very color impaired), or with a black and white stained glass pattern and fill with your choice of colors. For some great free Stain Glass patterns, go to Spectrum Glass. Either way, the technique is a lot of fun and can create great results like my House of Glass splash screen. You will need to download the original stainglass graphic and the Blade Pro preset at the end of this page before you begin.

To create this graphic:

1. Open the stain glass graphic in Paint Shop Pro.
2. Up the colors to 16 million.
3. Duplicate the graphic and put the original away for future reference (easier to start over this way).
4. There are two ways you can proceed from here. If you are using a colored graphic with black outlines (as in my sample graphic):
   • Click on all the white areas with the magic wand tool while holding the shift key.
   • Save this selection to an Alpha Channel.
   • Set black as your background color. Choose Selections|Select All. Selections|Modify|Transparent Color and choose “Background Color” with tolerance set to around 30.
   • Choose Selections|Invert. Save this selection to an Alpha Channel (this will be your lead part of the stain glass graphic).
   • Choose Selections|Invert again.
   • Apply the Stain Glass Blade Pro preset. Play with the Glassiness setting until you get the depth of color you want.
   • Add a new layer. Load the “lead” selection. Expand the selection by 1.
   • Flood fill with light gray.
   • Apply the Leaded preset.
   • Load your selection of the white parts of the graphic. Flood fill with white.
   • Add text and a drop shadow to text if you want.
5. If you start with a black and white stained glass graphic:
   • Select the black outline as instructed above and save the selection to an alpha channel.
   • Click on a white portion of the graphic with the magic wand to select.
   • Expand this selection by 1 if necessary.
   • Flood fill selection with a color of your choice. You can then apply the stain glass preset to the selection.
   • Or, you can fill all the cells with color first, then load your “lead” selection, invert the selection and apply the Stain Glass Preset.
   • Load your “lead” selection and complete the graphic as instructed above.
6. Save your graphic as a jpg to preserve the color quality.
7. I diced the Stain Glass splash screen into sections for faster loading with Picture Dicer. See my links page for a link to download the freeware version of Dicer.

Shift-Click on this thumbnail to download the full size graphic.

Shift-Click here to download the BladePro Preset

 

Click here to see this stain glass fully rendered.

Click here to download the pattern for this graphic

Paint Shop Pro is a graphics program that has a lot of similar qualities to Photoshop. You can purchase Paint Shop Pro 5 for around $60.00 (see my links page), quite a bargain for what it does!

There are also quite a few shareware plugins available that work with Paint Shop Pro. Some of the tutorials on these pages require plugins. You might want to visit my “Links” page to download the recommended plugins before starting the tutorials that require a plugin. The most important plugin for you to download (and purchase) is Blade Pro. This is a great beveling plugin. I suggest you download this plugin (go to my links page) before you start these tutorials. Then, you can visit my Blade Pro tutorial page to learn how the plugin works.

The best way to approach these tutorials is to start at the top of the menu selections “PSP Basics” and work you way down the selections. As the tutorials get more advanced (like the masks tutorials), I make the assumption that you have gone through the basic tutorials and have a basic level of knowledge about the program. The “Application Tutorials” is a series of tutorials on specialized subjects. Please do not attempt these tutorials until after you have completed the PSP Basics, Layers and Masks tutorials.

I have created and maintain this page because I love web graphics and I love Paint Shop Pro. If, after you have completed my tutorials, you have a specific question, please feel free to send me an e-mail. But, I ask that you have completed at least the basic tutorials before asking for help.

Placing a frame, or a mat and a frame around a picture or a graphic can be very effective and add a lot of class to your web page. Following are some ideas for framing a graphic or photo. These tutorials make extensive use of the Blade Pro plugin and several presets I have created. You can download my Blade Pro presets by clicking here. I also use a Filter Factory plugin. I recommend you download the plugins before you start this tutorial. Whenever I use the Blade Pro plugin to bevel frames, you can also use Eye Candy’s Inner Bevel filter. Before you start this tutorial, I highly recommend you go through my basics tutorial and my layers tutorial.

Header Graphic

1. Open a new graphic the width and height you want.
2. Add borders set to color you want frame to be (I added a border of 10).
3. Use magic wand to select frame and choose Selections|Promote to Layer. Name this layer “Frame”.
4. Flood fill the “Background” layer with white (or whatever color you want to become transparent if you want your background to show through.
5. Load your selection on your Frame layer. Flood fill with white for a Blade Pro preset or with a color or possibly a wood fill for a regular bevel.
6. Bevel your frame. I used my gold_black preset for this frame and the text.
7. To add decorations, create another new layer and call it “Decorations” and drag it under the Frame layer.
8. I used the letter “a” from the Orna 4 font (this is a Listemageran font and can be downloaded from the Dingbat Page link on my links page). I then beveled it with the same bevel I used for the frame. Select the dingbat graphic and make a copy and paste as a new selection. Rotate the copy to the correct position for the next corner. Hint: The easiest way to line up these decorations is to hold down the shift key and press the arrow keys to move the selection into position.
9. Add another new layer and add your text and bevel.
10. Add another new layer and drop shadow if desired.

Frame a Photograph

OK, let’s frame this photograph of San Francisco.

   

1. Open photo.
2. Add a new layer. Call this layer “Mat Frame”.
3. On the new layer, Selections|All, Selections|Modify|Contract 20, Selections|Invert. Flood fill with a light color from somewhere in the photo (I chose a pale blue).
4. Add a new layer with your selection active (Shift Click on the New Layers icon).
5. Invert your selection (Selections|Invert). Now, apply the cutout filter (Image|Effects|Cutout) set to Color: Black, Opacity: 100%, Blur: 3, Offset 2,2.
6. Add another new layer with selection still active.
7. Add a White drop shadow Opacity: 100%, Blur: 1, Offset 1,1. The Cutout and Drop Shadow make the photo stand out and make the Mat Frame look realistic.
8. Add another new layer. Call this one “Frame”.
9. Select All, contract the selection by 10, invert and flood fill with a color or pattern (I used a wood fill). Bevel with my Blade Pro preset “Frame_Shiny”. You can find wood fills on my Free Wood Graphics page.
10. Save as a jpg to preserve the colors of the photo.

Fancy Frames

  

Let your imagination be your guide when it comes to frames and mat frames. The “lace” pattern I used for the mat on this photo is rendered at the size of the photo, but is actually 421×421 pixels. I like this pattern since you can resize it without constraining the ratio and it still looks great. To create this framed photo:

1. Open the photo. Add white borders set to 10.
2. Open the lace pattern and resize to 200×246 (the original size of the photo).
3. Copy the lace pattern (Ctrl A, Ctrl C).
4. Paste on the photo as a new layer (Ctrl L).
5. Turn off the photo layer. (Don’t be alarmed by the checkerboard pattern…this is the transparent part of the graphic). Click inside the lace border selecting the interior portion. Expand this selection by 2. Save as a selection to an Alpha Channel (Selections|Save to Alpha Channel) name it “inner”. Deselect.
6. Then you need to make a mask out of the lace pattern. To do this, choose Masks|New|From Image, Source Window: This Window, Create Mask From: Source Luminance, Invert Mask Data: Checked. Then Masks|Save to Alpha Channel, naming it “Lace”.
7. Delete the mask: Masks|Delete, and say “no” when asked if you want to merge with layer.
8. Clear the layer (Edit|Clear).
9. Click on the photo layer. Load your “inner” selection. Invert your selection and flood fill with white.
10. Go back to the layer that is now clear and load your Lace Border selection. Flood fill with white. Bevel with my Gold_Old Blade Pro preset.
11. Add another new layer. Select all, then contract your selection by 10. Invert and flood fill with white. Bevel with the Gold_Old preset.
12. Add another new layer. Load your “inner” selection and apply the cutout filter as outlined above.
13. Add another new layer (with your selection active). Apply the cutout filter again except this time the color is white, the blur is 1 and the offset is -1, -1.
14. Save as a jpg to preserve the colors of the photo.

Frame Bevel Without a Plugin

   

You can create a pretty nice frame without a beveling filter. To create this frame:

1. Follow steps 1-9 in Frame a Photograph (through “flood fill with a pattern or color”).
2. Add a new layer with selection still active.
3. Apply the cutout filter Color: Black, Opacity 100%, Blur 8, Offset: 3,3.
4. Add another new layer with selection still active.
5. Apply the cutout filter again with same settings except for Offset: -3,-3.
6. Adjust the opacity slider on the two beveling layers until you get a good look for your frame.
7. Save as a jpg to preserve the colors of the photo.

Gold Mat Frame

A gold mat frame on a photo can be quite striking. You will need Greg’s Pool Shadow filter for this effect. You can download this filter by clicking here. To create this frame:

1. Open a photo and add a white border of 12.
2. Set your background color to R: 253, G: 228, B: 153 and foreground color to R: 187, G: 170, B: 114.
3. Select the white border and fill with a linear gradient set to 120 degrees.
4. Apply Greg’s Pool filter. You may have to play with the controls on the filter to get the shading the way you want it.
5. I then added another white border of 12, flood filled with wood and beveled the frame with my Frame_Shiny preset of Blade Pro.

Oval Mat Frame

An oval mat frame is another effective technique for framing a photograph. To create this mat:

1. Open a photograph.
2. Using the Selection tool set to Ellipse with “Antialias” checked, make an oval selection on your photo. You can move your selection with the mover tool if it is not exactly centered on your photo.
3. Save this selection.
4. Add a new layer with selection active. Invert this selection and flood fill with your mat color choice. If you want to add the cutout and white drop shadow to complete the mat frame, make your mat color something other than white.
5. Add a new layer and load the selection from the Alpha Channel. Apply the cutout filter as described above.
6. Add another new layer with selection active and add the white drop shadow as outlined above.
7. Make a copy of your graphic (Shift D).
8. Working on the copy, add a contrasting border of 12. Select the border and flood fill with a color or a pattern. Bevel the frame.

Quick Frame

The easiest way to make create a frame for a photograph is to use PSP’s Shapes Tool. To create a frame with the Shapes tool:

1. Open the photo you want to frame, copy and work from the copy.
2. Add white borders if you think you might need more working room to catch the part of the photo you want to frame.
3. Promote your photo to a layer.
4. Add a layer and drag under your photo and flood fill with white (this will be the background fill layer).
5. Add another layer.
6. Working on the top layer, set the shapes tool to “outline” (Style Stroked for PSP 6) with an outline width of around 20, color black with antialias checked.
7. On your new layer, draw an ellipse outlining the part of the photo you want to frame, keeping in mind that you will add 20 pixels outside your selection for the frame.
8. Move your black frame if needed by clicking on it with the mover took, hold down the left mouse button and drag.
9. Turn off the photo layer so that all you have showing is the black frame and the white bottom layer.
10. Choose Masks>New>From Image (This Window, Invert Mask Data checked). Then choose Masks>Save to Alpha Channel, then Masks>Delete and don’t merge with the layer (this saves the frame selection).
11. Click inside the frame you just created with the magic wand then expand this selection by around 3. Save this selection (this will be the selection you will use to eliminate the unwanted part of the photo.
12. Click outside the frame with the magic wand, invert your selection, contract the selection by 1 and save the selection to an alpha channel (this will be used for the shadow later if you want to add a drop shadow to the frame.
13. Clear the layer (Edit>Clear).
14. Turn the photo layer back on.
15. Working on the cleared layer, load the frame selection and flood fill with a color or a pattern.
16. Add another new layer, leaving the selection active (or load from alpha channel if you dropped it).
17. Apply the cutout filter set to Color: Black, Opacity 100%, Blur to somewhere between 25-35, offset 0,0.
18. Adjust the opacity slider until you get the look you want.
19. Go back to your photo layer and load the inner selection. Invert your selection and hit delete.
20. Add another new layer and drag it under the frame layer (between the frame and the photo). Load your outer selection and add a drop shadow Color: Black, Opacity 100%, Blur 10-15, Offset 0,0.
21. Adjust the opacity slider until you get the look you want on this layer.
22. Flood fill the bottom fill layer with your background color.
23. Save as a JPG.

Unusual Shape Frames

Frames don’t necessarily need to be rectangular. Following are some unusual frame shapes for you to experiment with.

  

You can download a zip file of these three frame shapes (and several more) saved as psp files with masks and selections saved by clicking here. To use these frame masks:

1. Open your photograph.
2. Open your frame choice and resize to the same size as your photograph.
3. Copy the photograph and paste as a new layer onto the frame graphic.
4. Drag your photo layer to just above the “Background” layer.
5. Load the “Mask” mask from the Alpha Channel (Masks|Load from Alpha Channel).
6. Delete the mask and say “yes” to merge with the layer. You should now have your photo masked in the shape of your frame with your background showing through.
7. Click on the layer above the photo. You can clear the layer of the frame. I just left the image there for reference purposes.
8. Load the frame selection (Selections|Load from Alpha Channel).
9. Fill with your frame pattern and bevel.
10. If you want, add a new layer, load the “inner” selection and add a cutout effect.
11. Flood fill your background layer with your background color of choice and save as a jpg, or gif if you need to make the background color transparent.

 

---

Rectangular Buttons

                

The first button was created with Paint Shop Pro’s Buttonizer Edge size Height: 8, Width: 8, Opacity 50, Transparent Edge; with background color set to button color. The second button was created the same as above except for Height: 4, Width: 4 and Solid Edge checked. The third button was created with Graphics Plus Button Beveler. The fourth button was created using Eye Candy Inner Bevel set to 6. The fifth button was created with Blade Pro.

---

Double Buttons

Using Paint Shop Pro’s layers feature gives you a lot of room for creativity in creating buttons. A double bevel button looks quite attractive and is easy to make with layers.

                

The first button was created with PSP’s Buttonize filter, the second with Graphics Plus Bevel, the third with Eye Candy’s Inner Bevel and the fourth in PSP with the “soft bevel” technique and the last with Blade Pro (it creates the double for you).

To make the first three layered buttons:

1. Create a new graphic the size you want your button to be (mine was 100×100, but I reduced it to 75×75 on this page.
2. Add two new layers. The quickest way to do this is to hold down the shift key and click twice on the “Add a New Layer” icon.
3. On the second layer, choose selections, select all. Then choose Selections|Modify|Contract and contract your selection to what you think would be a good placement for the inner layer. I contracted mine by 8.
4. Choose Selections|Save to Alpha Channel and save this selection.
5. Deselect and choose Selections|Select All again and fill with your button color. Buttonize or bevel.
6. Click on the top layer. Choose Selections|Load from Alpha Channel and load your inner selection.
7. Fill this selection with button color and bevel or buttonize again.
8. You will probably want to save this button in PSP format, since it is a template for a double button you can reuse any time you want to create a new double button in a different color. You might want to name the layers “Background”, “OutBevel” and “InBevel” or something similar.
9. Fill your background layer with the color of your background.
10. Choose File|Save a Copy As and save as a gif or jpg.

To make the second to the last button:

1. Create a new white graphic. Make your outter button selection, save the selection to an Alpha Channel, fill selection with black.
2. Contract your selection (mine was contracted by 10). Save this new selection and fill with white. Deselect.
3. Choose Masks|New|From Image, Selections|From Mask, Selections|Save to Alpha Channel, then delete the mask and don’t merge with the layer. Deselect.
4. You should now have three selections saved to the Alpha Channel, the large rectangle, the smaller rectangle and the outline.
5. Fill this layer with white and add a new layer.
6. Load the large rectangle selection and fill with a color.
7. Add a new layer, load the smaller rectangle selection and fill with a color.
8. Add two new layers. Load the outline selection and do the “soft bevel” routine as outlined in the tutorial below using the two new layers.
9. Add another two new layers. Load the smaller rectangle selection and do the soft bevel again using the two new layers.
10. Fill your background layer with your background color. Adjust the opacity levels on the soft bevel layers.
11. Save as a PSP file for future use.

Click here to download a zip file of this button template.

The last button was created with Blade Pro. No muss..no fuss!

---

Pill Shaped Buttons

To create this button:

1. Create a new graphic 160×80 pixels.
2. Set your grid to 20 x 20 and turn on grid.
3. Set the selection tool to circle and check Antialias.
4. Draw a circle starting dead center at an intersection. You want the circle to be 38×38 (this will end up 40×40 with the antialias).
5. Fill this circle with black.
6. Set selection tool to rectangle and turn off Antialias.
7. Place your cursor dead center at the top of the circle and draw a rectangle 60 x 40.
   
8. Fill with black. Deselect.
   
9. Choose Masks|New|From Image (This Window, Source Luminance, Invert Mask Data selected), then Selections|From Mask, and then Masks|Delete and don’t merge with the layer.
10. Choose Edit|Copy, Edit|Paste as a New Selection. Then choose Image|Mirror. Move the selection until it lines up as follows:
    
11. Deselect. Choose Masks|New|From Image (This Window, Source Luminance, Invert Mask Data selected), then Masks|Save to Alpha Channel (give it a name), then Masks|Delete and don’t merge with the layer.
12. Turn off your grid lines, you won’t need them any more.
13. Flood fill your original layer with white. Add a new layer. Flood fill with black.
14. On the new layer, choose Selections|Load From Alpha Channel and load your selection. Flood fill with white. You should now have a white pill shape on a black background.
15. Set the selection tool to Ellipse and turn on Antialias.
16. Make a selection similar to the following (make a selection then move with the mover tool.
    
17. Flood fill selection with black. Deselect.
18. Apply a Gaussian Blur set at “3”. Your image should now look like the following:
    
19. Load your mask (Masks|Load from Alpha Channel). You should now just see your button with a white background. Delete the mask and merge with the layer. Name this layer “Button”.
    
20. Add a new layer and name it “Color”.
21. On the color layer, load your selection (Selections|Load from Alpha Channel) and fill with your color choice. Adjust the opacity slider on this layer until the button shows through. You can also adjust the opacity slider on the button layer.
22. I then added text in two layers, the first the black text and the second the white drop shadow (so I could adjust the opacity on the drop shadow layer).
23. I also added a drop shadow to the button by loading the selection on a new layer and adding a drop shadow.

You now have a multi layered button you can save as a PSP file and then fill with any color or pattern you want. I cropped the final button to get rid of some of the extra white space around the button (cropping a layered button will not effect the layers or the mask at all). For a zipped copy of this button, click here.

This button can also be resized. You can also successfully stretch this button (within reason, of course). To stretch the button, resize it with “constrain aspect ratio” unchecked. Make the button wider, but leave the height the same.

---

Soft Beveled Buttons

Creating softly beveled buttons on a fine grain background can be very dramatic. All the buttons in the following graphic were made with fonts (mostly the button font). I am including the background I used for anyone would would like to try a fine grain background on their page.

   

To create a soft beveled button:

1. Create a new graphic.
2. Add a new layer, call it “Button”.
3. Add two more layers and call then “Bevel Top” and Bevel Bottom”.
4. Click on the button layer and either make a selection for your button or use the button font to place your selection. Fill with the color or pattern you want for your button. Save your selection to an Alpha Channel.
5. Click on the Bevel Top layer. If you deselected your selection, load it from the alpha channel. Apply the cutout filter Color: White, Opacity 100%, Blur 6-8 and Offset 3, 3.
6. Click on the Bevel Bottom layer and apply the cutout filter again Color: Black (or a very dark version of the button), Opacity 100%, Blur 6-8 and Offset -3, -3.
7. Adjust the opacity sliders on the bevel layers until you get a look that pleases you.
8. Fill the background layer with a color or pattern.
9. Save as a PSP file if you want to use this button as a template.
10. Otherwise choose File|Save a Copy As and save as a jpg or gif.

Depending on the size of your button, you may want to increase/decrease the horizontal and vertical offsets. Creating odd shaped buttons out of a fine grain background image allows you to be able to save the button as a jpg without applying a transparent background. With the fine grain, the outline of the button is not detectable.

This method obviously works well on a plain colored background, but I don’t think the effect is quite a dramatic.

---

Adding Text to Buttons

Adding text to a button is very easy. You want the text to stand up and be noticed! But, on the other hand, you need to make your buttons readable. My advice is to stick with a plain font (I used Brooklyn below). Fancy fonts tend to be hard to read. Following are text font examples and how to create them:

      

The first button has plain text in a light version of the button color. It is readable and looks neat. The second and third buttons have a drop shadow applied (opacity 55, blur 1, offset 1,1). The dark text has a white drop shadow with a blur of 1 and the light text has a black drop shadow. I think these two buttons are much more readable and they stand out a lot better. If you put your text on a layer, you can change the text later without having to remake your button.

---

Buttons with Graphics

Placing graphics on buttons can make effective navigational aids. The following buttons were created by creating a square the color of the button, beveled with a small bevel, then graphics were applied (in this case they are fonts…all from the font “International”) in a very light version of the button color with a drop shadow to make the graphic stand out.

         

---

Navigational Buttons

Sometimes strategically placing buttons as navigational aids can be very effective. Following are sample navigational buttons. The first set just has a drop shadow, the second set are beveled.

---

Cutout and Raised Text Effects

  

The first button is a “raised text” effect. Following is how this is done:

1. Working on a new layer, enter Text (a bold square type text works best) in a dark color or black.
2. Save the text selection to an Alpha Channel.
3. Drop text and deselect.
4. Add a new layer.
5. Load text from alpha channel.
6. Apply a white drop shadow opacity 100%, blur 2, offset -1, -1.
7. Deselect and play with opacity slider to make the shadow look the way you would like it to look.

The second button is a “cutout” effect. Following is how this is done:

1. Working on a new layer, enter Text (again, a bold square type text works best).
2. Save the text selection to an Alpha Channel.
3. Drop text and deselect.
4. Add a new layer.
5. Load text from alpha channel.
6. Apply the cutout filter: Fill with Interior Color unchecked, Opacity 100%, Blur 2, Offset 1,1.
7. Deselect and play with opacity slider to make the cutout look the way you would like it to look.

---

Cylindrical Buttons

  

Click here for a tutorial on making the above buttons and more.

---

Oval Buttons

   

The first button is created by using a linear gradient of a very dark color as foreground and a very light version of the color as the background color.

To create the first button using a font:

1. Use button font “!” set to 28.
2. Fill with a linear gradient set to 90 degrees.
3. Use button font “!” set to 22 (place in the middle).
4. Choose Image|Mirror.
5. To give the inner edge a slightly softer look, feather your selection by 1 before you choose Image|Mirror.

To create the button using the selection tool:

1. Set the selection tool to Ellipse, Antialias checked.
2. Make your selection.
3. Fill with a linear gradient set to 90 degrees.
4. Contract your selection by whatever amount looks good to you.
5. Choose Image|Mirror.

This button can be created in layers and saved as a master so you can create the button again, any time, in a different color. To create this button in layers:

1. Add two new layers to the background layer, name the first new layer “Outer” and the second new layer “Inner”.
2. Click on the “Outer” layer. Place the button font set to 28. Save the selection to the Alpha Channel as “Outer”. Fill as outlined above.
3. Click on the “Inner” layer. Place the font set to 22 and save this selection as “Inner”. Fill as outlined above.
4. Save the button in PSP format.

The second button used the same font with the “soft bevel” technique (see above).

The third button was beveled with Eye Candy’s Inner Bevel. The fourth button was beveled with Blade Pro.

---

Round Buttons

                

For round buttons, it is best to use a font for the circle (this anti aliases the edges). You can download Chancery Ornaments and use the “l” for these buttons. The first three buttons above were created the same as the oval buttons. The fourth button was filled with Sunburst Gradient set to V: 65, H: 35 to create a sphere. The last button was beveled with Blade Pro.

Drop Shadow Buttons

Create this button in layers and save as a psp file and you can change the color and background any time you want for a new button! To create this button:

1. Create a new graphic the size you want your button to be plus 5 pixels around each edge.
2. Draw your button with the selection tool.
3. Save your selection to an alpha channel.
4. Add a new layer and call it “Color”
5. Add another new layer and call it “Shadow”
6. Click on your color layer and fill.
7. Click on the “Shadow” layer and apply a drop shadow with the opacity at 100%. If you get white pixels around the edge of the graphic, clear the shadow layer (Edit|Clear), and contract your selection by 1 then add the drop shadow.
8. Play with the opacity slider on the shadow layer until you have the effect you want.
9. Add layers for text. You can save each text selection so that if you want to change the color of your text the next time, you can just load the text selection and fill with the new colored text.
10. Fill Background layer with your color choice.
11. Save as a PSP file.
12. To save each individual button, turn on the layers you want and choose File|Save a Copy As and save as a gif or jpg.

---

Cutout Buttons

Cutout buttons are another easy and elegant button. This is another good button to make a template and save. Then when you want a cutout button, just bring up your template and fill with your new color. For this button:

1. Create a new graphic the size you want your button to be.
2. Add a new layer and call it “Color”
3. Add another new layer and call it “Cutout”
4. Click on your color layer and fill.
5. Click on the “Cutout” layer and apply the cutout filter: Black shadow color, Opacity 100%, Blur 6, Offset 2,2.
6. Play with the opacity slider until you have the effect you want.
7. Add layers for text. You can save each text selection so that if you want to change the color of your text the next time, you can just load the text selection and fill with the new colored text.
8. Fill Background layer with your color choice.
9. Save as a PSP file.
10. To save each individual button, turn on the layers you want and choose File|Save a Copy As and save as a gif or jpg.

---

 

Web Site Building Resources

• Lunarpages Are you looking for a reasonably priced and well-run web hosting service? If so, try Lunarpages. I highly recommend them.
• Lone Wolf’s Software If you like the Java Script “mouseover” effect, go to this page and download his freeware program Java Script Buttons II. Makes creating mouseover effects a snap!
• For Industrial management software, ERP Software is the best
• Cedge’s Cheat Sheet This is a great place to learn HTML tips and tricks. A very well-organized and informative site!
• Web Monkey This is site covers all aspects of designing a website from Javascript to Flash and everything else you need to know to design a great website.

Graphic Programs and Filters

• Jasc SoftwareHome page for Paint Shop Pro.
• HomeSiteThis is not a graphics program. It is, in my opinion, the best HTML editor on the Internet today. Well worth the shareware fee.
• Blade finally. An affordable beveling filter that works as well as Eye Candy’s Inner Bevel. If you don’t need all the extra plugins that come with Eye Candy, Blade Pro (at $49.00) is definitely what you want for a beveling filter.
• Filters UnlimitedBoogie on over to this site and download this utility. Then pay the $35.00 shareware fee. It’s worth every penny. With this utility, you have 150 great filters at your fingertips. Plus, you can download any “8bf” filter into a database in the program (this includes all the Filter Factory Plugins). Once you have your filters in databases, you can move them around, rename them, etc. Then, you can use the randomize button to test effects and when you find an effect you like, you can save the preset for future use. This one is a MUST HAVE!
• Picture DicerA great little freeware program that allows you to “dice” large graphics into smaller graphics for quicker loading. Dices your graphic and then writes the HTML to reassemble it.
• Filter Factory PluginsMost works fine with Paint Shop Pro.

Shareware and Freeware Fonts

• The Dingbat Page A huge assortment of dingbat fonts. One of the most up-to-date dingbat sites on the internet.
• Astigmatic One EyeThis is where you can download the “Button” font I refer to in many of my tutorials.
• FontenniumA great collection of old-style (antique) fonts.
• Font DinerA great collection of retro-style fonts. Some freeware but the purchase fonts are very reasonably priced.
• Fonts & ThingsA good collection of fonts.
• Acid FontsAnother good collection of fonts.
• Font PoolGood collection of fonts, nicely categorized.
• Font FreakDingbat and text fonts. Pretty good collection.
• Font Management Utility I highly recommend using a font management utility to handle your fonts. These utilities allow you to easily install and uninstall fonts, categorize fonts, print fonts and view fonts. My favorite is Typograf. This program is inexpensive and very powerful. I keep most of my fonts in folders and open the folders in Typograf when I want to use a particular font. For dingbat enthusiasts, this program is your dream come true. You can view your fonts and print your fonts in “keyboard” format (i.e. each dingbat is shown above the appropriate key on the keyboard).
• Font Finding Hint: Go to http://www.google.com and enter “Free Fonts” in the search engine. You will find so many free font sites you may not see the light of day again for a week!

Usenet Newsgroups

• comp.graphics.apps.paint-shop-pro The Usenet Newsgroup for Paint Shop Pro
• alt.binaries.fonts A usenet newsgroup where people post fonts. Not all are legally posted, but you be the judge.

Other Paint Shop Pro Sites

• JASC – Tutorial Sites A complete listing of PSP tutorial sites.
• PSP Tutorial Links A great PSP links site organized by subject.
• PSP Tutorials This is the place to go when you are looking for a specific tutorial. Renald has tutorials sorted by subject.
• PSP FAQ An excellent FAQ (Frequently Asked Questions) about Paint Shop Pro and much, much more. This site is worth a visit just to experience Porter’s humor.
• Tom Vallombroso (State of Entropy) Tom’s site has some very interesing and complex tutorials.

Web Graphics Sites

• Jaguarwoman Graphics A collection of some of the most exquisite graphic sets I have ever seen. Visit this page. You will be awed and inspired…guaranteed!
• DesktopPublishing.com Need a texture to design a background or a graphic? Visit this page for links to more free textures on the Internet than you could ever hope for!
• The Wizard of Draws’ Graphics Treasury Absolutely delightful cartoon gifs…free!
• The Mining Company Lots of links to web clip art
• ArtToday offers over a million images and lots of fonts, ready for immediate download. Cheap subscriptions and free samples, too.
• The Clipart CollectionA large collection of clip art, including animated gifs.
• Amazon.com is where I buy all my books on-line. Their book prices are the best I have found on the Internet, their shipping costs are very reasonable and they usually ship Priority Mail at no extra cost. Try entering “Dover Clip Art” in the search box below to find tons of clip art books.

Metallic Text

    

I am recreating this effect that I demonstrate in my PSP 4 tutorial, even though I don’t think the Hot Wax Coating effect works as well in Version 5 as it did in Version 4. The following is the best I have come up with in recreating the effect in Version 5:

1. Create a new white image. Don’t work on a layer, you have to work on the base layer defaulting to “Background”.
2. Use a wide text (this text is Brooklyn).
3. For the gold text set foreground color to r:165, g:124, b:3 and background color to white, for the silver text, set foreground to a very dark gray.
4. Place text.
5. With text still selected Select|Modify|Feather.
6. Set feather to “1” and click OK.
7. With text still selected hit the “delete” key.
8. For the gold text, change foreground color to r:253, g:228, b:153, for the silver, change to a light gray.
9. With text still selected, choose Image|Other|Hot Wax Coating.
10. Sharpen (Image|Sharpen) or Sharpen More.
11. Promote your selection to a layer (Selections|Promote to Layer).
12. Save your selection to an Alpha Channel (Selections|Save to Alpha Channel), deselect text.
13. Click on the first layer and flood fill with your background color choice.
14. If you want to add a drop shadow (recommended since it enhances the metallic effect), add a new layer.
15. On the new layer load selection (Selections|Load from Alpha Channel).
16. Apply a drop shadow with opacity at 100%. Deselect and adjust the opacity slider for the shadow.

You can create any color of metallic text by starting with a very dark version of a color, then applying a hot wax coating of a light version of the color. This same technique works with dingbat fonts. The following were created using the Metallic Text technique

More Metallic

The header graphic and the horizontal line on this page were created using this technique.

1. Open a new white graphic in 16 million colors.
2. Set your foreground color to light gray.
3. Place your text or dingbat font, floating checked. Be sure you do these steps on the background layer and not on a transparent layer or it won’t work.
4. Invert your selection.
5. Apply the Chisel Effect 25, transparent selected (Image|Effects|Chisel).
6. Invert your selection again.
7. Adjust the brightness by 25% (Colors|Adjust|Brightness & Contrast).
8. Set white to foreground color and apply hot wax coating (Image|Other|Hot Wax Coating).
9. Adjust the brightness again by 25% again.
10. You now have a dark silver.
11. Choose Selections|Save to Alpha Channel.
12. Choose Selections|Promote to Layer.
13. Duplicate this layer.
14. For gold, choose the duplicate layer. Choose Colors|Adjust|Red/Green/Blue and set to 75% Red, 38% Green and 0% Blue.
15. For the silver color, choose the silver layer and adjust the brightness and contrast again by 10-20%.
16. To colorize the graphic, add a new layer above the silver layer. Load your selection from the alpha channel and flood fill with a color. Adjust the Opacity Layer until you get the color you want. Or, just play with the Red|Green|Blue color adjustment until you get the color you want.
17. Play with the Colors|Adjust|Gamma Correction sliders to get a more intense metallic color.
18. Flood fill the background layer with a background color.
19. Save your graphic as a PSP file. You still have the original dark silver layer you can duplicate again and try a new color.

Beveled Filled Text

You can create a beveled effect on a fill layer as follows:

1. Fill a graphic with your background pattern.
2. Add two new layers, call then Bevel 1 and Bevel 2.
3. Click on the the Bevel 1 layer and place your text, floating unchecked.
4. Save your text selection to an Alpha Channel (Selections|Save to Alpha Channel)
5. Choose Image|Effects|Cutout and set Offset: -3,-3, Color: Black and Blur: 5-7. Leave opacity at 100%. Click OK.
6. Click on the Bevel 2 layer and choose cutout again and set Offset: 3,3, Color: White (or a very light version of the text color) and leave everything else the same. Click OK.
7. Now, play with the opacity slider on both bevel layers until you get the effect you want.
8. Add a new layer and a drop shadow if desired.
9. Save as a “psp” file preserving the layers. That way, if you decide to change your pattern background, all you need to do is to fill the background layer and your text will be ready to go.

Cutout Text

1. Create a text graphic with a background, fill and text layer (or use your template).
2. Add a new layer and call it “Cutout”.
3. Add another layer and call it “Shadow”.
4. For a filled text cutout, place your text in the color of your choice. Save your selection to the Alpha Channel.
5. Click on the Cutout layer and add a cutout effect: shadow color black, offset 3,3, opacity 100% and blur of 5-6.
6. Click on the Shadow layer and add a drop shadow: shadow color white, offset 1,1, blur 1, opacity 100%.
7. Now play with the opacity sliders on the cutout and shadow layers until you get the effect you want. And, if the color of the text is a little too dark, play with that opacity slider also.

To create the same graphic without the color fill, just turn off the text layer and you will have a cutout graphic that looks like the following:

Outlined Text

Outlined text is a cinch in PSP 5. You don’t have to work in layers to do this, but layers will give you a lot more flexibility in trying out different effects. To create text with a different colored outline:

1. Create a new text graphic file.
2. Place your text and save to an alpha channel.
3. Fill text with outline color.
4. Contract text (Selections|Modify|Contract) by 1-2.
5. Fill the contracted text with fill color.
6. You can then add special effects (drop shadow, etc).

This is a simple outline of a dark color in the background with the inner text filled with a linear gradient.

This is the same text with the PSP beveling technique applied (see above) and a drop shadow.

Embossed Text

To create embossed text:

1. Create a new text graphic.
2. Add a new layer and flood fill the new layer with white.
3. Set the foreground color to light gray and place your text, floating checked.
4. Save your text selection to an Alpha Channel (Selections|Save to Alpha Channel).
5. Deselect text and emboss (Image|Other|Emboss).
6. For a softer embossed effect, apply a Gaussian Blur at .5 to this layer.
7. Load your selection from the Alpha Channel (Selections|Load from Alpha Channel).
8. Expand your selection by 1 (Selections|Modify|Expand), or experiment with no expanding the selection.
9. Invert your selection (Selections|Invert)
10. Hit the Delete key.
11. Invert your selection again.
12. Contract your selection by 2-3 (Selections|Modify|Contract), depending on whether or not you expanded the selection on the emboss.
13. Flood fill the inverted selection with your text color or pattern.
14. Flood fill background layer with your background color.
15. Save as a PSP file or choose File|Save a Copy As and save as a gif or jpg.

Neon Text

Neon text is fun to create in Layers because you can actually watch the neon process “grow”. This helps you to better judge the process. Following are two methods to create neon text:

To create this glow effect:

1. Create a new image 16 million colors.
2. Fill background with a very dark solid color (don’t use a pattern).
3. Add a new layer.
4. Place your text, floating unchecked, and fill with the dark background color. Turn off this layer.
5. Save your selection to an Alpha Channel (Selections|Save to Alpha Channel).
6. Set the foreground color to the color you want the “glow” to be (choose a light, bright color).
7. Click on the bottom layer. Fill text with glow color. Deselect.
8. Apply a Gaussian Blur (Image|Blur) set to 2-3 (it should look pretty fuzzy).
9. Turn back on the top layer with the filled text.
10. Apply the “Dilate” filter several times (Image|Other|Dilate). The number of times you apply this filter will depend on how much “glow” you want. Since you have the text turned on, you will see the glow grow around the text.

If you don’t like your first try, just fill your background layer with your dark color, load the selection and fill with “glow” color, and try again.

To create this glow effect:

1. Create a new image 16 million colors.
2. Fill background with a very dark solid color (don’t use a pattern).
3. Add two new layers.
4. Click on the top layer, place your text, floating unchecked, and fill with the dark background color.
5. Save your selection to an Alpha Channel (Selections|Save to Alpha Channel).
6. Click on the middle layer.
7. Feather your selection by 5.
8. Set foreground color to your glow color and flood fill until you get the glow effect you like.

Again, as above if you don’t like your first try, clear the neon glow layer (Edit|Clear), load your text selection, feather and try again.

Perspective Shadow Text

Adding a perspective shadow to text or an image really causes the graphic to pop off the page and can be quite effective. To create this effect:

1. Create a new image 16 million colors.
2. Add a new layer.
3. Place text or graphic with floating unchecked.
4. Save your selection to an Alpha Channel.
5. Fill the selection with black or very dark gray.
6. Click on the Deformation Tool on the toolbar.
7. While holding down the “Ctrl” key, grab the center handle on top of the graphic and pull it in the direction you want your shadow to go.
8. Double click on the graphic and apply the deformation.
9. Drop your selection (Ctrl D).
10. Apply a Gaussian Blur set to at least 2.
11. Add a new layer and load your selection.
12. Flood fill with a text color, apply a filter if you want. Mine has a Blade Pro filter applied.
13. Adjust the opacity slider on the shadow layer until you get the effect you want.
14. Flood fill background with your background page color and save as a transparent gif.

Paint Shop Pro 6’s new Picture Frames is an exciting and fun addition to the program. But, creating your own frames can be a little confusing. This tutorial will teach you how to create your own Picture Frames and give you some tips and tricks on how to use them.

Creating a Picture Frame

A picture frameworks a lot like a tube. You create it on a transparent background and save it as a “pfr” extension, click here to learn more about pfr extension. When you apply a frame to a graphic, PSP creates a new layer, scales the frame to the graphic, and if you have a selection saved for a frame with transparent areas outside the frame, prompts as to who you want to fill this transparent area. When the frame is done, you end up with your graphic on one layer and the frame on a layer above the graphic.

When you save your frames, all you need to do is to save them into your Paint Shop Pro 6 Frames folder. I’m not exactly sure how PSP deals with the names. It doesn’t show them in alpha order once you start adding new frames. The new names show up in the order you add them.

I start all my frames with a template I save in the Frames folder of Paint Shop as a “psp” file. That way I can create variations of my frames without having to start over from scratch. My tutorials show you how to create a frame template, then how to make a frame from the template.

Configuring Associations for PFR Extension

If you add the “pfr” extension to your “psp” extension, you can directly save your graphic for your website as a pfr by choosing the psp extension and typing pfr over the psp extension. Otherwise, you can save your frame as a psp extension and then change the extension to pfr by renaming the graphic in PSP’s Browser. To add the association:

1. Go to File|Preferences|File Format Associations
2. Click on the Paint Shop Pro Image association so that it is highlighted
3. Click on the “Extensions” button and add “pfr” under the “psp”
4. Click on the OK button then OK again to save your change.

Now when you choose the psp extension when you choose Save, you can directly save a frame as a “pfr” file by just changing the extension from “psp” to “pfr” before you save.

Rules for Creating Picture Frames

1. Frames must be created on a transparent background for good graphics results.
2. The frame must completely fill the graphic, otherwise, you will get unexpected results.
3. Always start out with a rather large frame. The frames are sized to the graphic when you apply them and if you apply a small frame to a large graphic, the quality of the frame will suffer.
4. When you save it as a “pfr” file, it can only be one layer.
5. If you save a frame with any transparent background outside the frame (such as an oval or an irregular-shaped frame), you must have the outline of the frame saved as a selection and save the selection with the frame. This will prompt a “next” button on the Frames control panel where you can set the background color.
6. You can save a frame with a transparent background outside the frame without saving the selection for the frame. When you apply this frame, all the transparent areas on the frame graphic will be transparent. To correct this, just make a selection around the frame with a selection tool on the picture layer, invert your selection and flood fill with a background color or pattern.

Using Frames

Open the picture you want to apply the frame to. If the frame is oriented in a horizontal position and the picture is oriented in a vertical position, rotate your graphic 90 degrees to the right before applying the frame, then rotate back when the frame has been applied. You may need to rotate the frame layer to get the light orientation correct after a rotation. The light should be coming from the upper left corner. Image|Flip usually works fine to correct this problem. If you apply a square frame to a rectangular graphic, you will get a distorted frame. The same goes for applying a rectangular frame to a square graphic.

When you apply an irregular-shaped frame, you may get spare pixels of color around the interior and the exterior of the frame. To clean these pixels up for the interior, select the interior portion with the magic wand, feather your selection by 2-3, and hit delete a few times. To clean spare pixels around the outside of the frame, select the area outside the frame with the magic wand tool, feather by 2-3 and flood fill with your background color or pattern a few times.

Since you are visiting this tutorial, I suspect that you may have been bitten by the “fractal bug”. This tutorial is written for a freeware fractal program called Tiera-Zon. Go download the program if you don’t already have it since you will need it for this tutorial. This program is not exactly “intuitive” so I have written this tutorial to help you get familiar with the program and how it functions.

So, lets get started.

Open a new document (CTRL N). Up pops your basic fractal starting point. You might want to open another at this time so you can have two images to work on at the same time.

Now, before you jump right in it’s best if you learn how things work. The first thing you might want to do is to change the size of your fractal image. To do this, click on the  button on the left toolbar (or right click and choose “XY Size). I recommend starting with a setting of 256×256 or 320×240 (you can always resize it later) since the larger your image, the longer it will take for it to render. If you set it to 256×256 you have defined a square image. When you “zoom in” later, your image will always stay a square. On the other hand, if you define a rectangle and zoom in, the image stays a rectangle. If you are working on designing a tileable image, you’re better off starting with a square image. For purposes of this tutorial, choose 256×256.

OK, now you have your basic image the size you want it and now you may want to change the colors of your basic image. To do this click on the  button on the left toolbar (or right click on the image and choose “Color Controls”). The color control window will pop up:

The “Steps” part of the toolbar determines the intensity of colors. Leaving it at 2 is a good compromise, but of course, experiment! The sliders increase/decrease the amount of red, green and blue in the graphic. You can also just type in the numbers you want. Up decreases, down increases. You can also click on the “Cycle” button and watch your colors cycle through. If you find a combination you like, hit the “Apply” button. Tip: If you have several images open at one time, you will need to right click on the image you are working on and choose the Color Controls to activate it for that graphic. If you leave your Color Control panel open on your work space, it will only work with the graphic you were on when you opened it. Lets start with all steps 2 and colors set to R: 94, G: 42 and B: 24.

Now, lets get into the heart of the program. The first menu you want to explore is the “Draw” menu. This menu gives you a lot of preset starting points. So, let’s start with the Drop-Down menu from Newton/Mandel N/M Sets (just because these are my favorites). Click on the first choice (18). Wow…a completely different image. You will notice that this menu has an Undo choice. If you choose Undo, you will revert back to the basic image. But, with the “Draw” features it is unnecessary because when you choose a new “draw”, the program goes back to the basic image and starts again. You can verify this by choosing a couple of “draws” from the menu on one image you have open, then on the other image, go directly to the last draw you chose. You will see that both images are the same. The Undo feature is used mostly to undo filters. There doesn’t seem to be a shortcut in this program for the undo key (hint…hint to the author).

Scroll through some of the settings to get the hang of it. Then, choose setting 30. You should now have an image that looks like this:

Now, we’re going to pick out an interesting section of this fractal and zoom in on it. But, before we do this, save your image so that we can recall the original image. Choose File|Save and name it “tutorial”. Then choose File|Save As and name this “tutorial_1”. When save an image in this program, it saves the image and the parameters for the image (the *.zar files). Or, as an alternative, you can save only the parameters (File|Save Parameters). To get your parameters back, just open a new graphic and load your saved parameters (File|Load Parameters).

Ok, now let’s zoom in on part of this image. To do this, left click and drag surrounding an area defined as follows:

This will create a square selection. You can move your selection by left clicking and dragging it. Try to get it aligned squarely around the central image. Now, right click and choose “zoom into rectangle”. If you click on the “New View on Zoom” button  on the left tool bar, the program will create a new image of just the area you zoomed in on, otherwise the program renders the zoom in the current window. It is generally a good idea to have the program create a new graphic for a zoom, since you can’t “undo” a zoom. Keep playing with the zooms for practice. Tip: If you select your entire graphic and Zoom in on it with the New View on Zoom button depressed, you will end up with an exact copy of the current state of your fractal. This can save you time if you are off an a tangent and you think you might want to go back to your original.

Now, go back to your first zoomed image that should look approximately as follows:

Bring up your color control box again and reset the RGB to R: 35, G: 49 and B: 17. You should now have an image that looks like:

Wow, what a difference color can make! Now, go back to our original image we saved as “tutorial.bmp”.

We are now going to work with the filters menu. Start with Filters-1. The filters are divided into sections. This is because each section creates pretty much the same filter effect with variations. If you try a filter in one set that you don’t like, undo your work (Undo from the Draw menu) and move on to the next section. Cruise through Filters-1 and Filters-2 and Filters-3, trying out various filters while choosing “undo” to move on to the next filter. Unlike the “Draw” feature that goes back to the base image and starts a new “draw”, the Filters build upon each other so you will need to undo each try to preserve your base image as the starting point. The filters under the menu choice “Filters-3” that have an “FD” in them activate the menu to the right FD-Options. These filters build on the FD filters in Filters-3.

Now, lets move on to the Colors-1 menu choices. No need to hit “undo” here. The colors always go back to the base image before applying to the graphic. You can verify this by opening the Tutorial and Tutorial_1 graphics side by side. Then apply a color, move on down and apply a few more. Now, choose the last one you applied and apply it to the other graphic. They should look identical. If you want to go back to your original image, choose the top choice Method 0 [None]. Scroll your way down the color choices to see how it works. You will see that the color algorithms are applied to the basic structure of your fractal with various effects applied (such as swirls). If you come across a color application you particularly like, write down the number for future reference. Or, if you really like the image, save it and then move on.

Next, lets check out the Convolve menu. Be careful with these selections since some “undo” back to your original image. The most useful are the last group, Average, Sharpen, etc. Each of these pops up with a box that allows you to “apply” the effect then “undo” the effect which takes you back to the original image.

Now, close both your tutorial images and open them again. You will notice that you have check marks by the “Draw” option we chose and would have check marks by the Filter options if we had applied them. But, notice that the “color” button on the tool panel is greyed out. That means that you can’t use the panel to change colors. Don’t worry, you can get the ability back by “redrawing” the image. Choose another “draw” option, allow it to render, then go back to your original choice (30). Your color controls are back. This also works when you have saved an image with a “colors” menu option. If you “redraw” the image then go back to your original, you will then be able to use the color controls.

That’s the basics of the program. This should get you off to a good start creating fractals. The keys to remember are, save images often (you can always delete them later) and zoom in to create new images to work with.

Now, some of you may have noticed the resemblance between our Tutorial image and the sidebar graphic on this page. Well, that’s because the sidebar was made from the tutorial image. Making fractals can be a lot of fun, but not very practical. On the other hand, they make great sidebar graphics. To create this sidebar graphic, you will need the Filters Unlimited plugin. If you don’t already own this plugin (it’s only $35), I highly recommend you purchase it immediately. It has 150 great filters built in and the program gives you the ability to import all Filter Factory plugins into one convenient location, rename the filters, move the filters into categories, test the filters with the “randomize” button and save presets of the filters.

To create this sidebar image:

1. Apply the Filters Unlimited filter under Tile & Mirror|Radial Tile with a setting of Rotation: 129 and Zoom: 86.
2. Resize the graphic by 50%.
3. Add symmetrical white borders of 20.
4. Make a selection as demonstrated in the following image and apply the Buttonize Effect set to Height 1, Width 10, Opacity 90, Transparent Edge.
   
5. Crop your image as demonstrated below:
   
6. Add a right border of 1,000 and save your graphic.
7. I adjusted the Highlight/Midtone/Shadows because the image was kind of washed out after the resize.

I have created a couple of very nice top border backgrounds with this program, PSP and Filters Unlimited filters. Click on the original image below I created in Tiera-Zon (and then applied Filters Unlimited filters to create the tilable image) to see the background tile I made from the original fractal images.

Thanks to Gail (Nightingail) and Alice Gless for their tips on how the “FD-Options” work in Tiera-Zon.

   

Well folks…it’s finally here. A beveling plugin that works as well as Eye Candy and creates effects that Eye Candy can’t, all for only $49.00! Now we have the best of all worlds. With Paint Shop Pro and Blade Pro, what more could we ask for? I am writing this tutorial on Blade Pro because, even though it is a good beveling program, it is pretty confusing to learn how to use it. I have struggled for quite some time to grasp how it works and thought I would share that knowledge and some presets to get you going.

Note: Some of the text in this tutorial is taken from the Help document that accompanies Blade Pro with further explanations provided by me. I didn’t see any reason to “reinvent the wheel” and thought that since this is basically an advertisement for their program, they won’t mind my using their text.

Click here to visit Blade Pro’s web site to download a demo copy of the program.

When you are finished with this tutorial, you can visit my Blade Pro Application Tutorials:

Cutout Graphics – A tutorial on making cutout graphics similar to those on my intro web page.
Jeweled Background – A tutorial on making a “jeweled effect side bar background with Blade Pro.
Jewel Decoration – A tutorial on making a “jewel” decoration using a dingbat font and Blade Pro.
Recessed Buttons – A tutoral on making recessed buttons with a Blade Pro Preset. Also includes making screws.
Sidebar Graphics – A tutorial on making sidebar graphics and matching buttons, bars and decorations with Blade Pro.

Blade Pro Control Panel

The above is the menu interface for the program. The following is an explanation of the choices.

Shape: Choose the shape of the bevel from this popup menu. Choose from straight, curved, up-and-down, and doubled forms. Try different shapes on your text. You can come up with some pretty amazing results.

Radius: The width, in pixels, of the beveled edge. If this is more than half the width of the widest part of the selection, no area will be left unbeveled. The lower the setting the lower the bevel and vice versa. It is kind of tricky to get small bevels since the slider wants to jump quickly rather than gradually. Takes some practice to master

Height: Larger values here give the bevel a steeper appearance. Positive values cause the selection to rise out of its background, and negative values make it sink in. This actually changes the direction of the light. Positive numbers make the light from the top left and negative numbers from the bottom right. Negative numbers give a “cutout” effect.

Texture: The slider specifies the amount of texturing, if any. Positive values make the texture rise out of the bevel, negative ones make it sink in.

Gloss: Controls the shininess. Zero gives a chalky appearance; higher numbers are glossier. When you have a basic bevel preset, adding gloss makes the beveled parts show up better and makes your bevel look pretty much like it would look with Eye Candy’s Inner Bevel Filter. The bevel on the left below was made with Blade Pro with my “Bevel_Shiny” preset (available in the zip file of presets below) and the one on the right with Eye Candy. One difference between using the two filters is that Blade Pro makes the color a lot lighter. So, to compensate for this, make your original color a couple of shades darker to start with (or make the light colored light source darker).

    

Glare: Controls the size of the glossy highlight.

Reflection: Controls how much the selection reflects the Environment graphic. If you don’t want any reflection at all, turn this slider down to zero.

Glassiness: Gives the selection a glassy rather than opaque appearance. The color of the original image becomes the color of the glass. Note: As you move the slider to the right on this selection, it makes the color glassier but it also makes the color much darker. So if you are working on a shiny button, you want to start with a light version of the final color you are after.

Caustic: For glassy selections, this slider controls the brightness of the caustic highlight that appears opposite the light source. The tiny square just to the right of the slider lets you choose prismatic or white caustics. I haven’t been able to determine that this one does anything at all. Whenever I use this slider, there is really no difference from far left to far right.

Iridescence: Controls the strength of iridescent coloration, and Iri colors controls the choice of colors.

Together, these sliders reproduce the effect that gives soap bubbles their colors: if light is reflected from two surfaces separated by a very thin, transparent layer, interference colors will appear. You can use the combination of these two sliders to alter the color of your graphic dramatically. Play with them, it’s a lot of fun!

Tarnish: puts dull, matte color in the concave parts of the surface. The color-button just to the right of the slider lets you change the tarnish color. Tarnish needs a texture to work on so if your texture is blank, you won’t see any change.

The light angle controls are the two grey spheres. To change the placement of a light, drag the small blue dot to a new position. Best results come from placing the light somewhere in the upper half of the ball.

To the left and to the right are two color-buttons for changing the lights’ colors. If you want to turn a light completely off, set its color to black. You can come up with some pretty neat effects by changing the colors of the lights. Just keep in mind that one light should be a light color and one a dark to get the reflections necessary for a bevel.

Texture popup menu: Choose the texture you want. The first item is ‘no texture’; the next eleven items are built-in textures; and the last item is the custom texture.

You can use any greyscale BMP file as a custom texture. To do this, select the custom texture item from the popup menu, and use the file browser you’ll then see to choose a picture. BladePro will load the picture and use it as a texture. You already have a lot of potential new textures in your Paint Shop Pro “Papers” folder. All you need to do is to copy these “tex” files to your BladePro directory and then rename them all to “bmp”.

Texture Files: are “height fields” and describe the shape of a surface: black is low, white is high, grey is in between. The slider under the texture square controls the frequency and height of the texture. To the frequency of the left increase and to the right decreases frequency (thereby making the texture larger). blade comes with some texture files in its ‘environments and textures’ folder, and you can make your own. They can be as large as 256 by 256 pixels (larger ones will be squeezed to fit) and the right edge should wrap seamlessly around to the left, and the top to the bottom (in other words, make it a “seamless” tile). You can make your own textures, just be sure to save them as a “bmp” file. Or, you can create interesting textures by taking a premade seamless tile and making it greyscale, then saving as a “bmp”. Experiment!

Environment Files: Below the Texture Panel is the “Environment” files. When Reflection is on, BladePro will produce mirrorlike reflections of the environment graphic. Just click on the graphic and you can load any BMP file as an environment (these should be color, not black and white). You can find several samples in the ‘environments and textures’ folder that came with BladePro or you can make your own from any photograph. Keep in mind that the program uses all the graphic so if you have something like a sunset you want to make into an environment file, you might want to just crop out the light parts of the sunset. If you don’t want your selection to be reflective, turn the reflection slider down to zero.

Some of the example environments, like ‘gold’, appear to contain their own light source coming from the top left. If that conflicts with your design plan, you can spin the environment with – amazingly enough – the Environment spinner button, so that it better matches the rest of the lighting. This button is the one with the little curly arrow on it.

Glue Mode: popup. This controls how BladePro merges its graphics with the original image. Most of the time you’ll want to use Normal, but other modes can be good for special effects. If you’re an advanced Photoshop user, you can use the Tarnish and Caustic modes to isolate just those components of the image so you can composite them by hand.

Randomizer: Click it and you’ll get random new settings, which is useful for creating new effects or learning how the presets work. If you set the Texture to “none” and have the “reflection” slider at “0” you can see how the different settins work better than if you have a texture or environment set.

Load Preset: BladePro comes with about a hundred presets, which are prefab settings for making particular effects. To use one, click the Load button, and choose any preset file. Since most of the presets that come with Blade Pro are way too wild for my taste, I made a backup copy of them then deleted the presets I would never use from the “Environments and Textures” folder. Since you will undoubtedly be saving your own new presets, deleting the presets you probably won’t use will make finding your new presets much easier.

Save Preset: Once you have a combination that you like, you can save it as a “preset”. Be careful when you click on this button, though. If you accidentally choose a name you already have as a preset, the program will save over the old preset without prompting you that you are doing this. Exchanging presets has become a new passion for PSP enthusiasts! There is a listing of web sites with BaldePro presets at the bottom of this tutorial.

Blade Pro Tips

Blade Pro Setup: Your first instinct will be to install Blade Pro in your Paint Shop Pro Plugins directory. This is a good place for the “8bf” file (this is the file that runs the program) but this is not a good place for your “environments and textures” file. The reason for this is that Blade Pro will default to the last directory you had open each time you use it! I was constantly having to change the directory path to “Program Files/Paint Shop Pro 5/Plugins/Environments and Textures” every time I happened to open a new graphic from a new folder in Paint Shop Pro. So, I placed all my presets and bmp files in a folder called “Blade Pro” at my root directory. Now I just go to my “C” directory, then to the “Blade Pro” directory. Saves a lot of wear and tear on the nerves. You can actually make separate directories for different presets, but when you choose that directory, the program sometimes nags at you that Blade Pro can’t find your preset and wants you to tell it where the “Environments and Textures” directory is. If you just hit “Cancel” and ignore this message, it usually does your preset for you anyway.

Learning Blade Pro: As I stated at the beginning of this tutorial, I found using Blade Pro to be pretty confusing when I started using it because all the presets that come with the program are pretty wild. But, when I figured out how to set the program to do a “plain bevel” without all the added bells and whistles, I was then better able to figure out how everything works. What I did was to create a white “bmp” file and named it “blank”. I then loaded it into the “Environment” box, set the “Reflection” slider to “0” and set the texture to “None”. I then started working on a button shape. This allowed me to see how the various shapes effected the graphic, how the light angles worked and how changing the colors of the lights worked. It also will demonstrate what happens to a texture when you adjust the various sliders.

Your Basic Bevel: There are three presets in my zipped file for a basic bevel. They are “Bevel_Soft” and “Bevel_Shiny” and “Bevel_Flat”. The following are samples of these three bevel presets:

    

As I mentioned before, when you apply the Blade Pro bevel, it tends to lighten the color of your graphic or pattern. To get around this, you can make the “white” light a shade of gray. This will stop the lightening process somewhat. These wood pattern graphics were created with my “Bevel_Shiny” preset. The wood pattern graphic on the left has the light set to white whereas the one on the right has the light set to a light gray.

    

Presets

The following are examples of some presets I have come up with. They are all in my Presets zip file which you can download by clicking here. All these presets started with a white fill. You can change the colors somewhat by starting out with a colored fill. You can also colorize the metal preset by playing with the Iridescence settings. Note: The Blade Pro header graphic on this page was created with the “Gold_Old” setting.

Copper	Metal
Gold_Shiny	Gold_Old
Gold_Black	Silver
Chrome	Chrome (blue text)
Chrome 1	Chrome 1 (blue text)
Candy	Black_Glass
The Candy color of the above preset can be changed by changing the light colors. With the Black Glass preset, you can lower the “Glassiness” setting and change the black light to a colored light for an interesting effect.

Following are some buttons I created with Blade Pro:

            

The first two are the gold_shiny and metal presets. The two wood buttons and the blue button were made with my “button” preset.

Links to Blade Pro Presets

New Dawn Graphics
State of Entropy Webgraphics
The Cheroke’s Home Page