Adobe XD pour les débutants : Apprendre le design Web | Sam Harrison | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

Adobe XD pour les débutants : Apprendre le design Web

teacher avatar Sam Harrison, Webflow Developer, YouTuber, Teacher

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Introduction

      1:12

    • 2.

      Apprendre les éléments essentiels

      0:53

    • 3.

      Planches à dessin

      4:40

    • 4.

      Mise en page de grille

      4:44

    • 5.

      Formes Partie 1

      10:30

    • 6.

      Formes partie 2

      7:14

    • 7.

      TEXTE

      4:14

    • 8.

      Les images

      5:44

    • 9.

      Vidéo et Lottie

      4:52

    • 10.

      Raccourcis clavier

      4:17

    • 11.

      Contrôler Et Verrouiller

      5:28

    • 12.

      Sélection et regroupement

      2:50

    • 13.

      Éléments de cachage

      1:08

    • 14.

      Combiner des formes

      4:59

    • 15.

      Grille répétée

      7:49

    • 16.

      Transformes en 3D

      3:15

    • 17.

      Calques

      3:26

    • 18.

      Biens Et Composants

      7:48

    • 19.

      Prototype

      5:26

    • 20.

      Partager des projets

      5:16

    • 21.

      Introduction au projet de classe

      1:09

    • 22.

      Aperçu du projet de cours

      3:56

    • 23.

      Navbar

      11:11

    • 24.

      Section du héros

      7:05

    • 25.

      Section d'action

      5:58

    • 26.

      Section Ce que nous faisons

      11:18

    • 27.

      Section de l'état

      8:49

    • 28.

      Section de curseur

      6:17

    • 29.

      Sauver la section Future

      5:29

    • 30.

      Section CTA Et Pied De Page

      8:13

    • 31.

      Essayez mes cours de flux Web sur Skillshare

      1:22

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

284

apprenants

--

À propos de ce cours

Adobe XD : Apprendre le design Web pour les débutants

 

Bonjour à tous !

Je m'appelle Sam Harrison et je suis un concepteur de sites Web et un développeur de Webflow basé au Royaume-Uni.

Dans ce cours, je vais étudier la façon d'utiliser Adobe XD pour la conception de sites Web. Dans ce cours, nous allons dans tous les éléments essentiels de XD et nous apprenons à créer une page d'accueil basée sur un kit d'interface utilisateur gratuit.

Une fois ce cours suivre, n'hésitez pas à me suivre sur YouTube ou à suivre mes autres cours sur Skillshare tels que mes deux cours de flux Web où vous pouvez apprendre à développer des sites de manière professionnelle.

Merci d'avoir suivi le cours !

Rencontrez votre enseignant·e

Teacher Profile Image

Sam Harrison

Webflow Developer, YouTuber, Teacher

Enseignant·e

Hi Everyone,

I'm a multiple business owner (entrepreneur feels too pretentious) based in the UK and I currently run a digital agency along with a consulting/teaching business.

I love Webflow and currently have a beginners class on Skillshare for it.

 

 My YouTube channel:

 https://www.youtube.com/c/SamHarrisonco

Voir le profil complet

Compétences associées

Adobe XD Design Design UI/UX Web design
Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Introduction: Bonjour à tous, et bienvenue dans mon tout nouveau cours Skillshare pour Adobe XD commence. Par tout le monde. m'appelle Sam Harrison et je dirige une entreprise de conception et de développement Web basée au Royaume-Uni. Et dans ce cours, je veux vous apprendre à concevoir des sites Web en utilisant bientôt Adobe XD Les points clés que nous aborderons tout au long ce cours sont la façon d'utiliser tous les différents outils de forme. Comment utiliser une vidéo importante et des fichiers Lottie. Comment utiliser différents raccourcis clavier, la vitesse de votre processus de travail et comment obtenir généralement le meilleur résultat de la journée ABX pour rendre votre flux de travail aussi fluide que possible. Comment, à la fin de ce cours, vous aurez une bonne compréhension de l'utilisation d'Adobe XD. Notre projet de classe consiste essentiellement créer une page de destination pour laquelle vous pouvez ensuite commencer à tirer parti des connaissances que vous avez acquises pour votre propre travail. Donc, si vous commencez tout juste et que vous souhaitez apprendre à utiliser un programme spécifique à la conception Web comme Adobe XD. Ce cours va certainement vous aider à commencer. Et en tant que niveau débutant, sorte d'entrée dans l'outil et commencer à créer des sites Web. Donc, si ça vous semble bien, nous allons commencer. 2. Apprendre les bases: Bon, donc pour la première partie de ce cours, je vais vous guider à travers de nombreux aspects de la journée, le lendemain. Et en gros, je suis le langage pour vous habituer à l'interface et à la levure pour remanier le maïs, comment les utiliser. Il y a maintenant un certain nombre de choses différentes à apprendre sur TDAH et tout n'est pas codé dans ce cours. Je cible spécifiquement les choses à faire avec la conception Web et tout ce que je pense que vous devrez apprendre à utiliser XD et à commencer à créer des sites Web à l'aide de cet outil. Nous allons maintenant tout couvrir en termes de graphisme. Est-ce qu'on utilise des formes et on les manipule autour ? Mais ce cours vise spécifiquement à commencer à créer des sites Web avec XD. Pour les premières vidéos, nous allons commencer à utiliser des tableaux d'art, à manipuler des plans de travail, à manipuler différentes formes, à importer des images et à importer une vidéo sur Dossiers Lottie. Bon, commençons par la première série de vidéos. 3. Tableaux d'art: Ok, donc une fois que vous vous êtes inscrit et connecté, vous serez confronté à cet écran d'accueil. Tout d'abord, nous allons parler nos tableaux et de nos tailles d'écran, ainsi quelques fondamentaux de la façon de manœuvrer certains éléments dans Adobe XD. Tout d'abord, s'offrent à vous quatre options différentes s'offrent à vous pour différentes tailles d'écran. Le premier est de nombreuses tailles de téléphones et de tablettes différentes. Donc, vous appelez à nouveau populaire. Je trouve des tailles gigapixels, iPad. À partir de là, nous avons différentes tailles de bureau. Donc vous avez la HD, vous avez 1366 par 76, huit, 1280 par 100. Et encore une fois, vous pouvez choisir des par défaut prédéfinies pour différentes tailles d'écran. Vous avez ensuite obtenu différents types de médias sociaux de taille d'écran. Donc, si vous créez comme une couverture Facebook, elle n'a pas en quelque sorte de préréglage ou, dans l'année , nous l'aurons également. Eh bien, la sensibilité va être un non-conformiste et créer votre propre chose en créant une taille personnalisée. Mais ce que nous allons faire aujourd'hui, puisque nous allons nous concentrer sur la création de sites Web sur ce tutoriel, nous allons cliquer sur Web 1920 d'ici 1080. Et cela va nous donner notre plan de travail. Encore une fois, pour le réitérer, pensez à votre tableau d'art comme votre toile vierge pour vos projets. Et il s' agit essentiellement de la toile sur laquelle vous pouvez travailler. Donc, un peuplé de contenu. Et vous pouvez faire glisser le canevas en cliquant simplement dessus. Toi-même. Maintenez votre barre d'espace enfoncée et elle vous donnera le petit symbole de la main, ce qui signifie que vous pouvez la déplacer. Si vous avez un trackpad, il vous suffit de pincer et de zoomer. Et en parlant de zoom, si vous souhaitez zoomer sur un endroit particulier du tableau d'art, vous pouvez le faire en sur un endroit particulier du tableau d'art, vous pouvez le maintenant la touche Contrôle ou Commande enfoncée si vous êtes sur un Mac, et elle se mettra en survol si vous faites défiler la page la molette de votre souris jusqu'à l'endroit où votre souris réside actuellement. Donc, si je vais en haut à droite, maintenez la touche Contrôle ou Commande enfoncée, puis effectuez un zoom avant avec ma molette de défilement. Vous allez faire défiler jusqu'au point où se trouve votre souris. C'est donc une chose très utile que vous allez utiliser beaucoup tout au long de votre temps avec XD. C'est donc un peu les principes fondamentaux de ce qu'est un tableau d'art. S'il veut commencer à changer la taille. Donc, vous changez d'avis. Vous ne voulez pas qu'il soit 1920 d'ici 1080, vous pouvez le changer. Vous pouvez simplement le faire glisser comme vous le souhaitez quand il est sélectionné. Évidemment, si vous créez un site Web, vous aurez besoin de plus de biens immobiliers d'écran inutiles plutôt que de créer un nouveau plan de travail pour chaque section, sinon il suffit de faire glisser cela vers le bas et il va descendre jusqu'à présent. comme vous le voulez. Vous verrez peut-être que nous avons ce genre de ligne pointillée bleue. Vous n'avez pas nécessairement besoin de jouer avec ça. Il s'agit simplement de vous informer de la hauteur de la fenêtre d'affichage. Ainsi, la fenêtre Heights, dans ce cas, extra 1920 par 1080. Pensez donc à cela comme votre section héros du site Web. Et tout ce qui est en dessous est sous le pli de votre design. La hauteur de la fenêtre est donc de 1080. C'est donc essentiellement ce avec quoi nous travaillons. Mais encore une fois, vous pouvez changer cela si vous le souhaitez. Mais supposons également que vous souhaitiez travailler sur plusieurs projets en une seule fois. Vous pouvez également le faire. Supposons que vous vouliez voir la liste des boules qui viennent le lendemain. Si vous cliquez sur la lettre A de votre clavier, vous verrez alors sur la droite, nous avons maintenant toutes ces choses que nous avions dans les étoiles, les fromageries. Si vous voulez ajouter un autre plan de travail, vous pouvez simplement cliquer sur un plan de travail et ensuite je l'aurai juste à côté de la sécurité et l'autre, vous pouvez refaire le même genre de choses. Vous pouvez vous assurer que si vous appuyez sur la lettre A, elle vous en donnera toutes ici et vous pourrez en choisir autant que vous le souhaitez. Maintenant, il y a aussi une option s'il veut créer votre propre taille, vous pouvez le faire. Si vous maintenez la lettre A enfoncée, vous verrez que le curseur a un peu changé. Si je lâche prise, si je reviens de ma famille quand il voit maintenant s'occuper du pointeur, si je maintiens un, vous verrez que le curseur a changé et cela me permettra de dessiner mon propre plan de travail à la taille que je veux que ce soit. Encore une fois, ils sont en quelque sorte les principaux moyens dont vous pouvez contrôler nos tableaux. Encore une fois, vous pouvez en avoir autant que vous le souhaitez. Vous n'êtes pas limité du tout, alors combien vous pouvez en avoir. Et évidemment plus tard, en bas de la ligne, si vous créez un site Web entier, vous souhaitez utiliser l'option prototype, qui vous permet essentiellement de lier des pages entre elles. Encore une fois, nous allons aborder cette question plus en détail un peu plus tard. Mais je voulais tout d'abord vous donner une introduction de base sur le fonctionnement de notre corps, ce qu'ils sont et comment manipuler les feuilles partout. Ok, donc la prochaine vidéo, ce que nous allons parler un peu utilisation des grilles et de la façon travailler dans un conteneur de largeur maximale, ce qui sera très utile pour la conception de sites Web. 4. Mise en page de grille: Ok, donc ensuite, je veux parler un peu de la façon utiliser la grille de mise en page dans XD. Par conséquent, puisque nous créons des sites Web, la plupart des sites Web ont tendance à avoir une taille de conteneur. Donc, si nous avons juste un aperçu rapide d'un site Web maintenant, regardez le site Web Webflow. Vous pouvez voir si je survole mon boîtier, j'ai le bord ici que tout le contenu que vous pouvez voir arrive à une largeur maximale. Ce n'est pas forcément le cas de chaque projet sur lequel vous serez réveillé. Mais il est assez courant de voir que la plupart de votre contenu aura une largeur maximale, de sorte qu'il ne reste pas quelque sorte collé directement sur le bord de l'écran. Et si vous créez des sites Web à l'aide de XD, c'est quelque chose que vous voudrez essayer de suivre. Et vous vouliez essayer de faire fonctionner tous vos modèles dans une certaine taille de conteneur. Parce que nous avons choisi 1920 par 1080, vous ne voudriez pas que tout le contenu au bord de l'écran. La façon de le faire consiste donc à utiliser l'option Grille ici. Vous disposez en fait de deux options différentes pour cela. Vous avez ce qu'on appelle l'option de couche. Et nous avons aussi des carrés. Donc, les carrés que nous ne couvrirons pas trop dans ce cours. Donc, si encore une fois pour utiliser des carrés, il est plus probable que vous l' utilisiez pour créer des icônes. Vous pouvez donc vous assurer qu'ils sont tous du même type de XYZ. Mais pour ce cours, nous allons probablement examiner l'option de couche où nous avons des colonnes. Donc, si nous effectuons un zoom arrière juste un instant, vous verrez maintenant que nous avons sélectionné cette option par défaut. Nous avons 12 colonnes et nous avons des tailles définies pour la largeur et la largeur de la colonne. Et nous avons ici ce genre de 12 colonnes qui ressemblent actuellement à une couleur de queue. Vous pouvez modifier la couleur de ceux-ci en obtenant simplement votre sélecteur de couleurs ici. Vous pouvez le faire quelle que soit la couleur que vous voulez. Personnellement, je préfère l' avoir comme un gris blanc cassé. Évidemment, cela dépendra du type de jeu de couleurs de site Web que vous avez et de ce que vous concevez. Et, et que l'idée de cela est que cela vous permet d'aligner les choses sur certaines colonnes. Si vous avez un design très particulier qui doit être complètement égal à certains égards. C'est quelque chose que vous pouvez utiliser comme guide pour vous aider à y parvenir. Maintenant, personnellement, je ne me retrouve pas souvent à utiliser autant ça quand il s'agit d'avoir 12 colonnes. Personnellement, pendant la plupart du temps, j'aime l' avoir pour pouvoir avoir un ensemble contenant une largeur comme nous venons de discuter. Donc, plutôt que d'avoir 12 colonnes, pourquoi j'aime en faire plutôt que 12, je n'ai qu'à taper une. Et ça ne me donne qu'une grande sorte de carré gris. Et pour le moment, il est dit que la largeur de colonne est 1640, ce que nous voulons, c'est 1200. Et cela va nous donner une largeur maximale de 1200 pixels d' ici à ici, qui fera écho à quelque chose de similaire à ce que nous avons sur le site Web Webflow, ont le canevas principal, qui est bien sûr pleine largeur, car il a un fond blanc, mais le contenu est fixé dans ce conteneur maximum. Et c'est l'idée de ce que nous faisons en ce moment. Il s'agit donc essentiellement d'un conteneur de largeur fixe de 1200. Et vous pouvez maintenant commencer à aligner les choses sur ce point. Si je devais faire glisser quelques OEM très brièvement, nous y reviendrons dans un instant. Mais si je supprime ça et que j'ai peu immédiatement les cheveux, vous trouverez qu'ils voudront accrocher à cela, que vous espérez pouvoir voir si je refais ça, si je zoome avant comme je m'en approche, il s'accroche automatiquement sur le côté. Et ce sera la même chose pour tout ce que vous le jetez. C'est donc un moyen vraiment utile de guider tout ce qui se trouve dans votre design. C'est donc les différents types de calques que vous pouvez avoir. Encore une fois, si vous changez d'avis, vous pouvez toujours y retourner. Vous voulez donc revenir à 12 colonnes, vous pouvez le faire. Et bien sûr, il aura cette configuration pour vous. Mais encore une fois, personnellement, je n'aime pas l'avoir car c' est quelque chose de personnel. Ils, vous aimerez peut-être avoir plusieurs colonnes pour aligner les choses sur moi personnellement la plupart du temps, je ne me retrouve qu'à utiliser une grosse colonne qui me permet d'aligner mes legos sur votre contenu à une largeur maximale. C'est donc la base de l'utilisation de cet agneau, et c'est ce que nous allons utiliser principalement tout au long de ce cours. Maintenant, disons que vous ne voulez pas avoir ça tout le temps. Vous pourriez donc être un peu distrayant. Vous pouvez simplement vous en débarrasser. Et vous pouvez le faire en utilisant, en cliquant à nouveau dessus et il s'en débarrassera. Mais parfois, si vous avez beaucoup de choses en cours et que vous ne pouvez pas nécessairement sélectionner le plan de travail. Donc, ce que vous pouvez également faire est d'utiliser un raccourci clavier, qui sera le contrôle de décalage puis l'apostrophe, et qui le ramènera pour s'en débarrasser, décaler l'apostrophe de contrôle à nouveau. Si vous êtes sur un Mac, il s'agira de l'apostrophe de Maj Command, ce qui fera le même genre de choses. Je vais m'assurer d'avoir une animation à l'écran pour vous montrer tous les différents raccourcis clavier que je les utilise tout au long du cours. C'est donc la base de l'utilisation de la grille de mise en page. Encore une fois, jouez vous-même. Vous décidez en quelque sorte par vous-même ce que vous aimez le mieux. Et dans la prochaine partie du cours, nous allons commencer à examiner toutes les différentes options de forme que nous avons dans XD. 5. Formes Partie 1: Ok, donc maintenant sur la partie amusante, nous allons commencer à regarder tous les différents types d'outils de forme que nous avons dans XD. Maintenant, je vais les parcourir un à la fois et vous montrer comment vous pouvez contrôler les Gémeaux. Donc, juste avant de le faire, ils doivent simplement souligner que nous avons l'outil Sélectionner. Ainsi, l'outil Sélectionner, encore une fois, comme son nom l'indique, vous permet de sélectionner des éléments et c'est en quelque sorte l'option par défaut que vous avez le lendemain. Maintenant, assez souvent, chaque fois que vous utilisez un autre type d'outil. Il est évident que le cas, vous pouvez le voir ici, a en fait changé pour ressembler à un réticule. Supposons que vous ne vouliez plus cela et que vous souhaitiez revenir à l'outil de sélection. De toute évidence, ce que vous auriez à faire, je vais y revenir ici. Ou vous pouvez voir une fois que j'ai survolé ça, il est écrit Sélectionner, puis il y a la lettre V entre parenthèses. Et cela signifie essentiellement qu'il s'agit d'un raccourci clavier. Et nous avons en fait des raccourcis clavier pour toutes ces différentes options. C'est donc quelque chose que vous voulez commencer par jeter un coup d' œil et vous y habituer, afin de vous faciliter un peu la vie en utilisant XD. Donc je pense que le sélectionneur, peut-être de tous est celui que vous voulez utiliser un raccourci clavier pour le plus, juste pour vous éviter de faire quelque chose et obtenir de vieux cheveux et tout le chemin du retour. Maintenant, encore une fois, ce n'est pas énorme. Mais juste pour la vitesse est beaucoup plus facile, suffit de cliquer sur la lettre V et vous verrez que mon curseur il suffit de cliquer sur la lettre V et vous verrez que mon curseur a changé d'avis : si je retourne aux cheveux bidirectionnels, mon cas est généralement sur un si je tape juste sur ce téléviseur, il s'en débarrasse et revient automatiquement à l'outil Sélection. Nous allons donc nous en débarrasser pour l'instant, mais nous allons maintenant passer à l'outil Rectangle et nous allons le dessiner dans nos tableaux d'art. Ou vous avez le jour où il dessinait ces fermés, maintenez votre bouton gauche de la souris enfoncé. Ensuite, il vous suffit de le faire glisser jusqu'à la taille que vous voulez. Et évidemment, comme on peut s'y attendre, vous pouvez alors manipuler cela comme vous le souhaitez. Vous pouvez modifier la hauteur et la largeur comme vous le souhaitez. Maintenant, il est évident que c'est un peu moi qui forme libre dans la taille de ce rectangle. Si nous nous en débarrassons, encore une fois, assurez-vous qu'il est sélectionné. Cette fois. Si nous maintenons la touche Maj enfoncée et que nous faisons glisser le curseur, vous verrez qu'elle créera un carré parfait. Donc, si vous voulez quelque chose qui soit parfaitement carré, maintenez la touche Maj enfoncée et cela fera cela. Évidemment, si vous changez d'avis par la suite, si vous cliquez ensuite sur la lettre V pour récupérer votre outil de sélection, vous pouvez ensuite commencer à faire glisser ceci comme vous le souhaitez. ceci comme vous le Je vais vous faire découvrir quelques options ici aussi. Et évidemment, il y a beaucoup de ces options de soudainement apparues maintenant, non ? Elle garantit de travailler à travers ceux-ci au fur et à mesure que nous allons tout au long du cours, sera plus facile de démontrer toutes les différentes options sur des éléments particuliers. Donc, si le rectangle le veut, je pense que je vais vous montrer le rayon de bordure et aussi comment utiliser le remplissage et la bordure. Par défaut, dans XD, tout ce que vous avez, tout ce que vous faites glisser sur le canevas est en fait des gérondifs ont une bordure que vous ne voudrez peut-être pas nécessairement. Donc, si vous ne voulez pas qu'il ait une bordure, vous pouvez la décocher. Et évidemment, le moment où la couleur de remplissage et vous pouvez dire, Hey, est blanche. Ce que nous allons faire, c'est que nous allons juste rendre noir pour l'instant afin que nous puissions le dire. De plus, ils seront évidemment des moments où vous ne voudrez pas avoir un rectangle ou un carré coudé parfait. Ce que vous pouvez faire, c'est évidemment affecter le rayon de la frontière. Encore une fois, il y a quelques façons de faire si nous zoomons juste sur foramen, vous verrez ici juste en dessous, nous avons cette option. Et si nous cliquons dessus et que nous le faisons glisser, vous verrez qu'il courbe les coins. Ainsi, en faisant cela, il est possible de créer des ellipses et des cercles avec cet outil. Mais si vous ne voulez pas le faire de cette façon, ce que vous pouvez faire est d'aller à cette option ici, puis de taper peut-être 10. Et ça va courber f. Est-ce seulement si nous tapons quelque chose de plus extrême comme un 100, vous verrez que c'est chaotique de beaucoup. Vous avez donc une sorte de microcontrôleur des cheveux, et vous pouvez également les contrôler en cliquant et en faisant glisser cette option particulière là également. C'est donc une façon de créer la courbure des coins d'un carré ou d'un rectangle. Autre chose qui vaut la peine d'être mentionnée. Si vous voulez faire un coin, vous avez cette option ici. Vous pouvez donc également appliquer un rayon différent à chaque coin. Donc, si nous voulions dire un gros, peut-être juste en haut à gauche et en bas à droite, nous pourrions le faire. Donc, si nous voulions peut-être un 100 pour celui-ci, vous verrez que c'est seulement un don pour le haut à gauche et aussi pour tout le monde pour affecter le bas à droite. Si nous allons sur celui-ci ici, tapez un 100, vous dites qu'il n'a affecté que le haut à gauche et le bas à droite. Et cela vous permet encore une fois mieux contrôler la courbure de vos bordures. Bon, donc c'est à peu près tout pour l'outil Rectangle. Encore une fois, nous allons aborder toutes ces questions au fur et à mesure. Nous allons donc nous en débarrasser pour l'instant. Et ce que nous allons faire ensuite, c'est passer à l'outil Ellipse dans les deux cercles. Donc, le même genre de chose s'applique si je commence à faire glisser. Vous verrez que je peux contrôler le type de forme que l'on veut être, il n'est pas nécessaire d'être un cercle parfait. Cela peut être un mal, car encore une fois, le même genre de chose s'applique. Mais disons encore une fois que si nous voulions avoir un cercle parfait, vous feriez en sorte qu'il soit sélectionné. Ensuite, il vous suffit de maintenir la touche Maj enfoncée et de faire glisser le curseur. Et quelle que soit la taille que nous faisons, soyez toujours un cercle parfait. Ok, donc encore une fois, les mêmes choses s'appliquent à l'outil Ellipse qu'avec l'outil Rectangle, vous pouvez avoir une bordure si vous le souhaitez, voir de quoi changer la couleur. Vous ne pouvez pas avoir de bordure et vous pouvez également lui dire qu'il s'agira d'une couleur de remplissage différente. Voyons donc maintenant différentes couleurs de remplissage. Donc, actuellement, c'est blanc, on peut dire que nous allons en faire une couleur foncée. Il s'agit évidemment d'une couleur unie par défaut. Et, mais que se passe-t-il si nous voulions avoir une sorte de gradient pour cela ? Vous avez donc également ces options. Il vous suffit donc de sélectionner cette option ici. Nous obtenons ensuite un menu déroulant indiquant la couleur unie, dégradé linéaire, le dégradé radial et les dégradés angulaires. Nous allons donc simplement vous expliquer ces options. Un dégradé linéaire va donc vous donner une option de bout bout ou l'élément que vous n'avez pas filtré. Donc, si vous voulez changer les couleurs de chaque côté, vous pouvez réellement manœuvrer où se trouve le dégradé jusqu'à. Vous n'aviez pas besoin de l'avoir comme ça de bout en bout. Vous l'avez en quelque sorte au milieu. Vous pouvez également ajouter des dégradés au milieu. Si vous vouliez voir, vous avez trois couleurs différentes. Je vais donc décocher ça juste pour l'instant. Mais pour changer la couleur pour cela, si nous passons à l'extrême gauche ici, faisons que c'est peut-être comme un bleu foncé. Ensuite, sur le côté droit, vous pouvez voir maintenant ce que nous pouvons choisir une couleur différente et nous l' aurons un peu comme une couleur de queue. Il s'agit donc de dégradés linéaires. Et encore une fois, vous pouvez le manœuvrer comme vous le souhaitez. Vous pouvez les changer. Vous pouvez faire à peu près tout ce que vous voulez avec ça. Mais disons encore une fois que nous voulons changer le type de dégradé que nous avons et que nous voulons un dégradé radial. Ainsi, un dégradé radial est à peu près, comme il le suggère, une sorte de rayonnement vers l'extérieur. Et encore une fois, vous pouvez également avoir plusieurs couleurs différentes à l'intérieur. Disons que nous voulions peut-être avoir une couleur plus claire au milieu. Nous aurons comme un bleu clair et à l'extérieur où il deviendra plus sombre pour que vous puissiez le voir là. Et vous pouvez influer position que vous avez dans laquelle vous pouvez le rendre plus large ou plus petit en fonction conception que vous possédez. UN ROYAUME-UNI. Encore une fois, vous pouvez avoir plusieurs types différents. Si vous souhaitez en ajouter un, vous pouvez choisir où se trouve sur la ligne. Tu peux, encore une fois, c'est déjà évident. Vous pouvez donc choisir différents types de dégradés comme vous le souhaitez. Donc, défaisons ça pour l'instant. D'accord, et le dernier sera un dégradé angulaire. Encore une fois, comme son nom l'indique, le type crée une base de dégradé sur un angle. Encore une fois, comme avant, vous pouvez choisir toutes les couleurs différentes. C'est une couleur très différente pour celle-ci, donc elle est plus lumineuse. Vous pouvez ensuite en avoir un autre là-dedans. Donc, si vous voulez rendre celui-ci légèrement différent, vous pouvez dire que celui-ci, par exemple , est de le rendre jaune. Encore une fois, vous contrôlez différemment le fonctionnement de contrôlez différemment le fonctionnement ces différents dégradés. Et il y a toutes sortes de choses de type infographie que vous pouvez créer avec cela. Je suppose que c'est l'explication de base des dégradés. J'y reviendrai un peu au fur et à mesure que nous allons tout au long du cours. Pour l'instant, ce que nous allons faire, c'est de nous débarrasser de notre outil ellipse et jeter un coup d'œil à notre outil polygones. C'est donc la dernière des formes pour le moment où nous allons la couvrir. Ensuite, nous allons couvrir la ligne, stylo et les textes dans les prochaines vidéos. Par défaut, pour le polygone, nous avons un triangle. Encore une fois, c'est un peu moi qui forme ça librement. Vous pouvez créer n'importe quel type de forme en faisant glisser comme vous le souhaitez. Comme avant, si nous maintenons la touche Maj enfoncée, puis faites glisser, cela créera un triangle équilatéral, ce qui signifie évidemment que tous les côtés ont la même longueur. Maintenant, encore une fois, si vous changez d'avis, vous le pouvez. Évidemment, une fois que vous l'avez fait , rendez-le de plus en plus petit. Et vous n'êtes pas seulement coincé avec un triangle. Vous verrez donc ici ce que nous avons c'est le nombre de coins que nous avons. La cornée est composée de trois colonnes qui créeront un triangle si nous voulons l'avoir. Quant au Tao du grand rectangle ou du losange, nous pouvons ensuite partir de n'importe quelle taille différente que vous voulez, hexagones, octogones, tout ce que vous voulez. Et cela crée toutes sortes de formes différentes, comme vous l'imaginez. Le même genre de choses ici avec le tableau d'un rayon d'angle, je dois dire. Il s'agissait en quelque sorte d'adoucir les coins de l'objet particulier que vous avez. Donc, si nous en revenons peut-être à cinq pour l'instant, et nous allons faire un zoom arrière d'un simple toucher. Si je sélectionne ensuite un rayon de bordure pour cela ou quelque chose comme 20, vous verrez que c'est tellement adoucir les bords sur la forme. Vous avez également ce rapport de décrochage deux. Donc, si nous revenons à quelque chose comme quatre, puis nous appliquons un rapport d'étoiles à cela. Ce sera quelque chose comme 50. Vous verrez que ce qui est fait est essentiellement créé à quatre étoiles. Et vous pouvez modifier ce ratio. C'est si vous voulez que ce soit plus extrême. Et encore une fois, vous pouvez avoir jusqu'à 100 % pour qu'il redevienne plus important. Encore une fois, jouez un peu avec vous et voyez ce que vous venez de proposer. Et cela fonctionnera, bien sûr, pour n'importe quelle forme que vous avez. Donc, si nous revenons peut-être à 10 côtés, vous pouvez voir que cela a changé un peu. Faites-en quelque sorte moins vous avez de pourcentage, plus les feuilles intégrales sont extrêmes comme si je ferais encore plus masse que 25 pour cent. Vous voyez que nous avons ce genre de forme. Encore une fois, il vous donne beaucoup de contrôle pour tous les types de formes que vous pouvez créer avec cet outil. C'est donc très, très malléable et vous créez beaucoup de choses intéressantes avec elle. Ok, donc je pense que pour l'instant, va couvrir à peu près toutes les différentes formes que nous allons utiliser pour cette première partie de la vidéo. La prochaine vidéo que nous allons regarder va utiliser l'outil de ligne, l'outil stylo, ainsi que la façon d'obtenir du texte sur la page. 6. Formes Partie 2: Ok, donc les prochaines choses que nous allons examiner seront l'outil de ligne. Nous allons ensuite examiner le redouté Pentel , puis l'option de l'outil de texte. Mais commençons par la ligne droite. Ainsi, l'outil de ligne et peut-être souvent est utilisé autant que peut-être l'outil stylo, car avec le crayon, vous avez une certaine flexibilité dans ce que vous pouvez en faire. Il s'agit littéralement de dessiner lignes droites ou même pas droites, seulement des lignes en général. Donc, si vous vouliez dessiner une ligne, cela peut affecter la façon dont vous le souhaitez. Vous pouvez le déplacer autour de n'importe quel angle. Si vous commencez à dessiner une autre ligne, puis essayez de la connecter dans une certaine mesure, cela le fera. Mais si nous effectuons un zoom avant, vous verrez qu'il n'est pas parfaitement aligné. Si vous voulez ce genre de choses, nous voulons des points d'ancrage les uns par rapport aux autres. Vous voulez donc qu'une ligne rejoigne une autre ligne. La meilleure option à utiliser est l'outil stylo, auquel nous parviendrons dans un instant. Donc, vous voulez vraiment penser à l'outil de ligne pour vraiment dessiner des lignes droites. Ils ne se connectent pas nécessairement à un autre. Si vous voulez créer une sorte de oui, certains types d'icônes ou peut-être, peut-être sur le genre de chose que vous voudrez peut-être essayer avec l'outil stylo. Vous pouvez le faire et vous pouvez voir que les lignes nous indiquent quand quelque chose est correctement aligné. Si je ne fais que déplacer celui-ci aussi. Vous voyez maintenant que toutes ces lignes s' alignent correctement les unes avec les autres. Et c'est essentiellement comme ça que vous utilisez cet outil. Encore une fois, il n'y a pas d'option de remplissage pour cela car c'est juste une ligne droite. Vous pouvez bien sûr modifier la couleur des différentes lignes que vous possédez. Un roi augmente la taille de la bordure. Cela s'applique également à tous les articles présents ici. Toutes ces options ont donc une bordure, vous obtiendrez toutes les autres formes ainsi que pour rendre dix Omeka beaucoup plus épais. Vous pouvez aussi avoir un tiret. Donc, si nous saisissons le chiffre cinq, nous obtiendrons à nouveau une perte de lignes pointillées. L'écart que nous pouvons augmenter et faire en sorte qu'il soit 10. Il le rendra plus espacé. Encore une fois, toutes ces options, hé, vous les avez aussi pour l'ellipse rectangulaire, et pour le polygone. Il s'agit donc d'une vue d'ensemble de base de l'outil de ligne. Ensuite, nous avons l'outil Stylo. L'outil Stylo. Maintenant, si vous connaissez l'utilisation Photoshop ou si vous connaissez Illustrator, vous connaîtrez très bien comment cela fonctionne. Le crayon XD fonctionne d'une manière assez similaire. Maintenant, l'outil Plume pourrait être un cours tout seul car il est très compliqué. Cela peut devenir très compliqué, surtout si vous vous lancez dans graphisme et que vous créez de nombreux types de formes différents. Ce cours n'est pas vraiment à ce sujet. Je vais donc vous donner un aperçu de base de ce que l'outil Plume peut être utile. Considérez le crayon comme un moyen de relier différentes lignes les unes aux autres parfaitement connectées. Ainsi, sur mon exemple précédent, vous auriez vu que lorsque je me suis connecté ou que j'essaie de connecter les lignes ensemble, elles se sont parfaitement jointes. Mais si nous zoomons ici, vous verrez que ces derniers sont parfaitement alignés comme une sorte d'écart bizarre. Tout cela est donc réparti ensemble. Et si vous souhaitez créer un remplissage pour cela, vous pouvez différer la forme. Pour le moment, nous n'avons qu'une bordure qui crée cette forme. Encore une fois, vous pouvez changer tout cela par ce que vous voulez. Si vous voulez vous débarrasser de la frontière, vous pouvez le faire, je ne l'ai pas juste comme un remplissage. Vous pouvez également le faire. C'est donc la meilleure façon de décrire comment l'outil stylo fonctionne pour assembler des lignes ensemble. Vous pouvez donc imaginer toutes les différentes formes folles que vous pouvez créer avec celle-ci, elle a créé la forme et vous revenez à votre outil de sélection. Vous pouvez le manipuler comme vous le souhaitez. Je n'ai pas encore mentionné l'outil de rotation. Vous verrez donc que lorsque nous survolerons le curseur, nous obtenons une icône qui se transforme en rotation. Donc, si je reviens un peu en arrière, vous voyez que lorsque je me déplace vers l'extérieur, cela change à ce symbole. Maintenant, si je clique et que je fais glisser et que je fais pivoter, il fera tourner l'élément autour. Bien sûr, cela s'applique également à toutes les autres formes que nous possédons. Ainsi, l'outil de rotation, vous obtiendrez une option pour l'ellipse rectangulaire et pour les polygones. C'est donc l'aperçu de base de la façon de créer différentes formes avec cela. Maintenant, ce qui devient plus intéressant c'est de commencer à créer des courbes. Donc, si vous continuez à cliquer puis à vous arrêter à certains points, cela créera des lignes droites. Mais maintenant, cette fois, si je clique, si je maintiens enfoncé, décalez-la. Mais cette fois, si je tiens et que je glisse, ça va faire apparaître une courbe ou une courbe de Bézier. Encore une fois, cela peut devenir très compliqué. Et le, fondamentalement, considérer cela comme une façon de courber les lignes est la meilleure façon que je puisse le décrire. Et vous pouvez imaginer toutes les différentes couleurs, formes que vous pouvez créer avec cela. Et comment manipuler ce type de barre ici va manipuler l'intensité de la courbe que vous avez. Et comme vous pouvez le constater, il ne s' agit que de créer une courbe sur le côté gauche ici. Si nous continuons, je clique ailleurs. On peut dire qu'il va encore se courber à l'endroit suivant et qu' il va joindre les opsins dans mes cheveux. Nous pouvons le faire. Et ensuite, cette courbe s'alignera sur cette boîte. Si je sors de cet outil maintenant et que vous cliquez à nouveau, je vais revenir en ligne droite. donc essentiellement comme ça que ça fonctionne. Encore une fois, cela peut être très compliqué. Je ne vais pas trop en profondeur pour cela, mais faisons-le simplement une fois de plus pour vous le montrer. Donc, si vous tenez enfoncé, nous avons dormi au crayon. Et ensuite, si vous cliquez et que vous passez à un autre point, puis maintenez la touche. Et puis le glissement va créer une courbe est la meilleure façon de la décrire. Donc, si nous lâchons prise, puis que nous allons à notre premier ici, puis nous y joignons. Ok, nous pouvons le faire en cliquant à nouveau. Ensuite, nous avons créé une courbe. Je crée ce genre de forme sinueuse. Et si nous arrivons au bureau et revenons simplement à notre outil de sélection, vous verrez maintenant que si nous effectuons un zoom avant, tous ces points sont parfaitement reliés entre eux. Il n'y a pas d'écart gênant. Vous pouvez donc imaginer tous les types de formes que vous pouvez créer avec cela. Si vous voulez vous lancer davantage dans le graphisme. Si je vous intéresse, si je crée un autre cours à ce sujet, faites-le moi savoir. Encore une fois, ce cours porte sur le déplacement de l'interface utilisateur en tant que graphisme. Mais il s'agit d'un aperçu très simple du fonctionnement de l'outil plume et vous permet de créer des formes que vous ne seriez pas en mesure de créer autrement avec l'outil à ligne unique. Ok, une autre chose avant de commencer à nous rencontrer sur autre chose. Et disons que vous avez changé avis et que cette forme n'est pas tout à fait ce que vous voulez qu'elle soit. Et en fait, nous allons juste le remplir. Supposons que vous vouliez vraiment changer cela. Si vous double-cliquez dessus, vous pouvez créer un autre point. Vous pouvez voir si je le survole, nous avons un cercle qui apparaît. Et si nous le refaisons, et si je clique et que je fais glisser, vous pouvez voir que je peux y revenir. Un auteur. Eh bien, je l'ai déjà fait. Donc, si je retire ça un peu, c'est très bien. Leçon Je veux faire la même chose ici. Si je clique et que je le fais glisser, je peux ensuite la manipuler une fois puis créer un autre type de forme, même quand elle a fini la forme originale que vous avez faite. J'espère que c'est logique. Ce n'est qu'un bref aperçu de la façon dont vous pouvez utiliser l'outil plume pour créer toutes sortes de formes différentes. 7. Texte: Ok, donc, nous avons notre outil de texte. Donc, si nous la sélectionnons et que nous cliquons simplement sur le canevas UNC, nous obtenons un curseur, auquel point nous pouvons commencer à taper ce que nous voulons. Et vous verrez si je ne fais que maintenir ça. Si je continue à taper, c'est généralement continuer, aller et aller. n'y a donc aucune sorte de largeur définie pour le moment et elle continuera à taper autant que vous le vouliez dire. Il est évident que ce n'est pas particulièrement utile. Vous allez vouloir le contenir dans une certaine mesure lorsque vous tapez du texte sur la page. Il y a donc plusieurs façons de le faire. Tout d'abord, je vais simplement vous montrer comment vous pouvez modifier ce que vous avez déjà fait. Disons que vous vouliez ce que je viens de faire en ce moment, mais que vous ne vouliez pas tout ce que je viens de faire. Il existe plusieurs façons de manipuler cela. Et le principal ici est d'avoir une hauteur automatique. Donc, si vous cliquez sur cette option ici, nous avons maintenant une option pour faire glisser cette boîte, comme nous le voulons, et maintenant vous verrez le changement de curseur à la fin. Si je commence à faire glisser vers l'intérieur, vous verrez que le texte est maintenant automatiquement mis à l' échelle de telle sorte que le texte tombe maintenant en dessous. Donc, si vous avez fait comme je l'ai fait là où vous n'avez qu'à travers le texte et que vous voulez en modifier la largeur. Vous pouvez le faire. Vous pouvez également l'avoir de telle manière qu'il y ait une taille fixe pour les états de puits ne dépasseront jamais un certain point. Encore une fois, le genre de chose similaire. Alors, vous avez alors la possibilité de descendre un peu plus loin et je n'irai jamais au-delà d'un certain point. Ok, donc si on remet ça à largeur automatique un instant et qu'on s'en débarrasse. Si nous réessayons cela, assurez-vous que nous envoyons un nouveau texte sélectionné, vous pouvez également cliquer sur la lettre T. Si vous cliquez ensuite et faites glisser le curseur, vous pouvez créer une zone que nous atteindrons et que le texte n'ira pas au-delà. Maintenant, si nous commençons à taper, vous verrez quand il arrivera au bord de cette boîte, il commencera également à tomber en dessous. Encore une fois, ces deux choses que je viens vous montrer font le même genre de choses. Cela dépend donc simplement si vous savez à l'avance comment vous souhaitez que votre texte soit dimensionné. C'est donc un peu le moyen de base de cela. Donc, si je tape quelque chose sur eux, peu de bêtises, on dit juste, c'est un cours AB XD pour les débutants. Toutes les options de texte que vous vous attendez à voir avec n'importe quel type de programme ou ceci, ou ici, évidemment, peuvent changer les différents types de divertissement que nous avons ici. Vous pouvez également télécharger vos nourrissons. Mais nous avons encore accès à des fonds pour bébé et toutes sortes de choses différentes que vous pouvez avoir un S Si nous essayons quelque chose de différent, nous sommes quelque chose à voir avec la couleur de remplissage. Encore une fois, j'aurais vu que je m'attendais à voir comme quelque chose de genre. Vous pouvez changer cela. Il peut également lui donner une bordure. Vous pouvez modifier l'opacité du texte lui-même ou l'alignement. Vous vous attendez à le voir ici pour que vous ne puissiez pas l'envoyer à droite. Et encore une fois, certainement aussi, augmentez et qu'est-ce que vous avez. Nous avons également un espacement entre les réseaux. Nous avons une hauteur de ligne, nous avons également la hauteur des paragraphes. D'accord, il y a juste une autre chose dont je veux parler quand il s'agit de textos et de la façon dont vous pouvez le manipuler. Parfois, vous voudrez pouvoir ajuster l' aspect réel du texte sur la page. Peut-être souhaitez-vous ajuster des caractères individuels et vous ne pouvez pas le faire par défaut. Pour cette raison, il s'agit d'un texte. Ce n'est pas encore un fichier vectoriel techniquement, mais il existe un moyen de le faire autant. Donc, comme vous le feriez, assurez-vous que votre texte est sélectionné. C'est votre objet. Et vous allez sur le chemin. Vous pouvez ensuite convertir le chemin. Il existe également un raccourci clavier pour cela. Et maintenant, si nous effectuons un zoom avant et un zoom avant, nous pouvons sélectionner des chemins individuels de chacune de ces lettres. Donc, si nous voulons changer quelque chose sur l'apparence de quelque chose, nous pouvons le faire et nous pouvons manipuler de la même manière, vous faire manipuler n'importe quelle forme que nous possédons. Maintenant, il s'agit essentiellement d'un fichier vectoriel que vous pouvez maintenant le modifier et le manipuler comme vous le souhaitez. Donc, si vous concevez un Lego, supposons que vous utilisez XD, vous pouvez faire une sorte de police de base d'utilisateurs et ensuite vous pouvez changer la police comme vous le souhaitez pour vous assurer que votre pluie ne tombe pas. Et encore une fois, il existe toutes sortes d'applications pour lesquelles vous pouvez l'utiliser. N'importe quoi. Fondamentalement, vous devez simplement changer quelque chose d'aussi légèrement avec du texte. C'est ainsi que vous le feriez. 8. Images: Ok, donc nous allons maintenant parler de la façon de manipuler et d'importer des images. Il est donc évident que vous ne pouvez pas utiliser des images tout au long de votre temps pour concevoir des sites avec XD. Allons donc avec So les deux principales options en matière d'importation d'une image. Tout d'abord, la chose la plus importante à apprendre est un raccourci clavier, Maj Control et la lettre i ou Maj Command. Ou si vous êtes sur un Mac, si vous l'avez fait, votre panneau apparaîtra dans lequel vous pourrez évidemment choisir parmi tous les différents dossiers que vous possédez. Ensuite, après avoir voulu l'appliquer d'un pouce, cliquez sur un, puis cliquez sur Importer. Si vous deviez cliquer sur tous et importer le lot entier, vous pouvez également le faire. Et XD importera automatiquement tous les éléments que vous venez de sélectionner. Et ensuite, vous pouvez l'utiliser comme vous le souhaitez. Vous pouvez les faire glisser d'un côté. Si vous pensez, encore une fois pour les utiliser individuellement un peu plus tard, vous pouvez le faire, mais ne faisons que cela pour l'instant. C'est donc une façon de le faire. L'autre façon d'importer une image est d'avoir déjà ouvert un dossier dans lequel vous pouvez simplement faire glisser les images comme vous le souhaitez. Évidemment, vous pouvez faire glisser et en sélectionner autant et les faire glisser de cette façon. C'est donc encore une fois, j'espère des moyens assez évidents d'importer des images vont simplement annuler cela pour l'instant. Nous sommes donc de retour à la case 1. Nous y sommes donc. Et puis, comme vous l'imaginez, toutes les choses que vous pouvez faire avec certains outils de forme peuvent également être réalisées avec des images ainsi que si vous voulez prendre soin des bordures. Vous pouvez le faire simplement en glissant simplement. Vous pouvez également le modifier en termes de cône individuel pour que, si vous le souhaitez, vous ne souhaitiez avoir qu'une courbe sur un coin. Vous pouvez aussi le faire. En termes de choses comme remplir la couleur calme là-dessus, il deviendra une couleur complètement unie. Le film n'est donc vraiment que l'image elle-même. L'économie a fait cela. Vous pouvez avoir des frontières. Donc, si vous voulez avoir une grosse bordure épaisse sur vos bonbons, encore une fois, tous les mêmes contrôles des autres formes. Donc, tout ce que nous venons de faire jusqu'à présent est également disponible pour les images I, k. Et en termes d'ombre portée, encore une fois, toutes les mêmes choses sont disponibles afin que vous puissiez avoir des ombres portées pour contrôler le la quantité de flou que vous avez et tout le reste. Tout cela est donc disponible. Ok, donc c'est une sorte de pouvoir évident hors du chemin. Parlons maintenant de la façon d'utiliser ces choses d'une manière plus évidente pour concevoir des sites Web. Très souvent, vous allez utiliser des images d'arrière-plan et simplement des images d'installation avec des blocs Info à l'intérieur de votre conception. La première chose que nous allons vous montrer comment faire est de créer une image de cheveux avec la section Harry désolé avec l'image. Maintenant, si nous sortons ça sur les bords ici, vous voyez qu'il s'enclenche. Mais c'est là que se trouve notre espèce en dessous du point de pliage. En fait, si je mets ça un peu plus bas, vous voyez ici, ce serait notre section cheveux d'un site Web. Et très souvent, vous avez une image qui prend toute la largeur de celle-ci. Mais si nous le faisons, vous verrez qu' avec cette image particulière est en fait, elle ne va pas être cinco correctement. Il sera en dessous du pli, ce que nous ne voulons pas aujourd'hui. Et ce que vous pourriez faire, je suppose qu'il faut le mettre dans la boîte au-dessus, le COVID. Mais ce n'est pas le moyen le plus efficace. La meilleure façon de le faire est d'utiliser une forme. Tout d'abord, ce que nous allons faire, c'est que nous allons utiliser notre outil de forme, outil rectangulaire. Et nous allons simplement dessiner un rectangle jusqu'à un point où il se trouve sous le pli, droite, pour affirmer un point d'arrêt. Et puis, nous allons le faire, c'est jeter une image dans ce carré. C'est ce que nous allons maintenant dire que je vais ouvrir ma fenêtre ici. Je vais juste prendre une image. Je vais le déposer à l'intérieur et vous verrez qu'il est automatiquement mis à l'échelle à cette forme. Et cela fonctionnerait pour n'importe quelle autre forme que vous avez également. Donc, si je double-clique sur l'image, vous pouvez voir qu'il est encore en quelque sorte au-dessus et en dessous. Ce n'est donc pas un ajustement parfait, mais nous recadrons automatiquement une partie de cette image. C'est donc un peu parfait si vous concevez quelque chose comme une image d'en-tête. Et s'il veut manœuvrer, vous pouvez le faire en double-cliquant simplement. Et chaque fois que vous lâchez prise et que vous cliquerez, il restera lourd à gauche. Supposons que vous souhaitiez étendre cette image beaucoup plus loin. Et vous voulez seulement que le coin inférieur de l' image soit assez grand et cela vous permet de le faire. Vous pouvez le faire aussi. Et quand je clique loin de là, vous voyez qu'il disparaît maintenant. C'est ainsi que vous commenceriez à utiliser images pour concevoir des sections de héros ou un site Web. Et nous y reviendrons un peu plus tard dans le cours. C'est donc la façon la plus évidente de le faire. Je vais simplement supprimer cela un instant et vous verrez qu'une fois que j'ai fait cela, il a également supprimé la forme en même temps. Donc, fondamentalement, messes tous les deux ensemble. Je vais juste vous montrer un autre exemple. J'ai donc mentionné que vous pouvez le faire avec n'importe quelle forme. Si nous dessinons simplement un cercle peut-être, et que nous allons simplement passer ce genre de côté ici. Et encore une fois, ce que nous allons faire, c'est simplement jeter une image dans cette forme et elle adaptera automatiquement l'image à la forme que vous avez dessinée. Et si vous voulez le déplacer, nous pouvons le faire. Et de toute évidence, il n'y a pas que l'outil Ellipse qui est également destiné à l'outil polygone. C'est donc comme ça que tu fais ça. Et c'est bien sûr toutes sortes de choses que vous pourriez faire avec cet outil super et super utile à avoir. C'est donc un bref aperçu de la façon d' importer des images dans votre conception. Encore une fois, si vous souhaitez simplement importer un tas d' images et en avoir d'autres sur le côté prêtes à l'emploi. Vous pouvez le faire. Nous allons revenir à la manipulation des images beaucoup plus souvent tout au long du cours. Allez au lieu de plus de détails et comment vous pouvez utiliser des grilles répétées qui ont commencé à arriver à un moment où vous pouvez copier et coller des éléments assez facilement. Mais dans la vidéo suivante, nous allons parler de la façon d'importer des vidéos et des fichiers Lottie. 9. Vidéo et lottie: Ok, donc, nous allons maintenant parler un peu de la façon importer des vidéos sur des fichiers Lottie dans Adobe XD. J'enregistre donc ce cours à la fin de 2021. Et c'est en fait une toute nouvelle chose que nous venons de présenter. Je vais juste vous montrer comment vous pouvez le faire. Très simple, similaire à la façon dont vous importez une image. Ou nous devons faire essentiellement glisser ou simplement décaler Contrôle et Alt ou Maj Commande I. Et puis juste la vidéo. Ou nous pouvons simplement le faire glisser comme je l'ai mentionné. Et maintenant, nous avons une vidéo. Maintenant, il ne joue pas tant que vous n'avez pas réellement prévisualisé le canevas lui-même. Et il y a quelques paramètres que vous pouvez avoir pour déterminer comment agir réellement. Vous pouvez donc voir ici que nous avons un nouveau type d'option de réglage ici où il est écrit Lecture au toucher, qui correspond à ce qu'il est actuellement en cours, Platon mensuel ou pas de lecture, ou vous pouvez ensuite modifier des aspects de sa lecture. Cela est plus lié à la partie de frappe de post. Bolus a votre propre lecture automatique parce que les chances sont si vous utilisez une vidéo, les chances sont assez élevées d'être sorte de vidéo d'arrière-plan le plus souvent. Donc maintenant, si nous prévisualisons ceci, vous verrez ce que nous faisons, il commence immédiatement à lire l'aperçu de maman. donc comme ça que se passe la vidéo de Mackenzie. Et évidemment, vous pouvez redimensionner comme vous le souhaitez. Nous sommes tous le même genre de contrôles que vous avez avec n'importe quoi d'autre. Il y a certaines choses que vous n'avez pas automatiquement, comme les ombres tombées ne vous auront pas. Vous êtes un peu plus limité quand il s'agit de cela. Donc, tout comme aller aux images, vous pouvez en fait une sorte de mascotte à une forme. Alors, nous allons simplement vous montrer ça. Si nous dessinons simplement un triangle, peut-être jetterons notre vidéo dans le triangle. Double-cliquez et vous obtiendrez ensuite une option pour voir comment il joue. Ils rejouent donc automatiquement. Je peux m'en sortir et j' espère que nous pourrons l'étendre à la taille que nous voulons. Et ensuite, si nous prévisualisons, vous verrez jouer automatiquement dans forme que nous l'avons masquée pour dire « mort simple », c'est exactement le même genre de chose que vous faites avec les images. Une fois encore. C'est donc ça pour la vidéo. Et encore une fois, il y a probablement quelques autres choses que vous pouvez en faire. Mais encore une fois, je voulais vous montrer les bases de la façon dont cela fonctionne. Vous pouvez gérer tous les types de vidéos que vous avez dans le panneau de gauche Nous allons entrer dans les ressources des documents dans un instant. Mais disons simplement que vous avez des dossiers tardifs. Donc, les fichiers latae si vous ne les connaissez pas, ou essentiellement après ses fichiers After Effects qui ont été convertis en chaleur et sur des sites Web sont très, très populaires sur Webflow et des choses comme élément ou le moment. La raison en est une taille de fichier beaucoup plus petite et quelque chose comme une vidéo ou un FEM. Il y a donc des fleurs assez grandes. Et évidemment, plus la taille du fichier d'un site Web est grande, plus le site Web se chargera lentement. Donc, plus la taille du fichier est petite, mieux c'est et cette taille de fichier est très petite, c'est pourquoi ils sont très, très populaires. Je veux donc en télécharger un juste pour vous montrer comment cela fonctionne. Encore une fois, super simple. Beaucoup d'entre eux sont gratuits. Donc, si vous voulez jeter un coup d'œil à tous les différents que vous avez ici. Si vous allez sur Lottie files.com, vous pouvez ensuite doucement à travers une foule d' animations gratuites que les gens ont à utiliser comme bon vous semble. Ils ont également une place de marché où vous pouvez acheter des animations plus avancées ou certaines animations dans un sujet spécifique. Alors téléchargeons celui-ci, je pense. Et tout ce que nous avons aujourd'hui, vous pouvez les télécharger dans quelques formats différents. Vous pouvez en faire un cadeau pour ou dans une vidéo. Si nous téléchargeons cette topologie est verrouillée dans un fichier adjacent, vous verrez qu'il le fait. Et puis il suffit de le faire glisser sur notre toile, de le déposer. Et tout comme une vidéo, vous avez plusieurs options différentes et comment elle jouera une lecture au toucher ou vous pouvez la faire jouer automatiquement. Je pense donc que ce que nous allons probablement faire est de le faire jouer automatiquement. Et donc, nous allons simplement faire entrer ça quelque part. Encore une fois, vous devez en faire un aperçu. En fait, on voit l'animation fonctionner. Et ensuite, ce que nous allons faire, c'est choisir jouer automatiquement. Et nous ne voulions pas non plus qu'il s' arrête après, après avoir joué une fois. Cela met donc les cheveux sur le côté gauche, et cela est également vrai pour la vidéo aurait dû dire que cela va boucler la lecture. Maintenant, lorsque nous prévisualisons ceci, il jouera continuellement des heures supplémentaires, qui est probablement ce que vous auriez si vous l'utilisiez sur un site Web. On y va donc. Donc oui, encore une fois, c'est comme ça que vous allez utiliser les fichiers Lottie et les fichiers vidéo. Il vous donne juste un peu plus de liberté de conception. Et cela vous permettra de voir à quoi ressemble un site Web ou une application peut ressembler à un produit fini, ce qui est donc mis à jour. C'est tout le problème. Parfois, vous devrez attendre le processus de développement pour voir à quoi il ressemble réellement. Vous pouvez maintenant avoir beaucoup de fichiers et les vidéos sont vraiment géniales. Voici donc l'aperçu de base de la façon dont vous pouvez utiliser les vidéos et les fichiers Lottie dans vos conceptions. 10. Raccourcis de clavier: Dans cette vidéo sur SOC, des raccourcis clavier très courants que vous voudrez apprendre. Je vais vous fournir dans le matériel de cours une liste complète des raccourcis clavier disponibles, ils peuvent jeter un coup d'œil à vos loisirs. Il y en a beaucoup. Donc je voulais, cependant, je voulais juste expliquer pourquoi j' utilise un peu et juste une sorte de, les fondamentaux absolus de l'utilisation des raccourcis pour certaines choses. Ok, donc le plus évident est la copie. Disons simplement que nous voulons avoir cette place. Je vais le copier ailleurs. Vous pouvez simplement contrôler C et contrôler V. Et cela vous donnera automatiquement une autre version de ce que vous venez de faire. C'est donc une façon de copier. Une autre façon est que si vous maintenez légèrement l'élément Alt enfoncé et que vous pouvez ensuite le déplacer pendant que vous maintenez ce o, lorsque vous le maintenez enfoncé, je créerai un duplicata de ce que vous avez déjà, le SR. Une autre façon de le faire. Une autre chose à propos de quand vous maintenez Alt enfoncé comme une sorte d'autre chose très utile si vous sélectionnez un élément et que vous le maintenez simplement enfoncé, mais je fais glisser. Il indique la distance entre un élément et un autre. Vous pouvez donc le voir ici, il vous montre la distance entre ce point et le haut, chaque côté, le bas. Donc, si vous ne faites pas glisser, c'est une autre façon d' utiliser ce contrôle où je peux vous le dire, donnez une idée de l'espacement. C'est donc très, très utile de le faire. C'est ainsi que vous pouvez utiliser des raccourcis clavier pour dupliquer des éléments. Un autre clavier, Shoko, bien sûr, disons que nous voulons nous débarrasser de tout ce que nous avons fait. Juste Control et Z, annulez tout ce que nous venons de faire. Ok, donc tout comme vous le faites pour tout autre utile lorsque vous utilisez un PC ou un Mac. D'accord, donc le genre de symboles évidents à partir de là, nous allons évidemment passer par beaucoup de ces différents symboles ici. Nous essayons de ne pas utiliser ces deux modes juste pour que vous puissiez mieux voir ce qui se passe. Mais chacun d'entre eux possède son propre raccourci clavier, comme je l'ai déjà mentionné. Mais vous souhaitez particulièrement vous habituer à utiliser l'outil de sélection de l'AV. Parce que quoi que vous fassiez actuellement à la fois, si vous regardez le cas de maintenant, appuyez sur la lettre V et nous revenons à la sélection. Cela va donc être utilisé un peu tout au long du cours. Je ne vais pas revenir constamment à celui-ci dans les haies, un socialement juste que je dirais pour toujours manger, je veux le faire en utilisant raccourcis clavier pour manipuler des éléments. Encore une fois, nous avons probablement déjà abordé cette question. Mais si vous maintenez la touche Maj enfoncée sur n'importe quel élément que vous possédez ou n'importe quelle forme vous possédez, elle créera. Je vais juste évoluer exactement comme il est sans ajouter de science de part et d'autre. Si vous le lâchez, vous pouvez le dimensionner comme vous le souhaitez. Si vous voulez vous allonger. Mais en haut et en bas. Et si vous maintenez Alt enfoncé, comme vous le faites, vous verrez que c'est le déplacer et le mettre à l'échelle, mais seulement de cette façon et de cette façon. Donc en haut et en bas, s'il l'a fait dans l'autre sens, maintenez à nouveau Alt enfoncé, il ne poussera que de part et d'autre de cette façon. Ce sont des choses assez courantes que vous allez utiliser. Des choses comme Bring to Front sont un autre raccourci clavier très courant. Donc, si nous donnons simplement une couleur de remplissage pour que vous puissiez mieux voir ce que nous faisons. Et nous allons simplement dessiner autre chose aussi. Et nous obtiendrons un remplissage et rapidement obtenu un film comme cendre fine maintenant nous allons lui donner une couleur de remplissage différente sinon et devenir déroutant. Disons donc évidemment que nous voulons placer cette boîte derrière cette boîte, vous pouvez simplement cliquer dessus avec le bouton droit de la souris, renvoyer ou utiliser un raccourci clavier pour également. Ce sont donc eux que vous allez utiliser. Un peu. Bloquer, c'est dire, jetez un coup d'œil à travers la touche, la liste des raccourcis clavier que vous fournissez un fleuret et fournissez un fleuret et que vous voulez vraiment manger autant que possible, essayez simplement de les utiliser. Il arrive donc à un stade où c'est presque une seconde nature. Et après avoir utilisé cela pendant un certain temps, il deviendra une seconde nature, il deviendra une seconde nature, en particulier des choses comme l'outil de sélection de batterie en sélectionnant la lettre V. Ce genre de choses évidentes, évidemment en faisant Contrôle a, contrôle V va être très évident pour vous. Il fonctionne. Vous êtes probablement habitué à utiliser des choses. Mais encore une fois, faites défiler et trouvez les choses que vous aimez utiliser. Et cela vous rendra la vie beaucoup plus rapide lorsque vous utilisez ce programme. 11. Contrôler et verrouiller: Ensuite, comment contrôler et manipuler des éléments dans XD. Je vais donc vous le montrer d'une manière plus utilisable. Nous allons donc créer un menu de navigation de base très rapidement, moins de girafe, le rectangle. Et imaginez que ce n'est pas assez d'argent ou débarrassez de la frontière et nous lui donnerons une couleur. Faisons peut-être du bleu foncé. On y va donc. Nous avons maintenant le fonctionnement du menu de navigation sur un menu d'application sur le site Web, évidemment vous aurez généralement une jambe sur le côté gauche. Ensuite, vous avez les éléments du menu de navigation soit au centre de la, à droite. Faisons ça maintenant. Donc, si nous voulons commencer à construire des choses en plus de cela, parfois vous ne voulez pas le déplacer accidentellement, ce qui est très facile à faire, surtout si vous essayez de redimensionner des éléments ou sélectionner d'autres éléments, il peut être une peinture. Vous voulez vraiment verrouiller cela en position. Je vais juste vous montrer comment cela peut poser problème. Je vais simplement créer un logo très, très basique. Alors rendons ce cercle rouge juste pour vous montrer. OK. Nous aurons donc cela sur le côté gauche , puis nous créerons des éléments de navigation ici. Donc, si nous utilisons l'outil Texte ici et que nous commençons à taper, peut-être que nous aurons l'amour chez nous. Et nous allons cliquer dessus et ensuite nous allons simplement dupliquer cela quelques fois. Donc, si j'ai joué ça, maintenant, je vais juste faire ce phénomène de forme libre très proprement. Mais disons que nous voulons réajuster ce que nous avons ici. Donc, l'espacement est juste question de droits ou je l'ai eu il y a un instant. Recommençons ça. Ok, donc vous pouvez voir cet espace uniformément. Mais que se passe-t-il si nous voulons les ajuster ? Si je veux sélectionner tous ces éléments ensemble, vous verrez que lorsque j'essaie de le faire, cela déplace simplement la barre de navigation parce qu'elle n'est pas verrouillée en position. Donc, si vous voulez essayer de sélectionner tous ces éléments qui se trouvent sous cette barre de navigation. Vous ne pouvez pas le faire sans affecter cette barre de navigation. Donc, ce que vous pouvez faire pour contourner ce problème, c'est le verrouiller en place. Donc, deux façons de le faire. Vous pouvez cliquer avec le bouton droit sur l'élément que vous souhaitez verrouiller. Voir une option pour un qui a beaucoup. Vous pouvez donc simplement cliquer dessus, vous pouvez toujours afficher que vous êtes un raccourci clavier, c'est ce que vous voulez essayer de vous habituer à utiliser autant que possible uniquement pour la vitesse. Vous contrôlez donc un l ou une commande et un S sur Mac. Donc, si nous le faisons, vous voyez maintenant que nous avons ce symbole de verrouillage en haut à gauche. Et cela signifie que peu importe ce que nous faisons, peu importe ce que nous essayons de cliquer dessus, il ne bougera pas, même si nous essayons de le supprimer, il est allé plus tard est verrouillé en place. Il ne bougera pas tout. Pour les déverrouiller, il suffit de cliquer sur l'icône elle-même ou de cliquer à nouveau sur Contrôle et L et la déverrouiller pour vous. C'est donc essentiellement comme ça que cela fonctionne. Et encore une fois, Control et S, ou Command et L. Essayez d'utiliser les raccourcis clavier autant que possible. Cela vous permet de gagner beaucoup de temps. Maintenant, comme en place, cela signifie que lorsque j'essaie de faire glisser et de cliquer, je peux facilement sélectionner mes éléments de navigation et cela ne fait aucune différence. Je peux ensuite les redimensionner comme je veux faire ce que je veux avec eux. Je peux le faire librement sans affecter aucun autre élément du menu lui-même. C'est donc un cas d' utilisation évident pour ce genre de choses. Vous trouverez que c'est très, très courant. Et au fur et à mesure que vous commencez à utiliser x day, vous constaterez que ce genre de choses arrive un peu et l'habitude de regarder les choses pendant que vous essayez de construire dessus. Il s'agit donc d'un cas d'utilisation très, très courant. Disons que nous allons nous débarrasser de tout ça pour l'instant. Et si je garde les formes, nous allons utiliser cela juste pour démontrer autre chose. Je vais juste déverrouiller ça. Je vais juste réutiliser ça juste un instant. Maintenant, nous avons deux formes. Donc, si je fais glisser ça sur le haut de mon rectangle, vous verrez qu'il est automatiquement passé au-dessus du haut. Maintenant, cela ne signifie pas nécessairement que vous voulez toujours avoir une commande. Parfois, vous voudrez peut-être avoir ce cercle sous le rectangle. Alors, comment les faites-vous ? Une fois de plus, cliquez sur l'élément que vous souhaitez manipuler. Vous pouvez cliquer avec le bouton droit. Et vous voyez ici, nous avons quelques options. Nous avons mis au premier plan, nous avons avancé, renvoyé en arrière ou envoyé à la banque. Bring to Front, c'est l'amener directement à l'avant et renvoyer est envoyé l' avant vers l'arrière comme cela sera évident. Avancer et reculer signifie qu'il se déplacera dans le panneau des couches dans lequel nous avons du foin dans lequel nous n'avons pas été entrés. Oui, nous en reviendrons dans la prochaine vidéo. Mais en gros, vous pouvez également manipuler cela ici. Je vais juste vous montrer très rapidement. Donc, si nous l'avons fait glisser ci-dessus, vous voyez maintenant est la zone affectée ici. Vous pouvez donc également affecter cela de cette façon. Vous pouvez également cliquer avec le bouton droit , puis cliquer simplement sur l'option souhaitée. Ou vous pouvez simplement utiliser le clavier Shoko répertorié ici. Il existe donc deux façons différentes manipuler ces éléments. Cela va donc être super, super courant et vous allez vouloir manipuler ces éléments un peu. Chaque fois que vous concevez des sites Web, c'est quelque chose que vous allez utiliser énormément. Il vaut donc la peine de se souvenir des raccourcis clavier pour cela. Ou si vous préférez simplement faire glisser ces choses, vous pouvez également le faire. Bien sûr, cela varie également pour le texte. Si nous avions des textes ici, vous pouvez le manipuler comme vous le vouliez. J'espère que c'est logique. Vous tombez de nouveau lorsque nous commencerons concevoir notre projet de classe un peu plus tard, nous allons utiliser toutes ces différentes techniques au fur et à mesure. C'est donc un aperçu de base de la façon dont vous pouvez rapprocher ou éloigner les éléments de l'écran, et comment les réorganiser dans leur position sur l'axe. Et aussi comment verrouiller des objets en place afin de pouvoir ensuite construire des objets dessus. 12. Sélectionner et regroupement: Parlons maintenant de la façon de sélectionner et de regrouper différents éléments sur votre canevas. Encore une fois, cela va être très courant. Beaucoup de temps, vous voudrez sélectionner plusieurs objets ensemble. Supposons donc que nous voulions que ces deux éléments se déplacent même temps et gardent la même distance que celle dont ils disposent actuellement. Donc, si nous devions le faire, si nous cliquons et glissons et sélectionnons les deux éléments ensemble, si j'essaie maintenant de déplacer cela, il les déplacera tous les deux en même temps. Dès que je clique dessus et que je réessaierai de le refaire, il regroupera les éléments. Il s'agit donc d'un moyen rapide de rencontrer des éléments, mais vous ne voulez pas qu'ils appartiennent toujours au même groupe. Mais il y aura beaucoup de fois où vous voudrez, peut-être, créer une sorte de carte d'une sorte. On peut toujours vouloir que les éléments regroupés et ils deviennent leur propre chose. Vous pouvez également le faire. Donc, plutôt que de simplement choisir, il suffit de se rencontrer, si vous voulez, et de toujours se comporter et de réagir ensemble. Vous pouvez le faire parce que encore une fois, pour le moment, je clique dessus, ça va arrêter ça. Donc, une fois de plus, sélectionnez-les ensemble, cliquez avec le bouton droit de la souris, puis vous verrez qu'il s'agit d'un groupe, qui est également un raccourci clavier, qui est Control et J, encore une fois, il s'agit d'un raccourci clavier. Vous voulez vous en souvenir autant que possible. Cela va vous faire gagner beaucoup de temps, mais si nous le faisons, vous verrez qu'il est maintenant regroupé. Et même si je clique dessus et que j'y reviens, cela me permettra maintenant de rencontrer ces éléments et ils seront toujours regroupés. Donc, si vous vouliez annuler la prise ou si vous devez le faire , cliquez avec le bouton droit de la souris, puis continuez et continuez sur le raisin. Si vous commencez à cliquer sur Désactivé, vous pouvez nouveau déplacer différents éléments individuellement. C'est donc un peu comme ça que vous pouvez regrouper les objets ensemble. Et encore une fois, il n'y a aucune limite quant au nombre d'entre eux que vous pouvez faire. Vous pouvez ajouter du texte. Ils ont travaillé avec du texte, ça fonctionne avec tout. C'est ainsi que vous regroupez les éléments. Encore une fois, c'est quelque chose que vous allez utiliser des guillemets ci-dessus. Et vous verrez si nous le conservons sur notre panneau Calques ici. Pour le moment, ces deux éléments ont leur propre chose en cours. À la minute nous sélectionnons les deux ensemble et que nous cliquons sur GREP, vous dites que cela crée un dossier pour ces éléments. Si nous double-cliquons maintenant dessus, vous verrez que nous avons dans ce dossier lui-même. Donc, si c'était une sorte d'élément, vous allez utiliser beaucoup sur votre site Web. Vous pouvez ensuite donner un nom à ce nom et l'appeler comme vous voulez. Encore une fois, nous allons revenir ce panneau Eléments et juste un peu pour vous montrer plus en détail où vous pouvez y faire face. Une fois encore. Mais c'est l'aperçu de base de la façon dont vous pouvez regrouper des éléments ensemble. Et chaque fois que vous les déplacez avec une souris, ils les déplacent toujours ensemble en même temps. En outre, il convient de mentionner que vous voulez mettre à l'échelle ces éléments monophylétiques groupe, vous pouvez le faire aussi. S'il s'agit toujours d'un groupe, il ne déplacera que l'élément sur lequel vous cliquez. Si vous maintenez la touche Maj enfoncée, les deux croîtront au même niveau. C'est donc essentiellement la façon dont vous greppez les éléments et comment manipuler les éléments groupés ensemble. 13. Masquer des éléments: Juste avant de passer à autre chose, je veux vous montrer une autre chose quand il s'agit de manipuler différents objets. Ce que nous voulons parfois faire, c'est masquer des objets. Supposons que pendant une minute, nous ayons conçu certaines choses de telle sorte que nous avons quelque chose qui intersecte ces deux objets. Mais tout ce que nous voulons modifier se trouve peut-être dessous, ce qui pourrait le faire est de les dissocier de les écarter, mais une meilleure façon et peut-être juste trop haut l'élément temporairement. raison pour laquelle vous pouvez le faire est de cliquer dessus avec le bouton droit , puis de cliquer simplement sur Masquer ou vous pouvez utiliser le raccourci clavier. Et je vais m'en débarrasser juste pour l'instant. Et ensuite, vous avez le contrôle total de l'élément en dessous. Et si vous voulez l'afficher, vous pouvez simplement contrôler Z. Ou vous pouvez voir sur le panneau de vos calques ici, vous verrez que l'Ellipse 1 est actuellement une serviette vierge et elle a ce genre de globe oculaire avec une croix trois, ce qui signifie qu'il est caché. Donc, ce que vous pouvez faire, c'est simplement cliquer dessus et cela le ramènera là où il s'agissait d'une canne. Disons que c'est un aperçu de base de la façon de regrouper des éléments et de les manipuler ensemble, ainsi façon de masquer temporairement des éléments , puis de les ramener. Un qu'elle voulait. 14. Combiner les formes: Ok, donc ensuite, nous allons parler de la façon de combiner un croisement entre différents éléments. C'est peut-être plus courant si vous utilisez des formes un peu comme celle-ci. Vous avez peut-être créé une sorte de graphique. C'est peut-être quelque chose que vous utiliseriez spécifiquement pour cela. Cela n'est donc pas aussi lié à la création d'un site Web en soi. Plus peut-être à voir avec la bombe de design graphique vous montrera quand même parce qu'elle apparaîtra évidemment. Je vais montrer les côtés de la conception. Commençons donc par donner ces deux objets ensemble dans ce genre d'imposant, disons, je vais tout d'abord chevaucher ce cercle ici comme ça. Assurez-vous que c'est beau et uniforme. Et je vais regrouper ces deux objets ensemble. Je vais juste les sélectionner comme ça. Et maintenant, vous voyez qu'une fois que nous avons fait cela, nous avons maintenant ce panel ici. Nous allons donc revenir à Repeat Grid dans un instant. Mais nous avons maintenant ces différentes options que nous avons ADD, nous avons une soustraction, nous avons également une intersection, et nous avons également un chevauchement d'exclusion. Cela peut signifier que rien n'est une prime. Je pense donc que la meilleure façon de vous montrer ceci est de vous montrer. Ce que nous allons faire au départ, c'est cliquer sur Ajouter. Et ce que vous voyez se passer ici, c'est que vous venez ajouter la forme qui était au-dessus de la forme qui se trouve ici. Et il change également de couleur. Donc, si vous voulez simplement ajouter tout ce que vous avez à un autre élément, très simplement, c'est ainsi que vous le feriez et cela prendra automatiquement la même couleur que prendra automatiquement la même couleur l'objet ci-dessous si nous l'inversons. légèrement. Nous disons donc que si nous voulons que le cercle soit plus profond sur l'axe, nous pouvons le faire comme si nous cliquons avec le bouton droit de la souris et y aller. Peut-être qu'il suffit de renvoyer en arrière et de faire le même genre de choses. Vous allez maintenant voir une autre chose se produire. Nous avons maintenant, l'article a inventé, ressemble, mais il est pris en compte les propriétés de l'élément le plus éloigné sur le point d'accès. J'espère que c'est logique. Et évidemment, vous pouvez créer toutes sortes de formes différentes en ajoutant des éléments ensemble. Le prochain va être soustrait. Maintenant, celle-ci est très, très utile, particulièrement associée pour créer des formes uniques. Alors maintenant, ce que nous allons faire, encore une fois, assurez-vous que les deux sélectionnés cliqueront ensuite sur soustraire. Et vous pouvez voir qu'il y avait maintenant un cercle qui a été mordu de l'objet qui se trouvait en dessous. Donc, encore une fois, la seule façon faire sans utiliser cet outil, mais pour peut-être mettre un cercle blanc avec un fond blanc, vous pourriez le faire de cette façon. Mais de cette façon, il s'agit en fait de S3. Donc, si je connais la forme en dessous, juste pour vous montrer, et je lui donnerai une couleur de fond. Vous voyez, si j'essaie de le déplacer dessus, vous dites que c'est complètement transparent. Il n'y a plus rien dans cet espace. Il s'agit donc de soustraire un élément d'un autre. Et nous allons juste l'inverser encore une fois. Donc, si nous voulons maintenant faire renvoyer cela et nous ferons le même genre de choses à nouveau. Nous allons cliquer sur Soustraire, et maintenant il est soustrait l'autre élément des éléments NUS. Désolé, c'est important lorsqu'il s'agit de savoir ce qu'un élément est plus haut sur le point de l'axe. Donc, la première fois, c'était le rectangle. Cette fois, c'est un cercle. C'est donc comme ça que vous utilisez la soustraction. Encore une fois, je ne vais pas créer beaucoup de formes différentes pour cela. Je ne fais que vous montrer les bases de la façon dont cela fonctionne. Une fois de plus, pour m'assurer que j'ai sélectionné et que nous avons maintenant l'outil d'intersection. Et si nous cliquons dessus, vous verrez maintenant que nous n'avons que cette partie là. Il a donc intersecté les deux objets ensemble. Ils sont en quelque sorte un point de contact. Et puis, si je clique encore une fois dessus et que vous verrez comment cela fonctionne. Encore une fois, ce n'est pas le plus utilisable pour celui-ci, mais très utile si vous essayez combiner certains éléments dans une forme particulière. Et le dernier que nous ayons va exclure le chevauchement. Et vous pouvez voir maintenant qu'une chose similaire à la soustraction de cette partie où elle se croise est maintenant complètement transparente. Donc, juste pour le prouver, donc si je remets quelque chose en dessous, si je dessine juste un cercle, je lui donnerai une couleur de remplissage. Si je déplace cet objet, vous verrez qu'il s'affichera. Si je veux vraiment faire ça. Je vais l'amener au premier plan. Et vous verrez maintenant que je le repasserai, en dessous, cela va réellement se révéler parce que c'est complètement clair maintenant. Et c'est essentiellement de cette façon que vous utiliseriez ces outils. Il s'agit donc de l'outil Exclure le chevauchement. Encore une fois, il ne s'agit pas d'un cours de conception graphique, donc je ne vais pas garantir tous les donc je ne vais pas garantir tous les cas d'utilisation possibles, mais j'espère pouvoir voir à quel point cela pourrait être utile si vous essayez de créer des formes très spécifiques qui peuvent ne pas être aussi facilement possibles en utilisant seuls les outils de forme. Il s'agit donc d'une vue d'ensemble de base utilisation de ce type d' outils d' intersection et comment soustraire et ajouter différentes formes ensemble pour créer différentes formes. 15. Grille répétitive: Ok, alors ensuite Oprah et en utilisant simplement des formes aléatoires qui se précipitent pour créer quelque chose qui ressemble davantage à un pod ou à un site Web. Nous allons donc maintenant examiner cette option ici, qui est Repeat Grid. Ce que nous allons donc faire, c'est créer une section de cartes ou un article de carte. Ensuite, nous allons utiliser la grille de répétition pour répéter l'article plutôt que de simplement dupliquer la fin. Nous pourrions donc simplement le dupliquer en maintenant la touche Alt enfoncée, puis en le faisant glisser. Mais vous pouvez également utiliser la grille de répétition, ce qui facilite grandement la vie et facilite simplement l'espacement des choses. Commençons donc par avoir un angle droit. Et nous allons juste une sorte de chute libre et libre là-dessus pour le moment, car quelque chose comme ça me semble bien ou est quelque chose comme au milieu de l'écran. Nous allons juste arrondir les bords un petit peu juste pour le devant de celui-ci. Nous allons nous débarrasser de la bordure et nous lui donnerons peut-être un gris légèrement clair. Et puis je pense qu'à partir de là pamps vont juste verrouiller ça en place. Maintenant, nous allons commencer à construire des choses dessus. Encore une fois, c'est maintenant complètement en place. Il ne bougera pas. Je peux commencer à construire des choses sur le dessus, cela n' interagira pas avec les autres éléments j'ai mis tant que je ne l'autorise pas. Donc, ce que nous allons faire, c'est jeter une image maintenant. Nous allons donc changer de contrôle. Nous allons simplement choisir une image aléatoire, qui est celle-ci ici, va simplement redimensionner un peu, juste pour qu'elle s'insère dans notre section de code et nous allons Il suffit de zoomer aussi légèrement. Donc oui, pour que nous puissions mieux voir ce que nous faisons. Voyons donc à quel point c'est loin. s'agit donc de 13 pixels en haut, Il s'agit donc de 13 pixels en haut, et actuellement 15, désolé, 16 de côté. faut donc le faire un peu plus et être plus central. Pour que cela parte maintenant ne doit pas être parfait pour le moment. Et nous obtiendrons peut-être un titre et des cheveux aussi. Cliquez donc sur l'icône Ligne de texte, nous aurions également pu cliquer sur la lettre T. Et nous veillerons à ce que vous puissiez voir ici me faire savoir par cette ligne qu'elle s'aligne correctement sur ce bord. Nous allons donc le faire. Et nous allons juste appeler ça la photographie. Et nous allons juste zoomer un instant. D'accord, tout va bien. Nous reviendrons à mon outil de sélection. En fait, avant de le faire, ce titre sera un peu plus petit. Faisons quelque chose comme 30 serait probablement juste. Nous allons le rendre un peu plus audacieux aussi simplement parce que pourquoi pas ? Ok, donc nous allons peut-être aussi mettre un paragraphe ici. Encore une fois, nous veillerons à ce que tout cela soit correctement aligné. Donc on va juste mettre ça ici et on va juste mettre, c'est un sort d'icône de paragraphe de son truc. Et nous allons le rendre beaucoup plus petit, bien sûr. Donc, plutôt que audacieux, nous aurons cela comme régulier et nous en ferons quelque chose comme 18. D'accord. Et puis, à partir de là, nous ajouterons une autre chose. Nous avons juste inventé ça un peu, donc c'est un peu désolé, un peu plus proche du titre. D'accord, c'est très bien pour l'instant. Ajoutons simplement un bouton. Nous allons donc simplement utiliser notre outil rectangle. Et nous aurons ceci vers le bas. Et vous verrez que la ligne est apparue une fois de plus, juste pour me faire savoir qu'elle est maintenant correctement alignée sur le bord de l'image. Et ensuite, nous allons juste tirer ça. chose comme ça. Nous n'aurons pas de frontière. Et de quelle couleur devrions-nous juste avoir un chien. C'est très bien. Et peut-être juste un peu plus haut. Et puis je verrouillerai ce lien en place. La raison pour laquelle il est maintenant ouvert de placer un texte par-dessus le dessus. Donc, juste pour pouvoir manœuvrer plus facilement, c'est juste mieux de le faire. Et puis nous ajoutons simplement, peut-être que nous en apprendrions davantage. Et veillez également à ce que nous puissions le voir aussi. Donc, plutôt que d'être sombre ou de l'avoir comme lumière, et nous allons le rendre beaucoup plus petit. Faisons donc quelque chose comme 16 pixels, peut-être plus petits que ça. Ok, puis nous allons entrer dans le capteur. Nous avons donc créé une section de cartes très basiques. Encore une fois, nos milieux sont tous enfermés ensemble. Ce que nous pourrions faire parce que nous voulons que cela s'appelle la section tout comme une seule chose. Si nous commençons à déplacer cela, vous verrez maintenant qu'il suffit de déplacer des parties aléatoires et pas en même temps. Alors, assurez-vous que j'ai débloqué. Ensuite, ce que nous pouvons faire maintenant, c'est tout sélectionner et nous assurer que tout est sélectionné ensemble. Et ensuite, si vous cliquez sur Control G ou Commande G, il s'agit désormais d'éléments groupés ou de tous ces éléments. Et vous pouvez voir dans mon panneau de calques ici, tous ces éléments se trouvent dans son propre dossier , communément appelé Groupe 1. évident que je veux le faire, c'est renommer cette simple section de carte. Mais encore une fois, ce que nous allons aborder davantage, nous arriverons à notre panneau Calques un peu plus tard. Alors, comment dupliquer cela ? Ce que vous voudriez évidemment aujourd'hui plutôt qu'un genre de lecteur. Et là encore, c'est essentiellement copier ce que vous avez ici. Et peut-être simplement changer le texte et changer l'image. Et si nous voulions dupliquer cela ? Vous ne le voudriez pas. Habituellement, la section des cartes vient au moins, généralement en trois le plus souvent. Ce que vous voudriez peut-être faire est de dupliquer ce seul résumé. Vous pouvez donc le faire en maintenant la touche Alt enfoncée , puis en sélectionnant à nouveau l'élément, puis en lâchant prise, et il aura un duplicata de ce que vous avez, alors vous pourrez le déplacer, si vous le souhaitez. C'est une façon parfaitement raisonnable de le faire. Vous pouvez ensuite le refaire avec celui-ci. Et ensuite, pour les trois, ce que vous pourriez faire, c'est peut-être les regrouper tous ensemble si vous le vouliez. Pour que nous puissions créer tout ça. Vous pouvez également utiliser une grille appelée Repeat Grid. Revenons donc juste un instant. Assurez-vous que nous avons toujours sélectionné. Et vous voyez, cette option a maintenant suggéré pour cette chose exacte que je viens de facturer qui vous montre une section de cartes ici. Et en fait, nous allons faire exactement ce qu'il dit. Donc, si nous cliquons sur Repeat Grid, vous voyez maintenant que de nouvelles icônes sont apparues. Et si nous le faisons maintenant sortir, vous verrez qu'il va automatiquement créer des doublons de ce que nous avons. Et il va continuer, aller et aller aussi loin que vous le faites. Donc, même si vous avez des objets différents dessus, nous le répéterons et commencerons par le début. Mais encore une fois, vous pouvez le faire à la fois sur le côté et vers le bas. Donc, si vous avez une sorte de grille répétée, vous pouvez utiliser cet outil et c'est super CB. Donc, et la principale raison pour laquelle c'est plus utile que de dire, hum, simplement en dupliquant, vous pouvez modifier l'espacement beaucoup plus facilement en utilisant la grille. Si vous deviez le faire en dupliquant des éléments individuels, ce n' est pas aussi facile. Alors qu'en utilisant la grille, vous pouvez les espacer exactement comme vous voulez dire que c'est une chose vraiment utile en matière de conception Web, car la plupart des sites vont avoir des type de section de cartes. C'est extrêmement courant. Et c'est un moyen vraiment utile d' obtenir l'espacement entre tout exactement le même, plutôt que de devoir appliquer manuellement un espacement à chacun d'eux. Cela le fait automatiquement, donc supplanté, paisible. Et puis disons que vous êtes arrivé à lui si vous voulez juste un groupe que vous pouvez faire, votre propre groupe, et ensuite vous obtenez, et évidemment il y a un raccourci clavier pour cela aussi. Encore une fois, notre salon vous revient à la page d'options Shoko du clavier que j'ai incluse dans le matériel de cours. Encore une fois, dites que, espérons-le, la façon dont vous faites cela est logique. Évidemment, si vous allez commencer à changer d'article différent bonbon G. Donc, si vous souhaitez remplacer cette énergie cliquez avec le bouton droit de la souris et cliquez sur Remplacer l'image, puis vous pouvez simplement choisir celle que vous voulez. Et puis c'est une façon beaucoup plus rapide de faire plutôt que d'avoir à créer un autre guerrier. Ce que vous voulez faire est simplement de les dupliquer en EVA, et le meilleur et le plus simple moyen de contrôler l'espacement consiste également à utiliser une grille de répétition. 16. Transformes 3D: Ok, donc dans cette vidéo, on parle transformations en 3D. Donc, quelques choses avant d'entrer dans la 3D, il y a quelques choses que je pense vouloir mentionner une fois de plus, j'ai peut-être mentionné cela brièvement plus tôt, mais vous pouvez en fait faire pivoter des éléments pas d'articles non plus. Nous allons donc nous assurer que tout est sélectionné. Et très simplement, si vous survolez le coin, vous ne pouvez pas simplement faire pivoter des éléments ou des éléments comme vous le souhaitez. Et encore une fois, c'est super facile et je dirai que cela dépendra du type de design que vous avez. Que vous vouliez faire ce genre de choses ou non. Si vous voulez le prendre en degrés, vous pouvez galoper en quelques blocs de 15 si vous regardez celui-ci ici, donc il n'y a que 60, le prochain sera 75 et ainsi de suite. Et c'est juste que cela vous aide juste à obtenir un angle utilisable. Il ne s'agit donc que de tourner des éléments ou des objets. Vous pouvez le faire pour n'importe quoi le lendemain, bien sûr. Et aussi une sorte d'inversion des images vers. Nous ne l'avons pas encore mentionné. Disons donc que vous avez une image et que vous voulez investir, disons que le gars est à gauche, vous pouvez le faire. Vous avez donc ces deux options ici. Donc, si nous cliquons sur celui-ci ici, ça dira basculer horizontalement et je vais un peu inversé pour que les gars passent à gauche. Vous pouvez le faire si tout l'élément, si vous le vouliez. Évidemment, puisque nous avons des textes qui auront l'air très étranges, mais vous pouvez le faire aussi verticalement. Donc, tu pourrais juste dire à l'envers. y a donc des transformations très basiques. Mais maintenant, nous allons examiner la transformation 3D. Donc, ce que nous allons faire, c'est donner un peu plus de vie à cette carte particulière. Et si vous créez un site Web où vous souhaitez avoir une sorte d'effets 3D. C'est peut-être comme ça que tu ferais. Nous veillerons donc à ce qu'il soit sélectionné. Et ensuite, nous cliquerons sur cette icône ici pour la transformation 3D ou est control and tail command nc si vous êtes sur un Mac. Et maintenant, nous avons cette nouvelle icône en tant que jumelage, qui nous permettra de contrôler cela sur les axes X et Y. Donc, si vous contrôlez gauche ou la droite, vous allez le déplacer de manière à ce qu'il rapproche toujours le bord de l'écran. Il se rapproche donc. Sur l'axe X ou Y. Vous pouvez le faire pour la gauche et la droite. Vous pouvez aussi ouvrir, ou bien sûr, un mélange des deux. Et cela vous donne essentiellement une sorte d'effet 3D, que vous voyez encore une fois sur de nombreux sites Web différents. Et c'est un très bel effet qui est très, très utilisable. Vous avez également l'avantage de vous éloigner ou de vous rapprocher de l'écran sur le point d'accès. Encore une fois, en fonction ce que vous avez dans le cadre de votre conception, cela peut ensuite être combiné avec tous les modèles. Vous pouvez le faire pour chaque mot ensemble si vous le vouliez. Disons simplement que nous le récupérons comme il était avant que je commence à déconner. Si je m'en retire, rappelez-vous que si je veux tout faire en même temps, vous pouvez le faire si vous les sélectionnez ensemble, réessayez. Cliquez sur la transformation 3D, et maintenant si nous l'avons fait en une seule, elle le fera. Absolument tous, ce qui est probablement si vous utilisez cela pour une section de col, c'est probablement comme ça que vous le feriez de toute façon. Donc, je l'espère, cela aura du sens. Et encore une fois, vous n'avez pas eu à l'utiliser uniquement pour les images que vous pouvez faire si vous avez un texte. Donc tout cela est super, super utile et c'est une très belle façon de donner vie à vos créations. Il s'agit donc d'un aperçu de base de la façon dont vous pouvez utiliser la transformation 3D dans vos conceptions. 17. Calques: Bon, alors commençons enfin parler de notre panneau de calques. Vous pouvez donc accéder au panneau Calques en cliquant simplement ici sur l'icône Calques. Ou vous pouvez simplement utiliser un raccourci clavier, qui est Control et y. Et maintenant, nous allons le faire apparaître. Et le panneau n'est essentiellement qu'une collection de tous les éléments que vous avez actuellement sur le Canvas sélectionné. Vous pouvez donc les renommer comme vous le souhaitez. Vous pouvez donc simplement appeler cette image. Ou encore, vous pourriez l'avoir, car peut-être en apprendre plus de textes. Ils dépendent en quelque sorte de ce que vous voulez des choses cool. Et c'est une bonne idée de s'habituer à nommer des choses. Parce que si vous voulez revenir en arrière ou trouver quelque chose, c'est quand nous sommes beaucoup plus faciles si vous êtes vraiment parti et que vous avez pris l'effort d' appeler les choses comme elles voulaient être. Maintenant, j'ai tous dégroupé ces articles juste pour l'instant, c'est pourquoi nous en avons tant. Mais si nous pouvons simplement regrouper tous ces éléments ensemble, nous ferons un clic droit de la souris, puis nous allons simplement en groupe. Si vous gardez un œil sur ce panneau ici, vous verrez qu'il est maintenant transformé en dossier. Vous pouvez donc simplement renommer le dossier en carte. Et puis toutes les choses qui se trouvent à l'intérieur se trouveront dans le dossier de cartes. De manière générale, chaque fois que vous créez des designs, vous aurez probablement beaucoup de dossiers différents. Vous n'avez généralement pas tout dégroupé. Très souvent, vous avez tout regroupé, parfois sous forme de composant, ce qui sera la prochaine vidéo. Mais encore une fois, il ne s'agit que d'un aperçu de base de la façon dont vous pouvez utiliser et comment faire référence à votre panneau de calques. Par conséquent, ce que vous pouvez également faire avec ce panneau de calques, c'est contrôler l'ordre dans lequel les choses apparaissent. Je vais donc me débarrasser de deux d'entre eux, juste pour dire que nous en avons un et que ce sera plus facile à suivre. Vous pouvez donc voir que l'élément probablement à l'arrière ou ce qui devrait être le dos est notre type de rectangle principal. Nous allons donc l'envoyer à l'arrière et nous l'enverrons directement à l'arrière. Mais disons que nous voulions avoir cela devant tout. Encore une fois, vous ne voudriez probablement pas le faire. Mais juste pour que je puisse vous montrer, si vous déplacez ce rectangle de la position de Boston ici et immédiatement vers le haut. Vous le verrez maintenant. C'est tout ce que vous êtes maintenant. ne voyez plus rien que vous avez ici. Et si nous le déplaçons un à la fois, vous pouvez voir que chacun de ces éléments va lentement commencer à apparaître comme nous le faisons. C'est donc le rectangle du bouton. Et répète, c'est essentiellement un moyen de contrôler tous les différents éléments votre panneau de calques. De toute évidence, vous pouvez également utiliser des objets comme des sacs Cent et à l'arrière ou à l'avant. Mais vous pouvez également contrôler le même type de choses en utilisant notre panneau Calques. Vous avez également la possibilité de masquer des éléments ici. Vous pouvez donc voir que c'est l'image que nous avons. Vous avez la loi : vous pouvez également le verrouiller du panneau, afin qu'ils ne bougent pas, afin qu'ils ne bougent pas lochies et ne s'éteindront pas pour que vous puissiez le cacher également, ce que nous avons mentionné brièvement plus tôt. Vous pouvez également marquer si Exporter. Il s'agit donc d'une vue d'ensemble de base du panneau Calques. Et encore une fois, vous voulez essayer de nommer des choses qui ont du sens. Encore une fois, plutôt que de simplement avoir un dossier qui indique Groupe 5, vous voulez simplement appeler cela peut-être, peut-être un bloc de carte, quelque chose comme ça. C'est tellement certain que c'est logique pour tout le cerveau. Vous savez donc où trouver certains éléments. Parce qu'en fait, une fois que vous aurez conçu un modèle de page Web , il y aura beaucoup de choses ici. Et plus vous le pouvez, plus vous pouvez facilement naviguer dans votre chemin, mieux c'est. Ok, donc comme un aperçu de base de la façon dont vous pouvez utiliser votre panneau Calques. 18. Actifs et composants: Ok, donc, nous allons maintenant parler des ressources documentaires. Donc, si vous l'avez donné à l'onglet de votre bibliothèque ici, et ensuite, vous serez probablement confronté à ces pages. Ainsi, les bibliothèques, où vous pouvez utiliser plusieurs éléments différents, quelque sorte de projets multiplateformes et interplateformes. Donc, si vous voulez avoir un magasin de différents types d'icônes, peut-être si différents. Les sections sont donc prédéfinies ou des kits d'interface utilisateur même si vous pouvez l'avoir dans votre bibliothèque que vous pouvez ensuite réutiliser. Mais dans cette vidéo, je vais parler des ressources documentaires. C'est donc là que nous avons des refroidisseurs, des styles de personnages, qui sont essentiellement des topographies, en ajoutant des composants et en mangeant toutes les ajoutant des composants et en mangeant campagnes que vous avez créées, nous allons aborder dans un instant. Et puis des vidéos dont nous avons déjà parlé. Commençons par les couleurs d'abord et rendons cet arrière-plan plus sombre. Maintenant, pour une raison particulière. Mais chaque fois que vous commencez à créer un site Web, vous souhaitez généralement avoir un jeu de couleurs à l'esprit. Et supposons que vous vouliez quelque sorte vous référer à cela et dire que ce que nous pourrions faire est simplement créer notre propre palette de couleurs ou qui ont des boîtes AFiB utiliseront la grille de répétition. Et nous en aurons peut-être trois ou quatre. Cela dépendra du nombre de couleurs que vous utilisez pour le projet. Ce que nous pourrions faire, c'est simplement dissocier cette grille et je donnerai à chaque boîte une couleur différente. Il aura donc du noir aux étoiles et il aura lu aussi. Encore une fois, je ne fais que tirer les couleurs au hasard, c'est bleu. Ce n'est pas la meilleure palette de couleurs. Disons donc que c'est notre palette de couleurs. Ce que vous pourriez faire, c'est toujours avoir ces couleurs disponibles et faciles d'accès si nous mettons en évidence toute cette loi ici, entrez dans les couleurs, puis cliquez sur l'icône plus est maintenant créée notre palette de couleurs dans notre Document. Actifs. Et cela signifie que nous pouvons maintenant cliquer dessus pour affecter différents éléments pour dire, disons simplement, faisons notre cap ici. Plutôt que d'être sombre. Allons-le. Light fera le même paragraphe. C'est donc maintenant que les deux lumières feront également notre bouton. Nous allons juste lui donner une frontière pour pouvoir le dire en Amérique, nous allons en fait changer la façon dont cela ressemble. Disons donc avec un arrière-plan plutôt que d'être comme un gris clair, ce qu'il est actuellement. Si les ressources de documents sont ouvertes et que j'appelle un panel, nous pouvons maintenant changer cela par tout ce que nous avons assez facilement en sélectionnant un élément que nous avons ici. Donc, si nous voulions l'avoir comme trou sombre et qu'il soit bleu, vous pourriez le faire. n'est donc qu'une façon d'utiliser différentes couleurs. Vous n'êtes pas obligé de le faire de cette façon. On pourrait aussi dire qu'on l'appelle comme un échantillon. Donc, si vous obtenez la couleur de remplissage, vous pouvez simplement cliquer sur ce bouton ici, puis l'ajouter en tant que swat et vous les aurez également disponibles avec votre sélecteur de couleurs. Je comprends que cela dépend de la façon dont vous voulez faire cela. Et il n'y a pas de bonne ou de mauvaise façon. C'est exactement ce que vous voulez aujourd'hui. Mais c'est bien d'avoir toutes vos couleurs disponibles pour effectuer rapidement différents objets. Comme si, à partir de là, nous avions des styles de personnages. Donc, si nous le verrouillons simplement pour Maman, et si nous sélectionnons et que ce boxer devient plus, vous verrez qu'il est automatiquement attiré dans fermes efférentes que nous utilisons actuellement dans cet élément actuel. Et ils sont maintenant tous disponibles si nous les utilisons, si nous commençons à créer du texte ailleurs. Disons donc que nous lançons une option de texte ici. Et quand je dis que nous commençons à taper quelque chose, et ce ne sera pas nécessairement la police exacte que nous voulons. Disons donc, par exemple, que défaut autre chose, disons quelque chose comme PET serif. Mais nous voulions que ce soit Proxima Nova, nous pouvions le faire. Et il suffit de cliquer sur l'élément de texte que nous avons, puis de cliquer sur Proxima Nova et il changera automatiquement ce que vous avez. Désormais, par défaut, cette version devient sombre. Donc, vous pourriez évidemment avoir une version sombre et claire et cela apparaîtra en janvier pour l'argile si vous créez comme un guide de style avant de commencer, c'est probablement ce que vous faites. Vous avez probablement des versions lumière UV et sombre ici, vous avez donc vos titres ainsi que c'est probablement comme vous le feriez. Vous les stockerez tous dans vos styles de personnages. Ainsi, lorsque vous concevez, vous pouvez rapidement modifier certains éléments et cliquer sur le Fama exact que vous souhaitez utiliser pour n'importe quelle paume en particulier. Composants. Légèrement différent. Parlons donc des plaignants ou de la campagne. Il s'agit essentiellement d'un moyen de réutiliser un article sur l'ensemble de votre site Web. Et vous pouvez simplement copier une instance d'Ariba. C'est donc un peu similaire aux grilles de répétition où si vous avez également gagné un OTC sur toutes ces grilles. Donc, ce que nous allons faire avec cette sélection, nous allons cliquer avec le bouton droit de la souris et cliquer sur Créer des composants. Vous pouvez donc également le faire en cliquant sur le bouton de contrôle k. Et maintenant, vous verrez que nous avons ce type de contour vert. En haut à gauche. Nous avons ce type de greens avec une icône de diamant, ce qui signifie maintenant qu'il s'agit d'un composant, et vous direz que dans notre panneau est répertorié ici, on compare un. Nous allons donc simplement le renommer. Je ne peux pas bloquer. Maintenant, cela signifie que si nous réutilisons cela ou que nous le dupliquons, modifiez n'importe quoi sur un maître faisant campagne sur les autres. Je l'ai donc dupliqué en cliquant sur Alt ou Option si vous êtes sur un Mac et que cela l'a dédié de cette façon. Vous pouvez également simplement le faire glisser depuis la section que vous comparez sur la page et elle l'aura là. Voyez donc si vous pouvez repérer la différence entre ces deux-là. Il y a donc une différence clé, et c'est essentiellement cette icône ici. Nous avons donc cette icône en diamant ici. Nous pouvons voir qu'il n'est pas rempli. Donc, celui-ci ici est rempli qui vous indique essentiellement qu'il s'agit des composants principaux. Cela signifie que tout ce que vous modifiez sur celui-ci affectera toutes les autres instances de votre projet. Donc juste pour prouver que si je change la couleur de remplissage à quelque chose de gris clair, vous verrez qu'elle l'a automatiquement modifiée sur toutes les autres instances que nous avons. Donc, si nous avions plusieurs de ces éléments, ils changeront sur chacun d'eux. Et c'est la même chose pour tous les éléments que vous possédez. C'est donc quelque chose d'utile chez les plaignants. Et cela est particulièrement utile si vous créez des sites Web parce que vous utilisez généralement des couleurs globales, vous n'avez pas beaucoup de couleurs aléatoires ensemble. Généralement, les choses sont créées de la même manière. Où que vous soyez. Maintenant, si vous voulez le remplacer, vous pouvez le faire tant que vous ne modifiez pas le militant principal, vous ne pouvez pas le modifier. Donc, si je devais changer celui-ci, exemple, en double-cliquant. Si je le modifie pour dire peut-être un bleu foncé ou un bleu clair, vous pouvez voir qu'il ne change pas composant maître car c'est notre comparaison master. Il s'agit donc d'une distinction importante si vous souhaitez tout modifier sur toutes les différentes instances de votre site, vous souhaitez affecter le composant maître. Si vous souhaitez le remplacer, vous pouvez simplement sélectionner différentes couleurs sur le, dupliquer, celui que vous possédez. Vous pouvez donc le modifier, mais gardez simplement à l'esprit que quoi que vous changiez sur celui-ci, nous changerons tous. Il s'agit donc d'un aperçu de base des composants. Et je suppose que l'utilisation principale des campagnes sera si vous avez une barre de navigation, évidemment votre barre de navigation et votre pied de page seront les mêmes sur chaque page. C'est donc le genre de chose que vous voulez faire en tant que concurrent et comme exemple. Ok, j'espère que cela aura du sens. Et généralement, pour les kits d'interface utilisateur que vous possédez également, il y aura des composants. Encore une fois, c'est tout simplement super, c'est juste un moyen super utile de garder tout de même et de garder vos couleurs globales. Ok, donc nous sommes presque au point où nous allons commencer notre projet de classe où nous allons réellement créer une page de destination. Mais juste avant d'en arriver là, nous avons quelques autres choses à couvrir, à savoir comment utiliser le prototype et comment utiliser l'option de partage. Donc, ça arrive ensuite. 19. Prototype: Ok, donc, nous allons parler de notre onglet prototype. Donc, pour le démontrer, plutôt que de simplement utiliser des formes aléatoires, je vais vous donner un aperçu de notre projet de classe. Il s'agit donc essentiellement d'un kit d'interface utilisateur gratuit que vous pouvez télécharger gratuitement depuis Adobe XD. Je vais également le fournir dans la description du cours. Et je vais vous montrer comment vous pouvez prototyper et comment rendre votre design interactif. Qu'est-ce que je veux dire par là ? Donc, si nous cliquons sur une demeure et ensuite nous en prévisualisons, il sortira juste un instant sous forme de design. Si nous prévisualisons ceci, vous pouvez le voir pour celui-ci, si nous cliquons sur un bouton ou au moins tournons les bosons, il ira sur cette page spécifique. C'est donc presque comme si le site Web ait été créé à un moindre degré. Donc, si je ne suis pas vraiment lié à tout, donc je ne peux pas revenir au menu principal, mais ce que vous pouvez faire est essentiellement relier saut sur différents plans de travail ensemble en utilisant le prototype optionnel pair. Donc, si nous cliquons dessus maintenant, vous verrez qu' ils en ont déjà configurés. Donc abominable vous montrez comment vous pouvez réellement faire cela. C'est donc notre page d'accueil que nous allons commencer à concevoir les prochaines vidéos. Et évidemment, ce que je voudrais faire est d'attribuer notre menu de navigation et de les lier à une page spécifique. Le lien À propos de nous ici voudrait donc évidemment aller à l'équilibre qui paie les histoires. Nous allons sur la page des magasins ici et ainsi de suite. Donc, en gros, vous ne pouvez pas vraiment le faire avec le lendemain. Vous pouvez lier des pages Web et donner à vos clients une idée de la façon dont j'ai fini site Web pourrait réellement ressembler et ressentir au gris. Il existe des limites quant à la façon dont vous pouvez avoir des animations. Ce n'est pas vraiment possible, le même degré consiste à utiliser quelque chose comme un lecteur Web par exemple. Mais une sorte d'idée de base sur la façon dont nous allons ressembler un site Web et une sorte de connexion ensemble. Maintenant, j'ai cliqué dessus. Ce que je vais faire, c'est simplement cliquer sur cette aiguille d'icône de navigation, il semble que vous puissiez voir toutes ces lignes aléatoires apparaître. Cela peut donc paraître un peu oppressif au début, mais en fait, c'est très, très simple. Comme je l'ai déjà mentionné, si je fais un zoom avant un instant, cette paire de jargon va évidemment sur la page À propos de nous. Et ce qu'ils ont fait ici est lié au montant était onglet. Et vous pouvez voir que la ligne bleue va jusqu'à la page À propos de nous. C'est tout ce que ça fait. Cette ligne bleue vous indique simplement que lorsque vous cliquez sur ce lien, elle vous amènera à cette page. Et toutes ces autres pages que nous avons ici relient deux pages différentes. Donc le prochain, je pense, c'était ce qui était, donc nos histoires disent que l'on peut voir, c'est sauter par-dessus celui-ci ici et ensuite aller à la page des magasins. C'est donc essentiellement ce qui se passe. Donc un super simple, si je clique sur ce bouton que j'ai ici, par exemple, je double-clique, vous verrez alors cette option pour commencer à faire glisser cela. Je vais donc juste reculer un peu et refaire ça. Je vais donc simplement cliquer dessus et je vais le faire glisser vers une page de mon choix. Disons donc que nous voulions aller sur cette page ici, puis la déposer. Vous verrez maintenant que cette ligne bleue est liée à cette page. Donc, si je prévisualise maintenant et clique et que je clique sur ce bouton ici, vous verrez maintenant que cela va faire. Je vais donc le mettre en surbrillance et maintenant disparu, nous allons en fait prévisualiser la page. Et si nous passons à ce bouton que j'ai relié, je pense que c'était celui-là. Vous verrez maintenant qu'il va sur la page à laquelle je l'ai lié. C'est vraiment aussi simple que ça. Et même si cela semble un peu compliqué, mais toujours partout, n'oubliez pas que vous ne faites que lier un certain bouton ou une certaine section à quelque chose d'autre dans un plan de travail différent. C'est vraiment aussi simple que ça. C'est donc super, super facile. Vous avez donc également une option pour savoir comment il agit lorsque vous accédez également à cette page. Vous pouvez donc avoir différentes options de déclenchement. Vous pouvez l'avoir, alors qu'une transition aussi. Vous pouvez donc avoir une sorte de facilité d'entrée ou de sortie. Il y a beaucoup d'options différentes ici que vous pouvez également avoir n'importe quel type de rebond. Le plus courant serait donc probablement une sorte de facilité d'entrée et de sortie facile. Et vous pouvez choisir votre durée en fonction de son apparence. Et je pense qu'ils ont déjà certains d'entre eux ici de toute façon. Donc, si nous prions encore une fois, le Sheri choisira simplement celui-ci. Et nous verrons que lorsque nous cliquons dessus, il s'estompe en quelque sorte dans le suivant. Donc c'est essentiellement quelque chose qu'ils ont mis en place pour faire ça, d' accord, donc j'espère que tout cela a du sens. Encore une fois, la principale chose à retenir est que tout ce que vous faites, même si cela semble un peu compliqué quand vous êtes toujours allé partout, tout ce que vous faites, c'est que vous établissez des liens à partir d'un aéroport vers un autre. Et évidemment, lorsque vous prévisualisez ici, cela vous donnera une idée de ce que beaucoup lorsque vous cliquez sur une autre page, vous avez également différentes options pour l'effet réel de ces choses. Donc, cette ligne que nous avions sélectionnée, vous pouvez voir que nous avons une transition et qu'elle s'y est un peu dissoute. Vous pouvez également avoir son SlideUp. Prévisualisons cela maintenant juste pour vous montrer comment cela fonctionne si je le refais. Donc, celui-ci ici, vous voyez nos diapositives vers le haut. faire, nous avons choisi un autre type d'animation. Encore une fois, c'est un peu, ce n'est pas vraiment important, mais cela vous donne juste un peu de bruit qui affecte le type de changement sur les différents plans de travail. Ok, j'espère que tout cela a du sens. Et dans les prochaines vidéos, nous allons bientôt commencer un projet de cours. Il y a juste une autre chose que je veux couvrir avant que nous commencions à le faire. Et c'est le bouton Partager que nous avons ici où vous pouvez commencer à partager vos créations avec vos clients. 20. Partager des projets: Bon, alors quand je suis allé à la dernière partie avant de commencer à créer une de ces pages. Juste avant de le faire, je veux simplement vous montrer comment partager vos projets avec vos clients. Et c'est super, super important et c'est quelque chose que j' utilise tout le temps parce que c'est la meilleure façon de le faire si vous êtes un développeur de slash designer. Et vous développez également vos sites Web, peut-être sur Webflow. est très important de créer votre site Web dans un logiciel de conception comme XD d' abord et il est beaucoup plus facile changer les choses et d'obtenir des commentaires le jour suivant. C'est pourquoi nous avons cette option Partager ici. Donc, ce que vous pouvez faire, en gros, vous pouvez créer une URL pour n'importe laquelle des différentes options dont vous disposez. Et vous pouvez l'envoyer à vos clients, puis vous pouvez me donner des commentaires sur le design que vous le créez. Donc, juste pour vous montrer comment cela fonctionne, si vous avez quelques options différentes, vous avez une révision de conception, qui est celle que vous utiliserez presque tout le temps. Vous avez également une option de développement. Donc, si vous voulez donner à vos développeurs, développeurs et que vous voulez simplement transporter une partie du CSS vers eux. Vous pouvez le faire. Qu'ils l'utilisent ou non. Je ne sais pas par expérience qu'ils sont souvent, mais sans cela, vous voyez quelque chose ? Personnellement, je crée tous mes sites Web dans Webflow de toute façon, donc je n'ai pas vraiment besoin de l'option. L'option de présentation est un peu comme une version plein écran où il n'y a aucune sorte d'options de rétroaction de conception et de personnalisation, vous pouvez un type de client, ils veulent qu'ils posent des pièces ou non. Mais le principal que vous allez utiliser est la revue de conception. Donc, si nous cliquons dessus, vous pouvez choisir qui a accès à ce lien. Donc, s'il y a quelqu'un avec le lien, il peut y accéder. Vous pouvez également spécifier certainement certaines personnes invitées. Donc, si vous avez une sorte de suite C de PP1, envoyez-le à, vous ne pouvez l'envoyer qu'à quelques personnes sélectionnées et seules elles y auront accès. Et donc, ce que nous allons faire, c'est garder tout le monde avec le lien. Et nous allons mettre à jour le lien. Et une fois que le chargement est terminé, une fois que nous avons cliqué dessus, il nous amènera vers une URL. Web. Les clients peuvent commencer à laisser des commentaires. Disons que c'est le lien en cours d'ouverture. Et vous verrez fondamentalement autorise les commentaires. C'est donc super CB. Donc, et je le fais toujours généralement. Je commence très rarement à développer tout de suite, en recevant des commentaires sur votre conception. Et ce qui est vraiment génial, c'est cette option, soit du foin, qui consiste à placer une épingle pour qu'ils puissent faire des commentaires, dire ce qu'ils veulent. Je n'aime pas ça. Ils peuvent vous dire que je n'aime pas ça. Ou s'ils l'aiment, ils peuvent vous dire qu'ils le font. Mais aussi CP pour qu'ils puissent faire un commentaire ou placer les épingles. Je voudrais juste taper quelque chose. Donc si je mets si je ne peux pas épeler, donc mes marques devant mon visage. Ils peuvent donc écrire ce commentaire, qui n'est pas très utile. Ensuite, ils peuvent également placer une épingle pour vous dire ce qu'ils n'aiment pas réellement. Disons donc le texte et la personne ne sont pas tout à fait centralisés, ce qui ne l'est pas. Ils peuvent le placer là, dire que je n'ai pas aimé ça et le soumettre. Et quand vous entrerez dans ce document, vous verrez ce qu'ils ont dit, lequel est génial. Il est disponible pour une ALS. Clients. Dites-vous immédiatement quel est le problème. S'ils en ont un, ils peuvent vous demander lire ou d'écrire le plus de détails possible. Ne lui faites pas dire des trucs comme ça, ce qui n'est pas utile, encore une fois pour expliquer pourquoi ils n'aiment pas quelque chose. C'est pourquoi je dis toujours à mes clients d'être brutaux. Si vous n'aimez pas quelque chose, dites-moi exactement. Le problème, c'est que dites-moi comment vous pensez que cela peut être résolu si vous avez une idée en tête. Et peu importe ce qu'ils n'aiment pas, il est vraiment utile d'avoir commentaires immédiats sur quoi que ce soit. Et vous pouvez placer autant d'épingles que vous le souhaitez où vous le souhaitez. Écrivez un commentaire qui s'appuie sur cela. De toute évidence, si vous avez beaucoup de gens qui regardent cela, ils peuvent tous ajouter leurs propres commentaires. Vous devrez faire défiler toute une liste de commentaires lors de l'entrelacement passer par Troy. C'est la raison pour laquelle beaucoup de gens sont encouragés, car cinq ou six personnes laissent toutes des commentaires en même temps. Ils ne seront pas tous d'accord entre eux et cela peut être un cauchemar. Je vais donc essayer de me limiter à une ou deux personnes pour vous donner des commentaires. Juste les gens qui comptent vraiment , alors que les décideurs, c'est généralement pour ça que j'essaie de m'y joindre. Disons que c'est un aperçu de base de la façon dont vous pouvez partager votre travail avec votre client. Encore une fois, je pense que c'est peut-être ma partie préférée de x jour quand il s'agit, vous savez, de l'utilité pour moi et mon entreprise. Au préalable, vous deviez envoyer le designer non plus. Et vous devrez alors simplement discuter avec eux et essayer de vous décrire quelque chose. Et parce qu'ils ne sont pas des designers ou des développeurs, ils ne savent pas ce que sont toujours les choses parce qu'ils ne savaient pas nécessairement c'est une barre de navigation ou que je sais toujours que c'est l'action Harris. Donc cette option pour simplement mettre des épingles dans les choses. Et vous pouvez aussi des gens aussi. Ainsi, vous pouvez mentionner et les gens, si vous avez plusieurs designers, ils peuvent dire qu'ils peuvent en quelque sorte vous gérer dans le commentaire. Mais il s'agit d'un CPC, qui sera sorte de une sorte de sauvetage pour faire avancer les choses rapidement lorsque vous commencerez présenter votre chemin à vos clients. 21. Introduction au projet de classe: Ok, très bien fait pour être allé aussi loin. J'espère que tout ce qui concerne le COVID à ce stade a un sens. Encore une fois, regardez ces vidéos autant que nécessaire pour vous familiariser tout, arrêter et faire des endroits. Assurez-vous de pratiquer certaines de ces choses dont nous parlons réellement dans le cours. Parce que cette prochaine série de vidéos est l'endroit où nous allons commencer à créer une page de destination d' un kit d'interface utilisateur populaire et que vous pouvez télécharger gratuitement dans Adobe XD. Donc, ce que nous allons faire pour ce projet de classe, c'est essentiellement créer la version de bureau d'un site Web. Ce kit d'interface utilisateur a donc toutes les tailles d'écran différentes. Oh, se développe. Mais ce que vous allez créer, c'est la vue du bureau. Évidemment, si vous voulez créer la tablette et la petite entreprise pour vous aussi, vous pouvez le faire. Et si vous voulez le partager avec la classe sur Skillshare, ce serait génial. Montrez-nous ce que vous avez fait. Sinon, si vous ne voulez pas suivre ce que nous allons faire pour la prochaine partie, vous pouvez commencer à créer peut-être votre propre type de conception Web. Et si vous souhaitez partager cela avec la classe, soyez maintenant génial. Ok, donc la prochaine étape est consacrée à un projet de classe, et nous commencerons par la toute première vidéo où nous donnerons un aperçu de la page de destination que nous allons concevoir. 22. Aperçu du projet de cours: Ok, donc nous approchons maintenant du point où nous sommes prêts à commencer notre projet de classe, où ce que vous allez faire est de recréer la page d'accueil de ce kit d'interface utilisateur ou vous pouvez le télécharger gratuitement dans XD. Maintenant, je vais également vous fournir une sorte de version de ceci. En fait, j'ai une sorte de point de départ pour vous tous prêts à partir, rendre la vie un peu plus facile. Mais juste avant que nous ne commencions à les faire, je veux juste vous montrer comment cela s'est passé en quelque sorte. Encore une fois, tout cela est gratuit le lendemain, mais vous pouvez voir que nous avons beaucoup de choses à faire. Nous disposons donc d'une version pour ordinateur de bureau , d'une version tablette et d'une version mobile. En général, si vous créez un site Web ou que vous le présentez à un client, il va vouloir voir différentes versions. Je ne fais pas toujours une version tablette si je suis honnête, pas toujours. La raison en est que la plupart du temps ce que vous faites est de réduire les colonnes. Donc, si je vous montre la page d'accueil sur le bureau, vous pouvez voir ici. Maintenant, nous avons en quelque sorte quatre colonnes. Il y a trois colonnes. Sur tablette, il est très probable que tout ce que vous voulez faire est peut-être d'avoir le genre de deux à la suite. Vous en avez donc deux en quelque sorte jusqu'en dessous. Cela ne ferait probablement que descendre à un âge. Si nous faisons un zoom arrière et que nous regardons ce qu'ils ont fait, on dirait que c'est exactement ce qu'ils ont fait. Ils ont donc deux colonnes, placez deux rangées cette fois. Donc, parfois, cela ne vaut pas nécessairement la peine de faire des comprimés aussi. C'est à vous de décider si vous avez un design très inhabituel qui sera la moitié moins modifié. Spécifiquement pour chaque appareil il peut y avoir cela, mais je dois avouer je ne fais pas toujours de tablette personnellement, mais c'est juste une chose personnelle pour moi. C'est donc à vous de décider. Mais je fais toujours une version mobile. Donc, juste pour vous montrer un peu plus de maisons avaient été aménagées, évidemment, vous avez toutes les différentes pages ici et j'aurais dû étiqueter quelle partie est laquelle. Ici, nous avons le kit d'interface utilisateur, qui est essentiellement toute la typographie utilisée. Une somme de tous les IV de taille différente. Alors, c'est ce que tu veux, c'est ce que tu veux ? Elle a en quelque sorte mis en place votre design principal et vous savez un peu et décidé avec quoi vous travaillez. Vous ne commenceriez pas toujours comme ça. Et c'est quelque chose que vous faites une fois que vous avez mis en place votre design. Ils ont également ici une bibliothèque de composants. C'est donc particulièrement utile si, disons, vous présentez ce travail à un client et qu'il s'en va un peu, eh bien, nous n'aimons pas ça là. Pouvons-nous changer ça ou attendre, oh, peut-on mettre ce bout de cette page ici ? d'avoir une sorte de bibliothèque de composants triée facilite grandement ce processus. C'est donc une chose très utile à avoir. Alors jetez un coup d'œil à cela vous-même pour voir comment le présenter. C'est un très, très bon exemple et quelque chose qui vaut la peine d' copié en ce qui concerne la façon dont vous commenceriez vous-même un processus de conception. Il s'agit donc d'un aperçu de base de ce projet et de ce que nous allons faire ensuite. Je vais recréer cette page d'accueil ici du début à la fin. Je vais vous expliquer comment faire ça. Nous allons résister à la tentation d'utiliser n'importe quel composant. Je vais donc faire sur la version Yoga. Je vais supprimer tout cela, vais laisser les actifs ici. Certaines des icônes. Et souvent, ce que nous ferons probablement, c'est juste pour la rapidité de copier le texte que lorsque Mesilla copiera un point, je vais copier des sections sur tout le point de ce cours en vous concevant vous-même. Mais je pense que c'est une bonne façon de commencer, surtout si vous êtes débutant. De cette façon, vous pouvez avoir une idée de quelque chose et vous pouvez y revenir en regardant côte à côte. Donc, c'est le prochain. Et une fois que nous avons fait cela, ce que vous pouvez faire, c'est décider vous-même de recréer la page d'accueil de la version tablette ou de la version mobile. Ensuite, une fois cela fait, vous pouvez partager intégralité de votre projet avec un cours sur Skillshare pour que tout le monde puisse voir s'il y a quelque chose que vous vouliez qu' ABA soit vraiment génial si vous le faisiez. Ok, donc ensuite, nous allons commencer notre projet de classe, et nous allons commencer par créer notre Napa. 23. Navbar: Bienvenue dans la toute première partie de nos projets de classe. Pour le réitérer, la première partie de notre projet de classe est garantie créer ou de créer la page d'accueil de ce kit d'interface utilisateur à partir de XD. La version que j'ai pour vous ici est une version modifiée que j' ai débarrassée de tous les composants juste pour éliminer la tentation de tricher. toute évidence, le but est que vous allez recréer cela simplement regardant ce qu'ils ont élevé au Canada dans votre propre affaire. Tout au long de ce que je fais moi-même, je vais taper certaines choses moi-même, mais pour plus de rapidité, je vais copier et coller le calque de texte juste pour ne pas vous ennuyer en me regardant tout taper. Les points de ce cours sont donc simplement de vous montrer comment structurer les choses, comment utiliser tous les différents outils. Il est évident que le simple fait de taper des choses n'est pas particulièrement intéressé. Surveillez le réchauffeur pendant 20 minutes. Donc, ok, ce que nous devons faire avant tout c'est commencer par créer notre barre de navigation. J'espère donc avoir un sens sur ce que vous allez utiliser notre outil rectangle pour nous donner la forme. Nous garantissons ensuite les maladies graves qui attaquent le logo et les liens de navigation. Maintenant, s'ils ont également créé un bouton, la première chose que nous comptions aujourd'hui, donc j'ai préparé le canevas juste commencer est exactement la même que celle-ci. Nous allons également utiliser ce système de grille, juste parce que c'est un peu logique plutôt que moi essayer de faire quelque chose d'intelligent ou de différent. Parfois, je n'utilise qu'un gros bloc de couleurs. Si vous travaillez dans un grade particulier comme il semble l'être. Peut-être juste pour ce cours, nous allons en fait garder la même chose. Vous dites. Cela n'est pas déroutant pour vous. Bon, alors commençons. Tout d'abord, débarrassons-nous de nos grilles ou de notre apostrophe de contrôle des changements. Et nous allons lancer notre premier rectangle, qui sera notre élément de barre de navigation. Je vais donc dessiner un rectangle. Et pour ce qui est de la hauteur, vous pouvez copier exactement si vous le souhaitez ou vous pouvez en quelque sorte être votre inversion. Je pense que je vais m'y tenir assez rigidement, juste pour qu'il soit exactement comme il se doit. Ils vont se débarrasser de la bordure pour ce triangle droit. C'est une fonctionnalité que j'espère qu'ils introduisent là où elle ne vient pas automatiquement avec le tableau parce que c'est douloureux. Donc, en ce qui concerne les hauteurs, vous pouvez voir ici, la forêt a 128, n'est pas tout à fait là, donc elle n'est que 95, donc nous allons simplement copier cela. C'est donc un 128 et je vais automatiquement le faire de la même taille. Ensuite, nous allons avoir notre Lego. Encore une fois, ce que vous feriez si vous sioniste pour la première fois, c'est avec votre option de texte ici et commencez à taper si le Lego est juste pour la vitesse. Je vais juste copier ce que nous avons ici. Disons qu'on va juste s'en débarrasser un instant. Si j'ai juste foiré ça, débarrasse-toi de ça. Je vais donc copier ça. Commandez C ou Control C à partir de Windows. Je vais juste dire ceux de Windows juste pour l'espace. De toute évidence. Cela dépend de ce que vous utilisez. J'utilise PC pour cela ou Windows. Mettons ça en place maintenant. Reprenons donc notre grille un instant et vous pouvez voir ce qu'ils font ici, alignant sur l'intérieur de cette colonne ici. Nous allons donc simplement copier ce qu'ils font. Alors, veillons à ce que nous ayons la même chose qu'eux. Donc, pour le moment, c'est sur le mauvais plan. Alors, allons le faire ici. Et vous pouvez voir qu'il s'accroche automatiquement à la première place pour zoomer légèrement. Vous pouvez voir ici que c'est aussi là que nos conteneurs. Donc, si nous nous assurons qu'il s'enclenche au milieu, mesurez la même distance que vous pouvez y voir . C'est à peu près sur ça. Ok, donc nous allons laisser cette grille en place juste pour le moment. Je vais en fait au premier avant que quoi que ce soit d'autre maintenant verrouille notre élément de barre de navigation en place. Parce que dans un instant, nous allons devoir commencer à utiliser nos liens de navigation et mon bouton. Et si nous commençons à essayer de les éloigner de la même distance, nous ne voulons pas que cette barre de navigation se déplace. Ce que nous pouvons faire, c'est soit cliquer avec le bouton droit de la souris et cliquer sur Verrouiller, soit vous pouvez simplement utiliser le raccourci clavier, qui est Control et L. Alors verrouillons cela en place. Et maintenant, chaque fois que nous déplacons quelque chose, nous ne sommes pas accidentellement déplacés cet élément napa n'importe où dans une position. Commençons maintenant à le faire. Parce que je pense que nous avons nos liaisons de navigation la même distance de notre bouton que nous avons ici. Si nous maintenons Alt enfoncé, vous verrez que la distance de cette personne est de 28. Et il en va de même pour nos liens de navigation. Donc, juste pour faciliter un peu la vie, je vais tout d'abord créer ce bouton. Et ensuite, nous ferons les liens de navigation suite car ce bouton est en ligne jusqu'à la fin de cette petite colonne ici. Commençons donc par le faire. Donc pour faire ce fond, ce que nous allons faire, c'est que nous utiliserons réellement, nous utilisons toujours un outil rectangle, même si c'est un peu arrondi sur les côtés, nous allons simplement arrondir sur les bords de notre rectangle. Ce que je dis, c'est que nous allons faire. Disons que nous voulons vraiment qu'il soit aligné sur celui-ci ici. Commençons donc par le faire. Nous avons donc fait un peu à peu près au départ. Et nous ne voulons pas avoir de frontières. Et ce que nous voulons faire maintenant, encore une fois, j'appuie vraiment beaucoup sur V. N'oubliez pas que chaque fois que vous souhaitez revenir à votre outil de sélection, cliquez simplement sur la lettre V et débarrassez-vous maintenant de n'importe quel type d'outil que vous utilisez. Nous n'avions pas cela avec une couleur d'arrière-plan, donc nous voulons l'avoir comme couleur verte, et nous voulons également lui donner un rayon. Ce que vous pouvez faire en tirant simplement comme ça. Ok, donc tout va bien comme notre bouton enfoncé et c'est à peu près aligné. la même façon. Celui-là l'est. Combien ça va ? C'est le cas, d'accord, donc ça va littéralement d'un bout à l'autre sur ces deux colonnes ici, ce qui est tout à fait très bien. C'est donc tout bien. En fait, nous allons simplement copier et coller cet élément de texte pour plus de facilité et de rapidité. Nous allons donc le faire maintenant et nous allons le coller à l'intérieur. Et nous voulons que cela soit plus au centre. On y va, il meurt maintenant à peu près. De plus, ce que nous voulons faire maintenant, c'est faire de ce Poston un composant. Parce que nous allons l'utiliser un peu tout au long de cette conception dira qu' il apparaîtra au moins quelques fois de plus ici pour le Read More, ça ne sert à rien de recréer une personne. à chaque fois. Il se peut aussi bien que le seul bouton soit terminé, puis changer le texte comme sur quand vous en avez besoin. Alors, faisons-le. Ce que nous allons faire pour cela, c'est que nous allons simplement sélectionner les deux éléments ensemble. Et si nous cliquons à nouveau avec le bouton droit, vous pouvez simplement utiliser des raccourcis clavier, mais pour que vous puissiez le voir plus facilement, je vais parfois utiliser le clic droit. Ce que nous pouvons faire maintenant, c'est créer un composant qui sera toujours le même. Et si vous voulez réutiliser cela et vous pouvez le faire bien sûr, mais s'il est alors le, alors il s'agit essentiellement de vos composants principaux. est donc ce qu'il sera toujours et si vous voulez en changer un, donc si je dis que je n'ai pas tout compris, je n'ai pas changé le texte de celui-ci. Cela n'affectera pas le maître en comparant simplement parce que c'est le genre de l'original. Donc, si vous souhaitez modifier les boutons plus tard, dites des choses comme Read More, que vous avez ici. Vous pouvez utiliser la même chose, mais ensuite vous devez à ceux que vous possédez. C'est ainsi que nous allons le faire. Débarrasse-toi de ça pour l'instant. D'accord, et c'est un peu la première partie terminée. Ensuite, nous devons activer notre texte pour le menu de navigation via les liens de navigation. Je vais juste copier ça juste pour la vitesse. Ce n'est pas du tout particulièrement aligné. Pourquoi cela semble un peu, mais nous allons juste l'aligner sur cette haie de colonne intérieure, c'est peut-être pour aider avec mon ACD. Alors, ce que nous allons faire alors, et il suffit de coller ça ici. Et en fait, ce que nous allons faire au départ c'est simplement parler de savoir s'il faut utiliser votre note de paye ou non. Maintenant, il y a deux façons d'aborder cette question. Nous pourrions utiliser des grilles de répétition si nous le faisions et que vous cliquez dessus, vous verrez que nous pouvons maintenant en quelque sorte faire une section. Ensuite, nous pourrons utiliser l'espacement comme tout le monde le dit. Le problème, bien sûr, c'est que lorsque nous commencerons à changer le texte, cela va changer un peu cela. Donc, même si nous avons utilisé l'espacement est maintenant carnivores QF et il ne va pas s'adapter correctement. Il y a donc un argument pour ne pas faire cela. Ce que vous pourriez faire très simplement, c'est simplement coller votre texte à nouveau. Ensuite, vous pouvez simplement dupliquer chacun d'eux à la fois. Bien sûr. Ils sont à la même distance quand elle ne voulait pas. C'est pourquoi je pense que nous pouvons créer des entités pour l'instant, mais vous pourriez tout aussi facilement faciliter la grille de répétition. Le premier, c'est les videurs. Ensuite, nous avons posé des histoires dans les nouvelles et les événements. En fait, tapez ça comme un panier c'est très bien. Et puis c'était nos histoires. Ne vous excusez pas, continuez à faire des erreurs d'orthographe. J'ai un microphone massif devant mon visage. Je peux voir mon clavier. Et puis je veux simplement les déplacer un peu. Ensuite, nous allons simplement dupliquer cela en maintenant la touche Alt enfoncée et en le faisant glisser. Et je vais le dupliquer. Ensuite, nous avons des nouvelles et des événements. Nouvelles et événements. Dites, en fait, je veux toujours être capitalisé aussi. Faisons donc en sorte que nous puissions le faire. Donc, plutôt que de les avoir toutes en minuscules, nous allons donc avoir des majuscules comme ça. Et ces derniers vont déjà bien. Encore une fois, nous aurions pu utiliser des bulles de grille répétées, je pense que je vais juste effacer mon œil. Je vais donc l'aligner sur celui-ci, je pense. Et nous aurons chacun d' eux sur une colonne à part entière. Et vous pouvez voir que ces lignes apparaissent, ce qui me permet de savoir qu'elles sont parfaitement alignées. Encore une fois, celui-ci, nous n'allons probablement pas le faire par colonnes, car il est évident que certains de ces éléments sont plus longs que d'autres. Donc, ce que nous allons économiser, vous n'avez qu'à choisir un montant. Donc je pense que ce qu'ils ont fait était, je pense que votre diapositive de 28 pixels en termes d'espacement. Ok, donc en termes d'alignement, moins simplement par échec, donc je pense que c'était quelque chose comme 24 pixels d'un bord à l'autre. Donc, si c'est le cas, nous pouvons réellement nous débarrasser de la grille pendant un instant. Et nous allons faire la distance là bas. Il a donc écrit pour mesurer la distance. Vous pouvez maintenir la touche Alt ou Option enfoncée sur un Mac. Et il vous indiquera à quel point vous êtes éloigné de l'objet le plus proche. C'est donc 25 ans. Faisons en sorte que c'est la même chose pour tous. C'est donc 25 ans aussi. Eh bien, mon spectacle est lié, donc il est également 25 et nous y voilà. Donc, tout cela est maintenant parfaitement aligné. Notre grille. Nous sommes donc tous au milieu. Si vous souhaitez effectuer des vérifications au milieu, si vous sélectionnez tous les éléments ensemble, vous voudrez peut-être en faire un groupe. Si nous le voulions en tant que groupe, vous pouvez cliquer avec le bouton droit de la souris, puis cliquer simplement sur grep. Et de cette façon, si vous vouliez vous assurer que tout était au centre, vous pourriez le faire de cette façon, vous savez, pour un fait, est parfaitement aligné de cette façon. Alors, repassons ça à nouveau. Assurez-vous qu'il se trouve au centre de ce qu'il est. Ok, ça a l'air plutôt bien. D'accord, nous allons nous débarrasser de notre grille un instant. Et maintenant, nous pouvons voir que nous avons peu près exactement la même chose qui se passe ici. Et c'est à peu près notre barre de navigation faite. Alors, à l'arrêt suivant, nous allons chercher à deviner notre sorte de section de héros salée et tous les atouts pour cela. Oh, je suis arrivé sur le côté gauche. Vous pouvez donc littéralement glisser sur votre image et l'installer. Ok, donc ensuite, nous avons notre section des héros. 24. Section de héros: Ok, donc la prochaine fois, nous avons notre section des héros aujourd'hui. Celui-ci sera donc relativement facile. Tout ce que nous devons faire est de mettre en place cette image et, en fin de compte, de créer simplement une forme rectangulaire pour le type de zone de texte. Et aussi si ce genre de logique n'est pas vraiment un bouton, juste un peu comme une boîte de sous-total. Une fois encore. Commençons donc. Donc, tout d'abord, nous allons faire glisser cette image maintenant, c'est que nous disons que cette image particulière cette image particulière a déjà été mise à l'échelle correctement. Il ne s'agit donc pas de tout ce que nous devons faire pour que cela fonctionne. C'est un peu facile. De manière générale, vos images ne vont pas parfaitement s'adapter. Il vous faudrait donc les faire glisser sur une forme comme nous l'avons fait plus tôt dans le cours. Je les associe en quelque sorte à une forme , puis vous les déplacez comme vous le souhaitez. Vous pouvez voir ici que c'est déjà en train de se produire et cela a déjà été une masse à une forme. Nous le referons dans une minute. Nous pouvons redimensionner quelque chose. Mais encore une fois, défiez-vous, faites prendre conscience que c'est pourquoi cela convient si bien. C'est déjà fait. Les autres sur lesquels nous allons venir n'avaient pas été finis. Donc, nous y arriverons. Ok, donc cette partie est super simple, elle était déjà parfaitement en place. Et à côté de planifier ce que nous allons faire. Ce que j'aime toujours faire, c'est verrouiller cet arrière-plan en place. Chaque fois que vous avez une sorte d' arrière-plan que vous n'avez pas de choses au-dessus de son médaillon de cette façon, vous ne pouvez pas commencer accidentellement déplacer car si vous commencez à déplacer des choses, vous allez cliquez inévitablement accidentellement dessus. Et donc les médias, ce que vous ne voulez bien sûr pas faire. D'abord, je pense que nous allons créer ce genre de texte et de titre de héros. Tout d'abord, mettons notre grille en marche et nous verrons comment ils le font. Ils vont donc l'aligner à nouveau sur celui-ci ici. Et il traverse deux bars là-bas. Donc, nous allons faire le même genre de choses, n'est-ce pas ? Sortons donc notre outil de rectangle et nous libérerons simplement le formulaire 246. Et puis quelque chose comme ça. Encore une fois, je ne vais pas nécessairement copier exactement. Nous nous rapprocherons le plus possible en le regardant. Si vous voulez être super exact, la taille exacte qu'ils font, vous pouvez dire, eh bien, n'est pas vraiment pour ça que nous faisons cela. S'il le faisait avant, c'était de s'habituer à utiliser XD, mais si vous voulez atteindre exactement la même hauteur de bonbons, donc 416 McCann, juste pour l'enfer. Pourquoi pas ? Faisons ça. D'accord. Donc, avec cela, ne nous assurerons que c'est au milieu maintenant. Et il y a deux lignes qui me disent ça. Encore une fois, parce que nous allons maintenant commencer à mettre les choses au-dessus de tout cela. Je vais en fait verrouiller ça en place aussi. Il s'agira donc de Control L ou de Commande L, ou vous pouvez simplement cliquer avec le bouton droit et le verrouiller de cette façon. Encore une fois, la raison du gaspillage est que nous allons mettre n'importe quoi, mais chaque fois que vous mettez quelque chose sur quelque chose, vous ne voulez pas avoir le danger de déplacer des choses comme des zombies, comme ça, parce que c'est ennuyeux. Bon, revenons-y. Bien, alors assurez-vous qu'il est verrouillé. Et vous savez toujours qu'il y a beaucoup de choses en faisant apparaître ce symbole. D'accord, donc d'abord, nous allons faire part de nos textes. Je vais donc simplement copier et coller celui-ci non plus. Je vais commencer à taper certains d'entre eux. Mais je pense que celui-ci se mettrait tel quel. Et ensuite, pour ce texte également, je pense que nous allons simplement copier et coller celui-ci sur celui-ci, nous ferons différemment. Donc, c'est coller ça dessus. Et encore une fois, assurez-vous de ce qui est Central. Ok, donc c'est très bien. Donc, avec ce prochain, plutôt que moi, je voulais juste vous montrer ce qui se passerait dans vraie vie si vous faisiez cela. Nous pensons donc que cela est particulièrement aligné, n'importe quoi en tant que tel. Nous allons donc juste, en regardant les yeux, il va se débarrasser de la couche de notre grille maintenant. Commençons donc à taper. Donc, par défaut, si je commence à taper quelque chose en ce moment, c'est le mauvais type de police pour cela. Nous devons donc nous assurer de trouver le bon. Maintenant, la façon dont ils ont présenté cela, telle sorte qu'il est relativement facile de vous voir un G9 avec cela, cela vous montre en fait que la police aussi dans une certaine mesure. Vous pouvez donc avoir un échec. Finalement, utilisez beaucoup de tailles de police différentes. C'est donc un peu plus complexe que Bothell. Je fais ça juste pour vous montrer, juste voir à quoi vous pourriez être confronté si vous créez cela vous-même. De toute évidence, vous pourriez le faire d'une manière que vous comprendriez mieux. Mais juste pour que vous sachiez, si la vitesse est réellement celle que nous voulons. Donc, tout d'abord, tapez ça. Donc, si vous allez sur l'outil Ajouter du texte et nous allons simplement taper ici pour que nous puissions le dire pour l'instant, et nous le ferons par hashtag et arrêterons le changement climatique. Et ce que nous voulons faire maintenant, c'est le faire ici. Et nous voulons également nous assurer qu'il s' agit de cette police particulière. Et par les gens, nous utilisons nos styles de personnages dans nos ressources documentaires. Il est automatiquement changé pour ainsi de nouveau, le processeur, donc d'accord, et ce que nous allons faire, c'est que nous utiliserons cette option ici, qui est la taille fixe. Et nous allons juste reculer un peu ça et ensuite faire glisser ça vers le bas. Et puis, nous avons à peu près la même chose qu'eux. Donc, nous allons simplement bouger comme je le toucherai. Et nous ferons en sorte que quelque chose comme ça me semble très bien. Bien qu'en fait, il couvre en fait le dos des sujets avait une base faible. Je dois donc admettre pour moi que je vais, si possible, essayer de l'obtenir pour que le texte pas une quantité de tête, c'est-à-dire l'air. Donc je pourrais simplement déverrouiller cela et j'ai un peu de jeu et juste changer les efforts sont légèrement, je pourrais simplement bouger partout où un peu plus. Juste pour que nous ayons un peu plus de place pour jouer ou peut-être montrer que c'est comme ça aussi. Donc, je vais juste toucher un jour. Et oui, je pense que nous sommes juste en retrait un peu plus. Encore une fois, je n'ai que légèrement changé. Encore une fois, c'est exactement la même chose que ce qu'ils ont fait. Mais encore une fois, cela vous donne juste un peu plus d'espace respiratoire. Encore une fois, cela va servir de contrat quand vous allez dans des tailles d'écran différentes, mais généralement vous ne voulez pas de textes, oh, trop de tête des gens si possible. D'accord. Donc c'est à peu près ce que je n'ai pas toujours à faire maintenant, c'est d'obtenir ce pouvoir ici. Nous allons donc créer une autre forme de rectangle ici. Jetons donc un coup d'œil à la grille et nous verrons ce qu'ils apprennent. Il faut le Seigneur, ils l'alignent sur le bord de cette première barre, passant par, à mi-chemin de la suivante. Nous allons donc faire une chose similaire, je pense. Mettons donc notre outil rectangle et commençons à partir de là. chose comme ça. Je pense. Assurez-vous qu'il est centré. Et nous allons avoir ça avec neuf plus larges. Et nous aurons la couleur de remplissage et ce genre de bleu foncé. Et puis, juste pour plus de vitesse, je vais simplement copier et coller cet élément de texte. Assurez-vous qu'il est sélectionné. Collez ça et assurez-vous qu'il se trouve au centre. Donc, il suffit de me débarrasser de ma grille juste pour que tu puisses mieux voir ça. Encore une fois, vous voyez ce réticule là. C'est donc un peu parfaitement aligné. D'accord. Tellement honoré que notre section capillaire soit maintenant terminée. Et ensuite, nous allons passer à la prochaine partie ici, ce qui est en quelque sorte, je suppose que vous appeleriez cela la section « prendre des mesures ». 25. Section prendre des mesures: Ok, donc ensuite, nous aurons notre genre de chose que nous appellerons la section « prendre des mesures ». Cela devrait donc être relativement facile aujourd'hui. Tout ce dont nous avons besoin pour obtenir notre outil rectangle pour donner un fond vert. Ensuite, nous allons utiliser la grille de répétition pour créer le genre de quatre colonnes ici. Bon, alors commençons. Nous allons également réutiliser le bouton que nous avons déjà créé pour les cheveux, appelé H0. Je vais littéralement changer le texte pour eux, le mettre là. Donc, ce que nous allons faire au départ, c'est commencer par une sorte de fond vert. D'abord, sortons notre outil rectangle et sortons. Et ensuite, nous allons simplement dessiner ça directement en dessous. Donc, quelque chose comme ça a l'air plutôt bien. Si nous voulions obtenir l'espacement exactement le même, nous pouvons le faire, dit 261. Encore une fois, il ne s'agit pas nécessairement de l'équipe mathématique, qui ne compte que 240, c'est dû à 61. Et ce que nous allons faire, c'est en fait que cela semble un peu différent. Pour que je pense que ce qui se passe ici c' est que ça va en quelque sorte en dessous. C'est donc probablement mieux que nous l'avions auparavant. Ce n'est donc qu'un T4. Et c'est mieux, non ? Donc, tout va bien. Et puis nous allons donner cela qui va se débarrasser de la bordure et nous obtiendrons la couleur de remplissage du vert. Et encore une fois, parce que c'est un arrière-plan et que nous ne voulons pas déplacer cela accidentellement pendant que nous essayons de déplacer les choses, nous allons verrouiller cela en place. Vous contrôlez donc un L à verrouiller. Vous verrez donc que les symboles de blocs sont de nouveau apparus. S'il s'agissait d'un Mac, ce sera Command. Et maintenant, tout va bien. Maintenant, ce que nous faisons, c'est créer un de ces éléments, puis nous utiliserons la grille de répétition pour le faire le long de la ligne. Alors, faisons-le maintenant. Et je pense que je vais juste emprunter celui-là. Et nous allons coller ça en place. Et nous allons monter notre grille juste pour voir où nous en sommes. Nous devons donc nous assurer que cela n'est pas correctement aligné. Il faut donc que ce soit ici. Et nous allons faire le tour du F et maintenant peut-être. Ensuite, nous devons mettre nos textes en place. Donc, Oups, je vais simplement déplacer ça. Encore une fois, nous allons juste emprunter ce poteau ici. Et nous allons copier et coller ça dans. Et nous allons simplement nous assurer que cela s'aligne correctement. Donc cinq avec rembourrage. Donc, tout va bien. Ce que nous allons maintenant faire, c'est sélectionner ces deux éléments ensemble. Nous allons nous débarrasser de notre grille. Une fois encore. Si je devais sélectionner ceci ou essayer faire si je ne l'avais pas verrouillé en place, lorsque j'ai essayé de faire glisser pour le faire, cela aurait déplacé l'arrière-plan. Encore une fois, c'est juste une autre raison pour laquelle vous voulez essayer de verrouiller pourquoi j'ai généralement verrouillé les arrière-plans en place. Ce que j'essaie de faire, ce genre de choses. D'accord. Dites ce que nous allons faire, assurez-vous que tout est ensemble. Vous pouvez le regrouper si vous le souhaitez. Vous n'avez pas besoin de DTTP grain. Nous devons donc cliquer sur Repeat Grid. Et maintenant, nous allons juste traîner ça pour que nous ayons pour vous, d'accord, ça semble plutôt bien. Nous avons récupéré notre grille juste pour un instant et nous veillerons à ce qu'elle soit bien alignée. Et je pense que ce qu' ils ont fait, ils doivent presque aller jusqu'à la fin de ce genre de boss avant dernier. Et on va faire le même genre de choses. Nous allons donc augmenter l'espacement des solides nous puissions faire cela dit quelque chose comme ce point mon booléen dit quelque chose comme ça ressemble à un emprunt semestriel. Donc, comme c'est un peu entre ces balles, c'est peut-être la meilleure façon de s'y prendre. Ok, donc ça a l'air plutôt bien. Et puis ce que nous pouvons faire, c'est soit sur G3P, je le garderai sous t et ensuite nous pourrons entrer dans tous les différents textes que nous avons. Disons que celui-ci va être bénévole. Ensuite, nous devons partager et faire un don. Ajoutons donc cela, puis faisons un don pour le dernier. Ok, donc c'est presque la plupart de cette section ou non. Encore une fois, super, super facile. Utiliser une grille de répétition si vous pouvez imaginer à quoi cela ressemblerait sans elle, soyez une vraie douleur. Donc évidemment, vous auriez dû en faire un, puis en faire un autre. Ou vous pouvez simplement le dupliquer et dire que nous aurions pu maintenir Alt et ensuite le faire comme ça. C'est une façon dont nous aurions pu le faire. Essaye de l'aligner de cette façon. Mais encore une fois, Repeat Grid est tellement rapide et facile, autant plus que vous pouvez déplacer le rembourrage entre les deux. C'est pourquoi j'aime utiliser la grille de répétition autant que possible. Bon, donc encore un peu à faire. Nous devons donc nous assurer que nous avons également ce bouton en place, ce qui est à peu près au centre. Ok, donc en ce qui concerne le bas, ce que nous allons faire, c'est que nous allons simplement dupliquer cela, mais maintenant nous avons ici et en quelque sorte mettre ici et modifier les données textuelles. Donc, si vous aviez déjà trié un composant pour cela, vous pouvez simplement faire glisser depuis une section de composants ici. Je fais ça juste parce que c'est si proche nous pourrions aussi bien le faire et nous pouvons déplacer cela en place, alors nous le voulions. Maintenant, évidemment, pour le moment, vous pouvez voir ici qu'un est en dessous de notre section. Ce que nous voulons, bien sûr, c'est l'avoir au top. Donc, ce que nous voulons aujourd'hui, c'est faire un clic droit, puis nous allons passer sur Bring to Front, et nous y allons. Nous allons donc simplement utiliser nos lignes ici pour nous assurer que tout est parfaitement centré. Et ça m'a l'air plutôt bien. Brillant. Ok, donc juste pour que le Bureau de l' OMS soit plutôt centré, nous allons simplement nous assurer que tout cela est sélectionné et faites-le glisser jusqu'à ce nous obtenions ces lignes nous disent que c'est peu tout les distances sont égales. Et nous y sommes. C'est à peu près notre section « Take Action ». Je ne veux plus de choses aujourd'hui. Nous allons simplement changer le texte. Disons que nous allons changer cela pour passer à l'action. Assurez-vous que les impôts sont dans ce sens, et nous y allons. C'est à peu près tout cela maintenant complètement fait. Ok, donc ensuite, nous avons ce que nous sanctionnons sur ce que nous allons faire ici est également d'utiliser une note P pour créer ce genre de section de code que nous avons ici. 26. Section Ce que nous faisons: Ensuite, nous avons notre section « Ce que nous faisons ». Et comme mentionné précédemment, nous allons utiliser notre grille de répétition pour créer cette section d'appel à trois colonnes. Et évidemment, ce que nous allons faire, c'est juste une sorte de pop dans les images séparées. Et je vais aussi utiliser notre bouton que nous avons en haut ici et nous changeons simplement la zone de texte pour en savoir plus. Encore une fois, Gemini, si vous créez votre propre projet, vous ne feriez probablement que créer ces composants que vous pourrez ensuite faire glisser. Nous avons tous les composants ici, mais nous n'y prêtons pas trop attention pour l'instant. Parce que je veux que vous construisiez tout ça au fur et à mesure. Mais c'est généralement ce que vous feriez. Ou vous pouvez simplement maintenir la touche Alt ou Option enfoncée, puis déf capable et transversale si vous le souhaitez. Cela n'a pas fonctionné. Ce n' est pas encore regroupé. Quoi qu'il en soit, commençons. Nous intégrons donc notre type de section maintenant car nous utiliserons à nouveau notre outil rectangle, je vais m'assurer qu'il s'aligne avec l'air. Et puis notre précédent a examiné l'espacement de cela, ce qui fera 177. Et nous allons également nous débarrasser de la frontière. Oups. Et nous allons lui donner une couleur bleue. Maintenant, il y a une chose que je veux mentionner en fait. Donc, dans cette version particulière, l' espacement n'est pas tout à fait identique. C'est donc quelque chose auquel vous voudrez penser lorsque vous créez votre propre design. En particulier, lorsque vous êtes en train de vous développer, vous voulez penser à un rembourrage cohérent pour chaque section. Et par là, j'entends essentiellement combien d'espace il y a du haut de cette action jusqu'au début du premier élément. De même, du bas du dernier élément au bas de la section, vous voulez généralement essayer d'être aussi cohérent que possible, à moins que ce une raison particulière pour laquelle vous avez une section. plus court qu'un autre. Puisque nous copions cela, ce n'est peut-être pas forcément parfait. Mais en général, vous voulez essayer de le garder cohérent et de l'avoir. C'est donc la même chose sur l'ensemble du site Web. Je ne sais donc pas si celle-ci est terminée, pas complètement, mais c'est ce que nous allons essayer de faire pour le reste des différentes sections que nous avons. D'abord, nous allons faire notre bouton. Donc, ce que nous pouvons très simplement , assurez-vous d'aller sur ce bouton ici, assurez-vous qu'il est sélectionné ensemble. Et si vous maintenez la touche Alt enfoncée, puis faites glisser la souris, vous pouvez créer une autre instance de cet os. Et surtout, ce que nous voulons faire, c'est nous assurer que la frénésie peut voir en ce moment, car nous avons mis ce nouveau type de rectangle pour notre prochaine section. Cela vient en dessous de cela, je clique de nouveau avec le bouton droit de la souris ou vous pouvez utiliser un raccourci clavier. Je fais entrer ça sur les fronts et maintenant tu peux vraiment le voir. Cependant, nous voulons que l'arrière-plan soit blanc et que le texte soit flou. Maintenant, changeons cela. Assurez-vous donc que l'arrière-plan sélectionné en premier, nous aurons ce blanc. Et ensuite, le texte aura juste comme cercle bleu. Donc, tout va bien. Et en ce qui concerne l'espacement, encore une fois, dépend en quelque sorte. Il est différent d'un projet à l'autre. Il n'y a rien d'autre. C'est exact. Et donc, en regardant ce dernier D, quelque chose comme 200, je pense que pour cette section particulière qui pourrait regarder, nous pourrons tous modifier cela une fois que nous l'avons fait afin pouvoir décider de ce que nous voulons que le modèle soit. Encore une fois, même si vous développez cela vous-même, vous pouvez en quelque sorte, quand il s'agit du développement réel, Paul II, vous pouvez décider vous-même de ce que vous voulez qu'il soit. Ok, ensuite, nous allons simplement copier et coller ce texte. Ils doivent juste gagner du temps. Alors copiez-le et collez-le dessus. Et encore une fois, nous allons essayer d'avoir un espacement cohérent entre les éléments t. Nous aurons donc probablement 40 à partir du bouton. Ok, donc tout va bien, non ? Nous devons donc maintenant créer notre carte ici. Donc encore une fois, rencontrez ces outils I Rectangle pour avoir à exécuter les principaux éléments appelés en place. Et ensuite, vous devez également décaler légèrement nos images si lentement. Et nous utiliserons la grille pour essayer de leur trouver beaucoup de choses aussi. D'accord ? Et évidemment, après cela, nous utiliserons notre option Grille de répétition. Tout d'abord, prenons notre outil rectangle. Nous veillerons à ce qu'il soit au moins grossièrement aligné. Ensuite, nous créerons notre carte. Si vous voulez être précis avec la version réalisée, nous pouvons simplement avoir une latence locale ou la largeur de ce 320, afin que nous puissions faire de même. D'accord, et la hauteur est probablement un peu différente. Alors, qu'avons-nous ? Disons que la hauteur est de cinq à huit, donc c'est D, c'est D le même k. Puisque nous faisons 40, 40 c'est 80, puisque cette image va être légèrement plus élevée. Nous allons donc simplement refaire ça. D'accord, donc le premier polygone, aussi quelque chose que j'ai toujours oublié aujourd'hui, c'est que vous voulez vraiment verrouiller ce fond bleu en place pour vous assurer qu'il est sélectionné. Et puis Control et S ou Command. Et maintenant, et maintenant, quand je bouge ça, ça ne va pas bouger l'arrière-plan aussi. Ok, la première image dont nous avons besoin est la façon dont nous avons besoin, donc c'est très bien, alors mettons cela en place maintenant. Nous allons donc aborder notre grille. C'est donc le focus de votre clavier. Donc, ce que nous allons faire ici, c'est que nous allons essayer de le faire correspondre. Ils l'ont fait. Ok, donc on dirait qu'ils étaient alignés sur la section Col. On dirait donc que c'est à mi-chemin de cette balle. Nous ferons donc le même genre de choses alors. Et en fait, c'est plutôt parfait et disons, oui, tout va bien. Et évidemment, lorsque nous répétons, cela fera de même pour chacun d'entre eux. Vous devez vous assurer que vos images ont toutes la même taille. J'ai de la chance de l'avoir parce que je vous ai donné les images du bon côté. Ce ne serait pas un problème pour moi. Mais encore une fois, n'oubliez pas que si vous créez votre propre projet, créez votre propre projet, vous devrez vous assurer que tout est de la bonne taille que vous voulez. Vous pouvez masquer la forme de l'image et oui, vous pouvez modifier la façon dont vous le souhaitez. Quoi qu'il en soit, disons que c'est très bien. Maintenant, passons simplement à notre texte. Nous allons donc tous emprunter et coller ça. Et vous pouvez voir que nous alignons le texte sur le bord de cette image. C'est donc ce que nous allons faire pour celui-ci aussi. Les scientifiques Putnam sont de retour. Donc, nous en avons fait 40. Restez à ça. Et encore une fois, nous emprunterons ce texte fictif. Il suffit de copier ça. Il suffit d'aligner ça. Donc, ça a l'air correct. Je le ferai donc. Donc, en ce qui concerne l'espacement au sein de Nessus, vous pouvez le faire de quelques façons. On dirait qu'ils ont un réservoir légèrement plus bas, ce que ma dignification ferait personnellement, je pense que ce que je ferais, c'est le texte soit un peu tranché au titre, puis peut-être avoir le bateau et vers le bas. C'est une sorte d'application personnelle est vraiment un goût personnel. Mais je pense que ce que je vais faire, oui, je pense que je vais le faire. Et puis le bouton, nous allons réutiliser par le haut ici. Nous allons donc simplement zoomer sur notre bouton Faire un don. Assurez-vous que cela soit à nouveau regroupé ensemble. Pour le moment, j'ai cela en tant que composante. Je vais donc simplement maintenir Alt enfoncée et ensuite je vais simplement glisser et cela me permettra d'en créer une copie. De toute évidence, ce que nous allons faire c'est changer légèrement cela. Moi et vous pouvez voir que c' est en fait sous les sanctions. Encore la même chose. Nous devons nous assurer qu'il soit mis en avant pour pouvoir le voir réellement. Et puis on va le faire apparaître en bas ici. Ok, vous pouvez voir que nous avons un problème ici avec cette petite boîte n'est pas tout à fait la fin. C'est lié à l'option que nous avons ici pour la taille fixe. Donc, si nous le remettons ici, vous verrez les cases et décommenterez le bord. Et maintenant, nous pouvons l'aligner beaucoup plus facilement. C'est ainsi que nous allons le faire. Donc, quelque chose comme ça. Je veux essayer de m'assurer que le rembourrage du bas est identique à celui du haut. Et nous allons donc nous assurer que c'est sélectionné. Donc, c'est 40 ans. Nous ferons donc de même pour le bouton. Nous allons donc nous assurer qu'il est à 40 pixels de là. Nous allons donc simplement augmenter légèrement la situation. Un petit peu plus. Brillant. Ok, donc c'est tout fait. Ok, donc c'est à peu près notre première carte terminée. Et ce que nous allons faire maintenant, c'est d'utiliser notre grille de répétition pour le surmonter. En fait, désolé, l'image n'est pas tout à fait élevée. Cela doit être légèrement élevé. Nous allons donc encore faire de même pour cela, c'est-à-dire s'assurer que tout est bien aligné. Donc, c'est très bien. Et comme nous en avons 40 comme espace et nous ferons la même chose pour l'image. Bon, donc maintenant, nous sommes tous bons. Ce que nous allons maintenant faire, c'est de nous assurer que tout est sélectionné, puis de cliquer sur Grille de répétition. Ensuite, nous pouvons simplement le faire glisser trois fois, puis ajuster l'espacement autant que nous en avons besoin. Nous allons remettre notre grille en place. Je viens de dire que nous pouvons aligner cela correctement et vous pouvez voir que nous ne sommes pas loin en fait. Il suffit donc de faire glisser cet espacement jusqu'à ce qu'il se mette en place. Et c'est maintenant presque parfait. Je pense. Cela ressemble peu près à ce qu'ils ont fait. D'accord. Nous y sommes donc. C'est presque ce qui a été fait. Débarrassez-vous de ma grille. Je vais maintenant remplacer ces images par la bonne. Donc, si vous double-cliquez dessus, désolé si vous cliquez dessus avec le bouton droit de la souris et remplacez l'image. Et si vous avez ces images sur papier d'aluminium, alors à proximité, vous pouvez rapidement les atteindre. Donc, dans ce cas, je l' aurai vraiment fait , alors faisons-le. Nous avons donc ce que c'est et disons que c'est celui-là, je pense. Ou une autre éco-ville. Distrayez-les également de mon comportement, l' utiliserais encore une minute pour faire de cette façon. Donc, je me lance à nouveau, donc nous appellerons Remplacer l'image. Et ensuite, nous avons celui-ci ici. D'accord ? Ce qui remplace ensuite le texte maintenant. Donc, en fait, des attaques similaires manquent de boîte. Donc, comme c'était caché, nous devons simplement lire que c'est un peu en fait. Et assurons donc que nous ayons cela. Encore une fois, c'est la beauté de la grille de répétition car nous devons maintenant modifier quelque chose après coup. Parce que nous avons une grille de répétition, nous pouvons réellement ajuster le et le moment où nous le faisons uniquement pour chacun d'eux. C'est pourquoi il est super, super, super utile à utiliser, c'est coordonner ce que nous avons fait avec la réponse. D'accord, donc tout va bien. Et évidemment, si nous devons ajuster ce texte fictif, ce sera également le même. Nous pouvons donc faire de même avec cela et nous assurer que tout est égal. Et je pense aussi que ce que nous allons faire, c'est peut-être simplement baisser d'une touche, ou est-ce que ça va ? En fait, je suis content de ça. D'accord. Donc, tout ce que nous avons à faire maintenant c'est simplement afficher le texte correct, ce que je ferai hors caméra juste pour gagner du temps. Vous pouvez voir qu'ils ont presque obtenu la quatrième manométrie qu'ils veulent. Ok, j'espère que tout cela a du sens. évident que ce qu'il faudrait faire maintenant, c'est d'obtenir la zone cible correcte. Il suffit de changer cela pour en lire plus, ce qui serait tout simplement le même que les autres. Et ensuite, notre action de cause est presque terminée. Et ensuite, nous allons passer à notre genre de section de faits ou d' ADN, comme nous l'appellerons. 27. Section de l'état: Ok, donc ensuite, nous avons notre genre de sanction sociale ou une sorte de section de statut, comme vous l'appelez. Désolé, encore une fois, le même genre de chose. Encore une fois, nous avons maintenant une image d'arrière-plan. Nous allons encore utiliser une grille de répétition pour faire tout cela. Cela va donc dire très longtemps. C'est très similaire à ce que nous avons fait avec notre type de section de couleurs. Bon, alors commençons. Tout d'abord, nous devons prendre notre image. Encore une fois, il se trouve que c' à peu près le point sur le plan des tailles. Si ce n'était pas évident, nous pourrions alors manipuler cela, mais nous aurions besoin de le faire. Mais il se trouve que c'était plutôt bien. Donc, dans le prochain couple, je pense que nous le faisons. Il va juste ajouter du texte en place, Wang, et il suffit de copier et de coller le texte en place. Assurez-vous que tout est parfaitement aligné. Et nous devons également mettre en place notre bouton. Donc, nous allons juste emprunter celui-là. Je suis en dessous. Vous pouvez voir en fait que nous ne pouvons rien voir parce que c'est en quelque sorte en dessous des sections. Nous cliquons avec le bouton droit de la souris, puis nous nous contentons Nous allons le revoir. Et maintenant , nous allons simplement changer le texte pour agir. Nous allons donc le faire maintenant. Alors, agissez. Une fois de plus, nous allons simplement modifier la façon dont cela se rapporte aux extrémités du Boston étant en quelque sorte allongé par l'option que nous avons choisie ici. Par conséquent, plutôt que la taille fixe, il suffit de le ramener à la largeur automatique. Et cela va en quelque sorte mettre cela plus en place pour que nous y partions. Et certains d'entre nous en ont 40. Ok, ça a l'air plutôt bien, non ? Alors, la prochaine ouverture, donc en créant notre sorte de section statistique comme certains de ceux-ci, certains des textes Voici les répétitions, c'est que je ne vais pas jouer avec des textes qu'Alpha. Vous pouvez le faire vous-même si vous le souhaitez. Mais nous allons au moins créer un peu ce genre d'icônes sociales. Nous les avons amenés à la table d'appoint de gauche, il faudra créer le cercle dans lequel je vais. Ok, très bien. Assurez-vous maintenant que notre image d'arrière-plan est verrouillée afin que nous puissions commencer à manœuvrer. Commencerait probablement par dessiner notre rectangle. Et nous allons essayer de nous assurer qu'il est également aligné sur notre grille. Vous pouvez donc voir que celui que j'ai ici est aligné sur ce genre de seconde 1, deuxième à la dernière. C'est donc ce que nous allons faire aussi. Commencez par ici. Et en ce qui concerne ce qui s' étend, couvrant six boss différents, l'essai, faisons de même. D'accord, et ça me semble juste. Peut-être une corde légèrement haute. Eh bien, dans un instant. OK. Commençons donc. Donc, ce que nous allons faire, c'est horriblement moi d' emprunter une vantardise que nous avons déjà créée et de dire que nous prendrons probablement celle que nous avons ici. Donc, si nous nous débarrassons de la grille ionique pour l'instant, nous ne ferons que dupliquer cela. Encore une fois. Assurez-vous de pouvoir l'amener au premier plan afin que nous puissions le voir. Les sons mettent ça en place. Nous allons simplement remonter ma grille pour voir qu'il y a de l'alanine à n'importe quoi en particulier , ce qu'ils disent, faisons de même. Et ce sera le cas maintenant, le saviez-vous ? Passons donc à AK. Super. Et disons qu'un espace sur le texte est effectivement envoyé parce que nous avons un peu foiré avec ça. Débarrassez-vous de notre grille pendant un instant. Brillant. Bon, donc tout va bien. Et commençons tout juste à mettre notre texte en place. Je vais juste emprunter ça et coller ça là-dedans. Et je vais peut-être montrer un peu plus d'espacement. Encore une fois, il suffit d'emprunter ce bloc de texte et de le coller aussi. Ok, donc en ce qui concerne l'espacement correct de cette section, ce que nous pourrions faire est de verrouiller cette section en place aussi pour que nous puissions obtenir ceci comme nous voulons qu'il soit dit qu'il y a ce genre au milieu. . Oui, ça m'a l'air plutôt bien. Ensuite, nous devons commencer à créer nos icônes sociales. Je n'ai donc qu'à créer un cercle, puis pop et à nos icônes sociales en place. Super, super simple. Donc, obtenons les cycles du ciel sur le prénom va saisir les icônes juste un instant. Il suffit d'obtenir notre outil ellipse. Et puis, ce que nous allons faire, c'est maintenir Maj enfoncé. Il crée donc un cercle parfait. l'air de l'équipe, que je peux dire quelque chose comme ça. Nous allons nous débarrasser de la frontière. Il faut qu'il s'agisse d'une couleur verte. Et puis moi, les icônes sociales vont être bleues, je pense que oui. OK. Bon, donc on va juste les attraper. Juste moi, il y a EVA. Donc, de la façon dont je pense que je vais le faire, ces groupes que nous venons d'écrire juste un instant. D'accord, alors tout d'abord, qu'avons-nous ? Nous avons donc tout d'abord Twitter. Alors, allons-y. Donc, si nous prenons ça et que nous le tirons à l'intérieur, ça a l'air plutôt bien. Peut-être un peu plus gros. Oui. Je peux dire si vous maintenez la touche Maj enfoncée. Et ça a l'air plutôt bien. Ok, donc ensuite, ce que nous allons faire n'est qu'un double de ce que nous avons déjà ici. Et ensuite, nous allons simplement apparaître dans l'icône Facebook. Et nous allons peut-être simplement rendre cette touche plus grande pour balancer les correspondances avec la taille. Bon, super. Et une chose que nous ferons, c'est que nous regroupons les deux ensemble comme ça. Et ensuite, on va juste être incité. Oui. Je pense que je peux dire quelque chose comme ça a l'air plutôt bien. OK. Nous sommes donc à peu près, à peu près là. La seule chose que nous aurions dû faire dernier, en fait, cette post-installation, vous devriez aller de l'avant car nous ne voulons pas nécessairement dupliquer un Boston pour chacun d'eux. Je viens donc de sortir du chemin pour l'instant. Et débarrassons-nous de ces frontières. Nous ne le voulons pas non plus. Ok, donc j'ai tout déverrouillé et ce que nous allons faire, c'est simplement tout sélectionner ensemble. Lorsque je vais cliquer sur Repeat Grid, puis nous pouvons faire glisser cela vers le bas. Nous allons donc les avoir pour cela pour que nous obtenions et comment ces espaces diminuent. Ok, donc nous devons être un peu plus, quelque chose comme ça. Essayez 35. Et puis c'est peut-être un peu trop gros en fait. Alors peut-être que nous pourrons facilement me contenter de cette touche arrondie. Le plus important, c'est que nous le concentrons réellement dans la section que nous avons. Donc, assurons simplement que ce n'est pas le cas. On y va donc. C'est donc en fait centré. Et oui, ça me semble très bien. On a peut-être juste rendu ça un peu trop gros. Donc, si c'est le cas, ce que nous pouvons faire, c'est cliquer dessus pendant que nous sommes toujours sur la grille de répétition. Et puis si nous maintenons la touche Alt ou Option enfoncée, si vous êtes sur un Mac, vous pouvez voir comme je le fais que l'espacement se déplace au-dessus et au-dessous de l'élément lui-même. Donc, s'ils sont un peu trop gros, c'est peut-être comme ça que vous le faites. Nous allons donc les rendre légèrement plus petits peut-être à quelque chose comme ça. Et puis vous pouvez dire que c'est un peu fait si tous, plutôt que de devoir tous les individuellement et dire, revenons en arrière, assurez-vous qu'ils sont tous des diapositives ensemble. On dit, et on y va et on va juste s'assurer qu'il est centré. Et ce sera le cas. Ok, ça a l'air plutôt bien. Et puis nous allons simplement faire revenir ce bouton là où il était. Reprenons notre grille. Je devrais faire pour m'assurer qu'ils sont alignés de la même manière. Je pense que tout va bien. Je suis juste un peu plus sur le côté. Oui. Oh, d'accord. Et encore une fois, il faut revenir au premier plan. Très bien. Ok, c'est moi, ça va. Brillant. Nous en avons donc presque fini avec cette section. Maintenant. Voyons rapidement comment nous allons faire, que tout va bien s'aligner ? Ce n'est pas tout à fait pareil. Regroupons-les ensemble et simplement les remontons légèrement. Je vais l'aligner sur le haut de cette boîte ici comme ça. Ok, donc il est peut-être légèrement différent de ce qu'ils ont fait, mais c'est à peu près le même genre de chose. Et il n'est pas bien aligné. Je pense que c'est le cas. Oui, c'est génial. OK. C'est donc à peu près tout ça. Changeons simplement le côté technique, c'est le même. Ok, ça veut dire que nous en avons presque fini avec cette section. Vous pouvez donc voir que nous sommes à peu près les mêmes, peut-être parce que l'espacement pour cette section est un peu différent. Mais essentiellement, nous avons le même genre de choses qui se passe. Bon, donc Paul est maintenant terminé. Et maintenant, nous allons créer notre moindre section. 28. Section de curseur: Bon, donc on y arrive. Ensuite, nous avons notre section slider. Encore une fois, ce sera assez simple pour simplement mettre en jeu une image. Ensuite, nous aurons simplement notre outil rectangle pour créer ce genre de boîte de devis. Ensuite, nous empêcherons Ableton de celui que nous avons créé précédemment. Et après. Nous allons simplement créer ce type d'indicateurs de curseur à l'aide de l'outil ellipse. Bon, alors commençons. Tout d'abord, nous devons créer notre section, même si ce n'est qu'un espace blanc, je vais quand même créer un rectangle pour cette section. Essayons donc de garder cela comme à peu près le même. Je vais en fait quitter le conseil d'administration cette fois. Et je vais aussi le verrouiller en place. Et la raison en étant que c'est juste pour que nous puissions voir où sont nos limites. Bon, donc maintenant, nous devons mettre notre image en place. Donc, si nous effectuons un zoom arrière et que nous ajoutons cette image, je récupérerai notre grille juste un instant pour que nous puissions voir ce que nous faisons. Et pourtant, c'est assez bonne taille dans le capteur. Et évidemment, ce que nous devons faire maintenant, c'est nous assurer que nous obtenons notre outil de rectangle et que nous le chevauchons légèrement sur cette section. Ensuite, nous utiliserons l'outil Ellipse pour les réaliser en un instant. Bon, alors faisons ce genre de textes ou de citations. Tout d'abord, nous reviendrons sur ce bouton, toutes les publications à la fin. Je ne peux pas le dire. Commençons à dessiner qui ramènera notre grille juste pour que vous puissiez voir avec quoi nous travaillons. Et bien, commençons par ici, je pense. Et ça va se chevaucher uniquement sur la prochaine balle et quelque chose comme ça. Assurez-vous qu'il se trouve dans le capteur. Je veux dire, voyons simplement quelle taille nous avons pour cela. 344. Assez près. D'accord, disons que c'est très bien. Je vais me débarrasser de ma grille pour avoir ça sans bordure et nous aurons une couleur de remplissage de notre genre de bleu foncé. Ce n'est pas si bon. Ensuite, nous allons simplement emprunter cet élément de texte ici et nous le copierons et le collerons. Donc, tout va bien. Et ce serait également la même chose pour celui-ci, juste pour gagner du temps. Donc, prenons cela comme 10. Super. Donc, presque là. Prenons notre sorte d'indicateurs de curseur, le cou. Encore une fois, vous pouvez voir un hexadécimal tant que vous avez du vert, ce qui signifie qu'ils ont également utilisé des grilles de répétition. Nous allons donc faire la même chose, du même genre que nous allons le faire maintenant. L'un d'eux a donc une couleur de remplissage, pas l' un d'eux. Nous allons les avoir tous avec, euh, avec la couleur de remplissage ASA d'abord, puis dissocier la grille et ensuite en faire un peu si cela a du sens, cela aura du sens comme nous le faisons. J'ai donc l'outil ellipse maintenant et nous allons maintenir la touche Maj enfoncée, puis le faire glisser vers l'extérieur pour que nous puissions créer un cercle parfait. Dites que quelque chose comme ça a l'air bien. Et cela va avoir un, a aura une bordure, mais il n'aura pas de couleur de remplissage. La couleur de la bordure sera bleue. Ensuite, nous utiliserons notre grille de pointe. Et nous allons juste traîner ça quelques fois de plus et nous allons maintenant juste l'espacement pour que l' arabe se rapproche de quelque chose comme 10, je pense qu'il arabe se rapproche de quelque chose comme 10, aura, super. Et ensuite, ce que nous allons faire, c'est dissocier la grille. La raison étant que je suis 0, je veux maintenant sélectionner celui-ci seul pour pouvoir lui donner une couleur de remplissage maintenant, alors que ces dernières évidemment, nous ne l'aurions pas fait. Alors maintenant, éliminons West qui sort de la couleur pour celui-là. Et maintenant, vous pouvez dire que c'était une façon rapide de le faire, Robinson de le faire un par un. Et en ce qui concerne l'espacement, c'est loin d'ici ? Encore une fois, pour répéter, chaque fois que vous sélectionnez un élément, maintenez la touche Alt enfoncée. Cliquez sur glisser. Il vous indiquera également à quel point un élément est éloigné du prochain. C'est donc 56, donc ce n'est rien de précis. Voyons donc si nous pouvons faire quelque chose de vraiment stimulant avant de le faire. Cela a l'air un peu trop gros, alors il suffit de le rendre un peu plus petit. Encore une fois, ils ne sont plus sur la grille de répétition, mais comment le gluten ensemble, je vais maintenir Shift enfoncé et ensuite les rencontrer légèrement pour que nous devions légèrement plus petits. Et c'est à peu près juste pour moi. Ok, à quelle distance cet élément est-il loin de la partie inférieure ? Jetons un coup d'œil. 25. Il a vraiment l'air. Je trouve cela , mais nous allons juste nous éloigner légèrement plus loin. Dites juste un peu plus d'instructions. Que faites-vous, 35 ans ? Oui, je suis content de ça. OK. Nous y sommes donc très, très presque. Ensuite, nous voulons simplement emprunter. Cela, le met dans mon VA, donc nous allons simplement appuyer sur Alt enfoncée , puis faire glisser et ensuite nous allons simplement le déposer ici. Je m'assure qu'il soit mis en avant. Et nous allons juste mettre ça en place. Donc, un rein. Nous en aurons donc 50, je pense. Et ensuite, il est écrit en savoir plus cette fois. Changeons donc simplement les textes Eva, et nous nous assurerons qu'ils sont correctement alignés. Ok, donc nous sommes maintenant Appleton pour le haut de cette image, qui va juste emprunter à celle que j'ai eue ici. Encore une fois, nous maintenons Alt enfoncée et nous allons simplement mettre cela en place. Dites, je suis presque sûr que cela s'aligne sur ceux-ci. Ils ne l'ont pas fait. Il n'est pas forcément important de faire ce message. Quand on redimensionne, on va quand même bouger, mais juste pour l'instant, alignons ça sur ça. Ok, hum, quel était le texte de cette partie ? Donc, des histoires et ça vient de m'envoyer des textos, il suffit de zoomer. Encore une fois, le zoom que vous pouvez faire si vous avez un trackpad est évident, vous allez pincer et zoomer. Si vous avez un clavier normal, vous suffit de maintenir la touche Alt ou Option enfoncée, puis d'entrer avec votre molette de défilement. Je peux dire qu'on va juste s'assurer que c'est le milieu. Et on y va. Ok, nous avons maintenant notre sanction de curseur ou terminé. Maintenant que nous l'avons fait, nous pouvons cliquer à nouveau dessus et nous pouvons simplement le déverrouiller un instant. Et nous allons nous débarrasser de notre frontière. Juste parce que ensuite ce que nous allons commencer à mettre sur fond bleu pour notre prochaine section. 29. Enregistrer la section futur: Bon, passez à la section suivante. Dites ce qu'il ferait, tout d'abord, c'est d'obtenir notre sorte de section de fond bleu en allant dans l'outil rectangle IA. Et nous allons nous assurer de trouver le bord de cette main, puis de commencer à dessiner ça. Et puis nous allons nous débarrasser de la bordure et nous lui donnerons une couleur de fond bleu foncé. Donc, tout va bien. Et une fois encore, nous allons verrouiller cela en place. Nous appelons déplacer accidentellement quoi que ce soit. D'accord, donc tout d'abord, nous devons mettre notre texte en jeu. Donc je vais juste copier et coller ça à tout moment pour vitesse, puis ce gars en place. Revenons donc un instant en arrière pour que nous puissions nous assurer que tout est bien aligné. Un gars. C'est vrai ? Bon, donc tout va bien. Bon, donc mettons notre image en place, ce qui est très présent. Il va simplement le récupérer dans une sélection. Et puis ce qui peut nous montrer que 0 est correctement aligné. Elle a donc un bon dos juste pour que l' OMS soit bien. Et nous allons juste le faire un peu pour que le riz en fasse 50. Je peux le dire. Nous trouverons donc une belle ouverture pour mettre notre boson et tous mes textes. Je vais donc simplement copier et coller ça. Je le suis juste parce que c'est un peu logique de le faire. Je vais juste faire glisser ça comme ça. Et ensuite, nous aurons juste cela légèrement en dessous. Nous allons juste faire notre inversion, donc nous allons simplement copier celle-ci également. Nous aurons juste besoin sortir de nouveau au front. Donc, si nous faisons un clic droit là-dessus, Bring to Front. Nous avons donc encore un léger décalage, donc il n'est pas tout à fait aligné sur elle, c' est juste au centre de celui-ci. Nous allons donc refaire la même chose. Allons chercher une banque géniale et l'avoir sur celle-ci ici. Et ensuite, nous ferons la même chose pour cela. Ok, super. Et puis nous obtiendrons notre texte fictif sur lequel on se débarrasse comme une grille pendant un instant. On va juste barrer ça encore une fois, ici. Donc, de la façon dont ils ont espacé cela, nous allons copier des jeux de glace. Je ne sais pas si je le fais de la même façon moi-même, mais je serais peut-être allongé sur toute la boîte elle-même ou peut-être avoir toutes sortes d'endroits sonores ensemble. Encore une fois, la préférence personnelle. Je vais donc faire ce qu'ils ont fait juste pour, juste pour plus de facilité. Je vais juste emprunter ce bouton ici. Une fois encore. Je veux que vous fassiez simplement en sorte que nous mettions au premier plan pour que nous puissions le dire. Et que font-ils ? Donc, s'ils ne sont pas prêts, faites-le aligner de cette façon. Donc je vais l'avoir un peu d'argile, donc nous aurons 40 ans. Donc tout correspond et est déjà lu taupe. Donc, tout va bien. Donc, ce que nous pouvons faire un amendement pour gagner du temps, nous allons copier tout cela ensemble. Ce que nous avons ici, je le colle ici, donc nous allons le faire. Tout d'abord, disons que nous allons regrouper tout cela ensemble. Vous pourriez en faire un groupe si vous le vouliez. Et ensuite, ce que nous allons faire, c'est que nous maintenons Alt enfoncé, puis nous allons dupliquer cela. Et nous allons juste amener de cette façon. Vous vous inquiétez de l'espacement en un instant. Bien sûr, il faut juste changer le texte dans un instant. Et ensuite, nous aurons mis en place notre dernière image restante pour cette section, ce qui est en bas maintenant. Et récupérons notre grille afin que nous puissions commencer à aligner correctement les choses. Donc, il suffit de copier ce qu'ils font ici. Ils l'alignent une fois de plus comme le début de tout cela dans un seul ici. Et c'est juste en train d'arriver au bord. C'est très bien. Faisons le même genre de choses. En fait, nous ne sommes pas loin de toute façon. Allons-y un peu plus loin . Et si bien. Et puis, pour celui-ci, celui-ci va toujours être aligné sur celui-ci ici. Nous allons donc faire le même genre de choses. Et jetons un coup d'œil au bord de tout ça. Oui, c'est très bien. OK. Donc, on a l'air plutôt bien. Enfin, ce que nous devons faire, c'est simplement nous assurer que nous avons changé notre texte. Je vais donc le faire hors écran juste pour gagner du temps. Encore une fois, j'espère que tout cela est logique et que cela est relativement facile à suivre. Je vais juste déplacer ça un peu. Donc, là où il n'y a pas de fossé avec ces deux satellites, il suffit de regrouper ensemble et de les rapprocher légèrement. Il suffit de zoomer et de toucher simplement pour s'assurer qu'ils sont correctement alignés. OK. Cela me semble à peu près juste. Et puis nous penserons que nous allons tout regrouper. Je m'assurerai que tout soit parfaitement centré. Il suffit de revenir tout de suite. Assurez-vous que nous sommes sur le bord. Je peux dire que nous sommes plutôt bien. En fait, cela n'a pas pris trop de temps. Super. Je vais donc mettre à jour les balises hors écran. Et ensuite, nous avons en quelque sorte derniers petits bouts à faire, qui est notre section d'appel à l'action et notre pied de page. Donc, nous sommes très rapidement en fait, ce que je ferai probablement, c'est faire ces deux choses ensemble parce que de cette façon, c'est très long et donc, d'accord, donc sur notre dernière partie de ce projet de classe, notre appel à l'action et notre pied de page. 30. Section CTA et pied: Bon, donc sur notre dernière partie de ce projet de classe. J'espère donc que vous devrez suivre l'empattement, j'espère que tout cela a du sens. Maintenant, s'ils l'ont eu lentement, facile jusqu'à présent parce que nous avons déjà tous nos actifs en place ou la taille, mais j'ai juste pensé qu'il était logique de le faire de cette façon pour vous habituer à l'utiliser. Donc, l'émulation d'autre chose au départ, je pense, est une bonne façon d'apprendre. Une chose, juste pour le mentionner maintenant, assurez-vous que vous faites glisser le texte vers le bas. Donc, tout le texte est en place. Sur la vidéo précédente, je pense que tous les textes ne sont pas entièrement partagés. Dites que si vous pensez, Oh, c'est un peu bizarre, assurez-vous simplement que la zone de texte est complètement longue, allongée pour que vous puissiez tout voir. C'est peut-être Y0 pour être étrange avant. Bon, donc on y va. Nous devons faire notre section d'appel à l'action, puis notre pied de page. Nous ferons donc tout cela en une seule vidéo juste parce que cela ne vous prendra pas très longtemps. D'abord, prenons notre outil de rectangle et dessinons notre section d'appel à l'action. Débarrassez-vous de la bordure et nous aurons cette couleur de remplissage verte. le verrouillerai à nouveau, désolé, après avoir accidentellement déplacé quoi que ce soit. Et ce que nous allons faire, c'est d'abord mettre en place nos éléments de texte. Nous allons donc copier ça ici et nous assurer que tout est centré. Tout va bien. Et puis nous allons en fait dans des dégradés que nous pourrions simplement copier cela et faire certaines des choses que nous avons, c'est nous allons simplement faire ce genre d'adresse fois pour votre adresse e-mail NTC échoué. Alors, faisons-le. Alors, comment pouvez-vous faire cela ? Vous m'avez donc fait penser, oh, peut-être que vous pourriez utiliser l'outil ellipse. Je suis un peu comme ça. Non, vous ne faites pas ça. En fait, vous entrez à nouveau votre outil de rectangle , puis arrondissez simplement les bords, comme vous le faites avec le Boston. Alors, faisons-le maintenant. Nous allons donc tirer ça. Donc, quelque chose comme ça. Ça me semble juste. Je suis juste un peu plus grand. Whoops, ça le fait pivoter. OK. Ça a l'air bien. Nous ne voulons pas la frontière, mais nous n'aurons pas de rayon pour cela. Donc nous pouvons simplement faire glisser cette entrée et je vais faire est super, super simple. En fait, je vais le faire réfléchir un peu plus longtemps. Et juste pour la vitesse, je vais juste emprunter ce texte et le faire entrer. C'est donc centré. Il suffit de zoomer et de toucher. Et oui, quelque chose comme ça me semble plutôt bien. Ce dont nous avons besoin maintenant, c'est une version sombre de ce bouton. Ce que nous allons faire, c'est que nous allons juste dupliquer cela. Nous allons l'amener au premier plan. Encore une fois. Nous veillerons également à ce qu'il soit aligné dans la grille centrale, juste pour que nous puissions nous assurer qu'il est correctement aligné. Et celui-ci, bien sûr, nous voulons changer. Ils veulent avoir un bleu foncé. Ensuite, le texte au centre va être blanc. Pleure, assurez-vous que votre texte est sélectionné, puis choisissez un k. Nous y sommes. Ensuite, ce que nous allons faire, c'est assurer qu'il est correctement aligné sur notre grille. Ok, donc très bien, c'était rapide. C'est donc cette partie que nous allons maintenant faire. Oh, désolé. Une autre chose que nous devons nous assurer que notre texte n'est pas justifié, comme le dit le Green, Mon montre que nous faisons cela. On y va. Nous allons donc simplement nous débarrasser de ma grille et y jeter un coup d'œil. Et oui, ça m'a l'air plutôt bien. Et assurons simplement que nous nous alignons correctement pour que ce soit à la même distance. Tout ça va bien. C'est vrai ? Donc, notre dernière partie d'entre eux, qui sera notre pied de page. Donc, ce que je vais faire de quelques façons, vous pourriez le faire. Vous pouvez littéralement simplement taper une zone de texte. Mais je vais en faire un. Et encore une fois, je vais utiliser la grille de répétition juste pour nous donner la même chose pour chacun. Donc, nous sommes plutôt bien. Il suffit donc de zoomer et de voir ce que nous avons fait jusqu'ici. Encore une fois, nous sommes à peu près les mêmes que ce qu'ils ont fait. Encore une fois, ne vous inquiétez pas trop si ce n'est pas exactement le même espacement, qu'avez-vous ? Ce cours vise simplement à vous habituer à utiliser XD et à faire comprendre à chacun comment vous allez, comment vous approcherez. Donc, la création de certaines sanctions. Donc, ce que nous devons faire, c'est juste emprunter notre logo à une paire, pour le dupliquer. Et nous allons juste tout faire descendre et dire : Jetons un coup d'oeil là-dessus. Donc, nous ne centrons pas tout ici. Donc, prenons juste un peu plus de hauteur. Dites quelque chose comme gagner à ce sujet. Ensuite, nous allons avoir cette section où nous aurons nos étiquettes. Je vais juste emprunter ça et on va coller ça en place. Et ce gars est en train de revenir juste pour qu' on puisse vraiment l'apprendre avec quelque chose. Et donc nous l'aurons dans les parages. Donc, si bien. Ok, donc maintenant, nous avons juste besoin de mettre en place une sorte de ligne. Alors, faisons-le maintenant. Encore une fois, nous pourrions utiliser l'outil stylo, nous pourrions simplement utiliser la ligne jusqu'à l'endroit où les choses, puisque nous faisons littéralement une ligne droite, nous utiliserons simplement cela. Maintenons donc enfoncés, maintenons la touche Maj enfoncée pour nous assurer qu'elle trace une ligne complètement droite. Et nous aurons ces deux-là ici. Et la taille, je pense que nous l'aurons quelque chose comme 399, certainement A3, d'autres aussi. Et c'est à peu près la même chose, je pense que c'est Toulon qu'ils y ont peut-être un peu plus épais. Quoi qu'il en soit, c'est bon. Bon, donc tout va bien. Mais mon outil de sélection, et je vois que cela va être plutôt que gracieusement bleu, c'est un peu logique. Et puis je vais juste, je vais simplement barrer ce texte et le copier et accélérer pour me regarder taper nos textes pour toujours plus. Ok, donc nous sommes très proches maintenant et nous demandons aujourd'hui de s'assurer que nous avons sélectionné cette option. Et je vais utiliser notre grille de répétition une fois de plus, je vais la faire glisser, donc nous en avons deux autres. Et puis je vais juste ajuster l'espacement. La Russie revient probablement cet espacement en un instant. Nous devons donc également mettre cette partie en œuvre. Nous allons donc simplement cliquer un instant. Bon, je vais juste cliquer sur celui-ci ici. Je vais simplement dissocier le plaignant pour que lorsque j'essaie de barrer, cela ne m'emmène pas tout. Je vais donc le dupliquer en maintenant touche Alt enfoncée, puis en le faisant glisser. Je vais le déposer ici. OK ? Alors, nous récupérerons notre grille et nous assurerons que les bords sont alignés sur ce genre de n one juste ici. Et nous veillerons à ce qu'il soit au centre également. Super. C'est donc amusant. Et peut-être ne pas être loin, c'est correct, donc nous avons besoin d'un peu plus. Il y en aura même moins quand il s'agit de l'essai d'espacement. Donc, quelque chose comme ça, je pense que c'est ce que nous voulons. Berlin, je pense que nous y sommes. Assurez-vous simplement d'avoir sélectionné la fin. Oui, je suis content de ça. Brillant. D'accord, il ne nous reste plus qu'à nous assurer que tout le texte approprié est en place, que vous pouvez bien sûr remplir si vous le souhaitez. Et nous sommes essentiellement achevés. Tout est maintenant presque terminé. Il suffit donc de zoomer et de voir ce que nous avons. Encore une fois, nous avons peut-être un peu tout droit de leur version. Quand il s'agit des différents rembourrages et qu'avez-vous ? Mais nous avons, pour la plupart, encore construit nous-mêmes la plupart de cela avec une sorte de copier-coller ce texte juste pour la rapidité. Mais encore une fois, l'objectif de ce projet de classe est de vous habituer à utiliser XD. Donc, je pense toujours que la meilleure façon de commencer un objectif est simplement d' essayer d'imiter autre chose. J'espère que vous avez trouvé cela utile et j'espère que cela vous a inspiré à commencer peut-être à créer vos propres projets, ce que vous allez, espérons-le faire pour les prochains projets de classe, que vous allez partager dans la section projet de classe Skillshare. Mais j'espère que tout cela vous paraîtra bien. J'espère que vous avez aimé le faire. Et je vous verrai dans la dernière vidéo. 31. Essayez mes cours Webflow sur Skillshare: Ok, donc si vous avez atteint cette vidéo, cela signifie que vous êtes à nouveau à la fin du cours. Maintenant, avec vos nouvelles compétences en matière de conception Web, vous vous demandez peut-être maintenant comment puis-je créer ces sites Web ? Et comme il se trouve, j'ai deux autres cours sur Skillshare, qui concernent Webflow, un outil appelé Webflow, qui est essentiellement un outil de développement Web où il vous permet de créer un site Web est visuellement maintenant, Webflow est un peu différent de quelque chose comme Wix ou d'autres constructeurs de glisser-déposer. Vous pouvez glisser-déposer des éléments, mais c'est un outil de développement Web professionnel et c'est la chose la plus proche d'un hankering auquel vous pouvez accéder sans avoir besoin de savoir comment coder. Donc, si vous créez un design qui vous plaît, le look de ce cours vous a aidé à le faire. Si vous souhaitez maintenant commencer à développer des sites Web, vous pouvez désormais combiner les deux compétences en regardant mes cours de dépassement sur Webflow. Alors allez-y et jetez-moi un coup d'œil et faites-moi savoir ce que vous pensez et essayez-le, voyez si vous pouvez le développer en utilisant vos nouvelles compétences de conception. Et ensuite, les cours sur le site Web peuvent vous aider à développer les sites Web également. Si vous le souhaitez, voyez plus pour moi, j'ai une chaîne YouTube. Si vous tapez juste un Harrison Webflow, y a de fortes chances que vous me trouviez là. J'espère que vous avez trouvé ce cours utile, et j'espère qu'il vous a donné au moins un point de départ pour commencer à créer vos propres créations. Merci encore une fois, j'ai suivi le cours, faites-moi savoir et passez en revue ce que vous en pensez et je vous verrai sur le prochain cours.