Make a new document with 766px width and 800px height. Set the white color for background. Make a new layer and apply the following layer style:

We’ll start to make the menu bar. Select the Rounded Rectangle Tool (U), set the radius to 5px and pick the grey color #b1b1b1. Size of menu bar: 740px / 37px.

Apply a gradient effect to the new shape created.

Your layout should look like this now:

On the right side of the menu bar place a new shape what will be a search field. Select the Rounded Rectangle Tool (U), set the radius to 25px and pick the green color #aab82e.

Add inner shadow:

Add the text for menu labels.

Apply to the menu labels an engraved effect. Place separators between labels. Draw with pencil 1px brush grey vertical lines. For depth, you can make for each one another light grey line.

Is time to create the header. Select the Rounded Rectangle Tool (U), set the radius to 5px. Chose the size for shape according to your needs. The color doesn’t matter now because the rectangle will be used for clipping mask. My size is 740px / 380px. Make a copy of this layer.









How to make a pet veterinary website design in photoshop | reADactor « Web Templates
Tweets that mention How to make a pet veterinary website design in photoshop | reADactor -- Topsy.com
How to make a pet veterinary website design in photoshop | reADactor | PhotoShopped
uberVU - social comments
Twitted by mrpsd
45+ Web Designer and Developer Community Picks | tripwire magazine
Very nice. Only thing that bothers me is the top menu looks too much like a Mac interface. Coding this up into CSS and HTML would be a good next tutorial!
Great tutorial.
Very useful.
Thanks.
Regards,
Nice tutorial