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.
Reply