Come esportare le risorse da Adobe XD per creare un sito web WordPress

Adobe XD è un programma piuttosto fantastico per la progettazione di siti web e supera di gran lunga il suo vecchio predecessore Adobe Photoshop. Noi di Bright Vessel. lo abbiamo reso il nostro programma preferito per creare esperienze utente per i clienti.

Ecco come esportare le risorse quando si costruisce un sito web WordPress in Adobe XD.

1. Per prima cosa è necessario aprire il file adobe XD

2. Una volta aperto il file, è necessario assicurarsi di eseguire il provisioning dei file in modo che possano essere esportati correttamente.

I dati devono essere precisi e tutti gli elementi devono essere raggruppati e inseriti nella propria sezione.

In questa immagine, un designer aggiunge elementi in diversi livelli, quindi quando tutti i livelli sono stati raggruppati. Gli elementi non sono stati ritagliati correttamente. La soluzione è semplice. Quando si fa doppio clic su uno degli elementi, ad esempio l'uomo. Si trascina in modo che nessun elemento vada a finire su un'altra riga.

Si tratta di una soluzione semplice. Quando si fa doppio clic su uno degli elementi, ad esempio l'uomo. Trascinate in modo che nessun elemento venga spostato su un'altra riga.

3. Lo schema dei nomi è molto importante. È sempre bene dare un nome alle immagini, non solo per una facile identificazione, ma anche per la SEO. Utilizzeremo HDR per le intestazioni e BG per gli sfondi.

In questo modo è più facile sapere di che tipo di immagine si tratta e quindi il nome della sezione se si tratta di uno sfondo o dell'elemento se si tratta di tipografia, pulsante, ecc. Nell'area dei livelli, dare un nome al gruppo e alle singole immagini. Usate le lettere minuscole e un trattino tra ogni parola.

4. Il modo più semplice per esportare una volta corretti tutti gli elementi è raggrupparli in modo da poter esportare l'immagine necessaria. Nella maggior parte dei casi, si tratta di raccogliere risorse che altrimenti non potrebbero essere realizzate in HTML e nel costruttore che si sta utilizzando.

File > Esportazione > Selezionato

Ora che abbiamo dato un nome al livello, non dobbiamo digitarlo. Così sappiamo che tipo di elementi sono le immagini per lo sfondo, la tipografia, il pulsante, ecc. È sempre bene dare un nome alle immagini, non solo per una facile identificazione, ma anche per la SEO. Utilizzeremo l'HDR per le intestazioni e il BG per gli sfondi.

Una volta esportato, si dovrebbe avere un gruppo di elementi nel tipo di file immagine desiderato.