ps制作立体效果的网站导航教程图片(ps制作网页导航条)

本文主要介绍ps制作网址导航教程的立体图(ps制作网页导)，下面跟着东辰网详细了解一下吧。

学好Photoshop的一个最好的方法就是解构和复制设计，激发自己的灵感。考虑到这一点，让让我们看看LittleLines.com是如何设计出如此精致的导航条的。

最终效果图:

开始步

注意下面放大图中的所有细节，比如边框、渐变、大小、颜色。在这种情况下，放大镜将是你最好的朋友。

第二步

创建一个新的Photoshop文件。为了便于说明，我将文件大小设置为540*200像素，分辨率设置为72像素。但是如果你想设计一个网页，你应该把文件大小设置得足够大，而不是当前的大小。

让暂且忽略木质纹理背景，为导航栏设计一个纯色背景。点按工具栏底部调板的前景色，打开拾色器，然后为背景选取更好的颜色。我选择橙色#e07814。

第三步

单击“图层”面板底部的“创建新图层”图标创建一个新图层。双击新层名称重命名层导航背景和。

从现在开始，当我告诉你创建一个新层，并命名为。;这是你必须做的。

(注意:如果你的图层面板不可见，通过执行窗口层和在主菜单中)

第四步

现在点击M键选择矩形选框工具。在开始步中，我们知道导航栏的背景是50像素高。我习惯打开信息面板查看选择的详细信息(窗口信息与)，这样当我点击或移动选择时，就有一定的标准，可以一次性得到选择。

当你得到选择，按ctrl退格键用背景色填充选区，然后按ctrlD取消选择。

第五步

现在设计按钮的背景。创建一个新层，命名为按钮背景，设置前景色为#47361f，在Nav背景层新建选区，高度38像素，根据自己的需要设置足够的宽度。按AltDelete用新的前景色填充选区，按CtrlD取消选区。

第六步

现在添加一个发光渐变到按钮背景层。创建一个新层，命名为白色渐变。按照前面的方法用拾色器将前景色设置为白色，或者单击D键将前景色重置为黑色，将背景色重置为白色，然后单击X键将前景色转换为白色。

第七步

在我们应用渐变之前，右击白色渐变层和选择创建剪辑蒙版从菜单上，从白色渐变图层到按钮背景层创建一个剪切蒙版，以便白色渐变层上的像素仅在与按钮背景层上的像素重叠时可见。当您看到一个指向剪切层的箭头时，则剪贴蒙版创建成功。

(注意:创建剪辑蒙版有一个简单的方法。按住Alt键，在“图层”面板上的两个图层之间移动光标，当光标变成两个重叠的圆圈时，单击鼠标左键创建一个剪贴蒙版)

第八步

当图层重叠时，我们可以继续添加渐变。点击并拖动渐变工具从棕色按钮的顶部到中间。

(注意:点击拖动渐变工具时按住Shift键，会保证是一条垂直线)

第九步

显然，我们创建的渐变太强了，所以我们设置白色渐变层到填充下降了20%,而混合模式致褪色和褪色。

第十步

接下来，在棕色按钮的顶部创建一个双边框。创建一个新层，命名为双边框，并将前景色和背景色分别设置为#644239和#866d53。

找到工具面板顶部的矩形选框工具，单击并按住它以显示弹出菜单。选择单线选框工具从列表中单击棕色按钮背景的顶部，在画布上创建一个新的高度为一个像素的水平选区。唐不要担心不准确的定位，你的边界可以在创建后上下移动。

第十一步

创建单行选择后，单击退格键并用前一步设置的前景色填充它。按键盘上的向下键将选区向下移动1个像素，按CtrlBackspace用新的背景色填充，然后按CtrlD取消选区。

如果你的线位置不合适，按V键选择移动工具，用鼠标或上下键上下移动，直到覆盖棕色按钮背景的上2个像素。我把下面的图片放大了，这样你就能看清楚了。

步骤12

我们需要做的最后一件事是给我们在按钮背景层。正如我们之前所做的，右键单击双边框在图层面板中选择创建剪辑蒙版从菜单上。

第十三步

步骤14

第十五步

在文本层仍然选中的情况下，按住Ctrl键并单击创建新层“图层”面板底部的图标。这将在当前图层下创建一个新图层，命名为按钮电流。

按M键选择矩形选框工具(如果我们用来创建水平线的单行选框工具仍然是当前的，请确保从弹出菜单返回到矩形选框工)。如下所示，创建一个从左上角到前两个按钮中间的矩形选择。第十六步

按D键将前景色和背景色分别重置为黑色和白色，按CtrlBackspace键将选区填充为白色。唐t按CtrlD取消选择。

步骤17

接下来，我们将使用图层样式为按钮当前图层添加渐变和笔触，但首先，在工具面板中单击前景色样本，并将前景色设置为#c8a282。

右键单击按钮当前层，从菜单中选择混合选项，打开图层样式对话框窗口，然后设置以下图层样式。根据以下内容仔细检查您的设置。我们可以注意到在渐变叠加和选项区域，当我们点击梯度选择器，透明样本的前景色将使用您刚刚设置的前景色。这样，我们就避免了用当前颜色创建自定义渐变。

(注意:如果您的渐变位置不正确，您可以单击并将其拖动到画布上的适当位置)

步骤18

如果你做的正确，你的菜单应该如下所示。

第十九步

在当前画布上，LittleLines的当前按钮上有黑色文本。选择你的文字层，点击T键激活文本工具和，选择开始个按钮上的文本，并在“字符”面板上将选定的文本颜色更改为黑色。

步骤20

在按钮准备中，最后一步是在剩余的按钮中添加黑色分隔符。单击双边框层，然后在其上创建一个新层，命名为分割线和。右键单击新图层，然后从菜单中选择创建剪辑蒙版，为分隔线图层创建剪辑蒙版。如下图所示，现在有三层重叠在按钮背景层上。

步骤21

要创建黑线，按D键将前景色重置为黑色，然后从矩形选框工具的弹出菜单中选择单列选框工具，可以生成宽度为1像素的垂直选区。

从前面的例子中，我们可以看到这些小的黑色分隔线只放置在每个按钮的左边界，所以在两个按钮之间单击以创建1像素宽的选择。如果位置不合适，按左右箭头键轻轻移动，然后按altDelete键将它填充为黑色。重复此操作，直到所有剩余的按钮被分开，不别忘了在最后一个钮扣的右边划一条线。新闻与出版ctrlD当您完成取消选择时。

步骤22

对于那些想进一步了解它并在背景中添加木材纹理的同学，我也会在这里说明一下(因为我知道如果我不t这样做，我会收到50封邮)。

首先，你需要找到一种你喜欢的木质纹理。我觉得defconx是找到这种质感最好的网站之一。他们有许多种高分辨率的木材纹理可供选择。右键单击图片并选择。选择复制图片，然后返回到Photoshop文件。

选择导航背景层(橙色纹理的)并按CtrlV将纹理复制到文件中。这将自动生成一个名为木材和木材公司。木质层现在填充了整个文件，所以我们修剪它。像以前一样，右键单击新创建的木材和木材公司层，并从菜单中选择创建剪切蒙版。

(注:如果你觉得可以由于分辨率较高，看不清木材纹理，您可以使用自由变换工具将纹理缩小到合适的大小)

步骤23

最后一步是添加一个渐变叠加图层样式，从浅黑色到透明导航背景和层。右键单击导航背景层，从菜单中选择混合选项，然后设置渐变叠加图层样式如下。

步骤24

这样，你的导航栏就完成了。希望你能从这个例子中学到一些东西！

学好Photoshop最好的方法之一就是把设计进行解构和复制，激发自己的灵感。考虑到这一点，让让我们看看LittleLines.com是如何设计出如此精致的导航条的。

最终效果图:

开始步

注意下面放大图中的所有细节，比如边框、渐变、大小、颜色。在这种情况下，放大镜将是你最好的朋友。

第二步

创建一个新的Photoshop文件。为了便于说明，我将文件大小设置为540*200像素，分辨率设置为72像素。但是如果你想设计一个网页，你应该把文件大小设置得足够大，而不是当前的大小。

让暂且忽略木质纹理背景，为导航栏设计一个纯色背景。点按工具栏底部调板的前景色，打开拾色器，然后为背景选取更好的颜色。我选择橙色#e07814。

第三步

单击“图层”面板底部的“创建新图层”图标创建一个新图层。双击新层名称重命名层导航背景和。

从现在开始，当我告诉你创建一个新层，并命名为这是你必须做的。

(注意:如果你的图层面板不可见，通过执行窗口层和在主菜单中)

第四步

现在点击M键选择矩形选框工具。在开始步中，我们知道导航栏的背景是50像素高。我习惯打开信息面板查看选择的详细信息(窗口信息与)，这样当我点击或移动选择时，就有一定的标准，可以一次性得到选择。

当你得到选择，按ctrl退格键用背景色填充选区，然后按ctrlD取消选择。

第五步

现在设计按钮的背景。创建一个新层，命名为按钮背景和，设置前景色为#47361f，在Nav背景层新建选区，高度38像素，根据自己的需要设置足够的宽度。按AltDelete用新的前景色填充选区，按CtrlD取消选区。

第六步

现在添加一个发光渐变到按钮背景层。创建一个新层，命名为白色渐变。按照前面的方法用拾色器将前景色设置为白色，或者单击D键将前景色重置为黑色，将背景色重置为白色，然后单击X键将前景色转换为白色。

第七步

在我们应用渐变之前，右击白色渐变层和选择创建剪辑蒙版从菜单中，并创建剪辑蒙版从白色渐变图层到按钮背景层，这样白色渐变图层仅在与上的像素重叠的地方可见按钮背景层。当您看到一个指向剪切层的箭头时，则剪贴蒙版创建成功。

(注意:创建剪辑蒙版有一个简单的方法。按住Alt键，在“图层”面板上的两个图层之间移动光标，当光标变成两个重叠的圆圈时，单击鼠标左键创建一个剪贴蒙版)

第八步

当图层重叠时，我们可以继续添加渐变。点击并拖动渐变工具从棕色按钮的顶部到中间。

(注意:点击拖动渐变工具时按住Shift键，会保证是一条垂直线)

第九步

显然，我们创建的渐变太强了，所以我们设置白色渐变层到填充下降了20%,而混合模式致褪色和褪色。

第十步

接下来，在棕色按钮的顶部创建一个双边框。创建一个新层，命名为双边框，并将前景色和背景色分别设置为#644239和#866d53。

找到工具面板顶部的矩形选框工具，单击并按住它以显示弹出菜单。选择单线选框工具从列表中单击棕色按钮背景的顶部，在画布上创建一个新的高度为一个像素的水平选区。唐不要担心不准确的定位，你的边界可以在创建后上下移动。

第十一步

创建单行选择后，单击退格键并用前一步设置的前景色填充它。按键盘上的向下键将选区向下移动1个像素，按CtrlBackspace用新的背景色填充，然后按CtrlD取消选区。

如果你的线位置不合适，按V键选择移动工具，用鼠标或上下键上下移动，直到覆盖棕色按钮背景的上2个像素。我下面的图片被放大了，这样你可以看得更清楚。

步骤12

我们需要做的最后一件事是给我们在按钮背景层。正如我们之前所做的，右键单击双边框在图层面板中选择创建剪辑蒙版从菜单上。

第十三步

步骤14

第十五步

在文本层仍然选中的情况下，按住Ctrl键并单击创建新层“图层”面板底部的图标。这将在当前图层下创建一个新图层，命名为按钮电流。

按M键选择矩形选框工具(如果我们用来创建水平线的单行选框工具仍然是当前的，请确保从弹出菜单返回到矩形选框工)。如下所示，创建一个从左上角到前两个按钮中间的矩形选择。

第十六步

按D键将前景色和背景色分别重置为黑色和白色，按CtrlBackspace键将选区填充为白色。唐t按CtrlD取消选择。

步骤17

接下来，我们将使用图层样式为按钮当前图层添加渐变和笔触，但首先，在工具面板中单击前景色样本，并将前景色设置为#c8a282。

右键单击按钮当前层，从菜单中选择混合选项，打开图层样式对话框窗口，然后设置以下图层样式。根据以下内容仔细检查您的设置。我们可以注意到在渐变叠加和选项区域，当我们点击梯度选择器，透明样本的前景色将使用您刚刚设置的前景色。这样，我们就避免了用当前颜色创建自定义渐变。

(注意:如果您的渐变位置不正确，您可以单击并将其拖动到画布上的适当位置)

步骤18

如果你做的正确，你的菜单应该如下所示。

第十九步

在当前画布上，LittleLines的当前按钮上有黑色文本。选择你的文字层，点击T键激活文本工具和，选择开始个按钮上的文本，并在“字符”面板上将选定的文本颜色更改为黑色。

步骤20

在按钮准备中，最后一步是在剩余的按钮中添加黑色分隔符。单击双边框层，然后在其上创建一个新层，命名为分割线。右键单击新图层，然后从菜单中选择创建剪辑蒙版，为分隔线图层创建剪辑蒙版。如下图所示，现在有三层重叠在按钮背景层上。

步骤21

要创建黑线，按D键将前景色重置为黑色，然后从矩形选框工具的弹出菜单中选择单列选框工具，可以生成宽度为1像素的垂直选区。从前面的例子中，我们可以看到这些小的黑色分隔线只放置在每个按钮的左边界，所以在两个按钮之间单击以创建1像素宽的选择。如果位置不合适，按左右箭头键轻轻移动，然后按altDelete键将它填充为黑色。重复此操作，直到所有剩余的按钮被分开，不别忘了在最后一个钮扣的右边划一条线。新闻与出版ctrlD当您完成取消选择时。

步骤22

对于那些想进一步了解它并在背景中添加木材纹理的同学，我也会在这里说明一下(因为我知道如果我不t这样做，我会收到50封邮)。

首先，你需要找到一种你喜欢的木质纹理。我觉得defconx是找到这种质感最好的网站之一。他们有许多种高分辨率的木材纹理可供选择。右键点击图片，选择复制图片，然后返回Photoshop文件。

选择导航背景层(橙色纹理的)并按CtrlV将纹理复制到文件中。这将自动生成一个名为木材和木材公司。木质层现在填充了整个文件，所以我们修剪它。像以前一样，右键单击新创建的木材和木材公司层，并从菜单中选择创建剪切蒙版。

(注:如果你觉得可以由于分辨率较高，看不清木材纹理，您可以使用自由变换工具将纹理缩小到合适的大小)

步骤23

最后一步是添加一个渐变叠加图层样式，从浅黑色到透明导航背景和层。右键单击导航背景层，从菜单中选择混合选项，然后设置渐变叠加图层样式如下。

步骤24

这样，你的导航栏就完成了。希望你能从这个例子中学到一些东西！

了解更多ps制作网址导航教程的立体图(ps制作网页导航)相关内容请关注东辰网。