Chipotle Chill
Right about the time we began living a low-fat lifestyle, my husband bought me a cookbook “Chipotle Chile Cookbook” by Jacqueline Higuera McMahan (see cookbook recommendations) as…
Layers is a very powerful new feature of Paint Shop Pro 5. They give you much more control over your graphic, allow for lots of experimentation before you save your final graphic, and they save you time in making multiple versions of one graphic with different backgrounds. But, masks work totally different with layers than they did in Paint Shop Pro 4. So, first I will walk you through how masks work on layers.
A mask is a template. You can make a mask out of any black and white graphic. When you load a mask into a layer, what is white will be masked and what is black will allow anything under to show through. As an example, I have created a gradient mask (on the left) and loaded it into a picture of Betty Boop with a white background layer under the picture. Notice how the black portion of the mask is allowing the white background to show through. The gradient gradually blocks out more of the background as the color progresses towards white. The picture on the right has a black background fill.
This is the menu that pops up when you choose Masks|New.
OK, now you have the basics of masks down pat. Here’s a few hints for you.
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:
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.
OK, let’s frame this photograph of San Francisco.
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:
You can create a pretty nice frame without a beveling filter. To create this 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:
An oval mat frame is another effective technique for framing a photograph. To create this mat:
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:
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:
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.
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:
To make the second to the last button:
Click here to download a zip file of this button template.
The last button was created with Blade Pro. No muss..no fuss!
To create this button:
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.
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:
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 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.
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.
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.
The first button is a “raised text” effect. Following is how this is done:
The second button is a “cutout” effect. Following is how this is done:
Click here for a tutorial on making the above buttons and more.
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:
To create the button using the selection tool:
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:
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.
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.
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:
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:
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:
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
The header graphic and the horizontal line on this page were created using this technique.
You can create a beveled effect on a fill layer as follows:
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 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:
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.
To create embossed 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:
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:
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.
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:
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.
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.
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:
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.
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:
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.