Photoshop For Beginners: Creating buttons for web part 1

Button 1

Create a new Photoshop document at 72pixels/inch. Size is not important. Take in mind that our buttons are not longer than 100px width, so a 640×480 pixels canvas will work fine. Also consider that our buttons are destined to webdesign, so once completed they will be extracted. The best would be to directly create buttons on the .psd file of your layout.

To make the background nicer to see (this white background is so tedious!), add a gradient overlay. Right-click on the background layer and select “Blending Options”. Here select gradient overlay (radial) and add a gradient going from a light grey (#f3f3f3) to a darker one (#c6c6c6).

Why can’t I add blending options to the background layer? Before adding layer styles to the background layer you have to unlock it. Double click on the layer thumbnail in the layers window and hit OK to unlock.

Grab the Rounded Rectangle Tool and create the main shape of the button (with a radius of 5px).

Right-click on the rectangle layer thumbnail and select blending options. It’s time now to play with layer styles to add character to the button. Let’s start with a gradient overlay going from a dark blue (#0d3079) to a lighter one (#557bc9).

Now to stand out the button from the background, add a 1px dark blue (#0b2258) stroke.

To give depth to the button, add a 1px inner glow. Set white (#FFFFFF) as color and reduce opacity to 30%.

We’ve finished with layer styles. It’s time to add a soft noise effect. Create a new layer, then ctrl+click on the vector mask thumbnail of the main shape to select its pixels, grab the Paint bucket tool and fill the selection with black (#000000). Finally press ctrl+D to deselect. The screenshot below will explain better the whole process:

Go to Filter>Noise>Add noise and enter a value around 33% (make sure to check monochromatic)

Set the layer blending mode to screen and reduce opacity to around 15%. The noise effect is complete!

Why do I have to set the blending mode to screen? By setting the blending mode to screen all white areas will be retained, while black ones will disappear.

As we’ve made before, create a new layer, ctrl+click on the main shape vector mask, but this time fill the selection with white.

Then grab the Rectangular Marquee Tool and select the bottom half of the new shape. We’re going to create a nice light effect:

Hit delete to eliminate the selected area, then reduce the opacity of the layer to around 10%. Here is my result:

It’s time to add some text. The font used is Arial (Bold, 14pt).

The easiest way to create a kind of engraved effect is to duplicate the text layer (ctrl+J) and move the duplicated below the original one. Add a dark color overlay (Right-click>Blending options>Color overlay>#124d89) to the duplicated text and move it 1px on the left and 1px up (use the arrows on your keyboard).

With the Custom shape tool, draw a lens (from the library). Then use the same technique applied before to create the engraved effect to the lens too.

The last touch to complete the first button. Create a group and title it “light effect”. Switch the blending mode of the group to “color dodge”. Then ctrl+click on the main shape layer to make a selection of its pixels and add a layer mask by pressing the apposite button at the bottom of the layers window. In this way all what we will put inside the group will affect only the area delimited by the main shape.

Create a layer inside the group, set white as foreground color and grab a soft (hardness 0%) brush.

Click on some points of the button to create light effects, then reduce the opacity to make the effect more subtle. This is a useful trick to make more vivid our buttons.

Here is the final result:

Button 2

As with the first button, let’s start creating the main shape. This time use the Rectangle tool.

Select blending options and add a gradient overlay (from #d2d2d2 to #f7f7f7), a 1px stroke (#acacac) and a 1px white inner glow:

Create a new layer, zoom in, grab the Rectangular Marquee tool and make a 1px width selection as shown in the screenshot below:

Fill the selection with the same grey of the stroke effect of the main shape (#acacac). Then press ctrl+D to deselect.

Using the same technique, create a second 1px line, this time white, and move it to the right of the first line.

Create a new layer, set black as foreground color, grab a soft (hardness 0%) brush and click once over the 2 lines:

With the Rectangular Marquee tool select the 2 lines and the area on their right and hit delete. Then reduce the opacity of the layer to 15%. In this way we’ve created a soft shadow effect on the left of the 2 lines.

Select the 2 lines’ layers and the shadow’s one (from the layers window) and group them by pressing ctrl+G. Then add a layer mask to the group by pressing the “add layer mask” button at the bottom of the layers window. Finally grab a black soft brush and paint over the 2 end points of the lines to gently eliminate them.

How can I select more than one layer? In the layers window, hold down ctrl (cmd for Mac) and click on the layers you want to select. In case you want to select many contiguous layers, hold down shift and click on the first and the last layer that you want to select.

Now you can add the text. The font is always Arial (Bold, 16pt). Write something, then open the blending options window. We will use styles to create an engraved text effect. To achieve the effect simply add an inner shadow (#000000) and a color overlay (#bdbdbd):

To complete the text effect, duplicate the text layer (ctrl+J) and move the duplicated below the original. Right-click on the duplicated layer and select blending options. Here uncheck inner shadow and switch color overlay to white (#FFFFFF). Finally move the duplicated text 1px on the right and 1px down. Here is what you should obtain:

The arrow that points to the bottom is the classic download symbol. So grab the Custom Shape tool and select the arrow from the library. Create the arrow (remember to hold down shift to maintain constant proportions while drawing the shape).

Press ctrl+T to activate the transform tool and rotate the arrow of 90°. Then apply to the arrow the same style of the text.  Also repeat the same method used with the text to add a 1px white shadow (bottom-right).

Ok, we’ve completed the first part of the tutorial. Next time I’ll explain in depth how to create the other 2 buttons. Don’t miss any updates, Follow us on Twitter or subscribe to our rss.

Here is what we’ve done today: