Adobe Illustrator CC za LuckyTemplates Cheat Sheet

Mnoge od najdramatičnijih promjena u načinu korištenja Illustratora događaju se u području prevođenja vektorskih slika na web, a podcijenjeni SVG format ključna je poveznica u tom procesu. SVG datoteke održavaju cijenjene značajke skalabilnosti vektorskih umjetničkih djela i gotovo su univerzalno podržane na web stranicama i web razvojnim okruženjima. Kada pripremate vektorsku umjetnost za web, važno je izbjegavati Illustratorove standardne efekte i umjesto toga koristiti SVG filtere.

Illustrator dolazi s pristojnim, ali minimalističkim skupom SVG filtara, ali evo nekoliko savjeta o tome kako pronaći i dodati SVG filtre, kao i resurse za stvaranje vlastitih SVG filtara. Za one koji rade s programerima weba i aplikacija, učinite im život lakšim i produktivnijim provjeravanjem cheat sheeta za predaju SVG koda.

Kako primijeniti SVG filtere u Illustratoru

Kada stvarate SVG datoteke za zaslone u Illustratoru i želite primijeniti efekte (poput padajućih sjena), trebali biste ih primijeniti kao SVG filtre. Na taj način vaše SVG datoteke zadržavaju beskonačnu skalabilnost bez izobličenja.

Sljedeći koraci vode vas kroz primjenu SVG filtra na grafiku u Illustratoru:

Odaberite objekt(e) na koje primjenjujete filtar.

Odaberite Učinak→SVG filtri.

Odaberite filtar s popisa koji se pojavi.
Većina filtara ima opisne nazive. Na primjer, oni sa sjenom u nazivu su drop-shadows, oni s gaussovom u imenu su gaussova zamućenja. Tijek rada je malo čudan i zaobilazan, ali prvo morate odabrati filtar da biste pristupili svim dostupnim opcijama za njegovu primjenu.

Za promjenu odabranog filtra:

• Ostavite odabranim objekt na koji je primijenjen filtar i otvorite ploču Izgled odabirom Prozor→Izgled.
• Na ploči Izgled kliknite SVG filtar koji se pojavljuje u odjeljku Ispuna na ploči. Otvara se ploča Primijeni SVG filtar.
• Na ploči Primijeni SVG filtar promijenite primijenjeni filtar.
• Da biste vidjeli kako će filtar izgledati, potvrdite okvir Pregled, kao što je prikazano na slici.
  

Nakon što se odlučite za filtar, kliknite U redu na ploči Primijeni SVG filtar.

Kako dodati SVG filtere u Illustrator

Illustratorov skup SVG filtara je minimalistički, ali ga možete poboljšati dizajnom vlastitih filtara ili preuzimanjem unaprijed zapakiranih skupova SVG filtara iz online izvora. Dizajniranje filtara uključuje kodiranje, ali je izvedivo ako ste zadovoljni HTML-om. Preporučam vodič na w3Schools za izradu SVG filtara. Ili možete kupiti setove filtara na mreži, pa čak i pronaći neke lijepe setove besplatnih SVG filtara na Creatingu .

Nakon što kupite ili izradite vlastite SVG filtere, evo kako ih instalirate u Illustrator:

Odaberite Učinak→SVG filtri→Uvezi SVG filtar.

U dijaloškom okviru koji se otvori, idite do i dvaput kliknite datoteku SVG filtera koju ste kreirali ili besplatno preuzeli.
Datoteka koju tražite trebala bi biti SVG datoteka (više filtara je spojeno u jednu SVG datoteku).
Vaši novi filtri sada su dostupni u podizborniku SVG filtri.

Odaberite Učinak→SVG filtri da biste primijenili nove filtre na odabrane objekte.

Kako prenijeti SVG kod s Illustratora programeru

Često se SVG grafika koju izradite u Illustratoru predaje dizajnerima igara, animatorima, infografikama ili drugim rezultatima, gdje će programeri raditi s kodom iza SVG grafike. Kao ilustrator, ne morate znati kako stvoriti taj kod, ali možda ćete morati znati kako ga nabaviti i predati programeru. Evo kako.

Put do izvoza vaše SVG grafike kao koda prolazi kroz Illustratorove funkcije spremanja. Izbornik Spremi ima opcije (nije lako pronaći) koje izvoze vašu datoteku kao SVG kod. Vjerojatno ćete htjeti biti u stvarnom vremenu u komunikaciji sa svojim programerom zaslona dok generirate taj kod jer nekoliko opcija određuje način na koji će se taj kôd koristiti:

Odaberite Datoteka→Spremi (ili Spremi kao da ponovno spremate datoteku).

U dijaloškom okviru koji se otvori odaberite SVG s izbornika Format.
Zanemarite opciju SVGZ datoteke, koja je za komprimiranu datoteku koja se ne prikazuje u preglednicima.

Kliknite Spremi za otvaranje dijaloškog okvira SVG opcije.

Uvijek odaberite SVG 1.1 u padajućem izborniku SVG profili. Ostale verzije su zastarjele.

Ako ste u svoju SVG datoteku umetnuli ili povezali slike, odaberite Ugradi s padajućeg izbornika Lokacija slika. Međutim, prvo se posavjetujte sa svojim web programerom o ovom izboru.

Odaberite Preserve Illustrator Editing Capabilities da biste datoteku učinili uređivati ​​u Illustratoru.
Ovaj izbor povećava veličinu datoteke, ali vam omogućuje rad s jednom SVG datotekom koju možete uređivati, ažurirati i dijeliti s web programerima.

Ako se prikaže gumb Više opcija, kliknite ga za pristup naprednim opcijama. i napravite svoje odabire.
U osnovi, različite opcije generiraju CSS s vašom datotekom koja definira svojstva na sljedeće načine. Posavjetujte se sa svojim kolegom iz tima web programera o tome kako definirati ova CSS svojstva:

• Prezentacijski atributi ugrađuju stil u SVG kod. Ova je opcija najjednostavnija i zadana. Upotrijebite ovo ako ne surađujete s razvojnim programerom weba ili aplikacija.
• Dvije opcije atributa stila oslanjaju se na CSS za upravljanje stilovima gdje je to moguće.
• Elementi stila generiraju birače stilova klase za oblikovanje.
• Opcija Uključi neiskorištene stilove generira kod koji vjerojatno povećava veličinu SVG datoteke bez dodavanja funkcionalne vrijednosti.

Poništite odabir pet potvrdnih okvira na dnu dijaloškog okvira SVG opcije, osim ako vaš razvojni partner ne zatraži da ih odaberete.
Ove opcije su za visoko specijalizirane aplikacije.

Za generiranje SVG koda na temelju odabira koje napravite u dijaloškom okviru SVG opcija, kliknite gumb SVG kod .
Generirani SVG kod prikazuje se u uređivaču teksta vašeg operacijskog sustava. Taj kod možete spremiti kao tekstualnu datoteku pomoću uređivača teksta vašeg operacijskog sustava i predati datoteku razvojnom programeru.

Nakon što ste generirali kod, kliknite U redu da biste spremili datoteku.
Ovu datoteku možete ponovno otvoriti i urediti u Illustratoru.