Optimalizace webové grafiky
Grafické informace je mnohem pomalejší než text a doba načítání obrázků je úměrná velikosti jejich grafických souborů. Proto rychlé načítání Webové stránky vyžadují malou velikost grafických obrázků vložených do nich, čehož je dosaženo jejich optimalizací. Optimalizací obrazu se rozumí jeho transformace, která poskytuje minimální velikost souboru při zachování v tomto případě požadované kvality obrazu, čehož je dosaženo především snížením počtu barev v grafických obrázcích, použitím komprimovaných a speciálních formátů souborů a optimalizací nastavení komprese pro jednotlivé fragmenty obrazu.
Illustrator má vestavěné nástroje pro optimalizaci obrázků, které poskytují různé metody náhled rychlý a efektivní proces optimalizace. Náhled poskytuje poměrně přesnou představu o tom, jak bude optimalizovaný obrázek vypadat v reálném čase, což pomáhá vyhodnotit výsledek optimalizace a vybrat ten správný požadovaná nastavení. A můžete optimalizovat jak obrázky vytvořené přímo v Illustratoru, tak další, jako jsou fotografie, které chcete umístit na web.
V okně se nastavují parametry optimalizace Uložit pro web (Save for Web), vyvolané stejnojmenným příkazem z nabídky soubor(Soubor). Program nabízí použití jednoho ze čtyř režimů náhledu, ale pro hodnocení kvality optimalizace jsou nejlepší dva:
- 2-Up(dvě možnosti) současné prohlížení originálu a optimalizovaného obrazu v souladu se zadaným nastavením (obr. 1);
- 4-nahoru(čtyři možnosti) v tomto režimu je zobrazovací plocha rozdělena do čtyř oken (obr. 2), která se mají zobrazit původní obrázek a tři optimalizované verze: první verze je generována na základě nastavených hodnot optimalizace a další dvě jsou variantami aktuálního nastavení optimalizace.
Oba režimy vám umožňují výrazně ušetřit čas při hledání nejlepší možnosti optimalizace, protože eliminují potřebu ukládat obrázky různá nastavení optimalizace a jejich následné vizuální porovnání. Navíc je možné hodnotit nejen kvalitu optimalizovaného obrazu, ale také jeho velikost a dobu stahování pro různé možnosti připojení. Pro srovnání je nejpohodlnější režim 4-Up (čtyři možnosti), který umožňuje vizuálně vyhodnotit vliv komprese nebo zmenšení palety na kvalitu a velikost snímku a nakonec určit nejlepší parametry optimalizace.
Illustrator vám umožňuje optimalizovat webovou grafiku nejen ve formátech GIF, JPG, PNG-8 a PNG-24, ale také ve formátech SWF a SVG. Indexované obrázky, které mají malý počet barev, jsou uloženy ve formátu GIF. Chcete-li uložit plnobarevné obrázky a obrázky ve stupních šedi, použijte fotografie a barevnou grafiku, jako jsou přechodové výplně formát JPG. Pro plnobarevné obrázky s průhlednými oblastmi použijte formát PNG, který umožňuje ukládat indexované i plnobarevné obrázky, přičemž v PNG-8 je maximální možný počet barev optimalizovaného obrázku 256 a v PNG-24 může mít obrázek miliony barev, a proto vypadá jako formátu jpeg. Rozdíl mezi PNG-24 a JPEG spočívá v tom, že metoda komprese použitá k optimalizaci obrázků PNG-24 nevede ke ztrátě kvality, ale zvyšuje velikost souboru. Formáty SVG a SWF kombinují grafiku, text a interaktivní komponenty a lze je také optimalizovat.
Zvážit konkrétní příklad optimalizace obrazu. Řekněme, že v programu Illustrator byl vyvinut znak webu (obr. 3), původně uložený ve formátu AI. Pokus o okamžitou optimalizaci pro web nepovede k ničemu dobrému, protože v tomto případě bude obrázek automaticky oříznut, což nebude brát v úvahu skutečnou polohu nápisu získaného v důsledku deformace (obr. 4 a 5).
Zkusme proto pomocí příkazu exportovat emblém do formátu PSD Soubor=>Exportovat(Soubor=>Exportovat) Velikost vygenerovaného obrázku bude 143 KB. Otevřete výsledný soubor PSD a použijte příkaz Soubor=>Uložit pro web(Soubor=>Uložit pro web). Vzhledem k omezenému počtu barev zapojených do obrázku je v tomto případě optimální formát GIF, s jehož konkrétním nastavením se musíte rozhodnout. Experimentováním s nastavením to můžete vidět nejlepší kvalita poskytuje výchozí kompresní algoritmus programu selektivní(Selektivní). Pokud jde o vyhlazování, pak je vzhledem k přítomnosti přechodové výplně lepší zvolit algoritmus s generováním šumu hluk(obr. 6). Velikost výsledného optimalizačního souboru bude 6,729 KB (obr. 7), přičemž průhlednost pozadí zůstane zachována, což lze snadno ověřit uložením obrázku GIF spolu s HTML souborem (obr. 8). V důsledku toho v tento příklad soubory emblem.html a emblem.gif byly získány ve složce Primer1 .
Tlačítka
Nepostradatelným specifickým designovým prvkem každé webové stránky jsou grafická ovládací tlačítka. Bez nich si stránku prostě nelze představit. Kreslení tlačítek se dnes stalo zvláštním žánrem a Illustrator vám umožňuje vytvářet ty nejsložitější možnosti. Například tlačítka navržená jako objekty mřížky a (nebo) s maskami vypadají mnohem efektivněji než obvykle.
Zvažte možnost vytvoření kulatého vyvýšeného tlačítka v Illustratoru. Nakreslete vektorový objekt vyplněný libovolnou barvou ve tvaru kruhu (obr. 9) a převeďte jej na mřížku pomocí příkazu Object=>Vytvořit mřížku přechodů(Object=>Create Gradient Mesh) zadáním čtyř řádků a čtyř sloupců a v seznamu Vzhled(Zobrazit) výběrem možnosti Do centra zvýraznit(Podsvícení) na 60 (obrázek 10). Vyberte nástroj Přímý výběr a klikněte vlevo horním rohu objekt se zvýrazněním tam umístěných uzlových bodů (obr. 11). Změňte barvu odpovídající buňky na bílou jejím výběrem v paletě Vzorníky(obr. 12).
Vezměte si nástroj Elipsa(Elipsa), nastavte značku myši na střed dříve vytvořeného kruhu a při stisknutých klávesách alt A Posun, natáhněte nový kruh na starý kruh tak, aby byl větší než starý o 1-2 pixely na všech stranách. Udělejte z toho černý okraj Mrtvice) 1–2 px na šířku a vyplňte ji radiálním přechodem od červené k bílé (obrázek 13). Přetáhněte vytvořený vektorový objekt o 1-2 pixely doprava a dolů, poté na něj bez odstranění výběru klikněte pravým tlačítkem a vyberte příkaz z kontextové nabídky Uspořádat => Odeslat zpět(Uspořádat=>Odeslat zpět). V důsledku toho získáme polotovar pro tlačítko zobrazené na obr. 14.
Na každé webové stránce je zpravidla několik tlačítek stejného typu, lišících se například pouze směrem nakreslených šipek, které označují směr pohybu po webu. Zvažte nejjednodušší případ dvou tlačítek, z nichž jedno se šipkou dolů znamená přechod na další stránku a tlačítko se šipkou nahoru na předchozí. Jako zářez pro šipku si vezměme pravidelný trojúhelník nakreslený nástrojem Polygon(Polygon) vyplněný černou barvou a také stylizovaný jako síťovaný objekt pro větší efekt. Přesuňte šipku na tlačítko a upravte polohu všech objektů vůči sobě pomocí příslušných tlačítek na paletě Zarovnat(Zarovnání). První z přijatých tlačítek je znázorněno na Obr. 15. Vytvořte kopii vrstvy pomocí tlačítka výběrem příkazu Duplikovat vrstvu Vrstvy v důsledku toho získáme dvě stejné vrstvy. Poté vyberte šipku na kopii vrstvy a otočte ji o 180° výběrem příkazu z kontextové nabídky Transformovat=>Otočit Transformace=>Otočit. Získáme stejné tlačítko jako na obr. 16. Upozorňujeme, že je mnohem pohodlnější uložit všechna tlačítka stejného typu jednoho projektu do jednoho souboru na různých vrstvách, což je ukázáno v tomto případě.
Nyní je třeba uložit optimalizované možnosti pro každé z tlačítek. Nejprve udělejte neviditelnou spodní vrstvu, v tomto případě zůstane tlačítko na horní vrstvě zachováno. Vyberte si tým Soubor=>Uložit pro web(Soubor=>Uložit pro web), nakonfigurujte parametry optimalizace tlačítka, například jak je znázorněno na obr. 17, klikněte na tlačítko Uložit(Uložit) a zadejte název souboru. Tlačítko uložené jako výsledek je znázorněno na Obr. 18. Nyní zviditelněte spodní vrstvu, zneviditelněte horní vrstvu a stejným způsobem uložte druhé tlačítko s jiným názvem. Výsledek je znázorněn na Obr. 19.
Nyní zbývá pouze zajistit, aby tlačítka na webové stránce vypadala dobře a umístit je na vlastní stránku (obrázek 20). Výsledkem je, že v tomto příkladu byl soubor Primer2.html a dva grafické obrázky získány ve složce obrázků (složka Základní nátěr2).
Pokud je to žádoucí, během procesu optimalizace lze tlačítko snadno změnit na plátek. V tomto případě po zvolení příkazu Soubor=>Uložit pro web(Soubor => Uložit pro web) a nastavení optimalizace byste měli vybrat z nástroje palety nástrojů Slice Select(Výběr řezu) a dvakrát klikněte na obrázek, který se automaticky změní na řez s sériové číslo 1 (obr. 21). Opakované dvojklik myš otevře okno Možnosti řezu(Možnosti řezu), ve kterém budete muset zadat odkaz a v případě potřeby změnit název řezu (obr. 22) a poté uložit optimalizovaný obrázek. Výsledkem v tomto případě budou soubory Primer3.html (obr. 23) a Primer3.gif (složka Primer3).
Interaktivní prvky
Jedním ze způsobů, jak okořenit stránku, je představit designové prvky, které ji změní vzhled(nebo stavu) v závislosti na chování myši nebo vzácněji v případě jakýchkoli jiných situací: zoomování, rolování, načítání, chyby atd.
Mezi těmito prvky jsou nejznámější rollovery (z anglického roll over to roll, roll over) prvky, které mění svůj vzhled pod vlivem myši. Animovaná tlačítka jsou příklady typických rolloverů. Rollovery se často používají při vytváření dalších prvků navigace webu. Ve skutečnosti žádný rollover není jeden, ale několik (až čtyři) obrázky, z nichž každý odpovídá určité události. Za hlavní události jsou považovány následující: Normální normální stav, Přes najetí kurzorem myši na prvek a stisknutí levého tlačítka myši při najetí na prvek. Teoreticky se mohou zapojit události jako Click uvolnění levého tlačítka myši po kliknutí, Up po uvolnění tlačítka, Out při opuštění aktivní zóny. V praxi se však častěji omezuje na změnu prvku pouze pro první tři nebo dokonce dvě události.
Klasické rollovery
Rollover je v klasickém pojetí série grafických obrázků ve formátu GIF a jim odpovídající HTML kód, díky kterému v závislosti na chování myši jeden obrázek v okně prohlížeče nahrazuje jiný.
Illustrator není navržen tak, aby přímo vytvářel rollovery v klasickém slova smyslu, ale může pomoci s vývojem počátečních prvků pro ně. Cílem v tomto případě je vytvořit vrstvu s obrázkem odpovídajícím první události. Poté vytvořte kopii vrstvy a transformujte obrázek tak, aby odpovídal druhé události a tak dále. Výsledný vrstvený obrázek se exportuje do PSD souboru se zachovanými vrstvami, na základě kterého se vytvoří rollover v Obrazový program Připraven. Výhodou použití Illustratoru, stejně jako v mnoha jiných případech, je řada jeho zajímavých funkcí, které nejsou dostupné v jiných softwarových nástrojích, v kombinaci s pohodlím transformace vektorové grafiky.
Zkusme vytvořit rollover v podobě nápisu, který mění barvu v závislosti na chování myši. Otevřete Illustrator a vytvořte tvar v podobě zaobleného a vyplněného černým obdélníkem (obr. 24), vytvořte jeho kopii a umístěte do volné části obrazovky. Převeďte první kopii obdélníku na objekt mřížky se zvýrazněním uprostřed (příkaz Object=>Vytvořit mřížku přechodů Object=>Create Gradient Mesh), specifikující čtyři řádky a deset sloupců (obr. 25). Aktivujte druhou kopii obdélníku a nastavte pro ni přechodovou výplň podobnou té, která je znázorněna na obr. 26. Překryjte objekt s přechodem přes síť, snižte neprůhlednost objektu s přechodem na přibližně 80 % a velikost objektu s přechodem na přibližně 1 pixel, abyste nakonec simulovali efekt vyboulení. A pak přes předměty vytiskněte nápis. V původní podobě nechť má bílou barvu, která bude odpovídat stavu Normální (obr. 27), a pak při změně stavu rolloveru se barva nápisu změní např. na zelenou, když je značka myši najel nad ním (stav Over) a zmodral při stisku tlačítka myši (stav Dolů).
Věnujte pozornost paletě Vrstvy v této fázi má pouze jednu jedinou vrstvu. Pomocí příkazu vytvořte dvě kopie této vrstvy Duplikovat vrstvu(Duplikovat vrstvu) z nabídky palety Vrstvy, v paletě budou tři vrstvy (obr. 28). Poté v první kopii vrstvy změňte barvu nápisu na zelenou a ve druhé na modrou (obr. 29). V důsledku toho bude získán potřebný polotovar pro převrácení.
Pomocí příkazu exportujte vytvořený obrázek do formátu PSD se zachovanými vrstvami Soubor=>Exportovat(Soubor=>Exportovat) a výběr barevného modelu RGB (obr. 30). Otevřete vytvořený soubor PSD v ImageReady (obrázky 31 a 32). Vytvořte snímky založené na vrstvách výběrem příkazu Vytvářejte snímky z vrstev(Vytvořit snímky z vrstev) z nabídky palety animace. Okno Animace bude vypadat jako na obr. 33. Zároveň v paletě Převrácení Zpočátku bude vytvořen jeden normální stav.
Pak v okně animace vyberte v paletě rámeček odpovídající stavu, ve kterém se nacházíte Vrstvy vrstva se vybere automaticky Kopie vrstvy 1(obr. 34). Přejděte na paletu Převrácení a klikněte na tlačítko Vytvořit stav převrácení(Vytvořit stav převrácení) Obr. 35, což způsobí zobrazení stavu Přes stát v paletě Převrácení(obr. 36). Stejným způsobem vytvořte stát Down State. Aktivujte stav Normální v paletě Převrácení a smazat v paletě animace všechny snímky kromě toho, který by měl odpovídat stavu Normální. V důsledku toho pro každý stav rolloveru v paletě animace bude pouze jeden rám (obr. 37, 38 a 39).
Rýže. 38. Pohled na obrázek, okno Animace a palety Vrstvy a Rollovery pro Stav překrytí
Výsledek zkontrolujte kliknutím na tlačítko Náhled ve výchozím prohlížeči(Náhled prohlížeče) na panelu nástrojů a přechodem do okna prohlížeče (Obrázek 40). Poté soubor uložte pomocí příkazu Soubor=>Uložit optimalizované(Soubor=>Uložit s optimalizací) a zadáním volby HTML a obrázky (*.html). Výsledkem je, že v tomto příkladu byl získán soubor Primer4.html a série grafických obrázků ve složce images.
Rýže. 40. Okno prohlížeče s prvkem Rollover
Převrácení SVG
Získání popularity formát SVG(Scalable Vector Graphics škálovatelná vektorová grafika), vytvořená na základě standardu XML, také umožňuje získat různé interaktivní prvky, zejména rollovery, jen v praxi je to implementováno zcela jiným způsobem. Za zmínku stojí, že vytváření interaktivních rolloverů SVG, na rozdíl od klasických, kdy je odpovídající HTML kód generován zcela automaticky, vyžaduje znalosti jazyk JavaScript a pochopení základních principů objektově orientovaného programování.
Pro práci s objekty SVG je navržena speciální paleta. Interaktivita SVG, který lze snadno otevřít pomocí příkazu Okno=>Interaktivita SVG(Okno=>interaktivita SVG) Obr. 41.
Zvážit tato možnost vytvoření rolloveru na příkladu interaktivního tlačítka, jehož barva štítku se změní z černé na modrou, když na něj najedete myší, a vrátí se zpět na černou, když myš opustí aktivní oblast.
Vytvořte obdélníkové tlačítko se zaoblenými hranami a vyberte pro něj vhodnou přechodovou výplň, například jak je znázorněno na obr. 42. Upravte průhlednost tlačítka v paletě Průhlednost(Transparentnost) v tomto příkladu hodnota parametru Neprůhlednost(Neprůhlednost) je nastavena na 50 %. Vytvořte kopii tlačítka, vyplňte jej tmavě zelenou barvou (obr. 43) a poté jej příkazem převeďte na síťový objekt Object=>Vytvořit mřížku přechodů(Object=>Create Gradient Mesh) zadáním čtyř řádků a deseti sloupců a v seznamu Vzhled(Zobrazit) výběrem možnosti Do centra(Směrem do středu) a nastavení hodnoty zvýraznit(Zvýraznit) na 100. Snižte krytí vrstvy síťových objektů na přibližně 40 % (obrázek 44). Umístěte objekt mřížky na objekt s přechodem a tlačítko bude vypadat jako na obr. 45.
Rýže. 44. Přeměna kopie tlačítka na objekt mřížky
Doplňte tlačítko zamýšleným nápisem a upravte jeho polohu pomocí odpovídajících tlačítek na paletě Zarovnat(Zarovnání). Výsledný obrázek bude obsahovat jednu vrstvu se třemi objekty překrývajícími se na sobě (obr. 46). Naplánované události budou odkazovat na textový objekt, takže pro usnadnění změňte jeho název na Text dvojitým kliknutím na objekt a zadáním nového názvu. Podobně změňte název vrstvy z Vrstva 1 do vrstvy(obr. 47).
Zpracování událostí zahrnuje použití procedur JavaScriptu, takže musíte zahrnout soubor s popisem těchto procedur. Jmenuje se Events.js a uloží se na disk do složky Sample Files\Sample Art\SVG\SVG, když je nainstalován Adobe Illustrator. Chcete-li zahrnout soubor Events.js, použijte příkaz Soubory JavaScript Interaktivita SVG(obr. 48). Dále musíte stisknout tlačítko Přidat(přidat) a najít požadovaný soubor na pevném disku. Když se v poli objeví jeho jméno URL(obr. 49), klikněte na tlačítko Hotovo(Jít ven).
Rýže. 48. Výběr příkazu Soubory JavaScriptu
Poté byste měli definovat reakci na události myši pro objekt Text. V poli vyberte objekt Text událost(událostní) palety Interaktivita SVG vyberte událost onmouseover elemColor(evt, "Text", "#3333FF") to bude znamenat, že když je myš nad objektem Text jeho barva se změní na modrou (obr. 50). Aby se barva textu po opuštění aktivní zóny změnila na černou, musíte vytvořit ještě jednu událost onmouseout vyberte jej v poli událost(událostní) palety Interaktivita SVG. Poté do akčního řádku zadejte text elemColor(evt, "Text", "#000000") tím se vrátí černá (obr. 51).
Rýže. 51. Konečný vzhled palety SVG Interaktivita pro objekt Text
Uložte vygenerovaný rollover jako soubor SVG pomocí příkazu Soubor=>Uložit jako(Soubor=> Typ souboru formát SVG a poté nastavením možností pro uložení souboru SVG, jak je znázorněno na obr. 52. Po uložení bude získán pouze jeden jediný soubor s příponou SVG a nikoli dva, jako v případě klasického rolloveru, v tomto případě byl získán soubor Primer5.svg (složka Primer5). Aby však rollover skutečně fungoval, musíte dodatečně zkopírovat soubor Events.js s popisem procedur JavaScriptu do složky se souborem SVG. Poté můžete zkontrolovat výkon převrácení a výsledek bude vypadat jako na obr. 53.
SVG animace
Formát SVG lze také použít k přenosu animace. Zkusme si vytvořit jednoduchý animační prvek (v tomto případě se bude jednat o informace o firmě), který se na obrazovce objeví po najetí myší na příslušný grafický objekt a zmizí po sejmutí myši z interaktivního prvku.
Vytvořme přibližně takovou řadu grafických a textových objektů, jak je znázorněno na Obr. 54. Přejmenujte všechny vytvořené objekty pohodlným způsobem postupným kliknutím na název dalšího objektu v paletě Vrstvy a zadáním požadovaného názvu (obr. 55). Všimněte si, že zvýrazněno na Obr. 56 položek Text1, Text2, Text3 A Cesta1 budou vždy viditelné a všechny ostatní pouze tehdy, když najedete na objekt Text1.
Rýže. 54. Původní pohled na obrázek
Pomocí příkazu zahrňte soubor Events.js s popisem procedur JavaScriptu Soubory JavaScript(soubory JavaScript) z palety Interaktivita SVG stisknutím tlačítka Přidat(Přidat) výběrem požadovaného souboru na pevném disku a kliknutím na tlačítko Hotovo(Jít ven).
Definujte odezvu události myši pro objekt Text1. Vyberte objekt Text, v terénu událost(událostní) palety Interaktivita SVG vyberte událost onmouseover a do řádku níže zadejte text elemShow(evt, "Text4"); elemShow(evt, "Cesta2"). V důsledku toho, když je myš nad objektem Text1 objekty budou viditelné Text4 A Cesta2. Vezměte prosím na vědomí, že pokud je třeba provést několik akcí, když dojde k události, musí být specifikovány pomocí znaku „;“. Poté udělejte totéž pro událost onmouseout, zadejte k němu text, který bude znamenat skrytí objektů (obr. 57).
Uložte výsledek jako soubor SVG pomocí příkazu Soubor=>Uložit jako(File=>Save as), zadáním názvu souboru, výběrem v poli Typ souboru formát SVG a poté nastavení možností pro uložení souboru SVG podle obr. 58. Po uložení bude získán soubor Primer6.svg (složka Primer6). Nezapomeňte zkopírovat soubor Events.js do složky s tímto souborem. Pokud po tom spustíte coz daný soubor, výsledek uvidíte na obr. 59. To je téměř to, co potřebujete. Jediné, co nebylo v našich plánech zahrnuto, byl prvotní vzhled objektů Text 4 a Cesta 2 při načítání. Chcete-li se tohoto nedostatku zbavit, vyberte oba tyto objekty najednou a vytvořte pro ně akci elemHide(evt, "Text4"); elemHide(evt, "Cesta2") na akci načíst(obr. 60). Uložte soubor znovu a ujistěte se, že objekty jsou nyní Text4 A Cesta2 viditelné pouze při najetí myší na objekt Text1.
GIF animace
Jakákoli webová stránka je nemyslitelná bez webové animace, včetně animovaných gifů. Jednou z možností, jak je vytvořit, je použití aplikace Adobe ImageReady, která mimo jiné umožňuje vytvářet animace z vrstev. V tomto případě lze připravit samotný vícevrstvý obraz různé aplikace, včetně aplikace Adobe Illustrator.
Je velmi snadné vytvořit animaci založenou na prvcích z palety Symboly(Symboly) otevřené příkazem Okno=>Symboly(Window=>Symbols) nebo z jedné z knihoven symbolů, které lze otevřít pomocí příkazu Window=>Knihovny symbolů(Okno=>Knihovny symbolů).
Zkusme například zvětšit velikost libovolného objektu-symbolu, klíčové fáze procesu zvětšování objektu musí být nastaveny na samostatných vrstvách. Nejprve jednoduše umístěte objekty symbolů jeden nad druhý a poté zvětšete velikost každého následujícího objektu, například, jak je znázorněno na Obr. 61. V důsledku toho v paletě Vrstvy vznikne jedna vrstva s mnoha objekty (obr. 62). Pokud tento obrázek exportujete přímo do formátu PSD, nebude to fungovat, protože existuje pouze jedna vrstva a přirozeně, když otevřete soubor PSD v ImageReady, bude zde také pouze jedna vrstva. Proto musíte nejprve umístit objekty do různých vrstev. To se dá udělat různé způsoby nejjednodušší způsob je nejprve vybrat vrstvu Vrstva 1 v paletě Vrstvy a použijte příkaz Uvolněte do vrstvy(Uvolnění ve vrstvách). Výsledkem bude přesun každého z objektů do vlastní vrstvy, ale všechny budou vnořeny do vrstvy Vrstva 1. Proto budete muset ručně přetáhnout všechny vnořené vrstvy do horní části palety Vrstvy tak, aby byly nad vrstvou Vrstva 1 a pak prázdnou vrstvu Vrstva 1 snadno odstranitelné (obr. 63). Exportujte obrázek do formátu PSD pomocí příkazu Soubor=>Exportovat(Soubor=>Exportovat) s nastavením jako na obr. 64.
Vytvořený soubor PSD načtěte v programu ImageReady (obr. 65 a 66). Otevřete nabídku palety animaceVytvářejte snímky z vrstev(Vytvářejte snímky z vrstev). V důsledku toho bude vytvořeno pět snímků, z nichž každý bude odpovídat své vrstvě a oknu palety animace bude vypadat jako na obr. 67.
Poté nastavte dobu trvání každého z vytvořených snímků, v tomto případě doba trvání všech snímků je nastavena na 0,2 s. A poté uložte optimalizovanou animaci příkazem Soubor=>Uložit optimalizované(Soubor=>Uložit s optimalizací). Získaný výsledek může připomínat Obr. 68.
Ještě pohodlnější je používání funkcí Živé směsi Software Illustrator. Toto kombinované použití Illustratoru a ImageReady výrazně urychluje proces vytváření animací GIF.
Nakreslete například dva libovolné různobarevné objekty a poté je promíchejte s příslušnými parametry (obr. 69). Tento soubor nelze přímo použít k vytvoření animace, protože obrázek je umístěn v jedné vrstvě (obr. 70). Proto budete muset nejprve umístit každý prvek prolnutého objektu do samostatné vrstvy. Chcete-li to provést, v okně Vrstvy zvýrazněte čáru
Rýže. 70. Počáteční stav okna Vrstvy
Exportujte vytvořený soubor do formátu PSD pomocí příkazu Soubor=>Exportovat(Soubor=>Exportovat). Vytvořený soubor PSD otevřete v ImageReady (obr. 73). Upozorňujeme, že všechny vrstvy vytvořené v programu Illustrator se objeví v okně vrstev (obr. 74) a v okně animace bude pouze jeden rám.
Aktivujte nabídku palety animace, kliknutím na černou šipku v pravém horním rohu palety a zvolte příkaz Vytvářejte snímky z vrstev(Vytvořte snímky z vrstev) nakonec se v tomto příkladu vytvoří pět snímků a okno palety animace bude mít podobu podle obr. 75. Podržením klávesy vyberte všechny snímky Posun a nastavte vhodnou dobu trvání snímku, v tomto příkladu se pro každý snímek použije stejný čas 0,2 s. Poté soubor uložte příkazem optimalizace Soubor=>Uložit optimalizované(Soubor=>Uložit s optimalizací) nastavení v seznamu Typ souboru volba Pouze obrázky (*.gif). Animace bude připomínat Obr. 76.
Mnohem zajímavější není pohyb, ale plynulá změna velikosti prolnutých objektů. Můžete například použít již vytvořený přechod prolnutí. V tomto případě po vytvoření samostatných vrstev pro každý prvek přechodu prolnutí umístěte všechny objekty na sebe pomocí tlačítek Horizontální zarovnání na střed(Zarovnání vzhledem k vodorovnému středu) a Vertikální zarovnání na střed(Svislé zarovnání na střed) palety Zarovnat(obr. 77).
Exportujte vytvořený soubor do formátu PSD ( Soubor=>Exportovat Soubor=>Exportovat) a vytvořený PSD soubor otevřete v programu ImageReady (obr. 78). Vytvářejte snímky animace založené na vrstvách ( Vytvářejte snímky z vrstev Vytvořte snímky z vrstev) a zvolte pro ně vhodnou dobu trvání (obr. 79). A pak, aby byla animace efektivnější, zkopírujte stávající snímky, ale v opačném pořadí, aby se obraz nejprve zvětšoval a pak zmenšoval a tak dále v kruhu (obr. 80). Poté uložte soubor optimalizace ( Soubor=>Uložit optimalizované Soubor=>Uložit s optimalizací). Výsledná animace je znázorněna na Obr. 81.
Rýže. 80. Stav okna Animace po duplikování snímků
Rýže. 81. Hotová animace
Ahoj všichni! Dnes se pokusím udělat popis funkcí programu Adobe Illustrator, porovnáním se schopnostmi splachování. Toto nebude globální analýza programu kostí, ale spíše popis některých zajímavých čipů, které jsem v tomto programu objevil. Sbíral jsem informace kousek po kousku, jak jsem je studoval, abych je dal všechny do jednoho příspěvku. Hned se musím přiznat, že nejsem žádný superzkušený ilustrátor, jen poslední půlrok ho používám při kreslení (předtím jsem vše kreslil flash). Mnozí si stěžují, že ilustrátor je složitý, ne vždy intuitivní. Do jisté míry souhlasím s tím, že po flashi je tento program obtížný. Tady ale nejde hlavně o to skončit, ale pokračovat ve studiu. A po pár týdnech vyvstává myšlenka, jak jsem to bez něj mohl předtím!
Takže to, co se mi na ilustrátoru líbilo a co jsem pro sebe našel, není ve flashi.
1. Začnu tím nejjednodušším, ale zároveň nezbytným. Zkuste bleskově uspořádat objekty do kruhu. Dříve bylo Deco nástroj, ale byl odstraněn, zřejmě považován za nepotřebný. Rozhodli jsme se, že bude zábavnější to udělat ručně. Illustrator má tuto funkci: Efekt – Deformovat&Transformovat – Transformovat.
Vše je rychlé a jednoduché, hodnoty (vzdálenost mezi objekty, počet kopií) si nastavujeme sami v nastavení.
2. Cik-cak
Ještě jednodušší, ale přesto užitečná věc. Zdálo by se to jako maličkost, ale ve flashi musíte kreslit ručně, v illustratoru je to otázka vteřiny.
3. Deformace objektů (Warp)
Ve Flashi nic takového není. V příkladu níže jsem ukázal pouze 2 způsoby deformace jednoduchých tvarů (Efekt - Warp - Arc / Fish). Ve skutečnosti je jich 15. Nejnovější verze programy.
4. Automatické zaoblení rohů (Round Corners)
Lze to provést ručně: na grafickém objektu se při výběru v rohu (ve všech rozích) objeví bílý bod a znak zaoblené čáry. Táhněte myší, upravte podle svého vkusu.
Ale to platí jen pro tvary, s linkou tužkou trochu jinak - aplikujte efekt zaoblení ( Efekt - Stylizace - Zaoblené rohy). Na výstupu dostaneme stejný výsledek.
5. Zdrsnit
Efekt se aplikuje na jednoduché tvary ( Effect-Distor&Transform-Roughen). Výsledkem je něco, co připomíná low-poly 3D modely. Myslím, že je to cool :) A hlavně - velmi jednoduché.
6 Pucker&Bloat(Zatáhněte a nafoukněte)
Příklad na obrázku níže:
7. Rozšíření formuláře (Offset Path)
Ve flashi je funkce Expand Fill (rozšíření výplně), ta na rozdíl od illustratoru vůbec nepracuje s linkami tužkou.
8. Štětce (Art Brush, Pattern Brush, Scatter Brush)
Příklady viz obrázek níže:
9. Štětec na textury (štětce na textury)
V illustratoru je také mnoho texturových štětců, o kterých jsem psal a jak se objevily v nové verzi flash - . Bylo zjištěno, že použití štětců v Adobe Animate je strašně pomalé. A je to:(
10. Nejsem si jistý, jestli je to trik, ale chci se zaměřit na štětec s vtipným názvem kapkaŠtětec. Nachází se na panelu nástrojů, velmi pěkný štětec k použití. Má spoustu nastavení, líbí se mi to víc než obvykle. Je těžké vysvětlit jeho výhody slovy, je lepší to jednou vyzkoušet.
10. Rozdělit na mřížku
Další užitečnou funkcí je funkce Split to Grid (Object-Path-Split to Grid), která umožňuje rozřezat formulář na stejné segmenty. Co nám to připomíná? Je to tak - okna ve výškové budově. Pokud jde o mě, super věc na kreslení například městské krajiny;)
Další užitečný nástroj, prezentované v illustratoru, pravděpodobně od svého prvního vydání. S ním můžete vytvářet například textury dřeva:
12. Přesunout (vpravo - Transformace - Přesunout)
Odsadit objekt o danou vzdálenost. V případě potřeby můžete okamžitě vytvořit kopii, která bude umístěna v požadované vzdálenosti od vybraného objektu vodorovně / nebo svisle. Starší verze flash měla plugin, který to dělal tuto funkci. Bohužel si nepamatuji jeho název.
Je velmi výhodné vytvářet bezešvé vzory v illustratoru ( Object-Pattern-Make). Pamatuji si, jak jsem zběsile exceloval ve flashi s tvorbou . V ilustrátorské verzi CC 2015 je vše zautomatizováno, hromada nastavení vám pomůže vytvořit vzor v desítkách variací, jen s pár grafickými prvky po ruce. V dřívějších verzích programu se muselo vše dělat ručně, jako dosud ve flashi.
(Poznámka – ze vzoru lze vytvořit vektorový upravitelný objekt pomocí funkce parse ( Vzhled rozbalení objektu).
14. Objektová mozaika (Mosaic)
Vytvořte paletu barev na základě existujícího obrázku. Importujte obrázek, který se vám líbí, do ilustrace (Otevřít). Objekt – Vytvořte mozaiku objektů. V nastavení určíme frekvenci dělení na výšku a šířku.
A na výstupu dostaneme:
15. Směs (Míchání)
Používá se k vytváření přechodů. Můžete vytvářet přechody krok za krokem, jako například na obrázku. Nemůžu říct, že bych ho používal často, ale někomu se může hodit. Zdá se mi, že se dá použít při vytváření jednoduchých obrázků na pozadí.
Nástroj lze také použít ke klonování objektů. Umístíme dva objekty ve vzdálenosti od sebe a aplikujeme Možnosti prolnutí, vybereme počet kroků (počet klonovaných objektů).
16. Nástroj Build Shape Tool. Velmi šikovná věc pro práci s primitivy. Bleskově, jak se mi zdálo, je to méně pohodlné.
Podržením Alt a kliknutím na vybrané segmenty - segmenty smažte. Pokud jednoduše táhneme myší přes několik vybraných oblastí - spojů.
Addition - nástroj, který pomáhá automaticky řezat, spojovat atp. vybrané formuláře. Pokud jde o mě, není to příliš pohodlné, používám to častěji Stavěttvarnástroj.
(kreslicí plátna)
18. Vlastní panel nástrojů
Možnost vytvořit si vlastní panel nástrojů, vyřadit nepotřebné a vybrat pouze ty, které používáte.
Ve flash, umělecká plátna, jmenovitě scény ( Scéna 1,2,3..) jsou umístěny samostatně a je třeba mezi nimi přepínat (Shift + F2). V Ilustrátoru je lze všechny umístit před vašima očima. Je vhodné, když vytváříte několik verzí stejného výkresu, takže všechny možnosti máte před očima pro porovnání.
19. Izometrické s grafickými styly
A poslední věcí je vytvoření izometrie bez použití 1 kliknutí (nebo spíše 3 kliknutí, protože máme 3 strany;) pomocí grafických stylů ( Grafické styly). Jak se to dělá, napíšu příště.
Ilustrátor má s flashem společné je možnost uložit objekt do symbolu (symbolu) a tento symbol lze bez problémů přenést i do flashe (otevřít .ai soubor ve flashi, např. Import – Import do fáze).
Symbol v illustratoru má stejné vlastnosti jako ve flashi.
A nakonec napíšu, co je v Ilustrátoru podle mého názoru horší než flash. Ano, ano a existuje. A toto je nástroj pro vyplnění ( plechovka barvy). Bez ohledu na to, jak moc se snažím na to zvyknout v illa, je to pohodlnější ve flashi.
Pokud se vám mé poznámky staly užitečnými nebo chcete-li něco přidat sami - vítejte v komentářích! Hodně štěstí všem;)
Máte jednu nebo dvě ikony, které byste rádi oživili animací. kde byste začali? Řekněme, že máte soubory SVG, Illustrator CC a After Effects CC, ale řešení vám uniká.
V tomto článku vám ukážu, jak snadno animovat soubor SVG, včetně přípravy souboru SVG v Illustratoru a jeho importu do After Effects CC. Vysvětlím také, jak jej můžete převést na vrstvy tvaru a přidat pohyb. A nakonec si povíme něco o exportu a vykreslování.
Konečný výsledek práce.
Nyní přejdeme k nejzajímavější části – naučte se animovat obrázky.
Příprava souboru SVG v Illustratoru
Začněme otevřením souboru SVG v aplikaci Adobe Illustrator CC. Budu animovat malou ikonu auta, která je k dispozici zdarma na Week Of Icons.
Po otevření souboru musíme všechny objekty rozdělit a rozdělit do vrstev. Můžete to udělat ručně nebo použít Uvolnění do vrstev (sekvence) pro urychlení procesu. Než soubor importujeme do After Effects, musíme jej uložit jako soubor ve formátu Illustratoru.
Objekty můžeme rozdělit pomocí Release to Layers (Sequence), abychom neztráceli drahocenný čas. Import a organizace souboru v After Effects CC
Nyní jste připraveni importovat do After Effects CC. Použijeme klávesovou zkratku Ctrl+I (Windows) nebo Příkaz + I (Mac) pro načtení dialogového okna importovat soubor nebo přejděte na Soubor > Import > Soubor… Na stejném místě vyberte soubor Illustrator CC, který jsme připravili, a klikněte import. Mělo by se objevit malé dialogové okno s názvem vybraného souboru. Vybrat složení z rozevíracího seznamu s názvem Druh dovozu.
Více rychlý způsob import souboru - poklepejte na místo sloupce na panelu projektu. V panelu časové osy uvidíme nové složení. Dvakrát na něj klikneme. Nyní bychom měli vidět vrstvy Illustratoru CC s oranžovými ikonami vlevo od jejich názvu.
Než se pustíme do práce, musíme všechny tyto vrstvy převést na tvarové vrstvy. Musíme je všechny vybrat Ctrl+A/Command+A nebo ručně pomocí Shift + levá myš. Poté klikněte pravým tlačítkem na vrstvu a vyberte Vytvořit > Vytvořit tvary z vektorové vrstvy.
Nyní, když jsou nové vrstvy vybrány, přetáhněte je do horní části panelu nad vrstvy Illustratoru CC a pak vrstvy Illustratoru CC odstraňte, aby nepřekážely.
Převod vrstev Illustratoru CC na vrstvy Shape v After Effects CC I když to není nutné, je důležité, abychom každé vrstvě dali vhodný název a/nebo barvu. To nám umožní pracovat efektivněji, když se zaměříme na klíčové snímky. V níže uvedeném příkladu barvy štítků víceméně odpovídají výplním příslušných vrstev.
Označování vrstev tvarů vhodnými názvy, barvami, štítky a pozicemi je velmi praktické. Ke konfiguraci nastavení použijte klávesovou zkratku Ctrl+K/Command+K nebo Kompozice > Nastavení kompozice… Z Nastavení kompozice musíme vybrat Šířku, Výška, Snímková frekvence a Trvání pro Šířku, Výška, Snímková frekvence a Trvání. Pro tento projekt jsem zvolil 60 fps, aby byla animace plynulá.
Na tento moment vše se zdá být připraveno, ale je tu ještě jedna věc, kterou je třeba udělat. Musíme seskupit určité vrstvy dohromady, aby jejich pohyby byly synchronizované s hlavní vrstvou, kterou můžeme ovládat. Tato metoda se nazývá rodičovství.
Pomocí Vybrat bič můžete přiřadit nadřazenou vrstvu více vrstvám. V našem příkladu jsem k primární vrstvě těla (rodičovské vrstvě) přiřadil méně významné vrstvy (dětské vrstvy), jako je čelní sklo, části těla, dřevo a lana. To mi umožnilo ovládat polohu a otáčení celého vozu (kromě kol) pomocí nadřazené vrstvy.
Tvorba animace
Chtěl jsem, aby auto narazilo na kámen a zůstalo chvíli viset ve vzduchu. Také jsem chtěl, aby se strom pohyboval nahoru a dolů a otevřel kmen. Začal jsem stavbou kamene, auta a kol. Pak nastal čas překonat největší překážku – umístit akci na strom. Jakmile to bylo hotovo, začal jsem pracovat na malých detailech, jako je stojan a lana.
Náčrt popisující animaci Prvním krokem bylo vytvoření skalního prvku nebo vrstvy, ale místo toho, abych se vrátil do aplikace Illustrator CC a přidal další vrstvu, použil jsem pouze nástroj Pen v After Effects CC. To mi umožnilo rychle navrhnout malý kámen.
Oh, mocný nástroj pero! Kufr byl poměrně jednoduchý úkol. Nainstaloval jsem ho na zadní část auta a udělal kotevní bod v levém dolním vrcholu. Pomocí Pick Whip jsem jej přiřadil k rodičovské vrstvě těla. Předposledním krokem bylo poskytnutí efektu rotace, který zase učinil odrazový moment vozu realističtějším Bodymovin v kombinaci s mobilní knihovnou Lottie.
P.S. můžete najít moje soubory Illustrator CC a After Effects CC.
Sada ikon je k dispozici ke stažení zdarma na adrese .
Dnes to nemáme úplně obvyklé Adobe tutoriál Ilustrátor. Protože tentokrát nebudeme dělat statický obrázek, ale skutečnou animaci. Představte si, ukázalo se, že s pomocí Adobe Illustratoru můžete také kreslit karikatury :)
A k tomu nic nepotřebujeme. Kompetentní organizace vrstev a export výsledné práce do formátu swf, kde je každá vrstva převedena na rámeček animace. V dnešním tutoriálu nakreslíme animaci odpočítávání ve stylu retro filmu. Výstupem by měl být flashový film se stejným odpočítáváním.
První věc, kterou musíte udělat, je nakreslit všechny potřebné prvky pro budoucí animaci. Za tímto účelem jsem vytvořil dvě pozice filmových políček v samostatném dokumentu, kruh pro referenci, který je rozřezán na samostatné sektory, texturu a vertikální škrábanec pro přidání efektu starověku, stejně jako všechna čísla a nápisy.
Když jsou všechny části naší karikatury připraveny, můžete začít vytvářet samotnou animaci. Pro usnadnění je nejlepší to provést v novém dokumentu. V tomto případě budou vrstvy hrát roli animačních snímků. A hned v první vrstvě stačí zkopírovat rámeček filmu. Umístěte jej doprostřed pracovní oblasti.
Nyní vytvořte druhou vrstvu a zkopírujte do ní filmové políčko, ve kterém jsou otvory na okrajích provedeny s posunem. Také je potřeba ho vycentrovat.
Z těchto dvou vrstev již můžete získat animaci pohyblivého filmu. Později ale budeme potřebovat mnohem více vrstev. Vyberte tedy první dvě vrstvy, přejděte do možností panelu a vytvořte kopii vrstev.
Podobným způsobem potřebujeme nashromáždit 12 vrstev s filmovými rámečky, které definují jeho pohyb.
Nyní máme spoustu vrstev a všechny jsou viditelné. V tom smyslu, že horní vrstvy blokují spodní, což není příliš vhodné pro práci. Některé vrstvy tedy můžete vypnout kliknutím na ikonu oka vlevo od názvu vrstvy. Chcete-li vypnout nebo zapnout všechny vrstvy najednou, podržte při kliknutí na ikonu oka klávesu Alt. Zapnutím a vypnutím vrstev můžete přesně vidět, co se nachází v určitém snímku naší budoucí animace. A nyní, abychom k pohybu filmu přidali mírný otřes, musíme přijaté snímky trochu posunout dovnitř různé strany. Chcete-li to provést, zapněte pouze vrstvu, se kterou budete v tuto chvíli pracovat, a poté posuňte snímek o několik pixelů libovolným směrem.
Když projdete všechny vrstvy a přidáte malý posun, můžete začít vytvářet animaci pohybujícího se kruhu. Chcete-li to provést, zkopírujte kruh sestávající ze sektorů z dokumentu kreslených dílů a umístěte jej na první vrstvu v horní části filmového políčka.
Pokud výběr z kruhu odstraníte, bude vypadat jako jeden celek. To je přesně to, co potřebujeme.
Ale protože se skládá z oddělených sektorů, je možné změnou jejich barvy vytvořit animaci velmi rychle a snadno. Chcete-li to provést, zkopírujte tento kruh do druhé vrstvy a zesvětlete první sektor. Pamatujete si, že se film při pohybu třese, takže není nutné dávat kruh přesně do středu rámečku. Umístěte jej na oko.
Podobně je potřeba zkopírovat kruh do každé další vrstvy, zatímco malujete světlejší barvou o jeden sektor více než minule. Dohromady těchto 12 vrstev tvoří animaci pohybu filmu s plnicím kruhem.
Dále musíme přidat texturu do našich vrstev. Zapněte první vrstvu a zkopírujte texturu ze zdrojového souboru s náhradními díly.
Poté postupně zapněte další vrstvy a zkopírujte tam stejnou texturu. Aby vypadal na každém snímku jinak, stačí jej otočit o 90 stupňů. Jak jste možná uhodli, musíme přidat texturu do všech 12 snímků.
Pokud vás už kopírování spíše nebaví, tak vás mohu potěšit - zbývá už velmi málo. Nejtěžší část je za námi. Zbývá přidat svislé škrábance a téměř vše. Chcete-li to provést, znovu zkopírujte původní škrábanec a vložte jej na libovolné místo v několika vrstvách. V mém případě se škrábance objevují už ve dvou vrstvách.
Nyní, když je hotový hlavní cyklus s filmovou animací, zbývá doplnit čísla. Protože počítáme od 3 do 1 plus slovo Go!!!, potřebujeme ještě více vrstev. Ne 12, ale až 48. K tomu je potřeba udělat další tři kopie hotových vrstev s filmovou animací.
A pak je vše jednoduché. Zapněte úplně první vrstvu a vložte tam číslo tři.
Poté musíte tento obrázek zkopírovat do dalších vrstev, dokud animace kruhu neskončí. Když se dostanete k další kopii vrstev, kde bude kruh opět zcela vyplněn, musíte zadat číslo dvě. Stejným způsobem zkopírujte jedničku do požadovaných vrstev. A když se dostanete k finálním vrstvám pro štítek Go!!!, jednoduše smažte kruh před zkopírováním štítku na požadovanou vrstvu.
To je vše s animací. Zde je hlavní nenechat se zmást. Vrstvám můžete dát nějaké příhodné názvy, ale byl jsem nějak moc líný :) A přesto, až budete hotovi, nezapomeňte všechny vrstvy znovu zapnout kliknutím na ikonu oka.
V okně nastavení exportu nezapomeňte nastavit Exportovat jako: Vrstvy AI na Rámce SWF. Je to tato možnost, která změní vrstvy Illustratoru na snímky animace. Dále klikněte na tlačítko Upřesnit.
Otevře další nastavení. Zde je potřeba nastavit Frame Rate. Mám 12 snímků za sekundu. Zaškrtávací políčko Looping je zodpovědné za cyklování animace. Díky ní se bude video přehrávat v kruhu. A volba Pořadí vrstev: Bottom Up vykreslí vrstvy ilustrátoru v panelu zdola nahoru. Přesně tak jsme postavili naši animaci.
Výsledkem je flashový film s naší animací.
Teď to vidíš jednoduchá animace dělat v Adobe Illustratoru není tak těžké, jak se na první pohled zdá.
Ale pro vytváření dlouhých videí nebo interaktivních aplikací je stále lepší použít Adobe Flash nebo jiné flash editory. Například tuto kočku jsem vyrobil ve starém Macromedia Flash které jsem vykopal v práci.
V poslední době se k vytváření animací stále častěji používají HTML5 a CSS3. Daný kód podporováno moderní prohlížeče a nevyžaduje použití flash přehrávače.
Roman aka dacascas hlavně pro blog
Přihlaste se k odběru našeho newsletteru, ať vám nic nového neunikne:
Formát Flash soubor(SWF) na základě vektorová grafika a je navržen pro škálovatelnou, kompaktní grafiku pro web. Vzhledem k tomu, že tento formát souboru je založen na vektorové grafice, objekt si zachovává kvalitu obrazu při jakémkoli rozlišení a je ideální pro vytváření snímků animace. V Illustratoru můžete vytvářet jednotlivé snímky animace ve vrstvách a poté exportovat vrstvy obrazu jako samostatné snímky pro použití na webu. Můžete také definovat symboly v souboru aplikace Illustrator, aby se zmenšila velikost animace. Při exportu je každý symbol definován v souboru SWF pouze jednou.
Export příkazu (SWF)
Poskytuje největší kontrolu nad animací a bitovou kompresí.
Poskytuje větší kontrolu nad kombinací formátů SWF a bitmap ve fragmentovaném rozvržení. Tento příkaz nabízí méně možností obrázku než příkaz Export (SWF), ale používá naposledy použité možnosti příkazu Export (viz ).
Při přípravě objektu k uložení jako SWF mějte na paměti následující pokyny.
Používáním Zařízení s aplikacemi Uprostřed můžete vidět, jak bude vypadat grafika Illustratoru v aplikaci Flash Player na různých ručních zařízeních.
Vložení grafiky Illustratoru
Umělecká díla vytvořená v Illustratoru lze rychle, snadno a snadno zkopírovat a vložit do nich Flash aplikace.
Když vložíte grafiku Illustratoru do aplikace Flash, zachovají se následující atributy.
Tloušťka tahu
Definice gradientů
Text (včetně písem OpenType)
Související obrázky
Režimy prolnutí
Obrysy a tvary
Illustrator a Flash navíc při vkládání grafiky podporují následující funkce.
Výběr celých vrstev nejvyšší úrovně v kresbě Illustratoru a jejich vložení do Flash zachová vrstvy a jejich vlastnosti (viditelnost a blokování).
Barevné formáty aplikace Illustrator jiné než RGB (CMYK, stupně šedi a vlastní formáty) jsou pomocí Flash převedeny na RGB formát. RGB barvy vložíte obvyklým způsobem.
Když importujete nebo vložíte kresbu Illustratoru, můžete použít různé volby k uložení určitých efektů (jako je stín vržený textem) jako filtry Flash.
Flash ukládá masky aplikace Illustrator.
Exportujte soubory SWF z aplikace Illustrator
Soubory SWF exportované z aplikace Illustrator mají stejnou kvalitu a kompresi jako soubory SWF exportované z Flash.
Při exportu si můžete vybrat z řady předdefinovaných stylů pro optimální výstup a určit, jak se používá více kreslicích pláten, jak se převádějí znaky, vrstvy, text a masky. Můžete se například rozhodnout exportovat symboly Illustratoru jako filmy nebo grafiku nebo vytvořit symboly SWF z vrstev Illustratoru.
Import souborů aplikace Illustrator do aplikace Flash
Chcete-li vytvořit kompletní rozvržení v Illustratoru a poté jej importovat do Flash v jednom kroku, můžete svou kresbu uložit v nativním (AI) formátu Illustratoru a importovat ji s vysokou věrností do Flash pomocí příkazů Soubor > Importovat do pracovního prostoru. Soubor" > "Importovat do knihovny".
Pokud soubor Illustratoru obsahuje více kreslicích pláten, vyberte kreslicí plátno, které chcete importovat, v dialogovém okně Import Flash a určete nastavení pro každou vrstvu v tomto kreslicím plátně. Všechny objekty na vybraném kreslicím plátně se importují do Flash program jako jedna vrstva. Když importujete další kreslicí plátno ze stejného souboru AI, objekty z tohoto kreslicího plátna se importují do Flash jako nová vrstva.
Když importujete kresbu Illustratoru jako soubory AI, EPS nebo PDF, Flash zachová stejné atributy jako při vložení grafické objekty Ilustrátor. Pokud importovaný soubor aplikace Illustrator obsahuje vrstvy, můžete je importovat jedním z následujících způsobů.
Převeďte vrstvy Illustratoru na vrstvy Flash.
Převeďte vrstvy aplikace Illustrator na snímky Flash.
Převeďte všechny vrstvy aplikace Illustrator do jedné vrstvy Flash.