QR-код с прозрачным фоном: PNG для макета

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

Квадрат убирает одна галочка в параметрах листа. Работает она сразу во всех форматах, от PNG до PDF, а вот у темных макетов остается ограничение, про которое лучше знать до тиража.

Где включить и что окажется в файле

Галочка «Прозрачный фон» стоит в параметрах листа, сразу под выбором цвета кода и фона. Она общая для всех выгрузок: PDF, SVG листами, SVG по одному и PNG поштучно уходят без заливки одинаково. Прозрачный лист на белом столе превью выглядит как обычный, единственный признак режима это пометка «без фона» в сводке параметров и в колонтитуле превью.

PNG получает настоящий альфа-канал. Тихая зона и промежутки между модулями в готовом файле полностью прозрачны, а белых пикселей нет ни одного: светлые модули в этом режиме не рисуются вовсе. Сторона остается прежней, около 1200 пикселей, у короткой ссылки вышло 1188. Забрать такие файлы можно в режиме PNG с прозрачностью поштучно.

В SVG исчезают прямоугольники заливки. У обычного листа их 2: подложка страницы и подложка под кодом, она же рамка. У прозрачного остается 1, рамка с атрибутом fill="none": обводка цветом кода на месте, заливки внутри нет. Поштучный файл выходит вовсе без прямоугольников, сразу матрица, и в редакторе ложится на любой слой макета. То же самое в векторе: векторные коды в SVG скачиваются листами или по одному. В PDF заливки листа тоже нет, но на бумаге прозрачность становится цветом бумаги, и смысл у нее появляется при вставке PDF в чужой макет.

Темный макет: почему светлый код не пропустят

При включенной прозрачности выбранный цвет фона в рендер не идет вовсе, и контраст сервис считает против белой бумаги. Видно это прямо в форме: черный код с темным фоном #16181d без галочки отклоняется по контрасту, а с галочкой те же цвета проходят.

Обратный ход не работает. Белый код на темном фоне форма не пропустит ни с галочкой, ни без нее: «выберите цвет темнее фона, иначе камеры не распознают код». Порог контраста 4:1 считается по формуле WCAG, той же, что для текста на сайтах, и код обязан остаться темнее подложки.

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

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

Логотип в центре, когда подложки нет

В обычном режиме модули под логотипом закрывает подложка цвета фона: скругленный белый квадрат, поверх него знак. При прозрачном фоне закрашивать нечем, поэтому сервис вычищает модули из самой матрицы. У кода на 25 модулей в ряду освобождается квадрат 9 модулей, у кода на 33 модуля 11, у кода на 41 модуль 13. Прямоугольников с заливкой фона в таком SVG не остается: под знаком дырка в матрице, а не белая плашка.

Настраивать тут нечего, логотип с прозрачными краями и галочка «Прозрачный фон» работают вместе сами, цветной каймы вокруг знака не появится. На пестром макете у логотипа должна быть своя непрозрачная основа, иначе сквозь него будет виден рисунок подложки. Остальное про знак в центре собрано в статье QR-код с логотипом.

Проверка перед тиражом

Скачайте один PNG и положите его на реальный макет в своем редакторе. Маршруты для конкретных программ есть в статье QR-код в Illustrator, Figma и CorelDRAW, там же список правок, которые код переживет.

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

И проверьте поля: после вставки в макет вокруг кода часто оказывается узор или строчка текста, а пустая зона нужна такая же, как у кода с белым фоном. Остальные материалы про подготовку к печати лежат в базе знаний.

FAQ

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

Включите галочку, скачайте один код и положите его на макет до тиража. Если на фоне макета код читается глазами и камерой, остальные 1499 кодов лягут так же.

Заберите коды в PNG с прозрачным фоном: альфа-канал в каждом файле, до 1500 кодов за заход, бесплатно и без регистрации.