PS Webpage Design tutorial XVIII-design the webpage layout of elegant country hotels or restaurants in Photoshop

As the coders, the basis of the artist is weak. We can refer to some mature web page PS tutorials to improve our design capabilities. To apply a sentence, "Three Hundred Tang poems are carefully read, and no poems are written ".

This series of tutorials come from the PS tutorials on the Internet, both of which are foreign and all in English. I try to translate these excellent tutorials. Due to the limited translation capabilities, the translation details are still to be elaborated.

Conventions:

1. The software in this article is Photoshop cs5

2. The original tutorial was in English. On the basis of the re-creation, I cut the Chinese version of the diagram again.

3. Some operations in the original text do not provide parameters. I tested some parameters repeatedly and displayed them in red. Some Incorrect parameters are displayed in red.

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

For example: (90,22) indicates that the coordinates in the upper left corner of the rectangle are (90,22 ).

4. At the end of the tutorial, I will attach my own experiences. Some are Optimization of some steps in the tutorial.

 

Today I will create a layout for a hotel.

Today, I want to create a hotel webpage Layout

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 creating ants, cafes, pizzerias, bars, wineries layouts, etc.

This layout also works well on hotels-related websites, including bad hotels and motel for breakfast, and can be very suitable for restaurants, coffee houses, pizza houses, bars, and installation.

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 pretty background image and you will see that creating an elegant country layout only uses a simple background image.

 

Create a new document with the following size: 1000 pixels width and 1100 pixels height.
Create a document based on the following size: Px in width and PX in 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.

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

 

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 above image in Photoshop and click:Edit>Define a pattern. In this way, you can create a pattern from your image.

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 close the document of the background image, and then you need to add the pattern to your layout document. To add a pattern, selectPaint bucket Tool

Be sure you select the pattern you just created.

Make sure to 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 once in your document. The background of your layout looks like

 

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 is full of all the documents, but it looks very uncoordinated at the bottom of the layout. I will solve this problem quickly. UsePaint Brush tool(With a smooth brush), I will draw the bottom of the layout. It is very important to select what color to draw. We recommend that you useDropper ToolTo obtain the exact color or a color similar to mine.

Suggestion: UseRectangle ToolCreate a new rectangle (0,852,100 111119). Color: # is relatively simple.

 

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

UseRounded rectangle ToolCreate a rounded rectangle (42,117,920,320) in the middle of the layout)

 

I will add the following Layer Styles

Follow the add layer style

Color overlapping colors: # f3c090

Stroke color: #434343

 

This is my result so far

Below are my 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.

Next, we will prepare some content here. I only use a hotel image, but you can create a beautiful picture slide bar. Maybe there is an appointment form.

Note: Right-click the image layer and selectAdd a clipboard mask. In this case, you must remove the pattern overlapping style from the layer style of the rectangular layer with the rounded corner. In addition, the color of the previous color stack makes the image look brighter, because the color of the color stack is yellow, consistent with the main color of the image. If the Dominant Color of the image is other colors, you must modify the color overlapping.

 

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

Create another rounded rectangle (42,117,920, 45) on the top ). This rectangle will be changed to a normal menu

 

For this layer I will add the following Layer Styles

Follow the steps below to add a layer style to this layer

Color of gradient superposition: #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.

Use againRounded rectangle ToolCreate 3 rounded rectangles

They 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 styles for these layers

Stroke color: #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)

Use nowPen toolCreate a shape similar to what you see. To create this shape more easily, you can open the grid (View> display> Grid)

Suggestion: You can useRectangle ToolCreate a rectangle (350,-52,307,190) and then useAdd anchor ToolAdd an anchor in the middle of the bottom edge of the rectangle and useSelect Tools directlyDrag an anchor point to a proper position

 

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

Add a layer style according to the shape

Gradient colors: # 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 want to copy and place the layer multiple times. (Press Ctrl + T to adjust the deformation to the proper size)

 

I will add some text and images over this layout.

I will add some text and images on my Layout

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

Once again, if you click my images, you will find a better hotel webpage layout.

Note: The original document of this step has also been written. Therefore, the content is complete here.

Use a custom shape tool to create five-pointed stars at the top of the layout and add the following styles to each five-pointed star:

Stroke color: #424242

 

 

Add appropriate text on the flag. The font is as follows:

 

 

Add menu text on the menu bar. The font is as follows: # 41372d

 

On the left side of the layout, add a title and a text segment. Color: # 40372e

Title Font

Font of paragraph text:

 

Add the other two text blocks in sequence.

 

Add a navigation link at the bottom of the layout. Font:

 

 

UseRounded rectangle ToolCreate four rounded rectangles: (64,837,213,136), (284,837,213,136), (504,837,213,136), and (724,837,213,136)

Add the following layer style to each rounded rectangle

Color of inner light: # f8ddc5

Stroke color: #424242

 

 

Place an image on each rounded rectangle and right-click the image layer to selectCreate a clipboard mask

 

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

Now I will try to create a scarf at the top of the layout. I will usePen toolCreate this scarf

Suggestion: Use the rectangle tool to create a rectangle, press Ctrl + T to freely deform, select the deformation mode, and adjust it to the following shape

UseAdd anchor ToolAdd an anchor in the middle of the right and useSelect Tools directlyDrag an anchor point to a proper position

 

Add a layer style to this layer

Color of gradient superposition: #9c9ea5

Stroke color: #424242

 

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

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

Use an elliptical tool to create a small circle. in the upper left corner 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 the welcome to grafpedia text. This is my result

 

Final result:

 

Postscript:

The elegant wood grain special webpage makes full use of the layer style to realize the wood grain special effect