Crearea unui banner complex animat

Nu vom argumenta exact ce înseamnă a fi un banner "complex" animat - aici vom vorbi despre 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'a 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 poate fi utilizarea tehnologiei flash, avi. Din păcate, sună ca ceva. Și totuși, din moment ce conversația se referă la gifurile animate, ne întoarcem la sl. articol:

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 gradientelor de umplere și a desenelor ș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: vom vedea;

Este foarte dificil de a pregăti un număr mare de cadre, urmând tendința și pentru a preveni orice greșeli, astfel încât tehnologia de fabricare banner-ul de cadre individuale, unul câte unul, încărcat în Ulead Gif Animator nu vom face. 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 î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ă hife proprietate minunat, animate inclusiv - transparent, în acest caz, pot fi uitate, așa cum este de multe ori soarta banner-ul este dificil de prezis - pe orice site cu orice culoare de fundal sau chiar mai rău - cu unele imagine de fundal capodopera ta va fi. Ie Zona dreptunghiulară nu trebuie să aibă zone transparente

În cazul în care bannerul dezvoltat are o culoare diferită de alb, negru și gri - cel mai probabil tonul general al bannerului dvs. va fi diferit de tonul paginii principale. 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 cu mult diferit de primar: Pentru a avea 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 să creați elementul principal de text al imaginii - de fapt numele bannerului - poate fi numele magazinului, numele site-ului sau orice alt cuvânt cheie. Din nou - pe măsură ce culoarea alegeți cea mai contrastată culoare față de cele deja disponibile - pentru substratul luminos - cel mai întunecat element din imagine și invers.







Acum este propusă o metodă de tăiere a unui cuvânt (orice alt element banner) pentru a crea un efect dinamic al desenării unui element banner pe ecran.

Imprinter cuvânt, selectați tipul fontului dorit și dimensiunea fontului netezirea setări pentru a seta NICIUNUL, și să facă o copie a stratului din meniul Layer, selectați Type-'Render Layer - numele tau nu mai este un text - este doar un element grafic, având un tsvet.Dayte (!) Numele stratului este NAME, de exemplu.

Creați un nou strat. Dați-i numele TEMP - acesta este stratul de lucru, de multe ori faceți clic pe el și va fi bine dacă acesta poate fi ușor de găsit când crește numărul de straturi din fișierul dvs.

Desenați o linie cu un pixel pe acest strat (puteți alege fie orizontală sau verticală pentru un banner orientat pe orizontală, și chiar dacă recomand recomandarea orizontală ca antrenament) de culoare contrastantă. Orice - culoarea, nu vom fi luate în considerare, deoarece această linie în design-ul nostru este folosit ca un instrument, nu un element al banner-ului, asa ca cel mai bine este să o culoare strălucitoare face, și chiar și așa, care este garantat să se facă distincție între părțile reale ale banner-ului.

Î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. Click pe strat TEMP, cu instrumentul activ deplasați săgeată pentru a muta benzi de lucru cu un pixel în jos, Ctrl-clic pe stratul TEMP, du-te la Layer NUME, Ctrl-Shift-J - veți obține un alt strat de-a doua taie o fâșie din numele tău. 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ă. Alegeți un nou cadru - ați creat un cadru care este un duplicat al celei anterioare. cu stratul inclus cu un substrat și un cadru.

Astfel, - adăugarea de cadre la și inclusiv toate straturile desena nume și când toate straturile incluse se vor referi la cadru numele de proprietate „î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 vectorizare NUME - straturi cu dungi duplicate înainte (butonul mouse-ului dreapta pe Layer -'Dublicate) ș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 - și cu o compoziție competentă de elemente de banner și o schemă 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: