Share
Cosa starai creandoSketch, realizzato dai simpatici ragazzi di Bohemian Coding, è un eccellente programma per il design dell'interfaccia. Questo tutorial per principianti ti introdurrà alla progettazione con Sketch. Non avrai bisogno di alcuna esperienza precedente con il programma, solo un po 'di tempo libero da dedicare all'apprendimento di qualcosa di nuovo.
Ti mostrerò come configurare una semplice tavola da disegno, come creare forme utilizzando strumenti di base, operazioni booleane, il pannello Ispettore e l'elenco dei livelli. Vedremo come modificare le proprietà, organizzare i livelli, importare immagini e altri aspetti utili del flusso di lavoro di un designer Sketch.
Iniziamo creando un nuovo documento. Hai già aperto Sketch 3? Ok, questo è tutto ciò che devi fare! Lasciatemi spiegare; per impostazione predefinita Sketch ti offre una tela infinita su cui lavorare. Puoi iniziare a creare elementi senza paura di esaurire lo spazio.
Facciamo un ulteriore passo avanti e creiamo una tavola da disegno. Le tavole da disegno ti consentono di creare cornici fisse sulla tela infinita di Sketch.
Per creare una nuova tavola da disegno andare a Inserisci> Tavola da disegno (UN) dalla barra degli strumenti o dal menu principale.Fai clic e trascina all'interno dell'area di disegno di Sketch. Noterai come Sketch visualizza i valori di larghezza e altezza mentre lo fai. Creare un 600 x 800 px tavola da disegno.
Mancia: Possiamo creare tutte le tavole da disegno necessarie. Possiamo anche cambiare il nome della tavola da disegno sul Elenco dei livelli a sinistra dello schermo, o modificare la sua posizione e le dimensioni utilizzando il Ispettore pannello a destra. Elimina tavole da disegno colpendo il supr o Elimina chiave quando la tavola da disegno è selezionata.
Ad esempio, usiamo il Ispettore per cambiare la posizione della tavola da disegno a X = 0 Y = 0. In alternativa puoi semplicemente trascinare la tavola da disegno in quella posizione.
Mancia: Vai a Visualizza> Mostra griglia per attivare la griglia di default che viene fornita con Sketch. Aiuterà a posizionare gli oggetti esattamente come li vuoi.
Ora cambieremo il colore della tavola da disegno. Fare così aiuterà nei seguenti passaggi. Seleziona la tua tavola da disegno e dai un'occhiata al Ispettore pannello. Controlla il Colore di sfondo opzione e fare clic sul campione di colore a destra. Apparirà un selettore di colori che ci mostrerà diverse opzioni e proprietà di colore. Scegli il colore che desideri. Non importa quale colore selezioni, ma in questo caso opteremo per un grigio caldo.
La tua tavola da disegno è pronta e sei pronto per iniziare con il layout di base!
Vai a Inserisci> Forma> Rettangolo (R). Creare un 360 x 500 px rettangolo sulla tua tavola da disegno. Proprio come con la creazione di tavole da disegno, puoi disegnare un rettangolo casuale e regolarne le proprietà attraverso Ispettore pannello. Mostra la griglia per semplificare le cose!
Dopo aver selezionato il rettangolo, dai un'occhiata al Ispettore pannello. Rimuovi il bordo della forma deselezionandolo. Clicca il Riempire campione e impostarlo a bianca. Possiamo impostare angoli arrotondati nel Ispettore pannello anche; muovi il Raggio cursore a destra o digita 10 nel campo di input.
Creare un 40 x 40 px cerchio usando Inserisci> Forma> Ovale. Ricorda, puoi disegnare un cerchio casuale e usare il Ispettore per cambiare le sue proprietà. Ora spostalo nella parte centrale del rettangolo. Utilizzare il Strumento Zoom sul Toolbar se hai bisogno di ingrandire.
Crea un'altra cerchia, questa volta 20 x 20 px. Allinearlo all'interno del primo cerchio, nel mezzo. Quando lo sposti, vedrai alcune guide intelligenti per aiutarti ad allineare gli oggetti.
In effetti, per assicurarti che i tuoi contenuti siano allineati correttamente, tieni premuto il tasto opzione (⌥) tasto sulla tastiera. Lo schizzo ti aiuterà a ottenere misurazioni esatte dei pixel che mostrano le distanze tra gli oggetti. Per esempio:
Questo è un grande aiuto! Grazie, Sketch!
Ora trasformeremo i nostri due oggetti cerchio in un singolo "anello". Seleziona entrambi i cerchi direttamente o attraverso Elenco dei livelli. Vai al Toolbar e fare clic su sottrarre.
Ora abbiamo una nuova forma complessa:
Seleziona questo nuovo oggetto e seleziona anche il tuo rettangolo. Ora fai clic Unione per ottenere la forma definitiva.
Cosa abbiamo fatto qui? Quando abbiamo bisogno di una forma non standard, dobbiamo crearla da soli. Potremmo disegnarlo con lo strumento penna, ma spesso una forma complessa è facile da suddividere in forme più standard. Possiamo usare operazioni booleane per quello. Lo schizzo viene fornito con unione, sottrarre, intersecare e differenza operazioni booleane per ottenere forme complesse create da sottotracciati.
Queste opzioni sono non distruttivo operazioni in modo da poter modificare facilmente le proprietà dei sottotraccia (forme di base) selezionandole su Elenco dei livelli. Quando hai una forma con più sottotracciati nella tua tela, dai un'occhiata all'elenco dei livelli. Vedrai una freccia di apertura a sinistra e se espandi vedrai un elenco di sottotracciati per la tua forma. Sul lato destro è possibile selezionare un'operazione booleana per ogni sottotracciato singolarmente se si desidera modificarla.
La nostra forma di base è quasi finita! Assicurati che la tua forma rimanga selezionata, guarda al Ispettore pannello, selezionare Shadows e impostare le sue proprietà come segue: Colore> R = 38 G = 30 B = 10 Alpha = 50, X = 0, Y = 20, Sfocatura = 20 e Spread = 0. Alla fine la tua forma dovrebbe assomigliare a questa:
Un modulo di login non sarebbe nulla senza campi e pulsanti di input, quindi facciamo un po '!
Mancia: Puoi bloccare la tua forma principale per evitare errori e movimenti imprevisti. Selezionalo e vai a Disponi> Blocca livello. Un piccolo lucchetto sull'Elenco dei livelli ti informa su quali oggetti sono bloccati.
Usando il Strumento Rettangolo (R), creare un 280 x 50 px forma, rimuovi il bordo, imposta il colore di riempimento su R = 239 G = 87 B = 46, Raggio = 2 e posizionarlo come mostrato nell'immagine seguente.
Creane un altro 280 x 70 px forma, riempilo di bianco, Raggio = 2, impostato spessore del bordo a 1 e colore del bordo a R = 234 G = 234 B = 234. Spostalo in cima al rettangolo arancione, trascinandolo verso l'alto di 10px. Duplica questa forma (Control-D), seleziona la copia e trascinala un'altra 80px su.
Ora crea un po ' 20 x 20 px quadrato usando Strumento rettangolo (R). Riempi con bianco e set Raggio = 2 , spessore del bordo=1 e colore del bordo a R = 234 G = 234 B = 234. Sposta 10px sotto il rettangolo arancione. La tua tavola da disegno dovrebbe assomigliare a questa:
Ok, ora andremo ad arricchire il modulo di login con alcuni elementi di testo per etichette e segnaposto. Seleziona il Strumento di testo (T) e quindi puoi fare clic in qualsiasi punto della tela per inserire il tuo livello di testo. Vedrai il testo che viene aggiunto e selezionato in modo da poter iniziare a digitare immediatamente. Noterai che l'Inspector è stato modificato per mostrarti tutte le proprietà che si applicano al testo.
Mancia: Puoi anche fare clic e trascinare per creare una casella di testo di dimensioni fisse. Quando il testo diventa troppo grande per adattarsi all'interno della scatola, verrà ridimensionato verso il basso, al contrario di una normale casella di testo che aumenta la sua larghezza per adattarsi al contenuto.
Aggiungi il testo "USERNAME" e vai a Ispettore pannello per impostare le sue proprietà. Utilizzare il Carattere di Montserrat, Peso = Regular, Size = 11, Spacing = 1, Colore> R = 204 G = 204 B = 204.
Riseleziona il Tipo Strumento (T) e aggiungi il testo di inserimento "Armando" (o quello che vuoi). Questa volta usa questi valori per impostare le sue proprietà: Carattere di Montserrat, Peso = Regular, Size = 24, Spacing = 0, Colore> R = 113 G = 87 B = 44. Seleziona entrambe le parti di testo e posizionale come mostrato di seguito:
Questo ordina il nostro segnaposto e il testo di input per il primo campo. Per il secondo, duplica i livelli di testo e spostali sul secondo rettangolo 80px giù. Cambia il contenuto del testo in "PASSWORD" e "*******".
Aggiungi alcuni nuovi livelli di testo e utilizza gli attributi come mostrato di seguito. Avrai bisogno Apri Sans font.
Noterai che il collegamento "Hai dimenticato la password" è sottolineato. Per ottenere questo effetto clicca su Pulsante opzioni di testo per rivelare effetti decorativi. Scegli il secondo, mentre il livello testo è selezionato.
Ora, il risultato:
In questo momento dovremmo dare un'occhiata alla lista dei livelli. Potrebbe essere una buona idea iniziare a organizzarli e rinominarli rettangolo forme o semplicemente raggruppando elementi. Rinominare gli oggetti facendo doppio clic su di essi, oppure facendo clic con il pulsante destro del mouse e selezionando Rinominare opzione. Per creare un gruppo di livelli basta selezionare uno o più livelli, quindi fare clic su Gruppo icona nel Toolbar. Puoi anche trascinare gli oggetti tra i gruppi nell'elenco dei livelli come ti aspetteresti.
L'obiettivo principale è quello di trasformare un elenco di livelli disordinato in qualcosa di più elegante e organizzato. Prendilo in considerazione non solo seguendo questo tutorial ma in ogni progetto con cui sei coinvolto.
Abbiamo già creato gli elementi di cui abbiamo bisogno nella nostra casella di accesso. È tempo di aggiungere un logotipo.
Apri il logo_icon.svg Ho fornito un allegato a questo tutorial. Ora concentrati sul pannello Elenco livelli. Vedrai come è stata creata l'icona utilizzando diversi percorsi che possiamo modificare facilmente.
Usando il Strumento Rettangolo (R), creare un 30 x 60 px forma e posizionalo come mostrato nell'immagine seguente. Non è necessario posizionarlo perfettamente al 100% in questo momento. Ricorda, puoi usare la griglia e il opzione (⌥) tasto sulla tastiera durante lo spostamento. In questo modo, Sketch ti mostrerà le distanze precise.
Ora sul Elenco dei livelli, trascina il livello percorso nel gruppo "Forma". Mettilo in cima. In questo modo otterrai una nuova forma composta. Questo è il potere delle operazioni booleane e delle forme vettoriali in Sketch!
Ti ricordi quando abbiamo parlato di quelle piccole icone sul lato destro dei tuoi sottotracciati? Possiamo selezionare diverse operazioni booleane per ogni sottotracciato singolarmente. Quindi cambiamo il primo a sottrarre e il secondo a Differenza.
Passo facile Assicurati che la tua nuova forma composta sia ancora selezionata. Vai a Layer> Percorsi> Appiattisci. In tal modo avrete perso i sottotracciati e le loro capacità di modifica, ma il prossimo passo sarà più semplice ora.
Mantieni la forma selezionata. Vai al Toolbar e fare clic su modificare icona. Noterai alcune modifiche al Ispettore pannello e la forma stessa. Seleziona tutti i punti del vettore trascinando sulla tela.
Concentrarsi sul Ispettore pannello e set angoli a 5. Clic Riempi to rivela la finestra delle opzioni e seleziona il secondo tipo di riempimento, Gradiente lineare. Vedrai due punti collegati da una linea che si sovrappone al tuo livello. Ogni punto sulla linea rappresenta una fermata colore lungo il gradiente.
Per cambiare il colore di una delle fermate, fai clic su di essa nell'area di disegno. Vedrai che il selettore dei colori nell'ispettore si aggiorna sul colore di quel punto. Scegli un nuovo valore in questo selettore di colori e vedrai il risultato. Sapendo questo, possiamo adattare il primo colore a R = 245 G = 166 B = 35 e il secondo a R = 239 G = 87 B = 46. Puoi anche cambiare i colori direttamente sul selettore di colori.
Questa è la nostra forma finale:
Copia la forma e incollala nel modulo di accesso.
Il tuo logotipo è quasi finito, quindi ora aggiungi del testo generico. Scrivi quello che vuoi, ma per questo tutorial ho usato "myapp" e la seguente posizione e proprietà:
Il nostro modulo di accesso è finito!
Sketch ci consente di lavorare con immagini bitmap e oggetti vettoriali. Per lo sfondo ho intenzione di selezionare un'immagine da Unsplash. Foto fantastiche lì! Prenderò questo prodotto da Nick West.
Ora torna al tuo documento. Seleziona la tua tavola da disegno sul Elenco dei livelli pannello e vai a Inserisci> Immagine per selezionare l'immagine. Attenzione: questa immagine è enorme! Stiamo andando a ridimensionarlo un po 'andando al Ispettore pannello e cambiando le sue dimensioni per qualcosa di più gestibile come 1280 x 876 px. Posizione esso a X = 0 Y = 0 e assicurati che sianella parte inferiore dell'elenco dei livelli.
Mancia: Se importi le immagini mantenendo selezionata una tavola da disegno, l'immagine verrà mascherata automaticamente usando le dimensioni della tavola da disegno. Sposta il livello all'esterno del gruppo tavola da disegno per annullarlo. Ulteriori informazioni su come mascherare gli oggetti nella documentazione ufficiale.
In Sketch possiamo modificare i colori di un'immagine esistente usando il Regola colore pannello situato nel Ispettore. Possiamo cambiare Saturazione, Luminosità e Contrasto. Impostato Saturazione a 0 e Contrasto a 1,9.
Ora crea un 600 x 800 px rettangolo usando Inserisci> Forma> Rettangolo (R). Posizionalo su X= 0 Y = 0. Sul Elenco dei livelli sposta il livello forma appena sopra il livello dell'immagine. Duplicalo e imposta le proprietà dei rettangoli come segue: per il primo set di rettangoli Opacità = 100%, Blending = Moltiplica, Colore> R = 173 G = 166 B = 152. Per il secondo (appena sopra il primo) set Opacità = 50%, sfumatura = normale, colore> R = 173 G = 166 B = 152.
Ecco come dovrebbe apparire.
Spero ti sia piaciuto questo tutorial ...
Dato che stai creando un elemento dell'interfaccia utente, aggiungere alcuni dettagli aggiuntivi al modulo di accesso potrebbe essere davvero utile, non credi? Le interfacce di forma hanno molti aspetti; stati diversi e feedback. Tutte le tecniche che ho trattato durante questo tutorial ti hanno fornito le abilità per creare alcuni elementi aggiuntivi come il seguente:
Pensi di poterlo fare? Se ti blocchi o hai bisogno di chiedermi qualcosa, lascia un commento o trovami su Twitter. Non vedo l'ora di vedere come sali!
Accentsconagua