Kapag gumagawa ng isang website, kailangang isaalang-alang ng taga-disenyo ng web apat na pangunahing punto pag-iisip tungkol sa layout at visual na disenyo ng web, ang teksto, mga larawan, mga kulay at mga font mga empleyado.
Sa apat na puntong ito, ang isa na bibigyan natin ng pinakamahalaga sa post na ito ay ang mga imahe, dahil pag-uusapan natin ang tungkol sa paano gumawa ng svg files dahil napakahalagang isaalang-alang ang kalidad ng mga larawan kung saan ka nagtatrabaho.
Mga paggamot na may mga SVG file, ay dumarami ng mga propesyonal at hindi masyadong mga propesyonal sa mundo ng disenyo.
Ano ang isang SVG file?
Ang SVG ay ang abbreviation sa English para sa Scalabe Vector Graphics, sa Spanish, Scalable Vector Graphics. Ito ay tungkol sa isang bukas at libreng format kung saan lumikha ng 2D graphics, dalawang dimensyon.
Hindi tulad ng ibang mga format ng larawan, gaya ng JPG o PNG, Ang SVG ay isang scalable na format, kahit gaano mo gustong palakihin ang laki nito, dahil mapapanatili ang kalidad ng larawan. Ito ay isa sa mga pinaka ginagamit na format sa mga web page para maglagay ng mga graphics o vector na imahe.
Bakit natin dapat gamitin ang SVG?
Sa ganitong uri ng format, ang mga imaheng vector ay mananatiling mataas ang kalidad, anuman ang kanilang laki at resolution. Sa kabaligtaran, ang mga imahe na binubuo ng mga bitmap, na binubuo ng mga pixel, ay mawawalan ng kalidad kung babaguhin ang laki. Ang SVG na format ay tinukoy sa pamamagitan ng liwanag at kagalingan nito.
Ang isa pang punto na pabor sa paggamit ng format na ito ay ang maliit na sukat nito, iyon ay, salamat dito pinapataas ang bilis ng paglo-load ng mga pahina kung nasaan sila. Ang mga larawang ito ay binuo ng browser, na tumutulong upang mabawasan ang pagkarga at pagkonsumo sa server.
Bilang karagdagan, maaari nilang lumikha ng mga animated na SVG na imahe kung saan upang bigyan ang aming website ng hangin ng pagiging malapit at makuha ang atensyon ng mga manonood na bumibisita dito.
Ang SVG ay isang bukas na format, ibig sabihin, maaaring sumailalim sa mga pagpapabuti at pag-update. Bilang karagdagan, ang mga file ng SVG ay maaaring i-edit gamit ang mga programa sa pag-edit ng vector, halimbawa Adobe Illustartor nang hindi nawawala ang kalidad sa pagpapakita nito, maaari itong matingnan sa anumang device. Nagbibigay-daan din ito sa amin na i-print ito nang hindi nawawala ang kalidad.
Paano madaling gumawa ng mga SVG file
Marahil ang pinakamadaling paraan upang lumikha ng mga SVG file, kung pamilyar ka sa kanila, ay sa pamamagitan ng isang graphic design program, tulad ng Illustrator, Corel Draw, at iba pa.
Nakatuon sa programa ng Illustrator, kapag gagamitin natin ang SVG na format, kailangan nating isaalang-alang kung gumamit tayo ng mga gradient o iba pang mga epekto, tulad ng artistikong epekto, blur, brush, pixel, atbp. dahil ang mga ito ay rasterized kapag nai-save sa SVG file format. Inirerekomenda na gumamit ng mga epekto ng filter ng SVG, upang magdagdag ng mga epekto upang hindi ma-rasterize ang mga ito sa ibang pagkakataon.
Ang isa pang piraso ng payo na ibinibigay namin sa iyo ay ang paggamit mga simpleng simbolo at landas sa mga guhit para sa mas mahusay na pagganap ng nasabing format. Iwasang gumamit ng mga brush na may maraming tracing dahil nagdudulot ito ng mas mataas na pag-load ng data.
Upang lumikha ng SVG file sa program na ito, Ang unang bagay na kailangan nating magkaroon ng bukas ay isang blangkong canvas kung saan gagawin natin ang ating ideya.
Kapag natapos na ang aming trabaho, ang gagawin namin ay pumunta sa toolbar na ipinapakita sa itaas ng programa, at pipiliin namin ang opsyon ng file, i-save bilang, at lalabas ang isang pop-up screen kung saan sasabihin nito sa amin na bigyan ng pangalan ang aming file at ipahiwatig ang format kung saan namin ito gustong i-save. Nasa huling seksyong ito kung saan dapat nating markahan ang opsyong SVG.
Kapag pumipili ng uri ng SVG, may lalabas na dialog box na nagpapakita sa amin ng iba't ibang opsyon na dapat isaalang-alang.
Bilang isang pangkalahatang tuntunin, sa unang field na lilitaw sa talahanayan, lalabas ang SVG 1.1 profile. Sa mga sumusunod, binibigyan tayo nito ng opsyong pumili ng mga source, kung saan ibinibigay nila sa atin default sa text na minarkahan sa SVG at subset bilang wala. Sa aming kaso, ang gawaing ito ay walang mga font, kung mayroon man, ang opsyon ng mga subset ay kailangang baguhin mula sa wala sa lahat ng pictograms.
Ang sumusunod na seksyon ay napakahalaga, kung itinuturo natin ang opsyon sa pag-embed, ang mga larawan ng komposisyon ay isasama sa file, na magiging dahilan upang tumaba ito kung gagamit tayo ng maraming bitmap na imahe. Kung, sa kabilang banda, minarkahan namin ang opsyon na mag-link, dapat tayong mag-ingat sa mga larawan kung gagamitin natin ang mga ito sa isang website, dahil dapat nating isama ang mga file ng ating mga larawan, at gayundin, napakahalaga, panatilihin ang kanilang landas. Ang bentahe ng pagpipiliang ito ay mas mababa ang timbang ng mga file.
Sa seksyon ng mga advanced na pagpipilian ay makikita namin ang opsyon na SVG code, ang pagpipiliang ito ay magsasaad kung paano nasa loob ang file, iyon ay, ang code sa likod ng aming trabaho. Mahalaga ang opsyong ito kung gusto mong idagdag ang iyong SVG file, halimbawa sa iyong personal na WordPress, kailangan mo lang kopyahin ang code at direktang idagdag ito sa iyong WordPress HTML editor.
Ang huling payo na ibinibigay namin sa iyo ay kapag nagse-save sa SVG na format, tandaan na kung nagtatrabaho ka sa iba't ibang mga artboard, tanging ang aktibong artboard lamang ang pananatilihin.
Kung gusto naming pumunta pa at ilapat ang mga epekto ng SVG sa aming ilustrasyon, nag-aalok sa amin ang Illustrator ng isang hanay ng mga epekto. Upang gawin ito, kailangan nating pumili ng isang bagay o grupo. Upang maglapat ng epekto dapat nating piliin ang window ng mga epekto, mga filter ng SVG at ilapat ito.
Kapag nag-aaplay ng filter na SVG, ipinapakita sa amin ng programa ng disenyo ang isang window kung saan May lalabas na listahan ng mga filter na maaaring ilapat., sa sandaling pumili kami ng isa, ipinapakita sa amin ng Illustrator ang hitsura nito, ngunit sa isang rasterized na bersyon.
Tulad ng nakita mo, ang Ang SVG format ay naging isang rebolusyon. Salamat sa potensyal at kalidad nito na inaalok nito, ginagawang mas kaakit-akit ang mga web page na sa tingin namin nang hindi isinasakripisyo ang pagganap, basta't tama ang paggamit ng mga ito sa nasabing format. Ang SVG ay naging perpektong kasal sa pagitan ng mundo ng disenyo at pag-unlad ng web.