Sprievodca: Ako vytvárať animácie SVG pomocou After Effects CC. Tipy a triky v programe Adobe illustrator: Illustrator Tricks

Formát súboru Flash (SWF) je vektorový a je navrhnutý pre škálovateľnú a kompaktnú grafiku pre web. Pretože je tento formát súboru založený na vektorovej grafike, objekt si zachováva kvalitu obrazu v akomkoľvek rozlíšení a je ideálny na vytváranie rámcov animácií. V aplikácii Illustrator môžete vytvárať samostatné rámčeky animácií na vrstvách a potom vrstvy obrázka exportovať ako samostatné rámčeky na použitie na vašom webe. Môžete tiež definovať symboly v súbore Illustratoru, aby sa zmenšila veľkosť animácie. Pri exporte je každý symbol v súbore SWF definovaný iba raz.

Exportný príkaz (SWF)

Poskytuje maximálnu kontrolu nad animáciou a bitovou kompresiou.

Poskytuje väčšiu kontrolu nad kombináciou 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é možnosti príkazu Export (pozri).

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

Pomocou Device Central môžete vidieť, ako bude v aplikácii vyzerať predloha Illustratoru. Flash Player na rôznych ručných zariadeniach.

Vkladanie kresby Illustratora

Umelecké diela vytvorené v programe Illustrator je možné kopírovať a vkladať do programu Flash rýchlo, jednoducho a jednoducho.

Nasledujúce atribúty sú zachované, keď vložíte umenie Illustratora do Flash.

    Obrysy a tvary

  • Hrúbka čiary

    Definícia gradientov

    Text (vrátane písem OpenType)

    Súvisiace obrázky

  • Režimy miešania

Illustrator a Flash navyše pri vkladaní umeleckých diel podporujú nasledujúce.

    Výber celých vrstiev najvyššej úrovne v kresbe Illustratora a ich vloženie do programu Flash zachová vrstvy a ich vlastnosti (viditeľnosť a uzamknutie).

    Farebné formáty aplikácie Illustrator, ktoré nie sú RGB (CMYK, stupne šedej a vlastné formáty), sa prevádzajú na RGB pomocou formátu Flash. Farby RGB sa prilepujú obvyklým spôsobom.

    Pri importe alebo vkladaní kresby Illustratoru môžete použiť rôzne možnosti na zachovanie určitých efektov (napríklad tieňa vrhaného textom) ako filtrov Flash.

    Flash ukladá masky Illustratoru.

Export súborov SWF z aplikácie Illustrator

Súbory SWF exportované z aplikácie Illustrator zodpovedajú kvalite a kompresnému pomeru súborov SWF exportovaných z programu Flash.

Pri exporte si môžete vybrať z rôznych preddefinovaných štýlov na dosiahnutie optimálneho výstupu a určiť, ako sa používa viacero kresliacich panelov, ako sa prevádzajú symboly, vrstvy, text a masky. Symboly Illustratoru môžete napríklad exportovať ako filmy alebo grafiku a vytvárať symboly SWF z vrstiev Illustratora.

Import súborov Illustratoru do Flash

Ak chcete v programe Illustrator vytvoriť úplné rozloženie a potom ho v jednom kroku importovať do formátu Flash, môžete kresbu uložiť v pôvodnom formáte Illustrator (AI) a importovať ju s vysokou vernosťou do programu Flash pomocou príkazov Súbor> Importovať do plochy. > Importovať do knižnice.

Ak váš súbor Illustrator obsahuje viac kresiel, vyberte kresbu, ktorú chcete importovať, v dialógovom okne Import programu Flash a zadajte nastavenia pre každú vrstvu na kresbe. Všetky objekty vo vybratom kresliacom plátne sa importujú do Flash program ako jedna vrstva. Keď importujete inú kresbu z rovnakého súboru AI, objekty z tejto kresby sa importujú do Flash ako nová vrstva.

Keď importujete kresbu Illustratora ako súbory AI, EPS alebo PDF, Flash si zachová rovnaké atribúty ako pri vkladaní kresieb Illustratora. Navyše, ak importovaný súbor Illustratora obsahuje vrstvy, môžete ich importovať jedným z nasledujúcich spôsobov.

    Premeňte vrstvy Illustratoru na vrstvy Flash.

    Premeňte vrstvy Illustratoru na rámce Flash.

    Premeňte všetky vrstvy Illustratoru na jednu vrstvu Flash.

Transparentný GIF v programe Adobe Illustrator sa robí nasledovne. Prejdite na položku Súbor> Uložiť pre web a zariadenia (Alt + Ctrl + Shift + S). V okne, ktoré sa otvorí, musíte v poli Optimalizovaný formát súboru najskôr prejsť na kartu Veľkosť obrazu(Veľkosť obrazu). Faktom je, že v predvolenom nastavení sa celá stránka dostane do okna optimalizácie, a to zvyčajne nie je potrebné. Na karte Veľkosť obrázka preto zrušte začiarknutie políčka Clip to Artboard(Orezať na veľkosť strany) a kliknite na tlačidlo Použiť.

Potom vyberte GIF v zozname na výber formátu a začiarknite políčko Priehľadnosť.

Potom definujeme, ktoré farby budú priehľadné. Všetky farby prítomné na obrázku sú obsiahnuté v záložke Farebná tabuľka(Tabuľka farieb) a sú zobrazené ako farebné štvorčeky. Vyberte nástroj na paneli s nástrojmi na ľavej strane okna Kvapkadlo(pipeta).

Farby je možné definovať dvoma spôsobmi. Najjednoduchším spôsobom je určiť farbu kvapkadlom priamo na obrázku - potom sa farba v tabuľke farieb zvýrazní tmavým ťahom. Ak presne viete, aká farba by mala byť priehľadná, môžete ju vybrať priamo v tabuľke farieb kliknutím na príslušný farebný štvorec. 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 musíte programu dať pokyn, aby bol transparentný. Ak to chcete urobiť, kliknite na ikonu Mapuje vybrané farby na priehľadné(Pridajte vybrané farby na priehľadnosť). Na obrázku je toto tlačidlo zakrúžkované a červená je zvolená ako priehľadná. Obrázok sa ukáže priehľadná oblasť, a štvorec na farebnom stole zmení svoj vzhľad - jeho súčasťou sa stane biely trojuholník. Ak chcete vybratú farbu zrušiť, 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. Je za to zodpovedné rozbaľovacie menu. Zadajte algoritmus rozpadu priehľadnosti, v ruštine - Algoritmus na simuláciu priehľadnosti (obr. nižšie). Je možné vybrať zo štyroch možností: Žiadny rozklad priehľadnosti - žiadny algoritmus, Rozptýlenie priehľadnosti difúzie - difúzny algoritmus, Rozklad priehľadnosti transparentnosti - algoritmus založený na vzore a Hluk priehľadnosti - algoritmus založený na šumu. V režime difúzneho algoritmu sa posuvník aktivuje Čiastka(Amount), ktorá vám umožní zmeniť hodnotu difúzie. Čo uviesť do praxe? Podľa účelu a obrázku. Túto možnosť nepoužívam a vždy ju ponechám ako predvolenú - bez priehľadnosti transparentnosti.

Kliknite na Uložiť - transparentný GIF je pripravený. Práca bola vykonaná v programe Adobe Illustrator verzie CS4 (v. 14), ale všetky akcie a klávesové skratky sú relevantné pre predchádzajúcu verziu CS3 (v. 13).

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

Tento článok pojednáva najjednoduchší príklad animácie SVG vektor o pľúcna pomoc Doplnok Jquery Lazy Line Painter.

Zdroj

Na dokončenie a úplné porozumenie tejto úlohe je potrebná základná znalosť HTML, CSS, Jquery, ale nie je potrebná, ak chcete iba animovať SVG) Začnime!

Kroky, ktoré musíme dodržať:

  1. Vytvorte správnu štruktúru súborov
  2. Stiahnite si a pripojte doplnok
  3. Nakreslite Cool Outline Art v programe Adobe Illustrator
  4. Premeňte náš obrázok na Lazy Line Converter
  5. Výsledný kód prilepte do súboru main.js
  6. Podľa chuti pridajte CSS

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.

  • Klasický kotol H5BP (varná doska HTML5)
  • Žiadna šablóna
  • Len HTML5 Shiv
  • Minifikované
  • Triedy IE
  • Chrómový rám
  • Potom kliknite na položku Stiahnuť!

2. Stiahnite si a pripojte doplnok

Pretože inicializátor prichádza s najnovšou knižnicou jquery, z archívu, ktorý musíme stiahnuť z úložiska projektu Lazy Line Painter, stačí do nášho projektu preniesť 2 súbory. Prvý je „jquery.lazylinepainter-1.1.min.js“ (verzia doplnku sa môže líšiť) a nachádza sa v koreňovom priečinku výsledného priečinka. Druhým je príklad / js / vendor / raphael-min.js.

Tieto 2 súbory umiestnime do priečinka js. A spojíme ich s naším index.html pred main.js takto:

3. V programe Adobe Illustrator nakreslite skvelý obrysový obrázok

  1. Nakreslite náš obrysový obrázok v Illustratore (najľahšie to urobíte pomocou Nástroja na pero)
  2. Je nevyhnutné, aby sa kontúry našej kresby nezatvárali, pretože začiatok a koniec sú nevyhnutné pre náš efekt.
  3. Nemali by existovať žiadne výplne
  4. Maximálna veľkosť súboru - 1 000 × 1 000 px, 40 kB
  5. Orezať na objekt> Kresliace plátna> Viazať na okraje kresieb
  6. Uložiť vo formáte SVG (postačia štandardné nastavenia ukladania)

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

4. Premeňte náš obrázok na Lazy Line Converter
Jednoducho presuňte ikonu do nižšie uvedeného poľa.
Hrúbku, farbu obrysu a rýchlosť animácie je možné zmeniť v samotnom kóde, ktorý sa zobrazí po konverzii!

5. Výsledný kód prilepte do súboru main.js
Teraz už len prilepíme výsledný kód do prázdneho súboru main.js
Možnosti:
strokeWidth - hrúbka obrysu
strokeColor - farba obrysu
Rýchlosť kreslenia každého vektora môžete tiež zmeniť zmenou hodnôt parametra trvania (predvolene 600)

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

Ahoj svet! Toto je kotúčová doska HTML5.

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:

Telo (pozadie: # F3B71C;) # ikony (poloha: 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 sa spustenie animácie môže posunúť o niekoľko sekúnd.

Optimalizácia webovej grafiky

Grafické informácie sa prenášajú oveľa pomalšie ako textové informácie a doba načítania obrázkov je úmerná ich veľkosti grafické súbory... Rýchle načítanie webových stránok preto znamená malú veľkosť vloženej grafiky, ktorá sa dosahuje ich optimalizáciou. Optimalizáciou obrazu sa rozumie jeho transformácia, ktorá v tomto prípade zaisťuje minimálnu veľkosť súboru pri zachovaní požadovanej kvality obrazu, čo sa dosahuje predovšetkým znížením počtu farieb v grafických obrázkoch, použitím komprimovaných a špeciálnych formátov súborov a optimalizáciou parametrov kompresie pre jednotlivé fragmenty obrazov.

Illustrator má vstavané nástroje na optimalizáciu obrázkov, ktoré poskytujú rýchly a efektívny proces optimalizácie prostredníctvom rôznych metód ukážky. 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ť potrebné nastavenia. Môžete tiež optimalizovať obrázky vytvorené priamo v programe Illustrator a ďalšie, napríklad fotografie, ktoré majú byť zverejnené na webovej stránke.

V okne sa nastavujú optimalizačné parametre Uložiť na web(Save for Web) vyvoláva rovnomenný príkaz z ponuky Súbor(Súbor). Program ponúka použitie jedného zo štyroch režimov ukážky, ale na vyhodnotenie kvality optimalizácie sú najvhodnejš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-hore(štyri možnosti) - v tomto režime je oblasť zobrazenia rozdelená na štyri okná (obr. 2) na zobrazenie pôvodného obrázku a troch verzií optimalizovaného: prvá verzia je vytvorená na základe nastavených hodnôt optimalizácie a druhá dva sú varianty súčasných nastavení optimalizácie.

Oba režimy môžu výrazne ušetriť čas pri hľadaní lepšia možnosť optimalizácia, pretože eliminujú potrebu ukladať obrázky s rôznymi nastaveniami optimalizácie a ich následné vizuálne porovnanie. Okrem toho je možné pri rôznych možnostiach pripojenia hodnotiť nielen kvalitu optimalizovaného obrazu, ale aj jeho veľkosť a dobu načítania. Na porovnanie je najpohodlnejší režim 4 na 1 (štyri možnosti), ktorý vám umožňuje vizuálne vyhodnotiť vplyv kompresie alebo zmenšenia palety na kvalitu obrazu a jeho veľkosť a nakoniec určiť najlepšie parametre optimalizácia.

Illustrator vám umožňuje optimalizovať webovú grafiku vo formátoch nielen GIF, JPG, PNG-8 a PNG-24, ale aj vo formáte SWF a SVG. Indexované obrázky s malým počtom farieb sa uložia vo formáte GIF. Formát JPG sa používa na ukladanie plnofarebných a šedých obrázkov-fotografií a grafík bohatých na farby, ako sú výplne s prechodom. Na plnofarebné obrázky s priehľadnými oblasťami použite Formát PNGčo vám umožňuje uložiť indexované aj plnofarebné obrázky, zatiaľ čo vo formáte PNG-8 je maximálny možný počet farieb optimalizovaného obrázka 256, zatiaľ čo vo formáte PNG-24 môže mať obrázok milióny farieb, a preto je podobný formátu JPEG. PNG-24 sa líši od formátu JPEG v tom, že metóda kompresie používaná na optimalizáciu obrázkov PNG-24 nemá za následok stratu kvality, ale zvyšuje veľkosť súboru. Formáty SVG a SWF kombinujú grafické, textové a interaktívne komponenty a je ich tiež možné optimalizovať.

Pozrime sa na konkrétny príklad optimalizácie obrazu. Povedzme, že logo webovej stránky bolo vyvinuté v programe Illustrator (obr. 3), pôvodne uložené vo formáte AI. Pokus o okamžitú optimalizáciu pre web nepovedie k ničomu dobrému, pretože v tomto prípade bude obrázok automaticky orezaný, čo nebude brať do úvahy skutočnú polohu písma získaného v dôsledku deformácie (obr. 4 a 5).

Pokúsime sa preto príkazom exportovať logo do formátu PSD 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ť na web(Súbor => Uložiť na web). Vzhľadom na obmedzený počet farieb obsiahnutých v obrázku je v tomto prípade optimálny formát GIF, s ktorého konkrétnymi nastaveniami sa musíte rozhodnúť. Experimentovaním s nastaveniami to môžete zaistiť najlepšia kvalita uvádza predvolený kompresný algoritmus programu Selektívne(Selektívne). Pokiaľ ide o vyhladzovanie, vzhľadom na prítomnosť gradientovej výplne je 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, ktorú je ľahké overiť uložením obrázku vo formáte GIF spolu so súborom HTML (obr. 8). Výsledkom je, že v tento príklad súbory emblem.html a emblem.gif boli získané v priečinku Primer1.

Gombíky

Nepostrádateľným špecifickým prvkom dizajnu akýchkoľvek webových stránok sú grafické ovládacie prvky - tlačidlá. Stránku bez nich si jednoducho nemožno predstaviť. Kreslenie tlačidiel sa dnes stalo špeciálnym žánrom a Illustrator vám umožňuje vytvárať najzložitejšie možnosti. Napríklad tlačidlá navrhnuté ako objekty mriežky a / alebo s prekrývajúcimi sa maskami pôsobia oveľa pôsobivejšie než obvykle.

Uvažujme o možnosti vytvorenia okrúhleho konvexného tlačidla v programe Illustrator. Nakreslite kruhový vektorový objekt vyplnený ľubovoľnou farbou (obr. 9) a pomocou príkazu ho preveďte na sieť Objekt => Vytvoriť prechodovú sieť(Objekt => Vytvoriť prechodovú sieť) zadaním štyroch riadkov a štyroch stĺpcov a v zozname Vzhľad(Zobraziť) výberom možnosti Do centra Zlatý klinec(Podsvietenie) rovné 60 (obr. 10). Vyberte nástroj Priamy výber a kliknite na v ľavom hornom rohu objektu, pričom zvýraznite ukotvené body, ktoré sa tam nachádzajú (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), umiestnite značku myši do stredu kruhu, ktorý bol vytvorený predtým, a podržte klávesy Alt a Smena, natiahnite nový kruh na starý tak, aby bol zo všetkých strán o 1 až 2 pixely väčší ako starý. Urob z nej čierny okraj ( Mŕtvica) 1 až 2 pixely široké a vyplňte radiálnym gradientom od červenej po bielu (obrázok 13). Potiahnite vytvorený vektorový objekt o 1-2 pixely doprava a nadol, potom bez odstránenia výberu na neho kliknite kliknite pravým tlačidlom myši myšou a z kontextovej ponuky vyberte príkaz Usporiadať => Odoslať dozadu(Usporiadať => Odoslať späť). V dôsledku toho dostanete prázdne tlačidlo, znázornené na obr. štrnásť.

Na akejkoľvek webovej stránke je spravidla niekoľko tlačidiel rovnakého typu, ktoré sa líšia napríklad iba v smere šípok, ktoré sú na nich nakreslené, čo naznačuje smer pohybu po webe. Uvažujme o najjednoduchšom prípade dvoch tlačidiel, z ktorých jedno so šípkou nadol bude znamenať prechod na nasledujúcu stránku a tlačidlo so šípkou nahor na predchádzajúcu. Ako prázdnu šípku vezmite obyčajný trojuholník nakreslený nástrojom Mnohouholník(Mnohouholník), vyplnené čiernou farbou a tiež zdobené ako sieťovaný predmet pre väčší efekt. Presuňte šípku na tlačidlo a pomocou príslušných tlačidiel na palete upravte vzájomnú polohu všetkých objektov Zarovnať(Zarovnanie). Prvé zo získaných tlačidiel je znázornené na obr. 15. Vytvorte kópiu vrstvy tlačidiel výberom príkazu Duplicitná vrstva Vrstvy, - ako výsledok dostaneme dve identické vrstvy. Potom na kópii vrstvy vyberte šípku a otočte ju o 180 ° výberom príkazu Transformácia => Otočiť- Transformácia => Rotácia. Dostaneme rovnaké tlačidlo, ako je znázornené 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 v tomto prípade ukázané.

Teraz musíte uložiť optimalizované verzie jednotlivých tlačidiel. Najprv urobte neviditeľnú spodnú vrstvu - v tomto prípade sa uloží tlačidlo na hornej vrstve. Vyberte tím Súbor => Uložiť na web(Súbor => Uložiť pre web), nakonfigurujte napríklad možnosti optimalizácie tlačidiel, ako je znázornené na obrázku 1-4. 17, kliknite na tlačidlo Uložiť(Uložiť) a zadajte názov súboru. Výsledné tlačidlo je zobrazené na obr. 18. Teraz vráťte viditeľnosť spodnej vrstvy a urobte hornú neviditeľnou a rovnakým spôsobom uložte druhé tlačidlo s iným názvom. Výsledok je znázornený na obr. 19.

Teraz zostáva len zaistiť, aby tlačidlá na webovej stránke vyzerali dobre, a umiestniť ich na vlastnú stránku (obrázok 20). Výsledkom je, že v tomto prípade súbor Primer2.html a dva grafické obrázky v priečinku images (priečinok Základný náter 2).

Pokiaľ je to žiaduce, počas procesu optimalizácie je možné tlačidlo ľahko zmeniť na plátok. V tomto prípade po výbere príkazu Súbor => Uložiť na web(Súbor => Uložiť pre web) a nastavením parametrov optimalizácie vyberte nástroj z palety nástrojov Vyberte plátok(Výber rezu) a dvakrát kliknite na obrázok, ktorý sa nakoniec automaticky zmení na plátok s sériové číslo 1 (obr. 21). Dvojitým kliknutím myši sa otvorí okno Možnosti rezu(Možnosti rezu), v ktorom budete musieť zadať odkaz a v prípade potreby zmeniť názov rezu (obr. 22) a potom uložiť optimalizovaný obrázok. Výsledkom v tomto prípade bude Primer3.html (obr. 23) a Primer3.gif (priečinok Primer3).

Interaktívne prvky

Jedným zo spôsobov, ako oživiť stránku, je zavedenie dizajnových prvkov, ktoré ich menia vzhľad(alebo stavu) v závislosti od správania sa myši alebo, menej často, v prípade akýchkoľvek iných situácií: škálovanie, posúvanie, načítanie, chyby atď.

Medzi takýmito prvkami sú najznámejšie rollovery (z angličtiny roll over - to roll, turn over) - prvky, ktoré pod vplyvom myši menia svoj vzhľad. Animované tlačidlá sú príkladmi typických rolloverov. Pri vytváraní ďalších navigačných prvkov webu sa často používajú rollovery. V skutočnosti žiadne prevrátenie nie je jeden, ale niekoľko (až štyroch) obrázkov, z ktorých každý zodpovedá konkrétnej udalosti. Za hlavné udalosti sa považujú tieto udalosti: Normálny - normálny stav, Nadmerné - presunutie kurzora myši nad prvok a Dole - stlačenie ľavého tlačidla myši, keď sa kurzor pohybuje nad ním. Teoreticky môžu byť zapojené také udalosti, ako je Kliknutie - uvoľnenie ľavého tlačidla myši po stlačení, Hore - po uvoľnení tlačidla, Out - pri opustení aktívnej zóny. V praxi sa však častejšie obmedzujú na zmenu prvku iba na prvé tri alebo dokonca dve udalosti.

Klasické rollovery

V klasickom zmysle je rollover séria grafických obrázkov vo formáte GIF a zodpovedajúcom kóde HTML, vďaka ktorým v závislosti od správania myši jeden obrázok v okne prehliadača nahradí iný.

Illustrator nie je navrhnutý tak, aby priamo vytváral rollovery v klasickom zmysle, ale môže vám pomôcť navrhnúť pre nich počiatočné prvky. V tomto prípade ide o vytvorenie vrstvy s obrázkom zodpovedajúcim prvej udalosti. Potom vytvorte kópiu vrstvy a transformujte obrázok tak, aby zodpovedal druhej udalosti atď. Výsledný viacvrstvový obrázok sa exportuje do súboru PSD so zachovanými vrstvami, na základe ktorých sa v programe Image Ready vytvorí rollover. Výhodou použitia Illustratoru, ako v mnohých ďalších prípadoch, je množstvo jeho zaujímavých funkcií, ktoré nie sú k dispozícii v iných softvérových nástrojoch, 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 sa myši. Otvorte Illustrator a vytvorte zaoblený obdĺžnik s čiernymi výplňami (obrázok 24), vytvorte si jeho kópiu a umiestnite ho na voľné miesto na obrazovke. Skonvertujte prvú kópiu obdĺžnika na objekt mriežky so zvýraznením v strede (príkaz Objekt => Vytvoriť prechodovú sieť- Objekt => Vytvoriť prechodovú sieť) zadaním štyroch riadkov a desiatich stĺpcov (obrázok 25). Aktivujte druhú kópiu obdĺžnika a upravte pre ňu výplň gradientu približne tak, ako je to znázornené na obr. 26. Zmiešajte gradientový objekt cez sieťovinu, znížte krytie gradientového objektu na približne 80% a jeho veľkosť približne na 1 pixel, aby sa napodobnil nárazový efekt. Potom vytlačte text na objekty. V pôvodnej podobe nech má bielu farbu, ktorá bude zodpovedať normálnemu stavu (obr. 27), a potom, keď sa zmení stav prevrátenia, farba titulku sa zmení napríklad na zelenú - keď prejdete myšou nad ním ukazovateľom myši (stav Nad) a na modrú - po stlačení tlačidla myši (stav nadol).

Dávajte pozor na paletu Vrstvy- v tomto štádiu je v ňom iba jedna jediná vrstva. 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 titulku na zelenú a v druhej na modrú (obr. 29). V dôsledku toho získate potrebné prázdne miesto pri prevrátení.

Exportujte vytvorený obrázok do formátu PSD so zachovaním vrstiev pomocou príkazu Súbor => Exportovať(Súbor => Exportovať) a zvolením farebného modelu RGB (obr. 30). Otvorte vytvorený súbor PSD v programe ImageReady (obr. 31 a 32). Rámy vytvorte z vrstiev výberom príkazu Vytvorte rámy z vrstiev(Vytvoriť rámce z vrstiev) z ponuky palety Animácia... Animačné okno bude vyzerať ako na obr. 33. Súčasne v palete Prevrátenie spočiatku sa vytvorí jeden normálny stav.

Potom v okne Animácia v palete vyberte rámček zodpovedajúci stavu vznášania sa Vrstvy vrstva sa vyberie automaticky Kópia vrstvy 1(obr. 34). Prejdite na paletu Prevrátenie a kliknite na tlačidlo Vytvoriť stav pri prevrátení(Vytvorenie stavu prevrátenia) - obr. 35, čo povedie k vzhľadu stavu Nadstav v palete Prevrátenie(obr. 36). Vytvorte štát rovnakým spôsobom Dolný stav... Aktivujte štát Normálne v palete Prevrátenie a odstráňte v palete Animácia všetky snímky, okrem toho, ktorý by mal zodpovedať stavu Normálne... Výsledkom je, že pre každý stav prevrátenia v palete Animácia bude existovať iba jeden rám (obr. 37, 38 a 39).

Ryža. 38. Pohľad na obrázok, okno Animácia a palety Vrstvy a Prevrátenie pre stav Over State

Výsledok skontrolujte kliknutím na tlačidlo Ukážka v predvolenom prehliadači(Náhľad 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ť optimalizované) a zadaním možnosti HTML a obrázky (* .html)... V dôsledku toho sme v tomto príklade dostali súbor Primer4.html a sériu grafických obrázkov v priečinku images.

Ryža. 40. Okno prehliadača s prvkom Rollover

Prevrátenie SVG

Získanie popularity Formát SVG(Scalable Vector Graphics - scalable vector graphics), vytvorená na základe štandardu XML, vám tiež umožňuje prijímať rôzne interaktívne prvky, najmä rollovery, len v praxi je implementovaná úplne inak. Stojí za zmienku, že vytváranie interaktívnych rolloverov SVG, na rozdiel od klasických, keď je úplne automaticky generovaný zodpovedajúci HTML kód, vyžaduje znalosť jazyka JavaScript a porozumenie základným princípom objektovo orientovaného programovania.

Na prácu s objektmi SVG existuje špeciálna paleta. Interaktivita SVG, ktoré je ľahké otvoriť pomocou príkazu Okno => Interaktivita SVG(Okno => interaktivita SVG) - obr. 41.

Uvažujme o tejto možnosti pri vytváraní rolloveru na príklade interaktívneho tlačidla, ktorého farba titulku sa zmení z čiernej na modrú, keď na ňu prejdete myšou, a keď myš opustí aktívnu zónu, znova sa zmení na čiernu.

Vytvorte obdĺžnikové tlačidlo so zaoblenými hranami a vyberte preň napríklad vhodnú výplň gradientu, ako je znázornené na obr. 42. Upravte priehľadnosť tlačidla v palete Transparentnosť(Transparentnosť) - v tomto prípade hodnota parametra Nepriehľadnosť(Nepriehľadnosť) nastavená na 50%. Duplikujte tlačidlo, vyplňte ho tmavozelenou farbou (obr. 43) a potom ho pomocou príkazu skonvertujte na sieťový objekt Objekt => Vytvoriť prechodovú sieť(Objekt => Vytvoriť prechodovú sieť) zadaním štyroch riadkov a desiatich stĺpcov a v zozname Vzhľad(Zobraziť) výberom možnosti Do centra(Stred) a nastavenie hodnoty Zlatý klinec(Zvýrazniť) rovnajúci sa 100. Znížte krytie vrstvy sieťového predmetu asi o 40% (obr. 44). Umiestnite sieťový predmet na vrch gradientu a tlačidlo sa bude podobať na tlačidlo zobrazené na obr. 45.

Ryža. 44. Premena kópie tlačidla na sieťový objekt

Doplňte tlačidlo zamýšľaným titulkom 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 superponovanými objektmi (obrázok 46). Plánované udalosti budú odkazovať na textový objekt z dôvodu pohodlia zmeňte jeho názov na Text dvojitým kliknutím na objekt a zadaním nového mena. Rovnakým spôsobom zmeňte názov vrstvy z Vrstva 1 až vrstva(obr. 47).

Manipulácia s udalosťami predpokladá použitie procedúr JavaScript, takže musíte zahrnúť súbor popisujúci tieto postupy. Hovorí sa mu Events.js a pri inštalácii programu Adobe Illustrator sa uloží na disk v priečinku Sample Files \ Sample Art \ SVG \ SVG. Na pripojenie súboru Events.js použite príkaz Súbory JavaScript Interaktivita SVG(obr. 48). Ďalej musíte stlačiť tlačidlo Pridať(Pridať) a nájdite 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 JavaScript Files

Potom by ste mali pre objekt definovať reakciu na udalosti myši. Text... V poli vyberte textový objekt Udalosť(Udalosti) palety Interaktivita SVG vyberte udalosť cez myš elemColor (evt, "Text", "# 3333FF")- to bude znamenať, ž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, budete musieť vytvoriť ďalšiu udalosť onmouseout- vyberte ho v poli Udalosť(Udalosti) palety Interaktivita SVG... Potom zadajte text do riadka akcie elemColor (evt, "Text", "# 000000")- toto zmení farbu na čiernu (obr. 51).

Ryža. 51. Konečný pohľad na paletu interaktivity SVG pre objekt Text

Vytvorený rollover uložte pomocou príkazu ako súbor SVG Súbor => Uložiť ako(Súbor => Typ súboru formát SVG, a potom nakonfigurujte možnosti na uloženie súboru SVG, ako je znázornené na obr. 52. Po uložení dostanete len 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 skutočne fungoval, musíte dodatočne skopírovať súbor Events.js s popisom procedúr JavaScript do priečinka so súborom SVG. Potom môžete skontrolovať, či funguje rollover - výsledok bude vyzerať ako na obr. 53.

SVG animácia

Na prenos animácie je možné použiť aj formát SVG. Pokúsme sa vytvoriť jednoduchý animačný prvok (v tomto prípade to budú informácie o spoločnosti), ktorý sa zobrazí na obrazovke, keď umiestnite kurzor myši na príslušný grafický objekt, a zmizne, keď myš vyberiete z interaktívneho prvku.

Vytvorme sériu grafických a textových objektov, ako je ten, ktorý je znázornený na obr. 54. Pohodlne premenujte všetky vytvorené objekty postupným kliknutím na názov nasledujúceho objektu v palete Vrstvy a zadajte požadované meno (obr. 55). Upozorňujeme, že zvýraznené na obr. 56 predmetov - Text1, Text2, Text3 a Cesta 1- bude vždy viditeľný a všetky ostatné - iba keď umiestnite kurzor myši na objekt Text1.

Ryža. 54. Pôvodný pohľad na obrázok

Zahrňte súbor Events.js s popisom procedúr JavaScript pomocou príkazu 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 reakciu objektu na udalosti myši Text1... Vyberte predmet Text, v teréne Udalosť(Udalosti) palety Interaktivita SVG vyberte udalosť cez myš a do riadka nižšie zadajte text elemShow (evt, "Text4"); elemShow (evt, „Cesta 2“)... Výsledkom je, že keď je myš nad objektom Text1 objekty budú viditeľné Text4 a Cesta 2... Upozorňujeme, že ak sa má v súvislosti s udalosťou vykonať niekoľko akcií, musia byť špecifikované prostredníctvom znaku „;“. Potom vykonajte podobnú operáciu s ohľadom na udalosť onmouseout zadaním textu preň, čo bude znamenať skrývanie predmetov (obr. 57).

Výsledok uložte pomocou príkazu ako súbor SVG Súbor => Uložiť ako(Súbor => Uložiť ako) zadaním názvu súboru výberom v poli Typ súboru Formát SVG a potom konfigurácia možností na uloženie súboru SVG, ako je znázornené na obr. 58. Po uložení získate 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íš cos tento súbor, potom uvidíte výsledok znázornený na obr. 59. To je takmer to, čo potrebujete. Jediná vec, ktorá nebola zahrnutá v našich plánoch, bola počiatočná podoba predmetov. Text 4 a Cesta 2 pri štarte. Ak sa chcete tejto chyby zbaviť, vyberte oba dátové objekty naraz a vytvorte pre ne akciu. elemHide (evt, "Text4"); elemHide (evt, "Cesta2") na akcii zaťaženie(obr. 60). Uložte súbor znova a uistite sa, že objekty sú teraz Text4 a Cesta 2 viditeľné iba vtedy, keď umiestnite kurzor myši na 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. V tomto prípade je možné pripraviť viacvrstvový obraz samotný rôzne aplikácie, vrátane programu Adobe Illustrator.

Je veľmi jednoduché vytvárať animácie na základe prvkov z palety Symboly(Symboly) otvorené príkazom Okno => Symboly(Okno => Symboly) alebo z jednej z knižníc symbolov, ktoré je možné otvoriť pomocou príkazu Okno => Knižnice symbolov(Okno => knižnice symbolov).

Ako príklad sa pokúsime zväčšiť veľkosť akéhokoľvek symbolového objektu; kľúčové fázy procesu zväčšovania objektu musia byť nastavené na samostatné vrstvy. Najprv jednoducho umiestnite objekty symbolov nad seba a potom zväčšite veľkosť každého ďalšieho objektu, napríklad ako je znázornené na obr. 61. Výsledkom je, že v palete Vrstvy vznikne jedna vrstva s mnohými objektmi (obr. 62). Ak tento obrázok priamo exportujete do formátu PSD, nič to nespraví, pretože existuje iba jedna vrstva a samozrejme, keď otvoríte súbor PSD v programe ImageReady, bude existovať iba jedna vrstva. Preto musíte najskôr umiestniť objekty na rôzne vrstvy. To sa dá zvládnuť rôzne cesty- najľahšie je najskôr vybrať vrstvu Vrstva 1 v palete Vrstvy a použite príkaz Uvoľnite do vrstvy(Uvoľnenie do vrstiev). Výsledkom bude presun každého z predmetov do vlastnej vrstvy, ale všetky budú vo vrstve vnorené. Vrstva 1... Preto potom budete musieť všetky vnorené vrstvy ručne pretiahnuť do hornej časti palety Vrstvy, aby boli nad vrstvou. Vrstva 1 a potom prázdna vrstva Vrstva 1 stačí vybrať (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 do programu ImageReady (obrázky 65 a 66). Otvorte ponuku palety AnimáciaVytvorte rámy z vrstiev(Vytvárajte rámčeky z vrstiev). V dôsledku toho sa vytvorí päť rámcov, z ktorých každý bude zodpovedať svojej vlastnej vrstve, a oknu palety Animácia bude mať formu ako na obr. 67.

Potom nastavte trvanie každého z vytvorených rámcov - v tomto prípade je trvanie všetkých snímok nastavené na 0,2 s. A potom optimalizovanú animáciu uložte pomocou príkazu Súbor => Uložiť optimalizované(Súbor => Uložiť optimalizované). Získaný výsledok môže pripomínať obr. 68.

Je ešte pohodlnejšie získať medzery, ktoré sa dajú v ImageReady ľahko zmeniť na animáciu, pomocou funkcií Živé zmesi Softvér Illustrator. Toto kombinované použitie aplikácií Illustrator a ImageReady dramaticky urýchľuje proces vytvárania animácií GIF.

Nakreslite napríklad 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 vytváranie animácií, pretože obrázok je na jednej vrstve (obr. 70). Preto musíte najskôr umiestniť každý prvok zmiešaného objektu do samostatnej vrstvy. K tomu v okne Vrstvy zvýraznite riadok , aktivujte ponuku palety kliknutím na čiernu šípku v jej pravom hornom rohu a vyberte príkaz Uvoľnite sekvenciu vrstiev(Postupne preveďte na vrstvy) (obr. 71). Podržanie klávesu Smena, vyberte vytvorené vrstvy a umiestnite ich nad vrstvu Vrstva 1 a potom odstráňte samotnú vrstvu Vrstva 1 presunutím do košíka - v dôsledku toho bude mať paleta vrstiev rovnakú formu ako na obr. 72.

Ryža. 70. Počiatočný stav okna Vrstvy

Exportujte vytvorený súbor do formátu PSD príkazom Súbor => Exportovať(Súbor => Exportovať). Otvorte vytvorený súbor PSD v programe ImageReady (obr. 73). Upozorňujeme, že všetky vrstvy vytvorené v programe Illustrator sa zobrazia v okne vrstiev (obr. 74) a v okne Animácia rámček bude zatiaľ len jeden.

Aktivujte ponuku palety Animácia kliknutím na čiernu šípku v pravom hornom rohu palety a zvoľte príkaz Vytvorte rámy z vrstiev(Vytvoriť rámce z vrstiev) - v dôsledku toho sa v tomto prípade vytvorí päť rámcov a okno palety Animácia bude mať formu v súlade s obr. 75. Podržte stlačené tlačidlo a vyberte všetky snímky Smena, a nastavte vhodné trvanie snímky - v tomto prípade sa pre každý zo snímok použije rovnaký čas 0,2 s. Optimalizovaný súbor potom uložte pomocou príkazu Súbor => Uložiť optimalizované(Súbor => Uložiť optimalizované) nastavením v zozname Typ súboru možnosť Iba obrázky (* .gif)... Animácia bude pripomínať obr. 76.

Oveľa zaujímavejšie nie je pohyb, ale plynulá zmena veľkosti zmiešaných predmetov. Môžete napríklad použiť už vytvorený prechod zmiešania. 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 Stred horizontálneho zarovnania(Horizontálne zarovnanie stredu) a Stred vertikálneho zarovnania Paleta (Vertikálne zarovnanie stredu) Zarovnať(obr. 77).

Exportujte vytvorený súbor do formátu PSD ( Súbor => Exportovať- Súbor => Exportovať) a otvorte vytvorený súbor PSD v programe ImageReady (obr. 78). Vytvorte rámce animácie ( Vytvorte rámy z vrstiev- Vytvorte snímky z vrstiev) a vyberte pre ne vhodné trvanie (obr. 79). A potom, aby bola animácia efektívnejšia, skopírujte existujúce snímky, ale v opačnom poradí - aby sa obrázok najskôr zväčšoval a potom znižoval a podobne v kruhu (obr. 80). Potom uložte optimalizovaný súbor ( 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ácie po duplikácii rámcov

Ryža. 81. Hotová animácia

Ahojte všetci! Dnes sa pokúsim popísať schopnosti programu Adobe ilustrátor porovnaním s možnosťami flush. Toto nebude globálna analýza programu podľa kostí, ale skôr popis niektorých zaujímavých čipov, ktoré som v tomto programe objavil. Informácie som zbieral po kúskoch, keď som ich študoval, aby som všetko zhrnul do jedného príspevku. Hneď musím priznať, že nie som super skúsený používateľ ilustrátora, iba posledný polrok ho používam v kresbe (predtým som všetko namaľoval bleskovo). Mnoho ľudí sa sťažuje, že ilustrátor je komplikovaný, nie vždy intuitívne jasný. Do istej miery súhlasím s tým, že po blesku je tento program náročný. Ale hlavnou vecou tu nie je prestať, ale pokračovať v štúdiu. A po pár týždňoch sa objavila myšlienka, ako by som bez neho predtým mohol robiť!

Čo sa mi na ilustrátorovi páčilo a čo som zistil, že nie je vo Flashi.
1. Začnem tým najjednoduchším, ale zároveň potrebným. Skúste bleskovo usporiadať predmety do kruhu. Bol predtým Nástroj na deco, ale bolo odstránené, zrejme to bolo považované za zbytočné. Rozhodli sme sa, že bude zábavnejšie robiť to s perami. Illustrator má túto funkciu: Efekt - Skreslenie a 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. Cik cak

Ešte jednoduchšia, ale napriek tomu užitočná vec. Zdá sa to maličkosť, ale bleskovo musíte kresliť ručne, v ilustrátorovi je to otázka sekúnd.

3. Deformácia predmetov (Warp)

Nič také bleskovo neexistuje. V nižšie uvedenom príklade som ukázal iba 2 spôsoby deformácie jednoduchých tvarov (Efekt - Osnova - Oblúk / Ryba). V najnovšej verzii programu ich je v skutočnosti 15.

4. Automatické zaoblenie rohov (okrúhle rohy)

Môžete to urobiť ručne: na grafickom objekte, keď je vybratý, sa v rohu (všetkými očami) objaví biely bod a symbol zaoblenej čiary. Ťaháme myšou, upravíme podľa vášho vkusu.

Platí to však iba pre tvary, pričom čiara ceruzky je trochu odlišná - použite efekt zaoblenia ( Efekt - štylizácia - okrúhle rohy). Na výstupe dostaneme rovnaký výsledok.

5. Zdrsnenie (hrubnutie)

Efekt sa uplatňuje na jednoduché tvary ( Efekt - Skreslenie a transformácia - Zdrsnenie). Na výstupe dostaneme niečo, čo pripomína 3D model s nízkym poly. Podľa mňa v pohode :) A hlavne - veľmi jednoduché.


6. Pucker & Bloat(Ťahanie a nadúvanie)
Príklad na obrázku nižšie:


7. Rozšírenie formulára (Offset Path)

Flash má funkciu Rozbaliť výplň; na rozdiel od ilustrátora nefunguje s čiarami ceruzky.


8. Štetce (Art Brush, Pattern Brush, Scatter Brush)
Pozrite sa na obrázok nižšie s príkladmi:

9. Štetec na textúru

Illustrator tiež ponúka veľa štetcov na textúru, o ktorých som písal a v ktorých sa objavili Nová verzia spláchnuť -. Všimli sme si, že používanie štetcov v programe Adobe Animate je extrémne pomalé. To je ono :(

10. Nie som si istá, či je to jednoduchý trik, ale chcem sa zamerať na štetec s vtipným názvom. BlobKefa... Nachádza sa v súprave nástrojov, veľmi pekná kefa na použitie. Má veľa nastavení, páči sa mi to viac ako obvykle. Je ťažké slovami vysvetliť jeho výhody, je lepšie to skúsiť raz.

10. Rozdeľte na mriežku

Užitočná je aj funkcia Split to Grid (Object-Path-Split to Grid), ktorá vám umožňuje vystrihnúť tvar na rovnaké segmenty. Čo nám to pripomína? Správne - okná sú vo výškovej budove. Pokiaľ ide o mňa, skvelá vec na kreslenie, napríklad mestských scenérií;)


Ďalší užitočný nástroj predstavený v programe Illustrator, pravdepodobne od jeho prvého vydania. Dá sa použiť na vytvorenie napríklad drevených textúr:

12. Pohyb (vpravo - transformácia - pohyb)

Posunutie predmetu o zadanú vzdialenosť. Ak je to žiaduce, môžete okamžite vytvoriť kópiu, ktorá bude umiestnená v požadovanej vzdialenosti od vybratého objektu horizontálne / alebo vertikálne. Predchádzajúca verzia Flash mala doplnok, ktorý to urobil túto funkciu... Jeho názov si bohužiaľ nepamätám.

V Illustratore je veľmi výhodné vytvárať bezproblémové vzory ( Object-Pattern-Make). Pamätám si, ako som bol bleskovo sofistikovaný v blesku s tvorbou. V ilustračnej verzii CC 2015 je všetko automatizované a veľa nastavení pomôže vyskladať vzor v desiatkach variácií, keď máte po ruke iba niekoľko grafických prvkov. V predchádzajúcich verziách programu bolo všetko potrebné vykonať ručne, ako vo Flashi doteraz.

(Poznámka - zo vzoru je možné vytvoriť vektorovo upraviteľný objekt pomocou funkcie analýzy ( Objekt - Rozbaliť vzhľad).

14. Objektová mozaika

Vytvorenie farebnej palety na základe existujúceho obrázku. Potom importujeme obrázok, ktorý sa vám páči, do chorého (otvoreného) Objekt - Vytvorte objektovú mozaiku... V nastaveniach určujeme frekvenciu delenia na výšku a šírku.

A na výstupe dostaneme:

15. Blend

Slúži na vytváranie prechodov. Môžete vytvárať prechody krok za krokom, ako napríklad na obrázku. Nepoviem, že ho používam často, ale niekomu môže prísť vhod. Myslím, že sa dá použiť na vytvorenie jednoduchých obrázkov na pozadí.

Nástroj je možné použiť aj na klonovanie predmetov. Umiestnite dva objekty od seba vo vzdialenosti a použite Možnosti prelínania, zvoľte počet krokov (počet klonovaných predmetov).

16. Nástroj na tvar nástroja. Veľmi šikovná vec na prácu s primitívmi. Bleskovo sa mi to zdalo menej pohodlné.

Podržte Alt a kliknite na vybraté segmenty - segmenty vymažte. Ak myšou len potiahneme niekoľko vybraných oblastí - spojenia.


Doplnok je nástroj, ktorý pomáha automaticky vystrihnúť, pripojiť sa atď. zvýraznené formy. Pokiaľ ide o mňa, nie je to veľmi výhodné, používam to častejšie StavaťTvarNástroj.

(kresliace dosky)

18. Panel vlastných nástrojov

Schopnosť vytvoriť si vlastný panel nástrojov, zbaviť sa nepotrebných a vybrať iba tie, ktoré používate.

Vo Flashi kresliace dosky, menovite scény ( Scéna 1,2,3 ..) sú umiestnené oddelene a je potrebné medzi nimi prepínať (Shift + F2). V Illustratore si ich môžete všetky položiť pred oči. Je vhodné, keď vytvoríte niekoľko verzií tej istej kresby, takže všetky možnosti budete mať pred očami na porovnanie.

19. Izometria s grafickými štýlmi

A posledným je vytvorenie izometrie bez použitia na 1 klik (alebo presnejšie na 3 kliknutia, pretože máme 3 strany;) pomocou grafických štýlov ( Grafické štýly). Ako sa to robí, podpíšem nabudúce.

Illustrator má s bleskom spoločnú - schopnosť uložiť objekt k symbolu a rovnako ľahko je možné tento symbol preniesť do formátu Flash (otvorte súbor .ai vo formáte Flash, Importovať - ​​importovať do fázy).
Symbol v programe Illustrator má rovnaké vlastnosti ako vo formáte Flash.
A na záver napíšem, že v ilustrátorovi je podľa mňa podradný blesku. Áno, áno, a niečo také existuje. A toto je nástroj na vyplnenie ( Plechovka farby). Bez ohľadu na to, ako sa snažím zvyknúť si na to v chorobe, je to pohodlnejšie pri blesku.
Ak sa vám moje poznámky stali užitočnými alebo ak chcete niečo pridať od seba - vitajte v komentároch! Veľa šťastia všetkým;)