| PS設計教程:整潔的具有現代氣息的web站點
這個Photoshop web設計的教程中，我們將學習設計一個整潔的具有現代氣息的web站點。 這是設計和HTML/CSS模板轉換系列教程的第一部分。 第一部分:《用Photoshop設計一個小型、現代的產品主頁》 第二部分:《將小型、現代的產品主頁由psd轉換成XHTML/CSS模板》 預覽以下是我們將要一些設計的頁面預覽，點擊圖片可以放大。
【建立一個新的Photoshop文檔】 1 首先在Photoshop中新建一個文檔（Ctrl+N），大小爲1200 x 1200像素，背景設爲透明。
【設置頭部背景】 2 使用矩形選定工具在透明的背景上畫出一個矩形，矩形大小：1200px ×120px
3 使用油漆桶工具（G）用任意顏色填充頭部剛纔選定區域。點開圖層樣式對話框，用以下設置來增加一個漸變疊加效果。
完了，應該出現以下效果：
【創建內容部分的背景圖層4】 現在我們將要創建圖層內容區域的第二部分背景。把前景色設爲#00315C，背景色設爲#001B32。選擇矩形框選定工具（M）選定剩下的透明圖層；選定後，選擇漸變工具（G）,然後設置漸變類型爲徑向漸變。
5 設定好漸變工具（G）後，從頂部的中間垂直的拖動到畫布的4/1大小左右。
【添加參考線】 6 現在我們需要一些參考線保留出寬度爲850px的中間內容部分。選擇視圖 > 新建參考線。在新建參考線對話框中輸入175px，取向選擇垂直。這樣一個畫布左邊的參考線就做好了。
7 重複6的步驟，創建另外一條垂直參考線，不過這次輸入1025px(175px + 850px = 1025px)。這樣一個850px寬、居中的區域就做好了。
【設計頭部區域】 8 選擇橫排文字工具（T），然後對其左邊參考線邊沿添加上頁面標題和標語。
9 在標題文本圖層下面創建一個新圖層，選定矩形選框工具（M），在頭部選取出一個區域。寬度必須填滿1200px，高度大概在60px左右。
10 用白色（#FFFFFF）填充（G）選定區域，然後在圖層面板中設置透明度爲25%。效果如下。
【創建導航】 11 選擇橫排文字工具（T），字體大小設定爲11-12px左右。然後在標題和標示右邊加入導航文字；沒菜單項之間留出等寬的邊距。
12 在每個菜單項之間使用矩形選框工具（M）做一個1px寬的分割線；長度跨越整個頭部。用#CECECE顏色填充（G）這1px的線條。效果如下圖。
13 現在，我們在每個菜單項中加入鼠標懸停動態效果（hover）。我已經給其中一個菜單項加入顏色表示鼠標懸停時的效果。使用多邊形套索工具（L）按住shift，創建一個三角形，以保證每條線都是直的。
14 用#00315C這個顏色填充選定的三角形區域
【創建歡迎區域】 15 選擇橫排文字工具（T）,加入一些歡迎標語；同樣左邊距緊貼左參考線，然後在上面的頁面標題和下面的歡迎文本中留出一定的空間。文本下面加入4個藍色的列表圖標。這個圖標是 Function Icon Set 裏面的（文件名是circle_blue.png）。
16 在歡迎文本的右邊將插入一個歡迎圖片；我這裏使用的是Six Revisions網站界面裁圖。裁剪你的圖片，去掉不需要的部分。圖片準備好之後，通過編輯 > 變換 > 透視 改變圖片的視角。
17 選擇橢圓選框工具，然後在歡迎圖片下方畫一個橢圓。
18 用黑色（#000000）填充（G）橢圓選定區域。19 然後設置區域圖層透明度爲35%。20 然後使用濾鏡 > 模糊 > 高斯模糊這個橢圓，設定模糊半徑爲1到2px。
21 把歡迎圖片和下面的陰影再複製一份，然後把它們拖動到原圖片的下面。 22 位置拖動好之後，使用高斯模糊下面的裁圖，半徑爲1px。
【創建水平3D分割線】 23 選擇矩形選框工具（M）層疊的創建兩個1px的線條；寬度爲850px，從左參考線到右參考線。你可以將兩個線條放在同一個圖層。 24 分別使用顏色#000D19和#003461填充這兩個線條。
25 選擇橢圓選框工具（M）然後在分割線上面畫出一個橢圓。
26 使用黑色（#000000）填充（G）選定區域，加上2到3px的高斯模糊。然後使用矩形選框工具刪掉分割線上半部分，這樣就剩下了半個橢圓。
27 將這兩個圖層合併（Ctrl+E），然後添加一個圖層蒙版（點擊圖層面板上的“添加圖層蒙版”按鈕）來合併圖層。 28 使用漸變工具（G）,漸變類型爲對稱漸變，前景色設爲白色（#FFFFFF）,背景色設置黑色（#000000）。
29 拖動對稱漸變，從分割線中間向兩邊拖動，從而產生中間向兩邊淡入效果。
【設計內容區域】 30 選擇橫排文字工具（T）在3D分割線下方，右分割線的左邊加入任意的文字標題和段落。
31 使用圓角矩形工具（U）在內容文本區域的左邊創建一個圓角矩形；半徑設爲10px（默認情況下背景是10px）。
32 路徑畫好之後，選擇鋼筆工具（P），右擊矩形內部，選擇建立選區。 33 設置前景色爲#00315C，背景色爲#001B32，然後選擇漸變工具（G），漸變類型爲徑向漸變。 34 從頂部把漸變拖動到中間，和我們繪製背景方法相同。效果如下圖。
35 現在需要給圓角矩形圖層加入投影、內陰影和描邊的圖層樣式（雙擊圖層面板上面的圖層，打開圖層樣式對話框）。設置如下。
36 使用多邊形套索工具（L），然後在矩形上面做一個三角形的選區。
37 剪切並複製選區到一個新圖層，一般這樣做將會丟失掉選取的圖層樣式，所以在這之前我們必須給右下角圖層重複添加一次樣式。38 通過編輯 > 變換 > 旋轉給邊角圖層翻轉180度；
39 加入一些任意文字以完成內容框的繪製。
【創建頁腳區域】 40 選擇圓角矩形工具（U）在也叫拖動出一個圓角矩形。
41 使用任意顏色來填充這個圓角矩形選區，選區加入如下樣式的漸變疊加效果。
42 最後，加上頁腳信息就大功告成了。
完成謝謝閱讀本教程。下節課，我將教大家把該頁面轉成模板。 以下附件爲本貼PSD素材，供需要的 同學下載:  PSD.zip
|
