Create a green energy website in Photoshop
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.
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:
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:
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:
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)
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
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.blog comments powered by Disqus