Her

Home Photoshop Tutorials Web Layout Clean Green Content Box

Clean Green Content Box

Author: AbTuts.com Author's URL: abtuts.com More by this author

Step 1

Create a new document and set the dimensions of content which you like. (mine dimensions are 300x231px).

For background color set white color.

Step 2

Take the Rounded Rectangle Tool, under Foreground color set #9AB82E, and create the main shape for content box.

Using the Rectangle Tool, create the shape for content. See the picture below.

image 1

image 2

Step 3

On a new made shape, we will apply the following styles:

Drop Shadow

image 3

Inner Glow

image 4

Gradient overlay

image 5

Stroke

image 6

Step 4

Now, we will create another shape inside the existing shape. To do that, you must to duplicate the existing shape and after that using the Free Transform Tool, to decrease it. So, click right click on the shape layer and choose "Duplicate Layer"...

image 7

Step 5

After that, press Ctrl+T (Free Transform Tool), and under width and height set 97% . See the picture below.

image 8

Step 6

Then, decrease a little the top part like it is shown on the picture below.

image 9

Now, our content box looks like this:

image 10

Step 7

Remove the current drop shadow, inner glow, gradient and stroke for our duplicate shape, and apply on it the following styles:

Inner glow

image 11

Gradient overlay

image 12

Our content box now looks like this:

image 13

Step 8

Add the heading on the top of content and some icon if you want :)

I have used Ms Trebucht Bold font, 12px, Strong.

I have also add a stroke 1px size, this color #7E991D.

image 14

We're done!

Clean Green Content Box

Bye!