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

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

Free Breast Cancer Handbook

Paint Shop Pro Tutorials -- 3D brushed metal buttons

Creating 3D Brushed Metal Buttons with Paint Shop Pro

If part of this tutorial looks familiar you've probably seen my original PSP tutorial on 3D buttons. For this lesson, however, I've upgraded the technique to take advantage of PSP 4.xx's new features. These new features make the first part of the technique go much quicker. As an added bonus, I'll demonstrate the Arithmetic feature again; this time showing you how to achieve a brushed aluminum look for your images. And I'll demonstrate how to add engraved text to your metallic buttons.

Another point I'd like to demonstrate is how you can work with mulitple image windows open at one time. Doing so makes it easier to draw certain objects. You can create portions of an image and copy&paste them onto the main image. This is analogous to an artist mixing colors on a palette. This techniques can even be used to replace the layers feature available on higher-end programs like Photoshop.

Let's begin.

Open three new 150x50x16.7 million color images (File, New). Make sure that the background color is white.

Set the foreground color to a dark gray (the color I chose was R 74, G: 74, B: 74) and the background to white.

Select the Selection tool and set the Selection Type to rectangle and the Feather value to 0.

Starting at the upper-left corener of the image, select about one third of the image (see figure 19.1).

figure 19.1

Select the Flood Fill tool. Set the Fill Style to Linear Gradient and click the Options button.

In the Gradient Fill Direction dialog box set the direction to 180 deg. and click OK.

Click anywhere inside the selection to fill it with the gradient.

Swap the foreground and background colors by clicking on the bent, two-headed arrows at the lower-left of the foreground/background color swatch.

Choose Selections, Invert.

Click anywhere inside the selection to fill it with the gradient.

You should now have something similar to figure 19.2.

figure 19.2

Make one of the other images active by clicking on its title bar.

Select the Selection Tool. Set the Selection Type to Ellipse and the Feather value to 3.

Draw a vertical oval selection (see figure 19.3).

figure 19.3

Choose Edit, Copy.

Make the main image active again by clicking on its title bar.

Choose Edit, Paste, As New Selection.

Move the Oval into place at the left-hand side of the image (see figure 19.4).

figure 19.4

Activate the image with the selection again by clicking on its title bar.

Swap the foreground and background colors again by clciking the bent, two-headed arrow at the lower-left of the foreground/background color swatches.

Select the Flood Fill tool and set the Fill Style to Solid Color.

Click anywhere in the selected area to fill it with dark gray.

Choose Edit, Copy.

Make the main image active.

Choose Edit, Paste, As New Selection and move the gray oval into place at the right hand side of the button (see figure 19.5).

figure 19.5

Choose Selections, None.

Choose Image, Normal Filters, Blur More to get a final button that resembles figure 19.6.

figure 19.6

Now you'll add the brushed aluminum effect...

Make the blank image active by clicking on its title bar.

Choose Image, Special Filters, Add Noise.

In the Add Noise dialog box, select Random and set the %Noise to 90. Click OK.

Choose Colors, Grey Scale and then Colors, Increase Color Depth, 16 Million Colors.

Choose Image, Deformations, Motion Blur.

In the Motion Blur dialog box set the Direction to 135 Deg. and the Intensity to 15 pixels. Click OK.

You'll now have a texture image that resembles figure 19.7.

figure 19.7

You can now combine the texture image and the 3D button image to achieve a brushed aluminum look.

Choose Image, Arithmetic.

In the Image Arithmetic dialog box set Source image #1 to the 3D button image and set Source Image #2 to the texture image. Set the Function to Add, the Channel to All channels, the Divisor to 2, the Bias to 1 and make sure that there's a checkmark in the Clip color values.

Click OK and you'll get a third image (fourth if you didn't close the image you were using to create the ends of the button) that should resemble a 3D, brushed aluminum button like the one in figure 19.8.

figure 19.8

Many readers have written in asking how I get the engraved look to the lettering and on the GrafX Design logo in PSP tutorial 18.

Here's how it's done :)

Using the same dark gray foreground color, select the Text tool.

Enter some text for your button (make sure that you've saved a copy of the button first so that you can change the text later). I used the Verdana font, with bold selected, at 12 points. Check the Anti-aliasing and the Floating boxes.

Use the mouse to position the text on the button.

Choose Selections, Modify, Overal Opacity. In the Selection Opacity dialog box set the Overall opacity (%) to 40 and click OK.

Choose Image, Special Effects, Add Drop Shadow.

In the Drop Shadow dialog box set the Color to White, the Opacity to 230, the Blur to 0 and both the Vertical and Horizontal offsets to 2. Click OK .

Choose Selections, None and you'll have a button with engraved text as in figure 19.9.

figure 19.9

This same effect can be achieved with a logo as I did in tutorial 18. I just opened the image, selected the logo, changed the opacity and pasted the logo onto the metal image. I then added the white drop shadow... That's it :)

Good luck and have fun.

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.

Create really cool 3D graphics!
Read our Xara 3D 6 review
or click the graphic below to
download a free demo.

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.