Przejdź do treści
cutty.dev
Wszystkie posty

Jak zrobić kod QR z logo firmy — i czy to bezpieczne dla skanowania

Kod QR z logo na środku wygląda profesjonalnie i buduje zaufanie. Pokazujemy jak go zrobić, ile logo może zająć, żeby kod dalej się skanował, i jak zrobić to bez wysyłania pliku na obcy serwer.

Powiem ci, jak to widzę po latach robienia tych kodów dla klientów. Czarno-biały kwadrat działa. Skanuje się idealnie. Tylko wygląda dokładnie tak samo jak kod sąsiada, kod konkurencji i kod na ulotce, którą ktoś wrzucił ci do skrzynki. Nijak.

A teraz daj na środek logo. Nagle człowiek widzi, czyj to kod, zanim w ogóle przyłoży telefon. I skanuje chętniej, bo widzi markę, którą zna. Różnica w odczytach potrafi być spora.

Pytanie, które zawsze pada na tym etapie: „a nie zepsuje mi to skanowania?". Nie. Pod warunkiem że nie zrobisz tego na pałę.

Czemu logo nie wysadza całego kodu QR z logo w powietrze

Tu jest mała magia, którą warto rozumieć. Każdy kod QR ma w sobie zaszytą korekcję błędów. To taki nadmiarowy bagaż danych, który pozwala czytnikowi odtworzyć całość, nawet jak kawałek kodu jest zabrudzony, pomięty albo czymś zasłonięty.

Na najwyższym poziomie (oznaczają go literką „H") kod przeżyje zakrycie jakichś 30% powierzchni. Logo na środku zjada zwykle 20–25%. Czyli mieścisz się, i to z zapasem.

Dwie rzeczy, których trzymam się zawsze:

  1. Logo idzie na sam środek. Nigdy w rogi. Te trzy grube kwadraty w narożnikach to znaczniki pozycji, po nich czytnik łapie, gdzie góra, gdzie dół. Zasłonisz jeden i koniec, kod jest martwy.
  2. Daj logo białą obwódkę. Cienki margines dookoła. Oddziela twoją grafikę od „pikseli" kodu i naprawdę pomaga przy odczycie, zwłaszcza gdy logo ma postrzępiony, nieregularny kształt.

Robota krok po kroku

W cutty.dev robisz to przy okazji skracania linku, bo kod QR siedzi przy każdym linku z automatu. Lecimy:

  1. Skróć link albo otwórz taki, który już masz w panelu.
  2. Wbij w sekcję „Kod QR" na stronie edycji.
  3. Wrzuć swoje logo (PNG, SVG, JPG, co masz). Ląduje na środku, a korekcja błędów sama podskakuje na wyższy poziom. Nie musisz nic klikać.
  4. Dobierz kolor kodu i tła pod markę.
  5. Pobierz. PNG na ekran i social, SVG do druku (skaluje się bez utraty ostrości, więc na baner czy roll-up bierz właśnie SVG).

Podgląd odświeża się na żywo. Widzisz efekt, zanim cokolwiek wyląduje na dysku.

Uważaj na to: kolory potrafią cię urządzić

To jest ten jeden moment, w którym ludzie najczęściej się wykładają, więc słuchaj uważnie.

Skaner nie czyta kolorów. Czyta kontrast. Możesz kod pomalować, proszę bardzo, ale trzymaj zasadę: ciemny kod na jasnym tle. Nie odwrotnie. Jasny kod na ciemnym tle owszem, zeskanuje się na twoim flagowym telefonie, a potem klient ze starszym androidem stoi i klnie, bo nic mu nie łapie.

I nie wsadzaj koloru kodu zbyt blisko koloru tła. Granatowy na czarnym? Zapomnij. Im większy kontrast, tym pewniej kod łapie z dalszej odległości (a na witrynie sklepu czy plakacie na przystanku to akurat ma znaczenie).

Sprawa, o której nikt ci nie powie: gdzie ląduje twoje logo

Większość generatorów kodów z logo każe ci wgrać plik na ich serwer. I tu się zatrzymaj na sekundę. Twój znak firmowy, czasem jedyna porządna wektorowa wersja, ląduje u obcego dostawcy. A w regulaminie bywa zapisane prawo do dalszego użycia tego pliku. Czytał ktoś kiedyś ten regulamin? No właśnie.

U nas kod powstaje w twojej przeglądarce. Logo nie rusza się z twojego komputera, nigdzie się nie wysyła ani nie zapisuje. Plik zostaje twój.

Drukujesz raz, kierujesz, gdzie chcesz

Na koniec rada, która kiedyś uratuje ci sporo pieniędzy na ponownym druku.

Rób kod ze skróconego linku, nie z surowego, długiego adresu. Czemu? Bo kod oparty o krótki link możesz później podmienić od środka. Zmieniasz cel linku w panelu, a ten sam wydrukowany kod nagle prowadzi gdzie indziej. Zamknęła się promocja? Przekierowujesz na nową, bez ruszania ulotek.

Kod wbity wprost na długi adres jest zabetonowany. Zmiana celu = nowy kod = nowy druk = nowy rachunek z drukarni. Pomyśl o tym, zanim zamówisz tysiąc wizytówek.