Home | Button with Arrow

Button with Arrow

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 Rounded Rectangle Tool.



4. In the options bar, make sure that "Paths" is selected. Set the Radius to "25".



5. Create a pill shape for the first button of the side panel.



6. Select the Path Selection Tool.


7. Move your mouse over the path of the oval shape. Right click, then choose "Make Selection" from the list.
8. The Make Selection box will appear. Click OK to accept defaults. (Default should be Feather Radius: 0).



9. Select the Paint Bucket tool.



10. Fill in the selection with a color of your choice. (This tutorial Hex Color: #00ff00).



11. Goto Select > Modify > Contract. Set the Radius to a small number, such as "2". Click OK.



12. Select the Gradient Tool.



13. Set the gradient with the same color you used in step 10 to pure white. (Hex Color: #00ff00 to #ffffff).



14. Fill the selection with a linear gradient starting from the bottom of the selection and going up just over the top of selection.



15. Click Ctrl+D to deselect.
16. Select the Eliptical Marquee tool.



17. Create a new layer. Name it "Arrow Circle".
18. On this new layer, create a circular selection at the left side of the button.
19. Select the Paint Bucket tool. Fill the selection with light grey. (Hex Color: #d7d7d7).



20. Click Ctrl+D to deselect the circle selection.
21. Select the Polygonal Lasso tool.



22. Zoom in on the grey circle. Create an arrow shape like the one in the image below. (Remember that holding down the Shift key while you drag the lasso tool will allow you to get perfect diagonal selections).



23. Select the Paint Bucket. Fill in the arrow shape with white (Hex Color: #ffffff).
24. Click Ctrl+D to deselect.



25. Right click the "Arrow Circle" layer in the Layers Palette. Select "Blending Options" from the pop-up list.
26. Choose "Bevel and Emboss". There are two areas in Bevel and Emboss, they are "Structure" and below that is "Shading". Set them to the following:





27. Choose "Drop Shadow". Under the "Structure" area, set to the following:



28. Choose "Stroke". Under "Structure" area, set to the following:



29. Click OK to close out and return to your button.
30. You should now have your completed button.



31. Flatten both layers: "Arrow Circle" and "Button".
32. Type text over your button with the font of your choice.



33. Copy and paste to make multiple buttons on top of each other.