Templates Rain

Home About Contact
Free Psd Templates
Free Glitter Graphics
Free Web Tutorials
Welcome to Templates Rain

Huge Collection of Free Website Templates

Welcome to templatesrain.net! Website Templates are pre-designed websites all you need to do is add your own personal content, upload to cheap web host server and you're ready to jump start your own website. You can customize the website templates any way you like. We have a collection of Free Templates available for download created by designers from around the globe. Our collection is growing daily so be sure to check back often for more Free TemplatesA resource of quality and professional web templates, Css Templates for free download. Browse through the templates category and pick a free website templates from templatesrain.net and upload to your web hosting and start building your web site right now. We highly recommend that you Bookmark Us!

 

Free Website Templates

category
Stunning Header tutorials
 

This tutorial will show you a few simple techniques to design a nice smooth gradient header and nav bar that you can use in your web designs.
This finished design will look like this :

 
To start off, create a 779px wide x 200px high document.make anew layer and
Select the rectangular marquee tool, draw out a shape for the header & fill any color
 
Right click on the layer and select blending options.
click ‘Gradient overlay’ and give it these settings
 
Next, click ‘Stroke’ and give it these settings :
 
Your header shape should now look like this :
 
using the rectangular marquee tool again draw out the shape of your nav bar below the header bar, then right click the header shapes layer and select ‘copy layer style’ , then right click the nav bars layer and ‘paste layer style’. You should have something like this :
 
Now right click the nav bar layer, go into blending option and click the gradient overlay.
Change the gray/white gradient for and orange one using these values : ECAF0A > CF8000
 
Click ok and your nav bar should now look like this :
 
Now we’ll add some text, choose your typeface and type the required links in :
 
For this tutorial we used univers condensed.
We’ll now add a dropshadow to the text, right click the layer > blending options > drop shadow
Use these settings :
 
Your text should now look like this :
 
We’ll now add some dividers between the nav bar links, create a new layer and zoom in.
Using the pencil tool on 1 px, draw two lines like so :
 

Right click the layer and ‘duplicate’, move this layer along between the next set of nav links, repeat this for all the links.

Your nav is now complete :

 
Now all that is needed, is your website name / logo to be added and anything else like extra header links or banner adverts etc :
 

Partners Sites

Free Flash Template

Free Website Templates

Free Html Templates