Breadcrumbs

Photoshop: Web Button

Here we'll be learning the basics of making a nice web button. Buttons can be used all over your web site, making them very useful. So let's get started!

1. Start of by creating a new file with the dimensions 60×20 pixels.

2. Create a new layer (CTRL+SHIFT+N). Fill the background with black (#000000).

3. Now go to "Blending Options" (right click on the layer).

4. Select "Inner Glow" and change the settings as follows:

5. Now go to "Gradient Overlay". Have the settings as follows (click the black/white bar to get this menu to appear):

6. Go to "Stroke" and change the settings to:

7. We're almost done with our button! Now create a new layer (CTRL+SHIFT+N) and create a circle, like below:

Note: This picture is zoomed in for visibility.

8. Fill it with white (#FFFFFF) and change its opacity to twenty percent.

9. We are almost done. Add some text to the button (small pixel type fonts work the best). Here is a finished example: