Kā SVG failiem piemērot caurspīdīgumu
Uzziniet, kā lietot caurspīdīgumu SVG grafikai programmā Illustrator. Izpētiet, kā izvadīt SVG ar caurspīdīgu fonu un lietot caurspīdīguma efektus.
Daudzas no dramatiskākajām izmaiņām Illustrator izmantošanā notiek vektorattēlu tulkošanas jomā tīmeklī, un nepietiekami novērtētais SVG formāts ir šī procesa galvenā saite. SVG faili saglabā vektoru mākslas darbu vērtīgās mērogojamības funkcijas un tiek atbalstīti gandrīz vispārēji vietnēs un tīmekļa izstrādes vidēs. Sagatavojot vektoru mākslas darbu tīmeklim, ir svarīgi izvairīties no Illustrator standarta efektiem un tā vietā izmantot SVG filtrus.
Illustrator ir aprīkots ar pienācīgu, bet minimālistisku SVG filtru komplektu, taču šeit ir daži padomi, kā atrast un pievienot SVG filtrus, kā arī resursi savu SVG filtru izveidei. Tiem, kas strādā ar tīmekļa un lietotņu izstrādātājiem, padariet savu dzīvi vieglāku un produktīvāku, apskatot SVG koda nodošanas apkrāptu lapu.
Kad programmā Illustrator veidojat SVG failus ekrāniem un vēlaties lietot efektus (piemēram, nolaižamās ēnas), tie ir jāizmanto kā SVG filtri. Tādā veidā jūsu SVG faili saglabā bezgalīgu mērogojamību bez traucējumiem.
Tālāk norādītās darbības palīdzēs jums lietot SVG filtru grafikai programmā Illustrator.
Atlasiet objektu(-us), kam lietojat filtru.
Izvēlieties Efekts → SVG filtri.
Parādītajā sarakstā atlasiet filtru.
Lielākajai daļai filtru ir aprakstoši nosaukumi. Piemēram, tie, ar ēnu , kas vārda ir drop-ēnas, tie ar Gausa vārdā ir Gausa blurs. Darbplūsma ir nedaudz dīvaina un apļveida, taču vispirms ir jāatlasa filtrs, lai piekļūtu visām tā pielietošanas iespējām.
Lai mainītu atlasīto filtru:
Kad esat izvēlējies filtru, panelī Apply SVG Filter noklikšķiniet uz Labi.
Illustrator SVG filtru komplekts ir minimālistisks, taču varat to uzlabot, izstrādājot savus filtrus vai lejupielādējot fasētas SVG filtru kopas no tiešsaistes avotiem. Filtru projektēšana ietver kodēšanu, taču to var izdarīt, ja pārzināt HTML. Es iesaku w3Schools pamācību SVG filtru izveidei. Vai arī varat iegādāties filtru komplektus tiešsaistē un pat atrast dažus jaukus bezmaksas SVG filtru komplektus vietnē Creatingo .
Kad esat iegādājies vai izveidojis savus SVG filtrus, instalējiet tos programmā Illustrator šādi:
Izvēlieties Efekts → SVG filtri → Importēt SVG filtru.
Atvērtajā dialoglodziņā pārejiet uz izveidoto vai bez maksas lejupielādēto SVG filtru failu un veiciet dubultklikšķi uz tā.
Failam, kuru meklējat, ir jābūt SVG failam (vairāki filtri ir apvienoti vienā SVG failā).
Jūsu jaunie filtri tagad ir pieejami apakšizvēlnē SVG filtri.
Izvēlieties Efekts → SVG filtri, lai lietotu jaunos filtrus atlasītajiem objektiem.
Bieži vien SVG grafikas, ko izveidojat programmā Illustrator, tiek nodotas spēļu dizaineriem, animatoriem, infografikām vai citai izvadei, kur izstrādātāji strādās ar kodu, kas atrodas aiz SVG grafikas. Kā ilustratoram jums nav jāzina, kā izveidot šo kodu, taču jums var būt jāzina, kā to iegūt un nodot izstrādātājam. Lūk, kā.
Ceļš uz SVG grafikas eksportēšanu kā kodu darbojas, izmantojot Illustrator saglabāšanas funkcijas. Izvēlnē Saglabāt ir opcijas (nav viegli atrast), kas eksportē jūsu failu kā SVG kodu. Iespējams, vēlēsities sazināties ar ekrāna izstrādātāju reāllaikā, ģenerējot šo kodu, jo vairākas iespējas nosaka tas, kā šis kods tiks izmantots.
Izvēlieties Fails → Saglabāt (vai Saglabāt kā, ja atkārtoti saglabājat failu).
Atvērtajā dialoglodziņā izvēlnē Formāts atlasiet SVG.
Ignorējiet SVGZ faila opciju, kas paredzēta saspiestam failam, kas netiek rādīts pārlūkprogrammās.
Noklikšķiniet uz Saglabāt, lai atvērtu dialoglodziņu SVG opcijas.
Nolaižamajā izvēlnē SVG profili vienmēr izvēlieties SVG 1.1. Citas versijas ir novecojušas.
Ja jūsu SVG failā ir iegulti vai saistīti attēli, nolaižamajā izvēlnē Attēlu atrašanās vietas izvēlieties Iegult. Tomēr vispirms konsultējieties ar savu tīmekļa izstrādātāju par šo izvēli.
Atlasiet Saglabāt Illustrator rediģēšanas iespējas, lai padarītu failu rediģējamu programmā Illustrator.
Šī izvēle palielina faila lielumu, taču ļauj strādāt ar vienu SVG failu, ko varat rediģēt, atjaunināt un kopīgot ar tīmekļa izstrādātājiem.
Ja tiek parādīta poga Citas opcijas, noklikšķiniet uz tās, lai piekļūtu papildu opcijām. un veiciet savu izvēli.
Būtībā dažādas opcijas ģenerē CSS ar jūsu failu, kas definē rekvizītus šādos veidos. Konsultējieties ar savu tīmekļa izstrādātāja komandas biedru par to, kā definēt šos CSS rekvizītus:
Noņemiet atzīmi no piecām izvēles rūtiņām dialoglodziņa SVG opcijas apakšā, ja vien izstrādātājs-partneris nepieprasa tās atlasīt.
Šīs opcijas ir paredzētas ļoti specializētām lietojumprogrammām.
Lai ģenerētu SVG kodu, pamatojoties uz atlasi, ko veicat dialoglodziņā SVG opcija, noklikšķiniet uz pogas SVG kods .
Ģenerētais SVG kods tiek parādīts operētājsistēmas teksta redaktorā. Varat saglabāt šo kodu kā teksta failu, izmantojot operētājsistēmas teksta redaktoru, un nodot failu izstrādātājam.
Kad esat ģenerējis kodu, noklikšķiniet uz Labi, lai saglabātu failu.
Varat atkārtoti atvērt un rediģēt šo failu programmā Illustrator.
Uzziniet, kā lietot caurspīdīgumu SVG grafikai programmā Illustrator. Izpētiet, kā izvadīt SVG ar caurspīdīgu fonu un lietot caurspīdīguma efektus.
Kad esat importējis savus attēlus programmā Adobe XD, jums nav lielas rediģēšanas vadības iespējas, taču varat mainīt attēlu izmērus un pagriezt tos tāpat kā jebkuru citu formu. Varat arī viegli noapaļot importēta attēla stūrus, izmantojot stūra logrīkus. Attēlu maskēšana Nosakot slēgtu formu […]
Kad jūsu Adobe XD projektā ir teksts, varat sākt mainīt teksta rekvizītus. Šie rekvizīti ietver fontu saimi, fonta lielumu, fonta svaru, līdzinājumu, rakstzīmju atstarpes (rindstarpas un izsekošanu), rindstarpu (vadošais), aizpildījumu, apmali (pārvilkšanu), ēnu (krītošā ēna) un fona aizmiglojumu. Tātad, apskatīsim, kā šie rekvizīti tiek piemēroti. Par lasāmību un fontu […]
Tāpat kā programmā Adobe Illustrator, Photoshop zīmējumu dēļi nodrošina iespēju vienā dokumentā izveidot atsevišķas lapas vai ekrānus. Tas var būt īpaši noderīgi, ja veidojat ekrānus mobilajai lietojumprogrammai vai nelielai brošūrai. Jūs varat domāt par zīmējumu dēli kā īpašu slāņu grupas veidu, kas izveidots, izmantojot paneli Slāņi. Tā […]
Daudzi rīki, kas atrodami panelī InDesign Tools, tiek izmantoti līniju un formu zīmēšanai lapā, tāpēc jums ir vairāki veidi, kā izveidot interesantus zīmējumus savām publikācijām. Programmā InDesign varat izveidot jebko, sākot no pamata formām līdz sarežģītiem zīmējumiem, tā vietā, lai izmantotu zīmēšanas programmu, piemēram, […]
Teksta iesaiņošana programmā Adobe Illustrator CC nav gluži tas pats, kas dāvanas iesaiņošana — tas ir vienkāršāk! Teksta aplaušana liek tekstam aptīt grafiku, kā parādīts šajā attēlā. Šī funkcija var pievienot mazliet radošuma jebkuram gabalam. Grafika liek tekstam aptīt to. Vispirms izveidojiet […]
Veidojot dizainu programmā Adobe Illustrator CC, bieži vien ir nepieciešams precīzs izmērs (piemēram, 2 x 3 collas). Pēc formas izveides vislabākais veids, kā mainīt tās izmērus precīziem izmēriem, ir izmantot pārveidošanas paneli, kas parādīts šajā attēlā. Atlasiet objektu un pēc tam izvēlieties Logs → Transform to […]
Varat izmantot programmu InDesign, lai izveidotu un modificētu QR koda grafiku. QR kodi ir svītrkoda veids, kurā var saglabāt informāciju, piemēram, vārdus, ciparus, URL vai cita veida datus. Lietotājs skenē QR kodu, izmantojot savu kameru un programmatūru ierīcē, piemēram, viedtālrunī, un programmatūra izmanto […]
Var būt laiks, kad jums ir nepieciešams jauns fotoattēls, lai izskatītos vecs. Programma Photoshop CS6 ir jums pieejama. Melnbaltā fotogrāfija ir jaunāka parādība, nekā varētu domāt. Dagerotipiem un citām agrīnām fotogrāfijām bieži bija brūngans vai zilgans tonis. Jūs varat izveidot savus sēpijas toņu šedevrus. Tonēti attēli var radīt […]
Izmantojot Adobe Creative Suite 5 (Adobe CS5) Illustrator funkciju Live Paint, varat izveidot vajadzīgo attēlu un aizpildīt reģionus ar krāsām. Live Paint kauss automātiski nosaka reģionus, kas sastāv no neatkarīgiem krustojošiem ceļiem, un attiecīgi aizpilda tos. Krāsa noteiktā reģionā paliek dzīva un plūst automātiski, ja tāda ir […]