Как мы автоматизировали верстку бейджей со сложной персонализацией
- Обновлено: 13 декабря 2019
- Автор: Юрий Юрков
- Время чтения: 10 минут
Вместо вступления…
Нам всегда интересно открывать для себя что-то новое, нестандартное. Когда приходят интересные заказы, это всегда повод для радости от того, что к реализации заказа можно подойти креативно и превратить рутинную работу в приятный процесс, сэкономив при этом массу времени, одновременно с высоким качеством исполнения. Не иначе как без магии тут не обходится 🙂
Кейс
Наша задача изготовить 800 пропусков для детского центра. Пропуска должны быть оснащены программируемым чипом MIFARE 1K, размер изделия должен быть 86*54 мм. Печать полноцветная двусторонняя, поверхность пропусков матовая.
В каждом пропуске необходимо сделать пробой отверстия для крепления карабина ретрактора (такая рулетка, чтобы было удобно оттягивать пропуск к считывателю). Пропуск одновременно является и бейджем, поэтому на нём предполагается нанесение набора переменных данных: фото, ФИО, должность, ID номер. А также, будет несколько вариантов цветовых решений макета, для указания принадлежности к отделу, в котором владелец пропуска/бейджа работает.
В итоге, в шаблоне пропуска/бейджа будут следующие переменные:
- Фото
- ФИО
- Должность
- ID номер
- Цвет фона (картинка фона)
Чтобы верстать такой набор данных вручную, у верстальщика нервы должны быть как стальные канаты, времени уйдёт масса, то и дело будут возникать ошибки. Однако, выход есть!
Автоматизация заполнения переменных данных с помощью инструмента Data Merge (Объединение данных) программы Adobe InDesign
Для упрощения процесса верстки мы будем использовать инструмент Data Merge программы Adobe InDesign.
Нам потребуется заранее подготовить шаблон макета, где мы определим области с переменными данными и таблицу с данными в виде специально подготовленного документа “источник данных”. Для того, чтобы InDesign мог корректно прочитать данные, их нужно упаковать согласно спецификации программы.
Приведу цитату из официального сайта программы Adobe InDesign:
Все, что необходимо для объединения данных, — это файл источника данных и целевой документ.
- Файл источника данных содержит сведения, которые различаются в разных экземплярах целевого документа, например имена и адреса получателей в стандартном письме. Файл источника данных состоит из полей и записей. Поля содержат определенные данные, например имена компаний или почтовые индексы, а записи — это строки с полным набором данных, например с именем компании, адресом, городом, областью и почтовым индексом. Источником данных может быть файл с разделителями-запятыми (CSV) или файл с разделителями-табуляциями (TXT), где поля данных разделены запятыми или символами табуляции соответственно.
- Целевой документ — это документ InDesign, который содержит заполнители полей данных, а также содержимое шаблона (текст и другие элементы, которые остаются неизменными в каждом объединенном документе).
Объединенный документ — это итоговый документ InDesign, содержащий шаблонные элементы целевого документа, которые повторяются столько раз, сколько необходимо для обработки каждой записи в источнике данных.
Подводные камни подготовки источника данных
Файлы источников данных обычно сохраняют в формате файла с разделителями-запятыми (CSV) или с разделителями-табуляциями (TXT).
Ссылка на мануал по Data Merge: https://helpx.adobe.com/ru/indesign/using/data-merge.html
Если клиент сделает все правильно, то мы получаем аккуратно заполненный файл со всеми данными и ссылками на внешние ресурсы (фото и другие графические элементы). Фотографии собраны в отдельной папке, обработаны и названия фото соответствуют данным в источнике данных.
В этом случае, нам остаётся только подготовить шаблон и сформировать документ.
Но, как показывает практика, добится от клиента подобного формата предоставления данных не представляется возможным по причине, что это слишком сложно и не понятно. После долгих объяснений, все равно приходится переделывать. Что в принципе и понятно, автоматизация наша забота, а не клиентская. Поэтому, мы можем рассчитывать на получение данных в формате который удобен клиенту и с которым мы в дальнейшем сможем работать.
В данном кейсе, наши с заказчиком мнения сошлись на том, что персональные данные мы будем записывать прямо в название фото. Т.е. формат названия фотографии выглядел следующим образом:
ID_ФИО_Должность_цвет бейджа.jpg или 12345_Иванов Иван Иванович_Дворник_green.jpg В качестве разделителя используется символ нижнего подчёркивания “_”.
Основным преимуществом данного решения, является простота. Сфотографировали, внесли данные в название фото и готово. Все данные в одном месте их удобно просматривать.
Конечно, в процессе работы и у этого способа обнаружились и минусы. Самой частой проблемой, был пропущенный разделитель, т.е. некоторые данные сливались. Приходилось самостоятельно проставлять разделитель там где необходимо, но на удивление, это не заняло много времени.
Как на основе списка фотографий, мы упаковали файл источника данных?
Не долго думая, мы решили запустить веб-сервер и сформировать файл средствами языка PHP. В качестве веб-сервера на локально машине запуслили OpenServer (https://ospanel.io/) В нем из коробки уже имеются все необходимые инструменты, они не требуют какой-то сложной настройки, поэтому сразу после установки можно приступать к работе.
Алгоритм программы не сложный. Сначала мы получаем из папки “photo” список всех файлов. Затем, с помощью регулярного выражения (записано в переменную $pattern), вытаскиваем все данные и уже структурировано записываем в массив $data. После чего выводим на экран полученные данные в переработанном виде, как это нужно для загрузки в InDesign.
Создаем на сервере файл index.php и пишем вот такой PHP скрипт:
Первой строкой выводим название полей (переменных), и далее каждый раз с новой строки выводим данные по конкретному человеку. В качестве разделителя мы используем табуляцию (в PHP обозначается как “t”).
Запускаем и получаем готовый набор данных. Копируем результат в блокнот и сохраняем в кодировке Юникод, это принципиальный момент работы с русскими символами. Если кодировка будет отличаться, то вместо русских букв, будут отображаться всякие каракули.
Подготовительные работы
Кроме списка фотографий и файла с данными, нам необходимо подготовить несколько шаблонов и макет разметки.
Нам потребуется 4 (четыре) вида шаблонов: red, green, blue, yellow. Их мы будем использовать при формировании макета как основной шаблон бейджа. Создавать сами шаблоны мы будем в программе Adobe Illustrator. Важно соблюдать основные рекомендации по созданию макета. Самое основное это учести поля под обрезка +2мм с каждой стороны.
В этих шаблонах мы создаем все основное оформление бейджей/пропусков и определяем места для размещения персональных данных. Сохраняем макеты соответственно: red.ai, green.ai, blue.ai и yellow.ai И кладём в папку /template/ на сервере.
Кроме самих шаблонов, нам понадобится разметка. Она нужна для последующей вырубки готовых изделий. Её мы рисуем также в Иллюстраторе, и сохраняем в папке со всеми шаблонами. Разметка рассчитывается исходя их исходных размеров будущих изделий.
Теперь, кажется, все готово. Еще раз проверим. У нас есть, файл с данными, папка с фотографиями и сами фотографии, папка с шаблонами и сами шаблоны. Все верно, можем приступать к верстке.
Приступаем к верстке макетов
- Запускаем InDesign и создаем новый документ. В шаблон и помещаем в него файл с нашей разметкой.
- Открываем окно Объединение данный (Data Merge) Окно > Утилиты > Объединение данных
- Выбираем источник данных (наш сгенерированный файл на сервере)
- Создаем шаблон макета и добавляем в него переменные, группируем
- Жмём “создать объединенный документ”
- Выбираем количество записей на страницу документа. Ставим несколько и переходим на вкладку “Макет с несколькими записями” и настраиваем поля и отступы
- Жмём “ОК” и получаем готовый результат
- Сохраняем результат. Когда мы получили сформированный документ, сохраняем его в формате .PDF для последующей печати.
Скачать архив с готовыми файлами программы можно здесь
Финальная обработка
После печати сформированного документа, мы формируем нечто напоминающее бутерброд из листов пластика, инлеев MIFARE 1k, и листов ламината. Затем, отправляем заготовки на “запекание”. В результате запекания наших заготовок, мы получаем монолитный лист пластика толщиной примерно 0,8-0,9 миллиметра из которого будут высечены уже готовые изделия.
После вырубки делается пробой отверстия и бейдж комплектуется ланьярдом и ретрактором. На этом этапе, можно сказать что изделия готовы 🙂
Спасибо, что дочитали нашу публикацию до конца! Всем желаю отличного здоровья и позитивного настроения. Если возникли вопросы задавайте по электронной почте.
Adobe illustrator значок шаблона векторов скачать бесплатно
Сортировать по: По умолчанию В тренде Новейшие Рекомендовать Релевантные Популярные Непопулярные Запросить дизайнзначок шаблон этикетки наклейка форма орнамент элемент знак круг круглый плоский тег значок формы визитная карточка винтаж ретро звезда темная коллекция премиум лучший текст лента яркий гарантия продажа формальный роскошь качество слово
16MB ) All-free-download.com [ Векторы ] продажа значков шаблоны современный дизайн элегантные формы декор ( ai , eps 2.69MB )
com [ Векторы ] шаблон значка в ретро винтажном стиле (ai, eps 1.71MB) All-free-download.com [ Векторы ] шаблон визитной карточки стоматолога элегантная геометрия медицинский крест декор ( .svg .ai .eps 2.89МБ) All-free-download.com [ Векторы ] Шаблоны меню чая с молоком плоский классический дизайн ( .svg .eps .ai 16.03MB ) All-free-download.comштамп геометрия наброски гарантия меню продвижение округлый современный кубок изолированный геометрический имя карты зеленый животное слова тексты красочный напиток изоляция стиль натуральный геометрический блестящий серый скидка напиток приключение цветные идентичность элементы награда коричневый лист продукт печать органическая природа страна нарисованная от руки стеклянная бутылка милый закрученный прекрасный оригинальный очаровательны звезды объект щит зуб произведение искусства кривые сладкое существо надписи пустой вид эмоциональный
[ Векторы ] пустые шаблоны значков блестящие черные круги изоляция ( ai , eps 1.
08MB) All-free-download.com [ Векторы ] добро пожаловать в италию шаблоны значков элементы флага круг форма контур ( .ai .eps .svg 937,29 КБ)Adobe Adobe adobe illustrator значок значок шаблон иллюстратор значок иллюстратор шаблон шаблона упаковки шаблон футболки для гольфа бесплатные векторные шаблоны сертификатов шаблон eps диплом шаблон сертификата значок сертификата adobe indesign туристическая брошюра шаблон строительный фирменный бланк шаблон coreldraw футболка шаблон
[ Векторы ] шаблоны значков роскошный классический круг декор (ai, eps 3.68MB) All-free-download.
com [ Векторы ] Шаблоны фруктовых значков современный цветной плоский декор (ai, eps 1.95MB) All-free-download.com [ Векторы ] шаблон значка гриба зеленый круглый дизайн (ai, eps 2.09MB) All-free-download.com [Векторы] 3d шаблоны значков блестящие цветные круги орнамент (ai, eps 2.85MB) All-free-download.com [ Векторы ] шаблоны значков продаж классические плоские формы (ai, eps 2.71MB) All-free-download.com [Векторы] лучший выбор шаблонов значков белые круги изоляция (ai, eps 1.81MB) All-free-download.com [ Векторы ] Шаблоны значков продуктов элегантный плоский геометрический декор (ai, eps 1.54MB) All-free-download.com [ Векторы ] шаблон значка лимона простые плоские ломтики ленты декор ( ai , eps 2.65MB ) All-free-download.com [ Векторы ] шаблон значка приключений милый эскиз дикого медведя ( ai , eps 758.
41KB ) All-free-download.com [Векторы] шаблон меню здоровой пищи плоский классический рисованной ( .ai .svg .eps 5.09MB ) All-free-download.com [Векторы] шаблон меню ресторана японской кухни элегантный темный (.svg .ai .eps 9.44MB) All-free-download.com [ Векторы ] Шаблон меню чая с молоком плоский элегантный декор ( .svg .ai .eps 2.85MB ) Все-бесплатно-download.com [ Векторы ] шаблоны значков элегантные пустые полосы декор ( ai , eps 5.61MB ) All-free-download.com [Векторы] когда-либо готовые штампы шаблоны плоские классические формы круга контур (.ai .eps .svg 12.62MB) All-free-download.com [ Векторы ] шаблон значка медведя яростный эмоциональный эскиз ( ai , eps 8690,66 КБ ) All-free-download.com [ Векторы ] распродажа шаблоны значков современный дизайн цветных форм (ai, eps 3.
36MB) All-free-download.com [ Векторы ] шаблон значка бутылки элегантный ботанический декор классический дизайн (ai, eps 5.68MB) All-free-download.com [ Векторы ] шаблон значка цветка элегантный плоский классической формы круга (ai, eps 2.00MB) Все-бесплатно-download.com [Векторы] шаблоны значков награды за качество темный плоский ретро декор (ai, eps 3.33MB) All-free-download.com [ Векторы ] шаблон значка растительного продукта зеленый круг листья декор (ai, eps 2.29MB) All-free-download.com [ Векторы ] Шаблоны круглых значков на складе ( ai , eps 5.41MB ) Все-бесплатно-download.com [ Векторы ] шаблон визитной карточки стоматологической клиники плоская элегантная геометрия ( .ai .svg .eps 2.83MB ) All-free-download.com [ Векторы ] Дрон шаблон визитки динамические кривые клетчатый ( .
ai .eps .svg 2.72MB ) All-free-download.com [Векторы] салон красоты тройной шаблон брошюры элегантный плоский клетчатый макет (.svg .ai .eps 5.90 МБ) All-free-download.com [ Векторы ] Премиум шаблоны значков роскошный плоский круг декор (ai, eps 3.39MB) All-free-download.com [Векторы] шаблон значка лисы животного милый плоский мультяшный дизайн ( .ai .eps .svg 1.29MB ) All-free-download.com [Векторы] шаблон значка устанавливает блестящие цветные круги (ai, eps 3.10MB) Все-бесплатно-download.com [ Векторы ] шаблоны значков приключений элегантные темные формы эскиз природы ( ai , eps 3.22MB ) All-free-download.com [ Векторы ] Шаблон полицейского значка блестящий серый щит в форме (ai, eps 1.50MB) All-free-download.com [ Векторы ] Шаблон значка фермерского продукта плоский классический рисованный декор (ai, eps 1.
59МБ) All-free-download.com [Векторы] шаблон значка бестселлера человеческий трофей ленты иконки (ai, eps 2.90MB) All-free-download.com [ Векторы ] Сделано в США шаблон значка классический плоский красный декор ( .ai .eps .svg 2.19MB ) All-free-download.com [ Векторы ] дрон шаблон визитных карточек элегантный контраст кривых пропеллер ( .ai .svg .eps 4.34MB ) Все-бесплатно-download.com [ Векторы ] дрон шаблон визитки контрастные полосатые линии декор объектива ( .ai .svg .eps 4.72MB ) All-free-download.com [ Векторы ] шаблон меню чая с молоком динамическая плоская стеклянная клубника ( .eps .ai .svg 5.45MB ) All-free-download.com Загрузка дополнительных элементов, пожалуйста, подождите…
Загрузка дополнительных элементов, подождите…
Критерий поиска: Тип поиска:Совпадение с любымСовпадение со всеми
Искать в:ВекторыИконкиФотоШрифтыШаблоны сайтовPSD
Лицензия:Все лицензииРазрешить коммерческое использование
Результат сортировки:Сначала лучшее совпадениеСначала новыеСначала много загрузокСначала меньше загрузок
- Дом
- Лицензии
- Срок
- Конфиденциальность
- О
- Связаться с
Шаблон дизайна значка векторов скачать бесплатно 36 541 редактируемых файлов .
ai .eps .svg .cdrСортировать по: По умолчанию В тренде Новейшие Рекомендовать Релевантные Популярные Непопулярные шаблоны дизайна бейджей новая коллекция Запросить дизайн
значок шаблон этикетки стикер элемент форма знак орнамент круг круглый плоский тег формы значок коллекция в форме ретро продажа винтаж лента текст премиум звезда темное слово гарантия качество формальный план изолированный штамп современное продвижение
[ Векторы ] шаблоны фруктовых значков современный цветной плоский декор ( ai , EPS 1,95 МБ ) All-free-download.com [ Векторы ] шаблоны старинных значков окрашены в темные плоские формы (ai, eps 3.77MB) Все-бесплатно-download.com [Векторы] шаблоны значков награды за качество темный плоский ретро декор (ai, eps 3.33MB) All-free-download.com [ Векторы ] красное знамя и лента различной формы ( ai , eps 2.35MB ) All-free-download.
com [ Векторы ] шаблон значка цветка элегантный плоский классической формы круга (ai, eps 2.00MB) Все-бесплатно-download.com [ Векторы ] Шаблоны кофейных значков элегантный классический темный декор (ai, eps 1.64MB) All-free-download.com [ Векторы ] Шаблон полицейского значка блестящий серый щит в форме (ai, eps 1.50MB) All-free-download.com [ Векторы ] шаблоны значков приключений элегантные темные формы эскиз природы ( ai , eps 3.22MB ) Все-бесплатно-download.com [Векторы] шаблон значка лисы животного милый плоский мультяшный дизайн ( .ai .eps .svg 1.29MB ) All-free-download.com [Векторы] шаблон значка приключенческого кемпинга плоский классический светлый логотип (ai, eps 849.30KB) All-free-download.com [ Векторы ] шаблон значка в ретро винтажном стиле (ai, eps 1.
71MB) Все-бесплатно-download.com [ Векторы ] шаблон медицинской брошюры элегантный геометрический клетчатый тройной сгиб ( .ai .eps .svg 8.25MB ) All-free-download.com [ Векторы ] распродажа шаблоны значков современный дизайн цветных форм (ai, eps 3.36MB) All-free-download.com [векторы] шаблоны этикеток оливкового масла элегантный плоский декор (ai, eps 10.17MB) Все-бесплатно-download.com [ Векторы ] шаблон значка бутылки элегантный ботанический декор классический дизайн (ai, eps 5.68MB) All-free-download.com [Векторы] когда-либо готовые штампы шаблоны плоские классические формы круга контур (.ai .eps .svg 12.62MB) All-free-download.com [ Векторы ] шаблон значка качества элегантный плоский ретро округлой формы (ai, eps 1.23MB) Все-бесплатно-download.com [Векторы] Шаблон значка магазина игрушек цветной плоский дизайн (ai, eps 3.
08MB) All-free-download.com [ Векторы ] шаблоны значков продаж классические плоские формы (ai, eps 2.71MB) All-free-download.com [ Векторы ] шаблоны премиальных значков элегантный декор короны и звезды ( ai , eps 3.16MB ) Все-бесплатно-download.com [ Векторы ] добро пожаловать в италию шаблоны значков флаг элементы круг форма контур ( .ai .eps .svg 937.29KB ) All-free-download.com [ Векторы ] Шаблоны круглых значков на складе ( ai , eps 5.41MB ) All-free-download.com [ Векторы ] шаблон медицинской брошюры плоские клетчатые формы ( .ai .eps .svg 6.15MB ) Все-бесплатно-download.com бейдж бейдж дизайн бейдж шаблон дизайн дизайн шаблон шаблон упаковки вектор дизайн футболки бесплатные школьные бордюры филигрань дизайн дизайн журнала дизайн заголовка вектор eps шаблон флеш тату дизайн шаблон сертификата диплом туристическая брошюра шаблон строительство фирменный бланк шаблон coreldraw футболка шаблон
[ Векторы ] лучший выбор шаблонов значков белые круги изоляция ( ai , eps 1.
81MB ) Все-бесплатно-download.com [ Векторы ] Премиум шаблоны значков роскошный плоский круг декор (ai, eps 3.39MB) All-free-download.com [ Векторы ] Шаблон значка службы автомеханика черно-белый элегантный эскиз ретро-автомобиля в форме круга ( .ai .eps .svg 1.66MB ) All-free-download.com [ Векторы ] шаблон значка лимона простые плоские ломтики ленты декор ( ai , eps 2.65MB ) Все-бесплатно-download.com [Векторы] шаблон значка устанавливает блестящие цветные круги (ai, eps 3.10MB) All-free-download.com [ Векторы ] распродажа коллекции тегов ( ai , eps 26.34MB ) All-free-download.com [Векторы] Коллекция шаблонов значков элегантные черно-белые формы (ai, eps 5.60MB) Все-бесплатно-download.com [Векторы] шаблон значка медведя яростный эмоциональный эскиз (ai, eps 869.
66KB) All-free-download.com [ Векторы ] Шаблон значка фермерского продукта плоский классический рисованный декор (ai, eps 1.59MB) All-free-download.com [ Векторы ] шаблон значка пива винтажный плоский стеклянный эскиз хмеля ( ai , eps 1.79МБ) All-free-download.com [ Векторы ] шаблон медицинской брошюры элегантные тройные клетчатые формы ( .ai .eps .svg 9.74MB ) All-free-download.com наилучшая гарантия яркий роскошный округлый натуральный красочный брошюра печать щит баннер изоляция геометрический скидка стиль зеленый красный объект слова серый медицинский крест клетчатый пустой блестящий животное тексты геометрическая геометрия бизнес цветной оригинальный напиток надпись цветочный напиток бутылка вид элементы очаровательны эмоция эмоциональный ботанический существо лист старый коричневый идентичность страна цена сладкое предложение приключения органические нарисованные от руки звезды милые разные
[ Векторы ] набор красочных лент ( ai , eps 574.
48KB ) All-free-download.com [Векторы] 3d шаблоны значков блестящие цветные круги орнамент (ai, eps 2.85MB) All-free-download.com [ Векторы ] Коллекция торговых этикеток красочных плоских форм классического дизайна (ai, eps 9.53MB) All-free-download.com [ Векторы ] Шаблон этикетки органической косметики элегантный классический нарисованный от руки ботаника ( ai , eps 12.74MB ) All-free-download.com [Векторы] шаблоны значков продаж современные плоские 3d формы (ai, eps 2.85MB) All-free-download.com [ Векторы ] шаблоны этикеток качества цветные ретро формы декор (ai, eps 4.53MB) Все-бесплатно-download.com [ Векторы ] продажа значков шаблоны современный дизайн элегантные формы декор ( ai , eps 2.69MB ) All-free-download.com [Векторы] шаблон значка качества страшный эскиз черепа ретро-дизайн (ai, eps 3.
68MB) All-free-download.com [ Векторы ] шаблон значка гриба зеленый круглый дизайн (ai, eps 2.09MB) Все-бесплатно-download.com [ Векторы ] Сделано в США шаблон значка классический плоский красный декор ( .ai .eps .svg 2.19MB ) All-free-download.com [ Векторы ] шаблон значка приключений милый эскиз дикого медведя ( ai , eps 758.41KB ) All-free-download.com [ Векторы ] шаблон брошюры по логистике клетчатая карта геометрическая тройная ( .ai .eps .svg 90,69 МБ) All-free-download.com [ Векторы ] шаблоны значков роскошный классический круг декор (ai, eps 3.68MB) All-free-download.com [ Векторы ] шаблоны значков продуктов элегантный плоский геометрический декор (ai, eps 1.54MB) All-free-download.com [ Векторы ] шаблон значка животного кролика милый мультяшный плоский эскиз ( .
ai .eps .svg 1.23MB ) Все-бесплатно-download.com [ Векторы ] шаблоны экологических значков круглые формы зеленые плоские символы (ai, eps 1.36MB) All-free-download.com [ Векторы ] коллекция этикеток для продажи красные геометрические тексты украшения ( ai , eps 2.89MB ) All-free-download.com [ Векторы ] Набор наклеек для этикеток для продажи (ai, eps 3.92 МБ) All-free-download.com [ Векторы ] пустые значки шаблоны блестящие черные круги изоляция ( ai , eps 1.69MB ) All-free-download.com [ Векторы ] шаблоны значков элегантные пустые полосы декор ( ai , eps 5.61MB ) All-free-download.com [ Векторы ] Италия шаблон значка плоский геометрический круг элементы флага воздушный шар декор ( .ai .eps .svg 758.71KB ) Все-бесплатно-download.com [Векторы] шаблон значка бестселлера человеческий трофей ленты иконки (ai, eps 2.