Scribd
Upload
47 views

Make Web Buttons in Adobe Photoshop

This document provides instructions for creating a web button in Adobe Photoshop in 10 steps: 1. Create the button shape by selecting a circular area and filling it. 2. Select a one-pixel column in the center to extend the shape. 3. Use the transform tool to extend the selection to create the button. 4. Add color and effects like drop shadow and bevel to style the button.

Uploaded by

vijayasma
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
47 views

Make Web Buttons in Adobe Photoshop

This document provides instructions for creating a web button in Adobe Photoshop in 10 steps: 1. Create the button shape by selecting a circular area and filling it. 2. Select a one-pixel column in the center to extend the shape. 3. Use the transform tool to extend the selection to create the button. 4. Add color and effects like drop shadow and bevel to style the button.

Uploaded by

vijayasma
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 4

Make Web Buttons in Adobe Photoshop

1 – Creating the button shape

In a new layer, select a circular area with the selection tool. (Holding down Shift will
make the selection stay circular, rather than being elliptical.)

Fill the area with the paint bucket. This is the curved end of your web button

2 – Selecting a column for extension

Zoom in (Ctrl +) and select a one-pixel wide area in the centre of the circle. You can
use the normal Selection Tool to do this, or you can hold down on the Selection Tool,
and choose the Single Column Marquee Tool
3 – Extending the button shape

With your one-pixel sliver of the web button selected, press Ctrl+T to "Free Transform"
the selection. Extend the selection to the left as far as possible

4 – Colouring Your web button

Press Ctrl+U to bring up the Hue/Saturation properties of the layer. Click "Colorize".
Drag the sliders around until your web button has a nice colour

5 – Giving the button some Effects

In the layers list, double-click this layer. Give your web button a Drop Shadow and a
Bevel
6 – Texturising the button

Click Filter, Texture, Texturizer. Choose Sandstone. I use this texture for most web
buttons I do these days

7 – Adding random colour variation

Create a new layer.

Click Filter > Render > Clouds (If your background isn't white, you'll first need to select
the area of the button, by holding Ctrl and clicking on the button's layer in the layers list.
This keeps the clouds inside that area.) Click Image > Adjustments >
Brightness/Contrast. Set the contrast to maximum. (This turns the random grey clouds
into equally random patches of black and white.)

Change the new layer from Normal to Overlay. (This changes the layer from solid colour
to a kind of illumination, as if it were cellophane over the web button layer, instead of
coloured paper.)

8 – Adding light to the button

Make another new layer.

Choose the Gradient tool. Click on the visual representation of the gradient.

On the visual representation of the gradient, put in several tabs. These tabs should be
in a black, white, black, white pattern.
Apply the gradient to your image, and change the layer's Mode from Normal to Overlay.
This should give the button some nice illumination

9 – Adding text to the button

Using the Text tool, add some text to your button. Some useful tips for button text
are:

• Make the button text all capitals.


• Increase the tracking (letter spacing). It makes the text more dramatic.
• Make the first letter of each word two points larger.
• Make the first letter of each word red (pale yellow for white text.)
• Use Palatino Linotype font in place of Times New Roman

10 – Embellishing the button text

Double-click the text layer. Give it a Bevel and a white Outer Glow. I've also put a black
outline on the button layer, to make it stand out more, but that's optional

You might also like