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è)按鈕
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁(yè)模版,個(gè)人網(wǎng)站建設(shè)入門知識(shí)
- 網(wǎng)頁(yè)模板,設(shè)計(jì)酒吧主題網(wǎng)頁(yè)模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁(yè)模板教程
- 從零手把手教你設(shè)計(jì)網(wǎng)頁(yè)
- 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)技巧
- 網(wǎng)頁(yè)設(shè)計(jì)的分割布局秘密
- ps cs6設(shè)計(jì)個(gè)人作品網(wǎng)頁(yè)模板教程
- ps網(wǎng)頁(yè)布局設(shè)計(jì)實(shí)例教程
- ps黑色風(fēng)格網(wǎng)頁(yè)模板
- ps一個(gè)木紋風(fēng)格網(wǎng)頁(yè)模板
推薦教程
- photoshop網(wǎng)頁(yè)應(yīng)用實(shí)例:制作蘋(píng)果導(dǎo)航欄
- Photoshop CS5制作放射狀光線網(wǎng)頁(yè)廣告板
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁(yè)的詳細(xì)教程
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效
- PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁(yè)布局
- Photoshop繪制好看的老式wordpress主題
- Photoshop制作禮品店網(wǎng)站模板
- Photoshop網(wǎng)頁(yè)設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁(yè)模板