Photoshop CS3: How to Design Glossy Web 2.0 Buttons
There are so many ways to create Web 2.0 styled button using Adobe Photoshop CS3, that I don’t know with which to begin.
1. Open Photoshop and create a new document for the button.
2. Select the Rounded Rectangle tool.
3. Set radius of rounded corners 7px, and then create the shape for the future button.
4. Right-click on rectangle layer in the Layers palette, and choose Blending Options.
5. Set the Gradient Overlay effect parameters from # 980000 to # fe0000.
6. Click OK in the Gradient Editor dialog.
7. In the Layer style dialog, double-click the Inner Glow effect option.
8. In the Inner Glow structure section, set Opacity to 30%, and the color White.
9. In the Layer style dialog, double-click the Stroke effect option. Set Size to 1px and Stroke color to 6c0202. As the result you will get following image:
10. Add a new layer.
11. Press D+X to reset foreground/background color.
12. Select Rounded Rectangle tool, and draw a rounded rectagle on the button that will be used as button glare.
13. Right-click on “Shape 2” layer, choose Rasterize Layer.
14. Click Edit in Quick Mask Mode on toolbar.
15. Choose Gradient Tool, create gradient like following:
16. After leaving quick mask mode, you will get the selection area.
17. Click Delete button.
The button differs according to the position of the gradient.
18. Select the Text tool, and add text to the new Glossy button.
Related posts:
