Photoshop Tutorial

Professional Web Template

In this tutorial we will make a nice professional web template using Adobe Photoshop.



Start out by making a blank document. I used  620px wide by  600px height.



First of all, create a new layer, make a selection for header of the template .Right click on the selection area and fill it with black.





Select the layer and double click on it in order to open Layer Style dialog box and apply following settings.

Drop Shadow:



Inner Shadow:



Gradient Overlay:



White Stroke:



Here's the result.





Now, we're going to make the background of the template. Make a new layer and drag it under the header layer.
Fill it with a Linear Gradient (#84e1f8 to #cef8ff)





Create a new layer and use Pencil Tool to make a line with 1px width as shown below.



Select the line layer and double click on it in order to open Layer Style dialog box and apply following settings.





The Result



The menu is ready for adding titles. As shown below, I've added some pages to the navigation.
Also you see a rounded corner rectangle for highlighting the current page.



Change the rounded corner rectangle opacity to 25%.