This is the template we will be making today:

So, get started by creating a new canvas, 900*700px.
Make a new layer on your canvas and fill it with any wood-like pattern. If you have no wood patterns, download our PSD file.

Next, using the rectangular marquee tool, select a strap at the upper part of the template, lets say 140 or 170 pixel high. Make a new layer and fill your selection with any hue of brown.

Go to Layer >> Layer Styles >> Gradient and using #000000 … #FFFFFF … #000000 colours, apply the gradient effect with 28% opacity. Make sure to set the Fill of the layer itself to about 30% as well.

Next step. Using the rectangular marquee tool again, select a box under your previous layer, also from side to side, but about two times higher.

Make a new layer and set your primarily colour to #013814 and your secondary colour to #005e29. Using the Gradient tool, draw a line from the bottom to the top, so that the darker hue will be below.

While this layer is still selected, go to Layer >> Layer Styles >> Blending Options and apply the following settlings:
Stroke
Drop Shadow

This is how your canvas should look thus far.

Using the Rectangular Marquee tool, select a box at the left upper corner of your template, as shown on the picture below:

Make a new Layer, and switch to Gradient tool again, this time, using the same green hues as before, draw a line from top to the bottom, so that the darker green hue will be above. This will give the layout a better balance.

While the later is still selected, go to layer >> layer styles and apply the following settings (same as with the previous box).
Drop Shadow
Stroke

Take a render of a beer bottle. I did not have a render so I just went to MorgueFile.com, searched for a beer bottle and cropped. Once you have your beer bottle ready to go on the canvas, paste it unto the layout and place it in the middle of the green line, on the right side, but not too close to the edge. (you may as well use the other Digital Free Photos database)

If it does not look organic, add a little, hardly visible shadow to your layer.

The next step is adding some juicy illustrations. Assuming we are making a template for a bar / restaurant, we will be adding pictures of food. Mine are also pulled from Morguefile.com, if you wish to use the same images, just go there or to Digital Free Photos and search for “hamburger”.Paste the picture of the appropriate size unto the canvas (if it’s too big – just resize it) and place it behind the beer bottle. Press Ctrl + T to rotate it a little, and when you are happy with the angle, hit “Enter”.

While the layer is still selected, go to Layer >> Layer styles >> options, and apply these settings:
Stroke
Drop Shadow

If your layout, just like ours here, is wide – you may want to add one more image, using the same technique.This is your result so far:

Select the Typing Tool. Using the “Caeldera” Font (free, download at UrbanFonts.com), 18 px size and nice beige hue that blends in good with your layout, type the keyword for your navigation menu.

Then – Drop Shadow on text.

Add your logo to the square we made earlier for the logo, if you have a ready to use logo – great, if not – all we did is filling a circle with orange and adding text… aka sunset motif but looks stylish.

Take a photo of some bar or musicians, paste it unto the template so that it will cover the big green box. Remove the remains from yellow border.

Set the Blending option of the layer to Luminosity (this way the layer will turn green fully), and reduce its opacity to about 25%, or even less if you don’t want your figures on the background to distract too much.

Okay, that is it. Your template is finished. Now all you need to do is slice it and add content! Here is the full size version, don’t forget that if you are a registered member you can download the full size FREE .PSD file. Enjoy!

Share This Post!

Tags: web layout