Crearea unui banner animat in Adobe Photoshop

Crearea unui banner animat īn Adobe Photoshop

O publicitate eficienta include si afisarea pe propriul site sau pe site-uri partenere a unui banner static sau animat, cāt mai atractiv si sugestiv. Īn aceasta aplicatie se prezinta etapele crearii unui astfel de banner, cu ajutorul programului Adobe Photoshop.
      Īnainte de a īncepe crearea imaginii propriu-zise, trebuie remarcat un aspect aparent lipsit de importanta: dimensiunile imaginii. Latimea si īnaltimea unui banner sunt valori 212f58c standard (exista mai multe dimensiuni standard, cele mai folosite sunt 468 de pixeli pentru latime si 60 pentru īnaltime). Aceste dimensiuni nu trebuie memorate, deoarece Adobe Photoshop are īn lista de imagini predefinite din caseta de dialog New si valoarea "468 X 60 Web Banner".
      Se creeaza, deci, o imagine cu fundalul alb si dimensiunile specificate anterior. Urmatorul pas este stabilirea unei imagini de fundal pentru banner. Pentru acest material s-a ales imaginea din figura 1:

 Imaginea nu are dimensiunile bannerului, dar acest lucru nu prezinta importanta, deoarece doar o portiune a sa va aparea pe fundalul bannerului. Dupa deschiderea acestei imagini īn Photoshop se trece īn ordine la executarea urmatoarelor operatiuni: se selecteaza īntreaga imagine ( Select -> All), apoi copierea īn Clipboard ( Edit-> Copy), se trece īn imaginea alba ce va deveni bannerul si se apeleaza Edit - > Paste, se creeaza un nou Layer cu imaginea de fundal, care se repozitioneaza īn banner dupa dorinta (eventual se poate si redimensiona cu ajutorul comenzii Edit -> Transform -> Scale). Dupa obtinerea imaginii dorite cele doua Layer-e se pot contopi (comanda Flatten Image din meniul Layer). Iata rezultatul īn figura 2:

Urmeaza adaugarea siglei PC Magazine. Se va folosi imaginea din figura 3.
      Imaginea se afla īntr-un fisier separat. Acesta va fi īncarcat īn Photoshop si adaugat la imagine prin procedeul descris la pasul anterior ( Select All, Copy, Paste, apoi deplasarea-redimensionarea noului Layer creat). Pentru īmbunatatirea aspectului se pot adauga efecte speciale asupra Layer-ului ce contine sigla, de exemplu activarea optiunii "Outer Glow" din caseta de dialog Blending Options corespunzatoare.
      De asemenea va trebui armonizata culoarea fundalului cu culoarea siglei. Astfel, se selecteaza Layer-ul Background (printr-un click pe acesta īn paleta Layers) si din meniul Image -> Adjustments se alege Color Balance. Se modifica valoarea componentei Cyan / Red cu valoarea -47. Rezultatul se observa īn figura 4.
      Urmeaza pasul final al constructiei imaginii: adaugarea textului. Se vor adauga doua Layer-e de text: "PC Magazine Romānia" si "Cel mai tare ghid IT". Pentru marirea vizibilitatii se utilizeaza asupra celor doua texte un efect de "Drop Shadow". De asemenea, pentru ca imaginea va fi una animata (si nu una statica), cele doua texte vor trebui afisate pe rānd. Textul "Cel mai tare ghid IT" nu va aparea decāt īn al doilea cadru al animatiei, deci va trebui ascuns īn imaginea initiala. Acest efect se obtine printr-un simplu click pe pictograma reprezentānd un ochi din dreptul layer-ului "Cel mai tare ghid IT" din paleta Layers. Figura 5 arata imaginea finala a primului cadru al animatiei si, de asemenea, structura (pe layere) a imaginii:

Pentru crearea animatiei, fisierul va trebui transferat īn aplicatia Adobe ImageReady. Aceasta operatie se rezuma la un singur click pe butonul corespunzator din paleta cu instrumente, dupa cum se vede īn imaginea 6.

Aplicatia ImageReady are aceeasi interfata ca si Adobe Photoshop, cu cāteva adaugiri. Elementul de interfata care intereseaza din punctul de vedere al acestui exemplu este paleta Animation din partea de jos a ferestrei principale. Aici sunt afisate, ca thumbnail-uri, cadrele animatiei. Deocamdata exista un singur cadru. Pentru ca banner-ul final va avea doua cadre, acesta va trebui duplicat. Operatiunea se face apasīnd butonul "Duplicate current frame", aflat īn partea inferioara a paletei Animation.

    Al doilea cadru este selectat automat si gata pentru a fi prelucrat. Se selecteaza Layer-ul "PC Magazine Romania" si, cu ajutorul instrumentului Move Tool se face deplasarea textului īn coltul din dreapta-sus al imaginii. Apoi se micsoreaza cu ajutorul comenzii Edit -> Transform -> Scale pentru a face loc celui de-al doilea text (deocamdata ascuns). Urmeaza afisarea acestuia (click pe pictograma īn forma de ochi din paleta Layerscare corespunde celui de-al doilea text) si alinierea sa cu "PC Magazine Romania". Rezultatul este cel din figura 8:

Un ultim pas este stabilirea vitezei cu care se va derula animatia. Aceasta se obtine prin modificarea timpului īn care va fi afisat fiecare cadru al animatiei. Implicit acest timp este de 0 secunde (animatie cu viteza maxima permisa de masina pe care va rula). Timpul este afisat īn coltul din dreapta-jos al fiecarei pictograme. Cu un click pe acest timp se deschide un meniu derulant din care se poate alege o alta valoare (de exemplu: cāte o secunda pentru fiecare cadru).