如何从 Figma 和 Photoshop 导出清晰锐利的图片

问题：设计清晰，导出模糊

您花了数小时在 Figma 或 Photoshop 中精心制作一个漂亮的设计。在您的画布上，一切都看起来像素完美。但是当您将其导出为 JPG 或 PNG 并在浏览器中查看时，它看起来却很柔和、模糊，或者就是……不对劲。

这是设计师们常遇到的一个烦恼。模糊通常是由以下两个原因之一造成的：以错误的分辨率导出，或使用了不正确的导出设置。本指南将为您提供一个在 Figma 和 Photoshop 中都万无一失的工作流程，以确保每次都能获得清晰的效果。

在现代高分辨率屏幕（如苹果的 Retina 显示屏）上获得清晰图片的关键是，以您实际打算显示的尺寸的两倍来导出图片。

例如，如果您的网站上有一个将以 1200px 宽度显示的英雄横幅，您应该从设计工具中以 2400px 的宽度导出它。然后，在您的 HTML 或 CSS 中，将其宽度限制为 1200px。

<!-- 图片文件是 2400px 宽，但我们告诉浏览器以 1200px 宽显示它 -->
<img src="my-banner-2400px.jpg" alt="一段描述性的替代文本" width="1200">

这种技术为浏览器提供了双倍的像素密度，从而在高分辨率显示屏上呈现出更清晰的图片。

Figma 是一个基于矢量的工具，这使得导出清晰的资源变得很容易。

分步指南：

选择画框或资源： 点击您想要导出的项目。它可以是一个图标、一个组件或整个画框。
打开导出面板： 在右侧边栏中，找到“Export”部分并点击 + 图标。
选择导出尺寸： 这是最重要的一步。在“Export”设置中，将 1x 更改为 2x。这告诉 Figma 以其画布尺寸的两倍来渲染该资源。对于像 Logo 这样非常重要的图形，您甚至可以选择 3x。
选择格式：
- JPG： 最适合照片和复杂图像。将质量设置为大约 80-90%。
- PNG： 最适合有锐利线条、文本或透明度的图形（如 Logo 和图标）。
- SVG： 对于简单的 Logo 和图标是最佳选择。由于 SVG 是矢量格式，它在任何尺寸下都会完美清晰。
点击“Export”： 保存文件。请记住，在将最终图片上传到您的网站之前，使用像我们的图片压缩器这样的工具对其进行压缩。

Photoshop 是基于栅格的，所以从一开始就在高分辨率的文档中工作非常重要。

这是推荐的网页图形工作流程。转到 文件 > 导出 > 导出为...。

设置尺寸： 在右侧的“图像大小”部分，确保宽度和高度是正确的。如果您遵循了 2 倍规则，您的文档应该已经是预期显示尺寸的两倍。
选择格式：
- JPG： 使用“品质”滑块。70-85 之间的值是一个很好的起点，可以在质量和文件大小之间取得良好平衡。
- PNG： 用于需要透明度的图像。如果您的调色板有限（像一个简单的 Logo），您通常可以勾选“较小文件(8位)”，以大幅节省文件大小。
确保颜色空间为 sRGB： 在对话框的底部，“颜色空间”下，确保**“转换为 sRGB”**被勾选。这是网页的标准颜色配置文件，可以防止您的颜色在浏览器中看起来暗淡。
点击“全部导出”： 保存您的图片。

对于较旧的 Photoshop 版本，文件 > 导出 > 存储为 Web 所用格式 (旧版) 仍然是一个强大的选项。

选择预设： 在右上角，选择一个预设，如“JPEG 高”或“PNG-24”作为起点。
调整品质： 对于 JPEG，使用“品质”滑块。大约 70-80 的值通常是完美的。对于 PNG，您可以选择 PNG-8（文件更小，颜色有限）和 PNG-24（质量更高，全彩）。
检查图像大小： 在右下角验证最终尺寸。
确认 sRGB： 确保“转换为 sRGB”选项被勾选。
点击“存储”。

通过始终以 2 倍尺寸导出，并确保您的资源在 sRGB 颜色空间中被正确压缩，您终于可以告别模糊的图片，并确保您的设计在网上看起来和在您的画布上一样清晰。