Photoshop（PS）是 Adobe 旗下的图像处理老牌工具。在界面设计领域它已经被 Figma、Sketch 取代，但在网页设计流程里它依然不可替代：位图修图、复杂图层样式、照片精修、Web 切图输出，这些场景 PS 仍是首选。这篇指南按尧图团队的真实工作流，讲清楚切图、图层样式、智能对象、Web 导出四块。它不是 PS 入门教程，而是面向网页设计师的实战手册。

一、切图：从设计稿到可用资源

切图（Slicing）是把设计稿里需要单独保存为图片的区域切出来，输出成开发可用的资源文件。虽然现在多数图标用 SVG、布局用 CSS 实现，但 banner、照片、复杂渐变背景仍需切图。

切图三种方式

• 切片工具（Slice Tool，快捷键 C）：在画布上拖出矩形切片区域，每个切片独立导出。适合规则排列的 banner、卡片图。切片可以命名，导出时按命名生成文件。
• 图层直接导出：右键图层 > Quick Export as PNG，或菜单 File > Export > Export As，按图层单独导出。比切片灵活，适合单独图标、按钮。
• 生成器 Generator：菜单 File > Generate > Image Assets 开启，把图层或组命名成 icon-home.png，PS 会自动在 assets 文件夹里生成对应文件。改图层内容时自动更新，最适合同步维护多个切图。

尧图团队用得最多的是 Generator。把所有要切的图层放进一个组，组命名 导出/，组内图层命名 banner-home.jpg、icon-card@2x.png，开启 Generator 后自动在源文件旁生成 assets 文件夹。改设计稿时切图自动更新，不需要每次手动重新切。

二、图层样式：用样式实现可复用效果

图层样式（Layer Style）是 PS 的核心能力之一。双击图层打开样式面板，可以添加投影、内阴影、外发光、内发光、斜面浮雕、光泽、颜色叠加、渐变叠加、图案叠加、描边十种效果。这些效果都能保留为可编辑样式，随时调整。

网页设计常用样式

• 投影 Drop Shadow：卡片、按钮的悬浮感。网页常用参数：角度 90°、距离 4px、扩展 0%、大小 12px，颜色用 rgba(0,0,0,0.08) 模拟柔和阴影。
• 渐变叠加 Gradient Overlay：按钮背景、banner 蒙层。线性渐变角度 90° 或 135° 最自然，颜色用品牌色到深色的过渡。
• 描边 Stroke：边框效果。位置选「内部」避免尺寸变化，大小 1-2px，颜色用浅灰。
• 颜色叠加 Color Overlay：快速给图层铺色，比填充更灵活，不破坏原内容。

图层样式可以保存为样式预设。在样式面板（Window > Styles）里点击新建，把常用样式存起来。尧图团队的样式预设里有「卡片柔和阴影」「按钮渐变」「聚焦描边」等命名预设，新项目直接套用，保证全站阴影风格一致。

三、智能对象：保护原图不被破坏

智能对象（Smart Object）是 PS 里保护图层内容的机制。右键图层 > Convert to Smart Object，图层会变成一个嵌入的独立文件，缩放不失真，所有滤镜都变成可调整的智能滤镜。

智能对象的三个使用场景

• 缩放保护：把照片转成智能对象后再缩放，无论放大缩小都不损失像素。普通图层缩小后再放大就糊了，智能对象不会。
• 智能滤镜：智能对象上应用滤镜（高斯模糊、色彩平衡等）会保留参数，随时双击修改。普通图层滤镜是破坏性的，应用后就固化了。
• 多处置用：智能对象可以复制到多处，改一处全部同步更新。类似 Figma 的组件实例。尧图做 banner 模板时把主图做成智能对象，复制到多个尺寸的 banner 里，换主图时只改一处。

网页设计里凡是 imported 进来的素材（照片、截图、icon），尧图团队一律先转智能对象再处理。这样后续调整尺寸、加滤镜都不会破坏原图，需要回退到原始素材时也能恢复。

智能对象 vs 普通图层

智能对象占内存更大，保存文件更大，但保护性强。普通图层轻量但破坏性。原则：导入素材、需要反复调整的转智能对象；自己画的形状、临时调整的用普通图层。

四、Web 格式导出：选对格式与压缩

网页对图片体积敏感，导出格式与压缩参数直接影响加载速度。PS 的导出菜单 File > Export > Export As 或 Save for Web（旧版）提供格式与质量选择。

四种格式选择

• JPG：照片、渐变丰富的图。有损压缩，不支持透明。质量 70-80 是网页常用区间，肉眼看不出明显损失，体积比 100 质量小一半。
• PNG-24：需要透明背景的图，带 alpha 通道。无损，但体积大。适合图标、按钮、带阴影的元素。
• PNG-8：色彩简单的图，256 色限制。体积小，适合纯色图标、色块。但渐变会出阶梯。
• SVG：矢量格式，不是 PS 强项但能导出。适合图标、logo，放大无损、文件极小。复杂位图不能存 SVG。

现代网页推荐优先 WebP 格式，比 JPG/PNG 体积小 25-35%，但需要 PS 插件（如 WebP Shop）或在线转换工具支持。尧图团队的工作流：PS 导出 PNG/JPG，再用 Squoosh 或 TinyPNG 压缩一遍，最后按需转 WebP。

导出参数建议

• 2x 倍图：Retina 屏需要 2 倍尺寸。在 Export As 面板勾选 2x，一次导出 1x 与 2x 两份。
• 质量：JPG 设 75，PNG-24 不需要质量参数（无损），PNG-8 选 Adaptive（自适应）色彩。
• 色彩空间：网页用 sRGB。菜单 Edit > Convert to Profile > sRGB，导出前先转换，避免出现色彩偏移。
• 元数据：导出时去掉版权、相机信息等元数据，文件更小。Export As 面板里 Metadata 选 None。

五、实战技巧总结

1. 用画板管理多尺寸。PS 的画板（Artboard）功能可以在一个文件里放多个尺寸的画板，比如同时设计 1920 桌面 banner、750 移动 banner。菜单 Layer > New > Artboard，每个画板独立导出，不用开多个文件。

2. 用批处理批量加水印。菜单 Window > Actions 录制一个「加水印」动作，然后用 File > Automate > Batch 对整个文件夹的照片批量应用。尧图做案例展示时给所有照片加 logo 水印就用这招。

3. 用 Generator 同步切图。前面提过的 Generator 是切图神器。把图层命名为 格式名.扩展名 就会自动导出。比如 icon-home@2x.png 会按 2x 导出 PNG。改图层时切图实时更新，比手动切效率高一个数量级。

4. 用脚本自动化重复任务。菜单 File > Scripts 支持运行 JavaScript 脚本。尧图团队有一个脚本，把当前文档的所有顶层图层自动导出为 PNG 到指定文件夹。批量导出图标时省下大量手动操作。

六、PS 在网页设计流程里的定位

需要说清楚 PS 现在在网页设计流程里的定位：它不是布局设计工具，而是位图处理与素材输出工具。布局用 Figma 或 Sketch，代码用 VS Code，PS 负责：照片精修、复杂图层效果、切图输出、素材压缩。理解这个分工，PS 才会用得恰到好处，不会用它去做它不擅长的事。