Photoshop制作Web2.0風(fēng)格導(dǎo)航條

1. 創(chuàng)建一個(gè)新文件600 * 140px。現(xiàn)在選擇圓角矩形工具制作一個(gè)圓角矩形如下圖。

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

2. 應(yīng)用層樣式:內(nèi)發(fā)光 混合模式:濾色 方法:柔和。

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

3. 漸變疊加:顏色設(shè)置為 #5e80a3 ,#839db8 and #b8c7d6

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

4.描邊: #5e80a3

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

5. 這就是它應(yīng)該呈現(xiàn)的樣子。

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

6. 現(xiàn)在書寫鏈接使用 Segoe 14 pt #ffffff

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

7. 給字體鏈接應(yīng)用層效果:描邊 #53769a

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

8.創(chuàng)建一個(gè)新層。選擇矩形選框工具,繪制1px寬度的線條并使用# ffffffs填充

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

9. 復(fù)制這個(gè)層接著在每個(gè)鏈接之間添加每個(gè)線條。現(xiàn)在選擇矩形選框工具選取線條底部的區(qū)域覆蓋到所有的線條,然后使用選擇- >修改- >羽化和應(yīng)用5px半徑。按下Del然后采取相同的方法處理上方的線條。

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

10. 將線條圖層的混合模式改為柔光

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

11. 使用矩形選框工具選取你鏈接的內(nèi)部區(qū)域 (在兩個(gè)線條之間)然后填充任何你想要的顏色。

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

12.現(xiàn)在給這個(gè)層應(yīng)用混合模式漸變疊加使用顏色: #567595, #728fae #b3c3d3

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

13. 這就是它應(yīng)該呈現(xiàn)的樣子。

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

14. 現(xiàn)在使用矩形選框工具2px的半徑繪制一個(gè)小矩形使用#ffffff填充。

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

15. 應(yīng)用如下的層效果到形狀圖層: 內(nèi)發(fā)光(混合模式:疊加)

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

16. 漸變疊加: #e6e6e6  和 #ffffff

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

17. 描邊: #5e80a3

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

18. 這就是它應(yīng)該呈現(xiàn)的樣子。

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

19. 在形狀內(nèi)輸入“search”使用Segoe字體 大小為 12pt 顏色#7b7b7b

Photoshop制作Web2.0風(fēng)格導(dǎo)航條

20. 從 f3 Silk Icons(Silk Icons是一組免費(fèi)的圖標(biāo)譯者注)中添加一個(gè)放大鏡這樣你的導(dǎo)航條就完成了。這就是最后呈現(xiàn)的效果正常狀態(tài)下和鼠標(biāo)滑過(guò)時(shí)。

Photoshop制作Web2.0風(fēng)格導(dǎo)航條
標(biāo)簽:導(dǎo)航條

隨機(jī)推薦