Transparentni GIF u Adobe Illustratoru radi se na sljedeći način. Idite na meni File > Save for Web & Devices (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 po defaultu ulazi u prozor za optimizaciju, a to obično nije potrebno. Stoga, na kartici Veličina slike poništite izbor u polju za potvrdu Isječak na Artboard(Izrežite stranicu tako da odgovara) i kliknite na dugme Primijeni.

Zatim na listi za odabir formata odaberite GIF i potvrdite okvir Transparentnost.

Nakon toga ćemo odrediti koje će boje biti prozirne. Sve boje prisutne na slici nalaze se na kartici tabela boja(Tabela boja) i prikazani su kao kvadrati u boji. Odaberite alat na traci sa alatkama na lijevoj strani prozora kapaljka za oči(pipeta).

Boje se mogu definirati na dva načina. Najlakši način je da navedete boju kapaljkom direktno na slici - nakon toga će boja biti istaknuta na tabeli boja tamnim potezom. Pa, ako tačno znate koja boja treba da bude prozirna, možete je odabrati direktno na tabeli boja klikom na odgovarajući okvir u boji. A u prvom i drugom slučaju, ako trebate odabrati nekoliko boja, morate raditi s pritisnutim tipkom Shift (ili Ctrl). Nakon odabira boje, potrebno je da naložite programu da je učini transparentnom. Da biste to učinili, kliknite na ikonu Mapira odabrane boje u Transparent(Dodajte odabrane boje prozirnosti). Na slici je ovo dugme zaokruženo, a crvena boja je postavljena na prozirnu. Na slici će se pojaviti prozirna oblast, a kvadrat na tablici boja će promijeniti svoj izgled - dio će postati bijeli trokut. Da biste poništili odabranu boju, potrebno je da je odaberete u tabeli boja, a zatim ponovo kliknite na ikonu Mapira izabrane boje u prozirnu.

Nekoliko riječi o načinu postavljanja transparentnosti. Za to je odgovoran padajući meni. 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 zasnovan na uzorcima i Noise Transparency Dither - algoritam zasnovan na buci. U režimu difuznog algoritma, klizač postaje aktivan Iznos(Količina) koja vam omogućava da promijenite vrijednost difuzije. Šta primijeniti u praksi? U zavisnosti od namjene i slike. Ne koristim ovu opciju i uvijek ostavljam zadanu vrijednost - Bez prozirnosti.

Pritisnite Sačuvaj - transparentni GIF je spreman. Rad je obavljen u Adobe Illustrator verziji CS4 (v.14), ali sve radnje i prečice na tastaturi su relevantne za raniju verziju CS3 (v. 13).

Sada ćemo malo zakomplikovati zadatak - napravimo animirani Flash banner. Naravno, u ovom slučaju nije potrebno govoriti o punopravnoj Flash animaciji - za to postoje specijalizirani paketi. Ali možete koristiti i Illustrator za kreiranje jednostavnog, amaterskog videa.

U Adobe Illustratoru nema posebnih alata i alata za interfejs, kao što je vremenska linija, koji su tipični za programe za razvoj animacije. Ali postoji jedna suptilnost - slojevi se mogu koristiti kao okviri.

Napravite baner samo sa tekstom.

1. Grupirajte simbole komandom Objekt › Grupa(Objekat › Grupa).
2. Sljedeći zadatak je napraviti konturne objekte od znakova fonta, inače pravilno formiranje slojeva neće funkcionirati. Da biste to učinili, odaberite grupu i odaberite Upišite › Kreirajte obrise(Font › Trace).
3. Nakon toga otvorite meni paleta Slojevi(Slojevi) klikom na dugme u obliku strelice na paleti (slika 8.11).

Rice. 8.11. Meni palete slojeva

Zanima nas komanda u ovom meniju Pusti na sloj (sekvenca)(Pretvori u slojeve (uzastopno)) koji prevodi svaki pojedinačni objekt na novi sloj. Imajte na umu da prilikom primjene naredbe, grupa mora biti odabrana grupa, ne sloj Sloj 1.

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

Rice. 8.12. Paleta slojeva nakon puštanja u sloj (sekvence)

Ovim je priprema završena, možete uštedjeti koristeći Sačuvaj za Web(Sačuvaj za Web) u SWF. SWF je glavni grafički format baziran na Flash tehnologijama. Tačnije bi bilo reći da je ovo Flash format (slika 8.13).

Vjerovatno su danas svi korisnici manje-više upoznati sa Flashom. To je trenutno najčešći format animacije na Internetu i koristi se za izradu velike većine multimedijalnih web stranica.

Naravno, čak ni desetina mogućnosti Flash-a 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.

Rice. 8.13. Postavke optimizacije za SWF format

Postoje sljedeće postavke.

• Samo za čitanje(Samo čitanje). Ako označite polje, datoteka će biti zapisana na način da se više ne može otvoriti za uređivanje ni u jednom programu. Ovo, s jedne strane, smanjuje veličinu fajlova, a s druge strane štiti vaša autorska prava.
• Postavka označena sa 1. Parametar koji određuje tip snimanja - slika ili animacija.
• Ako odaberete opciju AI fajl u SWF fajl(Datoteka Illustrator u SWF datoteku), slika će biti sačuvana kao statična slika baš kao što vidite na ekranu kada radite u Illustratoru.
• Slojevi u SWF okvire(Slojevi u SWF okvire) vam omogućava da animirate postojeće slojeve, koji će biti prikazani kao okviri. Moramo izabrati ovu opciju.
• Curve Quality(Kvalitet krivih). Preciznost krivulja koje ponavlja datoteku krivulja originalne 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".
• broj kadrova(Kašnjenje kadra). Brzina kadrova i, kao rezultat, brzina animacije. Da bi efekat bio ispravan, ne postavite više od 4 kadra u sekundi.
• petlja(ponoviti). Pustite animaciju više puta. Pogodno za animacije gdje je važna petlja koja se ponavlja. Baner pripada ovoj vrsti.

Adobe Illustrator i After Effects
Uvoz i jednostavna animacija

Zdravo. Danas recenziramo jednostavnu animaciju u After Effects.

Resursi: Adobe Illustrator CC
Adobe After Effects CC

Počnimo crtanjem u Illustratoru.

Crtamo
1) Nacrtajte žuti pravougaonik kao pozadinu

Slika 1 - Pravougaonik

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

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

3) Nacrtajte pravougaonik i napravite njegovu kopiju
- jedan sivi pravougaonik;
- još jedan tamno sivi pravougaonik
4) Nacrtajte trougao od zvjezdice postavljanjem broja zraka - 3

Slika 3 - 1) pravo svetlo; 2) pravo tamno; 3) trougao

5) Nacrtajte mačku olovkom i jednostavnim oblicima

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

A sada najviše MAIN momenat
Podijelimo slike u slojeve (ono što će biti animirano - na posebnom sloju) ovako:

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

Sve, sada štedimo.
Pogledajmo postavke spremanja

Slika 6 - Sačuvaj

A sada sledeća faza. ZatvoriAdobe Illustrator i otvorite After Effects.

Uvezi u After Effects
Datoteka - Uvoz - Datoteka - odaberite naš sačuvani fajl Ilustrator.
Odaberemo da uvezemo slojeve iz Illustratora, ako stavimo snimak, dobićemo sliku sa spojenim slojevima, ali ovo nam ne treba.

Slika 7 - Uvezi kao sastav

Sve uvezeno.
Sada da vidimo šta imamo. Dvaput kliknite na kompoziciju , šta bi se otvorilo i vidjeli bismo slojeve (ako je sve urađeno 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 naknadni efekti
Postavite tačku okretanja na strelicu na njenom vrhu pomoću alata Pan Behind Tool (prečica - Y). Samo uzmite tačku i pomjerite je gdje želite. Kao rezultat, to će izgledati ovako..

Slika 9 – Alat za pomicanje i slojevi

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

Sekunda	0	1	2
	+66	- 70	+66

Ovako će to izgledati:

Slika 10 - Strelica za rotaciju

Sada animiramo glavu mačke.
Proširite head_cat i pronađite pozicija.
Bit će 4 boda.
Promijenit će samo posljednju koordinate bez dodirivanja ostatka.

Sekunda	0.1	0.17	1.12	2.0
pozicija	689.3	729.3	729.3	689.3

Pogledajmo sliku.

Slika 11 - Položaj glave

Dakle, princip animacije je bio ovakav. Strelica 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 meni - Dodaj u red za renderiranje
Otvara se panel Render i u izlaznom modulu (dva klika) izaberite izlazni format. Uzeo sam *.mov

Slika 12 - Render

Kliknite na dugme RENDER i dobijte rezultat (ne zaboravite navesti putanju).
To je sve.

Nedavno su različite vrste animacije SVG (Scalable Vector Graphics) grafike na web stranicama i aplikacijama postale vrlo popularne. To je zbog činjenice da svi najnoviji pretraživači već podržavaju ovaj format. Evo informacija o podršci pretraživača za SVG.

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

izvor

Da biste dovršili i u potpunosti razumjeli ovaj zadatak, osnovno poznavanje HTML-a, CSS-a, Jqueryja je poželjno, ali nije neophodno ako samo želite da animirate SVG) Počnimo!

I tako koraci koje trebamo slijediti:

1. Kreirajte 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. Kreirajte ispravnu strukturu datoteke
U tome će nam pomoći servis Initializr, gdje je potrebno odabrati parametre kao na slici ispod.

• Klasični H5BP (HTML5 kotlovska ploča)
• No Template
• Samo HTML5 Shiv
• minimiziran
• .IE Classes
• Kromirani okvir
• Zatim kliknite Preuzmi!

2. Preuzmite i povežite dodatak

Pošto inicijalizr dolazi sa najnovijom Jquery bibliotekom, iz arhive koju treba da preuzmemo iz repozitorija projekta Lazy Line Painter, samo 2 fajla treba da se prenesu u naš projekat. 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 su smještene u js folder. I mi ih uključujemo u naš index.html prije main.js ovako:

3. U Adobe Illustratoru nacrtajte kul okvirnu sliku

1. Nacrtajte našu konturnu sliku u Illustratoru (najlakši način da to učinite je pomoću alata Pen Tool)
2. Potrebno je da se konture našeg crteža ne zatvaraju, jer za naš efekat trebamo početak i kraj
3. Ne bi trebalo imati punjenja
4. Maksimalna veličina datoteke je 1000×1000 px, 40 kb
5. Izrežimo do granica objekta Objekt>Umjetne ploče>Prilagodi granicama umjetničkih ploča
6. Sačuvaj kao SVG (standardne postavke spremanja su u redu)

Na primjer, možete koristiti ikone u prilogu.

4. Pretvorite našu sliku u Lazy Line Converter
Samo prevucite i ispustite svoju ikonu u okvir ispod.
Debljina, boja obrisa i brzina animacije mogu se promijeniti 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 (podrazumevano 600)

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

Zdravo 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 fajl za ljepši izgled:

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

sačuvajte sve datoteke.
Sada samo otvorite index.html u modernom pretraživaču i uživajte u efektu.

P.S. kada se radi na lokalnoj mašini, početak animacije može biti odgođen za nekoliko sekundi.

Zdravo! Danas ću pokušati da opišem karakteristike programa Adobe Illustrator, upoređujući to sa mogućnostima ispiranja. Ovo neće biti globalna analiza programa za kosti, već opis nekih od zanimljivih čipova koje sam otkrio u ovom programu. Sakupljao sam informacije dio po dio dok sam ih proučavao kako bih sve stavio u jedan post. Moram odmah priznati da nisam super iskusan korisnik ilustratora, samo ga zadnjih šest mjeseci koristim u crtanju (prije toga sam sve crtao blic). Mnogi se žale da je ilustrator složen, ne uvijek intuitivan. Donekle se slažem da je ovaj program nakon flasha težak. Ali glavna stvar ovdje nije odustati, već nastaviti učiti. I nakon par sedmica se nameće misao, kako sam se prije snašao bez toga!

Dakle, ono što mi se svidjelo kod ilustratora, a ono što sam pronašao za sebe nije u flashu.
1. Počeću s najjednostavnijim, ali u isto vrijeme neophodnim. Pokušajte da u blic rasporedite predmete u krug. Ranije je bio Deco Tool, ali je uklonjen, očigledno smatran nepotrebnim. Odlučili smo da bi bilo zabavnije to raditi ručno. Illustrator ima ovu funkciju: Efekat - 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)

Ništa slično ovome nema u Flashu. U primjeru ispod, pokazao sam samo 2 načina za deformaciju jednostavnih oblika (Efekat - Warp - Arc / Fish). Zapravo, ima ih 15 u najnovijoj verziji programa.

4. Automatsko zaokruživanje uglova (Round Corners)

To se može uraditi ručno: na grafičkom objektu, kada se izabere u uglu (u svim uglovima), pojavljuje se bijela tačka i znak zaobljene linije. Prevucite mišem, prilagodite svom ukusu.

Ali ovo se odnosi samo na oblike, s linijom olovke malo drugačije - primijenite efekat zaokruživanja ( Efekat - Stilizacija - Zaobljeni uglovi). Na izlazu dobijamo isti rezultat.

5. Roughen

Efekat se primjenjuje na jednostavne oblike ( Effect-Distort&Transform-Roughen). Kao rezultat, dobijamo nešto što liči na low-poly 3D modele. Mislim da je cool :) I što je najvažnije - vrlo jednostavno.

6 Pucker&Bloat(Uvucite i naduvajte)
Primjer na slici ispod:

7. Ekstenzija obrasca (Offset Path)

U flash-u postoji funkcija Expand Fill (popuna ekstenzija), ona uopće ne radi sa olovkom, za razliku od ilustratora.

8. Četke (Umjetnički kist, Kist za uzorke, Scatter Brush)
Pogledajte sliku ispod za primjere:

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

U ilustratoru ima i mnogo teksturnih četkica o kojima sam pisao i kako su se pojavili u novoj verziji flash-a - . Primijećeno je da je upotreba četkica u Adobe Animateu užasno spora. To je to:(

10. Nisam siguran da li je ovo trik, ali želim da se fokusiram na kist sa smiješnim imenom mrljaČetka. Smješten na alatnoj traci, vrlo lijepa četka za korištenje. Ima gomilu podešavanja, 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 funkcija je Split to Grid (Object-Path-Split to Grid) funkcija koja vam omogućava da izrežete obrazac na jednake segmente. Na šta 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 uveden u ilustrator, vjerovatno od njegovog prvog izdanja. Pomoću njega možete kreirati, na primjer, teksture drveta:

12. Pomakni (desno - Transformiraj - Pomjeri)

Pomaknite objekt za datu udaljenost. Ako želite, možete odmah kreirati kopiju koja će biti postavljena na željenoj udaljenosti od odabranog objekta horizontalno/ili okomito. U ranijoj verziji flash-a postojao je dodatak koji je obavljao ovu funkciju. Nažalost, ne sjećam se njegovog imena.

Vrlo je zgodno kreirati bešavne uzorke u ilustratoru ( Objekat-uzorak-napravi). Sjećam se kako sam mahnito briljirao u bljesku sa stvaranjem . U ilustratorskoj verziji CC 2015 sve je automatizirano, gomila postavki pomoći će vam da kreirate uzorak u desetinama 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 učiniti vektorskim objektom koji se može uređivati ​​pomoću funkcije parse ( Object-Expand Appearance).

14. Objektni mozaik (Mozaik)

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

I na izlazu dobijamo:

15.Blend (miksanje)

Koristi se za kreiranje gradijenata. Možete kreirati prelaze 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 kreiranje 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, biramo broj koraka (broj kloniranih objekata).

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

Držeći Alt i klikom na odabrane segmente - izbrišite segmente. Ako jednostavno prevučemo miša 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, češće ga koristim Buildoblikalat.

(umjetničke ploče)

18.Custom Tool Panel

Mogućnost kreiranja 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 odvojeno i potrebno je da prelazite između njih (Shift + F2). U illustratoru, sve se 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 radi poređenja.

19. Izometrija sa grafičkim stilovima

I posljednja stvar je kreiranje izometrije bez korištenja 1 klika (ili bolje rečeno, 3 klika, jer imamo 3 strane;) korištenjem grafičkih stilova ( Grafički stilovi). Kako se to radi, pisaću sledeći put.

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