听说隔壁市场部正在头疼,新版课程封面图设计被老板认可了,接下来要把平台上现有封面图全部更新掉。总共800多张图,不是那种简单替换文字就可以的,有很多细微的变化。市场部就一个设计师,忙着呢,自己做不现实。外包出去一张20就是16000,预算不够。
诶!一听到这值16000,我就来劲了。我最擅长自动化,数据狂魔加上PS技巧,这事儿整个部门也就只有我能干了。你们不是喜欢说设计价值吗?你的价值是什么?怎么量化你的设计产出?花半天时间,给公司省下一个设计师一整个月工资,够不够价值?就冲这绝佳的年底汇报材料,果断把活抢下来。
需求
市场部设计师做出来的模板长这样。就别对设计指点江山了,反正这效果是老板点名要的,简单直接没毛病。具体需求说起来也简单,把图上三处文字替换成真实内容,输出800多张图。
看到模板,很多设计师会觉得这很简单啊,PS变量定义,建个Excel批量输出就完事儿了。
还不会Excel+PS批量输出的设计师,有兴趣请看这篇:https://zhuanlan.zhihu.com/p/33725280
嗯……思路是这样没错,如果真这么简单,照着教程做就可以了,全文完。
但是,所有模板拿到手后,发现事情远没那么简单,各种变数超乎想象:
- 课程分了十几类,有些分类有独特的背景图,有些分类共用一张背景图。
- 顶部的课程分类不全是文字,有两个特殊分类(淘宝和天猫)用的是两者的Logo字形,这只能用图片来实现。
- 课程名称有的一行、有的两行,一行的时候要垂直居中。
- 图里文字颜色随背景图变化,并不是纯黑,而是略微偏向于背景色。
- 最下面的描述小字不一定都有,有的空缺,连带着小字底下的装饰框也得拿掉。
- 装饰框的线条颜色也随背景色变,和文字同色系,但鲜艳很多。
现在先停下来想想,用PS变量定义还能应付吗?十几个分类出十几个PSD,当然也能实现。但是我不想导出十几次,只用一个PSD,这事儿能搞吗?
能。
这就需要设计师同时也是Excel高手了。
Excel数据模型设计
既然这事这么复杂,先思考一下数据模型吧。
程序员看到这怕是要笑出声来,你一个小破图这么点信息,还数据模型?
轻喷啊大侠,我这不是借用一下思路嘛。但是话说回来,如果只想把事干成,条条大路通罗马;如果想达到最高的效率,那真的要用数据模型的思路来规划。怎样算最高的效率?运营填最少的信息,我每次导出做最少的操作。这个出图流程会长期运转,要保持边际成本最低。至于第一次的配置操作,复杂点问题不大,初始成本不那么重要。
那么我们的表里有哪些列呢?
- 课程分类
- 课程名称
- 描述
- 背景图
这几个是最显而易见的。加上需求里那一堆变数,实际需要的列有这么多:
- 文件名:用来控制最终输出的文件名,按照合理、便于查找的顺序排列
- 分类:那十几个分类,既以文字形式显示在顶部,也决定着模板的整体外观
- 标题第1行:标题有的一行有的两行,拆开处理,满足了运营手动控制断行位置的需求
- 标题第2行:第2行是可选的,不填就当作单行标题
- 描述:时有时无的关键词,既以文字形式出现,也决定了它底下的装饰框是否显示
- 淘宝:是或否的布尔值,作为”淘宝“分类的Logo图显示开关,由分类列决定
- 天猫:是或否的布尔值,作为”天猫“分类的Logo图显示开关,由分类列决定
- 单行:是或否的布尔值,控制单行标题图层是否显示,由标题第2行是否为空决定
- 两行:是或否的布尔值,控制第1行和第2行标题图层是否显示,由标题第2行是否为空决定
- 有描述:是或否的布尔值,控制描述装饰框是否显示,由描述是否为空决定
- 背景图:模板背景图对应的文件路径
- 前景色:前景色图片对应的文件路径,这是一张纯色图,用来给标题文字上不同的色
这里要解释一下,我标题实际上有3个图层,单行标题是一个图层,第1行标题和第2行标题是另外2个图层,用于两行标题的情况。
这样一堆信息丢给运营填的话,估计会挨打。其中大多数都可以计算得出,真正需要运营填写的只有分类、标题第1行、标题第2行、描述。把仅有这4列的表做成在线表格,散出去给运营填。没错,我们有5、6个运营在做这事,每人领了几个分类,这样吭哧吭哧填起来也快得很。
现在复杂的部分留给我自己了,怎样把其余的列算出来,这些都是要给PS用的,一列也不能少。略微一想就会发现,分类是关键。分类决定了淘宝、天猫Logo是否展示,决定了背景图用哪张,决定了文字是什么颜色,还决定了输出文件名的排序。所以应该为分类单独开一个表,作为维度表,一个分类就好比一种商品。记录图片内容的表,就是事实表,这就像商品的一条订单记录。分类名是分类表的主键,作为外键在事实表里出现,把分类的各种信息带过去。一张事实表(导出csv)、一张维度表,这应该是最简陋的星形结构了,或许可以叫”地月结构“?
上面这段许多概念属于数据模型与数据库领域。简单说就是把许多属性定义在分类上。只要属于某个分类,就自动根据分类名读出对应的背景图、前景色等属性。实际需求也正是如此。
现在,运营填好的全部数据(4列)已经在我的Excel文件里了,把它引用到隔壁的事实表里,根据PS的需要加上各个运算列,构成完整的数据表。每次使用时更新数据,保存成csv格式,交给PS处理。
这些运算列就考验Excel公式的运用了:
- 由于要去分类表里查它的各种属性,用好vlookup是关键。
- 文件名则需要文本拼接,想拼成什么样都可以,随心所欲决定输出图片文件的排序。
- 我在两个标题列里贴心地用字符串替换公式做了去空格功能,即使运营不小心多敲了个空格,也不会导致标题位置跑偏,精准居中。
- 到处都用了IF来判断空值,防止在空行上产生0。
这些对熟悉Excel的人并不难,就不展开了。
Power Query合并表格
但是,上面似乎遗漏了2个问题:
- 运营填好的数据是如何进到我Excel里来的?
- 运营再给一批新数据,怎么更新进来?
先来解决第1个。之前散出去给运营填的是在线表格,每人领其中几页,互不影响,且能实时更新。而我的数据表是一个本地Excel文件,因为要用到Excel强大的Power Query功能来合并表格,大多数在线表格产品没有这种能力。
每当要输出一批图,首先要把在线表格以Excel文件的形式下载下来(封面图内容收集.xlsx),放到和我数据表(封面图内容.xlsx)同一个目录下。只要文件位置不动,这层数据读取的关联关系就能一直保持下去。
在数据表中使用“数据”菜单里的Power Query。这个功能可以理解为一种图形化界面的SQL,它可以从本地表格、网页、本地数据库、Azure云上读取数据,并进一步清洗、转换、聚合。我这里用到的是它从本地表格读取数据的能力。
Power Query的界面对于只用Excel基础功能的人应该既熟悉又陌生。熟悉的是,“哇这里也有表格耶”;陌生的是,“其他这些都是什么玩意”。
怎么理解Power Query呢?它做了3件事:
- 先指定了数据源,外部数据从哪来
- 然后让我设定查询的规则和条件
- 最后执行这些查询请求,把我要的数据加载到当前Excel文件中,一个请求加载一页
其中最核心是第2步。界面左侧列表就是一个个的查询请求,它会按顺序执行下来。
每个请求里要“将第一行用作标题”,并且在筛选条件里去掉空值。
查询操作不止是基本的筛选排序,我这里用到了它的合并表格的能力。从运营那收过来的数据分散在很多页表里,总不能一个个手动复制黏贴吧?我把运营的每页表都查询出来,最后再建一个追加查询请求,它可以把格式完全相同的表合成一张,相当于SQL的CROSS JOIN。
顺道提一下,它的合并查询也非常有用,能实现SQL里JOIN和LEFT JOIN的效果。
点了关闭(其实作用是保存)按钮后,我的Excel文件里就刷刷刷多出许多页,不需要的可以删掉,留下有用的。我再合并好的表左侧加了一列序号,用来给文件名排序。
这样,运营填的数据就全部进到我的Excel文件里来了。
现在来解决第2个问题,怎么更新数据?
如果运营提交了一批新的封面图内容过来,我只要下载下来放到老地方覆盖一下。再打开数据表,进入“数据”菜单,点刷新。就这么简单,数据就更新了。
为什么把Power Query比作SQL呢,因为它记录和复用的是我的查询条件,而不是查出来的结果。查询结果虽然也显示出来了,但那只是预览,让我方便修改查询条件。实际上它是把我的查询请求记录在Excel文件中,每次点刷新,就重新查询一遍。
现在,经过了一系列看似复杂的首次配置,数据处理的管道已经建立起来了。后续使用变得异常简单:下载、覆盖、刷新、保存为csv,就变成PS需要的数据文件了。
PS批量出图
到了PS这一步,要做5件事:
- 整理和重命名图层
- 为图层定义变量
- 导入数据组
- 批量导出psd
- 批量psd转jpg
1. 整理和重命名图层
第1步没什么技术含量,图层该合并的合并,顺序该调整的调整。为了后面定义变量方便,建议把图层按照数据表表头来命名。
文件名这个图层很特殊,它不体现在图上。拿到的psd模板里没有,需要手动新建,样式随意,反正不显示。把它藏在背景图图层的底下,或者移到画布外面。
前景色这个图层也需要特殊处理。变量定义无法直接改变文字颜色,怎么实现随背景变化?把需要上色的文字编组,新建一个纯色图层,使用剪贴蒙板作用在这个组上,这就实现了统一控制文本颜色。
装饰框的线条颜色也会变,还记得吗?此处的颜色和文字颜色有关联,但又不一样。它们之间的关联是什么?在前景色的基础上,为这两根线条专门加一个色相/饱和度调整图层,把它的饱和度和明度调高就行。比如棕色加浓提亮就变橙色,墨绿加浓提亮就变草绿……这个技巧需要对色彩原理和PS调色有比较深刻的理解。
2. 为图层定义变量
第2步变量定义的基础技巧,这里就不手把手教学了,开篇引用的教程里都有讲。这里主要讲几个难点的处理。
变量定义功能最常用的是替换文字,用到的是其中的文本替换这个选项。当变量图层不是文本时,它就会变为像素替换,也就是换图。背景图通过这种方式替换。
前景色也一样,为每种文字颜色准备相应的纯色图片,把上一步创建的剪贴模板图层定义为变量,根据课程分类选用相应颜色。
可见性变量常被忽视,但非常有用。表格里这些TRUE和FALSE的列,就是通过可见性来控制图层的显示隐藏。可见性变量还可以和文本替换或像素替换同时使用。比如底部描述小字,文本替换改变它的内容,可见性则控制它显示隐藏。
前两步的工作虽然繁琐,但都是一次性的,在后续的使用中不必重复。
3. 导入数据组
切换到导入面板,把准备好的csv文件导进来就是了。
导入常见的错误有两种,一种是有多余的列或名称对不上的列,需要检查。
另一种是有的行里有空单元格。是的,PS导入数据组不支持空单元格,所以我在制作数据表的时候把空单元格内容都改成了NULL。这些NULL显示出来会破坏图片效果,所以可能为空的列都要做可见性判断,适时隐藏。
4. 批量导出psd
导出没什么技巧,这么操作就是了。
在这一步你可以自己定义导出的文件名格式。这么多可选的项里,真正有用的只有数据组名称,只有这一项能在文件名上留下对运营有帮助的信息。数据组名称读取的是csv文件第一列的内容,这就是我为什么把文件名这一列放在最前面,以实现对输出图片文件名的自由定制。
5. 批量psd转jpg
PS数据组导出的都是psd文件,交付出去的得是jpg文件,还要再转换一道。
录一个简单的PS动作,打开psd,存储为jpg,关闭。就这么3步,把整个psd文件夹用批处理跑一遍就行了。
我自制的动作集里有现成的存为jpg动作,可在文末提供的链接里下载。
还差一张表
好了,活干完了吗?只能说任务完成了,事情还没完,还差一张最重要的表。
这价值16000的800多张封面图,只是第1批。公司还会不停出新课程的,还会有第2批、第3批……我难道不该了解一下,自己的举手之劳一年下来给公司省了多少钱吗?即使我不想知道,也非常有必要让老板知道。
所以还要有这样一张数据统计表,邀功表。当然,不要起这么露骨的名字,取个谐音,叫摇滚表好了。
我要是再卷一点的话,还可以基于这张表生成个柱状图,每月、每个Q、每季度的输出价值。用我的月工资减去这些产值,直观展现出每个月我的实际用人成本,雇了就是赚到。要不要这么卷到时候再看吧,反正数据是沉淀了。
后记
这个活抢过来性价比极高。总共就费我半天时间,做了点工作流的初次配置,后续花费的时间可以忽略不计,午餐时间挂机跑一跑就好了。
这就是我的本事,我不爱造轮子,但我极其擅长组装轮子。
流程跑通后,和运营开了个会。市场部向他们讲解了提供内容的规范要求,也就那4列在线表格,没谁觉得难。运营们都以为我这是AI输出的。对于非技术人员,好像不可思议的事情都是AI干的,AI是silver bullet。有意思,这种偏见我已经习以为常了。
最后放上相关的文件和资源,有兴趣可以自己下载动手试试: