Transparentni 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 prijeć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 potvrdni okvir Isječak na Artboard(Obrežite stranicu kako bi odgovarala) i kliknite gumb Primijeni.

Zatim na popisu za odabir formata odaberite GIF i označite potvrdni okvir Transparentnost.

Nakon toga ćemo odrediti koje će boje biti prozirne. Sve boje prisutne na slici nalaze se na kartici tablica boja(Tabela boja) i prikazani su kao kvadrati u boji. Odaberite alat s alatne trake 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 će boja biti istaknuta na tablici boja tamnim potezom. Pa, ako točno znate koja boja treba biti prozirna, možete je odabrati izravno na 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 što odaberete boju, trebate dati instrukciju programu da bude prozirna. Da biste to učinili, kliknite na ikonu Preslikava odabrane boje na Transparent(Dodajte odabrane boje prozirnosti). Na slici je ovaj gumb zaokružen, a crvena boja postavljena je na prozirnu. 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 Mapira odabrane boje u Transparent.

Nekoliko riječi o načinu postavljanja transparentnosti. Za to je odgovoran padajući izbornik. Odredite algoritam Transparency Dither, na ruskom - Algoritam za simulaciju transparentnosti (sl. ispod). Postoje četiri izbora: No Transparency Dither - bez algoritma, Diffusion Transparency Dither - difuzni algoritam, Pattern Transparency Dither - algoritam temeljen na uzorcima i Noise Transparency Dither - algoritam koji se temelji na buci. U načinu difuznog algoritma, klizač postaje aktivan Iznos(Količina) koja 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 - transparentni GIF je spreman. Rad je obavljen u Adobe Illustrator verziji CS4 (v.14), ali sve radnje i tipkovnički prečaci su relevantni za raniju verziju CS3 (v. 13).

Sada ćemo malo zakomplicirati 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.

U Adobe Illustratoru nema posebnih alata i alata sučelja, poput vremenske trake, tipičnih za programe za razvoj animacije. Ali postoji jedna suptilnost - slojevi se mogu koristiti kao okviri.

Napravite banner samo s tekstom.

1. Grupirajte simbole s naredbom Objekt › Grupa(Objekt › Grupa).
2. 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 Upišite › Napravite obrise(Font › Trag).
3. Nakon toga otvorite izbornik paleta Slojevi(Slojevi) klikom na gumb u obliku strelice na paleti (slika 8.11).

Riža. 8.11. Izbornik palete slojeva

Zanima nas naredba u ovom izborniku Pusti na sloj (slijed)(Pretvori u slojeve (uzastopno)) koji prevodi svaki pojedinačni objekt na 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 Pusti na sloj (slijed)(Pretvori u slojeve (uzastopno)), prikazano na sl. 8.12.

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

Time je priprema završena, možete uštedjeti koristeći Spremi za web(Spremi za web) u SWF. SWF je glavni grafički format baziran na Flash tehnologijama. Točnije bi bilo reći da se radi o Flash formatu (slika 8.13).

Vjerojatno su danas svi korisnici manje-više 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, čak ni desetina mogućnosti Flasha nije implementirana u Adobe Illustrator, jer program za to nije dizajniran. 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 način da se više ne može otvoriti za uređivanje ni u jednom programu. To, s jedne strane, smanjuje veličinu datoteka, a s druge strane štiti vaša autorska prava.
• Postavka označena s 1. Parametar koji određuje vrstu spremanja - slika ili animacija.
• Ako odaberete opciju AI datoteka u SWF datoteku(Datoteka Illustrator u SWF datoteku), slika će biti spremljena kao statična slika točno kao ono što vidite na zaslonu kada radite u Illustratoru.
• Slojevi u SWF okvire(Slojevi u SWF okvire) omogućuje vam da animirate postojeće slojeve, 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, posebno u području malih detalja, ali smanjuje veličinu datoteke. Za naš slučaj, optimalna vrijednost je "7".
• okvirna stopa(Kašnjenje kadra). Brzina kadrova i, kao rezultat, brzina animacije. Da bi učinak bio ispravan, ne postavite više od 4 sličice u sekundi.
• petlja(Ponoviti). Reproduciraj animaciju više puta. Prikladno za animacije gdje je važna petlja koja se ponavlja. Banner pripada ovoj vrsti.

Adobe Illustrator i After Effects
Uvoz i jednostavna animacija

Zdravo. Danas pregledavamo jednostavnu animaciju u After Effectsu.

Resursi: Adobe Illustrator CC
Adobe After Effects CC

Počnimo s crtanjem u Illustratoru.

Crtamo
1) Nacrtajte žuti pravokutnik kao pozadinu

Slika 1 - Pravokutnik

2) Nacrtajte krug i ispunite ga gradijentom
Poradimo malo na krugu:
- uklonite donju točku na konturi, dobivamo luk;
- nacrtajte ravnu liniju, zatvarajući dno luka, dobivamo polukrug

Slika 2 - 1) nacrtati krug; 2) gradijent; 3) brisanje točke

3) Nacrtajte pravokutnik i napravite njegovu kopiju
- jedan sivi pravokutnik;
- još jedan tamno sivi pravokutnik
4) Nacrtajte trokut iz zvjezdice postavljanjem broja zraka - 3

Slika 3 - 1) pravo svjetlo; 2) pravocrtno tamno; 3) trokut

5) Nacrtajte mačku olovkom i jednostavnim oblicima

Slika 4 - 1) glava; 2) vrat; 3) tijelo; 4) noga; 5) rep

A sada najviše GLAVNI trenutak
Podijelimo slike u slojeve (ono što će biti animirano - na zasebnom sloju) ovako:

Slika 5 - sve slike (crvena oznaka važnih slojeva)

Sve, sada štedimo.
Pogledajmo postavke spremanja

Slika 6 - Spremi

A sada sljedeća faza. ZatvoritiAdobe Illustrator i otvorite After Effects.

Uvezi u After Effects
Datoteka - Uvoz - Datoteka - odaberite našu spremljenu datoteku Ilustrator.
Odaberimo uvoz slojeva iz Illustratora, ako stavimo snimke, dobit ćemo sliku sa spojenim slojevima, ali ovo nam ne treba.

Slika 7 - Uvezi kao sastav

Sve uvezeno.
Sad da vidimo što imamo. Dvaput kliknite na sastav , što bi se otvorilo i vidjeli bismo slojeve (ako je sve napravljeno kako treba, bit će nekoliko slojeva). Dobili smo ovo, pogledajte sliku

Slika 8 - Otvorena kompozicija

A sada ono zbog čega smo danas ovdje - Animacija.

Animacija u poslije učinci
Postavite središnju točku na strelicu na vrhu pomoću alata Pan Behind Tool (prečac - Y). Samo uzmite točku i pomaknite je kamo želite. Kao rezultat, to će izgledati ovako..

Slika 9 - Alat za pomicanje i slojevi

To je to, sada prijeđimo na slojeve za animaciju.
Trebamo sloj sa strelicama i Head_cat.
Počnimo sa strelicom.
Proširite popis, pronađite i kliknite na sat. Dakle, prvu točku stavljamo na nulu druge. Ukupno će animacija trajati 2 sekunde.
Dakle, ovo su postavke koje trebate napraviti (ukupno ćemo staviti 3 boda)

Drugi	0	1	2
	+66	- 70	+66

Ovako će to izgledati:

Slika 10 - Strelica za rotaciju

Sada animiramo mačku glavu.
Proširite head_cat i pronađite Položaj.
Bit će 4 boda.
Promijenit će samo posljednju koordinatu bez dodirivanja ostatka.

Drugi	0.1	0.17	1.12	2.0
Položaj	689.3	729.3	729.3	689.3

Pogledajmo sliku.

Slika 11 - Glava položaja

Dakle, princip animacije je bio ovakav. Strijela se njiše s jedne na drugu stranu, čim se približi mačiću, on uvlači glavu u sebe, zadržava se malo u tom položaju, a zatim ga vraća na svoje mjesto.

Završna faza

Proizvodnja
Od svog rada morate stvoriti gotov proizvod.
Idite na izbornik - Dodaj u red za renderiranje
Otvara se ploča Render i u izlaznom modulu (dva klika) odaberite izlazni format. Uzeo sam *.mov

Slika 12 - Render

Kliknite na gumb RENDER i dobit ćete rezultat (ne zaboravite navesti put).
To je sve.

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

Ovaj članak opisuje najjednostavniji primjer animacije SVG vektora pomoću laganog Jquery dodatka Lazy Line Painter.

izvor

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

Dakle, koraci koje moramo slijediti:

1. Napravite ispravnu strukturu datoteke
2. Preuzmite i povežite dodatak
3. Nacrtajte kul linijsku umjetnost u Adobe Illustratoru
4. Pretvorite našu sliku u Lazy Line Converter
5. Zalijepite rezultirajući kod u main.js
6. Dodajte malo CSS-a po ukusu

1. Napravite ispravnu strukturu datoteke
U tome će nam pomoći servis Initializr, gdje trebate odabrati parametre kao na slici ispod.

• Klasični H5BP (HTML5 kotlovska ploča)
• Nema predloška
• Samo HTML5 Shiv
• minimiziran
• .IE klase
• Kromirani okvir
• Zatim kliknite Preuzmi!

2. Preuzmite i povežite dodatak

Budući da inicijalizr dolazi s najnovijom bibliotekom Jquery, iz arhive koju trebamo preuzeti iz repozitorija projekta Lazy Line Painter, u naš projekt je potrebno prenijeti samo 2 datoteke. 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 smještene su u mapu js. I mi ih uključujemo u naš index.html prije main.js ovako:

3. Nacrtajte cool obris slike u Adobe Illustratoru

1. Nacrtajte našu konturnu sliku u Illustratoru (najlakši način da to učinite je alatom Pen Tool)
2. Potrebno je da se konture našeg crteža ne zatvaraju, jer za naš učinak trebamo početak i kraj
3. Ne bi trebao imati punjenja
4. Maksimalna veličina datoteke je 1000×1000 px, 40 kb
5. Izrežimo na granice objekta Objekt>Umjetne ploče>Prilagodi granicama umjetnih ploča
6. 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 rezultirajući kod u main.js
Sada samo zalijepite rezultirajući kod u praznu datoteku main.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 ubacujemo blok u kojem će se odvijati naša animacija

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

Tijelo (pozadina:#F3B71C; ) #ikone (pozicija: fiksna; vrh:50%; lijevo:50%; margina: -300px 0 0 -400px; )

spremite sve datoteke.
Sada samo otvorite index.html u modernom pregledniku i uživajte u efektu.

p.s. kada se izvodi na lokalnom stroju, početak animacije može biti odgođen za nekoliko sekundi.

Zdravo! Danas ću pokušati opisati značajke programa Adobe Illustrator, uspoređujući ga s mogućnostima ispiranja. Ovo neće biti globalna analiza programa za kosti, već opis nekih od zanimljivih čipova koje sam otkrio u ovom programu. Skupljao sam informacije dio po dio dok sam ih proučavao kako bih sve stavio u jedan post. Moram odmah priznati da nisam superiskusan korisnik ilustratora, samo ga zadnjih šest mjeseci koristim 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 studirati. I nakon par tjedana se nameće misao, kako sam se prije snašla bez toga!

Dakle, ono što mi se svidjelo kod ilustratora, a što sam pronašao za sebe da nije u flashu.
1. Počet ću s najjednostavnijim, ali u isto vrijeme potrebnim. Pokušajte složiti predmete u krug u flashu. Prije je bio Deko alat, ali je uklonjen, očito smatran nepotrebnim. Odlučili smo da bi bilo zabavnije to raditi ručno. Illustrator ima ovu značajku: Efekt - Distort&Transform - Transform.

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

2. Cik-cak

Još jednostavnija, ali ipak korisna stvar. Činilo bi se sitnica, ali u flashu morate crtati rukom, u ilustratoru je to pitanje sekundi.

3. Deformacija objekata (Warp)

U Flashu nema ništa slično ovome. U donjem primjeru pokazao sam samo 2 načina deformacije jednostavnih oblika (Efekt - Warp - Arc / Fish). Zapravo, u posljednjoj verziji programa ima ih 15.

4. Automatsko zaokruživanje uglova (Round Corners)

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

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

5. Ogrubjeti

Učinak se primjenjuje na jednostavne oblike ( Effect-Distort&Transform-Roughen). Kao rezultat, dobivamo nešto nalik low-poly 3D modelima. Mislim da je cool :) I što je najvažnije - vrlo jednostavno.

6 Nabiranje i nadimanje(Uvucite i napuhnite)
Primjer na slici ispod:

7. Proširenje obrasca (Offset Path)

U flashu postoji funkcija Expand Fill (fill ekstenzija), ona uopće ne radi s olovkom, za razliku od ilustratora.

8. Kistovi (umjetnički kist, kist za uzorke, kist za raspršivanje)
Pogledajte sliku ispod za primjere:

9. Kist za teksturu (četke za teksturu)

U ilustratoru ima i mnogo kistova za teksturu o kojima sam pisao i kako su se pojavili u novoj verziji flasha - . Primijeć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 usredotočiti na kist smiješnog imena mrljaČetka. Smješten 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 opisati njegove prednosti, 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 izrezivanje 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 krajolika;)

Još jedan koristan alat uveden u ilustrator, vjerojatno od njegovog prvog izdanja. Pomoću njega možete stvoriti, na primjer, drvene teksture:

12. Pomakni (desno - Transformiraj - Pomakni)

Pomaknite objekt za zadanu udaljenost. Po želji možete odmah izraditi kopiju koja će biti postavljena na željenu udaljenost od odabranog objekta vodoravno/ili okomito. U ranijoj verziji flasha postojao je dodatak koji je obavljao ovu funkciju. Nažalost, ne sjećam mu se imena.

Vrlo je prikladno stvoriti bešavne uzorke u ilustratoru ( Objekt-Uzorak-Napravi). Sjećam se kako sam bjesomučno briljirao u bljesku kreiranjem . U ilustratorskoj verziji CC 2015 sve je automatizirano, hrpa postavki pomoći će vam da napravite uzorak u desecima varijacija, uz 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 učiniti vektorskim objektom koji se može uređivati ​​pomoću funkcije raščlanjivanja ( Izgled za proširenje objekta).

14. Mozaik predmeta (mozaik)

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

I na izlazu dobivamo:

15.Blend (miksanje)

Koristi se za stvaranje gradijenta. Možete stvoriti korak-po-korak prijelaze, 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 u stvaranju jednostavnih pozadinskih slika.

Alat se također može koristiti za kloniranje objekata. Postavljamo dva objekta na udaljenosti 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žeći Alt i klikom 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. odabranim oblicima. Što se mene tiče, nije baš zgodno, koristim ga češće Izgraditioblikalat.

(umjetničke ploče)

18. Prilagođena ploča s alatima

Mogućnost stvaranja vlastite alatne trake, odbacivanja nepotrebnih i odabira 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 pred vašim očima. Zgodno je kada napravite nekoliko verzija istog crteža, tako da vam sve opcije budu 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;) pomoću grafičkih stilova ( Grafički stilovi). Kako se to radi, napisat ću sljedeći put.

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