一、网站修图核心原则与前期校准

1. 三大核心原则

性能优先适配：图片文件体积直接影响加载速度，单张 Banner 建议≤200KB，图标≤50KB，优先采用 WebP/AVIF 格式；

视觉适配兼容：需适配 PC 端（1920×1080px）、平板（1024×768px）、手机（375×667px）等多终端，避免关键信息被裁剪；

品牌风格统一：同网站图片保持色调（如科技类冷蓝、文创类暖黄）、字体（标题 / 正文字体统一）、圆角弧度（按钮 / 卡片圆角一致）的连贯性。

2. 前期准备与校准工具

工作区预设：调出「图层」「切片」「颜色查找」「信息」调板，在「窗口 > 工作区」保存为「网站修图」预设，方便快速调用；

性能校准工具：

分辨率模板：新建 1920×1080px（PC Banner）、750×300px（移动端 Banner）、200×200px（头像图标）等常用尺寸模板，分辨率固定为 72ppi（屏幕显示最优）；

色彩校准：创建「标准色卡」图层，包含品牌主色、辅助色（如 #1E40AF - 深蓝主色、#F97316 - 橙色辅助色），用吸管工具确保色彩统一。

二、网站核心场景修图全流程

场景 1：Banner 图制作（首页核心视觉）

目标：信息层级清晰、加载快速、多端适配

画布搭建与构图：

新建 1920×600px 画布（PC 端通用比例），用参考线划分「视觉焦点区」（居中 600×400px），关键文案与产品置于此区域避免移动端裁剪；

拖入背景图转为智能对象，执行图像>调整>匹配颜色，吸取品牌色卡校准色调。

视觉元素优化：

产品合成：用钢笔工具抠图（硬边缘产品）或「选择并遮住」（软边缘产品），添加 1px 白色描边增强轮廓，混合模式设「正常」；

文案强化：输入标题文字（建议思源黑体 Bold，字号 48px），添加「外发光」样式（大小 2px，颜色 #00000050），确保与背景对比度≥4.5:1（符合 WCAG accessibility 标准）。

响应式适配处理：

复制画布为 750×300px（移动端），用「自由变换」（Ctrl+T）等比例缩放核心元素，删除冗余装饰；

存储为 PSD 分层文件，命名为「Banner_PC.psd」「Banner_Mobile.psd」便于后续更新。

场景 2：UI 组件精修（按钮 / 图标 / 卡片）

核心逻辑：像素级清晰、交互感强烈、风格统一

按钮修图（以圆角按钮为例）：

基础绘制：用圆角矩形工具（U）绘制 300×60px 图形，圆角半径设 8px，填充品牌主色；

交互质感：

正常状态：添加「内阴影」（距离 1px，大小 1px，颜色 #00000020）；

hover 状态：复制图层，填充色明度 + 10%，添加「外发光」（大小 2px，颜色 #FFFFFF80）；

导出规范：隐藏文字图层，文件>导出为PNG-24 格式，命名「btn_primary_normal.png」。

图标优化（矢量转位图）：

矢量导入：拖入 AI 格式图标，右键转为「智能对象」，放大 200% 检查边缘是否清晰；

像素对齐：执行视图>对齐到>像素，用移动工具微调位置，确保边缘贴合像素网格；

细节修复：用画笔工具（硬度 100%，1px）修补边缘锯齿，滤镜>锐化>USM锐化（数量 80%，半径 0.5px）增强清晰度。

场景 3：响应式图片制作（适配多设备加载）

核心依据：利用srcSet属性实现设备自动适配，兼顾高清与性能

多分辨率导出（基于 DPR）：

基础图制作：修图完成后，确保主图尺寸为「1x」基准（如产品图 600×400px）；

批量生成：

录制动作：窗口>动作新建「响应式导出」，步骤：复制图层→图像>图像大小（宽高 ×2，分辨率 72ppi）→保存为 WebP；

播放动作生成「2x」「3x」图，命名规范：product_1x.webp「product_2x.webp」「product_3x.webp」。

尺寸适配优化（基于视口宽度）：

按断点裁剪：针对 320px、768px、1200px 视口宽度，裁剪不同构图的图片，避免拉伸；

导出设置：JPEG 格式品质设 70-80，WebP 格式品质设 60-70，确保体积可控。

场景 4：内容图片优化（文章配图 / 产品展示图）

瑕疵修复与降噪：

风景配图：用「修复画笔工具」去除杂物，滤镜>杂色>减少杂色（强度 50%，保留细节 70%）优化低光噪点；

产品展示图：参考电商修图的「质感强化」逻辑，但锐化强度降低（USM 数量 40%，半径 0.6px），避免屏幕显示刺眼。

性能压缩技巧：

色彩简化：执行图像>模式>索引颜色，颜色数量设 256，删除无关颜色；

格式选择：

照片类：优先 WebP（比 JPEG 小 30%），文件>导出为时勾选「WebP」；

透明背景图：用 PNG-8（颜色≤256）替代 PNG-24，体积可减少 50%。

三、网站修图效率与性能优化技巧

1. 批量处理与自动化工具

动作预设库：

基础预设：「响应式图片生成」「图标锐化」「Banner 色调统一」；

录制技巧：插入「停止」命令（动作>插入停止），便于手动调整关键参数。

切片工具批量导出：

用切片工具（C）划分 Banner 的「产品区」「文案区」「装饰区」；

文件>存储为Web所用格式，选择「所有切片」，一次性导出多区域图片。

2. 性能优化避坑指南

体积超标问题：用「图像 > 调整 > 色相 / 饱和度」降低非关键颜色饱和度（-10），或裁剪冗余背景，避免单张图超 500KB；

分辨率错误：牢记「网站图片仅需 72ppi」，避免误设为 300ppi 导致体积翻倍；

3. 高频快捷键组合

响应式调整：Ctrl+T（自由变换）+Shift（等比例缩放）+Alt（中心缩放）；

快速切片：C（切片工具）→Shift+拖动（创建固定比例切片）；

格式导出：Alt+Shift+Ctrl+S（存储为 Web 所用格式，直接调出优化面板）。

四、实战案例：首页 Banner 修图全步骤

画布与素材准备：新建 1920×600px 画布，拖入背景图、产品图、文案素材，按「背景 - 产品 - 装饰 - 文字」排序图层；

视觉优化：

背景：用「曲线」调整图层提亮（输入 128，输出 140），添加「渐变映射」蒙版压暗边缘；

产品：抠图后添加「投影」（距离 3px，大小 5px），新建「柔光」图层用白色画笔提亮产品顶部高光；

文案：标题添加「斜面和浮雕」（大小 1px，软化 1px），副标题设灰色（#666666）形成层级。

响应式适配：

复制画布为 750×300px，删除装饰性光斑，将标题字号改为 32px，产品图缩小至原尺寸 70%；

导出与交付：

PC 端：导出为 WebP 格式，品质 75，体积 180KB；

移动端：导出为 WebP 格式，品质 70，体积 80KB；

交付文件：包含 PSD 分层源文件、导出图片包、srcSet使用说明文档。