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
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).
|
