第一步–制作酒吧
这很容易。首先，制作一个宽度为400像素，高度为60像素的新文档。
使用
图层面板中的图标。选择矩形选择工具，然后在图像中心拖出一个大小为330 x 35像素的选择。（为了简化此过程，选择选项中导航，信息，选项面板中，选择选项选项卡上，风格：选择固定尺寸，然后输入330的宽度和35的身高在图像窗口中，然后拖动不要忘记。将样式切换回普通！）
使用“ 编辑”菜单中的“ 填充”命令，用50％的灰色填充此矩形。
现在为圆端。创建一个新层。选择“椭圆选框”选择工具，然后将指针右移到矩形左边缘的中心。按住Shift + Alt键（Windows）或Shift + Option键（Mac），拖出一个圆圈，直到圆圈的上边缘和下边缘恰好位于矩形的上边缘和下边缘（如果稍微放大一点可能会有所帮助）第一）。也用50％灰色填充该圆圈。
现在将此层（“第2层”）向下拖动到调色板中的“ 新层”图标以进行复制。按住Control键，然后在图像窗口中，将此重复的圆拖动到矩形的右侧，直到它从右侧边缘突出一半。再次放大以精确定位圆。现在按Control + E 3次（或选择“ Layer”>“ Merge Down” 3次），以使您最终得到包含我们的圆形菜单栏的一层（“ Layer 1”）：
双击“图层”调板中的图层，并将其重命名为“菜单栏”。点击确定。
现在是保存图像的好时机！称它为menubar.psd。
制作文字选项
现在，使文字按钮沿栏。选择文本工具（大T！），然后选择您喜欢的字体。键入所需的菜单选项，每个选项之间用4或5个空格分隔。单击“ 确定”将文本放置在图像上，然后四处移动图层，直到文本在条形图上居中对齐为止：
右键单击“图层面板”中的图层，然后选择“ 图层选项 ”，将新图层重命名为“菜单文本” 。
获得砂岩效果
让我们的菜单栏好看又颠簸，就像它是由砂岩制成的。选择“菜单栏”图层，然后在“图层”调板中按Control键并单击该图层，以选择所有不透明像素（这将阻止效果“渗出”栏边缘）。选择滤镜>杂色>添加杂色...并输入金额 35.务必确保高斯和单色选择（我们想要的砂岩，没有纸屑！）。单击确定。
现在将纹理平滑一些。选择滤镜>模糊>高斯模糊…，然后输入0.5像素的半径。将选择范围保持在栏周围。
使其成为3-D
有趣的来了。我们将使用出色的“ Lighting Effects”滤镜将我们的2维条形变为3维条形！
我们希望将两件事弄成斜角-条形图本身，以及文本链接周围的区域，以使文本看起来“缩进”到条形图中。我们使用选择工具来告诉“灯光效果”滤镜要倒角的位。我们已经选择了条形图（如果您如上所述保留选择项！），但是现在我们想从选择项中减去文本周围的区域。
因为我们的文字全部在一层上，所以这真的很容易。按住Control + Alt（Win）或Control + Option（Mac），然后在“图层”调板中单击“菜单文本”图层。嘿！我们的新选择已删除了文本层的不透明区域。
现在，要使斜角变得漂亮且平滑，请转到“ 选择”>“羽毛...”，然后输入1像素的“ 羽毛半径 ”。现在，将此选择另存为新通道，以便我们可以在“ Lighting Effects”中使用它。选择选择>保存选择...，并确保突出显示新频道。单击确定。现在，您可以按Control + D取消选择。
转到滤镜>渲染>灯光效果。随着默认选定的样式，从底部选择新的渠道纹理通道下拉列表（它可能会被称为“＃4”）。在不同的灯光位置和设置下进行实验，直到获得不错的3-D斜角效果-这些设置对我来说效果很好：
点击确定，看看。如果您对结果不满意，请按Control + Z（撤消），然后再回去。最后，您应该得到如下结果：
使它更加3-D
我们可以通过阴影进一步增强3-D效果。将菜单栏图层拖动到“ 新图层”图标以复制它，双击调色板中的图层，并将其命名为“ Drop Shadow”。命中OK，然后选择编辑>填充，挑选黑色与使用下拉框，并确保保留透明检查。单击确定。
将“阴影”层拖到调色板中“菜单栏”层下方。按住Control键，然后分别按两次向右箭头和向下箭头>键，将阴影向下和向右移动一点。选择“ 滤镜”>“模糊”>“高斯模糊”，然后为“ 半径”输入3.5。点击确定。
有点蓝色（精美专辑！）
假设我在制作此酒吧时正在听Miles Davis的讲话，我想给它带来一点点忧郁感，使其更加精致有趣。确保菜单栏图层在调色板中突出显示，然后选择“ 图像”>“调整”>“色相/饱和度...”。选择彩色化和输入的值-160的色调和10的饱和度。点击确定。
突出亮点
我们希望我们的选项在鼠标移到它们上方时以红色突出显示，因此让我们新建一个包含突出显示的图层。首先按住Control键并单击调色板中的“菜单文本”层以选择其像素，然后单击“ 新建层”图标以在顶部创建一个新层。选择选择->修改->展开…，然后输入2像素的值。现在选择一个漂亮的鲜红色（例如255,0,0或默认“色板”调色板中的第一个色板），然后选择“ 编辑”>“描边”。输入2像素的宽度，为“ 位置”选择“ 中心 ” ，将“ 不透明度”设置为100％，将“ 模式”设置为“ 普通”，然后旋转关闭透明度。这将在新图层上的文本周围形成红色实线边框。
将该层重命名为“ Highlights”。
这种效果有点苛刻，所以我们可以通过更改混合模式来使其柔和并使其更加逼真。在调色板中仍选中Highlights图层的情况下，从混合模式下拉框（当前显示为Normal）中选择Screen。要使效果更加柔和，请在混合模式框右侧的“ 不透明度”滑块上选择80％。
节省空间
我们的菜单周围有一些不必要的空白，因此让我们裁剪一下图像。使用矩形选择工具，拖出一个覆盖我们所有图像的矩形，包括阴影（如果有疑问，请在阴影周围留出足够的空间，因为很难看到阴影在哪里停止）。选择380 x 55像素应该可以解决问题。然后选择图像>裁剪：
切碎
现在为聪明的部分。我们需要从主图像中制作10张单独的图像-每个未突出显示的文本选项4个，突出显示（翻转）版本的4个，菜单栏圆头的两个。幸运的是，Photoshop具有“指南”功能，这使此过程变得更加容易。
使用Control + R打开标尺或选择“ 视图”>“显示标尺”。在左侧的标尺中单击，然后在按住鼠标按钮的同时向右拖动。垂直的蓝线是一个指南，它将帮助我们选择要切碎的图像位。拖动它，使其位于“家”和“关于我”之间的中间位置，然后释放按钮。如果您发现它有误，请按住Control键并拖动指南直到正确为止。
（您可能会发现在拖动时会将参考线“捕捉”到当前图层上像素的边缘。这对于在边缘上正确对齐参考线非常方便，但是在这种情况下可能会有些痛苦。要避免发生这种情况时，请在“图层”调板中选择“背景”图层，因为该图层上没有供Photoshop捕捉的内容。）
对菜单选项之间的其他两个间隙重复此过程，然后放置两个额外的指南，一个在“主页”的左侧，一个在“链接”的右侧。记住–要创建新的垂直参考线，只需单击左侧标尺并向右拖动即可。您应该以如下形式结束：
既然我们已经确定了在哪里裁剪图像，剩下的就很容易了。选择矩形选择工具。确保“ 视图”菜单中的“ 对齐参考线”已突出显示。为了简化此任务，请拖出图像窗口，使图像周围有一些灰色，或者稍微放大一点。从左至右，按如下所示切出蓝色参考线之间的每个部分：
拖出一个从该部分的左上角到右下角的矩形。确保选中所有部分。通过将所选内容的左右边缘对齐到参考线， “ 对齐参考线”选项使此操作更容易。
按Shift + Control + C（复制合并）将所选内容下的所有图层复制为一层。按Control + N并单击“ 确定”以接受默认设置。按Control + V将合并的选择粘贴到此新图像中：
现在选择“ 文件”>“导出”>“ GIF89a导出”并保存图像。打电话给他们任何你喜欢的，但我建议：left.gif，home_on.gif，about_on.gif，cat_on.gif，links_on.gif和right.gif。
那是我们完成的10张图像中的6张。其他四个将是菜单选项的非突出显示或“关闭”版本。关闭“图层”调板中“突出显示”图层旁边的眼睛图标，并对四个菜单选项图像重复上述过程。给他们打电话home_off.gif，about_off.gif，cat_off.gif和links_off.gif。
您的图像应如下所示：（如果您将其中任何一个弄乱了，则可以随时作弊并从此处抓取它们！）
让我们一起摇摆！
现在我们要移动菜单。
首先，将图像放在您的网页中。如果您使用style="border: none;"这些图像，则它们应该彼此紧紧地靠在一起，形成一个无缝的菜单栏。给每个图像一个带有name属性的名称，并在每个图像周围放置标签，包括onmouseover和onmouseoutJavaScript事件处理程序。
这是“主页”按钮的代码，它可以助您一臂之力。如果您想查看其余内容，请查看此页面的源代码。
接下来，我们需要在Web页面的开头创建JavaScript图像对象，并将每个对象指向该图像的GIF文件（打开和关闭版本）。创建图像对象时，以像素为单位包含图像的宽度和高度是个好主意–您可以通过将GIF一张一张地拖到Photoshop中，然后按Alt +单击（PC）或Option +单击（Mac）来了解这一点标有“ 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";
最后，我们创建两个JavaScript函数，button_on()并在JavaScript周围button_off()添加嗅探器代码和标签，然后开始烹饪！看一下此页面的源代码，这应该是不言而喻的。