Apprendre le design UX d'interface utilisateur avec Adobe XD

1. Introduction d'Adobe XD: Bonjour à tous et bienvenue dans notre cours d'apprentissage d'Adobe XD. Si vous avez l'intention d' apprendre l'interface utilisateur et l'expérience utilisateur dès le début, vous êtes au bon endroit. Parce que nous aborderons dans ce cours du niveau de base au niveau avancé. Il s'agit d'un cours de niveau débutant. Si vous n'avez aucune expérience préalable, vous pouvez rejoindre ce cours. Jetons un coup d'œil à ce que vous avez appris lors de ce cours. Présentation, espace de travail et interface. Nous découvrirons ensuite les outils de base et le wireframe low fi dans Adobe XD Comment utiliser l'option de saisie dans XD à l'aide de formes dans XD Stroke. Copiez et collez des icônes gratuites à utiliser dans les projets et les UIKits existants Regroupement et édition d'icônes, prototypage dans Adx D, animation, comment partager votre cadre de mots et vos Nous apprendrons également à créer des coloriages de moodboard dans AdobXD et des images dans OobXD Enfin, un projet sur la façon de concevoir une page Web. Après avoir terminé ce cours, vous serez en mesure de créer votre propre application mobile et votre propre conception Web. Créez vos propres dégradés de couleurs et palettes de couleurs Acquérez une bonne connaissance de la coloration dans le domaine de la conception Web Faites le prototypage, sélectionnez des images pour créer des boutons et définissez le style de la page Web Il s'agit d'un projet basé sur l'apprentissage, vous aurez des projets de classe. Ce que vous apprendrez, vous pourrez participer à des projets de classe, ce qui vous permettra pourrez participer à des projets de classe, de vous entraîner pendant que vous apprenez. Vous disposerez de ressources de soutien dans ce cours, il vous sera donc facile d'apprendre pendant l'apprentissage. Si vous rencontrez un problème ou si vous avez des questions, hésitez pas à me les demander. Je suis toujours là pour t'aider. Commençons ensemble à apprendre XD pour YU X. 2. Introduction, espace de travail et interface: Bonjour à tous, et bienvenue dans le didacticiel sur Adobe XD. Voici le premier chapitre, et nous allons en apprendre davantage sur la conception UI UX. Bien, dans le premier chapitre, je vais vous expliquer ce qu' est Adobe XD et en quoi il est différent des autres logiciels de conception d'interface utilisateur et disponibles sur le marché, d'accord ? Ensuite, je vais vous parler de l'espace de travail et l'interface de cette application en particulier, d'accord ? Comment vous pouvez réellement savoir comment travailler et comment commencer à créer votre première application mobile ou une page Web. D'accord, ne perdons pas de temps et commençons ensemble à concevoir cette interface utilisateur UX. Ici, vous pouvez voir que je suis sur la page d'accueil d'Adobe XD. Ici, vous pouvez voir si vous connaissez d'autres applications d'Adobe. Vous connaissez cet espace de travail, d'accord ? Qu'il s'agisse d'une boutique d'hôtel, de design, Illustrator ou d' After Effects. Cette page d'accueil en particulier, c'est tout à fait la même chose. OK. En haut à gauche, vous pouvez le faire, voici le logo d'Adobe XD. OK ? Voici donc le logo qui suit. À partir de là, vous pouvez créer un nouveau fichier si vous avez déjà travaillé et que vous l' avez enregistré. Si vous cliquez sur Ouvrir, ce type de menu ba viendra d' où vous pourrez accéder à votre système. Et à partir de là, vous pouvez essentiellement choisir celui que vous souhaitez ouvrir. OK, je vais terminer par une et voici une option qui vous mènera à une page Web à partir de laquelle vous saurez comment démarrer avec cette application en particulier. OK, donc à partir de là, vous pouvez voir qu'il y a quelques choses que nous pouvons apprendre. Voici des didacticiels, quelques guides d'utilisation et quelques-uns des problèmes courants auxquels vous pouvez être confronté. Ils ont également la solution à tout cela. OK, revenons ensuite à ma page de rédaction. Si vous êtes sous l'option fichiers. Dans l'option fichiers, vous pouvez voir si j'ai travaillé quelque chose ou si j'ai quelque chose enregistré ici. Comme vous pouvez le constater, j'ai ici un dossier sur lequel j'ai déjà travaillé. Si quelqu'un partage cette œuvre en particulier avec qui il souhaite travailler avec vous sur ce X D sur lequel vous pouvez également travailler, il pourrait partager avec vous, par exemple partager un fichier avec vous. De là, vous pouvez accéder à tout cela d'ici. Vous pouvez gérer les liens si vous avez déjà mis des liens dans votre travail. D'ici, vous pouvez le voir, mais je n'en ai pas pour le moment. Cela m'amène juste à une autre page pour me montrer qu' aucun lien n'est partagé. OK. Je vais juste y retourner. Venez voir mon X D à partir d'ici, vous pourrez voir si vous avez supprimé un fichier d'ici. OK. De là, vous pouvez voir le fichier supprimé. Par exemple, si vous voulez récupérer, vous pouvez vous en remettre. Mais dans les 30 jours, elle sera définitivement supprimée si vous placez votre œuvre ici dans l'option de suppression. OK ? Donc tu dois le récupérer avant 30 jours, d'accord ? Comme j'utilise le plan de démarrage, ils me disent de procéder à la mise à niveau partir de là, vous pouvez accéder à tous les fichiers récents que vous avez consultés ou que vous avez consultés. OK, à partir de là, je vais vous montrer comment ouvrir un nouveau fichier ou comment en créer un. OK, supposons que je veuille créer un nouveau fichier. Je peux juste cliquer sur celui-ci, d'accord ? Voici l'espace de travail. Mais comme je viens de sélectionner celui-ci, ce Web 1920 x 1 000 ATP. C'est la taille du cadre par défaut, ou la taille du plan de travail, d'accord ? D'où nous pouvons commencer à travailler. Mais pour moi, en gros, si je veux faire quelque chose dans ce cas, exemple si j'ai une taille particulière en tête qu'il s'agisse d'une application mobile ou d'une application Web pour ce que je crée. Dans ce cas, je peux revenir sur ma page d' accueil. Sur ma page d'accueil, vous pouvez voir que j'ai différents types de préréglages ici Vous pouvez voir que j'ai des choses différentes ici, comme pour iPhone, pour Google Pixel iPad. Si vous le faites pour n'importe quelle page Web, vous pouvez également le faire pour une page Web. OK, reviens ici. Si je le fais simplement glisser vers le bas ici, vous pouvez également voir pour la page Web que j'ai des tailles différentes. Si vous créez une story Instagram ou une publication sur Twitter, une publication sur Facebook ou une vidéo Youtube, vous pouvez utiliser ce préréglage à partir d'ici. Si vous avez déjà une taille, vous connaissez déjà la largeur et le battage médiatique Il existe de nombreux sites Web. D'où vous pouvez obtenir les tailles d'écran. Par exemple, à partir de là, vous pouvez voir la largeur et la hauteur en fonction de ce que vous pouvez également mettre ici. Vous pouvez également enregistrer cette taille personnalisée à partir d'ici. OK, je vais vous montrer comment créer un plan de travail ici Comme vous pouvez le voir, maintenant je suis dans l'espace de travail ici, d'accord, c'est l'espace de travail de base à partir duquel vous allez travailler. Si vous souhaitez revenir à votre page d'accueil, vous pouvez revenir ici ou cliquer sur ce bouton d'accueil. OK, je fermerai celui-ci après cela . Voyons quelles sont toutes les pages que j'ai ici. OK, vous pouvez voir ici que celle-ci s'appelle la barre d'outils. À partir de là, je vais vous parler de tous ces outils, ce que nous pouvons tous utiliser par la suite. Vous pouvez voir que j'ai la possibilité de prototyper D'accord, je vais également vous expliquer comment prototyper. À côté de ma page, vous pouvez voir si je fais juste un zoom arrière. OK, permettez-moi de prendre un autre préréglage ici. OK, laissez-moi prendre le plan de travail, laissez-moi en créer un à partir d'ici Laissez-moi venir ici et je veux créer un plan de travail. Dans ce cas, je vais sélectionner, je peux essentiellement créer un plan de travail différent. Permettez-moi de vous montrer qu' en en créant un, revenez à votre dossier de conception. À partir du fichier de conception juste ici, vous pouvez voir l'option Artboard Une fois que j'ai sélectionné ce plan de travail ici, vous pouvez voir que j'ai différents modèles ou différents préréglages Permettez-moi de prendre l'iPhone 14, Pro Max ici. Vous pouvez voir que j' ai un plan de travail ici. En gros, les plans de travail sont comme des cadres ou la même chose. D'accord, si vous utilisez Figma ou si vous connaissez une autre application de conception d'interface utilisateur et d'expérience utilisateur, vous allez créer un plan de travail ici dans X D. C'est à peu près pareil À l'aide de cet outil. Je vais juste déplacer celui-ci ici. C'est l'option pour le prototypage. Supposons que je veuille prototyper ceci avec celui-ci. Je peux le faire comme ça. OK ? Après cela, je peux simplement supprimer celui-ci à nouveau. Accédez à l'option de conception. OK, j'espère que vous avez compris comment créer un plan de travail. Ici, vous pouvez voir que c'est la couche de plan de travail, d'accord ? À partir de là, je peux essentiellement voir, d'accord. C'est ce qu'on appelle le panel, d'accord ? On peut donc appeler cela le panneau de conception. Ici. Vous pouvez également faire prototypage et si vous souhaitez partager le fichier, vous pouvez également partager le fichier Voici le panneau de conception qui suit. Ici, vous pouvez voir que j' ai différentes options. OK. Ici. C'est la bibliothèque d'où l'on peut extraire différentes couleurs. Si je veux ajouter n'importe quelle couleur, je peux en ajouter. Si je souhaite ajouter des styles de caractères, je peux les ajouter à partir d'ici. OK, différents composants, vidéos, tout ce que je vais mettre ici dans cette boîte apparaîtra ici. OK, voyons quels sont les différents plug-ins. OK, vous pouvez voir que je peux trouver un plug-in ici. Les plugins sont essentiellement un endroit à partir duquel vous pouvez importer différents types d'images, icônes, de conception Web et bien d'autres choses que nous pouvons faire. Voyons voir et découvrons nos plugins. Tout ce que nous avons, c'est ici. OK. Si je clique dessus, vous pouvez voir que je suis redirigé vers la page automatique ici. D'ici, vous pouvez voir tout ce que j'ai, d'accord ? Dans quelle application. Je peux les utiliser si je veux Were Frame, beaucoup de modèles de cadres métalliques. Je peux emmener le Were Framer ici. Vous pouvez voir si je veux une icône, illustration de trois jours, je peux prendre cet Icone Scout. Je vais chercher celui-ci. Et là, ils me demandent une recommandation, ou ils me demandent une autorisation. Je vais cliquer sur. OK. Parce que je veux utiliser ce Can Scout ici. OK. Ici, vous pouvez en voir bien d'autres. J'ai cette icône pour le design ici, vous pouvez le voir, vous pouvez la télécharger en fonction de vos besoins. OK ? Tout ce dont vous avez besoin , vous pouvez le prendre d'ici. Voici quelques-unes des ressources. Maintenant, si j'y vais ou que je reviens ici, c'est l'icône Scout À partir de là, je peux cliquer sur Suivant si je veux me connecter, ou si je veux m'inscrire, je peux aussi le faire à partir d'ici. Maintenant, je me suis inscrit avec succès. De plus, après votre inscription, vous pouvez voir à quoi cela ressemblera réellement. OK, voici la page ici. À partir de là, vous pouvez choisir. D'accord, si vous voulez juste la version gratuite d'ici, si vous cliquez sur gratuit, voici toutes les icônes que vous pouvez utiliser gratuitement. D'accord, voici différentes icônes que vous pouvez simplement mettre. Permettez-moi juste d'en mettre un et de vous montrer les gars et le. Il existe de nombreux packs si vous voulez du personnage, si vous voulez des icônes de réseaux sociaux, n'importe quel thème comme la Saint-Valentin ou pour Noël, n'importe quel NFT, vous pouvez accéder à tout cela ici C'est l'utilisation de plugins, comment nous pouvons obtenir différentes icônes en fonction de notre utilisation. Je vais simplement m'adresser à nouveau aux particuliers. À partir de là, je vais en prendre un. Supposons que je veuille insérer ceci. OK, maintenant ils me demandent si je veux importer un petit fichier PNG ou simplement un fichier PNG de base ? OK, le scout travaille ici. Donc, cela importe mon image dans l' AutoBXDBox ou dans mon Au lieu de cela, cela peut prendre un peu de temps. Je vais arrêter celui-ci, je vais prendre et je vais juste insérer le petit fichier PNG. OK, vous pouvez voir ici que j'ai cette icône sur mon cadre. Je peux le redimensionner. Et si je zoome, vous pouvez voir que c'est comme ça que je peux m'entraîner. Si je veux créer des pages ou des pages Web concernant WhatsApp, je peux utiliser cette icône. OK. Je peux également rechercher différents types d'icônes si j'ai des recherches pertinentes ici. J'espère que vous avez également compris l'utilisation du plugin ici. OK, ici j'ai aussi les cadres étoffés. Si je veux télécharger quoi que ce soit, je peux vraiment commencer. Si je clique sur Démarrer ici, vous pouvez voir que j'ai différents cadres ici que vous pouvez également utiliser pour votre travail. OK, vous pouvez les modifier. Revenons-en à l'option « plug in ». Je vais juste fermer celui-ci. J'espère que vous avez également compris trois de ces choses. Il s'agit de la barre d'outils de base. Maintenant, venons ici et passons au tableau d'art. D'accord, à partir de là, celui-ci s'appelle essentiellement le panneau de commande. OK ? Quel que soit le caractère ou l'objet que je choisis et qui est présent dans ce cadre, je peux réellement transformer cette largeur et cette hauteur. Si je veux le modifier individuellement, je peux faire cette rotation. Et tant de choses que nous apprendrons au cours des dernières étapes du cours. Nous pouvons également modifier l'opacité. L'augmentation de l'opacité, le mode de fusion et les différents types d' effets sont également disponibles D'accord, si je veux exporter ce produit en particulier, je peux simplement cliquer sur Marquer pour l'exportation, et je les exporte également. Ou si vous souhaitez simplement sélectionner une page d'ici, comme vous pouvez le voir. Si vous sélectionnez une page en particulier, vous pouvez accéder à tout cela, d'accord ? Si je veux changer quelque chose ou si je veux changer la largeur, hauteur, ou si je veux changer la couleur, je peux le faire d'ici. OK, c'est ainsi que nous allons travailler sur cette page. Permettez-moi d'y retourner encore une fois. Je veux le garder en blanc, j'espère que vous avez également bien compris le panneau de commande. Ici, j'ai l'option de partage, d'accord, donc à partir de l'option de partage, je peux réellement leur envoyer le lien. D'accord, je peux essentiellement créer un nouveau lien. De là, je peux également définir les paramètres d'affichage. OK, à partir de là, comment je veux les utiliser, seront-ils capables de travailler ici ? Par exemple, pourront-ils concevoir et qui aura tous accès au lien ? OK, uniquement des personnes invitées. Un seul avec mot de passe. Je peux également définir un mot de passe. Ensuite, si je crée un lien, un lien sera créé, puis nous pourrons le partager avec mes collègues ou mon client. OK, ici, si je veux obtenir un aperçu de l'appareil, je peux utiliser cette option. Par exemple, une fois que j'ai fini de créer une application mobile, à partir d'ici, je peux obtenir l'aperçu ou la tester. OK, ici. Une autre option est l'option de zoom , d' accord, car mon écran est maintenant à 30 degrés. Si je le fais à 100, vous verrez à quoi ça ressemblera. Si je le fais à 50 %, c'est à ça que ça ressemble vraiment. Faites-en 33, voici à quoi cela ressemblera réellement à partir d'ici. C'est ainsi que nous pouvons essentiellement travailler. Voici une autre option , comme Desktop Preview. OK, si vous voulez voir celui-ci sur un ordinateur de bureau ou une page Web, accord, je peux également cliquer ici. Si je souhaite enregistrer ce document dans mon espace Creative Cloud ou dans mon espace Creative Cloud, je peux également enregistrer celui-ci à partir d'ici. OK, c'est le moyen le plus simple de le faire. Maintenant, si je clique ici. OK. À partir de là, je peux également changer le nom. OK, laisse-moi venir ici, laisse-moi juste démarquer celui-ci Passons à l'option de conception. À partir de là, je peux également changer le nom. OK, si je clique ici. Oui, à partir de là, vous pouvez l' enregistrer comme vous le souhaitez. J'espère que vous avez maintenant compris l' espace de travail et l'interface. Vous savez maintenant comment commencer à travailler sur cette application. Je vous ai expliqué l'espace de travail, l'interface et ce qu'est cet Adobe. En gros, comme je vous l'ai déjà dit, pouvez créer un design UI UX et le tester à partir d'ici. Faites le prototypage. Après la fin de ce tutoriel, je m'assurerai que vous saurez comment créer votre propre design, comment créer votre propre application mobile. Comme nous avons également un projet de classe, nous apprendrons tout en pratiquant ces choses. Rendez-vous tous dans le prochain cours où nous découvrirons tous les outils de base présents dans la barre d'outils, que vous pouvez voir. Je vais vous expliquer comment vous pouvez les utiliser. Ensuite, je vais également vous parler du low fi et du high fi were frame. OK ? Dites-leur, prenez soin de vous et à bientôt au prochain cours. 3. Outils de base et filature Lofi et Hifi dans Adobe xD: Bonjour à tous et bienvenue dans un nouveau chapitre du didacticiel Adobe XD. Bien, dans notre chapitre numéro deux, nous allons découvrir l'outil de base. Et je vais aussi vous expliquer ce qu'est un cadre low fi et un high fi were frame. OK, donc j'en ai deux. J'ai une application à faible fichier, et je vais également vous montrer un cadre Hi Fi Were dans ce didacticiel en particulier. Ne perdons donc pas de temps et commençons ensemble à concevoir cette interface UIUX Ici, de retour à l'espace de travail. OK, essayons maintenant de comprendre tous ces outils de base que j'ai dans ma barre d'outils. OK, commençons. C'est le premier. C'est ce qu'on appelle un outil de sélection. Le raccourci de l'outil de sélection est V depuis notre clavier. Supposons que si je le sélectionne, si je clique maintenant sur V sur mon clavier, il deviendra un outil de sélection. OK, à partir d'ici. Comme vous pouvez le constater, après cela, en utilisant l'outil de sélection, nous pouvons essentiellement nous déplacer. De plus, nous pouvons sélectionner n'importe quel article en particulier s'il figure sur notre page. Je peux également modifier la taille de l'espace de travail comme je peux le maintenir. Et ici, vous pouvez voir que je change la hauteur à partir d'ici. Et si je change la largeur, ça ressemblera à ça. OK ? Une fois que nous travaillerons ici , nous ne pourrons plus bouger si je tape simplement ici. OK, si j'ai du contenu ou un objet dans mon cadre ici, accord, dans ce cas, je dois sélectionner celui-ci d'ici. Je peux essentiellement me déplacer, d'accord, à partir du nom que je vais sélectionner et je peux me déplacer dans mon cadre à partir d'ici. C'en est une. Et je peux aussi le renommer d'ici. Supposons que pour ne pas vous tromper dans quel cadre, ou dans cette diapositive, je vais faire un prototype avec un autre. Dans ce cas, je peux le renommer en conséquence. Maintenant, j'espère que vous avez compris l'outil de sélection. Et vous pouvez également l'étendre si vous le souhaitez. OK ? Maintenant, cela s'appelle l'outil rectangle, juste en dessous de l'outil de sélection. La touche de raccourci pour cela est R sur le clavier. OK, si je viens ici, je peux créer une boîte rectangulaire ici. Vous pouvez voir que j'ai créé une boîte rectangulaire ici. Je vais sélectionner celui-ci, je peux le supprimer. Maintenant, j'ai l'outil de sélection. En utilisant cela, nous pouvons essentiellement changer ou changer. Comme vous pouvez le voir ici, vous pouvez voir le changement de forme. Nous pouvons le faire essentiellement à partir d' ici en utilisant cet outil rectangulaire. OK ? Je peux aussi diminuer la taille, augmenter la taille. Si je veux étendre celui-ci, je peux le faire ici. Si je veux faire une rotation, je peux également la faire pivoter. D'accord, voici comment nous pouvons essentiellement travailler avec cet outil ici. J'espère que vous avez bien compris. Passons maintenant à l'outil suivant, qui est le cercle ou l'outil Elipse, d'accord Celui-ci est l'outil Elipse, et vous l'avez déjà compris, en utilisant l'outil Ellipse, vous pouvez créer un cercle C'est comme ça que vous pouvez créer un cercle. Si vous voulez créer un nouveau cercle, comme proportionnellement, vous suffit d'appuyer sur Ctrl Shift et vous pouvez créer un cercle proportionnel ici Maintenant, vous ne pourrez pas changer de forme. Comme vous pouvez le voir, celui-ci est proportionnel et celui-ci ne l'est pas, d'accord ? Celui-ci ne l'est pas. Je vais le supprimer et déplacer le cercle ici d'un côté. OK ? En utilisant tout cela, nous pouvons créer nos boutons. Tous les designs que vous voulez faire, nous pouvons le faire. Voici également une autre forme, qui est le polygone. OK ? En gros, je peux créer un polygone ici. Comme vous pouvez le voir dans les options, comme vous pouvez le constater, il existe quelques options. En utilisant cela, je peux modifier la résistance des coins ou simplement diminuer la résistance des coins. C'est une façon dont je veux simplement le déplacer vers le bas ou le réduire. Je peux le faire. Si vous le faites comme ça, ce type d'icônes, je peux le faire à partir d'ici. Je peux agrandir celui-ci à l' aide de l'outil de sélection. Je vais mettre celui-ci ici. Oui, c'est bon. Ensuite, essayons de voir ici à propos de l'outil linéaire. D'accord, l'outil de ligne est essentiellement utilisé pour créer des lignes. Par exemple, si je veux créer une ligne à partir du coin, je peux en modifier la longueur ou le positionnement. OK, une fois que c' est au milieu, ça me montre comme ça, mais maintenant je m'écarte de la limite Ça va me montrer comme ça. OK. C'est ainsi que nous pouvons réellement tracer une ligne à partir d'ici. Si nous utilisons notre outil de sélection, je peux essentiellement emménager ou déménager en utilisant cet outil à partir d'ici. Voici maintenant une façon d'utiliser l'outil linéaire à partir d'ici. Je vais vous expliquer tout cela en détail, exemple comment vous pouvez modifier le trait ou comment nous pouvons changer la couleur du trait, la couleur du champ, ainsi que la force ou la largeur de cette ligne en particulier ici. Comment pouvez-vous changer ? OK, je vais sélectionner tout cela à partir d'ici, je vais le supprimer, en espérant que tout était clair jusqu'à présent. OK, maintenant je vais vous parler de Pin Tool, d'accord ? En utilisant Pen Tool, vous pouvez créer différents types d' animation et différents types de logos, d'accord ? Mais l'outil Pin est assez délicat. Utilisons l'outil Pen ici. OK ? Je vais juste vous montrer un usage de base que vous pouvez comprendre, comment vous pouvez l'utiliser dans votre mot ici. Je crée juste une forme en fonction de moi-même. Je vais créer une forme ici. Et là, j'ai une forme particulière. OK. Ce que je peux aussi faire, c'est si je veux changer la taille de celui-ci, augmenter la longueur ici, amener celui-ci quelque part ici. Je peux les faire aussi ici. Comme vous pouvez le voir, j'ai déjà créé un logo à partir d'ici. OK ? C'est l'une des façons dont nous pouvons le faire. Et nous apprendrons également comment nous pouvons essentiellement le remplir de couleurs à partir d'ici. Voici quelques options, vous pouvez le faire selon vos envies ou comme vous le souhaitez. Pento est très utile. Après cela, j'ai également l'option pour le texte. OK. Ici, comme vous pouvez le voir, j'ai sélectionné l' option texte ou l'outil texte. Maintenant, j'ai mon curseur ici et j'ai cliqué sur ce cadre. Maintenant, je peux écrire des choses selon mes besoins. À partir d'ici. Ce que je peux faire, c'est sélectionner cette couche particulière ici et je peux la redimensionner, ou je peux changer la taille Supposons que je veuille 60, je clique sur Entrée, et ici vous pouvez voir la taille des lettres ou la taille de ma police. Ici, je peux l'écrire comme ça. Ici, vous pouvez voir tous les objets que j'ai ici dans ce cadre ou sur le plan de travail. Vous aurez ces couches ici. OK ? Si je reviens ici, tu pourras voir celui-ci. Je peux également rendre ce plan de travail plus écologique. À partir de là, je peux essentiellement revenir ici, et une fois que je l'ai sélectionné, j'ai également tous les objets qu'il contient OK. Ici, si je veux masquer celui-ci, je peux cliquer dessus. Si je veux enregistrer celui-ci, je ne pourrai pas changer positionnement ou quoi que ce soit d'autre. Ici, je le fais aussi si je veux simplement exporter cette écriture particulière à partir d'ici. Je peux également l'exporter. Par exemple, si je veux utiliser cette même chose, ou le même bouton, ou le même design dans une autre page, je peux le faire aussi. Par exemple, si je veux l'utiliser dans d'autres applications lors de la création d'une affiche, je peux également les utiliser. J'espère que cette option de texte était également claire. Je vais également le supprimer ici. Voici comment vous pouvez créer Db, ce que je vous ai déjà montré ici. Vous avez tous ces préréglages. Je ne veux pas de préréglage, vous pouvez simplement venir ici et créer vous-même un tableau d'art, à votre taille. Ici, j'ai le tableau à partir d'ici, je peux essentiellement changer le nom. OK, je peux le faire aussi. OK, après cela, la dernière option notre barre d'outils est l'option de zoom avant. OK, si je clique ici, vous pouvez voir que je peux juste zoomer. OK ? Il s'agit de l'option permettant de zoomer. À partir d'ici. Je peux copier n'importe quoi, ou je peux simplement me déplacer. Je peux aussi me déplacer. OK, c'est l' option pour zoomer. Si je clique ici, vous pouvez voir que je vous ai également montré différentes manières de zoomer En zoomant, d'accord, voici une autre option. Ou si vous appuyez simplement sur votre clavier et avec votre souris également, vous pouvez simplement zoomer ou dézoomer, cela dépend de vous. OK ? Ils ont pour faire la même chose également des fonctions différentes pour faire la même chose ici dans cette application. Si vous voulez déplacer le cadre, comme le cadre entier ou la page entière, vous suffit de cliquer sur Shift sur votre clavier. Et à l'aide de la souris, vous pouvez maintenant faire glisser le pointeur ici sur mon clavier. Vous pouvez voir, les gars. Maintenant, j'ai un signe de la main. OK. C'est ce qu'on appelle l'outil à main. OK. À l'aide d'un outil manuel, je peux essentiellement me déplacer avec mon outil de sélection. Je ne peux pas faire celui-ci. OK. Avec l'outil de sélection, je peux sélectionner n'importe quel cadre particulier et le déplacer sur la page. Mais pour modifier le positionnement de l'ensemble de la page, je peux changer de position. Ensuite, avec ma souris, je peux simplement me déplacer. OK. Je peux également effectuer un zoom arrière à l'aide du contrôle et de la souris. J'espère que vous avez compris tous les outils de base. OK, maintenant laissez-moi vous montrer les gars. Bonjour. Et qu'est-ce qu'un cadre Low Fiere ? D'accord, il existe essentiellement deux types de montures d'usure. La première qui est en basse définition, la forme complète est en basse fidélité. Nous encadrons Hii est un cadre haute fidélité. OK, laisse-moi juste ouvrir un dossier. Viens ici. Et à partir de là, comme vous pouvez le voir, j'ai cette page ici, d'accord ? Maintenant, celui-ci est en cours de chargement. Ce sera un exemple de ce à quoi ressemble une page basse ici. J'ai tous ces cadres ici, d'accord. Maintenant, zoomez sur une image, d'accord ? Et je vais vous dire pourquoi ils appellent celui-ci le low five. OK, je viens d' augmenter celui-ci ici. En gros, ils n'ont rien mis. Celui-ci n'est qu'un prototype qui, si vous le souhaitez, supposons ici que vous puissiez voir que j'ai le côté dans les options, options d' inscription ici si vous aimez le design et tout le reste, vous ne pouvez créer celui-ci que sous forme de cadre Hi Fi. OK, celui-ci n'est qu'un aperçu. Si vous aimez le style et tout ce qui s'y trouve, vous pouvez consulter les styles et tout le reste à partir d'ici. Comme vous pouvez le voir, après son inscription, il aura des options ici et tout cela ici. Vous pouvez voir en haut qu'il a également renommé à bord. OK, ce sera le profil ici. En gros, il vous suffit de mettre ces choses comme je vous l' ai montré. Celui-ci est celui qui est à faible teneur en capital. Vous pouvez également modifier tout cela. Si je ne veux pas celui-ci, je peux simplement cliquer ici et le supprimer. Je peux aussi mettre différents styles. Ici, vous pouvez voir que je peux également prendre les virages à partir d' ici sur cette icône si vous voyez Ou je peux aussi changer la taille. OK, c'est une façon de faire du lofi. abord, créer un lofi, le montrer ou simplement le conserver à titre recommandation vous aidera à acquérir de meilleures connaissances en matière de conception. OK, voici le L OK, maintenant laissez-moi vous montrer la haute ou la haute fidélité. Nous, si je vous montre, vous serez capables de comprendre et de différencier un cadre filaire haut débit d'un cadre filaire. Maintenant, permettez-moi de retourner à ma page d' accueil. À partir de là, je vais ouvrir une page. Je vais accéder aux téléchargements, ou je vais aller sur mon bureau ici. J'ai celui-ci. Maintenant, si je vais dans n'importe quel fichier, c'est un fichier PSD Permettez-moi de le rechercher et de vous le montrer. Maintenant, je peux vous montrer le cadre métallique haute fidélité. Celui-ci est un cadre métallique haute fidélité foncé. Vous pouvez voir que celui-ci est le cadre haute fidélité Were d'ici. En gros, ce qu'ils ont fait est ici, comme vous pouvez le voir, tous ces boutons, tous ces designs et icônes. Ceci est donc simplement basé ou fabriqué sur la base de la faible fidélité du cadre. OK, grâce à une faible fidélité, nous avons cadré. Celui-ci est fait, d'accord. Maintenant, ce design haut de gamme, d'accord. À partir de là, je peux également modifier celui-ci. L'essentiel, c'est qu'ils ont choisi un appareil à faible adaptation et qu'ils ont ici le cadre haute définition qui constitue un lien direct entre l'utilisateur et l'œuvre. OK ? Ils verront donc cette chose en particulier et l'interface utilisateur, concepteur d'expérience utilisateur essaiera de la rendre plus conviviale et occupera directement de l'interface ou de l' expérience de l'utilisateur, d'accord ? C'est ce qu'ils pourront voir, d'accord ? L'utilisateur ne peut jamais voir le low fi ok, le cadre artistique ou l'espace de travail. OK. Ceci est fait sur la base d'un cadre We de faible fidélité. Mais maintenant, c'est le produit final. Il s'adresse à un ensemble particulier de clients ou aux personnes ciblées. À partir de là, je peux réellement ajouter différents boutons. Maintenant, celui-ci est terminé et vous pouvez confier ce travail particulier à votre codeur et lui expliquer ce que vous voulez qu'il fasse. OK, j'espère que vous avez compris. Comme vous pouvez le voir, celui-ci n'est qu'un petit cadre d'une application de crypto-monnaie, je suppose. Oui, j'espère que vous avez compris ce cours. J'espère vous voir tous dans le prochain didacticiel où nous apprendrons comment vous pouvez taper des cadres adoptables. OK. J'espère vous voir tous au prochain cours. D'ici là, prends soin de toi et au revoir. 4. Comment utiliser l'option de type dans XD: Bonjour à tous et bienvenue dans un nouveau chapitre du didacticiel Adobe XD. OK, dans ce cours, nous allons apprendre comment utiliser les options de texte en X D, comme comment vous pouvez essentiellement écrire ou créer une zone de texte. Comment pouvons-nous réellement les gérer ? Comment pouvons-nous modifier le crénage, la location et les autres tailles de police Et aussi les styles de police. D'accord, nous allons donc apprendre tout cela en détail dans ce cours. Commençons par ce cours en particulier maintenant. Comme vous pouvez le constater, je suis ici dans mon espace de travail ou sur l'écran d'accueil, mais maintenant je vais accéder à mon espace de travail à partir d'ici. Comme vous pouvez le voir, j'ai une page ici par défaut. OK, je vais sélectionner celui-ci et je vais simplement le supprimer. Maintenant, je vais créer moi-même à partir d'ici. OK, je vais passer à l'Artboard. Laissez-moi ce Samsung Galaxy S en taille dix. Avec cet outil de sélection. Je vais déplacer celui-ci. Je vais en créer quatre. OK, je vais encore une fois garder celui-ci ici. Je vais en mettre un autre ici. Comme vous pouvez le voir, j'aurai quatre écrans ici. Je peux également le renommer d'ici si je le souhaite. OK ? Je vais juste le mettre comme un. Celui-ci en a deux, celui-ci en a trois. Celui-ci en avait quatre. OK ? J'ai aussi ce nom. Pour l'instant Essayons maintenant de comprendre comment nous allons utiliser notre option de texte ici. OK, laissez-moi un peu maintenant, il y a deux méthodes de base, d'accord ? Donc, la première est que si vous cliquez simplement ici avec votre souris, une fois que vous avez sélectionné l'option de texte, d'accord, à partir de là, vous pouvez simplement taper ce que vous voulez. OK ? Il peut donc également sortir des sentiers battus. OK, donc c'est un moyen. Maintenant, une autre méthode consiste à créer une zone de texte. OK, permettez-moi de revenir en arrière, de le désélectionner. Maintenant, si je crée une colonne de texte ici, comme vous pouvez le voir, je peux créer une page ici. OK ? Ou une zone de texte. Maintenant, je peux réellement mettre du texte dans cette boîte en particulier. Une fois qu'elle aura atteint le niveau auquel j'ai créé la boîte, elle s'abaissera automatiquement. D'accord, vous pouvez voir ici, d'accord, je remplis ma boîte ici. Il s'étendra simplement sur le côté vertical. C'est l'une des façons dont vous pouvez le faire. Je vais maintenant sélectionner à nouveau cette zone de texte et je vais la supprimer. OK, encore une fois, permettez-moi d'écrire quelque chose ici. Alors peut-être que j'écrirai Roberts Toy World. OK, donc je vais écrire Roberts Toy, Robert, Toys Toys World. Maintenant, j'ai cette phrase particulière ici. Ce que je peux faire, c'est qu'avec mon outil de sélection, je peux le sélectionner ici. Vous pouvez voir que je peux le placer au centre. OK, peut-être que je vais garder celui-ci ici à partir d'ici. Encore une fois, pendant que je créerai une page sur le monde des jouets ici, je vais simplement publier mon message marketing. D'accord, à partir de là, je vais peut-être créer une boîte. Je vais choisir la taille à partir d'ici. Comme vous pouvez le voir ici, j'ai également fabriqué une boîte. D'accord, je vais juste taper des messages marketing à placer dans le menu déroulant ici. OK, je l'ai et maintenant je vais le sélectionner. Après cela, vous pouvez voir qu'il existe différentes options. OK. Ici. Si je veux placer au centre, je peux le faire. Et si je veux y aller ou l'aligner vers la droite, je peux le faire aussi. OK. Je reviendrai ici. Je peux également augmenter la taille à partir d'ici. Je vais changer la taille de la boîte. Je vais sélectionner ce texte. Maintenant, je peux cliquer sur Control Shift et je peux augmenter la taille en conséquence de ce message marketing. OK, je vais juste garder celui-ci jusqu'ici. Je vais également diminuer la taille ici. OK, c'est une façon dont nous pouvons le faire ici dans ce cas précis, maintenant, je vais changer cela pour cela. Je dois d'abord sélectionner celui-ci à partir d'ici, vous pouvez voir que je peux changer le type de police. OK. Ici, j'ai différents types de polices Vous pouvez voir que si je les sélectionne, je pourrai obtenir ces types. OK, je vais prendre celui-ci. Je vais opter pour le Calibri de base. Dans Calibri, je vais choisir l'italique gras. Maintenant, je peux également modifier la taille à partir d'ici. OK, laisse-moi en prendre 30 ici. Vous pouvez voir ici le titre. OK, je vais sélectionner celui-ci d'ici. Je vais le mettre dans un coin ou sur le dessus. OK, à partir de ce point. En gros, ce que je peux faire c'est que si je sélectionne à nouveau tout le texte, je le sélectionnerai à nouveau. À partir de là, je peux double-cliquer dessus et vous pouvez voir que j'ai quelques options ici. OK. Ici. Comme vous pouvez le voir, si je viens ici et si je tape 50. OK, sélectionnez d'abord et oui, 50, je vais cliquer sur. OK. Donc, ici, vous pouvez voir que c'est l'option, l'interligne, si j' ai deux lignes ici, d'accord ? Ou je postulerai dans celui-ci ici. Si je sélectionne cet interligne à partir d'ici. OK, 18 ici, vous pouvez voir l'espacement des lignes augmenté entre les deux D'accord, voici une autre option, comme l'espacement entre les eaux. Je peux l'augmenter si je l'augmente de cinq. Ici, vous pouvez le voir. Mais comme vous pouvez le constater, j'ai cette option. Je vais juste le remettre en question. Maintenant, ici, j'ai également beaucoup plus d'options. OK. Auto, vent. Vous pouvez voir si je clique sur automatique avec l'évolution de ma zone de texte. OK, si je clique dessus au centre, vous pouvez le voir ici. Comme vous pouvez le constater également. D'accord, voici différentes options. J'espère que vous avez compris qu'il s'agit de l'espacement des paragraphes Supposons que j'ai celui-ci ici. Maintenant, je veux augmenter l'espacement des paragraphes. Je peux le faire d'ici. Si je crée juste une autre zone de texte ici. Je le remplis simplement avec un simple texte, d'accord ? Maintenant, je vais créer un autre paragraphe. Maintenant, comme vous pouvez le voir ici, OK, j'ai ceci ici et vous pouvez le voir ici. Maintenant, je veux faire l'espacement des paragraphes. cas, ce que je peux faire, c'est sélectionner cette case dans cette case, je vais descendre, et maintenant vous pouvez voir qu'il y en a dix. J'en ferai 30. OK ? Ici, vous pouvez voir que l'espacement entre les paragraphes a changé ici, d'accord ? Je peux également augmenter la taille. La distance entre les paragraphes sera la même, mais les mots seront déplacés vers l'extérieur. Comme vous pouvez le constater. Je vais supprimer celui-ci à nouveau. J'espère que vous avez bien compris. OK, donc la première chose que vous devez faire, c'est ne pas trop changer vos mots, d'accord ? Mais il suffit de sélectionner la taille et tout le reste, d'accord ? Comme la taille de police que vous allez utiliser pour le titre et ce que vous allez tous utiliser ici. Je l'ai en ce moment. Je vais recopier ce texte en particulier ici. OK. Mais ici, je vais mettre l' ensemble de produits et maintenant sélectionner cette zone de texte particulière à partir d'ici. Maintenant, je peux le mettre au centre. OK ? Comme vous pouvez le voir, je place ça au centre. Maintenant, j'ai aussi celui-ci. Maintenant, je vais prendre mon ancien bouton et en déposer un ici. OK ? Mais je vais écrire celui-ci par, et je vais prendre une autre case à partir d'ici et j'écrirai En savoir plus. Maintenant, je vais écrire ici En savoir plus. J'en écrirai plus comme je l'ai déjà dit ici. Je vais sélectionner celui-ci et maintenant je peux réellement diminuer cette hauteur. OK. Donc je vais garder 010 c'est bien. Je vais juste en mettre 20. Voyons à quoi ça ressemble. Oui, celui-ci est bon, je suppose que maintenant ce que je peux faire, c'est que je peux l'apporter ici et c'est ainsi que nous pouvons également créer nos boutons ici. Une autre bonne chose à ce sujet est là, comme vous pouvez voir C ici, vous pouvez voir que cela m'aligne en haut de l'autre bouton Et là, ça m'aligne avec le milieu. Et ici, à partir d'ici, je peux également voir la largeur ici. OK ? Entre les paragraphes ici, je peux également voir la largeur. OK, ici, en gros, ce que je peux faire, c'est que je peux aussi le faire pivoter. Ici, vous pouvez voir qu'il y a un changement dans mon icône. En l'utilisant, je peux le faire pivoter et je peux aussi le mettre en fonction du mien. OK ? Mais dans ce cas, je ne veux pas faire pivoter celui-ci. Je vais le mettre au centre. Vous pouvez également le voir ici. Voici l'option de rotation. D'où vous pouvez effectuer une rotation, d'accord ? De là, je peux voir ou vérifier le positionnement. Je vais garder celui-ci ici. J'espère que vous avez compris ce que nous avons appris ici. OK ? Après ce cours, nous apprendrons comment vous pouvez réellement créer des formes. OK ? Je vais vous expliquer comment créer un rectangle ou je vais juste donner les grandes lignes de ces boîtes ici. OK ? Je vais les donner. Je vais les ajouter également. Rendez-vous dans le prochain ticker du tutoriel et au revoir. 5. Utiliser des formes dans XD: Bonjour à tous et bienvenue dans un autre chapitre du didacticiel Adobe XD, où nous apprenons la conception de l'interface utilisateur et de l'expérience utilisateur. Ceci est notre quatrième chapitre et nous allons apprendre comment utiliser les formes. Donc, dans ce cours, je vais vous expliquer comment utiliser les formes, comment modifier le rayon d'angle de ces formes et comment vous pouvez également créer n'importe quelle forme de manière proportionnelle Je vais vous expliquer comment vous pouvez également le réduire individuellement. Je vais vous expliquer comment placer votre texte devant une forme. D'accord ? Supposons que si vous avez vos prises en arrière, comment vous pouvez les ramener formées. Je vais également vous expliquer comment regrouper cela lors de la création de boutons ou de n'importe quelle icône, ce qui est l'aperçu final, dans ce cas, comment vous allez le faire avancer. OK, ne perdons pas de temps ici et commençons par ce cours. Comme vous pouvez le constater, je suis déjà dans l'espace de travail dans lequel je travaillais lors du dernier cours, d'accord. Maintenant, je vais vous montrer comment créer en gros Je vous ai parlé outils de base dans lesquels se trouve ma barre d'outils. D'accord ? De là, vous pouvez créer une boîte rectangulaire. D'accord ? Je souhaite créer une boîte rectangulaire. Tout d'abord, je vais simplement augmenter l' espacement à partir d'ici OK, je vais apporter celui-ci ici. Image du produit, vous voulez vous intégrer ici ? Maintenant, je vais mettre une boîte ici. OK. Que je puisse commencer par mon travail. Ce que je vais faire, c'est sélectionner la boîte rectangulaire. À partir de là, je vais fabriquer une boîte. OK. Maintenant, comme vous pouvez le voir ici, c'est couvert. J'ai couvert mon texte ici. OK. Juste à l'intérieur de cette boîte pour mettre celui-ci devant. Il existe de nombreuses manières différentes placer ce texte devant ce rectangle. Mais je vais vous montrer les plus élémentaires et ce que vous pouvez utiliser. En gros, le plus élémentaire que j' utilise est que si vous cliquez simplement avec le bouton droit de la souris ici, vous pouvez voir que l'option s'appelle renvoyer en arrière, d'accord ? Donc, le raccourci clavier, ouvrez le crochet ici. Si vous voulez avancer cela exemple si je veux avancer quelque chose dans ce cas, je peux cliquer sur l'option Control plus Bc close. OK. Je vais renvoyer celui-ci en arrière ou je dois sélectionner tout le texte à partir d'ici. J'ai sélectionné cet envoi en arrière. Ici, ma commande ou mon cadenas pour chat étaient allumés, c'est pourquoi cela ne fonctionnait pas. En gros. Ici, je vais cliquer sur Envoyer ce produit à l'envers. C'est ainsi que vous pouvez le faire, vous pouvez placer celui-ci au centre, ou l'inverse, si vous sélectionnez les deux, supposons que je mette celui-ci ici quelque part. Maintenant, je veux placer ces deux points au centre. Dans ce cas, je viendrai ici. Et ce que je vais choisir se trouve ici. Comme vous pouvez le voir, je peux mettre ça au centre. OK, je passe à l'option d'alignement. À partir de là, je peux choisir ici en utilisant la touche de raccourci. J'ai acheté celui-ci au centre. OK. C'est une autre façon de procéder. Maintenant, j'espère que vous avez compris comment vous pouvez jouer avec ça. D'accord ? Je viendrai aussi ici et ici. Maintenant, en fait, je peux aussi changer la largeur. OK, pour celui-ci, gros, je peux le faire si je viens ici, si je reviens ici, supposons que je veuille sélectionner cette page, d'accord ? Maintenant, ce que je vais faire, c'est ici, comme vous pouvez le voir, avec les petits points, d'accord ? En utilisant cela, je peux réellement changer le rayon comme vous pouvez le voir d'ici. Et l'autre façon de procéder, c'est de venir ici, d'accord ? En gros, à partir de là aussi, je peux changer, laissez-moi prendre 50 ici, vous pouvez le voir changé de 50, le rayon d'angle. Si je veux changer le rayon de chaque angle individuellement, supposons que je veuille mettre ici 80, je vais 70. Ici 20 et ici 40, d'accord ? Voici à quoi cela ressemblera réellement. D'accord ? Mais je n'en veux pas, j'y retournerai. Maintenant, je vais simplement diminuer le rayon d'angle ici. Maintenant, je peux simplement me déplacer. OK. Si je souhaite apporter des modifications à la forme, je peux le faire à partir d'ici. OK. Vous allez pouvoir voir comme ça. J'ai aussi ces coins. D'où je peux maintenir la taille jusqu'ici. J'espère que vous avez compris. OK, maintenant je vais créer une autre boîte ici, de la même manière. Je vais le prendre ici et je vais l'intégrer à l'outil de sélection. À partir de là, sélectionnez cette option, puis renvoyez en arrière. J'ai mon message ici, je vais juste le mettre dans cette boîte en particulier. Je vais également modifier le rayon d' angle à partir d'ici. OK, je l'ai ici. Je vais garder ces boutons ici et je vais également mettre des cases pour ceux-ci. OK. J'espère que vous pouvez voir à quoi ça ressemble vraiment. Je vais juste créer l'option Plus ici. D'accord ? Pour cette option positive, je vais faire un cercle à partir de là. D'accord ? Je vais peut-être le mettre ici au centre, pour créer un cercle. Je vais vous montrer comment faire. Une fois que j'ai sélectionné le bouton ellipse. Avec cela, je peux créer ou jouer avec le cercle. Je peux choisir la largeur et la hauteur. Mais voici ce type, mais si je veux un cercle parfait ou une forme ronde parfaite, dans ce cas, je peux cliquer sur Control Shift. Maintenant, vous pouvez voir cela me donnera un cercle parfait. Je ne peux pas jouer avec la largeur et la hauteur ici. Cela me donnera un cercle proportionnel. J'espère que vous avez compris celui-ci. Je vais le sélectionner et le supprimer. Je vais juste réduire à nouveau la taille. Je vais cliquer sur Control Shift. Maintenant, j'ai ce bouton ici. Je vais mettre ce bouton ici. Maintenant, je vais mettre un signe plus. OK. Signe « Plus ». Ou je peux simplement sélectionner autre chose. OK. Laisse-moi juste prendre une ligne ou je vais juste prendre un plus. Je vais accéder à l' option texte dans la zone de texte. Je viendrai ici, je le ferai, pour sélectionner cette lettre en particulier à partir d'ici. Et place celui-ci au centre. OK, je vais essayer de mettre celui-ci au centre. Maintenant que vous pouvez avoir ce truc en particulier ici au centre, je vais le mettre comme ça ici. Vous pouvez également voir l' option plus ici. Et maintenant c'est bien visible. OK, je vais fabriquer d'autres boîtes. Supposons que je veuille cette case, je la sélectionnerai. Je peux simplement copier n'importe quelle boîte si je veux. D'accord ? C'est peut-être celui du rectangle. Ou un rectangle ici. Et page en savoir plus. Celui-ci. Cette page est ici. D'accord ? Je vais peut-être prendre ce rectangle à partir d'ici. D'accord ? Ce que je vais faire c'est maintenant copier celui-ci en utilisant Control. Je peux venir ici et cliquer sur le contrôle V. Ici, vous pouvez voir que j' ai la même taille de boîte. À partir de là, je vais diminuer l'échelle ou la taille de cette boîte. Maintenant, je vais juste y intégrer celui-ci. OK, pour mes boutons ici, comme vous pouvez le voir, faites la même chose. Envoyez en arrière ou sélectionnez simplement ce texte en premier. Si vous le renvoyez à l'envers. Et il y a d'autres moyens de le faire, d'accord ? Si je supprime simplement le champ, je peux également le faire. D'accord ? Je peux le sélectionner ici. C'est une façon de faire les choses. Encore une fois, de la même manière que je vais venir ici, peut-être ici, dans le rectangle 1, je vais copier celui-ci. Et je vais juste le coller ici. OK, j'ai aussi cette boîte. Maintenant, avec ça, je vais juste déménager . Je vais déplacer celui-ci ici. Vous pouvez voir maintenant que j'ai aussi cette lettre. D'accord, à partir de là aussi, si je veux changer, je peux le changer, mais j'espère que vous l'avez bien compris. OK, je l'ai et je peux aussi diminuer la taille si je veux mettre celui-ci au centre comme ça. Oui, très bien. Cette page est prête. OK, j'espère que vous avez compris ce C ici. Je vous ai montré comment créer une page comme celle-ci, comment utiliser les formes et comment mettre celle-ci au premier plan. exemple, si vous en avez deux, vous pouvez également les regrouper. OK, si je sélectionne ces deux options à partir d'ici, je peux essentiellement sélectionner ou si je veux changer la largeur, je peux le faire. Si je veux effectuer une rotation, d'accord, je peux le faire aussi. OK. Si je veux le faire pivoter de 5 % ici, vous pouvez voir que la rotation a eu lieu avec les deux. D'accord ? C'est donc ainsi que nous pouvons essentiellement nous regrouper. Cliquez ici avec le bouton droit voir la sélection des groupes. OK, à partir de là, si je déplace simplement l'un d'entre eux, le texte entier sera supprimé. D'accord ? Il s'agit de l'utilisation du regroupement que vous pouvez déplacer entre les pages ou sur un bouton. OK, j'espère que vous avez suivi ce cours et que vous pouvez maintenant commencer à le créer vous-même. Dans le cours suivant, vous découvrirez comment cela peut être utile et tout ce que nous pouvons faire en utilisant ces options dans cet Adobe XD. J'espère vous voir tous dans le prochain tutoriel. D'ici là, prends soin de toi et au revoir. 6. Icônes gratuites à utiliser dans les projets et le kit d'interface utilisateur existant: Bonjour à tous et bienvenue dans un nouveau chapitre d' Atop XD où nous allons apprendre le design UY Ux OK, nous en sommes maintenant au chapitre numéro six. Et nous allons apprendre où vous pouvez tous obtenir des icônes gratuites que vous pouvez utiliser dans vos projets lors de la création d'une nouvelle application mobile. Ou vous commencez tout juste à utiliser cette application. Ensuite, d'où vous pouvez obtenir ces fichiers de ressources. OK. Je vais également vous expliquer comment vous pouvez trouver kits d'interface utilisateur existants que vous pouvez utiliser et utiliser pour prendre icônes ou des tailles de couleur et différentes couleurs. Couleur d' arrière-plan principale et secondaire, comment vous pouvez prendre en compte les suggestions des travailleurs. Et je vais vous parler de quelques-uns des sites Web sur lesquels vous pouvez obtenir tout cela gratuitement et de façon dont vous pouvez également les utiliser dans votre travail. Ne perdons pas de temps et commençons par ce chapitre en particulier. Comme vous pouvez le constater, je suis de retour dans mon espace de travail. Et maintenant, je vais vous montrer d'où vous pouvez obtenir quelques-unes des icônes gratuites que vous pouvez utiliser dans votre travail. OK, tout d'abord, je vais vous montrer le site Web qui s'appelle Icone Finder. D'accord, ici je vais peut-être rechercher l'icône de la page d'accueil de la première page. Ici, vous pouvez voir que j' ai différentes options. Si je veux une illustration une illustration de trois jours ou un autocollant, je peux me procurer tout cela d'ici. Si vous faites simplement défiler l'écran un peu vers le bas, vous pouvez voir que voici différentes recommandations de différentes œuvres ici. OK, voici donc quelques autocollants ou illustrations. Vous pouvez également le télécharger et l'utiliser de manière appropriée. Accédez aux icônes de recherche pour la maison. Cela me donnera une suggestion pour des icônes d'accueil similaires à partir d'ici. OK, voici donc quelques-unes des icônes qui sont chargées. OK, donc supposons que j'ai ceci, d'accord, mais laissez-moi vous expliquer les prix, la prime et toutes les licences également. OK, alors voilà, premier arrêt. Si vous voulez voir les produits haut ainsi que les produits gratuits, vous pouvez cliquer ici et voir ceci. OK ? Mais pour ce projet, je vais sélectionner le bouton gratuit à partir d'ici. OK, maintenant je vais avoir les trois icônes, qui se trouvent sous l'option des icônes d' accueil. OK, ici je peux sélectionner tous les styles. Je n'ai aucun problème avec le style. OK, ici vous pouvez voir toutes les licences Action Call à partir d'ici. En gros, vous pouvez choisir ce que vous allez utiliser. OK, ici vous ne pouvez voir aucun lien de retour, licence de base. Si vous souhaitez prendre une licence de base et que vous souhaitez l'utiliser, vous pouvez la prendre ici. Je vais choisir l'option « No link back ». Comme je n'ai pas besoin de mentionner leur nom ou quelque chose comme ça, je peux le faire. Et celui-ci est destiné à un usage commercial, comme si nous l'utilisions à des fins commerciales, exemple pour créer la page Web d'une entreprise ou quoi que ce soit d'autre. Dans ce cas, vous pouvez donner celui-ci et ils vous montreront les options. OK. Je veux tout cela gratuitement, alors laisse-moi venir ici et laisse-moi prendre celui-ci. OK. deux méthodes de base pour télécharger. Icône gratuite. OK, voici le formulaire PNG et voici le formulaire SVG. J'espère que vous savez ce qu'est le formulaire PNG, mais maintenant nous allons voir ce qu'est le formulaire SVG OK, je vais télécharger les deux simultanément, côte à côte. OK, je vais cliquer sur 48 pixels. Je vais d'abord télécharger le fichier PNG. Comme vous pouvez le voir, mon fichier PNG est en cours de téléchargement. Je vais maintenant passer à l'option SBG et à partir du SVG, je vais également télécharger l'icône SBG OK. Il existe également d'autres icônes. Dans quel format ? Si je veux le télécharger, si je veux le télécharger au format Illustrator, exemple si je dois travailler sur Auto Illustrator, je peux télécharger celui-ci ici. Si je veux le télécharger au format ICO, je peux le faire aussi. De là, vous pouvez voir que vous pouvez également utiliser le format CNS Ce format ne peut être utilisé que dans ou si vous possédez un produit Apple. OK. Maintenant, j'ai téléchargé les deux. D'ici, je vais vous montrer les gars. OK, je vais passer aux téléchargements à partir d'ici. J'en ai deux. OK, je vais vous montrer ce que nous pouvons faire à partir d'ici. OK. Maintenant, le moyen le plus simple de déposer votre travail ici est de passer à l'option fichier. D'accord, à partir du fichier, vous arrivez à l'option d'importation. La touche de raccourci pour cela est Shift Plus Control plus I. Sur Mac ou PC, c'est Shift Control ou Command plus I. OK, je suis juste en train de l'importer et tous mes fichiers sont et tous mes fichiers sont téléchargés dans les téléchargements. Jo, je vais apporter celui-ci ici ou je vais le sélectionner Je vais essayer d'importer celui-ci. OK, ici comme vous le pouvez. J'ai cette image ici en ce moment. Je vais en importer un autre. À partir de là, j'irai vérifier les propriétés à partir d'ici. Il s'agit du fichier PNG. Comme vous pouvez le voir, je vais juste le supprimer pour le moment ou je vais le supprimer. OK ? Je vais télécharger le fichier SVG, d'accord ? Je vais télécharger le format SVG ici. OK, voyons d'ici. Ici, vous pouvez voir que j' ai le format SVG ici. Maintenant, comme vous pouvez le voir, j'ai ceci. Je vais également importer la même chose ici dans mon X D. Allez dans le fichier, allez-y, et celui-ci ici, vous pouvez voir que c' est le format SVG Travaillez ici, d'accord ? Permettez-moi de mettre cela côte à côte et de vous montrer la différence entre le format SVG et le format PNG, d'accord ? Laisse-moi zoomer davantage, d'accord ? Maintenant, je vais zoomer davantage. Ici, vous pouvez voir que c'est le fichier PNG qui se casse, d'accord ? Et ici j'ai le fichier SVG, d'accord ? Ici, si j'augmente la taille, d'accord, à partir de là, je vais le sélectionner ou en faire un seul groupe, d'accord ? Je peux juste changer celui-ci d'ici, d'accord ? Il s'agit donc d'un groupe. Je peux le déplacer, d'accord, selon mes envies. Et je peux aussi le diviser si je le souhaite. OK ? Il s'agit du fichier PNG. Je peux aussi augmenter la taille à partir d'ici, mais la qualité n'est pas très bonne. OK. Comme vous pouvez le constater à partir d'ici, je peux également maintenir cela si je veux y remédier. OK, je vais y retourner. J'espère que vous avez compris la différence entre fichier SVG et un fichier PNG, d'accord ? Maintenant, ce que je vais faire, c'est supprimer celui-ci à nouveau. À partir de là, je vais le supprimer et je supprimerai également ce fichier PNG. OK, à partir de là, j' ai accès. Vous pouvez également accéder à toutes ces icônes à partir de. D'accord, je ne téléchargerai donc la version SVG qu'à partir de maintenant ci-dessous OK, je vais chercher une icône représentant une image. OK, je vais chercher l'image et je vais cliquer sur Enter Here. Vous pouvez voir que j'ai un ensemble d'icônes d'image différent ici. Supposons que je veuille installer celui-ci, ou que je veuille télécharger celui-ci. Je vais cliquer ici, et c'est là qu'il a été téléchargé. Maintenant, je vais revenir à mon fichier XD. Comme vous pouvez le voir, je vais simplement supprimer ces lignes à partir d'ici. OK, je vais également supprimer cette ligne. Je vais également le supprimer des deux côtés. OK, c'est ce que j'ai ici. Je vais le supprimer. Maintenant, je vais venir avec mon outil à main. Zoomez maintenant pour le sélectionner. Maintenant, à partir de là, je vais mettre ce fichier SVG ici D'accord, je vais revenir sur l'option d'importation à partir d'ici. Je vais peut-être sélectionner celui-ci. C'est le premier et je souhaite l'importer. OK, j'ai mon dossier ici ou je peux simplement choisir ici. OK, peut-être que je vais choisir celui-ci. Maintenant, comme vous pouvez le voir, je peux vraiment le décomposer et le déplacer. OK. Maintenant, comme vous pouvez le voir, j'ai acheté ce fichier SVG ici, mais comme vous pouvez également le voir d'ici, je peux sélectionner les couches individuellement Supposons que je veuille simplement importer la partie centrale dans ce cas. Sélectionnez uniquement la partie centrale à partir d'ici. Et à partir de là, en gros, je peux le sélectionner et le ramener ici. OK, l'endroit que je veux, c'est une façon de faire ou de travailler ici. Maintenant, je vais juste importer uniquement celui-ci. Ou d'abord, je vais simplement dissocier cela. OK, je vais juste le mettre ici maintenant, je vais essayer de garder ça au centre. OK. Maintenant, je vais supprimer celui-ci. me reste que celui-ci d' ici et je vais l'apporter au centre. C'est ainsi que vous pouvez essentiellement mettre une option d'image si vous n'aimez rien d'autre. Si vous voulez prendre une autre icône d'un autre cadre, vous pouvez également le faire. OK, je vais télécharger ce SVG d'ici. Je vais importer au même endroit. OK, revenez au X D et jouez à l'importation de fichiers. Après cela, vous pouvez l'importer d'ici. OK, j'ai ce dossier ici en ce moment. Je peux aussi en changer la taille ou la forme, d'accord ? Comme vous pouvez le constater, je peux changer à partir d'ici. Si je veux simplement sélectionner une couche en particulier, je peux venir ici et je peux sélectionner une couche particulière comme celle-ci. Je peux juste implémenter 23 choses en même temps. C'est une façon de le faire. Je peux venir ici avec Shift. Si j'appuie sur Shift, je peux sélectionner les deux, juste à l'intérieur des couches. Je peux cliquer dessus et je peux juste les régler. Maintenant, si j'essaie de déplacer une icône à partir d'ici, supposons que je la sélectionne. Je peux aussi le déplacer en gros. OK, c'est une façon dont nous pouvons travailler ici. J'espère que vous avez compris jusqu'à présent comment nous pouvons importer et utiliser votre icône à partir de laquelle vous pouvez tous accéder ici. Des icônes gratuites que vous pouvez utiliser dans votre travail. Il existe une variété d' utilisations différentes que vous pouvez utiliser. Si vous voulez quelque chose de coloré, vous pouvez aussi l'obtenir d' ici, d'accord ? Déjà dans d'autres cours, je vous ai montré comment vous pouvez utiliser des ressources, des icônes de votre stock Dob OK ? Pour cela, je dois venir chez Plugins, et ici vous pouvez aller chez Scout. Et sous l'icône Scout, lui aussi, vous avez de nombreuses options. D'accord, si je veux juste les versions gratuites, je peux faire une recherche ici. Je vais juste chercher des icônes ici. De plus, vous avez une animation, des illustrations en trois D. Vous pouvez effectuer une recherche à partir de là. De quel type de format ai-je besoin ici ? De plus, vous pouvez voir, est-ce que je le veux au format PNG ou SVG Pour moi, je vous recommande personnellement d'utiliser le format SVG OK ? Parce que j'utilise ce tube et c'est bien, pas mal. OK. Nous allons maintenant apprendre comment vous pouvez obtenir un autre type de kits d' interface utilisateur gratuits lorsque vous essayez de vous entraîner, d'accord ? Ou copiez simplement leur textile ou leurs textiles prêts à l'emploi et utilisez-les dans votre travail pour créer une nouvelle page Web ou concevoir une application mobile. OK, commençons d'abord par celui-ci. OK, encore une fois, je vais passer à mon Chrome. OK. Je vais ajouter une nouvelle page Web. À partir de là, je vais rechercher X DUI kids. OK. Il s'agit donc d'un site appelé Xd Guru.com. À partir de là, vous pourriez obtenir quelques-uns des kits d'interface utilisateur gratuits, mais maintenant je reçois le montant des frais pour que vous puissiez réellement surveiller leurs communautés et à partir de là, vous pouvez rejoindre leur groupe Si vous avez quelque chose à leur demander, vous pouvez également soumettre votre commentaire. OK. Voici les quelques kits d'interface utilisateur que vous pouvez vous procurer vous-même. Peut-être devrais-tu payer une petite somme pour moi. Ce que je vous recommande, c'est qu'au début vous commencez avec des enfants UY gratuits. , lorsque vous ne ferez que progresser votre niveau de travail sur cette plateforme, vous pourrez simplement en Ensuite, lorsque vous ne ferez que progresser votre niveau de travail sur cette plateforme, vous pourrez simplement en obtenir une premium, ce qui constituera un excellent investissement pour votre travail. Ici, vous pouvez voir quelques-uns des kits premium qui peuvent être utilisés. Je vais juste taper des kits d'interface utilisateur gratuits. OK. Je vais peut-être prendre celui-ci et essayer de l'obtenir. Maintenant. Laissez-moi voir ce qu'ils me demandent ici. Est-ce qu'ils me demandent quelque chose en tant que tel ? Ici, vous pouvez voir quelques kits. OK. Vous pouvez utiliser cette couleur ici. Vous. Icônes. Maintenant, je peux l'enregistrer dans mon moodboard. OK, je dois créer un compte pour ça. Je vais juste y retourner et je pourrai obtenir des essais gratuits ici. OK ? Comme vous pouvez le voir, je peux m'en servir pendant que je travaille. C'est une façon d' obtenir tout cela, d'accord ? À partir de là, vous pouvez l'obtenir car ce sont quelques-unes des pages Web que vous pouvez utiliser. OK ? Maintenant, permettez-moi de revenir à mon E ici et j'essaierai d' obtenir un autre fichier. D'accord, je vais essayer d'importer d' ici, d'importer à l'intérieur ici. Vous pouvez voir que j' ai déjà importé un fichier ici. Peut-être qu'il a été supprimé à nouveau, je dois les télécharger à nouveau, le télécharger sur les lèvres. Je vais encore une fois aller sur un autre site Web qui est The Adores from a Stock De plus, vous pouvez obtenir un type d'interface utilisateur différent, d'accord ? Mais pour cela, vous devez payer un peu pour cela. Vous pouvez également utiliser le premium. D'ici, vous pouvez voir différentes choses ici. OK. Il s'agit donc d'une plateforme de commerce électronique, alors laissez-moi simplement la télécharger ici. Vous pouvez voir que c' est en train d'être téléchargé. OK. Il s'agit d'une ressource XD. Je vais juste essayer de l'ouvrir ici dans mon dossier. Je suis en train de télécharger le kit. OK, permettez-moi de revenir à mon X D et d'importer ce fichier à partir d'ici. D'accord, je vais passer à l'option d'importation à partir d'ici. Celui-ci, côté commerce électronique, je vais l'importer, je suppose que ce n'est pas d'ici. En gros, ce que je dois faire c'est annuler ça. Je vais venir ici. À partir de là, je peux réellement ouvrir le fichier, d'accord. En gros, vous pourrez maintenant voir une page Web conçue par quelqu'un d'autre. De là, vous pouvez voir qu'il a créé certaines pages, il les a également nommées. OK ? La page de connexion à la page d'inscription et la page du mot de passe oublié. Voici la page d'accueil et les catégories. OK ? Mais l'essentiel sur lequel je vais me concentrer concerne les composants. OK, permettez-moi de zoomer et de vous montrer quels sont tous les composants qu'il a utilisés. OK, vous pouvez voir ici qu'il a utilisé différents types d'icônes ou de logos. En gros, vous pouvez prendre les logos, peut-être changer quelque chose ou le prendre comme ça et changer la couleur pour moi. instant, ce que je peux faire c'est prendre le bouton d'accueil d'ici. Ce que je vais faire, c'est que je peux dissocier celui-ci. Maintenant, je peux en sélectionner un individuellement et cliquer sur Control plus, qui est la copie de base. Venez ici, descendez ici et tapez, ou cliquez simplement sur l'option Rythme. OK, vous pouvez voir que j'ai ce truc ici. Je vais peut-être le mettre quelque part ici. Considère ça comme un logo, d'accord ? Voici donc le logo du monde des jouets des voleurs vu d'ici. Vous n'avez pas besoin de mettre de couleurs, mais si vous voulez mettre des couleurs ou quoi que ce soit d'autre ici dans cette icône. Alors permettez-moi d'en prendre une autre ici. Accédez à cette page et contrôlez V. Maintenant, je vais simplement augmenter la taille de celle-ci. Et supposons que je veuille changer de couleur. Passez ensuite à l' option de champ à partir d'ici. Choisissez la couleur de votre choix et vous pourrez mettre cette couleur, d'accord ? Et vous pouvez également choisir l'opacité ici. Et vous pouvez également choisir la taille de la bordure, d'accord ? Je vais peut-être changer un peu la largeur , donc je vais en faire trois. Et je vais lui donner une couleur jaune. Ou peut-être quelque chose en rouge. OK, quelque chose en rouge. Et je vais aussi changer la taille, peut-être six. OK, c'est l' icône que je veux. Je vais diminuer la taille à partir d'ici. OK, je peux diminuer la taille à partir d'ici. En gros, ce que je peux faire aussi, c'est si je double-clique dessus à partir d'ici, si vous pouvez voir que j'ai les petits boutons ici, d'accord ? En gros, à partir de là, je peux diminuer la taille de l'icône. Je peux également apporter des modifications si je le souhaite. OK, ici vous pouvez voir différents points. Avec ces points, je peux vraiment me déplacer et jouer, mais ça va être moche ici. Pour cela, je vais revenir ici et supprimer ce trou. D'accord, c'est ainsi que nous pouvons également mettre des couleurs ou des détails dans notre icône. Comme si nous pouvions également le modifier après l'avoir obtenu de quelqu'un d'autre. peu de sites Web gratuits ou utiles où vous pouvez obtenir vos kits d'interface utilisateur et différents types d'icônes que différents types d'icônes que vous pouvez utiliser lors du développement votre conception Web ou de la conception de votre application mobile. J'espère vous voir tous au prochain cours où nous en apprendrons davantage sur les groupes. Et je vais également discuter avec vous de quelques-uns des problèmes auxquels vous pourriez être confrontés lorsque vous modifiez simplement l'icône. D'ici là, prenez soin de tout le monde et j'espère vous voir tous au prochain cours. 7. Icônes de groupe et de modification: Bonjour à tous et bienvenue à tous un autre tutoriel d'Adobe X D Here. Nous en sommes maintenant au chapitre numéro sept et je vais vous expliquer comment vous pouvez procéder à des regroupements et à des regroupements. Et aussi en dernier cours, comme je vous l'ai dit, vous pouvez prendre différents types d'icônes provenant de différents endroits. Si vous obtenez ces icônes, comment pouvez-vous modifier ces icônes en fonction de vous-même et quelle est la manière la plus précise , la meilleure ou la plus unique de modifier ces icônes vous-même ? OK, je vais tout vous montrer ici dans ce cours, alors ne perdons pas de temps et commençons par la conception. Maintenant, comme vous pouvez le voir ici, je suis de nouveau dans mon espace de travail. Maintenant, ce que je vais faire, c'est d'abord m'arrêter, je vais me débarrasser des icônes. OK, vous pouvez voir que je suis sur la première page. Vous pouvez voir que j'ai cette page ici, quelques icônes, et je les ai nommées en conséquence ne pas me tromper lorsque je l'agrandis. D'accord, je vais travailler et je vais montrer comment regrouper les groupes en conséquence. OK, tout d'abord, vous connaissez l'utilisation de base du regroupement, car je regroupais des choses tout en suivant d'autres cours. OK, tout d'abord, je vais venir ici dans le dossier. Supposons que je souhaite importer plus d'une page. Dans ce cas, je peux sélectionner Contrôle. Ensuite, je peux sélectionner deux ou trois images en même temps. OK, je vais sélectionner ceci, je vais importer ces trois icônes ici. D'accord, après cela, je pourrai les importer d'ici. OK, alors peut-être que je vais sélectionner ici avec mon outil de sélection. Ici. Vous pouvez voir que ce sont les quelques icônes que je viens d'acheter dans mon espace de travail. Maintenant, je l'ai importé dans la page numéro deux. Voyons maintenant d'abord le regroupement et le dégroupage. façon la plus simple de le savoir est une fois que vous avez sélectionné le cadre entier ici ou l'icône entière, cliquez avec le bouton droit sur votre souris ici, vous pouvez voir l'option, d'accord, ici je peux dissocier celui-ci à nouveau, sélectionner le tout, vous regroupez Maintenant, si j'essaie de déplacer un cadre à partir d'ici, supposons que si je le sélectionne, je veuille le déplacer, d'accord ? Ou si je sélectionne simplement la couche extérieure, je peux déplacer celle-ci indépendamment. OK ? Ici. De la même manière, si je clique ici et que je peux cliquer sur celui-ci, je peux aussi me déplacer. OK, pour cela, permettez-moi d'augmenter la taille. OK ? Je vais juste regrouper celui-ci à nouveau. Maintenant, je vais essayer de l'étendre, d'accord ? Comme vous pouvez le constater, je suis en train de l'étendre. Si je veux le redimensionner correctement, au sens proportionnel, dans ce cas, je peux venir ici, sélectionner et cliquer sur Control Shift Alors essaie de déplacer cette maison par ici. Vous pouvez voir qu'il augmentera proportionnellement. OK ? Je vais peut-être prendre une autre photo, que j'avais déjà prise ici. Importez maintenant, prenez cette carte ici. Le panier est sélectionné ici, comme vous pouvez le voir. OK, peut-être que je vais mettre cette carte quelque part ici. Et maintenant, en gros, je vais juste zoomer pour que vous puissiez mieux comprendre. OK, comme vous pouvez le voir, j'ai cette carte ici. Si je souhaite apporter des modifications ou modifier quoi que ce soit à partir d'ici. Tout d'abord, je dois cliquer sur celui-ci. Et à partir de là, vous pouvez voir que je peux changer les proportions, mais je veux en faire plus, d'accord ? Dans ce cas, je double-cliquerai ici. Vous pouvez voir que je peux changer la taille, d'accord ? Mais comme vous pouvez le voir, une fois que j'ai cliqué plusieurs fois, vous pouvez voir qu'il y a quelques options, d'accord ? En gros, si je veux augmenter ou diminuer une taille particulière à partir d'ici, si je reviens simplement à partir d'ici, supposons que je sélectionne simplement cette extrémité, d'accord ? Je veux changer quelque chose à partir de maintenant. OK ? Je vais peut-être juste mettre celui-ci ici. De la même manière, je vais proposer cette offre ici. OK ? Je peux donc le faire, le réduire un peu ou juste. Vérifiez ou faites comme ça. C'est une autre façon de travailler réellement ici. OK, c'est un moyen. Maintenant, si je le sélectionne individuellement, d'accord, je peux cliquer ici, ou je vais simplement sélectionner ce cadre entier. Je vais sélectionner le clic droit. Et je vais continuer à cliquer sur Option de groupe à partir d'ici. OK, je vais cliquer encore et encore, je vais cliquer sur Grouper. Maintenant, je n'ai plus d' option de groupe ici. Vous pouvez voir que tout cela n'est pas groupé, je suppose. OK ? Je peux également le sélectionner individuellement. Ici. Maintenant, je n'ai pas l'option sous-groupe. Nous devons comprendre que ce n' est qu'une chose simple ici. OK ? Ce que je peux faire, c'est simplement diminuer la taille ici. Peut-être que je prends celui-ci si je veux ajouter une ligne ici. OK. Ensuite, je vais ajouter une ligne ici comme celle-ci. Peut-être de la même. Je vais copier de ce côté. OK, alors peut-être que je vais cliquer sur Alt et en apporter une ici. OK ? Et je vais sélectionner celui-ci ici. Vous pouvez voir en gros à quoi ça ressemble ici. Voici à quoi cela ressemblera réellement. Je peux également modifier la taille du trait à partir d'ici. OK, passez à l' option bordure, changez la bordure. Je vais en prendre cinq. Celui-ci également. Je vais cliquer ici, Copier. Je vais juste coller l'apparence ici. Je vais juste coller l'apparence. Voici à quoi ressemblera réellement mon icône. Si je veux ajouter quelque chose, je peux le faire. J'espère que vous avez compris comment nous pouvons réellement contourner les options. D'accord, en gros, je peux travailler à partir d'ici, d' accord, je peux aussi diminuer la taille à partir d'ici. Ici, vous pouvez voir ces options. OK ? C'est donc ainsi que nous pouvons essentiellement contourner le problème. Ou si je veux changer la couleur ici, je peux également changer la couleur ici. Peut-être que je veux prendre du rouge ici, je veux du vert. OK ? Le terrain, la frontière, d'accord, ici. C'est ainsi que nous pouvons essentiellement contourner le problème. Revenez à la bordure, prenez une couleur jaune, choisissez-en une, et vous l' aurez également ici. Vous pouvez également ajouter différentes couleurs à cette icône particulière. Choisissez la couleur bleue, je vais peut-être prendre une icône bleue ici. OK, voici donc mon panier d'achat, qui a l'air très différent de l'époque où j' ai téléchargé celui-ci. D'accord, voici comment vous pouvez essentiellement contourner votre design. Supposons que je veuille le mettre ou le créer en un seul groupe. Je vais le sélectionner et cliquer sur Contrôler. OK, maintenant je peux déplacer celui-ci. OK, maintenant je peux le déplacer ici. Je viens de recopier celui-ci. Je vais juste faire un petit zoom arrière et je vais essayer de voir à quoi cela ressemble en gros. OK, donc je vais prendre celui-ci. Je peux le sélectionner et maintenant je peux le déplacer ici, d'accord ? Ou au lieu de l'option d' achat ici, peut-être que si je la supprime, je pourrais simplement mettre celle-ci. J'ai ceci. Je vais le mettre entre les deux. OK. C'est donc ainsi que nous pouvons également travailler. Mais maintenant, je ne veux pas mettre ce logo ici maintenant. OK. Pour cela, je vais le supprimer. J'y retournerai. Oui, j' espère que vous avez compris comment modifier votre icône, quelle qu'elle soit. D'accord, donc si je vais dans la recherche d'icônes, il existe différentes icônes parmi lesquelles vous pouvez choisir. D'accord, ici je peux prendre n'importe quelle icône et en fait je l'utilise pour moi-même. OK. Permettez-moi de télécharger celui-ci en solde. Et encore une fois, venez à mon X D d'ici. Maintenant, je peux réellement importer, d' accord, le contrôle des vitesses. De plus, je peux aussi utiliser la commande de vitesse. Je vais être redirigé vers cette page ici et vous pouvez voir ici que j'ai aussi le logo de vente. OK ? Celui-ci, je veux l' étendre proportionnellement à ce changement de contrôle Et je vais sélectionner celui-ci, celui-ci, vous pourriez le mettre dans un coin quelque part. OK ? Ou quelque part ici. Nous pouvons donc également contourner tout cela. OK ? Si je clique dessus et que je peux également dissocier celui-ci, d'accord ? Maintenant, je peux essentiellement changer à partir d'ici, vous pouvez voir, d'accord ? Donc, voici comment nous pouvons le dire , vous pouvez voir que c'est ainsi que nous pouvons réellement contourner le problème. OK ? Mais je vais supprimer celui-ci pour le moment. Je ne veux pas ça, j'espère que vous avez compris ce cours sur l'utilisation de ce regroupement. D'accord, c'est donc l'une des principales choses, comme la façon dont nous pouvons modifier toutes ces icônes que nous obtenons. OK, je vous ai également montré le regroupement, comment vous pouvez essentiellement regrouper l' autre manière importer n'importe quoi depuis n'importe où. Supposons que j'ai cette page de composant ici. Je peux juste zoomer, déplacer avec mon outil manuel ici. OK, à partir de là, en gros, ce que je peux faire c'est peut-être que je veux cette icône pour cette icône. Ce que je peux faire, c'est cliquer sur Contrôle. Retournez maintenant à cette page ici et sélectionnez peut-être cette page. Et maintenant, cliquez sur le contrôle V. OK, alors vous pouvez voir que j' ai un composant ici, d'accord ? Je peux donc mettre ce composant ici. Ou si je veux augmenter la taille, je peux augmenter la taille. Si je veux l'augmenter proportionnellement, je peux le faire à partir d'ici OK ? Comme ça. Je peux aussi en gros augmenter la taille de celui-ci. OK ? Celui-ci est essentiellement un composant et je peux simplement le sélectionner ici. Je peux essentiellement sélectionner l'option de groupe si je souhaite regrouper celle-ci. Mais ici, vous pouvez voir que cela se compose de toutes ces choses, d'accord ? De là, vous pouvez voir si je veux dissocier un composant, je peux le faire ici Maintenant, tu vois, j'ai celui-ci différent. Cette partie est différente. Je peux juste déplacer celui-ci, supposons que je ne le veuille pas. Dans ce cas, je peux le sélectionner et je peux également le supprimer. C'est ainsi que nous pouvons réellement décomposer un composant. Il suffit de venir ici et comment vous saurez qu'il s' agit d'un composant, essentiellement de couleur verte. je viens de vous le montrer, si vous voulez le revoir, voici à quoi ressemblera la marge pour un composant. À partir de là, je peux simplement sélectionner ce composant en particulier, venir ici et dissocier le composant, ou le raccourci pour cela est le contrôle du changement Pour Mac, c'est Shift plus Command plus. OK, je vais supprimer. D'accord, je vais également le supprimer. Ici, vous pouvez vous faire une pause. Je vais le sélectionner, le mettre ici. Et celui-ci, je vais le supprimer. OK. Maintenant, si je veux aussi modifier ceci, je peux également faire l'édition. OK ? Je peux donc simplement zoomer. Plus j'ai une meilleure vue, meilleure sera la façon dont je pourrai le faire. D'accord, alors à partir d'ici, je vais peut-être choisir celui-ci ici. Je vais prendre ça. Viens ici. Oui, choisis celui-ci. Reviens ici. Et maintenant, vous pouvez faire quelque chose comme ça. OK. Ici, comme vous voulez en faire quelque chose comme ça, vous pouvez le faire aussi. OK ? Peut-être que si j'en réduis un à partir d'ici, c'est une façon de faire les choses. J'espère que vous avez compris ce cours sur la façon de travailler ici, d'accord ? C'est ainsi que vous pouvez réellement créer votre logo et vous pouvez le faire en conséquence. Si vous souhaitez utiliser ces options, vous pouvez toujours les utiliser vous-même. C'est sur cela que j'ai fait. OK, laisse-moi rentrer. Si je veux le placer quelque part au milieu, je peux le faire aussi. D'accord, mais pour l'instant, je vais également supprimer cette icône. C'est donc une façon de le faire. OK, alors rendez-vous tous dans le prochain cours où nous apprendrons comment commencer votre prototypage OK, donc le prototypage , c'est comme si je joignais cette icône à cette page ou ici, si je clique sur cette icône, je passe à d' autres pages ici Comme j'ai quatre pages, comme vous pouvez le voir, je n'ai commencé à travailler ici que sur la première, OK. Nous allons donc également faire le prototypage afin que vous sachiez comment concevoir votre IBX OK. D'ici là, prenez soin de tout le monde et à bientôt au prochain cours. 8. Prototypage dans Adobe XD: Bonjour à tous et bienvenue dans un autre chapitre du didacticiel Adobe XD où nous allons découvrir la conception d' interface utilisateur et d'expérience utilisateur. Nous en sommes maintenant au huitième chapitre et nous allons découvrir le prototypage dans Adobe XD Le prototypage consiste essentiellement à relier des pages à des pages indiquant à quoi ressemblera l'apparence Bien, dans ce cours, nous allons en apprendre davantage sur le prototypage Et je vais également vous montrer différentes manières d'interagir entre vos cadres. Et je vais aussi vous montrer ce que vous pouvez faire avec toutes les animations. OK, alors ne perdons pas de temps et commençons par ce chapitre ici. Donc, vous pouvez voir que je suis dans mon espace de travail et que j' ai quatre pages ici. OK, donc je vous ai montré comment créer les pages, donc de même, j'ai créé ces cadres particuliers ici, d'accord. Donc, vous pouvez voir si je veux répondre, d' accord, maintenant tout est aligné. Ici, vous pouvez voir que j'ai quatre cadres, mais ce que je veux faire, c'est pour le prototypage, relier ces pages les unes aux autres Bien, essayons d'abord de comprendre comment nous pouvons commencer à le faire ou comment nous pouvons commencer par le prototypage Donc, dans ce panneau en particulier, vous pouvez voir à côté de l'option de conception, j'ai l'option prototype et la touche de raccourci pour cela est Alt plus deux sur notre clavier. Je vais accéder à cette page de prototype. Comme vous pouvez le constater, lorsque je suis une page prototype et que je clique sur une icône, j'ai ce type de panneau juste à côté. OK. Si je clique sur la page d'accueil, j'ai également celle-ci ici. OK ? Mais de la même manière, si je vais dans le fichier de conception, et si je clique ici, vous pouvez voir que je n'ai pas la même option disponible ici dans le panneau de conception. Je vais donc passer à l'option prototype. Encore une fois. Ici, je pourrai me connecter aux pages. OK, peut-être que je veux connecter cette page d'accueil particulière à celle-ci. OK ? Cette page ici. Cette page en particulier. Je veux le relier à celui-ci et cette page à la dernière. OK ? Ici, vous pouvez voir que j'ai tout cela ici. Si je vous montre un exemple de ce à quoi cela ressemblera. Je vais donc accéder au panneau de prévisualisation de Dekstop si je veux le prévisualiser, mais je vais passer à l'aperçu de l' appareil à partir d'ici OK, comme vous pouvez le voir, j'ai le cadre ici. OK, si je clique dessus, je suis dans ma deuxième page. Maintenant, si je clique ici, vous pouvez voir que c' est la troisième page. C'est la dernière page car j'ai précisé quelque chose en particulier. Voici donc l'aperçu que je vais avoir ici. OK, donc vous pouvez voir que je ne peux pas y retourner. Et une autre façon de le faire, c'est qu'à partir de votre clavier, vous pouvez simplement cliquer sur le bouton, les flèches. À partir de là, je clique sur le bouton flèche gauche. Et je peux cliquer sur la flèche droite ici, comme vous pouvez le voir. Mais ce n'est que l'essentiel de ce que vous pouvez faire ici, d'accord ? Juste le plus basique. Si je viens ici, si je clique dessus, supprimez, je supprimerai celui-ci. Je vais également le supprimer. Je vais également le supprimer. OK, j'espère que vous avez une idée de ce que c'est en gros, j'ai également supprimé ce message. OK, mais je veux juste le supprimer. OK ? Ce n'est pas le message ici. Je vais venir ici. C'est ainsi que nous pouvons commencer à travailler ici. OK, j'espère que vous avez une brève idée. Maintenant, je vais vous parler des moyens les plus simples de faire votre prototypage. D'accord, une fois que je serai là Maintenant, ce que je veux sélectionner, c'est sélectionner cette option Par particulière. Et je veux directement aller sur la page de paiement, d'accord ? Maintenant, si je clique sur celle-ci et que je connecte cette page à celle-ci, d'accord ? Avec la page de paiement à partir d'ici. Comme vous pouvez le voir dans l'option En savoir plus, je vais relier cette page à celle-ci ici. Comme vous pouvez le voir, j'ai le bouton d'accueil ici. Je vais connecter la page. Celui-ci, peut-être cette page d'accueil. Je vais le relier au premier. Maintenant, comme vous pouvez le voir, j'ai cette icône ici. Ce que je peux faire, c'est que si je veux également mettre en page la même fonctionnalité, je vais simplement copier celle-ci d'ici. Supprimez-le, venez ici, je vais coller celui-ci ici. Vous pouvez voir qu'une fois que j'ai collé, la même fonctionnalité est également collée ici. OK ? Comme vous pouvez le constater, la même manière, si je viens ici, accord, avec ce bouton en particulier d' accord, avec ce bouton en particulier et que je veux juste me faire déposer, je peux aussi le faire. OK, j'espère que vous avez compris les bases de la façon dont vous pouvez travailler ici sur cette page. D'accord, celui-ci aussi pour aller ici, je viens aussi ici, je vais, celui-ci, je vais cliquer dessus, je vais cliquer dessus, je vais cliquer sur le contrôle C, et je vais coller le contrôle V ici. D'accord, vous pouvez donc également voir la fonctionnalité ici. OK, maintenant permettez-moi de passer à l'option de prévisualisation à partir d'ici. OK, ici je n'ai sélectionné que ce bouton, d'accord ? Et maintenant, si je clique sur l'option Par, vous pouvez voir que je suis transféré vers ma page de paiement. Si je veux revenir à ma page d' accueil, il me suffit cliquer sur cette icône en haut. C'est une façon de procéder. Et maintenant, si je me déplace et que je veux passer d'ici à la page d'accueil, passons à cette page ici. À partir de là, je peux également revenir à la page d'accueil, car je dois simplement la copier-coller, la même fonction si nous avons autant de pages et que nous devons faire des choses comme un prototype ou faire du prototypage comme si j'avais 500 ou 600 images Dans ce cas, je peux utiliser cette méthode qui est très utile. Revoyons maintenant l'aperçu. Si je clique sur l'option En savoir plus ici, vous pouvez voir que je peux accéder à la page du produit ici. OK, je vais cliquer dessus , je vais venir ici. Je vais maintenant sélectionner cette option. Et celui-ci va m'amener à la dernière page. Voilà, j'ai le tout et j'espère que vous avez compris comment fonctionne ce prototypage OK, j'espère que jusqu'à présent c'était clair pour vous tous. Essayons maintenant de voir l'animation. Toutes les animations que nous pouvons mettre lors du prototypage. D'accord, votre page va simplement entrer ou rebondir pour cela Comme vous pouvez le voir, menu apparaît ici sur mon panneau de commande, comme si j'avais toutes ces choses ici Surtout si je clique, vous pouvez voir où tout cela est lié. Si je viens sur cette page , vous pouvez voir, si je viens sur la page de paiement ici, vous pouvez voir toute cette doublure ou cette jointure. OK, ici, vous pouvez vraiment gérer ça à partir d'ici. Si vous souhaitez en ajouter d' autres, vous pouvez également le faire. OK, si je tape, je peux le mettre où je veux. OK, je peux changer le placement. Essayons maintenant de comprendre. Supposons qu'avec ce bouton Plus, il apparaisse ici, mais je veux qu'il apparaisse dans un style, d'accord ? Pour cela, je vais peut-être sélectionner celui-ci, d'accord ? Cette doublure en particulier, vous pouvez voir le mode de transition à partir d'ici, d'accord ? Ici, vous pouvez voir différents types de transition, accord, si je clique sur Auto Animate. Et où est la destination, d' accord, à partir d'ici. De plus, si vous ne voulez pas le choisir ou le lier à partir d'ici, vous êtes ici, d'accord, ici. Comme vous pouvez le voir, une fois que je suis sur ma page d'accueil, vous pouvez voir où je veux que cette page soit liée, la page du produit, la page de paiement ou la page de commande à partir d'ici. De plus, nous pouvons le faire. Nous avons ici une option pour sortir facilement, sortir, résister au vent. Je vais vous montrer tout ça, d'accord ? Il s'agit d'une autre option appelée déclencheur. OK ? Le déclencheur est essentiellement la façon dont votre application va se déplacer, d'accord ? Supposons que j'aie sélectionné ce bouton ici. Si je sélectionne Drag, je dois boire le bouton. Ensuite seulement, je passerai à la page suivante ou à l' endroit suivant où j'ai sélectionné. OK, je vais choisir ici. Permettez-moi de vous montrer un exemple tiré d'ici. OK, laisse-moi juste diminuer la taille à partir d'ici. Laissez-moi garder ça dans un coin. OK, voilà, j'ai sélectionné l'animation automatique. Et appuyez ici. Si je clique simplement dessus, cela ne fait que s'atténuer. OK. Je peux également sélectionner la durée pendant laquelle je souhaite cette animation. OK, supposons que je le veuille 2 secondes, donc je vais lui donner 2 secondes. Ouvrez à nouveau l'aperçu et cliquez sur En savoir plus. Voici à quoi cela ressemblera en gros, d'accord ? Ça va s'atténuer comme ça. Si je veux sélectionner celui-ci d'ici, supposons maintenant cette doublure, d'accord, ou cette jonction ici, dans ce cas, vous pouvez voir qu'elle est liée à la page de paiement. Et je choisirai l'option de dissolution à partir d'ici. Et je choisirai aussi le moment, d'accord ? Je vais prendre 0,5 seconde. Je veux une transition, d'accord ? Je ne veux effectuer aucune sorte de lecture audio ou vocale pendant ce temps. Si je sélectionne tout cela, je dois choisir un fichier audio. Et tout ce que je peux faire aussi. Parce que dans de nombreux endroits que vous avez peut-être vus, exemple si vous passez à la page suivante, ils vous le diront une fois que vous aurez cliqué sur un bouton. Une fois sur cette page, ils diront page numéro deux ou bienvenue sur la page de commande. Bienvenue sur Amazon. Bienvenue chez Tesla, quelque chose comme ça. OK, c'est ce que nous pouvons faire aussi. D'accord, à partir de là je vais passer à l'option d'animation automatique. À partir de là, je vais choisir cela au lieu de me détendre. Maintenant, je vais choisir. OK, voyons à nouveau l'aperçu. À partir de là, c'est ainsi que cela va se passer. D'accord, voyons maintenant d'autres options également. OK, j'ai fait celui-ci. Passons maintenant à cette option. D'accord, cela me mènera à cette page. Maintenant, je vais animer celui-ci. Je vais vous montrer toutes les animations. OK, à partir de là, vous pouvez sélectionner l'option de dissolution. Pour plus de facilité, je vais peut-être choisir Snap. OK, voyons à nouveau l'aperçu. Ici, vous pouvez le voir en un clin d'œil, je suis de retour au même endroit, d'accord ? Au lieu de dissoudre, si je passe à l'option de droite de la diapositive ici, si je clique sur Bounce, d' accord, voyons maintenant l'aperçu d'ici Ici, vous pouvez voir que c'est le rebond. Je peux sélectionner l' heure à partir d'ici. Supposons que si je veux une seconde, je peux cliquer ici. Et maintenant, cliquez sur cette option ici, ou allez sur le bouton de prévisualisation. Maintenant, cliquez, vous pouvez voir la façon dont ma page apparaît ou l'animation, c'est différent. OK, donc j'espère que vous avez compris ce qu'est un déclencheur. OK, je vais juste vous montrer un exemple de drag. Supposons que j' aie choisi celui-ci, peut-être pas. Ceci sélectionnera celui-ci. Ou je vais y retourner. Oui, je vais en choisir un. Maintenant, je vais sélectionner plutôt que quoi que ce soit et je vais choisir l'option d'assouplissement. D'ici, il y a des entrées et des sorties. Je vais maintenant passer à l'option de prévisualisation. Maintenant, si je fais glisser le pointeur, je peux passer à la page suivante. D'accord, mais je n'ai pas appliqué la même chose ici. OK, si je viens ici. C'est donc une façon de faire glisser ce truc. OK. Ici aussi, je vais choisir le drag. Et maintenant je suis sur cette page. Si je le fais glisser avec ma souris. OK. Donc, dans ce cas, j'ai peut-être fait une erreur, parce que c'est tout à fait, oui, j'espère que vous avez compris. Si j'ai juste besoin de faire glisser le pointeur, si j'arrive sur cette page et que je place celle-ci ici, je vais faire glisser le pointeur, d'accord, voyons l'aperçu. OK, je vais le faire glisser ici. Revenez ici, faites glisser, faites glisser. C'est ainsi que nous pouvons également effectuer ce travail. OK, je vais le supprimer. Je vais également supprimer celui-ci. OK, j'espère que vous avez compris jusqu'à présent tout ce que nous pouvons faire. J'espère que vous avez compris le déclencheur d'options, le type, par exemple comment je veux le faire pour animer ou si je veux une superposition Si je veux lancer n'importe quelle lecture, n'importe quelle lecture audio, quelle lecture audio, parfois une fois que vous cliquez sur quoi que ce soit, il y aura un son. Si je veux ajouter cela, je peux cliquer sur la lecture audio. Si je veux dire quelque chose, je peux cliquer sur la lecture vocale. OK ? Dans ce cas, je dois télécharger ce fichier audio ici. OK ? C'est une question de type, d'accord ? Et c'est la destination. Où est-ce que je veux que ma page se termine ? OK. Il s'agit d'une autre option appelée défilement OK. Si je veux fixer la position pendant le défilement, nous pouvons simplement marquer celle-ci OK. J'ai également ces options d' assouplissement. Si je n'en veux pas, je peux simplement n'en sélectionner aucune, rien ne sera appliqué, d'accord. C'est une façon dont nous pouvons essentiellement réaliser notre prototypage ici Si je veux ajouter ceci, d'accord, ajoutez celui-ci, alors je peux l' ajouter comme n'importe quelle interaction. Si je souhaite ajouter, je peux ajouter en cliquant sur l' option plus à partir d'ici. J'espère que vous avez compris qu'il y a tellement de façons de faire une chose simple dans toutes les applications, en particulier en X D, c'est très utile et très sain. J'espère que vous avez compris comment vous pouvez commencer à faire votre prototypage Comment vous pouvez également réaliser une animation de prototype en même temps. Prends soin de tout le monde. Dans le prochain cours, nous allons découvrir l' animation dans AutoBXD OK ? Nous allons en apprendre davantage sur l'animation. Comment animer, comme n'importe quel objet, comme n'importe quel objet, supposons que cet objet se trouve ici Une fois que j'arrive sur cette page, elle sera simplement déposée quelque part, ou elle apparaîtra simplement ici, ou ce bouton en particulier apparaîtra simplement. Nous en apprendrons également sur l'animation après ce cours en particulier. Jour après jour, au fur et à mesure que nous avançons dans la leçon, la classe est excitée et j'espère que vous comprenez également ce cours. D'ici là, prenez soin de vous et espérons vous voir tous dans le prochain chapitre. 9. Animation dans Adobe XD: Bonjour les gars et bienvenue dans un autre chapitre du didacticiel Adobe X où nous en apprenons davantage sur la conception d'interface utilisateur et d'expérience utilisateur. Nous en sommes maintenant au chapitre numéro neuf et nous allons apprendre comment ajouter l'animation dans cette application particulière. Dans le dernier cours, je vous ai parlé du prototypage. Et maintenant, dans ce même scénario de guerre, je vais vous montrer comment vous pouvez créer votre animation. Comment un objet particulier peut-il apparaître seul sur votre écran ? Une fois que vous aurez accédé à cette page en particulier, je vous montrerai comment vous pouvez sélectionner un objet particulier ou comment je peux le faire à partir de la case ou même d'un bouton, et les animer dans votre style dans votre cadre OK, commençons par ce chapitre en particulier ici. Maintenant, comme vous pouvez le voir, je suis dans le même espace de travail. OK ? Dans le dernier cours, je vous ai parlé du prototypage OK, ici j'ai cette page avec mon outil à main. Ce que je vais faire, c'est juste un petit zoom arrière. OK, avec mon outil à main, je vais me déplacer à partir d'ici. Maintenant, je vais d'abord m'arrêter. Si je veux faire une animation, c'est ce que je vais faire ici, car vous pouvez voir cette icône juste ici. Je veux que cette icône apparaisse comme ça. Lorsque j'arrive sur cette page pour la première fois, je dois dupliquer cette page à partir d'ici. OK ? Il existe de nombreuses façons de dupliquer en utilisant les deux pour dupliquer, sinon je peux simplement copier celle-ci, d'accord ? Je vais le copier et coller ici avec le contrôle V. D'accord ? Ici, vous pouvez voir que je l'ai. Maintenant, permettez-moi de zoomer sur les deux pages ici, d'accord ? Maintenant, ce que je veux, c'est que cette icône soit là. Je veux que cette icône vienne ici. OK, c'est une façon de le faire. Nous devons d'abord nous assurer qu'une fois sur cette page, sélectionnons d'abord cette icône en particulier. Ici, son nom est icône en forme de flèche. OK. Encore une fois, je vais revenir sur cette page ici. OK ? Dans cette page, je vais sélectionner, OK. Le nom de celui-ci est également une icône en forme de flèche. Ces deux noms doivent être similaires pour que cela se produise ou que cela fonctionne. OK ? Il s'agit de la première page de la commande passée. Je vais en nommer deux. OK, j'ai ces deux pages ici. Je veux que mon animation ait lieu ici. OK. Tout d'abord, je vais simplement garder cette page ici. Je vais relier celui-ci à celui-ci ici. OK, voici cette option d'action. Par défaut, il reste toujours une transition. Mais je vais juste changer cette animation automatique qui existait auparavant Je peux également choisir la durée que je souhaite donner à mon animation. OK, laisse-moi prendre 1,2 seconde. Et quel type d' assouplissement je souhaite ? OK, je veux que ça se passe bien ici. OK, essayons maintenant de voir l'aperçu d'ici. OK, comme je suis sur cette page, si je clique sur toute cette icône, vous pouvez la voir bouger d'ici, d'accord ? C'est une façon de le faire, d'accord ? Si je reviens en arrière, si je clique ici, les gars, on passe simplement à cette voie. OK. J'espère que vous avez bien compris comment vous pouvez commencer avec votre animation. Mais en gros, ce que je veux, c'est ne pas avoir à cliquer ici. Supposons que je sois sur ma page. OK, je vais juste passer à cette dernière page ici. Je ne veux pas avoir ma page comme ça, je n'ai pas besoin d'appuyer sur celle-ci pour faire passer cette animation ici. OK, ce que je vais faire c'est maintenant, alors passons à ça. D'accord, pour cela, nous devons nous assurer que nous ne nous connectons pas ici avec cette icône. OK, comme l'icône avec la page. Alors si je viens ici, d'accord, je ne peux faire que ce genre d'aperçu. Si je clique dessus, il viendra ici, il apparaîtra comme ça. Mais ce que je veux, animer automatiquement, d'accord ? Dans cette cage, je dois sélectionner toute cette page. Une fois que j'aurai sélectionné la page entière, je déplacerai celle-ci ici, d'accord ? Maintenant, une fois que j'ai sélectionné cette page avec celle-ci, si j'en viens à l' option de déclenchement, vous les gars. J'ai aussi le choix du temps. OK, mais supposons que je supprime celui-ci d'ici. Je vais le supprimer ici. Permettez-moi de me connecter à cette page maintenant. Essayons de voir ici dans l'option de déclenchement, je n'ai pas l'option heure, mais pour m'animer automatiquement, je dois le faire. Je vais le supprimer. Je vais sélectionner cette première page de commande. Sélectionnez cette page avec celle-ci à partir d'ici. Maintenant, une fois que je serai ici, je pourrai choisir l'option horaire. OK, combien de secondes de délai je veux ? D'accord, comme vous pouvez le voir, je ne vais rien retarder. Et j'ai l'option pour l'animation automatique. Maintenant, j'ai la durée ici de 0,3 seconde, que je vais changer en 0,5. D'accord, je vais choisir 0,5 ici. Je vais cliquer sur Enter. Passons maintenant à cette page particulière ici, et voyons l' aperçu à partir d'ici maintenant. OK, maintenant revenons en arrière. Oui, je vais aller sur cette page. Je vais essayer de voir l'aperçu. Si je clique sur le bouton Par ici, vous pouvez voir qu'il s'anime automatiquement ici OK, si je reviens par option, je cliquerai ici et vous pourrez voir l' animation automatique à partir d'ici. J'espère que vous avez compris cette partie particulière à partir de là. Avec celui-ci, je peux réellement choisir comment je veux qu'il apparaisse, comme je le veux ? Je peux aussi le faire. Accédez à cette page, regardez l'aperçu. Cliquez sur « À ce stade ». Ici, vous pouvez voir l'option ici. OK, sur la même page, ce que je peux faire, c'est peut-être que je veux juste que celui-ci disparaisse. OK, maintenant je veux que cette icône s'estompe. Je vais venir ici, passer à l'option de conception. À partir de là, dans l'option de conception, vous pouvez voir que mon opacité ici est de 100 Ce que je vais faire, c'est modifier mon opacité. Quelque chose comme ça, comme ça, je peux vraiment travailler. OK, voyons maintenant l'aperçu d'ici. OK, allez sur cette page ici. Voir l'aperçu. OK, je vais cliquer dessus. C'est ainsi que cela apparaîtra essentiellement. OK, ici je peux changer l'opacité. Ou si je veux simplement faire pivoter celui-ci, je peux également le faire pivoter. OK ? Supposons que je veuille faire pivoter ceci, quelque chose comme ça. À partir d'ici. Je peux aussi faire la rotation. OK, je l'ai ici. Maintenant, essayons de voir un aperçu d'ici, d'accord ? Cliquez sur l'option Par, voici comment elle apparaîtra, d'accord ? Si je veux que cela soit lent, je dois gérer l'option prototype à partir d'ici. OK ? Mais je vais continuer comme ça à partir d'ici. Maintenant que j'ai ceci, voyons à nouveau l'aperçu. À partir de là, j'espère que vous avez compris comment vous pouvez créer votre animation intelligente à partir d'ici. OK, maintenant, si je veux aussi animer intelligemment ces icônes, supposons que je veuille que cette icône en particulier apparaisse ici Cette page en particulier, je vais garder celle-ci ici. Maintenant, je peux essentiellement sélectionner ici. Supposons qu'avec cette page, je revienne au prototype, ici je vais le sélectionner. D'accord, à partir de là, je peux vraiment choisir, peut-être que je vais créer un autre prototype ici. Voyons l'aperçu d'ici. OK, il suffit de cliquer sur À présent, voici comment cela va se dérouler. OK, voici comment nous pouvons procéder. Ou si je veux mettre une option de rebond ici, je peux le faire aussi Supposons que j'aie sélectionné celui-ci ici. J'ai cette image-clé ici. J'ai les interactions. Je vais venir ici, taper celui-ci. Je vais appuyer, passer à l'animation automatique ici. Vous pouvez choisir l'option de rebond ici. En même temps, je peux mettre trois interactions ici. OK ? C'est ainsi que nous pouvons essentiellement ajouter. Si je veux en ajouter un autre, je peux également le faire à partir d'ici. Pour le moment, j'en ai deux. D'accord, voici quelques-unes des actions. Si je veux ajouter une lecture automatique je vous en ai déjà parlé. OK, essayons maintenant de voir un aperçu d'ici. Cliquez sur « À ce stade ». Ici, vous pouvez voir que cela ne fait que descendre, d'accord ? Ou supposons que je veuille ces trois icônes apparaissent simplement ici sur mon écran. Dans ce cas, je vais revenir à l'option de conception. Ça, apporte-ça ici. Maintenant, je vais juste le sortir de l'écran ici, ici et ici. Essayons maintenant de voir un aperçu. C'est ainsi que cela va apparaître. Nous pouvons le faire également. J'espère que vous avez compris ce cours sur la façon de réaliser votre animation intelligente. OK, maintenant je vais vous montrer une autre façon de progresser dans l'animation. OK, pour cela, je vais sélectionner cette icône particulière ici. OK. Comme j'en suis déjà à mon option de design, je vais modifier l'opacité par cent ici Mais ici, dans celui-ci, je veux que cela disparaisse. OK, je vais diminuer l'icône ici. Maintenant, ce que je veux faire, c'est copier cette page. OK, avant cela, laissez-moi juste sortir, je vais simplement copier cette page ici. J'ai cette page ici. OK, comme vous pouvez le voir, ça va juste disparaître. Alors laissez-moi vous montrer et avoir un aperçu de la façon dont cela va disparaître. OK, donc c'est comme ça que ça s'estompe. Mais je peux essentiellement travailler avec le timing ici. D'accord, je vais peut-être augmenter le temps à 1 seconde. Essayons maintenant de voir l'aperçu. Viens ici. Ou déplacez-vous simplement avec ma main pour voir celui-ci. Cliquez dessus et voici comment cela apparaîtra. Ça a l'air assez rapide Encore une fois, je vais venir ici, appuyer dessus. Celui-ci dure 1 seconde. Je vais juste y consacrer deux ou deux secondes. Oui, celui-ci est bon. Je suppose que c'est ainsi que cela apparaîtra ici. Viens ici et sélectionne-le. Maintenant, il suffit d'en supprimer un d'ici. OK, je vais supprimer celui-ci d'ici. Maintenant, voyons voir. OK, voilà, j'ai cette seconde, sélectionnez cette page, voyez l'aperçu. Cliquez ici, vous pouvez le voir disparaître comme ça. OK, maintenant que j'ai créé une autre page ici, d' accord, maintenant je vais importer une icône ici. D'accord, à partir du fichier, je vais passer à l'option d'importation. Dans l'option d'importation, vous pouvez voir que j'ai du SVG. Voici mon icône comme vous pouvez le voir ici. OK, je vais donc choisir ici. Je vais également diminuer la taille de cette icône en particulier. Encore une fois, accédez à l' option de conception à partir d'ici. À partir d'ici. En gros, avec Control Shift et avec votre souris, vous pouvez simplement diminuer sa taille à votre guise. OK, maintenant j'ai cette marque ici. Ce qui va se passer, c'est que, comme j'ai celui-ci ici, une fois qu'il arrivera, celui-ci disparaîtra de cet écran en particulier. Celui-ci n'apparaîtra ici qu'une fois que cela sera fait. OK, laissez-moi simplement me connecter, passez à l'option de prototypage, placez celle-ci et connectez cette page à celle-ci Ici, vous pouvez voir l'intrigant. Vous avez également le temps. OK, peut-être que je vais attendre une seconde. Et je vais cliquer sur Entrer ici. Je vais maintenant essayer de voir l'aperçu d'ici. Bon, voyons maintenant l' aperçu, comme je l'ai déjà dit. OK, viens ici sur cette page. Cliquez ici, vous pourrez voir l'animation ici. OK ? Ou recommençons depuis le début, accord, sélectionnez cette page ici pour accéder à l'option par. Et à cette page de paiement, une fois que j'aurai fini d'acheter. Vous pouvez voir l'animation ici. OK, vous pouvez voir ici que ma commande a été reçue, et ici j'ai fait l'animation. J'espère que vous avez compris comment vous pouvez réellement animer votre travail à un niveau avancé ici Comme vous pouvez le constater, j'ai trois planches d'art ici. OK. Tu peux en avoir 20, tu peux en avoir 15. Si vous avez autant d'animations, vous pouvez le faire en utilisant cette option particulière. OK ? J'espère donc que vous avez compris cette animation en détail maintenant. OK, je vais vous parler des problèmes auxquels vous pourriez être confrontés lorsque vous travaillez avec Artboard ici OK, je vais venir ici, passer au plan de travail. Je souhaite sélectionner ou créer un plan de travail à partir d'ici. Supposons que je l'ai. Je ne dupliquerai celui-ci qu'avec Al. J'ai dupliqué ce plan de travail. Maintenant, j'ai deux pages ici. OK ? Supposons maintenant que je veuille créer une boîte rectangulaire ici. Laisse-moi juste le remplir d'une couleur rouge. Maintenant, ce que je veux faire, c'est utiliser mon outil de sélection, je vais également dupliquer celui-ci ici. Mais ce que je veux, c'est le mettre dehors ici. Maintenant, je veux faire du prototypage, d'accord ? Je veux faire le prototypage, d'accord ? D'ici, il viendra ici si nous le voulons comme ça. Maintenant, si nous essayons de voir l'aperçu ici, vous pouvez voir qu'il y a n'importe quoi ici. OK. C'est ainsi qu'il s'anime automatiquement, mais nous ne devons pas sélectionner ou déplacer ces éléments à l'intérieur ou à l' extérieur avant qu'ils ne soient déjà là OK, voyons maintenant l'aperçu. Voici à quoi cela ressemblera en gros, d'accord ? Mais la bonne façon de procéder, même chose, c'est déplacer celui-ci après avoir fait le prototypage Supposons que je l'ai fait ici, d'accord, je vais tout supprimer. On a recommencé depuis le début, d'accord ? Comme j'ai celui-ci ici, comme vous pouvez le constater, je l'ai maintenant après être passé à l'option prototype, après avoir déplacé celui-ci ici, et peut-être que je vais simplement le supprimer maintenant si vous voulez le voir disparaître OK, je peux le faire. OK ? Je peux également modifier l'opacité. Accédez à l'option de conception. Modifiez l'opacité ici. Nous pouvons essentiellement le faire, ou peut-être modifier l'opacité, modifier la capacité à partir d'ici Voyons maintenant l'aperçu. D'accord, voici à quoi cela ressemblera en gros. J'espère que vous avez compris ces différentes parties. Comment vous pouvez essentiellement tout animer si vous souhaitez effectuer une transition Vous pouvez donc faire la transition à partir d'ici. OK ? J'ai sélectionné celui-ci ici. Et supposons ici que je change d'abord l'opacité de ce paramètre. Laisse-moi copier celui-ci, contrôle C, viens ici, contrôle V, OK. Maintenant, je vais faire le prototypage à partir d'ici, comme vous pouvez le voir. Venez ici, accédez à l' option de conception, modifiez l'opacité. Maintenant, à partir de là, si je passe à l'option de jeu ici, vous pouvez voir l'animation. Ça a l'air bien maintenant, mais si je le mets directement à l'extérieur ou avant de faire le prototypage, il n'apparaîtra pas ici OK, c'est une façon de le faire. De là, vous pouvez voir que je peux également utiliser les options de l'outil Pin à partir d'ici. OK. Comme si je pouvais simplement créer mon propre logo ou quoi que ce soit d'autre. Je peux aussi faire tout cela d'ici. C'est une façon de le faire, d'accord ? Donc, si je viens ici, je peux aussi le faire d'ici. Revoyons l'aperçu à partir d'ici, voici à quoi cela ressemblera essentiellement. J'espère que vous avez également compris ce cours, tout ce que vous pouvez faire ici dans ce cours. Je vous ai tout dit sur l'animation, tous les problèmes que vous pouvez rencontrer pendant l'animation, et quelles sont également les méthodes avancées. OK, j'espère vous voir tous au prochain cours où nous apprendrons à partager et à commenter. Supposons que vous ayez envoyé votre travail à votre client, puis que celui-ci souhaite commenter et donner un aperçu. Ou vos commentaires qui vous font part du partage, exemple comment vous pouvez commencer à partager, comment ils peuvent ajouter des commentaires et tout le reste en détail. Rendez-vous donc tous dans le prochain tutoriel. D'ici là, prends soin de toi et au revoir. 10. Comment partager votre Wireframe et vos commentaires: Et B un. Et bienvenue à tous dans un autre didacticiel d' AutoBXT où nous en apprenons davantage sur la conception de l'interface utilisateur et de l'expérience Nous en sommes maintenant au chapitre numéro dix et nous allons apprendre comment vous pouvez partager votre structure métallique. OK, dans le dernier cours, je vous ai enseigné le prototypage, création de votre structure métallique. Je vais maintenant vous montrer comment vous pouvez le partager. Supposons que vous ayez votre client ou peut-être quelqu'un qui souhaite prévisualiser votre travail. Vous voulez juste leur donner la possibilité de vérifier comme votre mentor, vous pouvez le leur donner et leur demander de vérifier à quoi cela ressemble réellement. Je vais vous montrer dès le début comment vous pouvez commencer à partager et aussi à commenter, que vous pourrez consulter en tant qu'éditeur. OK, commençons avec ce cours maintenant. Vous pouvez déjà voir que je suis ici sur ma page, d'accord ? C'est le même espace de travail où je créais ma page ici, accord, la page de l'application mobile. Ce que je vais faire, c'est partager ça. OK ? Juste à côté du prototype, vous pouvez voir l'option de partage. Une fois que vous avez cliqué sur cette option de partage, vous pouvez voir quelques-unes des choses ici. OK, les paramètres du lien sont-ils là ? J'ai les liens. Si je veux créer un nouveau lien, je peux le faire, il vous suffit de le gérer. C'est ça. D'accord, voici une option, voici une autre option, qui est le réglage de l'affichage. Cela signifie essentiellement que la personne avec laquelle vous partagez votre travail sera capable de concevoir la critique ou sera-t-elle également capable de développer, comme si elle était autorisée à modifier ? sera capable de concevoir la critique ou sera-t-elle également capable de développer, comme si elle était autorisée à modifier Par exemple, ils présenteront votre design testeront les utilisateurs ou personnaliseront l'expérience du spectateur. Vous pouvez cliquer ici si vous souhaitez personnaliser ce qu'ils seront tous capables de faire. Seront-ils autorisés à ajouter des commentaires ou souhaitez-vous qu'ils l'ouvrent en plein écran et incluent les spécifications techniques ? Je peux le faire d'ici. Ce que je vais faire, c'est cliquer sur celui-ci, Design Review. Je souhaite obtenir une révision de mon design. Ici, vous pouvez voir un petit aperçu de ce que cette option fera, juste en dessous. D'accord, celui-ci recevra des commentaires sur votre conception et votre prototype. Ici, vous pouvez partager celui-ci avec le développeur. Vous avez maintenant partagé votre design avec le développeur. Ils vont maintenant essayer de créer le site Web ou l'application. OK, c'est pour la présentation et pour tester votre prototype. Je vais donc donner une revue de conception. Et maintenant, la dernière chose ici est l'accès au lien. OK, donc en gros, cela signifie que qui pourra tous accéder à ce lien et quel sera leur travail ? OK ? Tout d'abord, toute personne ayant le lien pourra accéder à mon design particulier ici. OK, donc celui-ci, j'espère que vous l'avez compris, et maintenant le second est réservé aux personnes invitées. OK, donc si je clique uniquement sur les personnes invitées, d'accord, je peux simplement inviter ces personnes ici, et seules ces personnes pourront obtenir mon design d'ici. Je peux également sélectionner n'importe quel mot de passe. Supposons que je sélectionne un mot de passe, puis que je partage le mot de passe ainsi que le lien sur le clic. Une fois qu'ils ont défini le mot de passe ou qu'ils l' ont saisi, ils peuvent avoir un aperçu de mon travail. OK, je vais juste sélectionner le lien ici, accéder à n'importe qui avec le lien. Maintenant, je vais créer un lien, et vous pouvez voir qu'ils créent un lien public ici. OK, maintenant ça prend peu de temps. Donc, vous pouvez voir que j'ai mon lien ici. OK. Vous pouvez donc voir ici quelques options. Si je veux copier le lien, je peux cliquer ici. Et ici, j'ai une autre option comme copier Embedded Cut. Si je veux copier le code intégré, je peux le faire d'ici. L'autre option est le partage en mains propres. OK. Si vous souhaitez partager ce projet sur le site web, vous pouvez simplement partager votre projet entre les mains. Il s'agit d'un prototype public où vous pouvez obtenir différents types de châssis à partir d'ici. Si vous souhaitez mettre à jour votre lien, vous pouvez le mettre à jour ici. OK, alors peut-être que je viendrai ici sur Chrome. Je vais juste coller celui-ci et cliquer sur Enter. OK, ça m'emmène dans le champ de la guerre. Maintenant, je suis là, et il ne fait que charger le travail. OK, vous pouvez donc voir que je l'ai sur une page à partir d'ici. En gros, je peux voir comment cela fonctionne réellement. OK, ici je clique sur la biographie. moment, je vais sélectionner ceci et je peux regarder l'animation de ce qu'ils ont fait. OK, et je vais cliquer sur. Encore une fois le Robert. OK, je n'ai pas choisi ça. Retournez ici. Oui, je suis retour sur cette page. Cliquez ici. À partir de là, vous pouvez voir l'aperçu complet ici. OK, c'est ainsi que votre client ou votre mentor peuvent voir votre travail et qu'ils peuvent également commenter ici. C'est le moyen de base pour eux de commenter. OK, s'ils disent changer la couleur de fond, ils me disent de changer la couleur d'arrière-plan. Et je peux simplement le soumettre d'ici. Comme vous pouvez le voir d'ici, je peux essentiellement ajouter un commentaire. Je peux me connecter avec un AdoBid de deux manières. C'est plus professionnel. Ils peuvent donc se connecter avec un Adobe ID et ajouter un commentaire ici. Mais si je veux ajouter un commentaire en tant qu'invité, je peux écrire à Darren, je peux continuer à partir d'ici OK. Ici, vous pouvez voir ce que Darren a dit à ce sujet Veuillez modifier la couleur de fond ici. Ici, vous pouvez voir sur mon Creative Cloud menu contextuel qui montre nouvelles activités de la classe Adobe Eggs D, que j'ai nommée ma classe. Ici, vous pouvez voir Darren commenter la classe Adobe Eggs. D'accord, à partir de là, je peux essentiellement voir, si je veux épingler ce commentaire, je peux aussi épingler ce commentaire. OK, maintenant que je suis là, je peux ajouter un commentaire ici. Vous pouvez masquer les notations ici. Vous pouvez faire des commentaires en conséquence. OK, si vous voulez voir l'option de résolution, si vous voulez effacer quels sont les commentaires pour aujourd'hui vous pouvez tous voir et qui sont tous vos réviseurs OK, c'est une façon pour votre client de revoir votre travail. Ils peuvent vous dire si vous devez changer quelque chose ou si le travail est correct, ils peuvent également vous apprécier. OK ? C'est du côté du client, d'accord ? C'est ainsi que votre client verra votre travail et pourra commenter en conséquence. Mais si vous venez ici, comment allez-vous résoudre ce problème ? OK, venez ici dans l'option de conception, passez au prototype, et à partir de là , vous pourrez accéder aux commentaires. OK, maintenant peut-être revenir ici à partir d'ici, je vais revenir ici, d'accord, passer aux options de design car ils me demandent de changer la couleur d'arrière-plan. Je vais peut-être sélectionner cette page. À partir de là, passez à l'option de remplissage. Je peux choisir la couleur en conséquence. OK. Comme vous pouvez le constater, je peux choisir la couleur en conséquence. Une fois que mon truc sera le résultat, comme si j'avais tout fait, ce que je peux faire, c'est passer à nouveau à l'option d'achat d'actions. Une fois que vous avez terminé de mettre à jour un lien, partagez-le de la même manière. OK, vous pouvez consulter ces commentaires depuis votre boîte Creative Cloud. D'accord, à partir de là, vous recevrez une notification. D'accord, à partir de là, vous pouvez voir quel est le commentaire en X D, changer la couleur de fond. À partir de là, je peux simplement ignorer le. Sinon, je peux accéder à nouveau à ce fichier en particulier. OK. Je voudrais peut-être aller sur cette page ici. J'ai créé beaucoup de choses. Nombreux. Je peux venir ici sur cette page et répondre à Darren que, oui, j'en ai fini avec ta parole en me connectant simplement OK. Comme je me suis connecté, je n'ai pas la possibilité de le consulter. OK. J'espère que vous avez compris comment vous pouvez essentiellement partager, comment mettre à jour votre lien, comment vous pouvez obtenir des commentaires et aussi comment vous pouvez les modifier une fois que vous avez reçu ces commentaires. Bien, dans le prochain cours, nous apprendrons comment créer un moodboard et ce qu'est un moodboard D'accord, nous allons donc apprendre à créer notre propre moodboard. D'ici là, prenez soin de tout le monde et j'espère vous voir tous au prochain cours. 11. Coloriage dans Adobe XD: Bonjour à tous, et bienvenue dans un nouveau chapitre du didacticiel Adobe X. Nous découvrons ici la conception de l'interface utilisateur et de l'expérience utilisateur. Et nous en sommes au chapitre 12. Donc, dans notre chapitre numéro 12, nous allons tout apprendre sur le coloriage dans cette application. OK ? Je vais donc vous expliquer comment vous pouvez créer votre propre palette de couleurs, comment nous pouvons jouer avec vos couleurs, comment nous pouvons créer votre propre dégradé pour n'importe quel bouton ou n'importe quelle couleur de fond. Et je vais aussi vous montrer d'où vous pouvez tous trouver votre inspiration en matière de couleurs. D'accord, nous allons donc découvrir tout cela dans ce didacticiel en particulier. Commençons donc par ce cours. Alors maintenant, comme vous pouvez le voir, je suis ici dans mon espace de travail. Maintenant, tout d'abord, je vais vous montrer comment créer votre propre palette de couleurs. Et pourquoi utilisez-vous essentiellement une palette de couleurs ? D'accord, supposons maintenant que je veuille créer ma propre page Web et que j'ai sélectionné un thème de couleur. OK, supposons qu'ici dans Moodboard, je vous ai montré quelques couleurs Maintenant, je vais prendre les ici ou les boîtes de couleurs, d'accord ? Supposons que je veuille faire quelque chose comme ça. OK ? Permettez-moi donc de zoomer là-dessus. Et supposons que je veuille utiliser cette coloration dans ma page Web. Dans ce cas, je vais d'abord créer une boîte ici. OK, j'ai créé cette boîte. Maintenant, en utilisant l'outil Eyedropper, je vais sélectionner une couleur particulière Supposons que je veuille cette couleur, et oui , j'ai cette couleur, ce sera ma couleur principale. OK. Maintenant, j'ai cette couleur primaire. Avec cet outil, je vais simplement dupliquer cette couche. OK, j'ai dupliqué cette couche à partir d'ici. Ce que je vais faire, c'est passer à l'option de remplissage et je vais modifier l' intensité de la couleur. Comme vous pouvez le constater, j'ai de nouveau modifié l'intensité de la couleur. Maintenant, sélectionnez-le à nouveau, copiez-le ici. Maintenant, je vais également modifier l'intensité de cette boîte en particulier. OK, venez ici pour l'option de remplissage. Peut-être cette couleur ou quelque chose dans le noir, d'accord ? C'est ainsi que nous pouvons créer notre propre palette de couleurs. OK, encore une fois, prenez celui-ci et nous allons répéter le processus pour savoir combien de jeux de couleurs nous voulons. Cela dépend essentiellement de nous. OK, collez-le tous ici. Passons maintenant à celui-ci et modifiez le remplissage à partir d'ici. Je veux peut-être un peu de noir. OK, maintenant j'ai cette palette de couleurs. Supposons qu'à partir de là, je souhaite également prendre le thème des couleurs de cette image. OK, dans ce cas, peut-être que je viendrai un peu de ce côté. OK, je vais créer une palette de couleurs ici. Je vais simplement répéter le même processus, créer une boîte ici. OK, maintenant, utilisez votre compte-gouttes pour garder ce compte-gouttes ici. À partir de là, vous pouvez sélectionner une couleur. OK, j'ai peut-être sélectionné cette couleur. Maintenant, ce que je peux faire, c'est que je peux le copier, ou je peux simplement en faire un double. OK ? Je vais faire une copie de celui-ci. Maintenant, je peux modifier l'intensité de la couleur à partir d'ici. À partir d'ici. Comme vous pouvez le constater, je suis en train de modifier à nouveau la densité. Répétez le même processus. Supposons que je veuille une couleur particulière ici à partir de ce compte-gouttes, peut-être que je peux trouver quelque chose ici OK, c'est la plus sombre. Encore une fois avec Al. Dupliquez cette couche et modifiez maintenant l' intensité à partir d'ici. OK ? Peut-être quelque chose de sombre, changez le positionnement à partir d'ici. OK, j'ai aussi cette palette de couleurs. OK. Maintenant, nous pouvons essentiellement regrouper celui-ci et nous déplacer. Supposons que je veuille garder celui-ci ici. OK, c'est une autre palette de couleurs. Supposons que ce soit ma palette principale et que ce soit ma deuxième palette de recoloration Autant de couleurs que vous souhaitez utiliser dans votre page Web, vous pouvez les additionner ou les empiler. J'espère que vous avez compris comment créer votre propre palette de couleurs. Maintenant, je vais vous expliquer comment créer votre dégradé de couleurs. Supposons maintenant que je vienne ici et que je crée une boîte ici. Dans cette case en particulier, je vais passer à l'option de remplissage ici. Sous l' option de remplissage, vous pouvez voir en haut que j'ai une option. OK. Je vais ouvrir le menu. OK, vous pouvez voir ici si je veux prendre une couleur unie. Je peux le faire d'ici. Comme vous le savez d'ici, je peux modifier l'intensité autant que je le souhaite. C'est le compte-gouttes. De là, vous pouvez réellement enregistrer la couleur. OK ? Venons-en d'abord au gradient linéaire. OK ? Voici à quoi ressemble un dégradé linéaire. OK ? Je vais sélectionner celui-ci. OK ? De ce côté, je vais celui-ci d'ici, je peux changer de couleur. OK ? Supposons que je veuille reprendre cette couleur. Je vais choisir celui-ci. Et de ce côté, je veux une couleur différente. Vous pouvez voir que c' est la combinaison des deux couleurs ici, le vert et le rouge. Si je souhaite ajouter une couleur différente n'importe où, je peux également ajouter une couleur différente. D'accord, je peux modifier le positionnement et ajouter autant de couleurs que je veux. Cela dépend de celui qui sera le plus beau. Et je peux également modifier le positionnement à partir d'ici. OK, laissez-moi sélectionner différentes couleurs. OK ? Je vais sélectionner une autre couleur ici. OK ? C'est ainsi que vous pouvez créer votre propre dégradé. Tu peux en mettre autant que tu veux. Vous pouvez également modifier l'opacité comme je vous l'ai déjà dit. Laisse-moi prendre ça ici. J'en ai fini avec le dégradé et c'est ainsi que vous pouvez essentiellement travailler ici. Vous pouvez réellement modifier celui-ci. Revenez en particulier à l'option field. Et à partir de là, si vous voulez changer cela à partir d'ici, vous pouvez sélectionner le flux de couleur, d'accord ? En gros, si je veux déplacer la couleur comme ça et quelle partie contiendra ce qu'elle me montre ici, j'ai créé un dégradé. C'était l'exemple du gradient linéaire. Mais voyons maintenant comment vous pouvez essentiellement en créer un radial. OK ? Je vais sélectionner une autre case ici. Passons maintenant à l'option de remplissage. Encore une fois, sous l'option de remplissage, j'ai ce dégradé radial, d'accord ? Il se présentera sous une forme radiale. C'est également la même chose. Je vais peut-être choisir une couleur rouge. Je vais modifier un peu l' opacité. Maintenant, je vais sélectionner celui-ci de couleur verte. OK. D'ici, vous pouvez voir que c'est l'extérieur rouge. J'ai le green ici. OK ? Je peux également modifier le positionnement si je le souhaite ou je peux simplement y ajouter plus de couleurs. OK ? Comme vous pouvez le constater, je peux modifier l' opacité de celui-ci C'est en radial. la même manière, je sélectionne quantité de couleur et toutes les couleurs dont j'ai besoin. Je vais venir ici. OK, je vais en sélectionner un autre ici. OK, je vais mettre une autre couleur ici. Je vais sélectionner celui-ci. J'espère que vous avez également compris le truc radial. Voici comment vous pouvez, si vous créez un logo ou un design, vous pouvez le faire. Je peux également modifier celui-ci. Je peux me débrouiller. Je peux également le faire pivoter si je le souhaite. OK, supposons que je veuille faire pivoter celui-ci. Je peux le faire pivoter selon mes envies avec mon outil de sélection. Je vais déplacer celui-ci ici. Je vous ai également montré comment créer votre propre dégradé ici. A présent, je vais voir quel est le dernier dégradé que vous allez créer. Laisse-moi prendre une ellipse ou je vais prendre celle-ci. OK ? Une forme de polygone également. Je vais créer un polygone ici, le déplacer ici et conserver celui-ci Maintenant, sélectionnez cet outil dans l'option de champ. Passons au dégradé angulaire à partir d'ici. la même manière, vous pouvez choisir la couleur que vous voulez. Si je souhaite ajouter d' autres couleurs, je peux les ajouter d'ici. D'accord, je vais ajouter d'autres couleurs. Je vais en ajouter quelques autres. C'est ainsi que nous pouvons essentiellement créer ce dégradé. Oui, j'espère que vous avez compris ce cours la façon dont vous pouvez créer votre propre palette de couleurs. Comment créer votre propre dégradé de couleurs. OK. En particulier en matière de coloration, il n'y a rien de tel que vous ayez besoin de mettre celui-ci, vous devez mettre cette couleur particulière pour ce truc. Il n'y a rien en tant que tel. Mais je vous recommanderai toujours regarder le travail des autres, comme la façon dont ils utilisent leurs couleurs sur leurs pages Web, afin que vous puissiez vous inspirer. C'est pourquoi le moodboard est très important. Bon, passons maintenant à mon Chrome et je vais vous montrer d'où vous pouvez prendre certaines idées de couleurs. OK, si vous utilisez votre dégradé à partir d'ici, vous pouvez voir que ce sont des dégradés, accord, qui sont principalement utilisés ici Vous pouvez vérifier quels sont les dégradés que les gens utilisent essentiellement et vous verrez ici. Maintenant, la question que vous vous posez peut-être est la suivante : d'accord, je vois que toutes ces couleurs sont bonnes et suffisantes. Mais le problème, c'est de savoir comment je peux prendre ces couleurs si je veux cette couleur en particulier ici, comment je vais l'intégrer à mon espace de travail. OK, ici vous pouvez voir qu'un code est écrit. C'est ce que l'on appelle le code couleur. Et je vais copier ce code couleur particulier à partir d'ici, et je vais accéder à mon défilé X. Supposons que je veuille obtenir la même couleur, je peux insérer une case ici et accéder à mon option de champ, ou à l'option de coloration ici. Vous pouvez voir que j' ai un code dont j'ai parlé que je vous en parlerai plus tard. Dans ce cas, vous pouvez simplement venir coller ce code couleur ici. OK, donc je vais d'abord le supprimer. Maintenant, collez-le. J'ai quelques difficultés à le coller ici. OK ? Je vais prendre cette copie ici dans l'œuf T, nous pouvons simplement coller cette couleur en particulier. OK ? Ou je dois juste prendre celui-ci. OK, pas la technologie de hachage. Je peux cliquer ici. Supprimez-le. Maintenant, je peux le coller. Ou je peux aussi le faire manuellement. Et si je voyais quoi, 99 ? Je vais donc passer au X, D, D neuf. OK. Et je peux cliquer sur Enter ici. Vous pouvez voir la couleur particulière que j'ai ici, sur mon banc, E. Je reviendrai ici. OK. Je vais cliquer sur Entrer ici. Tu as une couleur particulière. Vous ne pouvez pas simplement choisir n'importe quoi. OK ? Ce sont des codes. En gros, si je veux créer une palette de celui-ci, je peux faire de la même manière qu'avant. OK, viens ici, change l'intensité. Peut-être que deux d'entre eux copient à nouveau celui-ci, changent la densité de ceci à ceci. Viens ici, prends-en un. J'ai ma palette de couleurs ici. D'accord, je peux l'utiliser comme autre palette de couleurs. Nous devons toujours conserver les couleurs que vous utilisez toujours. J'espère que vous avez compris l'utilisation de la coloration, comment vous pouvez essentiellement colorier ici. Si vous voulez regrouper cela, vous pouvez venir ici, cliquer ici, et vous pouvez cliquer sur Grouper. Non Si je déplace celui-ci, il se déplacera en conséquence. OK ? Il s'agit de la palette de couleurs. Je peux aussi le nommer. OK, dans les cases, je peux aller nommer ce fichier. OK ? Maintenant, supposons que j'ai cette couleur particulière ici. OK ? Passez à l'option de remplissage. À partir de cette option de remplissage, je peux essentiellement choisir celle-ci. OK ? C'est ce que j'ai trouvé, je peux vraiment enregistrer cette couleur. OK ? Si je clique sur celui-ci et que je viens ici, il sera sauvegardé. Cette palette de couleurs particulière sera enregistrée. Il s'agit de colorier ici dans ce cours. Dans le prochain cours, je vous expliquerai comment vous pouvez jouer avec les images et quelles sont les différences entre l'utilisation d'images créer votre propre page Web ou pour développer votre propre design mobile. OK, alors on se voit tous au prochain cours. D'ici là, prenez soin de vous et au revoir à tous. 12. Images dans Adobe Xd: Bonjour à tous et bienvenue dans un autre chapitre du didacticiel OBX OK, alors que nous apprenons le design UX, nous sommes à la fin de ce didacticiel. Et après cela, je vais juste vous montrer un projet sur la façon dont vous pouvez créer votre propre design. OK, je vous ai déjà parlé de l'application mobile, comment obtenir un cadre à cinq fils bas. Vous pouvez maintenant le remplir comme vous le souhaitez. Je recommande de nombreuses œuvres comme je l'ai fait. Mais je vais aussi vous montrer un projet et nous vous proposerons également des projets de classe. Bien, nous allons maintenant apprendre comment vous pouvez utiliser les images. OK ? Il s'agit de notre dernier chapitre , le chapitre numéro 13. OK ? Des images. Nous allons apprendre comment vous pouvez effectuer le masquage, comment vous pouvez utiliser votre stylet lorsque vous utilisez des images Reprenons ce cours ici, dans le même espace de travail. Maintenant, comme vous pouvez le voir, je suis ici dans cet espace de travail. Alors maintenant, je vais juste essayer de télécharger quelques images d'ici. Je vais passer à l'option d'importation. Après l'importation, je vais accéder au fichier de ressources, accord, ou je vais passer à quelques-unes de mes captures d'écran que j'ai ici. Je vais venir ici et voici les quelques images que j'ai, d'accord ? La chose la plus élémentaire est que vous pouvez simplement glisser-déposer. Sinon, vous pouvez simplement importer. Mais le truc à propos de l'importation, c'est que vous pouvez voir qu'il est disponible dans une taille totale ici, d'accord ? La taille est assez grande ici, d'accord ? Comme vous pouvez le constater. Si je fais un zoom arrière pour que vous puissiez voir, c'est la taille de l'image. Mais ce que je peux faire, c'est simplement diminuer la taille de l'image à partir d'ici. Supposons qu'il s'agisse de la page Web. Je peux diminuer la taille en conséquence, et je peux mettre celle-ci ici. OK ? Avant cela je vais diminuer la taille. À partir d'ici. Je peux changer de clavier et il sera redimensionné en conséquence OK, supposons que si je garde celui-ci en haut, et maintenant je sélectionne ces deux couches. Maintenant, ce que je peux faire, c'est si je sélectionne cette couche ici, et je peux envoyer celle-ci à l'arrière. Maintenant, je peux en réduire la taille ici. J'ai ceci ici. J'ai aussi mon image. Eh bien, je ne peux pas le voir maintenant. C'est une façon de le faire en gros. OK ? Vous pouvez simplement prendre n'importe laquelle des images comme vous pouvez le voir. Modifiez la largeur ou la hauteur à partir d'ici. Vous pouvez modifier le positionnement de l'image. OK ? C'est une façon de le masquer Supposons que je veuille que cette image soit là en premier. Ce que je dois faire, c'est sélectionner ceci. Viens ici maintenant pour masquer cela à nouveau, peut-être que je vais prendre une autre image depuis le haut, d'accord. Ou passez à l'option d'importation de fichiers. Je peux aussi cliquer sur Shift Control et je viens ici, peut-être que je vais faire cette image. OK, à partir de là, j'ai sélectionné cette image. Je vais l'importer, mais la taille est trop grande. Ce que je peux faire, c'est diminuer à nouveau la taille en gardant cette image ici. Maintenant, je vais sélectionner ces deux couches. OK, ma case en bas est également sélectionnée. Maintenant, ce que je peux faire, c'est que essentiellement regrouper celui-ci je peux essentiellement regrouper celui-ci ou simplement dissocier ces éléments également OK, supposons que si je suis groupé maintenant, j'ai cette couche séparée ici. Vous pouvez voir que ça ne va pas à l'extérieur, d'accord. C'est une façon de le faire. Ici, vous pouvez voir, d'accord. Maintenant, je peux aussi diminuer la taille et essayer de m'intégrer ici. Une façon de base de procéder est ici. J'ai cette option pour sélectionner ces deux couches. Maintenant, vous pouvez venir ici. Et vous pouvez sélectionner et essayer d'en faire un composant. OK, c'est une solution, ou je peux juste masquer celle-ci avec une forme. Si j'augmente simplement celui-ci, mon image augmente également. Maintenant, c'est à l'intérieur d'une forme, et de la même manière que vous pouvez apporter n'importe quelle image ici. Supposons que je veuille un changement de contrôle I. OK, j'ai de nouveau cette page ici. Je vais venir ici et je veux mettre une image. Je peux sélectionner Importer. Et là, vous pouvez voir que je vais simplement cliquer sur Shift pour diminuer la taille. Conservez cette image ici. Déplacez, diminuez la taille. Gardez celui-ci quelque part ici. Nous pouvons maintenant sélectionner ces deux couches et utiliser ce masque avec une forme. À partir d'ici. En gros, nous pouvons réellement conserver l'image que nous voulons. Si nous voulons jusqu'à ce montant, je peux en mettre autant et vous pouvez faire le masquage à partir d'ici Il s'agit d'une méthode de base pour masquer et utiliser les images en conséquence OK ? Voici quelques options. Et à partir de là, vous pouvez également modifier l'opacité, d'accord ? Si vous souhaitez le modifier ici, ici, vous avez cette option. OK ? En gros, vous pouvez également modifier les bordures. OK ? Supposons que je veuille prendre une bordure jaune, je veux prendre ces trois. OK ? Je peux le faire d'ici. J'espère que vous avez compris comment utiliser les images. Il existe différentes manières d'utiliser les images. Supposons que je vienne ici et que je prenne une autre photo. Supposons que cette image vienne d'ici, contrôle C. Je vais coller cette image ici, ou je vais prendre cette image d'ici. OK, sur cette image en particulier, je veux d'abord zoomer avec mon stylo. Maintenant, je veux simplement garder cette forme ici à partir d'ici. Je veux m'occuper de la mise en forme à partir d'ici. OK ? Je veux juste ce rôle. Je ne veux pas connaître le contexte. Au lieu de cela, je veux mettre un fond vert ici. OK. En gros, je peux faire tout cela ici. J'ai ça, j'en ai fait jusqu'à ce point. OK. Maintenant, ce que je peux faire , c'est essentiellement sélectionner ce cadre particulier. Je peux tracer les lignes, d'accord ? Je peux décrire ce trait particulier ici. Comme vous pouvez le constater, je peux essentiellement sélectionner ici. Je peux vraiment changer la bordure. Je peux renforcer la frontière. Six, oui, vous pouvez voir ici. Et je peux aussi prendre une photo en particulier. OK, je vais venir ici, cliquer ici, et vous pouvez également sélectionner Marquer pour exporter. Vous pouvez simplement sélectionner une partie particulière de l'image si je passe à une autre image. Permettez-moi donc de supprimer celui-ci. Je vais vous montrer une image simple. OK, laisse-moi monter ici ou ici. Je vais simplement copier cette image et la coller ici. OK, j'ai une image ici. Je vais juste augmenter la taille avec mon stylo pour supposer que je veux juste, euh, autant. OK ? Je voudrais m'attarder uniquement sur cette image en particulier. OK ? Voici les grandes lignes. OK ? Alors maintenant, ce que je veux faire, c'est prendre mes marques, d'accord ? Je veux juste obtenir uniquement cette option de marque à partir d'ici. Dans ce cas, ce que je peux essentiellement faire, c'est que je peux exporter celui-ci. OK, cette option particulière ici, c'est ainsi que nous pouvons essentiellement la prendre et la marquer supprimer et mettre n'importe quel autre arrière-plan ici. J'espère que vous avez compris les images. Maintenant, je vais vous montrer comment vous pouvez essentiellement prendre une image et comment vous pouvez l'exporter. Supposons que je l'ai pris et que je l'ai marqué comme exportation. Venez ici dans l' option fichier, exportez-le. Et si vous souhaitez sélectionner tous les plans de travail, vous pouvez sélectionner tous les plans de travail Et vous pouvez voir la taille de l'exportation. Je vais dimensionner ce plan de travail sur une page Web. Et là où je veux l'enregistrer, je vais peut-être simplement l'enregistrer dans mes téléchargements ici, je peux simplement exporter les actifs à partir d'ici. Maintenant, si je vais sur cette page, d'accord, alors laissez-moi venir ici, passer aux téléchargements. Ici, vous pouvez voir que mon plan est exporté sur mon bureau. C'est ainsi que nous pouvons réellement sélectionner le plan de travail en question. Ici, vous pouvez voir que toutes ces pages, image par image, sont en cours de téléchargement. OK ? C'est ainsi que vous pouvez essentiellement télécharger pour avoir un aperçu de votre travail. OK, voici comment vous pouvez le faire, j'espère que vous avez compris tout ce tutoriel, comment vous pouvez travailler sur cette application particulière et créer votre propre design. Dans le prochain cours, je vais vous montrer , en créant un projet sur une page Web, comment vous pouvez concevoir votre propre page Web, comment vous pouvez faire le coloriage, faire le prototypage en même temps Rendez-vous tous au prochain cours. D'ici là, prenez soin de vous et au revoir à tous. 13. Projet de classe 1: Bonjour à tous, et je vous souhaite à nouveau la bienvenue dans le projet de classe Atop X D. Voici notre projet de classe numéro un. Nous allons maintenant concevoir nos propres plans de travail pour applications mobiles. Et nous allons créer un prototype en conséquence. Donc, en gros , vous devez créer vos propres plans de travail de conception. OK ? Peut-être en créer quatre à cinq et ensuite les prototyper en conséquence. Utilisez la méthode Ease in Ease Out, différents types de transitions et différents types d'effets. OK, voyons ce que vous devez faire dans ce cours. Comme vous pouvez le constater, le projet de classe porte sur la conception des travail de votre application mobile et sur le prototypage OK, vous pouvez voir la description, ce que j'ai écrit. Il s'agit d'une application mobile dans Adobe XD qui consiste à créer des plans de travail, à concevoir des interfaces utilisateur et à prototyper des interactions Elle vous propose une gamme d'outils pour vous aider dans ce processus et crée une application mobile conviviale et visuellement attrayante OK, ici, vous pouvez voir quelles sont les différentes étapes que vous allez suivre. abord, vous devez collecter toutes les icônes et palettes de couleurs nécessaires ainsi que les différents types de tailles de police pour votre plan de travail. Ensuite, vous devez créer votre propre design dans tous les plans de travail, d'accord. Vous pouvez créer simultanément quatre plans de travail, accéder à l'option de prototypage et effectuer le prototypage et effectuer le prototypage Je vous ai montré où se déroule le prototypage. Si vous avez un problème, vous pouvez toujours consulter le didacticiel au minimum, utiliser quatre plans de travail, d'accord, pour créer le lien Créez au moins quatre plans de travail et utilisez également des animations dans les plans de travail, qui incluent l'animation intelligente et l'animation de base La dernière chose à faire sera de copier le lien de votre fichier en particulier et de le télécharger dans notre panneau de projet. Après ce cours, vous aurez une conception d'application entièrement fonctionnelle que vous pourrez vérifier à partir de l'option d'aperçu. Et il s'agira d'un design interactif bien défini et testé par les utilisateurs qui servira de base au processus de développement. D'accord, voyons comment cela se fait. Comme vous pouvez le constater, je suis dans mon espace de travail, et maintenant, à partir de cette option de prototype, je reviendrai ici par la suite. Vous pouvez voir qu'une fois que je clique sur un élément en particulier ici, ce type d'icône apparaît, je l'ai déjà montré dans le didacticiel de cette page. Je ne vais pas sélectionner la page entière, je vais sélectionner ce bouton en particulier. Si je clique sur ce bouton en particulier, je serai redirigé vers cette page. Ici, je peux modifier la transition. OK ? Je vais donner une animation automatique ici. Je vais modifier le calendrier. Vous pouvez le faire comme bon vous semble. OK ? Vous prenez différentes mesures. Si vous voulez choisir un fichier audio, je vais le faire en appuyant sur Tap. Après cela, cette page en particulier, je vais peut-être sélectionner celle-ci. Et celui-ci, je le lierai à la première page. Je vais faire de même. Celui-ci. Vous devriez les relier entre eux. Je vous ai parlé différents raccourcis que vous pouvez également utiliser ici. OK ? C'est donc une façon de procéder. Maintenant, je vais lier cette page particulière, savoir plus sur l'option ici. Je vais relier celui-ci à cette page ici. OK. Comme vous pouvez le voir, j'ai fait celui-ci. Maintenant, comme il s'agit d'une animation intelligente déjà présentée dans mon tutoriel, je vous ai montré comment faire l'animation intelligente. OK, venez ici ou sélectionnez le fichier entier ici. Après cela, passez à autre chose. Ici, sélectionnez l'option heure, et je ne retarderai rien. D'accord, après cela, je vais également le sélectionner, comme toute la page à partir d'ici, pas une icône en particulier. Et je vais laisser tomber celui-ci, peut-être que je vais prendre deux ou 1,5 secondes ici. OK, 1,5 seconde. Je vais cliquer sur Enter ici, je vais donner une animation automatique. En gros, voici à quoi cela ressemblera et vous pouvez le vérifier depuis le panneau. OK, alors laissez-moi d'abord aller sur cette page à partir d'ici. OK, comme vous pouvez le voir, vous pouvez voir les liens entre cela. Si vous voulez changer quoi que ce soit à partir d'ici, vous pouvez le faire. Bien, passons à cette page. Cliquez sur cette option d'aperçu. Permettez-moi de cliquer sur cette option maintenant ici. Il va sur cette page ici. Encore une fois, j'ai quelques difficultés à accéder à cette page trop tard. Passons maintenant au prototypage à partir d'ici. Maintenant, vous pouvez voir que je suis venu ici dans cette option. Si je clique sur cette option, je vais simplement rediriger ici. OK, voyons voir maintenant. Comme vous pouvez également le voir, l' animation ici. J'espère que vous avez compris comment vous pouvez essentiellement réaliser le prototypage Mais ce design, tel que je l' ai fait moi-même, je vous demande de le faire vous-même. Vous pouvez utiliser ces modèles particuliers si vous avez le moindre problème. Qu'en est-il de l'animation intelligente je vous ai tout montré en détail dans le cours Créez une page comme ça. Après cela, la dernière chose que vous ferez , c'est que vous pouvez venir ici, cliquer sur cette option de partage. OK, tout cela est déjà sélectionné. OK, vous pouvez mettre à jour le lien d'ici. D'accord, vous n' avez pas besoin de le mettre à jour, allez créer un lien pour vous et vous pouvez simplement copier ce lien et partager ce lien dans notre panneau de projet. D'accord, ici, vous pouvez simplement le donner en tant que critique et vous pouvez mettre à n'importe qui avec le lien ou uniquement aux personnes invitées. C'est ainsi que vous pouvez partager votre travail avec moi, que je peux revoir votre travail. OK, merci à tous d'avoir participé ce didacticiel de projet de classe et j'espère que vous soumettrez votre projet dès que possible. Je suis vraiment intéressé de voir votre travail et votre conception de la façon dont vous concevez votre page Web. OK, alors rendez-vous dans un prochain tutoriel. 14. Projet de classe 2: Bonjour tout le monde Et maintenant c'est le moment de passer à notre projet de classe. Et maintenant, nous allons faire notre deuxième projet de classe ici. Vous devez créer votre propre moodboard et créer vos propres palettes de couleurs OK, donc pour cela, vous devez d'abord importer des images, puis créer vos palettes de couleurs. Avez-vous des questions à ce sujet, comment faire ? J'en ai parlé dans mon tutoriel. Vous pouvez à nouveau le recommander vous-même. D'accord, voyons donc quelles sont toutes les étapes à suivre pour cela. Ici en haut, vous pouvez voir le nom de la classe. Le projet consiste à créer un moodboard et à créer vos propres palettes de couleurs D'accord, vous pouvez voir la description ici. Quelle est la description de la création d'un moodboard et pourquoi ne pas créer un moodboard et une OK, vous pouvez donc voir où c'est. Disposer d'outils intégrés qui facilitent la création, gestion et la mise en œuvre efficaces de ces éléments de conception. D'accord, la première étape que vous allez suivre est de vous inspirer des différents sites Web que je vous ai montrés pour vos couleurs . Je vous ai montré différents sites web comme les Hads Awards, quelque chose comme ça À partir de là, vous pouvez vous inspirer en matière de couleurs. Ensuite, vous pouvez importer ces images dans la page. Plus tard, vous les empilez en conséquence et vous créez des palettes de couleurs d'au moins trois couleurs. Et ajustez tous ces éléments dans un seul plan de travail, exportez le plan de travail sélectionné dans votre système, puis déposez votre plan de travail dans un panneau Ensuite, vous obtiendrez un ensemble d' images et quelques palettes de couleurs dans votre plan de travail, ce qui sera très attrayant visuellement À partir de là, vous pouvez également créer des palettes de couleurs personnalisées, créant ainsi votre moodboard Il améliore le processus de conception global, ce qui permet d'obtenir des résultats de conception plus cohérents, visuellement attrayants et efficaces pour votre projet Il vous aide à rester organisé, inspiré et à vous aligner sur les objectifs de votre projet une fois que vous avez créé ce moodboard particulier et quelques palettes de couleurs OK, laissez-moi maintenant vous montrer comment cela se fait. Je suis maintenant sur mon espace de travail, et à partir de là, je vais passer au plan de travail. Je vais créer un plan de travail ici. OK, dans ce plan de travail, je vais prendre différents types de formes OK, permettez-moi de créer des formes ici. OK, peut-être plus comme ça. Je peux vraiment celui-ci ici. Et maintenant, je peux également dupliquer ces couches. D'accord, à partir de là, je peux juste le dupliquer. D'accord ? Je vais également le dupliquer. C'est ainsi que je peux essentiellement dupliquer, ou si je veux créer beaucoup plus de boîtes, je peux les créer en conséquence. OK, ici je vais mettre les palettes de couleurs. Je vais peut-être garder ça ici. Je vais juste mettre quelques couleurs ici et une image, ou je vais simplement la créer juste à l'extérieur. OK, pas de soucis. Avec ça aussi, je vais juste créer une autre boîte rectangulaire ici. À partir de là, je vais essayer d' importer les images ici dans cette boîte en particulier de la manière la plus élémentaire abord essayer d' importer les images ici dans cette boîte en particulier de la manière la plus élémentaire. Ici. D'accord, je vais importer, si je viens ici, un fichier d'étapes, puis aller aux fichiers de ressources. De là, vous pouvez prendre différentes images. D'accord, vous pouvez faire défiler les images. J'ai six images pour le moment, si j'importe celle-ci, j'ai toutes ces images ici sur ma boîte. OK, si je fais un zoom arrière, vous pouvez voir ici, il y a toutes ces images que j'ai ici. En gros, ce que je peux faire, c'est que je peux simplement sélectionner une image en particulier, je peux simplement réduire les tailles. Ensuite, vous pouvez zoomer cette image, puis l'apporter ici dans The Moodboard. OK, supposons que si je reste ici, si je passe juste en haut, vous aurez le tableau quelque part. J'ai créé un tableau. Sinon, je vais simplement créer un autre tableau d'art à partir d'ici. Peut-être que je vais toujours sélectionner la taille du plan de travail. Maintenant, je peux simplement mettre ces images ici. Diminuez peut-être la taille. Toutes ces images que j'ai ici, je peux les conserver comme ça. Tous ces cadres dont je me suis inspirée des couleurs, je peux également en augmenter la taille, selon mes envies De plus, j'ai différentes images, que je peux mettre ici. OK, diminuez la taille. Viens ici au coin de la rue. Et diminuez également la taille à partir d'ici. Je peux importer d'autres images. Supposons que je veuille importer ici tout ce cadre, que j'ai créé. D'accord ? Tout ce cadre. Je peux sélectionner ce cadre ici, et je peux aussi mettre celui-ci. OK, je peux le faire, mais maintenant je vais juste le dilater ici Vous pouvez voir que j'ai différentes choses ici, donc je peux aussi les déplacer là-bas. D'accord, les différentes options ici, vous pouvez voir que ce sont des images en taille réelle que je peux également copier pour moi-même. Je vais garder celui-ci dans un coin. Peut-être que je vais aussi augmenter la taille de celui-ci. Sélectionnez les éléments supplémentaires et mettez-les de côté quelque part ici. Peut-être que tu peux augmenter la taille comme ça. Tu peux le mettre ici. C'est ainsi que vous pouvez vous créer un moodboard. Essayons maintenant de comprendre comment vous allez créer une palette de couleurs. OK, viens ici, sélectionne une case. Supposons que vous souhaitiez vous inspirer des couleurs d'ici. Découvrez le compte-gouttes ici. Et avec le compte-gouttes, sélectionnez cette couleur de la même manière ici Copiez ensuite ceci. Maintenant, venez ici dans la zone de champ et modifiez l'intensité de la couleur de la même manière. Répétez ce processus quatre à cinq fois. Maintenant, cochez cette case ici, et modifiez un peu plus l'intensité. D'accord ? Encore une fois, venez ici, sélectionnez cette case, passez à celle-ci et modifiez l'intensité. C'est ainsi que vous pouvez essentiellement modifier l'intensité. Combien de fois vous voulez, vous pouvez le faire aussi. D'accord ? Supposons que je veuille plus de couleurs claires par rapport à cela. Viens ici et va quelque part ici. C'est ainsi que vous pouvez créer vos propres palettes de couleurs. Vous créez comme cette palette de couleurs, trois, d'accord ? Comme vous pouvez le voir, voici différentes couleurs. Vous pouvez également expérimenter avec différentes couleurs. C'est ainsi que vous pouvez créer votre propre moodboard. La dernière chose à faire de sélectionner les deux cadres ici. Après cela, venez ici, accédez à l'option de fichier. De là, passez à l'exportation, et vous sélectionnez celui que vous avez sélectionné. Exportez-les. Comme vous pouvez le voir, il sera exporté. Maintenant, si vous allez dans le système, si vous accédez à l'option de téléchargement ici, vous pouvez voir, accord, d'abord je pense que je dois regrouper cela. OK, je vais regrouper ça. Sélectionnez ce seul moodboard. Maintenant, je peux marquer celui-ci pour en exporter un ici. Exporter, en sélectionner une. Voici donc comment vous pouvez essentiellement exporter votre plan de travail. Ici, encore une fois. D'accord ? Et ici vous pouvez voir que j' ai mon plan de travail, donc voici comment vous pouvez prendre, exporter votre plan de travail et votre palette de couleurs de la même manière D'accord, comme vous pouvez le voir ici, j'ai les palettes de couleurs. Regroupez-les et uniquement ceux sélectionnés. Et voici comment vous pouvez essentiellement exporter. Oui, j'ai aussi les palettes de couleurs, donc vous pouvez m' envoyer votre travail comme celui-ci et le déposer dans notre panneau de projet. Et je serais très heureuse de revoir votre travail et de vous donner les instructions en conséquence. OK, d'ici là, prends soin de toi. Tout le monde, j'espère vous voir tous dans le prochain tutoriel. 15. Projet sur la façon de créer un design de page Web: Bonjour les gars, et je vous souhaite à tous la bienvenue dans un autre didacticiel d'Adobe XD. Ce sera donc la dernière leçon où il ne s' agit essentiellement que d'une classe de projet. Je vous ai tout dit sur X D, comment vous pouvez utiliser une application en particulier, comment vous pouvez commencer avec la conception d'interface utilisateur et d'expérience utilisateur. Donc, dans ce cours, je vais vous montrer à partir de zéro comment créer une page Web de conception. Je vais vous montrer tout ça. Commençons par le cours et commençons à concevoir une page Web. Eh bien, revenons à la même page, d'accord ? Et maintenant, à partir de là, je vais créer une œuvre d'art. OK ? À partir de là, je vais sélectionner le plan de travail et, comme vous pouvez le voir, j'ai une taille de webdectop différente Je vais sélectionner la taille 1920, 5 080 à partir d'ici, et la déplacer quelque part OK. Oui, celui-ci est bon. Maintenant, de la manière la plus élémentaire, je vais sélectionner une image. OK, pour cela j' ai enregistré une image. Ce que je vais faire, c'est couvrir cette page d'une image, puis j'écrirai mes informations et je les modifierai selon mes propres besoins. D'accord, à partir de là, je vais passer à l'option d'importation. Importer. Je vais accéder à mes téléchargements. À partir des téléchargements, j'ai téléchargé une image à partir de pixels. Je vais mettre celui-ci ici avec mon équipe. Je vais diminuer la taille de ce décalage d' image en particulier ici, je vais diminuer la taille. OK. J'ai ce cadre en particulier ici. Comme vous pouvez le voir, je l'ai ici. OK. Je peux essentiellement diminuer la taille maintenant si je le souhaite. OK, mais je vais le garder jusqu'ici. Maintenant, vous voyez, la couche suivante est prête, pour que je puisse commencer mon travail ici. OK, peut-être que je vais le sélectionner si je veux en faire un composant ou si je veux le modifier dans Photoshop, je peux le faire. D'accord, je peux aussi travailler avec ça en gros. Si je veux le déplacer, je peux simplement le déplacer comme je le souhaite. OK, maintenant l'arrière-plan de ma page Web est prêt. Maintenant, ce que je dois faire, c'est modifier cette page particulière ici. Pour cela, ce que je vais faire d'abord, je vais aller dans la zone de texte ici dans la zone de texte, je vais créer une zone de texte particulière ici où je vais mettre ce que je vais écrire ici Supposons que je vienne ici et que j'augmente la taille. Je vais lui donner un 30 et participer. OK, je vais revenir ici. Outil de sélection. Avec cet outil de sélection, j'ai cette page ici, créez une zone de texte. Quel nom dois-je donner à celui-ci ? OK, permettez-moi de nommer cette boîte 45 la maison de tout le monde. J'ai cette page Web critique ici. Cliquez dessus et modifiez maintenant la taille à partir d'ici. Supposons que je veuille en prendre 45, et ici je l' ai prise dans cette taille. Je peux aussi choisir la taille à partir d'ici, ou je peux l'agrandir à partir d'ici. OK, si je viens ici, j'augmenterai la taille de la boîte. Sélectionnez à nouveau ce texte. Maintenant, ce que je vais faire, c'est à partir de là, je vais cliquer sur Entrée, sélectionner. Cela dépend essentiellement de tant de choses de ce que vous voulez. Je vais le mettre au centre. Maintenant, je veux changer le type de texte. OK, le style que je veux changer. OK. Je vais peut-être prendre quelque chose. Je vais prendre le Collaborate de base. J'aimerais que mon travail reste assez simple. OK, alors peut-être que je vais prendre le gras en italique, et je vais changer la taille à 90 Oui, je dois aussi augmenter la taille de la boîte. À partir de là, sélectionnez-le. J'ai celui-ci ici. Sélectionnez celui-ci et choisissez une couleur selon vos préférences. OK, supposons que je le fasse. Euh, quelque chose qui correspond à cette couleur en particulier ici. D'accord, je vais prendre cette couleur, supposons que je sélectionne également la bordure de cette couleur en rouge ou quelque chose de foncé. Mais ici, je vais changer la bordure à deux et je vais cliquer sur Enter ici, vous pouvez voir que le logo est prêt ici. Maintenant, je peux mettre différentes images ou différents types d'icônes si je veux mettre des icônes. Je vais revenir sur celui-ci ici. Donc, dans le viseur d'ici, je peux prendre de nombreux types d'illustrations, nombreux autocollants comme je le souhaite. OK, peut-être que je vais taper home. Je vais cliquer ici. Ici, vous pouvez voir qu'il y a de nombreuses animations en trois dimensions que je peux réaliser et aucun lien de retour. Et je veux ceux qui sont gratuits d'ici. Le chargement ici peut prendre un certain temps. Comme vous pouvez le constater, je peux le choisir en conséquence. Supposons que je veuille prendre celui-ci, mais que je cherche ceux qui sont gratuits. Je vais passer aux illustrations des options d'autocollants. C'est ainsi que nous pouvons en gros nous en sortir. Les images, mais ils essaient de me faire payer une boîte ici, mais j'en veux une version gratuite. OK, je vais juste prendre celui-ci. Je suis en train de télécharger le fichier. J'ai téléchargé. Retournez à mon X D. Revenez ici à partir de là, je vais importer celui-ci ici. Vous pouvez l'avoir, les gars. OK, peut-être qu'avec Shift je pourrais juste augmenter la taille de celui-ci. OK, je vais le sélectionner et l'apporter ici. OK. Et à partir de là, ce que je peux faire, c'est sélectionner la taille de la bordure comme dix. Et je vais cliquer sur Entrer ici. Vous pouvez voir que j' ai une icône ici. OK, je le sélectionne ici et je vais simplement regrouper celui-ci. Je l'ai maintenant ici. Celui-ci est terminé. Et tout ce que je veux mettre ici, c'est d'accord, si je veux mettre des images ou des images différentes sur le groupe. OK, je peux le mettre ici, supposons que je veuille l'afficher comme le menu ou quelque chose comme ça. Encore une fois, créez la zone de texte ou amenez simplement votre zone de texte ici. Créez une zone de texte ici. Je vais le réduire à 30. Je vais cliquer sur Enter ici, venir ici et écrire Menu. Maintenant, ce que je vais faire, c'est avec celui-ci, je peux créer différentes boîtes. OK ? Supposons qu'avec Al, je crée une boîte différente ici. Supposons que je veuille avoir cinq cases ici. Cinq options, d'accord ? Ici, je vais passer à autre chose, mais plus tard, je vous expliquerai comment vous pouvez essentiellement faire ici. J'ai cinq options en haut, d'accord ? Maintenant, je vais écrire, d'accord, abord je vais nous écrire, ensuite je vais écrire une œuvre. Ensuite, je vais passer à ce menu et nous, que dois-je écrire ici à propos de notre travail ? Et nous écrivons ici les événements. Je vais venir ici et j'écrirai, d'accord, toutes ces options sont très différentes ici. La dernière chose que j'écrirai, c'est de nous rejoindre. J'essaie de créer une page d' ONG ici, d'accord ? Je vais m'assurer que l'espacement entre tout cela est bien approprié, d'accord ? Je vais garder un bon espacement entre chacun et tout. Voici ce que j'ai. Je m'aligne également au même endroit. OK. Ouais. Comme vous pouvez le voir maintenant, j'ai un bon espacement entre les deux et ils peuvent comprendre que c'est comme si c' était le menu ba à partir duquel ils peuvent essentiellement contourner OK, j'en ai fini avec celui-ci et maintenant je peux créer à partir d'ici. Je voudrais vous donner un bref aperçu de ce dont il s'agit. Je peux utiliser un sous-titre si je viens ici et que je souhaite créer une autre boîte ici Je vais donc créer une zone de texte ici. Maintenant, dans cette zone de texte, j'écris, j'écrirai, en inspirant le changement et l'espoir. Ce sera mon sous-titre, d'accord ? Ou la devise d'ici. Je vais juste redimensionner celui-ci peut-être à 60. Je vais cliquer sur Enter Now, je peux également changer la couleur à partir d'ici. Supposons que je veuille un contraste de cette couleur et que je veuille également vérifier la bordure. OK, peut-être la frontière. Je vais prendre quelque chose en vert. Je vais remplacer ce trait par deux, c'est bien. OK. Je vais garder celui-ci ici avec mon outil de sélection. Je vais le sélectionner, le placer en conséquence. Maintenant, je peux également créer une boîte ici. OK. Un champ pour un champ de recherche. OK. Ou moi, n'importe quelle icône. Accédez à l'outil de recherche d'icônes ici et je créerai un bouton de recherche ici. OK, je vais venir ici. Comme vous pouvez le voir, j'ai différents boutons de recherche ici. Je peux en prendre un d'ici, je peux le faire, et encore une fois, revenir à mon fichier XD à partir d'ici, je peux essentiellement le mettre quelque part ici. OK, accédez à nouveau au fichier d'importation. À partir de là, je vais l'importer et je vais le réduire. Celui-ci, parfois c'est assez difficile de le déplacer. Je vais juste déplacer celui-ci autour de ce cercle en particulier ici. Maintenant, je peux simplement en diminuer la taille. Oui, je l'ai fait. Oui, c'est le bouton de surtension ici. Je peux essentiellement mettre quelques images de cette ONG en particulier. OK ? Le nom de l'ONG est le foyer de tous. Le slogan inspire le changement et l'espoir. OK, maintenant, si je veux créer une page, supposons ici que je veuille créer des boîtes particulières. Comme si je voulais qu'ils remplissent leur nom. Ici, OK, ici. Et la même boîte. Je vais dupliquer celui-ci. OK, viens ici, vérifie l'outil de sélection. Cliquez dessus. Celui-ci. Vous pouvez sélectionner celui-ci ici. Je vais prendre une autre case ici, et ici j'écrirai avec ma zone de texte ici. J'écrirai à Don. OK, sélectionnez ce texte en particulier. Avec ça, je vais apporter celui-ci ici. Entre les deux. Je vais également changer de couleur. OK, peut-être que je vais prendre la couleur noire. Je ne veux pas de frontières. OK. Je veux que ce soit large. Je vais garder celui-ci ici. Peut-être que je peux simplement passer en gras. Maintenant, je vais copier la même case ici. OK, maintenant je vais sélectionner ceci. Avec celui-ci, je vais l'emporter ici. Ici, ici. Donc, en gros, je peux le dire comme ça. OK ? Donc, à partir de là, je vais taper le nom ici. Je vais taper le numéro de téléphone, montant, adresse e-mail, le courrier électronique. OK. J'ai donc celui-ci ici, les gars peuvent voir que ma page Web est prête ici. OK. Je peux ajouter quelques éléments supplémentaires ici, faire un don à partir d'ici. Vous pouvez voir que j'ai les options de texte ici, mais si je prends le métallisé en gras ici, vous pouvez voir à quoi cela ressemblera essentiellement. OK. Ici, vous pouvez voir que ma page Web est presque terminée, mais je voudrais mettre quelques boutons ici. OK. Je reviendrai ici. OK, voici le bouton de connexion, connectez-vous ou je verrai lequel est le plus beau. OK, peut-être que je peux prendre celui-ci. Celui-ci a l'air plutôt bon. Je vais télécharger le formulaire SVG ici. Viens voir mon X ici. Maintenant, vous allez pouvoir le voir. Je vais l'importer à nouveau. À partir de là, je le ferai. Comme vous pouvez le voir ici, j'ai ce bouton en particulier. OK. Cliquez sur Shift, et après avoir cliqué sur Shift, vous pouvez venir ici un peu. Sélectionnez ici. Une fois que vous avez cliqué sur celui-ci, vous serez redirigé vers une autre page ici. OK, alors j'espère que vous avez compris. Et maintenant, je peux également importer quelques images. Par exemple, je vais peut-être le mettre ici et écrire notre campagne de campagne. Sélectionnez ceci, mettez-le quelque part ici. Déplace celui-ci, un peu en haut en dessous. Je vais ajouter quelques images. OK, ici, je veux ajouter quelques images pour cela, je vais sélectionner cette case en particulier ici. Tout d'abord, je vais dupliquer à nouveau cette case. OK, ici, j'ai également sélectionné une case particulière. À partir de là, je vais l'aligner sur la même ligne ici. Venez ici, accédez à l'option d'importation. Dès l'importation, je vais importer certaines images. OK, à partir de là encore, je vais sélectionner Supposons cette image. Je vais importer celui-ci, mais l'image est trop grande. Avec mon shift, je réduirai la taille de l'image et j'importerai également un autre fichier. J'aurais dû le faire tout de suite, mais je vais peut-être prendre cette photo. Je vais importer celui-ci ici. OK. Oui, j' ai cette image. Je vais essayer d'amener celui-ci ici et celui-ci ici. Maintenant, je zoome à nouveau sur mon lieu de travail ici. Maintenant, comme vous pouvez le voir, j'ai les deux images, mais ce que je veux faire, c'est les intégrer à l'intérieur. OK ? Supposons que j' aie ceci et celui-ci. Maintenant, ce que je peux faire, c'est peut-être que je vais sélectionner ceci, cela ensemble. Je veux sélectionner les deux ensemble. Dans ce cas, pour ce que je peux faire, je viendrai ici, cliquez ici. Je vais faire de celui-ci un groupe. Eh bien, j'ai ici deux images, comme vous pouvez le voir dans mon arrière-plan. J'ai aussi des images. Ce que je peux faire ici, c'est d'accord, laissez-moi supprimer celui-ci. Au lieu de mettre mes images dans cette boîte elle-même, si je viens ici, regroupez-la, et maintenant je peux sélectionner, supprimer celle-ci. Et sélectionnez ceci. Et supprimez également celui-ci. OK, ce sera la dernière étape où je vais tout mettre en œuvre et je serai sur la page d'ici. OK encore une fois, viens ici. Accédez à l'option d'importation. Dans les options d'importation, sélectionnez ces deux images. Importez-le. Et comme vous pouvez le voir, je vais juste faire un petit zoom arrière. Et maintenant, je peux simplement sélectionner les images en conséquence. Supposons que je veuille simplement sélectionner cette image ici. Et maintenant, je veux diminuer la taille de cette image en particulier ici. OK ? Et de la même manière, je souhaite également diminuer la taille de cette image. OK, maintenant, venons-y. Mettons en place cette image avec mon outil manuel. Je vais venir ici et avec le vieux je vais zoomer. Déplace ça par ici. Vous pouvez voir que j'ai cette image ici. OK. À partir de là, en cliquant simplement sur Shift, je peux essentiellement me déplacer dans cette image là où je veux placer celle-ci. Supposons que si je veux mettre cette image ici, je peux la mettre. Et j'ai aussi une autre image ici. D'accord, je vais également apporter cette image en particulier ici. Vous pouvez le voir ici. J'ai aussi l'image ici, donc vous pouvez voir je peux essentiellement modifier ou augmenter la taille des images. Oui, maintenant ma page Web est prête. Comme vous pouvez le voir, j'ai créé une page Web pour une ONG. OK. Le nom de l'ONG est donc le foyer de tout le monde. Voici la devise et voici certaines des images de leur campagne. Et ici, vous pouvez faire un don, donnez votre nom si vous voulez savoir quoi que ce soit. Voici donc comment vous pouvez essentiellement faire de la conception Web. OK, donc j'espère que vous avez compris le moyen le plus simple. Et maintenant, la dernière chose que vous allez faire est de venir ici et vous pouvez essentiellement regrouper celui-ci. Si je déplace celui-ci maintenant, il bougera tous ensemble en même temps, d'accord ? Donc, si je le sélectionne ici, comme vous pouvez le voir, une fois que j'ai sélectionné celui-ci et que je suis venu ici, vous pouvez voir qu'il existe différents groupes. OK ? C'est le groupe un, le groupe quatre, d'accord ? Ici, vous pouvez voir qu'il y a différents types de choses ici. Il s'agit de la page Web sur laquelle je travaillais. Je vais supprimer celui-ci d'ici. Voici le tableau artistique. J'espère que vous avez également tout compris à propos de ce cours. Enfin, je vous ai montré comment créer notre propre design de vous-même tout en créant une page Web. OK, je vous ai montré le moyen le plus simple de commencer à concevoir. J'espère vous voir tous participer au projet de classe, et je vous ai donné quelques projets. Et j'espère les récupérer de vous tous, d'accord. Que je puisse les examiner et vous envoyer des commentaires sur la façon dont vous pouvez y parvenir. OK. Donc, ici, je viens de créer page Web assez simple ici. Vous pouvez vraiment améliorer cela, utilisant certaines des trois animations en D. Et c'est ainsi que vous pouvez voir les autres pages du site Web et les voir en conséquence. Et je vous ai montré un prototype afin que vous puissiez également le faire en créant plus de pages OK, donc si vous envoyez plus de pages, je n'ai aucun problème à les vérifier. Je serais vraiment contente que vous m'ayez envoyé. D'ici là, prenez soin de vous et j'espère vous voir tous dans un autre cours. Si vous avez un problème avec ce tutoriel, si vous ne comprenez rien, chaque fois que vous pourrez me recontacter, je serai là pour vous aider. Prenez soin de vous, les gars, et au revoir.