Ako urobiť animáciu v ilustrátore. Tipy a triky v aplikácii Adobe illustrator: Triky v aplikácii illustrator

Dnes to nemáme celkom obvyklé lekcia Adobe Ilustrátor. Pretože tentokrát neurobíme statický obrázok, ale skutočnú animáciu. Predstavte si, že to dopadne pomoc od Adobe Ilustrátor vie kresliť aj karikatúry :)

A na to nepotrebujeme nič. Kompetentná organizácia vrstiev a export výslednej práce do formátu swf, kde je každá vrstva prevedená na rámček animácie. V dnešnom návode si nakreslíme animáciu odpočítavania v štýle retro filmu. Výstupom by mal byť flash film s rovnakým odpočítavaním.

Prvá vec, ktorú musíte urobiť, je nakresliť všetko potrebné prvky pre budúcu animáciu. Aby som to urobil, v samostatnom dokumente som vytvoril dve polohy filmového rámčeka, kruh pre referenciu, ktorý je rozrezaný na samostatné sektory, textúru a zvislý škrabanec na pridanie efektu staroveku, ako aj všetky čísla a nápisy.

Keď sú všetky časti našej karikatúry pripravené, môžete začať vytvárať samotnú animáciu. Pre pohodlie je to najlepšie urobiť v novom dokumente. V tomto prípade budú vrstvy hrať úlohu animačných snímok. A hneď v prvej vrstve stačí skopírovať rámik filmu. Umiestnite ho do stredu pracovnej oblasti.

Teraz vytvorte druhú vrstvu a skopírujte do nej rámik filmu, v ktorom sú otvory na okrajoch vytvorené s posunom. Treba to aj vycentrovať.

Z týchto dvoch vrstiev už môžete získať animáciu pohyblivého filmu. Neskôr však budeme potrebovať oveľa viac vrstiev. Vyberte teda prvé dve vrstvy, prejdite na možnosti panela a vytvorte kópiu vrstiev.

Podobným spôsobom potrebujeme nazhromaždiť 12 vrstiev s filmovými políčkami, ktoré definujú jeho pohyb.

Teraz máme veľa vrstiev a všetky sú viditeľné. V tom zmysle, že horné vrstvy blokujú spodné, čo nie je príliš vhodné na prácu. Preto môžete niektoré vrstvy vypnúť kliknutím na ikonu oka naľavo od názvu vrstvy. Ak chcete vypnúť alebo zapnúť všetky vrstvy naraz, podržte stlačený kláves Alt a súčasne kliknite na ikonu oka. Zapínaním a vypínaním vrstiev môžete presne vidieť, čo sa nachádza v určitom rámci našej budúcej animácie. A teraz, aby sme k pohybu filmu pridali mierne otrasy, musíme prijaté snímky mierne posunúť v rôznych smeroch. Ak to chcete urobiť, zapnite iba vrstvu, s ktorou budete pracovať tento moment a potom posuňte rám o niekoľko pixelov na obe strany.

Keď prejdete všetkými vrstvami a pridáte malý posun, môžete začať vytvárať animáciu pohybujúceho sa kruhu. Ak to chcete urobiť, skopírujte kruh pozostávajúci zo sektorov z dokumentu o častiach karikatúry a umiestnite ho na prvú vrstvu v hornej časti rámčeka filmu.

Ak odstránite výber z kruhu, bude vyzerať ako jeden celok. Presne toto potrebujeme.

Ale keďže pozostáva zo samostatných sektorov, je možné zmenou ich farby vytvoriť animáciu veľmi rýchlo a jednoducho. Ak to chcete urobiť, skopírujte tento kruh do druhej vrstvy a urobte ľahší prvý sektor. Pamätáte si, že film sa pri pohybe trasie, takže nie je potrebné dávať kruh presne do stredu rámu. Priložte ho na oko.

Podobne je potrebné skopírovať kruh do každej ďalšej vrstvy, pričom maľovať svetlejšou farbou o jeden sektor viac ako predtým. Týchto 12 vrstiev spolu tvorí animáciu pohybu filmu s výplňovým kruhom.

Ďalej musíme pridať textúru do našich vrstiev. Zapnite prvú vrstvu a skopírujte odtiaľ textúru. zdrojový súbor s náhradnými dielmi.

Potom postupne zapnite ďalšie vrstvy a skopírujte tam rovnakú textúru. Aby to vyzeralo na každom ráme inak, stačí ho otočiť o 90 stupňov. Ako ste možno uhádli, do všetkých 12 snímok musíme pridať textúru.

Ak ste už dosť unavení z kopírovania, tak vás môžem potešiť - zostáva už veľmi málo. Najťažšia časť je za nami. Zostáva pridať vertikálne škrabance a takmer všetko. Ak to chcete urobiť, znova skopírujte pôvodný škrabanec a vložte ho na ľubovoľné miesto v niekoľkých vrstvách. V mojom prípade sa škrabance objavia už v dvoch vrstvách.

Teraz, keď je hotový hlavný cyklus s filmovou animáciou, zostáva doplniť čísla. Keďže počítame od 3 do 1 plus slovo Go!!!, potrebujeme ešte viac vrstiev. Nie 12, ale až 48. K tomu je potrebné urobiť ešte tri kópie pripravených vrstiev s filmovou animáciou.

A potom je všetko jednoduché. Zapnite úplne prvú vrstvu a vložte tam číslo tri.

Potom musíte tento obrázok skopírovať do ďalších vrstiev, kým sa animácia kruhu neskončí. Keď sa dostanete k ďalšej kópii vrstiev, kde bude kruh opäť úplne vyplnený, musíte zadať číslo dva. Rovnakým spôsobom skopírujte číslo jeden do požadovaných vrstiev. A keď sa dostanete ku konečným vrstvám pre štítok Go!!!, pred skopírovaním štítku na požadovanú vrstvu jednoducho odstráňte kruh.

To je všetko s animáciou. Tu hlavnou vecou nie je zmiasť sa. Môžete dať vrstvám nejaké vhodné názvy, ale bola som akosi príliš lenivá :) A predsa, keď budete hotoví, nezabudnite všetky vrstvy znova zapnúť kliknutím na ikonu oka.

V okne nastavení exportu nezabudnite nastaviť Exportovať ako: Vrstvy AI na Rámce SWF. Práve táto možnosť zmení vrstvy Illustratoru na snímky animácie. Ďalej kliknite na tlačidlo Rozšírené.

Otvorí dodatočné nastavenia. Tu musíte nastaviť Frame Rate. Mám 12 snímok za sekundu. Zaškrtávacie políčko Looping je zodpovedné za cyklovanie animácie. Vďaka nej sa bude video prehrávať v kruhu. A možnosť Layer Order: Bottom Up vykreslí vrstvy ilustrátora zdola nahor na paneli. Presne takto sme postavili našu animáciu.

Výsledkom je flashový film s našou animáciou.

Teraz vidíte, že vytvorenie jednoduchej animácie v aplikácii Adobe Illustrator nie je také ťažké, ako sa na prvý pohľad zdá.

Ale na vytváranie dlhých videí alebo interaktívnych aplikácií je stále lepšie použiť Adobe Flash alebo iné flash editory. Napríklad túto mačku som vyrobil v starom Macromedia Flash, ktorý som vykopal v práci.

V poslednej dobe sa HTML5 a CSS3 čoraz častejšie používajú na vytváranie animácií. Daný kód podporované moderné prehliadače a nevyžaduje použitie flash prehrávača.

Roman alias dacascasšpeciálne pre blog Poznámky mikrostockového ilustrátora

Prihláste sa na odber noviniek, aby vám nič nové neuniklo:

Teraz si úlohu trochu skomplikujeme – urobme si animovaný Flash banner. Samozrejme, v tomto prípade nie je potrebné hovoriť o plnohodnotnej Flash animácii - na to existujú špecializované balíčky. Na vytvorenie jednoduchého amatérskeho videa však môžete použiť aj Illustrator.

V Adobe Illustrator nie sú žiadne špeciálne nástroje a nástroje rozhrania, ako napríklad časová os, ktoré sú typické pre programy na vývoj animácií. Ale je tu jedna jemnosť - vrstvy môžu byť použité ako rámy.

Vytvorte banner iba s textom.

Zoskupte symboly pomocou príkazu Objekt › Skupina(Objekt › Skupina).
Ďalšou úlohou je vytvoriť obrysové objekty zo znakov písma, inak nebude fungovať správne vytváranie vrstiev. Ak to chcete urobiť, vyberte skupinu a vyberte Typ › Vytváranie obrysov(Písmo › Trasa).
Potom otvorte ponuku palety Vrstvy(Vrstvy) kliknutím na tlačidlo v tvare šípky na palete (obr. 8.11).

Ryža. 8.11. Ponuka palety vrstiev

Nás zaujíma príkaz v tomto menu Uvoľnenie do vrstvy (sekvencia)(Convert to Layers (Sequentally)), ktorý prevedie každý jednotlivý objekt do nová vrstva. Upozorňujeme, že pri použití príkazu je potrebné vybrať skupinu skupina, nie vrstva Vrstva 1.

Ako by mala paletka vyzerať Vrstvy(Vrstvy) po vykonaní Uvoľnenie do vrstvy (sekvencia)(Previesť na vrstvy (sekvenčne)), znázornené na obr. 8.12.

Ryža. 8.12. Paleta Vrstvy po uvoľnení do vrstvy (sekvencia)

Tým je príprava hotová, môžete ušetriť používanie Uložiť pre web(Uložiť pre web) do SWF. SWF je hlavný grafický formát založený na technológiách Flash. Presnejšie by bolo povedať, že ide o formát Flash (obr. 8.13).

Pravdepodobne dnes všetci používatelia viac či menej poznajú Flash. V súčasnosti je to najbežnejší animačný formát na internete a používa sa na vytvorenie veľkej väčšiny multimediálnych webových stránok.

Samozrejme, ani desatina možností Flashu nie je implementovaná v Adobe Illustrator, pretože program na to nie je určený. V ňom však môžete urobiť buď statický obrázok, alebo jednoduchú animáciu.

Ryža. 8.13. Nastavenia optimalizácie pre formát SWF

Existujú nasledujúce nastavenia.

Iba na čítanie(Len čítanie). Ak zaškrtnete políčko, súbor sa zapíše tak, že ho už nebude možné otvoriť na úpravu v žiadnom programe. To na jednej strane znižuje veľkosť súborov a na druhej strane chráni vaše autorské práva.
Nastavenie označené 1. Parameter určujúci typ ukladania - obrázok alebo animácia.
Ak si vyberiete možnosť Súbor AI do súboru SWF(súbor Illustrator do súboru SWF), obrázok sa uloží ako statický obrázok presne taký, aký vidíte na obrazovke pri práci v aplikácii Illustrator.
Vrstvy do rámov SWF(Vrstvy do snímok SWF) vám umožňuje animovať existujúce vrstvy, ktoré sa vykreslia ako snímky. Musíme zvoliť túto možnosť.
Kvalita krivky(Kvalita kriviek). Presnosť kriviek opakujúcich súbor kriviek pôvodného obrázka. Znížením tohto nastavenia sa výrazne zníži kvalita, najmä v oblasti malých detailov, ale zníži sa veľkosť súboru. Pre náš prípad je optimálna hodnota „7“.
snímok za sekundu(Oneskorenie snímky). Snímková frekvencia a v dôsledku toho rýchlosť animácie. Aby bol efekt správny, nenastavujte viac ako 4 snímky za sekundu.
slučka(Opakujte). Prehrajte animáciu viackrát. Vhodné pre animácie, kde je dôležitá opakujúca sa slučka. Banner patrí k tomuto typu.

V poslednej dobe sú veľmi populárne rôzne druhy animácií grafiky SVG (Scalable Vector Graphics) na webových stránkach a aplikáciách. Je to spôsobené tým, že všetko najnovšie prehliadače už podporujú tento formát. Tu sú informácie o podpore prehliadača pre SVG.

Tento článok pojednáva najjednoduchší príklad Animujte vektory SVG pomocou jednoduchého plugin jquery Lazy Line Painter.

zdroj

Na dokončenie a úplné pochopenie tejto úlohy sú potrebné základné znalosti HTML, CSS, JQuery, ale nie sú potrebné, ak chcete iba animovať SVG) Začnime!

A tak kroky, ktoré musíme dodržať:

Vytvorte správnu štruktúru súborov
Stiahnite si a pripojte doplnok
Nakreslite skvelú čiarovú grafiku v aplikácii Adobe Illustrator
Preveďte náš obrázok na konvertor Lazy Line
Výsledný kód vložte do main.js
Pridajte trochu CSS podľa chuti

1. Vytvorte správnu štruktúru súborov
Pomôže nám s tým služba Initializr, kde je potrebné zvoliť parametre ako na obrázku nižšie.

Classic H5BP (HTML5 Boiler Plate)
Žiadna šablóna
Len HTML5 Shiv
minifikované
.IE triedy
Chrómový rám
Potom kliknite na Stiahnuť!

2. Stiahnite si a pripojte plugin

Keďže initializr prichádza s najnovšou knižnicou Jquery, z archívu, ktorý si musíme stiahnuť z projektového repozitára Lazy Line Painter, stačí do nášho projektu preniesť len 2 súbory. Prvý z nich je ‘jquery.lazylinepainter-1.1.min.js’ (verzia doplnku sa môže líšiť) nachádza sa v koreňovom adresári výsledného priečinka. Druhým je example/js/vendor/raphael-min.js.

Tieto 2 súbory sú umiestnené v priečinku js. A zahrnieme ich do nášho index.html pred main.js takto:

3. Nakreslite skvelý obrysový obrázok v aplikácii Adobe Illustrator

Nakreslite náš obrysový obrázok v aplikácii Illustrator (najjednoduchší spôsob, ako to urobiť, je pomocou nástroja Pero)
Je potrebné, aby sa obrysy našej kresby neuzatvárali, pretože pre náš efekt potrebujeme začiatok a koniec
Nemal by mať výplne
Maximálna veľkosť súboru je 1 000 × 1 000 px, 40 kb
Orežme na okraje objektu Objekt>Obrazové plátna>Prispôsobiť ohraničeniam plátna
Uložiť ako SVG (štandardné nastavenia ukladania sú v poriadku)

Môžete napríklad použiť ikony v prílohe.

4. Skonvertujte náš obrázok na Lazy Line Converter
Stačí pretiahnuť ikonu do poľa nižšie.
Hrúbku, farbu obrysu a rýchlosť animácie je možné zmeniť v samotnom kóde, ktorý sa objaví po konverzii!

5. Vložte výsledný kód do main.js
Teraz už len prilepte výsledný kód do prázdneho súboru main.js
Možnosti:
strokeWidth — hrúbka obrysu
strokeColor - farba obrysu
Môžete tiež zmeniť rýchlosť kreslenia každého vektora zmenou hodnoty parametra trvania (predvolené 600)

6. Pridajte trochu CSS podľa chuti
Odstráňte odsek z index.html

ahoj svet! Toto je HTML5 Boilerplate.

A namiesto neho vložíme blok, v ktorom bude prebiehať naša animácia

potom pridajte nejaké CSS do súboru main.css pre krajší vzhľad:

Text ( pozadie:#F3B71C; ) #ikony ( pozícia: pevná; hore: 50 %; vľavo: 50 %; okraj: -300px 0 0 -400px; )

uložiť všetky súbory.
Teraz stačí otvoriť index.html v modernom prehliadači a vychutnať si efekt.

P.S. pri spustení na lokálnom počítači môže byť spustenie animácie oneskorené o niekoľko sekúnd.

Formát súboru Flash (SWF) je založený na vektorová grafika a je navrhnutý pre škálovateľnú kompaktnú grafiku pre web. Keďže tento formát súboru je založený na vektorovej grafike, objekt si zachováva kvalitu obrazu pri akomkoľvek rozlíšení a je ideálny na vytváranie animačných snímok. V aplikácii Illustrator môžete vytvárať jednotlivé snímky animácie vo vrstvách a potom exportovať vrstvy obrázkov ako samostatné snímky na použitie na webovej lokalite. Môžete tiež definovať symbolov v súbore aplikácie Illustrator, aby sa zmenšila veľkosť animácie. Pri exporte je každý symbol definovaný v súbore SWF iba raz.

Exportovať príkaz (SWF)

Poskytuje najväčšiu kontrolu nad animáciou a bitovou kompresiou.

Poskytuje väčšiu kontrolu nad zmesou formátov SWF a bitmap vo fragmentovanom rozložení. Tento príkaz ponúka menej možností obrázka ako príkaz Export (SWF), ale používa naposledy použité voľby príkazu Export (pozri ).

Pri príprave objektu na uloženie vo formáte SWF majte na pamäti nasledujúce pokyny.

Pomocou aplikácie Device Central uvidíte, ako bude vyzerať grafika aplikácie Illustrator v aplikácii Flash Player na rôznych ručných zariadeniach.

Vloženie grafiky z aplikácie Illustrator

Grafický objekt vytvorený v aplikácii Illustrator je možné rýchlo, jednoducho a jednoducho skopírovať a vložiť do aplikácie Flash.

Keď prilepíte grafiku Illustratora do aplikácie Flash, zachovajú sa nasledujúce atribúty.

Obrysy a tvary

Hrúbka ťahu
Definície gradientov
Text (vrátane fontov OpenType)
Súvisiace obrázky
Režimy miešania

Illustrator a Flash navyše podporujú nasledujúce funkcie pri vkladaní grafiky.

Pri výbere vrstiev v kresbe aplikácie Illustrator špičková úroveň Vrstvy a ich vlastnosti (viditeľnosť a blokovanie) sú zachované po ich vložení do Flash aplikácie.

Farebné formáty aplikácie Illustrator iné ako RGB (CMYK, odtiene sivej a vlastné formáty) sú konvertované pomocou Flash na RGB. Farby RGB sa vkladajú bežným spôsobom.

Keď importujete alebo prilepíte kresbu aplikácie Illustrator, môžete použiť rôzne možnosti na uloženie určitých efektov (napríklad tieňov vrhaných textom) ako filtrov Flash.

Flash uloží masky aplikácie Illustrator.

Exportujte súbory SWF z aplikácie Illustrator

Súbory SWF exportované z aplikácie Illustrator majú rovnakú kvalitu a kompresiu ako súbory SWF exportované z programu Flash.

Pri exporte si môžete vybrať z množstva preddefinovaných štýlov pre optimálny výstup a určiť, ako sa použijú viaceré kresliace plátna, ako sa prevedú znaky, vrstvy, text a masky. Môžete si napríklad vybrať export symbolov Illustratoru ako filmov alebo grafické obrázky, ako aj vytváranie symbolov SWF z vrstiev aplikácie Illustrator.

Importovanie súborov aplikácie Illustrator do aplikácie Flash

Ak chcete vytvoriť kompletné rozloženie v aplikácii Illustrator a potom ho importovať do programu Flash v jednom kroku, môžete svoju kresbu uložiť v natívnom formáte (AI) aplikácie Illustrator a importovať ju s vysokou presnosťou do programu Flash pomocou príkazov Súbor > Importovať do pracovného priestoru. Súbor“ > „Importovať do knižnice“.

Ak Súbor Illustrator obsahuje viaceré kresliace plátna, v dialógovom okne Import programu Flash vyberte kresliace plátno, ktoré chcete importovať, a zadajte nastavenia pre každú vrstvu v tomto kresliacom plátne. Všetky objekty na vybranom kresliacom plátne sa importujú do programu Flash ako jedna vrstva. Keď importujete ďalšie umelecké plátno z rovnakého súboru AI, objekty z tohto umeleckého plátna sa importujú do programu Flash ako nová vrstva.

Keď importujete kresbu Illustratora ako súbory AI, EPS alebo PDF, Flash si zachová rovnaké atribúty, ako keď prilepíte kresbu Illustratora. Ak importovaný súbor aplikácie Illustrator obsahuje vrstvy, môžete ich importovať jedným z nasledujúcich spôsobov.

Preveďte vrstvy aplikácie Illustrator na vrstvy Flash.

Preveďte vrstvy aplikácie Illustrator na snímky Flash.

Preveďte všetky vrstvy aplikácie Illustrator na jednu vrstvu Flash.

Dnes tu máme nezvyčajný návod na Adobe Illustrator. Pretože tentokrát neurobíme statický obrázok, ale skutočnú animáciu. Predstavte si, ukázalo sa, že pomocou programu Adobe Illustrator môžete kresliť aj karikatúry :)

Prvá vec, ktorú musíte urobiť, je nakresliť všetky potrebné prvky pre budúcu animáciu. Aby som to urobil, v samostatnom dokumente som vytvoril dve polohy filmového rámčeka, kruh pre referenciu, ktorý je rozrezaný na samostatné sektory, textúru a zvislý škrabanec na pridanie efektu staroveku, ako aj všetky čísla a nápisy.

Teraz vytvorte druhú vrstvu a skopírujte do nej rámik filmu, v ktorom sú otvory na okrajoch vytvorené s posunom. Treba to aj vycentrovať.

Podobným spôsobom potrebujeme nazhromaždiť 12 vrstiev s filmovými políčkami, ktoré definujú jeho pohyb.

Teraz máme veľa vrstiev a všetky sú viditeľné. V tom zmysle, že horné vrstvy blokujú spodné, čo nie je príliš vhodné na prácu. Preto môžete niektoré vrstvy vypnúť kliknutím na ikonu oka naľavo od názvu vrstvy. Ak chcete vypnúť alebo zapnúť všetky vrstvy naraz, podržte stlačený kláves Alt a súčasne kliknite na ikonu oka. Zapínaním a vypínaním vrstiev môžete presne vidieť, čo sa nachádza v určitom rámci našej budúcej animácie. A teraz, aby sme k pohybu filmu pridali mierne otrasy, musíme prijaté snímky mierne posunúť v rôznych smeroch. Ak to chcete urobiť, zapnite iba vrstvu, s ktorou budete práve pracovať, a potom posuňte snímku o niekoľko pixelov v ľubovoľnom smere.

Ak odstránite výber z kruhu, bude vyzerať ako jeden celok. Presne toto potrebujeme.

Ďalej musíme pridať textúru do našich vrstiev. Zapnite prvú vrstvu a skopírujte textúru zo zdrojového súboru s náhradnými dielmi.

A potom je všetko jednoduché. Zapnite úplne prvú vrstvu a vložte tam číslo tri.

Otvoria sa ďalšie nastavenia. Tu musíte nastaviť Frame Rate. Mám 12 snímok za sekundu. Zaškrtávacie políčko Looping je zodpovedné za cyklovanie animácie. Vďaka nej sa bude video prehrávať v kruhu. A možnosť Layer Order: Bottom Up vykreslí vrstvy ilustrátora zdola nahor na paneli. Presne takto sme postavili našu animáciu.

Výsledkom je flashový film s našou animáciou.

Teraz vidíte, že vytvorenie jednoduchej animácie v aplikácii Adobe Illustrator nie je také ťažké, ako sa na prvý pohľad zdá.

V poslednej dobe sa HTML5 a CSS3 čoraz častejšie používajú na vytváranie animácií. Tento kód je podporovaný modernými prehliadačmi a nevyžaduje použitie flash prehrávača.

Roman alias dacascas hlavne pre blog

Prihláste sa na odber noviniek, aby vám nič nové neuniklo: