Apprendre à concevoir pour le web avec Adobe Xd : créez des sites professionnels à partir de zéro - UI/UX Design

1. Apprenez Adobe Xd Webdesign: Conception de sites Web professionnel professionnel à partir de rien : UI UX: Bienvenue dans le cours de maîtrise Adobe XD où vous apprendrez à créer un site Web magnifique pour le web et le mobile du début à la fin tout en ayant un excellent flux de travail. Hé, je suis Reno et je serai votre instructeur pour ce cours. J' ai découvert ma passion pour le design il y a près de 10 ans et c'est pourquoi je suis allé à l'école de design où j'ai appris les bases du design. J' ai lancé une chaîne YouTube où j'ai partagé tout ce que j'avais appris. Cette chaîne YouTube m'a donné suffisamment de visibilité pour démarrer ma première entreprise de design avec mes amis, et nous travaillons pour beaucoup de petites entreprises mais aussi pour quelques grandes marques comme Coca-Cola, Microsoft et Adobe. C' était vraiment cool. Actuellement, je passe la majorité de mon temps enseigner en ligne parce que c'est ce que j'aime vraiment faire. J' ai conçu ce cours pour tous ceux qui veulent apprendre à concevoir des sites Web avec Adobe XD. Il y a beaucoup de cours fantaisistes Adobe XD sur la conception d'applications, mais dans ce cours, nous allons nous concentrer sur le web design. Parce que de façon réaliste, c'est là que la plupart d'entre nous commencent en tant que concepteurs d' interface utilisateur qui veulent gagner de l'argent avec nos compétences. Mais nous allons concevoir un site web complet avec quatre pages et quelques dessins distincts, et je vais vous fournir toutes les images, les icônes et les polices qui sont utilisées pour créer ces sites Web, afin que vous puissiez suivre avec moi. Nous allons commencer facilement et progressivement travailler plus rapidement afin que vous ayez suffisamment de temps pour vous familiariser avec Adobe XD. À la fin de ce cours, vous pourrez travailler avec Adobe XD pour créer des pages web et mobiles. La méthode que je vais enseigner est très puissante car elle vous permettra réutiliser certains éléments que vous n'aurez à créer qu'une seule fois. Une fois que vous avez fini avec la page d'accueil, les choses deviendraient vraiment facile et rapide. Je vais également vous montrer quelques-unes des astuces de conception qui sont utilisées pour rendre mes designs plus beaux. Cela signifie que nous n'allons pas vraiment approfondir la théorie du design, car l'objectif de ce cours est de vous enseigner Adobe XD. Ce cours s'adresse à tous ceux qui s'intéressent à la conception web et qui souhaitent apprendre Adobe XD, mais il est particulièrement utile pour les personnes qui utilisent Photoshop ou Illustrator en ce moment pour concevoir leurs sites Web. Parce qu'une fois que vous avez conçu un site Web dans Adobe XD, je pense que vous ne retournez pas à Photoshop ou Illustrator. Par exemple, il suffit de regarder l'outil de répétition des grilles. Adobe XD vous permet d'insérer des images, changer la couleur ou de rendre des pages entières cliquables avec l'outil de prototypage. C' est juste un outil incroyable pour la conception de l'interface utilisateur. Donc, si vous êtes intéressé par l'apprentissage d'Adobe XD, j'espère vous voir dans la prochaine vidéo. 2. Bienvenue dans ce cours ! Quoi s'attendre: Bon, bienvenue à l'intérieur du Gore. Merci beaucoup de vous être inscrit. Je suis très excité de commencer. J' ai beaucoup de choses préparées pour toi. Je veux dire quelques choses avant de commencer les premières choses. Le chapitre 1 porte sur les bases. Nous allons vraiment aller lentement dans le chapitre 1, parce que je veux vraiment m'assurer que vous connaissez les clés des touches courtes et comment bouger, comment aligner les choses, parce que cela rendra les choses beaucoup plus faciles à l'avenir pour vous. La façon dont j'utilise mes raccourcis comme je Zoom, la façon dont je sélectionne les éléments. Si tu essayais d'apprendre ce que je fais, ça va être beaucoup plus facile pour toi. C' est pourquoi le Chapitre 1 est vraiment une plongée profonde dans le contrôle, les alignements, les couleurs et tout. Ensuite, une fois que vous commencez à concevoir la page d'accueil, la page d'accueil prendra quelques épisodes. Mais alors, comme je l'ai dit dans la bande-annonce, autres pages vont aller très vite parce que la méthode que je vais enseigner dans ce cours est vraiment efficace. Vous préparez beaucoup de choses à l'avance, puis vous pouvez copier et réutiliser beaucoup d'éléments pour créer vos pages plus rapidement. Après avoir terminé tout ce cours et effectué toutes les étapes, vous pouvez même utiliser ces éléments pour un autre projet. Parce que pour chaque projet, vous avez besoin de choses comme les titres, vous avez besoin de texte, vous avez besoin de boutons. Ensuite, si vous avez un nouveau projet, vous modifiez simplement les styles et vous pouvez le réutiliser dans d'autres projets. Je veux m'assurer que tu t'y accroches parce que je veux vraiment que tu obtiens un résultat. Si vous avez des questions, vous pouvez simplement les laisser ci-dessous. Alors j'espère que vous apprécierez vraiment le cours. J' espère vous voir dans le prochain épisode. 3. Voici vos téléchargements (n'oubliez pas d'installer des polices): Tous les bons gars. Je suis super excité de plonger dans Adobe XD. Tout d'abord, j'ai fait est très facile pour vous afin que vous puissiez suivre avec moi. J' ai créé ce dossier que vous pouvez télécharger. Dans ce dossier, vous trouverez le premier fichier d'exercice que nous allons ouvrir dans la prochaine vidéo. Vous trouverez mon design final. Vous trouverez beaucoup de polices gratuites que vous pouvez installer, et tous les fichiers dont vous avez besoin pour créer le site Web. Ce que je veux que vous fassiez, c'est aller sur le lien ci-dessous et ensuite vous allez à une page. Ce que vous allez faire, c'est que vous allez cliquer sur le téléchargement, télécharger le fichier zip sur votre ordinateur et l'extraire sur votre ordinateur. Si vous êtes sur un Mac, vous pouvez simplement cliquer avec le bouton droit de la souris et cliquer sur l'extrait. Si vous êtes sur un Windows, vous pouvez également le faire si WinZip ou WinRAR est installé sur votre ordinateur. Sur la plupart des ordinateurs, il est déjà installé. Vous pouvez voir l'extrait avec WinRAR ou WinZip. Si vous ne l'avez pas encore sur votre ordinateur, vous pouvez le télécharger gratuitement, il suffit de taper Google, WinRAR ou WinZip. Une fois que vous avez que vous pouvez voir tous les fichiers à l'intérieur. Ensuite, la première chose avant de cliquer sur un fichier XD est que vous allez installer les polices, car j'ai utilisé des polices spécifiques à l'intérieur de mes fichiers de conception. Si vous ouvrez ceci avant d'installer les polices, vous ne pouvez pas voir les polices que j'ai utilisées. Ce que je veux que vous fassiez est de parcourir le dossier de polices ici et de sélectionner toutes les polices. Si vous êtes sur un Windows, cliquez avec le bouton droit de la souris et cliquez sur installer. Si vous êtes sur un Mac, vous devez ouvrir le livre de polices. Allez simplement dans votre livre de polices, ouvrez votre livre de polices, puis faites glisser toutes les polices à l'intérieur. Il suffit de les insérer dans cette liste. Je l'ai déjà fait, donc je ne le refais pas. Ensuite, vous êtes prêt à passer au prochain épisode où nous allons ouvrir notre premier exercice, un fichier de base. Installez les polices et je vous verrai dans la prochaine vidéo. 4. Les bases d'Adobe Interface: Bienvenue dans l'épisode précédent, nous avons téléchargé tous les fichiers dont nous avons besoin et maintenant nous allons dans le fichier Basic. Il s'agit de l'écran de démarrage lorsque vous ouvrez Adobe XD pour la première fois. Je vois tous mes fichiers de raisons ici, vous ne verrez probablement pas que si vous n'avez jamais ouvert XD et qu'ils vous donnent également quelques options pour créer une nouvelle pièce. Mais pour l'instant, j'ai créé un fichier Basic très simple que nous allons couvrir, donc il suffit de double-cliquer sur le fichier Basic et la première chose que vous allez voir est la suivante. Les bases des bases. Je suppose que la plupart des personnes qui ont regardé ce cours ont déjà un peu d'expérience dans la création d'un logiciel. Vous avez peut-être travaillé dans Photoshop, Illustrator, peut-être même dans des outils comme Premiere Pro ou After Effects. Alors beaucoup de choses sont les mêmes dans Adobe XD, mais il y a quelques différences clés, donc même si vous êtes complètement nouveau pour créer un logiciel et ce sera facile à suivre. Mais si vous avez un peu d'expérience, vous comprendrez cela très vite. Tout d'abord, la « barre d'espace » est les outils de déplacement. Si vous appuyez sur cette « barre d'espace », si vous allez voir que votre souris va changer dans une main et vous pouvez vous déplacer dans l'écran, il suffit de cliquer et de faire glisser pour vous déplacer. Ensuite, si vous voulez zoomer, il y a différentes options, mais l'option la plus simple et l'option que j'utilise toujours et est la plus rapide à mon avis, est le « Alt » plus « Scroll », donc si vous avez une souris, vous pouvez appuyer sur « Alt », puis sur « Scroll », et où vous placez votre souris est l'endroit où il va zoomer. Si vous n'avez pas de souris, je vais également vous montrer quelques options, mais c'est l'option la plus simple. Maintenant, j'appuie sur « Alt » et je fais défiler avec ma souris, donc je vais zoomer sur ce cercle. Même si je veux zoomer sur cette partie, mais je déplace ma souris et zoome sur cette partie. Si vous n'avez pas de souris et que vous avez un trackpad, vous pouvez utiliser uniquement le zoom, la même manière que vous zoomez sur un smartphone, pour zoomer sur une photo, vous pouvez utiliser deux doigts puis zoomer sur une zone spécifique. Si vous ne voulez pas vous déplacer, vous pouvez également utiliser la « barre d'espace » et la déplacer comme ceci ou utiliser deux doigts et ensuite simplement passer à deux doigts dans la même direction et de cette façon, vous pouvez également vous déplacer très facilement à l'intérieur de votre Canvas, c' est donc aussi une bonne façon. Disons que vous n'avez pas de trackpad et que vous n' avez pas de souris, ce que je ne recommande pas. Je vous recommande d'utiliser une souris pendant que vous concevez. Ils peuvent également utiliser l'outil ici sur la gauche et vous pouvez simplement sélectionner une pièce comme celle-ci, puis zoomer, puis si vous appuyez sur « Alt », vous pouvez zoomer en arrière. Mais je n'ai jamais utilisé comme outil, je viens d'utiliser la souris, alors revenez à l'outil de sélection, puis appuyez sur « Espace » et appuyez sur « Alt » pour zoomer, appuyez sur « Alt » pour zoomer, et juste se familiariser avec le zoom . Essayez-le par vous-même et assurez-vous que vous comprenez comment cela fonctionne. Il y a encore trois petites choses que je veux te montrer. Tout d'abord est l'outil de déplacement, donc si vous voulez déplacer un élément, vous pouvez simplement cliquer et faire glisser l'élément vers l'emplacement de votre choix. Cliquez et faites glisser, et il se produira hors temps que vous déplacez un élément sur l'extension. Tu ne voulais pas faire ça, alors tu dois faire un pas en arrière. Vous pouvez le faire ici, « Modifier » puis « Annuler Déplacer l'objet » comme ceci et vous pouvez le faire à nouveau. Boom, et puis vous êtes de retour et comme vous pouvez le voir, il y a un raccourci ici et il s'appelle Command Z ou sur Windows c'est Control Z. Si vous le déplacez comme ça et que vous appuyez sur « Command Z » ou « Control Z », il va juste revenir en arrière. Si vous étiez comme non, c'était mieux dans cet ancien endroit, vous appuyez simplement sur « Command Z » mais ensuite avec « Shift » et puis il reviendra comme vous pouvez le voir ici, donc c'est tout ce que vous devez savoir pour tout ce qui est à l'intérieur de cet espace. On a aussi un bar ici. Nous avons parlé de l'outil de sélection, donc si vous avez sélectionné l'outil de sélection, vous pouvez sélectionner des éléments. Si vous avez l'outil Rectangle, vous pouvez créer des rectangles comme celui-ci. Si vous voulez parfaire le rectangle, utilisez simplement « Shift », c'est ainsi que vous créez un rectangle parfait. Ensuite, si vous voulez le relâcher, assurez-vous que vous relâchez d'abord votre souris, puis relâchez le « Shift ». Ceci est important parce que si vous le faites dans l'inverse, sorte que vous relâchez d'abord le « Shift, puis il va sauter en arrière, alors d'abord libéré la souris, puis relâchez le « Shift » pour faire un rectangle parfait. Cela fonctionne de la même manière pour le cercle, il suffit de cliquer sur le cercle si vous voulez créer un cercle parfait, appuyez sur « Shift », boom. D' abord libéré une souris, puis relâchez le « Shift », puis vous aurez un cercle parfait. Même chose pour les rectangles, assez facile et avec des lignes, il va juste créer une ligne horizontale, une diagonale ou une ligne verticale. Si vous utilisez le « Shift » et sinon vous pouvez simplement utiliser n'importe quelle direction que vous voulez. Le crayon que nous allons parler de ça dans une prochaine vidéo. L' outil de texte, si vous allez cliquer sur le « Outil de texte », vous pouvez simplement appuyer n'importe où et vous pouvez commencer à taper ce que vous voulez, puis si vous voulez revenir en arrière et que vous voulez sélectionner un texte, vous devez revenir à l'outil de sélection , puis vous pouvez le sélectionner. C' est la même chose pour tous les autres outils, donc si vous êtes à l'intérieur de l'outil rectangle, par exemple, et que vous êtes à l'intérieur d'ici. Vous voulez déplacer ce rectangle, vous devez revenir à l'outil de déplacement, et en tant que raccourci pour cela, qui est « V », c'est l'une des touches que vous allez utiliser encore et encore, sorte que vous pouvez écrire ceci vers le bas si vous voulez. Mais c'est l'une des choses que vous utiliserez très souvent. Mon curseur n'est pas un curseur de souris normal. Comme vous pouvez le voir, ce sont des petits rectangles, alors vous savez que vous êtes sur un rectangle pour voir si vous pouvez voir en ce moment est un cercle, ce moment est rectangle, et puis si j'appuie sur « V », je vais revenir au mouvement et je peux déplacer ces choses. Je peux même sélectionner différentes choses en appuyant et en maintenant comme ça, puis en les supprimant avec l'outil de retour arrière comme ça, assez facile. Alors la dernière chose des bases que je voulais montrer est le panneau de propriété, parce que maintenant nous avons parlé de cette partie. Maintenant, il y a aussi une grande partie ici avec beaucoup d'options, donc si vous cliquez sur un article, vous obtiendrez beaucoup d'options pour cet article. L' élément dont le contour est bleu est maintenant sélectionné et vous pouvez maintenant modifier ces paramètres ici. Par exemple, il s'agit de la taille de la police. Si vous cliquez dessus et que vous tapez 60, par exemple, ce texte sera plus grand. Pour l'instant, je vais le remettre à 52. Si vous voulez changer la couleur des textes, vous allez ici pour remplir la couleur. Vous pouvez simplement changer la couleur ici à une autre couleur que vous voulez, donc peut-être quelque chose comme ça, violet, mais vous pouvez aussi utiliser l'outil de marionnettes ici et c'est vraiment sympa. Ils ont enfin une touche courte pour cette édition, parce qu'ils ne l'avaient pas dans une version précédente, c'est maintenant sous « I » ou juste cliquez dessus et ici vous pouvez sélectionner une couleur que vous voulez, donc par exemple, cette couleur, et alors cela changera. Si vous utilisez juste le « I », vous pouvez simplement appuyer sur « I » et être comme, oh, peut-être que cette couleur est belle, peut-être que cette couleur est belle, et peut-être cette couleur est belle, donc dans ce panneau de droite, vous pouvez changer le à toute autre couleur que vous voulez. Ici, c'est la position, donc si vous changez cela à 300 va changer la position. Je suis plus comme un designer visuel, donc j'aime juste déplacer les choses sur le plan de travail et ne pas vraiment jeter un oeil à cela. Mais parfois, si vous voulez créer un cercle qui est, par exemple, 50 x 50 pixels, vous pouvez changer cela ici. C' est la largeur, c'est la hauteur, la position X et Y sur la toile. C' est vraiment tout ce que vous devez savoir sur ce panneau latéral pour l'instant. C' est la base pour le déplacement et le changement d'objets. Dans la vidéo suivante, nous allons parler du panneau des calques. 5. Comprendre les calques dans Xd: D' accord. Donc, dans cette vidéo, nous allons plonger dans le panneau des couches. C' est important à comprendre. Vous ne passerez pas beaucoup de temps ici mais si vous ne comprenez pas cela, vous allez avoir des ennuis. Il suffit donc de cliquer sur le panneau des calques. Vous allez l'ouvrir en cliquant ici, et maintenant vous ne pouvez voir qu'un plan de travail et un tableau de montage. Si vous cliquez à l'intérieur de votre plan de travail, vous allez entrer dans tous les calques qui se trouvent à l'intérieur de ce plan de travail. Vous pouvez voir différentes choses ici par exemple, tous ces cercles que vous pouvez voir ici, vous pouvez voir les calques de texte, et vous pouvez voir, quelques dossiers ici. Si vous cliquez sur un article, il s'allume en bleu clair. Si vous sélectionnez plusieurs éléments qu'une fois, il s'allume également en bleu afin que vous sachiez ce qu'est le calque. Donc, par exemple, si vous concevez et que vous voulez voir à quoi ressemble votre design sans cette boîte, vous pouvez aller ici et appuyer sur l'œil et cela va cacher ce calque. Il ne sera donc pas cliquable, mais il sera toujours enregistré à l'intérieur de votre panneau de calques. Ce que vous pouvez également faire est de verrouiller cette couche, c'est aussi une fonctionnalité agréable car alors elle sera visible, mais il y aura ce verrou. Par exemple, si vous avez beaucoup d'autres éléments qui se chevauchent et que vous ne voulez pas que cet élément se déplace si vous déplacez d'autres choses. Par exemple, vous sélectionnez un grand nombre d'éléments ici que vous souhaitez déplacer, , puis la couche verrouillée sera également sélectionnée, mais elle ne se déplacera pas car elle est verrouillée. Donc c'est aussi l'une des belles choses que vous pouvez faire, et je ne suggère pas que vous allez dans le panneau Calques et cliquez sur verrouillage parce que vous pouvez également utiliser des commandes ou Control L. Donc, c'est ce que je fais toujours, j'appuie simplement sur Commande L pour verrouiller ou déverrouillez-le. Ce que vous pouvez également voir, c'est que cette couche ou ce groupe, je devrais dire, est au-dessus de cette boîte visuellement. Cela est également vrai dans le panneau Calques. Donc, si vous voulez déplacer cette boîte sous la boîte principale, ce que vous devez faire est de cliquer sur la zone d'image, puis de la déplacer en dessous. Alors assurez-vous de voir cette ligne bleue, avec un cercle au début, puis relâchez-la donc maintenant, ceci est sous la boîte principale. En fait, cette boîte se trouve maintenant sous tous les calques, donc même si nous la déplacons vers le haut, vous verrez qu'elle se trouve sous tous les calques. Donc, comme je l'ai dit, si vous voulez déplacer cette boîte jusqu'au sommet, vous pouvez le faire comme ça mais je ne conseille pas d'utiliser le panneau Calques du tout, et simplement d'utiliser des touches courtes, car vous pouvez aussi le faire avec des touches courtes. Donc, si vous appuyez sur Commande, puis sur les crochets, vous pouvez également le ramener lentement à l'arrière une étape à la fois. J' ouvrirai le panneau des calques pour vous montrer ce que je fais. Donc, si vous utilisez la touche de crochet droite, il va monter avec les commandes, donc les commandes parenthèses droites ou à gauche, alors nous allons monter ou descendre. Alors testez cela par vous-même et voyez comment cela fonctionne. Ensuite, si vous voulez le déplacer vers le haut, vous ajoutez également Maj. Vous appuyez donc sur Ctrl ou Commandes, puis Maj, puis sur les crochets de droite. C' est ainsi que vous le déplacez vers le haut ou vers le bas. Je l'utilise tout le temps donc je vous conseille aussi d'écrire celui-ci. D' accord. C'est donc tout pour le panneau Calque. 6. Sélectionner et développer, redoubler et: Bienvenue de retour. Dans cette vidéo, nous allons plonger dans Selection. En tant que sélection d'éléments, le déplacement d'éléments est une partie essentielle d'Adobe XD. Allons d'abord couvrir certains des éléments de base. Par exemple, si vous voulez copier ceci, deux fois. Ce que vous pouvez faire, c'est appuyer sur Alt, puis le faire glisser vers la gauche. Appuyez sur Alt, cliquez dessus et faites glisser. De cette façon, vous pouvez faire un duplicata, comme vous pouvez le voir. Faites-le une fois de plus, puis relâchez-le. Pour le pratiquer encore une fois, je vais le supprimer. Assurez-vous que lorsque vous dupliquez, vous relâchez d'abord votre clic de souris, puis l'option Alt. Maintenant, par exemple, si vous voulez tester à quoi il ressemble lorsque vous faites glisser ces deux cases vers le bas, vous pouvez les faire glisser comme ceci ou vous pouvez le faire en même temps. Tu peux le faire avec Shift. Si vous cliquez sur un élément et que vous allez maintenir la touche Maj enfoncée, vous pouvez sélectionner deux éléments. Comme vous pouvez le voir dans le panneau Calques maintenant, deux éléments sont sélectionnés, sorte que vous pouvez le faire glisser vers le bas. Maintenant, si je tiens Shift, ça ne va pas sortir de la ligne verticale. C' est la même chose pour l'horizontale. Je vais y retourner. Si vous voulez sélectionner ces trois, vous allez cliquer sur, Maj, cliquez, cliquez sur. Vous maintenez simplement la touche Maj enfoncée et cliquez sur ce que vous voulez dans cette sélection pour la déplacer. Une autre astuce que je veux vous montrer est la sélection avec commande. Si quelque chose est à l'intérieur d'un groupe, par exemple, nous avons une zone Image ici, et vous pouvez voir le bouton qui est également un dossier. Par exemple, si vous voulez sélectionner ce texte, vous voulez normalement cliquer, double-cliquer, double-cliquer, double-cliquer, double-cliquer, puis vous avez le texte. Cela signifie que vous devez cliquer huit fois. Si vous voulez ignorer cela, appuyez simplement sur Commande, comme vous pouvez le voir, vous pouvez simplement sélectionner parmi tous les dossiers ou groupes. Récemment, ils ont ajouté une nouvelle fonctionnalité qui est vraiment sympa. Supposons que vous vouliez changer la couleur de tout le texte ici. Normalement, tu ne pouvais pas faire ça, mais maintenant tu peux. Si vous appuyez sur Commande, puis allez à celui-ci, vous appuyez sur Maj, donc vous appuyez sur Maj et Commande, parce que Commande vous cliquez sur tous les calques et avec Maj vous pouvez sélectionner plusieurs éléments. Maintenant, vous pouvez sélectionner différentes choses, même si elles sont à l'intérieur de différents dossiers ou groupes. Ce n'était pas possible avant, donc c'est super sympa. Maintenant, vous pouvez, par exemple, changer l'opacité. On ne va pas faire ça dans ce design, mais c'est ce que je voulais te montrer. Comme je l'ai montré précédemment, vous pouvez également sélectionner les différents éléments en faisant simplement glisser, mais parfois vous avez un arrière-plan. Par exemple, si nous avons ce dossier et que c'est au-dessus d'ici, et que vous allez le sélectionner comme ceci, vous sélectionnez également l'arrière-plan, ce n'est pas toujours ce que vous voulez. Il vous suffit de cliquer sur Maj, de cliquer, puis de cliquer sur. Maintenant, vous pouvez les faire glisser vers le bas. Supposons que vous aimez utiliser cette fonctionnalité, et que vous avez également sélectionné l'arrière-plan. Vous pouvez désélectionner l'arrière-plan. Laisse-moi fermer le dossier, pour que tu vois ce qu'on fait ici. Je vais sélectionner tout ça. Maintenant, si j'appuie sur Maj et que je vais cliquer sur la grande boîte principale, il va désélectionner cette boîte principale. Maintenant, je peux juste déplacer ces trois parties, même si j'ai commencé avec toute la Sélection comme ça. Encore une fois, vous sélectionnez tout, puis vous appuyez sur Maj pour la chose que vous ne voulez pas à l'intérieur de cette sélection, puis vous pouvez déplacer toutes les autres parties. D' accord, pour l'instant, je vais le déplacer. Je vais les sélectionner. Je vais appuyer sur Shift, vais descendre et je vais le laisser comme ça. C' est pour la Sélection, très facile, mais une chose très importante à savoir. 7. Principes de base de l'alignement: Bienvenue de retour. Dans cet épisode, nous allons parler de l'alignement, aussi chose très importante dans Adobe XD, mais dans le web design en général. Si vous n'alignez pas correctement vos objets et que vous ne comprenez pas l'espacement des blancs, vos conceptions seront désordonnées. Ce que je vais vous montrer maintenant, c'est comment aligner correctement dans Adobe XD. Comme vous avez probablement déjà vu, est que si vous déplacez un élément dans Adobe XD, beaucoup de nombres violets apparaîtront et parfois même ces boîtes. Ces boîtes sont très belles parce qu'elles vous diront quelle est la distance entre ces éléments. Adobe XD va regarder la distance entre les éléments et ensuite il vous dira, hey, voulez-vous le même espacement ici ? Beaucoup de fois, vous le voulez, donc c'est très agréable d'utiliser cette fonctionnalité. Allons à ce texte par ici. Par exemple, si je vais faire glisser ce texte, Adobe XD sera à un moment donné comme, hey, voulez-vous aussi 10 pixels de ceci à ce texte, le même que vous avez ici. C' est ce que vous pouvez faire. Les chiffres que vous allez voir à l'écran sont les pixels. La position d'un élément, vous pouvez le voir ici, donc si vous voulez changer cela, le nombre ici va changer aussi. Maintenant, je vais juste le laisser à 30 ans parce que c'est le même espacement que nous avons ici. Mais je dois vous montrer une chose et c'est qu'il va compter l'espace du bas de vos champs de texte. Par exemple, il calculera un espace comme vous pouvez le voir non pas en bas de ce texte, mais en bas de ces champs de texte. Si je fais ce champ de texte un peu plus petit, alors il sera neuf pixels de plus comme vous pouvez le voir. C' est l'une des choses importantes que vous devez savoir sur l'outil d'alignement. Ce qui est aussi une fonctionnalité vraiment agréable, c'est que vous pouvez aligner les éléments très rapidement sans essayer de le faire comme ça. Par exemple, si vous avez un designer très désordonné comme celui-ci, vous pouvez sélectionner tous vos éléments et les déplacer vers le haut. Voici les outils d'alignement. Par exemple, si vous voulez avoir cet élément au milieu de votre toile, vous suffit de cliquer dessus et vous cliquez sur celui-ci. Maintenant, il est parfaitement aligné au milieu. Ce que vous pouvez également faire avec cet outil est de vous assurer que, par exemple, ce bouton est au milieu de cette boîte entière. Par exemple, si vous avez un long bouton comme celui-ci et que vous voulez que le bouton soit exactement au milieu ou disons simplement ce texte, vous voulez avoir ce texte au milieu de ce bouton. Ce que vous pouvez faire, c'est vous pouvez sélectionner un texte sur le bouton, puis vous pouvez utiliser l'outil d'alignement. Je vais vous montrer, vous allez appuyer sur Commande, cliquez sur le texte, appuyez sur Maj, puis cliquez sur le bouton. Maintenant, je dois texter et le bouton sélectionné, puis si je clique dessus, il va aligner mon texte exactement au milieu. C' est une de ces choses qui est juste super sympa de travailler avec. Aussi si je veux aligner ce bouton au milieu de cette boîte, je peux le faire avec la même astuce aussi. Mais pour cet exemple, si je vais aligner cela, alors il ne sera pas aligné sur mes textes et le titre. Pour cet exemple, je veux juste savoir quelle est la distance entre cela et je veux aussi l'appliquer ici. Vous pouvez simplement sélectionner les boutons, alors double-cliquez dessus et assurez-vous que vous avez le bouton avec le texte. Maintenant, si vous allez diminuer ou augmenter la taille, XD sait automatiquement que vous voulez que cet article soit au milieu. Comment XD le sait-il ? Eh bien, ils le savent parce que vous venez d'aligner ce texte au milieu. Même si ce texte est aligné à gauche, XD comprendra même que vous voulez avoir ceci au milieu. Si vous voulez obtenir la distance entre ce badge et ce badge, vous allez appuyer sur Alt et vous verrez que c'est 50 pixels. Si vous voulez juste la même chose de l'autre côté, ce que vous pouvez faire est que vous pouvez l'augmenter avec votre souris pour le faire 50. Ou si vous savez que c'est 50 et que vous savez en ce moment c'est 62, alors vous savez que vous avez juste besoin de 12 pixels de plus. Donc tu peux juste aller ici et taper plus 12 et boum. Maintenant, c'est sur 290 et maintenant vous savez juste que cela est parfaitement aligné. Disons que vous voulez que ces articles soient parfaitement alignés sous cette boîte principale. Ce que vous allez faire, c'est que vous allez vous assurer que l'un de ces éléments touche juste l'extérieur de la boîte, n'a pas d'importance, et l'autre que vous voulez aussi avoir cela. Vous pouvez même l'avoir comme ça tant qu'il est aligné sur l'extérieur de cette boîte. Maintenant, même si cet élément est comme ici, vous pouvez tous les sélectionner et les aligner en haut comme ceci, sorte qu'ils seront tous alignés et ensuite utiliser ceci. Si vous cliquez sur distribuer horizontalement, il calculera l'espace entre les éléments. Tu vas l'avoir comme ça, donc c'est super sympa. Maintenant, vous pouvez simplement saisir tous et les faire aussi 50 pixels à cette boîte principale, et maintenant votre alignement semble assez agréable. Encore une fois pour pratiquer ça. Disons que c'est partout l'endroit où vous les sélectionnez, vous les faites, par exemple, au milieu aligner, puis vous cliquez sur celui-ci et l'espace entre ces éléments sera le même. Si vous pensez toujours que c'est difficile, Adobe XD a publié une nouvelle fonctionnalité appelée Rulers. Si vous avez utilisé Photoshop ou Illustrator, vous le savez déjà. Mais si vous allez sur le site de votre tableau d'art, par exemple, nous avons la même situation ici et vous ne voyez pas vraiment cette ligne, ce que vous pouvez faire est vous pouvez cliquer sur cet élément, puis aller sur le côté et ensuite suivre dans une règle et il suffit de le clipser sur le côté. Faites-le aussi de ce côté-ci comme ça. Boom, ça va rester comme tu vois. Ensuite, vous pouvez simplement l'aligner très facilement sur ces pièces, les sélectionner les faire comme il était déjà, puis le mettre comme ceci, les sélectionner tous et les faire 50 pixels à l'autre élément. En passant, vous pouvez également déplacer des éléments qui sont des touches fléchées. En un clic, il se déplacera sur le pixel. Si vous utilisez ces décalages, vous pouvez déplacer 10 pixels. Maintenant c'est 44, donc maintenant j'ai juste besoin de faire 50 pixels comme ça. C' est tout, si vous voulez les enlever, vous pouvez simplement les diriger hors du côté et boum, maintenant ils sont partis. Assez facile à utiliser et il rendra votre design beaucoup mieux. Ok, donc c'est tout pour cet épisode.Je vous verrai dans la prochaine vidéo. 8. Le panneau des ressources utiles: Bienvenue de retour. Dans cet épisode, nous allons jeter un oeil à la colonne des actifs. Vous pouvez trouver la colonne des actifs ici. Si vous cliquez sur, vous allez l'ouvrir. C' est aussi l'une de ces choses que les concepteurs débutants n'utilisent pas si souvent. Mais c'est si important, car si vous l'utilisez, cela rendra votre design beaucoup mieux. Parce que vous n'allez pas partout avec vos polices et n'importe quelle couleur. Ce que je veux te montrer est quelque chose de très gentil. Par exemple, si vous avez vos couleurs ici, il s'agit d'une palette de couleurs. C' est super agréable d'avoir cela quelque part dans vos designs afin que vous puissiez simplement utiliser l'œil pour choisir une couleur. Mais ce qui est encore plus agréable, c'est d'utiliser les actifs. Par exemple, si je vais sélectionner tous ces calques, je peux cliquer ici et une couleur, je peux cliquer sur le plus. Maintenant, toutes les couleurs avec les codes hexadécimaux réels seront mises à jour sur les actifs de couleur. Cela signifie que si je vais changer une couleur ici, ça changera dans tous les documents. Par exemple, nous avons ce violet ici. C' est le même violet sur tous les titres et les boutons. Voyons juste que c'est 7768CC, comme vous pouvez le voir 7768CC. Maintenant, disons que vous travaillez pour un client ou que vous avez votre propre site Web et vous avez décidé que vous n'aimez plus le design et que vous voulez avoir le bleu comme couleur principale. Eh bien, si vous avez un grand site Web et que vous voulez juste changer toutes les couleurs, vous avez juste besoin de trouver toutes ces couches. Vous avez juste besoin d'aller à l'intérieur de 100 couches différentes ou peut-être même plus que ça. C' est horrible. C' est pourquoi j'utilise les actifs. Maintenant, si je vais cliquer sur éditer ici dans les actifs et je sais que ces couleurs sont toutes des ensembles de cette même couleur. Maintenant, je peux le changer et tous les éléments à l'intérieur de mon document changeront, comme vous pouvez le voir ici. C' est un moyen très rapide de tester les différentes couleurs de votre design. Maintenant, je vais juste cliquer en dehors de celui-ci et appuyer sur Contrôle Z pour revenir en arrière. Mais je suppose que vous comprenez pourquoi c'est si utile en ce moment. Cela est également vrai pour les calques de texte. Par exemple, si j'ai préparé quelques blocs de texte ici et que je veux que ce texte soit les textes de tous les principaux textes de mon site Web. Il s'agit de 18 pixels et de 28 pixels en hauteur de ligne. C' est en passant, la hauteur entre les rangées. Si je diminue ça, tu vas voir que ça va changer. Je suis aussi content de la couleur. Ce que je peux maintenant faire, c'est que je vais ajouter un style de personnage. Maintenant, il va ajouter un style de personnage. Maintenant, si je dois y aller, voyons ce que c'est. C'est 16. Disons que je veux avoir la même chose ici. Je peux juste cliquer dessus et maintenant ça va changer. Maintenant, ils sont tous liés aux personnages ici. C' est le même principe. Si je clique sur éditer et même, disons simplement que je veux un autre arial de police, cela changera dans l'ensemble des documents. Je vais le remettre à Montserrat tout de suite. Vous pouvez même changer la couleur du texte si vous voulez aimer ceci, car la couleur est également enregistrée à l'intérieur de ce style de caractère comme vous pouvez le voir ici. Maintenant, je vais vous montrer un exemple de vie réel. Si vous revenez au détecteur, vous pouvez ouvrir mon plan final, le fichier Rino. Il suffit de cliquer dessus et il s'ouvrira. Comme vous pouvez le voir, j'ai ajouté beaucoup plus de styles de caractères dans ce document ici. Si vous allez zoomer, vous allez voir que j'ai différents styles pour ce site Web. Par exemple, ce titre ici est 36. Vous pouvez aussi voir ça ici. C' est la même chose pour ce titre. Mais j'ai aussi ajouté des styles de personnages, 40 couleurs différentes comme vous pouvez le voir ici. Il y a une dernière fonctionnalité que je ne vais pas montrer en ce moment, mais ce sont des composants, cela fait également partie de la colonne d'actifs. Par exemple, si vous avez une conception de pied de page que vous souhaitez répéter sur toutes vos pages et que vous voulez la même conception sur toutes les pages, vous allez utiliser les composants. Mais c'est tout pour l'instant. Vous avez juste besoin de connaître les styles de personnages et les couleurs. Nous en avons presque fini avec les bases, donc je vous verrai dans la prochaine vidéo. 9. Artboards. Vous devez tout ce que vous devez savoir.: Plans de travail, pourquoi utilisez-vous des plans de travail ? Eh bien, surtout pour les pages. Si je retourne à mon dossier de design final. Comme vous pouvez le voir dans ce design si je vais fermer celui-ci. J' ai nommé mes plans de travail. C' est le plan de travail pour ma page d'accueil. Ensuite, j'ai un plan de travail différent pour la page de conception Home Mobile, puis pour la page Portfolio et comme vous pouvez le voir, sont les plans de travail que j'ai créés et je leur ai donné un nom. Vous pouvez changer le nom de votre plan de travail en double-cliquant dessus, exemple, il s'agit du V1. Je l'ai nommé, mais vous pouvez aussi changer cela au Vietnam, par exemple, et celui-ci à l'Indonésie. De cette façon, vous pouvez simplement structurer votre design. Une chose que vous devez savoir si vous zoomez trop loin, vous allez voir ces points. Vous devez zoomer un peu pour voir les noms réels. Vous souhaitez utiliser les noms de vos plans de travail. Ce n'est pas seulement agréable pour votre propre flux de travail, mais c'est aussi important si vous allez travailler avec le prototype à l'avenir. Parce qu'avec le prototype aussi, vous pouvez facilement cliquer avec le bouton droit de la souris, puis rechercher le nom du plan de travail vers lequel vous voulez lier. Je suggère que vous utilisiez toujours de bons noms sur vos plans de travail. Comment créer un nouveau plan de travail ? Revenons au dossier de l'exercice. Vous pouvez simplement le copier de la même manière que vous copiez éléments simplement en maintenant la touche Alt enfoncée, puis en le suivant, quelque chose comme ça, puis vous pouvez changer le nom en plan de travail 2, par exemple, ou vous pouvez cliquer sur l'outil de plan de travail ici. Je vais fermer celui-ci et vous pourrez voir toutes les options de plan de travail ici. Vous pouvez utiliser un Web, par exemple, 1366. C' est ce que tu peux faire. Vous pouvez faire glisser un plan de travail si vous le souhaitez. Mais ce que je fais la plupart du temps, c'est juste faire un bon plan de travail et ensuite je viens de dupliquer. Mais si je veux un design mobile, je vais juste aller sur les plans de travail et je vais aller sur iPhones 6/7/8 et ensuite je peux juste faire ce plan de travail beaucoup plus grand si j'en ai besoin. Ce que vous verrez aussi, c'est cette ligne bleue ici. C' est la position de défilement. Si vous revenez à mon dossier de conception final, vous pouvez le voir ici aussi. Dans la page de conception mobile, vous pouvez voir que la ligne est là. C' est juste la position standard et vous en aurez besoin si vous allez cliquer sur jouer ici. Nous allons zoomer un peu et si vous allez cliquer sur le jeu, vous obtiendrez un aperçu de votre design. Maintenant, la position de défilement est en bas ici, et cela semble assez normal, mais si je change cette position, je vais copier la valeur, donc je ne l'oublierai pas. Si vous allez changer la position comme ça et que vous allez appuyer sur Play, vous allez obtenir un aperçu comme celui-ci et c'est bien sûr, pas ce que vous voulez. Vous voulez un design de téléphone normal et c'est pourquoi vous devriez le garder à cela et c'est super sympa si vous allez faire un prototype ou que vous voulez juste montrer votre design à quelqu'un d'autre. Vous pouvez aussi le faire pour votre page d'accueil, par exemple, je ne l'ai pas vraiment sur cette page d'accueil ici parce qu'il définit un none, mais vous pouvez le définir à la verticale et maintenant c'est sur 4 000 pixels. Ce n'est pas bon, bien sûr, car alors vous verrez toute la page et vous ne pouvez pas la faire défiler. Maintenant, vous allez juste le mettre à 800 par exemple, peut-être quelque chose comme ça et puis si vous cliquez sur l'aperçu, vous pouvez voir votre site Web en plein écran comme ceci. C' est tout ce que vous devez savoir sur les plans de travail. Allons à l'épisode suivant. 10. Où obtenir les derniers modèles préfabriqués: Bienvenue de retour. Dans cette vidéo, je vais vous montrer où vous pouvez obtenir des modèles préfabriqués. Commençons par nettoyer le fichier d'exercice principal pour l'instant. Je vais juste supprimer cela et enregistrer dans le fichier en ce moment. Donc, si vous n'êtes pas un concepteur très expérimenté ou que vous n'avez tout simplement pas d'inspiration pour un design en ce moment, ce que vous pouvez faire est que vous pouvez accéder aux kits de modèles préfabriqués si vous cliquez sur un fichier et ensuite vous allez obtenir des kits d'interface utilisateur, ils ont différents kits d'interface utilisateur d'Apple, Google et Microsoft. J' ai déjà téléchargé les bons pour vous à l'intérieur du dossier téléchargeable. Dans ce dossier, Kits préfabriqués. Donc, si vous cliquez sur « Google Material Design » par exemple, et que vous allez ouvrir ce fichier, vous allez obtenir un gros fichier avec beaucoup d'éléments de conception différents de Google. Alors, nous allons juste zoomer un peu. Vous allez voir toutes les polices qu'ils utilisent, vous allez voir leurs icônes, et vous pouvez simplement jeter un oeil à ces icônes si vous avez besoin d'une icône par exemple pour votre site Web et vous pouvez simplement la copier parce que c'est juste un fichier XD, super sympa. Est-ce que je vous suggère de copier tout de Google ou de quelqu'un d'autre ? Non. Je suggère que vous utilisiez ceci pour vous inspirer. Mais par exemple, si vous voulez créer une Checkbox, voici la Checkbox de Google. Donc ce fichier peut vous donner juste une belle inspiration. Ceci est principalement axé sur la conception d'applications, comme vous pouvez le voir, mais il y a quelques bonnes choses que vous pouvez également utiliser pour les sites Web. Ainsi, par exemple, les cases à cocher, les boîtes radio, et les boutons comme celui-ci. Mais vous pouvez simplement cliquer sur et vous pouvez les copier dans votre propre fichier. Mac OS a également un joli kit. Cliquez sur les éléments de l'interface utilisateur, puis cliquez sur ce fichier. Comme vous pouvez le voir ici sont les fichiers Mac OS pour Adobe XD. Bien sûr, vous n'allez pas simplement mettre un message comme celui-ci dans votre site Web, mais vous pouvez l'utiliser pour vous inspirer. Voici quelques bonnes choses par exemple, une barre d'onglets avec différents éléments, une revue d'étoiles, un curseur comme celui-ci, ou peut-être une liste déroulante. Comment concevez-vous une liste déroulante ? Le dernier que je veux vous montrer vient de Microsoft. C' est aussi une belle. Si vous cliquez sur le WindowSuixD. C' est un moment assez intéressant parce que je pense que Windows a les options les plus utilisables pour la conception d'un site Web. Si vous allez effectuer un zoom avant, vous verrez tous leurs boutons, un lien hypertexte, par exemple. C' est aussi l'une de ces choses que la plupart des concepteurs qu'ils veulent juste utiliser un bouton pour tout parce qu'un bouton semble joli. Mais parfois, vous voulez simplement utiliser un lien pour créer un lien vers une page spécifique. Voici donc un exemple de conception pour cela. C' est ce que vous pouvez utiliser pour les champs de saisie, par exemple. Voici d'autres curseurs et cases à cocher. C'est aussi assez sympa. Parfois, vous devez créer une liste déroulante avec une vue Arborescence comme celle-ci. Ici, vous pouvez jeter un oeil à combien d'espacement, par exemple, Windows utilise. Qu' est-ce qu'un bel espacement, par exemple. Donc, ces fichiers sont également des champs d'entrée super sympa pour un mot de passe. Parfois, vous devez concevoir et vous connecter. Jetez un coup d'oeil pour vous-même. Mais si vous voulez obtenir la version la plus récente, utilisez aller dans fichier, Obtenir des kits d'interface utilisateur, puis, par exemple, cliquez sur Microsoft Windows. Ensuite, vous allez sur un site Web et vous pouvez télécharger la dernière version des kits d'outils de conception comme ici, outils Adobe XD et vous pouvez le télécharger. C' est déjà super sympa, mais dans la prochaine vidéo va être encore plus agréable. Je vais vous montrer le site Web que j'utilise pour obtenir des polices gratuites, des images gratuites et des icônes gratuites. Alors je te verrai dans la prochaine vidéo. 11. Obtenir des polices et des icônes et et images libres et et palette de couleurs et de remplissage: Dans cette vidéo, je vais vous montrer où j'ai tous mes trucs gratuits que j'utilise pour le design. Par exemple, si je vais à mon design pour ici, vous pouvez voir une police assez cool et créative ici, il s'appelle ensembles RB de jets RB et qui est à partir du site dafont.com. Sur dafont.com, vous pouvez obtenir différentes polices. La plupart d'entre eux sont libres d'utiliser, mais pas tous. Comme vous pouvez le voir, par exemple, cette police n'est gratuite que pour un usage personnel, donc si vous voulez obtenir une police qui est gratuite, également pour un usage commercial, vous devez ajuster votre recherche. Par exemple, si nous allons entrer dans une catégorie manuscrite, je pense que c'est une catégorie cool. Comme vous pouvez le voir beaucoup de polices créatives ici que vous pouvez utiliser. Mais alors si vous voulez rechercher, vous allez aller à plus d'options et vous allez cliquer sur 100 pour cent libre ou domaine public et si vous cliquez sur soumettre, alors il ne vous montrera que les polices que vous pouvez utiliser 100 pour cent gratuitement. Vous pouvez même utiliser ces textes ici, donc par exemple, si vous voulez savoir à quoi ressemblent ces mots explorer, vous allez simplement le taper ici et vous allez juste voir à quoi ressemble les mots explorer, puis vous pouvez simplement cliquer dessus, puis vous pouvez télécharger la police ici et l'installer sur votre ordinateur, puis utilisé dans Adobe XD, c' est un super, super, super site web sympa pour toutes les polices créatives. Un autre site Web qui n'a que des polices gratuites à utiliser est Google Fonts. Ces polices ici ne sont pas si créatives. Même si vous avez des polices créatives ici, en fait beaucoup, mais pas autant que les polices Adobe, alors ce que vous pouvez faire ici, vous pouvez également utiliser un texte. Par exemple, explorez le Vietnam. Si vous allez taper ça ici et cliquez sur Appliquer à toutes les polices, vous allez également voir à quoi ressemble ce texte. Vous pouvez ajuster la taille ici et vous pouvez sélectionner la catégorie, par exemple, si vous voulez seulement des polices manuscrites, vous pouvez simplement les désélectionner toutes et vous verrez les polices manuscrites de Google Fonts en téléchargement expérience dans cela comme un peu différent, si vous voulez avoir ces polices, vous allez cliquer sur plus, et puis il sera juste ici. Si vous décliquez dessus, vous pouvez cliquer sur « Personnaliser ». Parfois, il a plus de versions de sorte que vous pouvez sélectionner celles que vous voulez, puis vous allez cliquer sur « Télécharger » ici, donc c'est ainsi que vous téléchargez les polices à partir des polices Google. Maintenant, pour les icônes ', si vous voulez cliquer sur une icône à ceci est le site Web d'icône que j'utilise. Si vous voulez revenir à cette conception, vous pouvez voir des icônes ici. Par exemple, cette icône de visite est une montagne. Cet hôtel icône un chemin et ce restaurant est un verre. Voici les icônes que j'ai utilisées, et je viens de les chercher ici dans la barre de recherche, flaticon.com, donc si vous voulez une icône pour une maison, par exemple, vous allez chercher une maison et il y a beaucoup d'icônes gratuites que vous pouvez utiliser. Certains d'entre eux sont bates, comme vous pouvez le voir avec la couronne et il expérience de téléchargement ici est également un peu différent. Vous pouvez simplement appuyer sur le plus et il l'ajoutera à votre bibliothèque. Laisse-moi supprimer les anciens. Si vous avez sélectionné quelques icônes comme celle-ci, vous pouvez télécharger la sélection et si vous voulez l'utiliser dans Adobe XD, je vous suggère d'utiliser l'option SVG, puis vous pouvez la télécharger ici. Je veux dire toutes les informations, 40 crédits sont dans le dossier des téléchargements, mais le SVG est des icônes vectorielles ou comme vous pouvez le voir ici, peu importe combien je zoome il sera toujours net et c'est bien sûr ce que vous voulez, donc toujours utiliser SVG, mais vous pouvez également utiliser PNG, puis, par exemple, choisir une plus grande taille, quelque chose comme ça, donc il sera aussi net, mais pas aussi pointu que SVG parce que c'est vecteur, donc ce ne sont pas des pixels et PNG est toujours des pixels, donc c'est ce que vous devez faire pour les icônes. Maintenant, pour les images, le site que j'utilise toujours est unsplash.com et il y a beaucoup de photos hipster cool sur splash, donc si vous, par exemple, avez besoin d'une photo d'un vélo, parce que cela va arriver beaucoup des fois où vous travaillez avec un client qu'il n'a pas encore les images et que vous voulez juste une image de remplissage pour votre arrière-plan, pour vos images, donc ce que vous allez faire, vous pouvez rechercher le vélo et ensuite vous pouvez télécharger sur cette comme celui-ci dans votre dossier de téléchargements. Vous choisissez d'appuyer sur « Entrée » et maintenant vous avez ce fichier dans votre dossier de téléchargements. Image de haute qualité, comme vous pouvez le voir ici, donc c'est super sympa. Un autre site que j'utilise souvent est pexels.com, même principe que sur splash. Vous pouvez également rechercher le vélo et vous obtiendrez différentes images. Il y a beaucoup de ces sites Web, mais si vous commencez, enregistrez-les et vous pouvez simplement commencer à concevoir, puis un autre site Web que vous devez enregistrer est color.adobe.com. C' est un beau site Web pour créer une palette de couleurs. Comme je l'avais créé dans mon film de design ici, j'utilise le site Web Adobe comme inspiration, donc vous pouvez simplement faire glisser ceci comme ça et le mettre sur violet, par exemple, puis créer une palette que vous voulez et vous pouvez faire différentes options ici. Par exemple, monogrammique, c'est celui que j'ai utilisé pour ce site, et puis vous pouvez simplement créer une palette ici. Ensuite, vous pouvez le copier. Par exemple, vous pouvez faire une capture d'écran. Vous pouvez l'amener à l'intérieur d'Adobe XD, mais juste une base, puis simplement utiliser l'outil oculaire pour créer les couleurs dans Adobe XD, puis bien sûr, éditer dans votre colonne d'actifs, donc c'est ainsi que j'utilise ce site Web. Je l'utilise juste pour l'inspiration, puis je le transforme en couleur d'actif dans Adobe XD. Le dernier site que vous voulez enregistrer est ce site, loremipsum.nl et sur ce site, vous pouvez simplement obtenir un texte de remplissage faux. Aussi souvent, lorsque vous travaillez sur un site Web, vous n'avez pas encore le texte, donc vous pouvez simplement copier un texte comme celui-ci et ensuite aller dans Adobe XD, aller dans votre fichier comme celui-ci, placer les textes ici, et vous aurez des textes avec lesquels travailler. Voici le site que je voulais vous montrer. Enregistrez-les sur votre propre ordinateur parce que sur presque tous les sites Web vous avez besoin de polices, vous avez besoin d'icônes, vous avez besoin d'images, et vous avez besoin de texte de remplissage, et bien sûr, vous avez également besoin de couleurs, donc c'est pour cet épisode. J' espère que vous avez trouvé cela utile, et puis nous allons juste sauter à l'épisode suivant. 12. Préparer notre premier planche d'art et une grille: Salut et bienvenue. Dans cet épisode, nous allons préparer notre plan de travail. Ce que nous allons faire, c'est que nous allons laisser ces deux fichiers que nous avons ouverts ici parce que nous allons créer notre propre fichier. Dans cet épisode, nous allons créer le fichier réel que nous allons utiliser, que vous allez utiliser pour créer l'ensemble du site Web. Comment créer un nouveau fichier ? C'est très simple. Vous allez simplement dans « Fichier » et vous cliquez sur « Nouveau ». Ensuite, vous obtiendrez quelques options. Les options que vous allez voir ici, ne sont pas les options que vous allez souvent utiliser pour un site Web de bureau Web. On doit le changer un peu. Pour l'instant, nous allons rendre les choses plus faciles et nous allons cliquer sur cette icône Web, et maintenant il crée un plan de travail. Comme je l'ai déjà dit, les plans de travail sont ici. Donc, si vous cliquez sur les plans de travail, vous verrez quelques paramètres ici. Mais avant de cliquer sur l'une des options, je veux vous expliquer comment fonctionne le web parce que c'est vraiment important. Parce que l'aperçu qu'ils vous ont donné. Maintenant, nous sommes sur notre plan de travail qui est 1920, mais c'est beaucoup trop grand pour un site Web parce que vous devez comprendre que plupart des sites Web sont dans le contenu du site Web réel. Revenons à mon dossier de conception une minute. La boîte principale où tout le contenu est dans, donc dans ce site, est ceci de cette partie gauche à la partie droite ici. Sur un site web moderne, la plupart du temps c'est 1140. C' est un de ces nombres que vous voulez écrire. Je ne sais pas si je l'ai déjà dit, mais c'est presque toujours 1140. Parfois, c'est 1200. Retour à l'époque du site étaient en 1960 et puis nos écrans sont devenus plus grands. Maintenant, le contenu principal du site est 1140. Pourquoi est-ce important ? Ceci est important parce que vous voulez concevoir dans cette colonne. Parce que si vous ne le faites pas, vous allez probablement finir sur un site Web qui n'a pas l'air bien sur tous les appareils. Vous souhaitez également que votre site Web soit visible sur des écrans plus petits. Par exemple, un ordinateur portable de 11 pouces seulement. C' est pourquoi vous devez rester entre ces frontières. Adobe XD a une grande fonctionnalité pour cela et c'est ce qu'on appelle la grille. Si vous cliquez sur la « Grille » et vous pouvez le voir dans mon fichier ici, vous pouvez voir que la largeur de la gouttière, qui est la largeur entre le contenu est 1140. C' est ce que nous allons également créer pour notre propre fichier. Ok les gars, je dois dire quelque chose. Voici Rino, de ton futur. Adobe XD a modifié la fonctionnalité Grille. Maintenant, il n'est plus possible d'activer la grille pour chaque plan de travail individuel. Maintenant, si vous désactivez la grille dans un plan de travail, elle sera désactivée dans tous les plans de travail. plaît maintenant que lorsque vous regardez cette vidéo, parce que cette vidéo a été enregistrée il y a quelques mois. Comme vous pouvez le voir sur les côtés, il reste de l'espace, et vous n'avez pas besoin de beaucoup plus, comme vous pouvez le voir parce que l'espace sur les côtés ici, c'est suffisant pour un site Web et ce plan de travail est seulement 1400. C' est la taille que j'utilise souvent. Revenons à notre nouveau dossier. On n'utilisera pas ce plan de travail. Comme vous allez cliquer sur « Plan de travail » à nouveau. Vous pouvez mieux commencer pour un site web avec celui-ci, qui est 1366. Je vais faire un zoom arrière. Je vais supprimer celui-ci et boum, nous voilà. Nous allons le changer en 1400, mais vous pouvez aussi le mettre au 1360 parce que ça n'a pas vraiment d'importance. moment, nous allons activer la grille parce que nous voulons nous assurer que nos colonnes sont parfaites, et j'ai déjà mis les informations ici. Vous devez vérifier si vous avez les mêmes numéros. Je travaille toujours comme ça. Vous avez deux colonnes et vous avez 1140 par ici. C' est l'espace entre les deux. Ensuite, vous avez 130 des deux côtés. Si vous additionnez cela à deux fois 130, et ce nombre, vous allez finir avec 1400. Ici aussi, j'ai entendu dire que pour certaines personnes, ça ne marche pas comme je l'ai montré ici. Ce que vous devez ensuite faire est d'abord essayer d'ajouter les colonnes et la largeur de la gouttière, puis d'ignorer la largeur de la colonne, puis d'aller à la dernière, puis la largeur de la colonne est automatiquement ajoutée. Si cela ne fonctionne pas pour vous, modifiez l'ordre de mise des nombres. Certains concepteurs aiment concevoir dans une grille. Donc, vous aurez beaucoup de lignes supplémentaires ici. Mais je ne le fais pas parce que la plupart des sites Web, vous avez juste une colonne de trois ou quatre, peut-être une colonne de deux, parfois une colonne de cinq, et vous n'avez pas vraiment besoin des lignes supplémentaires pour cela. Vous pouvez également utiliser les outils d'alignement à l'intérieur d'Adobe XD. Je n'utilise que la grille extérieure comme ça. C' est la solution la plus facile. Maintenant, si votre page devient plus longue, vous pouvez simplement cliquer sur le nom, puis le faire glisser comme vous pouvez le voir. Ensuite, cette ligne apparaît, et cette ligne est la bordure de défilement. D' accord, alors une autre chose que vous aurez besoin de préparer, ce que je pense est importante, est la colonne pour votre téléphone mobile. Si vous revenez à la fonctionnalité de plan de travail ici et que vous faites défiler vers le bas, j'utilise toujours l'iPhone 6. Vous avez aussi des téléphones Android ici. Comme vous pouvez le voir, l'iPhone 6, 7, 8 est un peu plus large que le mobile Android, donc vous avez un peu plus d'espace. Je suggère que vous choisissiez celui-ci ou que vous choisissiez celui-ci. Je choisis toujours l'iPhone. Pourquoi ne pas utiliser l'iPhone le plus récent ? Eh bien, parce que le plus récent iPhone est très long et la plupart des gens ont un écran qui ressemble à ceci, au moins dans le rapport de dimension. C' est pour ça que je suggère toujours que tu utilises celui-là. Je vais changer ça en mobile. Voici aussi la même chose si vous allez faire défiler, vous allez aussi voir cette ligne. Si vous cliquez ensuite sur « Play », vous allez voir une taille de téléphone normale et vous pouvez faire défiler vers le site Web si vous avez du contenu à l'intérieur de celui-ci. Sur le plan de travail mobile, nous allons également configurer la grille, alors cochez cette case ici. C' est ainsi que je l'ai configuré, et peut-être que les fonctionnalités par défaut sur votre écran ne sont pas les mêmes, mais vous voulez avoir au moins 20 pixels des deux côtés. Comme vous pouvez le voir, si vous changez cela à 10, vous aurez moins d'espace des deux côtés, mais vous voulez lui donner un peu de place. Revenons à mon téléphone maintenant. Cliquez sur « Mobile », cliquez sur « Grid » et comme vous pouvez le voir, j'ai même utilisé 30 ici, ce qui le rend un peu plus agréable, mais vous avez besoin d'au moins 20. Mais la plupart des designers aiment plus d'espaces, donc pour ce projet, nous allons aussi le mettre à 30. Parce que plus d'espace blanc sur le côté gauche et droit va juste le rendre plus propre. Au moins utiliser 20, mais je préfère 30. Maintenant, nous sommes entièrement prêts à commencer à concevoir. Maintenant, ce que je veux que vous fassiez, c'est aller à « Fichier » et aller à « Enregistrer » parce que nous allons enregistrer ce fichier. C' est aussi quelque chose si vous êtes des plantages XD et que vous n'avez pas enregistré votre fichier, je pense que vous savez ce que cela signifie. Je l'enregistre toujours sur mon ordinateur car je veux que les fichiers soient dans ma Dropbox, mais vous pouvez également utiliser Adobe Cloud. Mais si vous n'avez pas d'Adobe Cloud, je vous suggère d'utiliser votre propre ordinateur. Maintenant, je ne veux pas l'enregistrer sur mon bureau. Je ne veux pas l'enregistrer dans le même dossier. Je vais le mettre dans le dossier Fichiers de cours pour l'instant, et je vais lui donner un nom, Xd Course Exercice File, et je vais cliquer sur « Enregistrer ». Maintenant, vous pensez peut-être, ok, pourquoi devons-nous nous préparer autant ? Parce que je veux juste commencer. Eh bien, il est très important que vous préparez vos plans d'une bonne façon parce que si vous le concevez trop grand par exemple, et que vous travaillez avec un développeur ou que vous faites le site vous-même, vous le construisez dans WordPress ou vous codant le site vous-même, si vous l'avez conçu dans les bonnes propriétés, vous pouvez simplement cliquer sur un élément, et vous pouvez juste voir, oh, c'est 46. Si vous l'avez conçu trop grand, vous devez faire des prédictions sur la taille de tous les éléments dans un vrai site Web. C' est pourquoi il est si important de préparer vos plans de travail comme nous l'avons fait en ce moment. Je sais que c'est un peu ennuyeux, mais c'est très important. Allons à l'épisode suivant où nous allons préparer nos couleurs. 13. Préparer nos couleurs: Bienvenue de retour. Dans cette vidéo, je vais vous montrer comment vous pouvez créer vos propres palettes de couleurs, avec la couleur de votre choix. Nous allons ajouter les couleurs à notre colonne d'actifs, les couleurs réelles que nous allons utiliser pour notre site Web. Pour ce site, j'ai cette palette ici, et je commence toujours par quelque chose comme ça. J' ai un fond blanc, c'est juste un blanc pur. Ensuite, j'ai un presque blanc, qui est comme un blanc cassé, comme vous pouvez le voir. Puis un plus léger, puis une couleur super brillante, puis quelques tons sombres. Toutes ces couleurs sont dans la même gamme de couleurs. Ce que je veux dire avec ça, c'est que toutes ces couleurs ont la même valeur de teinte, je vais vous montrer ce que je veux dire. Pour l'instant, je vais juste copier toute cette palette de couleurs de mon design final, fichier Rino. Nous allons retourner à notre dossier, et nous allons baser ces couleurs ici. Pour l'instant, nous allons les faire glisser en dehors des tableaux d'art. Comme je l'ai dit dans la vidéo des actifs, vous pouvez les sélectionner tous, puis les ajouter aux actifs ici. De cette façon, si nous changeons la couleur ici, elle sera changée sur l'ensemble du site. À partir de maintenant, nous sommes prêts pour la prochaine étape. Mais disons simplement que vous concevez un autre site Web, parce que ce site Web que nous allons construire ensemble est bien sûr un exemple, et vous utiliserez Adobe XD pour de nombreux projets différents. Ce que je voulais vous montrer, c'est comment vous pouvez créer vos propres palettes de couleurs. Disons simplement que vous avez un client, et que votre client a un logo, alors disons simplement que vous travaillez pour la société Nikon. Ce serait plutôt cool. C' est le logo du client, alors comment pouvez-vous créer une palette à partir de ce logo ? Ce que vous allez faire est, tout d'abord, vous allez faire un duplicata de celui-ci, où vous venez de créer vos propres cercles avec cet outil ici. Ensuite, ce que vous devez faire est de faire un autre duplicata, et vous devez savoir quelle est la couleur de la teinte, de la couleur de cette marque principale. Vous avez un des cercles que vous allez utiliser à titre de référence, et vous allez prendre l'outil pipette ici. Vous pouvez cliquer dessus ou vous pouvez cliquer sur I, alors cliquez dessus et puis déposez-le comme ça. Maintenant, cliquez sur le remplissage, et nous allons changer le code hexadécimal, qui est le code couleur ici, en HSB. Maintenant, vous pouvez voir la valeur de teinte ici, donc c'est la valeur de teinte. C' est la saturation, et c'est la luminosité. Si tu fais tomber ça, ça va être plus sombre. Si tu baisses ça, ça va être plus vers Grey. Si vous changez cela, cela va changer la couleur réelle. Encore une fois, laissons tomber l'œil, cliquez dessus, ouvrez-le, puis vous allez voir que la valeur de teinte de cette couleur est 52. Celle-ci est blanche, on n'a pas besoin de changer ça. Mais pour celui-là, ouvrez-le, et tapez le 52 ici. Je vais aussi le faire pour celui-là, 52. Maintenant, j'ai créé une nouvelle palette à partir de ce logo, donc ces couleurs seront toujours belles à côté de cette couleur principale ici. Vous pouvez également ajouter cette couleur, bien sûr, à la palette si vous le souhaitez. Mais c'est ainsi que vous pouvez créer vos propres palettes à partir d'un logo ou d'une image. Parfois, vous devez faire quelques ajustements, car avec le jaune, par exemple, le jaune n'a pas l'air si brillant par rapport à cette valeur. La saturation ici est de 94 et 100, et c'est aussi la même chose. Mais cela n'a pas l'air aussi brillant que cette couleur, donc parfois vous devez la changer un peu pour la faire correspondre. Je ne recommande pas toujours cela, mais quand cela a l'air vraiment différent, vous pouvez changer les valeurs, et faire une palette qui ressemble presque à celle-ci. Ou une autre palette que vous pouvez trouver en ligne, ou utiliser la couleur Adobe, ou peut-être une image de pinterest, ou autre chose. C' est tout ce que je voulais montrer pour la palette de couleurs, pour l'instant je vais juste supprimer tout cela. Nous allons cliquer sur Enregistrer pour l'instant, et la dernière chose que je veux faire est de créer un nouveau tableau d'art pour tous les éléments de notre marque. Maintenant, je vais juste cliquer sur le titre du tableau d'art, appuyer sur alt, et faire glisser un nouveau tableau d'art ici. Donne-lui juste un peu de distance comme ça. Éteignez la grille, attrapez vos couleurs et mettez-les à l'intérieur de ce tableau d'art. Nous allons utiliser cette planche d'art aussi pour le prochain épisode où nous allons préparer toutes nos couches de textes. Ce sera vraiment bien parce que si nous avons beaucoup d'éléments déjà préparés ici, nous pouvons simplement faire glisser un élément d'ici à ici. Ensuite, nous pouvons construire la page très rapidement. Je vais renommer cette planche d'art en styleguide, et je vais rendre la couleur de l'arrière-plan quelque chose un peu plus sombre pour que je puisse réellement voir toutes les couleurs ici. Ça devrait être bon pour l'instant. Je vais le sauver à nouveau, puis dans le prochain épisode, nous allons préparer toutes nos polices. 14. Préparer nos polices: Bienvenue de retour. Dans cet épisode, nous allons préparer tous nos calques de texte. Il s'agit également d'une étape importante avant de commencer à créer toutes les pages de votre site Web. Je vois souvent des designers qui ne s'en tiennent pas aux tailles de police, à l'espacement des polices, à une hauteur de ligne, puis il commence à devenir vraiment désordonné après un certain temps. Préparons juste tous les éléments principaux. Nous n'allons pas tout préparer, sinon nous n'aurions pas beaucoup de liberté créative. Mais vous avez toujours besoin d'un grand titre, d'un titre moyen, d'un corps de texte unique, vous avez besoin de deux boutons, vous avez besoin de ceux sur chaque site Web. C' est un avantage, et ce qui est également avoir avantage est que vous pouvez déjà voir si tout semble bien ensemble avant de commencer à concevoir la page. C' est ce qu'on va faire. Comme vous pouvez le voir, par exemple, il s'agit d'un très gros titre et il s'agit d'un titre de taille moyenne. Retournez à notre dossier d'exercice. Nous allons aller aux tableaux d'art du guide de style, et nous allons prendre l'outil de texte. Assurez-vous d'ailleurs que vous avez les polices installées. Donc, dans le dossier polices, assurez-vous d'avoir installé toutes ces polices sur votre ordinateur. Mais bien sûr, vous pouvez également utiliser vos propres polices si vous voulez pratiquer un signe différent de celui que je crée en ce moment. Ok, donc pour l'instant, je vais prendre l'outil de texte et je vais faire le gros titre d'abord. Ne cliquez pas simplement, mais faites une boîte parce que nous voulons voir la hauteur de la ligne et c'est la hauteur entre les différentes lignes. Je vais mettre ça sur la gauche par ici. Je vais simplement taper  : « C'est un gros titre avec au moins deux lignes de texte. » Cliquez sur votre outil de sélection. Nous allons changer quelques paramètres ici. Tout d'abord, nous allons changer la couleur, alors appuyez sur « I », puis allez à la couleur foncée principale et cliquez dessus, donc maintenant c'est la bonne couleur. Modifiez également cette valeur à 54 et celle-ci à 64, et cela dépend des polices que vous utilisez. Mais j'utilise presque toujours quelque chose autour de 50 pour mon gros titre principal. Donc laissez-le comme ça et maintenant en faire une copie avec « Alt » et « Shift », puis faites glisser, relâchez d' abord votre souris, puis « Alt » et « Shift » et maintenant faites notre deuxième grand titre. Maintenant, créez notre h2, qui est le titre pas si grand, mais encore assez grand. J' utilise toujours quelque chose autour de 36 et maintenant vous devez ajuster à la hauteur de la ligne à quelque chose comme 44. Alors ça ressemble à un petit frère de celui-ci. Vous pouvez même changer le texte à quelque chose comme celui-ci. Ensuite, sur le site, j'ai également utilisé un autre titre encore plus petit. Nous avons ce titre, c'est un grand, et le titre médiums, et un titre plus petit pour mes articles de portefeuille, par exemple, qui est 24. Je vais aussi préparer ça. Faites une autre copie avec alts, faites ceci 24, puis changez la hauteur de la ligne à 32. Maintenant, vous pouvez voir deux lignes parce que cette boîte est trop grande, alors rendez-la plus petite, et maintenant vous pouvez voir la hauteur de la ligne. Vous pouvez voir que ces corrections. Cette ligne, nous n'avons pas besoin de cette ligne pour l'instant parce que nous ne ferons pas défiler à l'intérieur de ce tableau d'art. Cliquez sur votre tableau d'art, allez dans « Scrolling » et définissez ceci sur zéro. Cette ligne va disparaître. Maintenant, pour les textes du corps, comme je l'ai déjà dit, nous avons besoin d'un texte ipsum lorem, qui est juste du texte de remplissage que chaque concepteur utilise. Il suffit d'aller à loremipsum.nl ou j'ai une nouvelle extension qui s'appelle générateur Lorem Ipsum et vous pouvez créer un texte ipsum lorem comme ceci. Pour l'instant, je vais juste copier celui-là. Copiez-le, revenez à votre Adobe XD. Nous allons faire une copie de celui-ci, « Alt » cliquer et « Shift », faire une copie, sélectionner tous les textes et coller votre texte lorem ipsum, n'a pas d'importance que c'est trop long. Cliquez à l'extérieur de celui-ci et faites celui-ci 16. Pour les textes corporels, qui est la partie principale de votre gros texte. De gros textes longs comme ça, j'utilise toujours 16 et parfois même 18. Parce que sur la plupart des sites Web et la plupart des écrans, cela semble assez bien. Je vous conseille 18 ou 16. Pour ce site est 16. Bold n'a pas l'air si bon pour le corps du texte, qui signifie des textes qui sont longs pour ce site, j'ai utilisé le médium. Dans beaucoup de polices, il est aussi parfois appelé régulier et cela devrait être assez bon. Peut-être parfois léger, mais je m'en tiens toujours à régulier ou moyen. Là pour la hauteur de la ligne, j'utilise quelque chose comme 25 et puis il ressemble à ceci. Ok, donc maintenant nous avons préparé les styles de texte, et pour les textes principaux, ce qui semble aussi bien, si le texte principal n'est pas aussi noir que les titres, mais un peu gris. C' est pour ça que j'ai utilisé cette couleur. Mettons ces deux-là l'un à côté de l'autre, et je vais changer la couleur ici. Travaillons avec Gray pour l'instant. Comme vous pouvez le voir, il se fond un peu mieux si vous choisissez un ton gris. Pour mon site, cela semble gris mais ce n'est pas gris, c'est en fait violet mélangé avec du gris. C' est pourquoi il se marie si bien avec l'arrière-plan et cette couleur et ce titre, et il a juste l'air très agréable. Cliquez sur ce texte et pour l'instant, je vais choisir la couleur que j'ai utilisée pour le texte, qui est celui-ci. Sur ce fond, il n'a pas l'air si bon, mais sur un site Web, il a l'air vraiment bien, donc aligné correctement, et ensuite nous allons créer notre bouton principal. Pour les boutons, je n'utilise pas le bloc de texte, j'utilise juste une seule ligne. Cliquez sur le « T », cliquez dessus, puis tapez quelque chose comme « Lorem ipsum » ou « Ceci est un bouton ». Retournez à votre outil de sélection, et pour vos boutons, je, la plupart du temps utiliser semi-gras. La couleur du texte des boutons de ce site Web est blanche, et l'arrière-plan est un rectangle. Je vais prendre ton rectangle et faire un grand rectangle comme ça. Décochez la bordure. Assurez-vous que votre couleur est réglée sur la couleur du bouton que nous voulons. Maintenant, placez-le sous vos textes de bouton, mais maintenant c'est au-dessus de ce calque de texte. Donc, utilisez des commandes, puis des crochets gauche, si vous n'êtes pas encore utilisé pour les touches courtes, allez dans vos calques, puis faites-le glisser comme ceci, assurez-vous qu'il est sous le calque de texte. Maintenant position à comme cela rendre encore un peu plus grande tenue « Alt », de sorte que des côtés seront échelle proportionnellement, quelque chose comme ça devrait être bon. Pour le texte lui-même, J'utilise toujours 15, C'est un peu plus petit pour les boutons. Je vais utiliser 15 pour l'instant. Attrapez à nouveau la sélection et alignez-la au milieu. La dernière chose que j'ai faite, c'est j'ai donné les boutons, les coins arrondis. Pour ce site, j'en ai utilisé quatre. Ainsi, vous pouvez saisir les coordonnées ici et ensuite les mettre sur quatre, vous pouvez voir le nombre ici, ou vous pouvez simplement le taper et utiliser vos touches fléchées pour créer quelque chose qui semble bien. Mais quatre est ce que j'ai utilisé pour ce site. Maintenant, regroupez ces deux ensemble, alors cliquez sur le texte maintenez « Maj », cliquez également sur l'arrière-plan. Maintenant, ces deux sont sélectionnés et appuyez sur une commande « G » ou un clic droit, puis « Groupe ». Maintenant ce bouton est un groupe et nous pouvons le déplacer comme ça. Aussi une dernière chose, assurez-vous que vous sélectionnez un texte, double-cliquez dessus, puis assurez-vous qu'il est aligné au milieu. C' est bien parce que maintenant si vous voulez agrandir le bouton, il restera automatiquement au milieu de ce bouton. Donc c'est aussi un joli petit tour. Maintenant, nous avons préparé la plupart des couches de textes importantes, mais ce n'est que pour le web. Laissez-moi vous montrer ce que je veux dire. Pour le web, j'ai utilisé un titre de 54 points ici, mais sur un téléphone portable qui semble beaucoup trop grand parce que c'est 64. Je vais vous montrer ce que je veux dire parce que si j'utilise la même taille de titre sur les mobiles et me laisse juste cliquer sur un des textes mobiles, et je vais mettre ça sur 54, il va paraître beaucoup trop grand sur les téléphones mobiles. Vous voulez que vos titres soient un peu plus petits sur mobile. Revenez à votre fichier de conception, et vous n'avez qu'à le faire pour ces titres. Parce que les textes corporels ont souvent l'air bien sur mobile. Prenez tous vos titres, faites-les glisser vers les droits, relâchez-le faire peut-être vos tableaux d'art un peu plus grands à notre commentaire cliquez sur l'arrière-plan du tableau d'art, faites votre tableau d'art un peu plus grand, et ensuite nous allons rendre ces champs un peu plus petits. Vous ne pouvez pas utiliser la même astuce que pour les images, par exemple, et utilisez simplement le « Shift » car alors la taille de la police ne changera pas. Nous devons le faire d'une manière différente, ce qui est nécessaire pour changer les valeurs ici. Par exemple, le rendre un peu plus petit. Pour mon site web, j'ai utilisé 46 et 52 pour ce titre, j'ai utilisé 30 et 36, 38, et ce titre n'a pas l'air si mauvais sur mobile. Tu sais quoi ? Nous allons juste avoir seulement des titres personnalisés pour les grands titres ici. Ce sont les sites mobiles et ce sont les sites de bureau. Laisse-moi juste créer un titre très rapidement. Un bureau, je vais utiliser une autre police sinon, c'est déroutant. Je vais utiliser quelque chose de vraiment différent, quelque chose comme Helvetica. va le rendre plus petit et on va en faire une autre couleur. Nous ne le confondrons pas avec notre propre design, bureau et mobile. Maintenant, nous savons quoi, ce qui est. Maintenant, la dernière chose que nous voulons faire est de les ajouter au panneau d'actifs. Ouvrez à nouveau votre panneau de ressources, sélectionnez tous vos calques de texte de bureau, puis appuyez sur le plus sur « Styles de caractères », et maintenant également sélectionné ces deux et appuyez sur plus. Mais pour ces deux-là, vous voulez savoir qu'ils sont mobiles. Vous pouvez changer le nom ici. Cliquez en dehors de celui-ci, puis renommez ceux aussi, et peut-être mettre un m derrière, donc vous savez, c'est pour mobile. Vous pouvez également les réorganiser si vous voulez, comme ceci. Vos téléphones portables sont ici ensemble. C' est tout ce qu'on avait à faire pour préparer tous les téléphones. Maintenant va être vraiment facile de construire notre page. Nous avons déjà un bouton, nous avons un corps de texte, et nous avons quelques titres et toutes nos couleurs. J' espère vous voir dans la prochaine vidéo où nous allons commencer à construire l'en-tête que nous allons voir ici. Maintenant, nous sommes entièrement prêts à commencer à concevoir le site Web réel. J' espère vous voir dans le prochain épisode. 15. La grande image et menu en en-tête: Salut et bienvenue à ce nouveau chapitre. Maintenant, nous allons enfin commencer à construire notre page. Nous avons préparé ce design d'une manière très professionnelle. Dans cette vidéo, nous allons créer cette section que nous allons voir ici. C' est une belle section propre avec un en-tête transparent et quelques calques de texte différents. Commençons juste. Nous sommes ici dans le dossier de l'exercice, et voici le tableau d'art que nous avons préparé. Nous avons mis en place notre grille comme nous pouvons le voir, que nous allons utiliser pour le contour. Nous avons besoin de beaucoup de fichiers à partir de ce dossier, le fichier du site Web, alors assurez-vous que celui-ci est ouvert. La première chose dont nous avons besoin est la photo, donc c'est la photo que j'ai utilisée pour l'en-tête. Mais d'abord, nous allons créer une forme, donc il suffit de saisir l'outil rectangle pour l'instant et créer une forme parce que nous allons créer l'arrière-plan en premier. Créez une grande forme comme celle-ci et faites-la s'adapter à l'écran, quelque chose comme ça, et maintenant nous allons lui donner une couleur d'arrière-plan. Décochez d'abord la bordure. Maintenant, il est blanc et maintenant lui donner une couleur de fond, qui est cette couleur sombre. Maintenant, il y a un bon outil à l'intérieur d'Adobe XD et c'est que vous pouvez faire glisser une image sur une forme, puis elle sera automatiquement masquée. Je vais vous montrer comment ça marche. Mais d'abord, nous devons créer une copie car si vous faites glisser l'image en ce moment, comme ceci, elle créera automatiquement une forme, mais la couleur foncée a disparu. Nous avons besoin de cette couleur foncée parce que dans notre design final, il y a une couleur foncée sous notre image, et cette image a une transparence de 30%. Revenons à notre fichier et supprimons cette image pour l'instant avec la commande Z. Tout d'abord, nous allons créer un autre duplicata de ce calque, donc je vais faire glisser Alt, et maintenant j'ai deux de ces calques, placez-les au-dessus de l'un l'autre. Maintenant, prenez votre image et faites-la glisser sur la toile, alors maintenant j'ai une image et un arrière-plan. C' est comme ça que je le fais toujours. Vous pouvez également définir un arrière-plan pour l'ensemble de votre tableau d'art, mais je veux avoir cette couleur blanche pour l'arrière-plan de mon site Web, c'est pourquoi je crée une forme distincte pour l'arrière-plan. Maintenant, j'ai une image, et je vais mettre cette image sur une opacité de 30%. Il suffit de saisir l'opacité ici ou d'appuyer sur 3, par exemple, ou 4, en fonction de votre image et de votre arrière-plan, bien sûr. Pour l'instant, je vais le mettre à 30%. Maintenant, attrapez les deux. Nous allons les regrouper, alors faites un clic droit et cliquez sur Groupe. Maintenant, nous allons les verrouiller avec Commande-L ou cliquez avec le bouton droit, puis verrouiller, parce que nous ne pouvons plus le déplacer et nous pouvons facilement placer des éléments dessus. C' est la première partie, et maintenant nous allons créer le menu supérieur, donc nous avons besoin d'un logo. Le logo est la version blanche que vous pouvez voir ici, c'est celle-ci. Maintenant, je vais la faire glisser sur mon canevas, et si je fais glisser une autre image au-dessus d'une toile qui n'est pas verrouillée, elle remplacera aussi cette image. C' est l'une des choses que vous devez faire attention. Parfois, vous avez beaucoup d'images sur votre tableau d'art, puis vous voulez faire glisser un logo en dehors de votre tableau d'art, afin qu'il ne remplace pas et ne masque pas dans la forme sur laquelle vous le faites glisser. C' est juste un petit conseil. Pour l'instant, nous allons simplement faire glisser ceci et utiliser la grille que nous avons créée et rendre cela un peu plus petit comme ceci. Attrapez-le, zoomez, et c'est bon pour le moment. Maintenant, nous allons créer le menu. Prenez l'outil de texte ici et nous allons l'aligner parfaitement après cela, donc n'a pas vraiment d'importance où vous cliquez. Il suffit de cliquer quelque part et de taper dans Accueil. Maintenant, pour le site final, nous avons également utilisé semibold beaucoup de fois. Comme vous pouvez le voir, nous avons un texte ici, et c'est semibold, mais nous n'avons pas ajouté de semibold à nos styles de personnages. Ce que je te conseille de faire pour te rendre la vie un peu plus facile c'est de faire un autre style ici que nous allons utiliser beaucoup de fois. Il suffit de copier ce titre, par exemple, d'en faire un autre, il suffit de le mettre sur 16 sur semibold, hauteur de la ligne va être un peu différente, 22 pour l'instant. Nous allons aussi ajouter ce style à notre bulletin de vote, et je vais le faire glisser vers le bas. Maintenant, nous avons deux styles de 16. Ceci est pour le corps du texte et c'est pour les titres. Maintenant, revenez à votre fichier et maintenant nous pouvons utiliser ce même style. Si nous cliquons sur nos textes d'accueil et que nous cliquons sur celui-ci, maintenant ce sera exactement le même style. Mais comme vous pouvez le voir maintenant, c'est noir, donc nous ne pouvons pas vraiment le voir. Maintenant, nous allons cliquer sur blanc, et maintenant nous avons ce style, mais ensuite avec une couleur blanche. Maintenant, je vais faire quelques doublons pour toutes mes pages, donc je vais maintenir Alt et Shift, puis relâcher d'abord votre souris, puis relâcher Alt et Shift. Faites cela à nouveau et recommencez, puis double-cliquez et modifiez le texte. Cliquez à l'extérieur, à l'extérieur, boum, et maintenant j'ai fini. Comme vous pouvez le voir dans mon design final, il y a aussi un état actif sous cette icône Accueil. Un état actif signifie que l'utilisateur sait sur quelle page il est, donc nous allons aussi le faire sur notre conception, mais nous allons d'abord l'aligner un peu. Je vais les attraper tous comme ça, et je vais m'assurer qu'il est aligné au milieu de celui-ci. Comment je vais faire cela est que je vais également sélectionner un logo et cliquer sur celui-ci, donc maintenant il sera parfaitement aligné au milieu. Maintenant, je vais faire glisser ces quatre, les mettre à droite ici, lui donner un peu d'espacement, les sélectionner tous, puis saisir cet outil. Maintenant, l'espace entre eux est exactement le même. Maintenant, nous avons juste besoin de créer une ligne, alors allez sur votre page d'accueil, prenez l'outil de ligne, et créez simplement une petite ligne sous votre texte d'accueil. Je crois que j'ai utilisé deux ou trois en taille. Je vais le mettre à deux pour l'instant et la couleur de la bordure est la couleur pourpre que j'ai utilisé. Maintenant, revenez à votre outil de sélection, déplacez-le un peu vers le haut, qui a l'air bien. Maintenant, ce que vous voulez faire est de saisir votre en-tête entier et regrouper parce que nous allons avoir besoin de cet en-tête sur beaucoup de pages, bien sûr, donc maintenant nous avons un petit groupe avec tous les éléments qu'il contient. Maintenant, nous devons créer ces textes et maintenant cela va être vraiment facile. Mais la seule chose que nous devons nous assurer est que nous avons installé cette police, qui s'appelle Abuget. Si vous allez dans votre Finder et que vous allez dans les polices de dossier, assurez-vous que vous avez installé Abuget, et maintenant nous pouvons créer un design qui ressemble à ceci. C' est le gros titre, 54, c'est le 16 semibold, et c'est juste un corps de texte normal. Ce sera vraiment facile parce que nous avons préparé nos styles ici. Prenez ce titre, faites un duplicata, maintenez Alt comme ça, et relâchez-le, prenez un texte de votre corps comme celui-ci, et prenez un de vos semi-boules comme ça, et puis nous avons juste besoin de l'Abuget, mais nous n'ont pas vraiment besoin d'un style pour cela car il n'y a qu'un seul endroit sur le site où Abuget est utilisé. Maintenant, nous allons d'abord aligner cela. Je sélectionne les deux derniers et les rend blancs et sélectionne le supérieur et le rend violet. Je ne vais pas rendre toutes les couches de texte cette série de tutoriels parfaits parce que cela n'a pas vraiment d'importance, donc parfois je vais juste laisser les textes standard comme vous pouvez le voir ici. Pour les textes Abuget, ce que vous pouvez faire, c'est que je ferais juste un nouveau calque de texte. Cliquez dessus ici, tapez simplement votre nom, retournez à l'outil de sélection, sélectionnez la police, faites-la blanc, et agrandissez beaucoup. Pour ce type de polices créatives, les tailles de polices peuvent être très différentes car elles ont beaucoup de formes différentes. Je ne recommande pas d'utiliser les mêmes tailles que celles que nous avons utilisées pour celui-ci car avec les titres créatifs, cela va être très différent. Comme vous pouvez le voir en ce moment, je dois l'aligner un peu mieux pour le rendre agréable. Pour l'alignement, bien sûr, vous pouvez saisir tous ces éléments, puis appuyer sur cet outil pour les faire aligner correctement. Mais Xd l'alignera au bas de la zone de texte réelle, donc si je vais faire glisser la zone de texte jusqu'ici, et ensuite je vais utiliser le même outil que vous pouvez voir maintenant, cela changera. Ce n'est pas toujours parfait. Si vous êtes sur l'alignement et l'utilisation de cet outil sur des calques de texte, je vous suggère d'essayer de le faire correspondre comme ceci. Aussi pour celui-ci, faites-le aussi petit que possible, puis utilisez l'outil d'alignement car alors il sera mieux sur l'œil. C' est là pour ce tutoriel. Je vais décocher la grille pour l'instant pour voir ce que nous avons créé. Comme vous pouvez le voir, puisque nous avons préparé les styles, c'était un processus vraiment facile. Il suffit de le faire glisser, changer les couleurs, changer le texte, et maintenant nous pouvons passer à la section suivante, qui sera cette section avec une forme personnalisée et cette barre ou boîte ici avec nos icônes vectorielles SVG personnalisées. J' espère vous voir dans la prochaine vidéo. 16. La forme de vague: Salut et bienvenue. Dans cette vidéo, nous allons créer cette forme personnalisée et cette barre de superposition que nous voyons ici. Comme je l'ai déjà dit, ces icônes sont des portes d'effet, donc peu importe jusqu'où vous zoomez, elles seront toujours nettes. Il y a une belle ombre douce sous cette barre. Tu ne le vois pas vraiment, mais quand je l'éteins, tu peux le voir. Ça le fait flotter un peu. Maintenant, nous allons créer ces pièces, revenons à notre dossier. Ce que nous allons faire, c'est que nous allons d'abord créer la forme personnalisée. La forme personnalisée a cette couleur, elle a l'air blanc, mais ce n'est pas vraiment blanc. Utilisez l'outil Plume car avec l'outil Plume, vous pouvez créer n'importe quelle forme de votre choix. Si vous avez travaillé dans Photoshop ou Illustrator avant de connaître cet outil, mais si vous ne connaissez pas cet outil, vous devez savoir deux choses. Vous pouvez cliquer, cliquer, cliquer, cliquer, cliquer, cliquer pour créer une forme et pour créer une forme incurvée que vous cliquez et que vous maintenez. De cette façon, vous pouvez créer des formes personnalisées comme celle-ci, puis si vous voulez la fermer, vous revenez à votre premier point et ensuite vous pouvez le remplir avec une couleur, vous ne pouvez pas voir en ce moment parce que c'est blanc. Par exemple, vous pouvez créer une forme comme celle-ci. Revenez à votre outil de sélection, cliquez en dehors de celui-ci, puis cliquez dessus, puis supprimez-le. Revenez à l'outil Plume via le P de votre clavier, et maintenant créons cette forme. Voyons comment ça marche. Tout d'abord, bas puis haut, puis bas à nouveau. Cliquez ici, et c'est le premier, puis cliquez quelque part ici et faites-le glisser. Grosse vague ici, quelque chose comme ça, et on pourra ajuster ça plus tard si tu veux. Maintenant, vous pouvez aller un peu en dehors de votre application, il n'a pas vraiment d'importance ou juste sur le côté et je fais juste la dernière forme. Cela n'a pas l'air parfait, mais pour l'instant, c'est ce que nous allons faire, cliquez ici, puis retournez en arrière et cliquez ici et puis fermez-le comme ça. Maintenant, nous allons lui donner une couleur, que nous devons nous assurer qu'elle est allumée, et nous allons supprimer la bordure. Cliquez à l'extérieur, revenez à votre forme et déplacez-la vers le haut. Comme vous pouvez le voir en ce moment, ça ressemble à une jolie vague. Ce n'est pas parfait, donc si vous voulez ajuster la forme, vous pouvez double-cliquer dessus, puis cliquer sur vos points d'ancrage. C' est ce qu'ils appellent des points d'ancrage, et vous pouvez ajuster les formes comme ceci. Changez cela un peu parce que je veux une forme qui ressemble un peu plus à mon design. En outre, cela dépend de sorte que vous pouvez ajouter plus de points plus tard. Par exemple, si vous voulez une autre bosse ici, vous pouvez simplement cliquer et ajouter un autre point d'ancrage, déplacer vers le haut et ensuite utiliser les poignées ici si vous le souhaitez. Ensuite, si vous voulez supprimer un de ces points d'ancrage, il suffit de cliquer sur le « Point d'ancrage » et vous cliquez sur « Supprimer », et maintenant vous êtes de retour à votre conception originale, au moins il a changé un peu. Parfois, vous devez l'ajuster un peu comme ça. Maintenant, ça a l'air sympa. Maintenant, ce que je vais aussi faire est de cliquer sur l'ensemble « Plan de travail » et de changer l'apparence de fond à une couleur qui est sur mon palais. Maintenant, il semble que cette forme et le fond n'est qu'une seule pièce. Encore une fois, je vais verrouiller cette couche, alors cliquez dessus, puis cliquez avec le bouton droit de la souris et cliquez sur « Verrouiller » ou « Commande L. » Maintenant, nous allons créer la forme personnalisée. Revenez à cet outil et créez une forme. Nous ne savons pas où se trouve la taille du plan de travail en ce moment, donc je vais cliquer à nouveau sur « Plan de travail », activer la grille, puis revenir à mon outil de sélection, cliquer sur « Retour » sur le rectangle et placer le rectangle comme ça. Je vais le placer au milieu de cette ligne. Si nous allons cliquer sur « Play » maintenant, nous verrons la moitié de cette boîte, qui a l'air vraiment sympa. C' est bon pour l'instant, éteignez la bordure et faites-en la couleur sombre. Maintenant, pour l'intérieur de cette boîte, nous avons utilisé à nouveau le Montserrat Semi Bold, et nous avons quatre icônes. Commençons simplement par importer les icônes. Revenez à votre recherche, accédez aux fichiers du site Web, puis accédez aux icônes d'accueil. Ce sont les quatre icônes. Maintenant, avant de les faire glisser, assurez-vous que vous êtes quelque part en dehors de votre plan de travail, et dirigez-les comme ça parce qu'ils peuvent être vraiment gros, maintenant ils sont vraiment petits, mais parfois ils sont énormes puis ils gâchent votre plan de travail. Parfois, vous ne pouvez pas vraiment les trouver parce qu'ils se clipsent à l'intérieur d'un plan de travail. Assurez-vous que vous êtes à l'extérieur de votre plan de travail lorsque vous insérez des éléments. Maintenant, je vais les sélectionner et les faire glisser sur votre Canvas comme ceci. Parfois, vous ne pouvez pas vraiment les sélectionner comme ça, c'est vraiment frustrant parce que vous avez vraiment besoin de cliquer sur les formes réelles de vos icônes. Comme vous pouvez le voir en ce moment, si je veux faire glisser tous ceux-ci, maintenant ça marche, mais ça ne marche pas toujours. Vous devez vraiment être sûr que vous voyez ces lignes bleues et ensuite vous pouvez faire glisser les icônes. Si vous n'aimez pas ce glissement, ce que vous pouvez également faire est de les sélectionner tous, puis appuyez sur « Commande X » et faites défiler jusqu'à la partie où vous les voulez, puis appuyez sur « Commande V » Commande X est pour couper, puis V est pour coller. Ou vous pouvez également utiliser un clic droit, puis couper, comme vous pouvez le voir ici. Maintenant, je vais les aligner correctement et bien sûr, nous allons utiliser les outils d'alignement pour cela. D' abord pour rendre notre vie un peu plus facile, je vais verrouiller cette barre et maintenant juste placer les icônes comme ça. Assurez-vous d'avoir assez de place pour les textes ici. Maintenant, sélectionnez toutes vos quatre icônes. Utilisez cet outil, puis utilisez cet outil, et maintenant mettez-les en position. Maintenant, nous allons retourner à notre guide de style et nous allons prendre ce titre parce que nous avons besoin d'un semi-gras donc alt, puis glisser, rendre large, et ensuite nous avons nos titres. Comme vous pouvez le voir maintenant, mon alignement n'est pas si bon. Parfois, vous voulez commencer avec le texte, parfois vous voulez commencer avec les icônes, et cette fois vous voulez commencer avec ce texte. Par exemple, si j'ai une surface appelée Web Design, par exemple, je peux le faire comme ça. instant, je n'ai pas besoin de cette zone de texte parce que je n'utilise pas deux lignes, je vais juste cliquer sur le « Texte du point » et cela facilite l'alignement. Assurez-vous également de cliquer sur « Alignement central ». Parce que si vous le copiez et que vous créez un nouveau texte, il s'alignera à partir du milieu. J' ai fait quatre surfaces en ce moment, les mises à jour de site Web, les sauvegardes , le développement et la conception Web, et maintenant je veux l'aligner correctement. Par exemple, si vous sélectionnez ces deux éléments, alignez-les comme ceci et regroupez-les maintenant. Encore une fois, cliquez sur celui-ci, se déplace, cliquez sur celui-ci, alignez-les au milieu, puis cliquez avec le bouton droit de la souris et regroupez-les. Ce n'est pas un. Ce n'était pas très pratique. Si vous cliquez sur votre icône et vos textes, puis appuyez sur « Commande G », vous n'avez pas à souris car parfois vous faites un faux clic comme je l'ai fait en ce moment. Maintenant, je veux que l'espace entre ces icônes soit le même, et je veux que l'espace soit le même de ce côté. Ce que je vais faire, c'est que je vais aligner celui-ci sur un endroit qui a l'air sympa, et maintenant je vais compter les pixels sur le côté, donc c'est 130. Je vais le mettre à 110. Nous allons nous assurer que celui-ci est aussi à 110 pixels du côté, comme ceci. Maintenant, je vais faire glisser les quatre icônes et je vais les aligner au milieu. Est-ce que ça a l'air sympa ? Décochons la grille pour l'instant. Non, ça a l'air vraiment sympa, je veux qu'ils soient plus proches l'un de l'autre. Je vais aller plus au milieu comme ça, 160, et aussi pour ce 160. Encore une fois, sélectionnez quatre d'entre eux et alignez-les comme ceci. Ça a l'air un peu mieux. Maintenant, nous devons ajouter l'ombre. Revenez au calque d'arrière-plan, déverrouillez-le avec « Commande L », puis ajoutez une ombre comme celle-ci. Zoom avant pour voir ce que nous faisons, et comme vous pouvez le voir en ce moment, c'est une très petite ombre, et nous voulons que cette grande ombre la fasse flotter. Vous le faites en augmentant ce nombre, qui fera baisser l'ombre. Si vous mettez ceci à 30, par exemple, vous pouvez voir qu'il ramènera à l'ombre et si vous augmentez alors ce nombre à 30, 60, ce qui est des valeurs qui sont utilisées assez souvent. Vous pouvez voir qu'il devient cette ombre très douce et agréable. Vous pouvez même changer la couleur de l'ombre si vous le souhaitez. Mais la plupart des ombres en noir semblent bonnes ou vous pouvez diminuer l'intensité de l'ombre comme ceci. Maintenant, nous en avons fini avec cette partie. Vérifions ce que nous avons créé jusqu'à présent. Cliquez sur votre « Plan de travail » et cliquez sur « Jouer » et comme vous pouvez le voir en ce moment, il commence à ressembler à un vrai site Web. C' est plutôt sympa. Passons à l'épisode suivant. 17. Images flottantes avec des ombres: Bienvenue de retour. Dans cette vidéo, nous allons créer la section des images flottantes qui ressemble à ceci. Ça a l'air compliqué, mais c'est en fait l'une des choses les plus faciles à faire. Nous allons à nouveau utiliser ces ombres, et nous allons également créer une icône personnalisée. Comme vous pouvez le voir ici, nous créons cette icône à l'intérieur d'Adobe XD. Si vous voulez vraiment vous lancer dans la conception d'icônes, je vous suggère d'utiliser Illustrator car c'est un outil logiciel d'Adobe qui se concentre vraiment sur la création de formes factorielles. Mais si c'est juste pour une icône simple comme celle-ci, nous pouvons également créer cela dans Adobe XD. Voyons à quelle vitesse nous pouvons créer cette partie gauche. Nous allons retourner à notre dossier d'exercice, et nous allons utiliser nos actifs bien sûr. Maintenant, nous avons besoin d'un titre moyen, alors maintenez Alt et faites-en une copie. Au fait, n'oubliez pas d'allumer votre grille, donc nous savons ce qu'est ce côté. Nous avons aussi besoin d'un pont de boulon, donc je vais aussi en faire une copie. Alignez-le correctement, et c'est en fait tout ce dont j'ai besoin. Pour ce texte, j'ai fait trois lignes de haut, oui. Comme vous pouvez le voir maintenant, ce calque de texte ressemble presque au gris, mais il est en fait de couleur grisâtre pourpre foncé. Sur ce fond, la combinaison de ces deux colonnes est vraiment agréable. Donc oui, maintenant on va créer deux choses. abord, nous allons créer cette petite ligne, puis nous allons créer les icônes personnalisées. zoom avant sur votre titre, saisissez la ligne deux ici et créez une ligne comme celle-ci. Tenez-le, puis faites-le un peu plus épais. Je suggère que l'épaisseur de la ligne devrait être la même que les éléments qui l'entourent. Donc maintenant, nous avons ce gros texte ici. Si vous voulez rendre le design agréable, assurez-vous qu'il est presque aussi épais que celui-ci. Alors peut-être quatre ou cinq. Ça devrait être bien pour la couleur. Bien sûr qu'on va utiliser le violet. Donc maintenant, il semble en ligne avec ce design. Maintenant, nous allons créer notre icône personnalisée. Donc, d'abord, nous allons créer une ligne de texte. Pour l'instant, je vais juste créer une ligne de texte comme celle-ci. Maintenant, nous voulons créer notre icône. Alors zoomez un peu. Maintenant, prenez l'outil plume sous P, et créons une case à cocher. Une case à cocher n'est pas vraiment difficile. Alors suivez-moi dans celui-ci. Vous pouvez toujours l'ajuster plus tard, donc il n'a pas besoin d'être parfait. Essayez simplement de créer une belle case à cocher comme celle-ci. Peut-être que tu veux avoir un fond plat, peut-être pas. Ça a l'air sympa. Alors testons si c'est ce que nous voulons. Éteignez la bordure et pour la couleur de remplissage, nous allons choisir notre propre couleur pourpre comme ceci. Je n'aime pas vraiment le fond plat, donc nous allons juste double-cliquer dessus et je vais supprimer celui-ci et juste l'amener au milieu. Oui, ça a l'air un peu plus agréable. Maintenant, il suffit d'ajuster quelques points pour qu'il ressemble à une icône de vérification réaliste. Cela semble plutôt bon, donc je vais cliquer à l'extérieur de lui à nouveau. Maintenant, ce que je veux faire est de l'aligner correctement et peut-être le rendre un peu plus petit comme ça, maintenez Maj. Alignez-le ensuite au milieu du texte. Alignez le texte comme ceci. Tu sais quoi ? Je vais le rendre un peu plus grand. Si nous revenons à notre conception finale, vous pouvez voir que j'ai utilisé des coordonnées arrondies ici. Je vais aussi vous montrer comment le faire. Donc, si vous voulez un fond arrondi, par exemple, il suffit de double-cliquer sur ce point d'ancrage, puis vous pouvez ajuster le fond comme ceci. Peut-être aussi faire ça pour ce côté-ci. Donnez-lui un peu de sensation personnalisée, qui correspond à votre site Web. Ce n'est pas parfait et vous pouvez passer beaucoup de temps sur les icônes, bien sûr. Mais je veux juste vous montrer les bases sur la façon de créer une icône cool. Maintenant, ce que je veux faire, c'est m'assurer qu'il a l'air bien sur une seule ligne. Maintenant, il suffit de les sélectionner les deux, de les regrouper, puis de maintenir Alt et Maj enfoncés et de créer une autre ligne de case à cocher comme celle-ci. Maintenant, nous en avons trois. Alignez-les correctement, boom. Peut-être lui donner un peu plus d'espace. Encore une fois, certaines personnes aiment mesurer chaque petite barre entre tous leurs objets. J' aime juste concevoir sur mon œil parce que les mesures sont agréables, mais parfois vous devez ajuster l'alignement pour le rendre agréable, même si ce n'est pas parfaitement aligné. Alors utilisez simplement votre œil et votre imagination pour le rendre agréable. Alors, allons maintenant et éteindre la grille. Je vais donc cliquer à nouveau sur le tableau d'art. Éteignez la grille. Revenez à notre design final. Comme vous pouvez le voir, cette ligne est un peu plus longue. Donc je vais étirer celui-ci pour en faire quelque chose comme ça. C' est trois lignes et j'ai vu que celui-ci est un peu plus long, et peut-être un peu moins faux, mais cela dépend de votre site, bien sûr. Donc maintenant, nous en avons fini avec cette partie, et maintenant nous allons glisser dans nos images. Donc, ce que vous voulez faire est d'aller dans votre Finder, zoom arrière et de vous assurer de le faire glisser en dehors de votre tableau d'art. Donc maintenant, comme vous pouvez le voir, celui-ci est un peu plus petit. Donc je vais faire ça de la même taille que les autres, comme ça, et m'assurer qu'ils sont uniformément gros comme ça. Maintenant, sélectionnez-les tous les deux, sélectionnez-les tous et faites-les beaucoup plus grands. Maintenant, nous avons juste besoin de les réorganiser d'une manière qui semble agréable et juste les diriger pour faire l'un sur l'autre, ou nous pouvons utiliser des commentaires, puis le crochet gauche ou le crochet droit. C' est quelque chose que j'aime utiliser parce que c'est beaucoup plus rapide. D' accord. Ça a l'air sympa. Je vais les rendre tous un peu plus gros. Maintenant, nous allons ajouter des ombres. Alors sélectionnez-les tous, puis allez dans vos ombres. Ensuite, nous allons ajuster les paramètres pour tous. Alors mettez ça sur 30 à nouveau et mettez-le sur 60. Maintenant, comme vous pouvez le voir, ces éléments flottent vraiment sympa. Peut-être que c'est un peu trop intense, alors diminuez celui-ci, en l'amenant à 12, par exemple. Maintenant, si vous cliquez loin, regardez ce design, semble vraiment cool. Donc oui, c'est en fait tout ce que j'ai fait pour ce design. Essayez-le tout seul. Ensuite, dans le prochain épisode, nous allons aller dans la section client, où nous allons travailler avec un nouvel outil appelé les grilles de répétition, où nous pouvons changer beaucoup de choses différentes en faisant simplement glisser comme ça. J' espère donc vous voir dans le prochain épisode. 18. Section logo client avec l'outil Repeat Grid: Salut et bienvenue. Dans cet épisode, nous allons travailler avec une nouvelle fonctionnalité appelée Grille de répétition, et nous allons insérer quelques logos. Ça va être très amusant. Ce que je veux que vous fassiez, c'est aller dans notre dossier d'exercice, et agrandir notre plan de travail. En sélectionnant votre plan de travail comme nous l'avons fait auparavant, vous pouvez simplement cliquer sur le nom, mais si vous êtes vraiment zoomé et que vous ne voulez pas faire défiler vers le haut de votre plan de travail, vous pouvez également commander, et puis cliquez sur votre plan de travail, ou disons simplement, cliquez sur l'arrière-plan. Parce que si vous cliquez sur un élément avec la commande, vous allez bien sûr, sélectionner l'élément, donc vous devez cliquer sur l'arrière-plan, puis vous pouvez rendre votre plan de travail plus long comme ceci. Maintenant, nous allons simplement créer cette nouvelle section très rapidement. Nous pouvons bien sûr, toujours revenir à notre guide de style et un glisser un nouveau titre à partir d'ici. Mais comme il s'agit du même titre, nous pouvons également suivre ce titre comme ça, nous pouvons également suivre ce titre comme ça,l' aligner au milieu, puis copier une ligne de texte de notre corps ici, et aussi l'aligner au milieu. Je veux aligner ces deux couches au milieu de tout mon plan de travail. Je vais juste cliquer sur la couche, boom, cliquer sur celle-ci, boom. Maintenant, changez le texte, quelque chose comme ça. Ce texte, je veux que ce soit violet, alors retournez à vos actifs, et rendez celui-ci violet. Alignez-le mettre 15 pixels par le haut, et maintenant nous allons travailler avec les Grilles de Répétition. Ce que je veux que vous fassiez, c'est créer une forme avec votre rectangle. Nous allons créer un rectangle comme celui-ci. Au début, allumons simplement la grille. Encore une fois, venez et cliquez sur l'arrière-plan, et allumez la grille parce que nous avons vraiment besoin de la grille dès maintenant pour aligner cela. Parce que votre grille de répétition est aussi un excellent outil, car souvent vous aurez le même élément différent dans une rangée. Nous pourrions également utiliser une grille de répétition pour celui-ci. Entraînons-nous si vite. Je vais supprimer ces deux, et si vous cliquez sur celui-ci, et vous cliquez sur Répéter la grille, ce qui se passe est que, que XD sait que ce groupe doit être répété dans une direction. Vous pouvez le répéter vers le bas comme ceci, ou vous pouvez le répéter sur le côté. Beaucoup de fois, vous avez une grille à l'intérieur de votre site Web, et c'est là que vous pouvez utiliser votre outil Grille de répétition, et maintenant vous pouvez vraiment facilement changer l'alignement comme ceci. Pour ces avantages, nous n'avons besoin que de trois rangées. Nous pouvons le faire comme ça, rendre notre vie un peu plus facile, mais pour la section client, nous voulons aussi le faire. Parce que si nous n'utilisons pas cet outil Grille de répétition. En passant, les gars, le raccourci pour basculer entre le fichier XD est commentaire, puis l'icône de vague d'un texte de mastic sur l'écran, et sur Windows c'est maintenez et appuyez sur. Si nous n'utilisons pas cet outil Grille de répétition, et que nous voulons changer l'ombre, nous devons changer l'ombre sur tous ces calques individuels, puis vous devez les dégrouper tous, ou simplement cliquer sur tous, et ce n'est pas vraiment sympa. De cette façon, si vous changez l'ombre ici, ça va changer partout comme vous pouvez le voir ici. Retournez à notre fichier, cliquez sur celui-ci, puis cliquez sur Répéter la grille, et maintenant il suffit de créer trois blocs comme celui-ci, et aussi vers le bas, et aussi vers le bas, et maintenant nous devons l'aligner sur la grille ici. Vous pouvez simplement augmenter l'espacement entre les blocs. Wow, c'est 50, ce qui est presque parfait, mais vous pouvez aussi bien sûr, faire les blocs un peu plus grands. Venez cliquer sur votre « Bloquer », puis le rendre un peu plus grand comme ça. Je veux le même espacement ici, donc ce sera 36. C' est juste jouer avec les valeurs jusqu'à ce que vous obteniez ce que vous voulez. Maintenant, nous avons six boîtes parfaitement alignées, et maintenant nous allons les coiffer. Cliquez sur votre première case, puis supprimez la bordure, et nous allons ajouter une ombre comme celle-ci. Je pense que j'ai utilisé l'ombre par défaut sur cela. Peut-être que j'augmente ou je devrais dire, diminuer l'intensité de celui-ci, donc il semble un peu plus agréable. Mais je pense que c'est tout ce que j'ai fait. Maintenant, pour l'intérieur, j'ai préparé tous les logos dans le dossier du logo client, et je viens de télécharger quelques logos d'Internet, comme vous pouvez le voir. En passant, ce n'est qu'un exemple, je n'ai pas travaillé pour ces entreprises. Mais en fait, je travaillais pour Coca Cola. C' est la seule entreprise pour laquelle j'ai vraiment travaillé dans cette liste. Mais ce n'est qu'un exemple. Ce que j'ai fait, c'est que je les ai déjà exportés avec un fond blanc. Parce que si vous allez simplement faire glisser tous les logos à l'intérieur de votre plan de travail comme ceci, je vais les sélectionner tous, pas le dossier d'exportation, je vais les faire glisser tous comme ceci, vous verrez toujours le ombres que nous venons d'appliquer. Les images vont s'étirer de gauche à droite, et ce n'est pas ce que nous voulons. Ce que j'ai fait dans mon fichier de conception final, c'est que j'ai créé des plans de travail distincts pour mes logos, parce que sinon vous allez avoir ce problème. Quand je savais que mes boîtes étaient de cette taille, je peux en fait faire 160 en hauteur, ce serait bien, 360 et 116 en taille. Ce que j'ai fait, c'est que j'ai créé un nouveau plan de travail. Je viens de saisir, par exemple, celui-ci, en a fait une copie, et fait que 360 par 180, puis appelé que notre logo par exemple, éteindre la grille. J' ai dupliqué ça comme vous pouvez le voir, puis j'ai inséré les logos un par un parce que vous voulez l'aligner correctement, bien sûr. Puis j'ai exporté toutes ces images, et ces images que vous pouvez les voir ici. Nous allons exporter dans un autre épisode, mais c'est ce que j'ai fait pour créer ces images. J' ai tout d'abord créé tous les ports, puis j'ai exporté les images. Mais pour l'instant, pour vous faciliter la vie, vous pouvez simplement utiliser mes images, et les faire glisser sur le Canvas comme ceci, ou vous pouvez glisser vos logos un par un, puis les placer sur le plan de travail. Mais alors ils ne font pas partie de cette grille de répétition. Seulement si vous les faites glisser toutes comme ceci, les Grilles de répétition fonctionneront avec ces images. Parce que cette image est maintenant juste au-dessus de notre outil Grille de répétition. Si vous voulez utiliser cet outil Répéter Grille, vous devez d'abord exporter toutes les images que je vais vous montrer dans l'épisode à venir, puis vous pouvez simplement insérer toutes les images comme ceci, et ensuite vous avez un logo de Repeats Grid parfait section. Ce qui est aussi vraiment agréable à ce sujet, c'est que si vous allez créer votre design mobile, vous pouvez simplement le faire glisser comme ça, puis le changer, et il se souviendra des données qui sont à l'intérieur si vous ne vous souvenez que les logos comme vous pouvez voir ici. Mais c'est aussi pour un épisode à venir. C' était les bases de l'outil Grille de répétitions. J' espère que vous avez aimé cet épisode, et puis je vous verrai dans le prochain épisode où nous allons créer ce contour dans la boîte de numéros. 19. Section Statistiques avec des boîtes vide: Bienvenue, dans cet épisode, nous allons créer la partie statistique. Ce sera une vidéo très facile, mais c'est juste une belle section pour diviser la page. Sinon, ce sera juste cette grande couleur. Sur mon vrai site, j'ai utilisé cette partie pour animer ces chiffres. Je peux vous montrer le résultat final sur mon site web. Comme vous pouvez le voir ici, c'est l'idée de cette partie où ces nombres commencent à s'animer. Commençons simplement à créer cette partie. Nous allons revenir à notre dossier d'exercice, et nous allons déplacer ces conseils Rs à la décision parce que nous devons prolonger notre planche R beaucoup plus longtemps. Venez cliquer sur votre planche R, rendez la plus longue et maintenant éteignons la grille parce que nous n'avons pas vraiment besoin de cela pour cette partie. Recadrez votre rectangle, créez une grande forme comme celle-ci, éteignez la bordure, choisissez les arrière-plans les plus sombres, puis appuyez sur V pour l'outil de sélection. Sélectionnez cette option pour le faire copier avec Alts, puis ils seront sous notre couche, et c'est parce que si vous créez un nouveau calque, il sera sur le dessus et il s'agit d'une copie d'un ancien calque. Mettez-les ici, puis appuyez sur Commande X , puis appuyez sur Commande V. Ensuite, ils seront sur le dessus. Vous ne voyez pas le titre, mais c'est parce qu'il a une autre couleur. Maintenant, cliquez en dehors de celui-ci, cliquez sur le titre, agrandissez-le , puis cliquez sur les deux et alignez-les à droite. Puis aussi les aligner à gauche. Oh, dit à droite, je voulais dire à gauche, bien sûr. Maintenant, alignez-les sur la grille et nous aurons quelques lignes d'aide, comme ceci. Ça a l'air bien. Mon design et ce texte est un peu plus court, quelque chose comme ça, peut-être même plus court. Encore une fois, je vais verrouiller ce calque d'arrière-plan. Ce que je vais faire maintenant, c'est créer deux formes. Choisissez simplement votre outil rectangle et créez deux formes comme celle-ci ; la largeur des formes, nous allons l'aligner sur cette pièce. Ensuite, il aura l'air un peu plus agréable. Appuyez à nouveau sur V, puis faites-les aussi gros que les deux autres. Nous connaissons déjà la largeur, c'est 360 et 40 hauteur. On veut rendre ça un peu plus grand dire peut-être à 40, quelque chose comme ça. Ça a l'air bien. Avant de le dupliquer, mais nous allons d'abord styler le premier. Désélectionnez le remplissage et pour la couleur de bordure, nous allons choisir le violet et c'est ainsi que vous créez un contour. Maintenant, ce n'est qu'une question de deux chiffres. Juste un calque de texte qui a un alignement central et est blanc. C' est juste un titre qui n'est qu'un texte ponctuel. C' est un grand nombre. Cette taille ne fait pas partie de mon guide de style, mais je viens de le concevoir sur l'œil. Si vous souhaitez aligner tous ces éléments au milieu, assurez-vous d'abord de sélectionner l'élément souhaité, puis votre arrière-plan, puis appuyez sur celui-ci pour l'aligner au milieu. Aussi, pour celui-ci, sélectionnez-les à la fois et boom. Il était déjà aligné, comme vous pouvez le voir. Je crois que j'ai utilisé quelque chose comme des clients surfaient. Je n'utilise pas de zone de texte pour l'instant, alignez cela correctement comme ceci et faites maintenant une copie de celui-ci. Mais d'abord groupez-le ainsi, Commande G, puis cliquez sur l'ensemble du groupe et dupliquez-le et faites-le aligner à droite de notre carte R. On ne voit pas où ça finit. Ça finit par ici ? Je ne pense pas. Cliquez à nouveau sur votre carte R, allumez la grille et comme vous pouvez le voir, ce n'est pas la fin de notre 1140. Maintenant, venez et cliquez et changez le numéro ici pour les vérifications effectuées ou quelque chose comme ça. C' est comme ça que j'ai créé cette partie ici. Partie assez facile, mais un fond sombre. Il brise juste le site d'une manière agréable. Cet épisode était assez facile. Passons à l'épisode suivant où nous allons construire la section des témoignages. C' est un peu compliqué parce que nous avons besoin d'une forme personnalisée avec une ombre et nous avons également utilisé un outil de support de répétition ici. J' espère vous voir dans la prochaine vidéo. 20. Section témoin avec l'outil Plume: Salut et bienvenue. Dans cet épisode, nous allons créer une section de témoignage D. Je pense que c'est une très belle section. Il a le même style d'ombre que le logo ici. Commençons. Commençons par créer un titre. Prenez celui-ci et prenez celui-ci, vieux, vieux et Shifts, puis relâchez-les et ce titre est cette couleur. Je vais rendre le tableau un peu plus grand en cliquant sur les arrière-plans, puis en le faisant glisser vers le bas. Maintenant, créons notre première section de témoignages. Une chose que vous devez comprendre est que vous ne pouvez pas ajouter d'ombres à un groupe. La façon facile que vous penseriez que nous créerions une forme comme celle-ci est de créer un rectangle comme celui-ci. Ensuite, créez un autre rectangle comme celui-ci. Ensuite, faites pivoter ce rectangle 45 degrés vers quelque chose comme celui-ci, puis placez-le l'un sur l'autre, sélectionnez-les les deux, désélectionnez une bordure et regroupez-les. Comme vous pouvez le voir, vous ne pouvez pas vraiment ajouter une ombre. Ce n'est pas une solution pour cette partie. Ce que tu veux faire, c'est que tu veux utiliser les pensils. abord, il suffit de créer un rectangle comme celui-ci et assurez-vous qu'il a la largeur de la section du logo ici afin que nous puissions utiliser le même type d'espacement, donc c'était 360. Maintenant, ce que vous voulez faire est d'ajouter quelques points d'ancrage. Si vous double-cliquez sur l'angle direct, vous pouvez voir que nous pouvons sélectionner les points d'ancrage et la même manière que nous avons créé cette forme d'onde personnalisée, nous pouvons maintenant ajouter plus de points d'ancrage à cela. Pour créer une forme comme celle-ci, nous avons besoin de trois points d'ancrage supplémentaires. Parce que nous devons commencer, nous avons besoin d'un point bas et nous avons besoin d'un autre rendez-vous. Maintenant, si vous cliquez sur celui-ci et que vous suivez celui-ci en ligne droite, essayez de le rendre droit, quelque chose comme ça. Maintenant, vous retournez en arrière, vous cliquez en dehors de celui-ci. Vous dévérifiez la frontière. Vous pouvez maintenant ajouter une ombre à la forme. C' est ce que tu veux faire. Cliquez sur l'ombre et diminuez un peu la capacité et le rendre un peu plus agréable. Comme vous pouvez le voir, maintenant nous avons discuté d'une forme. Avant de commencer à dupliquer, finissons d'abord celui-ci. On a besoin d'une photo de profil et d'un titre. Saisissez le cercle ou l'outil Eclipse, maintenez la touche Maj enfoncée, puis faites un cercle pour votre photo. Oui, les frais de presse et le descendre correctement. Peut-être que c'est un peu trop grand, alors je vais faire un peu plus petit. Maintenant, créons un titre. C' est le nom de la personne, sélectionnez-le, puis à gauche l'aligner et faire que la version bols, faire une copie, faire cette petite version T et ce sera le titre de la version. Je veux faire ce titre, je veux faire que ce pull de naissance aligner ça un peu vers la gauche, quelque chose comme ça. Cliquez sur votre image et décochez la bordure. Maintenant, nous avons créé notre première forme. Nous n'allons pas encore glisser dans nos images parce que nous avons besoin d'une chose de plus et c'est le texte à l'intérieur d'ici. Ce que je veux que vous fassiez, c'est copier un de nos textes principaux ici. Faites glisser celui-ci comme vous pouvez le voir, boum, comme ça. Parfois, on n'avait pas la forme. Vous voulez changer la taille de la police 1 point plus petite, car parfois elle semble un peu grande parce qu'elle est à l'intérieur d'une forme. Pour l'instant, je vais le mettre à 15 ans. Assurez-vous également que vous avez suffisamment d'espace blanc sur le côté gauche et sur le côté droit. Peut-être que ça veut dire que votre boîte doit être un peu plus grande. Ne le faites pas simplement glisser comme ça parce que vous êtes, une forme sur le fond va changer. Ensuite, vous devez double-cliquer sur votre calque Shape, sélectionner les deux points d'ancrage, puis utiliser vos touches fléchées pour déplacer celui-ci vers le haut. Ensuite, revenez à votre texte et aligné celui-ci au milieu jusqu'à ce qu'il soit agréable. Je pense que celui-là a l'air cool. Maintenant, je vais sélectionner tout cela et démarrer l'outil de grille de répétitions, puis le dupliquer vers la droite jusqu'à ce qu'il corresponde à ce côté de notre grille, comme ceci. L' espace entre les éléments est désormais différent en raison de l'ombre additive. Ne vous inquiétez pas, assurez-vous juste qu'il ne passera pas de ce côté ici. Le seul endroit où il sera en dehors de nos 1 140, notre planche est pour ces images, mais ce n'est qu'une partie créative du site. C' est bon pour cette partie. Nous allons utiliser la même astuce que pour la section client ici, nous allons importer nos images. Si vous revenez à votre recherche et que vous allez dans le dossier des témoignages. J' ai préparé trois images de quelques mils ici. Si vous les faites glisser sur le cercle, dépassez alors automatiquement les remplir et les masquer à l'intérieur de ce cercle nous allons éteindre la grille pour l'instant et regarder cela. Il a l'air absolument magnifique. Oui, c'était ça pour cette partie. Maintenant, nous allons créer les deux dernières barres du site que ce sera le pied de page, que nous allons répéter et tous les sites Web. Et, cette partie, qui a une image sur le dessus d'un bouton d'image et diviseur en forme de D. J' espère vous voir dans la prochaine vidéo. 21. Section Appelle à l'action avec des gradients: Hé, et bienvenue. Dans cette vidéo, nous allons créer cette section vers le bas. Ça ne va pas être très dur, alors commençons. Donc, tout d'abord, nous allons faire glisser notre tableau d'art un peu plus grand comme ça, et nous avons besoin du même style d'arrière-plan que nous avons utilisé dans l'en-tête. Donc, je vais faire défiler mon en-tête, puis le verrouiller comme ceci, puis le copier, puis le verrouiller à nouveau, puis descendre et coller ça. J' ai d'abord besoin d'écrire l'image, alors revenez à notre section photos, puis faites glisser dans la bonne image. J' ai utilisé cette image, et je vais la remplacer comme ça. En passant, si vous voulez déplacer l'image à l'intérieur de votre masque, vous pouvez double-cliquer dessus, puis vous pouvez déplacer l'image à l'intérieur du masque. Donc maintenant, c'est bon pour l'instant. Nous avons également besoin du séparateur de forme, mais nous l'avons déjà créé, donc nous allons simplement copier celui que nous avons créé ici. C' est ici, donc nous devons le déverrouiller à nouveau, puis faire une copie comme ça, puis aller à la partie supérieure verrouiller à nouveau. Ensuite, allez vers le bas, déplacez-le vers le haut avec la commande shift crochet droit, ou allez simplement dans votre panneau Calques, puis déplacez-le vers le haut, faites-le glisser vers le haut, puis faites-le pivoter. Donc, si vous allez juste avec votre souris sur le côté par ici, vous pouvez la faire pivoter comme ceci, puis si vous maintenez Shift, par exemple, rendez-le droit ou simplement faire un plat à nouveau. Ou vous pouvez simplement bien sûr, taper également plus de 180 pour le retourner. Mais pour l'instant, je vais juste créer la forme comme ça. Assurez-vous qu'il est sous votre section de témoignage. Donc, je vais utiliser la commande et les crochets gauche pour m'assurer que c'est sous cette section. Maintenant, pour cette image, c'est un groupe, déplacez-le vers le haut, et maintenant c'est au-dessus de notre calque de forme. Donc je vais aussi déplacer ça vers le bas. Comme vous pouvez le voir en ce moment, ça a l'air assez cool. Dans ma conception finale, nous avons un titre et un bouton, et nous avons déjà créé ces éléments, donc nous allons simplement faire glisser un de celui-ci, comme celui-ci, un texte principal et un bouton. C' est tout ce dont j'ai besoin pour l'instant. Je vais faire ces deux textes en blanc. Ces textes doivent être alignés au milieu, au centre. Faites la même chose pour celui-ci, alignez-le au milieu, centrez-le. J' ai utilisé un texte différent quelque chose comme ça semble bon. Maintenez alt pour le rendre un peu plus petit. Déplacez celui-ci vers le haut, aussi pour le bouton, déplacez-le au milieu. Si vous voulez modifier la commande de maintien de texte, cliquez dessus, puis ajustez le texte. Maintenant, si votre bouton est trop large, commande cliquez sur l'arrière-plan du bouton, puis maintenez à nouveau la touche alt, puis le rendre un peu plus petit. Je sais que j'utilise beaucoup de raccourcis, mais les raccourcis vous rendent la vie beaucoup plus facile si vous vous y habituez. Donc, je sais parfois que ça peut être un peu frustrant, mais continuez à utiliser ces raccourcis. Ça rend vraiment les choses faciles. Maintenant, déplacez tout ça un peu vers le haut, alors maintenez la touche Maj, puis déplacez-les un peu vers le haut. On a besoin de beaucoup plus d'espace en bas, alors prenez notre couche , et maintenant, je veux agrandir la photo. Comme vous pouvez le voir, puisqu'il s'agit d'un masque, il se met automatiquement à l'échelle. Donc, nous n'aurons pas un fond qui n'est pas rempli avec l'image. Donc je pense que c'est ce que je veux pour l'instant. Retournez à votre recherche et nous allons insérer nos deux articles de portefeuille. Oui, il suffit de choisir deux d'entre eux que tu veux. Je crois que j'ai utilisé ces deux-là. Oui. Alors assurez-vous de les faire glisser à l'extérieur de votre tableau d'art parce que si vous les faites glisser ici, il va le remplacer comme je l'ai déjà dit. Donc, ce que vous voulez faire est d'aller à l'extérieur de votre tableau d'art , de les faire glisser ici, puis assurez-vous de les placer au-dessus de votre tableau d'art comme ceci. Assurez-vous ensuite que votre grille est activée car il n'est pas nécessaire de créer à nouveau pour le site. Sélectionnez les deux, faites-les beaucoup plus gros comme ça. Si vous voulez plus d'espacement au milieu, créez plus d'espacement comme ceci peut être quelque chose comme 50. Sélectionnez ensuite les deux et assurez-vous qu'ils sont à l'intérieur de la grille. Maintenant, si vous voulez les couper, vous devez également utiliser un masque. En dépassant le masque fonctionne comme ça. Si vous créez un nouveau rectangle, vous pouvez utiliser votre forme rectangulaire comme masque. Donc, ce que vous pouvez faire maintenant est de créer une forme comme celle-ci, qui va couper les dessins comme celui-ci, décocher la bordure et en faire une couleur bizarre parce que nous ne allons pas voir cela. Maintenant, sélectionnez les deux éléments de votre portefeuille, et un nouveau masque, puis appuyez sur la commande shift M, ou tout simplement cliquez avec le bouton droit de la souris, puis cliquez sur masque. Non, ce n'est même pas là, n'est-ce pas quelque part ? Masque avec forme, comme vous pouvez le voir, commande shift M. Donc, vous créez un masque, puis il va masquer à l'intérieur de ce rectangle. Maintenant, dans mon design final, comme vous pouvez le voir, il y a aussi une ombre à l'intérieur d'ici, et cette ombre est à l'intérieur du masque. Donc, ce que vous voulez faire maintenant, c'est créer cette ombre. Pour créer une ombre, vous avez également besoin d'un rectangle. Alors créons une ombre en dehors de notre planche pour l'instant. Faisons quelque chose comme ça. Éteignez la bordure, allez à votre remplissage, allez à dégradés linéaires. Maintenant, faites-le du noir au noir. Mais la section supérieure, bien sûr, doit être faible transparence, car alors il crée une ombre. Ensuite, allez aussi à cette couleur et faites que noir. Comme vous pouvez le voir en ce moment, nous avons une opacité noire de 100 pour cent à une opacité noire de zéro pour cent. C' est en fait l'outil dégradé, mais vous pouvez également l'utiliser pour les ombres. Assurez-vous que cela est au-dessus de vos images, et comme vous pouvez le voir, c'est beaucoup trop intense. Vous pouvez simplement le laisser comme ça mais si vous vouliez l'avoir à l'intérieur de votre masque, vous allez simplement appuyer sur la commande x, puis double-cliquez sur votre image comme ceci, puis appuyez sur la commande V, et puis il sera aussi à l'intérieur de votre masque. Parce que nous sommes encore, comme vous pouvez le voir, à l'intérieur du masque ici et parfois vous le voulez aussi, donc c'est pour ça que je l'explique. C' est beaucoup trop intense, donc peut-être faire 40 % d'opacité, quelque chose comme ça. Maintenant, il crée un peu de profondeur à l'intérieur de cette section. On a oublié quelque chose ? Je ne pense pas. Peut-être que l'opacité de l'arrière-plan est un peu différente ici, parce que l'image est différente, peut-être que je l'ai mise à 20, comme vous pouvez le voir, peut-être que j'ai aussi changé la forme pour le rendre un peu moins intense. Ainsi, vous pouvez également le faire si vous voulez changer les points d'ancrage, faites glisser tous les éléments et faites-les correspondre comme vous le souhaitez. Donc maintenant, nous avons fini avec la page d'accueil, et la dernière chose que nous devons faire est de créer le pied de page. Mais voyons ce que nous avons créé jusqu'à présent. Donc je vais cliquer sur mon tableau d'art, et je vais cliquer sur jouer. Si vous avez créé la page jusqu'à présent, vous devriez être vraiment fier, car cet article, vous pouvez déjà utiliser cet article dans votre portefeuille. Je vous suggère de changer le style bien sûr, et les images parce que c'est juste mon visage et mes logos, mais si vous pouvez créer une plage comme celle-ci, vous pouvez simplement montrer des entreprises comme « Hé, regardez ça, je peux créer une nouvelle page d'accueil pour vous. » Donc, si vous modifiez simplement les éléments et les boutons dans le texte, vous pouvez déjà créer une page d'accueil assez décente. Donc c'est plutôt sympa. Donc, j'espère que vous avez aussi aimé cette vidéo, puis dans la vidéo suivante, nous allons créer le pied de page, que vous allez dupliquer sur toutes les pages. 22. Footer comme symbole réutilisable: Bienvenue de retour. Dans cette vidéo, nous allons créer le pied de page, comme vous pouvez le voir ici. Il a un contour vert. C' est parce que c'est un composant. C' est l'une des catégories d'actifs que vous avez ici. Ce qui est agréable à propos d'un composant, c'est que vous pouvez utiliser cet élément sur différentes pages. Comme vous pouvez le voir ici, cela a aussi un contour vert, et si je change quelque chose dans le composant principal ici, cela changera également dans tous les autres. Par exemple, si je fais glisser ce logo vers le bas, comme ceci, vous verrez qu'il va changer sur toutes les pages. Je ne l'ai pas fait pour le menu, parce que dans le menu, je veux changer cette ligne pour montrer au visiteur sur quelle page il est, ce n'est pas vraiment un composant. Comme dans ce fichier, je l'ai fait un composant, mais je n'en ai pas vraiment besoin, parce que sur la page Portfolio comme vous pouvez le voir, ce n'est pas un composant parce que c'est différent. Si un élément est le même sur toutes les pages, vous voulez utiliser ce composant, comme vous pouvez le voir ici. C' est ce que nous allons créer en ce moment. Rendez notre planche un peu plus longue, obtenez notre rectangle pour faire un grand rectangle, décochez la bordure, donnez-lui une couleur d'arrière-plan, soulevez ceci, puis alignez-le. Je ne vais pas créer cette cellule à nouveau, je vais juste copier ça à partir du menu. Il suffit de copier le menu entier, descendre et verrouiller celui-ci, puis appuyez sur V et est déjà presque un pied de page. Cliquez sur celui-ci, puis dégroupez-le, cliquez avec le bouton droit de la souris, puis dégroupez-le. Vous pouvez changer les cellules individuelles en ligne plus nette. Je veux qu'un logo soit au milieu. Sur la plupart des pieds de page par le logo est sur la gauche et il y a juste quelques éléments ici sur la droite. Mais pour ce pied de page, je veux juste garder ça très simple. Je l'ai juste comme ça. J' ai un article par ici, article par ici, et un article par ici. Je change le texte pour quelque chose comme ça. Ce n'est pas le pied de page parfait, parce que l'alignement est juste un peu gênant parce que certains mots sont plus longs que d'autres mots. Je n'aime pas vraiment ce pied de page, faisons juste un peu différent maintenant, changeons juste le style et mettons juste le logo sur la gauche ici. Ce sera un peu différent du site que j'ai créé. Sélectionnons-les tous, mettons-le comme ça, et maintenant nous devons le faire en un composant. Encore une fois, déverrouillez-le et nous devons sélectionner tout cela et aller dans Composants et appuyez sur le Plus. Maintenant, il va créer le contour vert, donc vous savez que c'est un composant et c'est le composant maître parce vous pouvez voir qu'ici il y a le triangle de ce Saturne ici. Si nous créons une autre page à l'avenir, nous pouvons simplement faire glisser ce composant que nous devons renommer, sinon nous ne savons pas ce que c'est. On pourrait juste diriger ce composant comme ce boom, et peut-être sur une autre page, boum. Si nous changeons le premier, il changera également deux autres comme vous pouvez le voir. C' est la partie composant également une très belle fonctionnalité dans Adobe XD. Dans le prochain épisode, nous allons créer une autre page qui est la page À propos va être vraiment facile. Je pense que nous pouvons créer cette page en un épisode, quelques minutes. Ça devrait être vraiment amusant. J' espère vous voir dans le prochain épisode. 23. La page La portfolio: Bon, bienvenue. Dans cet épisode, nous allons créer la page Portfolio, comme vous pouvez le voir dans le fichier de conception final ici. C' est une page assez facile, alors commençons. Je vais retourner à mon dossier et je vais faire un double de mon tableau d'art principal. Mettons ça un peu trop bas. Je vais cliquer sur les trois points. Je vais tenir Alt et Shift, et je vais faire un double de mon tableau d'art principal, et c'est tout. Maintenant, je vais supprimer tout ce qui est sur cette page, alors qu'au moins presque tout comme ça, supprimé. Celui-ci a été verrouillé, donc nous allons le déverrouiller, cliquer avec le bouton droit de la souris et ensuite aussi le supprimer. Nous allons zoomer ici et ce n'est que l'arrière-plan, donc nous avons besoin de toutes ces icônes. Nous devons maintenir Maj, puis cliquer sur les icônes et l'arrière-plan, et maintenant c'est parti aussi. L' en-tête sur cette page est un peu plus court, donc nous devons aussi déverrouiller celui-ci, déplacer celui-ci un peu vers le haut, quelque chose comme ça, ça devrait être bon. Nous allons aussi modifier le texte. J' ai utilisé le 36 ici. Je l'ai fait blanc, je l'ai aligné au centre, et l'ai aligné au centre sur l'ensemble du tableau d'art. Comme vous pouvez le voir, c'était assez rapide. Supprimez tout cela parce que nous n'avons pas besoin cela et nous allons également changer le menu parce que nous sommes maintenant sur la page Portfolio. Maintenant, je vais appuyer sur Commande et je vais tenir cette ligne, puis je vais tenir Shift. Relâchez les commandes et maintenez simplement la touche Maj pour le déplacer sur l'horizontale, puis je vais simplement le faire glisser et le rendre plus long. Maintenant, n'utilisez pas Shift ou Command, il suffit de le faire glisser. Maintenant, nous avons une petite indication que nous sommes sur la page Portfolio. D' accord, de quoi avons-nous besoin sur cette page ? Nous avons besoin d'une image, d'un titre, d'un texte et d'un lien. Voyons à quelle vitesse nous pouvons créer cela. Bon, revenons à notre dossier. Maintenant, allez dans votre Finder, parcourez les fichiers de sites Web, puis Éléments de portefeuille et voici vos quatre éléments. Faisons simplement glisser et notre première image, assurez-vous que vous ne la faites pas glisser sur celle-ci juste sur l'arrière-plan comme celui-ci. C' est bien. C'est un peu trop petit. Mes exportations ne sont pas parfaites, mais ce n'est pas un gros problème pour l'instant. Nous avons besoin d'un titre qui est 24. Je vais retourner à mon guide de style. Je vais choisir celui-là, et je vais choisir celui-là. Je maintiens Maj, puis je les sélectionne tous les deux. J' appuie sur Copy ou je viens voir. Je retourne à mon tableau d'art. Je clique dans le tableau d'art, puis cliquez avec le bouton droit de la souris sur Coller, et maintenant nous avons un titre et nous avons une description. Le titre d'un projet, je veux juste que ce soit une ligne. Alors je veux un peu d'espacement. Disons que 20 pixels peuvent faire ces trois lignes, et maintenant nous voulons un lien. Comment allons-nous créer un lien est en faisant un duplicata, donc je tiens Alt à nouveau sur les textes. Je vais juste double-cliquer et changer ce texte pour découvrir les projets. Je fais juste un point X parce que nous n'avons pas besoin de toute cette zone de texte. Je vais le rendre violet, et maintenant je vais cliquer sur cet outil ici et créer un soulignement sur les textes. Cela fera ressembler à un lien. Maintenant, je veux l'aligner, donc je vais m'assurer qu'il est aussi 20 pixels de ce bas et comme je l'ai dit précédemment, assurez-vous que vos boîtes sont rognées au bas des textes, et maintenant cela semble cool. Mais maintenant, le dimensionnement n'est pas bon, nous devons donc changer quelques choses. Tout d'abord, l'image doit être beaucoup plus grande. Disons juste que notre image, nous voulons qu'elle soit aussi grande que celle-ci. Mais avant que nous allons faire glisser les textes et aussi rendre blanc et utiliser la grille de répétition pour, maintenant va d'abord vérifier si c'est réellement la largeur que je veux. Je vais faire un double de celui-ci. Maintenez Alt et Shift, et maintenant qu'est-ce qu'il y a ? Il n'y a que 21 pixels au milieu. Je pense que c'est un peu moins, donc je vais le rendre un peu plus petit, alors tiens-le de ce côté, quelque chose comme ça. Faites un duplicata à nouveau, puis au milieu est 55. C' est beaucoup mieux. Vous pouvez bien sûr jouer avec ces paramètres, mais c'est assez bon pour l'instant. Maintenant, je vais faire glisser tous mes textes et simplement les faire glisser, et c'est une bonne chose à propos de l'outil de texte. Au lieu de cela, vous pouvez simplement les faire glisser et le texte sera plus long. Supprimez ceci pour l'instant. Bon, donc la dernière chose que j'ai faite est que j'ai ajouté une petite ombre comme vous pouvez le voir, c'est très doux. C' est la même ombre que j'utilise pour les logos, donc c'est seulement trois, six, et puis l'opacité est 16. Rappelez-vous que trois, six et 16. On va retourner à notre dossier. Cliquez sur notre objet, cliquez sur Ombre trois, six, puis 16. Ok, ne le fait pas, vous vous en souvenez. Adobe XD s'est souvenu des paramètres. Maintenant, ce que nous pouvons faire est de sélectionner toutes les couches et maintenant cliquer sur la grille de répétition. Maintenant, nous avons besoin de la grille sur le site pour voir la taille de l'espace entre ces deux éléments. Nous devons l'aligner sur le côté. Je le fais juste glisser. Je vais m'assurer que cette ligne frappe la ligne bleue comme ça. Maintenant effet désespéré et je vais également l'étendre vers le bas. Assurez-vous d'avoir quatre articles pour l'instant. Je vais également cliquer à l'intérieur de celui-ci, puis faire glisser celui-ci, le rendre beaucoup plus grand. Pour l'instant, je vais le mettre à 80 ans parce que je pense que ça a l'air bien. Je vais éteindre la grille et je vais importer des images. Je vais revenir à mon Finder, sélectionner tous mes articles de Portfolio, et maintenant les faire glisser comme ceci. Maintenant, vous pouvez voir que nous avons presque terminé déjà avec cette page, c'est super sympa. Maintenant, la seule chose dont nous avons besoin, c'est un pied de page. Comme je l'ai expliqué dans l'un des épisodes précédents, vous pouvez maintenant simplement glisser dans le composant d'ici, boom. Il suffit de le placer comme ça, assurez-vous qu'il y a une marge saine en dessous. Je vais choisir 100 pixels, et je vais juste venir cliquer sur l'arrière-plan, puis glisser celui-ci un peu plus court et m'assurer qu'il correspond au fond. Maintenant, comme vous pouvez le voir en quelques minutes, nous avons conçu cette page, semble vraiment agréable et c'est également vraiment facile à convertir en une page responsive. Dans le prochain épisode, nous allons construire la page à propos, ce qui est un peu plus compliqué. J' ai appelé ça les services, ce n'est pas bon. C' est la page à propos. Mais sur la page à propos il y a des onglets, comme vous pouvez le voir ici, il y a une galerie d'images et il y a cette section FAQ. Je te verrai dans le prochain épisode. 24. À propos de la page partie 1 :: Commençons à construire la page À propos, cela semble assez créatif. Comme je commence tout juste, nous allons essayer de le faire le plus rapidement possible et essayer de progresser un peu plus rapidement, parce que c'est aussi un cours pour rendre votre flux de travail un peu plus agréable. Les sections supérieures ici sont assez faciles, cela sera fait assez rapidement, et ensuite nous allons passer à cette section qui est un peu compliquée. Celui-ci est facile et celui-ci est aussi un peu compliqué, mais ça ne va pas être si difficile, voyons à quelle vitesse nous pouvons construire cette page. Ce que je vais faire, c'est que je vais faire un duplicata de la page du portefeuille, je vais cliquer sur le haut, je vais maintenir Alt et Shift et ensuite faire un duplicata comme celui-ci, je vais supprimer tout le contenu à l'intérieur. Tout d'abord, je vais venir cliquer et le rendre beaucoup plus long pour l'instant, faites glisser le pied de page vers le bas. Maintenant, la première chose que nous devons faire est de créer les trois colonnes dont nous avons besoin pour cela notre A propos, je veux vous montrer un petit truc sur la façon dont vous pouvez le faire. Prenons juste votre rectangle pour l'instant, et je vais créer un rectangle comme celui-ci. Maintenant, je vais créer un autre rectangle en tenant Alt, c'est parfait. C' est déjà 50 pixels de différence, c'était juste de la chance pour moi. Maintenant, nous avons aussi 50 pixels de différence, vous voulez avoir un peu d'espace entre ces blocs, parce que nous allons utiliser cet espace sur toute la page. Voyons juste si nous sommes dans la grille, c'est parfait, c'était juste de la chance, pour l'instant nous allons créer quelques lignes d'aide ou des règles, comme on l'appelle, si vous déplacez votre souris sur le côté du dessus, vous obtiendrez cet effet de vol stationnaire, si vous cliquez ensuite et faites glisser, vous pouvez mettre en place une ligne sur votre upboard qui ne fait pas partie de votre conception, mais cela vous aidera à aligner certaines choses, je vais mettre une ligne ici. Maintenant, je peux supprimer tous ces blocs comme celui-ci, et nous aurons quelques lignes qui nous aideront à aligner nos éléments. Revenons à mon design final, voyons d'abord ce que nous avons ici. C' est un titre 36, 16 et 822, ce que nous allons faire c'est nous allons faire glisser quelques titres d'ici. C' est 24, tu vois, j'ai fait une erreur ici, ça devrait être 24. Aussi, nous allons utiliser celui-ci, et nous allons utiliser celui-ci, nous allons aussi utiliser le gras et nous allons utiliser pour texter, je vais copier tout cela, revenir à mon dossier, et nous allons il suffit de mettre le texte ici d'abord, copier et de le coller, supprimer celui-ci, maintenant nous allons simplement d'abord créer les colonnes. Aligner chaque texte sur ces colonnes, comme vous pouvez le voir ici, regardons le dessin final, j'ai besoin d'un titre en gras ici et d'un 36 ici pour tous les titres. abord, il y a une version plus petite et puis il y a une version plus grande, prenons simplement la version plus petite comme celle-ci. Ce sera juste une ligne de texte, je vais en faire un texte point, je vais rendre ce violet. Maintenant, ce sera juste un gros titre comme celui-ci, je vais aussi le faire au point X parce que comme vous pouvez le voir, il n'y a qu'une ligne de texte parce que je vais le rendre plus facile à glisser et à aligner, je vais donner à 10 pixels d'espace entre ces deux éléments. Maintenant, comme vous pouvez le voir, le design final, nous avons aussi juste une ligne de texte ici, je vais convertir celui-ci aussi dans un texte, Dans un texte de point comme celui-ci. Donnez aussi que 10 pixels d'espace entre peut-être un peu plus, peut-être quelque chose comme 15. Ce que je vais faire maintenant, je vais le faire glisser ici, assurez-vous qu'il est aligné vers le haut et en faire une copie. Maintenant, nous avons les bases pour toute cette page et cela facilitera la construction d'une page. Ce que nous allons faire maintenant, c'est que nous allons examiner notre design. Comme vous pouvez le voir, cet en-tête est vraiment grand donc ce que je veux faire est d'abord faire glisser celui-ci vers le bas. Peut-être faire quelque chose comme ça, nous allons faire glisser celui-ci un peu plus, je vais d'abord préparer l'arrière-plan, je vais déverrouiller le calque d'arrière-plan, et je vais aussi le dégrouper parce qu'il y a deux couches à l'intérieur de celui-ci, j'appuie sur « Commentaire Alt G » ou juste un clic droit et dégrouper. Maintenant, je vais aller à mon détecteur, insérer la photo dont nous avons besoin comme ça et je vais la rendre beaucoup plus sombre en diminuant l'opacité, je vais la mettre à 20 pour cent, je vais appuyer sur deux ou peut-être même un pour le texte sera vraiment visible. Maintenant, sélectionnez les deux couches d'arrière-plan, regroupez-les, puis cliquez avec le bouton droit et verrouillez-les, et de cette façon nous pouvons le déplacer. Aussi, je vais faire ça aussi pour celui-là. Voyons à quelle vitesse on peut faire ça. Prenez tous vos titres, cliquez sur tous et faites un duplicata, maintenant faites celui-ci, faites-les blancs. Dans mon design final, il y a même un texte d'introduction, comme on peut le voir ici, je suis désolé, ces textes n'ont pas besoin d'être blancs, ils doivent être violets comme ça parce que ça a l'air vraiment sympa sur ce fond sombre, nous avons un petit texte d'introduction, comme vous pouvez le voir ici. Ce que je vais faire, c'est que je vais faire glisser celui-ci un peu vers le bas, puis en faire une copie, faire une copie rendre plus petit comme ça et je le rends plus long. Maintenant, nous avons besoin de plus d'espacement, donc je viens de le mettre comme ça, qui semble bien, voyons ce que nous avons créé jusqu'à présent, cliquez dans le dessus et cliquez sur le jeu et cela semble absolument beau. Insérez simplement l'image pour le moment et ensuite nous allons passer aux autres sections, revenons à votre finder. La photo sur est ce que nous devons la prendre en dehors de votre upboard pour être sûr, puis faites-la glisser à l'intérieur de votre upboard et la mettre à l'échelle, comme vous pouvez le voir, je n'ai pas exporté les images assez grandes, mais elles sont encore assez nettes. Je pense, eh bien, ce n'est pas parfait, mais vous devriez toujours utiliser des images nettes, bien sûr, pas trop nettes parce que sinon vos sites Web seront lents, mais cette image se chevauche comme vous pouvez le voir ici. Voyons, il y a aussi une belle ombre très douce, nous allons aussi créer ça. Cliquez sur l'ombre, nous allons mettre ça à la 30, puis sur 60. Maintenant, nous avons cette ombre très douce et agréable, peut-être diminuer celui-ci un peu, et voyons ce que nous avons créé jusqu'à présent, cliquez dans votre upboard à nouveau et appuyez sur play. Absolument belle, j'aime ce résultat, continuons maintenant avec cette partie dans la prochaine vidéo. 25. Partie 2: Bienvenue de retour. Dans cette vidéo, nous allons créer la fonctionnalité DEP que vous pouvez voir ici. C' est l'une des fonctionnalités qui est souvent utilisée dans les grands sites Web, par exemple pour afficher un processus où il y a plusieurs étapes et que vous ne voulez pas rendre la page trop longue. Vous masquez les informations entre dans ces étapes. C' est vraiment facile. C' est juste un tas de textes et un plan. Nous allons simplement créer comme pour l'instant. Je vais retourner à mon film. Je vais m'assurer que la couleur ici est bonne. Je vais mettre ça sur le violet. De quelle couleur ai-je utilisé ici ? Je crois que j'ai utilisé cette couleur. Oui. Je n'utilise pas ces blocs. On n'utilise pas de titre ici. Nous n'utilisons qu'une zone de texte blanche comme celle-ci. Alignez-le vers le haut. Assurez-vous qu'il est aligné sur le haut d'une ligne de texte. Ça a l'air bien. Peut-être mettre un peu Enter pour le rendre un peu plus agréable. Maintenant, il suffit de déplacer celui-ci comme ça, et nous allons d'abord créer le contour. Ce que je vais faire, c'est que je vais attraper l'outil Ligne comme vous pouvez le voir ici. Je vais juste créer un contour très rugueux. Maintenant, vous devez vraiment utiliser le Shift. Donc, si vous maintenez Maj et vous pouvez voir qu' une autre ligne restera droite et c'est ce que vous voulez. Peu importe si ce n'est pas parfait la première fois. Relâchez d'abord la souris, puis relâchez le Shift. Ne vous inquiétez pas pour la couleur ici. Maintenant, ne commencez pas à ce point parce que vous allez faire glisser la première ligne. Maintenant, nous devons commencer à un autre point et reculer comme ça. Ne vous inquiétez pas pour les lignes pour l'instant. Je veux juste vous montrer la forme de base. Créez une ligne comme celle-ci. Je vais également créer une ligne comme celle-ci. Assurez-vous d'utiliser les lignes bleues pour vous aider comme ça. Mais je sais que je vais le rendre un peu plus grand pour le texte. Je vais finir comme ça. Maintenant, appuyez sur V. Maintenant, nous allons aligner toute la boîte pour qu'elle corresponde à notre design. Tout d'abord, ce que je vais faire, c'est que je vais tout traîner, déplacer vers la gauche et le rendre un peu plus grand. Comme nous pouvons le voir en ce moment, ça va gâcher notre design. Mais ce n'est pas énorme parce que nous devons changer les lignes à la main. Alors assurez-vous que c'est de ce côté-ci. Assurez-vous qu'il est assez grand. Donc, je vais attraper un de mes calques de texte et le déplacer à l'intérieur et aligner ceci, peut-être faire ces quatre lignes comme ceci et voir s'il y a assez d'espace sur la gauche, et en haut et en bas. Peut-être que je veux un peu plus d'espace sur le fond. Donc, je vais tout sélectionner, désélectionner les textes et je maintiens Maj, puis cliquez sur le texte. Je vais le rendre un peu plus grand pour lui donner un peu plus d'espace. Maintenant, la ligne bleue est en fait sur notre chemin, donc je vais supprimer ça pour l'instant. Il suffit de le faire glisser et de le déplacer sur le côté, puis il est parti. Je vais aussi éteindre la grille, comme vous pouvez le voir. Donc on peut voir ce qu'on fait. Maintenant, cliquez sur votre texte et il suffit de les aligner. N' oubliez pas de maintenir Shift pour que vos lignes soient droites. Assurez-vous simplement que toutes les lignes sont connectées. Encore une fois, sélectionnez-le tout, maintenez la touche Maj enfoncée , désélectionnez le texte, puis rendez-le violet ou la couleur réelle de votre choix. Je crois que j'ai utilisé du violet. Non, j'ai utilisé le violet clair ici, le violet normal, et le violet foncé. Faites-en celui-là le violet clair. Nous voulons faire glisser un titre. Faisons simplement glisser celui-ci. Faites cette étape numéro un, par exemple, la conception. Maintenant, faites une copie de celui-ci. Changer le texte, le rendre un peu plus sombre. C' est aussi l'une des choses qui est vraiment important dans la conception web, c'est que vous utilisez vos couleurs pour rendre l'expérience meilleure. Dans ce cas, si je voudrais aussi rendre celui-ci violet, la seule indication que nous sommes sur cette étape serait cette ligne et cela suffit. Mais si vous pouvez ajouter une autre couche de profondeur à cela, vous pouvez maintenant voir que celle-ci est mise en surbrillance. Donc, même si quelqu'un n'a pas un bon écran et qu'il n'a pas ces lignes, vous pouvez voir que celui-ci est mis en surbrillance parce qu'il est plus léger. C' est ce que je voulais te montrer. Je pense que cette boîte est un peu trop petite, donc je vais l'ajuster et la rendre un peu plus grande. Je vais faire deux autres titres. Quelque chose comme ça. Supprimons ces lignes pour l'instant. Comme vous pouvez le voir ici, par rapport à mon résultat final, il semble similaire. Vous pouvez le changer un peu plus bien sûr pour le rendre un peu plus adapté. Mais j'aime ce design, c'est simple et ça marche. Dans cet épisode, je veux aussi créer cette partie. Ce sera très facile, mais parce que ce ne sont que quelques images et c'est le même style que nous avons utilisé auparavant. Voyons voir. Je vais attraper celui-là. Faites un duplicata de ceci. Maintenant, assurez-vous que vous avez le même espace d'ici à ici, puis d'ici à ici. C' est 100. Maintenant, vous voulez vous assurer que vous avez 100 pixels au bas de cette ligne. Comme vous pouvez le voir, cette ligne n'est pas parfaitement alignée, mais 990.9 est assez bon. Maintenant, allez dans votre Finder, prenez le logiciel que j'utilise. Attrapez-les tous et placez-les simplement à l'intérieur de votre application. Je vais utiliser deux lignes, trois colonnes chacune. Alignez-les pour qu'il ait l'air bien sur l'œil. Maintenant, il suffit de les regrouper et de les placer à l'intérieur de votre tableau d'application. Maintenant, vous pouvez juste changer l'espacement pour le rendre un peu meilleur. Voyons ce que nous avons créé jusqu'à présent. Je vais cliquer plus. Cela a l'air vraiment agréable et le contraste semble bon. Nous devons marcher ici et nous avons une petite galerie de photos de quelques logos. Ça a l'air plutôt sympa. Dans le dernier épisode de cette page, nous allons créer cette section. Ce ne sera pas très difficile, mais nous allons utiliser l'outil Forme pour ces rectangles. 26. Partie 3: Bienvenue de retour. Dans cette vidéo, nous allons créer cette section FAQ qui semble s'ouvrir en cliquant sur angle direct. Je suis désolé. Le triangle par ici. Commençons simplement avec cette conception. Tout d'abord, nous allons dupliquer le titre, bien sûr, et nous assurer qu'il a le même espacement. Supprimez cette ligne pour l'instant. Qu' est-ce que cette conception, en fait, est juste un titre, qui est juste un demi-boulon 16 points. Ensuite, c'est ce petit triangle et en ligne. Nous avons déjà créé cette ligne, donc nous pouvons juste diriger cette ligne à partir d'ici et juste la placer sur ici. Pour le calque de texte, je veux saisir une zone de texte comme celle-ci, en faire une seule ligne, puis en faire 16 en boulons. J' utilise deux couleurs pour l'active. J' ai utilisé le violet clair et pour celui qui n'est pas actif, j'ai utilisé le violet foncé, qui est le même style que nous avons utilisé ici. Assurez-vous que vous avez le même style sur votre site Web, sur vos différentes pages. Parce qu'alors il semble juste cohérent, ce qui est important dans la conception. Comme vous pouvez le voir, j'ai même utilisé une version plus sombre ici. Ce n'est pas parfaitement cohérent avec ça. Maintenant, on va s'en tenir à cette couleur ici. Maintenant, ce que vous voulez faire est de zoomer, de créer et de cliquer sur l'outil triangle et nous allons simplement créer un petit rectangle. Maintenez la touche Maj pour faire un triangle parfait. Décochez la bordure, faites-la sombre. Maintenant, si la question n'est pas cliquée, elle doit pointer vers la droite. Appuyez simplement sur « V », puis allez à droite jusqu'à ce que vous voyez la rotation, maintenez la touche Maj, puis faites pivoter et alignez-la. Un peu trop gros. Allons le rendre un peu plus petit, aligner à nouveau et nous y allons. Prenons tout ça. Faire un groupe que nous pouvons facilement dupliquer que maintenez Alt et Shift et en faire deux doublons comme ceci. Donnez-lui un peu de place parce que nous avons aussi besoin d'une question ouverte. Faire un autre dupliqué dégrouper celui-ci. clic droit, dégroupez, mettez celui-ci en bas. Nous aurons un peu d'espace pour nos textes. Je pense qu'on a besoin de plus d'espace. Laissez juste augmenter cet espace ici. Je vais prendre une de vos boîtes de texte comme ça. Maintenez Alt et faites-le s'adapter au design. Maintenant, si nous en faisons un léger, vous pouvez voir que le contraste, n' est pas vraiment sympa. En fait, je préfère le design que j'ai utilisé ici. Je vais juste prendre ceci, ceci, et ce titre. Je tiens Commandement et Shift et je vais faire de ça la couleur sombre. Celui-ci, ouais, c'est celui-là, le 6A6680. Je vais aussi le faire pour ces titres parce que je pense que c'est un peu mieux. Maintenant, il y a encore plus de différence entre l'état actif et les états non-actifs. Ouais, ça a l'air un peu mieux. Maintenant, nous avons seulement besoin d'un court texte d'introduction comme celui-ci. Je suis sûr que c'est une ligne en haut du titre plus petit. Maintenant, prenez tout ça, regroupez-le, déplacez-le vers le haut et la seule chose que nous devons faire est de changer le rectangle. Désolé, le triangle ici et faites-le pivoter pour qu'il s'ouvre. La dernière chose dont nous avons besoin, c'est le pied de page. Prenez vos composants en faisant glisser votre pied de page. J' ai déjà eu un pied de page. Réduisons notre conseil d'administration et maintenant, nous avons fini. Regardons nos résultats. Nous allons cliquer sur notre tableau, cliquer sur « Play », et je suis vraiment satisfait des résultats. J' espère que votre design a aussi l'air assez agréable. Mais c'est une page à propos solide. Sauvegardons notre dossier pour l'instant. Ensuite, nous allons passer à la page suivante, qui va être une page super facile. On va construire ça en un épisode. Va être la page A propos avec nos icônes de médias sociaux personnalisés qui sont affectés et super nettes. 27. Page de contact avec des icônes vectorielles: Bienvenue de retour. Dans cette vidéo, nous allons créer la page de contact. Maintenant qu'allez-vous faire, si vous avez votre design ici, allez-vous faire un duplicata de cette page ou de cette page ? C' est aussi ce à quoi je pense avant de commencer à dupliquer. Vous devez regarder la page et est-ce qu'elle ressemble plus à cette page ou est-ce qu'elle ressemble plus à cette page ? Dans ce cas, cela n'a pas vraiment d'importance car la section supérieure ressemble plus à cette page et la section inférieure ressemble plus à cette page. Mais je voulais juste te donner ce pourboire. Ne dupliquez pas votre dernière page, puis commencez à l'ajuster. Peut-être qu'il y a une autre page qui lui ressemble déjà, au moins un peu et alors vous n'avez pas à changer autant. Pour l'instant, je vais simplement saisir cette page comme ceci, supprimer l'intérieur de celui-ci. Je vais également faire un duplicata de cette partie, alors copiez-le, cliquez sur le nouveau plan de travail et collez-le. Ensuite, comme vous pouvez le voir ici, nous avons cette partie inférieure, qui ressemble à cette partie supérieure, mais avec des couleurs différentes. Je vais donc saisir cette partie en maintenant la touche Maj enfoncée, maintenez les commandes, appuyez sur Copier, allez sur notre nouveau plan de travail et collez-la, maintenez la touche Maj et déplacez-la vers le bas, puis changez la couleur ici comme ceci. Maintenant, modifions à nouveau l'image. Déverrouillez-le, dégroupez-le, puis accédez à votre Finder, accédez aux photos et faites glisser la nouvelle photo comme celle-ci. Je vais rendre celui-ci un peu plus grand pour lui donner un peu plus de variété. Maintenant, la seule chose dont nous avons besoin pour cette conception est une énorme Google Map. Pour l'instant, je vais juste utiliser une capture d'écran. Si vous voulez que Google Map mette en œuvre dans votre conception, je devrais aller à Google Maps, puis je fais juste une capture d'écran de l'endroit réel. Mais vous ne voulez pas que cela fasse partie de votre design. Disons que vous vivez ici. Il suffit de taper votre emplacement puis de cliquer dessus, et maintenant vous pouvez faire une grande capture d'écran. Si vous le souhaitez, vous pouvez faire une capture d'écran de toute la page. Mais pour votre conception, je pense qu'il semble un peu plus propre si vous n'incluez pas tous ces boutons, mais vous pouvez bien sûr, créer une capture d'écran de cette partie et de cette partie aussi. Au fait, est-ce que je vous ai montré comment créer une capture d'écran ? C' est différent pour Windows que pour Mac. Mais sur Mac, c'est Commande, Contrôle, Shift, 4. Ce n'est pas un raccourci facile, mais c'est super sympa car alors vous pouvez créer une capture d'écran comme celle-ci. Ensuite, si vous maintenez de l'espace, vous pouvez même déplacer cette boîte comme ceci. Je l'utilise tout le temps. C' est super sympa. Sur Windows, vous pouvez simplement utiliser le bouton Imprimer l'écran, mais je pense que sur Windows 10, il y a une nouvelle option pour cela où vous pouvez également simplement créer une capture d'écran d'une partie d'une page. Maintenant, je vais cliquer, et maintenant il est enregistré dans mon presse-papiers. Maintenant, je peux aller dans Adobe XD et je peux simplement cliquer sur un collage ou une commande-v, puis juste diminuer la carte ici et la faire correspondre à votre plan de travail comme ceci. Je vais ajouter une ombre à nouveau, vous connaissez déjà les chiffres 30, 60 et peut-être diminuer un peu l'opacité. Maintenant, déplacez toute cette boîte vers le haut, allez aussi le mettre à 100 pixels d'espace. Maintenant, la dernière chose que nous devons faire est d'insérer le texte. Comme vous pouvez le voir ici, j'ai deux couleurs à l'intérieur d'un calque de texte. Comment vous pouvez le faire est assez facile, si vous tapez simplement le texte par exemple quelque chose comme celui-ci, alors vous pouvez simplement sélectionner le texte, puis appuyer sur une couleur. Ce n'est pas possible dans la plupart des outils, car dans d'autres outils, vous sélectionnez tous les deux la zone de texte entière mais dans XD, vous pouvez simplement le faire comme ceci. C'est assez facile. Maintenant, insérons simplement nos icônes de médias sociaux, qui sont vecteurs d'ailleurs. Maintenant, nous allons dans le dossier, Icônes sociales, SVG, vous pouvez choisir quelques icônes sociales d'ici. Je vais placer YouTube, Instagram et LinkedIn, par exemple. Faites simplement glisser les en dehors de votre plan de travail comme ceci. Nous avons déjà joué avec les icônes SVG sur la page d'accueil, bien sûr, donc vous savez déjà comment cela fonctionne. Vous allez l'insérer, rendre plus petit en maintenant la touche Maj enfoncée et les rendre encore plus petits. Zoom arrière pour voir si ce n'est pas trop grand. J' aime rendre les icônes vraiment petites parce que je pense que ça a l'air vraiment sympa. Maintenant donnez-leur un peu d'espacement, sélectionnez-les tous, alignez-les comme ceci, puis donnez-leur une couleur, quelque chose comme ça qui semble bien. C' est même trop grand à mon goût. Je vais les rendre encore plus petits. Je pense que ça a l'air assez décent. Maintenant, il suffit de faire glisser celui-ci vers le haut et de le fermer en diminuant la taille du plan de travail. Voyons juste ce que nous avons créé. Je vais cliquer sur jouer. Ça a l'air plutôt bien. Peut-être que le titre doit être un peu plus haut. Nous avons cette grande carte Google avec une ombre douce super agréable, et nous avons nos icônes et nos textes. Ça a l'air vraiment bien. Je vais cliquer dessus. Je vais cliquer sur enregistrer. Maintenant, vous avez vu que la première page a pris beaucoup de temps, mais les autres pages ont été créées assez rapidement, alors assurez-vous de mettre beaucoup d'efforts dans votre page d'accueil parce que si votre page d'accueil est bonne et que vous avez fait attention à votre texte et à vos boutons, à vos couleurs, les autres pages seront tout simplement très faciles à créer. Maintenant, nous allons aller dans d'autres choses d'avance. Par exemple, nous n'avons pas utilisé l'effet de flou d'arrière-plan, comme vous pouvez le voir ici dans cette conception. C' est aussi un effet populaire pour faire apparaître certaines choses un peu plus. C' est ce que je veux vous apprendre dans le prochain épisode et aussi créer un design comme celui-ci, qui a une découpe avec un masque, un autre type de style de bouton et aussi ici cette couleur de flou de fond. C' est ce que je veux faire dans les prochains épisodes. Si vous connaissez ces techniques, vous êtes sûr de pouvoir créer presque n'importe quel design que vous voulez dans Adobe XD. J' espère vous voir dans le prochain épisode. 28. Un site Web de voyage avec l'arrière-plan: Bienvenue de retour. Dans cette vidéo, nous allons créer ce design que vous pouvez voir ici. C' est un peu différent du projet sur lequel nous avons travaillé jusqu'à présent. Mais je veux vous montrer quelques effets qui ne faisaient pas partie de ce design, mais que vous pouvez utiliser pour rendre votre design plus intéressant. Par exemple, cet effet de flou d'arrière-plan que vous pouvez voir ici. C' est un effet très moderne, vous pouvez en faire un léger comme celui-ci, ou vous pouvez en créer un plus sombre comme vous pouvez le voir ici. Ou comme vous pouvez le voir ici, c'est ce que nous allons faire dans la prochaine vidéo. Cet effet est vraiment agréable de faire sortir vos objets un peu plus, car sans cet arrière-plan, ils vont simplement se fondre dans l'image. C' est un excellent moyen de séparer les éléments de l'arrière-plan. Commençons juste. Ce que je veux que vous fassiez, c'est aller à votre recherche et assurez-vous que vous avez la police Abuget installée. Il y a deux dossiers sur un ici et maintenant nous allons nous concentrer sur la page de voyage. Commençons simplement, nous allons aller à notre dossier d'exercice, et nous allons faire un duplicata de notre page. Supprimons ces pieds de page pour l'instant. Nous allons faire un duplicata et nous allions supprimer tout ce qui est sur la page. Faisons un peu de distance ici. Supprimez tout ce qui est sur la page, comme ceci. Nous n'avons pas besoin que la page soit aussi longue. Tu sais quoi ? Nous allons le faire aussi haut que le port de vue. Nous allons copier ce numéro et le coller ici sur la hauteur. De cette façon, nous avons une page plus petite. Je ne vais pas entrer dans chaque détail comment créer cette page parce que maintenant vous savez déjà comment créer un menu comme est, donc je vais sauter certaines choses. L' ombre par exemple, vous pouvez simplement copier cette ombre à partir du bas de notre conception ici, ce que nous avons déjà fait, parce que nous avons déjà créé cette ombre. Vous savez aussi déjà comment insérer les icônes comme ceci, mais il y a d'autres icônes que j'ai utilisées dans cette conception. Si vous voulez recréer ce design et peut-être le mettre dans votre portefeuille, c'est possible, parce que j'ai inclus les icônes de voyage que j'ai utilisées. Voici les fichiers SVG, voici le cocktail, le lit et la neige. Laissez-moi créer cette page très rapidement. J' en ai presque fini avec la conception de la page comme vous pouvez le voir ici. Il y arrive, je viens d'insérer le menu de mon propre site web, ça n'a pas vraiment d'importance. Mais il y a une chose que je ne vous ai pas encore montrée et c'est comment créer une icône de hamburger comme celle-ci. Une icône comme celle-ci s'appelle le hamburger parce qu'il a trois couches, et ce menu est souvent utilisé sur les appareils mobiles pour ouvrir un menu et semble vraiment propre. Ce site Web encore une fois, ce n'est pas vraiment pratique, mais c'est juste pour exercer notre compétence en design. Nous allons simplement créer cette icône de hamburger dans notre fichier très rapidement. Ce que je vais faire, c'est zoomer, saisir votre rectangle, et créer un tout petit rectangle comme celui-ci. Ensuite, faites le tour, assurez-vous que ce n'est pas trop grand, ou peut-être que c'est un peu trop grand. Rendez-le un peu plus petit, prenez simplement votre outil de grille de répétition et assurez-vous que vous avez trois de ces petites choses de burger. Là, vous avez votre icône de hamburger. Peut-être que c'est un peu trop faux, jouez un peu avec ça jusqu'à ce que vous soyez satisfait. Maintenant, j'ai préparé tous les éléments et maintenant nous allons créer l'effet de flou d'arrière-plan. Ce n'est en fait pas si dur, prenez juste votre rectangle, créez un grand rectangle comme celui-ci, et mettez-le sur l'arrière-plan, commençons par en faire une autre couleur comme celle-ci afin que nous puissions voir ce que nous faisons, appuyez sur Commande et sur les crochets gauche pour l'amener en arrière-plan. Comme vous pouvez le voir, j'ai peut-être besoin d'un peu plus d'espacement entre les colonnes. Donnons-lui un peu d'espace large comme celui-ci, et faisons-le noir pour l'instant et éteignons la bordure. Ce que vous pouvez faire maintenant est d'activer le flou d'arrière-plan. Si vous faites cela, il va créer le flou d'arrière-plan par défaut, qui est assez lourd, si vous pouvez le voir. Vous pouvez jouer avec ces paramètres ici. Ce que j'ai fait dans ma conception, c'est que je diminue le flou d'arrière-plan. Si vous le mettez sur zéro, vous pouvez simplement regarder à travers et c'est juste un calque blanc avec opacité, mais si vous augmentez votre flou, vous pouvez toujours voir un peu l'arrière-plan. Ensuite, vous pouvez également jouer avec l'éclairage, et bien sûr, avec la transparence de toute la couche. Cela dépend bien sûr de votre conception et cela dépend même de l'arrière-plan réel. Pour l'instant, je vais augmenter un peu le flou avec ces quelques uns, un peu plus bas, leur donner un peu plus d'espacement et dupliquer ces blocs comme ceci, et utiliser un autre pour le dernier. Encore une fois, ce n'est pas un design parfait et je n'ai pas mesuré tous les éléments ici, mais c'est juste pour vous montrer comment fonctionne l'effet. Comme vous pouvez le voir, mon design final, il a l'air un peu plus agréable. Il y a des coins arrondis sur les bords, je vais aussi vous montrer comment faire. Si vous cliquez sur un rectangle comme celui-ci, vous avez les coins arrondis ici. Nous en avons déjà parlé dans la section des boutons, mais vous pouvez également démarrer un coin sur, par exemple, seulement le côté gauche vers le haut. Si j'appuie sur huit maintenant, vous allez voir que je n'ai qu'un coin de ce côté et pas de tous les autres côtés. De cette façon, vous pouvez créer un très beau rectangle avec des coins arrondis. Vous pouvez également les sélectionner tous les deux, puis le faire comme ceci. Voilà, tu y vas. C' est l'effet et maintenant je veux aussi vous montrer la version sombre, je vais dupliquer mon design, puis cliquez sur le premier, maintenez la touche Maj, maintenez la touche Maj enfoncée et cliquez sur les deux autres. Maintenant, jouons avec l'éclairage par ici. Comme vous pouvez le voir, vous pouvez également diminuer la légèreté. Ensuite, à un moment donné, il devient plus sombre que l'arrière-plan réel. Si vous le mettez à un nombre plus, il deviendra plus léger, et c'est l'effet que vous pouvez voir dans le design moderne de nos jours. Je ne vois pas la version plus sombre beaucoup de fois, mais c'est aussi assez agréable. Bien sûr, cela dépend de votre arrière-plan, vous devez jouer avec les paramètres pour le rendre agréable, mais cela n'a pas l'air si mal. Essayons simplement avec quelques arrière-plans différents. Je vais déverrouiller mes antécédents et voyons comment ça marche. Retournez à votre finder, et par exemple, prenez une autre image et placez-la sur l'arrière-plan comme ceci. Comme vous pouvez le voir, sur ce fond, la version sombre semble très agréable. Cela n'a pas l'air aussi mauvais, mais j'aime la version sombre beaucoup plus ici. Essayons avec un fond plus clair comme celui-ci. Comme vous pouvez le voir ici, c'est un peu trop léger. Sur ce fond, la version sombre fonctionne également un peu mieux. Vous pouvez essayer avec les milieux que j'ai inclus ici, « Oh, j'aime vraiment celle-là, c'est vraiment propre. » C' était l'effet de flou de fond, j'espère que vous avez aimé cela, c'est un effet très moderne. Dans le prochain épisode, nous allons créer ce design, qui est un peu plus compliqué, il a un masque et il a ce curseur, effet curseur vertical, et un bouton bizarre. J' espère vous voir dans la prochaine vidéo. 29. Un site web avec des masques: Bienvenue de retour. Dans cette vidéo, nous allons créer ce beau design. Notre flou d'arrière-plan est encore là et nous avons un masque, nous avons un bouton bizarre, alors commençons avec celui-ci. Encore une fois, je ne vais pas vous montrer comment insérer un arrière-plan et comment faire un menu parce que vous le savez maintenant. Donnez-moi une minute pour recréer ce design. J' ai presque fini de recréer cette page. Il y a quelques choses différentes sur cette page de l'Explore Indonesia. Tout d'abord, le flou d'arrière-plan est beaucoup plus intense et il y a aussi un flou d'arrière-plan dans le coin qui est juste un petit avec une icône de recherche. Comment j'ai fait cela est que je viens de copier le rectangle avec le flou dessus, j'ai supprimé tout cela, fait juste un rectangle pointu. Je l'ai mis dans un coin ici et maintenant cela semble beaucoup plus sombre que ce rectangle et c'est à cause de l'arrière-plan. Mais juste pour votre design, alors vous pouvez simplement augmenter la légèreté pour le faire ressembler à ce qu'il corresponde à l'arrière-plan réel. C' est un cauchemar pour les développeurs, mais c'est juste pour vous montrer comment le rendre visuellement attrayant peut-être pour votre portefeuille. Mais si vous travaillez avec des développeurs, ne mettez pas de valeurs différentes sur tous vos éléments. Sinon, ils ne seront pas très heureux. Les lignes ici sont créées avec l'outil de ligne. Il est blanc et ensuite mis sur 20 pour cent d'opacité donc de cette façon, vous obtenez ces belles lignes que vous pouvez voir ici. Je vais aussi en mettre un sur la gauche et maintenant créons les effets de masque. Vous pouvez voir un 02 ici qui est coupé. Ce que nous allons faire, c'est que nous allons dupliquer notre gros titre, soit dit en passant, la police Grendel, que vous pouvez également trouver dans les téléchargements. Je vais créer un gros 02, je vais en faire un texte de point, rendre plus grand, et ensuite je vais le mettre en ligne. Ajoutons une autre ligne d'assistance par ici. Ça a l'air bien, et maintenant je veux couper les deux quelque part par ici. Ce que je vais faire, c'est que je vais prendre un nouveau rectangle et ensuite je vais en créer un et le chevaucher sur les deux, supprimer la bordure et choisir une couleur différente très bizarre parce que nous ne allons pas voir ce masque. Tout masque fonctionne comme ça. Vous avez besoin d'un élément pour être sur le dessus, puis si vous sélectionnez les deux avec shift et puis vous appuyez sur « Masque », j'utilise toujours la commande « Shift M », mais peut-être que vous pouvez aussi le faire à partir d'ici. Je pense que tu peux le faire d'ici, masque avec forme. Ici, vous utilisez la forme pour créer un masque et cela signifie que nous ne verrons que ce qui se trouve à l'intérieur de cette forme rouge. Si je le fais maintenant, vous pouvez voir que nous avons cet effet et maintenant nous pouvons appliquer l'opacité ici. Si vous souhaitez modifier le texte, vous ne pouvez pas le faire en double-cliquant. Vous devez cliquer sur le calque de texte réel. C' est le masque, vous pouvez toujours cliquer dessus et le modifier si vous le souhaitez, et c'est le calque de texte. Si je voulais que le calque de texte soit une couleur différente, je dois le faire ici. Dans mon design, je l'ai mis à, je ne sais pas, 40 pour cent d'opacité par exemple, et comme vous pouvez le voir en ce moment, nous avons créé ce joli masque. Supprimez cette règle d'aide pour l'instant et cela semble assez soigné. Je pense que pourrait faire dans ma conception réelle est encore plus grand donc je vais augmenter la taille comme vous pouvez le voir. Assurez-vous qu'il est à l'intérieur de votre masque et si ce n'est pas à l'intérieur de votre masque, vous pouvez changer le masque comme ceci. Cela a l'air assez agréable et maintenant créons le bouton que vous pouvez voir ici avec une petite flèche et quelques coins diagonaux. Ce n'est pas vraiment difficile à faire. Créons simplement un bouton très rapidement. Prenez votre outil rectangle, créez un bouton, choisissez une couleur qui correspond à votre design. Ça semble bien pour l'instant. Supprimez la bordure, mettez du texte à l'intérieur de votre calque. J' ai créé une flèche en utilisant l'outil de ligne comme celui-ci, faites une ligne blanche, puis attrapez l'outil de triangle et faites un petit triangle comme celui-ci, décochez la bordure et faites-la pivoter. Assurez-vous que ce n'est pas trop grand. Ça a l'air cool. Maintenant, ce que vous pouvez faire, si vous double-cliquez sur le rectangle, vous pouvez changer le point d'ancrage. De la même manière que nous avons changé l'effet d'onde sur notre site Web, vous pouvez saisir ce coin et ce coin en même temps en maintenant la touche « Maj », puis cliquer, et maintenant vous pouvez simplement changer la position de ces points d'ancrage. De cette façon, vous pouvez créer un bouton qui semble un peu plus créatif. Si vous regroupez ces trois éléments comme celui-ci, vous cliquez sur le texte et vous cliquez également sur le « Bouton », et vous cliquez sur celui-ci, maintenant il est aligné au milieu. Encore une fois, ce n'est pas exactement le même, mais c'est la technique que j'ai utilisée. Je pense que sur mon design ici il y a aussi beaucoup d' espacement entre les lettres comme vous pouvez le voir. Je vais aussi le faire très vite pour l'instant. Augmentez la visibilité de l'espacement de la police si vous voulez vraiment correspondre à la conception. Je pense que mon arrière-plan est un peu plus sombre dans mon design final. Changeons le texte pour l'instant, magasinez maintenant. Ça a l'air cool. La dernière chose que je veux faire pour cette page est de créer cet effet que vous pouvez voir ici. façon dont vous faites cela est en utilisant le masque et en utilisant deux couches l'un sur l'autre. Créons ça très vite. Ce que je vais faire, c'est que je vais zoomer et attraper le cercle, faire un petit cercle comme ça, le dupliquer. Ensuite, pour le haut, déplacez-le un peu plus vers le haut, puis faites-en une copie en maintenant « Alt », agrandissez-le en maintenant « Alt » et « Shift », puis mettez la bordure et remplissez. Maintenant, mettez ça sur les blancs, rends-le beaucoup plus grand, et maintenant tu peux voir que mes points sont beaucoup trop gros. J' ai besoin de tout sélectionner, faisons tout un peu plus petit. Comme vous pouvez le voir ici, il y a un contour blanc dessus et puis il y a une version plus sombre en dessous. Ce que j'ai fait, c'est que j'ai fait un double de celui-ci, donc le blanc doit être sur le dessus. Pour vous assurer qu'il est en haut, il suffit de cliquer sur l'amener à l'avant. Ça restera le blanc. Pour cela, nous voulons des versions grises donc je vais mettre cela sur 50 pour cent d'opacité. Mais maintenant, si je superpose celui-ci, nous ne verrons pas l'arrière-plan sonner, donc il y a deux façons de le faire. Nous pouvons créer un masque sur celui-ci qui ressemble à ceci ou nous pouvons créer un masque sur celui-ci et le chevaucher alors il semble que le blanc soit sur le dessus mais en réalité, celui-ci est sur le dessus. C' est ce que je vais faire parce que c'est un peu plus facile. Prenez votre rectangle pour l'instant, créez un rectangle et assurez-vous qu'il est dans la bonne position, puis cliquez sur les deux et cliquez sur « Objet », puis sur « Masque ». Maintenant, le gris est sur le dessus, je vais déplacer le blanc en dessous, maintenant appuyez sur « Commande » et le crochet gauche pour l'amener à l'arrière. Maintenant c'est en dessous, mais nous ne pouvons pas voir celui-ci parce que nous avons utilisé l'opacité, c'est pourquoi. Nous ne pouvons pas utiliser l'opacité dans ce cas. Nous devons augmenter l'opacité et changer la couleur pour quelque chose qui ressemble un peu plus à l'arrière-plan, rendre cela un peu plus léger. Vous pouvez réellement le voir, et maintenant si vous zoomez, vous pouvez voir que cela semble plutôt cool. La seule chose qui soit différente ici, c'est qu'il y a beaucoup plus de marge entre tous les points et que les points en bas ont une opacité, quelque chose comme ça. C' est ainsi que vous créez cet effet, semble vraiment sympa, cela peut être utilisé pour un curseur qui remplacera l'image en arrière-plan. Ce design fonctionne également assez bien avec des arrière-plans différents. Par exemple, prenons un autre arrière-plan et mettons-le ici. Comme vous pouvez le voir, ça a l'air assez bien. Peut-être que c'est un peu trop intense alors diminuez l'opacité comme ça, mettez-le sur 50 ou sur 60 et maintenant vous avez votre design. La seule chose que j'ai oublié plus l'icône de recherche ici, que j'ai également inclus. Encore une fois, si vous voulez utiliser cet article dans votre portefeuille, je m'en fiche, c'est bon. Il y a l'icône de recherche. Ça a l'air plutôt bien. J'espère que vous avez aussi aimé cet épisode. C' était une autre technique sympa, j'espère vous voir dans le prochain épisode parce que nous allons créer d'autres effets cool. 30. Conception mobile réactive - partie 1: Bienvenue de retour. Dans cet épisode, nous allons faire quelque chose de vraiment amusant. Nous allons créer un design mobile réactif. Ce que notre conseil est vide depuis un certain temps maintenant. Je voulais remplir ce design avec le contenu sur cette page va être un très facile parce que nous avons déjà préparé quelques styles pour nos titres. La page Web n'est pas si difficile à rendre responsive car elle n'a pas beaucoup de colonnes difficiles. Donc, ce n'est que deux colonnes. Il y a trois colonnes par ici, trois, deux, quatre, et juste une grande. Donc, si vous voulez vous assurer que votre design mobile va être facile, alors ce ne sera pas difficile si vous avez une page qui ressemble à ceci. Ce que je veux faire maintenant, c'est que je veux développer la page mobile parce que cela va probablement être plus long que celui-ci. Maintenant, nous devons déverrouiller quelques choses pour le copier. La première chose que je veux faire est de déverrouiller l'arrière-plan pour l'instant, et je vais juste le copier comme ça. Cliquez sur notre arrière-plan mobile, puis collez-le. Ensuite, il suffit de le placer à l'intérieur de notre planche, peut-être le rendre un peu plus petit comme ça. Maintenant aussi pour notre menu, nous voulons utiliser une icône de hamburger comme je vous ai montré dans un épisode précédent. Je vais seulement copier les logos. Double-cliquez sur votre logo, allez sur mobile, puis collez-le, et assurez-vous que vos grilles sont configurées avec 30 pixels sur les côtés. Parfois, j'utilise aussi 20. Mais 30 pixels semblent un peu plus beaux parce que plus vous avez d'espace blanc, plus il est beau, mais ce n'est pas toujours pratique. Pour mes sites web actuels, lorsque j'ai construit les onduleurs de mon site, j'utilise 20 pixels sur les côtés. Alors mettons-le à 20 pour l'instant. Qu'est-ce que je fais ? Je vais attraper l'icône de hamburger que j'ai créé dans un autre épisode qui est vraiment belle icône. Je vais copier ça, aller à mon design mobile et le coller ici. Boom, je l'ai ici. Ça a l'air assez dopé, et ce n'est pas parfaitement aligné parce que j'ai encore les grilles de répétition. Je n'en ai pas vraiment besoin ici, donc je vais dégrouper les grilles de répétition. Je pourrais juste en faire un groupe et m'aligner sur la grille. Insérez maintenant nos titres. Comme nous l'avons préparé ici, le grand titre sera celui-ci. Je vais juste copier tout, et je vais faire un duplicata et le coller ici, mettre comme ça. Je vais juste cliquer sur le titre. On l'a déjà préparé. Maintenant, nous allons juste au titre mobile. Je vais juste le rendre blanc. Maintenant il en est 46 et celui-ci en avait 54. Maintenant, la seule chose que vous devez faire est de vous assurer que votre zone de texte n'étend pas la grille comme ceci. Assurez-vous juste qu'il y a assez de place pour vos textos. C' est peut-être un peu trop dans mon site web actuel. n'y a pas beaucoup de textes dans le grand titre. Mais vous pouvez voir ici, j'ai conçu et construit des sites Web qui n'est pas un texte très long. Si vous utilisez une grande police comme celle-ci, assurez-vous que votre titre n'est pas trop long. Maintenant, je vais aussi utiliser celui-là. Comme vous pouvez le voir, ce n'est que trois lignes. C' est bon pour une vue mobile aussi. Copions simplement ce titre et utilisons un vrai texte. Ça a l'air plutôt sympa. Je vais à nouveau enregistrer l'arrière-plan, placer ça un peu plus haut. Je vais aussi copier la vague qui est verrouillée. Je vais le déverrouiller à nouveau avec le commentaire L, puis cliquez sur mon mobile, ou tableau et collez-le. Assurez-vous que vous pouvez toujours voir la vague, peut-être la rendre un peu plus intense sur mobile. Donc, vous pouvez réellement voir une partie de la vague. Ne le rendez pas trop intense. Sinon, ça va avoir l'air bon marché. Donc quelque chose comme ça devrait aller. Maintenant, l'arrière-plan, nous voulons aussi avoir le même fond de remplissage que nous avons sur celui-ci. Pour le remplissage, nous allons juste choisir le fond F5, F5, F7. Maintenant, ça a l'air beaucoup mieux. Voyons à quelle vitesse nous pouvons créer ce design mobile. Pour cette boîte, ce que je vais faire, c'est que je vais prendre la boîte comme ça, et m'assurer qu'elle est dans le droit de notre planche. Assurez-vous que nous pouvons encore voir un peu de la vague parce que ce serait bien. Je vais juste prendre mes deux premières icônes comme ça, copier, aller à mon air board, puis la coller. Je pense que quelque chose comme ça devrait aller. Bien sûr, sur un téléphone mobile, il est difficile d'avoir quatre colonnes. Parfois, vous avez juste à casser votre design un peu pour le rendre adapté aux téléphones mobiles, quelque chose comme ça qui est assez bon. Regroupez-le et maintenant ce n'est qu'un seul groupe. Maintenant, pour cette partie, peut-être que je ne veux pas utiliser quatre images ici parce que ce sera peut-être un peu trop. Ce que je vais faire, c'est que je vais saisir tout cela d'abord, je vais déplacer ça à mon design mobile comme ça. Le deuxième titre, nous avons besoin du deuxième titre mobile comme celui-ci. Rends-le un peu plus petit. Assurez-vous qu'il s'adapte à la grille. Tous vos calques de texte et les aligner correctement. Maintenant quatre images, peut-être qu'on sera un peu trop. Bien sûr que vous pouvez faire quelque chose comme ça. Regroupez-le, copiez-le, collez-le ici, et faites-en une grande image si vous aimez ça. En fait, ça a l'air beaucoup mieux. Parce que sur mon site, j'ai choisi deux images, et je les ai mises sur l'autre, mais je pense que cela semble plutôt bon. Mais ce que j'ai fait sur mon site, je viens de choisir deux images. Par exemple, ces deux-là. J' ai donc des commentaires cliqués et je copie à ces images et les coller ici. Vous pouvez les voir en pleine taille. Je pense que je vais les aligner au milieu, quelque chose comme ça. Encore une fois, vous ne voulez peut-être pas tout montrer sur un design mobile. Parfois, vous avez juste besoin de sauter et de supprimer quelques parties. Dans les sites Web réels, c'est souvent ce qui se passe parce que sur un téléphone mobile sinon il deviendrait si énorme. Faites quelque chose comme ceci ou l'autre solution que j'ai conçue. Pour l'instant, je vais utiliser cette solution parce que je l'aime beaucoup. Maintenant, pour cette partie, c'est vraiment agréable à propos de la plaque de cuisson répétée parce que maintenant vous pouvez voir à quel point la grille de répétition est agréable. D' abord, je vais copier mon titre. Assurez-vous que vous copiez votre titre, donnez-lui un peu d'espacement, et assurez-vous qu'il est vraiment long. Je ne sais pas combien de texte, peut-être deux lignes, ça devrait être bon. Maintenant, si nous copions la grille de répétitions et allons sur notre mobile notre planche et la coller, nous ne pouvons mettre qu'une seule boîte ici. Tout d'abord, nous devons diminuer la taille de chaque rectangle. Faisons ça d'abord, diminuons-le, maintenez le décalage. Maintenant, ça va être vraiment sympa. Parce qu'en ce moment, si nous diminuons le côté de la grille de répétition, il va se souvenir de toutes les images qui sont à l'intérieur et il montrera les mêmes images. Donc, vous n'avez pas eu à réorganiser les images comme ça. La seule chose que vous devez réorganiser est la marge entre les rectangles réels. Parce que pour votre section client, je ne sais pas si vous voulez déjà sauter quelques clients sur mobile. C' est pourquoi je l'ai conçu comme ça. Très bien, cette partie a l'air plutôt sympa. Assurez-vous qu'il y a suffisamment d'espace entre vos colonnes. Encore une fois pour votre titre, choisissez le mobile. Encore une fois, maintenant je le fais assez rapidement parce que je ne veux pas passer beaucoup de temps à tout mesurer. Mais sur un vrai projet, je vais vraiment mesurer chaque espacement entre tous les titres pour m'assurer qu'il est très cohérent sur l'ensemble du site, car c'est important. Alors finissons simplement ce design mobile dans la prochaine vidéo. 31. Conception mobile réactive - partie 2: Ok, bienvenue. Nous allons terminer cette page sur une conception mobile alors assurez-vous de copier votre calque d'arrière-plan comme celui-ci. Cette partie va être très rapide le verrouiller et le verrouiller pour le web. Saisissez votre titre comme ça, faites une copie. Assurez-vous que c'est la bonne taille comme celle-ci. Rends-le large. Alignez vos textes, redimensionnez vos zones de texte, et maintenant attrapez l'un d'entre eux, copiez-les comme ceci. Cliquez sur la bordure et assurez-vous de diminuer la taille de cette colonne intérieure réelle comme celle-ci. Maintenant, si vous voulez vous assurer que vous avez exactement les mêmes mesures sur cette colonne, ce que vous devez faire est de copier celle-ci et ensuite vous devez changer le texte. Parfois, je le fais parce que je veux m'assurer que la taille des boîtes est la même. Redimensionnez maintenant votre arrière-plan et maintenant nous avons terminé pour cette partie. Pour la section « Témoignage », je vais vous montrer comment faire cette partie parce que vous connaissez maintenant les titres. Si vous saisissez un de ces témoignages, il sera trop grand, alors assurez-vous que la partie gauche est alignée sur votre grille, puis diminuez la taille du calque d'arrière-plan. Assurez-vous de ne pas cliquer sur le tout, mais vous venez et cliquez uniquement sur le calque d'arrière-plan, diminuez cela, puis venez et cliquez sur votre calque de texte et lui donnez également un peu d'espace. De cette façon, il semble presque le même et maintenant vous pouvez utiliser votre plaque de cuisson répétée et avoir les autres commentaires à l'intérieur d'ici. Maintenant, pour la dernière partie, comment devriez-vous résoudre cette partie ici ? Sur mon site, je viens de sauter toute cette partie. Tout mon site mobile semble juste sans cela parce que je ne savais vraiment pas comment le résoudre. Bien sûr, vous pouvez en faire une très petite ou seulement montrer une de ces images, mais je vais vous montrer à quoi ça ressemble sur mon site. Ce que j'ai fait c'est que j'ai attrapé la vague et j'ai attrapé l'arrière-plan je l'ai copié et je l'ai collé. J' ai copié tous les calques de texte comme celui-ci, l'ai collé, ajusté à la taille mobile, peut-être que j'ai changé un peu la vague et c'est en fait tout ce que j'ai fait pour la section vers le bas. Tu ne veux pas rendre ça trop difficile pour toi parfois. Maintenant, pour le pied de page, parce qu'il s'agit d'un composant, nous devons changer le composant pour le pied de page. Ce que je veux que vous fassiez est de faire une copie des composants, cliquez avec le bouton droit, puis dégroupez les composants. C' est toujours notre principale composante que nous pouvons voir ici. Mais maintenant, nous devons faire un composant pour notre pied de page mobile. On va juste changer ce pied de page, le regrouper très vite. Allez à l'intérieur de votre tableau d'art, dégroupez-le à nouveau, puis assurez-vous qu'il s'adapte à votre design mobile. Pour les pieds de page, ce que vous voulez toujours faire est d'aligner vos éléments, assurez-vous qu'ils sont tous à l'intérieur de votre pied de page. Il n'est pas toujours aligné à gauche, mais pour la plupart des pieds de page, il est aligné à gauche parce que vous avez beaucoup de textes. C' est un pied de page très simple. Peut-être que vous pouvez également faire une conception centrale pour ce pied de page. Mais sur la plupart des pieds de page, vous voulez juste un pied de page aligné à gauche. Ça a l'air assez bien. C' est comme ça que vous voulez le faire pour les grands sites Web. Mais pour l'instant, je vais juste utiliser la conception du centre parce que cela semble un peu plus agréable pour ce site. Maintenant, attrapez tout, allez dans les composants, appuyez sur le plus, puis renommez-le en pied de page m parce que c'est le pied de page de notre mobile. Maintenant, nous pouvons simplement insérer les composants de pied de page de mobile sur toutes les pages. Maintenant, la dernière chose que nous devons faire est de réduire la taille du tableau d'art et cliquer sur notre tableau d'art et de cliquer sur le jeu et nous allons voir ce que nous avons créé jusqu'à présent. Le menu mobile semble un peu trop grand à mon goût, mais comme vous pouvez le voir, cela semble plutôt sympa. Tout semble mobile optimisé. J' ai besoin de travailler, j'ai le titre ici, je dois travailler sur les marges, mais vous pouvez voir à quel point il est rapide de créer un design mobile si vous avez tout préparé pour le bureau. Disons maintenant que vous avez fini avec votre design et que vous voulez montrer votre design à d'autres personnes. C' est ce que je veux montrer dans les prochaines vidéos parce que vous avez besoin de connaître certaines choses pour partager votre design, faire un prototype et l'envoyer à votre client, ou peut-être même le télécharger sur votre propre portfolio. Je te verrai dans la prochaine vidéo. 32. Exporter Artboard et élément: Salut et bienvenue. Dans cet épisode, je vais vous montrer comment vous pouvez exporter vos designs. Peut-être que vous voulez partager vos conceptions avec votre client ou que vous voulez les télécharger dans un autre outil de prototypage ou vous voulez faire une exportation pour mettre ces conceptions dans votre portefeuille. La façon la plus simple de le faire est de sélectionner vos tableaux d'art, puis de les exporter. Vous pouvez également utiliser la fonction de repère pour l'exportation. Mais je ne l'utilise pas vraiment, parce que beaucoup de fois vous travaillez sur une page et vous devez envoyer cette page à un client ou vous voulez exporter trois ou quatre écrans et même si vous voulez exporter 10 écrans, ce n'est pas vraiment difficile de cliquer sur eux, donc je n'utilise pas vraiment la marque pour la fonctionnalité d'exportation. Je clique simplement sur les éléments que je veux et je les exporte. C' est ce que je veux vous montrer et si vous voulez vraiment une vidéo sur marque pour l'exportation, alors dites-le moi, mais ce n'est que le cas si vous travaillez dans de très gros fichiers. Je pense que la plupart des gens qui suivent ce cours n'auront pas encore d'énormes projets. Qu' il est juste préférable de cliquer sur les choses que vous voulez une exportation, c'est beaucoup plus facile. Ce que vous devez savoir si vous voulez exporter des objets, c'est que les noms de vos tableaux d'art et les calques seront également exportés. C' est assez agréable parce que parfois vous avez une situation comme celle-ci, où vous voulez exporter ces quatre images séparément. façon dont vous faites cela est en sélectionnant tous comme ceci, de sorte que vous commenter cliquez sur le premier parce que c'est à l'intérieur d'un groupe, vous commentaire décalages cliquez sur le second. Maintenant, vous avez quatre éléments sélectionnés, y compris l'ombre et pour garder tout organisé, vous pouvez aller dans votre panneau Calques et ici vous pouvez voir le nom. Cela a déjà un joli nom, donc si je vais les exporter en JPEG ou PNG, vous allez voir ces noms. Essayons ça pour l'instant. Je vais aller au fichier et je clique sur l'exportation, puis cliquez sur sélectionné, parce que j'ai sélectionné ces quatre images. Je vais faire un nouveau dossier et appeler les exportations pour l'instant, tout comme je les teste. Vous avez donc ici quelques options pour exporter vos designs. En ce moment, j'exporte des images qui ont des ombres et cela signifie transparence. C' est pourquoi nous avons besoin de PNG, parce que PNG est le seul format de pixel qui peut gérer la transparence avec JPEG, vous obtiendrez un fond blanc. Si vous utilisez la transparence ou si vous exploitez icône par exemple et que vous voulez les exporter en pixels, vous aurez besoin de PNG, sinon vous obtiendrez un fond blanc. Nous allons choisir PNG pour l'instant et puis vous avez quelques options ici. La plupart du temps, j'utilise uniquement le design, qui est juste 1x ou Web et qui est 1x et 2x et cela signifie la taille de l'image à l'intérieur de votre carte, cette image peut être une largeur de 300 par 400 pixels et si vous sélectionnez cette option, puis il exportera une image de 300 et 400 pixels de large, mais aussi une version de 600 par 800. Cela peut être agréable si vous avez importé de vraies images volumineuses et que vous voulez conserver la résolution, ou si vous voulez juste savoir à quel point votre exportation va être nette. Il suffit de cliquer sur celui-ci et maintenant il va créer huit exportations parce que nous avons sélectionné quatre images. Cliquez sur exporter pour l'instant, comme vraiment rapide, allez à votre finder, allez aux exportations et comme vous pouvez le voir, il a les mêmes noms de couche et une version 2x ont cette @2x à la fin. Si vous ouvrez ceci, vous pouvez voir qu'il y a beaucoup d'espace blanc, mais c'est pour l'ombre et ces images ne sont pas nettes du tout parce que j'ai importé des images nettes et maintenant nous les exportons à nouveau. Ce n'est pas vraiment net, mais comme vous pouvez le voir, la version normale est moins nette que la version 2x et c'est une quantité horrible, mais je veux juste vous montrer comment cette fonctionnalité fonctionne. C' est la version normale et c'est la version la plus nette. Faisons cela aussi pour les tableaux d'art maintenant, alors renommons ces tableaux d'art en Home final v1, puis Home final Mobile v1. Donc, cliquez sur le premier tableau d'art, la grille n'a pas d'importance qu'elle soit toujours activée et n'exporte pas la grille et déplace également le clic sur le tableau d'art de votre bureau. Maintenant, allez à nouveau dans le fichier, allez à l'exportation sélectionnez-le et maintenant nous voulons aussi tester le 1x et 2x et maintenant je vais choisir JPEG car un avantage avec JPEG est que vous pouvez appliquer une compression sur vos images. Par exemple, vous pouvez le mettre à 60 pour cent de qualité, il sera toujours super tranchant. Mais si vous partagez des éléments avec vos clients, vous ne voulez pas envoyer des fichiers JPEG de 10 mégaoctets. Vous voulez y ajouter un peu de compression. Je vais vous montrer que si vous le mettez à 60 pour cent de capacité, il sera toujours super pointu et nous allons voir 1x et 2x chose. Nous allons cliquer sur l'exportation et ensuite nous allons aller au détecteur. Comme vous pouvez le voir maintenant, les images ont été exportées. Il existe une version mobile à domicile qui est de 260 kilo-octets. La version 2x est presque 700. Ouvrons juste la version 1 pour l'instant et je vais zoomer et voir si elle est encore assez nette. Comme vous pouvez le voir, c'est encore assez net pour une compression de 60 pour cent au 1x ce n'est pas super tranchant. Cliquez simplement sur le 2x pour l'instant. J' envoie souvent la version 2x à mon client. Comme vous pouvez le voir pour un téléphone mobile, cela est plus que suffisamment net pour le partager avec vos clients ou même pour le mettre dans votre portefeuille. Vérifions également la version 2x de la page d'accueil. Zoom un peu et comme vous pouvez le voir, c'est assez net pour une image qui ne fait que 1,5 Mo et près de 10 000 pixels de hauteur. Donc la décompression dans Xd est assez bonne. La dernière chose que je veux vous montrer est comment exporter l'icône vectorielle. Par exemple, nous avons conçu un bouton. Par exemple, nous avons conçu ce bouton ou cette petite flèche. Si nous voulons exporter la flèche, nous avons un problème car il s'agit d'une ligne et, pour une raison quelconque, si vous l'exportez, elle ne décrit pas les lignes. Vous devez utiliser un rectangle si vous voulez créer une icône vectorielle. Ce n'est pas vraiment sympa et peut-être que je le fais mal, mais c' est comme ça que je le fais. Ce sont deux éléments distincts, donc pour les exporter en tant qu'icône, vous devez cliquer dessus dessus, les sélectionner les deux, puis les regrouper, et simplement appeler cette flèche pointue longue. Par exemple, j'ai sélectionné le groupe. Ceci est important pour sélectionner un groupe et maintenant aller dans fichier et exporter. Parce que si vous sélectionnez les deux couches comme celle-ci et que vous allez dans les exportations de fichiers sélectionnées, la ligne sera exportée séparément et le triangle. C' est pourquoi vous devez cliquer sur le groupe, puis aller dans le fichier, aller à l'exportation, puis sélectionnez-le et maintenant vous devez utiliser SVG. SVG est le format utilisé sur les sites Web et vous pouvez également l'importer dans Adobe XD, comme vous l'avez déjà vu avec nos icônes sociales. C' est un très bon formats pour exporter des icônes vectorielles. Maintenant, si vous choisissez le SVG parce qu'il s'agit d'une icône vectorielle et que vous l'exportez, vous disposez maintenant d'un fichier vectoriel que vous pouvez utiliser dans n'importe quel autre fichier Adobe XD de votre choix. Comme vous pouvez le voir ici, si vous le mettez à l'échelle, il semble toujours assez bon et c'est illimité tranchant. Mon conseil serait si vous concevez des icônes avec un Illustrator, car Adobe XD n'est pas un outil parfait pour concevoir vos icônes. Mais parfois, vous pouvez concevoir une petite icône comme celle-ci avec un rectangle et un triangle et réutiliser cela dans d'autres projets. C' était tout ce que je voulais montrer pour la fonctionnalité d'exportation. Je te vois dans la prochaine vidéo. 33. Le menu collant en dessus: Bienvenue de retour. Dans cet épisode, nous allons créer l'effet d'en-tête collant. Dans tous les designs que nous avons créés dans ce cours, nous avons utilisé l'effet d'en-tête transparent. Cela semble très moderne, mais vous avez besoin d'une belle image de fond. Pour beaucoup de projets, c'est un look trop moderne et les clients sont plus à la recherche de quelque chose comme ça, juste un en-tête très propre et simple sur ce site. Ça n'a pas l'air si joli parce que l'arrière-plan ici n'est pas blanc. Mais dans la plupart des sites Web, vous allez avoir un en-tête qui ressemble à ceci ou un menu avec un arrière-plan. Vous avez un logo noir ou un logo plus sombre, et vous avez presque des éléments de menu noirs. Voici comment la plupart de vos menus vont regarder sur le site Web que vous allez concevoir. Ce que vous pouvez faire avec cela, c'est que vous pouvez aller dans l'outil de prototypage parce que vous allez rencontrer des situations où vous devez présenter votre site Web à un client et à quoi il ressemblera lorsque vous faites défiler. Parce que sur un site comme celui-ci, si vous cliquez sur un tableau d'art réel, vous cliquez sur jouer et vous faites défiler, alors le menu restera juste au-dessus. Avec beaucoup de sites Web, le menu va coller au sommet et c'est ce que vous pouvez faire. Nous sommes en mode prototypage, mais c'est très difficile à faire avec l'en-tête transparent car alors il sera au-dessus des autres éléments ou en dessous, ne fonctionne pas vraiment. Ce que vous devez faire est de créer un menu qui ressemble à ceci si vous voulez faire ces effets. Maintenant, nous allons passer en mode prototypage. Le mode prototypage est l'endroit où vous pouvez créer un faux prototype, puis vous pouvez obtenir une expérience pour ce que le produit réel, le produit final quand il est codé ressemblera. Ce que vous pouvez faire maintenant, rien ne change, mais vous pouvez lier certains éléments les uns aux autres. La seule chose que je veux faire dans cet épisode est de vous montrer la position fixe lors du défilement de l'effet. Ceci n'est pas possible dans la fonction de conception. Donc, ne cherchez pas cette option lorsque vous êtes en mode Création. Vous devez passer en mode prototypage, puis cliquez sur celui-ci, une position fixe lors du défilement. Correction signifie qu'il restera dans cette position. Maintenant, si nous cliquons sur le nom du tableau d'art et nous cliquons sur le jeu, et nous allons commencer à faire défiler. Vous commencerez à voir que notre menu restera en place, mais maintenant vous pouvez voir qu'il est sous la plupart des articles, et ce n'est pas ce que nous voulons, bien sûr. Donc, nous devons cliquer sur notre arrière-plan et l'amener à l'avant, ou simplement appuyer sur la commande Shift et le crochet droit. Maintenant, si nous cliquons à nouveau sur jouer, vous pouvez voir que le menu restera en haut sur l'ensemble du site. Vous pouvez même ajouter une ombre si vous le souhaitez. Un peu d'ombre ici, parce que souvent vous aurez un fond blanc ici, je vais vous montrer. Si votre arrière-plan de votre site Web est blanc, comme ceci. Disons que c'est aussi blanc. Vous avez un site Web qui ressemble à ceci parce que la plupart des sites Web ont un fond blanc et vous faites l'effet de défilement et vous avez également un en-tête blanc. Ça n'a pas l'air parfait. Donc tu peux faire deux choses. Vous pouvez utiliser une très petites lignes subtiles, quelque chose comme ça. Il suffit de choisir l'outil de ligne, de créer une ligne qui remplit tout l'écran de gauche à droite, et de le placer en bas de votre menu et assurez-vous qu'il est à l'intérieur du groupe. Maintenant, commande x pour être sûr de l'avoir. Ensuite, allez à l'intérieur du groupe, sorte que vous pouvez double-cliquer. Vous pouvez voir que maintenant je suis à l'intérieur du groupe. L' en-tête est en fait appelé groupe 305. Appelons ça le menu pour l'instant. Donc on voit ce qu'on fait. Allez à l'intérieur du groupe, nous sommes maintenant à l'intérieur de ce dossier, puis appuyez sur Commande v. Ensuite, placez votre ligne comme ceci et puis mettez cela sur une opacité inférieure, par exemple, quelque chose comme ça. Ensuite, si nous cliquons sur le jeu, vous verrez qu'il y a une petite différence entre cette section. Mais je pense que c'est déjà trop intense, alors mettons-le à 15 pour cent pour l'instant. Cliquez sur jouer, et cela semble déjà un peu plus agréable. Ce que vous pouvez également faire est d'utiliser une ombre. Disons que vous n'aimez pas ces effets de ligne. Ce que vous pourriez faire est de venir cliquer sur votre arrière-plan. Donc, sur le rectangle de fond blanc, puis ajoute une très petite ombre. Peut-être que c'est déjà trop intense. Essayons ça pour l'instant. Oui. C'est un peu trop intense, alors vous savez comment ça marche. Vous pouvez diminuer l'intensité de l'ombre, puis cliquer sur lecture. Cela va également créer un effet agréable pour votre menu. Maintenant, dans le prochain épisode, je veux vous montrer comment vous pouvez réellement lier ces pages vers le haut. Si vous cliquez sur ces éléments, vous allez réellement à ces pages. Ensuite, il commence vraiment à ressembler à un vrai site Web. 34. Créer un prototype pour web et mobile: Bienvenue dans cette vidéo, nous allons relier toutes les pages ensemble. Nous sommes ici en mode design. J' ai changé tous les en-têtes et je me suis assuré que le soulignement est sur la bonne page. Il s'agit de la page du portefeuille, de la page sur la page et de la page de contact. Ce que vous voulez faire est d'aller à votre mode de prototypage, cliquez dessus car nous n'en avons pas besoin pour le moment, zoomez avant et commencez à zoomer sur votre menu. Vous pouvez faire deux choses. Vous pouvez double-cliquer sur l'élément réel à lier, puis cliquer et faire glisser sur le plan de travail réel que vous souhaitez lier. Ensuite, vous avez quelques paramètres ici. Vous voulez taper dessus parce que si vous cliquez dessus, cela signifie que je touche, ce sera une transition vers un autre écran. Vous pouvez même conserver la position de défilement car parfois vous allez d' une section ici à une autre page et vous voulez également rester sur la même hauteur. Par exemple, si vous créez un bouton, et si vous cliquez sur ce bouton, la couleur du bouton change. Ensuite, vous ne voulez pas aller sur une autre page, vous voulez rester dans cette position. Vous changez d'écran, mais vous devez avoir l'impression que vous ne changez pas d'écran. C' est pourquoi vous utiliseriez cette fonctionnalité. On va aller à cette page. Je n'ai pas nommé mes pages correctement. L' effet de dissoudre signifie qu'il va s' estomper et que vos paramètres de fondu sont ici, alors relâchez-vous et cela prendra 0,3 seconde. Essayons ça pour l'instant. Nous allons passer à la finale, cliquez sur jouer. Si nous cliquons sur le portfolio, nous verrons ce qui se passe, c'était un fondu que nous ne pouvons pas revenir en arrière parce que nous devons également lier de la page du portfolio à votre page d'accueil. Il y a aussi en transition sur l'onglet dissoudre. Voyons ce que nous avons créé jusqu'à présent. Cliquez sur jouer portfolio, accueil. C'est sympa. Cela fonctionne et ils défilent tous les deux. Vous devez également connecter ces autres pages. Parfois, il devient un gâchis parce que vous devez zoomer et connecter toutes les pages et il va être vraiment petit, sinon je veux vous montrer un truc. Ce que je ferais si vous alliez lier toutes les pages ensemble, prénommez vos articles. Par exemple, final v2-home. J' ai nommé toutes mes pages à la version finale de la version 2. Si je vais par exemple à la page à propos, et je clique sur cet élément, je peux choisir mes plans de travail à partir d'ici et puis je peux aller à, cela doit être V2 final sur, et puis il créera automatiquement ce lien afin Vous n'avez pas à vous embêter avec le traînement. Mais pour l'instant je ne veux pas dissoudre effet parce que sur un site Web pages ne se dissolvent pas ils cliquent juste et c'est juste instantané. Si vous cliquez simplement sur aucun, et nous allons aussi le faire pour ces animations ici. Cliquez sur ces deux-là et mettez-les sur notre page d'accueil ici. Alors retournez à la page de votre portefeuille, cliquez également sur celui-ci, mettez-les sur aucun. Voyons ce que nous avons créé dans la mesure où je vais cliquer sur ma page d'accueil, cliquez sur jouer. C' est ainsi que cela devrait fonctionner sans une animation en fondu, car la plupart des sites Web ne s'estompent pas. La page à propos, encore une fois cela fonctionne également. Tout ce que vous devez faire est de lier toutes ces pages de menu les unes aux autres. Cliquez dessus, choisissez votre plan de travail que vous voulez, v2 et il se souviendra des mêmes paramètres. Portefeuille, cliquez dessus, cliquez sur portefeuille, contactez. C' est un moyen vraiment facile de relier votre site Web comme celui-ci. Ça a l'air assez réaliste. Si vous présentez à un client, ne leur dites pas que c'est vrai parce que tout est faux. Bien sûr, vous ne pouvez pas exporter cela au format HTML. Eh bien, au moins pas encore. Peut-être que cela ira à l'avenir que vous pouvez exporter certains éléments vers des éléments réels du site Web, mais pour l'instant, c'est juste pour votre présentation. Si vous avez lié tous vos éléments, vous aurez beaucoup de ces éléments liés comme je suis en train de créer déjà en ce moment. J' ai terminé tous les éléments liés. Peu importe où je suis sur la page, je peux simplement cliquer sur toutes ces pages. C' est plutôt cool pour votre présentation. Il y a une autre fonctionnalité que je veux vous montrer que vous pouvez utiliser pour présenter votre travail dans la prochaine vidéo. 35. Créer une vidéo et un lien à partager: Tous les bons gars, nous sommes presque faits.Deux choses que je veux vous montrer, à la présentation du travail, abord est la fonctionnalité mobile dans Adobe XD. Vous pouvez télécharger l'application Adobe XD sur votre smartphone. Si vous branchez votre câble USB à votre téléphone, vous pouvez cliquer sur cette icône ici, connecter des appareils iOS ou Android à XD via USB pour prévisualiser vos conceptions ou prototype en temps réel vous pouvez cliquer sur cette icône ici, connecter des appareils iOS ou Android à XD via USB pour prévisualiser vos conceptions ou prototype en temps réel. sont la conception sur un écran, les choses sur l'écran semblent assez bien. Mais en réalité, vous l'avez conçu trop petit ou le bouton est tout simplement trop petit pour vos doigts ou la distance est trop grande ou trop petite, c'est un conseil que je veux vous donner, mais vous pouvez télécharger Adobe XD à partir de l'application sur le Play Store et connectez votre téléphone via USB. Essayez simplement si vous concevez et vérifiez si votre design semble bien sur votre propre téléphone mobile. Essayez peut-être quelques téléphones différents. C' est juste quelque chose que je voulais aussi te montrer. La dernière fonctionnalité que je veux vous montrer pour partager votre design est la fonctionnalité vidéo tout mon prototype ici. Si je veux montrer à mon client comment fonctionne le site Web ? À quoi cela ressemble lorsque je fais défiler vers la page ? Comment ça ressemble quand je clique sur ces pages ? Ensuite, si vous êtes à l'intérieur du mode de jeu, que nous venons de préparer avec tous les éléments liés. Vous avez ce bouton ici, et je ne vais pas cliquer dessus maintenant parce que j' enregistre déjà mon écran et je pense que je vais planter mon ordinateur si je clique dessus parce que je ne sais pas si mon ordinateur peut gérer deux enregistrements à un moment donné, mais c'est parce que j'enregistre ce cours. C' est une fonctionnalité que vous pouvez enregistrer uniquement cette partie de votre écran. Vous pouvez faire défiler jusqu'au site Web, cliquer sur différentes choses que vous avez connectées via l'outil de prototypage, puis envoyer simplement un MP4. Je pense qu'il exporte un MP4 à votre client et il envoie la vidéo. Nous transférons ou téléchargeons une vidéo sur YouTube. Vous pouvez également partager le design de votre client assez facilement. Vous pouvez acheter un logiciel d'enregistrement que j'utilise pour faire ce cours. J' utilise le flux d'écran pour enregistrer ce cours. Je peux également enregistrer mon audio avec une entrée microphone car c'est ce que je fais en ce moment pour enregistrer ce cours. Pour les personnes qui n'ont pas de microphone ou qui ne les lisent pas, veulent parler à l'intérieur du microphone et de la fonction lame, alors ce bouton est parfait pour partager vos conceptions et les interactions réelles avec vos clients. Il y avait deux caractéristiques que je voulais aussi vous montrer. 36. Félicitation et voulez-vous plus ?: Très bien les gars, félicitations, vous avez fini avec le cours. C' est une réalisation incroyable parce que la plupart des gens n'arrivent pas à la fin du cours. Cela montre vraiment que vous voulez vraiment apprendre et je l'apprécie vraiment. C' est pourquoi je tiens à vous remercier dans cette vidéo. Alors quoi maintenant ? Peut-être que tu en veux plus. Si vous avez vu quelque chose en ligne que vous voulez que j'explique et ajoute à ce cours, s'il vous plaît laissez-moi savoir. Envoyez-moi un DM sur Instagram. Mon nom est Rinodeboer ou juste laisser un commentaire ci-dessous. Je veux aussi savoir ce que je peux améliorer sur ce cours parce que je peux juste créer de nouveaux épisodes et améliorer le spectacle de base. Si vous pouvez laisser un commentaire pour ce cours qui sera vraiment utile et qui me permettra d'améliorer le cours. Vous avez accès à ce cours en ce moment. Si j'ajoute de nouveaux épisodes et alors vous verrez ces nouveaux épisodes si je les télécharge. Encore une fois, félicitations. Ce qui est aussi une possibilité, c'est que vous voulez que je fasse un autre cours, peut-être sur des sujets plus profonds comme la théorie du design, c'est un cours que je veux créer. Ou peut-être d'autres outils peuvent créer des icônes dans Illustrator par exemple. S' il vous plaît faites-le moi savoir et ensuite j'espère vous voir sur Internet. Encore une fois, vous pouvez me suivre sur Instagram à rinodeboer, ou vous pouvez suivre les liens de [inaudible] sur YouTube ou sur Instagram. Je vais mettre ces liens ci-dessous. Ensuite, je tiens à vous remercier encore une fois d'avoir suivi ce cours. D' accord, j'espère vous voir quelque part sur Internet. Merci.