How to Create Mini Web UI Buttons in Photoshop

P On 16 Nov, 2011 • + By 9 With 6 Comments

WordPress Portfolio Themes

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!

how to create mini web ui buttons in photoshop - Sanjay Khemlani

Let’s Begin

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

You should have something like the one above. Notice the light line above? That’s from Inner Shadow :) moving on to text.

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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.

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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.

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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.

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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.

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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? :D

how to create mini web ui buttons in photoshop - Sanjay Khemlani

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!

C Tags: , , ,


Show some love and share!

Join our 356 subscribers and get the tutorials right from your inbox!

*I will not send spam message or affiliate offers.

I design / build Custom Wordpress Themes for different kinds of Clients, big or small, solo-prenuers or marketer. I've also worked with different design agencies as their 'web guy' for their Clients. I also enjoy writing tutorials and helping newbies so I can contribute to the community. Got a project in mind? Let's talk! | More about me?

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

  1. piyush says:

    Thanks for this tutorial very simple but innovative button.

  2. techtuton says:

    Thanks for share. helpful post

  3. Serban says:

    Hey, nice tutorial
    Check my outcome :)
    http://i.imgur.com/9Iae4.png

Leave a Reply