Tutorial di schizzo

10 trucchi per gli schizzi che farebbero dire a Owen Wilson "Wooow!" (Tonnellate di GIF!)

Se non hai ottenuto il riferimento nel titolo, ti prego di guardare questo video. Prego :)

Una delle mie cose preferite da fare in un'app è curiosare tra tutte le impostazioni e i menu. A volte premo anche tasti casuali sulla mia tastiera per vedere se si innesca qualche funzione nascosta che paga magicamente i miei prestiti studenteschi.

Nessuna fortuna su quello ancora.

Non è che sto cercando di rompere l'app frugando. Mi piace solo spingere i suoi limiti per vedere cosa succede.

Ecco un breve elenco di alcuni trucchi che ho scoperto mentre scherzavo:

1. Il metodo Scribble

Cominciamo le cose con il botto, vero?

Ho scoperto questo metodo circa un mese fa ed è stato il mio talento nascosto per i primi appuntamenti. Le ragazze lo scavano, te lo dico io. Nota a margine, potresti già conoscere questo trucco dal mio articolo sui grafici.

Inizia scarabocchiando come un asilo con lo strumento matita (premi P sulla tastiera). Per le aree più dense, scarabocchia un mazzo nello stesso punto. Non dimenticare di uscire dalla tua massa di scarabocchi per creare dei valori anomali.

Imposta il bordo in modo che abbia un ampio divario e estremità curve. Presto! Hai appena creato alcuni dati scatter casuali. Mettilo qui, partner

2. Raggio del bordo su singoli vertici

Quindi ormai sappiamo che è possibile impostare diversi raggi del bordo nella casella del raggio del bordo usando le barre:

GRANDE AFFARE. Jk, piuttosto figo!

Ma! Puoi anche scegliere come target singoli vertici alla volta, il che è un vero risparmio di tempo per i poligoni più complicati.

3. Appiattisci forme ruotate per ripristinare il riquadro di delimitazione

Immagina: hai appena creato una forma rad e ruoti la cosa di circa 45º. Ora la cosa è tutta assurda, il ridimensionamento è traballante, ed è come se fossi stato risucchiato da un'onda perché non sai da che parte andare.

Basta appiattirlo per ripristinare il rettangolo di selezione di un buon vecchio rettangolo:

4. Opzione-trascina, quindi Comando-D per duplicare forme e azioni

Stai facendo un elenco di articoli? Smetti di copiare, incollare e spostare forme / gruppi come un doofus.

Tieni premuta l'opzione mentre trascini la forma / gruppo nella posizione desiderata, quindi premi Comando + D per duplicarla. Non solo duplicherà la forma, ma replicherà anche la distanza che hai spostato:

Pssst ... funziona anche con le tavole d'arte!

5. Modifica le impostazioni di Pathfinder su Forme combinate

Quante volte ti è successo quando hai provato a combinare un mucchio di forme in una:

Abbastanza fastidioso, specialmente quando LobsterFest è proprio dietro l'angolo e NON SEI ANCORA FINITO IL LOGO, JON.

Va bene, respiro. Basta selezionare le forme degli oggetti combinate e impostarle su Union:

Potresti pensare che funzionerebbe, ma dal momento che ci sono forme che compongono i buchi nelle lettere, anche quelli sono unione. Meraviglioso.

Fortunatamente, Sketch è intelligente e ti consente di impostare diverse operazioni di unione di tracciati per ogni sottoforma nella forma combinata, in modo da poter sottrarre facilmente quei fori:

EDIT: Anche se è ancora bello sapere che puoi regolare le operazioni di unione dei singoli livelli, Steffen Karspeck è fantastico e ha sottolineato che avrei potuto evitare i buchi nel primo passaggio impostando la mia preferenza di riempimento. L'ho visto centinaia di volte, ma in realtà non mi sono mai preso il tempo di leggere cosa significano le due opzioni. Mi sarei risparmiato un po 'di mal di testa :)

Grazie Steffen!

6. Accatastamento dei simboli per gli stati degli oggetti

Per la vita non riesco a ricordare dove ho visto questa tecnica per la prima volta, quindi non me ne prenderò il merito. Ma è intelligente da morire, quindi eccoci qui comunque.

L'uso di un simbolo per la navigazione della tua app è fantastico perché puoi condividerlo tra le pagine. Il rovescio della medaglia è che devi sempre avere una sorta di livello di elemento di navigazione selezionato per mostrare la pagina attiva nel menu di navigazione.

Lasciamo perdere il livello extra usando una tecnica che sto chiamando "Stacking di simboli":

Mentre progetti la navigazione, impila tutti gli stati delle pagine uno sopra l'altro. Impila quanti ne vuoi, per quanti stati vuoi o devi rappresentare.

Quando hai finito, rendi tutto un grande simbolo!

Poiché Sketch consente il testo personalizzato in diverse istanze di simboli, è possibile personalizzare il testo in ciascuno dei livelli di stato. Per disattivare uno stato, basta digitare uno spazio per "cancellare" quello stato del livello di testo. Nella GIF in basso, voglio che siano selezionate le Impostazioni e che le altre siano bianche (il mio stato predefinito):

Nella GIF sopra, stai osservando quattro degli stessi identici simboli, ognuno dei quali rappresenta stati diversi utilizzando la tecnica di impilamento dei simboli. Questo è fantastico, perché ora è molto più facile personalizzare elementi come il carattere tipografico e la dimensione del carattere perché non devi preoccuparti di aggiornare il livello Elemento di navigazione selezionato sopra di esso.

7. Trova un livello

Se un livello non è nella vista dell'elenco dei livelli quando fai clic tenendo premuto il tasto Comando su un oggetto sulla tavola da disegno, non lo vedrai evidenziato. Questo è piuttosto fastidioso.

Fortunatamente c'è una funzione semi-nascosta per rivelare un livello nell'elenco dei livelli, portandolo in una vista scorrevole. Usa Comando-Maiusc-J:

Ciò rende SUPER conveniente saltare direttamente direttamente al livello selezionato, quindi Tab attorno ai livelli fratelli all'interno di quel gruppo.

Comando-Fai clic su un livello, quindi premi Comando-Maiusc-J per rivelare il livello nell'elenco dei livelli.

Suggerimento bonus

Se non disponi già di un plug-in per aiutarti a comprimere i livelli, fai clic tenendo premuto il tasto Opzione su una cartella per comprimere rapidamente tutto il suo contenuto:

Quando apri un elenco che comprimi, vedrai che anche i bambini sono stati compressi.

8. PNG veloci - 4 modi!

A volte hai solo bisogno di rippare un PNG, ma non vuoi passare attraverso il fastidio di configurare le impostazioni di esportazione, quindi scavare tra i tuoi file per trovare dove è stata salvata la dannata cosa.

Ecco 4 modi per scuotere un PNG, in Brilliant Technicolor GIF ™:

Metodo 1: trascina il livello della tavola da disegnoMetodo 2: trascina la tavola da disegno Esporta / SliceMetodo 3: trascina un singolo gruppo o livelloMetodo 4: trascina fuori dallo schizzo, in Altre app
Suggerimento rapido: se stai lavorando a un progetto modale, usa un PNG per il "livello inferiore". Ti eviterà di dover duplicare l'intero design dell'app sotto il modale e ti salverà dal fare clic accidentalmente sui livelli sottostanti.

Bonus! Tyler Howarth mi ha ricordato che puoi anche esportare i PNG semplicemente copiando il livello o la tavola da disegno stessa. Abbiamo completamente spaziato inserendo questo nell'articolo, quindi Tyler ottiene il merito per questo. Ecco la sua aggiunta:

Puoi anche copiare / incollare qualsiasi tavola da disegno / gruppo / livello dentro e fuori di Sketch. Copia una tavola da disegno, passa a Medio / Lento, incolla e vai!
- Tyler

Hot dog, amico. Questo regola!

9. Riempimenti rapidi del motivo

Questo è una specie di suggerimento per due a uno.

Suggerimento 1: per creare un motivo continuo, crea un simbolo quadrato della tavola da disegno e circondalo con istanze di se stesso. Questo ti aiuterà a dare un'idea di come sarà il tuo modello finito.

Suggerimento 2: per rendere rapidamente questo un riempimento a motivo per un'altra forma, utilizzeremo una tecnica che abbiamo appreso nel passaggio 8.

Seleziona la forma da riempire con il motivo, apri il menu "Riempi con immagine" e trascina la tavola da disegno del motivo di base nella casella di anteprima dell'immagine:

10. Lens Bokeh

Ovviamente dovresti sempre salvare il meglio per ultimo.

Sono un fotografo migliore del dilettante, ma non del tutto professionale e uno dei migliori effetti fotografici è il bokeh. Probabilmente non hai mai sentito la parola, ma l'hai vista decine di migliaia di volte.

bokeh (n): la qualità visiva delle aree sfocate di un'immagine fotografica, in particolare quelle rese da un particolare obiettivo.
(fonte immagine)

È un effetto davvero bello e la profondità di campo esagerata attira immediatamente l'attenzione sulla parte messa a fuoco della fotografia.

Stavo scherzando con il mio metodo Scribble, provandolo a dimensioni diverse, sovrapponendo diverse linee scarabocchiate e aggiungendo effetti a ciascuno.

L'immagine sotto è 100% Sketch, senza fotografia. Solo uno sfondo sfumato sottile con tre linee di "metodo scarabocchio" di diverso colore, opacità e sfocatura gaussiana. Aggiungi un livello di rumore impostato su Sovrapponi e schiaffeggia del testo vetroso in alto (riempimento sfumato con un bordo interno superiore e inferiore). Avrai un effetto bokeh dall'aspetto piuttosto convincente:

Seguimi su Medium / Twitter, iscriviti alla pubblicazione UX Power Tools e seguici su Twitter per aggiornamenti, nuovi contenuti e altre cose interessanti. Metti mi piace, ama e condividi se sei all'altezza!

Ti amo gente.