Portal content box

2.4.2009, 12:31
Submited in: Photoshop | Total Views: 16001

Learn how to create content box which fits perfectly in portal layout with two or three columns.

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


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:



While you are cutting the content box for web, the part for content, cut on three parts: top gradinet 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 Arila 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!


Are you a website owner?
Click here to register and submit your tutorials!

Browse by category

Most popular tutorials