[Photoshop tutorial] Full Template for beer or bar restorant website layout

Lorelei · #1 May 22nd, 2007, 01:26

------------------------------------------------------------------
Beer Bar Template tutorial by Lorelei © www.loreleiweb.com
If you wish to reproduce this tutorial on other websites, a link back to www.loreleiweb.com/forum is required. Thank you!
------------------------------------------------------------------

Click HERE to download the FULL FREE PSD file of this template [registered members only]

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!

samkoerai-babyzeepaardje · #2 May 22nd, 2007, 15:12

wow you should start your own bar

looks nice

mb · #3 May 22nd, 2007, 20:57

like i told ya before. I like it.

But maybe putting some sizes of those boxes etc in the tutorial, now its just out of the loose hand

I think when you add some sizes people will develop some sort of recognition sense that will help them see and understand the dimensions of pixels which ofcourse will help them when designing website cause you sort of instantly know if something is to big or to small.

Lorelei · #4 May 22nd, 2007, 21:14

i see what u mean martijn and before i parachuted off my chair last night when we talked i did realize the search bar was crap and that the tut is a but off loose hand as u say, but... it's for advanced urs

thankfully its gonna go on GT tonight , it had the highest rating after 4 clicks, so it's not 6,5/10 anymore

marcianocalluci · #5 May 26th, 2007, 23:31

I love youre job and i really want to make something like that.

Thanks

Joeri · #6 May 27th, 2007, 17:12

Yea it's a nice, easy and clean layout. Love it Lorelei. Well done!

QPod · #7 May 31st, 2007, 20:12

Nice work, very slick and clean

Lorelei · #8 May 31st, 2007, 21:20

thanks for your feedback, QPod, Joeri and marcianocalluci, glad you liked the result!

HNX · #9 December 19th, 2007, 23:46

WOW your soo ***** GOOODDDD dude you outha help me with template man:| its the only thing i suck at:S

Estone · #10 December 20th, 2007, 02:32

this looks awesome!

well done Lorelei!

I shall try out some of these web page tutorials soon