Button design trend: Light grey simple (Tutorial)

A couple of years back everybody had these ugly shiny 2.0 style buttons, big and colorful. Like this one from this 2006 iris-design.com tutorial (first link on Google on 2.0 buttons).

Then there were and still are the soft gradient buttons, not to much color, no (or just a little) shiny stuff, and mostly rounded corners. Like this one form this sixrevisions.com tutorial.

But now, with the growing number of web applications and application like functions, there is a need for normal buttons. And so more and more websites use nice super clean lite grey buttons, with dark grey text, and most of the time square or with slightly rounded corners. The button our operating systems use since the beginning of time. There are a lot of examples of site and I will name a few.

Google: Since the  new design there not using the default operating system or browser buttons but their own.

Facebook, also uses this style, in grey and in the facebook blue.

With the new design of Youtube the also started using this style in for all the buttons.

Tutorial

I’ve made a short and easy Photoshop tutorial, on how to make a button in this style. This is a total beginners tutorial, if you have some experience you will be bored. 

First create a new document File > New, give it a width of 400 pixels and a height of 55 pixels. Set the background to transparent or white, just what you prefer. Create guides so there are three rectangles with a height of 45 pixels and a width of 120 pixels with margins of 10 pixels.

Use the Rectangle Tool (U) to create a rectangle in one of the areas. And give it a light grey color #f4f4f4 (Double click on color square in layer panel).

Give it a Gradient Overlay, select the shape layer, then press the Fx icon at the bottom of the layer panel, then select Gradient Overlay. Use the following settings:

Then add a stroke, check the check box next to Stroke, and use the following settings:

And finally add a drop shadow, with again the settings as below:

Drag a guide (click in ruler and drag to image) to the horizontal center of the button. Then use the Text tool (T) to add the text. I’ve used Arial, Bold, 12pt, sharp, color: #3c3c3c and centered.

Now we’re gonna make the other states of the button, hover and active (when pressed). Select the shape and text layer Ctrl + click on layers, the group them (Ctrl + G). And finally copy the group two times, by dragging it in the new layer icon.

Use the move tool (V) (while holding shift to don’t move them vertical) to drag the buttons to the other two areas.

From the hover group change the color of the shape layer to #DDDDDD.

Then from the active group open the Gradient Overlay by double clicking on it. Then select Reverse, and change the opacity to 10%.

Done.

Download file here.

Hope you liked it, let me know what you think of it true twitter (@FryingTech) or as a answer since I’m gonna end this post with a question mark..

Keep Frying!?

1 year ago  /  1 note