EP10. “色彩空间、动画、切片与特效滤镜”
🔒 登录后可标记已读这篇笔记是 Photopea 系列的最后一篇，讲色彩空间（Color Spaces）的概念、怎么做动画（GIF/APNG/WEBP）、切片（Slices）网页导出、以及两个进阶滤镜——透视点滤镜（Vanishing Point）和模糊画廊滤镜（Blur Gallery）。 前置知识：先看过 EP01-EP09，熟悉图层和基本工具操作。
重点内容
色彩空间（Color Spaces）
核心概念：色彩空间的作用是"不管用什么设备捕捉或显示，都能让颜色看起来始终一致"。
绝对色彩 vs 设备专属色彩：CIELAB 和 CIEXYZ 代表现实世界里的绝对颜色；RGB 和 CMYK 则是设备专属的色彩空间，会因设备制造商不同而有差异。
ICC 描述档（ICC Profiles）：这是一套"怎么把某个色彩空间 X 的数值转换成 CIELAB、再转换回来"的指令集——用来解决设备之间的兼容性问题，让"设备专属颜色"和"绝对色彩标准"之间能互相转换。
📌 关键提醒：单纯说一张图是 "RGB" 或 "CMYK" 是不够的——没有搭配具体的 ICC 描述档，这个说法本身没有意义，因为不知道该怎么把这些数值转换成绝对色彩。
sRGB 标准：sRGB 是最普及的网页标准色彩空间，CSS 颜色规范和一般数位图像储存都是用这个标准。
建立动画（Animations）
Photopea 能把文件的图层转换成帧，做出 GIF、APNG、WEBP 格式的动画。
基本建立方式：图层名称前加上 _a_ 前缀——每个带这个前缀的图层会各自变成一帧，其他没加前缀的图层则会出现在每一帧里。
设置每一帧的持续时间：默认每帧显示 100 毫秒，想自定义的话，在图层名称后面加逗号和毫秒数（例如 _a_dog,500 会显示 500 毫秒）。
[截图：Layers 面板里带 _a_ 前缀命名的图层，以及 Timeline 面板显示的动画帧序列]
合并多组动画同时播放：把不同动画的帧各自组织进独立的文件夹，用 Layer → Animation → Merge 命令——这个功能会找出全部文件夹，把各自的帧合并到同一条时间轴上，让多组动画能同时播放。
开启既有的动画文件：汇入动画文件时，Photopea 会自动把每一帧转换成带对应命名的图层，不用手动调整命名就能直接开始编辑。
切片（Slices）：网页导出
用途：切片是文件上的矩形区域标记，能各自独立导出成图片文件——用一次点击就能导出整份文件，每个切片会各自变成一个独立的图片文件（比如 PNG 或 JPG）。
Auto Slices（自动切片）：Photopea 会自动生成灰色的自动切片来确保整份文件被完整覆盖——这些自动切片会随着你新建或修改手动切片（显示成蓝色）而动态调整。
建立与管理：Slice 工具能点住拖拉画出矩形区域；Slice Select 工具能选取、重新定位、调整大小、或删除既有的切片。吸附功能能帮助切片对齐参考线、网格、和文件边界。
[截图：文件上手动切片（蓝色）和自动切片（灰色）的区域标示对比]
导出流程：把带切片的文件导出成 PNG、JPG、或 GIF 时，Photopea 会导出一个 ZIP 压缩包——里面包含文件里每个切片对应的图片，还附带一个 HTML 文件，可以直接当成这个项目的网页来用。
💡 这个功能特别适合快速准备网页用的切图素材。
透视点滤镜（Vanishing Point Filter）
用途：处理图片里的透视问题——照片是平的，加进新元素（贴纸、文字、涂鸦）时通常只是叠加在图片上方，没有考虑角度。这个滤镜解决了"想把内容以有角度的方式放进画面"的问题，比如把内容加到有透视角度的墙壁、地板、建筑物表面上。
核心概念：滤镜用"平面（Planes，矩形的 3D 区域）"运作——可以是主平面（main planes），也可以依附在父平面旁边（adjacent planes）。一张图片里可以有好几组相关联的平面，叫做"relations（关系组）"。
主要功能：
- 建立平面：用 Move 工具选取和操作平面；Crop 工具能建立新的主平面；按住 Ctrl 拖拉边缘能建立依附的平面
- 绘图工具：提供两种——Brush 工具能直接绘画并自动做透视调整，Stamp 工具能在不同平面表面之间做仿制复制
- 内容变形：用 Marquee 工具选取矩形区域后能跨平面变形，或把剪贴板内容贴进选中的平面
⚠️ 局限性：这个滤镜要求图片尺寸没有被修改过——裁切过、中心点被改动过的图片，没办法正确代表一个有效的场景投影关系。
[截图：Vanishing Point 滤镜窗口，显示建立好的透视平面网格]
模糊画廊滤镜（Blur Gallery Filter）
能在图片不同区域套用不均匀的模糊效果，用控制点来实现——不是整张图统一模糊，而是放置多个带各自模糊参数的控制点，做出更精细的效果。
操作方式：Filter → Blur Gallery → Field Blur，界面像一个专属工具，能用鼠标选取模糊控制点、重新定位、按 Delete 删除选中的点。每种模糊类型都有各自的开关。
5 种模糊类型：
| 类型 | 效果 |
|---|---|
| Field Blur（场景模糊） | 单点模糊，强度可调整，多个点能做出更进阶的效果 |
| Iris Blur（光圈模糊） | 椭圆中心是零模糊，往椭圆轮廓边缘逐渐增强到设定的数值 |
| Tilt-Shift（移轴模糊） | 建立一条中央轴线，轴线上模糊最少，往外逐渐增强 |
| Path Blur（路径模糊） | 建立带方向性的线段，两端各自有独立的控制点，能设定不同的速度 |
| Spin Blur（旋转模糊） | 在椭圆区域内套用旋转运动效果 |
💡 能组合多种模糊类型一起用，套用最终效果前可以在顶部菜单调整各项参数。
[截图：Blur Gallery 界面，显示 Field Blur 的模糊控制点及套用效果的预览画面]
常见错误
- ❌ 只说一张图是 "RGB" 就以为颜色描述完整了——没有搭配具体的 ICC 描述档，光说 RGB/CMYK 这类色彩空间名称是不够精确的，设备之间显示结果可能有落差
- ❌ 做透视贴图（比如把 logo 贴到有角度的墙面上）用一般的 Free Transform 硬凑角度——这类需要精确透视关系的场景该用 Vanishing Point Filter，用平面（Planes）概念处理会更准确
- ❌ Vanishing Point Filter 用在裁切过的图片上——图片尺寸被改动过、中心点跟原始拍摄场景不一致时，没办法正确代表有效的透视投影关系
- ❌ 需要做出照片式的浅景深模糊效果，却用了整张图统一的模糊滤镜——想要局部区域深浅不一的模糊效果，该用 Blur Gallery 里的 Field Blur 或 Iris Blur，用控制点精细控制
- 💡 想快速切好网页要用的图片素材，善用 Slices 功能一次导出，会附带一个能直接当网页用的 HTML 文件，省去自己手写排版的功夫
Sources
官方文档：
- Photopea Learn: Color Spaces — https://www.photopea.com/learn/color-spaces
- Photopea Learn: Animations — https://www.photopea.com/learn/animations
- Photopea Learn: Slices — https://www.photopea.com/learn/slices
- Photopea Learn: Vanishing Point Filter — https://www.photopea.com/learn/vanishing-point
- Photopea Learn: Blur Gallery Filter — https://www.photopea.com/learn/blur-gallery