Portal Content Box

Step 1

Using Rectangular Marquee Tool (M) to create the selection for heading and fill it with this color: #204B86. See the pictures below.

Step 2

On that layer, apply the next styles:

Inner Glow

Gradient Overlay

Stroke

The part for heading box now looks like this:

Step 3

Take the Rectangular Marquee Tool and create the selection for content, 1px under parts for heading. Look at the picture below!

Step 4

Fill the selection with white color and apply on it the next styles:

Gradient Overlay:

Stroke

Note! While you are cutting the content box for web, the part for content, cut on three parts: top gradient part, middle part which is expanding (while you're adding content) and bottom gradient part. You are doing that for making box independent in relation to content box, which will expand with adding content.

The content box now looks like this:

Step 5

Now, we will create a small icon for heading .

(On the picture below is the large version of icon which we have zoomed maximally).

Use the Pencil Tool to create that icon.

Step 6

Set that icon in the area for heading. Take the Text Tool (T) and type the headline for box. For this tutorial I have used Arial Bold font, size 10px, set up on Smooth.

I have also add Stroke, sizes 1px, and I have used this color:#204B86 for headline.

We're done!

Bye!