如何将 PSD 转换为 PNG（以及如何正确拼合图层）
为什么 PSD 转 PNG 比看起来要复杂
一个 PSD 文件并不是一张单一的图像。它更像一个复杂的“配方”：一堆图层、调整图层、蒙版、智能对象和混合模式，只有在像 Photoshop 这样强大的应用程序中处理时，它们才能组合成最终效果。如果你不理解这一点就尝试将 PSD 转换为 PNG，事情就很容易出错。你可能会发现本该透明的地方变成了一片纯白背景，因为字体图层没有被渲染而导致文字丢失，或者因为调整图层被忽略而出现奇怪的色偏。 PNG 是一种简单的光栅格式。它存储的是一个像素网格，而不是一长串指令。所以转换过程实际上是一个渲染任务。你要把 Photoshop 里的所有指令全部“压”成一个最终的像素网格，然后将这个网格保存为无损的 PNG 文件。你最终图像的质量完全取决于渲染过程如何处理源文件中包含的所有内容。 一旦你知道要找什么，最常见的失败就很容易发现。透明度经常被替换为纯白或纯黑的填充。像投影和发光这样的图层效果可能会完全消失。智能对象可能因为没有先被栅格化而以低分辨率渲染。而被剥离的色彩配置文件可能会让你的图像在校准过的屏幕上看起来褪色。提前了解这些坑，能为你省去大量的挫败感和返工时间。
在 Photoshop 中导出前拼合图层
如果你有 Adobe Photoshop，手动拼合和导出能让你拥有完全的控制权。关键的选择在于“拼合图像”和“合并可见图层”。它们听起来很像，但做的事情完全不同。 “拼合图像”（图层 > 拼合图像）会合并所有图层——甚至是隐藏的图层——并用白色填充所有透明区域。对于需要透明背景的 PNG 来说，这几乎永远是错误的选择。你应该使用“合并可见图层”（在 Windows 上是 Shift+Ctrl+Alt+E / 在 Mac 上是 Shift+Cmd+Option+E）。这个绝妙的快捷键会将所有可见图层的合并副本盖印到图层堆栈顶部的一个新图层中，而你原来的图层则原封不动地保留在下面。然后你就可以只导出那个新的合并图层，透明度也完好无损。 至于导出本身，别用那个老旧的“存储为”命令。直接去“文件 > 导出 > 导出为”。在那个对话框里，将格式设置为 PNG，并确保勾选了“透明度”复选框。对于屏幕显示，72 PPI 是标准。对于任何高分辨率的用途，比如打印或 Retina 显示屏，请使用 144 或 300 PPI。记住，PPI 值只是元数据；一个 2000×2000 像素、72 PPI 的画布导出的就是一个 2000×2000 像素的 PNG。物理尺寸并不会改变。 最后一个专业提示：如果你的 PSD 使用了为印刷设计的颜色配置文件，比如 CMYK 或 Adobe RGB 1998，你必须在导出用于网页之前将其转换为 sRGB。前往“编辑 > 转换为配置文件”，选择 sRGB IEC61966-2.1，并使用“相对色度”渲染方法，同时勾选“黑场补偿”。跳过这一步是导致精心设计的作品在网页浏览器中看起来暗淡褪色的头号原因。
使用 CocoConvert 在线转换 PSD 为 PNG
不是每个人都订阅了 Photoshop，就算你有，一个一个地转换一整个文件夹的 PSD 也是一件让人头脑发麻的任务。CocoConvert 的 [PSD 转 PNG 转换器](/convert/psd-to-png) 通过在服务器上处理渲染来解决这个问题。你只需上传 PSD 文件，就能得到一个正确拼合的 PNG，完全不需要在你的电脑上安装任何设计软件。 这个转换器会智能地合并所有可见图层，同时保留 Alpha 通道。这意味着你 Photoshop 文件中的透明区域在最终的 PNG 中仍然是透明的，不会出现那个可怕的白色背景。它能可靠地处理常见的图层类型，包括光栅图像、文本图层（会以文档的原始分辨率进行渲染），以及像色阶、曲线和色相/饱和度这样的基本调整图层。 使用起来非常直接。访问 /convert/psd-to-png，把你的 PSD 拖到页面上或点击“选择文件”，然后点击转换。该工具支持最大 50 MB 的文件。处理一个普通文件通常只需要 5-15 秒，之后你就会得到一个无损 PNG 输出的下载链接。 如果你要处理一批文件，比如一套图标或一个 UI 工具包，你可以一次性上传多个 PSD。每个文件都会被独立处理，你可以单独下载生成的 PNG，也可以把它们全部打包成一个 ZIP 压缩包下载。这能节省大量时间。
CocoConvert 处理不了什么（咱们实话实说）
自动化工具总有其局限性，提前了解这些限制比交付资产给客户后才发现要好得多。 智能对象是主要需要注意的地方。如果你的 PSD 包含嵌入或链接的智能对象，CocoConvert 会按照它们在文档中的尺寸来渲染，而不是它们自己的原始分辨率。举个例子，一个 4000 像素的矢量图形作为智能对象放置在一个 1000 像素的画布中，它将被渲染为 1000 像素。相对于画布你没有损失质量，但你也无法获得智能对象内部更高分辨率带来的好处。要实现这一点，你需要在 Photoshop 中先将智能对象栅格化（图层 > 智能对象 > 栅格化）。 3D 图层和视频图层是不支持的。任何包含这些图层的 PSD，在最终的 PNG 中这些特定图层将被省略，显示它们下面图层的内容。 一些复杂的混合模式可能会有点棘手。特别是“溶解”、“实色混合”以及某些基于亮度的模式，其渲染效果可能与 Photoshop 中略有不同。差异通常很小（每个通道几个颜色值的差别），但对于要求像素级精确的工作，你最好还是将输出结果与从 Photoshop 导出的参考图进行核对。 CMYK 模式的 PSD 文件在处理过程中会自动转换为 sRGB。这个转换使用标准的 ICC 配置文件，对于大多数网页和屏幕用途来说是准确的。但是，它无法完美匹配一个定制的、为印刷校准过的工作流程。如果你正在为胶版印刷准备资产，请自己在 Photoshop 中进行颜色转换以获得最大控制权。
选择正确的 PNG 设置：位深度和压缩
PNG 主要有两种类型，8 位和 24 位（通常称为 PNG-8 和 PNG-24），选择正确的类型非常重要。 PNG-24 是高质量选项。它能存储 1670 万种颜色，外加一个完整的 8 位 Alpha 通道以实现平滑的透明度。对于照片、复杂的渐变以及任何有微妙颜色变化的图像，你都需要它。CocoConvert 默认输出 PNG-24，这对于转换内容丰富的 PSD 文件来说是正确的选择。 PNG-8 是轻量级的替代方案。它仅限于 256 色的调色板，生成的文件要小得多——通常能小 60-70%。代价是在渐变上会出现可见的色带，并且透明度是“要么全透要么全不透”的（一个像素要么完全透明，要么完全不透明，没有中间状态）。PNG-8 只适用于像纯色图标这样边缘清晰的简单图形。要得到一个 PNG-8，你需要用像 Photoshop 这样的工具处理 PNG-24 的输出，或者使用像 pngquant 这样的命令行工具。 PNG 的压缩总是无损的，这意味着它从不降低图像质量。压缩级别的设置纯粹是在文件大小和保存文件所需时间之间做权衡。CocoConvert 会自动使用一个平衡的压缩级别。如果你对性能有极致追求，需要为网页项目获得绝对最小的文件大小，你可以用像 oxipng 或 pngcrush 这样的专用优化器再压榨出 10-20% 的空间。这些工具会在不改变任何一个像素的情况下，更积极地重新压缩数据。 最后，永远要问自己 PNG 是否是正确的格式。如果你不需要透明度，一个高质量的 JPEG 文件会小得多。对于需要透明度的现代网页应用，WebP 和 AVIF 提供了更优的压缩效果。但对于母版文件、设计交接以及任何可能需要再次编辑的文件，PNG-24 仍然是王道。
正确处理透明度：深入探讨
PNG 的透明度是通过 Alpha 通道实现的——这是一个额外的 8 位灰度图，其中每个像素被赋予一个从 0（完全透明）到 255（完全不透明）的透明度值。这正是带柔和边缘的投影和抗锯齿平滑的文本在任何背景上都看起来很棒的原因。 最常见的转换错误之一与预乘 Alpha 有关。在一个预乘图像中，颜色值已经与一个背景色混合了，如果查看它的应用程序期望的是直接 Alpha，这就会导致边缘出现暗色或亮色的光晕。任何跟图标上难看的黑边斗争过的人都懂这种痛苦。CocoConvert 输出的是直接 Alpha 的 PNG，这是网页浏览器和几乎所有现代软件所期望的标准格式。 为了确保你的透明度在转换后得以保留，请测试一下输出文件。最快的方法是在一个有色背景的网页浏览器中打开这个 PNG。只需创建一个极简的 HTML 文件，给 body 标签设置一个颜色，然后用一个 `<img>` 标签指向你的 PNG。如果透明部分显示了背景色并且边缘干净，那就没问题。如果你看到了一个白色的方框或者暗色的光晕，那就说明 Alpha 通道被处理错了。 另外，检查一下你 PSD 的“背景”图层——就是那个带锁形图标的默认图层。这个图层永远是 100% 不透明的。如果你需要在最终的 PNG 中有透明度，你必须要么删除那个背景图层，要么把它转换成一个普通图层（只需在 Photoshop 的图层面板中双击它然后点击确定）。CocoConvert 很智能，会检查这一点；如果一个 PSD 只有一个不透明的背景图层，输出的 PNG 将不会包含 Alpha 通道，这是正确且更高效的做法。
一个实用的工作流程，助你获得可重复的结果
如果你经常为一个 UI 工具包、品牌资料库或客户项目转换 PSD，一个一致的工作流程是你最好的朋友。它能节省时间，消除愚蠢的错误。 对于单个文件或小批量文件，并且手头有 Photoshop，那就坚持手动方法。使用“合并可见图层”盖印（Shift+Cmd+Option+E），再次检查颜色配置文件是 sRGB，然后使用“导出为”并启用透明度。每个文件用不了一分钟，而且能给你最大的控制权。 对于大批量文件或者你没有 Photoshop 的情况，就用 CocoConvert 的 [PSD 转 PNG 转换器](/convert/psd-to-png)。它能搞定繁重的工作。在上传之前，最好快速浏览一下你的 PSD，看看有没有复杂的智能对象或 3D 图层。如果像素级的精确度是绝对不能妥协的，那就先栅格化那些图层。下载批量处理完的文件后，在浏览器中抽查几个生成的 PNG，确认透明度看起来没问题。 对于生产环境的网页资产，文件大小就是一切。转换完成后，用像 oxipng 这样的优化器处理你的 PNG。一个简单的命令如 `oxipng -o 4 --strip safe *.png` 就能在压缩率和速度之间取得很好的平衡，并且能安全地剥离不必要的元数据。 最后，帮你的团队（也帮未来的你自己）一个忙：把你的设置记录下来。当你交接资产时，附上一句关于格式的简短说明。比如：“所有 PNG 均为 sRGB，PNG-24 格式，带透明度，已使用 oxipng -o4 优化”。这个简单的步骤可以避免那场“为什么这些颜色在我的屏幕上看起来很奇怪？”的对话，那纯粹是浪费大家的时间。