Share
In questo tutorial impareremo come allineare perfettamente gli oggetti e distribuirli usando Sketch 3. Ho intenzione di usare alcuni esempi di base per spiegare completamente le opzioni: ne rimarrete sorpresi in alcuni di essi!
Questa è forse la tecnica più semplice qui.
Guarda la parte superiore dell'ispettore: vedrai alcuni pulsanti relativi all'allineamento. I sei pulsanti situati a destra (allineati a sinistra, orizzontalmente, a destra, in alto, in verticale e in basso) servono per allineare i livelli tra di loro, ma se hai solo un singolo oggetto selezionato, sarà allineato alla tavola da disegno principale. Ecco come funziona:
Come accennato, puoi usare gli stessi pulsanti quando hai selezionato più oggetti per allinearli tra loro. Ma cosa succede se vogliamo allineare più oggetti alla tavola da disegno?
Per allineare più oggetti alla tavola da disegno, raggruppali in un unico gruppo di livelli. Il gruppo agirà come un singolo oggetto quando si usano i pulsanti di allineamento.
Tuttavia, il raggruppamento in questo modo potrebbe non adattarsi sempre alla tua situazione. Lascia che ti mostri un altro approccio.
Seleziona i livelli che vuoi allineare, tieni premuto il tasto tasto alt per fare in modo che le icone di allineamento nell'Inspector cambino il loro aspetto. Ora stai allineando i livelli alla tavola da disegno! Tieni presente che è necessario disporre dei livelli selezionati entro la tavola da disegno, altrimenti questa opzione non sarà disponibile.
Nell'esempio seguente ho selezionato tre livelli diversi:
Funziona anche con i gruppi di livelli; nel senso che puoi selezionare più gruppi di livelli, tenere premuto il tasto alt e allinearli alla tavola da disegno.
Un'altra situazione: voglio rendere tutto allineato a un singolo oggetto. Innanzitutto devi capire che, per impostazione predefinita, Sketch si allinea sempre al estremo strato di tutti quelli selezionati. Questo strato viene definito "l'oggetto chiave".
Di conseguenza, per allineare tutti gli oggetti selezionati verso l'alto, l'oggetto trovato nella posizione superiore più lontana sarà l'oggetto chiave. Ecco un esempio in cui allineo tre oggetti alla posizione in alto a destra (il quadrato rosso è il nostro "oggetto chiave"):
Sarebbe bello se potessimo cambiare l'oggetto chiave in modo che corrisponda a quello che vogliamo, giusto? Ecco il trucco: bloccare il livello che si desidera agire come oggetto chiave,quindi selezionare nuovamente tutti i livelli. (Puoi selezionare solo i livelli bloccati tramite l'elenco Livelli).
Nell'esempio seguente il quadrato blu è già bloccato, quindi agirà come il nostro nuovo oggetto chiave. Ora allineamo nuovamente gli oggetti in alto a destra:
Ho scoperto questo trucco pratico grazie a SketchTips. E puoi usare il plugin Align To di Lucien Lee per ottenere gli stessi risultati.
Mancia: puoi anche utilizzare i pulsanti di allineamento per allineare più punti vettoriali quando sei dentro Modalità Modifica. Seleziona l'oggetto vettoriale, fai doppio clic per passare alla modalità Modifica (puoi anche utilizzare l'icona Modifica sulla barra degli strumenti principale) e seleziona tutti i punti vettoriali che desideri allineare.
Se guardiamo in cima al pannello dell'ispettore noterai che non ho ancora menzionato le due icone di allineamento a sinistra. Questi pulsanti servono per distribuire gli oggetti orizzontalmente e verticalmente. Possiamo anche distribuirli in modo uniforme, il che è molto utile! Diciamo che abbiamo selezionato alcune forme e vorremmo distribuirle orizzontalmente. Utilizzare il Distribuisci orizzontalmente pulsante o vai a Disponi> Distribuisci> Orizzontalmente.
Gli strati più a sinistra e righmost rimarranno dove sono, mentre gli strati nel mezzo saranno distanziati in modo uniforme tra loro. Puoi fare lo stesso lungo l'asse verticale con il Distribuisci verticalmente opzione.
Ok, ma cosa succede se voglio che questi livelli siano distanziati di 20px l'uno dall'altro? Distribuisci orizzontalmente / verticalmente non aiuterà qui.
In questo caso possiamo usare il Crea griglia strumento (Disponi> Crea griglia) Per definire le spaziature orizzontali e verticali tra gli oggetti. All'inizio potrebbe essere un po 'difficile da capire, quindi lascia che ti mostri un altro esempio animato:
Qui volevo distribuire quattro strati diversi con una spaziatura di 20 px tra di loro. Ho creato una griglia di una singola riga (per allineare tutti i livelli in orizzontale) e quattro colonne (una per strato). Quindi ho impostato il margine delle colonne su 20px per ottenere la spaziatura desiderata. Se voglio distribuire i livelli verticalmente, devo creare una griglia di quattro righe (con margine di 20 pixel) e una colonna.
Se non ti senti a tuo agio con questo metodo, puoi provare il plug-in SketchDistributor. Ti consente di distribuire oggetti selezionati con una spaziatura specificata.
Spero che questo tutorial ti sia piaciuto. Padroneggiare gli strumenti di allineamento e distribuzione in Sketch ti farà risparmiare molto tempo!
Accentsconagua