Pređi na sadržaj
cutty.dev
All posts

Kako napraviti QR kod sa logotipom kompanije — i da li je bezbedno za skeniranje

QR kod sa logotipom u sredini izgleda profesionalno i gradi poverenje. Pokazujemo kako ga napraviti, koliki logotip može biti da bi se kod i dalje skenirao, i kako to uraditi bez slanja datoteke na strani server.

Reći ću ti kako ja to vidim nakon godina pravljenja ovih kodova za klijente. Crno-beli kvadrat radi. Skenira se savršeno. Samo izgleda potpuno isto kao kod komšije, kod konkurencije i kod na flajeru koji ti je neko ubacio u sanduče. Bez ikakve razlike.

A sada stavi logo u sredinu. Odjednom čovek vidi čiji je to kod pre nego što uopšte prisloni telefon. I skenira radošnije, jer vidi brend koji poznaje. Razlika u očitavanjima može biti velika.

Pitanje koje se uvek postavlja u ovoj fazi: „a neće li mi ovo pokvariti skeniranje?". Ne. Pod uslovom da to ne uradiš na brzinu.

Zašto logo ne izbacuje ceo QR kod sa logotipom u vazduh

Ovde leži mala magija koju vredi razumeti. Svaki QR kod ima u sebi ugrađenu korekciju grešaka. To je svojevrsni suvišan teret podataka koji omogućava čitaču da rekonstruiše celinu, čak i ako je deo koda zaprljan, izgužvan ili nečim prekriven.

Na najvišem nivou (označava ga slovom „H") kod će preživeti pokrivanje oko 30% površine. Logo u sredini obično zauzima 20–25%. Dakle, uklapate se, i to sa rezervom.

Dve stvari kojima se uvek držim:

  1. Logo ide tačno u sredinu. Nikada u uglove. Ova tri debela kvadrata u uglovima su markeri pozicije, nakon njih čitač prepoznaje gde je vrh, a gde dno. Ako prekrijete jedan, kraj, kod je neupotrebljiv.
  2. Dodajte logotipu belu ivicu. Tanak margin oko njega. Odvajate svoju grafiku od „piksela“ koda i to zaista pomaže pri čitanju, naročito kada logo ima nepravilne, nazubljene ivice.

Rad korak po korak

U cutty.dev to radiš usput prilikom skraćivanja linka, jer se QR kod automatski nalazi uz svaki link. Idemo:

  1. Skrati link ili otvori onaj koji već imaš u panelu.
  2. Idi u sekciju „Kod QR" na stranici za uređivanje.
  3. Ubaci svoj logo (PNG, SVG, JPG, šta god imaš). Postavlja se na sredinu, a korekcija grešaka automatski skače na viši nivo. Ne moraš ništa da klikneš.
  4. Prilagodi boju koda i pozadine brendu.
  5. Preuzmi. PNG za ekran i društvene mreže, SVG za štampu (skalira se bez gubitka oštrine, pa za baner ili roll-up uzmi upravo SVG).

Pregled se osvežava uživo. Vidite efekat pre nego što bilo šta dospeje na disk.

Pazi na ovo: boje te mogu izneveriti

To je onaj trenutak u kojem ljudi najčešće greše, zato slušaj pažljivo.

Skener ne čita boje. Čita kontrast. Možeš kod da obuješ u boju, molim te, ali drži se pravila: tamni kod na svetloj pozadini. Ne obrnuto. Svetli kod na tamnoj pozadini, naravno, skeniraće se na tvom vodećem telefonu, a onda klijent sa starijim androidom stoji i psuje, jer ništa ne može da očita.

I ne stavljaj boju koda previše blizu boje pozadine. Teget na crnoj? Zaboravi. Što je veći kontrast, to kod sigurnije hvata sa veće udaljenosti (a na sajtu prodavnice ili plakatu na stanici to baš i ima značaja).

Stvar o kojoj ti niko neće reći: gde sleti tvoj logo

Većina generatora koda sa logotipom zahteva od vas da otpremite datoteku na njihov server. I ovde zastanite na sekundu. Vaš brend, ponekad jedina prava vektorska verzija, završava kod stranog dobavljača. A u uslovima korišćenja može biti zapisano pravo na dalju upotrebu te datoteke. Da li je iko ikada pročitao taj pravilnik? Upravo tako.

Kod se kod nas generiše u tvom pretraživaču. Logo se ne pomera sa tvog računara, nigde se ne šalje niti se čuva. Fajl ostaje tvoj.

Štampaš jednom, upravljaš gde želiš

Na kraju rada, koji će ti nekada uštedeti dosta novca na ponovnom štampanju.

Pravi kod pomoću skraćenog linka, a ne pomoću sirovog, dugog adrese. Zašto? Zato što kod zasnovan na kratkom linku kasnije možeš zameniti iznutra. Menjaš odredište linka u panelu, a isti taj odštampani kod odjednom vodi na drugo mesto. Je li promocija završena? Preusmeravaš na novu, bez diranja flajera.

Kod utipkan direktno na dugačku adresu je fiksiran. Promena cilja = novi kod = novi štampanje = novi račun iz štamperije. Razmisli o tome pre nego što naručiš hiljadu vizit kartica.