Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sketch

Pag-intindi sa mga Export Option ng Sketch

by
Difficulty:BeginnerLength:LongLanguages:

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Ang pag-export ng mga asset mula sa iyong mga disenyo ay isang karaniwang gawain. Magsisimula sa paglika at paghanda ng iyong mga graphics, matapos ay piliin ang export format, ayusin ang properties at tapos ka na. Ang mga sangkap na pang-eksperto sa Sketch 3 ay ilan lamang sa pinaka magagandang mga tampok. Sa katunayan, Ang Sketch 3 ay nakatutulong sa pag-export ng nilalaman gamit ng iba’t ibang pamamaraan kung kaya’t kumbinsido akong gaganda ang iyong pagtrabaho sa pagbasa ng artikulong ito.

Gagamit tayo ng mga simpleng halimbawa upang madaling maintindihan ang mga export option na mayroon sa Sketch 3 at tutulungan ko kayong magdesisyon kung aling mga metodo ang nababagay sa iyo, depende sa kung ano ang iyong tinatrabaho.

Kung ginagamit ang Sketch sa karamihan ng iyong pagdisenyo, makatitipid ng oras sa pamamagitan ng paggamit ng ilan sa mga Sketch na template sa Envato Market. Maaaring mag-download ng mga Sketch file gamit ng gawa na at nababagong mga bersyon ng pinaka ginagamit na mga elemento ng UI, upang madaling magamit sa mga sariling pangangailangan, imbis na magsimula sa wala.

Sketch templates on Envato Market
Mga Sketch na template

1. Export Basics

Hakbang 1

Buksan ang Sketch. Kailangan ng isang object sa ating canvas kaya lumikha ng vector shape. Pumunta sa Insert > Shape at piliin ang isa sa mga sangkap. Sa halimbawa na ito, gagawa ng 300x300px na kwadrado gamit ng Insert > Shape > Rectangle (R).

Tandaan na maaring gumihit ng parihaba at ibahin ang mga katangian gamit ang Inspector panel.

Understanding Sketchs export options

Hakbang 2

Pumunta sa File menu. Ang Export na option ay aktibo na. Sa toolbar ay maaari ring pindutin ang Export icon, kaya pindutin ito. Mag-iiba nang kaunti ang canvas, sa layer list at inspector panel. Ano ang nangyari?

Creating our first slice

Sa layer panel, ang Sketch ay nakalikha na ng bagong slice na may parehong dimensyon at posisyon ng object na nasa canvas. Ang mga slice ay mga espesyal na layer na maaaring mag-export ng mga erya sa canvas at gawing mga file. Lahat ng nilalaman sa loob ng partikular na erya sa isang slice ay makakasama sa file na iyon. Maaaring magkaroon ng kahit gaano karaming slice na gusto gamit ang Insert > Slice (S) na option. Ang bawat slice ay mapupunta sa iba’t ibang mga file.

Kapag nariyan, tinutukoy ng knife icon at dashed outline na ang layer na napili ay isang slice. Maaaring baguhin ang pusisyon, haba, at tangkad nito gaya ng kahit anong object sa Sketch. Maaaring ilagay direkta sa canvas, o sa paggamit ng inspector upang baguhin ang mga properties.

Ang Inspector Panel

Tignan ang inspector habang nananatiling nakapili ang slice. Maaaring palitan ang posisyon, haba, at tangkad ng slice. Ngunit makakikita rin tayo ng bagong mga pagpipilian:

Export options - Inspector panel
  • Trim Transparent Pixels. Buksan ito kung kailangan ng na-export na file na tanggalin ang mga transparent na pixel mula sa mga gilid. Halimbawa kung mayroong 32x32px na icon sa loob ng 80x80px na slice. Ang pagpili rito ay agad na i-e-export ang 32x32px na file nang hindi iniiba ang laki ng slice. Tatanggalin ng Sketch ang mga transparent na pixel.
  • Export Group Contents Only. Mapakikinabangan ito tuwing gumagawa ng kompliadong mga disenyo na may patong-patong na nilalaman. Hindi ito maaaring buksan sa ngayon, kaya sa susunod na lamang na halimbawa.
  • Ang Background Color ay para sa pagpili ng background color ng napiling slice, pupunan ang mga transparent na pixel sa loob ng na-export na erya.

Sa tabi ng Export label ay mayroong iba’t ibang dropdown at input field:

  • Ang Size ay nagdaragdag ng multiplying factor kung kailangang baguhin ang laki ng nilalaman na i-e-export para sa slice na ito. Ang Sketch 3 ay mayroon nang kasamang mga pagpipilian para rito.
  • Maglagay ng kahit ano sa Suffix input kung gustong magdagdag sa filename para gawing mapaglarawan. Halimbawa ay maaaring idagdag ang @2x suffix para sa mga imahe na doble ang laki.
  • Piliin ang format ng file gamit ang Format dropdown. Ang mga export format na sinusuportahan ng Sketch ay .png, .jpg, .tiff, .pdf, .eps and .svg.

Awtomatikong Size=1x (100% orihinal na laki) ang mga export option sa Sketch, walang mga suffix at .png format. Iwan ang mga ito sa orihinal na mga halaga o paglaruin kung gusto.

Gabay: Maaaring mag-export ng kahit anong laki sa Sketch, kaya huwag mag-alala kung kailangan ng 100x na export o 1.75x na export. Maaari ring ilagay ang halaga ng mga pixel na may kasunod na w para sa lawak (width) at h para sa tangkad (height) upang ma-export ang mga asset sa kahit anong laki. Halimbawa, ilagay ang 60w sa export tool at i-e-export ng Sketch ang iyong asset na 60px ang lawak at aayusin nito ang nararapat na tangkad. Kung linagay naman ang 60 na may kasunod na h, i-e-export ng Sketch ang asset na 60px ang tangkad at aayusin ang lawak sa proporsyonal nitong halaga.

Hakbang 3

Nang mapili na ang slice, tignan ang ibabang bahagi ng inspector panel. Mayroong makikitang magkatabing malaki at maliit na pindutan. Ang una ay ipakikita sa iyo ang pinal na hakbang sa pag-export. Ang kabila ay nagbibigay ng dagdag na mapagpipilian upang direktang malagay ang file sa iba’t ibang mga application. Pindutin ang mga ito upang makita kung ano ang mangyayari pagkatapos ng proseso ng pag-export.

Gabay: ibahin ang pangalan ng slice layer upang awtomatikong magtalaga ng filename sa iyong nilalaman na na-export. Maaari ring maglagay ng slash/ sa loob ng pangalan, upang gumawa ang Sketch ng mga subfolder para sa iyo. Ang mga sumusunod na imahe ay ipapakita ito nang mas klaro:

Baguhin ang pangalan ng slice layer para mayroong slash/
I-export ang layer
Ang resulta na estruktura ng folder

2. Pagtukoy ng Nais I-export

Hakbang 1

Buksan ang export_what_you_want file na kasama sa tutorial na ito.

Tala: kailangan ng Sketch 3 para mabuksan ito, ngunit pwede rin ang mas lumang bersyon. Hindi magiging mahirap ang paggaya ng nilalaman ngunit tandaan na  ang ilan sa mga mapagpipilian ay hindi maaaring gamitin. Tignan ang imahe bilang sanggunian:

export_what_you_want file

Mayroong naka-grupo na mga object, isang artboard at iba pang mga elemento na nakalagay nang direkta sa canvas, sa labas ng artboard.

Hakbang 2

Pumunta sa File > Export. Maaari ring pindutin ang Export icon sa toolbar.

Pagpindot sa Export para sa unang pagkakataon, ipagpapalagay ng Sketch na nais mong i-export ang iyong mga artboard at gagawing awtomatiko ang pag-exprot, at tatanggalin ang mga object sa labas ng mga artboard. Wala ring slice layer sa layer list.

Ang mga artboard sa Sketch 3 ay maaaring ma-export nang direkta nang walang dagdag na slice. Kung magdagdag ng bagong mga artboard sa iyong dokumento, magdagdag lang ng export size sa mga artboard na ito sa pagpindot ng + icon sa tabi ng export label sa inspector panel, habang nananatiling nakapili ang mga artboard. Sa sunod na pagpindot sa Export icon, ang Sketch ay isasama rin ang mga artboard na iyon.

Hakbang 3

Balik tayo sa ating file. Ngayon ay mag-e-export ng iisang layer. Piliin ang asul na kuwadrado nang direkta o gamit ng layer list. Tignan ang ibaba ng inspector panel: makikita ang bagong Make exportable option. Pindutin ito.

Sketch Make exportable option

Babalitaan ka ng inspector upang ipakita na mag-e-export ng isang imahe sa 1x (orihinal na laki) nang walang suffix at awtomatikong nasa .png na format.

Tignan ang layer list at itala na ang icon sa listahan para sa layer na asul na kwadrado ay mayroon nang maliit na knife icon. Ibig-sabihin nito ay hindi na maaaring i-export ang layer. Sa sunod na pumunta sa File > Export o pindutin ang Export sa toolbar, ang bagong layer na maaaring i-export ay lalabas din, kasama ang regular na mga slice layer.

Hakbang 4

Ipokus ang atensyon sa lila na kuwadrado. Hindi gagamitin ang Make exportable option sa pagkakataon na ito, gagawa nang awtomatiko ng isang slice.

Pumunta sa Insert > Slice.Pansinin na nag-iiba ang cursor pag dumadaan sa ibabaw ng mga object sa canvas. Naalala ang knife icon? Pindutin ang lila na kuwadrado. Isang bagong slice ang lalabas sa parehong posisyon, lawak, at tangkad.

Sketch auto slicing

Gabay: nang sinusundan ang parehong metodo maaaring gumawa ng mga slice para sa mga buong grupo. Para sa mga indibidwal na mga slice sa loob ng grupo, pindutin ang Command key pag nasa ibabaw ng object na nais gawing slice.

Hakbang 5

Nakagamit na ng mga slice at ang Make exportable option. Nakita na natin ano ang mangyayari sa mga artboard, ngunit hindi pa natin nakikita ano mangyayari sa Export Group Contents Only na option.

Pumunta sa Insert > Slice at ilagay ang cursor sa taas ng kahel at berde na mga kwadrado, iyong mga naka-grupo na. Pindutin ang mga ito. Nakalikha ka ng bagong slice para sa grupo.

Hakbang 6

Ilipat ang slice layer sa grupo na kahel + berde.

Slice for groups

Kung tignan ang inspector pag nakapili ang slice makikita na ang Export Group Contents Only opsyon ay maaari na ring piliin. Ngunit huwag muna pindutin.

Sa puntong ito ay magandang tignan ang mga preview ng mga imahe upang makita aling mga nilalaman ang dapat isama sa ating file.

Export Group Content turned off

Hakbang 7

Tignan ang Export Group Contents Only opsyon.

Export Group Contents Only option turned on

Nakita ang pinagkaiba? Ang pula na ellipse ay natanggal mula sa preview.

Pag ang Export Group Contents Only ay nakapili, ang slice ay i-e-export lamang ang mga layer na nasa sariling grupo, at hindi na isasali ang nilalaman na nasa labas nito. Ang mga layer sa likod ng grupo ay hindi na rin maisasali. Mapakikinabangan ang option na ito sa mga malalaking disenyo na may maraming magkakapatong na mga object!

Gabay: kung maraming mga slice sa iyong layer list ang ayaw nang asikasuhin, maaaring panandaliang patayin gamit ang maliit na knife button sa ibaba ng layer list.

Tulad ng naipakita, maraming paraan para mag-export ng nilalaman. Alin ang dapat piliin? Depende sa iyong pangangailangan. Halimbawa ang Make exportable option ay maaaring gamitin sa pag-export ng mga icon at nag-iisang mga layer. Marerekomenda na lumikha ng mga slice at artboard tuwing nag-e-export ng buong mga dokumento (ngunit mungkahi lamang ito).

3. Maraming Export nang Sabay-Sabay

Isang magandang katangian na maaaring ikonsidera tuwing gumagamit ng Sketch 3 ay na pwedeng mag-export ng maraming imahe nang sabay-sabay. Hindi sinasabi na maaaring mag-export ng iba’t ibang imahe mula sa iba’t ibang slice o artboard (bagaman iyon ay posible). Ang ibig kong sabihin ay maaaring mag-export ng iba’t ibang mga bersyon nang sabay-sabay mula sa iisang layer o slice.

Hakbang 1

Magdagdag ng slice mula sa turquoise na kuwadrado, o gawin itong maaaring i-export gamit ang inspector panel. Kung ano man ang gagawin, siguraduhin na mayroon itong bagong mga export setting na may awtomatikong mga halaga sa inspector panel.

Single export from one file

Hakbang 2

Pindutin ang + icon sa itaas lang ng format dropdown. Nasabihan mo na ang Sketch na gusto mo ng dalawang magkaibang export file, mula sa iisang layer! Pindutin ang icon kahit ilan mang beses na gusto hangga’t sa makuha ang bawat laki ng format na kailangan.

Multiple versions at once

Ngayon, maaaring isipin na nadaanan na lahat ng kailangang malaman tungkol sa mga expert option ng Sketch, ngunit mayroon pa! Ito pa ang ilan sa mga gabay:

5. Direct Export

Ang pagdala ng kahit anong  layer mula sa listahan tungo sa desktop, o sa kahit anong app, ay awtomatikong mag-e-export nang nasa .png format. Pindutin ang option (⌥) key upang gawing PDF format pag dinadala palabas.

6. Sketch Generator at mga Sketch command

Napag-usapan na ang mga taal na kasangkapan sa loob ng Sketch, ngunit mayroong komunidad na gumagawa ng mga plugin. Sketch Generator, halimbawa, ay isang bagong paraan ng pag-export ng nilalaman gamit ang Sketch. Dapat tignan ang plugin na ito partikular kung nasubukan na ang Adobe Generator mula sa Photoshop CC.

Ang Sketch Commands ay koleksyon ng mga script command. Ang ilan sa mga ito ay may relasyon sa mga export task, kaya isa itong ekstensyon na nirerekomendang tignan.

Sketch commands

Konklusyon

Lahat ng nadaanan sa tutorial na ito ay nagbigay sa iyo ng kakayahan upang intindihin kung paano mag-export ng nilalaman sa Sketch 3. Kung mayroong mga katanungan tungkol sa pag-export, o sa Sketch sa pangkabuoan, mag-iwan lamang ng komento sa ibaba. Ikinagagalak ko ang makatulong!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.