GrafX-Design.com - Paint Shop Pro Tutorials -- Gold Buttons and Bars with Alien Skin

tutorials

resources

inspiration

Paint Shop Pro Tutorials -- Gold Buttons and Bars with Alien Skin

Gold Buttons and Bars with Paint Shop Pro and Alienskin's Black Box

This tutorial is a little more advanced than some. It does, however, contain some important tricks that will make a large contribution to your graphics arsenal. Even if you don't have Alien Skin's Black Box I would recommend you read through this tutorial. I promise that it'll be worth the effort! In fact, this tutorial will walk you through some of the steps I used to create the award-winning "Powered by GrafX Design" site.

Open a new graphic. I started with a 200x50 image at 16.7 million colors. I used white as the background because these buttons and bars would eventually end up on a web site with a white background.

I'm going to do things just a little differently than with the originals; partly because I hate repetition and partly because the original GrafX Design buttons & bars were done in Photoshop using KPT's Gradient Designer. My version of KPT is an older 16-bit program and won't run with PSP 4.1 which is strictly 32-bit. This will show you, though, that PSP can do as good a job of designing web graphics as some of the heavy-hitters :) That said, what we'll do here is use a brushed metal look to make up for the missing metal gradient fills, thereby adding another technique :)

Use "IMAGE">>"SPECIAL FILTERS">>"ADD NOISE" with Random selected and %Noise set to 90. This will give you the following:

figure 9.1

Change the image to gray scale with "COLORS">>"GREY SCALE" then use "COLORS">>"INCREASE COLOR DEPTH">> "16 MILLION COLORS"

Select "IMAGE">>"DEFORMATIONS">>"WIND" with "From Right" selected and strength at 15.

This will give you an image like this:

figure 9.2

So far so good. Now here comes some tricky stuff :)

Select the selection tool and set it to rectangle with feathering at 0. Select a rectangle that mostly fills the graphic.

figure 9.3

Make sure that you leave enough room on both sides for the circular ends and, more importantly, that you leave a little more on the right so the the circular end doesn't have some of the edge distortion created by the wind filter.

This next part is probably the hardest part to get right. Don't worry, though; even I had to go through it several times to get it to the point where I was happy with it. Thank goodness for the "UNDO" feature :)

Reset the selection tool so that it selects a circle and leave the feather set at 0. Position the cursor along the top of the selected rectangle somewhere about as far from the left-hand corner as the height of the rectangle.

Hold down the SHIFT key and draw a circular selection to the left of the rectangle. If it doesn't meet up properly at the corners you'll have to use "EDIT">>"UNDO" and try again. It should end up like this:

figure 9.4

Repeating this process on the right side of the rectangle selection will give you the final button shape:

figure 9.5

NOTE: Make sure that you hold down the shift key during this process. This allows you to "ADD" to a selection. If you don't hold down the shift key any selection that has been made already will disappear.

To get rid of the part of the image that's outside of the selection,

Use "SELECTIONS">>"MODIFY">>"FEATHER" with a setting of 2. This will kill the "Jaggies"!
Set the background color to white (RGB= 255, 255, 255).
Select "SELECTIONS">>"INVERT"
Hit the "Delete" key.
and, finally, use "SELECTIONS">>"INVERT" again to get back to having the button itself selected.

You should have something like this:

figure 9.6

Now we'll adjust the color using "COLORS">>"COLORIZE" with 30 for the Hue and 200 for the Saturation. We'll also adjust the brightness and contrast with "COLORS">>"ADJUST">>"BRIGHTNESS/CONTRAST" using -32 for the brightness and 20 for the contrast:

figure 9.7

All that's left to do with the main button is to "Buttonize" it. For this we'll use Alien Skin's Inner Bevel: I used the default "Button" setting. Once this is done we can kill the selection with "SELECTIONS">>"NONE"

We now have a beveled button with a brushed metallic gold look:

figure 9.8

NOTE: Now would be a good time to save this button in a 24-bit format such as BMP so that we can make changes to it and still have the original.

Now we'll add the red light to this button. This is done by "drawing" with the selection tool once again. Select the selection tool and make sure that the selection type is still "circle".

Draw a circle selection starting somewhere near the top right of the button. If you don't get it right select "EDIT">>"UNDO" and try again :) Once this is done, choose a red color and, with the tolerance of the paint/fill tool set at max (200) and the fill style set at solid color, fill the circular selection.

To bevel the light we'll use the Alien Skin Inner Bevel filter again. This time, though, we'll play with the Bevel Width setting. I set it at 26 but the setting you choose will depend on how big the circular selection on your graphic is. What you want to do is get rid of the small highlighted circle that will show up with the default settings:

figure 9.9

Save this version as well, giving it an appropriate name such as "red_bttn.bmp". Now it will be available when you want to add text to it.

Select a color of green that you like and paint over the red part of the button. Use the Inner Bevel filter again with the same settings that you used for the red light and save this graphic as "grn_bttn.bmp":

figure 9.10

You now have two buttons, one red and the other green. All you need to do is place some text on them and upload them to your web site.

To add text select a gold or brown color. I used RGB = 102, 94, 70. Select the text tool. For these buttons I chose the "Fujiyama" font that came with Corel DRAW! 3.0 with a font size of 22 and "Bold" selected. I also set the anti-alias and floating options.

figure 9.11

Now that you've added text you can save this button as a jpeg. You may want to use the selection tool first to trim away as much of the white space as you can. With the red and green buttons saved you can add text whenever you need a new button for your site.

Of Course, you could cut this shape out of any texture graphic you have lying around. Here's one done from a wood texture:

figure 9.12

To create the horizontal "rules" or bars, I repeated exactly the same procedure but used a different size for the image. I started out with a new graphic at 450x20. It only took me 3 or 4 minutes to re-create this example. Of course I've had a little practice :)

figure 9.13

To create the vertical gold bars I cut out two small vertical rectangle selections and applied the same process as above. Once the graphic was done I cut and pasted the whole image into a large white image. This was then used as the background graphic for the GrafX web site.

figure 9.14

The difference here is that you have to cut out the top and bottom of the bevels, in order to assure that the graphic will tile seamlessly. Also make sure that the final width of this graphic is really large. I used something like 1008 pixels. This is so that the graphic will tile down the side of the browser window.

Well, except for the text and some of the images used at the tops of some of the pages this is how the graphics on this web site were created. In fact, if you've seen the "Link Up" page and wondered how the gold links were done, they were drawn using the selection tools in much the same way as the buttons and bars we just created in this tutorial.

To find out more about the Alien Skin Black Box plugin filters visit their web site.

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]

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.

Current Favorites

Here's of list of our most popular graphics tutorials:

Adobe Photoshop Tutorials

Quick Mask Have you ever wanted to do a little cutting and pasting and make it look as if your head was on someone else's body? Read more....

Corel (JASC)
Paint Shop Pro Tutorials

Transparent GIFs This technique demonstrates how to create transparent GIFs in Paint Shop Pro Read more....

Xara Xtreme Pro Tutorials

Illustrating a Guitar - Part 1 It may seem to be quite an undertaking to create a realistic illustration of something like an electric guitar, but I wanted to challenge the ease-of-use of this software. Read more....

Corel DRAW! Tutorials

Creating Complex Shapes Drawing circles, squares, triangles , etc. is easy with a vector program. How do you combine these shapes to create something more complex, though? Follow this tutorial and you'll see how easy it can be to create just about any shape you need. Read more....

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 graphics software companies in the World to offer you terrific savings on your favorite programs.