Web 2.0 Glossy Gradient Box Photoshop Tutorial

Web 2.0 Button/Box

This very sleek box can either be used to place in content or as a website button.



1. First, create a new 266 x 150 canvas
2. Next, click on your custom shape tool (for a short cut, click "U")()
3. Chose the rectangle shape and change it's radius to 15 px ()

5. Draw out your rectangle using the color white:



6. Next, click on Layer > Layer Style > Gradient Overlay and will in the

exact information as below:




This is what you should get:



7. Now, click on Layer > Layer Style > Stroke and add in a stroke with:

- Size: 10 px

- Position: Outside

- Blend Mode: Normal

- Opacity: 100%

- Color: White



8. Add in a drop shadow by clicking Layer > Layer Style > Drop Shadow and

fill in the same properties:





This should be your result:





9. We are now going to add some glare to the button. Click on your pen tool

() and draw an arc similar to the one below (make sure you

connect the font so it fills). The color fill should be white:






10. The final step is to change the layer's opacity to 50%. Here is how the

end result should look like:






Try adding a background for a nicer look: