|
|
|
|
||||
|
© 1998 by Mike Bresciani. All Rights Reserved.
3D buttons can add a nice affect to your web page. There are several programs and plug-ins on the Internet that will help you create them. However, using only the basic tools and filters included in Corel PHOTO-PAINT 8 you can create buttons of almost any shape or size.
In this article I will show you several ways to create 3D buttons. In general to create the illusion of a 3D button requires that you make a highlight on one edge, normally the upper left. Then a shadow on the opposite edge.
Here's how I do it.
First select a fill that you like. Then draw a mask in the shape of the button you want to create.
Next invert the mask.
Start the Boss filter. It's located under the menu item Effects | 3D Effects | The Boss...
Adjust the settings to get the effect you want. Keep the sharpness low. The brightness will control the strength of the highlight and the shadow. Width and height in combination will give you different edge effects. Smoothness... well it controls the smoothness of the highlight and shadow. For the Drop off, I prefer Mesa. Try the other choices, though, and see what you like. The direction should be pointing toward the lower right, this will put the "light" in the upper left. Once you get a button effect you like, don't forget to save it by clicking on the plus sign next to Style.
After you apply the filter, invert the mask so it surrounds the button. Then copy the button. Create a new image or clear the current image and paste the button in as an object. Now you are ready to add it to your Web page. A drop shadow adds a nice effect too.
Again start with a nice fill pattern. Draw a mask in the shape you want to make your button. Save your mask using the menu item Mask | Save.
Invert the mask, then create an object from the inverted mask using copy mode. This will create an object that is the inverse of your button. Since copy was used, it will leave the original fill on the background layer. You can see the background through the hole in the object so it looks like nothing has happened. If you look in the docker, though you can see the newly created object.
Bring up the Drop Shadow dialog box. It's under the Object menu. If you have never used this before you might want to experiment with the various controls a bit. For this effect we are looking for a dark shadow that looks like it is cast from the lower right, into the hole of the object that was created. Use settings similar to those pictured.
After the shadow is applied, right click on the object in the docker. This will bring up a menu. From this menu click on Ungroup. Then select the object to make it active.
Bring up the Drop Shadow dialog again. This time we will create the highlight. Reverse the direction of the shadow. Change the color to white or a very light gray. Adjust the opacity so you can see some of the pattern through the highlight. Apply the Drop Shadow.
Load the mask that was saved earlier. It's under the menu item Mask | Load. With the mask around the button, copy it using Copy Visible. Create a new image or clear the current one and paste the button in as an object.
This method looks best with curved edges. If you look real close at the square corner you can see that the shadow and the highlight don't butt together very well. Actually, they overlap. On the round edge this doesn't happen.
In this method we will create a bump map and overlay a fill pattern on top of it.
In general a bump map consists of shades of gray that define a 3D shape. When you overlay something on a bump map anything that is over a gray that is lighter than 50% black (medium gray) will be colored lighter and appear to be higher. Anything over a darker gray will be colored in darker shades and appear to be lower. Anything right at 50% black will stay the same.
Start out by opening a new image. Select 50% black as the paint color and then fill the image with that color. Select the Interactive Fill Tool from the Fill flyout.
On the Property Bar, choose Radial, Difference, and From Transparent to Paint.
Resize the radial fill to the size you need for your button. Drag the blue gradient bar out toward the edge. Somewhere in the area where the red arrow is pointing. Apply the fill.
Create a new layer. Fill the layer with your fill pattern of choice.
Make sure the fill layer is active. At the bottom of the docker window open the Merge drop down. Scroll toward the bottom and select Overlay.
You should see something like this.
Select the Magic Wand. In the Tool Settings dialog make sure the tolerance is set to zero. Click the Magic Wand in the black area, then invert the resulting mask to select the button.
Copy the button using Copy Visible from the Edit menu. Create a new image or clear the current one and paste the button in as an object. This will leave a slightly jagged edge around the button. I got rid of that by applying a feather of 2 to the object. The Feather command can be found under the Object menu.
Using CorelDRAW to Make Quilting Blocks · Creating a Painted Effect from a Photograph · Using Grayscale Masks in Corel PHOTO-PAINT · Adding Color to Black and White Photos With Corel PHOTO-PAINT · Fun With Photos -- Selecting Objects Part II · Fun With Photos -- Selecting Objects · Using Corel PHOTO-PAINT's Image Sprayer · 3D Web Buttons with Rolled Edges Tutorial · 3D Web Button Tutorial
Copyright © 1995–2013 Unleashed Productions, Inc., All Rights Reserved.
