// // //

Welcome to the colorful contentbox tutorial. You can view part 2 here

This is what we´re going to make:

1) Start photoshop, and make a new file. You can pick a random size, as long as we can fit the contentbox on it.. I picked 320 x 350

2) Make a new layer, and name this layer: "Header"

3) On this layer we're (obviously) going to make the header shape. To do so, pick the Rounded Rectangle Tool, and choose these settings:

4) Now pick a blue color (I choose #17399B, but this doesnt really matter because we're going to put an overlay gradient on top of it) and make the shape of your header:

5) remove the bottom part of it, so that you only have about half of the section left.

6) we're going to apply a Gradient on top of it, to do so, go to Layer > Layer Style > Gradient Overlay, and pick these settings:

7) Press Ok, then go to "Stroke" (Layer > Layer Style > Stroke) and pick these settings:

8) Result:

9) Now, we're going to apply a Glare on top. Make a new layer, and call it "Glare".

10) Ctrl + Click on your "Header Layer" icon, and you will get its selection. We're going to contract 4 pixels. Go to "Selection > Modify > Contract" and pick 4 pixels.

11) Next, fill this selection with White.

12) Deselect (Ctrl + D) and pick your selection tool. Make a selection under the white part and fill it with white so it goes down to the bottom of the header:

13) now, put this layer on "Overlay" and about 35% opacity:

result:

14) Make a new layer, and call this "Orange Header". Make a selection on it from about 5 pixels, and fill it with an orange color. Once again, the color isnt important because we will place a gradient on top of it.

15) Go to Layer > Layer Style > Gradient Overlay, and pick these settings:

16) Make a new layer (I called the layer "indent"), and zoom in about 300%, and pick a bright yellow color. We're going to make 1 pixel stroke to make it look like an indent.

17) make a light grey section under your header. This will be the content area. I picked the color #F1F1F1

18) We're going to make a 'fade' on top of the content section. Make a new layer and call it "Fade". Pick your selection tool, and make a small selection 1 pixel under the top

:

19) Pick your gradient tool, and select the "Foreground to Transparent" gradient:

20) Now drag your gradient tool down from top to the bottom of the selection.

21) now we're going to make the footer of the contentbox. Simply duplicate the orange gradient and stroke and place them under the grey section:

22) Now, on a new layer (i named it Footer) make a new selection under the orange bar, and fill it with blue.

23) We're going to put the same gradient as we did for the top. Simply, Copy the layer style from the header and paste it on the footer layer. To do so, right click your "Header" Layer, and press "Copy layer style". On your footer layer, right click and press "Paste layer style"

24) Now, we only want the gradient, not the stroke, so go to "Layer > Layer Style > Stroke" and uncheck the strokecheckbox. My result:

25) Make a new layer, and call it "Stroke". Grab your pencil tool and zoom in. Grab a darkish blue color, i choose #0C5191, and make a line on top of the blue gradient:

26) Grab a lighter blue color, and make another line, but this time at the bottom:

27) underneath this one, make another line with your dark blue color.

my result:

28) Add some text in the header of your contentbox

29) Now you can decide for yourself, does it look better with a glare, or without?

it's your pick!