作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁PS教程，提高自身的設計能力。套用一句話，“熟讀唐詩三百首，不會作詩也會吟”。
本系列的教程來源於網上的PS教程，都是國外的，全英文的。本人嘗試翻譯這些優秀的教程。因為翻譯能力有限，翻譯的細節上還有待推敲，希望廣大網友不吝賜教。
約定：
1、本文的軟件是Photoshop CS5版本
2、原教程的截圖是英文的，本人在重新制作的基礎上，重新截了中文版的圖
3、原文中有些操作沒有給出參數。本人在反復測試的情況下測定了一些參數，以紅色的文字顯示。有些錯誤的參數，直接以紅色文字顯示正確的參數
例如：（90，22，231，77），表示矩形的左上角的坐標是（90，22），寬231，高77
例如：（90，22），表示矩形的左上角的坐標是（90，22），矩形的其他兩個參數教程里已經指定
4、在教程的最后會附上本人的心得。有些是對教程中的一些步驟的優化等。
In this tutorial I will show you how to create a beauty layout based on some strange shapes. This PSD layout is aimed for building websites related to healthcare, medicine and health issues. It can be used for massage spa salons, spa resorts, body spa and facial spa accessories, spa equipment too.
在本教程中我將向你展示如何創建基於一些奇怪形狀的優美布局。此 psd 格式版面的目的是為建立醫療保健、醫學與健康問題有關的網站。它可用於按摩水療美容院、溫泉度假勝地、身體水療，還有水療配件、水療設備等。
I will start this tutorial with a new document with the following background: #ecece2
起初，新建一個文檔，尺寸：960px*900px，背景色：#ecece2
I will grab my Pen Tool and I will create 2 shapes like in the following image
我會選取我的鋼筆工具，並按照下圖中創建2個形狀
此步驟極為簡略，對於熟練使用鋼筆工具設計人員來說，下圖中的兩個形狀根本不算什么，但是對於不擅長使用鋼筆工具的人來說，要頗費一番周折。因此，在這兒把具體的步驟貼在下方，由於本人不擅長使用鋼筆工具，故下面的步驟中也沒有使用鋼筆工具。僅僅是在這兒做一個參考而已
新建一個矩形（108，142，741，193）
按Ctrl+T自由變換，然后右鍵選擇變形
拖動四角的控制點到合適的位置（本例中右下角的控制點沒有變動），並拖動曲率控制點到合適的位置，調整每條邊的曲線，如下圖所示：
再用矩形工具創建一個矩形
按Ctrl+T自由變換，然后右鍵選擇變形
拖動四角的控制點到合適的位置，並拖動曲率控制點到合適的位置，調整每條邊的曲線，如下圖所示：
改變兩個形狀的顏色，大塊的顏色改為： #c4c4bc，小塊的顏色改為： #fbc84d
對兩個形狀添加如下的圖層樣式：
漸變編輯器的顏色： #000000，#989898
I will duplicate the big shape, and I will resize it
復制大的形狀，然后調整它的大小（43%）
I will flip the shape horizontally (Edit > Transform > Flip Horizontally)
我將水平翻轉這個形狀（點擊：編輯 > 變換路徑 > 水平翻轉）
I will place a stock image with a lipstick right under these shapes
在這些形狀的下方合適的位置擺放一張口紅的圖片
Create a new layer (press on CTRL+SHIFT+ALT+N) in the same time. With Brush tool I will draw a strange drawing. Be sure you use a proper brush when you try to create this drawing.
同時新建一個圖層（按CTRL+SHIFT+ALT+N）。用畫筆工具畫一些圖案，當繪畫時確保選用適當的畫筆。
Now it is time to add some floral designs. If you remember a few days ago I have released a pack of vector swirls… You can download them from here: Vector swirls
Open the EPS file inside Photoshop, and then make a selection around the floral swirls you want to use. You can use Rectangular Marquee Tool.
現在添加一些花紋。如果你記得一些天之前，我提供了一個卷曲植物的矢量包，你可以從這兒下載
在PS中打開EPS文件，然后在你想要的卷曲花草的四周做一個選區。你可以用矩形選擇工具
Be sure you have the layer selected, and then press on CTRL+J (this shortcut will create a new layer via cut). You will notice another layer on top of the original one. Please select it, and then drag it to the PSD layout. With the same technique you can add as many flowers you want over our beauty layout.
Please click on the image to see the full size beauty layout.
確保選中圖層（在打開的矢量文件中），按CTRL+J（把選中的部分創建新圖層的快捷方式）。你注意到另一個圖層在之前的圖層的上方。請選擇它，然后拖動它到我們的PSD的圖層。用同樣的技術，你可以增加一些你想要的花在我們美麗的圖層
請點擊圖片看美麗圖層的完整尺寸
Now it is time to add some text with Horizontal Type Tool
用水平文字工具添加一些文本
在這一步沒有詳細說明，故在此補充說明
用文字工具添加菜單，字體：Verdana，字號：16px，粗斜體，寬度比設置為90%。如下圖添加菜單：About、Beauty、Style、Communlty、Service Center。並按照下圖添加投影的圖層樣式
添加文字的背光。在About文字的后方，用橢圓工具畫一個白色橢圓，添加高斯模糊（點擊：濾鏡 > 模糊 > 高斯模糊），並設置不透明度為：70%。依照此法給每個文字添加背光
用文字工具添加標題文字：GrafpediaStyle、NewProduct。字體：Times New Roman，字號：40px。顏色：#4e513c和#ae6400。並添加如下的樣式：
用文字工具添加歡迎文字：Welcome to our web site。字體：SansSerif，字號：30px，字符寬度：90%，顏色： #364d3d
用文字工具添加段落文字
用文字工具添加版權信息
Between text areas I will place some lines. You can use Line tool
在文本段落之間擺放一些直線。你可以用直線工具
每組直線包含3條直線，1長2短
On the bottom of the layout I will create some round buttons. I will create 4 shapes with Ellipse Tool.
You can see that I have used the same layer styles like I have used for the big shape.
在布局的底部創建一些圓按鈕。用橢圓工具添加4個橢圓。
如你所見，我給它們添加和上面大的形狀一樣的圖層樣式。
實際上除了和上面大的形狀一樣的圖層樣式以外，還額外增加了外發光的樣式，如下所示：
Over these circles I will add some icons
在這些圓上添加一些圖標
On the right side (in the sidebar of the layout) I will create another shape with pen tool
在右邊（布局的側邊欄）我用鋼筆工具創建另一個形狀
和之前的做法一樣，先用矩形工具畫一個矩形
按Ctrl+T自由變形，右鍵選擇變形
調整四角的點到合適的位置，並拖動曲率控制點到合適的位置，調整每條邊的曲線，如下圖所示：
顏色改為： #c4c4bc，並添加和之前圓按鈕一樣的圖層樣式
Here you can showcase some of your best beauty products. It will be a slide show. If you know something about jQuery I am sure you will not have problems to implement a simple slide show.
這兒可以展示你一些最好看的貨品。這會是圖片切換。如果你知道一些jQuery的技術，我確信你不會有技術上的難題去實現圖片切換
用自定義形狀工具添加兩個箭頭，並添加和圓按鈕一樣的圖層樣式，只是描邊的半徑改為1
I will add another stock image with some make-up images. This is my final result
我要添加另一些選中的圖片。這是我最終的結果
后記
本片教程是利用特殊的形狀（原教程中用的是鋼筆工具，本翻譯教程是利用矩形自由變換來達到同樣的效果）達到美觀頁面的效果