Tutorial: Eco Theme Template

Here is our first Photoshop tutorial. We will design nice looking green web layout. Here is the preview:

Step 1:

Let’s start out by creating a new file. I used a 1000×720 pixels canvas set at 72dpi, and I filled my background with white color shade. Now make a new layer and draw a large rectangle across your canvas with #699A00 color shade and 1000 x 185 px dimensions.

Step 2:

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

Result:

Step 3:

Create a new layer and draw a 1 px line with #799E00 color shade across the center of your green header design.

Step 4:

Now draw another 1 px line with #81AA00 color shade below your first line.

Step 5:

In a new layer draw a black rectangle across your canvas just below your second line.

Step 6:

Under Layer Style(Layer > Layer Style) add an Inner Shadow blending option to your black rectangle layer.

Result:

Step 7:

Overlapping your black rectangle design draw a gray rectangle across your header design with #E9E9E9 color shade and 1000 x 30 px dimensions.

Step 8:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow and Gradient Overlay blending options to your gray rectangle layer.

Result:

Step 9:

In a new layer draw a 1px line with #484848 color shade on the black space as shown below.

Step 10:

Select the Horizontal Type Tool and set the font family to Arial, 15 pt, none and #B7FFAD color shade. In a new text layer type out your navigation links on the space shown below. Make sure you leave spaces between each link and add a vertical bar with #7A9E08 color shade.

Step 11:

Now make a new layer set titled ‘Content Box’. In a new layer draw a large rectangle with #F6F6F6 color shade and 690 x 320 px dimensions.

Step 12:

Under Layer Style(Layer > Layer Style) add a Stroke blending option to your large gray rectangle layer.

Step 13:

Create a new layer and draw a gray rectangle with #EFEFEF color shade on your content box.

Step 14:

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

Step 15:

Select the Horizontal Type Tool and set the font family to Arial, bold, 14 pt, none and #440600 color shade. In a new text layer type a title on your content box. Now create a new text layer and set the font family to Webdings, 36 pt, smooth and white color shade. Then type ‘4′ on your canvas to get the arrow pointing to the right, position it as shown below.

Step 16:

Now set the font family to Arial, regular, 11 pt, none and #000000 color shade. Then type out your content text on the box design.

Step 17:

Next to large content box add a smaller content box for featured work section.

Step 18:

Now select the Rounded Rectangle Tool, above your screen under the options palette set the radius to 10 px and check anti-aliased. In a new layer draw a green rounded rectangle with #699A00 color shade and 141 x 31 px dimensions. Then cut the top corners off as shown below.

Step 19:

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

Result:

Step 20:

Select the Horizontal Type Tool and set the font family to Arial, bold, 13 pt, none and #BFFF7B color shade. In a new text layer type a title for your green button.

Step 21:

Now use the same content box design for your other sections of your template.

Step 22:

Now add your footer using the green rounded rectangle design tab.

Select the Horizontal Type Tool and set the font family to Baskerville Old Face, 42 pt, strong and #F6F6F6 color shade. In a new text layer type a title for your website name on your green header design. Then under Layer Style(Layer > Layer Style) add an Drop Shadow and Stroke blending options to your text layer.

Result:

Ans that is it here is our finished template: