Comment créer des graphiques avec Adobe XD: Guide du débutant

Adobe XD est un outil puissant qui vous permet de créer des conceptions UI/UX pour des logiciels, des applications, des sites Web, etc. Cela inclut également la création de maquettes, de prototypes et de composants d'interface utilisateur personnalisés pour une interface. Vous pouvez créer des conceptions simples et complexes à l'aide d'Adobe XD.

Ici, nous expliquerons comment ajouter des graphiques simples, notamment des formes, des images et du texte, à un nouveau projet Adobe XD. Cela sera suivi d'un guide sur la façon de convertir un groupe de formes en composants et de réutiliser ces composants sur la page. Enfin, l'article expliquera également comment exporter vos graphiques. Allons droit au but.

Création d'un projet Adobe XD

Lorsque vous créez un nouveau projet Adobe XD, vous devez sélectionner une taille de mise en page pour votre projet. Il fournit quelques modèles parmi lesquels vous pouvez choisir en fonction de certains appareils populaires.

Quelques exemples de ceci incluent l'iPhone X/XS/11 Pro (375px par 812px), l'iPad (768px par 1024px) ou le Web 1920 (1920px par 1080px). Alternativement, vous avez également la possibilité de sélectionner une largeur et une hauteur personnalisées pour votre projet.

Une fois que vous avez créé un nouveau projet, Adobe XD ouvre une page vierge. C'est ici que vous pouvez commencer à ajouter des images, des formes, du texte ou d'autres éléments de conception. Selon la version d'Adobe XD dont vous disposez, vous pourrez peut-être explorer certaines des nouvelles fonctionnalités qu'offre Adobe XD.

L'élément de conception de niveau supérieur est la page de canevas elle-même. Si vous le mettez en surbrillance, vous pouvez utiliser le volet de droite pour modifier directement certaines de ses propriétés, telles que la largeur ou la hauteur du canevas.

Comment ajouter des images

Il existe plusieurs façons d'ajouter des images à votre projet Adobe XD.

• La première option consiste à cliquer sur le Hamburger icône de menu en haut de la colonne de gauche. Cliquer sur Importer, et ouvrez le fichier que vous souhaitez ajouter.
• Une autre option consiste à accéder à votre image dans l'explorateur de fichiers et à faire glisser le fichier directement dans Adobe XD.
• Une troisième option consiste à copier et coller votre image si vous l'avez ouverte dans un autre logiciel, tel que Microsoft Word.

Comment redimensionner et repositionner une image

Vous pouvez repositionner et redimensionner une image soit directement sur le canevas, soit en modifiant ses propriétés.

1. Mettez l'image en surbrillance. Lorsque vous mettez en surbrillance un élément de conception sur le canevas, vous pourrez voir ses propriétés dans le volet de droite.
2. Modifiez la largeur et la hauteur de l'image. Ceux-ci sont représentés par le O et H des champs.
3. Vous pouvez également modifier le X et Oui coordonnées de l'endroit où commence le coin supérieur gauche de l'image.
4. Pour déplacer l'image, cliquez et faites glisser l'image sur le canevas.
5. Pour redimensionner, faites glisser les points situés sur les bords de l'image.

Comment ajuster les bords d'une image

Vous pouvez ajuster les coins de l'image pour modifier sa forme.

1. Mettez l'image en surbrillance.
2. Vous verrez quelques points situés autour de l'image. De plus, il y a aussi des points situés à l'intérieur des coins de l'image.
3. Cliquez et faites glisser sur un point situé à l'intérieur de l'image. Cela va lentement remodeler l'image dans une forme différente.

Comment ajouter d'autres effets à l'image

Vous pouvez manipuler davantage l'image en ajoutant des effets. Cela inclut l'opacité, les bordures, les effets de flou, etc.

1. Mettez l'image en surbrillance et modifiez le Orythme dans le volet de droite.
2. Toujours dans le volet de droite, changez la couleur du BCommande. Ici, vous pouvez également modifier le épaisseur, style tiret, et style de coin de la frontière.
3. Ajoutez un effet de flou à l'image et modifiez le Quantité de flou d'objet pour augmenter ou diminuer l'intensité du flou.

Comment ajouter des formes

Vous pouvez ajouter des formes dans Adobe XD via le volet de gauche.

1. Dans le volet de gauche, vous pouvez choisir de créer plusieurs formes de base, notamment un rectangle, un cercle, un triangle et une ligne. Sélectionnez la forme que vous souhaitez dessiner.
2. Cliquez sur n'importe quel point du canevas et faites glisser le curseur pour commencer à créer la forme.

Comment ajouter des formes personnalisées

Vous pouvez utiliser l'outil de forme personnalisée pour créer votre propre forme.

1. Dans le volet de gauche, sélectionnez le plume icône.
2. Cliquez n'importe où sur le canevas pour ajouter votre premier point, ou "coin", pour la forme. Pour chaque point de la forme, cliquez sur la toile sur la zone où vous souhaitez qu'elle soit.
3. Lorsque vous avez fini de créer la forme, appuyez sur la touche Esc touche de votre clavier.

Comment changer la couleur d'une forme

Vous pouvez modifier la couleur de la forme à l'aide du volet de droite.

1. Mettez la forme en surbrillance.
2. Dans le volet de droite, modifiez le Fmalade.
3. De plus, vous pouvez également ajouter des bordures, des effets de flou et modifier l'opacité de la forme de la même manière que les images.

Comment ajouter du texte

Vous pouvez aussi ajouter et modifier du texte de la même manière que vous ajoutez des formes.

1. Clique sur le Texte icône dans le volet de gauche.
2. Cliquez n'importe où sur le canevas pour ajouter une nouvelle zone de texte. Tapez le texte souhaité dans la zone de texte.
3. Utilisez le volet de droite pour modifier le Taille, famille de polices, et alignement des champs.

Comment créer des composants

Un composant est un groupe d'éléments de conception qui peuvent être réutilisés. Pour créer et utiliser un composant, vous devez d'abord disposer d'un groupe de formes ou d'autres objets de conception.

1. Mettez en surbrillance le groupe de formes dans le canevas. Faites un clic droit sur le groupe et sélectionnez Créer un composant.
2. En bas du volet de gauche, cliquez sur Actifs. Un nouveau menu s'ouvrira répertoriant tous les actifs dont vous disposez, y compris le composant que vous venez d'ajouter.
3. Cliquez et faites glisser le composant de la liste des composants vers le canevas. Cela créera exactement le même groupe d'éléments.

Comment exporter des articles

Vous pouvez exporter des éléments individuels ainsi que la page entière.

1. Si vous souhaitez exporter un seul élément, mettez en surbrillance l'élément que vous souhaitez exporter.
2. Clique sur le Hamburger menuicon en haut de la colonne de gauche.
3. Sélectionner Exporter, puis cliquez sur Choisi.
4. Si vous souhaitez exporter la page entière (ou toutes les pages), sélectionnez Tous les plans de travail Au lieu.
5. Vous pouvez spécifier le format de fichier (PNG, JPG, SVG ou PDF), à quoi servira l'élément exporté (tel que Web ou iOS) et où vous souhaitez enregistrer votre fichier.

Maîtrisez Adobe XD

Ce ne sont que les bases. Certaines autres fonctionnalités incluent la possibilité d'ajouter des hyperliens, des symboles, des intégrations d'applications et des kits d'interface utilisateur. Adobe XD propose également de nouvelles fonctionnalités de temps en temps pour aider à améliorer et à rationaliser la création de vos maquettes et conceptions d'interface utilisateur personnalisées.

Plusieurs cours sont disponibles en ligne pour vous aider à faire passer vos nouvelles compétences en conception au niveau supérieur.

Ces cours Adobe feront de vous un maître de Creative Cloud

Lire la suite

A propos de l'auteur