Izrada animacija u Illustratoru. Izrada GIF-a s prozirnom pozadinom u Illustratoru Uvoz Illustrator datoteka u Flash aplikaciju

Sada malo zakomplicirajmo zadatak - napravimo animirani Flash banner. Naravno, u ovom slučaju nije potrebno govoriti o punopravnoj Flash animaciji - za to postoje specijalizirani paketi. Ali također možete koristiti Illustrator za stvaranje jednostavnog, amaterskog videa.

Nema posebnih alata i sučelja, kao što je vremenska traka, tipičnih za programe za razvoj animacije Adobe Illustrator Ne. Ali postoji jedna suptilnost - slojevi se mogu koristiti kao okviri.

Napravite banner samo s tekstom.

Grupirajte simbole pomoću naredbe Objekt › Grupa(Objekt › Grupa).
Sljedeći zadatak je napraviti konturne objekte od znakova fonta, inače ispravno formiranje slojeva neće funkcionirati. Da biste to učinili, odaberite grupu i odaberite Tip › Stvori obrise(Font › Trag).
Nakon toga otvorite izbornik palete Slojevi(Slojevi) klikom na gumb u obliku strelice na paleti (Sl. 8.11).

Riža. 8.11. Izbornik palete slojeva

Zanima nas naredba u ovom izborniku Otpuštanje na sloj (slijed)(Pretvori u slojeve (uzastopno)) koji prevodi svaki pojedinačni objekt u novi sloj. Imajte na umu da prilikom primjene naredbe grupa mora biti odabrana skupina, a ne sloj Sloj 1.

Kako bi paleta trebala izgledati Slojevi(Slojevi) nakon izvršenja Otpuštanje na sloj (slijed)(Pretvori u slojeve (sekvencijalno)), prikazano na sl. 8.12.

Riža. 8.12. Paleta slojeva nakon puštanja u sloj (niz)

Ovo dovršava pripremu, možete uštedjeti koristeći Spremi za web(Spremi za web) u SWF. SWF je glavni grafički format temeljen na Flash tehnologiji. Točnije bi bilo reći da je to Flash format (Sl. 8.13).

Vjerojatno su danas svi korisnici više ili manje upoznati s Flashom. To je trenutno najčešći format animacije na internetu i koristi se za izradu velike većine multimedijskih web stranica.

Naravno, ni desetina mogućnosti Flasha nije implementirana u Adobe Illustrator, jer program nije dizajniran za to. Međutim, u njemu možete napraviti ili statičnu sliku ili jednostavnu animaciju.

Riža. 8.13. Postavke optimizacije za SWF format

Postoje sljedeće postavke.

Samo za čitanje(Samo čitanje). Ako potvrdite okvir, datoteka će biti zapisana na takav način da se više ne može otvoriti za uređivanje u bilo kojem programu. To s jedne strane smanjuje veličinu datoteka, as druge strane štiti vaša autorska prava.
Postavka s oznakom 1. Parametar koji određuje vrstu spremanja - slika ili animacija.
Ako odaberete opciju AI datoteke u SWF datoteku(Illustrator datoteke u SWF datoteku), slika će biti spremljena kao statična slika točno onako kako vidite na ekranu kada radite u Illustratoru.
Slojevi u SWF okvire(Slojevi u SWF okvire) omogućuje animiranje postojećih slojeva koji će se prikazati kao okviri. Moramo odabrati ovu opciju.
Kvaliteta krivulje(Kvaliteta krivulja). Točnost krivulja koje ponavljaju datoteku krivulja izvorne slike. Smanjenje ove postavke značajno smanjuje kvalitetu, osobito u području malih detalja, ali smanjuje veličinu datoteke. Za naš slučaj, optimalna vrijednost je "7".
okvirna stopa(Kašnjenje okvira). Broj sličica u sekundi i, kao rezultat, brzina animacije. Kako bi učinak bio ispravan, ne postavite više od 4 sličice u sekundi.
petlja(Ponoviti). Pustite animaciju više puta. Prikladno za animacije gdje je važna petlja koja se ponavlja. Banner pripada ovoj vrsti.

Bok svima! Danas ću pokušati napraviti opis značajki programa Adobe Illustrator, uspoređujući ga s mogućnostima ispiranja. Ovo neće biti globalna analiza programa za kosti, već prije opis nekih zanimljivih čipova koje sam otkrio u ovom programu. Podatke sam prikupljao dio po dio dok sam ih proučavao kako bih ih sve stavio u jedan post. Moram odmah priznati da nisam super iskusni ilustrator, tek zadnjih šest mjeseci koristim ga u crtanju (prije toga sam sve crtao u flashu). Mnogi se žale da je ilustrator složen, ne uvijek intuitivan. Donekle se slažem da je nakon flasha ovaj program težak. Ali glavna stvar ovdje nije odustati, već nastaviti učiti. I nakon nekoliko tjedana, javlja se misao, kako sam prije uspio bez njega!

Dakle, ono što mi se svidjelo kod ilustratora i ono što sam pronašao za sebe, a nije u flashu.
1. Počet ću s najjednostavnijim, ali u isto vrijeme potrebnim. Pokušajte rasporediti objekte u krug u flashu. Prethodno je Deko Alat, ali je uklonjen, očito smatran nepotrebnim. Odlučili smo da bi bilo zabavnije to raditi ručno. Illustrator ima ovu funkciju: Efekt - Distort&Transform - Transformacija.

Sve je brzo i jednostavno, vrijednosti (razmak između objekata, broj kopija) postavljamo sami u postavkama.

2. Cik-cak

Još jednostavnija, ali ipak korisna stvar. Čini se sitnica, ali u flashu morate crtati ručno, u ilustratoru je to pitanje sekunde.

3. Deformacija predmeta (Warp)

Ne postoji ništa slično u Flashu. U donjem primjeru pokazao sam samo 2 načina deformiranja jednostavnih oblika (Efekt - Deformacija - Luk / Riba). Zapravo ih je 15. Najnovija verzija programa.

4. Automatsko zaokruživanje kutova (Round Corners)

To se može učiniti ručno: na grafičkom objektu, kada se odabere u kutu (u svim kutovima), pojavi se bijela točka i znak zaobljene linije. Povucite mišem, prilagodite svom ukusu.

Ali to se odnosi samo na oblike, s linijom olovke malo drugačije - primijenite efekt zaokruživanja ( Efekt - Stilizacija - Zaobljeni uglovi). Na izlazu dobivamo isti rezultat.

5. Ogrubjeti

Učinak se primjenjuje na jednostavne forme (Efekt-Iskrivi i transformiraj-Ogrubi). Kao rezultat toga, dobivamo nešto što nalikuje niskopoli 3D modelima. Mislim da je cool :) I što je najvažnije - vrlo jednostavno.

6 Napućivanje i nadimanje(Uvući i napuhati)
Primjer na slici ispod:

7. Proširenje obrasca (Offset Path)

U flashu postoji funkcija Expand Fill (proširenje ispune), ona uopće ne radi s linijama olovke, za razliku od ilustratora.

8. Kistovi (kist za umjetnost, kist za uzorke, kist za raspršivanje)
Pogledajte donju sliku za primjere:

9. Četka za teksturu (četke za teksturu)

U ilustratoru postoji i mnogo kistova za teksture o kojima sam pisao i kako su se pojavili nova verzija bljesak -. Primjećeno je da je korištenje kistova u Adobe Animateu užasno sporo. To je to:(

10. Nisam siguran je li ovo trik, ali želim se fokusirati na četku smiješnog imena mrljaČetka. Nalazi se na alatnoj traci, vrlo lijep kist za korištenje. Ima hrpu postavki, sviđa mi se više nego inače. Teško je riječima objasniti njegove dobrobiti, bolje je jednom probati.

10.Split to Grid

Još jedna korisna značajka je funkcija Split to Grid (Object-Path-Split to Grid) koja vam omogućuje rezanje obrasca na jednake segmente. Na što nas ovo podsjeća? Tako je - prozori u visokoj zgradi. Što se mene tiče, super stvar za crtanje, na primjer, urbanih pejzaža;)

Još jedan koristan alat predstavljen u ilustratoru, vjerojatno od njegovog prvog izdanja. S njim možete stvoriti, na primjer, teksture drva:

12. Pomicanje (desno - Transformacija - Pomicanje)

Pomaknuti objekt za postavljena udaljenost. Po želji možete odmah izraditi kopiju koja će se postaviti na pravu udaljenost od odabranog objekta vodoravno/ili okomito. U više rana verzija flash je bio dodatak koji je izvodio ovu funkciju. Nažalost, ne sjećam se kako se zove.

Vrlo je zgodno stvarati bešavne uzorke u ilustratoru ( Objekt-Pattern-Make). Sjećam se kako sam bjesomučno briljirao u blicu s kreacijom . U ilustratorskoj verziji CC 2015 sve je automatizirano, hrpa postavki pomoći će vam da stvorite uzorak u desecima varijacija, sa samo nekoliko grafičkih elemenata pri ruci. U ranijim verzijama programa sve se moralo raditi ručno, kao do sada u flashu.

(Napomena - uzorak se može pretvoriti u vektorski objekt koji se može uređivati pomoću funkcije parse ( Izgled proširenja objekta).

14. Objekt Mosaic (Mozaik)

Napravite paletu boja na temelju postojeće slike. Zatim uvezite sliku koja vam se sviđa u ilustraciju (Otvori). Objekt - Stvorite mozaik objekata. U postavkama određujemo frekvenciju podjele po visini i širini.

A na izlazu dobivamo:

15. Blend (Miješanje)

Koristi se za stvaranje gradijenata. Možete stvoriti prijelaze korak po korak, kao, na primjer, na slici. Ne mogu reći da ga često koristim, ali možda nekome dobro dođe. Čini mi se da se može koristiti za stvaranje jednostavnih pozadinskih slika.

Alat se također može koristiti za kloniranje objekata. Postavljamo dva objekta na udaljenost jedan od drugog i primjenjujemo Blend Options, odabiremo broj koraka (broj kloniranih objekata).

16. Alat za izradu oblika. Vrlo zgodna stvar za rad s primitivcima. U trenu, kako mi se činilo, manje je zgodno.

Držite Alt i kliknite na odabrane segmente - izbrišite segmente. Ako jednostavno povučemo mišem preko nekoliko odabranih područja – veze.

Dodatak - alat koji pomaže u automatskom rezanju, povezivanju itd. odabrane forme. Što se mene tiče, nije baš zgodno, koristim ga češće Izgraditioblikalat.

(umetničke ploče)

18. Prilagođena ploča s alatima

Mogućnost izrade vlastite alatne trake, odbacivanje nepotrebnih i odabir samo onih koje koristite.

U flashu, umjetničke ploče, odnosno scene ( Scena 1,2,3..) nalaze se zasebno i morate se prebacivati između njih (Shift + F2). U Illustratoru se svi mogu postaviti ispred vaših očiju. Zgodno je kada napravite nekoliko verzija istog crteža, tako da su vam sve opcije pred očima za usporedbu.

19. Izometrija s grafičkim stilovima

I zadnja stvar je stvaranje izometrije bez korištenja 1 klika (ili bolje rečeno, 3 klika, jer imamo 3 strane;) koristeći grafičke stilove ( Grafički stilovi). Kako se to radi, napisat ću sljedeći put.

Ono što je zajedničko ilustratoru s flashom je mogućnost spremanja objekta u simbol (simbol), a taj se simbol također može bez problema prenijeti u flash (otvorite .ai datoteku u flashu, Uvoz - Uvoz na pozornicu).
Simbol u ilustratoru ima ista svojstva kao u flashu.
I na kraju ću napisati što je u ilustratoru, po mom mišljenju, inferiorno u odnosu na flash. Da, da, i postoji. A ovo je alat za popunjavanje ( kanta s bojom). Koliko god se trudio naviknuti na njega u illa-u, praktičniji je u flashu.
Ako su vam moje bilješke postale korisne ili ako želite sami nešto dodati - dobrodošli u komentare! Sretno svima ;)

Nedavno su razne vrste animacija SVG (Scalable Vector Graphics) grafike na web stranicama i aplikacijama postale vrlo popularne. To je zbog činjenice da sve najnoviji preglednici već podržava ovaj format. Evo informacija o podršci preglednika za SVG.

Ovaj članak raspravlja najjednostavniji primjer Lako animirajte SVG vektore jquery dodatak Lazy Line Painter.

izvor

Za dovršenje i potpuno razumijevanje ovog zadatka, poželjno je osnovno poznavanje HTML-a, CSS-a, Jqueryja, ali nije obavezno ako samo želite animirati SVG) Krenimo!

Dakle, koraci koje trebamo slijediti:

Stvorite ispravnu strukturu datoteka
Preuzmite i povežite dodatak
Nacrtajte cool crtež u Adobe Illustratoru
Pretvorite našu sliku u Lazy Line Converter
Zalijepite dobiveni kod u main.js
Dodajte malo CSS-a po ukusu

1. Stvorite ispravnu strukturu datoteke
U tome će nam pomoći Initializr servis gdje je potrebno odabrati parametre kao na slici ispod.

Klasični H5BP (HTML5 Boiler Plate)
Nema predloška
Samo HTML5 Shiv
umanjena
.IE Nastava
Kromirani okvir
Zatim kliknite Preuzmi!

2. Preuzmite i povežite dodatak

Budući da initializr dolazi s najnovijom bibliotekom Jquery, iz arhive koju trebamo preuzeti iz repozitorija projekta Lazy Line Painter, samo 2 datoteke je potrebno prenijeti u naš projekt. Prvi je 'jquery.lazylinepainter-1.1.min.js' (verzija dodatka može se razlikovati) nalazi se u korijenu rezultirajuće mape. Drugi je example/js/vendor/raphael-min.js.

Ove 2 datoteke nalaze se u mapi js. I uključujemo ih u naš index.html prije main.js ovako:

3. Nacrtajte cool okvirnu sliku u Adobe Illustratoru

Nacrtajte našu konturnu sliku u Illustratoru (najlakši način da to učinite je pomoću Pen Tool-a)
Potrebno je da se konture našeg crteža ne zatvaraju, jer za naš učinak trebamo početak i kraj
Ne smije imati ispune
Maksimalna veličina datoteke je 1000×1000 px, 40kb
Izrežimo do granica objekta Object>Artboards>Fit To Artboards Bounds
Spremi kao SVG (standardne postavke spremanja su u redu)

Na primjer, možete koristiti ikone u privitku.

4. Pretvorite našu sliku u Lazy Line Converter
Samo povucite i ispustite svoju ikonu u okvir ispod.
Debljina, boja obrisa i brzina animacije mogu se mijenjati u samom kodu koji će se pojaviti nakon konverzije!

5. Zalijepite dobiveni kod u main.js
Sada samo zalijepite rezultirajući kod u prazna datoteka glavni.js
Parametri:
strokeWidth — debljina obrisa
strokeColor - boja obrisa
Također možete promijeniti brzinu crtanja svakog vektora promjenom vrijednosti parametra trajanja (zadano 600)

6. Dodajte malo CSS-a po ukusu
Ukloni odlomak iz index.html

Pozdrav svijete! Ovo je HTML5 Boilerplate.

I umjesto njega umetnemo blok u kojem će se odvijati naša animacija

zatim dodajte malo CSS-a u datoteku main.css za ljepši izgled:

Tijelo (background:#F3B71C;) #icons (position: fixed; top:50%; left:50%; margin: -300px 0 0 -400px; )

spremiti sve datoteke.
Sada samo otvorite index.html moderan preglednik i uživajte u učinku.

p.s. kada se izvodi na lokalnom računalu, početak animacije može kasniti nekoliko sekundi.

Prozirni GIF u Adobe Illustratoru radi se na sljedeći način. Idite na izbornik Datoteka > Spremi za web i uređaje (Alt+Ctrl+Shift+S). U prozoru koji se otvori, u polju Optimizirani format datoteke, prvo morate otići na karticu veličina slike(veličina slike). Činjenica je da cijela stranica prema zadanim postavkama ulazi u prozor za optimizaciju, a to obično nije potrebno. Stoga na kartici Veličina slike poništite odabir potvrdnog okvira Isječak na Artboard(Crop to fit page) i kliknite gumb Primijeni.

Zatim na popisu za odabir formata odaberite GIF i potvrdite okvir Transparency.

Nakon toga ćemo odrediti koje će boje biti prozirne. Sve boje prisutne na slici sadržane su u kartici tablica boja(Tabela boja) i prikazani su kao kvadratići u boji. Odaberite alat na alatnoj traci na lijevoj strani prozora kapaljka za oči(pipeta).

Boje se mogu definirati na dva načina. Najlakši način je odrediti boju kapaljkom izravno na slici - nakon toga boja će biti istaknuta na tablici boja tamnim potezom. Pa, ako točno znate koja bi boja trebala biti prozirna, možete je odabrati izravno u tablici boja klikom na odgovarajući okvir u boji. I u prvom i drugom slučaju, ako trebate odabrati nekoliko boja, morate raditi s pritisnutom tipkom Shift (ili Ctrl). Nakon odabira boje potrebno je dati instrukciju programu da je učini prozirnom. Da biste to učinili, kliknite na ikonu Preslikava odabrane boje u Transparent(Dodaj odabrane boje prozirnosti). Na slici je ovaj gumb zaokružen, a crvena boja je postavljena na transparentno. Na slici će se pojaviti prozirno područje, a kvadrat na tablici boja će promijeniti svoj izgled - dio će postati bijeli trokut. Da biste poništili odabranu boju, trebate je odabrati u tablici boja, a zatim ponovno kliknuti ikonu Maps selected colors to Transparent.

Nekoliko riječi o načinu postavljanja transparentnosti. Za to je odgovoran padajući izbornik. Navedite algoritam za prozirnost, na ruskom - Algoritam simulacije transparentnosti (slika ispod). Postoje četiri mogućnosti izbora: Bez prozirnosti - bez algoritma, Diffusion Transparency Dither - difuzni algoritam, Pattern Transparency Dither - algoritam temeljen na uzorku i Noise Transparency Dither - algoritam temeljen na šumu. U načinu difuznog algoritma klizač postaje aktivan Iznos(Iznos) koji vam omogućuje promjenu vrijednosti difuzije. Što primijeniti u praksi? Ovisno o namjeni i slici. Ne koristim ovu opciju i uvijek ostavljam zadanu - No Transparency Dither.

Pritisnite Spremi - prozirni GIF je spreman. Rad je obavljen u Adobe Illustrator verziji CS4 (v.14), ali sve radnje i tipkovnički prečaci relevantni su za raniju verziju CS3 (v. 13).

Format Flash datoteka(SWF) na temelju vektorska grafika i dizajniran je za skalabilnu, kompaktnu grafiku za web. Budući da se ovaj format datoteke temelji na vektorskoj grafici, objekt zadržava kvalitetu slike u bilo kojoj rezoluciji i idealan je za izradu okvira animacije. U Illustratoru možete stvoriti pojedinačne okvire animacije na slojevima, a zatim izvesti slojeve slike kao pojedinačne okvire za korištenje na web stranici. Također možete definirati simboli u datoteci Illustrator da biste smanjili veličinu animacije. Prilikom izvoza svaki se simbol definira samo jednom u SWF datoteci.

Naredba za izvoz (SWF)

Pruža najveću kontrolu nad animacijom i kompresijom bitova.

Omogućuje veću kontrolu nad mješavinom SWF i bitmap formata u fragmentiranom izgledu. Ova naredba nudi manje mogućnosti slike nego naredba Izvoz (SWF), ali koristi zadnje korištene opcije naredbe Izvoz (pogledajte ).

Imajte na umu sljedeće smjernice kada pripremate objekt za spremanje kao SWF.

Koristite aplikaciju Device Central da biste vidjeli kako će grafika Illustrator izgledati u aplikaciji Flash Player na raznim ručnim uređajima.

Umetanje grafike Objekt Illustrator

Grafički objekt kreiran u Illustratoru može se brzo, jednostavno i jednostavno kopirati i zalijepiti u Flash aplikaciju.

Kada zalijepite Illustrator grafiku u Flash aplikaciju, sljedeći atributi su sačuvani.

Konture i oblici

Debljina poteza
Definicije gradijenata
Tekst (uključujući OpenType fontove)
Povezane slike
Načini miješanja

Osim toga, Illustrator i Flash podržavaju sljedeće značajke prilikom lijepljenja grafike.

Prilikom odabira slojeva u ilustraciji Illustrator vrhunska razina U cijelosti i lijepljenjem u Flash aplikaciju, slojevi i njihova svojstva (vidljivost i blokiranje) su sačuvani.

Illustrator formate boja koji nisu RGB (CMYK, sivi tonovi i prilagođeni formati) Flash pretvara u RGB format. RGB boje se ubacuju na uobičajen način.

Kada uvezete ili zalijepite umjetničko djelo Illustrator, možete koristiti različite opcije za spremanje određenih efekata (kao što je sjena koju baca tekst) kao Flash filtera.

Flash sprema Illustrator maske.

Izvezite SWF datoteke iz Illustrator

SWF datoteke izvezene iz Illustrator iste su kvalitete i kompresije kao SWF datoteke izvezene iz Flasha.

Prilikom izvoza možete birati između niza unaprijed definiranih stilova za optimalan izlaz i odrediti kako se koristi više umjetničkih ploča, kako se znakovi, slojevi, tekst i maske pretvaraju. Na primjer, možete odabrati izvoz Illustrator simbola kao filmova ili grafičke slike, kao i stvaranje SWF simbola iz Illustrator slojeva.

Uvoz Illustrator datoteka u Flash aplikaciju

Da biste izradili potpuni izgled u Illustratoru i zatim ga uvezli u Flash u jednom koraku, možete spremiti umjetničko djelo na vlastiti format Illustrator (AI) i uvezite ga s visokom vjernošću u Flash koristeći File > Import To Stage ili File > Import To Library.

Ako Illustrator datoteka sadrži više artboarda, odaberite artboard za uvoz iz dijaloškog okvira Flash Import i odredite postavke za svaki sloj u tom artboardu. Svi objekti u odabranoj ploči uvoze se u Flash kao jedan sloj. Kada uvezete drugu radnu ploču iz iste AI datoteke, objekti s te ploče uvoze se u Flash kao novi sloj.

Prilikom uvoza ilustracija Illustrator kao AI, EPS ili PDF aplikacija Flash zadržava iste atribute kao i kad umetnete Illustrator grafiku. Također, ako Illustrator datoteka koju uvozite sadrži slojeve, možete ih uvesti pomoću jedne od sljedećih metoda.

Pretvorite slojeve Illustrator u Flash slojeve.

Pretvorite slojeve Illustrator u Flash okvire.

Pretvorite sve Illustrator slojeve u jedan Flash sloj.