Photoshop For Beginners: Creating buttons for web part 2

Photoshop For Beginners: Creating buttons for web part 2

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.
preview of the final result

DOWNLOAD SOURCE FILE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.
Are you already a member? Login to download the PSD file.
Button 3

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

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.
create the main shape

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).
add a gradient overlay

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.
add a color overlay

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

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).
white border

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.

Why do I have to select the Elliptical Marquee tool before moving the selection? To move the selection over the canvas, without modify any layer, you need to select one of the selection tool, or you will cut something.

move the selection

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:

white border complete

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.
fill the selection with black

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

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

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%.
light on top

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 3 preview

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.
draw the main shape

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.
gradient overlay

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

Finally add a white inner glow to give depth:
inner glow

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…).

How can I resize the texture? Press ctrl+T to activate the transform tool, then resize the texture using the anchor points. Don’t forget to hold down shift while resizing to maintain constant proportions.

texture in

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%.

texture ok

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:
badge shape

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.
add a layer mask

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):

drop shadow

Finished

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

preview of the final result

DOWNLOAD SOURCE FILE

Become a Premium Member and get unlimited access to source files and premium resources for only 7$/month. Click here to learn more.
Are you already a member? Login to download the PSD file.

Related Posts

feat month

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

Sebastiano

Howdy! I'm a self taught graphic designer who loves to create amazing stuff using every kind of media. I'm currently living and working in Italy.

31 Comments

(+add yours)
  1. Great tut.. Thanks..

  2. mr toufik

    ah,, i see…
    thanks guys!

  3. great tutorial guys!
    I love also the tip and tricks image, soo nice! :)

  4. Great tutorial!!!
    This is just what I need right now!
    BIG THANKS! :D :D

  5. Thanks, this was really helpful

  6. Nashone

    Thanks, ! nice tutorial !

  7. Very good tutorial, thank you.

  8. ulises

    MUY BUENO

  9. Varun

    Hey cool.. Nice and useful one… hands off dude

  10. eMazing

    Thank u Sebastiano! Thank u for all your great tutorials. Today I did all 4 button tutorials and I was just impressed!!! It wasn’t “just” the buttons, which are so great, but all these little tricks and helpful actions I learnd along the way. And in a few days I finally will be a member ;D

  11. love your site!
    you have great quality tuts, thanks for sharing with us!

  12. These are great tutorials! Not just for buttons, but for the Photoshop techniques you taught. I feel like I gained a level in Photoshop today. I *finally* understand layer masks. Thank you!

  13. Hassan

    You might wanna make the same tut but with GIMP instead cuz most users dont own photoshop, and these are EPIC BUTTONS, so more ppl should see these

  14. Here is a great tutorial about creating web buttons. The tutorial is with voice, hope it’s useful: http://www.youtube.com/watch?v=cz22W7BL81I&hd=1

  15. just simple and useful tips to create web buttons, the way you have explained how to tutorial about creating web buttons is very easy and a novice web designer can understand your explanation.
    GOOD JOB ++++++++++++++++

  16. Alexandra

    Thank you so much for your tutorial!

  17. Do you have any tutorial for creating animated web buttons?

  18. Great Tutorial. Indepth instructions are really helpful.

    This will help in learning photoshop to me.

  19. Junior

    I have a problem When I add the layer mask the unwanted portions of the image is not being masked

  20. Excellent site, keep up the good work. I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say I’m glad I found your blog.

  21. Such a very nice issue i read this article and get more tips. Thanks to share with us.

  22. This tutorial is very useful thanks a lot for information I will do this.

  23. great tips… thanks for share

  24. tips and tricks photoshop…. yummy

  25. Thank u for all your great tutorials.

  26. This tutorial must try by newbie photoshop user like me

  27. Thank you for some other informative site. The place else may
    I am getting thaat type of info writtn in such a perfect method?
    I have a project that I’m just now working on, and I have been on the glance out for such information.

  28. ??????? ?? ?????????? ????? ??? ?????????? ? ??????????? ?????????????!

    • Thank you for the wonderful lessons for beginners and advanced users!

  29. The location has to have plenty of deer tracks and an essential population of whitetail deer.

Leave your comment

© Copyright 2010 WeGraphics.net - All rights reserved. Design and code by WeGraphics Team