Metal Interface With Orb

Step 1

Open a new image (350x350 Pixels and Transparent Background).

Step 2

Take the rectangular selection tool

Selection Type: Rectangle
Feather: 0
Antialias: unchecked

Then make a selection for the base of your interface body. To select another box hold Shift. Once you've selected your base shape fill it with black and deselect

Note: Make sure there is an average amount of empty space around your shape.

Step 3

Go to Effects--> Blur--> Gaussian Blur (Radius: 0). Then repeat the gaussian blur. Then make sure your layers are flattened (Layers--> Merge--> Merge All(Flatten).

Step 4

Now time to smooth this thing out. Go to Colors--> Adjust--> Levels

Channel: RGB
Input Levels: 138 | 1.00 | 155
Output Levels: 0 | 255

Step 5

Now to get the transparent background back. Go to Masks--> New--> From Image

Source Window: This Window
Create Mask From: Source Luminance
Invert Mask Data is checked

Now go to Masks--> Save to Alpha Channel and click OK--> OK. Now hold Ctrl + A then hit the Delete key on your keyboard.

Now to load the selection. Go to Selections--> Load from Alpha Channel and click OK. Now grab your fill tool and fill it with the color of your choice, in this example it will be #CCCCCC.

Step 6

After you've filled the main interface deselect it.

Select all then float the image (Hold Ctrl + F or Selections--> Float or Click on your interface body). Now your interface body should be selected.

Create a new raster layer (Layers--> New Raster Layer and click OK). Lets give your interface "body". Go to Effects--> 3D Effects--> Cutout

SVertical Offset: 0
Horizontal Offset: 0
Opacity: 30
Blur: 8
Shadow Color: Black(#000000)
Fill Interior with color is Unchecked

Deselect and merge your layers visibly.

Step 7

We are gonna add a shine to our interface now. Select all then float.

Go to Selections--> Modify--> Contract (Number of Pixels: 3). Then go to Selections--> Modify--> Feather (Number of Pixels: 4).

Now time for some more tricky stuff, it may take a few tries to get it right so don't be discouraged. Take the selection tool:

Selection Type: Ellipse
Feather: 20
Antialias: Checked

and while holding Ctrl make a selection on the bottom portion of the interface body(the part that you don't want the top shine to be). The top portion of the interface should be selected.

Take your flood fill tool and fill the selection.

Angle: 0
Repeats: 0
Invert Gradient Unchecked
Style: Linear

Have your gradient look something similar to this below:

Step 8

Select all again and float.

Now eseentially we are gonna do the same thing as in step 7 except the reverse. Go to Selections--> Modify--> Contract (Number of Pixels: 3). Then go to Selections--> Modify--> Feather (Number of Pixels: 4).

Now time for some more tricky stuff, it may take a few tries to get it right so don't be discouraged. Take the selection tool

Selection Type: Ellipse
Feather: 20
Antialias Checked

and while holding Ctrl make a selection on the top portion of the interface body(the part that you don't want the bottom shine to be). The bottom portion of the interface should be selected.

Take your flood fill tool

Angle: 0
Repeats: 0
Invert Gradient Checked
Style: Linear

Have your gradient look something similar to this below:

and make sure the opacity is lowered a little for the bottom highlight then fill the selection.

Step 9

Make a new Raster Layer (Layers--> New Raster Layer and click OK).

Then guess what? Select all again and float. Then go to Selections--> Modify--> Contract (Number of Pixels: 3) then hold Ctrl + Y to repeat it until you get a reasonable sized spot for the orb you want to put onto the interface body. Then go to Selections--> Modify--> Feather (Number of Pixels: 2).

Then grab the flood fill tool and fill the selection with a light-grey to white or very light-grey gradient.

Step 10

Your selection should still be active because I haven't told you to deselect it yet :p.

Go to Selections--> Modify--> Contarct (Number of Pixels: 4). Now make a new Raster Layer (Layers--> New Raster Layer and click OK). Then fill it with the color or gradient of your choice for the color of the orb.

Step 11

With your selection STIll active make a new Raster Layer. Then go to Effects--> 3D Effects--> Cutout.

Vertical Offset: 0
Horizontal Offset: 0
Opacity: 30
Blur: 8
Shadow Color: Black(#000000)
Fill Interior with color is unchecked

Step 12

Go to Selections--> Modify--> Contarct(Number of Pixels: 3). Then go to Selections--> Modify--> Feather (Number of Pixels: 4).

Now time for some more tricky stuff, it may take a few tries to get it right so don't be discouraged. Take the selection tool and while holding Ctrl make a selection on the bottom portion of the orb(the part that you don't want the top orb shine to be to be). The top portion of the orb should be selected.

Take your flood fill tool

Angle: 0
Repeats: 0
Invert Gradient Unchecked
Style: Linear

Have your gradient look something similar to this below:

and fill the selection.

Step 13

Now open the layers palette and go to the layer with the blue orb. Then once again...

Select all again and float.

Now eseentially we are gonna do the same thing as in step 12 except the reverse. Go to Selections--> Modify--> Contract (Number of Pixels: 3). Then go to Selections--> Modify--> Feather

Selection Type: Ellipse
Feather: 20
Antialias Checked

Now time for some more tricky stuff, it may take a few tries to get it right so don't be discouraged. Take the selction tool and while holding Ctrl make a selection on the TOP portion of the orb(the part that you don't want the bottom orb shine to be). The bottom portion of the interface should be selected.

Take your flood fill tool

Angle: 0
Repeats: 0
Invert Gradient Checked
Style: Linear

Have your gradient look something similar to this below:

and make sure the opacity is lowered a little for the bottom highlight then fill the selection.

Final Product

Congradulations! Wow, you finally finished! You have learned how to make a full interface with an orb. There are many techniques involved in this tutorial that can be used in many other graphic designs, so let your imagination run wild! Below is an example of our final product.