Transparentný GIF v aplikácii Adobe Illustrator sa robí nasledovne. Prejdite do ponuky Súbor > Uložiť pre Web a zariadenia (Alt+Ctrl+Shift+S). V okne, ktoré sa otvorí, v poli Optimalizovaný formát súboru musíte najskôr prejsť na kartu veľkosť obrazu(veľkosť obrazu). Faktom je, že celá stránka sa štandardne dostane do okna optimalizácie a zvyčajne to nie je potrebné. Preto na karte Veľkosť obrázka zrušte začiarknutie políčka Klip na Artboard(Orezať podľa veľkosti strany) a kliknite na tlačidlo Použiť.
Potom v zozname na výber formátu vyberte GIF a začiarknite políčko Priehľadnosť.
Potom určíme, ktoré farby budú priehľadné. Všetky farby prítomné na obrázku sú obsiahnuté v záložke farebná tabuľka(Farebná tabuľka) a sú zobrazené ako farebné štvorce. Vyberte nástroj z panela nástrojov na ľavej strane okna kvapkadlo(pipeta).
Farby môžu byť definované dvoma spôsobmi. Najjednoduchšie je určiť farbu kvapkadlom priamo na obrázku - potom sa farba na tabuľke farieb zvýrazní tmavým ťahom. Ak presne viete, ktorá farba by mala byť priehľadná, môžete ju vybrať priamo v tabuľke farieb kliknutím na príslušné farebné pole. A v prvom a druhom prípade, ak potrebujete vybrať niekoľko farieb, musíte pracovať so stlačeným klávesom Shift (alebo Ctrl). Po výbere farby je potrebné dať programu pokyn, aby bola priehľadná. Ak to chcete urobiť, kliknite na ikonu Mapuje vybrané farby na priehľadné(Pridajte vybrané farby k priehľadnosti). Na obrázku je toto tlačidlo zakrúžkované a červená farba je nastavená na priehľadnú. Na obrázku sa objaví priehľadná oblasť a štvorec na tabuľke farieb zmení svoj vzhľad - z časti sa stane biely trojuholník. Ak chcete zrušiť vybratú farbu, musíte ju vybrať v tabuľke farieb a potom znova kliknúť na ikonu Mapovať vybrané farby na priehľadnú.
Niekoľko slov o spôsobe nastavenia transparentnosti. Zodpovedá za to rozbaľovacia ponuka. Zadajte algoritmus rozkladu priehľadnosti, v ruštine - Algoritmus simulácie transparentnosti (obr. nižšie). Existujú štyri možnosti: Bez priehľadného rozkladu – žiadny algoritmus, Difúzny priehľadný rozklad – difúzny algoritmus, Rozklad priehľadnosti vzoru – algoritmus založený na vzore a Rozklad priehľadnosti šumu – algoritmus založený na šume. V režime difúzneho algoritmu sa posúvač aktivuje Suma(Množstvo), ktoré vám umožňuje zmeniť hodnotu difúzie. Čo aplikovať v praxi? V závislosti od účelu a obrazu. Túto možnosť nepoužívam a vždy nechávam predvolenú hodnotu – Bez priehľadnosti.
Kliknite na Uložiť - transparentný gif pripravený. Práca bola vykonaná vo verzii Adobe Illustrator CS4 (v.14), ale všetky akcie a klávesové skratky sú relevantné pre staršiu verziu CS3 (v.13).
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 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šetky potrebné prvky pre budúcu animáciu. Aby som to urobil, v samostatnom dokumente som vytvoril dve pozície 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 musíme nahromadiť 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 s časťami karikatúry a umiestnite ho na prvú vrstvu v hornej časti rámika 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. Za týmto účelom 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. Spolu týchto 12 vrstiev 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 textúru zo zdrojového súboru 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, môžem vás potešiť - zostáva toho 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. Na to 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 na ďalšiu kópiu 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 kruh jednoducho odstráňte.
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 sa uistite, že ste nastavili Exportovať ako: Vrstvy AI na Rámce SWF. Práve táto možnosť premení vrstvy aplikácie Illustrator 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 na paneli zdola nahor. 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í. Tento kód je podporovaný modernými prehliadačmi 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:
Ahojte všetci! Dnes sa pokúsim urobiť popis funkcií programu Adobe Illustrator, v porovnaní so schopnosťami splachovania. Toto nebude globálna analýza programu kostí, ale skôr popis niektorých zaujímavých funkcií, ktoré som v tomto programe objavil. Zbieral som informácie kúsok po kúsku, keď som ich študoval, aby som to všetko dal do jedného príspevku. Hneď sa musím priznať, že nie som žiadny super skúsený ilustrátor, len posledný polrok ho používam na kreslenie (predtým som všetko kreslil flash). Mnohí sa sťažujú, že ilustrátor je zložitý, nie vždy intuitívny. Do istej miery súhlasím s tým, že po flashi je tento program ťažký. Ale tu nie je hlavné skončiť, ale pokračovať v štúdiu. A po pár týždňoch sa vynorí myšlienka, ako som to bez neho predtým dokázal!
Takže to, čo sa mi na ilustrátorovi páčilo a čo som pre seba našiel, nie je vo flashi.
1. Začnem tým najjednoduchším, no zároveň potrebným. Skúste bleskovo usporiadať objekty do kruhu. Predtým bol Deco nástroj, ale bol odstránený, zjavne považovaný za nepotrebný. Rozhodli sme sa, že bude zábavnejšie robiť to ručne. Illustrator má túto funkciu: Efekt – Deformácia & Transformácia – Transformácia.
Všetko je rýchle a jednoduché, hodnoty (vzdialenosť medzi objektmi, počet kópií) si nastavujeme sami v nastaveniach.
2. Cikcak
Ešte jednoduchšia, no predsa užitočná vec. Zdalo by sa to ako maličkosť, ale vo flashi musíte kresliť ručne, v ilustrátore je to otázka niekoľkých sekúnd.
3. Deformácia predmetov (Warp)
Vo Flashi nič také nie je. V príklade nižšie som ukázal len 2 spôsoby deformácie jednoduchých tvarov (Efekt - Warp - Oblúk / Ryba). V najnovšej verzii programu ich je totiž 15.
4. Automatické zaoblenie rohov (Round Corners)
Dá sa to urobiť ručne: na grafickom objekte sa pri výbere v rohu (vo všetkých rohoch) objaví biela bodka a znak so zaoblenou čiarou. Ťahajte myšou, upravte podľa svojho vkusu.
Ale to platí len pre tvary, s linkou ceruzkou trochu inak - použite efekt zaoblenia ( Efekt - Štylizácia - Zaoblené rohy). Na výstupe dostaneme rovnaký výsledok.
5. Zdrsniť
Efekt sa aplikuje na jednoduché formy (Effect-Distor & Transform-Roughen). Výsledkom je niečo, čo sa podobá low-poly 3D modelom. Podľa mňa je to cool :) A hlavne - veľmi jednoduché.
6 Pucker&Bloat(Zatiahnite a nafúknite)
Príklad na obrázku nižšie:
7. Rozšírenie formulára (odsadená cesta)
Vo flashi je funkcia Expand Fill (rozšírenie výplne), tá na rozdiel od illustratoru vôbec nefunguje s čiarami ceruzkou.
8. Štetce (Art Brush, Pattern Brush, Scatter Brush)
Príklady nájdete na obrázku nižšie:
9. Štetec na textúry (Štetce na textúry)
V Ilustrátore je tiež veľa textúrových štetcov, o ktorých som písal a ako sa v nich objavili Nová verzia blesk - . Všimli sme si, že používanie štetcov v Adobe Animate je strašne pomalé. To je ono :(
10. Nie som si istý, či je to trik, ale chcem sa zamerať na štetec s vtipným názvom kvapkaKefa. Nachádza sa na paneli nástrojov, veľmi pekná kefa na použitie. Má veľa nastavení, páči sa mi to viac ako zvyčajne. Je ťažké vysvetliť jeho výhody slovami, je lepšie to raz vyskúšať.
10. Rozdeliť na mriežku
Ďalšou užitočnou funkciou je funkcia Split to Grid (Object-Path-Split to Grid), ktorá umožňuje rozrezať formulár na rovnaké segmenty. Čo nám to pripomína? Je to tak - okná vo výškovej budove. Pokiaľ ide o mňa, skvelá vec na kreslenie napríklad mestskej krajiny;)
Ďalší užitočný nástroj, prezentované v illustratoru, pravdepodobne od jeho prvého vydania. S ním môžete vytvárať napríklad textúry dreva:
12. Presun (vpravo - Transformácia - Presunúť)
Odsadenie objektu o danú vzdialenosť. V prípade potreby môžete okamžite vytvoriť kópiu, ktorá bude umiestnená v požadovanej vzdialenosti od vybraného objektu horizontálne / alebo vertikálne. Staršia verzia flashu mala doplnok, ktorý to umožňoval túto funkciu. Bohužiaľ si nepamätám jeho názov.
Je veľmi výhodné vytvárať bezšvové vzory v aplikácii illustrator ( Object-Pattern-Make). Pamätám si, ako som šialene exceloval vo flashi s tvorbou . V ilustrátore verzie CC 2015 je všetko zautomatizované, kopa nastavení vám pomôže vytvoriť vzor v desiatkach variácií len s niekoľkými grafickými prvkami po ruke. Vo viac skoré verzie programy sa museli robiť ručne, ako doteraz vo flashi.
(Poznámka – zo vzoru možno urobiť vektorový upraviteľný objekt pomocou funkcie analýzy ( Rozšírenie objektu).
14. Objektová mozaika (Mosaic)
Vytvorte paletu farieb na základe existujúceho obrázka. Potom importujte obrázok, ktorý sa vám páči, do ilustrácie (Otvoriť). Objekt - Vytvorenie mozaiky objektov. V nastaveniach určíme frekvenciu delenia na výšku a šírku.
A na výstupe dostaneme:
15. Miešanie (miešanie)
Používa sa na vytváranie prechodov. Môžete vytvárať prechody krok za krokom, ako napríklad na obrázku. Nemôžem povedať, že by som ho používal často, ale niekomu sa môže hodiť. Zdá sa mi, že sa dá použiť pri vytváraní jednoduchých obrázkov na pozadí.
Nástroj je možné použiť aj na klonovanie objektov. Umiestnime dva objekty do určitej vzdialenosti od seba a aplikujeme Možnosti prelínania, zvolíme počet krokov (počet klonovaných objektov).
16. Nástroj na vytvorenie tvaru. Veľmi šikovná vecička na prácu s primitívmi. Bleskovo, ako sa mi zdalo, je to menej pohodlné.
Podržte Alt a kliknite na vybrané segmenty - odstráňte segmenty. Ak jednoducho potiahneme myšou cez niekoľko vybraných oblastí – spojov.
Prídavok - nástroj, ktorý pomáha automaticky rezať, spájať atď. vybrané formuláre. Pokiaľ ide o mňa, nie je to veľmi pohodlné, používam to častejšie Stavaťtvarnástroj.
(artboardy)
18. Panel vlastných nástrojov
Možnosť vytvoriť si vlastný panel nástrojov, vyhodiť nepotrebné a vybrať len tie, ktoré používate.
Vo flash, umelecké plátna, menovite scény ( Scéna 1,2,3..) sú umiestnené samostatne a je potrebné medzi nimi prepínať (Shift + F2). V aplikácii Illustrator ich možno všetky umiestniť pred vašimi očami. Je vhodné, keď vytvoríte niekoľko verzií toho istého výkresu, takže všetky možnosti sú pred vašimi očami na porovnanie.
19.Izometria s Grafické štýly
A posledná vec je vytvorenie izometrie bez použitia na 1 kliknutie (alebo skôr na 3 kliknutia, pretože máme 3 strany;) pomocou grafických štýlov ( Grafické štýly). Ako sa to robí, napíšem nabudúce.
Ilustrátor má spoločné s flashom možnosť uložiť objekt do symbolu (symbolu) a tento symbol je možné bez problémov preniesť aj do flashu (otvorte súbor .ai vo flashi, napr. Import – import do fázy).
Symbol v ilustrátore má rovnaké vlastnosti ako vo flashi.
A nakoniec napíšem, čo je podľa môjho názoru v ilustrátore horšie ako flash. Áno, áno, a existuje. A toto je nástroj na vyplnenie ( plechovka farby). Bez ohľadu na to, ako veľmi sa snažím zvyknúť si na to v illa, je to pohodlnejšie vo flashi.
Ak sa pre vás moje poznámky stali užitočnými alebo ak chcete pridať niečo vlastné - vitajte v komentároch! Veľa šťastia všetkým ;)
Optimalizácia webovej grafiky
Grafické informácie sa prenášajú oveľa pomalšie ako textové informácie a čas načítania obrázkov je úmerný veľkosti ich grafických súborov. Takže rýchle načítanie Webové stránky vyžadujú malú veľkosť grafických obrázkov vložených do nich, čo sa dosahuje ich optimalizáciou. Optimalizáciou obrazu sa rozumie jeho transformácia, ktorá poskytuje minimálnu veľkosť súboru pri zachovaní potrebnej tento prípad kvalita obrazu, ktorá sa dosahuje predovšetkým znížením počtu farieb v grafických obrázkoch, používaním komprimovaných a špeciálnych formátov súborov a optimalizáciou nastavení kompresie pre jednotlivé časti obrazu.
Illustrator má vstavané nástroje na optimalizáciu obrázkov, ktoré poskytujú rôzne metódy ukážte rýchly a efektívny proces optimalizácie. Náhľad poskytuje pomerne presnú predstavu o tom, ako bude optimalizovaný obrázok vyzerať v reálnom čase, čo pomáha vyhodnotiť výsledok optimalizácie a úspešne vybrať požadované nastavenia. Môžete tiež optimalizovať obrázky vytvorené priamo v aplikácii Illustrator a ďalšie, napríklad fotografie, ktoré sa majú umiestniť na webovú lokalitu.
V okne sa nastavujú parametre optimalizácie Uložiť pre web(Save for Web), vyvolané rovnomenným príkazom z ponuky Súbor(Súbor). Program ponúka použitie jedného zo štyroch režimov náhľadu, no na vyhodnotenie kvality optimalizácie sú najlepšie dva:
- 2-Up(dve možnosti) - súčasné prezeranie originálu a optimalizovaného obrazu v súlade so zadanými nastaveniami (obr. 1);
- 4-up(štyri možnosti) - v tomto režime je výrez rozdelený do štyroch okien (obr. 2) pre zobrazenie pôvodného obrázku a troch verzií optimalizovaného: prvá verzia sa vytvorí na základe nastavených hodnôt optimalizácie a ďalšie dve sú možnosti pre aktuálne nastavenia optimalizácie.
Oba režimy vám umožňujú výrazne ušetriť čas pri hľadaní. najlepšia možnosť optimalizácia, pretože eliminujú potrebu ukladať obrázky rôzne nastavenia optimalizácia a ich následné vizuálne porovnanie. Navyše je možné hodnotiť nielen kvalitu optimalizovaného obrazu, ale aj jeho veľkosť a čas sťahovania pre rôzne možnosti pripojenia. Pre porovnanie, najpohodlnejší režim je 4-Up (štyri možnosti), ktorý umožňuje vizuálne vyhodnotiť vplyv kompresie alebo zmenšenia palety na kvalitu a veľkosť obrázka a v konečnom dôsledku určiť najlepšie parametre optimalizácia.
Illustrator vám umožňuje optimalizovať webovú grafiku nielen vo formátoch GIF, JPG, PNG-8 a PNG-24, ale aj vo formátoch SWF a SVG. Indexované obrázky s malé množstvo farby sa uložia ako GIF. Na uloženie plnofarebných obrázkov a obrázkov v odtieňoch sivej – fotografií a farebne bohatej grafiky, ako sú prechodové výplne – použite formát JPG. Pre plnofarebné obrázky s priehľadnými oblasťami použite formát PNG, ktorý umožňuje ukladať indexované aj plnofarebné obrázky, pričom v PNG-8 je maximálny možný počet farieb optimalizovaného obrázku 256 a v PNG-24 môže mať obrázok milióny farieb, a preto je to podobné do formátu JPEG. Rozdiel medzi PNG-24 a JPEG je v tom, že metóda kompresie použitá na optimalizáciu obrázkov PNG-24 nevedie k strate kvality, ale zvyšuje veľkosť súboru. Formáty SVG a SWF kombinujú grafiku, text a interaktívne komponenty a možno ich tiež optimalizovať.
Zvážte konkrétny príklad optimalizácie obrazu. Povedzme, že v programe Illustrator bol vyvinutý emblém stránky (obr. 3), pôvodne uložený vo formáte AI. Pokus o okamžitú optimalizáciu pre web nepovedie k ničomu dobrému, keďže v tomto prípade bude obrázok automaticky orezaný, čo nebude brať do úvahy skutočnú polohu nápisu získanú v dôsledku deformácie (obr. 4 a 5).
Preto skúsme exportovať logo do formát PSD tím Súbor=>Exportovať(Súbor=>Exportovať) - veľkosť vytvoreného obrázku bude 143 KB. Otvorte výsledný súbor PSD a použite príkaz Súbor=>Uložiť pre web(Súbor=>Uložiť pre web). Vzhľadom na obmedzený počet farieb zahrnutých v obrázku je v tomto prípade optimálny formát GIF, s konkrétnymi nastaveniami, pre ktoré sa musíte rozhodnúť. Experimentovaním s nastaveniami to môžete vidieť najlepšiu kvalitu poskytuje predvolený kompresný algoritmus programu selektívne(Selektívne). Pokiaľ ide o anti-aliasing, potom je vzhľadom na prítomnosť gradientovej výplne lepšie zvoliť algoritmus s generovaním šumu - hluk(obr. 6). Veľkosť výsledného optimalizačného súboru bude 6,729 KB (obr. 7), pričom zostane zachovaná priehľadnosť pozadia, čo si ľahko overíte uložením obrázka vo formáte GIF spolu s HTML súborom (obr. 8). Výsledkom je, že v tomto príklade boli súbory emblem.html a emblem.gif získané v priečinku Primer1.
Tlačidlá
Nevyhnutným špecifickým dizajnovým prvkom každej webovej stránky sú grafické ovládacie prvky - tlačidlá. Je jednoducho nemožné si predstaviť stránku bez nich. Tlačidlá kreslenia sa dnes stali špeciálnym žánrom a Illustrator vám umožňuje vytvárať tie najzložitejšie možnosti. Napríklad tlačidlá navrhnuté ako objekty mriežky a (alebo) s maskami vyzerajú oveľa efektívnejšie ako zvyčajne.
Zvážte možnosť vytvorenia okrúhleho vyvýšeného tlačidla v aplikácii Illustrator. Nakreslite vektorový objekt vyplnený ľubovoľnou farbou v tvare kruhu (obr. 9) a pomocou príkazu ho preveďte na mriežku Object=>Vytvoriť sieť prechodov(Object=>Create Gradient Mesh) zadaním štyroch riadkov a štyroch stĺpcov a v zozname Vzhľad(Zobraziť) výberom možnosti Do centra Zlatý klinec(Podsvietenie) na 60 (Obrázok 10). Vyberte si nástroj Priamy výber a kliknite vľavo horný roh objekt, pričom sa zvýraznia tam nachádzajúce sa uzlové body (obr. 11). Zmeňte farbu zodpovedajúcej bunky na bielu tak, že ju vyberiete v palete Vzorkovníky(obr. 12).
Vezmite si nástroj Elipsa(Elipsa), nastavte značku myši do stredu kruhu vytvoreného predtým a pri stláčaní klávesov alt a Shift, natiahnite nový kruh na starý tak, aby bol väčší ako starý o 1-2 pixely na všetkých stranách. Urobte z neho čierny okraj Mŕtvica) 1-2 px na šírku a vyplňte ho radiálnym prechodom od červenej k bielej (obrázok 13). Potiahnite vytvorený vektorový objekt o 1-2 pixely doprava a nadol, potom bez odstránenia výberu kliknite naň pravým tlačidlom myši a z obsahové menu vyberte tím Usporiadať=>Odoslať späť(Usporiadať => Odoslať späť). V dôsledku toho dostaneme polotovar pre tlačidlo znázornené na obr. 14.
Na každej webovej stránke je spravidla niekoľko tlačidiel rovnakého typu, ktoré sa líšia napríklad iba smerom šípok na nich nakreslených, čo naznačuje smer pohybu po stránke. Zvážte najjednoduchší prípad dvoch tlačidiel, z ktorých jedno so šípkou nadol znamená prechod na ďalšia strana a tlačidlo so šípkou nahor sa presunie na predchádzajúce. Ako polotovar pre šípku si vezmime pravidelný trojuholník nakreslený nástrojom Polygón(Polygón) vyplnený čiernou farbou a tiež v štýle sieťovaného objektu pre väčší efekt. Presuňte šípku na tlačidlo a upravte polohu všetkých objektov voči sebe pomocou príslušných tlačidiel na palete Zarovnať(Zarovnanie). Prvé z prijatých tlačidiel je znázornené na obr. 15. Vytvorte kópiu vrstvy pomocou tlačidla výberom príkazu Duplicitná vrstva Vrstvy, - v dôsledku toho dostaneme dve rovnaké vrstvy. Potom vyberte šípku na kópii vrstvy a otočte ju o 180° výberom príkazu z kontextovej ponuky Transformácia=>Otočiť- Transformácia=>Otočiť. Dostaneme rovnaké tlačidlo ako na obr. 16. Upozorňujeme, že je oveľa pohodlnejšie uložiť všetky tlačidlá rovnakého typu jedného projektu do jedného súboru na rôznych vrstvách, čo je demonštrované v tomto prípade.
Teraz musíte uložiť optimalizované možnosti pre každé z tlačidiel. Najprv urobte spodnú vrstvu neviditeľnou - v tomto prípade sa uloží tlačidlo na hornej vrstve. Vyberte si tím Súbor=>Uložiť pre web(Súbor=>Uložiť pre web), nakonfigurujte parametre optimalizácie tlačidiel, napríklad ako je znázornené na obr. 17, kliknite na tlačidlo Uložiť(Uložiť) a zadajte názov súboru. Tlačidlo uložené ako výsledok je znázornené na obr. 18. Teraz urobte spodnú vrstvu viditeľnou, vrchnú vrstvu urobte neviditeľnou a rovnakým spôsobom uložte druhé tlačidlo s iným názvom. Výsledok je znázornený na obr. devätnásť.
Teraz už zostáva len uistiť sa, že tlačidlá vyzerajú na webovej stránke dobre a umiestniť ich na vlastnú stránku (obrázok 20). Výsledkom je, že v tomto príklade sa súbor Primer2.html a dva grafické obrázky získali v priečinku obrázky (priečinok Primer2).
Ak je to potrebné, počas procesu optimalizácie možno tlačidlo ľahko zmeniť na plátok. V tomto prípade po výbere príkazu Súbor=>Uložiť pre web(Súbor => Uložiť pre web) a nastavenia optimalizácie by sa mali vybrať z nástroja palety nástrojov Slice Select(Výber plátku) a dvakrát kliknite na obrázok, ktorý sa automaticky zmení na plátok s poradovým číslom 1 (obr. 21). Opätovným dvojitým kliknutím sa okno otvorí Možnosti rezu(Možnosti výrezu), v ktorom budete musieť zadať prepojenie a v prípade potreby zmeniť názov výrezu (obr. 22) a potom uložiť optimalizovaný obrázok. Výsledkom budú v tomto prípade súbory Primer3.html (obr. 23) a Primer3.gif (priečinok Primer3).
Interaktívne prvky
Jedným zo spôsobov, ako okoreniť stránku, je predstaviť dizajnové prvky, ktoré ich menia vzhľad(alebo stavu) v závislosti od správania myši alebo zriedkavejšie v prípade akýchkoľvek iných situácií: približovanie, posúvanie, načítanie, chyby atď.
Spomedzi týchto prvkov sú najznámejšie rollovery (z anglického roll over – prevaliť sa, prevaliť sa) – prvky meniace tvar pod vplyvom myši. Animované tlačidlá sú príklady typických prevrátení. Prechody sa často používajú pri vytváraní iných prvkov navigácie na lokalite. V skutočnosti každý rollover nie je jeden, ale niekoľko (až štyri) obrázkov, z ktorých každý zodpovedá konkrétnej udalosti. Za hlavné udalosti sa považujú tieto: Normálny - normálny stav, Nad - prejdenie kurzorom myši nad prvok a Dole - stlačenie ľavého tlačidla myši pri prejdení nad ním. Teoreticky môžu ísť o udalosti ako Click - uvoľnenie ľavého tlačidla myši po kliknutí, Up - po uvoľnení tlačidla, Out - pri opustení aktívnej zóny. V praxi sa však častejšie obmedzuje na zmenu prvku len pre prvé tri alebo dokonca dve udalosti.
Klasické rollovery
Rollover je v klasickom zmysle séria grafických obrázkov vo formáte GIF a ich zodpovedajúceho HTML kódu, vďaka ktorému v závislosti od správania myši jeden obrázok nahrádza druhý v okne prehliadača.
Illustrator nie je navrhnutý tak, aby priamo vytváral rollovery v klasickom zmysle slova, ale môže pomôcť s vývojom počiatočných prvkov pre ne. Myšlienkou v tomto prípade je vytvoriť vrstvu s obrázkom zodpovedajúcim prvej udalosti. Potom vytvorte kópiu vrstvy a transformujte obrázok tak, aby zodpovedal druhej udalosti atď. Výsledný vrstvený obrázok sa exportuje do PSD súboru so zachovanými vrstvami, na základe čoho sa v programe Image Ready vytvorí rollover. Výhodou používania Illustratora, ako aj v mnohých iných prípadoch, je množstvo jeho zaujímavých funkcií, ktoré v iných nie sú dostupné. softvérové nástroje, spolu s pohodlím transformácie vektorovej grafiky.
Skúsme vytvoriť rollover vo forme nápisu, ktorý mení farbu v závislosti od správania myši. Otvorte Illustrator a vytvorte tvar v podobe zaobleného a vyplneného čiernym obdĺžnikom (obr. 24), vytvorte jeho kópiu a umiestnite do voľnej časti obrazovky. Skonvertujte prvú kópiu obdĺžnika na objekt mriežky so zvýraznením v strede (príkaz Object=>Vytvoriť sieť prechodov- Object=>Create Gradient Mesh), špecifikujúce štyri riadky a desať stĺpcov (obr. 25). Aktivujte druhú kópiu obdĺžnika a nastavte pre ňu prechodovú výplň, podobnú tej, ktorá je znázornená na obr. 26. Prekryte objekt s prechodom cez sieť, znížte nepriehľadnosť objektu s prechodom na približne 80 % a veľkosť na približne 1 pixel, aby ste na konci simulovali efekt vydutia. A potom na predmety vytlačte nápis. V pôvodnej podobe nech má bielu farbu, ktorá bude zodpovedať Normálnemu stavu (obr. 27) a potom pri zmene stavu rolloveru sa farba nápisu zmení napríklad na zelenú - keď značka myši je nad ním presunutý (stav Over) a modrý - pri stlačení tlačidla myši (stav nadol).
Venujte pozornosť palete Vrstvy- v tomto štádiu má len jednu jedinú vrstvu. Vytvorte dve kópie tejto vrstvy pomocou príkazu Duplicitná vrstva(Duplicate Layer) z ponuky palety Vrstvy, - v palete budú tri vrstvy (obr. 28). Potom v prvej kópii vrstvy zmeňte farbu nápisu na zelenú a v druhej na modrú (obr. 29). V dôsledku toho sa získa potrebný polotovar na prevrátenie.
Exportujte vytvorený obrázok do formátu PSD so zachovanými vrstvami pomocou príkazu Súbor=>Exportovať(Súbor=>Exportovať) a výber farebného modelu RGB (obr. 30). Otvorte vygenerovaný súbor PSD v ImageReady (obrázky 31 a 32). Vytvorte rámy založené na vrstvách výberom príkazu Vytvárajte rámy z vrstiev(Create Frames from Layers) z ponuky palety animácie. Okno Animácie bude vyzerať ako na obr. 33. Zároveň v palete Prevrátenia Na začiatku sa vytvorí jeden normálny stav.
Potom v okne animácie vyberte v palete rám zodpovedajúci stavu, v ktorom ste sa vznášali Vrstvy vrstva sa vyberie automaticky Kópia vrstvy 1(obr. 34). Prejdite na paletu Prevrátenia a kliknite na tlačidlo Vytvorte stav prevrátenia(Vytvorte stav prevrátenia) - obr. 35, čo spôsobí, že sa objaví stav Nad štátom v palete Prevrátenia(obr. 36). Rovnakým spôsobom vytvorte štát Dolný štát. Aktivovať stav Normálne v palete Prevrátenia a vymazať v palete animácie všetky snímky okrem toho, ktorý by mal zodpovedať stavu Normálne. Výsledkom je, že pre každý stav rolovania v palete animácie bude len jeden rám (obr. 37, 38 a 39).
Ryža. 38. Pohľad na obrázok, okno Animácia a palety Vrstvy a Rollovery pre Stav prekrytia
Výsledok skontrolujte kliknutím na tlačidlo Ukážka v predvolenom prehliadači(Ukážka prehliadača) na paneli s nástrojmi a prechodom do okna prehliadača (Obrázok 40). Potom súbor uložte pomocou príkazu Súbor=>Uložiť optimalizované(Súbor=>Uložiť s optimalizáciou) a špecifikovaním možnosti HTML a obrázky (*.html). V dôsledku toho sa v tomto príklade získal súbor Primer4.html a séria grafických obrázkov v priečinku obrázkov.
Ryža. 40. Okno prehliadača s prvkom Rollover
SVG rollovery
Čoraz obľúbenejší formát SVG (Scalable Vector Graphics), vytvorený na základe štandardu XML, tiež umožňuje získať rôzne interaktívne prvky, najmä rollovery, len v praxi je to implementované úplne iným spôsobom. Stojí za zmienku, že vytváranie interaktívnych rolloverov SVG, na rozdiel od klasických, kedy sa zodpovedajúci HTML kód generuje úplne automaticky, vyžaduje znalosť jazyka JavaScript a pochopenie základných princípov objektovo orientovaného programovania.
Na prácu s objektmi SVG je navrhnutá špeciálna paleta. Interaktivita SVG, ktorý sa dá jednoducho otvoriť pomocou príkazu Okno=>Interaktivita SVG(Okno=>interaktivita SVG) - obr. 41.
Zvážte túto možnosť vytvorenie rolloveru na príklade interaktívneho tlačidla, farba štítku, na ktorom sa zmení z čiernej na modrú, keď myšou prejdete myšou, a opäť na čiernu, keď myš opustí aktívnu oblasť.
Vytvorte obdĺžnikové tlačidlo so zaoblenými okrajmi a vyberte preň vhodnú prechodovú výplň, napríklad ako je znázornené na obr. 42. Upravte priehľadnosť tlačidla v palete Transparentnosť(Transparentnosť) – v tomto príklade hodnota parametra Nepriehľadnosť(Nepriehľadnosť) je nastavená na 50 %. Vytvorte kópiu tlačidla, vyplňte ho tmavozelenou farbou (obr. 43) a potom ho preveďte na sieťový objekt príkazom Object=>Vytvoriť sieť prechodov(Object=>Create Gradient Mesh) zadaním štyroch riadkov a desiatich stĺpcov a v zozname Vzhľad(Zobraziť) výberom možnosti Do centra(Smerom do stredu) a nastavenie hodnoty Zlatý klinec(Zvýrazniť) na 100. Znížte nepriehľadnosť vrstvy sieťového objektu na približne 40 % (Obrázok 44). Umiestnite sieťový objekt na objekt s prechodom a tlačidlo bude vyzerať ako to, ktoré je znázornené na obr. 45.
Ryža. 44. Premena kópie tlačidla na objekt mriežky
Doplňte tlačidlo zamýšľaným nápisom a upravte jeho polohu pomocou príslušných tlačidiel na palete Zarovnať(Zarovnanie). Výsledný obrázok bude obsahovať jednu vrstvu s tromi objektmi nad sebou (obr. 46). Naplánované udalosti budú odkazovať na textový objekt, takže pre pohodlie zmeňte jeho názov na Text dvojitým kliknutím na objekt a zadaním nového názvu. Podobne zmeňte názov vrstvy z Vrstva 1 do vrstvy(obr. 47).
Spracovanie udalostí zahŕňa použitie procedúr JavaScriptu, takže musíte zahrnúť súbor s popisom týchto procedúr. Volá sa Events.js a po inštalácii sa uloží na disk do priečinka Sample Files\Sample Art\SVG\SVG Adobe softvér Ilustrátor. Ak chcete zahrnúť súbor Events.js, použite príkaz Súbory JavaScript Interaktivita SVG(obr. 48). Ďalej musíte stlačiť tlačidlo Pridať(pridať) a nájsť požadovaný súbor na pevnom disku. Keď sa v poli objaví jeho meno URL(obr. 49), kliknite na tlačidlo hotový(Odhlásiť sa).
Ryža. 48. Výber príkazu Súbory JavaScript
Potom by ste mali definovať reakciu objektu na udalosti myši Text. V poli vyberte objekt Text udalosť(Udalosti) palety Interaktivita SVG vyberte udalosť onmouseover elemColor(evt, "Text", "#3333FF")- to znamená, že keď je myš nad objektom Text jeho farba sa zmení na modrú (obr. 50). Aby sa farba textu po opustení aktívnej zóny zmenila na čiernu, musíte vytvoriť ešte jednu udalosť onmouseout- vyberte ho v poli udalosť(Udalosti) palety Interaktivita SVG. Potom do akčného riadku zadajte text elemColor(evt, "Text", "#000000")- tým sa vráti čierna farba (obr. 51).
Ryža. 51. Konečný vzhľad palety SVG Interaktivita pre objekt Text
Uložte vygenerovaný rollover ako súbor SVG pomocou príkazu Súbor=>Uložiť ako(Súbor=> Typ súboru formát SVG a potom nastavenie možností pre uloženie súboru SVG, ako je znázornené na obr. 52. Po uložení sa získa iba jeden jediný súbor s príponou SVG a nie dva, ako v prípade klasického rolloveru - v tomto prípade bol získaný súbor Primer5.svg (priečinok Primer5). Aby však rollover naozaj fungoval, musíte dodatočne skopírovať súbor Events.js s popisom JavaScript procedúr do priečinka so súborom SVG. Potom môžete skontrolovať výkon prevrátenia - výsledok bude vyzerať ako na obr. 53.
SVG animácia
Formát SVG možno použiť aj na sprostredkovanie animácie. Skúsme si vytvoriť jednoduchý animačný prvok (v tomto prípade to budú informácie o firme), ktorý sa na obrazovke objaví po prejdení myšou nad príslušný grafický objekt a zmizne po vybratí myši z interaktívneho prvku.
Vytvorme si približne takú sériu grafických a textových objektov, ako je znázornené na obr. 54. Premenovať pohodlný spôsob všetky vytvorené objekty postupným kliknutím na názov ďalšieho objektu v palete Vrstvy a zadaním požadovaného názvu (obr. 55). Všimnite si, že zvýraznené na obr. 56 objektov — Text1, Text2, Text3 a Cesta1- bude vždy viditeľné a všetky ostatné - iba keď podržíte kurzor myši nad objektom Text1.
Ryža. 54. Pôvodný pohľad na obrázok
Pomocou príkazu zahrňte súbor Events.js s popisom procedúr JavaScriptu Súbory JavaScript (súbory JavaScript) z palety Interaktivita SVG stlačením tlačidla Pridať(Pridať) výberom požadovaného súboru na pevnom disku a kliknutím na tlačidlo hotový(Odhlásiť sa).
Definujte odozvu udalosti myši pre objekt Text1. Vyberte objekt Text, v teréne udalosť(Udalosti) palety Interaktivita SVG vyberte udalosť onmouseover a do riadku nižšie zadajte text elemShow(evt, "Text4"); elemShow(evt, "Cesta2"). V dôsledku toho, keď je myš nad objektom Text1 objekty budú viditeľné Text4 a Cesta2. Upozorňujeme, že ak je potrebné vykonať niekoľko akcií, keď nastane udalosť, musia byť špecifikované pomocou znaku „;“. Potom urobte to isté pre udalosť onmouseout, zadáte k nemu text, ktorý bude znamenať skrytie predmetov (obr. 57).
Uložte výsledok ako súbor SVG pomocou príkazu Súbor=>Uložiť ako(Súbor=>Uložiť ako), zadanie názvu súboru a výber v poli Typ súboru formát SVG a následne nastavenie možností pre uloženie súboru SVG v súlade s obr. 58. Po uložení sa získa súbor Primer6.svg (priečinok Primer6). Nezabudnite skopírovať súbor Events.js do priečinka s týmto súborom. Ak potom spustíte coz daný súbor, uvidíte výsledok znázornený na obr. 59. Toto je takmer to, čo potrebujete. Jediné, čo nebolo zahrnuté v našich plánoch, bol prvotný vzhľad objektov Text 4 a Cesta 2 pri nakladaní. Aby ste sa zbavili tohto nedostatku, vyberte oba tieto objekty naraz a vytvorte pre ne akciu elemHide(evt, "Text4"); elemHide(evt, "Cesta2") na podujatí načítať(obr. 60). Uložte súbor znova a uistite sa, že objekty sú teraz Text4 a Cesta2 viditeľné iba pri prejdení myšou nad objekt Text1.
GIF animácia
Akákoľvek webová stránka je nemysliteľná bez webovej animácie, vrátane animovaných gifov. Jednou z možností ich vytvorenia je použitie aplikácie Adobe ImageReady, ktorá okrem iného umožňuje vytvárať animácie z vrstiev. Zároveň je možné pripraviť samotný viacvrstvový obrázok v rôznych aplikáciách vrátane Adobe Illustrator.
Je veľmi jednoduché vytvoriť animáciu založenú na prvkoch z palety Symboly(Symboly) otvorené príkazom Okno=>Symboly(Window=>Symbols) alebo z jednej z knižníc symbolov, ktoré je možné otvoriť pomocou príkazu Window=>Knižnice symbolov(Okno=>Knižnice symbolov).
Skúsme napríklad zväčšiť veľkosť ľubovoľného objektu-symbolu, kľúčové fázy procesu zväčšovania objektu musia byť nastavené na samostatné vrstvy. Najprv jednoducho umiestnite objekty symbolov jeden nad druhý a potom zväčšite veľkosť každého nasledujúceho objektu, napríklad, ako je znázornené na obr. 61. V dôsledku toho v palete Vrstvy vytvorí sa jedna vrstva s mnohými objektmi (obr. 62). Ak priamo exportujete tento obrázok do formátu PSD, nebude to fungovať, pretože existuje iba jedna vrstva a prirodzene, keď otvoríte súbor PSD v ImageReady, bude tam tiež iba jedna vrstva. Preto musíte najprv umiestniť objekty do rôznych vrstiev. Dá sa to urobiť rôznymi spôsobmi – najjednoduchšie je najprv vybrať vrstvu Vrstva 1 v palete Vrstvy a použite príkaz Uvoľnite do vrstvy(Uvoľňovanie vo vrstvách). Výsledkom bude presunutie každého z objektov do vlastnej vrstvy, ale všetky budú vnorené do vrstvy Vrstva 1. Preto budete musieť ručne pretiahnuť všetky vnorené vrstvy do hornej časti palety Vrstvy tak, aby boli nad vrstvou Vrstva 1 a potom prázdnu vrstvu Vrstva 1ľahko odstrániteľné (obr. 63). Exportujte obrázok do formátu PSD pomocou príkazu Súbor=>Exportovať(Súbor=>Exportovať) s nastaveniami ako na obr. 64.
Načítajte vytvorený súbor PSD v programe ImageReady (obr. 65 a 66). Otvorte ponuku palety animácieVytvárajte rámy z vrstiev(Vytvorte rámy z vrstiev). V dôsledku toho sa vytvorí päť snímok, z ktorých každý bude zodpovedať svojej vrstve a oknu palety animácie bude vyzerať ako na obr. 67.
Potom nastavte trvanie každého z vytvorených snímok - v tomto prípade je pre všetky snímky doba trvania nastavená na 0,2 s. A potom uložte optimalizovanú animáciu príkazom Súbor=>Uložiť optimalizované(Súbor=>Uložiť s optimalizáciou). Získaný výsledok sa môže podobať obr. 68.
Ešte pohodlnejšie je používanie funkcií Živé zmesi Softvér Illustrator. Toto kombinované použitie Illustratora a ImageReady výrazne urýchľuje proces vytvárania GIF animácií.
Napríklad nakreslite dva ľubovoľné viacfarebné objekty a potom ich zmiešajte s príslušnými parametrami (obr. 69). Tento súbor nie je možné použiť priamo na vytvorenie animácie, keďže obrázok je umiestnený v jednej vrstve (obr. 70). Preto budete musieť najskôr umiestniť každý prvok zmiešaného objektu na samostatnú vrstvu. Ak to chcete urobiť, v okne Vrstvy zvýraznite čiaru
Ryža. 70. Počiatočný stav okna Vrstvy
Exportujte vytvorený súbor do formátu PSD pomocou príkazu Súbor=>Exportovať(Súbor=>Exportovať). Otvorte vytvorený súbor PSD v ImageReady (obr. 73). Upozorňujeme, že všetky vrstvy vytvorené v programe Illustrator sa zobrazia v okne vrstiev (obr. 74) a v okne animácie bude len jeden rám.
Aktivujte ponuku palety animácie, kliknutím na čiernu šípku v pravom hornom rohu palety a vyberte príkaz Vytvárajte rámy z vrstiev(Vytvoriť snímky z vrstiev) - v dôsledku toho sa v tomto príklade vytvorí päť snímok a okno palety animácie bude mať formu podľa obr. 75. Podržaním klávesu vyberte všetky snímky Shift a nastavte príslušné trvanie snímky – v tomto príklade sa pre každú snímku použije rovnaký čas 0,2 s. Potom súbor uložte pomocou príkazu na optimalizáciu Súbor=>Uložiť optimalizované(Súbor=>Uložiť s optimalizáciou) nastavenie v zozname Typ súboru možnosť Iba obrázky (*.gif). Animácia bude pripomínať Obr. 76.
Oveľa zaujímavejší nie je pohyb, ale plynulá zmena veľkosti prelínaných objektov. Môžete napríklad použiť už vytvorený prechod prelínania. V tomto prípade po vytvorení samostatných vrstiev pre každý prvok prechodu prelínania umiestnite všetky objekty na seba pomocou tlačidiel Horizontálne zarovnanie na stred(Zarovnanie vzhľadom na vodorovný stred) a Vertikálne zarovnanie na stred(Vertikálne zarovnanie na stred) palety Zarovnať(obr. 77).
Exportujte vytvorený súbor do formátu PSD ( Súbor=>Exportovať- Súbor => Export) a vytvorený súbor PSD otvorte v programe ImageReady (obr. 78). Vytvárajte snímky animácie založené na vrstvách ( Vytvárajte rámy z vrstiev- Vytvorte snímky z vrstiev) a zvoľte pre ne vhodné trvanie (obr. 79). A potom, aby bola animácia efektívnejšia, skopírujte existujúce snímky, ale v opačné poradie- aby sa obraz najskôr zväčšoval a potom zmenšoval a tak ďalej v kruhu (obr. 80). Potom uložte súbor optimalizácie ( Súbor=>Uložiť optimalizované— Súbor=>Uložiť s optimalizáciou). Výsledná animácia je znázornená na obr. 81.
Ryža. 80. Stav okna Animácia po duplikovaní snímok
Ryža. 81. Hotová animácia
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 snímok animácií. V Illustratore 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 SWF a bitmapových formátov 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.
Hrúbka ťahu
Definície gradientov
Text (vrátane fontov OpenType)
Súvisiace obrázky
Režimy miešania
Obrysy a tvary
Okrem toho aplikácie Illustrator a Flash 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ňa textu) 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 chcete použiť viaceré kresliace plátna, ako sa prevedú symboly, vrstvy, text a masky. Môžete sa napríklad rozhodnúť exportovať symboly Illustratora ako filmy alebo grafiku alebo vytvoriť symboly SWF z vrstiev Illustratora.
Importovanie súborov aplikácie Illustrator do aplikácie Flash
Ak chcete vytvoriť kompletné rozloženie v aplikácii Illustrator a potom ho v jednom kroku importovať do programu Flash, 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. oblasť“ alebo „ Súbor“ > „Importovať do knižnice“.
Ak súbor aplikácie Illustrator obsahuje viaceré kresliace plátna, v dialógovom okne Flash Import 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 Flash program 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.
Pri importovaní umeleckých diel Illustratora ako AI, EPS alebo PDF žiadosť Flash si zachová rovnaké atribúty ako pri vkladaní grafiky Illustratora. Ak importovaný súbor aplikácie Illustrator obsahuje vrstvy, môžete ich importovať jedným z nasledujúcich spôsobov.
Preveďte vrstvy Illustratora 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.
