Home | Hollow Button

Hollow Button

For Use With Web Creation or Graphic Design

Below you will find various graphic design instructions as they relate to web design.

Step-By-Step Instructions:

1. Open a new document in Photoshop. 500x500 width/height.
2. Create a new layer. Name it "Button".
3. Select the Rectangular Marquee tool. Create a rectangular selection.



4. Goto Select > Modify > Smooth. Set Sample Radius to "5". Click OK.
5. Select the Paint Bucket tool. Fill in the selection with a light grey color. (Hex Color: #b2b2b2).



6. Select the Rectangular Marquee tool. Create a rectangular selection inside the button. See image below:
7. Goto Select > Modify > Smooth. Set Sample Radius to "5". Click OK.



8. Click the Delete key.
9. Right click the "Button" layer in the layers palette. Choose "Blending Options".
10. Select "Bevel and Emboss". Adjust the properties until you are satisfied with the bevel of the button.
11. Click OK to close out and return to your image.



12. Create a new layer. Name it "Tray".
13. Select the Paint Bucket tool. Fill in the selection with a brownish color. (Hex Color: #7b7961).



14. Right click the "Tray" layer in the layers palette. Choose "Blending Options".
15. Select "Inner Shadow". Adjust the properties until you are satisfied with the shadow inside the tray section of the button.
16. Click OK to close out and return to your image.
17. Click Ctrl+D to deselect.



18. Select the Eliptical Marquee tool. Create a circular selection in the top right of the button.



19. Make sure the "Button" layer is active, then click the Delete key.
20. Create a new layer. Call it "Circle".
21. Select the Paint Brush tool. Fill in the circle selection with same color from Step 13. (Hex Color: #7b7961).



22. Right click the "Circle" layer in the layers palette. Choose "Blending Options".
23. Select "Inner Shadow". Adjust the properties until you are satisfied with the shadow inside the tray section of the button.
24. Click OK to close out and return to your image.
25. Click Ctrl+D to deselect.



26. Select the Type tool. Type what you want your button to say in the rectangular tray area.