How to design a professional website for your school, college or university
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.
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:
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:
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:
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
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.blog comments powered by Disqus