PS Web Design Tutorial XVIII – Design an Elegant Country Hotel or Restaurant Web Layout in Photoshop

As a coder, my art foundation is weak. We can refer to some mature web PS tutorials to improve our design capabilities. To paraphrase a sentence, "If you are familiar with three hundred Tang poems, you can recite them even if you don't know how to compose them."

The tutorials in this series come from online PS tutorials, all from abroad, and all in English. I try to translate these excellent tutorials. Due to limited translation capabilities, the details of the translation still need to be worked out. I hope that the majority of netizens will give me some advice.

Agreement:

1. The software used in this article is the Photoshop CS5 version

2. The screenshots of the original tutorial are in English. I re-screened them based on the re-production. Chinese version of Figure

3. Some operations in the original text do not give parameters. I measured some parameters through repeated testing, which are displayed in red text. For some wrong parameters, the correct parameters are displayed directly in red text

For example: (90, 22, 231, 77) , indicating that the coordinates of the upper left corner of the rectangle are (90, 22) , width 231, height 77

For example: (90,22), indicating that the coordinates of the upper left corner of the rectangle are (90,22), the other two parameters of the rectangle have been specified in the tutorial

4. My own experience will be attached at the end of the tutorial. Some are optimizations of some steps in the tutorial, etc.

Today I will create a layout for a hotel.

Today, I will create a web page layout for a hotel

This layout will work also if you have site related to the hotel industry: bed and breakfast, motels, and it will work very good for restaurants, cafes, pizzerias, bars, wineries layouts, etc.

This layout can also be good Works on websites related to the hotel industry: hotels with breakfast, motels, and perfect for restaurants, coffee houses, pizza houses, bars, restaurants, etc.

I will use a nice background image and you will see that a simple background image will create an elegant rustic layout

I will use a beautiful background image and you will see that a simple background image will create an elegant rustic layout

.

Create a new document with the following size: 1000 pixels width and 1100 pixels height.

Please click on the following image to see the full size image. Save the image to your computer, and then open this seamless pattern in Photoshop. We will use this image to create a background for this hotel layout.

Please click on the image below to view the full size image. Save the image to your computer and open this seamless pattern in Photoshop. We will use this image to create a background for this hotel layout.

Open the image from above in Photoshop and then go to Edit > Define Pattern. In this way you can create any type of patterns from your images.

Open the image above in Photoshop and click:

Edit > Define Pattern. In this way you can create patterns from your images.

You can close the document with this background image and then you need to add this pattern over your layout document. To add the pattern you need to select Paint Bucket Tool.

你You can turn off the background image of your document, and then you need to add that pattern to your layout document. In order to add a pattern, you need to select the paint bucket tool

Be sure you select the pattern you just created.

Click one time on your document. The background for this layout will look like in the following image.

Click one time on your document. once. The background of your layout will look like the image below

As you can see the pattern filled all the document but at the bottom of the layout it doesn't look very good. I will fix the problem very fast . With brush tool ( and with a smooth brush ) I will make a drawing on the bottom of the layout. It is very important what color you choose to make the drawing. I will recommend you to use the eyedropper tool to grab the exact color or a similar color with mine.

As you can see the pattern fills all of the document, but at the bottom of the layout it looks very out of place. I will solve this problem soon. Using the Brush Tool (with a smooth brush), I paint the bottom of the layout. Very important is what color you choose for drawing. I would recommend using the Eye Eyedropper Tool to get the exact color or something similar to mine.

Suggestion: Use Rectangle Tool to create a new rectangle (0, 852, 1000, 248), color: #111119 is relatively simple

With Rounded rectangle tool I will create a shape in the middle of the layout A rounded rectangle

(42,117,920,320)

I will add the following layer styles

Add a layer style as shown below

## Color for color overlay: #f3c090

Stroke color: #434343

This is my result so far

The following is mine Results

Now it is up to you what you will place here. I will use only a image with a restaurant, but you can create here a nice slide show, or maybe a reservation form.

The next step is to prepare some content here. I just used an image of a hotel, but you could create a nice image slider, maybe with a reservation form

Note: After placing the picture, right-click on the picture layer and select Add Clipping Mask. At this time, the pattern overlay style in the layer style of the previous rounded rectangle layer must be removed. In addition, the color selected in the previous color overlay makes the picture look brighter. This is because the color selected in the color overlay is yellowish, which is consistent with the main color of the picture. If the main color of the picture is another color, then the color of the color overlay should be modified accordingly

##On the top I will create another round shape. this shape will be transformed into a simple menu

Another rounded rectangle

(42,117,920,45) will be created on top. The rectangle will become an ordinary menu

For this layer I will add the following layer styles

Follow the picture below Add layer style

to this layer. Gradient overlay color: #9c9ea5

## Stroke color: # 424242

This is my result so far

This is my result

I will use one more time Rounded rectangle tool to create three shapes.

# are: (48, 546, 908, 437), color: #f4c79f; (48, 546, 908, 286), color: #fbe1c7; (48, 993, 908, 87), Color: #fbe1c7

For all these shapes I will use the following layer styles

Add the color of the stroke in the style

as shown below: #424242

This is my result so far

This is my result

Now I will use Pen Tool to create a similar shape like you see in the following image. the easy way to create such a shape is to turn on the Grid (View > Show > Grid )

Now use the Pen Tool to create a shape similar to what you see. In order to create this shape more easily, you can open the grid (View> Display> Grid)

Suggestion: You can use the Rectangle Tool Create a rectangle (350, -52, 307, 190), then use Add Anchor Point ToolAdd an anchor point in the middle of the bottom edge of the rectangle, and use Direct Selection Tooldrag the anchor Click on the appropriate position

I will add the following layer styles for this simple scarf.

Follow the image below Give the shape a layer style

Color for the gradient overlay: #f8d3a5, #ca8f43

Here is my result

This is my result

I will duplicate this layer several times and I will place the new layers like in the following image. Click to zoom

I will duplicate this layer several times and I will place the new layers like in the following image. . (Press Ctrl+T to freely transform and adjust to the appropriate size)

I will add some text and images over this layout.

I will add some text and pictures to my layout

One more time it will be better if you click on the following image to see better my restaurant / hotel layout

One more time, if you click on my picture, you will find a better hotel (hotel) web page layout

Note: This step is also mentioned in one stroke in the original text, so , complete here

Use the custom shape tool to create 5 five-pointed stars at the top of the layout, and shape each five-pointed star Add the following style:

Stroke color: #424242

Add appropriate text to the flag, with the font shown below:

Add menu text and font to the menu bar As follows, the color: #41372d

##In the center left of the layout, add A title, and a paragraph of text, color: #40372e

The font of the title

The font of the paragraph text Font:

and add two more text blocks

##Add navigation links at the bottom of the layout, font:

Use

Rounded Rectangle Tool to create four rounded rectangles, namely (64,837,213,136), (284,837 , 213,136), (504,837,213,136), (724,837,213,136)

Add the following layer style to each rounded rectangle

Inner glow color: #f8ddc5

Stroke color: #424242

##Place a picture on each rounded rectangle, and right-click on the picture layer and select Create Clipping Mask

Now I will try to create a scarf on the top of the layout. I will use Pen tool to create something like this

Now I will try to create a scarf on top of the layout. I will use the

Pen Tool to create this scarf

Recommendation: Use the Rectangle Tool to create a rectangle, press Ctrl+T to freely transform, select Transform Mode, and adjust to the following shape

Use Add Anchor Point ToolAdd an anchor point in the middle of the right side and use Direct Selection Tool Drag the anchor point to the appropriate position

Add a layer style to this layer

Color of gradient overlay: #9c9ea5

##Color of stroke: #424242

##As you can see I have used the same layer style I have used for the top menu .

As you can see, the layer style added is the same as the layer style of the top menu bar

Create a small circle with the Ellipse Tool, and On the upper left part of the scarf, the shadow of the scarf has been formed. Add the same layer style as the scarf and adjust the order of the layers

Now I will write down ” Welcome to Grafpedia “. This is my final result

Next, write down the text Welcome to Grafpedia. This is my result

Final result:

Postscript:

An elegant web page with wood grain features, making full use of layer styles to achieve wood grain special effects

More PS web design tutorials XVIII - Designing an elegant country hotel or hotel in Photoshop For articles related to restaurant web page layout, please pay attention to the PHP Chinese website!