QR-код в Illustrator, Figma и CorelDRAW: как открыть и править

Скачанный код редко печатают как есть. Обычно он идет в макет. Дизайнер ставит его на листовку в Illustrator, маркетолог собирает афишу в Figma, а в агентстве этикетку верстают в CorelDRAW. Везде встает один вопрос: как вставить код и что в нем можно трогать.

Векторный SVG все три редактора открывают штатно, а ломается код уже на правках. Открывают и правят его в каждой программе по-своему, а список опасных правок общий.

Adobe Illustrator

Открыть файл можно двумя способами. File, Open создает новый документ размером с код. Это удобно, чтобы перекрасить и пересохранить. File, Place кладет код в существующий макет; снимите галочку Link при размещении, тогда код ляжет внутрь документа и не потеряется при передаче файла. Если под кодом должна остаться заливка макета, берите файл без белого квадрата вокруг модулей: как получить QR-код с прозрачным фоном, разобрано отдельно.

В документе код лежит двумя объектами: матрица и подложка под ней. Масштабируйте только за угловую точку с зажатым Shift, чтобы сохранить пропорции. Цвет меняется как у любого контура. Выделите матрицу и задайте новую заливку, темную и контрастную к фону. Подписи в поштучном файле нет, а свой текст макета перед сдачей в типографию переведите в контуры командой Type, Create Outlines. Зачем это нужно, разобрано в статье QR-код в кривых.

Illustrator сохраняет макет в PDF командой Save As и отдает EPS через Export. Типография принимает оба формата. Точный размер кода на изделии задавайте цифрами в панели Transform. Так надежнее, чем подгонять на глаз. Не опускайте сторону ниже 2 см: под коротким адресом код 1 см еще читается, но в макете с длинной ссылкой такой запас уже не работает.

Figma

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

С печатью у Figma есть ограничение, о котором лучше знать заранее: Figma работает в RGB и экспортирует PDF тоже в RGB, а типографии печатают в CMYK. Конвертировать придется на стороне печатника или через Illustrator. Черный код после конвертации почти не меняется, а цветной проверьте по цветопробе.

CorelDRAW

Импортируйте файл через Ctrl+I. Код приходит группой объектов. Тяните его за угол и меняйте заливку на панели цветов. Текст переводится в кривые командой Ctrl+Q. CorelDRAW экспортирует EPS и PDF, и этого типографиям хватает.

В старых версиях при импорте SVG программа спрашивает про единицы измерения. Соглашайтесь с предложенными, а точный размер кода задайте потом в макете цифрами. Ширина и высота должны остаться равными.

Что править можно, а что сломает код

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

Поворот коду не мешает. Крутите на любой угол. У матрицы три угловые метки, и по ним камера сама находит ориентацию. Код на корешке папки, поставленный вертикально, и код под 45 градусов на афише читаются так же, как прямой.

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

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

FAQ

Следующий шаг

Перекрасьте матрицу в свой темный фирменный цвет и наведите камеру телефона на код прямо на мониторе. Телефон должен открыть вашу ссылку, как и до перекраски.

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