PS網頁設計教程III－在Photoshop中設計優雅的網站版面設計

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

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

約定：

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

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

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

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

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

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

 

Let's start the tutorial.
Open Photoshop and create a new document 1020 by 1100px

讓我們開始教學

Photoshop，一個新尺寸

 

Next select Rectangle Tool and create a large rectangle over your document. I have used this color: #e5e4e4

接下來用矩形工具創建一個覆蓋整個文檔的矩形，顏色： #e5e4e4

這一步桶工具比較好

 

Step 1

I will select ellipse tool and I will create this white shape

步驟1

p 2

I will go to Filter>Blur>Gaussian Blur and I will apply a radius of about 35px

步驟2

用濾鏡> 模糊> 高斯模糊，半徑設定為35px

Premium Files, available to our Premium Members I will use Hand Drawn Vector Ornaments and I will add an element on my document.

I will lower the opacity to 4% also

3em, 33emium,Premium, 到達我們的步驟，我將用Hand Drawn Vector Ornaments 裡的圖案放在我的文檔裡

把它的不透明度調到4%

 

Step 4

shapes at the top:

步驟4

接下來，用長方形工具在頂部建立3個矩形。

3個矩形高度為6px

，顏色分別為： #cdaeac、#ad8b8a、#a18280

 

Step 5

With Type Tool I will write

Step 5

With Type Tooluse I will write

Step 5

With Type Tooluse I will write “Elegant Webs rite and li利用。 trendyTUTS。字體用Ariston，48字。

對Elegant添加下面的圖層樣式：

顏色疊加：顏色： #c7c1c1

 

For “Website” this layer styles:

For “Website” this layer styles:

顏色疊加：顏色： #d38475

 

My result:

結果如下：

 

fake fpahh. Universal Vector Icons 2, I'll select a badge icon and I will add it on my document.

步驟6

在這一步，我又要訪問Premium Files 。這次用Universal Vector Icons 2，選擇badge icon加入我的文件。

 

I will apply the following layer styles to my badge:

對剛才的圖示加上下面的圖層樣式：

 

Here is my result:

結果如下：

 

Step 7

With Type Tool I will add some text on the right side. I will write “Call us – 1-800-elegant”

步驟7

用文字工具在右邊加上call us – 1-800-elegant。

其中call us和之前的elegant圖層樣式一樣，1-800-elegant和之前的website圖層樣式一樣

。

 

Step 8

I will use Rectangle Tool and I will create this black shape.

步驟8

用長方形工具加入如下的黑色矩形。 （0，223，1020，65） 顏色： #636363

 

Step 9

Having Rectangle Tool selected I will create another shape on the top of the shape created Step 6. I have used a red color just for demonstration proposes. When you create this shape you will need to use this color: # e5e4e4

步驟9

用矩形工具創建另一個矩形在剛才矩形的頂部。我為了示範建議用紅顏色。當您創建此矩形，您將需要使用顏色： #e5e4e4

跟著教程走，也先用紅顏色，再改成#e5e4e4，矩形（70，223，882，40）

 

Step10

Make sure that the layer of the shape created on step 8 is selected on your layer palette,select Direct Selection Tool and drag a little bit from the bottom left corner left Tool and drag a little bit from the bottom left corner left. the same way for the right side. Here is my result:

請確保剛才新建的矩形圖層被選中的狀態，用直接選擇工具拖曳矩形的左下角，看螢幕快照：

拖曳的時候按住shift，可以保持水平不動，結合資訊面板上的提示，可以完美的拖曳成45度角

用同樣的方式，拖曳矩形的右下角，再將顏色改回#e5e4e4，結果如下：

 

 

Step 11

With Rectangle Tool I will create this shape. Color used: # d67474171785，矩形870， 76）

，顏色： #d67474

 Step 12

With Ellipse Tool I will create this shape:

With Ellipse Tool I will create this shape:

With Ellipse Tool I will create this shape:

1212

 

And I will apply a Gaussian Blur of about 34px. My result

然後對橢圓添加高斯模糊，半徑設置為34px（

個人覺得半徑8px比較合適，不知為什麼，他的參數就基本上什麼都看不到了

） ，結果如下

 

Step 13I will surround the navigation with this sign “——————————”. To create a nice effect I will apply layer 13

我將符號「----------」圍繞著導航列一圈，為了漂亮，添加如下的圖層樣式：

用文字工具，調整字符間距，以達到虛線框的效果

My result

結果如下

 

Step 14

With Type Tool I will add the text for navigation
I have used Ariston font with 24px in navigation

I have used Ariston font with 24px in sizesize -5大小24px

 

為了和樣張一樣，也對文字增加了投影的設定：

 

535

 

1555🜎 this arrow wich it will act as an selector for navigation.

步驟15

用鋼筆工具建立導覽列上選單被選取時的三角箭頭。

用多邊形工具，將邊數改成3，創建三角形可能更方便一點

 

Step 16

With rectangle Tool I

Step 16

With rectangle Tool I

Step 16

With rectangle Tool I

Step will

With rectangle Tool I Step will

With rectangle Tool I Step will

With rectangle Tool I

Step will

With rectangle page I

layer of the shape created is selected on your layer palette, select Direct Selection Tool and drag a little bit from the top left corner of the shape. Please see the screenshot:

步驟1616

頁16

（36，552，950，50），確保矩形的圖層處於被選取的狀態，用直接選取工具，拖曳矩形的左上角，請參考下圖：

 

will proceI in the same way for the right corner, then I will apply this layer styles:

用同樣的方法調整矩形的右邊，然後添加如下的圖層樣式：漸變編輯器的三個顏色從左到右分別為： #f4f4f4，#fefefe，#ffffff

 

 

will er styles:

步驟17🎜🎜用矩形工具建立另一個矩形🎜（36，602，950，438）🎜，然後加入如下的圖層樣式：漸層編輯器的顏色從左只有分別為： #f6f6f6，#ffffff，#ffffff🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜 🎜🎜

 

Step 18

With Pen Tool I will create this triangles at the bottom of the shape created on 第 15

will apply a Gaussian Blur of about 40px.

對兩個三角形添加高斯模糊，參數：40px

My result

結果如下：

. . From Universal Vector Icons 2, I will add a Light Bulb and from Hand Drawn Vector Ornaments, I will use some ornaments.

步驟19

接下來要從Premium Files上的Universal Vector Icons 2，從中加入燈泡圖案，並且從Hand Drawn Vector Ornaments上添加一些花紋。

 

Step 20

With Type Tool I will add some text

步驟20

用文字工具添加一些文字

 have used 2 type of fonts: Arial and Ariston. I have used also 6 lines (3 on the left and 3 on the right side of the title). For this lines I have applied this layer styles:

文字對文字We Bring Ideas to Life，用兩種字體：Arial 和Ariston。

字號：44px，對標題文字加入內投影，參數如圖，顏色： #bbb7b6

。

添加6條直線（3條在標題的左邊，3條在標題的右邊），對這些直線添加如下的圖層樣式：

內陰影：顏色：#79797999999999

顏色疊加：顏色： #fbfb

 

 

Step 22

 

Step 22

x

步驟22

用鋼筆工具建立2個三角形，並對它們進行高斯模糊，參數10px

 

Step 23

On the top of the triangles created willon Step 23

On the top of the triangles created willon Step 21, with Recgle ool Iool Ik 5ool I apply this layer styles.

步驟23

在剛才的陰影上方，用矩形工具創建矩形

（720，518，184，56）

，並添加如下的圖層樣式：

樣，似乎應該參考是圓角矩形工具，我給的半徑參數是10

顏色疊加：顏色： #e7e7e7

 

 

. will create another shape on the top of the shape created on Step 22, I will apply this layer styles and with Type Tool I will add some text

步驟24

保持矩形工具選擇狀態，在剛才的矩形的上方創建一個新的矩形，添加如下的圖層樣式，並添加如下的有些文字

參考樣張，還是用圓角矩形，直接複製剛才的圖層，然後自由變換，各自縮排14px。文字的顏色和樣式和先前步驟19的文字一致。

漸變疊加，顏色分別為：#f6f6f6，#ffffffff

p 25

Because this area it will be a jquery slideshow, we will need to create the arrows as well. I will select Line Tool with 10px weight I will draw 2 identical lines, than with Free Transform Tool (Ctrl + T) I will arrange them to create an arrow. I willsapp arrow. also:

步驟25

因為要用jquery顯示幻燈片，我們將創建左右的箭頭。我將選擇直線工具，設定10px的粗細， 畫2條相同的直線，然後用自由變換工具 (Ctrl + T)排列它們，以建立箭頭。我還將運用如下的圖層樣式：

這兩個箭頭還是頗費了一番功夫，目前採用的方法是，先用直線工具畫一條水平直線，長度40px，Ctrl+J複製圖層，將複製的圖層順時針旋轉90度。微調這兩條直線，使得左上角重合。再合併圖層，再逆時針旋轉45度。再Ctrl+T自由變換，高度調整為原來的94%左右。再添加如下的樣式。做好一個箭頭後，Ctrl+J複製圖層，水平翻轉，得到另一個箭頭。再調整箭頭到適當的位置。

顏色疊加：顏色： #c7c1c1

 

Step 26 will IType

I

Step. ave applied this layer styles:

步驟26

現在要建立內容區域。用文字工具加入文字Latest Project。並加入以下的圖層樣式：

顏色疊加：顏色： #ececec

🜎

angles and I will apply a Gaussian Blur of about 10px.

Over this triangles I will add an image. I will repeat the same process and I will create a total of 6 similar thumbnails.

筆用三角形，對其添加高斯模糊，參數10px

在三角形的上方，加入圖片。重複同樣的過程，總共要建立

8個相似的圖片縮圖

 

下面是我最終的效果：

下面是我最終的效果：

圖

之前沒有感覺。這3個例子做下來，動輒數十個圖層，在日後的編輯是很頭痛的事。所以一般會根據不同的區域新建一個圖層分組，在這個區域內的圖層都劃並到同一個群組。這樣，日後修改就方便多了。從網頁設計來講，一般劃分為這幾個組：Header、Navigation、Feature、Content、Footer、Slider等。圖層分組不是必須的，也不會美化你的網頁，但是能簡化你日後的維護編輯工作

 

2、虛線：

在PS中是沒有設定線型的選項的。因此，如果要畫虛線，就不是很方便了。本文提出的不失為一種很巧妙的方法，用文字工具添加文字“--------”，然後調整字元間距，可以很方便快速的模擬出直線的效果。

3、內嵌字的效果：

本文多處透過加入圖層樣式的方法，來達到文字內嵌的效果。

更多PS網頁設計教學III－在Photoshop中設計優雅的網站版面設計 相關文章請追蹤PHP中文網！