GrafX-Design.com
Home Tutorials Reviews Email Us
GrafX-Design.com
 tutorials | resources | inspiration 

Corel DRAW! Tutorials -- 3D Buttons



Creating 3D Buttons with Corel DRAW!


This tutorial will show you how to create 3D buttons in Corel DRAW! I used Corel DRAW! 7.0 for Windows. Some things may be done differently with other versions.

The buttons you'll draw during this tutorial were inspired by my stereo. I originally created these buttons for the first Earth Orbit Consulting web site. I subsequently went on to create the first GrafX Design online tutorial describing how I had created these buttons with Paint Shop Pro. To show you how some graphics can be created with a vector program as easily as they can be with a paint program, I'm re-creating that first tutorial here.

This technique involves a little more effort than the first Corel DRAW! tutorial though it's still rather simple.

Open a new graphic. Choose the ellipse tool and, while holding down the Ctrl key to constrain the ratio, draw a circle about 2.5 inches in diameter at the left of the page.

Select the pick tool and, with the circle selected, hit Ctrl-c and Ctrl-v to copy and paste the circle. Use the right cursor key to move the copy to the right of the page. (see figure 2.1).

figure 2.1
figure 2.1



Select the rectangle tool and draw a rectangle between the two circles. Make sure that the corners of the rectangle meet with the circles (see figure 2.2)

figure 2.2
figure 2.2



Use the pick tool to draw a marquee around both circles and the rectangle. Click the intersection Intersection icon. This will only create the intersection of the left-most circle and the rectangle (see figure 2.3).

figure 2.3
figure 2.3



Use the pick tool to draw another marquee around the right-most circle and the rectangle. Click the intersect icon again. You should now have two intersections with the rectangle. Choose the circles, one at a time, and delete them. This should leave you with something like figure 2.4.

figure 2.4
figure 2.4



Use the pick tool to select the left-most curve and fill this object with a light gray. Select the right-most curve and fill this object with a dark gray (see figure 2.5).

figure 2.5
figure 2.5



Select the fill tool and choose the gradient tool from the flyout menu. This will bring up the Fountain Fill dialog box. Under Color blend, select Custom. This will change the Fountain Fill dialog box so that it resembles figure 2.6.

figure 2.6
figure 2.6



Add another point to the blend by double-clicking above the rectangular blend window. Change the middle point (the one you just added) to a light gray by clicking on the Current pulldown menu (it's just above the custom blend window). Change the color at both of the outside points to dark gray. Set the Angle to 90 and adjust the middle point so that your blend resembles the one in figure 2.6. Click OK.

NOTE: The custom blend starts out with only a beginning and an ending point. You can add more points to create your custom blend by double-clicking above the blend window. These points can also be moved by clicking and dragging.


Select the button with the pick tool and, using the outline tool flyout menu, set the outline to none.

Use Arrange, Transform, Scale and Mirror to resize the button.

At this point you might want to save the button (see figure 2.7).

figure 2.7
figure 2.7



I exported the button as a JPG with the following settings in the Bitmap Export dialog box. The really important settings to remember are the Maintain aspect ratio and Super-sampling.

figure 2.8
figure 2.8



Use the text tool to add some text to your button. I used the Bedrock font. You may choose to copy and paste the text with a different color to add a highlight (see figure 2.9).

figure 2.9
figure 2.9



Export the final button as a web-ready JPG and make sure you keep a copy of the vector drawing i.e. save the image as a CDR file so you can go back and make changes easily later on.


That's it.... Be sure to check out some of our other Corel DRAW! 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.
CorelDRAW Graphics Suite X3 Tutorials CorelDRAW Graphics Suite 11 Tutorials
CorelDRAW 10 Tutorials CorelDRAW 9 Tutorials


Previous Corel DRAW! Tutorial Corel DRAW! Tutorials Next Corel DRAW! Tutorial
[Previous Tutorial]  [Corel DRAW! Tutorials]  [Next Tutorial]



We'd like to hear from you... If there are any Corel DRAW! 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.

AlienSkin


Photoshop Plugins
AlienSkin Software - They will never wear suits! We've been using AlienSkin's Photoshop Plug-ins for over a decade and they are still our favorites.

AutoFX


Photoshop Plugins

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.


GrafX-Design.com



Comments/Questions   ||   Copyright © 1996-2009 GrafX-Design.com -- All rights reserved   ||   Privacy