Adobe XD intermédiaire : personnalisation de la marque

Name: Adobe XD intermédiaire : personnalisation de la marque
Author: Jessica Henley

Personnalisez votre marque grâce à l'iconographie et aux jetons de conception

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

Cours : à la demande

Bonjour, je m'appelle Jessica Henley, et dans ces leçons vous apprendrez les icônes de marque, l'introduction aux jetons de conception et Personnalisation des jetons de page Web. Dans cette leçon, je vais vous montrer les icônes de marque. Pour commencer, je veux vous montrer comment créer un nouveau fichier. Vous pouvez accéder à Fichier et cliquer sur Nouveau. Vous pouvez également accéder à un nouveau fichier en cliquant sur Commande ou Ctrl N pour Nouveau. Ici, nous avons la fenêtre pop-up. Il existe plusieurs tailles parmi lesquelles choisir, parmi lesquelles iPhone 14, et sa taille est de 430 x 932 pixels. Nous avons également un menu déroulant. Nous avons donc l'iPhone 14, Encore une fois l'iPhone 14, mais remarquez que c'est une taille différente. Il a également l'option pour la version iPhone mini 13, iPhoneXR, XSMax 11, même Google Pixel et iPad. Nous avons ensuite la page Web, qui a une taille de 1 920 x 1 080 pixels. Si je clique dessus, vous pouvez voir qu'il se lance. Si ce n'est pas la taille que vous souhaitez, vous pouvez simplement continuer et X. Permettez-moi de revenir au Fichier, Nouveau. Ici en cliquant sur l'icône vers le bas, nous avons également différentes tailles. Encore une fois pour le Web, nous avions 1920 sur 1080. Donc, si vous recherchez la haute définition, optez pour cette taille de fichier. Vous avez Web 1366 par 768 et Web 1280 par 800. Nous avons également Instagram Story. Pour Instagram Story, nous avons la haute définition à 1080 par 1920. Il y a même une publication sur Twitter, qui mesure 1024 sur 512, et il propose également des options Facebook et YouTube. Si aucune de ces options ne fonctionne pour vous, vous pouvez également créer un format personnalisé. Ici, je vais choisir la page Web 1920 par 1080, que je ont déjà ouvert. Maintenant pour les icônes, si vous voulez des icônes prédéfinies, vous pouvez accédez aux plugins. Encore une fois, pour les plugins, assurez-vous que vous êtes sous Design. Et ici-dessous, nous avons les bibliothèques. Nous avons des couches. Et nous avons des plugins. Le raccourci pour les plugins est Shift Command P ou Shift Ctrl P. Ici, sous Plugins, j'ai des icônes EOS. Pour obtenir ce plugin, vous souhaitez naviguer vers le haut. Accédez à Plugins et cliquez sur Parcourir les plugins. Une fois que vous êtes ici, vous pouvez voir Gérer les plugins et juste en dessous nous avons Rechercher tous les plugins. Toi peut placer dans un mot-clé. Dans ce cas, je vais mettre des icônes. Comme vous pouvez le voir, j'en ai deux installés, IconScout, que vous devra créer un compte et se connecter pour pouvoir utiliser leurs icônes. Cependant, si vous souhaitez ignorer cette partie, vous pouvez télécharger Icônes EOS. Alors voici les icônes, ils ont tellement d'icônes à choisir depuis. Comme vous pouvez le voir, il indique qu'il contient plus de 1 000 icônes gratuites. disponible. Il comporte également 24 catégories différentes et deux thèmes disponibles. Et ils offrent un support pour leurs icônes. Si vous souhaitez ce plugin d'icône, vous pouvez appuyer sur Obtenir. Comme vous pouvez le voir, il ne m'est pas disponible car Je l'ai déjà installé. Remarquez que lorsque vous recherchez des plugins, il y a beaucoup de choses à faire choisissez parmi. Je recommanderais donc fortement de les parcourir. Par exemple, nous avons des icônes MDI disponibles. Nous avons également Open Icon, qui possède une collection de 70 000 icônes gratuites disponibles. Il y a tellement de choix à choisir. En haut, c'est celui que j'ai installé. Je vais sortir. Voyons ce que ce plugin met à notre disposition. Nous avons donc ici les icônes EOS. Et il est dit que nous pouvons rechercher des icônes de la collection EOS. Ou copiez et collez à partir de l'une des options ci-dessous. Lorsque je clique sur une icône, il la copie. Et regardez aussi, nous avons des catégories, ce qui est vraiment cool. Maintenant, je vais d'abord le garder sur Tout, puis je reviendrai et ensuite je vous donnerai un aperçu de ce à quoi ça ressemble lorsque vous choisissez l'une des catégories. Et il a aussi de vrais thèmes. Sous Action, qui est encore une fois Tout, donc ça commence par le haut. Nous n’allons pas tous les examiner, bien entendu. Nous allons simplement parcourir rapidement. Alors là, je vais juste aller de l'avant et me rapprocher de mon toile en faisant défiler. Pour faire défiler, je maintiens la touche Commande ou Contrôle enfoncée, et avec mon scroller, je peux faire défiler en même temps. Par exemple, cette icône bancaire. N'oubliez pas qu'il est indiqué que lorsque vous cliquez dessus, il le copiera. Je dois donc faire un clic droit et coller. Vous pouvez également utiliser le raccourci Contrôle ou Commande V. Et voici l'icône bancaire. Avant de personnaliser cette icône, car vous souhaiterez peut-être utiliser certaines de ces icônes pour votre marque particulière. Allons-y et parlons des catégories. Sous Catégories, nous avons Action, Alertes, Artificiel Intelligence. Nous avons même la Communication et le Design. Jetons un coup d'œil à Places. Donc si je clique sur Lieux, j'ai même ce parapluie juste ici. Donc si je clique dessus, il le copiera. Faites un clic droit, collez. Permettez-moi de regarder le matériel. Donc, pour le matériel, je peux continuer et faire défiler. Ils ont ce casque. Donc si je clique dessus, il le copie automatiquement. Faites un clic droit et collez. Ce sont donc nos icônes que j'ai choisies. Je vais aller de l'avant et centrer cela. Voyons maintenant comment vous pouvez les personnaliser pour votre marque particulière. C'est super simple. Lorsque vous cliquez sur l'icône que vous avez choisie, vous pouvez accéder à l'apparence. Mais pour le remplissage, vous pouvez cliquer ici et faites défiler vers le haut comme ça et changez les couleurs. Et vous pouvez également garder un œil sur le code couleur réel. Donc ici, je pourrais copier le code et faites un clic droit et copiez-le. Maintenant, dis si je voulais la même couleur. Comme vous pouvez le voir, vous pouvez également enregistrer des échantillons. Mais je pourrais cliquer avec le bouton droit, coller, et appuyez sur Entrée. Je peux aussi appuyer sur ce signe plus afin de stocker cette couleur pour la prochaine fois. Et je peux cliquer sur ce casque et faire la même chose. Dans la prochaine leçon, je continuerai à parler de marque Icônes. Merci d'avoir regardé.

Intermédiaire Fournisseur : Jessica Henley 4 leçons · 31m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Adobe XD propose une variété de formats de documents pour les iPhones, les sites Web, les plateformes de médias sociaux et d'autres tailles personnalisées. Ces leçons vous montreront comment choisir les bonnes tailles qui répondront à vos besoins de conception. Vous découvrirez le rôle que jouent les icônes dans votre conception, comment parcourir les plugins pour trouver des icônes prédéfinies, des catégories et des thèmes pour les icônes, et comment changer les couleurs des icônes prédéfinies. Vous découvrirez également comment utiliser les outils Adobe XD pour créer des icônes personnalisées pour votre marque, notamment en modifiant des formes en icônes personnalisées en changeant leur apparence et en ajoutant des effets. Cette leçon comprend également des tutoriels sur l'utilisation de plug-ins pour parcourir les modèles de sites Web et la création de jetons de conception pour votre marque. Vous recevrez des conseils sur la façon de rester organisé en ajoutant des couleurs et des styles de personnages à vos éléments de conception. Lorsque vous êtes prêt à prévisualiser votre conception, vous pouvez le faire dans un navigateur Web et ajouter des commentaires, consulter les spécifications et afficher les variables dans les conceptions.

Dans ces leçons, vous serez initié aux jetons de conception et apprendrez à personnaliser vos conceptions en explorant l'iconographie et les jetons de conception pour les marques d'entreprise.

Ce que vous allez apprendre

Définir les couleurs et les styles de caractères pour les icônes dans vos conceptions
Parcourir les plugins pour trouver des icônes prêtes à l'emploi et modifier leurs couleurs, catégories et thèmes
Créer des icônes de marque personnalisées en modifiant les formes, en changeant leur apparence et en ajoutant des effets
Utiliser des jetons de conception (design tokens) pour personnaliser des sites web et des jetons de page web pour des marques d'entreprise
Prévisualiser les conceptions dans un navigateur Web pour ajouter des commentaires, afficher les spécifications et inspecter les variables
Choisir les tailles de documents appropriées dans Adobe XD pour les iPhone, les sites web, les réseaux sociaux et les besoins personnalisés

Points clés à retenir

Adobe XD propose une variété de tailles de documents pour les iPhone, les sites Web, les plateformes de réseaux sociaux et d'autres tailles personnalisées pour répondre aux différents besoins de conception.
Les icônes jouent un rôle dans la conception, et les plugins peuvent être parcourus pour trouver des icônes prêtes à l'emploi organisées par catégories et thèmes dont les couleurs peuvent être modifiées.
Les outils d'Adobe XD vous permettent de créer des icônes de marque personnalisées en modifiant les formes, en changeant leur apparence et en ajoutant des effets.
Des jetons de conception (design tokens) peuvent être créés pour une marque, et des plugins peuvent être utilisés pour parcourir des modèles de sites web.
Les conceptions peuvent être prévisualisées dans un navigateur web, où vous pouvez ajouter des commentaires, examiner les spécifications et voir les variables au sein des conceptions.

Foire aux questions

Que vais-je apprendre dans ce cours intermédiaire sur Adobe XD ?

Vous apprendrez à désigner les couleurs et les styles de caractères pour les icônes, à comprendre les outils de conception d'icônes, et à utiliser des jetons de conception (design tokens) pour des sites web, tout en explorant l'iconographie et les jetons de conception pour les marques d'entreprise.

Quelles leçons ce cours inclut-il ?

Le cours comprend quatre leçons : Les icônes de marque (Partie 1), Les icônes de marque (Partie 2), Introduction aux jetons de conception (Design Tokens), et Personnalisation des jetons de pages web.

Comment travailler avec des icônes prêtes à l'emploi dans Adobe XD ?

Vous apprendrez à parcourir les plugins pour trouver des icônes prêtes à l'emploi (premade icons), à travailler avec leurs catégories et leurs thèmes, à modifier les couleurs des icônes prêtes à l'emploi, et à créer des icônes personnalisées à l'aide des outils d'Adobe XD.

Comment puis-je prévisualiser ma conception ?

Lorsque vous êtes prêt, vous pouvez prévisualiser votre conception dans un navigateur web, où vous pourrez ajouter des commentaires, consulter les spécifications et visualiser les variables de vos conceptions.

Quelles compétences ce cours couvre-t-il ?

Ce cours couvre Adobe XD, la valorisation de la marque (Brand Enhancement), la conception de marque (Brand Design) et le design d'apprentissage (Learning Design).