How to Create Mini Web UI Buttons in Photoshop

On 16 Nov, 2011 By With 6 Comments

Web UI has been the buzz for the past several months, as I tried to learn about this new trend I noticed that there are only a couple of them posting a tutorial about this. So today we will create a Mini Web UI Button in Photoshop, if there are demands about the rest of the UI maybe I’ll do a second part tutorial about it.

As web technologies progress, websites and web applications are becoming more responsive, providing us with more ways and techniques to interact with the users.

I decided to focused on buttons because that is the hardest part of the UI Design (really, I find it hard), anyway here is the end result of our Mini Web UI Design.

You can download the PSD at the bottom of this tutorial!

web GUI How to Create Mini Web UI Buttons in Photoshop

Let’s Begin

1 canvas1 How to Create Mini Web UI Buttons in Photoshop

Open your Canvas and set to 450px width and 255px height.

2 add noise How to Create Mini Web UI Buttons in Photoshop

Select your Foreground to #d8dde3 and fill the canvas, now go to Filter > Noise > Add Noise and set it to 2% hit OK.

Normal State

3 shape tool for normal button How to Create Mini Web UI Buttons in Photoshop

Grab your Rounded Rectangle Tool (M) and set the radius to 2px, draw the shape same as above. Name this layer as Normal Button (better if you’ll put this on group folder).

4 gradient for normal button How to Create Mini Web UI Buttons in Photoshop

In Normal Button layer, right click > Blending Options and set the Gradient Foreground Color to #009CFF and background color to 1D87CA.

5 drop shadow for normal button1 How to Create Mini Web UI Buttons in Photoshop

Set your drop shadow settings as the one above. Foreground color is #979B9C, Distance is 1 and Size is 3.

6 inner shadow for normal button How to Create Mini Web UI Buttons in Photoshop

Now moving on Inner Shadow, set your Foreground Color to #8DDOFB and Distance is 1.

7 stroke gradient for normal button How to Create Mini Web UI Buttons in Photoshop

On Stroke > Fill Type > Select Gradient, now select this color for your stroke gradient. Foreground is #O44F7F and Background is #45E98.

8 normal button finished without text How to Create Mini Web UI Buttons in Photoshop

You should have something like the one above. Notice the light line above? That’s from Inner Shadow πŸ™‚ moving on to text.

9 text color for normal button1 How to Create Mini Web UI Buttons in Photoshop

Type in the word Normal, and use the color #O65O7F on the text.

10 drop shadow for text normal How to Create Mini Web UI Buttons in Photoshop

Still on the Normal text layer, select Blending Options > Drop Shadow and set your Foreground color to #2BAAFA, Opacity to 100% and Distance to 1.

11 normal text final How to Create Mini Web UI Buttons in Photoshop

This is our end result for normal button.

Focused State

We are now designing for focused state, it will be easier than the normal button though.

12 focused state shape How to Create Mini Web UI Buttons in Photoshop

Grab your Rounded Rectangle Tool, and set your radius to 2px. Create a new shape beside normal button and name the layer as focused button.

13 gradient for focused button How to Create Mini Web UI Buttons in Photoshop

Right click > Blending Options > Gradient and follow the settings above.

14 drop shadow for focused button How to Create Mini Web UI Buttons in Photoshop

Now on Drop Shadow, set your Foreground color to #989D9D and Distance to 1 Size to 3.

15 innershadow for focused button How to Create Mini Web UI Buttons in Photoshop

For Inner Shadow, set your Foreground colo to #8DD1FC and Distance to 1.

16 outer glow for focused button How to Create Mini Web UI Buttons in Photoshop

In Outer Glow, Foreground is #000000 and Opacity is 100%. Elements > Spread 100% and Size is 3px. Quality > Range is 50%

18 stroke for focused button How to Create Mini Web UI Buttons in Photoshop

Stroke > Fill Type select Gradient and set your angle to 90 and the following colors are listed below.

17 stroke gradient for focused button How to Create Mini Web UI Buttons in Photoshop

Set your Foreground to #OO9CFF and Background to #45E98.

19 focused button without text How to Create Mini Web UI Buttons in Photoshop

This is the result for the Focused State Button. Now to add some text!

20 focused button with text How to Create Mini Web UI Buttons in Photoshop

I typed in Focused, now we can add some details.

21 focused button final How to Create Mini Web UI Buttons in Photoshop

In Focused text layer, right click > Blending Options and select Drop Shadow and set your foreground to #2BAAFA and Distance to 1.

21 focused button and normal button How to Create Mini Web UI Buttons in Photoshop

Here is the result of Focused button state, looking neat eh?

Now for the third one which is the Pressed State or Clicked State I challenge you to create it, you won’t learn from me if I do all the work right? It is really simple actually, I’ll even give you a hint πŸ™‚

Just copy the normal button and in blending options you’ll have to remove one, Change and exchange the properties for the two; gradient remains the same though.

22 gui buttons How to Create Mini Web UI Buttons in Photoshop

Did you figure it out? Look closely and remember the steps we did with Normal Button. I already gave you the hint, didn’t I? πŸ˜€

web GUI1 How to Create Mini Web UI Buttons in Photoshop

Here is the whole set of our Mini Web UI, I hope you’ll enjoy following this tutorial and feel free to comment is you have questions, or you just wanted to show what you did. Looking forward to your end product guys!

6 Responses to “How to Create Mini Web UI Buttons in Photoshop”