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

Razumijevanje Opcija za Izvoz u Sketch Programu

by
Difficulty:BeginnerLength:LongLanguages:

Croatian (Hrvatski) translation by Maja Petek (you can also view the original English article)

Izvoz stavki iz vašeg dizajna je uobičajena radnja. Počinjete kreiranjem i pripremanjem grafike, zatim birate format za izvoz, podesite svojstva i gotovi ste. Alati za izvoz u Sketch 3 programu su jedni od njegovih najboljih značajki. Ustvari, Sketch 3 nam pomaže izvesti sadržaj na toliko mnogo različitih načina da sam uvjeren da ćete unaprijedti svoj proces rada čitajuči ovaj članak.

Koristiti ćemo neke osnovne primjere kako biste potpuno razumjeli različite opcije izvoza dostupne u Sketch 3 i pomoći ću vam da odlučite koje metode su za vas najbolje, ovisno o tome ne čemu radite.

Također, ako koristite Sketch 3 za mnogo vaših dizajnerskih radova, možete uštedjeti mnogo vrmena koristeći neki od Sketch predložaka s Envato Marketa. Možete preuzeti Sketch datoteke sa unaprijed pripremljenim, prilagodljivim verzijama najčešće upotrebljavanih UI elemenata kako biste ih brzo mogli prilagoditi vlastitim potrebama umjesto da svaki put počinjete ispočetka.

Sketch templates on Envato Market
Sketch predlošci

1. Osnove Izvoza

1. korak

Otvorite Sketch. Trebamo jedan objekt na našem platnu pa kreirajmo vektorski oblik. Idite na Insert > Shape i odaberite jedan od dostupnih alata. Ja ću za ovaj primjer izraditi 300x300 px kvadrat koristeći Insert > Shape > Rectangle (R)

Ne zaboravite da možete nacrtati bilo kakav pravokutnik i prilagoditi mu svojstva u 'Inspector' kartici.

Understanding Sketchs export options

2. korak 

Sada idite na File izbornik. Trebali biste vidjeti da je opcija Export aktivna. Na alatnoj traci možete kliknuti i Export ikonu, stoga nastavite i kliknite je.  Primijetiti ćete neke promjene na platnu, u popisu slojeva i Inspector kartici. Što se dogodilo?

Creating our first slice

U kartici slojeva, Sketch je automatski kreirao novi 'slice' istih dimenzija i na istoj poziciji kao i objekt koji imamo na platnu. Slicevi su posebni slojevi koji nam omogućuju da eksportiramo dijelove na platnu u datoteke. Sav sadržaj unutar određenog područja slicea biti će uključen u tu datoteku. Možete imati koliko god želite sliceova koristeći Insert > Slice (S) opciju. Svaki slice će biti eksportiran u drugu datoteku.

Kada je prisutna, ikona noža i isprekidana vanjska linija pokazuju da je taj sloj ustvari slice. Možete mu mijenjati poziciju, širinu i visinu kao i bilo kojem drugom objektu u Sketchu. Možete ih pomicati ili skalirati izravno na platnu ili pak koristeći inspektor da promijenite njihove vrijednosti.

Inspector Kartica

Kada već govorimo o inspectoru, pogledajte ga dok je slice selektiran. Kao što sam već rekao, možemo mijenjati poziciju slicea, širinu i visinu. Ali možemo također vidjeti i neke nove opcije:

Export options - Inspector panel
  • Trim Transparent Pixels. Uključite ovu opciju ako trebate transparentne piksele svoje izvezene datoteke izrezane na rubovima. Na primjer, imate recimo 32x32px ikonu unutar 80x80px slicea.  Označivanje ove opcije automatski će eksportirati 32x32px datoteku bez da vaš slice pormijeni veličinu. Sketch će ukloniti (obrezati) transparentne piksele.
  • Export Group Contents Only. Ovo je prilično korisno kada kreirate kompleksne dizajne sa sadržajem koji se preklapa. To možemo odmah sada uključiti, pa ćemo ostaviti za sljedeći primjer.
  • Background Color Option omogućuje vam da odaberete boju pozadine za odabrani slice, ispunjavajući svaki transparentni piksel unutar eksportiranog dijela.

Pokraj Export oznake nalazimo različite padajuće izbornike i polja za unos podataka:

  • Size nam omogućuje da dodamo umnoženi faktor ako trebamo promijeniti veličinu sadržaja koji će biti eksportiran za ovaj slice. Sketch 3 dolazi s nekim unaprijed određenim opcijama i varijablama za ovaj segment.
  • Unesite nešto u Suffix polje ako želite dodati nešto imenu datoteke kako biste je dodatno opisali. Npr. možete dodati @2x sufiks za slike duple veličine.
  • Odaberite format datoteke koristeći Format padajući izbornik. Formati koje Sketch podržava su .png, .jpg, .tiff, .pdf, .eps i .svg.   

Prema zadanim postavkama opcije za Sketch izvoz su podešene na Size=1x (100% originalna veličina), bez sufiksa i .png formata. Ostavite ove opcije sa zadanim vrijednostima ili se igrajte s njima ako želite.

Savjet: Sketch izvoz u proizvoljne veličine, stoga ne brinite ako su vam potrebne stvari poput 100x izvoz ili 1.75x izvoz. Također možete upisati vrijednost piksela, zatim w za širinu i h za visinu kako biste eksportirali stavke u bilo kojoj veličini.  Na primjer, u alatu za izvoz upište 60w i Sketch će izvesti vašu stavku u širini od 60 px i u skladu s tim podesiti visinu. Isto tako, ako upišete 60, nakon čega slijedi h Sketch će vašu stavku eksportirati u visini od 60px i razmjerno s time podesiti širinu.

3. korak 

Sada, dok je vaš slice selektiran, pogledajte donji dio ploče inspektora. Pored nje ćete vidjeti veliki gumb i manji gumb. Prvi će vam pokazati konačni korak izvoza. Drugi vam daje neke dodatne mogućnosti za izravno povezivanje datoteke s različitim aplikacijama. Slobodno kliknite gumbe da biste vidjeli što se događa kada završite postupak izvoza.

Savjet: promijenite naziv slicea da automatski dodijeli ime datoteci vašeg izvezenog sadržaja. Jedan zgodan trik je dodavanje slash / znaka unutar imena, čime upućujete Sketch da za vas kreira podmape. Sljedeće slike postupak prikazuju jasnije:

Promijenite naziv sloja slicea da uključite slash /
Izvezite taj sloj
Dobivena struktura mape

2. Određivanje Sadržaja Koji Želite Izvesti

1. korak

Otvorite export_what_you_want datoteku koju sam dodao kao privitak (attachement) ovom tutorialu.

Napomena: treba je otvoriti Sketch 3, ali ako koristite stariju verziju, ne brinite. Ne bi trebao biti problem replicirati sadržaj, ali upamtite da neke opcije koje smo ovdje napomenuli vama možda neće biti dostupne. Pogledajte sljedeću sliku za primjer:

export_what_you_want file

Vidjeti ćete neke grupirane objekte, artboard i druge elemente smještene izravno na platno, izvan artboarda.

2. korak

Idite na File > Export. Alternativno možete kliknuti Export ikonu na alatnoj traci.

Kada prvi put kliknete Export, Sketch će pretpostaviti da želite izvesti svoje artboard ploče i automatski će ih pripremiti za izvoz, odbacujući sve objekte izvan artboard ploča. Također ćete primijetiti da nije dostupan slice layer na layer popisu.

Artboard ploče u Sketch 3 mogu se izravno izvesti bez potrebe da dodajete dodatne sliceve . Ako dodate nove artboard ploče vašem dokumentu, dodajte veličinu izvoza ovim artboard pločama s imenima klikom na ikonu + pored oznake izvoza na inspector ploči, dok su selektirane artboard ploče. Sljedeći put kada kliknete Export ikonu, Sketch će uključiti ​​te artboard ploče također.

3. korak

Vratimo se našoj datoteci. Sada ćemo izvesti samo jedan sloj. Selektirajte plavi kvadrat direktno ili preko popisa slojeva. Pogledajte na dno inspector ploče: vidjet ćete novu opciju Make Exportable. Kliknite je.

Sketch Make exportable option

Inspector će se ažurirati kako bi vam pokazao da ćete eksportirati jednu sliku na 1x (originalna veličina) bez sufiksa i, prema zadanim postavkama, u .png formatu.

Pogledajte listu slojeva i imajte na umu da je ikoni na listi sloja za plavi kvadrat dodana malena ikona noža. To znači da se sloj može izvesti. Sljedeći put kada idete na File > Export ili kliknete Export s alatne trake, ovaj novi sloj koji se može izvesti pojavit će se i tamo, među redovnim slice slojevima.

4. korak 

Usredotočite svu pažnju na ljubičasti kvadrat. Ovaj put nećemo upotrijebiti opciju Make exportable već ćemo automatski kreirati slice.

Idite na Insert > Slice. Vidjeti ćete da se kursor mijenja kada pomičete iznad objekata na platnu. Sjećate se one ikone noža? Kliknite ljubičasti kvadrat. Pojaviti će se novi slice na istom mjestu, iste širine i visine!

Sketch auto slicing

Savjet: prateći istu metodu možete napraviti i sliceve za cijele grupe. I za individualne sliceve unutar grupe, kliknite Command tipku kada prelazite preko objekta koji želite izrezati u slice.

5. korak

Ok, koristi smo sliceve u Make Exportable opciji. Već smo vidjeli što se dešava kada imamo artboardove...ali još nismo vidjeli što se događa sa Export Group Contents Only opcijom!

Idite na Insert > Slice i pomaknite kursor iznad narančastog i zelenog kvadrata, onih koje smo već grupirali. Kliknite ih. Upravo ste kreirali novi slice za grupu.

6. korak

Pomaknite sloj slicea u grupu orange + green.

Slice for groups

Ako pogledate inspector karticu kada je slice selektiran vidjeti ćete da Export Group Contents Only opcija sada može biti odabrana. Ali nemojte je još označiti!

Trenutno je, prije nego što nastavimo prilično korisno da pogledate pregled slike kako biste vidjeli koji sadržaj će biti uključen u našu datoteku.

Export Group Content turned off

7. korak

Označite Export Group Contents Only opciju.

Export Group Contents Only option turned on

Vidite li razliku? Crvena elipsa je uklonjena s pregleda.

Kada je Export Group Contents Only opcija označena, slice će eksportirati samo slojeve unutar vlastite grupe i izostaviti sav sadržaj izvan nje. Slojevi iza grupe također će izostati. Ovo je vrlo korisna opcija za velike dizajne s mnogo objekata koji se preklapaju!

Savjet: ako imate mnogo sliceva na popisu slojeva i ne želite se njima zamarati, možete ih privremeno isključiti koristeći malenu ikonu noža na dnu popisa slojeva.

Kao što smo pokazali, možemo izvesti sadržaj na mnogo načina. Koji biste način Vi odabrali? Pa, ovisi o tome što vam je potrebno. Na primjer, Make exportable opcija je veoma korisna za izvoz ikona na zasebnim slojevima. Preporučio bih da izradite sliceve ili artboard ploče kada izvozite cijeli dokument (ali to je samo prijedlog).

3. Više Izvoza Odjednom

Jedna odlična značajka kada koristite Sketch 3 je što možete izvesti više slika odjednom. Ne mislim da možete izvesti različite slike s različitih sliceva na artboard pločama (iako, i to je moguće). Mislim na to da možete izvesti razne verzije istovremeno s jednog sloja ili slicea.

1. korak

Dodajte slice s tirkiznog kvadrata ili ga učinite 'eksportabilnim' u inspector kartici. Što god učinili, trebali biste dobiti nove postavke za izvoz s zadanim vrijednostima u inspector kartici.

Single export from one file

2. korak

Kliknite + ikonu odmah iznad padajuće kartice za format. Sada ste upravo učinkovito rekli Sketchu da želite dvije različite izvozne datoteke, od jednog sloja! Kliknite na ikonu koliko god puta želite da dobijete svaku veličinu ili format koji trebate.

Multiple versions at once

Sada, mogli biste pomisliti da smo ovdje obradili sve što je potrebno znati o opcijama za izvoz u Sketch programu, ali ima još toga! Evo nekih dodatnih savjeta:

5. Izravan Izvoz

Povlačenje bilo kojeg sloja izvan popisa na desktop ili u bilo koju drugu aplikaciju, automatski će je izvesti za vas u .png formatu. Držite option (⌥) tipku da promijenite u PDF format kada povlačite.

6. Sketch Generator i Sketch Naredbe

Govorili smo o oizvornim značajkama u Sketchu, ali postoji vrlo aktivna zajednica koja konstantno radi na razvoju dodataka. Sketch Generator, na primjer, je potpuno novi način izvoza sadržaja koristeći Sketch. Trebali biste pogledati ovaj dodatak osobito ako ste već isporbali Adobe Generator značajku iz Photoshop CC.

Sketch Commands je kolekcija skripti za naredbu. Neke od njih odnose se na izvozne radnje, pa je to još jedna ekstenzija koju preporučam da pogledate.

Sketch commands

Zaključak

Sve stvari koje sam obradio tijekom ovog tutoriala naoružati će vas vještinama kako biste u potpunosti razumjeli kako izvesti sadržaaj u Sketch 3 programu. Imate li još kakvih pitanja o izvozu, ili općenito Sketch programu, samo ostavite komentar. Rado ću pomoći!

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.