Creating web buttons in Photoshop is easy if you follow just a few simple steps. We show you how to do this in our Adobe Photoshop training courses.
First create a new file of dimensions 300 by 100 pixels, with a resolution of 72 pixels per inch, color mode of RGB and Background Contents: Transparent. Hit OK. Next select the Rounded Rectangle tool and click and drag inside the canvas. Note the transparent background behind the button shape. Also note button’s radius value at the top control panel. Here you may also change the Fill and Stroke colours. You could change the radius value to 20 pixels and click and drag again. If this produces a better result simply trash the first layer.
Next we add some layer effects via the FX button at the bottom of the layers panel; choose the Gradient Overlay option, whereupon the dialog box will open. Click on the gradient slider to open up the Gradient Editor. Click on the colour stops to create a light to dark blue gradient, and hit OK twice. Note the dark blue should be at the top of the button. It’s also best to keep the colours subtle when creating CMS buttons.
Now use the Rectangular Marquee tool to select the top half of the button. Create a new layer via the top right Layer options. And select the Brush tool – you may change the settings via the top left button – change the size to 80 pixels; make it a Soft brush and Colour: white. Then brush along the bottom edge of the selection with the edge of the brush, pressing the Shift key to keep it horizontal (see screen shot above).
Press Control and T to scale down the edges of this layer to fit the button. Then svae the file as a PSD (Photoshop Default). Next select the Type tool and change the settings to Arial Regular, size 35 points. Type the words “Contact us”. Then change the font to Webdings and type the number 4 – this will produce the forward arrow.
On the shape layer click on the Effects sublayer to open the dialog box; then click on the words Inner Glow to access the controls for this effect. Change the Blend to Normal and the Opacity to 100%, with a Color of dark blue and Size 3. On the shape layer click on the Effects sublayer to open the dialog box and click on the word Stroke to access the controls for this effect. Change to 2 pixels and Colour: Light blue. Hit OK. The Bevel & Emboss effect is also good for CMS buttons.
On the text layer add a Drop Shadow effect, with a blend of Normal and colour very dark blue. Change the Opacity to 100% with a Distance of 1, Size 1, and Angle of 90 degrees. This results in a subtle line around the text as if it’s embedded into the button.
Lastly, go to the Image menu (top) and select Trim, and Based on: Transparent pixels > OK. This is our template file which we can use to create more buttons with different text and colours in future. Then we Save As a PNG 24 Bit file. On older versions choose the None option and hit OK.
Many more tips and techniques can be found at the Adobe website. And see many examples of our clients’ work on our Facebook page.
Other related Photoshop Blog Posts:

• Photoshop interface
  
• Photoshop for fashion
• Photoshop deep etching
• Photoshop animated gif
• Photoshop actions