Vectorboom
Советы / Инструменты / Comments: 2

Создание в Illustrator динамически изменяющейся визитной карточки при помощи VariableImporter.jsx

Vasily Hall
21.07.2015

Начну с того, что в Illustrator — наиболее используемой мною программе векторной графики от Adobe, существует палитра Variables. Она отвечает за опцию "переменные, управляемые данными" и впервые появилась ещё в Illustrator 10. Эта опция служит для того, чтобы пользователь Illustrator мог создавать набор документов при помощи файла данных, задавая переменную текстовых строк, переменую связанных изображений, переменную параметров видимости объектов и переменную диаграмм (эта последняя функция активно поддерживается сценарием VariableImporter.jsx с 07/2015, но в этом уроке не рассмотрена).

Ну так вот, проблема в том, что в отличие от программы InDesign с его функцией слияния данных Data merge, в которую изначально импортировались файлы с расширением .CSV и .TXT, Illustrator воспринимает только XML-файлы.

Файлы же Illustrator с расширением XML являются гораздо более требовательными к написанию, нежели упомянутые выше текстовые форматы. Эти файлы должны чётко следовать правилам синтаксиса XML, что означает, среди прочего, превращение некоторых символов в XML-сущность. К примеру, такой символ, как амперсанд "&" должен превратиться в "&".

Но, благодаря функциональной особенности продуктов Adobe — работе со сценариями, эта проблема преодолена с помощью сценария VariableImporter.jsx. Данный сценарий позволяет быстрее, нежели это возможно другими средствами, создавать широкий набор документов с переменными, которые управляются данными.

Настоящий урок покажет вам, как быстро создать динамически изменяющуюся визитную карточку — документ, использующий три из четырёх типов переменных — текст, видимость и связанные изображения. Эти переменные будут изменять внешний вид контента страницы документа. Кратко опишу переменные, с которыми мы будем иметь дело:

1) Text: текст является обычной надписью, которая должна заменяться по мере надобности другим текстом в текстовом фрейме документа Illustrator. Текстовый фрейм может быть любым из всех разновидностей текстовых фреймов, которые только есть в Illustrator — простой (точечный) текст, текст в области, текст вдоль контура... Размещаемый текст может переполнять линию контура или текстовый фрейм, если его окажется слишком много.

2) Linked Files: cвязанные файлы изображений. Они являются привязанными к документу арт-объектами, которые помещаются в документ Illustrator, как обычные пиксельные изображения. О том, что пиксельное изображение является связанным файлом, говорят диагональные направляющие, отображающиеся при выделении изображения. Переменные этого типа могут заменять изображения внутри графического фрейма. Размерность и масштабирование изображений различной величины, размещаемых в месте вклейки, контролируется при помощи опции Placement контекстного меню палитры Links.

3) Visibility: видимость. Эта переменная управляет либо арт-объектом, являющимся видимым, либо не включает в палитре Layers состояние видимости объекта. Это то же самое, что и щелчок указателя на изображении глазика в палитре Layers, чтобы скрыть объект. В программе Illustrator это может быть мощный инструмент, поскольку от видимости арт-объектов сильно зависит внешний облик документа. И как вы увидите в ближайшее время, эти переменные являются особенно лёгкими в использовании для упамянутого сценария.

Создание таблицы с данными

Как правильно озаглавить колонки

Чтобы приступить к созданию проекта с использованием переменных, управляемых данными в Illustrator, следует сперва создать текстовый файл с необходимой информацией. При помощи Microsoft Excel или с помощью любого текстового редактора, который имеет в себе табличный редактор с функциями строк и столбцов, сделаем сначала спецификацию с нужными типами отображаемой информации.

В этом уроке для создания визитных карточек мы будем использовать программу Microsoft Excel.
К примеру, в наших визитных карточках, равно как и в файле данных для них, которые мы вскоре создадим, будут следующие к заполнению поля:
- name (имя);
- title (должность);
- email (адрес электронной почты);
- phone (номер телефона);
- photo (фотография);
- adress (почтовый адрес);
- award (награда).

Создадим новый документ Excel и введём имена этих полей в верхнюю строку таблицы.

Для оптимальных результатов следует воздержаться от использования пробелов или каких-либо специальных символов в словах имён и наименований, заполняющих ячейки таблицы. Не следует также писать имя или наименование с цифры в начале, поскольку объекты с таким названием не будут соответствовать чётким правилам обозначения имён XML. Иначе сценарий перезапишет такие названия в файл данных в виде: "Variable1", "Variable2" и т. д.

Символы "@" и "#" также неприемлемы для использования в качестве первых букв в названии, потому, что они обозначают столбец данных для таких типов переменных, как связанный файл изображения или видимость, соответственно.

Для заполнения поля визитки, предназначенного для фотографии, мы будем использовать символ "@" в качестве первой буквы перед названием переменной "@photo". Для поля наград — в качестве первой буквы будем использовать символ "#" в переменной "#avard".

Помимо специальных символов "@" и "#", которые используются для обозначения переменных особого типа, заглавия колонок должны придерживаться правил синтаксиса XML. Они сводятся к следующему:
- заглавия колонок должны состоять только из букв и цифр;
- заглавия колонок не должны содержать пробелов и специальных символов, за исключением случаев, описанных выше;
- заглавия колонок не должны начинаться с цифры (в противном случае сценарий изменит название заголовка такого столбца на приемлемое для XML, например, — "Variable1").

Заполнение колонок таблицы с текстовыми переменными

Заполним в нашей таблице ячейки для текстовых переменных текстовыми данными. Введём вручную текст в каждую ячейку таблицы или вставим его из буфера обмена, для того, чтобы он потом отобразился в соответствующих полях визитной карточки. В моём примере я вводил адрес в ячейку целиком, используя для возврата каретки принятое в Exel сочетание клавиш ALT+Enter.

Illustrator не имеет возможности назначать более одной текстовой переменной для текстового фрейма, как в InDesign, но сценарий VariableImporter осуществит парсинг фреймов, в которых используется символ возврата каретки.

Заполнение колонки таблицы с переменной для связанных файлов изображений

Для поля с пиксельным изображением (@photo), введём имя файла изображения для его вставки в соответствующее место визитной карточки. Подразумевается, что все изображения будут находится в одной папке.

Можно ввести весь путь к файлу с правильным синтаксисом, используемым в вашей платформе, так чтобы файлы можно было бы найти в любом указанном месте, но для этого урока мы будем использовать одну общую папку.

Заполнение колонки таблицы с переменной видимости

Для полей видимости существует всего два "режима" в которых информация о видимости может быть прочитана. Они таковы:
1) запись слова "true" или слова "false" в ячейку;
2) запись любого символа в ячейку в которой вы бы хотели отобразить состояние "true". Для состояния "false" ячейку следует оставить пустой.

Переменная видимости показывает и скрывает соответствующий арт-объект в палитре "Layers", подобно тому, как это делается в палитре щелчком указателя по пиктограмме в виде глазика. В процессе работы со сценарием VariableImporter второй "режим" может быть удобен применительно для тех ячеек таблицы, где написание слов "true" и "false" является нежелательным. И поскольку для меня это всегда нежелательно, то я буду использовать второй "режим".

После того, как таблица, созданная в программе Excel будет заполнена данными, было бы не плохой идеей сохранить созданное в виде мастер-копии в файле с расширением .XSLX, а затем сохранить другую копию в файле с расширением .CSV или в формате .TXT (с поддержкой управляющих символов табуляции в качестве разделителей). Сценарий VariableImporter осуществит импорт данных из файлов .TXT и .CSV.

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

Создание шаблона в Illustrator

Документ Illustrator который будет использован для выработки динамически изменяющихся документов должен (обратите внимание) состоять из нескольких деталей.

На случай, если вы не знакомы с переменными в Illustrator, давайте ознакомимся с ними. Панель для этой функции находится в меню Window > Variables.

В этой панели мы, как правило, создаём новую переменную. Затем выделяем вручную арт-объект, находящийся в монтажной области и назначаем его для только что созданной переменной. Для этого при подсвеченной строке с переменной обычно щёлкаем указателем на кнопке Make Linked File Dinamic.

Однако, если документ имеет очень много переменных, то выполнять все эти действия каждый раз будет очень утомительно. Сценарий VariableImporter позаботится об этом, автоматически выполнив все перечисленные выше действия, при помощи опции авто-привязки объектов.

Арт-объектам в Illustrator задаётся переменная с динамикой видимости. Связанным файлам пиксельных изображений задаётся переменная с динамикой смены этих изображений. Но лишь данные графиков объектов диаграмм (которые в этом уроке не рассмотрены), а также содержимое текстовых фреймов могут иметь переменные с динамикой смены текстового содержания.

Чтобы создать динамический текст для файла визитной карточки, мы будем использовать простой (точечный) текст. Но для этой цели в равной степени может быть использован как текст в области, так и текст вдоль контура.

Чтобы поместить связанный файл изображения в шаблоне, я просто подогнал точно размер фотографии и разместил её в рамке. Убедитесь, что параметр опции "Link" в диалоговом окне File > Place имеет отметку. Для очевидности того, что размещаемое изображение является связанным, а не встроенным, оно при выделении должно иметь две направляющие, пересекающиеся в виде буквы "Х".

При присвоении переменной объектам, очень полезной оказывается функция авто-привязки сценария VariableImporter.jsx. Она совершенно избавляет пользователя от необходимости открывать панель Variables.
Всё, что нам нужно — это:
- присвоить арт-объектам те же самые имена, которые находятся в шапке таблицы нашего файла с данными;
и
- использовать опцию “Bind by Name” в окне запущенного сценария.

Не используйте символы "@" или "#" для имён объектов, предназначенных для видимости или связанности, когда устанавливаете для документа функцию авто-привязки сценария. К примеру, если в таблице переменная называется "#visibility", имя арт-объекта должно быть "visibility".

Применив в этом шаблоне простую организацию слоёв, я тем самым назначил арт-объектам основные свойства. Слой "static" служит для неизменного контента, а слой "dynamic" — для динамически изменяющегося. Таким образом, текст "Ph:" не будет смешиваться с динамическим текстом.

Названия текстовых строк в палитре Layers могут слегка запутать, поскольку начальными символами они совпадают с реальным содержимым текстовых фреймов. (Если же текстовый фрейм пуст, то название будет просто «Type»). Важно помнить, что если содержание текстового фрейма совпадает с названием переменной, то для правильной авто-привязки текстовые фреймы должны быть переименованы вручную.

Связанный файл изображения в моём шаблоне назван также, как и в заголовке столбца — "photo", чего вполне достаточно.

Переменная видимости — "награды" заставляет отображаться в документе группу объектов, изображающих награду, если связанная с группой переменная имеет значение “True”.

Ячейки в столбце #награды, в которых записан символ “X” покажут арт-объекты с наградами, в то время, как другие арт-объекты будут скрыты.

В отличие от связанного изображения, арт-объект с наградой не накладывается на другой арт-объект, но всегда остаётся в документе в скрытом или видимом состоянии.

Чтобы создавать трудоёмкий динамично изменяющийся контент, который невозможно создать в программе Photoshop или InDesign, переменная видимости объектов может быть использована в сочетании с Apperance — одной из мощнейших функций программы Illustrator.

Запуск сценария

После того, как создана таблица и создан новый файл в программе Illustrator, можно запускаем сценарий. VariableImporter.jsx можно загрузить по ссылке

Щёлкните указателем в кнопке "Raw" и в открывшейся вкладке сохраните веб-страницу как необработанный текст. Проще выбрать опцию "Сохранить объект как", а затем сохранить в папке, где обычно размещены сценарии Illustrator. Либо выбрать любую другую папку. Если сохранить сценарий в папке "Scripts", которая находится в фолдере Illustrator — вы увидите его в меню File > Scripts. В противном случае запускать сценарий придётся из меню File > Scripts > Other Script..., чтобы найти его в месте, которое выбрал пользователь.

Когда скрипт запущен, первое, что нам потребуется сделать — открыть файл данных. Выберите ваш файл с расширением .csv, и следом появится главное диалоговое окно сценария. Это окно со многими функциями, поэтому для урока по созданию визитной карточки я кратко расскажу об использовании каждой из них, применительно к текущему документу.

Обзор работы сценария

В верхней части диалогового окна находится флаговая кнопка или чек-бокс “First row has column titles” (первый ряд является оглавлением колонок). Отметка в нём означает, что у нашей таблицы есть "шапка". Сценарий назначит имена переменным, полагаясь на заглавия колонок таблицы.

Можно, однако, импортировать таблицу с одними только данными, сняв отметку в этом чек-боксе. Тогда имена переменным придётся присваивать в этом диалоговом окне, что для нашего документа придётся делать беспрестанно.

Модуль “Column Names” (заглавия колонок)

Верхний блок модуля “Column Names” отображает в области прокрутки все переменные. Здесь можно проверить имена переменных, чтобы убедиться, что все заголовки колонок были правильно интерпретированы при импорте данных, и назначить или же изменить тип переменных, если в чек-боксе “First row has column titles” не проставлена отметка.

Прокрутка может быть полезна для вновь создаваемых таблиц, чтобы убедиться в том, что имена переменных были импортированы, как и ожидалось. Обязательно убедитесь, чтобы каждый тип переменных был отображён правильно. К примеру, если вы забыли поставить символ "@" перед названием переменной, которая должна прийти в виде связанного файла, то отсутствие иконки в виде кораблика тут же даст знать, что этот символ не был поставлен.

В случае переменной со связанным файлом изображения существует особая опция, которая раскрывается в отдельной панели: "Prepend Path" (добавить путь). Отметка в этом поле выведет диалоговое окно, в котором, требуется указать папку со всеми изображениями. Когда папка выбрана, то путь к файлу автоматически добавится к имени файла, записанному в качестве переменной связанного изображения в столбце таблицы. Свободный от излишеств текст названия файла, введённый в ячейку таблицы “Hendricks.png” теперь превратится в путь “/Users/User/Documents/Hendricks.png”. Впрочем, для получения изображений из всех уникальных локаций, всегда остаётся возможность вводить внутри ячейки данных конкретные для каждой платформы пути файлов.

Модуль “Data Set Names” (названия наборов данных)

Этот модуль оперирует с названиями наборов данных. При значении по умолчанию схема именования наборов данных похожа на схему названий, присущей Illustrator (“Dataset 1”, “Dataset 2” и т.д.). VariableImporter.jsx присваивает наборам данных свои названия (“Record 1”, “Record 2” и т.д.).

При помощи этого диалогового окна вы можете выбрать различные варианты именования наборов данных, включая возможность использовать любое содержимое переменной в качестве части имени набора данных. К примеру, можно использовать имена сотрудников, размещённые на визитке, как часть названия набора.

Когда же процесс достигнет этапа экспорта, то применение таких пользовательских названий является весьма целесообразным, поскольку названия наборов данных могут быть использованы как имена динамически генерируемых файлов. Важно ещё и то, что каждое название набора данных уникально, так что режим работы сценария поддерживает, по меньшей мере, одно "приращение" к названию в поле с именем набора данных. Если же существует неуникальный элемент, который должен быть уникальным, то такие имена переменных или наборов данных не будут действительными при автоматическом создании сценарием файла XML.

Модуль “Keep XML” (получение файла XML)

Этот модуль позволяет сохранить для последующего использования сгенерированный сценарием XML-файл. Магия сценария в том, чтобы превращать данные .CSV или .TXT в поддерживаемый Illustrator XML-файл.

Этот XML-файл сохраняется на компьютере пользователя и затем, будучи импортированный в документ Illustrator, автоматически создаёт в нём наборы данных.

При непроставленной отметке в чек-боксе “Keep XML” сохранение XML-файла отменяется. По умолчанию в исконном созданном сценарием имени файла присутствует метка времени (например: VariableImportData_123478...).

Щелчок указателем в кнопке "XML" позволяет самостоятельно указать место назначения для хранения файла.

Модуль "Auto Binding" (автопривязка)

Модуль "Auto Binding" (автопривязка) главным образом содержит раскрывающийся список с опциями автоматической привязки импортируемых переменных к назначенным для них арт-объектам. Для решения большинства задач проще всего использовать опцию “Bind by Name” (привязка по имени), которая привяжет переменные к арт-объектам, согласно "именам" этих объектов в палитре Layers.

Необходимо отметить, что импорт переменных с авто-привязкой имеет "одностороннюю направленность". К примеру, при наличии нескольких одинаково названных арт-объектов, переменная будет копироваться для назначения к нескольким объектам.

Это позволит вам использовать тот же самый текстовый контент на нескольких текстовых фреймах. Равно как и другой контент на нескольких объектах, связанных с другими типами переменных. Однако, если библиотека переменных будет создаваться в документе вручную с использованием палитры Variables, то такую библиотеку нельзя будет повторно импортировать в документ Illustrator, поскольку имена переменных уже не будут уникальны.

Обзор кнопок управления

В правом верхнем углу диалогового окна есть кнопка в виде знака вопроса [?], щелчок указателем на которой выводит экран с инструкциями.

Рядом с ней кнопка "меню". Она показывает ещё один экран, который может понадобиться в любой момент, если существует необходимость использовать сценарий для импорта аналогичных данных более чем один раз, или для импорта множества переменных изображений связанных файлов.

Модуль "Settings" (установки)

Первый сверху чек-бокс в этом модуле “no-increment warning” (вывод сообщения о неувеличении...) при проставленной отметке назначает появление алерта с предупреждением, которое сообщает, когда в поле с названием набора данных не происходит "приращения" названия, предусмотренное работой сценария для придания уникальности названию наборов данных. При непроставленной отметке вывод этого сообщения отключается. При проставленной отметке во втором чек-боксе "'\\' creates line-breakers in text" (создание переводов текстовых строк) — все двойные обратные слеши, поставленные во фрейме с размещённым текстом текстовых переменных будут преобразованы в перевод строки.

Модуль "Preset Options" (предустановленные параметры)

Этот модуль позволяет вам сохранить созданное состояние конфигурации сценария. Также можно загружать и удалять файлы созданных пресетов. В файлах пресетов, которые создаются сценарием VariableImporter.jsx сохраняются заполненными или незаполненными все необходимые чек-боксы и запоминаются все пути файлов. Что может быть полезно при выполнении множества сходных задач.

Модуль "Prepend Path Options" (опции подстановки пути)

При проставленной отметке в чек-боксе "Images" этого модуля появится окно браузера, в котором пользователь должен выбрать или создать папку для размещения файлов изображений. Сценарий при создании переменных связанных файлов изображений будет добавлять путь к файлу, указанному в ячейке таблицы, обращаясь к указанной папке.

При проставленной отметке в чек-боксе "Graphs" появится окно браузера, в котором пользователь должен выбрать или создать папку для размещения файлов диаграмм. Сценарий автоматически добавит путь к указанному в ячейке файлу диаграммы при создании переменной соответствующей переменной.

Модуль "Preset XML Options" (предустановленные опции XML-файлов)

Этот модуль влияет непосредственно на сгенерированный сценарием XML-файл, если опция “Keep XML” была задействована на первом появившемся экране сценария. Но на этот раз при проставленной отметке в чек-боксе этого модуля место назначения файла XML для сохранения должен определить сам пользователь. Путь к папке назначения будет сохранён как часть пресета.

Эта функция может быть полезна для сохранения XML-файлов в любых целях. К примеру, для использования в каких-либо вспомогательно-художественных целях, для создания веб-приложений или же в создании программного обеспечения для собственного бизнеса.

Сценарий в действии

Если исполняемость сценария была успешной, то последует алерт с сообщением о том, сколько имён переменных и записей было сделано. А панель Variables должна отобразить все импортируемые переменные!

Если была использована функция авто-привязки и выбрана опция “By Name”, а соответствующие арт-объекты были названы правильно в панели Layers, то переменные которые отображаются в панели Variables также должны быть привязаны к арт-объектам. С этого момента можно переключаться между наборами данных при помощи кнопок "назад" и "вперёд", находящихся в палитре Variables.

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

Пакетная обработка

Завершающий этап — использование пакетной обработки для каждого набора данных. Наиболее распространённым примером будет преобразование визитных карточек в .PDF файлы. Для этого будем использовать палитру Actions (Window > Actions) чтобы сохранять PDF. Применим команду File > Save Copy, чтобы сохранить текущий файл как копию PDF файла в любой назначенной папке, но не изменяйте первоначальное название файла, которым заполнено диалоговое окно.

Рекомендуется использовать действие “Save Copy” взамен действия“Save As”, поскольку во втором случае Illustrator по какой-то причине заменяет расширение файла на своё собственное.

Затем требуется обработать набор данных и превратить их в pdf-файлы.

Используйте контекстное меню палитры Actions, чтобы назначить команду “Batch...”. Выберите источник Sourse: Data Sets и выберите назначение Destination: None. Также сделайте отметку в чек-боксе “Override Save Commands”, чтобы выбрать папку для сохранения преобразованных файлов.

Можно также определиться, как следует назвать ваши файлы при сохранении, сделав отметки в радио-кнопках в области File Name:. Когда вы нажмёте на кнопку ОК, Illustrator запустит набор из действий, сохранив каждый PDF файл в выбранной папке.

Собственно говоря, это всё, по крайней мере, когда дело доходит до основы. Надеюсь, этот инструмент сделает жизнь проще для тех пользователей, которым необходимо использовать переменные, управляемые данными в Adobe Illustrator.

Темы, не затронутые в уроке

Пост-процессинг

Вывод файлов в Illustrator при помощи наборов действий палитры Actions обладает мощным преимуществом для тех случаев, когда некоторые процессы пост-обработки должны быть сделаны в документе после отображения набора данных. Например, при создании динамических текстовых документов, иногда важно иметь текст, содержащийся внутри областей, которые он не должен переполнять.

Некоторые слова обрезаются, если область текстового фрейма переполнена символами. Узнать об этом можно по маленькому красному квадратику с плюсиком на краю текстового фрейма. Для устранения этого можно использовать отдельный, написанный пользователем сценарий, внедрённый в набор действий при помощи команды контекстного меню палитры Action “Insert Menu Item” (вставить пункт меню).

Appearances (Внешние Облики объектов)

Illustrator показывает свои преимущества особенно тогда, когда дело доходит до переменных, управляемых данными, поскольку эта особенность есть мощнейшим проявлением его функциональности.
В сочетании с переменной видимости, арт-объект, который обработан ещё и эффектом Apperance (внешний облик объекта), может быть использован для производства разнообразных графических комбинаций.
Вот лишь некоторые направления, где эффекты Apperance могут управлять макетом документа:
- Textwrap (обтекание текстом);
- эффекты семейства Pathfinder;
- всевозможные растровые эффекты Illustrator, один из которых — Outline Object;
- эффект Convert to Shape;
- эффект Transform...;
- какие-либо другие сочетания эффектов в панели Apperance, которые может обнаружить любой желающий.

Перевод: Eugene S. Chiayinickh

Всего комментариев: 2
0
1  
Вот бы ещё форматирование текста сохранялось в датасетах…

0
2  
А ещё "\\" не подхватывается в начале строки.

Upd. Пропатчил строчку:
myXMLString = myXMLString.replace(/__RETURN_CHAR/g, "
");
в
myXMLString = myXMLString.replace(/__RETURN_CHAR/g, " 
");

Кривовато, зато работает.

Только зарегистрированные пользователи могут добавлять комментарии.
[ Registration | Login ]
twitter RSS facebook deviantart feed dribbble
Логин
Пароль
Новости Форума
 
Перепечатка, копирование или воспроизведение информации в каком-либо виде строго запрещены.
Все материалы, которые размещены на этом сайте не подлежат дальнейшему воспроизведению и/или распространению в любой форме, кроме как с письменного разрешения автора.