0

В настоящее время я использую photoshop + datasets для автоматического создания кнопок CTA для тестирования на веб-сайте клиентов. Набор данных часто содержит текст и другие изменения, такие как подчеркивание или цвет фона, а также выравнивание и форматирование шрифтов.Массовое создание + редактировать изображения

Как правило, они могут работать в тысячах, которые Photoshop очень хорошо обрабатывают, но задача техническая, а не графическая. Для меня фотошоп переполнен задачей.

Кто-нибудь знает о решении, которое более дружественное ко всему? В настоящее время я играю с холстом на HTML и fabric.js. Это позволяет мне манипулировать шаблоном, и я надеюсь, что смогу подключить код, чтобы создать несколько выходных изображений .png.

+1

Не могли бы вы пройти через код, который вы пробовали? Как правило, это помогает быстрее ответить на бит. Добро пожаловать в SO! – McDonnellDean

+0

Отлично - извините за долгую паузу ответа. Я попробую и соблазню первую попытку. Еще раз спасибо! – tomarran

ответ

0

Холст будет хорошо подходит для вашей автоматизации

Во-первых, создать базу .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 имеет отличный набор композиционных операций.

  • Источник-над
  • Источник в
  • Источник выход
  • Источник-на вершине
  • Зажигалка
  • Xor
  • Destination-над
  • назначения в
  • Назначение
  • Destination-вершина
  • Darker (это было устаревшим по какой-то причине ??)

Вы также можете применить альфа при рисовании слоя, а также альфа при рисовании любого холста формы.

Кроме того, проверьте онлайн для многих фильтров изображений, которые были созданы для холста.

И это только начинается ...

Happy Automating!

Смежные вопросы