Share
Există o șansă bună ca acest lucru să nu vă intereseze deloc (animat gif Ian? Erați un râs?), Dar am promis pe cineva să scriu asta. Recent am realizat imagini de previzualizare animate pentru postările de știri de la Activetuts +, iar acum sunt aici, este corect să-l las pe Michael să știe cum se face.
Photoshop nu este exact un lider al industriei în domeniul animației, dar pentru sarcini simple, cum ar fi acest lucru, se face bine. Vom lua o imagine standard de 200x200 px Tuts + și vom adăuga o notă de derulare a știrilor în partea de jos a acestuia.
Să luăm o fotografie potrivită. Iată unul pe care l-am luat în timpul întâlnirii Envato din Chicago anul trecut, tăiat la 200x200px. Deschide-o în Photoshop.
Avem nevoie de doar două straturi suplimentare pentru acest lucru; un fundal pentru bilet (dreptunghi colorat # 104333) și un text cu propoziția dorită repetat de câteva ori.
Fontul este numit 04b_03 și este disponibil gratuit de la dafont.com. Este un font de 8 biți, ceea ce înseamnă că va trebui să îl afișați la mărimea sa de bază (sau un multiplu), cu un anti-alias dezactivat pentru cele mai bune rezultate pixelate. În acest caz, ne uităm la 8 pixeli.
Are un ton verde moale de # f0fcdf cu un accident vascular cerebral semi-transparent de # 051a14 (pentru ao ajuta să iasă din fundal).
Deschide fereastra de animație (fereastră> animație) și, folosind butonul din dreapta jos din panou, comutați la vizualizarea cadrelor.
Puteți vedea primul cadru cu unghie mare pentru tine, doar asigurați-vă că întârzierea este setată la 0 sec (direct sub imaginea miniatură) așa cum dorim ca cadrul să se redea de îndată ce se întâlnește. Ceea ce puteți vedea în prima miniatură este animația în starea sa actuală, straturile și obiectele exact așa cum le-ați așezat.
Apăsați pictograma "Duplicate selectați cadre" pentru a crea un al doilea cadru. Aceasta este starea noastră finală. În timp ce se selectează cea de-a doua miniatură, toate modificările pe care le realizăm pe straturile noastre sunt aplicate numai în acest cadru.
Tween este derivat din cuvântul "inbetweening" și se referă la etapele treptate dintre două state, sugerând mișcarea.
Cu cel de-al doilea cadru selectat, mutați textul pe ecran în direcția în care doriți să îl derulați. S-ar putea să doriți să țineți apăsată tasta de deplasare pentru a împiedica trecerea de la cursul orizontal. Mutați tot drumul, așa că pare să fie exact în aceeași poziție cu care a început.
În acest caz, "N" este înclinat spre partea stângă, astfel încât este ușor de văzut dacă mă îndrept.
După ce ați mutat textul, selectați ambele cadre și apăsați butonul "Cadre de animație Tweens". Dacă faceți acest lucru, veți descoperi următorul dialog:
După cum puteți vedea, am optat pentru încă 99 de cadre pentru a sta între cele două state. Am vrut ca toate straturile din documentul meu să fie introduse în aceste cadre și cu adevărat vreau doar să animez proprietatea "poziția" a stratului meu de text. Super. Apăsați OK.
Veți avea acum o tona de cadre așezate în fereastra de animație și fiecare dintre ele va arăta, probabil, foarte asemănătoare cu următoarea! Totuși, vă asigurați-vă prin apăsarea butonului de redare și urmărind animarea textului înaintea ochilor dvs. Magie, doamnelor și domnilor?
Doar pentru a curăța lucrurile, selectați cel de-al 101-lea cadru și ștergeți-l. După cum vă amintiți, este identic cu primul cadru, astfel încât looping-ul le va înăbuși de fapt unul împotriva celuilalt, oferindu-ne un glitch în animația noastră netedă.
Rezultatul este subtil, dar în imaginea de mai sus puteți vedea primul cadru și ultimul nostru cadru (numărul 100). Looping le va amesteca fără probleme.
Asta e! Animația este completă. Acum trebuie doar să salvați fișierul nostru, deci mergeți la File> Save for Web & Devices. Alegeți GIF ca tip de fișier, apoi în partea de jos, în secțiunea Animație, optați pentru "Loop forever". De asemenea, puteți previzualiza animația, doar pentru a fi sigur.
Dacă doriți să editați fișierul, păstrând în același timp animația (poate doriți să schimbați textul și să schimbați imaginea de fundal, de exemplu), atunci tot ce aveți nevoie vreodată este să editați primul cadru. Păstrați primul cadru selectat, selectați stratul pe care doriți să-l modificați și asigurați-vă că opțiunea "Propagați Frame 1" este bifată.
Toate modificările de atribute făcute în acest strat vor fi propagate (reproduse) în toate celelalte cadre. Adăugați o umbră la stratul de text în cadrul unu și Hey Presto! acolo este chiar peste animație. Nu reușiți să verificați "Propagați cadrul 1" va duce la modificarea unui singur cadru.
Cred că nu te-ai trezit în dimineața asta gândindu-te "Există o lipsă reală de gifturi animate gif acolo" și, dacă nu ești editor al unuia dintre site-urile Tuts +, există o șansă bună să nu găsești nici un folos pentru asta. Cu toate acestea, Michael, sper că ați găsit această informație și mă aștept la imagini de calitate superbă de știri postate pe Activetuts + de acum încolo :)
Accentsconagua