GrafX-Design.com

tutorials

resources

inspiration

Earn money with your website

This web site is earning money... isn't yours? Read our article on Making Money on the Web with Google AdSense or click the image below to get started earning money with your web site.

Better Web Browsing!

If you need:

Better browsing...
Faster browsing...
More secure browsing!

You need to...

Web Hosting

Over time GrafX-Design.com has had to relocate itself a number of times due to growth, etc. Eventually we came across pair Networks. Pair Networks was recommended to us many years ago and now we'd like to recommend them to you. If you need reliable web hosting, then you need Pair!

Xara 3D

Create amazing, high-quality 3D graphics easily!

Read our review of Xara 3D 6 or click the graphic below to download a free trial version.

Virtual Training Company

Video-based learning at its best

Over 45,000 online tutorials, over 300 topics on CD.

View free demos online...

Adobe Software

ACDSYS Software

Coffee Cup Software

If you need to create or maintain a Web site, then you need...

Click Here for CoffeeCup Website Design Software

Free Trial Download!

Free Google Software

SAC Digital

Visit SAC Digital for all of your printing needs...
100% Satisfaction Guaranteed!

Your Ad Here!

Enlighten 3.5 million annual visitors as to why they NEED your product or service. Find out more here.

Current Favorites

Here's of list of our most popular tutorials:

Adobe Photoshop

Xara Xtreme Pro

Learn to create an illustrationn of a guitar!

Corel DRAW!

Corel Paint Shop Pro

Resources

We've compiled a list of grafx resources for you!

Link Exchange

GrafX Design is a high-traffic, highly-rated web site with all original content, and a better than average click-through-rate. We're intertesed in exchanging links with all types of web sites, so send us an e-mail or visit our link exchange page for more information.

Free Breast Cancer Handbook

Software Deals

Download and try out the free demos and then save 10%, 20% and more when you decide to buy!

GrafX-Design.com has partnered with some of the best software companies in the world to offer you terrific savings on your favorite programs.

AlienSkin

Photoshop Plugins

We've been using AlienSkin's Photoshop Plug-ins for over a decade and they are still our favorites.

Adobe Photoshop Creative Suite 3

Create powerful images using professional standards

Xara 3D 6.0

Create really cool 3D graphics!

Adobe

Photoshop Elements 5.0

Paint Shop Pro Tutorials -- The Magic of Masks

The Magic of Masks with Paint Shop Pro

This tutorial is a little more advanced than the first three but, as usual, I've tried to make them easy to follow. With harder work, though, comes more reward as you'll see when you've finished this tutorial. If you still have problems or questions after working through this one, e-mail me and I'll see if I can be of more help. This tutorial was put together using PSP 3.12. If you're using the new 4.1 some things will be a little different. Most notably you'll have to load and save the masks as files so that you can use them and you'll have to select "MASK">>"EDIT" to edit the mask. Other than that, though, it should be more or less the same :) It is a little more complicated but, hey, some things are a lot easier in 4.1.

That said, let's get started.

We've all seen bevelled buttons like this one...

figure 4.1

and I'm sure that with a little thought we could easily see how it was made, with a lighter top and left side and a darker bottom and right side. Seems easy enough. If the original graphic was textured, though, it would be a little tougher. Rather than just a darker or lighter color we'd like the actual texture to be a little darker or lighter. How is that done? Well that's where the magic of masks comes in. The mask commands are under the "IMAGE" menu choice. There are several mask options available; we'll be working with the following...

Add Mask, Create Empty Mask and Delete Mask.

To get started open a textured file. I'm using this wood texture that I got with a 3D program I purchased a while back. If you don't have one, search on the 'net, get a clip art CD or borrow this one.

figure 4.2

Make sure, as always, that its color depth is 16.7 million colors. Now under "IMAGE" select "CREATE NEW MASK". This will give us a new mask like the following.

figure 4.3

We'll set this first mask up to lighten the top and left side of our textured graphic. To do that set the forground color to white by double clicking on the foreground color icon. It's the black square shown below...

figure 4.4

This will bring up the 256 color dialog box. This is because all masks are greyscale images. This might be a good point to give a short explanation of how a mask works. A mask is a greyscale image that is the same size as our graphic. It allows us to do things like lighten or darken a part of an image without affecting any other part of the image. Kind of sounds like magic doesn't it? It's not really that difficult to implement, though. What happens is that in the places where our mask is white the image will change, where the mask is black our graphic will remain unchanged and, if we used shades of grey, the changes would depend on how dark the shade was. Lighter grey, more change... darker grey, less change. Select the lightest white. It's the selection in the lower right hand corner of the color dialog box. The upper right is the darkest black and all the others are the shades of grey in between. Now select the line tool...

figure 4.5

to draw some lines along the top and left side. I wanted the lines to be 10 pixesl wide. Now because of the way we're going to position the cursor when we draw the lines and since the line's thickness is drawn outward from the middle of the pointer we'll tell PSP that we want the line to be 20 pixels wide. If you don't understand that last part don't worry about it, just set the line width to be twice the width of the line you actually want. Now postion the pointer in the upper left hand corner, press and hold down the left mouse button and drag the pointer to the upper right and release it. Now go back and draw another line down the left hand side of the mask. Your mask should resemble this one...

figure 4.6

If it's not quite right use "EDIT">>"UNDO" and try again. When you're satisfied that it's right we'll proceed to the next step. This is the first tricky section. Not too hard, just a little tricky. You might want to zoom in about 4:1 or 5:1 to make it a little easier. Use "VIEW">>"ZOOM IN". What you want to achieve is the diagonal look at the ends of the lines as shown below.

figure 4.7

This can be done a number of ways... I drew lines from the corner of the graphic to dissect the larger white lines and then using the paint or fill tool...

figure 4.8

I filled in the parts I didn't want. You might want to just pixel-edit the graphic using the pencil tool. The important thing is that your graphic should now look like this one.

figure 4.9

At this point make your graphic, the one you're working on not the mask, the current graphic. Do this by clicking anywhere in the title bar of the graphic's window. Clicking there makes that the "current" working image. This is how you go back and forth between multiple images.

Now under "IMAGE" select "ADD MASK". This will bring up a dialog box. In it there will be a small window that allows you to select which graphic to use as the mask. When you select the little down arrow at the right of the window under the "source window" you'll see a list of files that are currently available. Select the one that corresponds to your mask. You may want to have this tutorial handy when trying this so you can check the instructions carefully. If after any step your graphic is drastically different, go back a step or two and make sure you know what's being done.

Now that this has been done our original graphic is masked. You will see a capitol "M" next to the file name of your graphic in the graphic's title bar. This might not be visible in the title bar if your graphic is small.

Now we'll make our first change. Under "COLORS" select "ADJUST">>"BRIGHTNESS/CONTRAST" This brings up the dialog box that allows us to change the brightness and contrast of our graphic. You'll see a smaller version of your graphic in that dialog box. This is where we'll see the effect the changes that we make will have. Don't be surprised that the changes seem to happen to the whole graphic in this dialog box. If your mask is done properly these changes will only occur on the masked part. You'll see what I mean in a minute. There are two selections we can make, "brightness" and "contrast". We'll only be adjusting the brightness, though. Use either the up arrow or enter a number like 30 in the brightness selector. Click "OK"

Your graphic should now look like this...

figure 4.10

Now we're getting somewhere, right? Okay, let's continue. Make the mask the current graphic (by clicking in its title bar). Then under "IMAGE" select "FLIP" then under "IMAGE" again select "MIRROR". The mask now looks like this...

figure 4.11

Now we have to change which mask the graphic will use. Make the graphic, NOT the mask, the current graphic. Then under "IMAGE" select "DELETE MASK" then under "IMAGE" again select "ADD MASK". This brings up the "ADD MASK CHANNEL" dialog box again. Choose the mask as the "SOURCE WINDOW". We'll have to go through this set of steps each time we change the mask. Plenty of work, eh? But we're getting there!

Now that the new mask is on we'll darken the bottom and right side of our graphic. Under "COLORS">>"ADJUST">>" BRIGHTNESS/CONTRAST" select the same number you used before but this time put a minus sign in front of it. i.e. I used 30 for %brightness last time so now I set it to -30 % brightness. Click "OK" and the graphic should look like this...

figure 4.12

Hey! Not bad, it's starting to take shape (No pun intended :) ).

Now set the forground color to black. Using the fill tool again fill in the thick white lines along the bottom and right hand side of the mask, turning the whole mask black.

Now for another tricky part. Ready?

We need a thin white line from the upper left corner to where the thicker white lines ended. Since I made the thick white lines 10 pixels wide I need to go from the coordinates 9, 9 to the upper left corner at 0, 0.

NOTE: Computers always start counting at zero!

The current coordinates i.e. where your mouse pointer is on the graphic is displayed at the bottom of the PSP screen somewhere near the middle. Set the foreground color to white, select the line tool and draw a line one pixel wide from 9, 9 to 0, 0 on the mask which leaves it looking like this...

figure 4.13

Set the graphic as the current image again, and go through the "DELETE the MASK" and "ADD MASK" steps as above. Finally, go to "COLORS">>"ADJUST">>"BRIGHTNESS/CONTRAST" and set the % brightness to a little higher value than we used the first time. I used 35. Click "OK" and our Beveled Textured Button is now finished.

figure 4.14

Save this file as a BMP. I know, I know we can't use a BMP on the 'web but we'll need to add text to this button later and it's better to work on it as a full 24 bit graphic. After adding text we'll save it as A GIF or JPG (probably JPG) and then we can use it on the 'web.

Okay, now comes another tricky part! We're almost done, though, and this will give our graphic a final polished look. We're going to add some text, but rather than just adding text to the image we'll use a mask. This will give the button a real professional quality.

Select the mask as the current graphic again and get rid of that small white line by turning it black. This can be done a number of ways. I set the pencil width to a higher number like 5 or 6 and just run the mouse pointer over the white line while holding down the left mouse button. We now have an empty black mask again. Set the foreground color to white and (here comes the trick) set the background color to a dark grey. Pick a grey that's dark enough so the mask will have a minimal effect but not so dark that you have problems telling it from the black. Something between the middle grey and the full black should work. Select the text tool and enter your text. Make sure that you've chosen "Shadow". What will happen is that we'll get the text in white with a dark grey shadow. The reason will soon be apparent.

NOTE: Be sure that anti-aliasing is NOT on. This would give us a lot of grief in the next steps :)

If you're using 4.1 you will have to use the same technique that was used in my shadow text tutorial, as 4.1 doesn't have the same "shadow" option when creating text. Don't soften the shadow though :)

Place your text in the middle of the mask and it will look similar to this...

figure 4.15

The grey may not be visible at this resolution but it's there.

Once again, go through the "DELETE MASK" and "ADD MASK" steps as above.

Now using "COLORS">>"ADJUST">>"BRIGHTNESS/CONTRAST" , set the percent brightness to -35 or so.

Your graphic should now have dark lettering on it like so...

figure 4.16

Okay... So far so good. Last tricky part and we're done!

Make the mask the current graphic and set the foreground color to black. You may want to zoom in again.

Using the paint/fill tool, fill the lettering with black. Now you'll be left with only the grey shadow. Set the foreground color to white and using the paint/fill tool turn the grey shadowing to white. Now you'll see why we selected "shadow" text. The shadow part has now become our final mask.

figure 4.17

Go through, for the final time, the "DELETE MASK" and "ADD MASK" routine.

Finally, using, "COLOR">>"ADJUST">>"BRIGHTNESS/CONTRAST" set the percent brightness to 35. This will give the illusion of light on the edges of our text, making it look as though the text was woodburned into our button.

figure 4.18

Save this graphic as a JPG and it'll be ready for uploading to your homepage!

Here's another example created using these masking techniques...

figure 4.19

That's it.... Be sure to check out some of our other Paint Shop Pro tutorials.

High Quality video-based tutorials
...with over 300 different titles, all taught by professionals. Learn any application in a fraction of the time right from your own desktop. This unique method offers accelerated learning and a high retention rate. Here are a couple of topics that you might find interesting. View free demos of the courses using one of the links listed below.
Corel Paint Shop Pro X Essentials	Paint Shop Pro 7 Tutorials




[Previous Tutorial] [Paint Shop Pro Tutorials] [Next Tutorial]

If you own a digital camera and you're anything like me, you have thousands of digital photographs. It's great having all of your photos at hand, but how do you catalog them? What if you're looking for a specific image? No problem... Help yourself, and GrafX-Design by downloading Google's photo software.

We'd like to hear from you... If there are any Paint Shop Pro techniques you'd like to see covered, send us an e-mail.

I don't mind telling you that we have the very best Web hosting provided by pair Networks.