Photoshop 制作 Icon 教程：从入门到精通

本教程将教你如何使用 Photoshop 的强大功能，创建一个专业、高质量、可无限缩放的图标，我们将重点利用 形状工具 和 图层样式，这是制作图标的两大核心。

ps制作icon教程
（图片来源网络，侵删）

为什么用 Photoshop 做图标？

虽然 Illustrator (AI) 是矢量图标的“王者”，但 Photoshop 同样出色，尤其对于设计师来说：

  • 无缝工作流：如果你已经在用 Photoshop 设计 UI 界面，可以直接在同一软件中完成图标。
  • 强大的图层样式：PS 的图层样式（如渐变、内发光、投影）效果丰富，操作直观。
  • 位图优势：对于需要复杂纹理、照片级写实风格的图标，PS 更具优势。
  • 智能对象：可以嵌入矢量文件，实现无损缩放。

第一部分：准备工作与核心设置

在开始绘制前,正确的设置是成功的一半。

新建文档

  • 打开 Photoshop，点击 文件 > 新建 (File > New)。
  • 预设：选择 Web，然后从预设大小中选择 512 x 512 像素，这是标准的 App 图标尺寸。
  • ：选择 透明，这对于图标至关重要，背景必须是透明的。
  • 高级设置：
    • 颜色模式：RGB 颜色。
    • 位深度：8 位/通道。
    • 分辨率：72 PPI (对于屏幕显示的图标足够了)。
    • 内容识别比例：务必取消勾选！

开启对齐和参考线

为了确保图标元素完美居中对齐,请执行以下操作：

  • 打开 视图 > 显示 > 智能参考线 (View > Show > Smart Guides)。
  • 打开 视图 > 对齐 (View > Snap)。
  • 按 Ctrl + R (Mac: Cmd + R) 显示标尺。
  • 从左侧标尺拖出一条垂直参考线到画布中心 (256px)，从上方标尺拖出一条水平参考线到画布中心 (256px)。

创建形状图层

这是制作图标最重要的习惯！永远不要用画笔或钢笔直接在背景上画。

ps制作icon教程
（图片来源网络，侵删）

  • 选择 形状工具 (Shape Tool)，快捷键 U。

  • 在顶部选项栏中,确保你选择的是 路径 模式，而不是形状或像素模式。

  • 选择一个基本形状,矩形工具 (Rectangle Tool) 或 圆角矩形工具 (Rounded Rectangle Tool)。

第二部分：实战演练——制作一个相机图标

我们将通过制作一个简单的相机图标,来学习所有核心技巧。

步骤 1：绘制相机主体

  1. 选择 圆角矩形工具。
  2. 在选项栏中,设置 填充 为 #4A90E2 (一个漂亮的蓝色)，描边 为无。
  3. 按住 Shift 键，在画布上拖动，绘制一个正方形，松开鼠标后，它会自动吸附到画布中心。
  4. 在右侧的 图层面板 中，你会看到一个带有矢量蒙版的图层，这就是形状图层。

步骤 2：添加镜头

  1. 保持形状工具选中,切换到 椭圆工具。
  2. 同样,设置填充色，#2C5AA0 (深一点的蓝色)。
  3. 按住 Shift 键，在相机主体中央拖动，绘制一个正圆作为镜头。
  4. 对齐技巧：画好后，按 Ctrl + T (Mac: Cmd + T) 进入自由变换模式，在顶部选项栏，点击 水平居中 和 垂直居中 按钮来完美对齐。

步骤 3：使用图层样式添加质感

我们的图标还很“平”，是时候用图层样式让它立体起来！

  1. 在图层面板中,双击 相机主体 的图层（不是旁边的蒙版）。

  2. 这会弹出 图层样式 对话框，我们将依次添加几个效果：

    • 内阴影

      • 混合模式：正片叠底
      • 颜色：#000000 (黑色)
      • 不透明度：50%
      • 距离：5px
      • 大小：10px
      • 作用：在边缘制造暗部，产生凹陷感。

    • 内发光

      • 混合模式：滤色
      • 不透明度：30%
      • 颜色：#FFFFFF (白色)
      • 源：居中
      • 大小：15px
      • 作用：在内部边缘制造高光，增加光泽感。

    • 渐变叠加

      • 点击渐变色条,编辑一个从 #5BA0F2 到 #3A80D2 的线性渐变。
      • 角度：90度
      • 作用：让蓝色更有层次感，而不是单一的颜色。

    • 投影

      • 混合模式：正片叠底
      • 颜色：#000000
      • 不透明度：30%
      • 距离：5px
      • 大小：5px
      • 作用：给整个图标底部添加阴影，让它“贴”在背景上。

    • 点击 确定 后，你会看到相机主体立刻变得立体了。

步骤 4：添加镜头细节

  1. 双击 镜头 图层，为其添加图层样式。

    • 内阴影：设置一个比主体颜色更深的内阴影，模拟镜头的卡口。
    • 渐变叠加：使用一个从中心向外、由亮到暗的径向渐变，模拟镜头的玻璃反光。
    • 投影：给镜头加一个轻微的投影，让它和主体分离。

  2. 再添加一个小的白色正圆作为高光,同样使用 渐变叠加 或 内发光 效果。

第三部分：导出与多尺寸适配

你的图标在 512x512 下看起来很棒，但它需要在不同尺寸下都清晰。

导出为 PNG

这是最常用的图标格式,支持透明背景。

  • 点击 文件 > 导出 > 导出为 (File > Export > Export As)。
  • 在右侧的设置中：
    • 格式：选择 PNG。
    • 透明背景：务必勾选。
    • 你可以在这里直接导出 512x512 的版本。

生成多尺寸图标（iOS App Icon）

对于 App 图标，你需要一套不同尺寸的图片，PS 可以帮你一键完成。

  1. 准备画布：

    • 确保你的所有图标图层都在一个 图层组 里。
    • 将这个图层组命名为 AppIcon。
    • 按 Ctrl + Alt + C (Mac: Cmd + Option + C) 复制这个图层组。
    • 新建一个 1024 x 1024 像素的透明文档。
    • 将复制的图层组粘贴进去,并调整大小使其充满画布，这个 1024x1024 的文件是生成所有尺寸的源文件。

  2. 使用“生成器”：

    • 在 1024x1024 的文档中，点击 文件 > 导出 > 生成器存储... (File > Export > Generate Assets...)。
    • Photoshop 会自动识别这是一个 App Icon，并为你列出所有需要的尺寸（如 29px, 40px, 60px, 76px, 83.5px, 1024px 等）。
    • 在右侧面板中,你可以选择需要导出的尺寸，并设置输出文件夹。
    • 点击 存储，Photoshop 就会自动在指定文件夹里生成所有尺寸的图标文件，文件名也自动整理好。

进阶技巧与最佳实践

  • 保持简洁：好的图标是易于识别的，避免过多细节。
  • 风格统一：一套图标应使用统一的颜色、线条粗细和设计语言。
  • 栅格对齐：确保所有元素都对齐到像素网格上，避免边缘模糊，可以在 编辑 > 首选项 > 参考线、网格和切片 中设置网格。
  • 使用智能对象：你可以将一个矢量图标（从 AI 复制过来的）作为智能对象粘贴到 PS 中，这样可以无损缩放和编辑。
  • 善用路径操作：在形状工具选项栏，有“合并形状”、“减去顶层形状”、“相交形状”等路径操作，可以让你像玩积木一样快速构建复杂图形。

通过本教程,你已经掌握了在 Photoshop 中制作图标的核心流程：

  1. 新建透明文档，设置好尺寸。
  2. 使用形状工具 绘制基本图形。
  3. 利用图层样式 (内阴影、内发光、渐变、投影) 快速添加质感和立体感。
  4. 通过导出功能 生成最终文件，并利用“生成器”高效地创建多尺寸图标。

打开 Photoshop，尝试制作你自己的第一个图标吧！熟能生巧，多加练习，你很快就能创作出专业级的图标作品。