XBOX Button

Create a nice XBOX glowing circle symbol here using only layer styles. It's prety simple as long as you follow these directions exactly =). Perfect for buttons and interfaces.

1) Let's open up a new image, I'd say about 400x400. Make sure your backgroud is white just for visual purposes and then create a new layer. Select your elliptical marquee tool and make a fairly large circle in the center of your image. Hold down SHIFT to get a perfect circle. With the foreground color white, fill in your circle by pressing Alt+Backspace or using the Fill Bucket Tool. If you are having trouble with the size of the circular selection, use the image below as a reference.

2) Open up your Layers Palette (Windows>Layers) and click that litte "f" in the bottom of the palette. It should bring up a bunch of layer styles (i.e. drop shadow, stroke, etc.). For the first layer style, we are gonna select Outer Glow. The color of the Outer Glow should be #8CB206 (Click the square box with the color to change..not the long gradient box). Use these exact settings below:

3) You can click OK if you want but you're going to have to open up the layers style window again so there is really no point. Anyways, select Inner Glow and apply these settings. The color of the Inner Glow will be #678002.

4) Layer Styles again and this time select Bevel and Emboss...

5) Now, under Bevel and Emboss, you'll see something called Contour. Check it and employ these settings:

6) Go to Satin and click it to use the following settings Make sure the color of the Satin is #C5FD07.

7) This is where it might get tricky. Just pay attention and you won't screw up. Ok, in the Layer Styles, click on Gradient Overlay. Now, click that color bar where the arrow is pointing to in the picture below. You might as well apply the other settings you see in the picture before clicking the color bar.

8) With the color bar open, you should see a screen like the picture below. Now where you see the first arrow (first arrow on the left with the square around it), click that arrow and you should see a color square come up right below. Click the color bar to select a color and type in #C5FD02. Location, which is the bottom location beside the color box, should be 0%. For the middle arrow, do the same thing and enter the color number #ACDD02 with the location at 46%. The last arrow should be #668800 with location 100%. Make sure the Gradient Type is Solid and the Smoothness is set to 100%, but you be able to see that below.

9) Here is what you should come up with after finishing this tutorial:

With a little bit of touching-up, you can create a navigation button like the one below. It would be great for use in a profesional layout.