This article is part of a series of tutorials thought for Photoshop beginners. I’ll explain in depth those features that can result difficult to understand for a newbie. In the first part of this tutorial I’ve explained how to create 2 elegant buttons destined to web.

Today we will continue creating other 2 buttons. In particular we will deal with filters, textures and masks. If you are not familiar with layer masks, I suggest you to check out our tutorial for beginners on this matter before continuing.

Preview:

Since the tutorial was very detailed, I decided to divide it in 2 parts. In the first part you’ve learned how to create buttons #1 and #2. Today you will see how to create buttons #3 and #4.

Button 3

Like in the first tutorial, let’s start from a 640×480 pixels new document at 72pixels/inch:

Just to modify a little bit this flat white background, 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).

Step 2

The button we want to create is a compact elegant button that gives the 3d illusion. Let’s start creating the main shape using the Rounded Rectangle Tool (U) with a radius of 10px.

Step 3

Right-click on the shape layer thumbnail and select “Blending Options” to add a a gradient overlay going from a light green (#49e45c) to a darker one (#0fb122).

Step 4

Adding the 3d effect is very easy. Simply duplicate the main shape by going to Layer>Duplicate Layer (or press Ctrl+J) and move the duplicated layer below the original one. Right-click and select blending options. Here add a dark green Color Overlay (#055d03). Don’t worry if nothing has changed, consider that our shape is below the original one.

Click on the down arrow on your keyboard 4-5 times to move lower down the shape. Now the 3d effect is evident:

Step 5

Always through the blending options, add a soft Drop Shadow to the shape below:

Step 6

To add even more depth to the button, create a new layer above the main shape and title it “white border”. Ctrl+click on the vector mask of the main shape to select its pixels, then grab the Paint Bucket Tool (G) and fill the selection with white (#FFFFFF).

Step 7

With the selection still active, grab the Elliptical Marquee Tool and click once the up key on your keyboard. The selection will move 1px up.

Finally press delete to remove the selected area from the white shape. Then press ctrl+D to deselect and reduce the opacity to around 50%. Here is our white border:

Step 8

We can now add a noise effect to the button. As we made in step 6, create a new layer, select the area of the main shape (ctrl+click on its vector mask) but this time fill the selection with black (#000000). Press ctrl+D to deselect.

Go to Filter>Noise>Add Noise and enter the following values:

Set the layer blending mode to “screen” with opacity 50%. In this way black areas will disappear.

Step 9

The last touch before adding the text: create another layer and title it “top light”. Again ctrl+click on the vector mask of the main shape, set white as foreground color, grab a soft brush with hardness 0% and click once on the top area of the button to create a light effect. Finally reduce opacity to around 50%.

Step 10

We can now add the text. The font used is Arial, set on bold italic because it gives me the sensation of perspective. The only style to add to the text is a sharp drop shadow (#0c3801):

The button#3 is finished and here is the result:

Button 4

As always, let’s start from the main shape. Grab the Rounded Rectangle Tool and draw a shape with a corner radius of 5px.

Step 2

Let’s add style to the button. From the blending options, select the gradient overlay. The 2 brown used are #744a08 and #bf9149.

Add a 2px stroke (#6a3d07) to enhance the button:

Finally add a white inner glow to give depth:

Step 3

Now it’s time to use a texture. In my case I’ve chosen a wooden texture. You are free to use any kind of texture, if you are searching for a free wooden texture you can surf through stock.xchng. Once you’ve found a nice looking one, download and place it into the Photoshop document, above the button. (File>Place…).

Step 4

Set the layer blending mode to overlay. In this way you can see how the texture will affect the button:

To eliminate the exuberant area we can use masks again. So ctrl+click on the main shape vector mask to select its pixels and press the “add layer mask” button at the bottom of the layers window. Finally reduce opacity to around 90%.

Step 5

I have in mind to create a “download now” button. So a ribbon displaying the price can be very useful. Create a new group and title it “ribbon”. Grab the Rectangle Tool (U) and draw a shape as showed in the screenshot below:

The shape needs some styles, so open the Blending options window and add a gradient overlay going from #d11616 to #f24141, a 1px stroke (#930606), a 1px white inner glow and a soft shadow effect.

And here is the result after applied the styles:

Step 6

Zoom in, grab the Polygonal lasso tool and make a selection as shown in the screenshot below:

Then hold down alt and press the “add layer mask” button to remove the selected area.

Step 7

With the pen tool, create a shape as shown in the screenshot. Use blending options to add a dark red color overlay (#5d0202) and move this triangle shape below the main shape of the ribbon.

With the Rectangular Marquee tool make a selection of the left side of the triangle shape (covering the main shape stroke too).

Hold down Alt and press the layer mask button (as we made in step 6) to remove the selection.

Step 8

To complete the ribbon, we can add the price. The font used is always Arial (regular, 13pt).

Step 9

The last touch is the text “download”. We can try using a serif font this time, Georgie (Bold italic, 18pt). The only style that I’ve added to the text is a sharp drop shadow (#3f2a02):

Finished

We’ve finished! I’m sure you use these techniques to create your own cool web buttons ;-)

Related Posts

1. 

   Photoshop For Beginners: Creating buttons for web part 1

2. 

   Create a Funny Wooden Type Treatment in Photoshop

3. 

   Jungle 3D text in Photoshop

2500+ premium design resources for only $7!

We do the best to provide high-quality products that you can use in your commercial projects.
You bet!

take a tour sign-up