1. Make a new RGB image, 200 wide by 300 height. Fill the background layer with a dark color.
2. Make a New Layer and name it “Buttons”. Choose the Rectangular Marquee tool. Hold down the shift key and make a square marquee, this will be your button so don’t go too crazy on the height.
3. Now choose the “Angle gradient tool”. You will need to click and hold the mouse on the gradient icon on the tool bar, then select it from the pop out.
4. Now Press “D” and then “X” on the keyboard to set the foreground and background color, white and black. Also make sure your gradient settings is on “Foreground to Background”. Hold down the shift key and click on the Top right corner of the marquee, try to click right on the corner if you can. Now drag at an angle to the Bottom left corner like I have shown. Now release the mouse button first, then the shift key.
5. Contract the selection: Selection>Modify>Contract. Enter 2 and click OK. Fill the center with a light or medium gray. Deselect Ctrl+D (Mac: Command-D).
6. Select half your object with the Rectangular marquee like shown. Hold down Alt-Ctrl-Shift (Mac: Option-Command-Shift) While holding down the keys, Tap the Right arrow key on the keyboard, keep tapping it until you have a nice size button. Deselect: Ctrl-D (Mac: Command-D) when you are done.
7. Select the button with the marquee tool like shown. Now hold down Alt-Ctrl-Shift (Mac: Option Command-Shift) and click on your button and drag down a copy of it right underneath and let go. Continue this until you have multiple buttons or enough for your needs. Try and make sure every copy you make is evenly spaced underneath so it will all match right, I just eye it really good. If you mess up, then hold down Alt-Ctrl-Z (Mac: Option-Command-Z) to undo your last step.
8. Make a New Layer and call it “Cut Edge”. Now with the Oval Marquee Tool make a tall oval shape on the Right side of your interface like shown.
9. Select the Linear Gradient Tool. Press “D” and “X”. Hold down shift and fill the Oval Marquee in, start from the Right and then drag to the left, go a little past the marquee like I have.
10. Ok read this carefully. Hold down the Ctrl. key and click on the Buttons layer to select it. Now Invert Selection (Shift-Ctrl-I) (Mac: Shift-Command-I) Now press the Delete key to erase the outer area we don't want on the Cut Edge layer. It should look close to mine.
11. Make a new layer, name it “Button Inset” if you like. With the rectangular marquee tool, make a small rectangle inside the top button. Make sure your fore- ground is white and fill it from bottom to top with the linear gradient. Check out my screen shot.
12. Ok once more, hold down Alt-Ctrl-Shift (Mac: Option-Command-Shift) and drag down copies of the inter button you made. Continue until down until complete.





More Photoshop: