Round Neon Gel Buttons Photoshop

1. Open a new canvas that is 80 pixels wide by 80 pixels high, white, RGB, 72 PPI.
2. Insert a new layer by clicking layer=>new=> layer and call it button. Set your elliptical marquee to a fixed size 60 pixels by 60 pixels. Create a selection and center it on your canvas.


3. Set the background color to a bright neon conlot (Hex #FF00CC for this tutorial) and the foreground to a slightly lighter color (hex #FF66FF for this tutorial). Select the gradient tool set to the option of style=radial. Draw the gradient on the new layer from the center of the selection to the outside edge of the selection.
4. Set your foreground color to a color darker then the bright neon (hex #990066 for this tutorial). Click edit=> Stroke. Set the stroke to 2 pixel center, 100% normal. Click filter=> blur=> Guassian Blur. Set blur to 1.0.
5. Add a New Layer called gleam. Select the elliptical marquee and set to a fixed size of 40 pixels wide by 20 pixels high. Select the upper part of the button and fill with white.  Deselect and click Filter=> blur=> Guassian blur, set to 4.0.
6. Add a New Layer called reflection. Select the elliptical marquee set to a fixed size of 40 pixels wide by 20 pixels high. Select the bottom part of the button and fill with white.  Deselect and click Filter=> blur=> Guassian blur, set to 8.5.
7. Click back on the button layer. add a drop shadow and bevel and emboss from layer styles.
8. Switch to image ready if you want a rollover.

9. Open the rollover palette. Click the button on the bottom to add a rollover. When your rollover is highlighted on the rollover palette, turn the drop shadow eye off.

10. Open the optimize palette and set optimize to JPG medium.
11. Click Save optimized as. Set to html and images and image and save. The resulting html doc will have the html for your button including the preload script and mouse over. The resulting image folder will have the images.

Posted in Photoshop