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

Design a Full Template for Bar Restorant Website Layout

This is the template we will be making today:

Design a Full Template for Bar Restorant Website Layout - Photoshop 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 - Photoshop 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 - Photoshop 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 - Photoshop Tutorials Lorelei Web Design

Design a Full Template for Bar Restorant Website Layout - Photoshop 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 - Photoshop 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 - Photoshop Tutorials Lorelei Web Design

Design a Full Template for Bar Restorant Website Layout - Photoshop 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 - Photoshop 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 - Photoshop 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 - Photoshop 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).