Hello and welcome back to trendyTUTS.com. As you already know, here on trendyTUTS we are creating web layouts tutorials (or psd templates tutorials) on a regular basis and as usual for today I will create another one. If you want to see our previous tutorials, please check our Website Layout Tutorials Section.

In this tutorial I will show you, how you can create a web layout for a non conventional energy website. Basically if you have a project on which you will need to create a web layout/template for a green energy website such as solar power, wind power, wave power, geothermal power or tidal power this tutorial it will definitely help you.

Click Here To See The Live Preview (CSS/HTML)

To create this Education Template I have used:

• Basic Tools in Photoshop (Rectangle Tool, Rounded Rectangle Tool, Ellipse Tool)
• From our Premium Files (available  to our premium members) I have used: Vector Tree Icons and Ecology Vector Icons
• This cloudy skies

Let’s start the tutorial.
Open Photoshop and create a new document (Ctrl + N)

Then select Gradient Tool

and on Gradient editor this colors:

Using your mouse drag a line from the top till the middle of the document. You should have something like this now

Then at the bottom of this using Rectangle Tool create a white rectangle #ffffff, dimensions 1020 by 238px.
Using this image with some clouds, I will place it on my document, on blending options I will choose Overlay and I will lower the opacity to 17%

Step 1 – Creating the logo

To create a logo, from our Premium Files, available to our Premium Members I will select the Logo Vector Pack and from here I will choose a logo and I will add it on my document. Than with Type Tool I will write “Green Energy” and I will apply this layer styles:

On the right side, using Type Tool I will add a quote also.

Step 2 – Creating the navigation

To create the navigation I will select first Rectangle Tool with a fixed size (160x40px)

and I will create 4 rectangles. For the first rectangle I have applied this layer styles

and for the rest (the orange’s) I have applied this layer styles.

Than with Type Tool I have added the links for navigations:

Step3 – Creating the slideshow area

I will select Rectangle Tool and I will create this shape 946x320px and I will apply this layer styles:

Than with Type Tool I will add some text

Next on the right side, using Vector Trees Icons, from our Premium Files, available to our Premium Members, I will add an icon.

Using line tool (1px in width) I will add 2 lines

Than just below them with Rectangle Tool I will create a rectangular shape.

With Type Tool I will add some text and using again Rectangle Tool I will create another Rectangular Shape

Next because this will be a slideshow I will select Ellipse Tool and I will create 4 circles.

For the first one I have applied this layer styles:

And for the rest of them, this layer styles:

Well, the featured area is finished now.

Step3 – Creating the Middle Area

Middle area is just below the slideshow area. Here with Type Tool I will write some dummy text than using Vector Trees Icons, from our Premium Files, available to our Premium Members, I will add 3 icons.

Then I will select Ellipse Tool and I will create this shape (which it will serve as a separator)

I will go to filter>Blur>Gaussian Blur, here I will set the radius to 4.5px and I will press ok.
With rectangular Marque Tool I will make this selection

I will hit Delete, to delete that portion and Ctrl + D to deselect. I will lower the opacity to 35% also.
Here’s my result:

Next to finish this area I will create this 3 buttons using Rounded Rectangle Tool with a radius of 5px.

For this buttons I have applied this layer styles:
For the first button (the orange one)

For the middle button (the blue one)

For the green button

Step 4 – Creating the content area

Content area is really easy to create.
First I will select Rectangle Tool and I will create a rectangular shape. Dimensions: 949 by 816

If you will look carefully you will see that this shape it has a smooth shadow, to create it I have applied this layer styles

Next on the right side using some text and some images I will create the content

And on the right side I will create the sidebar. Here I have used the Ecology Vector Icons from our Premium Files, available to our Premium Members.
Here is my result

Click Here To See The Live Preview (CSS/HTML)

If you’d like to know when we update this blog with new tutorials, you can follow us on twitter. If you have any questions, please don’t hesitate to ask them in your comments.