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

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

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



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

　

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

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

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

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

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

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

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

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

為了能夠在CSS樣式里面更明了一些，我們再在欄目底下加一條橫線來突出，選擇“鋼筆工具”，顏色為#008aff，并為其設(shè)置好“外發(fā)光”參數(shù)，如圖：

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