企业官网建设流程全解析

先交代一个背景：我这些年接过的个人品牌类项目里，最难熬的不是大视觉，而是那些“看着小、数量多”的碎活。技能图标就是典型——简历上、个人主页上、作品集索引里，一段技能列表噼里啪啦全是要配图的小图标。刚开始我也是老实人，一个图标一个图标地画，线性图标画到第八个，眼睛已经开始发直；面性图标画到第二十个，鼠标手都要犯。后来我痛定思痛，把做单个图标的流程拆开、重组，做成了一条真正意义上的“PS 技能图标流水线”，从那以后，50 个风格化图标一键量产，从素材进文件夹到出图，全程我只需要喝杯水的工夫。这篇就把这套流水线的完整玩法、录制动作的细节、以及我踩过的坑一次性讲清楚。

1. 先把“流水线”想清楚：做的是图标，还是做的是规矩

很多人一听到“一键量产 50 个图标”，第一反应是找个插件，或者写个脚本，把图片批量套个滤镜。但真上手你会发现，如果前期的“规矩”没立好，量产出来的东西根本没法用——尺寸不统一、阴影方向乱跳、线条粗细忽大忽小，这比手绘更灾难。所以做流水线的第一步，不是打开 Photoshop，而是先回答三个问题：风格是什么、参数是多少、图层怎么命名。

1.1 为什么批量做比单张画更容易翻车

单张画图标，眼睛就是校准器，看哪儿不舒服改哪儿，属于“人肉自适应”。批量做的时候，你的眼睛只能负责验收，真正的执行者是 Photoshop 的动作和批处理，它们不会看，只会照章办事。章定得越细，结果越稳；章定得越粗，翻车概率呈指数级上涨。

举个最典型的例子——投影。手绘的时候你会随手把投影角度统一成 120 度，但批量做的时候，如果你在录制动作时用的是“默认角度”而不是“全局光角度”，那么每个图标生成后投影方向可能完全不一样。因为 Photoshop 的全局光设了一次，后续所有效果都用这个角度，一旦你在某个图标上手动调过阴影，全局光就被污染了，后面跑出来的每一个图标都会带着歪影子。这种问题单张画永远不会暴露，只有流水线批量跑的时候才会集中爆发。

所以在构建流水线前，我会先把所有视觉参数写进一张“风格卡片”里。它不是设计规范文档那种长篇大论，就一页纸，列清楚图标尺寸、安全边距、圆角数值、线宽、色彩数量、渐变角度、投影距离、模糊半径、高光强度。后续做任何一个图标，都只认这张卡片，不认个人感觉。这样，50 个图标出来后才有可能“像同一个妈生的”。

1.2 方案选型：为什么还是用 Photoshop

市面上能批量出图标的工具有不少，Illustrator 的批量导出、Figma 的组件库、还有一堆在线图标生成器，各有各的好处。我最后把主流程定在 Photoshop 上，有几个很现实的原因。

一是图层样式（Layer Style）的成熟度。技能图标如果要做风格化，最常见的做法就是渐变叠加、内阴影、投影、描边这四件套。Photoshop 的图层样式面板可以组合出非常细腻的质感，而且能把样式存成预设，后续每个图标直接套样式就可以，修改主色时甚至可以全局联动，效率极高。Illustrator 的“外观”面板也能做类似的事情，但追加上色、羽化、内阴影时要多绕几步，不够直接。

二是动作和批处理是原生功能，不看版本、不装插件，稳定性好。Photoshop 的 Action（动作）面板从很老的版本就有，到今天功能没怎么大变，意味着你录一套动作，放到其他同事的电脑上也能跑，不存在兼容性问题。Figma 那套推组件库的思路对纯图标有效，但要做到“渐变+投影+内阴影”这种复杂风格化效果，还是得看设计软件的老牌功底。

三是我要面对的现实：大量客户发来的原始素材是 PNG 或粗糙的矢量线稿，要把它们统一转成风格化图标，最顺手的工具就是 Photoshop。它既能处理位图素材重新绘制，也能通过智能对象的替换功能实现批量“换芯”。后面这招我会细说，这是很多教程里不会讲透的部分。

2. 风格化图标的核心细节：把“风格”翻译成可复制的参数

品牌级的技能图标一般不会用默认的纯扁平色块，那样太容易过时。稍微讲究一点的风格，会在线性图标的基础上加渐变、加微投影、加高光，整体显得更“产品化”和有质感。但在批量生产的语境里，“风格”必须被拆成一组绝对数字，而不是形容词。

2.1 建立风格规范卡片：先把感觉换成数字

我的做法是先手工打磨一个“种子图标”，这个图标一定是我觉得最顺眼的那一个，比如“代码括号”或者“调色板”。然后把这个种子图标的所有视觉属性提取成参数，做成下面的风格卡片：

这套参数不是拍脑袋定的。512 画布、360 安全区，是考虑了图标在网页里常见三种尺寸的展示逻辑：缩到 24px 时主体依然有辨识度，缩到 64px 时细节不会糊成一片。8px 描边也经过了验证，我试过 6px，小尺寸下线条偏细显得单薄；试过 10px，整体又太笨重。8px 在这个画布尺寸下是视觉效果和缩放表现都能兼顾的值。

需要特别提醒的是“渐变角度”这种东西，你以为是统一 135°，但如果在录制动作时没有固定“使用全局光”，Photoshop 在复制样式或应用到新图层时会保留原有的角度，看起来没问题。可一旦你中途手动改过一个图标的渐变方向，后续所有复用的样式都会被带偏。为了防止这种情况，我会在样式预设名称里直接带上角度信息，比如 ICON_Gradient_135，这样每次应用样式时都能一眼看出有没有被污染。

2.2 布局、色彩、质感三件套：统一性就这么来的

参数归参数，真正让一套图标看起来“风格化”的，还有三个层面的统一：布局、色彩、质感。

布局层面，我习惯把图标的主体统一做成一个“被圆角正方形包裹”的形式。也就是每个技能图标底部都有一个 24px 圆角的底板，技能内容放在底板上。这样做的好处是视觉重量均衡，50 个图标摆在一起时，中间的图形不管多复杂，外轮廓都是一致的，整齐得像阅兵。如果实在不想用底板，那也要保证所有图标主体都落在 360×360 的安全区里，并且视觉重心一致。这点靠手动目测很难，我的办法是在母版里用参考线画好安全区，每个图标的底板都吸附参考线边缘，强制对齐。

色彩层面，技能图标的数量一多，全屏五彩斑斓就是灾难。我一般定两套色系：一套主色（比如品牌蓝到深蓝的渐变色），用于大部分“开发类”技能；一套辅助色（比如橙黄到橙红），用于少数“创意类”或“热门口碑”技能。同色系的图标之间用同一组渐变，不同色系之间只在主色上切换，阴影、高光这些质感参数保持不变。这样既能区分技能类别，又不会让整体颜色失控。

质感层面，核心是“阴影不能乱”。这里有一个我在实操中总结的硬经验：先设好全局光，再录动作。点击 编辑 > 首选项 > 常规，找到“全局光”设置，把角度固定为 120°、高度固定为 30°。之后所有投影、内阴影都基于这个全局光，就不会出现影子忽左忽右的情况。如果某个图标确实要特殊光照，也要用单独的智能对象处理，并在这个图标上右键“清除图层样式”，再重新套用全角样式，避免污染全局设置。

3. 实操：从一张母版到一键量产 50 个图标

接下来的内容是整套流水线的核心，我尽量按操作顺序来讲，每一步都会交代“为什么这样做”。如果你手里正好开着 Photoshop，可以直接跟着做一遍，实际跑通了再展开做 50 个也不迟。我建议你先拿 5 个图标试水，验证流程没问题后再上全量。

3.1 搭建 PSD 母版：图层结构决定动作能不能跑通

流水线的物理基础是一个 PSD 母版文件，这个文件里包含了一整套图层结构和命名规则。为什么强调命名？因为 Photoshop 的动作是靠“图层名”来定位图层的，不是靠鼠标点击位置。你在录制动作时如果用的是“点击图层”的方式，录制下来的动作换到另一个文件里就会找不到同名图层，然后报错。所以图层命名必须“又短又规整”，而且要贯穿所有文件保持一致。

我习惯的母版结构是这样的：

ICON_ROOT（组，根目录） ├── BG（底板图层，存放圆角矩形底板） ├── SHAPE（图形图层，存放技能主体图形） ├── HIGHLIGHT（高光层，可选） └── LABEL（标签层，放大镜和文字水印，导出时可隐藏）

整个文件夹和图层都用大写英文单词命名，不带空格，也不用中文。原因很简单，动作记录和脚本处理字符串时，避免转义和编码问题。你可能会想，中文名看着多直观啊，但等你在批处理日志里看到一串乱码错误提示时，就知道英文命名的好了。

让每个图标的母版从同一个模板复制，我一般把做好的模板存为一个 .psd 文件，新建图标时直接右键“复制”这个文件，再改文件名，比如 dev_photoshop.psd、dev_sketch.psd、design_figma.psd。这个命名我用的格式是“分类_技能名.psd”，后面批量导出时可以直接用文件名给成品的 PNG 命名，管理起来极其清晰。

3.2 把“风格”固化成样式与动作

这一步是整个流水线的灵魂：把视觉参数存成图层样式预设，然后把“替换图形、套用样式、整理图层”这一系列动作录制成一个动作。

先存样式。打开图层面板，随便找个图层，双击图层缩略图进入图层样式，按风格卡片里的参数设置好渐变叠加、内阴影、投影、描边，然后在样式面板（窗口 > 样式）右侧菜单里选择“新建样式”，命名为ICON_FILL_135、ICON_LINE_135之类。关键点是：一个样式里必须包含全部的外观属性，包括投影、内阴影、渐变、描边，形成一个完整的“皮肤”。这样后面应用时只需单击一次，不用一个个效果分开设置。

再录动作。打开动作面板（窗口 > 动作），新建一个动作，命名为“GENERATE_ICON”。然后开始录制，接下来的操作会被记录下来：

1. 选中SHAPE图层，画入新的技能图形（这一步你也可以在录制前先把图形画好，录制的核心其实是后面的应用样式）；
2. 单击刚保存的ICON_FILL_135样式，给图形应用预设皮肤；
3. 如果图形有描边需求，再叠加ICON_LINE_135样式；
4. 隐藏BG层和LABEL层，检查透明背景效果；
5. 停止录制。

这里有个非常重要的实操细节：录制动作时，任何涉及坐标定位的操作，都不要用鼠标拖拽。比如你应用样式、隐藏图层，都必须通过快捷键、菜单命令或者面板按钮来完成，而不是拖这个图层到某个位置。因为拖拽操作会被录制为绝对坐标，一旦这个动作运行在图层位置不同的文件里，结果就会错乱。我记得第一次录动作时习惯性把图层往下拖动对齐参考线，结果跑到另一个图标文件里直接跑偏到画布外面，排查了半天才发现是这个原因。

3.3 批量处理：Batch 跑起来之前要做好的检查

动作录好了，接下来把 50 个智能对象素材准备好，就可以开跑了。这里我主推两种方式，第一种是“多文件 + 批处理”，第二种是“智能对象替换”。

先讲多文件 + 批处理。把 50 个母版文件（每个对应一个图标）放进同一个文件夹，比如icons_source。然后在 Photoshop 里执行 文件 > 自动 > 批处理（Batch）。这里的配置有几个关键点：

• “播放”选择我刚才录制的动作GENERATE_ICON；
• “源”选择icons_source文件夹，并且勾选“覆盖动作中的‘打开’命令”；
• “目标”选择另一个输出文件夹icons_output，然后勾选“覆盖动作中的‘存储为’命令”；
• 在“文件命名”区域，我设置成doc_name + 扩展名小写，这样输出文件名会沿用源 psd 的文件名，比如dev_photoshop.png；
• 错误处理选择“记录并继续”，千万不要选“停止”，否则一个文件出错，后面 49 个都会停在那里等你点确认，那酸爽我不想再经历第二次。

“覆盖动作中的打开命令”和“覆盖动作中的存储为命令”这两项很容易被忽略。如果不勾选，Batch 依然会执行动作里自带的 Open 和 Save 操作，可能打开错文件、存到错位置，或者弹出保存对话框让整个流程卡死。勾选后，Batch 会用你指定的文件夹和命名规则统一接管打开和保存环节，整个流程才能安静地跑完。

再说智能对象替换。这种方式的适用场景是：所有图标的结构骨架都一样（比如都是“圆形底板 + 内部图形”），只是中间的图形不同。你可以建一个 PSD，把 SHAPE 层转成智能对象，之后每次执行 图层 > 智能对象 > 替换内容，选中一个新的绘图文件，智能对象就会自动更新，而且原本的图层样式会保留。这样做比开 50 个 PSD 更轻量，但问题是每个图标替换时都要手动指定文件，批量属性不强。我一般只在图标数量少于 10 个时用这个方式，真到了 50 个的数量级，还是 Batach 多个 PSD 文件更省心。

3.4 实例演示：从零到出图，跑一遍完整的流程

光说理论不够，我用一个具体的例子走一遍完整流程。假设现在要做 5 个技能图标：代码、设计、数据、运维、沟通。我准备了 5 个原始 PSD 文件，每个文件的 SHAPE 图层里只有对应的图形草稿，没有样式。

第一步，打开第一个文件dev_code.psd，把 SHAPE 图层调成规范尺寸：选中 SHAPE，按 Ctrl+T 自由变换，在顶部输入宽高 360px × 360px，并确定居中。这一步相当于把每个图标的图形大小统一到安全区域范围内。

第二步，确认全局光已固定。我习惯在录制动作前把 编辑 > 首选项 > 常规 > 全局光 设成 120°/30°。接着随手画一个临时矩形，应用一遍 ICON_FILL_135 样式检查光影方向，不对就改，对了再继续。

第三步，新建动作 GENERATE_ICON，开始录制。选中 SHAPE 图层，依次点击 ICON_FILL_135 样式，然后设置图层名。如果图形是线性图标，再点 ICON_LINE_135 把外轮廓统一为 8px。隐藏 BG 和 LABEL 图层，检查透明背景。停止录制。

第四步，保存这个文件，然后关闭。接着把文件复制 4 份，分别改名为dev_design.psd、dev_data.psd、dev_ops.psd、dev_social.psd，并把每份文件里的 SHAPE 图层内容替换成对应的图形草稿。

第五步，执行 文件 > 自动 > 批处理。源文件夹选这 5 个 PSD 所在目录，目标文件夹新建一个icons_output。文件名规则设成“document name + 扩展名小写”。点击确定后，Photoshop 会依次打开每个 PSD，播放动作，自动保存为 PNG，再关闭。看着进度条跑完，打开输出文件夹，5 个风格统一、阴影一致、尺寸规范的图标就整整齐齐躺在那里了。把这套流程扩展到 50 个图标只是数字变大的问题，操作步骤和第一次完全一样。

4. 这场批量操作里，我踩过的坑和排查办法

流水线不是一次就能跑顺的，我前后迭代了不少版本，下面这些坑是我真实踩过的，有些甚至现在想起来还肉疼。写出来希望能帮你省点时间。

4.1 动作失灵：图层名一改就宕机

这是我最早翻车的地方。当时录动作时录制了“点击某个图层”，但后续批量处理时，我发现只要输出文件夹里混入了一个图层命名不一致的文件，动作就会中途报错。报错信息往往是“目标图层不可用”，非常让人抓狂。

排查之后明白原因了：动作里的某些操作是依靠“图层索引”定位的，比如“选择下方图层”这类命令，换到另一个图层顺序不一致的文件里就会选错对象。解决方法是所有母版文件在复制出来时必须保持图层结构完全一致，包括图层的上下顺序和命名。我后来干脆写了一个小的动作片段，开头就是“选择名为 SHAPE 的图层”，而不是“选择当前图层”，这样哪怕别的图层顺序变了，动作依然能找到主角。另外，我还会在动作里插入一步“重命名当前图层为 SHAPE_FINAL”，把图层的最终名固定住，后续批处理就算不小心改动过图层名，动作也能把它拉回正常轨道。

4.2 批量导出：保存的坑比想象中多

批量导出时，有一个高频问题是导出的 PNG 尺寸不对，或者没有透明背景。原因多半是动作里不小心录制了“画布大小调整”或“拼合图像”，导致每个文件导出前画布被裁剪或背景被填充成白色。我建议动作里完全不要录制任何保存步骤，只负责“做图标”，保存交给 Batch 统一处理。Batch 里的“覆盖动作中的存储为命令”会接管文件格式、文件名、输出目录，省心得多。

还有一个关于 PNG 格式的参数：导出时记得选“PNG-24”，不要选“PNG-8”。PNG-8 只有 256 色，图标上的渐变和抗锯齿很容易出现色带和噪点，看起来脏兮兮的。PNG-24 颜色更丰富，透明通道也是完整的，虽然文件体积稍大，但作为品牌物料完全值得。至于文件体积，我一般要求单图标不超过 200KB，如果超了，说明细节太碎，可以适当降低纹理或删掉多余的高光层，这对 Web 使用更友好。

4.3 智能对象批量替换的隐藏成本

智能对象替换的方式虽然快捷，但有个隐藏坑：如果替换进来的源文件尺寸不规范（比如有的方形，有的长方形），智能对象会被拉伸变形。因为智能对象的内容尺寸和文档坐标系是绑定的，替换的时候不会自动“适配居中”。

我踩过这个坑后的解决方案是：所有图标原始文件在拿去替换前，先统一成 360×360 画布，并且内容居中。这一步可以用一个小动作来批量处理，我录了一个“SET_SMART_OBJ”的动作，里面包含：图像大小改为 360×360、画布大小保持 360×360、内容水平垂直居中。在跑替换流程前，先对每个源文件播放一遍这个动作，从根源上保证替换时不会变形。

4.4 常见的批量处理问题速查表

5. 收尾检查与效率提升思路

50 个图标从流水线上下来，不是终点，而是验收阶段的开端。批量生成的东西看多了容易“审美疲劳”，连明显的瑕疵都会被当成风格的一部分，所以必须靠清单来兜底，而不是靠眼睛扫描。

5.1 一张验收清单，让 50 个图标长成一个妈生的

我每次跑完批量后，会打开输出文件夹，按网格大图模式扫一眼，再逐项检查下面这些内容：

• 所有文件都是 512×512 像素，透明背景；
• 所有图标的主体都落在 360×360 的安全区域内，中心不偏移；
• 线性图标的描边统一为 8px，无明显粗细波动；
• 所有图标的阴影方向一致，光照角度相同；
• 同一色系内的渐变方向一致，不同色系之间只有主色不同；
• 文件名符合“分类_技能名.png”的规范，避免后期检索困难；
• 单文件大小不超过 200KB，适合网页直接引用。

这份清单不是跑完才看，而是在做第一个母版时就要对照。我见过很多设计师辛苦做完 50 个图标，验收时发现有 20 个没加投影，要一个个重做，原因就是最开始没有把验收条件前置。流水线的好处是，只要你把“验收标准”写进样式的参数里，生成时就已经天然合规，后期只需要抽查和微调。

5.2 让流水线真正可复用：模板、脚本与命名规范

一套顺手了，就不要轻易拆掉。我会把整个流水线固化成一个“模板包”，里面包括：母版 PSD、图层样式预设、动作文件、命名规范表、以及一份参数卡。下次接到一个“50 个 XXX 图标”的任务时，我只需要做三件事：复制母版、换图形素材、跑 Batch。真正花在设计上的时间不多，大部分时间反而是花在整理原始图形素材上。

另外，如果你对 Photoshop 脚本有一定基础，还可以给流水线加一个更“偷懒”的扩展：用一个很短的 ExtendScript 脚本，自动遍历某个文件夹下的所有 PSD，调用录制好的动作并导出。这段脚本门不需要写得复杂，核心逻辑就是循环文件、打开、播放动作、存储副本、关闭。不过我要提醒一句：脚本写起来比动作灵活，但调试成本高，非脚本用户优先把动作和 Batch 玩溜，已经能解决 90% 的批量场景了，没必要一开始就上脚本。

5.3 给后续留一点升级空间

如果你觉得这套流水线用顺手了，其实还可以往几个方向扩展。一是把 50 个图标按“线性”和“面性”各做一套，也就是同一套技能出双版本，用于不同深浅背景的页面；二是在母版里内置几组配色变体，比如 深色模式 和 浅色模式 的样式，通过切换图层样式预设来快速适配不同网站风格；三是把图标和文字标签组合起来做成“技能卡片”，批量生成用于 PPT 或个人简介页的套件。这些升级方向听起来多，但本质上都是“母版 + 样式 + 批处理”这套底层逻辑的复用，只是往里塞的内容不同罢了。

我个人的体会是，这套流水线最值钱的部分，从来不是那一两个小时的录动作过程，而是动手前那半小时“把风格翻译成参数”的思考。如果你第一次做就能坚持先立规则再动手，那后面无论是一口气量产 50 个还是 100 个图标，都只是让电脑跑一会儿的事。真正宝贵的是，那个“每一个图标都要重新画一遍”的重复劳动，终于被彻底压缩掉了。