Refreshing web2.0 buttons with photoshop

If you think about web design and the navigation, you think about buttons.
There are a huge amount of possibilities, but some styles are just too old.

The previous years web 2.0 was the big deal, everything was glossy and vibrant/colorful and this style is really overused and on the end of it’s life.

In 2009 and ahead a new style comes up. Everything is more subtle and text is getting out of proportion. In short you could say it has to be big in shapes and subtle in colors.

Result Preview:

We’re going to make the web 2.0 button that’s still trending right now and the new style button.

Step 1

Open a new document of 195px height and 50px width.

Step 2

Pick the rounded rectangle tool and set the radius to 5 px.
Draw a rectangle to all 4 edges like so:

Step 3

Now while holding Alt, drag one of the corners inwards to make it just a little smaller.

Step 4

Add gradient overlay (with the layer styles menu)
From #abdb30 on location 0%
To #7aa22a on location 40%
To #8eb92a on location 41%
To #cee771 on location 92%
To #b9ce44 on location 100%

Also add an inner glow with 50% opacity and a white color.

Step 5

Create a new layer.
Pick the brush tool and draw 2 dots at each side with 110px diameter and 0% hardness.

Step 6

Add a Gaussian Blur (Filters>Blur) with 8 px radius.

Set the layer’s blending mode to Hard Light and it’s opacity to 20%.

Step 7

Ctrl click the thumbnail of the first layer, press ctrl+shift+i and press delete or backspace.
Press Ctrl+d to deselect

Step 8

Create a new layer on top.
Pick the text tool and set the font to Century Gothic or something else modern and round, set it to bold if it’s a skinny font and use something about 18pt of size.

Step 9

Add a drop shadow to this text layer with 29% opacity, 2px distance and 1px size.

The result:

In 2010 graphics are softer, so you might want to add a layer on top, pick white color and ctrl+backspace to fill the layer. Ctrl click the thumbnail of the first layer again and ctrl+shift+i and press delete or backspace. Reduce the opacity to 20%
You shouldn’t do this on too bright websites, that’s why the first result looks better on this page.

Now to create the typical non-glossy buttons that are currently trending, we will use the psd of the previous button.
You can remove everything except the first layer with the button shape and the text layer.

Step 1

The text should be something bold like Gill Sans Ultra Bold

Step 2

Change the drop shadow to 60% opacity, 1 px distance and size 0 px.

And add a gradient overlay of #d6d6e7 to white on it.

Depending on what color the button is, you need to change the first color, because it is white with a hint of the color the actual button has.

Step 3

For the button shape layer add an inner shadow with 32% opacity, 1px distance and 1px size.
And also add a gradient overlay from #a7a6cb to #8989ba at 50% to #8989ba again at 100%.

Final Result:

534 Downloads