這個(gè)photoshop web設(shè)計(jì)的教程中，我們將學(xué)習(xí)設(shè)計(jì)一個(gè)整潔的具有現(xiàn)代氣息的web站點(diǎn)。這是設(shè)計(jì)和html/css模板轉(zhuǎn)換系列教程的第一部分。
以下是我們將要一些設(shè)計(jì)的頁(yè)面預(yù)覽，點(diǎn)擊圖片可以放大。
1 首先在photoshop中新建一個(gè)文檔（ctrl+n），大小為1200 x 1200像素，背景設(shè)為透明。
2 使用矩形選定工具在透明的背景上畫出一個(gè)矩形，矩形大?。?200px ×120px
3 使用油漆桶工具（g）用任意顏色填充頭部剛才選定區(qū)域。點(diǎn)開(kāi)圖層樣式對(duì)話框，用以下設(shè)置來(lái)增加一個(gè)漸變疊加效果。
|||
完了，應(yīng)該出現(xiàn)以下效果：
4 現(xiàn)在我們將要?jiǎng)?chuàng)建圖層內(nèi)容區(qū)域的第二部分背景。把前景色設(shè)為#00315c，背景色設(shè)為#001b32。選擇矩形框選定工具（m）選定剩下的透明圖層；選定后，選擇漸變工具（g）,然后設(shè)置漸變類型為徑向漸變。
5 設(shè)定好漸變工具（g）后，從頂部的中間垂直的拖動(dòng)到畫布的4/1大小左右。
6 現(xiàn)在我們需要一些參考線保留出寬度為850px的中間內(nèi)容部分。選擇視圖 > 新建參考線。在新建參考線對(duì)話框中輸入175px，取向選擇垂直。這樣一個(gè)畫布左邊的參考線就做好了。
7 重復(fù)6的步驟，創(chuàng)建另外一條垂直參考線，不過(guò)這次輸入1025px (175px + 850px = 1025px)。這樣一個(gè)850px寬、居中的區(qū)域就做好了。
|||
8 選擇橫排文字工具（t），然后對(duì)其左邊參考線邊沿添加上頁(yè)面標(biāo)題和標(biāo)語(yǔ)。
9 在標(biāo)題文本圖層下面創(chuàng)建一個(gè)新圖層，選定矩形選框工具（m），在頭部選取出一個(gè)區(qū)域。寬度必須填滿1200px，高度大概在60px左右。
10 用白色（#ffffff）填充（g）選定區(qū)域，然后在圖層面板中設(shè)置透明度為25%。效果如下。
11 選擇橫排文字工具（t），字體大小設(shè)定為11-12px左右。然后在標(biāo)題和標(biāo)示右邊加入導(dǎo)航文字；沒(méi)菜單項(xiàng)之間留出等寬的邊距。
12 在每個(gè)菜單項(xiàng)之間使用矩形選框工具（m）做一個(gè)1px寬的分割線；長(zhǎng)度跨越整個(gè)頭部。用#cecece顏色填充（g）這1px的線條。效果如下圖。
|||
13 現(xiàn)在，我們?cè)诿總€(gè)菜單項(xiàng)中加入鼠標(biāo)懸停動(dòng)態(tài)效果（hover）。我已經(jīng)給其中一個(gè)菜單項(xiàng)加入顏色表示鼠標(biāo)懸停時(shí)的效果。使用多邊形套索工具（l）按住shift，創(chuàng)建一個(gè)三角形，以保證每條線都是直的。
14 用#00315c這個(gè)顏色填充選定的三角形區(qū)域
15 選擇橫排文字工具（t）,加入一些歡迎標(biāo)語(yǔ)；同樣左邊距緊貼左參考線，然后在上面的頁(yè)面標(biāo)題和下面的歡迎文本中留出一定的空間。文本下面加入4個(gè)藍(lán)色的列表圖標(biāo)。這個(gè)圖標(biāo)是 function icon set 里面的（文件名是circle_blue.png）。
16 在歡迎文本的右邊將插入一個(gè)歡迎圖片；我這里使用的是six revisions網(wǎng)站界面裁圖。裁剪你的圖片，去掉不需要的部分。圖片準(zhǔn)備好之后，通過(guò)編輯 > 變換 > 透視 改變圖片的視角。
17 選擇橢圓選框工具，然后在歡迎圖片下方畫一個(gè)橢圓。
|||
18 用黑色（#000000）填充（g）橢圓選定區(qū)域。
19 然后設(shè)置區(qū)域圖層透明度為35%。
20 然后使用濾鏡 > 模糊 > 高斯模糊這個(gè)橢圓，設(shè)定模糊半徑為1到2px。
21 把歡迎圖片和下面的陰影再?gòu)?fù)制一份，然后把它們拖動(dòng)到原圖片的下面。
22 位置拖動(dòng)好之后，使用高斯模糊下面的裁圖，半徑為1px。
23 選擇矩形選框工具（m）層疊的創(chuàng)建兩個(gè)1px的線條；寬度為850px，從左參考線到右參考線。你可以將兩個(gè)線條放在同一個(gè)圖層。
24 分別使用顏色#000d19和#003461填充這兩個(gè)線條。
25 選擇橢圓選框工具（m）然后在分割線上面畫出一個(gè)橢圓。
26 使用黑色（#000000）填充（g）選定區(qū)域，加上2到3px的高斯模糊。然后使用矩形選框工具刪掉分割線上半部分，這樣就剩下了半個(gè)橢圓。
27 將這兩個(gè)圖層合并（ctrl+e），然后添加一個(gè)圖層蒙版（點(diǎn)擊圖層面板上的“添加圖層蒙版”按鈕）來(lái)合并圖層。
28 使用漸變工具（g）,漸變類型為對(duì)稱漸變，前景色設(shè)為白色（#ffffff）,背景色設(shè)置黑色（#000000）。
|||
29 拖動(dòng)對(duì)稱漸變，從分割線中間向兩邊拖動(dòng)，從而產(chǎn)生中間向兩邊淡入效果。
30 選擇橫排文字工具（t）在3d分割線下方，右分割線的左邊加入任意的文字標(biāo)題和段落。
31 使用圓角矩形工具（u）在內(nèi)容文本區(qū)域的左邊創(chuàng)建一個(gè)圓角矩形；半徑設(shè)為10px（默認(rèn)情況下背景是10px）。
32 路徑畫好之后，選擇鋼筆工具（p），右擊矩形內(nèi)部，選擇建立選區(qū)。
33 設(shè)置前景色為#00315c，背景色為#001b32 ，然后選擇漸變工具（g），漸變類型為徑向漸變。
34 從頂部把漸變拖動(dòng)到中間，和我們繪制背景方法相同。效果如下圖。
35 現(xiàn)在需要給圓角矩形圖層加入投影、內(nèi)陰影和描邊的圖層樣式（雙擊圖層面板上面的圖層，打開(kāi)圖層樣式對(duì)話框）。設(shè)置如下。
|||
36 使用多邊形套索工具（l），然后在矩形上面做一個(gè)三角形的選區(qū)。
37 剪切并復(fù)制選區(qū)到一個(gè)新圖層，一般這樣做將會(huì)丟失掉選取的圖層樣式，所以在這之前我們必須給右下角圖層重復(fù)添加一次樣式。
38 通過(guò)編輯 > 變換 > 旋轉(zhuǎn)給邊角圖層翻轉(zhuǎn)180度；
|||
39 加入一些任意文字以完成內(nèi)容框的繪制。
40 選擇圓角矩形工具（u）在也叫拖動(dòng)出一個(gè)圓角矩形。
41 使用任意顏色來(lái)填充這個(gè)圓角矩形選區(qū)，選區(qū)加入如下樣式的漸變疊加效果。
42 最后，加上頁(yè)腳信息就大功告成了。
謝謝閱讀本教程。下個(gè)教程中，我將教大家把該頁(yè)面轉(zhuǎn)成模板。
（這個(gè)譯者的psd文件：minimal-modern-web-layout_my.zip）
譯文出處：http://www.yeeyan.com/articles/view/tunpishuang/69059?yeeyan=1
新聞熱點(diǎn)
疑難解答
圖片精選
