Дизайн QR-коду: як оформити QR-код, щоб він сканувався
Кольори, форми й логотип — у межах кількох правил, що дають телефону його прочитати.
Дизайн QR-коду — завжди балансування. Звичайний чорний квадрат із модулів виглядає як паркувальний талон на ретельно зробленому макеті, тож дизайнери перефарбовують його, заокруглюють точки, ставлять логотип посередині — і часом друкують тисячу меню з кодом, який не прочитає жоден телефон. Правил, від яких залежить сканування, небагато, і всі вони механічні; знаючи їх, код можна оформлювати досить сміливо.
Є й другий, тихіший біль. Багато онлайн-генераторів типово роблять «динамічні» коди: надрукований код веде на коротке посилання самого генератора, а воно вже переадресовує на ваш сайт. Зручно, щоб рахувати сканування, — доки не скінчиться пробний період і переадресація не вимкнеться. Гілку на r/graphic_design про коди, вимкнені після пробного періоду, заповнили дизайнери з тією самою історією, а найпопулярніша відповідь просто нагадала, що в InDesign є вбудований генератор.
У цьому посібнику — ті самі правила: контраст, тиха зона, розмір, корекція помилок, логотипи, — інструменти, якими користуються дизайнери, а далі — як це зробити в Paletoo: візитка з кодом, який зчитується просто під час роботи.
Чому оформлені коди перестають скануватися
Телефон знаходить QR-код за трьома великими квадратами в кутах — шукачами, яких зазвичай звуть «очима», — а тоді зчитує сітку дрібних модулів між ними. Шкодить усе, що заважає відрізнити ці форми від тла: слабкий контраст, світлий код на темному тлі (деякі читачі навіть не пробують прочитати його інвертованим), модулі настільки круглі чи тонкі, що сусіди вже не торкаються, логотип, який закриває більше, ніж код здатен відновити.
Порожнє поле довкола коду важить не менше. Стандарт вимагає тиху зону завширшки чотири модулі з кожного боку; коли в неї залазить текст, рамка чи край візитки, читач не знаходить, де код починається. І що більше даних ви кодуєте, то більше модулів: довге посилання з мітками чи повна візитка дають щільну сітку, якій потрібен більший друк.
Чим користуються
Зазвичай починають із безкоштовних веб-генераторів: вставив посилання, вибрав кольори, завантажив. Перш ніж брати такий, перевірте дві речі: чи код статичний, тобто містить саме ваше посилання, чи динамічний, тобто йде через їхній сервер; і чи дають вам векторний файл, бо маленький PNG, збільшений для друку, розмивається по краях. InDesign робить статичний векторний код через Object › Generate QR Code; у Figma користуються плагіном; у Canva й Adobe Express є власні інструменти для QR.
Жоден із цих шляхів не хибний, і в динамічних кодів є чесні застосування: посилання, яке можна змінити після друку, статистика сканувань для кампанії. Просто знайте, який саме код ви робите. А яким би не був інструмент, безпечний порядок той самий: оформили — надрукували пробник у справжньому розмірі — відсканували кількома телефонами перед тиражем.
Правила, з якими код сканується
Насамперед контраст: темний код на світлому тлі, щонайменше 3 : 1, а краще значно більше. Колір — це нормально, якщо він достатньо темний: темно-синій, глибокий зелений чи насичений фірмовий помаранчевий на білому зазвичай працюють, пастельні на білому — ні. У градієнті рахується найсвітліша точка. Тиху зону тримайте на чотирьох модулях, вільною від тексту й лінії обрізу.
Розмір залежить від відстані й даних. Коротке посилання на візитці в руці сканується приблизно з 2 × 2 см; для постерів правило на око — десята частина відстані сканування, тож код, який читатимуть із 2 м, має бути близько 20 см. Корекція помилок має чотири рівні — L, M, Q і H, — що відновлюють приблизно 7, 15, 25 і 30 % коду. Логотип поверх коду потребує H і має вкладатися в те, що H здатен винести.
Зроблено в Paletoo
Усі зображення на цій сторінці зроблено в Paletoo — ці три тими самими кроками на інших шаблонах:
Як це зробити в Paletoo
Почніть новий документ, клацніть кнопку формату над полотном і в розділі Змінити розмір артборда виберіть Візитка, ЄС: 1004 × 650 px — це 85 × 55 мм при 300 dpi. А «Відкрити в Paletoo» відкриває вже готову візитку з цього посібника.
Натисніть T, щоб узяти Текст, і наберіть імʼя, а посаду й контакти — окремими текстовими шарами, усе в лівій частині візитки; права — для коду. Вкладка Дизайн показує шрифт, розмір і колір кожного з них.
Нова візитка в Paletoo: імʼя, посаду й контакти набрано, праворуч вкладка «Дизайн» Натисніть ⌘ K і виконайте QR-код або виберіть код в Елементи › Коди. Код зʼявиться вже вибраним, а вкладка «Дизайн» відкриється на його секції QR-код. Пересуньте його праворуч і зробіть близько 2 см завширшки.
QR-код додано праворуч на візитці й вибрано, видно його секцію «QR-код» У меню Тип виберіть Посилання й наберіть адресу сайту. Під полем код зчитується просто під час набору: ✓ Сканується або ⚠ Може не сканувати з причиною в підказці — контраст, світлий код на темному тлі чи читач, який не зміг його прочитати.
Зблизька: секція «QR-код» — тип «Посилання», адреса й перевірка сканування Оформіть його. Стиль має вісім готових варіантів, серед них Класичний, Мʼякий, Крапки і Плавний. Модулі задають форму точок, Очі — Рамка й Зіниця кутових квадратів, Колір — колір коду, суцільний чи градієнтом, а Тло — плашку під ним.
Для логотипа натисніть Обрати в рядку Логотип і клацніть шар або завантажте Файл: він стане частиною коду, а код розчистить модулі під ним і підніме корекцію. ⋯ у заголовку секції відкриває Налаштування QR-коду: Тиха зона та окремі кольори для Рамки очей і Зіниці.
Натисніть Експорт: PDF з позначками Включити виліт і Мітки обрізу — для друкарні, SVG — для самого коду. Код намальовано фігурами, тож він лишається чітким за будь-якого розміру.
Зробіть по-своєму
Підлаштовуйтеся під бренд, не втрачаючи контрасту. У рядку Колір візьміть темний фірмовий відтінок, а Тло лишіть світлим; на темній візитці дайте коду власну світлу плашку, а не робіть його світлим. Новий код починає з рівня M у рядку Корекція — для простого коду саме те; піднімайте її лише заради логотипа чи грубого ефекту, бо більша корекція — це ще й більше дрібніших модулів.
Ламаються коди найчастіше на формах. Класичний і Мʼякий читаються майже всюди; Крапки й тонкі смуги виглядають легше, але потребують більшого розміру й контрасту. Коли модулі химерні, тримайте «очі» простими: рамка Коло зі звичайною зіницею читається краще, ніж код, де прикрашено все. Стежте за рядком перевірки після кожної зміни; коли все гаразд, його підказка показує кількість модулів і контраст.
Перевірка читає власний малюнок коду, а не ефекти, накладені зверху, тож після растру чи зерна на коді перевірте його телефоном. Тиха зона хай лишається 4, якщо візитка не зовсім тісна; розмір добирайте за вмістом — коротке посилання близько 2 см, візитка 2,5–3 см, — і перед замовленням відскануйте домашній відбиток у масштабі 100 % двома телефонами.
Шаблони з цим ефектом
Запитання
Чи не перестане мій QR-код колись працювати?
Ні, якщо він статичний. Код із Paletoo містить саме ваше посилання чи дані, а сканування не проходять через наші сервери, тож тут нічому спливати. Надрукований код не можна перенаправити, тож кодуйте сторінку, яку можете оновлювати.
Чи можна зробити QR-код кольоровим?
Так, якщо він лишається темним на світлому тлі з достатнім контрастом, щонайменше 3 : 1. Читачі підводять саме на світлих кодах на темному тлі й на блідих кольорах.
Якого розміру має бути надрукований QR-код?
Близько 2 × 2 см для короткого посилання на візитці в руці, більше — для візитки-контакту чи довгого посилання. Для постерів закладайте приблизно десяту частину відстані сканування.
Чи можна поставити логотип посередині?
Так. Скористайтеся рядком «Логотип»: код підніме корекцію й розчистить модулі під логотипом, а перевірка сканування скаже, якщо логотип завеликий.
Генератор QR-кодів безкоштовний?
Так. Створення, оформлення й експорт кодів нічого не коштують, не потребують облікового запису й не додають водяного знака.
Зробити онлайн
- Генератор QR-кодівСтворіть QR-код безкоштовно й назавжди — без реєстрації, у своїх кольорах і формах, із логотипом посередині — і переконайтеся, що він сканується, ще до друку.
- Створіть візитку онлайнСтворіть візитку онлайн безкоштовно й точно в розмір для друку, додайте QR-код, що справді сканується, і збережіть PDF, який прийме друкарня.
Безкоштовні шаблони для дизайну: Шаблони контактів і закликів до дії
Читайте далі
Як зробити візитку з QR-кодом
Правильний розмір, ваші дані, QR-код, що сканується, і PDF для друкарні.
Як тримати шрифти й кольори бренду однаковими в кожному дизайні
Назвіть кольори й шрифти один раз, привʼяжіть до них кожен шар і змінюйте в одному місці.
Альтернатива Canva для дизайнерів: справжня типографіка й друк
Швидкий старт із шаблону — і всі інструменти, на які розраховує дизайнер.
Спробуйте на своєму дизайні
Paletoo відкривається в браузері, без реєстрації. Кожен ефект тут живий: замініть фото чи слова — і ефект підлаштується.
Відкрити в Paletoo