Crearea unui banner animat complex în Adobe ImageReady
Să nu ne certăm ce anume să numim un banner "complex" animat - astăzi conversația va merge pe un banner în care mai multe trei cadre. Și mai mult de 10. Să spunem, cam 150. Interesant?
Una dintre condițiile cu care se confruntă toți designerii-dezvoltatori - crearea lor ar trebui să fie ușor. De regulă, limita superioară a greutății - nu mai mult de 15 Kb. Deoarece vorbim despre hifele animate, adică despre un set de imagini indexate, ne amintim câteva reguli:
Paleta GIF poate conține maximum 256 de culori (mai puțin - puteți, mai mult - nu) și utilizează un algoritm de comprimare fără pierderea calității imaginii (în mod specific - algoritmul LZW). De asemenea, GIF permite crearea de zone transparente și animații. Folosind formatul gif, este necesar să ne amintim de închiderea licenței de algoritm de compresie LZW, din cauza faptului că este necesar să plătească pentru aceasta (această licență) pentru utilizarea în orice software. Acest dezavantaj va duce la faptul că treptat în graficul pentru web din formatul GIF vor fi respinse în favoarea altor formate mai deschise. În ceea ce privește bannerele animate - aici, alternativa ar putea fi folosirea tehnologiei flash, avi, etc. Din păcate, suna cumva.
Și totuși, din moment ce conversația este despre un gif animat, mergem la punctul următor;
Parametrul cel mai important al imaginii indexate este numărul de culori din paleta sa. O sarcină importantă în crearea bannerului nostru va fi reducerea la minimum a numărului de culori;
Prezența gradientului de umplere și a imaginilor și fotografiilor multicolore face imposibilă reducerea gravă a numărului de culori din paletă, astfel încât nu vom avea umpluturi de gradient, ci fotografii ... să vedem;
Este foarte dificil să pregătești un număr mare de cadre, să observi dinamica și să nu faci nici o greșeală. Prin urmare, tehnologia de a face un banner din cadre individuale, unul câte unul, descărcat în Ulead Gif Animator, nu va funcționa pentru noi. Banner va face în Adobe (toată sursa poate fi colectată în PhotoShop`e, iar animația însăși - în ImageReady)
Să presupunem că deja știți în ce limbă de culori va fi bannerul dvs. și ce se va întâmpla (învârtirea, mutarea, apariția și dispariția). Creați un fișier nou, specificați formatul bannerului dvs. în câmpurile de mărime, selectați transparente în fundalul subsecțiunii - ați primit câmpul cu dimensiunea dorită cu unul, încă un strat gol.
Când creați un banner este important să ne amintim că caracteristica hife minunat, animat, inclusiv (transparent, în acest caz, pot fi uitate, așa cum este de multe ori soarta banner - pe orice site cu orice culoare de fundal, sau, chiar mai rău, cu unele imagine de fundal capodopera ta va - pentru a prezice dificil) - zona dvs. dreptunghiulară nu trebuie să aibă zone transparente
Dacă banner-ul a dezvoltat un altul decât alb, negru și gri culoare - tonul general al acesteia este probabil să fie diferită de pagina pas. Teoria probabilităților este un lucru complicat, dar chiar dacă faci un banner cu background`om hitrolilovym, și el devine pe un site hitrolilovy similară (destul de accident) - este probabil să nuanțe vor fi în continuare diferite. Dar bannere cu culori standard background`a trage mai bine în cadru, poate fi un strat subțire de un pixel, culoarea poate fi nu foarte diferit de miez, astfel încât informațiile pe care le trimiteți în banner-ul pe care sunt separate de comună spațiu informații străin pentru tine site-ul.
Este timpul să ia în considerare - fundal și accident vascular cerebral - este deja două culori. Numărați și controlați numărul de culori folosite tot timpul.
Ar trebui să fie timpul pentru a crea elementul principal de text al imaginii - numele real al bannerului. Acesta poate fi un nume de magazin, un nume de site sau orice alt cuvânt cheie. Din nou, ca culoare, alegeți cea mai contrastată culoare față de cele deja disponibile. Pentru un substrat ușor, cel mai întunecat element al imaginii și invers.
Acum este propusă o metodă de tăiere a unui cuvânt (sau a oricărui element banner) pentru a crea un efect dinamic al desenării unui element de banner pe ecran.
Imprimați cuvântul dvs., selectați căștile și dimensiunile dorite, setați setările de netezire a fonturilor la NONE și faceți o copie a stratului. În meniul Layer, selectați Type- »Render Layer - numele dvs. a încetat să mai fie text - este doar un element grafic care are unul (!) Color. Dați numele un strat - de exemplu NAME.
Creați un nou strat. Dați-i numele TEMP - acesta este stratul de lucru, faceți clic pe el frecvent. Va fi bine dacă este ușor de detectat, în timp ce numărul de straturi din fișierul dvs. va crește.
Desenați pe acest strat o linie cu un singur pixel (puteți alege fie orizontală sau verticală, pentru un banner orientat orizontal și, chiar dacă recomand recomandarea pe orizontală ca antrenament) de culoare contrastantă. Oricine - nu vom considera această culoare, deoarece această linie în designul nostru este folosită ca un TOOL, și nu un element de banner. Prin urmare, este mai bine să o faceți o culoare strălucitoare și chiar pentru a se distinge de detaliile reale ale bannerului.
În cazul în care pregătirea aceleași titluri de tăiere orizontală (pe care am obținut deja în stratul anterior și convertit în grafică), selectați instrumentul mutare (butonul c litera „V“ pe anglitski aspect), și pentru a muta linia de sus cu privire la pixelul superior numelui dvs. (poate fi în jos - direcția de importanță fundamentală nu contează, secvența este importantă)
Ctrl faceți clic pe stratul TEMP - aveți o zonă dreptunghiulară SELECT cu o înălțime de pixeli. Faceți clic pe stratul NAME, Ctrl-Shift-J - iar din numele dvs. o bandă de un pixel a fost tăiată într-un strat nou. Faceți clic pe stratul TEMP, cu instrumentul Mutare activat, deplasați-vă stația de lucru cu un pixel în jos. Ctrl faceți clic pe stratul TEMP, mergeți la layerul NAME, Ctrl-Shift-J - aveți un alt strat cu a doua bandă tăiată din numele dvs. Cu acest algoritm, tăiați tot cuvântul dvs. în benzi - straturile vor fi create secvențial, iar numele lor vor avea numere de ordine.
Deoarece este considerată cea mai simplă variantă a unui banner complex (îmi cer scuze pentru ghinionul nefericit), nu vom lua în considerare alte posibile elemente ale bannerului. Principalul lucru este să descriem tehnologia. Vorbesc despre faptul că acum începem să adunăm spațiile goale în animație deplină.
Dacă cu straturi ați lucrat în PhotoShop`e, acum este momentul să mergeți la ImageReady - în meniul File - "Salt la -" Image Ready.
În meniul Fereastră, selectați Afișare animație - apare o defilare în care există un cadru. Faceți toate straturile aspectului nevăzut, lăsând Visibil doar fundalul și cadrul.
În animația de lansare din colțul din stânga sus, faceți clic pe săgeată pentru a afișa meniul de lansare locală. Selectați nou cadru - ați creat un cadru care este un duplicat al celui anterior, adică cu stratul inclus cu un substrat și un cadru.
Astfel, adăugarea de cadre la și inclusiv straturi Egal toate numele și, atunci când toate straturile sunt încorporate nume se referă la o proprietate a cadrului „întârziere“ și modifica timpul de întârziere, de exemplu, dimensiunea este de 5 secunde.
Creați un alt cadru, verificați dacă parametrul de întârziere a fost mic și activați vizibilitatea stratului grafic (în exemplul nostru, același monitor).
Noul cadru - și dezactivați Vizibilă banda inferioară a elementului NAME și tehnologia corespunzătoare în ordine inversă în ordine inversă, cadru cu cadru eliminați NAME.
În noul cadru, includeți stratul cu sloganul. Din nou, este necesar să măriți întârzierea afișării cadrului.
Și pentru început este suficient. Opțiunea pentru ciclul de animație este setată pe Forever - iar bannerul dvs. va fi derulat întotdeauna.
Consultați opțiunea de optimizare, setați parametrii gif - 4 culori - pierdere: 0 - nu se amestecă - selectiv - nu este transparent
În animația de lansare din submeniul Optimizați animația, trebuie luate în considerare ambele casete de selectare.
În concluzie, aș dori să subliniez faptul că această tehnologie poate fi utilizată pentru a crea o animație mai complexă - și cu un număr limitat de culori, puteți face bannere complexe și originale.
Poate complica procesul de NAME vectorizare - straturi cu dungi duplicate înainte (butonul din dreapta al mouse-ului pe un strat - »dublicate Layer) și duplica set strat de transparență 50% (ca o opțiune), și la crearea de animație generit prima randare straturi translucide, apoi opace.
Un efect similar poate fi creat prin desenarea elementelor verticale. În acest caz, cu o compoziție competentă de elemente de banner și o gamă bună de culori, bannerul va avea succes.
După cum ați putut vedea obiectul de pe stratul TEMP în designul final, nu l-am folosit. Acesta este doar un instrument pentru crearea rapidă a unei măști, care taie elementul de animație. Și această mască nu trebuie să fie o bandă de un pixel - poate fi orice formă arbitrară. Mișcarea desenului poate avea loc și în orice direcție, chiar și în diagonală, deși la început de sus, apoi din stânga, apoi din altă parte.
Bannere animate de succes!
Articole similare
Trimiteți-le prietenilor: