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，新建一個文檔，尺寸：1020*1100px

 

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

選擇橢圓工具創建如下的白色橢圓

 

Step 2

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

步驟2

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

 

Step 3

From 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

步驟3

在Premium Files, 到達我們的 Premium Members ，我將用 Hand Drawn Vector Ornaments 里的圖案放在我的文檔里
把它的不透明度調到4%

 

Step 4

Next I will select Rectangle Tool and I will create this 3 shapes at the top:

步驟4

接下來，用矩形工具在頂部創建3個矩形。3個矩形高度為6px，顏色分別為： #cdaeac、#ad8b8a、#a18280

 

Step 5

With Type Tool I will write “Elegant Website” and as a tagline I will use “a design by trendyTUTS”. The font used is Ariston, with 48pt in size.
For “Elegant” I have applied this layer styles:

步驟5

用文字工具添加文字elegant website，對下面的標志行添加文字a design by trendyTUTS。字體用Ariston，48號字。

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

顏色疊加：顏色： #c7c1c1

 

For “Website” this layer styles:

對website添加如下的圖層樣式：

顏色疊加：顏色： #d38475

 

My result:

結果如下：

 

Step 6

On this step I’ll make use of our Premium Files again. This time from 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:

對剛才的圖標添加下面的圖層樣式：

顏色疊加：顏色： #d2d2d2

 

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 of the shape. Please see the screenshot:

Proceed in 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: # d67474

步驟11

用矩形工具創建一個矩形（76，187，870，76），顏色： #d67474

 

Step 12

With Ellipse Tool I will create this shape:

步驟12

用橢圓工具創建如下的橢圓：

 

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

然后對橢圓添加高斯模糊，半徑設置為34px（個人覺得半徑8px比較合適，不知為什么，他的參數就基本上什么都看不到了），結果如下

 

Step 13

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

步驟13

我將符號“----------”圍繞着導航欄一圈，為了漂亮，添加如下的圖層樣式：

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

My result

結果如下

 

Step 14

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

步驟14

用文字工具在導航欄上添加一些文本，字體Ariston，大小24px

 

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

 

 

Step 15

With Pen Tool I will create this arrow wich it will act as an selector for navigation.

步驟15

用鋼筆工具創建導航欄上菜單被選中時的三角箭頭。

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

 

Step 16

With rectangle Tool I will create this shape on the middle of the page. Make sure that the 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:

步驟16

用矩形工具在頁面的中部創建矩形（36，552，950，50），確保矩形的圖層處於被選中的狀態，用直接選擇工具，拖動矩形的左上角，請參考下圖：

 

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

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

 

 

Step 17

With Rectangle Tool I will create another shape and I will apply this layer 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 Step 15

用鋼筆工具在剛才的白色的矩形底部創建兩個三角形

I will apply a Gaussian Blur of about 40px.

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

結果如下：

 

Step 19

Next I’ll make use of Premium Files. 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

用文字工具添加一些文字

 

Step 21

To enhance the title “We Bring Ideas to Life” I 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:

步驟21

對標題文字We Bring Ideas to Life，用兩種字體：Arial 和 Ariston。字號：44px，對標題文字添加內投影，參數如圖，顏色： #bbb7b6。

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

內陰影：顏色：#797979

顏色疊加：顏色： #fbfbfb

 

 

Step 22

With Pen Tool I will create this 2 triangles and I will apply a Gaussian Blur of about 10px

步驟22

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

 

Step 23

On the top of the triangles created on Step 21, with Rectangle Tool I will create this shape and I will apply this layer styles.

步驟23

在剛才的陰影上方，用矩形工具創建矩形（720，518，184，56），並添加如下的圖層樣式：

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

顏色疊加：顏色： #e7e7e7

 

 

Step 24

Having Rectangle Tool still selected, I 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，#ffffff

 

 

Step 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 will apply this layer styles also:

步驟25

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

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

顏色疊加：顏色： #c7c1c1

 

Step 26

Now I will create the content area. I will select Type Tool and I will write “Latest Project”. I have applied this layer styles:

步驟26

現在要創建內容區域。用文字工具添加文本Latest Project。並添加如下的圖層樣式：

顏色疊加：顏色： #ececec

 

Step 27

With Pen Tool I will create this 2 triangles 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.

步驟27

用鋼筆工具畫2個三角形，並對其添加高斯模糊，參數10px

在三角形的上方，添加圖片。重復同樣的過程，一共要創建8個相似的圖片縮略圖

 

下面是我最終的效果：

 

心得：

1、合理建立圖層分組：

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

 

2、虛線：

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

3、內嵌字的效果：

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