PS網頁設計教程XVIII——在Photoshop中設計優雅的鄉村酒店或餐廳的網頁布局－互聯網

文章出處

作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁PS教程，提高自身的設計能力。套用一句話，“熟讀唐詩三百首，不會作詩也會吟”。

本系列的教程來源于網上的PS教程，都是國外的，全英文的。本人嘗試翻譯這些優秀的教程。因為翻譯能力有限，翻譯的細節上還有待推敲，希望廣大網友不吝賜教。

約定：

1、本文的軟件是Photoshop CS5版本

2、原教程的截圖是英文的，本人在重新制作的基礎上，重新截了中文版的圖

3、原文中有些操作沒有給出參數。本人在反復測試的情況下測定了一些參數，以紅色的文字顯示。有些錯誤的參數，直接以紅色文字顯示正確的參數

例如：（90，22，231，77），表示矩形的左上角的坐標是（90，22），寬231，高77

例如：（90，22），表示矩形的左上角的坐標是（90，22），矩形的其他兩個參數教程里已經指定

4、在教程的最后會附上本人的心得。有些是對教程中的一些步驟的優化等。

Today I will create a 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.

這個布局也能很好的工作于和酒店業相關的網站：包含早餐的惡旅館、汽車旅館，和能非常適合飯店、咖啡屋、披薩屋、酒吧、就裝等

I will use a nice 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.
按后面的尺寸新建文檔，寬1000px，高1100px

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.

請點擊下面的圖片以查看完整大小的圖片。將圖像保存到您的電腦，然后在Photoshop中打開這個無縫圖案。我們將使用這個圖像創建一個背景給這家酒店的布局。

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.

在Photoshop中打開上面的圖像，然后點擊：編輯 > 定義圖案。在這種方式中，你可以從你的圖像中創建圖案。

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.

你可以關閉背景圖像的文檔，然后你需要添加該圖案到你的布局文檔。為了添加圖案，你需要選擇油漆桶工具

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.

在你的文檔上點擊一次。你的布局的背景看起來就像下圖一樣

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.

正如你可以看到的圖案充滿了所有的文檔，但在布局的底部它看起來很不協調的。我會很快的解決這個問題。使用畫筆工具（用平滑刷），我將布局的底部繪圖。非常重要的是，你選擇什么顏色繪圖。我會建議您使用滴管工具來獲取精確的顏色或與我類似的顏色。

建議：用矩形工具新建一個矩形（0，852，1000，248），顏色： #111119比較簡單

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

用圓角矩形工具在布局的中部創建一個圓角矩形（42，117，920，320）

I will add the following layer styles

按照下圖添加圖層樣式

顏色疊加的顏色： #f3c090

描邊的顏色： #434343

This is my result so far

下面是我的結果

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.

接下來是準備一些內容在這兒。我只用了一個飯店的圖片，但是你可以創建一個漂亮的圖片滑動欄，或許有一個預約的表單

注：擺放圖片后，在圖片的圖層上右鍵選擇添加剪貼蒙版。此時必須把前面圓角矩形圖層的圖層樣式中的圖案疊加的樣式去掉。另之前的顏色疊加選擇的顏色使得圖片看起來更亮麗，這是因為顏色疊加的顏色選擇是偏黃色，和圖片的主色調一致。如果圖片的主色調是其它的顏色，那么，顏色疊加的顏色也要做相應的修改

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

在頂部還要創建另一個圓角矩形（42，117，920，45）。該矩形將要變成一個普通的菜單

For this layer I will add the following layer styles

按照下圖給該圖層添加圖層樣式

漸變疊加的顏色： #9c9ea5

描邊的顏色： #424242

This is my result so far

這是我的結果

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

再次用圓角矩形工具創建3個圓角矩形

分別是：（48，546，908，437），顏色： #f4c79f；（48，546，908，286），顏色： #fbe1c7；（48，993，908，87），顏色： #fbe1c7

For all these shapes I will use the following layer styles

給這些圖層按照下圖添加樣式

描邊的顏色： #424242

This is my result so far

這是我的結果

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 )

現在用鋼筆工具創建和你看見相似的形狀。為了更加簡便的創建該形狀，你可以打開網格（視圖 > 顯示 > 網格）

建議：可以使用矩形工具創建一個矩形（350，-52，307，190），然后用添加錨點工具在矩形底邊的中部增加一個錨點，并用直接選擇工具拖動錨點到合適的位置