Share
Cosa starai creandoSketch è uno strumento molto versatile che puoi utilizzare quotidianamente per il tuo lavoro come web e application designer. In questo tutorial ti presenterò le funzionalità di tavola da disegno, layer, drop-shadow, inner-shadow, text, border e fill all'interno di Sketch e ti mostrerò come usarlo per creare un'icona semplice e accattivante.
Se è la prima volta che apri Sketch 3, ci sono quattro cose da tenere a mente sull'interfaccia di Sketch:
Le tavole da disegno sono un modo semplice per organizzare i tuoi disegni con cornici delimitate. Lo schizzo 3 ti offre un insieme di dimensioni predefinite di una tavola da disegno quando premi il tasto Una chiave (o fare clic su Inserisci> Tavola da disegno). Puoi vedere che di default hai le dimensioni dello schermo per i principali dispositivi Apple sul lato destro dell'interfaccia di Sketch:
Scegliere Schermate iPad> Paesaggio. Puoi vederlo ora nel pannello dei livelli a sinistra. Se hai una piccola dimensione dello schermo, non dimenticare di ridurre lo zoom per vedere l'intera scheda artistica premendo Comando-trattino (-).
Rinominare la scheda artistica facendo doppio clic su di essa. Chiamalo Icona dell'acqua. Dovresti avere qualcosa di simile ora:
Quindi, abbiamo una tavola da disegno iPad con una larghezza di 1024 px e un'altezza di 768 px. Iniziamo aggiungendo lo sfondo. Per fare ciò, premere il tasto R chiave (o andare a Inserisci> Forma> Rettangolo), fai clic sulla tua tavola da disegno e trascina il mouse / dito per creare un piccolo rettangolo. Puoi vederlo ora nel pannello dei livelli. Rinominalo sfondo.
Successivamente, andremo nel pannello di destra e imposteremo la proprietà del nostro livello di sfondo:
Aggiungiamo un po 'di stile. Vai a frontiere e deselezionalo. Ora, aggiungi la sfumatura facendo clic sul colore grigio predefinito nella proprietà dei riempimenti. Un menu a discesa viene visualizzato con cinque opzioni: Colore piatto, Sfumatura lineare, Sfumatura radiale, Sfumatura angolare, Riempimento motivo e Riempimento disturbo.
Da sinistra a destra: Colore piano, Sfumatura lineare, Sfumatura radiale, Sfumatura angolare, Riempimento motivo, Riempimento disturboClicca su Gradiente radiale. Ora puoi vedere un cursore, con il colore bianco al centro del gradiente a sinistra e il colore nero che è l'estremità del tuo colore sfumato a destra. Per cambiare i loro colori, devi solo cliccarci sopra nel cursore:
Impostiamo i colori. Sketch ti permette di cambiare tra il valore esadecimale, RGBA e HSBA cliccando sul RGB o HSB etichetta. Ho più familiarità con HSBA, quindi per il colore nel centro che scelgo H190, S50, B100, A100, e per quello sull'estremo scelgo H210, S50, B100, A100.
Creeremo ora l'icona che contiene il droplet. Per fare ciò, aggiungi un nuovo rettangolo. stampa R, e clicca e trascina. Quindi rinomina il tuo nuovo livello icona.
Impostare il Larghezza a 515 e Altezza a 515. Posizionalo al centro usando gli strumenti nella parte superiore del pannello di destra:
Usa gli strumenti sopra Posizione per impostare la posizione del tuo livello rispetto al suo contenitoreImpostare il Raggio di confine a 144, e come per il livello Sfondo, deselezionare il bordo e quindi riempire l'icona scegliendo un colore bianco e piatto.
Ora aggiungeremo un po 'di ombra. La funzionalità Ombre ha cinque opzioni: il colore, la posizione X, la posizione Y, la sfocatura e la diffusione. Imposta l'ombra su:
L'ultimo passaggio per l'icona consiste nell'aggiungere un'ombra interna nella parte inferiore. Inner Shadows segue esattamente la stessa funzionalità di Shadows, tranne che si diffonde al dentro della tua forma invece che all'esterno. Possiamo impostare l'ombra interna a:
E finalmente dovresti ottenere questo:
In questi passaggi finali imparerai a creare un'icona goccia d'acqua con Sketch. Per prima cosa abbiamo bisogno di un ovale, quindi premete O (o andare a Inserisci> Forma> Ovale), e definirne le dimensioni come Larghezza: 200 e Altezza: 200.
Quindi, crea un triangolo andando a Inserisci> Forma> Triangolo (nessuna scorciatoia per questo). Vai al pannello di destra, controlla Equilatero, e impostare il Larghezza a 200 e Altezza a 200.
Ora viene la parte difficile. Devi posizionare i tuoi strati in questo modo:
Seleziona i due livelli e fai clic sul Unione pulsante, che si trova nella parte superiore dell'interfaccia di Sketch.
Ora che abbiamo la nostra forma a goccia, aggiungeremo il tocco finale per renderlo più user-friendly aggiungendo il raggio su di esso. Per fare ciò, seleziona la tua forma e clicca sul modificare strumento, che si trova nella barra degli strumenti superiore.
Fortunatamente, il primo punto selezionato è quello che vogliamo modificare. Vai al pannello di destra e cambia il angoli valore a 34.
Congratulazioni! La forma della goccia è ora completa! Ora puoi appiattirlo facendo clic sull'icona nella barra dei menu in alto (a destra di Ruota). Seleziona il livello di droplet nel pannello dei livelli e rinominalo Gocciolina. Vai al pannello di destra e imposta il Larghezza a 266 e il Altezza a 377. Quindi centralo con lo strumento nella parte superiore del pannello di destra:
E ora il passo finale: lo stile! Innanzitutto deseleziona il bordo e quindi riempi la forma con un gradiente radiale. Crea il valore centrale H190, S70, B100, A100, e il valore inferiore H210, S70, B100, A100.
Quindi aggiungeremo un Ombra interiore con:
E…
Grazie per aver letto il tutorial. Spero che ti abbia aiutato a imparare a utilizzare alcuni degli strumenti fondamentali disponibili in Sketch. Non esitate a fare domande nei commenti qui sotto.
Accentsconagua