Home / PS Tutorials

PS Tutorials · Tutorial

Design a Full Template for Bar Restorant Website Layout

PublishedDecember 11, 2009
Reading time4 min
Filed underPS Tutorials
Design a Full Template for Bar Restorant Website Layout - PS Tutorials Lorelei Web Design Design a Full Template for Bar Restorant Website Layout — December 11, 2009

This is the template we will be making today:

Design a Full Template for Bar Restorant Website Layout - PS Tutorials Lorelei Web Design

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.

Design a Full Template for Bar Restorant Website Layout - PS Tutorials Lorelei Web Design

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.

Design a Full Template for Bar Restorant Website Layout - PS Tutorials Lorelei Web Design

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.

Design a Full Template for Bar Restorant Website Layout - PS Tutorials Lorelei Web Design

Design a Full Template for Bar Restorant Website Layout - PS Tutorials Lorelei Web Design

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.

Design a Full Template for Bar Restorant Website Layout - PS Tutorials Lorelei Web Design

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.

Design a Full Template for Bar Restorant Website Layout - PS Tutorials Lorelei Web Design

Design a Full Template for Bar Restorant Website Layout - PS Tutorials Lorelei Web Design

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.

Design a Full Template for Bar Restorant Website Layout - PS Tutorials Lorelei Web Design

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

Design a Full Template for Bar Restorant Website Layout - PS Tutorials Lorelei Web Design

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.

Design a Full Template for Bar Restorant Website Layout - PS Tutorials Lorelei Web Design

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

Written by

Elizabeth Lorelei Sramek

AI results optimization architect and SEO expert with 20+ years of experience. Crafting strategies that outrank, outperform, and outlast.

9 responses

  1. sarz February 22, 2010

    Thanks for the tutorial . . . . simple and helpful.

    Reply
  2. VastGsm June 23, 2010

    Hey,

    Thanks for this fantastic tutorial, I’m still trying to figure out how I can sign up to become a member for this site and download the required wood PSD files. Unfortunately I can not seem to find the sign-up section in order to find them anywhere.

    Cheers.

    Reply
  3. simul July 9, 2010

    hey try to upload video of this tuts and tell a bit more explanation.i could not make ur template.please upload video.

    Reply
  4. simul July 9, 2010

    would u please tell me how u place sause image behind burger image and how you place musician image on green bar

    Reply
  5. wp plugins October 21, 2011

    Great beat ! I wish to apprentice whilst you amend your site, how can i subscribe for a weblog website? The account aided me a acceptable deal. I had been tiny bit familiar of this your broadcast provided vivid transparent idea

    Reply
  6. Alexandra October 26, 2011

    I was recommended this blog through my cousin. I am no longer certain whether this publish is written through him as no one else understand such certain approximately my problem. You’re wonderful! Thanks!

    Reply
  7. XinCity October 29, 2011

    Hi there, You have performed a fantastic job. I will definitely digg it and in my view recommend to my friends. I’m sure they will be benefited from this website.

    Reply
  8. Design a Wonderful Website Theme using Photoshop | codeManiac – Snippets, Templates, API and the best developer content May 3, 2012

    […] Design a Full Template for Bar Restorant Website Layout […]

    Reply
  9. Дизайн шаблона сайта для бара-ресторана December 18, 2013

    […] Автор: https://loreleiwebdesign.com/ Перевод: Анцыперович Александра Ссылка на источник […]

    Reply

Leave a response