This site
DOES NOT
endorse
Corel products.

Step 1

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

On the Materials palette, set your Foreground color to #f5f5f7 and your Background color to #94909f:

Step 2

We're going to start out by making a pattern for our controller beginning with the handles first. Remember that we want to allow ourselves plenty of room here, so we don't want to make things to large!

Layers > New Raster Layer... > Ok

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, set Selection type: Ellipse

Create an elliptical selection towards either the left or right side of the canvas (I'll be working from left to right):

You'll notice on a typical gaming controller, it's shaped more like a boomerang for comfort, so we're going to first change the angle of our selection and then modify its shape using the Warp Brush. It's really super easy.

Selections > Edit Selection

Our elliptical selection has now changed to a salmon pink color indicating that the selection itself is now in edit mode:

On the Tools toolbar, select the Raster Deform Tool (D)

You will now see several small square points around the selection. These are called nodes. You can either grab it from the center node and rotate the selection slightly:

or rotate it by entering a value in the Angle: on the Tool Options palette:

Now lets modify it's shape.

On the Tools toolbar, select the Warp Brush

On the Tool Options palette, I'm using the following settings:

You could probably get away with using a smaller size, but for me personally I've found that I have much more smoother control over the tool if I leave it quite large. I'm starting towards the bottom half of the selection and bringing it upwards in an angle towards the opposite corner, like this:

Remember that if you make a mistake or you don't think that it looks quite right, just go to Edit > Undo Warp Brush [Keyboard shortcut: CTRL + Z] and try it again. Once your satisfied with the angle and the shape, take it out of edit mode,

Selections > Edit Selection

and save a copy of it to the alpha channel for later use.

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

Now fill the pattern.

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection by using your RIGHT mouse button

Selections > Select None

Your image should now look similar to this:

Duplicate it so we have a handle on the other side.

Layers > Duplicate

Image > Mirror

Your image should now look similar to this:

Step 3

We're ready to create the pattern for the center portion of the controller.

Layers > New Raster Layer... > Ok

On the Tools toolbar, select the Selection Tool (S)

On the Tool Options palette, set Selection type: Rounded Rectangle

Starting from the top and center of one the controller handles, create a rounded selection similar to this:

We'll modify the shape of this also, so let's put the selection into edit mode

Selections > Edit Selection

On the Tools toolbar, select the Warp Brush

First I'm going to bring the top of the selection down slightly:

then bring the bottom up slightly:

Take it out of edit mode,

Selections > Edit Selection

and save a copy of it to the alpha channel for later use.

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

Now fill the pattern.

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection by using your RIGHT mouse button

Selections > Select None

Your image should now look similar to this:

Now that we've create the pieces of our pattern, it's almost ready to put to use. But first let's put these all into their own group.

On the Layers palette, highlight the Raster 1 Layer and click on the New Layer Group Icon:

When the Layer Properties dialog box opens, type in "Pattern" and click OK:

Now go back to your Layers palette and drag the other two top layers into the group. Always remember to keep the layers in the same order when you move them into the group:

On the Layers palette, highlight the Pattern Layer:

Layers > Duplicate

Layers > Merge > Merge Group

On the Layers palette, turn off the visibility for the Pattern layer:

By getting in the habit of using groups, organizing the layer palette and modifying the image later becomes much easier!

Now let's grab a selection of our completed pattern and save it to the alpha channel.

Selections > Select All [Keyboard shortcut: CTRL + A]

Selections > Float [Keyboard shortcut: CTRL + F]

Selections > Defloat [Keyboard shortcut: CTRL + Shift + F]

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

Keep the selection!

Step 4

Now it starts getting fun. We'll start by building up the body of our controller.

Layers > New Raster Layer... > Ok

On the Materials palette,click on the Foreground color and select the Gradient tab. Select the Foreground-background gradient and use the following settings:

On the Tools toolbar, select the Flood Fill Tool (F) and fill the selection (left mouse button)

Selections > Select None

Okay, so far so good. At the moment it's flat looking so what we want to do now is "build it up". Just remember that anytime your dealing with shadows or shading, think of it as a mountain. The deeper the valleys, the darker it gets.

On the Tools toolbar, select the Raster Deform Tool (D)

Grab the top center node and bring it down slightly:

Now, bring the bottom up slightly:

This next step will help to form the rounded sides.

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

Adjust > Blur > Gaussian Blur > Radius: 3 > Okay

Selections > Select None

Your image should now look similar to this:

Step 5

In this step will add the final effects to the body of our controller.

Layers > New Raster Layer... > Ok

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

Selections > Modify > Contract > Number of pixels: 6 > Okay.

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:

On the Tools toolbar, select the Selection Tool (S)

Okay, hold down on your RIGHT mouse button and move the selection downwards just a bit:

Hit Delete on your keyboard.

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

Adjust > Blur > Gaussian Blur > Radius: 3 > Okay

Selections > Select None

Your image should now look similar to this:

It's finally starting to get some depth to it. On with the next phase.

Layers > New Raster Layer... > Ok

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

Selections > Modify > Contract > Number of pixels: 4 > Okay.

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

On the Tools toolbar, select the Selection Tool (S)

Okay, hold down on your RIGHT mouse button and this time move the selection upwards just a bit:

Hit Delete on your keyboard.

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

Adjust > Blur > Gaussian Blur > Radius: 7 > Okay

Selections > Select None

Your image should now look similar to this:

Now let's work on the sides of the handles.

Layers > New Raster Layer... > Ok

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

Selections > Modify > Contract > Number of pixels: 2 > Okay.

On the Materials palette, set your Foreground color to black (#000000)

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

On the Tools toolbar, select the Selection Tool (S)

Okay, hold down on your RIGHT mouse button and move the selection upwards in an angle just a bit:

Hit Delete on your keyboard.

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

Adjust > Blur > Gaussian Blur > Radius: 10 > Okay

Selections > Select None

Your image should now look similar to this:

You'll notice that it just doesn't quite look right. We have our shadow above the white highlight in the center of our controller. This is where we introduce the Eraser!

On the Tools toolbar, select the Eraser Tool (X)

On the Tool Options palette, use the following settings:

It's a little hard to explain here, but you want to erase almost all of it except the inner corner:

When you have it where you can barely see it, we'll duplicate the layer to bring the shadow back out more.

Layers > Duplicate

Layers > Merge > Merge Down

Your image should now look similar to this:

Now we just add it to the other side.

Layers > Duplicate

Image > Mirror

If for any reason the mirrored image doesn't line up correctly just select the Move Tool (M) from the Tools toolbar and move it. I usually use the arrow keys on the keyboard to move it so that I know that it stays perfectly in line with the original copy.

Your image should now look similar to this:

Just a couple of more tricks here and we'll be done with the body.

Layers > New Raster Layer... > Ok

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

Selections > Modify > Contract > Number of pixels: 15 > Okay.

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:

We're going to make two cuts here. The idea is to give the handle more contour, with the highest part having the most light. You'll see what I mean here in just a moment.

On the Tools toolbar, select the Selection Tool (S)

Okay, hold down on your RIGHT mouse button and move the selection sideways to remove a good chunk of it:

Hit Delete on your keyboard.

Now using your RIGHT mouse button, move the selection to remove the top portion:

Hit Delete on your keyboard.

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

Adjust > Blur > Gaussian Blur > Radius: 8 > Okay

Selections > Select None

Now we just add it to the other side.

Layers > Duplicate

Image > Mirror

Your image should now look similar to this:

Now we're going to add the final touch up to the body and place it in it's own group. Ready? Here we go.

On the Layers palette, highlight the Copy of Pattern Layer and turn the opacity down to around 60:

Now click on the New Layer Group Icon:

When the Layer Properties dialog box opens, type in "body" and click OK

Now go back to your Layers palette and drag all of the other layers into the group keeping them in the same order. When you've completed this step, highlight the body layer:

Now we've got something to work with!

Continue to Part 2 - The Buttons