How to design a professional website for your school, college or university

Jul 21st, 2010View Comments

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)

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.

Education Website Layout - University, School,Collage

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)

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.

Education Website Layout - University, School,Collage

Want to Download the Source File?

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.airwalk-design.com/competition Art Competitions

    This tutorial is really good, will have to do something similar with a future client if I get the chance

  • http://www.airwalk-design.com/competition Art Competitions

    This tutorial is really good, will have to do something similar with a future client if I get the chance

  • Jugga

    Very good tutorial. Thanks.

  • http://N/A Jugga

    Very good tutorial. Thanks.

  • Azmy

    gloriawesome superba!!

  • Azmy

    gloriawesome superba!!

  • http://www.rupatisland.com zazaza

    aha…………..
    this one really……goood….hope…this tutorial will be boom

  • http://www.rupatisland.com zazaza

    aha…………..
    this one really……goood….hope…this tutorial will be boom

  • http://www.awebgeek.com pravash chamling rai

    It’s nice sir . Thanks you very much for the tutorials.

    :D

  • http://www.awebgeek.com pravash chamling rai

    It’s nice sir . Thanks you very much for the tutorials.

    :D

  • http://poliman.pl Strony Internetowe Kraków

    It’s very good. Really

  • http://poliman.pl Strony Internetowe Kraków

    It’s very good. Really

  • vijay

    wow amazing

  • vijay

    wow amazing

  • http://easyscholarships101.net/ Easy Scholarships

    Thanks for this great, and lengthy, guide! I just hope it isn’t as hard as the pictures make it out to be, LOL!

    My college could use a *re-design*, and this article could lead them in the right direction…

    Signed by, Shawn Anderson

  • http://easyscholarships101.net/ Easy Scholarships

    Thanks for this great, and lengthy, guide! I just hope it isn’t as hard as the pictures make it out to be, LOL!

    My college could use a *re-design*, and this article could lead them in the right direction…

    Signed by, Shawn Anderson

  • Nadeem

    i have to make my project college website could any one help
    bacha_nn@yahoo.com

blog comments powered by Disqus