Modern Photo Button
Summary:
A great way to help in the navigation of a website is to create a button with a photo inside. This tells the user what the theme behind the button link represents. In this Photoshop tutorial, we will learn how to design a modern looking photo button for your web design projects.
Step-By-Step Instructions:
1. Open a New Document in Photoshop. Set the height/width to 200x200 px.
2. Create a new layer. Name this layer "Button".
3. Select the Eliptical Marquee tool. Holding down the Shift key, click and drag a circle selection on your canvas.
4. Use the Paint Bucket tool to fill the selection in with a grey color.
5. Right click the "Button" layer in the layers palette. Choose "Blending Options" from the pop-up list.
6. Set the properties for "Bevel and Emboss" to the following:
7. Set the properties for "Stroke" to the following:
8. Click OK. You should now have a button similar to the one below:
9. Select the Eliptical Marquee tool. Holding down the Shift key, click and drag a circle selection inside the interior of the button.
10. Click the Delete key to remove the middle section and create a donut shape for the button.
11. Create a new layer below the "Button" layer. Name this new layer "Photo".
12. Paste your photo image onto the Photo layer.
13. Select the Eliptical Marquee tool. Create a circle selection that is bigger than the hole you made, but not bigger than the button itself.
14. Goto Select > Inverse.
15. Click the Delete key to remove the portion of the image that is not in the center of the button.
16. Right click the "Photo" layer in the layers palette. Choose "Blending Options" from the pop-up list.
17. Set the properties for "Bevel and Emboss" to the following:
18. Click OK. You should now have your Modern Photo Button.
|
|