Photoshop制作簡潔干凈的網(wǎng)頁效果圖

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

一些需要的素材:

• 葉子素材
• 像素化藍(lán)色矩形

Step 1: 新建文檔

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

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

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

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

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

Step 4:創(chuàng)建黑色背景的內(nèi)容區(qū)域

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

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

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

Step 6: 創(chuàng)建更多的群組（文件夾）

創(chuàng)建新群組 ，圖層>新建>群組，然后命名為 “home” 。然后在這個(gè)群組下創(chuàng)建另一個(gè)群組，命名為 “logo”。

Step 7:創(chuàng)建logo和口號(hào)

在logo群組中，新建一個(gè)圖層。用文字工具，輸入網(wǎng)站的logo文字，應(yīng)用顏色是 #f4f4f4。雙擊該圖層打開圖層屬性面板。按照上面的設(shè)置進(jìn)行操作。然后新建另一個(gè)圖層輸入口號(hào)，應(yīng)用顏色是#eeeeee。

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

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

Step 9: 創(chuàng)建1個(gè)像素高的藍(lán)色線條

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

Step 10: 在導(dǎo)航條中添加一個(gè)漸變效果

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

Step 11: 寫導(dǎo)航的字

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

Step 12:創(chuàng)建導(dǎo)航文字之間的裝飾分割

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

Step 13

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

Step 14:

Ctrl+J復(fù)制圖層 “line 1″ ，然后命名這個(gè)新圖層為”line 2″。用移動(dòng)工具，向右挪動(dòng)這個(gè)圖層 。然后雙擊圖層打開圖層樣式面板，按照上面的設(shè)置進(jìn)行操作。

Step 15:把圖層”line 1″ 和 “line 2″轉(zhuǎn)換成智能圖層