Comment exporter des ressources depuis Adobe XD pour créer un site Web WordPress

Adobe XD est un excellent logiciel de conception de sites web, bien supérieur à son prédécesseur, Adobe Photoshop. Chez Bright Vessel, nous en avons fait notre logiciel de référence pour créer des expériences utilisateur pour nos clients.

Voici comment exporter des ressources lors de la création d’un site Web WordPress dans Adobe XD.

1. Vous souhaitez d'abord ouvrir votre fichier Adobe XD

2. Une fois votre fichier ouvert, vous devez vous assurer de provisionner les fichiers afin qu'ils puissent être exportés correctement.

Il faut être précis et tous les éléments doivent être regroupés et dans leur propre section.

Dans cette image, un designer ajoute des éléments sur plusieurs calques différents. Ainsi, même si tous les calques étaient regroupés, les éléments n'étaient pas correctement recadrés. Il est facile de corriger ce problème : en double-cliquant sur l'un des éléments (par exemple, l'homme), faites glisser le curseur pour qu'aucun élément ne déborde sur une autre ligne.

C'est une solution simple. En double-cliquant sur l'un des éléments (par exemple, l'homme), faites glisser le curseur pour qu'aucun élément ne déborde sur une autre ligne.

3. Le choix du nommage est très important. Il est toujours judicieux de nommer vos images, non seulement pour faciliter leur identification, mais aussi pour le référencement. Nous utiliserons le HDR pour les en-têtes, puis l'arrière-plan pour les arrière-plans.

Cela permet de savoir plus facilement de quel type d'image il s'agit, ainsi que du nom de la section s'il s'agit d'un arrière-plan ou de l'élément s'il s'agit d'une typographie, d'un bouton, etc. Dans la zone des calques, nommez le groupe et les images individuelles. Utilisez des minuscules et un tiret entre chaque mot.

4. Une fois tous les éléments corrigés, le moyen le plus simple d'exporter est de les regrouper afin d'exporter l'image souhaitée. Dans la plupart des cas, vous rassemblerez des ressources qui ne pourraient pas être créées autrement en HTML et utiliserez un outil de création.

Fichier > Exporter > Sélectionné

Maintenant que nous avons nommé le calque, inutile de le saisir. Nous savons ainsi quels éléments sont les images d'arrière-plan, la typographie, les boutons, etc. Il est toujours judicieux de nommer vos images, non seulement pour faciliter leur identification, mais aussi pour le référencement. Nous utiliserons HDR pour les en-têtes, puis BG pour les arrière-plans.

Une fois l'exportation effectuée, vous devriez alors disposer d'un groupe d'éléments dans le type de fichier image souhaité.