Immagini ed Effetti

Immagini ed Effetti

Importare un immagine

Per importare un immagine basta trascinarla dalla cartella all’interno dell’area di lavoro. L’immagine verra posizionata all’interno di un rettangolo con le stesse proporzioni dell’immagine originale. Cambiando le dimensioni l’immagine non verra deformata ma tagliata in modo tale che riempia sempre a pieno la nostra area. Questo metodo è chiamato Fill.

Per cambiare metodo di riempimento selezioniamo l’immagine e sotto il paramentro fill clicchiamo e apriamo il menu. Qua oltre a modificare alcune regolazioni base come esposizione e contrasto possiamo decidere se utilizzare altri metodi oltre al Fill. Abbiamo il Fit che l’immagine riempie senza essere tagliata, Crop ci da la possibilità di tagliare e Tile che utilizza la ripetizione per riempire l’area (utile per texture).

Importare più immagini

Per importare più immagini oppure per importare un immagine all’interno di una forma predefinita possiamo usare lo strumento che troviamo nelle forme “Place Image…“.

Qua possiamo appunto scegliere una o più immagini e in fase di posizionamento possiamo cliccare in uno spazio vuoto o su una forma.

Proviamo ad importare due immagini come da esempio:

Effetti

Gli effetti si attivano dalla barra laterale di destra sotto il menù Effects e si aggiungono premendo sul tasto +. Tra gli effetti troviamo inner e drop shadow che servono per creare le ombre e gli effetti di sfocatura.

Per creare l’effetto sfocatura usiamo il layer blur oppure il background blur. Il layer viene fatto direttamente sul livello dell’oggetto mentre il background viene fatto passare ai livelli sotto.

Le ombre esterne invece si creano come se la luce venisse dall’alto e molto morbida. Le ombre non devono disturbare l’impaginato quindi evitare ombre troppo visibili e forti.

Dall’immagine precedente proviamo ad aggiungere un blur all’immagine (10px) e ombre esterene al pulsante (X=0 , Y=7, Blur=14, Trasp. Colore=30%).

Plugins

I plugins sono risorse esterne che possono essere utilizzate per compensare mancanze del programma. Attenzione la maggior parte dei plugin sono creati da terzi.

Clicchiamo sullo strumento per la gestione delle risorse (quello accanto ai testi) e poi selezioniamo Plugins dal menu. Possiamo fare una ricerca e cercare svariati plugins oppure salvarli tra i preferiti.

Creiamo un rettangolo di testo e proviamo a scrivere tre lettere tipo “abc” per regolare la dimensione del testo. Una volta regolata spostiamoci nei plugin e cerchiamo Lorem ipsum. Avviamolo. Con il rettangolo di testo selezionare possiamo generare del testo di riempimento al suo interno.

Proviamo allo stesso modo ad utilizzare il plugin di unsplash disegnando 4/5 quadrati sul fondo della pagina. Ecco il risultato:

Elenco Plugins consigliati:

Esercizio

Copiare una delle seguenti dashboard in Figma:

https://dribbble.com/shots/20920711-Wise-Dashboard

https://dribbble.com/shots/22622884-Torrent-client-dashdoard

https://dribbble.com/shots/22625844-AI-Data-Analytics-and-Visualisation-Dashboard-by-Syncrely