Website template design for a bar-restaurant

Here is a template that we will do today:

Step 1. So, let’s start by creating a new document of 900x700px size.
Create a new layer in the document and fill it with any texture similar to a tree.

Step 2. Then using the tool Rectangular area selections (rectangular marquee) select the strip at the top of the template, for example, 140 or 170 px in height. Create a new layer and fill it with any shade of brown.

Navigate menu Layer – Layer Styles – Gradient (Layer-Layer Styles – Gradient) and use colors # 000000 … #FFFFFF … # 000000, apply to the gradient opacity (opacity) 28%. Ensure that the parameter fill (fill) for the layer is set to 30%.

Step 3. Next step. Use the tool again Rectangular Selection (rectangular marquee), select the rectangle under the previous layer, in the same way, from one edge to the other, but about two times larger.

Create a new layer and set the main color as # 013814, and the second color as # 005e29. Using the tool Gradient (Gradient), draw a line from bottom to top so that the dark shade is at the bottom.

While this layer remains selected, go to the menu Layer – Layer Styles – Blending Options (Layer – Layer Styles-) and apply the following settings:

Here is how your document should look like at this stage.

Step 4. With the tool Rectangular Selection (rectangular marquee), Select the rectangle in the upper left corner of your template, as shown in the image below:

Create a new layer, switch back to the tool gradient (Gradient), this time use the same shades of green as before, draw a line from top to bottom so that the dark green is on top. This will give your template a better balance.

Without removing the selection from the layer, go to the menu Layer – Layer Styles (layer – layer styles) and apply the following settings (the same as in the previous step).

Step 5. Take a model beer bottle. I did not have a model, so I went to the site MorgueFile.com, found a beer bottle (beer bottle) and cut it out. Once you are ready to move the bottle into our document, insert it and place it in the middle of the green line on the right side, but not too close to the edge.

If it does not look harmonious, add a little subtle shadow to the layer.

Step 6. The next step is to add rich illustrations. Assuming that we are creating a website template for a bar-restaurant, we will add images with food. Mine is still taken from Morguefile.com, if you want to use the same images as me, just type a hamburger in the search. Insert an image of the appropriate size in our document (if it is too large, just reduce it) and place it behind a bottle of beer. Press Ctrl + T to expand it a bit, and then, when you are happy with the result, press Enter.

Staying on this layer, go to menu Layer – Layer Styles – Options (Layer- Layer styles –option) and apply these settings:

If your template is as wide as ours, you can add another image using the same technique. Here is the result at the moment:

Step 7. Choose a tool Text (Text). Using the font “Caeldera” (available for free on the UrbanFonts.com website) with a size of 18px in a pleasant beige color, combined with your template, write keywords for your navigation menu.

Then – a shadow for the text.

Step 8. Add your logo to the square that we created earlier, if you already have a logo – great, if not – all we did was fill the circle with orange color and add text. It turned out in the style of the sunset, but it looks stylish.
Take a photo of the musicians of the bar, paste it into the template so that it overlaps the large green rectangle. Remove excess from the yellow edges.

Install Blend Mode (blending Mode) on Glow (Luminosity) (this action will completely return green), and then reduce opacity (opacity) up to about 25%, or even less, you do not want the figures on the background too attracted attention.

So that’s it. Your template is ready. Now, all you have to do is cut it and fill it with text. Successes!
Full size version can be seen here.

Author: loreleiwebdesign

Like this post? Please share to your friends: