Create a green energy website in Photoshop

Jul 27th, 2010View Comments

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)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Green energy Website Layout Tutorial

To create this Education Template I have used:

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)

Because this live preview was encrypted, browsers such as Internet Explorer wont display the website correctly, that’s why I suggest to use a modern web browser such as FireFox, Chrome or Safari.
This problem will not occur for non encrypted files which are available for our Premium Members.

Green energy Website Layout Tutorial

Want to Download the Source File including CSS/HTML version?

In order to download the source file you will need to become a Premium Member.

Already a premium member? When you click on the download link please make sure that you are logged in.

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.

  • http://www.faqpal.com FAQPAL

    Wow, looks fantastic, thanks for the share.

  • http://www.faqpal.com FAQPAL

    Wow, looks fantastic, thanks for the share.

  • Suzanne

    That’s really what I was looking for! Great color combination, amazing design!

  • Suzanne

    That’s really what I was looking for! Great color combination, amazing design!

  • Nona van Breemen

    Excellent tutorial! Great results in a few simple steps. Danke! :)

  • Nona van Breemen

    Excellent tutorial! Great results in a few simple steps. Danke! :)

  • Richard

    Fantastic tutorial. Soon I will become a premium member! he, he :)

  • Richard

    Fantastic tutorial. Soon I will become a premium member! he, he :)

  • http://magentocommunity.org/natures-majesty-laser-checkontop/ Verla Munyon

    This is a useful post about style. I’m a student just trying to learn more about design tips and I really enjoyed your tutorial. Thanks and I’m looking forward to your next tutorial

  • http://magentocommunity.org/natures-majesty-laser-checkontop/ Verla Munyon

    This is a useful post about style. I’m a student just trying to learn more about design tips and I really enjoyed your tutorial. Thanks and I’m looking forward to your next tutorial

  • Maria

    The CSS/HTML is broken for me when I click on demo link. Can you explain why?

  • Maria

    The CSS/HTML is broken for me when I click on demo link. Can you explain why?

  • admin

    @all Thank you all!

    @Maria – I think you are using Internet Explorer. The CSS/HTML files are encrypted and we couldn’t find a way to make them looks correctly in Internet Explorer. However if you will download them as a premium member you will not have this kind of problems. If you’d like to see the live preview displaying correctly try to use a modern web browser, such as FireFox, Chrome or Safari!

  • admin

    @all Thank you all!

    @Maria – I think you are using Internet Explorer. The CSS/HTML files are encrypted and we couldn’t find a way to make them looks correctly in Internet Explorer. However if you will download them as a premium member you will not have this kind of problems. If you’d like to see the live preview displaying correctly try to use a modern web browser, such as FireFox, Chrome or Safari!

  • Judith

    Boy… I’m gonna love this website!!! You have some really great tutorials over here!

  • Judith

    Boy… I’m gonna love this website!!! You have some really great tutorials over here!

  • Du Trieux

    Looks great! I’m quite beginner in web design, so I’m wondering how I can take the design from PSD to CSS – XHTML?

  • Du Trieux

    Looks great! I’m quite beginner in web design, so I’m wondering how I can take the design from PSD to CSS – XHTML?

  • Tirath

    Beautifully design web page
    your all web layouts and your all tutorials are wonderful
    Keep up good work
    God bless you :-)

  • Tirath

    Beautifully design web page
    your all web layouts and your all tutorials are wonderful
    Keep up good work
    God bless you :-)

  • http://tutorialportals.com HERI

    It’s greats, I see many layout tutorial here. Will be adding your link on my site :)

  • http://tutorialportals.com HERI

    It’s greats, I see many layout tutorial here. Will be adding your link on my site :)

  • http://dunksstore.info Brigette Kiehn

    Thank you for your help!

  • http://dunksstore.info Brigette Kiehn

    Thank you for your help!

  • http://trendytuts.com/psd-to-html-tutorials/psd-to-htmlcode-the-green-energy-website.html [PSD to HTML]Code the Green Energy Website « TrendyTuts – Premium Photoshop & PSD to HTML Tutorials

    [...] Hello and welcome to another PSD to HTML tutorial here on trendyTUTS.com For today I will show you, how I have coded the Green Energy Website Layout. [...]

  • http://www.cssrex.com/ CSSReX

    Amazing tutorial.. I appreciate that..Looking for more :)

  • http://www.cssrex.com/ CSSReX

    Amazing tutorial.. I appreciate that..Looking for more :)

blog comments powered by Disqus