Cum sa inserezi un logo sau imagine intr-un cod QR in Photoshop

QR_code_itcsolutions_euIn acest articol sunt prezentate diferite metode de modificare a unui cod QR in Photoshop care sa permita inserarea unui logo, imagine sau text si care sa nu afecteze citirea corecta a acestuia.

Codurile QR (Quick Response code, Denso Barcode, ISO/IEC18004)  reprezinta un cod de bare matriceal (bi-dimensional) utilizat in prezent pentru a transmite rapid informatii scurte de tip (URL, telefon, adresa contact, carte de vizita, intalnire, pozitie geografica, email) catre dispozitive mobile.

Codurile QR au fost create in 1994 de o subsidiara Toyota, Denso Wave, pentru a fi folosite de constructorul de masini in managementul diferitelor componente auto. Codurile QR au permis implementarea unui mecanism de identificare vizuala rapida a acestora si posibilitatea stocarii de informatii suplimentare.

In prezent, caracteristicile codurilor QR:

  • rapiditate in citire;
  • cerinte hardware si software minimale pentru un cititor de coduri QR;
  • capacitatea de a stoca informatii variate (text, valori numerice, date binare);

au facut din acestea un instrument eficient utilizat in transmiterea de informatii catre utilizatorii dispozitivelor mobile.

Cum aleg tipul de cod QR ?

Exista mai multe tipuri de coduri QR clasificate in functie de numarul linii si coloane (sunt matrice patrice in care numarul de linii este egal cu numarul de coloane) numite module. Cele 40 de versiuni contin de la 21 la 177 de module, fiecare versiune avand cu 4 mai mult ca precedenta.

Versiuni diferite de coduri QR
Versiuni diferite de coduri QR

Cu cat un cod QR are o versiune mai mare cu atat creste capacitatea de stocare dar si densitatea punctelor din imagine, ceea ce il face mai greu de citit.

Important ! In prezent, pentru dispozitive mobile se folosesc coduri QR versiunea 6 care pot fi citite cu usurinta de majoritatea aplicatiilor mobile si care pot stoca suficient de multe date.

VersiuneModule
(linii x coloane)
Nivel corectie eroriNumar maxim cifreNumar maxim caractere alfanumerice
121X21L4125
  M3420
  Q2716
  H1710
225X25L7747
  M6338
  Q4829
  H3420
641X41L322195
  M255154
  Q178108
  H13984
40177X177L70894296
  M55963391
  Q39932420
  H30571852

*date pentru toate versiunile sunt disponibile pe site-ul Denso Wave.

Codurile QR contin informatii de validare a informatiei stocate care sa permita cititorului sa extraga toate datele chiar daca nu a fost citit tot codul. Aceasta solutie este definita de metoda Reed-Solomon de corectie a erorilor care este folosita la generarea codului QR. Metoda nu face minuni insa permite citirea corecta a datelor pentru coduri QR ce prezinta erori (intre 7% si 30%):

  • nivel corectie L – citirea se face corect chiar daca imaeginea contine maxim 7% erori;
  • nivel corectie M – citirea se face corect chiar daca imaginea contine maxim 15% erori;
  • nivel corectie Q – citirea se face corect chiar daca imaginea contine maxim 25% erori;
  • nivel corectie H – citirea se face corect chiar daca imaginea contine maxim 30% erori;

Deoarece datele da validare se gasesc tot in codul QR, un nivel de protectie mai mare inseamna mai putin spatiu pentru date.

Deci, pentru a alege tipul de cod QR (pentru campanii de marketing, publicitate si carti de vizita, versiunea 6 este mai mult decat suficienta) se tine cont de:

  • marimea mesajului;
  • nivelul de corectie a erorilor;
  • numarul de module al codului QR –> capacitatea lui;
  • specificatiile cititorului.

Pentru exemplele din acest articol vom folosi versiunea 6.

Cum generez codurile QR

Pentru a genera codurile QR se pot folosi o serie de generatore care sunt disponibile fara cost pe internet (o cautare pe Google ofera si alte solutii):

Odata generat codul QR acesta poate fi descarcat ca imgine in diferite formate (JPG, PNG, BMP, GIF).

Pentru exemplul din acest articol se poate folosi orice generator care da posibilitatea alegerii versiunii si a nivelului de corectie a erorilor.

Ce se intampla daca URL-ul este prea mare

Daca se genereaza un cod QR pentru a transmite un URL, se poate intampla ca, pentru versiunea de cod QR si nivelul de corectie a erorilor ales, numarul de caractere din adresa sa fie mai mare decat numarul maxim de caractere alfanumerice permis. De asemenea, un numar mare de caractere determina o densitate mai mare de puncte in codul QR si acesta pare prea incarcat.

In aceasta situatie NU se modifica structura site-ului Web pentru a scurta URL-ul si nici NU se achizitioneaza un alt domeniu tot mai scurt.

Solutia este data de numeroasele servicii disponibile pe internet care ofera alias-uri foarte scurte pentru URL respectiv. Serviciile sunt oferite fara cost si un exemplu este is.gd. De exemplu pentru URL-ul

este generat alias-ul: http://is.gd/9nRCj5.

Aceste servicii fac automat redirectarea clientului catre URL-ul initial si pot oferi diferite statistici.

Daca nu doriti sa depindenti de un serviu extern, o solutie este implementarea unui serviciu propriu de redirectare.

Important ! Utilizarea unui serviciu extern sau propriu de micsorare a URL-ului este o buna strategie de urmarire a impactului codului QR deoarece acesta include URL-ul alias si nu cel initial. Astfel, prin redirectarea facuta de serviciul respectiv, se indica sursa clientului care viziteaza site-ul promovat.

Cum citesc si cum testez codul QR

Cel mai accesibil cititor de coduri QR este un smartphone sau o tableta.

Pentru dispozitive Nokia ce nu sunt livrate cu o aplicatie de citire a codurilor QR se poate descarca una de pe pagina Scan and decode mobile codes.

Pentru platforma Android un client este oferit de proiectul zxing iar pe viitor se preconizeaza ca aplicatia va fi nativa se se va activa automat odata cu camera.

O alta solutie este utilizarea unor servicii online de validare si citire.

Cum inserez un logo sau imagine intr-un cod QR

Chiar daca codurile QR clasice au o imagine destul de simpla, data de un patrat alb ce contine multe puncte negre, ele pot fi modificate astfel incat sa arate asa:

Mashable.com examples of custom QR codes
Mashable.com examples of custom QR codes

sau asa

Takashi Murakami QR Code for SET agency (only for Asia)
Takashi Murakami QR Code for SET agency (only for Asia)

Unul dintre primele articole publicate pe aceasta tema a fost cel al lui Duncan Robertson de la BBC in care este descrisa generarea codului QR:

BBC QR code
BBC QR code

De ce se pot modifica codurile QR

Alterarea codului QR pentru a-l stiliza si pentru a-l face mai atractiv si mai interesant este posibila deoarece este folosita metoda Reed-Solomon de corectie a erorilor la generarea codului QR.

Cele patru niveluri de corectie a erorilor (L, M, Q, H) descrise anterior permit citirea corecta a codului chiar daca 7%, 15%, 25% sau 30% din imaginea codului lipseste sau contine informatii gresite. Bazandu-ne pe aceasta caracteristica a codului QR, il putem modifica in proportiile indicate, astfel incat sa inseram un logo sau alta informatie.

Cu toate acestea exista zone din codul QR care nu pot fi modificate deoarece afecteaza structura codului QR (versiune cod, format, repere de pozitionare si aliniere). Zona sigura din codul QR in care se poate insera un logo sau imagine, fara a-l distruge este zona de date (zona gri din imaginea urmatoare).

QR Code Structure Example (Sursa wikipedia.org)
QR Code Structure Example (Sursa wikipedia.org)
Important !
Modificarile din codul QR sunt permise doar in zona de date date (zona gri).

10 pasi pentru a insera un logo, imagine sau text intr-un cod QR:

Important !

Pentru ca rezultatul sa fie unul bun este important sa testati codul QR, dupa modificari, cu propriul telefon sau cu un cititor de coduri QR de pe Internet.

Pasul 1. Se genereaza un cod QR versiunea 6 cu un nivel H (maxim 30% erori) de corectie a erorilor pentru o adresa URL aleasa folosind un generator sugerat in sectiunea Cum generez codurile QR sau gasit pe Internet. Generatorul (eu am folosit GoQR generator) trebuie sa permita editarea acestor parametri :

  • adresa URL pentru care se construieste codul QR;
  • versiune cod QR; se alege 6;
  • nivel corectie erori (QR Code Error Correction Level): se alege H (maxim 30%);
  • (optional) dimensiunea codului QR: 250px X 250px;

Codul obtinut (de preferat in format PNG) se descarca pentru a fi editat.

Pasul 2. Se deschide Photoshop (in acest exemplu eu am folosit CS 3 dar orice versiune mai noua este ok) si se construieste un document cu urmatoarele setari:

Setari document Photoshop pentru codul QR
Setari document Photoshop pentru codul QR
  • Inaltime (Height): 300 px;
  • Latime (Width): 300px;
  • Paleta (Color mode): RGB
  • Culoare background (Background contents): Alb (White)

Pasul 3. Se adauga imaginea codului QR obtinuta la pasul 1 folosind optiunea File –> Place din meniul aplicatiei Photoshop. Imaginea este plasata pe un layer nou si este de tip Smart Object. Pentru a-l identifica usor numim acest layer QR (dublu-click pe numele layer-ului pentru a-i edita numele).

Daca imaginea codului QR nu are dimensiunea dorita (in acest exemplu 250px X 250px) atunci se redimensioneaza. Se selecteaza layer-ul pe care este plasata imaginea si se alege optiunea Edit –> Transform –> Scale sau Edit –> Free Transform (Ctrl + T).

Pasul 4. Pentru a putea edita imaginea codului QR, Smart Object-ul aferent ei din layer-ul numit QR la pasul 3 (daca este in acest format dupa ce a fost adaugata in Photoshop) este rasterizat folosind Layer –> Rasterize –> Layer sau Click-dreapta pe layer si Rasterize layer;

Pasul 5. Este eliminat fundalul de culoare alba din imaginea codului QR (NU layer-ul Background). Se face o selectie a pixelilor de culoare alba din codul QR:

5.1. Se selecteaza layer-ul numit QR;

5.2. Se selecteaza toti pixelii de culoare alba prin Select –> Color range si apoi folosind pipeta (color picker) se indica culoarea alba. In prealabil se seteaza valoarea parametrului Fuzziness la zero.

Select QR code white background in Photoshop
Select QR code white background in Photoshop

5.3. Se sterge continutul selectiei cu Delete si se anuleaza selectia folosind Ctrl+D sau Select -> Deselect. Astfel se obtine un layer ce contine doar imaginea codului QR. In acest moment, proiectul Photoshop contine 2 layere: unul alb pentru Background si codul QR.

Photoshop custom QR project layers
Photoshop custom QR project layers

Cum se pot rotunji colturile intr-un cod QR

Pasul 6. (optional) Se aplica un efect de rotunjire a colturilor pentru codul QR.

6.1. Se face o selectie a layer-ului numit QR tinand apasat Ctrl si selectand in acelasi timp iconita layer-ului in fereastra Layers.

6.2. Se deschide optiunea de rafinare a selectiei prin Select –> Refine edge si se fac urmatoarele ajustari:

Setari rotunjire colturi pentru codul QR
Setari rotunjire colturi pentru codul QR

6.3. Avand layer-ul QR selectat se copiaza (Edit->Copy) selectia ajustata intr-un nou layer (Edit –> Paste si este generat automat un nou layer). Numim noul layer Rounded QR iar daca ascundem layer-ul QR atunci codul arata asa:

Cod QR modificat prin rotunjirea colturilor
Cod QR modificat prin rotunjirea colturilor

Pasul 7. Se aplica un efect de tip Gradient Overlay…,  Pattern Overlay… sau Color Overlay… pe layer-ul Rounded QR sau QR (daca pasul 7 a fost sarit).

Atentie ! Este important ca efectul aplicat sa pastreze contrastul puternic intre imaginea codului si backdround. Altfel este afectata citirea codului. Eu aleg un Gradient Overlay… cu setarile:

Setari pentru Gradient Overlay
Setari pentru Gradient Overlay

Dupa pasul 7 codul QR devine:

Cod QR cu gradient
Cod QR cu gradient

Care este zona pe care o pot modifica

Deoarece folosim un cod QR generat cu un nivel de corectie a erorilor de maxim 30% inseamna ca putem modifica o parte din zona de date si corectie (zona gri).

Atentie ! Se pot modifica maxim 30% din aceste date astfel incat codul sa mai poata fi citit.

Pasul 8. (optional) Pentru a nu pierde timpul cu modificari care distrug codul QR putem defini o zona de lucru astfel incat sa fie folosita ca reper. Pentru codul QR generat cu o dimensiune de 250 X 250 zona sigura care se poate defini (pentru acest exemplu) poate fi un patrat de 100px X 100px, un dreptunghi de 200px X 50px sau un cerc cu raza de 100px.

Atentie ! Cea mai buna solutie pentru a determina zona care poate fi modificata este sa incerci si sa testezi de fiecare data.

Zone sigure in editarea codului QR din exemplu
Zone sigure in editarea codului QR din exemplu

Cum se adauga o imagine sau un text

Pasul 9. Se defineste un nou layer pe care se insereaza o imagine sau un text. In prealabil se tine cont de zonele de siguranta.

Pasul 10. Pentru a scoate in evidenta textul sau logo-ul se aplica pe layer-ul acestuia un efect de tip Stroke de culoare alba (culoare din fundal) si de dimensiune 4-5 pixeli.

Rezultatul poate fi:

Cod QR modificat
Cod QR modificat

In interiorul codului QR se pot aplica diferite modificari de culoare, atata timp cat se pastreaza contrastul intre codul de bare si fundal.

Daca te ajuta poti verifica sursa proiectului Photoshop descris in acest post.

Daca ti-a placut sau ti-a fost util acest post atunci spune-le si altora despre el sau arunca-ti o privire pe reclamele din aceasta pagina. Referirea acestui material este cel mai bun mod de a aprecia autorul.