第一步–制作酒吧

這很容易。首先,，制作一個(gè)寬度為400像素,，高度為60像素的新文檔。

使用 圖層面板中的圖標(biāo),。選擇矩形選擇工具,，然后在圖像中心拖出一個(gè)大小為330 x 35像素的選擇。（為了簡化此過程,，選擇選項(xiàng)中導(dǎo)航,，信息，選項(xiàng)面板中,，選擇選項(xiàng)選項(xiàng)卡上,，風(fēng)格：選擇固定尺寸，然后輸入330的寬度和35的身高在圖像窗口中,，然后拖動不要忘記,。將樣式切換回普通！）

使用“ 編輯”菜單中的“ 填充”命令,，用50％的灰色填充此矩形,。

現(xiàn)在為圓端。創(chuàng)建一個(gè)新層,。選擇“橢圓選框”選擇工具,，然后將指針右移到矩形左邊緣的中心。按住Shift + Alt鍵（Windows）或Shift + Option鍵（Mac）,，拖出一個(gè)圓圈,，直到圓圈的上邊緣和下邊緣恰好位于矩形的上邊緣和下邊緣（如果稍微放大一點(diǎn)可能會有所幫助）第一）。也用50％灰色填充該圓圈,。

現(xiàn)在將此層（“第2層”）向下拖動到調(diào)色板中的“ 新層”圖標(biāo)以進(jìn)行復(fù)制,。按住Control鍵，然后在圖像窗口中,，將此重復(fù)的圓拖動到矩形的右側(cè),，直到它從右側(cè)邊緣突出一半。再次放大以精確定位圓?，F(xiàn)在按Control + E 3次（或選擇“ Layer”>“ Merge Down” 3次）,，以使您最終得到包含我們的圓形菜單欄的一層（“ Layer 1”）：

雙擊“圖層”調(diào)板中的圖層，并將其重命名為“菜單欄”,。點(diǎn)擊確定,。

現(xiàn)在是保存圖像的好時(shí)機(jī)！稱它為menubar.psd,。

制作文字選項(xiàng)

現(xiàn)在,，使文字按鈕沿欄。選擇文本工具（大T?。?，然后選擇您喜歡的字體。鍵入所需的菜單選項(xiàng),，每個(gè)選項(xiàng)之間用4或5個(gè)空格分隔,。單擊“ 確定”將文本放置在圖像上，然后四處移動圖層,，直到文本在條形圖上居中對齊為止：

右鍵單擊“圖層面板”中的圖層,，然后選擇“ 圖層選項(xiàng) ”，將新圖層重命名為“菜單文本” ,。

獲得砂巖效果

讓我們的菜單欄好看又顛簸,，就像它是由砂巖制成的。選擇“菜單欄”圖層,，然后在“圖層”調(diào)板中按Control鍵并單擊該圖層,，以選擇所有不透明像素（這將阻止效果“滲出”欄邊緣）。選擇濾鏡>雜色>添加雜色...并輸入金額 35.務(wù)必確保高斯和單色選擇（我們想要的砂巖,，沒有紙屑?。螕舸_定,。

現(xiàn)在將紋理平滑一些,。選擇濾鏡>模糊>高斯模糊…，然后輸入0.5像素的半徑,。將選擇范圍保持在欄周圍,。

使其成為3-D

有趣的來了。我們將使用出色的“ Lighting Effects”濾鏡將我們的2維條形變?yōu)?維條形,！

我們希望將兩件事弄成斜角-條形圖本身,，以及文本鏈接周圍的區(qū)域，以使文本看起來“縮進(jìn)”到條形圖中,。我們使用選擇工具來告訴“燈光效果”濾鏡要倒角的位,。我們已經(jīng)選擇了條形圖（如果您如上所述保留選擇項(xiàng)！）,，但是現(xiàn)在我們想從選擇項(xiàng)中減去文本周圍的區(qū)域,。

因?yàn)槲覀兊奈淖秩吭谝粚由?，所以這真的很容易。按住Control + Alt（Win）或Control + Option（Mac）,，然后在“圖層”調(diào)板中單擊“菜單文本”圖層,。嘿！我們的新選擇已刪除了文本層的不透明區(qū)域,。

現(xiàn)在,，要使斜角變得漂亮且平滑，請轉(zhuǎn)到“ 選擇”>“羽毛...”,，然后輸入1像素的“ 羽毛半徑 ”?，F(xiàn)在，將此選擇另存為新通道,，以便我們可以在“ Lighting Effects”中使用它,。選擇選擇>保存選擇...，并確保突出顯示新頻道,。單擊確定?，F(xiàn)在，您可以按Control + D取消選擇,。

轉(zhuǎn)到濾鏡>渲染>燈光效果,。隨著默認(rèn)選定的樣式，從底部選擇新的渠道紋理通道下拉列表（它可能會被稱為“＃4”）,。在不同的燈光位置和設(shè)置下進(jìn)行實(shí)驗(yàn),，直到獲得不錯(cuò)的3-D斜角效果-這些設(shè)置對我來說效果很好：

點(diǎn)擊確定，看看,。如果您對結(jié)果不滿意,，請按Control + Z（撤消），然后再回去,。最后,，您應(yīng)該得到如下結(jié)果：

使它更加3-D

我們可以通過陰影進(jìn)一步增強(qiáng)3-D效果。將菜單欄圖層拖動到“ 新圖層”圖標(biāo)以復(fù)制它,，雙擊調(diào)色板中的圖層,，并將其命名為“ Drop Shadow”。命中OK,，然后選擇編輯>填充,，挑選黑色與使用下拉框，并確保保留透明檢查,。單擊確定,。

將“陰影”層拖到調(diào)色板中“菜單欄”層下方。按住Control鍵,，然后分別按兩次向右箭頭和向下箭頭>鍵,，將陰影向下和向右移動一點(diǎn),。選擇“ 濾鏡”>“模糊”>“高斯模糊”，然后為“ 半徑”輸入3.5,。點(diǎn)擊確定,。

有點(diǎn)藍(lán)色（精美專輯！）

假設(shè)我在制作此酒吧時(shí)正在聽Miles Davis的講話,，我想給它帶來一點(diǎn)點(diǎn)憂郁感，使其更加精致有趣,。確保菜單欄圖層在調(diào)色板中突出顯示,，然后選擇“ 圖像”>“調(diào)整”>“色相/飽和度...”。選擇彩色化和輸入的值-160的色調(diào)和10的飽和度,。點(diǎn)擊確定,。

突出亮點(diǎn)

我們希望我們的選項(xiàng)在鼠標(biāo)移到它們上方時(shí)以紅色突出顯示，因此讓我們新建一個(gè)包含突出顯示的圖層,。首先按住Control鍵并單擊調(diào)色板中的“菜單文本”層以選擇其像素,，然后單擊“ 新建層”圖標(biāo)以在頂部創(chuàng)建一個(gè)新層。選擇選擇->修改->展開…,，然后輸入2像素的值?，F(xiàn)在選擇一個(gè)漂亮的鮮紅色（例如255,0,0或默認(rèn)“色板”調(diào)色板中的第一個(gè)色板），然后選擇“ 編輯”>“描邊”,。輸入2像素的寬度,，為“ 位置”選擇“ 中心 ” ，將“ 不透明度”設(shè)置為100％,，將“ 模式”設(shè)置為“ 普通”,，然后旋轉(zhuǎn)關(guān)閉透明度。這將在新圖層上的文本周圍形成紅色實(shí)線邊框,。

將該層重命名為“ Highlights”,。

這種效果有點(diǎn)苛刻，所以我們可以通過更改混合模式來使其柔和并使其更加逼真,。在調(diào)色板中仍選中Highlights圖層的情況下,，從混合模式下拉框（當(dāng)前顯示為Normal）中選擇Screen。要使效果更加柔和,，請?jiān)诨旌夏Ｊ娇蛴覀?cè)的“ 不透明度”滑塊上選擇80％,。

節(jié)省空間

我們的菜單周圍有一些不必要的空白，因此讓我們裁剪一下圖像,。使用矩形選擇工具,，拖出一個(gè)覆蓋我們所有圖像的矩形，包括陰影（如果有疑問,，請?jiān)陉幱爸車舫鲎銐虻目臻g,，因?yàn)楹茈y看到陰影在哪里停止）,。選擇380 x 55像素應(yīng)該可以解決問題。然后選擇圖像>裁剪：

切碎

現(xiàn)在為聰明的部分,。我們需要從主圖像中制作10張單獨(dú)的圖像-每個(gè)未突出顯示的文本選項(xiàng)4個(gè),，突出顯示（翻轉(zhuǎn)）版本的4個(gè)，菜單欄圓頭的兩個(gè),。幸運(yùn)的是,，Photoshop具有“指南”功能，這使此過程變得更加容易,。

使用Control + R打開標(biāo)尺或選擇“ 視圖”>“顯示標(biāo)尺”,。在左側(cè)的標(biāo)尺中單擊，然后在按住鼠標(biāo)按鈕的同時(shí)向右拖動,。垂直的藍(lán)線是一個(gè)指南,，它將幫助我們選擇要切碎的圖像位。拖動它,，使其位于“家”和“關(guān)于我”之間的中間位置,，然后釋放按鈕。如果您發(fā)現(xiàn)它有誤,，請按住Control鍵并拖動指南直到正確為止,。

（您可能會發(fā)現(xiàn)在拖動時(shí)會將參考線“捕捉”到當(dāng)前圖層上像素的邊緣。這對于在邊緣上正確對齊參考線非常方便,，但是在這種情況下可能會有些痛苦,。要避免發(fā)生這種情況時(shí)，請?jiān)凇皥D層”調(diào)板中選擇“背景”圖層,，因?yàn)樵搱D層上沒有供Photoshop捕捉的內(nèi)容,。）

對菜單選項(xiàng)之間的其他兩個(gè)間隙重復(fù)此過程，然后放置兩個(gè)額外的指南,，一個(gè)在“主頁”的左側(cè),，一個(gè)在“鏈接”的右側(cè)。記住–要?jiǎng)?chuàng)建新的垂直參考線,，只需單擊左側(cè)標(biāo)尺并向右拖動即可,。您應(yīng)該以如下形式結(jié)束：

既然我們已經(jīng)確定了在哪里裁剪圖像，剩下的就很容易了,。選擇矩形選擇工具,。確保“ 視圖”菜單中的“ 對齊參考線”已突出顯示,。為了簡化此任務(wù),，請拖出圖像窗口，使圖像周圍有一些灰色,，或者稍微放大一點(diǎn),。從左至右,，按如下所示切出藍(lán)色參考線之間的每個(gè)部分：

拖出一個(gè)從該部分的左上角到右下角的矩形。確保選中所有部分,。通過將所選內(nèi)容的左右邊緣對齊到參考線,， “ 對齊參考線”選項(xiàng)使此操作更容易。

按Shift + Control + C（復(fù)制合并）將所選內(nèi)容下的所有圖層復(fù)制為一層,。按Control + N并單擊“ 確定”以接受默認(rèn)設(shè)置,。按Control + V將合并的選擇粘貼到此新圖像中：

現(xiàn)在選擇“ 文件”>“導(dǎo)出”>“ GIF89a導(dǎo)出”并保存圖像。打電話給他們?nèi)魏文阆矚g的,，但我建議：left.gif,，home_on.gif，about_on.gif,，cat_on.gif，links_on.gif和right.gif,。

那是我們完成的10張圖像中的6張,。其他四個(gè)將是菜單選項(xiàng)的非突出顯示或“關(guān)閉”版本。關(guān)閉“圖層”調(diào)板中“突出顯示”圖層旁邊的眼睛圖標(biāo),，并對四個(gè)菜單選項(xiàng)圖像重復(fù)上述過程,。給他們打電話home_off.gif，about_off.gif,，cat_off.gif和links_off.gif,。

您的圖像應(yīng)如下所示：（如果您將其中任何一個(gè)弄亂了，則可以隨時(shí)作弊并從此處抓取它們?。?/p>

讓我們一起搖擺,！

現(xiàn)在我們要移動菜單。

首先,，將圖像放在您的網(wǎng)頁中,。如果您使用style="border: none;"這些圖像，則它們應(yīng)該彼此緊緊地靠在一起,，形成一個(gè)無縫的菜單欄,。給每個(gè)圖像一個(gè)帶有name屬性的名稱，并<a></a>在每個(gè)圖像周圍放置標(biāo)簽,，包括onmouseover和onmouseoutJavaScript事件處理程序,。

當(dāng)然，您不需要<a></a>兩個(gè)末端的東西,！

這是“主頁”按鈕的代碼,，它可以助您一臂之力。如果您想查看其余內(nèi)容,，請查看此頁面的源代碼,。

<a href="#"onmouseout="button_off('home');"onmouseover="button_on('home');"><img src="images/menubar/home_off.gif"style="border: none;" width="72" height="55" name="home"/></a>

接下來,，我們需要在Web頁面的開頭創(chuàng)建JavaScript圖像對象，并將每個(gè)對象指向該圖像的GIF文件（打開和關(guān)閉版本）,。創(chuàng)建圖像對象時(shí),，以像素為單位包含圖像的寬度和高度是個(gè)好主意–您可以通過將GIF一張一張地拖到Photoshop中，然后按Alt +單擊（PC）或Option +單擊（Mac）來了解這一點(diǎn)標(biāo)有“ Doc：”的欄,。

同樣,，這里是“主頁”按鈕的示例：

home_on = new Image ( 72, 55 );home_off = new Image ( 72, 55 );home_on.src = "images/menubar/home_on.gif";home_off.src = "images/menubar/home_off.gif";

最后，我們創(chuàng)建兩個(gè)JavaScript函數(shù),，button_on()并在JavaScript周圍button_off()添加嗅探器代碼和<script></script>標(biāo)簽,，然后開始烹飪！看一下此頁面的源代碼,，這應(yīng)該是不言而喻的,。