În acest tutorial vom învăța cum să aliniem perfect obiectele și să le distribuim folosind Sketch 3. Voi folosi câteva exemple de bază pentru a explica pe deplin opțiunile - veți fi surprinși de unii dintre ei!
Aceasta este probabil cea mai ușoară tehnică de aici.
Uită-te la partea de sus a inspectorului: veți vedea câteva butoane legate de aliniere. Cele șase butoane amplasate în partea dreaptă (alinierea la stânga, orizontală, dreapta, sus, verticală și în jos) sunt pentru alinierea straturilor între ele, dar dacă aveți doar un singur obiect selectat, acesta va fi aliniat la placa de bază parentală. Iată cum funcționează:
După cum sa menționat, puteți utiliza aceleași butoane atunci când aveți mai multe obiecte selectate pentru a le alinia. Dar ce se întâmplă dacă vrem să aliniem obiecte multiple la tabloul de bord?
Pentru a alinia mai multe obiecte în tabloul de artă, grupați-le într-un singur grup Layer. Grupul va acționa ca un singur obiect atunci când utilizați butoanele de aliniere.
Cu toate acestea, gruparea în acest mod s-ar putea să nu se potrivească mereu situației dvs. Permiteți-mi să vă arăt o altă abordare.
Selectați straturile pe care doriți să le aliniați, țineți apăsată tasta tasta Alt pentru a face ca pictogramele de aliniere din inspector să-și schimbe aspectul. Acum aliniați straturile spre tabloul de bord! Rețineți că trebuie să aveți straturile selectate în artboard-ul, altfel această opțiune nu va fi disponibilă.
În următorul exemplu, am selectat trei straturi diferite:
Aceasta funcționează și cu grupurile Layer; ceea ce înseamnă că puteți selecta mai multe grupuri de straturi, țineți apăsată tasta alt și aliniați-le la tabloul de bord.
O altă situație: vreau să fac totul aliniat la un singur obiect. Mai întâi trebuie să înțelegeți că, în mod implicit, Sketch se aliniază întotdeauna la cel mai din afară strat de toate cele selectate. Acest strat este denumit "obiect cheie".
În consecință, pentru a alinia toate obiectele selectate în partea de sus, obiectul găsit în poziția cea mai de sus va fi obiectul cheie. Iată un exemplu în care aliniază trei obiecte la poziția din dreapta sus (pătratul roșu este "obiectul cheie" al nostru):
Ar fi bine dacă am putea schimba obiectul cheie pentru a se potrivi cu cel dorit, nu? Iată trucul: blocați stratul pe care doriți să îl acționați ca obiect cheie,apoi selectați din nou toate straturile. (Puteți selecta numai straturi blocate prin lista de straturi).
În următorul exemplu, pătratul albastru este deja blocat, deci va acționa ca noul nostru obiect cheie. Acum, să aliniem obiectele din dreapta sus:
Am descoperit acest truc la îndemână grație SketchTips. Și puteți utiliza pluginul Align To al lui Lucien Lee pentru a obține aceleași rezultate.
Bacsis: puteți utiliza și butoanele de aliniere pentru a alinia mai multe puncte vectoriale atunci când vă aflați Mod de editare. Selectați obiectul vectorial, faceți dublu clic pentru a trece la modul Editare (puteți utiliza și pictograma Editare din bara principală de instrumente) și selectați toate punctele vectoriale pe care doriți să le aliniați.
Dacă ne uităm la partea superioară a panoului de inspecție, veți observa că nu am menționat încă cele două pictograme de aliniere din stânga. Aceste butoane sunt destinate distribuției obiectelor orizontal și vertical. Putem, de asemenea, să le distribuim în mod egal, ceea ce este foarte util! Să presupunem că avem câteva forme selectate și dorim să le distribuim orizontal. Folosește Distribuie pe orizontală butonul sau mergeți la Aranjare> Distribuție> orizontal.
Straturile din stânga și cel mai drept vor rămâne unde sunt, în timp ce straturile din mijloc vor fi distanțate uniform între ele. Puteți face același lucru de-a lungul axei verticale cu Distribuie vertical opțiune.
Bine, dar dacă aș vrea ca aceste straturi să fie de 20 de pixuri una de cealaltă? Distribuiți pe orizontală / vertical nu va ajuta aici.
În acest caz, putem folosi Faceți grila instrument (Aranjați> Faceți grila) Pentru a defini distanțele orizontale și verticale între obiecte. Ar putea fi puțin mai greu de înțeles la început, așa că permiteți-mi să vă arăt un alt exemplu animat:
Aici am vrut să distribuie patru straturi diferite cu un spațiu de 20px între ele. Am făcut o grilă dintr-un singur rând (pentru a alinia toate straturile orizontal) și patru coloane (o coloană pe strat). Apoi am setat marginea coloanelor la 20px pentru a obține distanța dorită. Dacă vreau să distribui straturile pe verticală, trebuie să fac o rețea de patru rânduri (cu marginea de 20px) și o coloană.
Dacă nu vă simțiți confortabil folosind această metodă, puteți încerca pluginul SketchDistributor. Vă permite să distribuiți obiectele selectate cu un spațiu specificat.
Sper că ți-a plăcut acest tutorial. Stăpânirea instrumentelor de aliniere și distribuție în Sketch vă va economisi mult timp!