Come creare grafica con Adobe XD: una guida per principianti

Adobe XD è un potente strumento che ti consente di creare progetti UI/UX per software, app, siti Web e altro ancora. Ciò include anche la creazione di modelli, prototipi e componenti dell'interfaccia utente personalizzati per un'interfaccia. Puoi creare progetti sia semplici che complessi utilizzando Adobe XD.

Qui, illustreremo come aggiungere grafica semplice, comprese forme, immagini e testo a un nuovo progetto Adobe XD. Questa sarà seguita da una guida su come convertire un gruppo di forme in componenti e su come riutilizzare tali componenti nella pagina. Infine, l'articolo tratterà anche come esportare la tua grafica. Entriamo subito.

Creazione di un progetto Adobe XD

Quando crei un nuovo progetto Adobe XD, dovresti selezionare una dimensione di layout per il tuo progetto. Fornisce alcuni modelli tra cui scegliere in base ad alcuni dispositivi popolari.

Alcuni esempi di questo includono iPhone X/XS/11 Pro (375 px per 812 px), iPad (768 px per 1024 px) o Web 1920 (1920 px per 1080 px). In alternativa, hai anche la possibilità di selezionare una larghezza e un'altezza personalizzate per il tuo progetto.

Dopo aver creato un nuovo progetto, Adobe XD aprirà una pagina vuota. È qui che puoi iniziare ad aggiungere immagini, forme, testo o altri elementi di design. A seconda della versione di Adobe XD che hai, potresti essere in grado di farlo esplorare alcune delle nuove funzionalità che Adobe XD offre.

L'elemento di design di primo livello è la pagina canvas stessa. Se lo evidenzi, puoi utilizzare il riquadro di destra per modificare direttamente alcune delle sue proprietà, come la larghezza o l'altezza della tela.

Come aggiungere immagini

Esistono diversi modi per aggiungere immagini al tuo progetto Adobe XD.

• La prima opzione è fare clic su Hamburger icona del menu nella parte superiore della colonna di sinistra. Clicca su Importaree apri il file che desideri aggiungere.
• Un'altra opzione è passare all'immagine in Esplora file e trascinare il file direttamente in Adobe XD.
• Una terza opzione è copiare e incollare l'immagine se l'hai aperta in un altro software, come Microsoft Word.

Come ridimensionare e riposizionare un'immagine

Puoi riposizionare e ridimensionare un'immagine direttamente sulla tela o modificandone le proprietà.

1. Evidenzia l'immagine. Quando evidenzi un elemento di design sull'area di disegno, potrai vederne le proprietà nel riquadro di destra.
2. Modifica la larghezza e l'altezza dell'immagine. Questi sono rappresentati dal w e H campi.
3. Puoi anche cambiare il X e Y coordinate di dove inizia la parte superiore sinistra dell'immagine.
4. Per spostare l'immagine, fai clic e trascina l'immagine sulla tela.
5. Per ridimensionare, trascina i punti situati ai bordi dell'immagine.

Come regolare i bordi di un'immagine

È possibile regolare gli angoli dell'immagine per cambiarne la forma.

1. Evidenzia l'immagine.
2. Vedrai alcuni punti situati attorno all'immagine. Inoltre, ci sono anche alcuni punti situati all'interno degli angoli dell'immagine.
3. Fare clic e trascinare su un punto situato all'interno dell'immagine. Questo rimodellerà lentamente l'immagine in una forma diversa.

Come aggiungere altri effetti all'immagine

Puoi manipolare ulteriormente l'immagine aggiungendo effetti. Ciò include opacità, bordi, effetti di sfocatura e altro ancora.

1. Evidenzia l'immagine e cambia il opace nel riquadro di destra.
2. Mentre sei ancora nel riquadro di destra, cambia il colore di Bordine. Qui puoi anche cambiare il spessore, stile trattino, e stile d'angolo del confine.
3. Aggiungi un effetto sfocato all'immagine e cambia il Quantità di sfocatura dell'oggetto per aumentare o diminuire l'intensità della sfocatura.

Come aggiungere forme

Puoi aggiungere forme in Adobe XD tramite il riquadro di sinistra.

1. Nel riquadro di sinistra, puoi scegliere di creare più forme di base tra cui un rettangolo, un cerchio, un triangolo e una linea. Seleziona la forma che vuoi disegnare.
2. Fare clic su un punto qualsiasi della tela e trascinare il cursore per iniziare a creare la forma.

Come aggiungere forme personalizzate

Puoi utilizzare lo strumento forma personalizzata per creare la tua forma.

1. Nel riquadro di sinistra, seleziona il penna icona.
2. Fai clic in un punto qualsiasi della tela per aggiungere il tuo primo punto, o "angolo", per la forma. Per ogni punto della forma, fai clic sulla tela nell'area in cui vorresti che fosse.
3. Quando hai finito di creare la forma, premi il tasto esc tasto sulla tastiera.

Come cambiare il colore di una forma

Puoi cambiare il colore della forma usando il riquadro di destra.

1. Evidenzia la forma.
2. Nel riquadro di destra, cambia il Fmalato.
3. Inoltre, puoi anche aggiungere bordi, effetti di sfocatura e modificare l'opacità della forma allo stesso modo delle immagini.

Come aggiungere testo

Puoi anche aggiungere e modificare il testo nello stesso modo in cui aggiungi forme.

1. Clicca sul Testo icona nel riquadro di sinistra.
2. Fare clic in un punto qualsiasi dell'area di disegno per aggiungere una nuova casella di testo. Digita il testo desiderato nella casella di testo.
3. Utilizzare il riquadro di destra per modificare il dimensione, famiglia di font, e allineamento campi.

Come creare componenti

Un componente è un gruppo di elementi di progettazione che possono essere riutilizzati. Per creare e utilizzare un componente, devi prima avere un gruppo di forme o altri oggetti di design.

1. Evidenzia il gruppo di forme nella tela. Fare clic con il pulsante destro del mouse sul gruppo e selezionare Crea componente.
2. Nella parte inferiore del riquadro di sinistra, fare clic su Risorse. Si aprirà un nuovo menu che elenca tutte le risorse che hai, incluso il componente che hai appena aggiunto.
3. Fare clic e trascinare il componente dall'elenco dei componenti nell'area di disegno. In questo modo creerai lo stesso identico gruppo di elementi.

Come esportare articoli

Puoi esportare singoli elementi e l'intera pagina.

1. Se desideri esportare un singolo elemento, evidenzia l'elemento che desideri esportare.
2. Clicca sul Hamburger icona del menu nella parte superiore della colonna di sinistra.
3. Selezionare Esportare, quindi fare clic su Selezionato.
4. Se desideri esportare l'intera pagina (o tutte le pagine), seleziona Tutte le tavole da disegno invece.
5. Puoi specificare il formato del file (PNG, JPG, SVG o PDF), a cosa servirà l'elemento esportato (come Web o iOS) e dove desideri salvare il file.

Diventa esperto in Adobe XD

Queste sono solo le basi. Alcune altre funzionalità includono la possibilità di aggiungere collegamenti ipertestuali, simboli, integrazioni di app e kit dell'interfaccia utente. Adobe XD offre anche nuove funzionalità di tanto in tanto per migliorare e semplificare la creazione dei tuoi modelli e dei progetti di interfaccia utente personalizzati.

Ci sono più corsi disponibili online per aiutarti a portare le tue nuove abilità di progettazione al livello successivo.

Questi corsi Adobe ti trasformeranno in un maestro di Creative Cloud

Leggi Avanti

Circa l'autore