Tutorial Photoshop : ImageReady
Imaginile gif, extensia gif a fost inventata in primul rand tocmai pentru web, pentru imagini animate. Aceasta extensie (GIF), este un format de fisier pentru imagini care poate sa aiba o calitate mai buna decat ceea ce se poate pastra cu formatul JPG, si in acelasi timp ofera posibilitatea sa cream imagini animate care nu ocupa mult spatiu si sunt ideale pentru web design sau a crea imagini haioase.
In acest tutorial Photoshop voi prezenta cum putem crea astfel de imagini animate, gifuri cu Photoshop, folosind o extensie a Photoshopului, si anume ImageReady. Voi folosi o versiune mai veche de Photoshop cu ImageReady, si anume versiunea 8, dar oricum asta nu afecteaza pe nimeni, pentru ca ideea de baza de a crea imagini animate, e acelasi in toate versiunile. Deci, aveti nevoie de Photoshop, cu ImageReady!
Ideea de baza pentru a crea gifuri :
Imaginile animate se creeaza ca si cum s-au creat mai demult, sau poate si acum, desenele animate. Adica, din mai multe imagini similare putem simula miscare, daca le aranjam cum trebuie si setam un interval de timp corespunzator intre imagini, cum se schimba intre ele. Fiecare modificare micuta pe un layer, pe o imagine, rezulta in miscare, cand imaginile sunt puse una dupa alta. Eu aici voi prezenta dar ideea de baza, voi crea o imagine micuta cu un cursor, care va clipi, cum puteti vedea mai sus, dupa cuvantul Login.
Pasul 1 : Cream un layer pentru background, cu o imagine, sau pur si simplu un fundal de o anumita culoare. Eu aici am facut o imagine micuta cu fundal negru, pe care am scris cuvantul Login: .
Pasul 2 : Facem un layer nou, selectand din meniu Layer –> New –> Layer. Pe acest strat (layer), desenam un cursor.
Pasul 3 : Selectam din meniu File –> Edit in ImageReady. La aceasta comanda toate layerele se vor muta in ImageReady, unde vom putea aranja, care layer si cat sa se vada intr-un anumit interval de timp.
Dupa ce se deschide imaginea, layerele in ImageReady, ne asiguram ca panourile de care avem nevoie, sunt vizibile. Avem nevoie de panoul Layers si de panoul, Animation. Daca nu sunt vizibile, selectam din meniu Window –> Nume panou.
Pasul 4 : Duplicam, facem o copie in panoul Animation dupa primul frame, care contine toate layerele, si arata ca si o singura imagine. Ca sa fie clar de la inceput, imaginile care sunt in panoul Animation, se numesc Frame-uri, si nu trebuie confundate cu layerele.
Pasul 5 :Aici este esenta. Selectam in panoul Animation, frame-ul 2, iar in panoul Layers, ascundem layerul care contine cursorul.
Pasul 6:Acest pas poate fi evitat, eu am creat un frame in plus, frame-ul 3, pentru a va arata mai bine, cum se poate lucra cu mai multe frame-uri.
Pasul 7 : Selectam in secunde sau in milisecunde cat timp sa fie vizibil in animatia noastra un anumit frame. Vedeti mai sus in imaginea de exemplu, cele 4 pasuri pe care am facut. In panoul animation, este un buton unde putem previzualiza imaginea animata, sau putem selecta File –> Preview in –> Browser .
Pasul 8 : Salvam imaginea animata. Trebuie sa alegem File –> Save Optimized As sau Save optimized ca sa pastram animatia si sa nu facem o imagine statica.
Bineinteles, cu aceasta tehnica se pot face animatii mult mai complexe si faine, aceasta imagine a fost creata doar de dragul prezentarii cum functioneaza acest lucru. Mult succes in crearea gifurilor – care mentionez inca o data ca sunt foarte folositoare in web design, pentru bannere de exemplu, pentru reclama, sau pentru Fun !
In acest tutorial Photoshop voi prezenta cum putem crea astfel de imagini animate, gifuri cu Photoshop, folosind o extensie a Photoshopului, si anume ImageReady. Voi folosi o versiune mai veche de Photoshop cu ImageReady, si anume versiunea 8, dar oricum asta nu afecteaza pe nimeni, pentru ca ideea de baza de a crea imagini animate, e acelasi in toate versiunile. Deci, aveti nevoie de Photoshop, cu ImageReady!
Ideea de baza pentru a crea gifuri :
Imaginile animate se creeaza ca si cum s-au creat mai demult, sau poate si acum, desenele animate. Adica, din mai multe imagini similare putem simula miscare, daca le aranjam cum trebuie si setam un interval de timp corespunzator intre imagini, cum se schimba intre ele. Fiecare modificare micuta pe un layer, pe o imagine, rezulta in miscare, cand imaginile sunt puse una dupa alta. Eu aici voi prezenta dar ideea de baza, voi crea o imagine micuta cu un cursor, care va clipi, cum puteti vedea mai sus, dupa cuvantul Login.
Pasul 1 : Cream un layer pentru background, cu o imagine, sau pur si simplu un fundal de o anumita culoare. Eu aici am facut o imagine micuta cu fundal negru, pe care am scris cuvantul Login: .
Pasul 2 : Facem un layer nou, selectand din meniu Layer –> New –> Layer. Pe acest strat (layer), desenam un cursor.
Pasul 3 : Selectam din meniu File –> Edit in ImageReady. La aceasta comanda toate layerele se vor muta in ImageReady, unde vom putea aranja, care layer si cat sa se vada intr-un anumit interval de timp.
Dupa ce se deschide imaginea, layerele in ImageReady, ne asiguram ca panourile de care avem nevoie, sunt vizibile. Avem nevoie de panoul Layers si de panoul, Animation. Daca nu sunt vizibile, selectam din meniu Window –> Nume panou.
Pasul 4 : Duplicam, facem o copie in panoul Animation dupa primul frame, care contine toate layerele, si arata ca si o singura imagine. Ca sa fie clar de la inceput, imaginile care sunt in panoul Animation, se numesc Frame-uri, si nu trebuie confundate cu layerele.
Pasul 5 :Aici este esenta. Selectam in panoul Animation, frame-ul 2, iar in panoul Layers, ascundem layerul care contine cursorul.
Pasul 6:Acest pas poate fi evitat, eu am creat un frame in plus, frame-ul 3, pentru a va arata mai bine, cum se poate lucra cu mai multe frame-uri.
Pasul 7 : Selectam in secunde sau in milisecunde cat timp sa fie vizibil in animatia noastra un anumit frame. Vedeti mai sus in imaginea de exemplu, cele 4 pasuri pe care am facut. In panoul animation, este un buton unde putem previzualiza imaginea animata, sau putem selecta File –> Preview in –> Browser .
Pasul 8 : Salvam imaginea animata. Trebuie sa alegem File –> Save Optimized As sau Save optimized ca sa pastram animatia si sa nu facem o imagine statica.
Bineinteles, cu aceasta tehnica se pot face animatii mult mai complexe si faine, aceasta imagine a fost creata doar de dragul prezentarii cum functioneaza acest lucru. Mult succes in crearea gifurilor – care mentionez inca o data ca sunt foarte folositoare in web design, pentru bannere de exemplu, pentru reclama, sau pentru Fun !
