Loadboy's

Graphic Design Studio
The Right Choice in Web Design!
Get Your FREE Quote Today...
Search:  

Step 1

Start by creating a new image 400 X 400 with a black background.

For this tutorial we are going to be using Paint Shop Pro's Guides. I consider these a necessity when it comes to creating web interfaces. The guides are horizontal or vertical lines that we can drag onto our image to use for positioning or aligning the items we create. This is not the same as grids, which place a series of horizontal and vertical lines at pre-defined widths.

The guides allow us to place them at the locations we want. In order to use these guides, we must first display the rulers by choosing View > Rulers. Now, to display (or hide) the guides: choose View > Guides.

We're going to be using both a horizontal and a vertical guide. We'll start with the horizontal guide. To place a horizontal guide, click the top ruler and while holding down on your left mouse button drag the guide down to where you see 200 on the left ruler:

To place a vertical guide, it's just like the horizontal guide, click the left ruler and and while holding down on your left mouse button drag the guide to the right until you see you see 200 on the top ruler:

Now we're ready to begin!

Layers > New Raster Layer... > Ok

Use the Selection Tool (S) and Selection type: Circle.

Put your mouse cursor in the center of the "bulls-eye" (where both guides meet in the middle) and draw a large circle:

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

Set your Foreground color to #294E78 and using the Flood Fill Tool (F) and fill the circle:

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

Hit DELETE on your keyboard. You should now have something like this:

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

Selections > Select None

Just a foot note: As a general rule I always save each one of my selections in case I either mess up or need it later. Trust me on this one!

Step 2

Now were going to remove 3/4 of our "ring".

Use the Selection Tool (S) and Selection type: Rectangle. Draw a rectangle selection on half of the ring:

Hit DELETE on your keyboard.

Selections > Select None

Now remove the lower half of the ring. You should end up with something like this:

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

Step 3

Layers > New Raster Layer... > Ok

Selections > Load/Save Selection > Load Selection From Alpha Channel... In the drop-down list below the document name, choose Selection #3 > Load.

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

Set your Foreground color to #3775B6 and using the Flood Fill Tool (F) and fill the selection:

Selections > Select None

Step 4

Layers > New Raster Layer... > Ok

Use the Selection Tool (S) and Selection type: Circle.

Put your mouse cursor in the center of the "bulls-eye" and draw a slightly smaller circle:

Set your Foreground color to #59B1DD and using the Flood Fill Tool (F) and fill the selection:

Selections > Load/Save Selection > Load Selection From Alpha Channel... In the drop-down list below the document name, choose Selection #3 > Load.

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

Selections > Invert

Hit DELETE on your keyboard.

Selections > Select None

You should something similar to this:

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

Don't deselect yet!

Step 5

Layers > New Raster Layer... > Ok

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

Set your Foreground color to #2F6399 and using the Flood Fill Tool (F) and fill the selection:

Effects > Texture Effects > Blinds and use the following settings:

Selections > Select None

Step 6

Repeat the whole process for the other three pieces to our circle. JUST KIDDING!

On your Layers palette, turn off the visibility for your background layer (there should be a red "X" on the eyeball)

Layers > Merge > Merge Visible

Turn the Background visibility back on. (No red "X" on the eyeball)

Step 7

Use the Move Tool (M) and move the image to the lower right corner. The trick here is to center the ends with the guides:

Layers > Duplicate

Image > Flip

You may need to use the Move Tool (M) and move the image slightly upwards to line it up with the bottom image:

Layers > Duplicate

Image > Mirror

Again, line the Images up correctly.

Layers > Duplicate

Image > Flip

Now we have one piece we need to fix. Use the Move Tool (M) and click on the lower right piece. This will highlight the layer.

Use the Selection Tool (S) and Selection type: Circle.

Draw a small circle over the bottom of the image like this:

Edit > Copy

Selections > Select None

Edit > Paste > Paste As New Layer

Layers > Arrange > Bring To Top

Use the Move Tool (M) and align the piece with the original:

Step 8

On your Layers palette, turn off the visibility for your background layer (there should be a red "X" on the eyeball)

Layers > Merge > Merge Visible

Turn the Background visibility back on. (No red "X" on the eyeball)

Use the Magic Wand Tool and click in the very center of the image:

Layers > New Raster Layer... > Ok

Now, at first the piece is going to look a bit rough around the edges, but we'll hide that in a moment.

Selections > Modify > Expand> Number of pixels: 5 > Okay.

On the Materials palette, set the Foreground color to #2E8DDB and the Background color to #15456D.

Click on the Foreground color and select the Gradient tab. Click on the image to open the available gradients. Select Foreground-background then OK. Use the following settings:

using the Flood Fill Tool (F) and fill the selection:

Selections > Select None

Layers > Arrange > Move Down

Congratulations! Now you can add various elements to really make it stand out.