Seleziona l’oggetto.
Ultimo aggiornamento il
8 giu 2021
Scopri come impostare tratto, riempimento, ombra esterna e ombra interna per gli oggetti in Adobe XD.
Applicazione di un colore di riempimento a un oggetto
Fai clic sul rettangolo accanto a Riempi. Viene visualizzato il Selettore colore.
Nota
Puoi anche usare lo strumento Contagocce per riempire i colori. Il tasto [i] attiva il contagocce del comando Riempi.
- Facendo clic una volta sul tasto si aprirà il contagocce del comando Riempi.
- Facendo nuovamente clic sul tasto si chiuderà il contagocce del comando Riempi.
Puoi scegliere di:
- Specificare i valori HSBA, RGB o esadecimali se conosci i valori esatti del colore. Puoi anche passare tra i diversi metodi colore.
- Regola il colore usando il campo del colore e il relativo cursore. In questo caso, i valori numerici HSBA, RGB ed esadecimali si modificano di conseguenza.
- Puoi impostare il riempimento e la sua opacità usando il cursore colore o specificando un valore in percentuale.
- Utilizzare lo strumento Contagocce per selezionare un colore dalla tavola da disegno.
- All’oggetto puoi anche applicare riempimenti con sfumatura. Per ulteriori informazioni sulle sfumature, consulta Creazione e modifica di sfumature.
Durante la modifica delle opzioni nel Selettore colore, puoi visualizzare in anteprima le modifiche sulla tavola da disegno.
Nota
Adobe XD supporta anche la scorciatoia per i codici esadecimali. Ad esempio, se immetti 0 e premi Invio, XD visualizza automaticamente il colore con codice #000000.
Puoi salvare un colore come campione per utilizzarlo in seguito. Per salvare un colore come campione, fai clic sull’icona + nella parte inferiore del Selettore colore.
Puoi riorganizzare i campioni nel Selettore colore trascinando un campione nella nuova posizione. Per eliminare un campione, trascinalo fuori dal Selettore colore.
Applicazione del riempimento immagine agli oggetti
Attiva innanzitutto il riempimento (come descritto in Applicazione di un colore di riempimento a un oggetto). Trascina quindi l’immagine sull’oggetto dalla posizione in cui l’hai salvata (ad esempio, Finder o Esplora risorse).
Ritaglio e posizionamento dei riempimenti immagine
Ora puoi fare doppio clic sulle immagini posizionate nei contenitori (Oggetto > Maschera con forma) per ritagliare e riposizionare le immagini (quando trascinate dal desktop) nei riempimenti immagine. Utilizzare la modalità Ritaglio in un riempimento immagine per:
- Fare doppio clic e inserire una modalità Ritaglio per un riempimento immagine
- Riposizionare l’immagine nella modalità Ritaglio o
- Spostare l’immagine ovunque nella modalità Ritaglio
Questo miglioramento è applicabile anche per i file importati da Photoshop e Sketch. I file importati conservano i riempimenti immagine e il ritaglio eseguito nell’applicazione sorgente.
Operazione incolla immagine dagli Appunti
Puoi anche copiare un’immagine al di fuori di Adobe XD negli Appunti del sistema operativo, selezionare una forma e incollare l’immagine come riempimento immagine dagli Appunti del sistema operativo. Le immagini riempiranno anche una forma se la forma è selezionata e selezioni File > Importa.
Creazione di tratti e specifica del colore del tratto
Seleziona l’oggetto.
La larghezza predefinita del tratto è 1. Per specificare un valore diverso, modifica il valore Bordo.
Fai clic sul campione colore rettangolare accanto a Bordo. Viene visualizzato il Selettore colore.
Puoi scegliere di:
- Specificare i valori HSBA, RGB o esadecimali se conosci i valori esatti.
- Regolare il colore usando il campo del colore e il relativo cursore. In questo caso, i valori numerici HSBA, RGB ed esadecimali si modificano di conseguenza.
- Utilizzare lo strumento Contagocce per selezionare un colore dalla tavola da disegno.
- Impostare l’opacità del bordo usando il cursore colore o immettendo un valore in percentuale.
- Modificare la dimensione del bordo e creare linee tratteggiate
- Specificare le estremità (troncata, arrotondata, in proiezione) e gli angoli (vivo, arrotondato, smussato) e i tratti interni ed esterni.
Durante la modifica delle opzioni nel Selettore colore, puoi visualizzare in anteprima il colore del bordo sull’oggetto.
Puoi salvare un colore come campione per utilizzarlo in seguito. Per salvare un colore come campione, fai clic sull’icona + nella parte inferiore del Selettore colore.
Puoi riorganizzare i campioni nel Selettore colore trascinando un campione in una nuova posizione. Per eliminare un campione, trascinalo fuori dal Selettore colore.
Se l’oggetto è un tracciato chiuso, puoi specificare la larghezza del tratto. Per allineare il tratto lungo il tracciato, scegli una delle opzioni seguenti elencate nella prossima illustrazione.
Per impostazione predefinita, XD allinea il tratto interno in un tracciato chiuso.
A. Tratto interno B. Tratto esterno C. Tratto centrale D. Estremo troncato E. Estremo arrotondato F. Estremo in proiezione G. Angolo vivo H. Angolo arrotondato I. Angolo smussato
Nota
La modifica della larghezza o dell’allineamento del tratto non cambia la dimensione effettiva dell’oggetto (in termini di rettangolo di selezione). Tuttavia, quando esporti l’oggetto, è possibile che le sue dimensioni cambino a seconda del tipo di tratto utilizzato.
SVG supporta solo i tratti centrali. Se esporti un oggetto con tratti interni o esterni come SVG, la dimensione dell’immagine esportata appare come se avesse un tratto centrale.
Crea forme vettoriali modificabili da linee, tracciati, forme, testo, immagini e gruppi booleani usando Contorno traccia. Dopo aver creato la forma, puoi modificarla ulteriormente usando i controlli o cambiando le proprietà nel pannello Proprietà.
Segui questi passaggi per creare un'icona usando Contorno traccia.
Tutorial
Con la funzione Traccia contorno in Adobe XD, puoi personalizzare facilmente tracciati, bordi e forme creando oggetti in scala ed esportandoli facilmente in SVG per il Web. Guarda questo tutorial di Dani Beaumont, Principal Product Manager, Adobe XD, per scoprire come utilizzare Traccia contorno.
Tempo di visione: 2 minuti 50 secondi.
Le ombre interne ed esterne rendono più realistici gli oggetti di design simulando effetti di illuminazione.
Ombra interna
Le ombre interne possono essere usate per simulare la profondità 3D in un'immagine 2D. Ad esempio, le ombre interne possono aiutare a simulare lo stato premuto di un pulsante.
Ombra esterna
Le ombre esterne, oltre a fornire un effetto 3D agli oggetti, possono anche creare un senso di confine senza applicare un tratto di bordo.
Segui questi passaggi per applicare un'ombra interna o esterna a un oggetto di design:
Fai clic sull'oggetto, quindi fai clic su Ombra esterna o Ombra interna in Controllo proprietà.
Nel selettore colore, aggiungi un colore e imposta la tonalità dell'ombra:
a. Per aggiungere un colore all'ombra, effettua una delle seguenti operazioni:
- Specifica il valore HSB, RGB o esadecimale del colore.Puoi passare facilmente tra queste modalità colore usando il menu.
- Regola il colore usando il campo del colore e il relativo cursore. In questo caso, il valore HSB, RGB o esadecimale viene regolato automaticamente.
- Utilizzare lo strumento Contagocce per selezionare un colore dalla tavola da disegno.
b. Per impostare l'opacità dell'ombra: usa il cursore dell'opacità o digita il valore dell'opacità in percentuale.
Per salvare un colore e una tonalità scelti come campione di colore, fai clic sull'icona + in fondo al selettore colore.Puoi riorganizzare i campioni nel selettore colore trascinandoli.Per eliminare un campione, trascinalo fuori dal Selettore colore.
Specifica quanto segue nella finestra Ispezione Proprietà:
- Scostamento X e Y: specifica la distanza dal bordo dell'oggetto fino al punto in cui vuoi che l'ombra sia scostata.
- S (Sfoca): specifica la distanza dal bordo dell'ombra fino al punto in cui vuoi che si verifichi la sfocatura.
Puoi copiare facilmente le ombre applicate a un oggetto su altri oggetti utilizzando Incolla aspetto.Premi Ctrl+ C sull'oggetto che ha l'ombra applicata, quindi premi Ctrl+Alt+V (Incolla aspetto) sull'oggetto di destinazione.
Quando generi le specifiche di progettazione, le ombre vengono convertite in CSS che gli sviluppatori possono utilizzare immediatamente.
Esempi
Neomorfismi
?$png$&jpegSize=200&wid=901)
Raccolta di oggetti con ombre applicate
?$png$&jpegSize=200&wid=900)
Tutorial
Quando vuoi aggiungere profondità alla progettazione, la funzione Ombra interna in Adobe XD può essere davvero rivoluzionaria. Guarda questa esercitazione di Dani Beaumont — Principal Product Manager, Adobe XD — per imparare a utilizzare le ombre interne.
Tempo di visione: 3 minuti.
Applicazione degli effetti di fusione
Seleziona un’immagine o un oggetto (tra cui forme, livelli di testo, gruppi, maschere o componenti) sull’area di lavoro della progettazione. Dalla finestra di Ispezione proprietà, seleziona e applica il metodo fusione di tua scelta. Per ulteriori informazioni, consulta Applicazione degli effetti di fusione.
Eliminazione di riempimento, ombra o traccia da un oggetto
Seleziona l’oggetto. Seleziona quindi la casella di controllo accanto a Bordo, Riempimento o Ombra nella finestra di Ispezione proprietà. Per ripristinare il riempimento, il tratto o l’ombra, seleziona nuovamente la casella di controllo.
Altri contenuti simili
Progetta prototipi UX con Adobe XD
Crea modelli interattivi per siti web e app per dispositivi mobili.
