Home | Rectangular Container 001

Rectangular Container 001

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. 600x600 width/height allows a good workable canvas space.
2. Create a new layer. Name it "Panel".
3. Select the Rounded Rectangle tool.

4. Make sure that the Path option is active. Radius should be set to "40".

5. Draw a rectangular path.

6. Select the Path Selection tool.

7. Move your cursor over any point along the path, then right click. Choose "Make Selection" from the pop-up.
8. The "Make Selection" pop-up will appear. Click OK to accept default values. (Default Feather Radius should be "0").
9. Select the Gradient tool.

10. Choose a gradient from light blue to white. (Hex Color: #cbcfdc - #ffffff).

11. Using the Gradient tool, drag from the bottom of the selection to the top.

12. Right click the "Panel" layer in the layers palette. Choose "Blending Options".
13. Select "Drop Shadow". Adjust the properties to the following:

14. Select "Stroke". Adjust the properties to the following:
(For best effects, make sure the color for the stroke is a light color. In this tutorial, Hex Color: #8ca8bc).

15. Click OK to close out and return to your image.
16. Click Ctrl+D to deselect.

17. Select the Type tool. Type out any content that you want in your panel. Add any logos you have prepared.