Step 1 - Open Your Canvas
Open a new document using any background color. Change your background color to "#03B507" and your foreground color to "#05DB26". Create a new layer and name it "Arrow". On the tool bar on the left select your custom tool and then select the arrow functions and select the arrow that is shown in the example picture.
Step 2 - Rotate The Arrow
Rotate your arrow to the right until the point is pointing downwards like shown. You can do this by pressing ctrl+T to free transform, and then dragging it to where you want it.
Step 3 - Add A Gradient
Now select the gradient tool and make a small line downwards. Your arrow should look like this. Your background color should still be "#03B507" and your foreground color "#05DB26".
Step 4 - Duplicate the Layer
Right click on the layer entitled "Arrow" and click "Duplicate" and then click "Ok". Now move the layer downwards using the move tool. That is the icon that looks like an arrow with a plus sign in your toolbar on the left. It should look like this.
Step 5 - Flip It
On the new layer click "Edit>Transform>Flip Vertically". Now select your Marquee tool (Make sure it is the Elliptical Marquee Tool) and set the feather to "20".
Step 6 - Delete The Excess
Press the "Delete" key twice. Now go back to the layer entitled "Arrow". In the top toolbar do this. "Layer>Layer Style>Inner Shadow" and match the following.
Step 7 - Stroke and Gradient
On the left select "Stroke" and match what is shown at the top of this screenshot, then click "Gradient Overlay" and use the settings shown at the bottom of this screenshot.
Step 8 - Your Done
If you've done it right, you should come up with an image like below. After adding some more effects you can use this on just about any web interface. Especially hosting sites.






More Photoshop: