Comment exporter des éléments d'Adobe XD pour créer un site Web WordPress ?

Adobe XD est un programme assez génial pour la conception de sites web et surpasse de loin son ancien prédécesseur Adobe Photoshop. Chez Bright Vessel. nous en avons fait notre programme de prédilection 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 devez d'abord ouvrir votre fichier Adobe XD.

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

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

Dans cette image, un concepteur ajoute des éléments dans plusieurs calques différents, alors que tous les calques étaient groupés. Les éléments n'ont pas été correctement recadrés. C'est une solution facile à mettre en œuvre. Lorsque vous double-cliquez sur l'un des éléments, par exemple l'homme, vous faites glisser l'élément de manière à ce qu'il n'empiète pas sur une autre rangée. Vous faites glisser l'élément de manière à ce qu'il n'y ait pas de saignement sur une autre rangée.

Il s'agit d'une solution facile à mettre en œuvre. Lorsque vous double-cliquez sur l'un des éléments, par exemple l'homme, vous faites glisser l'élément de manière à ce qu'aucun élément n'apparaisse sur une autre ligne. Vous faites glisser l'élément de manière à ce qu'il n'y ait pas de saignement sur une autre ligne.

3. Le schéma de dénomination est très important. Il est toujours bon de donner un nom à vos images, non seulement pour les identifier facilement, mais aussi pour le référencement. Nous utiliserons HDR pour les en-têtes et BG pour les arrière-plans.

Il est ainsi plus facile de savoir de quel type d'image il s'agit, puis le 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 que vous avez corrigé tous les éléments, le moyen le plus simple d'exporter est de les grouper afin de pouvoir exporter l'image nécessaire. Dans la plupart des cas, vous rassemblerez des éléments qui ne pourraient pas être réalisés en HTML et dans un constructeur que vous utilisez.

Fichier > Exporter > Sélectionné

Maintenant que nous avons nommé le calque, nous n'avons plus besoin de le taper. Nous savons donc quel type d'éléments sont les images pour l'arrière-plan, la typographie, le bouton, etc. Il est toujours bon de nommer ses images, non seulement pour les identifier facilement, mais aussi pour le référencement. Nous utiliserons HDR pour les en-têtes et BG pour les arrière-plans.

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