Photoshop For Beginners: Creating buttons for web part 1

Photoshop For Beginners: Creating buttons for web part 1

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 previous article I’ve explained the flexibility of Layer masks and how they can be used to add and remove pixels from a layer at any time during the workflow.

Today we will learn how to use blending options and layer masks to create buttons destined to web.

Call to action

Web buttons have a fundamental role in site layouts. They are used to give instructions to the visitors and are always placed in strategic points of the site. Let’s consider WeGraphics as example: we have several buttons that link to the signup page. In our product page, we’ve placed the set preview, which is the first thing that attracts the visitors’ attention, on the left, and near, on the right, the action button, which is the way to obtain the resource. It’s like to say:” here is the resource. If you like it, here is how to get it”.

WebDesign lovers don’t want a button that is only visible, but also elegant, grunge or minimal, in according with the whole design. So today we will learn some useful techniques to create beautiful web buttons:

Preview:

Since the tutorial is very detailed, I’ve decided to divide it in 2 parts. Today you will see how to create the first 2 buttons. Next week I’ll publish the second part of the tutorial. So stay tuned! Follow us on Twitter or subscribe to our rss to don’t miss the second part ;-)

buttons preview

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 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.
create a new document

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.

add a gradient

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

create the main shape

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

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

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

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:

fill with black

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

Is it possible to copy and paste the style? Yes. Right-click on a layer thumbnail and select “Copy layer style”, then right-click on the other layer and select “Paste layer style”.

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:

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

high quality vectors

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.

23 Comments

(+add yours)
  1. Another great tutorial, guys.

    I have to say that this is fast becoming one of my favourite sites. Consistently high quality guides, regardless of the level. Keep up the good work!

  2. qitree

    Great tutorial, and very delicate. Also learn many good things. Thank????

  3. I’m agree with Ash. WG is one of my favourite site. I’ve learned many photoshop tricks with your tutorials. Sincerely thank you guys!

  4. Very nice. Its hard to find Ps tutorial for beginner. I always refer them to this site to learn the basic.

  5. Thanks guys! The beginners area of the site is growing up pretty fast and is giving us lots of satisfactions. In case you have suggestions on topics you’d like to go in depth, don’t hesitate to contact us (or use the comments)

  6. Cool tutorials guys! I’m already a webdesigner, but it’s good to know how other people do the same things, but with different tools.

    Pretty Cool! keep going!

  7. Sebastiano, it would be great if you group all beginners tuts into one section (tag, cat., etc.) and bring it to the visible area (i.e. menu) to let us have access to these tuts by one clicking ;)

    • Hi Nick,
      There is the apposite banner (Photoshop for beginners) in the sidebar of the blog

  8. Great tutorial.

    Loved the Tips and Tricks comments throughout.

    Too many tutorials on other sites assume that you have a high level of Photoshop skills.

  9. Matthew

    Great tutorial, especially button #1. I don’t have Photoshop, instead I’m still using a 7 year old version of Paint Shop Pro (v8). It has layers, masks, and blending modes though – and that’s really all you need. Here is my result:

    http://i17.photobucket.com/albums/b93/mattmc_3/misc/BlueButtonBar.png

  10. Great tutorial, thanks a lot!

  11. michael

    i lovent’t this~ very useful tutorail!
    thanks a lot~

  12. cool tutorial…this is what i looking for…thanks for sharing…..

  13. I like this!Perfect…

  14. Wow, the view Demo button is so beautifully crafted, well done!

  15. syu

    thank you~ nice tutorial

  16. Nice tutorial, but how do you define the colours of the gradient overlay?

    Can you do it from within the gradient editor or do you have to set the foreground and background colours first?

  17. Samantha

    Thanks a lot for all of your tutorials. I am coming from Paint Shop Pro and Photoshop makes me feel like a newbie all over again, but these are very helpful.

    • Sam, never stop learning… We’re all beginer when found something new… :)

  18. shamim al mamun

    I AM A STUDENT OF COMPUTER SCIENCE. I WANT TO BUILT MY CARRIER IN GRAPHICS. BUT I AM VERY POOR. SO GIVE ME ADVISE TO DO BEST.

  19. Hey! muchas gracias! thank you very mucho!! .. this will help me alot for a project

  20. congatreha

    it’s helpful.thanks

  21. louis vuitton ???

Leave your comment

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