How to make a pet veterinary website design in photoshop

How to make a pet veterinary website design in photoshop

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:

pet-layout-1rev

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.

pet-layout-2

Apply a gradient effect to the new shape created.

pet-layout-3

Your layout should look like this now:

pet-layout-4

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.

pet-layout-5

Add inner shadow:

pet-layout-6

Add the text for menu labels.

pet-layout-7

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.

pet-layout-8

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.

pet-layout-9

Pages: 1 2 3
About reADactor

Try to be a mixer of inspiration, source of tutorials, tips and a reactor of your future design ideas, a place from where you can download freebies, vectors and web templates. Follow us on Twitter and Facebook

View all posts

Network News

Feedbox

Share this!

Subscribe to our RSS feed. Tweet this! StumbleUpon Reddit Digg This! Bookmark on Delicious Share on Facebook
  1. How to make a pet veterinary website design in photoshop | reADactor « Web Templates

  2. Tweets that mention How to make a pet veterinary website design in photoshop | reADactor -- Topsy.com

  3. How to make a pet veterinary website design in photoshop | reADactor | PhotoShopped

  4. uberVU - social comments

  5. Twitted by mrpsd

  6. 45+ Web Designer and Developer Community Picks | tripwire magazine

  7. Tiff
    November 29, 2009 at 12:38 am

    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!

  8. December 9, 2009 at 7:42 am

    Great tutorial.
    Very useful.
    Thanks.

    Regards,

  9. March 11, 2010 at 8:46 pm

    Nice tutorial

Leave a reply

*

*

Your email address will not be published. Required fields are marked *