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

Adobe XD è un programma davvero fantastico per la progettazione di siti Web e supera di gran lunga il suo vecchio predecessore Adobe Photoshop. A Bright Vessel. Ne abbiamo fatto il nostro programma di riferimento per creare esperienze utente per i clienti.

Ecco come esportare le risorse durante la creazione di un sito Web WordPress in Adobe XD.

1. Per prima cosa vuoi aprire il tuo file Adobe XD

2. Una volta aperto il file, ti consigliamo di assicurarti di effettuare il provisioning dei file in modo che possano essere esportati correttamente.

La necessità di essere precisi e tutti gli elementi devono essere di gruppo e nella loro 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. Questa è una soluzione semplice. Quando si fa doppio clic su uno degli elementi, ad esempio: l'uomo. Si trascina in modo che nessun elemento si smargini in un'altra riga.

Questa è una soluzione semplice. Quando si fa doppio clic su uno degli elementi, ad esempio: l'uomo. Si trascina in modo che nessun elemento si smargini in un'altra riga.

3. Lo schema di denominazione è molto importante. È sempre bene dare un nome alle immagini non solo per un modo semplice per identificarle, ma anche per la SEO. Useremo l'HDR per le intestazioni e poi la BG per gli sfondi.

In questo modo è più facile sapere di che tipo di elemento 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, assegna un nome al gruppo e alle singole immagini. Usa le lettere minuscole e un trattino tra ogni parola.

4. Ora 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, raccoglierai risorse che altrimenti non potrebbero essere realizzate in HTML e il nostro builder potrebbe essere in uso.

Esportazione > file > selezionati

Ora che abbiamo dato un nome al livello, non dobbiamo digitarlo. Quindi 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 un modo semplice per identificarle, ma anche per la SEO. Useremo l'HDR per le intestazioni e poi la BG per gli sfondi.

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