Modern content box

22.2.2009, 20:37
Submited in: Photoshop | Total Views: 8295

This tutorial will show you how to create Modern content box in photoshop. You can use it for any web site.

Step 1

We will start with the main shape of our content box. Take the Rounded rectangle tool with raduis of 5px, and create the selection like it is shown on the picture below.

On the shape we will apply the following styles:

Drop shadow

Inner glow

Gradient overlay

Pattern overlay


To create this pattern, make a new transparent file, size 6x6px and create a diagonal like it is shown on the picture.

Step 2

Then, go on edit-define pattern and save your pattern.


Now, our content box looks like this:

Step 3

Duplicate this layer.

Click on the option to select it, and after that press Ctrl+T key to transform the box.  For width and height set 94%. See the picture below.

and for that layer apply the following styles.

Inner glow

Color Overlay


Our box now looks like this:

Step 4

Duplicate again this main shape and after that choose right click on copy layer and select  "Rasterize layer".

Step 5

Then, take the Rectangular marquee tool and select the bottom part of shape and delete it. Now we have a little part which we will use for heading. See the picture below.

On that layer apply the following styles


Identical, like I have used for the main shape.

Gradient overlay

Identical, like I have used for the main shape.

Step 6

It's time for heading. I have used pixel font hooge 05_56, size 10px

We' re done!

Have a nice day!

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

Browse by category

Most popular tutorials