Home | Tech Button

Tech 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 "Box 1". Select the Rectangular Marquee tool. Create a rectangular selection.



3. Choose a gradient fill from light grey to white to light grey. (Hex Colors: #C0C0C0 - #FFFFFF - #C0C0C0)



3. Fill the selection with a linear gradient from top to bottom.



4. Create a new layer. Name it "Box 2".
5. Select the Polygonal Lasso tool. Draw a selection like the illustration below.



6. With the "Box 2" active. Fill in the selection with the same linear gradient from top to bottom as in the "Box 1" layer.



7. Click Ctrl+D to deselect the active selection.
8. Create a new layer. Name it "Box 3".
9. Select the Rectangular Marquee tool. Create a small rectangular selection near the left side.
10. Fill this selection with a dark grey. (Hex Color: #868686)



11. Create a new layer. Name it "Box 4".
12. Create a small rectangular selection inside the grey box.
13. Fill it with a linear gradient from left to right. You can choose your color scheme. (In this tutorial, Hex Colors: #007F18 - #FFFFFF - #007F18).



14. Select the Move tool. Holding down the ALT and Shift key, click and drag the small gradient box to the right to duplicate it. Repeat this step until you have filled the grey box with a row of small gradient boxes.
15. Merge the "Box 4" layer that contain the small gradient boxes with the underlying "Box 3" layer that has the dark grey box. Your image should now look like this.



16. Right click "Box 3" in the Layers Palette. Goto "Blending Options".
17. Select "Inner Shadow". (Opacity: 75% / Angle: 120 / Distance: 5 / Choke: 0 / Size: 5)



18. Right click "Box 2" in the Layers Palette. Goto "Blending Options".
19. Select "Drop Shadow". (Opacity: 75% / Angle: 120 / Distance: 1 / Spread: 0 / Size: 1)



20. Right click "Box 1" in the Layers Palette. Goto "Blending Options".
21. Select "Drop Shadow". (Opacity: 75% / Angle: 120 / Distance: 1 / Spread: 0 / Size: 3)



22. Merge all the layers so that the complete button is on a single layer. Rename this layer "Button".
23. Select the Type tool. Choose a darker grey color (Hex Color: #606060)
24. Type out the name for your button.



25. Copy and paste the button to create additional buttons to create a side panel. Try creating different colors for the gradient filled boxes from Step 13.