If you’re reading this tutorial, it means that you have an important task. You have to create a website for your school, college or university! In this tutorial I will show how you can impress your colleagues and teachers by creating a professional website for your a school, college or university.

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

Please note that this Education Template it was created in Photoshop and as a Premium Member you can download it in both formats – PSD and CSS/XHTML. In this tutorial I will explain how you can create a similar template in Photoshop but I will not cover the conversion PSD to XHTML. A tutorial on how to code this template in CSS/XHTML will be posted pretty soon on our PSD to HTML Tutorial Section and It will be available to our Premium Members.
Also if you’d like to download all Website Layouts and all Premium Files, you can easily do that if you will become a Premium Member on trendyTUTS.com.

As you can see, here on trendyTUTS.com, you will learn to make websites in Photoshop but in the same time you will learn how you can turn them in fully functional websites! Most of our templates are already coded and you can download the source file (.psd) and the CSS/HTML version for each template created in Photoshop.

To create this Education Template I have used:

• Basic Tools in Photoshop (Rectangle Tool, Rounded Rectangle Tool, Ellipse Tool)
• From our Premium Files (available only to our premium members) I have used: Education Vector Icons

Let’s start it
Open Photoshop and create a new document: Ctrl + N, dimensions 1020x1320px

Next set foreground color to #f7f5e9 than with Paint Bucket Tool click on your document to change the color. Now I will select Rectangle Tool and I will create 2 shapes on the top and at the bottom of the document. For the first rectangle I have used this color: #47423c than for the second one #dddac6

Step 1 – Creating the logo

To create the logo I will select Type Tool, and I will write “Education Website”. For “Education” I have used Palatino Linotype font, 35px in size and as a color I have used #d7c178.

For “Website” I have used Tahoma font, 30px in size, color #eeeeee, than from our Education Vector Icons available only to our Premium Members I will select an icon showing a compass and protractor and I will use them as a logo. Here is my result:

To make the logo area looks better, I will select a soft brush with 20px in size and I will create a spotlight.

Step 2 – Creating the navigation

To create the navigation I will select first Rounded Rectangle Tool (radius 15px) and I will create a shape on the right side of the document, dimensions: 469x60px than I will apply this layer styles:

With type tool I will add the links for navigation

Next with line tool I will create 2 tiny lines. This one’s it will serve as separators. Please see the screenshot to see what colors I have used

Now I will select Pen Tool and I will create a triangle. This triangle it will serve as a rollover for our navigation.
Here is my final result

Step3 – Creating the Featured Area

To create Featured Area I will select Rounded Rectangle Tool (radius 15px) and I will create a shape with this dimensions 948x271px. As you can see from the screenshot I have covered a small portion from the navigation

Than with Ellipse Tool I will create this shape

And I will move it above the shape created with rounded rectangle tool

As you can see from this 2 shapes I have created a single one. Make sure that both shapes  are selected on your layer palette, than hit Ctrl + E to merge them together.

We have created a single shape, now I will apply this layer styles:

My result:

Next on the left side with Rectangle Tool I will create a darker shape and I will lower the opacity to 80%. I will right click on the layer and I will select “Create Clipping Mask”

Here is my result after I have applied the clipping mask.

As you can see the shape is fitting perfectly now.
In same way I will add an image on the featured area. Using “Create Clipping Mask” it will fit perfectly on the feature area. I will add some text on the left side also.

Next I will select Rounded Rectangle Tool with a radius of 30px I will create a button:

Then I will apply this layer styles:

My final result for Featured Area

Step 4 – Creating the content area

To create the content area, I will select Rectangle Tool and I will create this shape. Dimensions 298x519px

Then with Ellipse Tool I will create one ellipse at the top of the shape and at the bottom (basically I will do the same trick which has been done for Featured Area), I will select all 3 layers on my layer palette and I will hit Ctrl + E, to merge them together and to create a single shape.

Next I will apply this layer styles:

I will select Rectangle Tool, I will create this shape and I will apply this layer styles

Then with Type Tool and some stock images I will fill up this shape.
My result:

On the right side using the same methods I will create another 2 shapes. For the middle shape I have used Education Vector Icons from our Premium Files which are available only to our Premium Members.
Here is my final result for content area:

Step 5 – Creating the footer

To create the footer I will create first a similar shape with that one from Featured Area. I will use the same methods to create it.

Then on the top of it, using Type Tool I will add some text and with Rectangle Tool I will create the forms for the newsletter.

Than using a soft brush I will create a soft light on the footer

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.