In questa lezione, e in quelle successive, approfondiremo gli strumenti di disegno presenti in Sketch, dei tool versatili con i quali è possibile realizzare interfacce, icone e illustrazioni vettoriali. Nello specifico, in questa lezione vedremo come gestire le icone, come disegnarle ex novo e, ancora, come importarne altre in formato SVG, acquisite da fonti esterne.
In Figura 1 possiamo notare una collezione di icone a noi familiari, quelle individuabili nelle schermate sui dispositivi Apple, nel sistema operativo proprietario iOS.
Figura 1. Icone per mobile (click per ingrandire)
Come possiamo apprendere, alcune sono geometricamente molto semplici, altre sono invece leggermente più complesse: pur essendo il risultato di una lavorazione più elaborata, si basano comunque su forme geometriche. Più avanti affronteremo il terzo tipo di costruzione geometrica, quella basata sulla definizione di oggetti utilizzando i tracciati a mano libera.
L'icona più semplice è sicuramente quella denominata "Slideshow": se la si guarda attentamente, si noterà come sia composta da un quadrato dagli angoli arrotondati e da un triangolo isoscele. Concentriamoci su questa prima icona e cominciamo a emularne la costruzione. Come primo passo, realizziamo il quadrato contenitore, selezionando la figura Rounded dal tasto Shape del menu Insert, come illustrato in Figura 2.
Figura 2. Quadrato contenitore (click per ingrandire)
Naturalmente, vi saranno degli aggiustamenti da compiere per rendere il quadrato simile a quello dell'icona originale. Innanzitutto, gli angoli non sono abbastanza arrotondati: ci spostiamo nel pannello delle opzioni degli strumenti e individuiamo la funzionalità Radius, che ci permette di aumentare i valori di arrotondamento. Modifichiamo il valore del Radius finché non siamo soddisfatti: 27 dovrebbe essere una cifra verosimile. Anche lo spessore della linea di contorno non coincide a quella dell’icona che stiamo duplicando, perciò andiamo a modificarne il valore nella porzione del pannello dedicata al bordo dell'oggetto. In questo caso, impostiamo il valore 2, come riportato in Figura 3.
Figura 3. Modificare le caratteristiche di un oggetto (click per ingrandire)
Usando la stessa modalità usata per la costruzione del quadrato, andremo a selezionare nel Shape la forma Triangle, per disegnare la seconda figura geometrica che compone l'icona, come illustrato in Figura 4.
Figura 4. Disegnare un triangolo (click per ingrandire)
Di default, la forma triangolo presenta il vertice centrale in alto. Per il nostro design, tuttavia, quest'ultimo deve essere a destra: dovremo perciò andare a ruotare l'oggetto selezionando lo strumento Rotate. Applichiamo una rotazione di 90° in senso orario, come illustrato in Figura 5.
Figura 5. Modificare un oggetto con Rotate (click per ingrandire)
Ora dobbiamo intervenire sulla forma triangolo, affinché si possano accorciare i due lati uguali. Ci accorgiamo, però, come di default il ridimensionamento sia proporzionale: per questo motivo, dobbiamo scollegare altezza e larghezza dalle opzioni degli strumenti, cliccando l'icona a forma di lucchetto. Un esempio è mostrato in Figura 6.
Figura 6. Ridimensionare valori singoli dell'oggetto (click per ingrandire)
Ora allineiamo al cento le due forme. Selezioniamole entrambe e clicchiamo sugli strumenti di allineamento, disponibili in alto, sempre nel pannello delle opzioni degli strumenti. La costruzione di questa icona è quindi terminata, come evidente in Figura 7.
Figura 7. Allineamento degli oggetti (click per ingrandire)
In questa lezione abbiamo visto come abbinare due semplici forme geometriche nella costruzione di un'icona, nelle prossime incrementeremo la difficoltà del disegno, utilizzando metodi più elaborati che, oltre alle forme, comprendano anche la mano libera.
