A Simple Web Button

28 May 2007 ~ 246 Views

This is a nice and easy tutorial to create a stylish web button.

1: Open a new document and select the rounded rectangle tool have a look at the top tool bar and ensure that the radius is set to 10px. Choose your foreground colour mine was an off white and draw your box.
2: Control click the layer go to Select > Modify > Contract > 4px
3: Next, create a new layer and fill with a colour of your choice.
4: Right click this layer and go to your blending options. Tick the drop shadow box and add the following commands: Blend mode > Mutiply : Angle 90% : Distance 5px : Size 5px
5: Tick the Gradient Overlay box Blend mode > Normal : Opacity 50% : Angle 90%
6: Tick the Stroke box and add a size of 1px colour choose an off-white colour.
7: Next, select your font and type your wording.
8: Then select the custom shape tool and find the arrow graphic from your collection of shapes which can be found on the top tool bar drop down box. Again right click the layer and add the following blending options.
9: Inner shadow: Blend Mode – Multiply : Opacity 25% : Angle 90%
10: Add a 1px black stroke.
11: Duplicate this layer and move it over so that you have two arrows.
12: That’s it!

About Jo

I'm the owner of Jo's Web, a professionally qualified graphic designer who has been involved in the industry for over 20 years. I have worked as an art editor for London publishing houses, B.B.C , Haymarket and now run Spiral Pixel Design.

Posts Related to A Simple Web Button

How To Create A Glass Button
This tutorial will teach you how to create your own glass buttons, it's a style that seems to be in fashion at the moment so here goes... 1: Firstly you ...
Reflect Your Text
Here's an easy way to make it appear as if your text is reflected. I have seen many logos around at the moment which use this technique, including my own! ...
Create A Reflection
This tutorial explains how to add a simple reflection to your image. 1. Open your image and use the extract filter to cut out the image to your requirements. 2. ...
Retro Poster Print
This tutorial will teach you how to add a strong poster type effect to your images. We will then play with adding a dot pattern to create an interesting mosaic ...
Extract Your Image
There are several different ways of extracting your image from the background. The simplest is using the Extract Filter, the Polygonal Lasso Tool is a little more complex, and Quick ...