以下是創建過程中所需的圖片：

• 綠葉
• 像素化的藍色矩形

第一步：新建文檔　

1200px * 750px，選擇漸變工具（G），對背景圖層從上（#792700）到下（#000000）新建漸變，如下圖所示：

第二步：添加色彩

　　新建圖層，選擇筆刷工具（B），選取直徑為300px的軟筆刷，分別以紅（#be4816）、黃（#c0952c）、藍（#33afc6）三種顏色涂在背景層的上半部，圖層命名為“顏色”。如下圖所示：

　

第三步：添加紋理

　　打開一開始保存好的“綠葉”圖片，使用移動工具（V），移動到當前文檔內，右擊新圖層，選擇“轉換為智能對象”，然后轉到菜單：濾鏡>藝術化>膠片顆粒，濾鏡>像素化>馬賽克，參照下圖的設置，最后設置此圖層的“混合模式”為“差值”，透明度為30%，圖層命名為：“紋理”。如下圖所示：

第四步：為內容添加黑色背景

新建圖層，選擇圓角矩形工具（U），設置3px的半徑，創建一個黑色圓角矩形框，雙擊圖層，彈出“圖層樣式”對話框，如下圖一樣設置“陰影”，最后設置此圖層的透明度為70%，圖層命名為：“黑色形態”，如下圖所示：

　

第五步：添加組管理圖層

　　按住ctrl鍵，選擇目前為止創建的所有圖層，進行圖層編組（ctrl+g），組命名為：背景，如下圖所示。

第六步：創建更多組

　新建組（圖層>新建>圖層編組），組命名為：主頁，在“主頁”內再增加一個組，組命名為“logo”，如圖所示：

第七步：創建logo和網站副標題

　　在“logo”的組里新建圖層，選取字體工具（T），書寫您的網站名字，顏色為#f4f4f4。雙擊圖層，按照下圖設置圖層樣式，“斜面與浮雕”，“外發光”，“漸變疊加”。然后再新建圖層編輯網站副標題，顏色為#eeeeee。　

第八步：創建”注冊“，”登錄“按鈕

　　現在將在布局的右上角創建兩個按鈕。
新建組，命名為“注冊｜登錄”；選取圓角矩形工具（U），像我一樣創建圓角矩形；雙擊形狀圖層，彈出圖層樣式對話框，如下圖進行設置。
設置前景顏色為白色，用字體工具（T）在按鈕上編寫“注冊｜登錄”，設置字體層的透明度為75%。

第九步：創建1px高的藍色水平線

　　新建組，命名為“導航”，新建圖層，選取單行選框工具并在文檔新建1px高的選區，以顏色#406f94進行填充，使用矩形選框工具（M）刪除超出黑色矩形的選區，設置透明度為40%，層命名為“橫線”。

第十步：給導航添加漸變

　　新建圖層，選取矩形選框工具（M）創建選區（提示：你可以使用標尺），然后使用漸變工具（G）從底部到頭部畫一個從#35423e到透明的漸變。按Ctrl+D撤消選區，轉到濾鏡>雜色>添加雜色，并按照下圖進行設置。給此圖層命名為“漸變”，且在漸變與橫線之間留出1px的距離。

第十一步：編輯導航菜單

　　選取字體工具（T），并在導航欄上編輯菜單，這里我應用的字體是Adobe仿宋體，然后雙擊字體圖層，按下圖一樣設置圖層樣式。

第十二步：創建分隔線

現在我們將在菜單欄中創建分隔線，新建圖層，選取單列選框工具，并在菜單的布局上點擊一下，選取矩形選框工具（M），并在選項欄上選擇“交叉選區。對新的選區以白色填充，最后按ctrl+d，取消選框。最終結果如下圖：

第十三步：雙擊上步新建的圖層，命名為“豎線1”，并進行如下圖層樣式的設置。

第十四步：按ctrl+j復制圖層“豎線1”，重命名為“豎線2”。選取移動工具（V），點擊鍵盤上的方向鍵，向右移動1px，并更改“漸變疊加”的設置。如下所示：您的圖將會是這樣：

按住ctrl，選擇“豎線1”和“豎線2”，轉換為“智能對象”，新圖層命名為“分隔線”。
第十五步：創建藍色高光1、新建圖層，放置在“分隔線”下，選取矩形選框工具（M）創建像下圖一樣的選區2、以顏色#35423e填充該選區，按ctrl+d撤消選框，右擊，在下拉菜單中選擇“轉換為智能對象”3、去往菜單　濾鏡>模糊>高斯模糊，并設置半徑為4px4、再次 濾鏡>雜色>添加雜色，數量為0.7%，屬性為第一個選項，像第十步那樣設置5、設置圖層透明度為60%，命名為“高光”圖片最終為：第十六步：為圖層“分隔線”創建圖層蒙版選定圖層“分隔線”，轉到菜單　圖層>圖層蒙版>顯示所有，選擇漸變工具（G），新建一個從黑到透明的漸變，方向是從上到中間。第十七步：復制圖層“分隔線”，“高光”同時選中“分隔線”，“高光”這兩個圖層，使用移動工具（V），按住alt+shift，拖動兩個圖層中的對象至另一個菜單與菜單之間，這就相當于復制“分隔線”，“高光”的操作，重復拖動動作，根據您的菜單多少來復制
第十八步：為圖層“分隔線”，“高光”編組選擇所有的圖層“分隔線”，“高光”，按ctrl+g，進行編組，組命名為“分隔線”。第十九步：為當前頁面創建激活按鈕現在我們將為當前菜單頁面創建一個激活按鈕，來區分其它的菜單按鈕。選取矩形工具（U）并像下圖一樣新建矩形，并把這圖層放置在“菜單”圖層的下方，雙擊圖層，進行“漸變疊加”的設置，圖層命名為“激活按鈕”，設置透明度為50%。效果圖：第二十步：創建搜索框新建組，命名為“搜索”，放置在“導航”組上面。選取圓角矩形工具（U），設置半徑3px，前景色為#104f59，創建圓角矩形，命名新的圖層為“文本區域”，透明度為80%。選取矩形工具，在“文本區域”右邊創建一矩形，并如下圖進行設置圖層樣式“漸變疊加”，然后右擊圖層，在下拉菜單中選擇“創建快速蒙版”，層命名為“按鈕”。選取字體工具（T），使用白色，在“按鈕”上書寫“搜索”兩字，圖層透明度為75%。選取線條工具（U），使用顏色#123036創建直線，圖層命名為“直線”，并放置在“按鈕”圖層下方，把此直線移動在搜索框和按鈕之間。最終效果圖：第二十一步：新建藍色矩形

1. 在組“導航”下新建組（圖層>新建>組），組命名為“案例”，再新建組放置在“案例”中，并命名為“背景”
2. 選取矩形工具（U），顏色設置為#219aad，創建寬度為983px，高度為273px的藍色矩形，（提示：打開(按F8)信息面板，查看寬度和高度），設置此圖層的透明度為55%，命名為“bg4”

3.　在photoshop中打開在上篇中一開始要保存的第二張圖片“像素化的藍色矩形”，把圖片移動到此文檔中，并且覆蓋藍色矩形，同樣也設置透明度為55%，命名為“bg3”.4.　按住ctrl鍵，點擊“bg4”中的矢量蒙版縮略圖以選中此蒙版5.　新建圖層，放在“bg3”上方，命名為“bg2”，選取漸變工具（G），畫一個顏色#56b8e5到透明的漸變，方向是從選區底部到選區頭部，然后按ctrl+d撤消選區6、新建圖層，放在圖層“bg2”上方，命名為“bg1”，選取矩形選框工具（M），像下圖一樣創建選區，寬度為983px，高度43px7、選取漸變工具（G），畫一個顏色#0f2b42到顏色#2a607f的漸變，方向是從選區底部到選區頭部，然后按ctrl+d撤消選區

第二十二步：“注冊”與“了解更多”

1. 新建組“注冊按鈕”，放在組“背景”上方，選取圓角矩形工具（U），設置半徑2px，像下圖一樣新建圓角矩形（82*38），并設置如下圖一樣的圖層樣式（注意：shap2圖層的透明度是100%）
   

2. 重復步驟1，創建“了解更多”的按鈕，并且增加一層，添加箭頭，選取自定義形狀工具（U）中的第二個箭頭形狀，像下圖一樣創建箭頭

第二十三步：

1. 新建組，命名為“左箭頭”，放在組“了解更多按鈕” 上方，選取橢圓工具（U），新建顏色為#406F94的圓，并設置“內陰影”和“描邊”的圖層樣式2.　新建圖層，選取自定義工具（U）中的箭頭形狀，創建白色箭頭，并設置圖層樣式“陰影”，透明度為50%wpssgm_b" alt="PS教程:繪制清新的色彩生動的網頁布局">3. 重復步驟2，在右邊也創建同樣的箭頭

第二十四步：

1.　在組“案例”中新建組，命名為“圖片”，在組里放置一張小圖片，雙擊圖層，設置如下圖的圖層樣式“外發光”

2.　新建組，選取字體工具（T），在藍色矩形左邊添加文字說明（這個得自己發揮了），組命名為“文字”。

第二十五步：創建內容區

1.　新建組，放在組“案例”下面，命名為“內容”，在此組里再新建一組“陰影”，選取矩形工具（U），創建一白色矩形（983*181），圖層命名為“白色形狀”，透明度為90%。

2.　像二十一步中的第4點一樣，選中“白色形狀”的圖層蒙版，然后新建圖層，命名為“頭部陰影”，選取漸變工具（G），畫一個顏色為#8f8f8f到透明的漸變，方向為選區的頭部到選區的底部，設置圖層透明度為50%，然后選取移動工具（V），按鍵盤上的向下的方向鍵兩次。3.　新建圖層，選取矩形選框工具（M）像下圖一樣新建選區（273*180）。選取漸變工具（G）畫一個顏色#8f8f8f到透明的漸變，然后取消選區，以下圖為參考。4.　添加圖層蒙版（圖層>圖層蒙版>顯示全部），使用大一點的黑色軟筆刷（我用的是27px），涂在陰影中間部分上面，設置圖層透明度為30%，命名為“垂直陰影1”，復制（ctrl+j）圖層“垂直陰影1”，移動至右邊，重命名為“垂直陰影2”。5.　選取線條工具（U），新建重1px，顏色為#aebcc7的水平線，將圖層轉換為智能對象（右擊圖層，在下拉菜單中選擇“轉換為智能對象”）圖層命名為“水平線”。6.　選取字體工具（T），編輯網站內容，您也可以使用圖片或別的來替換

第二十六步：創建網站底部內容

1.　新建組“底部”，并新建圖層，選取矩形選框工具（M），新建選區（982*88）。2.　設置前景色為#555555，選擇一大的軟筆刷（我選的是100px），沿著選區頭部邊緣進行涂畫，撤消選區，設置圖層透明度為50%，并命名為“漸變”。最終的“漸變”將是這個樣子：3.　新建圖層，選擇單行選框工具，新建一選區，并以白色填充。按ctrl+d撤消選區。轉到菜單　圖層>圖層蒙版>顯示所有，選取一大點的黑色軟筆刷像下圖一樣遮住圖層，以下圖為參考。設置圖層透明度為15%，命名為“直線”。4.　添加底部文字說明。這個大制作終于完功了，里面的字體設置什么的還需要各位看客們多擔待！最終效果圖：