探索Photoshop模版变量功能

问题背景

锦城数据实验室在做 第二期HTML5“饭卡年度消费报告” 的构思时，有一个模块会用于展示饭卡使用者的年度关键字。

腾达（UI设计）设计出来的该模块样式如下图。

整体是挺好看的，我们称它为模版。其中有两个变量—— 关键字 和 关键字阐述。

但问题在于，想要在做HTML5的时候去定位再把变量渲染出来是有一些棘手的，需要考虑不同的屏幕尺寸。

为了避免引入新的问题，我们决定把模块+变量直接做成图片，倒时候直接展现一整张图片，也方便用户将这张“饭卡年度关键词”的图保存下来。

构思方案

为了达到上面的目的，最老实的办法是在PS里面一层层地改图层，再存储为图片。

但这一是费时耗力又枯燥，二是不符合程序员和开发人员的做事风格。

想到MS Word里面的 邮件合并 功能可以做这个效果，那么Photoshop也一定有类似的功能。

问了一下搜索引擎，Photoshop确实有这样的功能，小小地折腾了一下，把解决过程记录在了下面。

解决过程

提取模版

从设计师给的PSD中提取出目标模板到一个新的PSD中。

同时根据实际情况调整这一部分模版，设定字体样式、字体大小和排版。（保证文字不溢出和信息易度不拥挤）

定义变量

这一步的目的在于告诉PS我们这份PSD里面，那些图层是变量。

点击菜单栏 =》 变量 =》 定义变量 ，弹出变量设置面板。

在图层下拉窗口中，会显示除了背景以外的所有图层，我们把要设为变量的图层选择出来，并选择其变量类型。

变量有两种类型，一种是可见性变量（什么情况下显示某个图层），另一种是我们要用的文本替换变量。

如法炮制，我们把“关键词阐述”这个图层也设置为文本替换类型的变量图层。

设置数据组

如下Excel表格呈现了我要替换的 两个变量内容 和 他们间的对应关系，在PS里面我们称他们为“数据组”。

关键词（文本变量1）

关键词阐述（文本变量2）

有钱多吃

今年财源广进，吃得比较多。

少吃多餐

虽然每顿吃得少，但是一天要吃好几顿呢。

食来运转

吃个饭动不动就打折！更过分的是免单！

饮食男女

报告！TA的胃已经被你做的佳肴征服！

深夜食堂

漫漫长夜，不吃点什么哪睡得着？

真有口福

这食物真香！确定不多来一块？

食运八方

合格的吃货一定是穿梭在锦大各大食堂。

麻辣红火

学习和事业必将红红火火，撸起袖子加油干！

肥而不腻

今年你生活像肥而不腻的五花肉一样美好。

吃而不胖

辅导员说你放心大胆吃，今年长不胖！

节衣缩食

为未来存下一笔钱，以后有更多的好吃的。

秀色可餐

合理的饮食结构，让你越发帅气/漂亮。

大吃一惊

可别吃太多，体重会给你惊喜！

回味无穷

2018，总有一些美食让你念念不忘。

才美外现

好好吃饭，吃饱了才有力气改变世界。

快乐肥宅

少吃外卖，外面的饭菜更巴适！

需要注意的是，表头名称要和刚才设置的变量名称对应，因为我应将两个表头分别改为“文本变量1”和“文本变量2”，这么做是为了后续步骤中PS能够自动对应列。

将Excel文档另存为Csv（逗号分隔符文件）备用。

后续导入数据组文件的步骤支持导入TXT和CSV两种格式。 但由于各种原因（比如BOM头），用TXT导入会出现编码问题，我们为了避免引入新的问题，选用CSV格式。

点击 图像 =》变量 =》数据组，弹出数据设置面板。

接下来从数据导入窗口导入Csv文件。

导入确定以后注意观察左侧绿色框起来的部分，这里显示了读取的CSV文件，检查一下是否正确。

可以将预览按钮√，查看一下效果是否正确。如果没有问题，点击应用按钮，使数据组设置生效。

导出数据组文件

选择 文件 =》导出 =》 数据组作为文件，将会弹出数据组文件导出面板。

在这里可以设置导出位置和文件名，都是十分必要和方便功能。

找到目标文件夹，检查一下文件。

转换图片格式

刚才导出的文件都是PSD格式的，也只能转出为PSD格式的文件。我们还需要通过脚本来执行批量转换图片格式。

点击文件 =》脚本 =》 图像处理器，弹出图像处理器面板。

接下来的转换工作就交给PS了。（这一步之所以是脚本是因为PS会像我们平时操作一样打开一份PSD再选择格式进行存储，这么无聊的工作肯定不要让我们人来做啦！具体时长也是根据数量来决定的。）