1. 基础按钮制作：使用形状工具和图层样式。
  2. 文字添加与样式：让按钮文字也符合设计规范。
  3. 创建可复用的样式：这是 PS 的高效技巧，让你一键应用相同的设计。
  4. 制作悬停效果：模拟鼠标悬停时的状态。
  5. 导出为网页可用格式：将设计好的按钮导出为 PNG 或 JPG。

最终效果预览

第一步：新建画布

  1. 打开 Photoshop，点击顶部菜单栏的 文件 > 新建。
  2. 在弹出的窗口中,设置一个合适的尺寸，对于按钮，我们可以设置一个较大的画布，方便后续操作。
    • 宽度：800 像素
    • 高度：600 像素
    • 分辨率：72 像素/英寸 (这是网页的标准分辨率)
    • ：白色 或 透明 (如果需要透明背景，选择透明)
  3. 点击 创建。

第二步：绘制按钮形状

  1. 在左侧工具栏中,选择 矩形工具，如果看不到，它可能被隐藏在圆角矩形、椭圆等工具后面，长按工具图标即可看到更多选项。

    PS制作web按钮教程
    （图片来源网络，侵删）

  2. 在顶部选项栏中,进行以下设置：

    • 填充：选择一个你喜欢的颜色，#4A90E2 (一种蓝色)。
    • 描边：选择 无。
    • 半径：输入 10 像素，这会让矩形的四个角变得圆润，这是现代按钮的常见设计。

  3. 在画布上按住鼠标左键,拖动出一个合适大小的矩形，你可以按住 Shift 键来绘制一个正方形，但这里我们只需要一个长条形。

第三步：添加图层样式（让按钮立体感十足）

这是让按钮从“色块”变成“真实按钮”的关键，在右侧的图层面板中，确保你的按钮图层被选中，然后点击底部的 “添加图层样式” 图标（一个像 fx 的图标），选择 “内阴影” 和 “渐变叠加”。

添加内阴影

  • 混合模式：正片叠底
  • 不透明度：50%
  • 角度：90度 (从上往下照射)
  • 距离：3像素
  • 大小：5像素
  • 阻塞：0%
  • 颜色：深一点的颜色，#2E5F8A
  • 勾选 “将源对齐到图层” 和 “使用全局光”。

这一步会在按钮的顶部边缘制造出一条深色线条,模拟光线从上方照射时产生的阴影，让按钮看起来像被按下去的表面。

PS制作web按钮教程
（图片来源网络，侵删）

添加渐变叠加

  • 渐变：点击渐变条，在弹出的编辑器中，选择一个从上到下的渐变。
    • 色标 1 (顶部)：选择比基础色稍亮的颜色，#5BA0F2。
    • 色标 2 (底部)：选择比基础色稍暗的颜色，#3A80D2。
  • 样式：线性
  • 角度：90度
  • 缩放：100%

这一步会让按钮的表面有微妙的明暗变化,增加质感和立体感。

可选：添加描边

如果你想让按钮有一个细边框,可以再添加一个 “描边” 样式。

  • 大小：1像素
  • 位置：内部
  • 颜色：比基础色更深的颜色，#2E5F8A。

你的按钮应该看起来非常立体和专业了。

第四步：添加按钮文字

  1. 在左侧工具栏选择 横排文字工具。
  2. 在顶部选项栏设置字体样式：
    • 字体：选择一个无衬线字体，如 思源黑体、Helvetica、Arial 等，这些字体在屏幕上显示效果清晰。
    • 字体大小：根据你的按钮大小调整，24 点。
    • 字体颜色：选择与按钮对比度高的颜色，比如白色 #FFFFFF。
    • 对齐方式：居中。
  3. 在按钮上点击并输入文字,立即购买”。
  4. 使用 移动工具 (V) 将文字拖动到按钮的中央位置。

第五步：创建可复用的图层样式（高效技巧）

如果你需要制作多个相同风格的按钮（比如不同文字、不同颜色），手动重复以上步骤会很麻烦，我们可以创建一个样式预设。

PS制作web按钮教程
（图片来源网络，侵删）
  1. 在右侧图层面板中,确保你的按钮图层（包含形状和文字）处于选中状态。
  2. 点击图层面板下方的 “创建新样式” 图标（一个带圆圈的 fx）。
  3. 在弹出的窗口中,为你的样式命名，Modern Blue Button，然后点击 确定。
  4. 这个样式会出现在右侧面板的 “样式” 面板中，如果没有看到，可以通过顶部菜单栏 窗口 > 样式 来打开它。

如何使用这个样式？

  • 新建一个图层,画一个任意形状（比如另一个矩形或圆角矩形）。
  • 选中这个新图层,然后在“样式”面板中点击 Modern Blue Button 样式，新形状会立刻变成你设计的按钮样式！你只需要修改里面的文字即可。

第六步：制作悬停效果

悬停效果是网页交互的重要组成部分,在 PS 中，我们可以通过复制图层并调整样式来模拟。

  1. 在图层面板中,右键点击你的按钮图层，选择 “复制图层”。
  2. 你会得到一个一模一样的按钮副本。
  3. 选中这个副本图层,修改它的外观以表示“悬停”状态，常见的做法是：
    • 改变颜色：在图层面板双击副本图层的缩略图，打开颜色选择器，选择一个更亮或更饱和的颜色。
    • 或改变样式：双击副本图层打开“图层样式”窗口，调整渐变叠加的颜色或内阴影的不透明度。
  4. 为了让悬停效果更逼真,我们还可以给这个副本图层添加一个 “投影” 样式，让它看起来像浮在主按钮上方。
    • 混合模式：正片叠底
    • 不透明度：35%
    • 角度：90度
    • 距离：5像素
    • 大小：8像素

你的画布上就有了两个按钮：一个是默认状态，一个是悬停状态。

第七步：导出为网页格式

设计完成后,需要将按钮导出为图片文件。

  1. 隐藏悬停效果图层：在图层面板中，点击悬停效果图层旁边的 “眼睛” 图标，将其隐藏，只显示默认状态的按钮。
  2. 点击顶部菜单栏 文件 > 导出 > 存储为Web所用格式(旧版) (快捷键: Ctrl+Shift+Alt+S 或 Cmd+Shift+Opt+S)。
  3. 在弹出的窗口中,进行设置：
    • 预设：选择 PNG-24，PNG格式支持透明背景，质量高，非常适合网页图标和按钮。
    • 透明：务必勾选此项，这样按钮的背景就是透明的，可以完美地放在任何网页背景上。
    • 颜色：确保是 百万颜色。
    • 在文档中：选择 无 或 所有切片 (如果你切分了多个按钮)。
  4. 点击 存储，选择一个位置，保存即可。

总结与进阶

恭喜你！你已经学会了在 Photoshop 中制作一个完整的网页按钮。

进阶建议：

  • 使用智能对象：将按钮图层转换为智能对象，这样你可以自由缩放而不会损失质量，并且修改样式时所有副本都会同步更新。
  • 制作不同状态：除了默认和悬停，还可以制作 点击 状态（通常是更深的颜色，或者去掉内阴影）和 禁用 状态（降低不透明度）。
  • 切图：如果你在一个画布上制作了多个按钮，可以使用切片工具为每个按钮创建切片，然后一次性导出所有按钮，非常高效。

希望这份教程对你有帮助！PS 是一个强大的工具，多加练习你就能制作出更加精美和复杂的网页元素。