網(wǎng)站制作中導(dǎo)航欄的設(shè)置非常重要。漂亮的導(dǎo)航按鈕和菜單會(huì)給網(wǎng)站增色不少。下面介紹一款精致的水晶風(fēng)格按鈕的制作。作者不僅介紹了按鈕的制作還介紹了文字部分的制作方法,非常值得學(xué)習(xí)。最終效果 1、創(chuàng)建一個(gè)新文件600 * 140px。現(xiàn)在選擇圓角矩形工具制作一個(gè)圓角矩形如下圖。2、應(yīng)用層樣式:內(nèi)發(fā)光,混合模式:濾色,方法:柔和。?3、漸變疊加:顏色設(shè)置為:#5e80a3,#839db8,#b8c7d6。4、描邊: #5e80a3。5、這就是它應(yīng)該呈現(xiàn)的樣子。6、現(xiàn)在打上菜單文字,字體Segoe,大小:14 pt,顏色白色#
網(wǎng)站制作中導(dǎo)航欄的設(shè)置非常重要。漂亮的導(dǎo)航按鈕和菜單會(huì)給網(wǎng)站增色不少。下面介紹一款精致的水晶風(fēng)格按鈕的制作。作者不僅介紹了按鈕的制作還介紹了文字部分的制作方法,非常值得學(xué)習(xí)。 最終效果 |
| 1、創(chuàng)建一個(gè)新文件600 * 140px。現(xiàn)在選擇圓角矩形工具制作一個(gè)圓角矩形如下圖。 |
| 2、應(yīng)用層樣式:內(nèi)發(fā)光,混合模式:濾色,方法:柔和。 |
?
| 3、漸變疊加:顏色設(shè)置為:#5e80a3,#839db8,#b8c7d6。 |
| 5、這就是它應(yīng)該呈現(xiàn)的樣子。 |
| 6、現(xiàn)在打上菜單文字,字體Segoe,大小:14 pt,顏色白色#ffffff。 |
?
| 7、給字體鏈接應(yīng)用層效果:描邊 #53769a。 |
| 8、創(chuàng)建一個(gè)新層。選擇矩形選框工具,繪制1px寬度的線條并使用# ffffffs填充。 |
| 9、復(fù)制這個(gè)層接著在每個(gè)鏈接之間添加每個(gè)線條。現(xiàn)在選擇矩形選框工具選取線條底部的區(qū)域覆蓋到所有的線條,然后使用選擇- >修改- >羽化和應(yīng)用5px半徑。按下Del然后采取相同的方法處理上方的線條。 |
| 11、使用矩形選框工具選取你鏈接的內(nèi)部區(qū)域 (在兩個(gè)線條之間)然后填充任何你想要的顏色。 |
#p#副標(biāo)題#e#
| 12、現(xiàn)在給這個(gè)層應(yīng)用混合模式漸變疊加使用顏色: #567595, #728fae #b3c3d3。 |
| 13、這就是它應(yīng)該呈現(xiàn)的樣子。 |
| 14、現(xiàn)在使用矩形選框工具2px的半徑繪制一個(gè)小矩形使用#ffffff填充。 |
| 15、應(yīng)用如下的層效果到形狀圖層: 內(nèi)發(fā)光(混合模式:疊加)。 |
?
| 16、漸變疊加: #e6e6e6 和 #ffffff。 |
| 18、這就是它應(yīng)該呈現(xiàn)的樣子。 |
| 19、在形狀內(nèi)輸入“search”使用Segoe字體,大小為 12pt 顏色#7b7b7b。 |