0

我目前使用 Photoshop + 数据集来自动创建 CTA 按钮以在客户网站上进行测试。数据集通常包含文本和其他更改，例如下划线或背景颜色，以及对齐和字体格式。

通常这些可以达到数千个，Photoshop 处理得很好，但任务是技术性的而不是图形化的。对我来说，photoshop 对于这项任务来说太过分了。

有人知道对代码更友好的解决方案吗？我目前正在使用 HTML 和 fabric.js 上的画布。这允许我操作模板图像，并且我希望我可以通过管道输入代码来创建许多 .png 输出图像。

4

1 回答 1

0

Canvas 非常适合您的自动化

首先，创建一个基础 .png，然后以数千种方式以编程方式对其进行更改。

将结果保存到适当命名的 .png 文件中。

您甚至可以创建一个动态创建数千种变化的屏幕查看器。客户端可以浏览动态创建的图像并选择他们感兴趣的变化。这将消除对数千个保存文件的需求。

这只是可用于自动化的画布命令的开始：

应用文本：

context.font("italic 14pt Verdana");
context.textAlign = textAlign;              // left|right|center
context.fillText("anyText", x,y);

下划线有点棘手：

// use measureText to get the text width
var textWidth =context.measureText(text).width;    
// 1-time only, pre-calculate all the “Y” underline offsets for each font you use
var ULOffset=lookupULOffset(font,fontSize);
context.moveTo(x,y+ULOffset);
context.lineTo(textWidth,y+ULOffset);
context.stroke();

更改背景颜色或您为其创建子图层的任何其他内容！

像 Photoshop Canvas 一样有一套出色的合成操作。

  • 源头
  • 来源
  • 源出
  • 源头之上
  • 打火机
  • 异或
  • 目的地结束
  • 目的地输入
  • 目的地输出
  • 目的地之上
  • 较暗（由于某种原因已被弃用？？）

您还可以在绘制图层时应用 Alpha，以及在绘制任何画布形状时应用 Alpha。

此外，在线查看为画布创建的许多图像过滤器。

而这才刚刚开始……

自动化快乐！

于 2013-06-17T20:10:25.840 回答