QR-код с прозрачным фоном: PNG для макета
Белый квадрат вокруг кода портит цветной макет. Как включить прозрачный фон, что после этого окажется в PNG и SVG и какое ограничение остается у темных подложек.
Вы ставите код на готовый макет: листовку с цветной подложкой, упаковку, слайд презентации, плашку фирменного цвета. В скачанном файле вокруг модулей остается белый квадрат, и на цветном фоне его видно как заплатку.
Убрать его можно одной галочкой в «Тонкой настройке». Она работает сразу во всех форматах выгрузки, а у темных макетов остается ограничение: код все равно обязан быть темнее подложки.
Где включить и что окажется в файле
Галочка «Прозрачный фон» стоит в «Тонкой настройке», сразу под выбором цвета кода и фона. Она общая для всех выгрузок, так что без заливки одинаково уходят и листы, и поштучные файлы, в PDF, SVG и PNG. На светлом фоне превью прозрачного листа не отличить от обычного, и у листа единственный признак режима это пометка «без фона» в сводке параметров и в колонтитуле превью. В режимах «SVG по одному» и «PNG по одному» превью показывает сам код, и вместо белого фона вокруг кода видна шахматка, как в графическом редакторе.
PNG выгружается с альфа-каналом. Поле вокруг кода и промежутки между модулями в готовом файле полностью прозрачны, а светлые модули в этом режиме не рисуются вообще. Сторона файла та же, что в обычном режиме, около 1200 пикселей: у короткой ссылки вышло 1188. Забрать такие файлы можно в режиме PNG с прозрачностью поштучно.
В SVG заливка с прямоугольников снимается. У обычного листа их два: подложка страницы и подложка под кодом. У прозрачного листа остается один прямоугольник, рамка с атрибутом fill="none". Обводка цветом кода сохраняется, а заливки внутри нет. Поштучный файл приходит без прямоугольников совсем, сразу матрицей, и в редакторе ложится на любой слой макета. Скачать такой файл можно в разделе векторные коды в SVG, листами или по одному.
В PDF заливки листа тоже нет, но на бумаге прозрачность становится цветом бумаги. Смысл у нее появляется при вставке PDF в чужой макет.
Темный макет: почему светлый код не пропустят
При включенной прозрачности выбранный цвет фона в файл не попадает, и сервис считает контраст против белой бумаги. Это видно прямо в форме: черный код с темным фоном #16181d без галочки отклоняется по контрасту, а с галочкой те же цвета проходят.
Обратный вариант не работает. Форма не пропустит белый код на темном фоне ни с галочкой, ни без нее: «выберите цвет темнее фона, иначе камеры не распознают код». Порог контраста тот же, что и в обычном режиме, и код обязан остаться темнее подложки. Откуда берется порог и как считаются пары цветов, разобрано в статье как оформить QR-код.
Заливки в файле нет. Под кодом окажется макет, и контраст теперь зависит от макета. Поэтому проверять надо уже готовый макет с кодом.
На темной подложке помогает только светлая плашка под кодом. Прозрачность не отменяет поле. Полоса шириной 4 модуля вокруг кода остается пустой и светлой, иначе камера не найдет границу матрицы. Нормы поля разобраны в статье поля и отступы QR-кода.
Логотип в центре, когда подложки нет
В обычном режиме модули под логотипом закрывает подложка, скругленный квадрат цвета фона, поверх которого лежит логотип. При прозрачном фоне закрашивать нечем, поэтому сервис вычищает модули из самой матрицы. У кода на 25 модулей в ряду освобождается квадрат 9 модулей, у кода на 33 модуля освобождается квадрат 11 модулей, у кода на 41 модуль освобождается квадрат 13 модулей. Прямоугольников с заливкой фона в таком SVG не остается, под логотипом пустое место в матрице, а не белая плашка.
Настраивать тут нечего. Логотип с прозрачными краями и галочка «Прозрачный фон» сочетаются сами, и цветной каймы вокруг логотипа не появится. На пестром макете у логотипа должна быть своя непрозрачная основа, иначе сквозь него будет виден рисунок подложки. Остальное про логотип в центре собрано в статье QR-код с логотипом.
Проверка перед тиражом
Скачайте один PNG и положите его на реальный макет в своем редакторе. Порядок для конкретных программ разобран в статье QR-код в Illustrator, Figma и CorelDRAW, там же список правок, которые код переживет.
Посмотрите на готовый макет сами. Код должен читаться как темный на светлом. Потом наведите камеру телефона прямо на экран. Дальше распечатайте пробник на той бумаге, которая пойдет в тираж, потому что на печати модули замыливаются и код, который читался с экрана, с бумаги может уже не прочитаться.
Проверьте и поле вокруг кода. После вставки в макет там оказывается узор или строчка текста, а полоса нужна такая же пустая, как у кода с белым фоном. Остальные проверки макета с кодом собраны в базе знаний.
FAQ
Как сделать QR-код с прозрачным фоном?
Вставьте список в форму, включите галочку «Прозрачный фон» в «Тонкой настройке» и скачайте результат. Режим общий для всех форматов выгрузки, отдельной кнопки нет.
Как быть, если под кодом окажется фотография?
Прозрачный фон тут не поможет, потому что по фотографии граница матрицы не читается. Кладите под код светлую плашку с полем в 4 модуля. Ее видно как элемент верстки, а код на ней читается.
Что происходит с рамкой при прозрачном фоне?
Линия рамки остается, а заливка внутри нее пропадает. Рамка перестает работать светлой подложкой под кодом, поэтому на темном макете плашку все равно кладет верстальщик.
Сколько кодов можно сделать с прозрачным фоном за раз?
Столько же, сколько обычных: до 1500 строк за заход. Прозрачность задается один раз на весь список, отдельно для каждого кода ее не настроить.
Следующий шаг
Скачайте один код в режиме «SVG по одному» с галочкой «Прозрачный фон» и откройте файл в редакторе. Там будет только контур матрицы, без белого прямоугольника фона под ним.
Заберите коды в PNG с прозрачным фоном: альфа-канал в каждом файле, до 1500 кодов за заход, бесплатно и без регистрации.
Соберите свой лист с QR-кодами
Вставьте список ссылок или загрузите файл, а мы разложим коды с подписями по листам A4 и отдадим PDF, SVG или PNG.
Открыть генератор