如何使用Adob​​e Photoshop (Ps) 软件创建3D按钮

您可以在Adobe Photoshop中创建许多在线有用的令人惊奇的东西，从简单的相框到复杂的 UI。您可以在 Photoshop 中创建的最有用的东西之一是 3D 按钮，如果您运行具有自定义界面的博客或网站，这将派上用场。

在本文中，我们将向您展示如何使用 Photoshop 创建 3D 按钮以及视觉“向上”和“向下”状态，以便您可以为它们设置动画。（我们不会在本文中介绍动画本身。）

第1步：准备文件

虽然 3D 按钮在网站上最常弹出，但重要的是要注意它们还有其他应用程序，例如动画 GIF、模型产品展示和手机游戏。根据您创建此按钮的目的，您的最终文件格式及其尺寸可能会有所不同。

要在 Photoshop 中创建 3D 按钮，您需要为其创建自定义文档。为此，请打开 Photoshop，然后单击“新建” → “自定义”。开始输入您的值。

要创建 3D 按钮，您需要一个水平文档。对于我们，我们使用了：

• 900 x 300 像素高

• 300 像素/英寸

• RGB 颜色模式

虽然这些规格绝对不是硬性规定，但这将确保您有足够的工作空间，并能够根据需要上下缩放按钮大小。

第2步：为3D按钮设置边框

为文件设置规范后，您将进入工作区。您将在单个图层中有一个水平的白色画布，这就是您将开始构建按钮的地方。

要构建您的 3D 按钮，请单击屏幕左侧的圆角矩形工具，此处以红色显示。您也可以使用快捷方式U来访问它。

在您的白色图层上单击一次：这将自动显示您的创建圆角矩形框。您将使用此框来指定矩形的尺寸。

对于我们的按钮，我们选择了：

• 300 像素宽

• 75 像素高

我们还确保将角圆角 10 个像素。不会太高，也不会太低。然后我们点击“确定”按钮。

注意：按钮的大小和形状各不相同，因此您不必使用这些确切的尺寸。此外，如果您正在寻找有关快捷键的更多信息，这里有一些最有用的 Photoshop 键盘命令。

当您按确定时，Photoshop 将在您的图层内创建一个具有这些尺寸的圆角矩形。您可以使用屏幕左上角的下拉菜单更改其填充和描边颜色。

出于本教程的目的——并说明“向上”和“向下”按钮可能是什么样子——我们将把“向下”按钮设置为红色。

第3步：使用按钮3D

创建基本按钮并选择其颜色后，您将需要在“图层样式”对话框中对其进行调整 。这是为了使它看起来更 3D。

要访问“图层样式”对话框，您可以从顶部菜单中转到“图层” → “图层样式”。您还可以双击包含您的按钮的图层，以自动将其调出。这种方式要快得多，我们个人更喜欢它。

图层样式框启动后，转到选项斜面和浮雕。打开它。

这是一种让按钮边缘更加凸起的“3D”外观的快速而简单的方法。在本教程中，这些是我们使用的设置：

结构

• 款式：内斜面

• 技术：凿软

• 深度：605

• 方向：向上

• 尺寸：5

• 软化：1

底纹

• 角度：90

• 高度：37

• 高光模式：颜色减淡，55%不透明度

• 阴影模式：多重，25%不透明度

诀窍是将设置设置得足够高，您可以看到一些差异，但不要太强以至于无法抗拒。

在我们完成了斜面和浮雕之后，我们也去了轮廓并打开了它。轮廓使斜面和浮雕的定义更强一些，在本教程中我们选择了设置倒圆锥体。

接下来，打开“渐变叠加”。这就是使按钮具有圆形、略带“光泽”外观的原因。设置如下：

• 混合模式：叠加

• 不透明度：90

• 风格：线性

• 角度：90

• 规模：100

最后，我们打开“投影效果”，使按钮看起来从网站或博客的白色背景有点“凸起”。再次，这里是设置： 结构

• 混合模式：多重

• 不透明度：35

• 角度：90

• 距离：2

• 描边：6

• 尺寸：8

质量

• 轮廓：线性

• 噪音：0

• 图层敲除投影：开

现在是时候将这些规范保存为图层样式了。

第4步：另存为图层样式

完成按钮的设置后，它将开始呈现3D效果。由于您创建多个 3D 按钮的可能性很高，因此我们需要找到一种快速简便的方法来完成此操作。

在“图层样式”对话框中 单击“确定”之前 ，单击“新建样式”。当您这样做时，Photoshop 将保存您为按钮制作的图层样式。

如果您使用的是 Photoshop 软件，则此新样式将保存到您的“库”部分，如上所示。它非常快速且易于访问。

第5步：使用保存的图层样式

现在您已经设计了按钮并将其保存为图层样式，让我们看看它在“向上”状态下的效果。没有任何谎言，这将使您的工作时间减少一半。

首先，让我们在红色按钮层的正上方创建另一个按钮，就像这样。为了强调，让我们将其设为绿色。

接下来，应该双击库面板中的图层样式，而不是双击图层本身以打开图层样式对话框。

当您这样做时，Photoshop 会自动将您保存的样式应用到您的新按钮图层，同时保持其新的颜色和形状。您现在有两个按钮——一个处于向上状态，一个处于向下状态——而且操作起来非常简单。我喜欢这个捷径。

第6步：向按钮添加文本

接下来，我们将向按钮添加文本。

要添加文本，请在两个按钮图层上方创建一个新图层。单击“键入”工具开始键入。

但是，在完成此操作后，您还需要进行一些更细微的更改，以使此文本“弹出”。

首先，双击包含文本的图层，以便将其显示在图层样式对话框中。

接下来，单击“内部阴影”，为您的文本添加一点凹陷（或凹陷区域）。这使得字母看起来像是刻在按钮上。我们在本教程中使用的确切设置如下。

结构

• 混合模式：相乘

• 不透明度：35

• 角度：90

• 距离：2

• 阻塞：4

• 尺寸：1

质量

• 轮廓：线性

• 噪音： 0

接下来，对这些字母应用“渐变叠加”，使它们更容易融入按钮而不会显得平坦。同样，我们的设置是：

• 混合模式：颜色加深

• 不透明度：90

• 风格：线性

• 角度：90

• 比例：100

第7步：完成

创建此文本样式后——尤其是如果您想再次使用它时——在单击“确定”之前转到“新建样式”并保存它。

完成后，您可以快速切换两个按钮层之间的可见性，以查看“向上”和“向下”状态的外观。

很酷吧？要保存您的文件，请转到 文件 → 另存为，并将其保存为您可能正在处理的任何项目的正确文件格式。

使用3D按钮和小工具自定义博客

既然您知道如何在 Photoshop 中创建3D按钮，您就可以发挥创意，设计自己的3D按钮以满足您的需求。有了这些技能，您就可以制作出不仅专业而且个性化的产品。

想知道你可以用这个程序做的其他事情吗？以下是如何用Photoshop for Mac删除图片背景。