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.

Chose an image according with the theme of website and place it in a layer above the new created shape. Right click on image layer and choose “Clipping Mask”.

Now move the copied rectangle layer above the clipping mask and set the following blending options for stroke and inner shadow:

Now you should have the following header:

Put the first layer from header in Multiply mode.

On the bottom corners of the clipping mask, for slider, will be the place of arrows. Select the Rounded Rectangle Tool (U), set the radius to 25px, press the shift key and drag a white color rectangle. Place it in a left bottom corner.

Duplicate the layer and move it on the right corner.

For “crop” corners shadow, make a shape using Pen Tool with color #bababa and apply a gaussian blur with 3px radius.

Duplicate the “shadow” shape and flip it horizontal. Place the blurred shapes above crop corners rectangles. Using clipping mask, make the header to look like:

Using Custom Shape Tool place arrows for left and right buttons of slider.

Split the content area in two columns with a line draw with the pencil and #b5b5b5 color. Delete bottom part of it with a soft round brush. Place the texts and pictures. For text i used Tahoma font and Futura BT Medium for titles. Like colors, #ee9802 is used for links and #a8b814 for green words. Use rectangles with rounded corners (5px) like masks for pictures. Apply to clipping mask shapes a stroke with 8px size positioned outside with #efefef color.

For next step, select the Rounded Rectangle Tool (U), set the radius to 5px, pick the grey color #a7a7a7 and create 4 boxes with 150px / 95px sizes. Use guides for a perfect alignment. Now, for blending options, follow the next screens:

Your boxes should look like in this screen:

You need now 3, 4 icons for those 4 boxes. For 3 boxes i used 3 icons from Milky set released by iconeden.com . Download the icon set from here. Change the colors in Adobe Illustrator like in following image:

Place the icons in boxes. I made the orange color too strong. Because of that, after importing the vectors like smart object in photoshop, i duplicated each icon layer 3 times with following blending options: Pin Light, Luminosity, Pin Light. Using Ellipse Tool, place a very light shadow under each icon.

On footer, create two grey horizontal lines and place between them the copyright note and a short bottom menu.

You are done! Your template should look like mine (click on image for 100% size):

Published on: November 26th in Tutorials .
Post tags: adobe, blur, clipping mask, Design, effect, engrave, gradient, graphic, header, icon, layout, menu, pet, photoshop, psd, shadow, stroke, template, theme, tutorial, veterinary, website