Blog.RohanMedia.com

În acest tutorial voi aborda două aspecte esenţiale pentru “un banner de succes” şi anume vom discuta despre elementele cheie care ajută ca un banner să aducă vizitatori şi în a doua parte vom discuta despre cum sa faci un banner animat în photoshop. Sa începem  cu  …             

scopul bannerului şi să presupunem că acesta este creat pentru a aduce mai mulţi vizitatori.

Elementele de design

1. Cuvintele esenţiale

Pentru a atrage atenţia cititorului este imperial ca bannerul să conţină cuvinte care să îl determine să dea click-ul şi să îl grăbească, într-un fel, ca şi când ar fi primul la informaţie sau ca şi când ceva s-ar termina ca şi produsele de pe stocul de la promoţii. Astfel, câteva sugestii de cuvinte ar fi cele de genul “Află primul”; “Grăbeşte-te”; “Click acum”; “Vino”; “Te aşteptăm”; “Fi primul”; “Click aici”; “Gratis” şi multe altele.

2. Simplu şi curat

Încearcă ca mesajul tău către posibilul vizitator să fie cât mai clar prin a folosi cuvinte/fraze cât mai scurte. Multe informaţii pe un banner imens plictisesc. De asemenea culorile folosite să fie complementare iar pentru banerele animate (.gif), în care se succed mai multe imagini, paleta de culoare să nu difere foarte mult. Cuvintele esenţiale să fie încadrate cât mai citeţ, scoase în evidenţă prin culoarea cea mai aprinsă din paleta folosită.

3. .GIF

Recomand banerele animate pentru că, din punctul meu de vedere, te poţi adresa prin doar câteva poze şi câteva cuvinte unui public ţintă mai numeros, explicând mai bine ceea ce vrei tu defapt (să acceseze blogul tău). De asemenea, în cazul bannerelor animate, ideal ar fi ca url-ul blogului şi eventual şi sloganul să apară în fiecare frame.

4. Originalitate şi implementare

Fi original, nu “împrumuta” idei de la alţii pentru că s-ar putea ca bannerul tău să fie confundat cu al altcuiva. O idee originală nu înseamnă nici să exagerezi … imaginează-ţi că tu eşti în locul vizitatorului şi cam ce te-ar atrage pe tine să dai un click. Implementarea se referă la locul unde amplasezi bannerul. Normal, acesta se amplasează pe un alt blog sau un site însă ideea este să încerci ca bannerul tău să fie amplasat într-o poziţie cât mai bună. Nu cred că cineva ar observa prea mult un banner situat la sfârşitul unei pagini.

Cum să fac un banner animat în Photoshop ?

Vă voi arăta cum faci un banner animat .gif în Photoshop de mărimea 100×100. Se foloseşte foarte mult mărimea 125×125 însă se aplică aceeaşi paşi pentru toate doar mărimea diferă. Aşadar, pasul unu este evident …

1. Deschidem Photoshopul şi un document nou cu mărimea 100×100 de pixeli (witdh: 100 px; height: 100px).

2. Fundalul nu poate fi animat aşa că vom adăuga un layer nou sau îl vom converti pe cel normal prin dublu click şi apoi OK.

3. Adăugăm elementele animaţiei în funcţie decum concepem design-ul. Adăugăm poze sau pur şi simplu text. Să presupunem că se va alcătui din trei poze şi un frame cu informaţiile legate de titlu şi slogan.

4. Animaţia acestor layere se face printr-un click în colţul din dreapta sus pe triunghiul mic şi selectarea opţiunii Make Frames from Layers.

*** Mutarea layer-elor între ele se face printr-un simplu click pe layer-ul dorit şi cu clickul apăsat se mută mai sus sau mai jos, în funcţie de preferinţe.

5. Animarea bannerului cât mai simplu şi cât mai repede  nu înseamnă că eşti condiţionat de o singură opţiune. Animarea simplă permite şi fade-uri, mişcări succesive sau blending-uri. Astfel, pentru a efectua mişcările se selectează două frame-uri (layer), unul de la care să înceapă efectul şi unul la care să se termine, apoi un click pe triunghiul mic din colţul dreapta sus, se selectează Tween apoi se adaugă un parametru la poziţie, opacitate sau effect care să fie între 2 şi 7.

6. Timpul în care se face mişcarea propriu-zisă poate fi de la 0,5 secunde la infinit în funcţie de preferinţ?e sau de banner. Experimentarea cu aceşti timp ajută la stabilirea unei animaţii optime.

7. Acum bannerul animat este finalizat şi tot ce rămâne de făcut este testarea, salvarea şi utilizarea acestuia. Astfel, pentru a testa bannerul în photoshop folosim butonul de play sau Alt+Shift+Ctrl+S pentru a testa bannerul în browser. Bannerul se salvează Save as … sub extensia .gif

Se pot folosi ş programe special create pentru a edita un banner, a folosi unul predefinit pe care doar îl personalizezi sau, la fel ca şi Photoshop-ul, te ajută să creezi unul de la zero. Alegerea e de partea fiecăruia.  Pentru cei care doresc să se adreseze publicului care foloseşte telefonul mobil pentru a naviga pe bloguri le recomand tutorialul Cum să-mi fac blogul mobile friendly

Articole pe aceeasi tema:

• Tutorial: Favicon sau icoana personalizată … 340 views
• Watermark-ul 189 views
• Cum adaptezi tema blogului 355 views
• Blogul meu de $100 252 views
• Custom blog theme software 233 views

Tags: banner, blog, reclama, traffic, tutoriale   Posted tutoriale |

Aboneaza-te. Scriu cel putin trei articole pe zi