ps制作絢麗的CSS導(dǎo)航菜單

今天和大家分享一個(gè)用Photoshop制作炫麗的CSS導(dǎo)航菜單的方法，希望對(duì)大家有所幫助。

首先打開(kāi)PS后，新建一個(gè)600*200像素的黑色背景文件，接著創(chuàng)建一個(gè)矩形600*40像素的矩形選框工具，可以創(chuàng)建特定的大小即改變選框的“固定大小” 。



先隨便填充什么顏色，然后右鍵單擊該圖層“混合選項(xiàng)”－選擇“漸變疊加”和“描邊”，設(shè)置參數(shù)如下：

　

那么就應(yīng)該得到一個(gè)這樣的效果：

然后選擇選取框工具，新建一圖層并創(chuàng)建一個(gè)這樣的選區(qū)并填充為白色(#FFFFFF)：

按住CTRL鍵并用鼠標(biāo)單擊我們之前漸變及描邊的那個(gè)圖層，得到其選區(qū)，再按住CTRL+SHIFT+I進(jìn)行反選，將得到這樣的選區(qū)：

選擇白色區(qū)域圖層，按下Delete鍵，并將不透明度值調(diào)為5%，并寫(xiě)好相關(guān)欄目，則得到：

接下來(lái)我們選擇圓角矩形工具為每個(gè)欄目加一個(gè)小圖標(biāo)，其半徑為5像素,大小不超過(guò)32*32像素，并設(shè)置好“投影”及“漸變疊加”相關(guān)的參數(shù)，如下圖：

那么現(xiàn)在得到的導(dǎo)航菜單應(yīng)該是這樣子的了。如圖：

接下來(lái)我們添加小圖標(biāo)，并給每個(gè)小圖標(biāo)設(shè)置好如下圖的外發(fā)光參數(shù)：

那么我們的導(dǎo)航菜單將是這樣的了：

為了能夠在CSS樣式里面更明了一些，我們?cè)僭跈谀康紫录右粭l橫線來(lái)突出，選擇“鋼筆工具”，顏色為#008aff，并為其設(shè)置好“外發(fā)光”參數(shù)，如圖：

那么最后的效果就是這樣的了：