Content Box

1. Create a new document approximately 350 x 250 with a white background. Press "D" on your keyboard to reset the colors to the default settings. Create a new layer by going to Layer > New > Layer and name it "Box Bg". Then grab the Rounded Rectangle Tool from the toolbox then go up to the options bar and change the radius to 18px. Leave the rest of the options at the default settings. Then create a simple box as shown below.

2. In the layers palette, click on the litte "f" and select "Drop Shadow". Use the settings in the following image then move on to "Stroke". Once you are done, don't click ok yet; we still have a gradient to add.

3. Next select "Gradient Overlay". For the gradient, double click on the box next to the word "Gradient" (colorful part) to bring up the Gradient Editor. Use the settings in the image. Make sure you name the new gradient "Gold" and press the "New" button to save the gradient, since we will be using this gradient again later in the tutorial. Finally, change the fill to 50%.

4. Create a new layer named "Content Tab". Now select the "Pen Tool" and magnify the image to 500%. Make sure the tab called "Shape Layers" is selected in the options bar (this is next to the tool preset picker in the far left) and create an outline of the tab using the image below as a reference. Many people find the pen tool difficult to use, so I've named each point and added notes when neccessary. Once you are done, the points should go away. If they don't, check to make sure points 1 and 9 are in the same spot.

5. In the layers palette, click on the "Content Tab" layer and change the "fill" to 50%. Also in the layer palette, click on the little "f" and select "Gradient Overlay". Use the same settings you used in step 3. To select the gradient you made in step 3, click on the triangle next to the box by the word "Gradient" and click on the "Gold" gradient. Finally, add a drop shadow using the settings below.

6. It's finally starting to take shape! Let's touch it up with some minor additions. So, Press "X" on your keyboard to switch the colors. (The foreground color should now be white and the background color should now be black.) Next press "Shift+Ctrl+N" to create a new layer. Name the new layer "Bricks". Then select the "pencil tool" and change the brush size in the options bar to "Hard Round 3 Pixels". Create a few boxes then click the litte "f" and go to "Stroke".

7. Now add some text next to the bricks or blocks you just made and apply the same "Stroke" settings you used in step 6. Create a new layer called "Header Shade". Using the "Elliptical Marquee Tool", make a shape overlapping and expanding to the full width of the content tab. Grab the paint bucket tool and fill the selection in white. In order to see the contenbelow, change the "opacity" for the current layer to 30%.

8. Create a new layer called "Footer Shade". Using the "Elliptical Marquee Tool", create a shape at the footer of the large content box overlapping and expanding to the full width of the content box like you did in the previous step. Change the opacity for the current layer to 25-30%.

9. Add some text, slice the image up, and your done! (Learn how to slice an image.)