Photoshop制作簡(jiǎn)潔干凈的網(wǎng)頁(yè)效果圖(4)

在這篇教程中，我將教給你如何在photoshop中制作一個(gè)簡(jiǎn)潔干凈的網(wǎng)頁(yè)效果圖。原始效果是由 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)到我們的文檔中。 右鍵單擊該圖層的縮略圖（在圖層面板中），選擇“編組到新建智能對(duì)象土層中”。然后選擇 濾鏡>藝術(shù)化>膠片顆粒，按照上面的設(shè)置進(jìn)行操作。然后選擇 濾鏡>像素化>馬賽克，同樣按照?qǐng)D中的設(shè)置進(jìn)行操作。設(shè)置該圖層的渲染模式為 “差值”（Difference），透明度設(shè)為30%，該土層命名為“texture”。

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

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

Step 5: 用群組（文件夾）來(lái)組織你的圖層

按住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)尺來(lái)幫助一創(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)換成智能圖層

按住 Ctrl鍵，選中圖層 “line 1″ 和”line 2″ 。然后點(diǎn)擊右鍵，選擇轉(zhuǎn)換成智能對(duì)象圖層。設(shè)置這個(gè)智能圖層為 “separator”。

Step 16: 創(chuàng)建藍(lán)色高光

在圖層”separator”下創(chuàng)建一個(gè)新圖層。用矩形選區(qū)工具創(chuàng)建一個(gè)選�。ò凑丈蠄D設(shè)置），然后填充顏色為#35423e。右鍵單擊該圖層，把 這個(gè)圖層轉(zhuǎn)換成智能對(duì)象圖層。點(diǎn)擊濾鏡>模糊>高斯模糊，按照?qǐng)D中設(shè)置。點(diǎn)擊濾鏡>雜色>添加雜色，按照?qǐng)D中設(shè)置。設(shè)置該圖層透 明度為60% ，命名該圖層為 “highlight”。

Step 17:給圖層”separator”創(chuàng)建蒙版

在圖層面板中單擊圖層 “separator” ，點(diǎn)擊圖層>圖層蒙版>顯示全部。選擇漸變工具，在蒙版中，從頂部到分割線的中間部分，畫一個(gè)從黑色到透明的漸變。

Step 18: 復(fù)制分割線

按住Ctrl鍵，在圖層面板中，點(diǎn)擊圖層”separator”和 “highlight” 。 然后用移動(dòng)工具，按住 Alt 和 Shift鍵拖拽。這時(shí)候的效果就是復(fù)制移動(dòng)了這兩個(gè)圖層。向右移動(dòng)到合適的位置。重復(fù)以上操作。

Step 19:群組所有的分割線

選擇所有的 “separator” 和 “highlight”圖層，按住Ctrl+G 群組它們。命名這個(gè)群組為”separators”。

Step 20: 給活動(dòng)頁(yè)添加按鈕效果

現(xiàn)在，我們要給當(dāng)前（活動(dòng)的）頁(yè)面的導(dǎo)航文字，添加一個(gè)不同的背景，要和其他頁(yè)面的導(dǎo)航文字作以區(qū)分。用選區(qū)工具創(chuàng)建一個(gè)和我一樣的矩形選取。把這 個(gè)圖層放在文字圖層的下面。雙擊該圖層打開圖層面板，按照上圖進(jìn)行設(shè)置，添加一個(gè)漸變疊加。命名這個(gè)圖層為”active menu”，設(shè)置圖層透明度為 50%。

Step 21: 創(chuàng)建搜索條

新建群組 (圖層> 新建 >群組)，命名為 “search” 。把它放在群組”navigation”的上面。用圓角選區(qū)工具，設(shè)置圓角為3px，創(chuàng)建一個(gè)圓角矩形，設(shè)置顏色為 #104f59。命名這個(gè)圖層為 “text field” ，設(shè)置透明度為 80%。

Step 22: 創(chuàng)建搜索按鈕

用矩形選取工具創(chuàng)建一個(gè)矩形選區(qū)，如上圖。把它放在搜索條的右邊。雙擊圖層打開圖層樣式面板。添加漸變疊加。然后給這個(gè)圖層創(chuàng)建一個(gè)蒙版。

Step 23: 在按鈕上寫 “search”

用白色寫文字 “search” 。設(shè)置該圖層透明度為75%。

Step 24: 給搜索欄創(chuàng)建一個(gè)1像素寬的細(xì)線

用單列選框工具，創(chuàng)建需要的選取。然后填充顏色 #123036。命名這個(gè)圖層為 “line”，把它放在圖層 “button” 下面。

Step 25: 創(chuàng)建一個(gè)藍(lán)色矩形

創(chuàng)建一個(gè)新群組，命名為”Showcase”。在里面再創(chuàng)建一個(gè)群組，命名為”background”。用矩形選擇工具，創(chuàng)建一個(gè)新矩形，填充顏 色#219aad。我的矩形是983 px寬 273 px 高 (在創(chuàng)建舉行之前你可以打開信息面板 – 窗口> 信息，這樣你就可以看到具體的尺寸)。設(shè)置圖層透明度為 55% 命名它為 “bg4″。

Step 26: 給這個(gè)藍(lán)色矩形添加紋理效果

打開素材文件”像素化藍(lán)色矩形” ，把素材移動(dòng)到我們的文件中。放在藍(lán)色矩形的上面。設(shè)置該圖層透明度 55% ，然后命名這個(gè)圖層為 “bg3″。

Step 27: 給藍(lán)色矩形添加漸變

按住Ctrl點(diǎn)擊圖層 “bg4″的蒙版，這時(shí)創(chuàng)建了一個(gè)選取。 新建圖層，用漸變工具，從選取的底部到頂部畫一個(gè)從 #56b8e5 到透明的漸變。然后 Ctrl+D 刪除選區(qū)。

Step 28:創(chuàng)建一個(gè)小的藍(lán)色矩形

新建圖層。用矩形選區(qū)工具，創(chuàng)建一個(gè)選區(qū)（如上圖）。用漸變工具，從選區(qū)的底部到頭部，拖拽從#0f2b42 到#2a607f的漸變。Ctrl+D 刪除選區(qū)。命名該圖層為 “bg1″。

Step 29: “Sign up” 按鈕

創(chuàng)建新群組命名為 “sign up button”。用圓角矩形工具，設(shè)置圓角為2 px ，創(chuàng)建一個(gè)圓角矩形（如上圖）。雙擊圖層打開圖層樣式面板。如上圖設(shè)置，添加效果。然后用文字工具寫上 “sign up” ，設(shè)置文字白色。

Step 30: “Learn more” 按鈕

重復(fù)上面的操作，建立另一個(gè)按鈕。但是這一次白色的文字是 “learn more” 。然后創(chuàng)建一個(gè)新圖層，用用戶自定義形狀，選擇一個(gè)白色的箭頭。

Step 31: 在矩形的左邊創(chuàng)建一個(gè)按鈕

創(chuàng)建一個(gè)新群組，命名為”left arrow”。用橢圓工具l (U)，創(chuàng)建一個(gè)圓形，填充顏色#406f94。雙擊圖層打開圖層樣式面板，按照上圖設(shè)置。

Step 32: 在藍(lán)色圓圈中創(chuàng)建一個(gè)箭頭

新建圖層，用用戶自定義圖形，創(chuàng)建白色箭頭。雙擊打開圖層樣式面板，按照上圖進(jìn)行設(shè)置。設(shè)置圖層透明度為50%。

Step 33: 在右邊創(chuàng)建另一個(gè)箭頭。

重復(fù)以上步驟，在矩形的右邊創(chuàng)建對(duì)稱的圓圈和箭頭。

Step 34: 創(chuàng)建特色圖片

新建群組。命名為 “image” 。在這個(gè)群組中放置一個(gè)小的圖片，命名這個(gè)圖層為”image” 。雙擊打開圖層樣式面板。按照上圖設(shè)置。

Step 35: 給你的圖片添加陰影

點(diǎn)開圖層>圖層樣式>新建圖層，在原始圖層上面新建了一個(gè)圖層。打開圖層>圖層夢(mèng)般>顯示全部，設(shè)置漸變，畫一個(gè)黑色到透明的漸變，從小圖片的底部到中間的位置。給這個(gè)圖層命名為 “shadow”。

Step 36: 添加文字

新建群組。用文字工具添加一些文字，命名這個(gè)群組為 “text”。

Step 37: 創(chuàng)建白色矩形

新建群組，命名為 “content”，在其中再新建一個(gè)群組，命名為 “shadows” 。用矩形工具，新建一個(gè)矩形，填充白色，向上圖一樣。命名這個(gè)圖層為”white shape” ，設(shè)置圖層透明度為90%。

Step 38: 添加頂部陰影

按住Ctrl單擊圖層面板上圖層”white shape”的小縮略圖，創(chuàng)建選取。創(chuàng)建一個(gè)新圖層，用漸變工具，畫一個(gè)從 #8f8f8f 到透明的漸變，參照上圖。設(shè)置該圖層透明度為 50% ，命名這個(gè)圖層為”top shadow” 。然后用移動(dòng)工具，向下移動(dòng)2個(gè)像素。

Step 39:創(chuàng)建橫向的陰影

新建圖層，，用矩形工具，創(chuàng)建一個(gè)選區(qū)，如上圖。用漸變工具畫一個(gè)從 #8f8f8f 到透明的漸變。給這個(gè)圖層創(chuàng)建蒙版，用一個(gè)直徑較大的軟筆刷，創(chuàng)建陰影。設(shè)置該圖層透明度為 30% ，命名該圖層為 “vertical shadow 1″ 。復(fù)制這個(gè)圖層 (Ctrl+J)，命名這個(gè)新圖層為 “vertical shadow 2″ ，并且把它移動(dòng)到右邊。

Step 40: 創(chuàng)建橫向線條

用直線工具 (U)創(chuàng)建一個(gè)橫向線條，如上圖，高為1px，顏色#aebcc7。命名為 “line”。

Step 41: 添加文字

選擇文字工具，添加一些文字。你也可以添加一些圖片。

Step 42: 給底部創(chuàng)建漸變

新建群組，命名為 “footer”。在里面新建一個(gè)圖層，用選區(qū)工具(M) 創(chuàng)建一個(gè)選區(qū)，如上圖。設(shè)置前景色為#555555，用一個(gè)直徑比較大的軟筆刷，在選取頂部的位置涂抹。設(shè)置該圖層透明度為 50% ，命名該圖層為”gradient”。

Step 43: 在底部，添加一個(gè)1個(gè)像素高的線條

新建圖層。按照以前的做法，創(chuàng)建一個(gè)1px高的線條，填充顏色黑色，設(shè)置圖層透明度為15% ，命名該圖層為 “line”。

Step 44: 給底部區(qū)域添加文字

在底部添加一些文字

Final Result