在這篇教程中，我將教給你如何在photoshop中制作一個簡潔干凈的網頁效果圖。原始效果是由 ThemeForest的kuntiz 設計的。我很感謝他允許我發布這篇教程。這是這篇教程的第一部分。

一些需要的素材:

• 葉子素材
• 像素化藍色矩形

Step 1: 新建文檔

在photoshop中，按住(Ctrl+N)新建一個文檔。設置大小為1200px *750px。然后用漸變工具從上到下拉出一個漸變，顏色從 #792700 到 #000000。

Step 2: 在背景中添加一些顏色

新建一個圖層，命名為”color.”，用筆刷工具，選擇一個比較軟的筆刷，大概直徑為300px，我的顏色選擇的是紅色，藍色和橙色，在這個圖層中添隨便畫幾筆。

Step 3:給背景添加一些紋理

現在我們要給背景增加一些紋理效果。打開我們剛剛下載的葉子的素材圖片，用移動工具把這個圖片移動到我們的文檔中。 右鍵單擊該圖層的縮略圖（在圖層面板中），選擇“編組到新建智能對象土層中”。然后選擇 濾鏡>藝術化>膠片顆粒，按照上面的設置進行操作。然后選擇 濾鏡>像素化>馬賽克，同樣按照圖中的設置進行操作。設置該圖層的渲染模式為 “差值”（Difference），透明度設為30%，該土層命名為“texture”。

Step 4:創建黑色背景的內容區域

新建一個圖層，選擇圓角矩形工具，設置圓角度為3個像素，創建一個黑色的圓角矩形。然后在圖層面板中雙擊該圖層，彈出圖層樣式面板，按照圖中的設置給該圖層設置陰影。設置該圖層透明度為70%，然后命名這個圖層為 “black shape”。

Step 5: 用群組（文件夾）來組織你的圖層

按住ctrl鍵，選擇你剛剛創建的所有的圖層，然后點擊Ctrl+G群組他們。給這個新的群組（文件夾）命名為”background”。

Step 6: 創建更多的群組（文件夾）

創建新群組 ，圖層>新建>群組，然后命名為 “home” 。然后在這個群組下創建另一個群組，命名為 “logo”。

Step 7:創建logo和口號

在logo群組中，新建一個圖層。用文字工具，輸入網站的logo文字，應用顏色是 #f4f4f4。雙擊該圖層打開圖層屬性面板。按照上面的設置進行操作。然后新建另一個圖層輸入口號，應用顏色是#eeeeee。

Step 8: “Sign up” 和 “login” 按鈕

好了，我們現在要在布局的右上角做兩個按鈕。新建一個群組，命名為 “Sign up | Login” 。然后選擇圓角矩形，創建一個小的矩形，就像我做的一樣。雙擊圖層打開圖層樣式面板，按照上圖的設置進行操作。設置前景色為白色，用文字工具在你的按鈕上 寫下 “Sign up | Login” 。設置文字這個圖層的透明度為75% 。

Step 9: 創建1個像素高的藍色線條

新建一個群組，命名為 “Navigation”(導航)。新建一個圖層，命名為”Line”。選擇“單行選框工具”，在畫布中單擊創建一個像素高的選取。填充顏色#406f94 ，然后刪除內容區域以外的部分。設置該圖層透明度為 40% 。

Step 10: 在導航條中添加一個漸變效果

創建新圖層。用矩形選區工具，創建一個選區，就像我做的一樣。（注意：你可以利用標尺來幫助一創建這個選區）。然后用漸變工具，設置漸變為 #35423e 到透明。從底部向上填充漸變。按下 Ctrl+D 清除選區。 然后，濾鏡>雜色>添加雜色。按照上圖的設置進行操作。命名這個圖層為 “gradient” 。在線條和漸變之間記得留下1個像素的高。

Step 11: 寫導航的字

選擇文字工具，寫下你的導航的文字。然后雙擊打開圖層樣式面板。按照上圖設置。我給文字添加了一個基本的漸變/陰影效果。

Step 12:創建導航文字之間的裝飾分割

現在我們要創建一些分割線。新建一個圖層，選擇單列選框工具，創建一個1個像素寬的選區。然后用矩形選區工具，單擊”與選區交叉”按鈕（在狀態欄的上面有個按鈕），按照上圖的操作化一個選取。用白色填充選取。然后ctrl+D刪除選取。

Step 13

雙擊該圖層打開圖層樣式面板，創建漸變疊加。該圖層命名 “line 1″。

Step 14:

Ctrl+J復制圖層 “line 1″ ，然后命名這個新圖層為”line 2″。用移動工具，向右挪動這個圖層 。然后雙擊圖層打開圖層樣式面板，按照上面的設置進行操作。

Step 15:把圖層”line 1″ 和 “line 2″轉換成智能圖層