Free Online Classes

Learn how to create a beautiful green content box for your website. In this Photoshop tutorial, you'll learn the basics to drawing web elements using basic Photoshop tools and layer styles.

Fresh Green Content Box Photoshop Tutorial

Step 1

Let's start out by creating a new file. I used a 300x230 pixels canvas set at 72dpi, and I filled my background with a white color. Now create a new layer and draw a large rectangle with 280 x 212 px dimensions with #F4FFE0 color shade. This rectangle will be the content box.

Step 2

Under Layer Style(Layer > Layer Style) add an Inner Glow and Gradient Overlay blending options to your light green rectangle layer.

Step 3

In a new layer draw a long rectangle with 277 x 225 px dimensions with #DEFF9E color shade. This long rectangle will hold the title of your content box.

Step 4

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to your second rectangle layer.

Step 5

On the top corner of your content box draw a small rectangle with 30 x 14 px dimensions and #DEFF9E color shade. Then under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option.

Step 6

Duplicate the gradient rectangle and position it on the other end of the content box.

Step 7

Select the Horizontal Type Tool and set the font family to Arial, bold, 12 pt, none and #2ABE02 color shade. In a new text layer type the title of your content box on the middle of the gradient rectangle. Then add your content using the same font family but regular, 11 pt, none and #7E7E7E color shade.

Final Results