Adobe XD : mise en page et grilles

Name: Adobe XD : mise en page et grilles
Author: Alyssa Galganov

Découvrez comment créer des mises en page dynamiques dans Adobe XD

Preview the first lesson free — get full access to all 5 lessons.

Cours : à la demande

Bonjour! Je m'appelle Alyssa, et dans ces leçons, nous allons passer en revue le travail avec Adobe XD mise en page et grilles. Définir un système de grille aidera votre conception rester dans l'alignement et peut gagner un temps précieux en mesurant les pixels et l'espacement entre les éléments. Deux options existent dans Adobe XD pour fournir des conseils lors de la configuration de votre conception : mise en page et carré. Explorons la grille de mise en page. Je vais juste créer un nouveau fichier en cliquant ici sur mon écran d'accueil sur le bouton nouveau fichier, et l'écran par défaut de 1920 pixels de large sur 1080 pixels de haut sont sélectionnés. Je vais juste cliquer ici dans l'espace gris pour le désélectionner parce que je veux juste vous montrer que si vous cliquez sur le nom, nous pouvons sélectionner le tableau d'art. Lorsque nous sélectionnons le tableau d'art, vous pouvez voir ici dans l'inspecteur de la propriété qu'il y a un panneau de grille en bas. Actuellement, il indique la mise en page pour le type de grille, et si on clique sur le chevron, vous pouvez voir qu'il y a le choix entre mise en page et carré. Je vais le laisser sur la mise en page, et je vais de l'avant et cliquez ici dans cette petite boîte, et ce que cela nous permet de faire, c'est d'activer la grille de mise en page. Actuellement, c'est la couleur cyan, et c'est 12 colonnes, mais vous pouvez changer cela comme bon vous semble. Nous pouvons aller de l'avant ici, et j'irai ici et tapez 16, et j'appuierai sur la touche de retour pour le valider. Vous voyez maintenant 16 colonnes. Je pourrais également modifier la largeur de la gouttière. Je vais changer cela en quelque chose comme 24, et vous pouvez voir que maintenant il y a un peu plus d'écart entre ces 16 colonnes verticales cyan. Si ce n'est pas votre couleur, vous pouvez toujours la changer en cliquant sur ce damier par ici, qui est la couleur de la colonne de note de mise en page, et vous pouvez choisir la couleur que vous voulez ici. Je peux continuer et simplement déplacer ce curseur de haut en bas et jusqu'à ce que j'obtienne la couleur que j'aime. Si vous pensez que vous les aimeriez plus sombres, vous pouvez aller de l'avant et changer l'alpha ici en pourcentage. Actuellement, la valeur par défaut est de 25 %. Vous pouvez continuer et le changer en quelque chose comme 10. Appuyez sur la touche de tabulation ou la touche de retour pour le valider, et vous pouvez voir que c'est beaucoup plus léger maintenant. Si c'était quelque chose que j'aimais vraiment et que je voulais utiliser dans plusieurs projets, Je peux aller de l'avant et cliquer et en faire ma valeur par défaut. Si j'ai fait tous ces changements et décider que ce n'est pas ce que j'aime, nous pouvons continuer et cliquer sur le bouton utiliser par défaut, et nous retournons là où nous avons commencé. Merci d'avoir regardé. Restez à l'écoute pour la prochaine vidéo où nous irons sur la grille carrée.

Débutant Fournisseur : Alyssa Galganov 5 leçons · 16m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Dans ce cours, vous apprendrez à créer des mises en page dynamiques dans Adobe XD à l’aide de grilles, de repères, d’alignements, de distributions et de répétitions. Lorsque vous travaillez sur vos conceptions, vous pouvez utiliser des repères pour aligner des objets ou gérer l’espacement entre les éléments d’une planche graphique. Les grilles servent de cadre sur lequel vous pouvez organiser vos éléments de conception et assurer la symétrie de la mise en page.

La définition d’un système de grille peut vous aider à garantir l'alignement de votre dessin et vous faire gagner un temps précieux en mesurant les pixels et l'espacement entre les éléments. Vous découvrirez les deux options de grille d’Adobe XD qui vous guident lors de la configuration de votre conception : layout et square.

Ce que vous allez apprendre

Créer et ajuster des grilles de mise en page dans Adobe XD pour structurer vos éléments de design
Créer et ajuster des grilles carrées pour maintenir la symétrie sur un plan de travail
Créer et gérer des repères pour aligner des objets et contrôler l'espacement entre les éléments
Aligner et distribuer les éléments de design pour des mises en page cohérentes et organisées
Utiliser le bouton Grille de répétition pour reproduire efficacement des éléments

Points clés à retenir

Les grilles servent de cadre pour organiser les éléments de design et assurer la symétrie d'une mise en page.
Définir un système de grille aide à garder un design aligné et fait gagner du temps passé à mesurer les pixels et l'espacement entre les éléments.
Adobe XD propose deux options de grille qui fournissent des conseils lors de la configuration d'un design : la mise en page et la grille carrée.
Les repères peuvent être utilisés pour aligner des objets ou gérer l'espacement entre les éléments sur un plan de travail.

Foire aux questions

Qu'apprendrai-je dans ce cours ?

Vous apprendrez à créer des mises en page dynamiques dans Adobe XD en utilisant des grilles, des repères, l'alignement, la distribution et la répétition, y compris comment créer et ajuster des grilles de mise en page et des grilles carrées et comment créer et gérer des repères.

Quelles options de grille ce cours couvre-t-il dans Adobe XD ?

Le cours couvre les deux options de grille dans Adobe XD qui fournissent des conseils lors de la configuration de votre design : la mise en page et la grille carrée.

Quels sujets sont inclus dans les leçons ?

Les leçons couvrent les grilles de mise en page, les grilles carrées, la création de repères, l'alignement et la distribution d'éléments de design et le bouton Grille de répétition.

Pourquoi les grilles sont-elles utiles lors de la conception dans Adobe XD ?

Les grilles servent de cadre pour organiser les éléments de design et assurer la symétrie, ce qui permet de maintenir votre design aligné et de gagner un temps précieux en mesurant les pixels et l'espacement entre les éléments.