Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Disegnare oggetti tramite forme geometriche

Le opzioni di Sketch per disegnare tramite forme geometriche, ad esempio per la costruzione di icone dedicate alle interfacce mobile.
Le opzioni di Sketch per disegnare tramite forme geometriche, ad esempio per la costruzione di icone dedicate alle interfacce mobile.
Link copiato negli appunti

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)


Icone per mobile

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)


Quadrato contenitore

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)


Modificare le caratteristiche di un oggetto

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)


Disegnare un triangolo

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)


Modificare un oggetto con Rotate

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)


Ridimensionare valori singoli dell'oggetto

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)


Allineamento degli oggetti

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.


Ti consigliamo anche