Simply Nice web 2 button

Posted by Samy | Filed under Web Graphics

In this tutorial, I will show you how to create a nice looking web 2.0 button. This kind of buttons you can use in simple web designs. This simple looking button gives high quality looks to websites.
Using Rectangle shape, gradient effect, inner glow, marquee tool, rasterize layer, Transform option etc.. We can get this button. 

 

 

Step 1

Take a new file sizing 500 x 500 px .Set the foreground color to #ededed.

 

Step 2

Select a rounded rectangle tool. Change the radius 0 to 10 px .Create a rectangle shape on center of the file. Color for #7f0e93.

 

Step 3

Make a copy of shape layer. Go to layer panel >click on duplicate layer. We need to change the color of new layer to understand both layers are different. For that, double clicks on the layer thumbnail icon>color picker window > change the color to white #ffffff.

 

Step 4

Next, we need to convert white shape layer to rasterize layer. For that, right click on white shape layer >click on rasterize layer.

 

Step 5

Now we need to erase some area from this layer. To do that, Go to “tool panel”> click on “Rectangular marquee tool”. Set 0 feather. Select the area which we want to remove > then press Delete button on keyboard.

 

Step 6

Our next step is to give an inner shadow to white layer (rasterize layer). To do that, right click on white layer > go to blending options…> Check “inner glow”> change the blend mode > “screen to normal”> set a color to gray. #9b9b9b.> elements >increase the size 8 px.Then press OK.

 

Step 7

Next, add glossy effect to button. For that, make a duplicate layer of purple shape layer. Change a color of it purple to white . To do that double-click on layer thumbnail icon >color picker > change color to. #ffffff.

 

Step 8

Then convert shape layer to rasterize layer. To do that right clicks on white shape. > Clicks on “rasterize layer”

 

Step 9

Next, go to tool the panel, click on “elliptical marquee tool” > draw it like ellipse shape with 0 feather. Align to top left corner of a button. Then just make a copy and paste it.

Now we got a shape, which we needed. So remove that older white rectangle button shape. To remove it, select that layer and press Del to delete it.

 

Step 10

Our next step is to add gradient effect to white rounded shape. To do that, select a layer >right click on it >select blending options..>check gradient overlay> click on gradient > under gradient editor> set foreground to transparent >click OK >then under gradient overlay panel> check reverse>then click OK.

Next move, go to layer panel > change fill values 100 to 0 %. And change the opacity value 100 to 60 %.

 

Step 11

After that, we need to add shadow effect. For that select purple shape, make a copy of it .Change color to gray (as show earlier).

Convert shape layer to rasterize layer .Transform it as look like a shadow. Next go to filter >blur>box blur >set the radius values to 2 > then click OK.

 

Step 12

Add text >go to tool the panel> click on type tool >type HOME with a size you need.

That’s it.

Permalink | June 16th, 2009

4 Responses to “Simply Nice web 2 button”

  1. Steyn Says:
    June 16th, 2009 at 3:51 pm

    Very Quick ! Thanks

  2. Sven Says:
    June 23rd, 2009 at 12:28 am

    amazing look and quick to create, nice!

  3. FFA Says:
    August 9th, 2009 at 9:04 am

    It’s cool
    nice one

  4. Retrofit Says:
    August 25th, 2009 at 6:00 pm

    Very attractive button. Tutorial presentation also very good. I am going to use this button in my next proect. In another blog (http://design.riasolve.com/) found very good collection of free web template, powerpoint template, logo design , tutorials etc. And hey have free PSD, PPT file. You can check that too. Anyway thanks a lot for this wonderful tutorial. keep it up :) .

Leave a Reply