This site
DOES NOT
endorse
Corel products.

Step 1

We'll start by creating the main gradient bar.

Start by creating a new image 400 X 200 with a white background.

Layers > New Raster Layer... > Ok

On the Materials palette, click on the Foreground color and select the Gradient tab. Click on the image to open the available gradients. Select Gray and use the following settings:

On the Tools toolbar, select the Selection (S)

On the Tool Options palette, Selection type: Rectangle

Draw a horizontal rectangular selection in the center of your canvas:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

Adjust > Brightness and Contrast > Brightness/Contrast... > Brightness: -50 Contrast: 15 > Ok

Selections > Select None.

Step 2

Now we'll add the indentation.

Layers > New Raster Layer... > Ok

On the Tools toolbar, select the Selection (S)

On the Tool Options palette, Selection type: Ellipse

Draw a small elliptical selection on the new image like this:

Selections > Load/Save Selection > Save Selection To Alpha Channel... > Save

On the Materials palette, set your Foreground color to white ( #ffffff )

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

Selections > Select None

Adjust > Blur > Gaussian Blur > Radius: 4 > OK.

Layers > New Raster Layer... > Ok

Selections > Load/Save Selection > Load Selection From Alpha Channel... > Load.

On the Materials palette, click on the Foreground color and select the Gradient tab. Click on the image to open the available gradients. Select Gray and use the following settings:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

Selections > Select None

Adjust > Brightness and Contrast > Brightness/Contrast... > Brightness: - 50 Contrast: 15 > Ok

Your image should now look similar to this:

Layers > Merge > Merge Down

Now you can duplicate this layer for each indentation (or button) that you need to create. Example; I need three buttons.

Layers > Duplicate

On the Tools toolbar, select the Move Tool (M) and move the duplicate piece along side the other one:

Repeat this step for the third button.

Step 3

Now we'll add the button.

Layers > New Raster Layer... > Ok

On the Tools toolbar, select the Selection (S)

On the Tool Options palette, Selection type: Circle

Draw a circular selections just inside the elliptical piece we create above in step 2 like this:

On the Materials palette, click on the Foreground color the Gradient tab should still be selected. change the settings to use the following:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

Now we'll add some color to it.

Adjust > Hue and Saturation > Colorize... > and adjust to the color you would like to use. For this tutorial I'm using Hue: 126 Saturation: 255 > Ok

DON'T deselect just yet!

Step 4

Now we'll add a small white highlight along the top.

Selections > Modify > Contract... > Number of pixels: 3 > Ok.

Layers > New Raster Layer... > Ok

On the Tools toolbar, select the Selection (S)

On the Tool Options palette, Selection type: Circle

Okay, what I do is start by holding down the Ctrl key on your keyboard, place your mouse cursor right at the bottom of the selection like this:

Pull your mouse downward until you have just a small sliver left along the top:

When you let go of your mouse you should end up with something similar to this:

Simple enough right?

On the Materials palette, click on the Foreground color and select the Gradient tab. Click on the image to open the available gradients. Select Fading white and use the following settings:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

Now for me, without fail, I always seem to need to move it.

Selections > Select None

On the Tools toolbar, select the Move Tool (M) and only if you feel it needs it, move the fading white piece closer to the top edge like this:

It seems to look much nicer if I keep it within a couple of pixels down from the top edge of the button.

Once you've decided that it's where it looks the best for you, Layers > Merge > Merge Down

Step 5

Now, I sort of cheated and borrowed an idea from our Clear Liquid Filled Orbs. You can use web dings etc, to add an image to represent what the button is suppose to be like a house for the home button, envelope for email.. and so on. I'll do that for the sample at the end of the tutorial, but to finish this tutorial up lets add my "cheat" piece.

Layers > New Raster Layer... > Ok

On the Tools toolbar, select the Selection (S)

On the Tool Options palette, Selection type: Ellipse

Draw a small elliptical selection towards the bottom of our button like this:

Now here's an easy trick you'll want to remember! Trust me it works on lots of things.

On the Materials palette, click on the Foreground color and select the Color tab.

Move your mouse towards the very center of the button and click on it, like this:

When you click on it, you'll notice that the color is now auto magically displayed in our color box:

My image will look a bit rough as I'm using an image compressor to help keep Images sizes down, so just ignore it's ugliness.

Now what you want to do is pick a color that's just a bit lighter then what your using now. I ended up using #9ffdf9.

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection:

Selections > Select None

Again, use the Move Tool (M) if you need to adjust it:

Layers > Merge > Merge Down

Now we'll add a slight drop drop shadow to it but with a slight twist!

Effects > 3D Effects > Drop Shadow... I'm using the following settings:

Now we're going to do almost the same thing, only this time we're going to change the color of the shadow to the same color we used to fill the ellipse.

Effects > 3D Effects > Drop Shadow... I'm using the following settings:

Layers > Merge > Merge Down

On the Tools toolbar, select the Move Tool (M) and button the button upwards just a bit:

Earlier I decided I needed three buttons, and I want each one to be a different color, so...

Layers > Duplicate

Using the Move Tool (M) I move my duplicate image over to the next indentation:

Adjust > Hue and Saturation > Colorize... > I'm using Hue: 23 Saturation: 255 > Ok

Repeat the same steps for the third button ( I'm using Hue: 139 Saturation: 255 )

My final piece now looks like this:

Congratulations!