Înțelegerea opțiunilor de export pentru Sketch

Exportul de active din desenele dvs. este o sarcină comună. Începeți prin a crea și pregăti grafica, apoi alegeți formatul de export, setați proprietățile și ați terminat. Instrumentele de export din Sketch 3 se numără printre cele mai bune caracteristici. De fapt, Sketch 3 ne ajută să exportim conținutul în multe feluri diferite încât sunt convins că îți vei îmbunătăți fluxul de lucru prin citirea acestui articol.

Vom folosi câteva exemple de bază pentru a înțelege pe deplin diferitele opțiuni de export disponibile în schița 3 și vă voi ajuta să decideți ce metode sunt cele mai potrivite pentru dvs., în funcție de ce lucrați.

Apropo, dacă utilizați Sketch pentru o mulțime de lucrări de proiectare, puteți economisi o mulțime de timp utilizând câteva dintre șabloanele Sketch de pe Envato Market. Puteți descărca fișierele Sketch cu versiuni personalizate, pre-fabricate, ale celor mai frecvent utilizate elemente de interfață UI, astfel încât să le puteți adapta rapid la nevoile dvs., mai degrabă decât să începeți de la zero de fiecare dată.

Schițe de șablon

1. Bazele de export

Pasul 1

Deschideți schița. Avem nevoie de un obiect pe pânza noastră, deci să creăm o formă vectorală. Mergi la Inserare> Formă și selectați unul dintre instrumentele disponibile. Pentru acest exemplu voi crea un a 300x300px folosind pătrat Inserare> Formă> Dreptunghi (R). 

Tine minteputeți desena un dreptunghi aleator și puteți ajusta proprietățile sale prin Inspector panou.

Pasul 2

Acum du-te la Fişier meniul. Ar trebui să vedeți că Export opțiunea a fost activată. În bara de instrumente puteți face clic pe Export pictograma prea, deci mergeți mai departe și faceți clic pe ea. Veți observa câteva modificări pe panza, în lista de straturi și în panoul de inspectori. Ce s-a întâmplat?

În panoul stratului, Sketch a creat automat un nou felie cu aceleași dimensiuni și poziții ale obiectului pe care îl avem pe pânză. Secțiunile sunt straturi speciale care ne permit să exportim zonele de pe pânză la fișiere. Toate conținutul dintr-o zonă definită printr-o felie va fi inclus în acel fișier. Aveți la fel de multe felii pe care doriți să le utilizați Introduceți> Slice (S) opțiune. Fiecare felie va exporta într-un alt fișier.

Când este prezent, pictograma cuțitului și conturul punctat indică faptul că stratul în cauză este o felie. Puteți schimba poziția, lățimea și înălțimea ca orice alt obiect din schiță. Puteți să le mutați sau să le scalați direct pe panza sau prin utilizarea inspectorului pentru a schimba proprietățile.

Panoul inspectorilor

Vorbind despre inspector, aruncați o privire în timp ce păstrați felia selectată. Așa cum am spus deja, putem schimba poziția felului, lățimea și înălțimea. Dar putem vedea și câteva noi opțiuni:

  • Decuplați pixeli transparenți. Porniți această opțiune dacă aveți nevoie de fișierele exportate pentru a avea pixeli transparenți tăiați de margini. De exemplu, spuneți că aveți o pictogramă de 32x32 pixeli în interiorul unei bucăți de 80x80 pixeli. Verificarea acestei opțiuni va exporta automat un fișier de 32x32px fără a redimensiona felia ta. Schița va tăia pixelii transparenți.
  • Exportați numai conținutul grupului. Acest lucru este destul de util atunci când creați desene complexe cu conținut suprapus. Nu o putem porni chiar acum, așa că l-am lăsat pentru următorul exemplu.
  •  Culoarea opțiunii de fundal ne permite să alegem o culoare de fundal pentru felia selectată, umplând orice pixeli transparenți din zona exportată.

Alături de Export eticheta găsim diferite câmpuri de dropdown și de intrare:

  • mărimea ne permite să adăugăm un factor de înmulțire dacă trebuie să redimensionăm conținutul care va fi exportat pentru această felie. Schița 3 vine cu câteva opțiuni și variabile predefinite pentru acest lucru.
  • Introduceți ceva în Sufix introduceți dacă doriți să adăugați ceva la numele fișierului pentru ao face descriptivă. De exemplu, puteți adăuga @ 2x sufix pentru imagini de dimensiuni duble.
  • Selectați formatul de fișier folosind Format scapă jos. Formatele de export acceptate de Sketch sunt .png, .jpg, .tiff, .pdf, .eps și .svg

În mod prestabilit, opțiunile de export pentru Sketch sunt setate la Dimensiune = 1x (Dimensiune originală 100%), fără sufixe și .png format. Lăsați aceste opțiuni cu valorile implicite sau jucați cu ele, dacă doriți.

Bacsis: Sketch-ul acceptă exportul la dimensiuni arbitrare, așa că nu vă faceți griji dacă aveți nevoie de lucruri cum ar fi exportul 100x sau exportul de 1.75x. De asemenea, puteți introduce valoarea pixelilor urmate w pentru lățime și h pentru înălțime pentru a exporta active la orice dimensiune. De exemplu, tastați 60W în instrumentul de export și Sketch va exporta materialul dvs. la lățimea de 60 de pixeli și va scala corespunzător înălțimea. La fel, dacă tastați 60 urmat de h Schița vă va exporta materialul cu o înălțime de 60 de pixeli și va scala lățimea proporțional. 

Pasul 3

Acum, amintindu-vă să vă păstrați felia selectată, aruncați o privire spre zona inferioară a panoului de inspecție. Veți vedea un buton mare și unul mai mic lângă acesta. Primul va va arata pasul final de export. Cealaltă vă oferă câteva opțiuni suplimentare pentru a atașa direct fișierul dvs. la diferite aplicații. Simțiți-vă liber să faceți clic pe butoane pentru a vedea ce se întâmplă atunci când terminați procesul de export.

Bacsis: redenumiți stratul de felie pentru a atribui automat un nume de fișier conținutului dvs. exportat.Un truc frumos estepentru a include un slash / în numele, instruind Sketchpentru a crea subfoldere pentru dvs. Următoarele imagini ilustrează punctul mai clar:

Redenumiți stratul de felie pentru a include o secțiune /Exportați acest stratStructura de dosare rezultată

2. Specificarea a ceea ce doriți să exportați

Pasul 1

Deschide export_what_you_wantfișier pe care l-am furnizat ca atașament la acest tutorial. 

Notă: veți avea nevoie de Sketch 3 pentru ao deschide, dar dacă utilizați o versiune mai veche nu vă faceți griji. Nu trebuie să fie prea dificil să reproduceți conținutul dvs., dar rețineți că unele dintre opțiunile pe care le acoperim pot să nu fie disponibile pentru dvs. Vedeți următoarea imagine ca referință:

Veți vedea câteva obiecte grupate, o tablă de artă și alte elemente plasate direct pe panza, în afara tabloului de bord. 

Pasul 2

Mergi la Fișier> Exportați. Alternativ, puteți face clic pe Export pictograma din bara de instrumente.

Când faceți clic pe Export pentru prima dată, Sketch va presupune că doriți să exportați plăcile de artă și le veți exporta automat, aruncând toate obiectele in afara tablourile de artă. De asemenea, veți observa că nu există slice layer disponibile în strat listă. 

Artboard-urile din schița 3 pot fi exportate direct fără a fi nevoie să adăugați felii suplimentare. Dacă adăugați noi tablouri de artă în documentul dvs., trebuie doar să adăugați o dimensiune de export la aceste tablouri de bord făcând clic pe + pictograma de lângă eticheta de export din inspector , păstrând în același timp tablourile de artă selectate. Data viitoare când faceți clic pe Export pictograma, Sketch va include și aceste tablouri de bord.

Pasul 3

Să ne întoarcem la dosarul nostru. Acum vom exporta un singur strat. Selectați pătratul albastru direct sau prin lista de straturi. Uitați-vă la partea inferioară a panoului de inspecție: veți vedea o nouă opțiune Faceți exportabil.Apasă-l.

Inspectorul se va actualiza pentru a vă arăta că veți exporta o imagine la 1x (dimensiunea originală) fără sufix și, în mod implicit, în .png format.  

Priviți lista de straturi și rețineți că pictograma din lista pentru stratul pătrat albastru a primit o pictogramă cu cuțit mic. Aceasta înseamnă că stratul este exportabil. Data viitoare când te duci Fișier> Exportați sau faceți clic pe Export din bara de instrumente, acest nou strat exportabil va apărea acolo, de asemenea, printre straturile obișnuite de felie.

Pasul 4

Concentrați-vă atenția asupra pătratului purpuriu. Nu o vom folosi Faceți exportabil opțiune de data aceasta, vom crea automat o felie. 

Mergi la Introduceți> Slice.Observați cum se schimbă cursorul când vă deplasați deasupra obiectelor de pe panza. Ține minte pictograma cuțitului? Clic pătrat violet. O nouă felie va apărea cu aceeași poziție, lățime și înălțime!

Bacsis: urmând aceeași metodă puteți crea și felii pentru grupuri întregi. Și pentru felii individuale din interiorul unui grup, apăsați pe Comanda atunci când treceți peste obiectul pe care doriți să îl tăiați.

Pasul 5

Ok, am folosit felii și Faceți exportabil opțiune. Am văzut deja ce se întâmplă când avem tablouri de artă ... dar nu am văzut ce se întâmplă cu Exportați numai conținutul grupului opțiune încă!

Mergi la Introduceți> Slice și mutați cursorul deasupra pătratelor portocalii și verzi, cele deja grupate. Faceți clic pe ele. Tocmai ați creat o nouă felie pentru grup. 

Pasul 6

Mutați stratul de felie în grup portocaliu + verde.

Dacă te uiți la inspector când este selectată felia, vei vedea că Exportați numai conținutul grupului opțiunea poate fi selectată acum. Dar nu verificați încă!

În acest moment, este destul de util să verificați previzualizarea imaginii pentru a vedea ce conținut va fi inclus în fișierul nostru. 

Pasul 7

Verifică Exportați numai conținutul grupului opțiune. 

Vezi diferenta? Elipeta roșie a fost eliminată din previzualizare. 

Cand Exportați numai conținutul grupului esteverificat, felia va exporta straturile în interiorul grupului propriu, aruncând orice conținut în afara acestuia. Straturile din spatele grupului vor fi aruncate. Aceasta este o opțiune foarte utilă pentru desenele mari cu multe obiecte suprapuse! 

Bacsis: dacă aveți o mulțime de felii în lista de straturi și nu doriți să le deranjeze, puteți să le dezactivați temporar utilizând butonul cuțit mic din partea de jos a listei de straturi.

După cum am demonstrat, putem exporta conținut în multe feluri. Care dintre ele ar trebui să alegeți? Ei bine, depinde de ce ai nevoie. De exemplu, Faceți exportabil opțiunea este foarte utilă pentru exportarea icoanelor sau a straturilor unice. Aș recomanda să creați felii sau tablouri de bord atunci când vă exportați întregul document (dar aceasta este doar o sugestie).

3. Exporturi multiple la o dată

O caracteristică excelentă de luat în considerare la utilizarea schiței 3 este aceea că puteți exporta mai multe imagini simultan. Nu vreau sa spun ca poti exporta imagini diferite de la felii diferite sau tablouri de arta (desi este posibil). Ceea ce vreau să spun este că puteți exporta simultan diferite versiuni dintr-un singur strat sau felie.

Pasul 1

Adăugați o felie din pătratul turcoaz sau faceți-o exportabilă prin panoul de inspecție. Indiferent ce faceți, ar trebui să se încheie cu noi setări de export cu valori implicite în panoul de inspectori. 

Pasul 2

Apasă pe + pictogramă chiar deasupra meniului drop-down format. Ați spus în mod efectiv Sketch că doriți două fișiere de export diferite, dintr-un singur strat! Faceți clic pe pictograma de câte ori doriți să obțineți toate dimensiunile sau formatul de care aveți nevoie.

Acum, ați putea crede că am acoperit tot ce trebuie să știți despre opțiunile de export ale Sketch, dar mai sunt multe! Iată câteva sfaturi suplimentare:

5. Export direct

Glisând orice strat din listă pe desktop sau într-o altă aplicație, acesta va fi exportat automat pentru tine .png format. Țineți apăsată tasta opțiune (⌥) cheie pentru a trece la format PDF atunci când trageți afară.

6. Comenzi Generator & Sketch Sketch

Am vorbit despre caracteristicile native din cadrul Sketch-ului, dar există o comunitate foarte activă care dezvoltă plugin-uri tot timpul. Generatorul de șabloane, de exemplu, este o modalitate complet nouă de a exporta conținut utilizând schița. Ar trebui să aruncați o privire asupra acestui plugin, mai ales dacă ați încercat anterior caracteristica Adobe Generator din Photoshop CC.

Sketch Commands reprezintă o colecție de comenzi de script. Unele dintre ele sunt legate de sarcini de export, deci este o altă extensie pe care aș recomanda să o aruncați o privire.

Concluzie

Toate lucrurile pe care le-am acoperit în timpul acestui tutorial vă vor înarmat cu abilitățile de a înțelege pe deplin cum să exportați conținut în Sketch 3. Dacă aveți întrebări despre export sau Sketch în general, lăsați un comentariu mai jos. Voi fi bucuros să vă ajut!