PS 苹果应用图标终极教程

本教程将分为以下几个部分：

ps苹果应用图标教程
（图片来源网络，侵删）
  1. 准备工作： 了解规范、准备素材。
  2. 第一步：创建画布 - 设置正确的尺寸和背景。
  3. 第二步：设计图标主体 - 创造你的视觉核心。
  4. 第三步：添加质感与景深 - 让图标从平面变立体。
  5. 第四步：最终调整与导出 - 完成并准备提交。

第一部分：准备工作

在打开 PS 之前，先做好这些准备工作,会让你事半功倍。

了解苹果官方规范 (至关重要！)

苹果对应用图标有非常严格的要求，不符合规范的图标会被 App Store 拒绝。

  • 尺寸： 你需要提供多个尺寸的图标，以适应不同设备,最重要的几个尺寸是：

    • 1024 x 1024 像素： 用于 App Store 展示,这是你设计的主画布。
    • 29 x 29 像素 & 40 x 40 像素： 用于设置和小部件。
    • 58 x 58 像素 & 80 x 80 像素： 用于 Spotlight 搜索。
    • 87 x 87 像素： 用于 iPhone 12 Pro 及更新机型的 App Library。
    • 其他还有 120x120, 180x180, 256x256 等。

  • 格式： 必须使用 PNG 格式（透明背景）或 JPEG 格式（不透明背景），苹果推荐使用 PNG。

    ps苹果应用图标教程
    （图片来源网络，侵删）

  • 内容要求：

    • 简洁： 图标是用户识别你的应用的第一个视觉元素,必须一目了然。
    • 避免文字： 除非你的品牌名是图标的核心识别部分（如 Spotify, Instagram），否则尽量避免使用文字，因为在小尺寸下,文字会变得模糊不清。
    • 避免照片： 不要使用真实照片,它们会显得廉价且缺乏设计感。
    • 风格统一： 图标应与你的应用内界面风格保持一致。

  • 关键特性： 从 iOS 15 / macOS Monterey 开始，图标在特定场景下（如 App Library）会有动态效果：

    • 动态效果： 当用户长按图标时,图标会轻微放大并带有视差效果。
    • 适配形状： 图标会自动适配到动态岛、小组件等不同形状的区域。

创建一个新文档

打开 Photoshop，点击 文件 > 新建 (或按 Ctrl+N / Cmd+N)。

  • 预设： 选择 Web。
  • 宽度/高度： 输入 1024 像素。
  • 分辨率： 72 PPI (这是用于屏幕显示的标准分辨率)。
  • 颜色模式： RGB 颜色。
  • 透明。

第二部分：第一步 - 创建画布与背景

虽然苹果官方要求图标是透明的,但我们在设计时需要一个背景来观察效果。

创建一个安全区域

为了确保设计元素不会被设备圆角或系统元素遮挡，我们需要一个“安全区域”。

  • 使用参考线

    • 点击 视图 > 新建参考线版面。
    • 在弹出的窗口中，选择 预设 > 移动设备，然后选择你的目标设备（如 iPhone 13 Pro）。
    • 这会自动为你创建安全区域参考线。你的核心设计元素应该完全位于这个区域内。

  • 手动绘制

    • 按住 Ctrl (Win) / Cmd (Mac) 并点击图层面板下方的 创建新图层 按钮,新建一个图层。
    • 选择 矩形选框工具 (M)，按住 Alt (Win) / Option (Mac) 并从画布中心向外拖动,创建一个正方形选区。
    • 保持选区激活，选择 编辑 > 描边，设置一个较粗的描边（20 像素），颜色选一个对比色,方便观察。
    • 按下 Ctrl+D (Win) / Cmd+D 取消选区。

添加背景

  • 新建一个图层,拖动到所有图层的最下方。
  • 填充一个你喜欢的颜色，或者使用渐变工具创建一个背景,方便你观察图标的对比度。

第三部分：第二步 - 设计图标主体

这是创意的核心部分，这里我们以设计一个简单的“相机”图标为例。

绘制基本形状

  • 新建图层： 在背景图层上方新建一个图层，命名为“相机主体”。
  • 选择形状工具： 在左侧工具栏选择 圆角矩形工具 (U)。
  • 设置圆角： 在顶部选项栏中，将 半径 设置为 50 像素。
  • 绘制： 在画布中心拖动，绘制一个正方形圆角矩形，按住 Shift 键可以绘制正方形。
  • 填充颜色： 在顶部选项栏中，为其填充一个主色，#4A90E2。

添加内部细节

  • 新建图层： 在“相机主体”图层上方新建一个图层，命名为“镜头”。

  • 绘制圆形： 选择 椭圆工具 (U)，按住 Shift 键,在圆角矩形中心绘制一个正圆。

  • 填充颜色： 为其填充一个深色，#2C5282。

  • 闪光灯：

    • 新建图层，使用 矩形工具 绘制一个小的竖条,放在镜头旁边。
    • 新建图层，使用 多边形工具 (U)，将边数设置为 3,绘制一个小的三角形作为对焦辅助灯。

使用形状布尔运算 (非破坏性编辑)

为了更灵活地编辑形状,我们可以使用路径的布尔运算。

  • 在绘制所有形状时，确保顶部选项栏的 路径操作 是 合并形状组件。
  • 这样，所有形状都会被合并成一个智能对象,方便你之后一起调整样式或修改形状。

第四部分：第三步 - 添加质感与景深

这是让你的图标从“图形”变成“应用图标”的关键一步,我们将使用图层样式。

添加内阴影

  • 选中你的“相机主体”图层，点击图层面板下方的 fx 按钮，选择 内阴影。
  • 目的： 增加立体感，让边缘看起来不那么“平”。
  • 参数调整：
    • 混合模式： 正片叠底
    • 不透明度： 50%
    • 角度： 90度 (从上往下打光)
    • 距离： 10像素
    • 大小： 20像素
    • 阻塞： 0%
    • 颜色： 选择一个比主体颜色深很多的颜色，#000000。

添加内发光

  • 继续在 fx 菜单中选择 内发光。
  • 目的： 让边缘有柔和的光晕,增加质感。
  • 参数调整：
    • 混合模式： 滤色
    • 不透明度： 30%
    • 颜色： 选择一个比主体颜色浅很多的颜色，#FFFFFF。
    • 来源： 居中
    • 大小： 15像素

添加外发光

  • 继续选择 外发光。
  • 目的： 让图标在深色背景下也能突出，并增加一点“光晕”效果。
  • 参数调整：
    • 混合模式： 滤色
    • 不透明度： 25%
    • 颜色： 选择一个与主体色相关的亮色，#6BB6FF。
    • 大小： 15像素

添加斜面和浮雕

  • 这是创造景深的核心，选择 斜面和浮雕。
  • 目的： 为图标的各个部分创建不同的“高度”,模拟真实物体的光照效果。
  • 参数调整：
    • 样式： 内斜面
    • 方法： 平滑
    • 深度： 200%
    • 方向： 上
    • `大小：** 10像素 (这个值决定了立体感的强弱)
    • `软化：** 2像素 (让边缘更柔和)
    • 高光模式： 滤色，不透明度： 75%
    • 阴影模式： 正片叠底，不透明度： 75%

添加颜色叠加

  • 目的： 方便你统一修改图标的颜色。
  • 参数调整：
    • 混合模式： 正常
    • 颜色： 选择你的主色。
    • `不透明度：** 100%

提示： 将所有这些图层样式应用到你的图标主体图层上，如果需要调整，只需双击该图层的 fx 图标即可重新打开样式面板。

第五部分： 第四步 - 最终调整与导出

检查小尺寸效果

这是最容易被忽略但最重要的一步！在 1024x1024 的画布上看起来完美的图标，在 29x29 像素时可能就是一团模糊。

  • 在 PS 中，点击 视图 > 实际像素 (或按 Ctrl+1 / Cmd+1) 来查看 100% 尺寸。
  • 然后缩小窗口，或者使用 缩放工具 (Z) 来预览图标在小尺寸下的样子。
  • 如果小尺寸下看不清：
    • 简化设计,减少细节。
    • 增加对比度。
    • 调整描边的粗细。

导出为 PNG

  • 合并所有可见图层：选中所有图层，右键点击，选择 合并图层 (或按 Ctrl+E / Cmd+E)。（注意：合并前确保你对所有设计都满意了，因为合并后无法单独编辑图层样式。）
  • 点击 文件 > 导出 > 导出为 (或按 Ctrl+Shift+Alt+S / Cmd+Shift+Option+S)。
  • 在右侧设置面板中：
    • 格式： 选择 PNG。
    • 透明： 确保 透明 选项是勾选的。
    • 文件大小： 你会看到预览和文件大小，1024x1024 的 PNG 通常在 50KB - 200KB 之间是比较合理的。
  • 点击 导出，选择保存位置,完成。

使用 Xcode 或第三方工具生成其他尺寸

你不需要手动画所有尺寸,苹果提供了一个自动工具：

  • App Icon Set Creator (推荐)： 这是一个免费的第三方 Mac 应用，你只需要拖入你的 1024x1024 PNG,它就能自动生成所有需要的尺寸并整理好。
  • Xcode： 在 Xcode 中创建一个新项目，它会提供一个 AppIcon.appiconset 文件夹，你只需要把 1024x1024 的 PNG 拖进去，Xcode 会自动处理。

总结与高级技巧

  • 保持简单： 时刻记住小尺寸的显示效果。
  • 善用智能对象： 在导入或绘制复杂图形时，右键点击图层选择 转换为智能对象,这样可以无损缩放和编辑滤镜。
  • 寻找灵感： 多去 Dribbble 和 Behance 搜索 "App Icon",看看优秀的设计师是如何构思和执行的。
  • 考虑动态效果： 虽然我们无法在 PS 中直接制作动态效果，但在设计时可以思考一下，你的图标在轻微倾斜或放大时，各个部分是否协调，一个简洁、对称的设计更容易适配动态效果。

希望这份详细的教程能帮助你成功设计出出色的苹果应用图标！祝你设计愉快！