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

按住 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)擊圖層>圖層蒙版>顯示全部。選擇漸變工具，在蒙版中，從頂部到分割線的中間部分，畫(huà)一個(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è)圖層放在文字圖層的下面。雙擊該圖層打開(kāi)圖層面板，按照上圖進(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ū)，如上圖。把它放在搜索條的右邊。雙擊圖層打開(kāi)圖層樣式面板。添加漸變疊加。然后給這個(gè)圖層創(chuàng)建一個(gè)蒙版。

Step 23: 在按鈕上寫(xiě) “search”

用白色寫(xiě)文字 “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)建舉行之前你可以打開(kāi)信息面板 – 窗口> 信息，這樣你就可以看到具體的尺寸)。設(shè)置圖層透明度為 55% 命名它為 “bg4″。

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

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

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

按住Ctrl點(diǎn)擊圖層 “bg4″的蒙版，這時(shí)創(chuàng)建了一個(gè)選取。 新建圖層，用漸變工具，從選取的底部到頂部畫(huà)一個(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è)圓角矩形（如上圖）。雙擊圖層打開(kāi)圖層樣式面板。如上圖設(shè)置，添加效果。然后用文字工具寫(xiě)上 “sign up” ，設(shè)置文字白色。

Step 30: “Learn more” 按鈕

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

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