PS做icon图标教程，新手如何快速上手？

Photoshop 制作图标完整教程

这份教程将分为以下几个部分：

1. 准备工作：设置与画布
2. 绘制方法：从基础形状到复杂图形
3. 添加质感与细节
4. 导出与优化
5. 进阶技巧与注意事项

第一部分：准备工作：设置与画布

在开始绘制之前，正确的设置是成功的一半，图标设计强调像素级的精准。

新建文档

• 打开 Photoshop，点击 文件 > 新建 (或按 Ctrl + N / Cmd + N)。
• 尺寸设置：
  • Web/App 图标：通常建议从较大的尺寸开始绘制，方便后期缩小。1024 x 1024 像素 是一个很好的起点。
  • 小图标 (如 16x16, 32x32)：如果确定图标很小，可以直接用小尺寸,但放大后可能会模糊。
• 分辨率：对于屏幕显示，72 PPI 即可，如果需要打印，则使用 300 PPI。
• ：选择 “透明” (Transparent)，这样你的图标背景就是透明的,可以放在任何颜色的背景上。

开启像素网格与参考线

这是 PS 做图标的核心设置,能帮你对齐元素。

• 显示网格：
  • 菜单栏：视图 > 显示 > 网格 (或按 Ctrl + ')。
  • 菜单栏：视图 > 显示 > ，确保“网格”被勾选。
  • 技巧：双击网格工具（或 Ctrl + K 打开首选项 > 参考线、网格和切片），可以设置网格大小，10 x 10 像素,这样更容易对齐。
• 开启像素对齐：
  • 菜单栏：视图 > 对齐 (或按 Ctrl + Shift + ;)。
  • 这能确保你的形状和画笔边缘总是吸附在像素网格上,避免出现模糊的半像素边缘。

设置形状工具选项

这是保证图标边缘锐利的关键。

• 选择 形状工具 (U)。
• 在顶部的选项栏中，确保你选择了 “像素” 工作模式（而不是“路径”或“形状”）。
• 勾选 “对齐边缘” 选项。

第二部分：绘制方法：从基础形状到复杂图形

绘制基础图标 (以相机图标为例)

步骤 1：绘制主体

• 选择 矩形工具 (U)。
• 在画布上拖动，绘制一个正方形作为相机主体，按住 Shift 键可以绘制正方形。

步骤 2：绘制镜头

• 选择 椭圆工具 (U)。
• 在相机主体中央，按住 Shift 键拖动,绘制一个正圆作为镜头。

步骤 3：绘制取景器

• 选择 圆角矩形工具 (U)。
• 在相机顶部绘制一个小的圆角矩形，如果位置不对，可以用 移动工具 (V) 调整。

步骤 4：使用路径查找器进行布尔运算 这是创建复杂图形的利器。

• 在图层面板中，按住 Ctrl (或 Cmd) 键，点击所有形状图层,将它们全部选中。
• 点击图层面板右上角的菜单按钮，选择 “合并形状组件”。
• 现在你可以在顶部选项栏的 “路径操作” 中选择不同的模式：
  • 减去顶层形状：选中镜头图层，然后选择此模式，再点击“合并形状组件”，就可以在相机主体上“挖”出一个洞。
  • 与形状区域相交：只保留所有形状重叠的部分。
  • 排除重叠形状：只保留不重叠的部分。

第三部分：添加质感与细节

一个优秀的图标不仅轮廓清晰,还有精致的细节。

使用图层样式

图层样式是非破坏性添加效果的最佳方式。

• 内阴影：用来制造凹陷感，在相机主体上添加一个深色的内阴影,可以模拟厚度。
• 内发光：用来制造发光或聚光效果，在镜头中心添加一个白色的内发光,模拟高光。
• 渐变叠加：为形状添加颜色变化，为相机主体添加一个从深灰到浅灰的线性渐变,增加立体感。
• 描边：为形状添加轮廓。

手绘细节

对于更复杂的细节,可以使用画笔工具。

• 选择 画笔工具 (B)。
• 在画笔设置中，选择一个硬边圆形画笔,大小根据需要调整。
• 新建一个图层,在需要的地方手动绘制高光或阴影。
• 技巧：为了保持边缘锐利，可以在绘制前按住 Alt 键，在图层面板中点击该图层，创建一个剪贴蒙版，这样你的画笔就只会作用于下方的形状,不会画出边界。

使用智能对象

为了方便后期调整和避免像素损失,可以将图层转换为智能对象。

• 右键点击图层 > “转换为智能对象”。
• 这样，即使你多次缩放或变形这个图层,它也不会损失原始质量。

第四部分：导出与优化

图标绘制完成后，需要导出为不同格式,以适应不同场景。

导出为 PNG (透明背景)

这是最常用的图标格式。

• 文件 > 导出 > “导出为” (快捷键 Ctrl + Shift + Alt + S / Cmd + Option + Shift + S)。
• 在右侧设置面板中：
  • 格式：选择 PNG。
  • 透明：确保勾选。
  • 文件大小：可以拖动滑块来平衡质量和文件大小。
  • 你可以在这里直接生成不同尺寸的图标,非常方便。

导出为 SVG (矢量图标)

如果图标是纯色或渐变的，导出为 SVG 格式会更好,因为它可以无限放大而不失真。

• 重要前提：你的所有图层都必须是矢量形状，如果你使用了画笔或像素操作，就无法导出为 SVG。
• 文件 > “导出” > “导出路径到文件”。
• 在弹出的窗口中：
  • 路径：选择“工作路径”或你创建的路径。
  • 文件名：为你的图标命名。
  • 保存类型：选择 *“SVG (.SVG)”**。
  • 点击“保存”。

生成 App Icon (iOS/Android)

如果你需要为 App 生成各种尺寸的图标包，可以使用 Photoshop 的功能。

• 文件 > “生成” > “图像资源”。
• 在你的图层命名时，使用特定的后缀，icon.png@2x 或 icon.png@3x，PS 会自动识别并为你生成对应分辨率的文件。
• 对于 iOS，可以使用 文件 > “自动” > “生成设备预览”，它会根据你的设计自动生成所有 iOS 所需的图标尺寸。

第五部分：进阶技巧与注意事项

保持简洁

图标的精髓在于识别性，避免过多细节,一个简单的形状或符号往往比一个复杂的画面更有效。

统一风格

如果你为一套 App 或网站设计多个图标,请保持它们的设计语言一致。

• 线条粗细：所有图标的描边宽度是否相同？
• 圆角大小：所有圆角矩形的圆角半径是否统一？
• 配色方案：是否遵循了相同的颜色规则？
• 透视与光影：所有图标的光源方向是否一致？

考虑不同尺寸

在绘制时，时刻想着你的图标在 16x16 像素时是否还能看懂，在小尺寸下，细节会丢失,所以形状的辨识度至关重要。

善用参考

多观察优秀的图标设计（例如在 Dribbble, Iconfinder 网站上学习），分析它们的构成、颜色和光影，然后尝试模仿,最终形成自己的风格。

制作图标是一个熟能生巧的过程，从这篇教程开始，尝试用 PS 制作一个简单的图标，比如一个心形、一个房子或者一个搜索图标，记住核心要点：像素对齐、形状工具、图层样式、简洁统一,祝你创作愉快！