渐变映射指南

传统的色彩滤镜往往令人失望，因为它们会在整张图像上应用统一的色调。当你叠加简单的蓝色或红色调时，会使高光部分的纯白变得浑浊，并冲淡阴影部分的深黑。这种平铺直叙的方法会削弱对比度，使你的图像看起来平庸且缺乏专业感。

为什么你需要这个工具

传统的色彩滤镜往往令人失望，因为它们会在整张图像上应用统一的色调。当你叠加简单的蓝色或红色调时，会使高光部分的纯白变得浑浊，并冲淡阴影部分的深黑。这种平铺直叙的方法会削弱对比度，使你的图像看起来平庸且缺乏专业感。

渐变映射通过将色彩分级与亮度分离，解决了这个问题。它不是简单地覆盖图像，而是根据不同的亮度级别分配特定的颜色。它将暗部映射为一种颜色，亮部映射为另一种颜色，中间调则在两者之间平滑过渡。这在保留图像结构对比度的同时，让你能够建立起统一且极具风格化的配色方案。无论你是想创造电影般的戏剧感、复古的双色调图形，还是微妙的冷暖色调过渡，渐变映射都能让你精确控制色彩与光影的交互方式。

你需要准备什么

在开始调色之前，你必须准备好源图像并规划好创意方向。libvips 需要特定的文件类型和大小才能正确处理你的图像。

要使用渐变映射工具，你需要满足以下条件：

兼容的源文件：你的图像必须是 JPG、JPEG、PNG 或 WEBP 格式。该工具不支持原始相机文件或矢量图形。 文件大小限制：你的图像文件不得超过 20MB。任何超过 20MB 阈值的文件都超出了支持范围，将无法处理。 现代浏览器：你需要使用更新后的浏览器来渲染实时预览并处理本地任务。 配色策略：你应该提前确定配色目标。对于标准的摄影调色，选择深冷色作为阴影，浅暖色作为高光。对于图形双色调，选择高对比度的互补色。 单文件工作流：该工具一次处理一个文件。它不支持批量处理，因此你需要准备好逐个上传和下载文件。

分步说明

按照以下步骤对图像应用渐变映射，实现专业的色彩分级。

### 第 1 步：验证并准备文件 在开始之前检查你的图像文件。确保它以支持的格式保存：JPG、JPEG、PNG 或 WEBP。检查文件属性以确认文件大小在 20MB 以下。如果文件较大，则超出了支持限制，你必须在外部编辑器中调整大小后再上传。

### 第 2 步：加载图像 打开浏览器并导航到渐变映射工具。点击上传区域或直接将文件拖入浏览器窗口。工具将读取文件并在屏幕上显示你的原始图像。

### 第 3 步：定义阴影和高光颜色 找到渐变控制条。该条代表图像的亮度光谱，从左侧的绝对黑色到右侧的绝对白色。* 点击左侧色标（阴影）并选择你的深色。此颜色将替换图像中最暗的像素。 点击右侧色标（高光）并选择你的浅色。此颜色将替换最亮的像素。

### 第 4 步：调整中间调并添加色标 要创建更复杂的色彩分级，点击渐变条中间的任意位置以添加中间调色标。选择一种过渡色，连接阴影和高光之间的空隙。你可以左右拖动这些色标来控制颜色过渡的速度。

### 第 5 步：调整混合度和强度 使用不透明度或混合滑块来控制原始图像颜色的显示程度。将滑块设置到最大可产生纯粹的双色调效果。降低滑块可将渐变映射与图像的原始颜色混合，产生更自然、微妙的色彩分级。

### 第 6 步：处理并下载文件 一旦对浏览器中的预览感到满意，点击处理按钮。libvips 将把色彩映射应用到全分辨率图像上。处理完成后，点击下载按钮将新图像文件保存到你的设备。

工作原理

libvips 使用客户端 WebAssembly 驱动的模式处理你的图像。这种架构在浏览器内本地处理所有内容，在不牺牲最终图像质量的前提下提供响应迅速的编辑体验。

当你加载 $2 文件时，浏览器会处理交互式用户界面并渲染实时预览。它通过在浏览器内存中创建图像的低分辨率表示来实现这一点。当你调整渐变条上的色标时，浏览器会即时计算颜色变化。这种本地处理方式让你无需等待服务器在每次微调后重新渲染图像，即可看到即时反馈。

在底层，渐变映射依赖于像素亮度的数学转换。libvips 会逐像素分析你的图像文件。它首先计算每个像素的亮度值，将红、绿、蓝颜色通道转换为 0（纯黑）到 255（纯白）之间的单一灰度值。

一旦 libvips 确定了像素的亮度值，它就会参考你的自定义渐变映射。如果像素的亮度值为 64（代表深阴影），libvips 会找到位于渐变条 25% 处的颜色。然后，它会用这个新的映射颜色替换像素的原始颜色。

当你点击处理按钮以完成图像时，客户端 WebAssembly 驱动的引擎会在全分辨率文件上执行最终的逐像素重映射。如果文件较小，这可能完全在浏览器内完成。对于更大或更复杂的文件，libvips 会在本地处理以重建图像文件结构。这种客户端方法确保了高分辨率输出与你的预览一致。由于同时映射数百万像素需要大量内存，任何超过 20MB 的文件都超出了支持限制，无法由 libvips 处理。

遇到问题时

了解错误发生的原因有助于你在转换过程中避免并快速修复问题。

### 文件无法上传或处理 如果文件无法上传，最常见的原因是它超过了 20MB 的支持限制。libvips 强制执行此限制。超过支持大小的文件将不会被处理。如果你尝试上传大于 20MB 的文件，libvips 会阻止上传，以防止浏览器标签页冻结或内存耗尽。要解决此问题，请在上传前使用图像查看器缩小图像尺寸。

### 色彩分级看起来有块状或像素化 如果输出文件显示出难看的块状颜色阶梯而不是平滑的渐变，则说明你的原始文件压缩率过高。低质量的 JPG 文件包含压缩伪影，压缩算法为了节省空间将相似的像素归为平坦的块。由于这些块具有统一的亮度值，libvips 会将它们映射为完全相同的颜色。这会突出压缩伪影，使其清晰可见。要解决此问题，请始终上传高质量、低压缩的文件，如 PNG 或高比特率的 JPEG。

### 图像看起来平淡且浑浊 如果调色后的图像看起来灰暗、被冲淡或缺乏对比度，则说明你的源图像动态范围较窄。如果照片是在平淡的阴天光线下拍摄的，它就不会有很深的阴影或很亮的高光。由于几乎所有像素都落在中间亮度范围内，libvips 只会应用渐变映射的中间颜色。你选择的阴影和高光颜色会被忽略，因为这些亮度级别在源文件中不存在。你可以通过在上传前增加源图像的对比度来解决此问题。

### 颜色看起来反转且奇怪 如果你的图像看起来像胶片底片，说明你将颜色映射到了渐变条的错误两端。libvips 将渐变的左侧映射到阴影（暗像素），右侧映射到高光（亮像素）。如果你在左侧放置浅色，在右侧放置深色，libvips 会使你的阴影变亮，高光变暗。要纠正此问题，请反转色标的位置。

获得最佳效果的技巧

为了从 libvips 获得最高质量的色彩分级，请在工作流中应用这些专业实践。

先分析直方图：查看源图像，确保它具有健康的暗部、中间调和亮部分布。具有深阴影和明亮高光的图像为 libvips 提供了更广泛的亮度映射范围，从而产生更生动、动态的色彩分级。 保持高光颜色明亮，阴影颜色深暗：对于自然的摄影调色，始终选择亮度值较低的阴影颜色（如深海军蓝、森林绿或炭灰色）和亮度值较高的高光颜色（如象牙白、浅黄或柔和的桃色）。这保持了照片自然的色调层次。 图形设计使用 PNG 文件：如果你要将渐变映射应用到徽标、文本或矢量风格插图，请以 PNG 格式加载 $2 文件。PNG 使用无损压缩，保留了清晰的边缘。这允许 libvips 锐利地映射颜色，而不会在形状周围产生模糊的光晕。 限制色标数量：虽然在渐变中添加五六种不同的颜色很诱人，但使用过多的色标会使图像看起来混乱且浑浊。坚持使用两到三种颜色以获得更简洁、专业的观感。 上传前检查文件大小：请记住，任何超过 20MB 的文件都超出了支持限制。将图像保存为 72 或 150 DPI 以供网页使用，在保持高视觉质量的同时减小文件大小。

常见问题解答

### 为什么应用渐变映射后我的图像变成了一种平坦的单一颜色？ 当源图像缺乏对比度时会发生这种情况。如果你的文件是白墙或深色夜空的照片，几乎所有像素都共享相同的亮度值。libvips 读取这些相同的值并将它们映射到渐变上的单个点，从而将整个图像变成一种平坦的颜色。选择具有更广泛高光和阴影范围的图像来解决此问题。

### 为什么该工具拒绝让我一次上传多张图像？ libvips 旨在单独处理图像，以保持性能并防止浏览器内存过载。由于该工具不支持批量处理，你必须逐个上传、配置和下载每个文件。

### 为什么下载文件中的颜色看起来与浏览器中的预览略有不同？ 浏览器中的预览使用本地硬件加速来为你提供快速、实时的编辑近似值。当你点击下载时，libvips 会对像素数据进行精确、未压缩的渲染。如果你的浏览器使用的颜色配置文件与操作系统的默认图像查看器不同，可能会出现细微差异。

### 为什么我的上传因大小错误而失败？ 该工具的文件大小限制严格为 20MB。如果你的图像文件为 20.1MB 或更大，则超出了支持限制。你必须压缩或调整图像文件的大小，使其低于 20MB 的阈值，libvips 才会接受它。

结论

渐变映射是一种高效且强大的技术，用于在图像中建立一致的视觉风格。通过将自定义颜色直接映射到文件的亮度值，你可以创建令人惊叹的双色调和电影级色彩分级，同时保留主体的自然对比度。保持文件在 20MB 限制内，选择高对比度的源图像和合理的配色方案，以从客户端 WebAssembly 驱动的 libvips 中获得最佳效果。立即开始尝试不同的颜色组合，改造你的照片和图形。