Comment utiliser Figma pour concevoir des sites web

Article original : How to Use Figma to Design Websites

Figma est un éditeur de graphiques vectoriels et un outil de prototypage idéal pour concevoir des sites web.

Nous venons de publier un cours Figma sur la chaîne YouTube freeCodeCamp.org qui vous apprendra à utiliser l'outil pour concevoir des sites web.

Joy Shaheb a développé le cours. Joy est un créateur prolifique de tutoriels et un excellent enseignant.

Voici les sujets abordés dans ce cours :

• Installation de Figma
• Panneau de gauche
• Panneau supérieur + droit
• Outil Texte
• Test de prototype
• Disposition automatique
• Grille de disposition
• Contraintes
• Composants
• Conception pour ordinateur
• Conception mobile

Regardez le cours complet ci-dessous ou sur la chaîne YouTube freeCodeCamp.org (3 heures de visionnage).

Transcription

(générée automatiquement)

Figma est un éditeur de graphiques vectoriels et un outil de prototypage idéal pour concevoir des sites web.

Et dans ce cours, Joy va vous montrer comment l'utiliser.

Joy est un créateur prolifique et excellent de tutoriels.

Salut les gars, vous êtes là.

C'est un gros matériel pour les débutants complets.

Et aujourd'hui, vous et moi ensemble, nous allons créer un design web responsive complet, à la fois pour la version ordinateur et une autre pour la version mobile.

Donc, voici la page d'accueil de notre version ordinateur.

Donc, voyez-vous ces éléments de navigation ici, accueil enseignants contactez-nous inscription selon ces éléments de navigation, nous avons quatre pages, d'accord, laissez-moi vous guider à travers toutes les pages et sections.

D'accord, donc voici la page d'accueil, je veux dire, la page de destination ici, et ensuite si je fais défiler vers le bas, alors nous allons trouver cette section ici.

Et puis cette section ici sont les cours proposés.

C'est le site web éducatif, d'accord.

Et puis si je fais défiler vers le bas, alors vous allez trouver ceci ici.

Et enfin, nous avons ce pied de page ici.

Très bien, laissez-moi zoomer un peu.

Et voici la section enseignants ici, vous pouvez voir cela.

Donc, voici la section enseignants ici, nous allons faire quelques cartes ici avec quelques boutons.

Et nous allons également travailler avec des svgs.

C'est le pied de page ici pour cette page.

Et puis nous avons cette page contactez-nous ici, vous pouvez voir cela donc nous allons également travailler avec des icônes, vous voyez ces icônes ici, nous allons travailler avec elles, et également faire quelques formulaires ici aussi, vous pouvez consulter la page d'inscription ici aussi.

C'est la dernière page, vous pouvez télécharger ce fichier figma entier via le lien dans la description ci-dessous.

Donc, une fois que vous avez téléchargé le fichier figma, vous allez trouver toutes ces pages ici.

Donc, cela porte le design suivant.

Je veux dire, celui-ci ici, et celui-ci porte le design mobile.

Regardez cela, nous avons le design mobile ici.

D'accord, donc voici notre page d'accueil, laissez-moi vous guider à travers cela.

D'accord, donc voici la page d'accueil ici.

Et ce sont les guides de style, je suis dans les guides typographiques que nous allons suivre, d'accord, quelle sera la taille de police du logo, la taille de police du texte grand, la taille de police du bouton, du texte, etc.

Chaque design porte le guide de style.

D'accord, laissez-moi vous montrer.

Le mobile porte le guide de style ordinateur, le design du cabinet porte également le guide de style.

Le design de l'ordinateur portable porte également ce style ici et la version suivante, celui-ci est tout en haut, nous allons trouver ce guide de style ici.

Donc, une fois que vous avez téléchargé le fichier finger, vous allez trouver toutes ces pages ici, vous voyez cela, l'étape suivante porte le design pour la version suivante.

Et la page mobile porte le design pour la version mobile.

D'accord, donc je vais cliquer ici aussi, vous allez trouver le design pour l'ordinateur portable et la version tablette ici aussi.

Donc, c'est un design web pour la version mobile.

D'accord, laissez-moi zoomer un peu comme cela, regardez cela.

C'est notre page d'accueil ici.

Et puis voici la section suivante, troisième section, quatrième section, et voici notre pied de page ici.

D'accord, laissez-moi zoomer un peu.

Nous y voilà.

Et puis nous avons nos icônes de médias sociaux ici aussi.

Et puis regardez cette section enseignants ici.

Et voici le reste du design.

Donc, aujourd'hui, vous et moi ensemble, nous allons concevoir la version Dexter.

D'accord, celle-ci, et la version mobile verra cet ordinateur portable et cette tablette.

C'est votre devoir.

Après ce tutoriel, vous allez pratiquer ici, d'accord, vous allez faire ce design web pour la version tablette.

Et aussi vous allez faire le design web pour la version gauche aussi.

D'accord, donc ces deux sont vos devoirs.

Cette vidéo entière est divisée selon ces chapitres ici, il y en a un ici, vous allez trouver les horodatages dans la description ci-dessous.

Donc, tout d'abord, nous allons regarder tous les outils que Figma porte.

Donc, une fois que nous avons couvert tous les outils que Figma porte, alors nous allons commencer à faire un design web responsive pour la version suivante d'abord, et puis nous allons commencer à faire le design web pour la version mobile.

Au fait, cette vidéo entière est faite pour les débutants qui ne savent rien sur Figma.

Donc, nous allons commencer de zéro, je n'utiliserai aucun plugin, bibliothèque ou système de design, juste de zéro, nous allons utiliser tous les outils que FEMA a fournis et nous allons faire le design en utilisant uniquement les outils.

Si cette vidéo obtient au moins 2000 likes, alors je vais faire une autre vidéo de niveau figma, où je vais couvrir comment faire un design web en utilisant les plugins de système de design, les bibliothèques, les prototypes, et aussi comment gagner du temps.

Donc, cliquez sur le bouton like et aussi cliquez sur le bouton s'abonner pour que le frère engrenage puisse se les offrir.

Ah, c'est Luke 800.

Celui-ci.

Notez également que ce sont nos points d'arrêt, d'accord, pour la version extra, c'est 1400 40 pixels, d'accord.

Et pour la version ordinateur portable, c'est 1024 pixels.

Et pour la version tablette, c'est 768 pixels.

Et pour la version mobile, j'ai choisi 414 pixels, qui est la largeur de l'iPhone 11 Pro max alerte Dans cette vidéo, nous allons commencer selon ces chapitres ici.

Tout d'abord, vous allez ouvrir n'importe quel navigateur web, d'accord, et vous allez taper figma.com fig ma.com comme cela, appuyez sur entrer.

Vous allez trouver cette interface ici et puis vous pouvez vous connecter ou vous pouvez vous inscrire si vous n'avez pas de compte.

D'accord, donc j'ai un compte.

Et je vais me connecter ici, comme cela.

Je vais utiliser Google ici.

Donc, une fois que vous vous êtes inscrit, vous allez trouver cette interface ici.

D'accord, laissez-moi expliquer cela assuré.

D'accord, donc tous ceux-ci sont vos brouillons, les projets sur lesquels vous travaillez.

D'accord, laissez-moi faire défiler un peu vers le bas afin que je puisse vous montrer certains de mes projets ici.

D'accord, comme cela.

Et celui-ci ici, voyez-vous cela, cela est utilisé pour créer un nouveau fichier de brouillon, je veux dire, un nouveau projet.

Et ici sur cette section ici, vous allez trouver quelques modèles ici afin de gagner du temps.

D'accord, vous pouvez faire défiler et voir tous ces modèles ici aussi.

Si vous voulez télécharger figma pour la version suivante, vous pouvez le faire aussi, vous allez cliquer ici, sur votre icône de profil, d'accord, comme cela.

Et puis vous allez cliquer sur ce bouton get dekstop app, et puis il va automatiquement télécharger figma pour vous.

Très bien, maintenant je vais vous montrer cet onglet communauté ici, d'accord, je vais cliquer ici, ou ce que vous pouvez faire, c'est venir ici, et vous pouvez cliquer sur cette communauté ici, et il va vous amener ici.

Donc, cet onglet communauté contient les travaux d'autres personnes, afin que vous puissiez les télécharger et les utiliser pour vos propres besoins.

D'accord, laissez-moi faire défiler un peu vers le bas.

Donc, vous allez trouver cela.

Donc, ce sont les fichiers tendance ici, vous allez trouver divers actifs ici, divers systèmes de design, d'accord, donc regardez cela ici.

Ce sont diverses icônes que vous pouvez télécharger et utiliser pour tous vos projets.

Donc, comme cela, nous avons des tonnes de ressources publiées par d'autres personnes complètement gratuitement.

Très bien, donc je vais faire défiler vers le bas afin que vous puissiez regarder plus, d'accord.

Et puis tout en haut ici, ceux-ci, ce sont les filtres, d'accord ? Si vous voulez juste des plugins, si vous voulez juste regarder des plugins, vous pouvez cliquer ici, ou peut-être que vous voulez voir quelques illustrations, d'accord, vous allez cliquer sur illustrations ici.

Et puis vous allez trouver diverses illustrations, divers actifs numériques, d'accord, comme cela.

Par exemple, disons que, regardez cette illustration ici, si je clique ici, si vous voulez l'utiliser pour votre projet, ce que vous allez faire, c'est cliquer sur cette option de duplication, d'accord, comme cela.

Et il va vous donner une copie dans votre fichier figma.

Et vous pouvez naviguer dans les designs, je veux dire, naviguer dans les actifs à travers ces pages ici, d'accord ? Comme les composants, regardez tous ces composants ici.

Donc, vous avez obtenu cela complètement gratuitement.

D'accord, laissez-moi zoomer un peu, afin que je puisse vous montrer divers actifs de design.

Et si je veux changer la couleur de fond, je peux aussi le faire par cela, regardez cela, de violet à blanc comme cela.

Maintenant, regardez mes designs ici, d'accord ? Regardez ces modèles ici que je peux utiliser pour mes projets, d'accord ? Comme cela.

D'accord, je peux zoomer, je peux zoomer et dézoomer et divers actifs ici, comme cela, regardez tous ces actifs.

Avec les illustrations de personnes, j'obtiens aussi cela ici, regardez cela.

Pour revenir à votre profil depuis l'onglet communauté, ce que vous allez faire, c'est cliquer ici, d'accord, et puis vous allez cliquer sur votre profil comme cela.

Et vous allez revenir à votre tableau de bord figma ici.

Donc, c'est notre projet de pratique, j'ai inclus un lien dans la description ci-dessous, vous cliquez dessus, et vous allez venir ici.

Donc, une fois que vous venez ici, vous allez cliquer sur cette option de duplication.

D'accord, donc si vous cliquez sur cette duplication, alors il va dupliquer votre projet sur votre profil comme cela.

Tout d'abord, inspectons ce que nous avons sur notre panneau de gauche ici, vous voyez ce panneau ici.

Donc, vous voyez ces calques ici, ces calques représentent tous ces calques que nous avons ici.

Et ces actifs ici, je vais discuter en détails de celui-ci, lorsque je discute de la partie composants, celui-ci ici, partie numéro neuf.

Très bien, maintenant je vais revenir aux calques ici.

Et celui-ci représente toutes mes pages.

D'accord, donc ce sont toutes mes pages ici, si je clique ici, il va cacher mes pages.

Si vous cliquez à nouveau, il va me montrer toutes les pages que j'ai.

Si vous voulez créer une nouvelle page, alors vous pouvez cliquer sur ce signe plus ici, et vous pouvez la nommer comme vous voulez.

Comme je vais nommer la page un ici, comme cela, et je vais appuyer sur entrer.

Si vous voulez supprimer une page, alors vous pouvez simplement faire un clic droit ici et supprimer cela comme cela.

Ou peut-être si vous voulez la renommer, alors vous pouvez cliquer ici.

Donc, je vais supprimer cela, d'accord, je n'en ai pas besoin.

Donc, tous nos designs sont disposés dans ces pages ici.

Tout d'abord, vous avez le bouton Démarrer ici, je veux dire la page de démarrage ici, vous pouvez voir cela.

Donc, vous pouvez voir cette miniature ici, la page des sujets couverts ici, les points d'arrêt ici.

Et si je viens à cette page dekstop, vous allez trouver le design web pour la version suivante.

D'accord, si je clique sur cet ordinateur portable ici, vous allez trouver le design pour cette version ordinateur portable.

D'accord, de même pour la tablette aussi.

C'est le design pour la version tablette.

C'est la version mobile.

Celle-ci est le test de réactivité.

Je vais discuter de cette partie lorsque je discute des contraintes fournissant celle-ci, Partie Numéro huit, j'ai inclus un petit échantillon sur cette page ici afin qu'ils puissent tester comment les produits fonctionnent dans figma.

Donc, je vais discuter du paradis dans la Partie numéro cinq.

Et cette page, la page des actifs porte tous nos actifs, toutes nos illustrations et icônes de médias sociaux, nous allons rendre notre design web facile, tous ces actifs ici et cette section, la section des crédits porte tous les liens d'où j'ai téléchargé les illustrations.

D'accord, donc vous pouvez voir cela ici, si vous double-cliquez ici comme cela, alors vous pouvez copier ce lien, et vous pouvez aller à ce lien et voir la source originale des illustrations.

Très bien, puis je suis de retour à la page de démarrage ici.

Et maintenant nous sommes ici, je vais créer un nouveau cadre, d'accord, au fait, tous nos designs sont disposés en deux cadres, d'accord, si j'appuie sur F, ou si je clique ici, ce bouton de cadre, ne vous inquiétez pas, je vais discuter en détails, je vais tous les outils sur ce panneau supérieur, et sur ce panneau droit ici, d'accord, si je sélectionne ce cadre ici, et si je le fais glisser comme cela, comme cela, d'accord, au fait, concernant les mouvements de base, vous pouvez utiliser la molette de votre souris pour aller de haut en bas comme cela, d'accord, si vous appuyez sur Maj et tournez la molette de votre souris, vous pouvez aller de gauche à droite comme cela.

D'accord, si vous appuyez sur Ctrl, et si vous utilisez la molette de la souris, alors vous pouvez zoomer et dézoomer comme cela, regardez cela.

Très bien.

Très bien, donc je suis de retour ici sur ce cadre ici, tous nos designs dans tous nos éléments sont disposés en cadres, d'accord, disons que j'ai un cercle, d'accord, je vais appuyer sur une balle.

Et je vais dessiner un cercle ici comme cela, cela, et maintenant je vais créer un rectangle, d'accord, si j'appuie sur r sur mon clavier, alors je peux dessiner un rectangle ici comme cela.

Disons que je veux du texte, d'accord, si j'appuie sur t sur mon clavier, et clique ici, alors je peux écrire du texte, d'accord, comme cela.

Contrôle a, et vous augmentez la taille de la police ici à 50.

Pas 50, disons 200.

D'accord, comme cela, regardez cela, nous avons du texte ici aussi.

Et regardez ici, c'est notre cadre, d'accord.

Et ce cadre porte tous nos éléments ici, cela, cette ellipse ici, vous voyez cette ellipse, elle est mise en évidence en bleu, vous pouvez voir cette couleur bleue en surbrillance, d'accord ? Si je mets en évidence le rectangle, regardez cela, je sélectionne le rectangle, d'accord, si je sélectionne le texte ici, comme cela, regardez, il est mis en évidence ici.

Et voyez-vous ces deux boutons ici, si je clique ici, alors il va me cacher le cadre comme cela, regardez cela.

D'accord, maintenant regardez cela, je peux déplacer ce cadre où je veux.

D'accord, si je le fais comme cela, regardez cela.

Mais si nous voulons verrouiller la position de ce cadre, ce que vous pouvez faire, c'est cliquer ici, le cadre, ou vous pouvez simplement cliquer sur le nom ici, généralement, vous voyez ce cadre numéro 52, je vais cliquer ici sur le nom, et puis je vais cliquer sur ce bouton de verrouillage ici, alors il va verrouiller ma position, il ne va pas bouger de sa position, il va rester fixe ici, y compris tous les actifs qui sont portés sur le cadre.

Maintenant regardez, je ne peux pas sélectionner le texte, je ne peux pas sélectionner ces formes ici non plus, cela va se verrouiller ici.

Pour le déverrouiller, je vais cliquer ici comme cela, déverrouiller.

Maintenant je peux le déplacer et je peux sélectionner tous ces éléments ici aussi comme cela.

Donc je vais supprimer ce cadre ici comme cela.

Très bien, maintenant nous allons garder notre contenu à l'intérieur de notre cadre tel quel, ou nous pouvons aussi les arranger en groupes, nous pouvons les regrouper directement, ou nous pouvons aussi utiliser l'option Auto Layout.

Donc si je les sélectionne tous ici, et si je fais un clic droit ici, et nous allons obtenir cette option ici, auto layout, ajouter auto layout, je vais discuter en détails de cet outil sur la partie numéro sept ici.

Donc si je fais un clic droit ici, alors je vais obtenir cette option Ajouter Auto Layout.

Avec cela, j'ai cette option de sélection de groupe, si je clique dessus, cela va se comporter comme un groupe.

D'accord, si je retire ma souris et clique ici, en dehors de cette boîte, alors regardez cela, cela enlève le contour bleu.

Si je clique ici, si je survole ici, regardez, tous les éléments sont mis en évidence, ce qui signifie qu'il agit comme un groupe.

D'accord.

Donc si je veux dissocier ce groupe, ce que je vais faire, c'est cliquer ici et Ctrl Shift g Ctrl, Shift g comme cela.

Maintenant regardez, il va se comporter individuellement comme cela, regardez cela, cela se comporte individuellement, il y en a un qui se comporte individuellement, il y en a un aussi.

Même chose pour l'option de disposition orale.

D'accord, maintenant je vais les remplir tous à nouveau et je vais créer un nouveau groupe ici.

D'accord, sélection de groupe.

Maintenant regardez, il se comporte comme un groupe.

D'accord, disons que vous voulez déplacer, d'accord, maintenant disons que vous voulez simplement sélectionner le rectangle et rien d'autre.

Donc dans ces cas, ce que vous devez faire, c'est double-cliquer sur le rectangle comme cela, il y a juste comme juste le rectangle ici, ou ce que vous pouvez faire, c'est appuyer sur Ctrl sur votre clavier et cliquer une fois ici, puis sélectionner uniquement le rectangle.

Si vous voulez juste le texte, vous allez sélectionner Ctrl sur votre clavier et simplement sélectionner le texte ici comme cela, ou ce que vous devez faire, c'est sélectionner tout cela, et puis double-cliquer ici comme cela.

Regardez cela, il va sélectionner votre texte ici.

Maintenant nous allons discuter en détails de tous les outils qui sont listés sur la barre du haut ici, celui-ci ici, et tous les outils qui sont listés sur le côté droit ici.

Donc, commençons.

Très bien, la toute première chose dont je veux parler est le mouvement, comment allez-vous avancer et reculer dans votre fichier figma, d'accord, donc si vous appuyez sur maj, et puis si vous faites défiler la molette de votre souris, alors vous pouvez aller à gauche et à droite comme cela, regardez cela.

D'accord, donc si vous relâchez cette maj et utilisez simplement le défilement de votre souris, alors ce que vous pouvez faire, c'est simplement faire défiler de haut en bas comme cela, regardez cela.

D'accord, donc pour aller de haut en bas, vous allez utiliser le défilement de la souris comme cela, d'accord ? Comme cela.

Et si vous voulez aller de gauche à droite, alors ce que vous allez faire, c'est appuyer sur maj, et puis vous allez faire défiler votre souris comme cela, d'accord, cela vous fait aller de gauche à droite, si vous voulez zoomer et dézoomer, ce que vous allez faire, c'est appuyer sur Ctrl, et puis vous allez utiliser le défilement de votre souris comme cela, regardez cela, je dézoome.

Et puis je zoome comme cela, regardez cela, d'accord, et vous pouvez aussi utiliser cet outil de main ici, d'accord ? Si vous survolez ici, ou peut-être que vous pouvez aussi utiliser h, t sur votre clavier comme cela.

Et puis vous pouvez pincer le bouton gauche de votre souris, ou vous pouvez simplement cliquer ici, et vous pouvez simplement avancer et reculer comme cela, regardez cela.

Nous y voilà.

Parlons de cette fonctionnalité ici.

Donc, si vous cliquez ici, vous avez deux options, l'option de déplacement et l'option d'échelle.

Tout d'abord, regardons l'option de déplacement.

D'accord.

Donc, si je clique sur cette option de déplacement, ou le raccourci V, d'accord, vous pouvez voir tous les raccourcis ici v pour déplacer et mettre à l'échelle, c'est la clé, d'accord, donc je vais sélectionner cette option de déplacement ici, V, d'accord, et puis je vais venir ici, et puis je vais sélectionner ce cadre, afin d'aimer ce cadre, vous allez sélectionner ce nom ici.

Et puis ce que vous allez faire, c'est le déplacer comme cela, regardez cela, vous pouvez le déplacer librement, indépendamment, n'importe où vous voulez.

D'accord, vous pouvez sélectionner n'importe quel cadre que vous souhaitez, par exemple, disons que je veux sélectionner ce cadre ici, d'accord ? Et puis je vais le déplacer n'importe où je veux comme cela, parce que cela je peux le déplacer comme cela, pas seulement le cadre, vous pouvez déplacer n'importe quel élément, d'accord, si vous voulez déplacer cette image, alors vous pouvez aussi la déplacer comme cela, regardez cela, je l'ai sélectionnée et je vais la déplacer comme cela.

Je peux la déplacer n'importe où je veux, comme cela.

D'accord, Ctrl zet.

Pour vous faire comprendre la fonction d'échelle, je veux dire, celle-ci encore mieux.

Tout d'abord, nous devons regarder la fonction de cadre, celle-ci et la fonction de rectangle ici.

Donc, allons-y.

Très bien, maintenant je vais venir ici et discuter du cadre.

D'accord, donc je vais venir ici et puis je vais sélectionner cela, ou raccourci, je vais appuyer sur F, d'accord, f comme cela, puis vous allez obtenir toutes ces options ici.

D'accord, qui savez-vous ce que sont celles-ci, ce sont vos, ce sont les largeurs d'écran de divers appareils.

D'accord, donc disons que je veux travailler avec le mobile.

D'accord, donc je vais cliquer sur ce téléphone ici et regardez cela, j'ai un iPhone 11 Pro max.

Et puis vous voyez celui-ci ici, cette mesure, c'est la largeur et la hauteur de l'écran.

D'accord, je peux aussi travailler avec iPhone huit, iPhone comme un Google Pixel deux, etc.

Nous avons beaucoup d'options ici.

Mais si vous ne voulez pas le téléphone, vous pouvez aussi opter pour la tablette, nous y voilà.

Et si nous voulons travailler avec le bureau, boom, nous y voilà.

Et vous pouvez aussi, vous pouvez même travailler avec une montre, comme une Apple Watch ici.

Et puis nous avons les dimensions des publications sur les réseaux sociaux ici aussi.

Mais si nous voulons faire quelque chose de personnalisé, ce que vous allez faire, c'est appuyer sur F comme cela, et puis cliquer ici comme cela et vous pouvez faire glisser cette petite icône ici n'importe où vous voulez et vous pouvez simplement personnaliser la largeur et la hauteur selon vos besoins.

D'accord, donc maintenant la prochaine chose dont je veux parler est celle-ci ici. D'accord, donc qu'est-ce que c'est, c'est un cadre. D'accord, il va me montrer que c'est un cadre, mais si vous voulez le changer, si vous voulez changer le cadre en un cadre personnalisé, disons que je veux travailler avec iPhone 11 Pro Max, d'accord, je vais sélectionner cela. Maintenant, regardez, il va changer la largeur et la hauteur comme cela, regardez cela, mais si nous voulons travailler avec, disons que nous avons Surface Pro pour, d'accord, regardez cette largeur et hauteur prédéfinies. D'accord, si je sélectionne cela, alors il va me donner cette largeur et hauteur.

Si je sélectionne cela maintenant, regardez, 1368 par 912 pixels, je veux dire 1368 est la largeur, 912 est la hauteur comme cela, regardez cela.

Et aussi vous pouvez simplement faire glisser comme cela selon vos besoins, d'accord, vous pouvez ajuster la largeur et la hauteur, d'accord ? Donc regardez cela, x et y, ce sont les coordonnées, je veux dire, où est votre cadre situé dans votre fichier figma, ce x et y représente cela si vous le faites glisser comme cela avec cela, votre cadre se déplace vers la gauche, je veux dire vers la droite, d'accord, si vous voulez le déplacer vers la gauche comme cela, alors vous pouvez aussi le faire comme cela.

Nous y voilà.

Si vous voulez le déplacer verticalement, alors vous pouvez le faire avec l'axe y ici comme cela.

Et si vous ne voulez pas cette fonctionnalité, alors vous pouvez simplement faire glisser votre cadre ici et je vais cliquer sur votre cadre ici et faire glisser n'importe où vous voulez.

Comme cela, regardez cela.

D'accord, disons que je veux le placer ici, d'accord, à côté de mes cours proposés, cadre ici comme cela, d'accord, je l'ai gardé ici, et il va me donner des calculs automatiques ici.

Je n'ai pas eu à m'en soucier.

Maintenant, regardons cette fonctionnalité ici, la largeur et la hauteur.

D'accord ? Vous pouvez le deviner par le nom.

Cela est utilisé pour définir la largeur et la hauteur de votre cadre ou peut-être de vos rectangles aussi, ou de n'importe quelle forme que vous voulez.

D'accord ? Donc je vais sélectionner cela.

Donc je vais sélectionner cela comme cela et regarder ces fonctionnalités ici.

D'accord, je vais sélectionner cela, et je peux définir les nombres individuellement, disons que je veux 800 pixels, d'accord, je vais écrire 800 pixels ici, nous y voilà.

C'est 800 pixels ici.

Vous pouvez aussi faire des calculs mathématiques ici aussi.

Disons que je veux ajouter 50 pixels, d'accord, je vais écrire 50 ici.

Maintenant, je vais appuyer sur entrer, regardez cela.

850 pixels, vous pouvez aussi faire des soustractions, des multiplications, etc, selon vos besoins.

D'accord, je vais, disons que je veux soustraire neuf pixels d'ici, c'est 859 pixels.

Donc moins neuf, entrer, nous y voilà.

858 50, qui est un carré.

D'accord, j'ai changé d'avis, je vais le définir à, disons, 350 ici, comme cela.

Regardez cela.

D'accord, donc savez-vous quel mode c'est ? C'est le mode portrait ici.

Et convertissons-le en mode paysage.

D'accord, je vais cliquer ici comme cela.

Et voyez-vous ces boutons d'outil ici ? C'est le mode portrait.

Et c'est le mode paysage.

Regardez cela.

Je regarde d'abord ma largeur et ma hauteur, d'accord, la largeur est 350.

La hauteur est 650, elle va être déplacée entre ces deux.

D'accord, laissez-moi vous montrer.

D'accord, je vais sélectionner cela ici.

Maintenant regardez.

Donc après avoir sélectionné ce bouton ici, maintenant regardez très attentivement.

La valeur de ces deux a sauté, c'était 650.

Avant, et maintenant c'est 350.

D'accord, c'était 315 heures.

650.

Maintenant regardez très attentivement, je vais le convertir en portrait. D'accord, comme cela, regardez cela, regardez cela, ces deux valeurs sautent en même temps, notre cadre change ici, regardez cela.

Nous y voilà.

Comme cela.

Si vous voulez changer l'angle d'un cadre, vous pouvez simplement faire glisser ici comme cela, regardez cela, je peux changer l'angle de mon cadre.

Regardez cela, il tourne.

D'accord, euh, laissez-moi zoomer un peu.

Maintenant regardez cela, il va tourner comme cela.

D'accord, nous avons des valeurs négatives, nous avons des valeurs positives.

Donc vous pouvez simplement le faire manuellement comme cela.

Je vais le régler à zéro comme cela.

Nous y voilà.

Boom.

Maintenant regardez cela ici.

C'est le rayon de coin.

D'accord ? Regardez ici très attentivement.

Je vais zoomer, vous voyez cela, cela est des coins pointus, d'accord ? Donc si je sélectionne cela, et si je fais glisser comme cela sur le côté droit, maintenant regardez.

Nous pouvons définir des courbes sur nos formes et cadres, d'accord ? Donc regardez cela.

Regardez très attentivement.

Regardez cela, vous voyez cela ? D'accord, maintenant, laissez-moi parler de cela.

D'accord, le contenu de découpe, ce que c'est, d'accord, pour vous faire comprendre ce contenu de découpe, tout d'abord, je vais définir un peu de texte ici, d'accord ? Lui ou vous pouvez simplement sélectionner cette option ici, mais ne vous inquiétez pas, je vais expliquer en détails cet outil et toutes ces propriétés.

D'accord, cela arrive.

Attendez une minute, d'accord.

Je vais cliquer ici et puis cliquer ici comme cela, regardez, et je vais sélectionner un peu de texte ou il est très grand.

D'accord, donc je vais, ce que je vais faire, c'est que je vais sélectionner ici, d'accord.

180 pixels.

Je vais le définir à 60 ici comme cela.

Regardez cela.

ADF D'accord.

Oh, désolé.

fidf.

D'accord, juste un peu de texte aléatoire.

D'accord.

J'ai juste placé un peu de texte aléatoire ici comme cela.

Regardez cela.

ABC.

ABC.

Cela a plus de sens.

D'accord, maintenant regardez ce qui se passe.

D'accord, je vais enlever ce contenu de découpe d'ici.

D'accord.

Regardez, rien n'est défini ici.

D'accord, maintenant regardez, ce que je veux dire, c'est que lorsque je le redimensionne comme cela, regardez cela.

D'accord ? Le texte est à l'extérieur, le texte est à l'extérieur.

Et le cadre est redimensionné comme cela, regardez cela.

D'accord, vous pouvez clairement voir le contenu.

Même si nous redimensionnons notre cadre, vous pouvez voir que vous pouvez clairement voir le contenu, même si nous redimensionnons notre cadre, même si le cadre est plus petit que le contenu.

Mais regardez très attentivement.

Qu'est-ce qui se passe si j'active le contenu de découpe ici comme cela, regardez ? Il est coupé comme des ciseaux.

D'accord.

Maintenant, si je le redimensionne, maintenant vous pouvez voir visiblement toutes les parties de notre contenu ici.

D'accord, comme cela.

Regardez cela.

Maintenant, laissez-moi expliquer cette fonctionnalité ici.

Vous voyez cette fonctionnalité ? Redimensionner pour s'adapter.

Maintenant, regardez, qu'est-ce qui se passe si je clique dessus ? D'accord, nous y voilà.

Il redimensionne, je veux dire, il supprime tous les espaces et ajoute juste à notre contenu.

Il y en a un ici.

Cela est très utile lorsque nous faisons des boutons.

Laissez-moi donner un exemple.

D'accord, contrôle Zed.

Disons que je vais faire un bouton. D'accord, V UTP.

Ou comme cela, et je vais le rendre plus petit, disons 30 pixels, d'accord ? Et maintenant regardez, et regardez, au lieu de faire cela comme cela manuellement comme cela, nous devons faire beaucoup de travail ici et puis le centrer ici.

Comme cela, et puis il est appelé un bouton ici comme cela, au lieu de faire ce travail difficile, ce que vous pouvez faire, c'est contrôle Zed, Zed, Zed, Zed, cela signifie que je vais, je veux dire, je reviens, d'accord, en faisant contrôle Zed, comme cela, regardez cela.

Donc, ce que vous pouvez faire, c'est simplement, vous cliquez simplement sur votre cadre, et puis vous cliquez ici.

Redimensionner pour s'adapter, nous y voilà, boom, nous nous sommes fait un bouton.

C'est juste un échantillon sur la façon de créer un bouton.

Mais après quelques minutes, je vais discuter en détails comment faire un bouton en utilisant la disposition automatique.

Je veux dire, il y en a un ici avec des calculs appropriés.

Donc, attendez quelques minutes.

Donc, une fois que c'est fait, je peux ajuster les coins ici comme cela, regardez cela, nous y voilà.

Comme cela, je peux ajuster les coins, et puis je peux le faire tourner ici comme cela, regardez cela, d'accord, sur l'exact.

Et concernant le rayon de coin, regardez cela, j'ai ce coin, je veux dire, je l'ai défini à huit pixels, ce qui signifie qu'il va dire huit pixels ici, huit pixels ici, ici, ici.

Disons que je ne voulais pas que le rayon de coin soit sur le côté droit, je veux juste qu'il soit sur le côté gauche, juste un seul côté.

Donc, que pouvons-nous faire dans ce scénario, je vais sélectionner cela ici, et je vais cliquer sur cette petite icône ici, d'accord ? Et puis regardez cela, cela s'appelle des coins indépendants, il est défini à huit pixels pour les quatre coins.

D'accord, donc disons que je ne voulais pas l'aire de coin sur le côté droit, je voulais juste sur le côté gauche.

Donc, ce que je vais faire, c'est que je vais le faire comme cela, d'accord, c'est le haut, c'est le haut gauche.

D'accord, c'est un haut droit, je vais sélectionner cela et je vais le définir à zéro comme cela, regardez cela.

Maintenant regardez, l'effet de coin est supprimé.

D'accord, je vais le sélectionner à nouveau.

Et je vais sélectionner le haut gauche, le haut droit, le bas gauche, le bas droit, celui-ci, d'accord, je vais sélectionner cela 00 en fait, désolé, mon erreur, j'ai choisi le mauvais coin ici, ce que vous apprenez des erreurs, n'est-ce pas ? Donc je vais le sélectionner à nouveau, et je vais dire huit pixels ici et zéro ici, comme cela, et puis entrer.

Regardez cela.

J'ai des coins ici sur le côté gauche, pas sur le côté droit.

Nous y voilà.

Maintenant, discutons de cette fonctionnalité, obtenez la fonctionnalité de découpe.

Donc, à quoi cela sert-il, laissez-moi venir à mon, laissez-moi supprimer cela, d'accord ? Je vais venir sur ce cadre ici, d'accord, disons que je ne veux pas toute l'image, je veux juste la tête, d'accord, je veux juste télécharger la tête, je veux juste travailler avec la tête.

D'accord, donc ce que je vais faire, c'est que je vais cliquer ici, découper, d'accord ? Et puis je vais dessiner un rectangle ici sur la section de la tête, pouvez-vous voir cela correctement ? D'accord, nous y voilà.

Maintenant regardez, j'ai une petite découpe ici, vous pouvez voir cela, d'accord ? Maintenant ce que je vais faire, c'est que je vais sélectionner cette découpe ici, soit d'ici, soit je peux la sélectionner directement ici, d'accord, et puis je peux ajuster la largeur et la hauteur aussi comme cela, regardez cela.

Très bien, et je peux aussi la déplacer comme cela, regardez cela, nous y voilà.

Et puis je vais cliquer dessus ici.

Et puis pouvez-vous voir ce bouton Exporter ici, je vais cliquer sur cet export, qui télécharge cela, d'accord, je vais cliquer sur ce signe plus ici.

Et vous pouvez définir la qualité de l'image aussi, vous pouvez la définir en PNG, jpg, SVG, je vais le faire en SVG.

D'accord, je vais sélectionner cela, et puis je vais exporter cela, regardez cela, j'ai téléchargé un petit fichier ici.

Donc, ce que je vais faire, c'est que je vais le faire glisser ici comme cela, regardez cela, je viens de regarder cela ici, je viens de télécharger, je veux dire, je viens de découper la tête, parce que je veux juste travailler avec la tête.

D'accord, maintenant regardez, regardez cela.

Cela est égal à celui-ci ici, cette découpe ici, j'espère que vous avez bien compris la découpe.

Maintenant, concernant ce bouton Exporter, vous pouvez télécharger tout ce que vous voulez.

D'accord, laissez-moi vous donner une démonstration.

D'accord, je vais supprimer cette maison ici.

Et en même temps, je vais supprimer cette découpe d'ici aussi.

Et disons que je veux télécharger ce cadre unique ici, d'accord, juste un cadre unique, ou peut-être même juste le séchage, nous sommes ici, je suis dans l'illustration, je veux juste télécharger l'illustration et rien d'autre.

Ou vous pouvez aussi télécharger plusieurs fichiers en cliquant sur celui-ci et puis en appuyant sur Maj, puis en cliquant comme cela, puis en cliquant comme cela aussi.

Maintenant, disons pour garder cela simple, je vais télécharger cette image, d'accord, je vais cliquer ici, et puis je vais faire défiler vers le bas au bouton ici.

Et puis regardez cela, j'ai le bouton Exporter, je vais cliquer ici et puis regardez cela.

Vous pouvez changer la taille aussi, vous pouvez la télécharger deux fois, trois fois ou quatre fois la taille réelle, d'accord ? Et puis nous avons les formats PNG, SVG, jpg, PDF, etc, d'accord, vous pouvez télécharger où vous voulez, je veux dire, vous pouvez télécharger, vous pouvez télécharger dans n'importe quel format que vous voulez et puis vous allez appuyer sur ce bouton exporter le cadre.

Et oui, cette fonctionnalité, cette option de prévisualisation est donnée juste pour vous faire savoir ce que vous téléchargez. D'accord, vous pouvez voir cela, j'ai juste sélectionné ce cadre, je veux dire, cette illustration ici, disons que je veux voir comme ce texte ici, d'accord, je vais sélectionner ce texte et je vais sélectionner cet export comme cela.

Et regardez cela.

Il donne, il me donne cette prévisualisation que j'ai juste téléchargée là.

texte ici.

Maintenant, discutons de la fonctionnalité de forme.

D'accord, donc je vais venir ici, vous voyez cette forme, elle ressemble à un carré, d'accord, je vais sélectionner cela comme cela, regardez cela, j'ai beaucoup d'options.

J'ai un rectangle, une ligne, une flèche, une ellipse, un polygone, etc.

Disons que je veux un polygone, désolé, je veux une ellipse, d'accord, je vais cliquer ici, ou je peux sélectionner Oh, donc je vais sélectionner tout comme cela et regardez cela, je peux faire un cercle ici.

Mais regardez, ce cercle semble déformé.

Et il va être très difficile pour moi de faire un cercle parfait.

Donc dans ce cas, ce que je vais faire, c'est que je vais sélectionner, je veux dire, je vais appuyer sur Maj.

Maintenant regardez, il est instantanément devenu un cercle parfait.

Et maintenant en maintenant Maj, je peux simplement déplacer ma souris et regardez, il va me donner un cercle parfait comme cela.

Regardez cela.

D'accord, c'est un cercle parfait ici, je vais le supprimer.

Et j'ai plus d'options comme un rectangle, d'accord ? Et je vais sélectionner un rectangle comme cela, regardez cela.

D'accord, je peux le faire où je veux.

Je peux le déplacer où je veux.

Et je peux sélectionner la largeur et la hauteur en conséquence.

D'accord, regardez cela.

Je déplace cela et je le redimensionne comme cela.

Et voyez-vous ce petit point ici, ce point, ce point, ce point ici, il est utilisé pour définir le rayon, regardez ce rayon de coin, vous pouvez le faire ici, ou vous pouvez, vous pouvez le faire ici directement comme cela.

Ou ce que vous pouvez faire, c'est sélectionner ces options ici, d'accord, comme cela, comme je vous l'ai dit un peu plus tôt, d'accord, vous pouvez le faire comme cela aussi.

Et oui, vous vous souvenez du bouton d'échelle ? Je me souviens de cet outil d'échelle ici.

Celui-ci, comme je vous l'ai dit que je vais discuter en détails après avoir discuté de ce cadre et de ce rectangle.

Maintenant, je vais discuter de cela.

D'accord, donc à quoi sert le bouton d'échelle, disons que vous voulez mettre à l'échelle, je veux dire, vous voulez quelque chose, disons que vous voulez faire quelque chose de plus grand.

D'accord ? Donc dans le cas de ce cercle, vous vous souvenez de ce cercle, ce cercle déformé, d'accord, avec cela, vous ne pouvez pas en faire un cercle parfait.

Disons que j'ai sélectionné un décalage.

D'accord, décalage.

Maintenant regardez, il ressemble à un cercle parfait.

D'accord, j'ai relâché la puce, puis disons que vous voulez le rendre un peu plus grand.

D'accord, ce que vous faites normalement, c'est que vous allez sélectionner cela comme cela, regardez cela, d'accord, lorsque vous essayez de le rendre plus grand, il va se déformer à nouveau.

Donc dans ce cas, ce que vous pouvez faire, c'est simplement sélectionner le décalage, et il va redimensionner en conséquence.

Ou ce que vous pouvez faire, c'est sélectionner cette fonction d'échelle ici, vous pouvez la sélectionner directement ici ou vous pouvez simplement sélectionner l'option K sur votre clavier, d'accord, d'accord.

Et regardez cela, j'ai une icône différente sur ma souris, d'accord, je vais sélectionner V, ce qui signifie déplacer, d'accord, regardez cette icône sur ma souris.

D'accord, je vais zoomer un peu sur cela.

C'est V, c'est pour le déplacement, c'est le défaut.

Et si je veux redimensionner cela K, regardez cette échelle, et c'est le déplacement.

D'accord, je vais donner K ici comme cela.

Maintenant, je vais redimensionner. Regardez, il va redimensionner proportionnellement, et des mesures proportionnelles, d'accord, maintenant regardez cela, d'accord ? 788 par 788.

D'accord, je vais le redimensionner à nouveau.

Maintenant regardez cela, il va me donner des mesures de proportion exactes.

Donc, je vais enlever ce cercle d'ici et je vais dessiner un carré parfait, d'accord, décalage, et puis, oh, désolé, je vais appuyer sur R, ce qui signifie rectangle, ou vous pouvez simplement le sélectionner d'ici aussi, et décalage et puis faire glisser comme cela.

Regardez cela.

C'est un carré parfait.

D'accord, maintenant parlons de cette fonctionnalité, cette fonctionnalité de champ. D'accord, cela est utilisé pour colorer votre rectangle, je veux dire, colorer vos formes comme cela.

Pour cela, vous pouvez le colorer comme vous le souhaitez.

Vous pouvez aussi mettre la valeur hexadécimale, vous pouvez aussi changer l'opacité ici, vous pouvez aussi utiliser ces couleurs prédéfinies.

Disons que je veux utiliser le bleu ciel ici parce que cela permet aussi d'utiliser l'outil pipette.

D'accord, si vous sélectionnez cet outil pipette, alors vous pouvez sélectionner ce que vous voulez.

Disons que je veux que ma boîte soit de la couleur de cela.

D'accord, donc j'ai cette pipette dans ma main.

Et quand je sélectionne cela ici, comme cela, maintenant regardez mon carré ici, regardez, c'est la même couleur que celui-ci ici.

Maintenant, regardons plus de fonctionnalités que nous avons sur le panneau droit ici.

D'accord, ces fonctionnalités. D'accord, je vais le sélectionner ici et je vais le changer en couleur par défaut.

D'accord, attendez une minute, e4, e4 info comme cela.

Oh, désolé.

Nous y voilà.

C'est c quatre c quatre, c quatre.

Très bien, donc la première chose dont je veux discuter est le trait.

Donc, ce que cela fait, c'est qu'il donne un trait autour de notre boîte.

D'accord, laissez-moi vous montrer. D'accord, je vais sélectionner cela comme cela.

Nous allons, cela va me générer un petit trait ici.

D'accord, pouvez-vous voir ce contour noir ici ? Je vais augmenter sa largeur, d'accord, comme cela, regardez 345678 910 donc le trait est de 10 pixels.

D'accord, pouvez-vous voir ce trait noir ici.

Vous pouvez aussi changer les diverses propriétés comme la couleur, la taille, puis si elle doit être à l'intérieur de la boîte.

Doit-elle être au centre ou doit-elle être à l'extérieur de la boîte comme cela, regardez cela, vous pouvez aussi cacher l'ombre, je veux dire, vous pouvez aussi cacher le trait comme cela.

Si vous sélectionnez ce bouton œil ici comme cela, regardez cela.

Vous pouvez aussi cliquer ici à nouveau, et il va me montrer le trait ici.

Et si vous voulez supprimer ce trait définitivement, vous pouvez aussi utiliser le bouton moins ici comme cela, regardez cela, il est parti.

D'accord, maintenant nous allons regarder cette fonctionnalité FX.

D'accord, pour cela, je vais simplement redimensionner cela un peu comme cela.

D'accord, maintenant, si je sélectionne ce bouton d'effet, regardez cela, j'ai ce panneau ici, d'accord, j'ai beaucoup d'options.

Comme si je veux faire une ombre portée, ou si je veux un flou de couche, ou peut-être un flou d'arrière-plan, nous avons aussi Inner Shadow.

Pour l'instant, je vais vous montrer l'ombre portée.

D'accord, je vais sélectionner cela ici.

Et oui, vous pouvez expérimenter par vous-même.

Et regardez cela, j'ai une petite ombre, vous voyez cette ombre à l'arrière de ce rectangle ? Laissez-moi enlever cet enfant.

D'accord, regardez cela.

Vous voyez cela ? Voyez-vous l'ombre là-bas ? D'accord, je cache l'ombre.

Maintenant, laissez-moi ramener cette ombre.

Regardez cela.

Donc cette ombre portée est utilisée pour faire des ombres, dessiner des formes, des cadres, des boutons, des cartes, etc.

Très bien, donc maintenant regardez cela ici.

Cela s'appelle le réglage de l'effet.

D'accord, donc je vais cliquer ici et puis je peux ajuster l'ombre.

D'accord, donc c'est le x, ce qui signifie que mon ombre va se déplacer de gauche à droite comme cela, regardez cela.

D'accord, regardez cela, regardez, mon ombre se déplace de gauche à droite, si je veux, si je veux déplacer l'ombre, de haut en bas, comme cela, je vais utiliser ce bouton large ici.

D'accord, comme cela.

Regardez cela.

Et puis si je veux que l'ombre se répande, je vais utiliser la propagation ici comme cela, regardez, regardez, l'ombre devient plus grande, d'accord, et plus petite aussi.

Et vous pouvez aussi changer la couleur ici, l'opacité ici aussi.

Et si vous voulez changer le flou, vous pouvez le faire comme cela.

Nous y voilà.

Nous augmentons le flou.

Donc nous allons inclure cette ombre portée lorsque nous faisons des boutons.

D'accord, laissez-moi vous donner une démonstration.

Regardez cela, nos boutons ont une petite ombre portée ici, ainsi que ces cartes, regardez ces cartes.

D'accord, cela a une ombre portée.

Donc lorsque nous faisons cette mise en page, je veux dire, lorsque nous faisons ce design, nous allons utiliser cette ombre portée.

Tout ce que j'ai discuté jusqu'à présent, c'est la section design, d'accord, sur le panneau de droite.

Donc, c'est un prototype ici.

Après quelques minutes, je vais discuter de cela pour un live. D'accord, donc ne vous inquiétez pas, et regardez cela, inspectez ici.

D'accord, donc si je vais à inspecter, alors cela va me générer du code CSS.

Disons que je veux le code de celui-ci.

D'accord, cette section ici, alors je vais sélectionner cela ici et regardez cela.

Il génère le CSS ici comme cela, regardez cela.

Si vous êtes un développeur, vous pouvez gagner du temps.

Regardez cela, affichez, flex, direction de flex, colonne, justifiez le contenu du centre, alignez les éléments, cliquez sur le début, et ainsi de suite, ainsi que toutes ces mesures de pixels ici ainsi que le rembourrage avec la hauteur, etc.

Donc, cet outil d'inspection est très pratique.

Très bien, maintenant je vais discuter en détails de tous ces outils ici.

Ce sont les outils d'alignement.

D'accord ? Donc, pour discuter de cela, je vais venir ici et je vais dessiner un cadre, d'accord, F et puis je vais le faire glisser comme cela, regardez cela.

D'accord, donc maintenant je vais écrire du texte, d'accord, D, et puis cliquer ici, et puis du texte ici, d'accord, comme cela.

D'accord, laissez-moi écrire ABCD.

D'accord, ABCD comme cela en passant par une lettre majuscule A, A, A, B, C, D, nous y voilà.

Disons que je veux que ce texte soit au centre.

Donc, que allons-nous faire ? D'accord, donc si nous venons ici, regardez cet alignement horizontal du centre, si je clique ici, comme cela, maintenant regardez, notre texte est au centre, horizontalement, d'accord ? Si je voulais qu'il soit au centre verticalement, je veux dire, si je voulais qu'il soit au centre ici, donc ce que je vais faire, que vais-je cliquer, je vais cliquer ici, regardez cela.

C'est l'alignement vertical des centres comme cela, regardez cela, il est au centre, à la fois horizontalement et verticalement.

Disons que je veux le déplacer à gauche, à gauche, d'accord, ce que je vais faire, c'est que je vais cliquer ici, comme cela.

C'est l'alignement à gauche.

Si vous voulez l'alignement à droite, vous pouvez aussi le faire comme cela, cette option ici comme cela.

Donc, vous pouvez expérimenter avec toutes ces valeurs ici.

Et concernant cela, je vais supprimer cela ici comme cela en un clin d'œil.

Et concernant ce panneau ici, je suis dans cet outil ici.

Et concernant ce texte, c'est le nom du fichier, d'accord, si vous double-cliquez ici, alors vous pouvez le renommer. D'accord, donc je vais le garder comme fichier figma ici, je suis dans le tutoriel figma ici comme cela et si vous cliquez ici comme cela, vous pouvez télécharger ce fichier figma, vous pouvez aussi le dupliquer, vous pouvez le renommer n'importe quel but pour supprimer cela aussi.

Donc, ce sont les options que vous avez.

Vous pouvez aussi le partager avec leurs amis ce que vous avez créé jusqu'à présent, comme vous avez créé ces cadres ici si vous voulez le partager avec leurs amis ou peut-être si vous voulez le partager avec vos clients, alors vous pouvez cliquer sur l'option Partager ici et puis vous allez trouver les détails appropriés.

D'accord, donc je vais enlever cette nuit maintenant et d'accord, maintenant concernant ce bouton ici, cela s'appelle un bouton présent.

Donc, si vous cliquez ici, alors vous pouvez voir vos designs en direct en même temps.

Si vous travaillez avec un prototype, alors vous pouvez aussi voir votre, je veux dire, vous pouvez aussi tester l'interactivité de vos prototypes en direct.

Ne vous inquiétez pas, je vais discuter de ce produit après quelques minutes.

D'accord ? Donc, disons que je vais cliquer ici, d'accord, après avoir sélectionné ce design ici, d'accord, je vais cliquer ici, je peux le sentir ici.

Maintenant regardez cela, c'est le programme de type bureau.

D'accord ? Et si je viens ici, si je clique sur cette flèche ici, alors cela va aller à la prochaine comme cela.

Attendez une minute, ce sont les sections.

Regardez cela.

C'est mon design ici.

D'accord, je peux le voir ici.

Non, non, c'est très grand.

D'accord, je veux le rendre petit.

Donc, ce que je vais faire, c'est que je vais venir à ces options, et puis je vais, je vais sélectionner cela, je vais sélectionner cela, mis à l'échelle pour s'adapter, d'accord, comme cela.

Nous y voilà.

Maintenant, maintenant cela a l'air beaucoup mieux.

D'accord, donc je vais venir ici, et je vais aller à la prochaine.

Ou peut-être que vous pouvez aussi utiliser une flèche droite comme cela, regardez cela, il va passer au cadre suivant comme cela.

Donc, de cette manière, vous pouvez prévisualiser vos designs, ce que vous créez jusqu'à présent, d'accord, vous pouvez le voir comme cela.

Regardez cela.

Nous y voilà.

Maintenant nous allons discuter de l'outil texte en détails.

Donc cet outil ici, l'outil texte est utilisé pour ajouter du texte à tous les designs web.

Donc si vous observez attentivement que chaque design, l'ordinateur, la tablette, l'ordinateur portable, le mobile contient ce graphique ici, d'accord, ce graphique de guide typographique montre ce que devrait être la taille de police du logo, la taille de police des éléments de navigation, la taille de police du texte grand, la taille de police du texte petit, le texte du bouton, etc, ainsi que la hauteur de ligne ici.

Donc vous pouvez voir que la hauteur de ligne du grand devrait être 90 et la hauteur de ligne du petit devrait être 43.

Ici.

Même chose pour le design mobile, regardez cela ici, j'ai inclus le guide typographique mobile ici, le logo, ce logo est de 48 pixels, puis le texte grand 32, le bouton est de 24 pixels, et ainsi de suite.

Il est également mentionné pour l'ordinateur portable.

Donc regardez cela ici, c'est le design de l'ordinateur portable ici.

Et celui-ci est la typographie pour le design de l'ordinateur portable.

D'accord, donc le logo est de 60 pixels, le bouton devrait être de 30 pixels, et ainsi de suite.

Donc je vais venir ici, et ici, je vais créer soit un rectangle soit un cadre, donc vous pouvez, nous pouvons appuyer sur r comme cela, et il va me créer un rectangle, ce que je vais utiliser un cadre ici, d'accord, contrôle cela.

Donc si vous appuyez sur F comme cela, il va créer un cadre comme cela, regardez cela.

D'accord, je vais rendre le cadre un peu plus petit, disons 1000 par 500.

D'accord, cela suffira pour ce tutoriel comme cela, regardez cela.

Très bien, puis pour utiliser l'outil texte, vous cliquez directement ici comme cela, et il va mettre en surbrillance le bleu ici et vous allez obtenir un signe plus sur votre souris, pouvez-vous voir ma souris ici, elle est en signe plus, d'accord.

Et si vous voulez le faire de manière raccourcie, vous appuyez simplement sur t sur votre clavier comme cela T et il va mettre en surbrillance ce texte ici sur votre souris.

Et si vous cliquez n'importe où, alors vous pouvez obtenir ce signe ici, vous voyez cela, puis vous pouvez ajouter du texte comme cela, regardez cela, il est dit 210 pixels, mais par défaut, votre texte devrait être de 12 pixels comme cela, ce qui signifie que attendez une minute, il devrait être sur des pixels courbés comme cela, ce qui signifie qu'il va être très petit.

Donc ce que vous allez faire, c'est que vous allez cliquer ici, d'accord.

Et vous voyez cette option ici, cela est utilisé pour définir la taille de la police, donc quelle est la taille de la police de tous les ordinateurs de bureau, disons qu'elle est de 90 pixels pour le logo, d'accord ? Donc disons à neuf pixels, comme cela, regardez, il est défini à 12, je vais définir 90 ici comme cela, d'accord, payez cela, entrez et puis est le résultat, je veux dire ce résultat. D'accord, donc cela est utilisé pour définir la taille de la police.

Et celui-ci, vous voyez cela, cela est utilisé pour définir la famille de polices, elle est un peu définie à Roboto et si je clique ici, je peux changer la famille de polices aussi comme cela, elle devrait être, disons que nous allons dire à Poppins comme cela p o p p i ns Poppins, d'accord, maintenant regardez, la famille de polices change.

De même, je peux aussi écrire sans serif ici, sans.

Allons-y pour la sensation.

D'accord, je vais appuyer sur entrer comme cela.

Regardez cela, cela a changé.

Et si vous cliquez sur cette icône déroulante ici comme cela, alors vous avez des tonnes d'options pour les polices.

Vous pouvez choisir n'importe quelle famille de polices que vous voulez, comme cela, regardez cela.

Donc je vais dire à pop in comme cela p o p p i ns Poppins comme cela, et je vais nommer ici, un do.io comme cela, d'accord, parce que nous allons traiter avec ce logo après tout.

D'accord, donc maintenant la prochaine chose que je vais vous montrer est celle-ci, d'accord ? C'est le poids de la police, il est un peu défini à rouge, il est actuellement défini à régulier.

Vous pouvez aussi définir extra léger ici comme cela.

Regardez cela.

Le poids de la police change, d'accord ? Vous pouvez aussi dire de le définir à peindre comme cela, regardez cela, il est devenu mince.

Vous pouvez aussi dire à cela extra ball, regardez cela comment ce texte est gras.

D'accord, j'espère que vous l'avez compris jusqu'à présent.

Et vous voyez cela ici.

Donc cela est utilisé pour définir la hauteur de ligne, regardez cela, il est écrit en surbrillance là, la hauteur de ligne, d'accord, donc je vais l'insérer pour dire, disons régulier, d'accord, comme cela.

Donc, euh, ce logo devrait être régulier.

Et pour tester le texte, je suis dans un retest de cette hauteur de ligne, vous ne pouvez pas simplement le tester avec juste une seule ligne, vous avez besoin de plusieurs lignes, d'accord, donc je vais le supprimer ici comme cela, et je vais faire glisser celui-ci, juste du texte, vous voyez ce texte ici, je vais le faire glisser vers notre cas de test.

Donc, pour le faire glisser, ce que vous allez faire, c'est que vous allez contrôler, vous allez appuyer sur contrôle, d'accord, et puis simplement prendre ce texte ici comme cela.

Et puis je vais zoomer, et je vais cliquer sur l'ancien, je vais sélectionner le texte alt comme cela, ancien, et vous voyez que ma souris a une petite ombre dans son dos, comme deux mois ensemble.

D'accord, donc je vais sélectionner l'ancien texte et je vais déplacer ma souris comme cela, regardez cela, il est copié, d'accord, je vais venir ici et ne pas bouger.

D'accord, d'abord, relâchez simplement votre clic de souris comme cela, d'accord, et puis vous allez relâcher la touche Alt comme cela, regardez.

Maintenant, nous avons copié avec succès notre texte ici, d'accord ? Maintenant, regardez cela.

Maintenant, maintenant nous allons venir ici, et nous allons voir comme cela, comme cela, et puis nous allons voir cela, d'accord ? Regardez ici, la hauteur de ligne est définie à 43.

Et si nous voulons la changer, alors vous allez cliquer ici, ou vous pouvez directement, vous pouvez directement mettre le nombre ici comme cela, disons que je veux dire 210 pixels comme cela, d'accord ? Si je clique sur entrer, maintenant, regardez, il a 112 110 pixels d'écart ici.

Disons que je veux le définir à 20.

D'accord, vous pouvez directement l'entrer ici, comme cela 20, regardez cela, il est devenu très congestionné comme cela.

D'accord, donc si vous cliquez ici, vous voyez cela, j'ai obtenu une petite icône, d'accord, une icône de signe de flèche comme cela, je vais déplacer ma souris comme cela.

Maintenant, regardez, je peux pratiquer avec cela en temps réel comme cela sans m'inquiéter, je veux dire, sans entrer directement la valeur là-bas.

D'accord, regardez cela, je joue, je joue avec une souris afin que je puisse trouver ce point idéal, qui serait idéal, qui sera la hauteur de ligne idéale.

D'accord, donc je vais le changer à 43.

Comme cela, parce qu'il est en fait donné sur le guide de style ici.

Attendez une minute, ici, regardez cela, le petit texte, il devrait être de 30 pixels.

Et regardez cela, la hauteur de ligne devrait être de 43 pixels, d'accord ? Je vais venir ici comme cela.

Et regardez cela, le, la taille de la police est de 30 ici, et elle est définie à Poppins et la hauteur de ligne est de 43.

Ici.

Maintenant, voyez-vous cela ici, cela s'appelle un espacement de registre.

Donc la hauteur de ligne fonctionne comme cela, d'accord, mais l'espacement des lettres, la législation fonctionne comme cela va mettre un cap entre notre petit comme cela, d'accord, je vais vous montrer. D'accord, je vais le garder ici comme cela.

Et regardez très attentivement.

Oh, au fait, vous pouvez aussi entrer une valeur directe ici comme cela, clairement ici comme cela, alors cela va être 30%.

Ou peut-être que vous pouvez aussi définir cela, je veux dire, vous pouvez aussi utiliser cette souris ici, et vous allez obtenir ce petit signe de flèche, d'accord ? Donc je vais faire glisser comme cela, regardez cela, cela va changer selon le mouvement de ma souris.

D'accord, regardez cela, comme cela, cela fonctionne comme cela.

Donc cela est utilisé pour définir l'espacement du registre, j'espère que vous l'avez compris jusqu'à présent.

Je vais le définir à zéro ici comme cela.

Maintenant regardez cela.

Cela s'appelle l'espacement des paragraphes, d'accord, au cas où vous auriez plusieurs paragraphes, alors cela va fonctionner.

D'accord.

Donc si je fais glisser comme cela ici, alors vous pouvez voir ce comportement, cela fonctionne comme une hauteur de ligne, mais cela ne devrait pas fonctionner comme une hauteur de ligne.

Parce que j'ai en fait utilisé un peu d'écart ici comme cela, cela peut en fait vous montrer attendez une minute, je vais le définir à défaut contrôle cela contrôle défini à nouveau comme cela, d'accord.

Donc ce qui se passe, c'est que j'ai donné un peu de saut de ligne ici et là, donc cela se comporte comme un parallèle, mais si je le définis à cela, ou vous savez, état comme cela, attendez une minute, donnez-moi juste une seconde, d'accord ? C'est en fait l'état ordinal.

Regardez ce long texte ici.

D'accord.

Maintenant, je vais le réduire comme cela.

Regardez cela.

D'accord, je vais le réduire comme cela.

Et cela va se comporter comme cela.

D'accord, laissez-moi zoomer.

Nous y voilà.

J'espère que vous pouvez voir cela.

J'espère que vous pouvez voir mon écran.

D'accord.

Je vais regarder cela.

Cela se comporte juste comme un seul paragraphe.

D'accord, maintenant regardez, maintenant regardez ce qui se passe si je l'utilise.

D'accord.

Maintenant, regardez, cela ne fonctionne pas.

L'espacement des paragraphes ne fonctionne pas.

Cela ne fonctionnera que lorsque vous avez plusieurs paragraphes.

D'accord, laissez-moi vous montrer.

D'accord, je vais copier celui-ci ici comme cela.

Disons deux lignes, d'accord.

Ctrl C, et puis je vais le coller ici comme cela.

Ctrl V, nous y voilà.

Donc combien de parents avons-nous ? Nous avons deux parents.

Maintenant regardez cette hauteur de paragraphe.

Je veux dire, l'espacement des paragraphes, nous avons dit 23 pixels.

Je vais faire glisser ma souris comme cela.

Regardez cela.

Je peux voir la plage de cet espacement de paragraphe, mais regardez, il est défini à zéro, mais il y a un écart ici, c'est l'écart de votre hauteur de ligne.

Regardez cela.

D'accord, vous pouvez aussi écrire ici, mais si vous enlevez cet espace blanc d'ici, alors regardez, cela va-t-il fonctionner comme cela ? Maintenant regardez, il est défini à zéro, exact zoo.

D'accord, je vais le faire glisser ici comme cela.

Maintenant regardez, cela fonctionne parfaitement bien.

Nous y voilà.

Faisons la fonctionnalité suivante.

D'accord, je vais cliquer ici et regarder cela.

Voyez-vous cela ? C'est l'alignement du texte à gauche, l'alignement du texte au centre, l'alignement du texte à droite.

D'accord, expérimentons.

D'accord, donc je vais le faire glisser, je vais faire glisser la fenêtre comme cela, d'accord, ici comme cela.

Regardez cela.

Maintenant regardez, le texte se comporte du côté gauche, d'accord, l'alignement du texte à gauche.

Maintenant je vais changer le centre.

D'accord, vous voyez cette troisième ligne ici, regardez cela, elle est définie à gauche.

Maintenant, il va se déplacer au milieu comme cela, d'accord, si je clique ici, comme cela, l'alignement du texte au centre.

Maintenant regardez, cela change l'alignement, l'alignement du texte change pour le centre comme cela.

Et j'ai aussi l'option de droite ici, regardez cela, l'alignement du texte à droite.

Donc si nous voulons, si nous voulons l'option de justifier, vous allez cliquer sur cette petite icône ici, d'accord, attendez une minute, nous allons cliquer sur cette petite icône ici.

Et puis vous allez trouver cette justification ici, ce qui signifie qu'elle va, de manière appropriée, je peux distribuer également les espaces de manière à ce qu'elle remplisse toute la boîte ici.

D'accord, donc laissez-moi faire de ce para une ligne comme cela.

Maintenant regardez cela, vous voyez cela, cette ligne ici, et cette ligne ici, regardez, les textes sont également distribués à l'intérieur de la boîte de sorte qu'elle ressemble à un texte aligné justifié.

Très bien, donc j'espère que vous avez compris ces outils d'alignement ici.

Maintenant regardez cet outil ici, d'accord, ou une largeur, ou une hauteur, puis une taille fixe.

Donc, pour discuter de ces outils ici, tout d'abord, ce que vous allez faire, c'est réduire la taille de votre taille de police, d'accord ? Donc je vais la définir à, disons, disons 2020 pixels comme cela.

D'accord, maintenant, disons que je veux la faire glisser comme cela, d'accord, je vais faire glisser cette boîte comme cela.

Maintenant, regardez, cela se comporte comme une hauteur fixe, ce qui signifie que notre paire ici va occuper, qu'est-ce que cela, 912 pixels de poids en 286 pixels de hauteur.

Donc, cela va occuper autant d'espace sur notre design web ou peut-être sur notre cadre.

D'accord, donc je peux la faire glisser comme cela.

Maintenant, regardez, cela va, je veux dire, ces guides d'accrochage.

D'accord, vous voyez, ce guide de couleur orange Schiller ici va fonctionner selon notre boîte, je veux dire, la boîte qui porte le texte, d'accord, donc c'est ainsi que la hauteur fixe, je veux dire, la taille fixe fonctionne, mais si vous l'accrochez à ou une largeur, ce qui signifie qu'elle va envelopper le contenu à l'intérieur de la boîte, de sorte qu'il n'y ait pas d'espaces supplémentaires, regardez cela, vous voyez cette boîte ici, ainsi que les guides de couleur bleue, d'accord, donc je vais cliquer ici, ce qui est ou une largeur, maintenant regardez cela, cela va fonctionner comme si c'était une seule ligne, tout d'abord, et la prochaine chose est, ce n'est pas garder d'espaces supplémentaires.

D'accord, donc disons que, je veux casser la ligne, d'accord, je veux casser la ligne ici comme cela.

Donc vous pouvez aussi le faire, vous pouvez aussi casser la ligne comme cela, nous y voilà, cela va fonctionner comme cela.

Et si je, disons, pour une instance quelconque, cela change comme cela, d'accord, cela va, disons que cela a changé en cela.

Donc ce que vous allez faire, c'est que si vous voulez réduire ces espaces blancs, normalement, la plupart des gens, ce qu'ils font, c'est qu'ils vont le faire comme cela, regardez.

Ils vont le faire comme cela.

Mais cela ne vous donnera pas de mesures exactes.

Je veux dire, ce n'est pas le scénario idéal.

Donc ce que vous allez utiliser, c'est que vous allez utiliser cette petite icône ici avec auto auto Attendez, d'accord, l'auto cache, attendez une minute, cet auto cache fonctionne de manière similaire, d'accord, il fonctionne simplement avec la hauteur.

D'accord, je vais cliquer ici.

Et si je sélectionne cela, alors cela va automatiquement accrocher ces hauteurs et supprimer ces espaces blancs de mon texte comme cela.

D'accord, maintenant regardons ces outils ici, ces trois outils ici, d'accord, c'est l'alignement en haut, l'alignement, et le milieu et l'alignement et le bas.

D'accord, disons que j'ai ce texte et je vais le redimensionner comme cela.

D'accord, maintenant regardez, j'ai beaucoup d'espace à l'intérieur de mon rectangle.

Et où est mon texte, où est mon texte aligné, il est aligné en haut, tout en haut.

Si je veux le prendre au milieu comme cela, d'accord, je peux utiliser celui-ci ici comme cela, regardez cela, il va venir au milieu à l'intérieur de cette boîte.

Et disons que je veux prendre mon texte au centre exact.

D'accord, ce que je vais utiliser, c'est que je vais utiliser cette petite icône ici, Li important.

J'obtiens comme cela, regardez cela.

Il est aligné, il est aligné au modèle.

Donc changeons-le comme cela en haut et puis ou une semaine comme cela.

Nous y voilà.

Maintenant regardons ces outils ici.

D'accord, vous voyez ces trois points.

Donc nous sommes ici, si vous sélectionnez cela comme cela, alors vous allez avoir plus d'outils.

D'accord, tout d'abord, vous allez obtenir ces outils d'alignement ici, et puis les décorations.

D'accord ? Donc si vous survolez ici, alors vous allez obtenir un aperçu en direct de ce que chaque outil fait, comme cela, regardez cet outil de soulignement va souligner mon texte, d'accord ? Si je sélectionne cela comme cela, vous allez non seulement voir le résultat ici, en direct, regardez cela, regardez cet petit écran, d'accord, vous pouvez aussi voir le résultat ici, d'accord, comme cela.

Donc je vais cliquer ici aussi.

Donc si je veux enlever la déclaration, alors je vais sélectionner cela ici comme cela, aucun, alors vous pouvez aussi barrer le texte comme cela, vous avez beaucoup d'options.

Si vous voulez faire deux listes, regardez cette option de liste ici, d'accord, si je clique dessus, alors cela va me créer une liste, d'accord ? une liste non ordonnée.

Et si nous voulons en faire une liste ordonnée, alors vous pouvez cliquer ici, une liste ordonnée en 123, et ainsi de suite.

Donc si nous voulons l'indentation des paragraphes, vous allez utiliser cette fonctionnalité.

D'accord, attendez une minute, cette fonctionnalité d'indentation des paragraphes, d'accord.

Donc si vous dites, disons 30 pixels comme cela, d'accord ? Oh, cela ne fonctionne pas en fait.

C'est parce que nous avons plusieurs sauts de ligne.

Donc je vais en faire une seule ligne, comme cela.

Attendez une minute, donnez-moi juste une seconde et puis je vais faire glisser cela à l'intérieur de mon cadre.

D'accord.

Attendez une seconde comme cela.

Nous y voilà.

Et cela fonctionne juste comme un seul paragraphe et puis une hauteur orale comme cela.

Je veux dire, une largeur orale comme cela.

D'accord.

Oh, je l'ai fait de la mauvaise manière.

Mon erreur.

Désolé.

D'accord, maintenant, cela a l'air bien.

Maintenant, regardez, j'ai une indentation de paragraphe au tout début du texte.

D'accord, regardez cela.

Nous avons 30 parce que nous avons 30 pixels d'écart ici.

Si nous voulons augmenter l'écart, disons 100.

Allons-y pour 400.

D'accord, 100 comme cela.

Nous y voilà.

Nous avons 100 pesos d'écart ici.

Regardons plus d'options que nous avons.

D'accord, donc nous avons les minuscules ici.

D'accord, c'est le défaut, je veux dire, la façon dont vous l'écrivez va être le défaut.

D'accord.

Donc si nous voulons que tout le texte soit en majuscules, d'accord, vous avez ces majuscules, d'accord ? Maintenant regardez ce texte, d'accord ? lorem ipsum dolor state, d'accord, il est en petit texte, en lettres minuscules, d'accord, je vais le changer en lettres majuscules.

D'accord, je vais cliquer ici et puis je vais cliquer sur cela, d'accord ? C'est l'aperçu, il va me donner un aperçu ici aussi.

D'accord, donc je vais cliquer ici.

Maintenant regardez, tout le texte, toutes les lettres ont changé en majuscules, d'accord, comme cela, regardez cela.

Vous pouvez aussi le changer en lettres minuscules, en cliquant à nouveau sur cela, regardez cela, tous les textes, je veux dire, toutes les lettres sont en minuscules.

Au fait, si vous voulez changer la couleur de votre texte, ce que vous devez faire, c'est sélectionner n'importe quel texte, d'accord, disons que je veux voir comme ce texte ici, d'accord, donc ce que je vais faire, c'est que je vais Ctrl et puis cliquer ici comme cela, d'accord ? Ou ce que vous pouvez faire, c'est double-cliquer ici comme cela, et il va être sélectionné, d'accord, d'accord.

Et puis ce que vous allez faire, c'est que vous allez faire défiler vers le bas ici, et vous voyez cette option de remplissage ici, vous pouvez changer la couleur ici en entrant votre valeur hexadécimale ici, ou ce que vous pouvez faire, c'est simplement sélectionner cette option ici, d'accord, vous pouvez obtenir cette pipette ici, ce qui signifie que vous pouvez choisir n'importe quelle couleur que vous voulez, comme cela, regardez, je vais sélectionner cela ici comme cela.

Disons que je veux le changer en cette couleur ici.

D'accord, donc je vais sélectionner cela, le texte se colore selon cette couleur ici.

De même, ce que vous pouvez faire, c'est faire glisser ce petit point ici et vous pouvez jouer comme vous voulez et la couleur change en conséquence.

D'accord, je vais déplacer cette balle ici, et vous allez voir les changements ici.

D'accord, regardez cela, je vais changer la lettre noire, je veux, je veux la changer en noir, disons comme cela, d'accord, et disons que je veux la changer en blanc.

D'accord, je vais aller ici comme cela.

Au fait, vous pouvez aussi déplacer cela ici pour changer la couleur.

D'accord, disons que je veux aller au rouge.

D'accord, je vais venir au rouge ici, et cette palette ici devient rouge, d'accord, et je peux la déplacer ici aussi comme cela.

D'accord ? Si vous voulez changer l'opacité, alors vous pouvez le faire ici comme cela, regardez, je vais regarder, je vais faire glisser ce curseur ici et regarder cet effet ici.

D'accord, cela va être changé.

D'accord, regardez cela.

Je vais le faire glisser et regardez, l'opacité change, d'accord, si je le mets à zéro, il va être invisible.

D'accord, effort.

Si nous allons à zéro absolu, comme cela, alors cela va devenir invisible.

D'accord, mesdames et messieurs, nous avons terminé de discuter de l'outil texte ainsi que de toutes ses propriétés.

En tant que débutant, vous n'avez pas besoin de comprendre les prototypes.

Donc, c'est une fonctionnalité dont je discute en ce moment, le paradigme ici, celui-ci, d'accord, mais pour le bien de ce tutoriel, et pour vous faire comprendre comment et où la fonctionnalité de produit est utilisée, j'ai créé une petite section ici sur cette page, d'accord, donc vous pouvez voir cela pour l'échantillon droit, vous allez venir ici, d'accord.

Maintenant, vous pouvez voir deux designs ici, d'accord, c'est le design mobile.

Maintenant, laissez-moi vous dire où le produit est utilisé.

Le produit est utilisé pour faire des designs web interactifs.

Donc, j'ai gardé un exemple ici sur cette section.

D'accord.

Parfait.

échantillon.

Donc, maintenant, ce que je vais faire, c'est que je vais cliquer ici, d'accord ? Pour le droit comme cela.

Maintenant, regardez, j'ai déjà créé quelques cadres ici, mais je vais les supprimer.

D'accord ? Donc, je vais cliquer ici comme cela.

Et je vais supprimer, et puis je vais cliquer ici et puis supprimer.

D'accord, donc je commence, je commence de zéro afin de vous faire comprendre, désolé.

Donc, je commence de zéro, afin de vous faire comprendre comment le système fonctionne.

Je veux dire, le produit, comment fonctionne le prototype.

Donc, tout d'abord, comprenons ce modèle ici.

D'accord, donc c'est notre barre de navigation ici.

Et c'est l'icône du menu hamburger ici.

D'accord, donc le moment où nous cliquons sur cette icône de menu ici, d'accord, elle va se convertir en ce signe de croix ici, et puis ce contenu ici va disparaître.

Et puis il va nous montrer nos éléments de menu ici, comme la maison, l'enseignant, et ainsi de suite.

Pour créer un portrait, à droite, ce que vous allez faire, c'est que vous allez cliquer ici, d'accord, cette section pour le droit comme cela, et vous allez obtenir ces instructions ici.

D'accord, donc la première chose que nous allons faire, c'est que je vais sélectionner cela, d'accord, en double-cliquant ici, comme cela, regardez cela, j'ai sélectionné cette icône de menu hamburger.

D'accord, donc regardez cela, voyez-vous ce signe plus ici ? Cela signifie que le moment où nous cliquons ici, ou le moment où nous tapons ici, où allons-nous, où cela nous mènera-t-il ? D'accord ? Cela nous mènera à ce cadre ici.

Je veux dire, ce design ici, d'accord, donc je vais cliquer et faire glisser celui-ci comme cela, regardez cette flèche dans ma main.

D'accord, je vais le faire glisser comme cela ici.

Nous y voilà.

Donc, cela est lié à celui-ci ici.

Très bien, et puis il va me donner cette option ici.

Donc, regardez ces détails d'interaction qui sont apparus.

D'accord, donc il me dit, il me demande comment cette interaction doit avoir lieu.

D'accord, doit-elle être au clic ou au glisser, en survolant en appuyant, puis nous avons la souris et nous avons beaucoup d'options ici à choisir, ce que pour ce tutoriel, je vais le garder très simple, d'accord ? Au clic, ce qui signifie que le moment où nous cliquons sur celui-ci ici, alors il va choisir ce cadre ici, d'accord.

Et puis nous devons aussi cliquer ici, afin que nous puissions revenir à ce contenu principal ici.

Donc, comment faisons-nous cela, nous allons faire la même chose.

D'accord, nous allons double-cliquer ici sur ce site de croix.

Et puis vous voyez ce petit plus ici, laissez-moi zoomer, vous voyez ce petit plus ici, nous allons sélectionner cela et le faire glisser vers ce cadre principal ici comme cela.

D'accord, cela, nous y voilà.

Et il va aussi me montrer ces designs d'interaction, je veux dire, ces détails d'interaction.

D'accord, donc ce que je vais faire, c'est que je vais le garder tel quel, et puis regardez cette animation ici.

Donc, je vais cliquer ici.

Donc, au lieu de, je vais sélectionner dissoudre ici comme cela.

Donc, vous avez un tas de, je veux dire, beaucoup d'options à choisir, mais je vais le garder très simple, juste dissoudre, d'accord, comme cela.

Et je vais sélectionner celui-ci aussi.

Et je vais définir l'animation à dissoudre aussi comme cela, regardez cela.

Maintenant, regardez, pour tester ce prototype, ce que vous devez faire, c'est que vous allez cliquer sur ce bouton de lecture ici, voyez-vous ce bouton de lecture ici.

Et quand je clique dessus comme cela, maintenant expérimentons, il va créer une nouvelle fenêtre ici, d'accord ? Et nous y voilà.

Regardez cela, notre design est ici.

Je veux dire, c'est notre prototype ici, d'accord ? Maintenant, regardez cela, regardez ma souris ici, où que, où que j'aille, c'est juste une souris, d'accord, mais où que, ce que quand je viens ici, regardez cela, cela va se transformer en un pointeur, ce qui signifie que cela est cliquable.

Si je clique ici, alors cela va me donner quelques animations ou interactions.

D'accord, maintenant regardez, je vais le tester ici comme cela.

D'accord, je vais cliquer comme cela, regardez cela.

Regardez cela, nous avons nos éléments de menu de navigation ici.

Et nous avons aussi ce centre de coût ici.

D'accord, je vais cliquer ici à nouveau, comme cela, nous allons, il est revenu à notre cadre, cadre principal ici.

Expérimentons à nouveau.

D'accord, cliquez comme cela.

Nous y voilà.

Et puis pour revenir à cela, vous voyez cette animation, cette animation de dissolution, regardez cela.

Cela s'estompe en s'estompant.

J'espère vraiment que vous avez compris la fonctionnalité du produit.

Si vous voulez expérimenter avec le produit, vous allez venir à cette section ici, l'échantillon de prototype et suivre les instructions que je vous ai données.

Maintenant, nous allons discuter de la fonctionnalité appelée disposition automatique.

Aujourd'hui, je vais vous montrer deux cas d'utilisation sur la façon d'utiliser la disposition automatique.

Tout d'abord, je vais vous montrer comment aligner votre contenu, ce contenu ici, ce texte, ce bouton en même temps, je vais vous montrer comment faire ce bouton ici en utilisant la disposition automatique.

Donc maintenant vous allez venir ici comme cela, et nous allons créer un nouveau cadre ici, d'accord, donc vous appuyez sur F comme cela sur votre clavier, d'accord, et puis vous allez le faire glisser comme cela.

Regardez cela.

Nous nous sommes créés un nouveau cadre.

D'accord, laissez-moi le redimensionner un peu.

Comme cela.

Regardez cela.

D'accord, cela a l'air assez bien.

Et puis maintenant je vais créer un texte. D'accord, donc d et puis je vais le placer ici comme cela, d'accord, je vais écrire quelque chose comme cela.

Et puis je vais définir la taille à, disons, 60 pixels.

D'accord, attendez une minute.

Cela va fonctionner comme maintenant 16.

Nous y voilà.

Et maintenant je vais le dupliquer.

D'accord, disons que je veux le dupliquer en James, d'accord, je vais sélectionner le clavier nommé alt, d'accord ? Et puis je vais le faire glisser comme cela, regardez cela, d'accord, il va être copié, d'accord ? Alt, et puis utilisez votre souris comme cela, regardez cela, et puis la souris va me dupliquer la même chose.

D'accord, contrôle Zed.

Maintenant, où est la disposition orale utilisée ? Disons que ces textes sont ici comme cela, regardez cela, d'accord, dans ce tableau, disons que je veux les aligner à gauche, ou des mesures exactes, ce que je veux dire, regardez cela ici, vous voyez ce texte, un, deux, et puis ce bouton ici, vous voyez, tous ces éléments sont alignés à cette boîte, cette boîte de couleur bleue ici à gauche sur des mesures exactes.

Donc si nous voulons copier cette mise en page ici comme cela, alors ce que nous devons généralement faire, c'est sélectionner individuellement cet élément, d'accord ? Et puis nous devons prendre l'aide de ces gars ici, voyez-vous ce guide de couleur orange qui me montre le nombre d'écarts 57 pixels, d'accord ? Si je viens ici, comme cela, regardez cela, le guide de couleur orange est mis en évidence.

D'accord, laissez-moi vous montrer à nouveau.

D'accord, regardez cela, d'accord, maintenant regardez, cela est sur la gauche exacte, Align Left, d'accord.

Et puis si je le fais glisser ici, comme cela, maintenant regardez, il va être aligné à gauche, selon cette taille ici, d'accord.

Et puis disons que je veux diminuer la taille ici, d'accord, je vais sélectionner cela comme cela, d'accord, je vais le faire comme cela, et il a diminué en taille.

Et disons que je veux le diminuer encore plus.

D'accord, je vais enlever ces lettres d'ici comme cela.

D'accord, maintenant, disons que je veux changer l'écart entre ce contenu, d'accord, cela va être une corvée, d'accord, vous devez simplement prendre individuellement votre souris, et puis vous devez la placer comme cela.

Et si vous voulez calculer l'espace, ce que vous devez faire, c'est que vous allez cliquer sur n'importe quel élément, disons que je veux cliquer sur cet élément, d'accord, cet élément, et puis je vais sélectionner ma touche Alt sur mon clavier comme cela.

Et puis où que je place, ma souris va me montrer ce calcul.

Comme regardez cela, la distance entre ces deux éléments, d'accord, est de 51 pixels, regardez ce guide de couleur orange, il met en évidence 51 pixels.

De même, disons que je veux sélectionner cela et calculer l'écart entre ces deux contenus, d'accord, je vais sélectionner cela, et puis je vais mettre une souris sur ce contenu, regardez cela 39 pixels.

C'est ainsi que cela fonctionne.

Mais cela va être une longue corvée si vous le faites manuellement.

Donc dans ce cas, ce que vous pouvez utiliser, c'est la disposition automatique.

D'accord, laissez-moi vous montrer.

D'accord.

Je vais cliquer sur tous ensemble, et puis je vais faire un clic droit comme cela et regarder cette option ou ajouter une disposition automatique.

D'accord, je peux le faire ici comme cela, ou voyez-vous cette option ? les touches de raccourci shift a, vous pouvez aussi appuyer sur shift n, cela va fonctionner, d'accord ? Comme cela, regardez cela.

D'accord, maintenant regardez, si je.

Donc si vous remarquez sur le côté droit, vous voyez cette nouvelle section ici, cela s'appelle oral maintenant, d'accord, si vous voulez enlever la disposition orale, alors vous allez sélectionner ce moins ici, d'accord ? Et puis il va l'enlever et le convertir en cadre.

Comment savez-vous quand il est converti en cadre ? D'accord, vous allez en fait, vous allez montrer, vous allez voir sur le côté droit, d'accord, regardez cela, d'accord, ce hashtag, ce hashtag signifie le cadre.

Maintenant, si vous revenez en arrière en sélectionnant control Zed comme cela, regardez cela ici, attendez une minute, regardez cela, nous avons deux lignes comme cela, je veux dire, deux lignes comme cela, cela représente la disposition automatique.

D'accord, maintenant regardons les options que nous avons.

D'accord, donc je vais sélectionner cela comme cela, et il va me mettre en évidence cette disposition automatique, d'accord, regardez cela, j'ai 45 pixels d'écart entre chacun de ces contenus, d'accord ? Donc si je fais glisser ma souris comme cela, la quantité d'écart entre ces contenus change, d'accord, comme cela, regardez cela, à nouveau, le plus bas est zéro, et la limite supérieure est ce que vous voulez, d'accord, comme cela, disons que je veux le définir à 25 pixels comme cela, regardez cela.

Et celui-ci, regardez celui-ci, cela est utilisé pour ajouter un rembourrage autour de votre continuité, laissez-moi vous montrer. D'accord, je vais sélectionner cela et le faire glisser comme cela, nous allons regarder ce rembourrage est ajouté tout autour de mon contenu comme cela, regardez cela, si nous voulons changer à nouveau, comme cela, regardez, le rembourrage est appliqué comme cela.

Maintenant, parlons de cette fonctionnalité ici.

Rembourrage et alignement.

D'accord.

Donc si je, disons que je veux augmenter la taille de mon contenu, d'accord, comme cela, regardez cela.

Je vais faire glisser ma boîte de couleur bleue comme cela et elle va augmenter en taille.

Disons que je veux placer un condom au centre.

Comment faire cela, pour le faire rapidement, facilement, efficacement, nous allons utiliser cet outil d'alignement et de panoramique, d'accord, et quand je sélectionne comme cela, et regardez cela, j'ai tant d'options.

Je peux le sélectionner n'importe où, je peux le placer n'importe où je veux.

Donc notre critère est où le définir au centre.

Comment faisons-nous cela ? Nous allons cliquer ici, vous voyez cela ici, option.

Regardez cela.

Il est centré sur notre boîte ici.

D'accord, donc disons que je veux voir comme cela, je veux le placer sur ce coin ici sur ce coin ici, nous pouvons le faire.

Donc vous allez voir comme cela, comme cela, regardez cela.

Il va se déplacer vers cette section ici.

Et voyez-vous cela ici ? C'est le rembourrage.

Cela est utilisé pour ajouter du rembourrage.

Donc, rappelez-vous celui-ci, d'accord, laissez-moi le changer en un défaut.

Comme cela.

Nous y voilà.

Donc si vous vous souvenez, cela va ajouter du rembourrage aux quatre côtés.

Mais vous ne voulez pas ce comportement, vous voulez juste ajouter du rembourrage, disons à gauche et à droite, d'accord, pour le faire manuellement, vous allez cliquer ici et en utilisant cette option ici, vous pouvez ajouter manuellement du rembourrage ici.

Disons que je veux ajouter 50 pixels de rembourrage au côté gauche.

Nous y voilà, boom, il va ajouter du rembourrage juste au côté gauche.

D'accord, maintenant disons que maintenant disons que je veux ajouter du rembourrage en haut, d'accord ? Combien de lettres, disons 25 pixels, d'accord, donc je vais venir ici et écrire 25, comme cela, et appuyer sur entrer.

Maintenant regardez, j'ai 25 pixels de rembourrage en haut et 50 pixels de rembourrage à gauche, si vous voulez définir individuellement le rembourrage, cet outil est très utile.

Très bien, maintenant disons que maintenant disons que je veux ajouter du rembourrage en haut, d'accord ? Combien de lettres, disons 25 pixels, d'accord, donc je vais venir ici et écrire 25, comme cela, et appuyer sur entrer.

Maintenant regardez, j'ai 25 pixels de rembourrage en haut et 50 pixels de rembourrage à gauche, si vous voulez définir individuellement le rembourrage, cet outil est très utile.

Très bien, maintenant expérimentons comment faire un bouton en utilisant la disposition automatique.

D'accord, donc je vais supprimer cela d'ici, d'accord, je vais faire un bouton comme cela, regardez cela, vous voyez ce bouton ici, je vais le faire, je veux dire, je vais le dupliquer.

D'accord, donc je vais venir ici, et la toute première chose que je peux faire, c'est que je vais écrire du texte ici comme cela, d'accord, je vais écrire après avoir sélectionné T.

Et laissez-moi vous montrer les étapes, d'accord, vous allez appuyer sur t sur votre clavier, ou vous allez sélectionner cela ici, d'accord ? Donc t comme cela, et puis et cliquer ici sur votre écran, je veux dire, sur votre cadre, encore, vous allez avoir le bouton droit, bu TT o et comme ce bouton, d'accord ? Donc, je vais convertir ce texte de bouton en lettres majuscules.

D'accord, donc je vais venir ici comme cela, et je vais sélectionner cette option ici.

D'accord, regardez cela.

Maintenant, ce que je vais faire, c'est que je vais ajouter directement, je vais ajouter directement ou la mise en page, regardez cela, d'accord, je vais faire un clic droit ici et ajouter une disposition orale, ou ce que vous pouvez faire, c'est que vous pouvez, vous pouvez cliquer sur shift plus a comme cela, regardez, shift et a, maintenant regardez, la disposition orale est ajoutée à notre bouton.

D'accord, pour voir cela, ce que vous devez faire, c'est que nous allons cliquer ici, et puis vous voyez ce champ ici.

Je vais cliquer ici comme cela, et je vais changer la couleur de remplissage en noir, d'accord, 0000, comme cela, et regardez cela, il est devenu très sombre.

D'accord, maintenant, je vais venir ici, et puis je vais sélectionner Ctrl sur mon clavier, et puis clic droit, je suis à gauche, clic ici, et puis je vais sélectionner le texte, d'accord, le texte est sélectionné, ou ce que vous pouvez faire, c'est que vous pouvez venir ici sur ce cadre, d'accord, ce cadre est mis en évidence en bleu, et puis regardez ce cadre, je veux dire, ce cadre de disposition orale, d'accord, et à l'intérieur de ce cadre, nous avons le bas, d'accord, vous allez cliquer ici, ou vous pouvez directement contrôler et puis clic gauche ici, puis cela va sélectionner le texte, d'accord, et puis vous voyez cette couleur ici, je vais la changer en blanc, d'accord, f f, f f, six fois f, comme cela, regardez, cela va ramener mes boutons.

D'accord, maintenant disons que je veux ajouter un peu de rembourrage à gauche et à droite de ce bouton.

Donc comment faire cela.

Et avant de faire cela, ce que vous devez faire normalement, c'est que nous devons sélectionner cela ici, et puis vous devez sélectionner cela, ce qui signifie que vous voulez que le texte soit au centre de votre bas.

Sinon, ce qui se passe, c'est que si vous voulez redimensionner votre bouton, disons que je veux redimensionner Mazzuca, le texte est aligné à gauche, il ne bouge pas, d'accord, si je le redimensionne comme cela, regardez, il ne bouge nulle part.

D'accord, contrôle cela contrôle cela.

Maintenant, si je le définis au centre comme cela, si je redimensionne mon modèle n'importe où, n'importe comment, où je veux, comme cela, regardez, ce texte restera au centre, nous sommes ici comme cela, regardez cela, je peux le déplacer où je veux, d'accord, contrôle cela.

Maintenant, disons que je veux ajouter un peu de rembourrage individuellement, d'accord, je vais sélectionner ici.

Et puis disons que je veux sélectionner un rembourrage de 30 pixels à gauche et à droite, d'accord, 30 ici, écart, je veux dire, entrer 30 ici, appuyer sur entrer comme cela, regardez cela, nous avons 10 pixels de rembourrage, votre haut bas, et 30 pixels de rembourrage à gauche et à droite.

Aussi, je vais vous montrer comment vous allez utiliser ces deux boutons ici pour faire une mise en page responsive pour vos designs web de bureau, tablette, mobile plus rapidement et efficacement.

Donc, continuez à regarder, j'espère que vous avez compris comment aligner votre contenu et faire des boutons en utilisant la fonctionnalité de disposition automatique.

Maintenant, je vais vous montrer cette fonctionnalité qui reste à discuter, cette fonctionnalité ici.

D'accord, donc c'est la direction verticale et c'est la direction horizontale.

D'accord, je vais enlever cela rapidement.

Et regardez cela ici.

Voyez-vous cette mise en page ici ? Voyez-vous ces cartes ici ? Comment cela est-il empilé ? Cela est empilé sur une ligne horizontale.

Et si vous regardez la version mobile, le design mobile, regardez cela.

Cela est empilé verticalement comme cela.

Donc comment faisons-nous cela très rapidement, facilement et efficacement.

D'accord, donc je vais venir à cette version Dexter ici et puis je vais copier celle-ci à droite.

D'accord.

Ou peut-être disons que je veux copier cela ici.

D'accord.

Comme cela.

Je vais étendre cela comme cela, d'accord ? Et puis je vais cliquer une fois ici, d'accord ? Et puis appuyer sur le bouton out sur votre clavier, d'accord ? comme cela et puis le faire glisser ici comme cela, regardez cela.

D'accord ? Donc, la disposition automatique est également activée sur celle-ci.

D'accord ? Si vous voyez le panneau de droite ici, vous voyez cette orange, vous voyez que cette disposition automatique est activée, d'accord ? Voyez-vous cette direction horizontale, elle est activée, ce qui signifie que nos cartes vont agir comme cela, d'accord, cela va agir sur la ligne horizontale, cela va se disposer sur la ligne horizontale, ce que vous dites, que nous voulons qu'elle soit sur la ligne verticale, ce qui signifie que nous voulons la faire pour la version mobile.

D'accord, ce que nous allons faire, c'est que nous allons cliquer ici comme cela.

D'accord, boom, nous avons fait la mise en page des entraînements pour la version mobile, regardez cela, à quelle vitesse je l'ai fait.

Donc le mobile a un petit écran.

D'accord, donc je dois le redimensionner comme cela.

Disons que, je vais venir ici, et puis je vais appuyer sur le K.

Ou ce que vous pouvez faire, c'est que vous pouvez venir ici et puis sélectionner la version d'échelle ici.

D'accord, je vais appuyer sur K ici, comme cela, et puis cliquer sur cela.

Et puis je vais le redimensionner comme cela, regardez cela.

Il a été redimensionné, si vous voulez redimensionner encore plus, selon votre écran, qui est normalement petit, comme cela, regardez cela.

Vous pouvez, vous pouvez ajuster la largeur et la hauteur selon vos besoins, d'accord, comme cela, en utilisant l'échelle n'est pas l'échelle à maintenant regardez cette comparaison côte à côte à quelle facilité et rapidité j'ai fait la mise en page d'une version mobile à partir de la version bureau.

C'est la version bureau ici.

Et c'est la version mobile ici, au fait pour voir le contenu à l'intérieur de cette carte, cette chimie, ce bouton ici, cette image ici, tous utilisent la disposition automatique.

Et j'ai utilisé la disposition automatique pour aligner le contenu au centre.

Si je vois si je sélectionne une carte comme cela, regardez cela.

D'accord, j'ai sélectionné cette carte ici.

Donc regardez ce contenu ici, d'accord, si je viens à cette disposition automatique, regardez, tout le contenu a 19 pixels de rembourrage, je veux dire des écarts entre eux.

Et puis si je sélectionne celui-ci ici, alors vous pouvez voir que le contenu est aligné au centre comme cela, regardez cela, j'espère vraiment que vous avez compris la fonctionnalité de disposition automatique.

La prochaine fonctionnalité dont je veux parler est la grille de disposition.

Donc vous pouvez sélectionner n'importe quel cadre que vous voulez parmi toutes ces pages, que ce soit le bureau, la tablette, le mobile ou autre chose, nous allons trouver ces cadres, d'accord, je vais en envoyer un en exemple.

D'accord.

Et puis vous allez trouver cela ici, la grille de disposition.

Donc quand est-ce que cela est utilisé, si vous voulez planifier votre contenu, je veux dire, si vous voulez rendre un design web responsive pour le bureau, la tablette, le mobile, etc, vous devez planifier votre contenu, n'est-ce pas ? Donc en utilisant cela, vous pouvez planifier votre contenu.

Laissez-moi vous montrer une démonstration.

D'accord, donc je vais utiliser le bouton i ici, je vais cliquer sur cela, cela est utilisé pour cacher cette disposition, d'accord, comme cela, regardez cela, d'accord, et ce signe moins est utilisé pour supprimer cette disposition.

Et ce signe plus est utilisé pour ajouter la couche, je veux dire, la grille de disposition, d'accord.

Donc regardez cela, ce qui est écrit ici, cinq colonnes sont d'accord, donc si vous comptez ici, 12345, nous avons cinq, je veux dire, cinq colonnes de grille, d'accord.

Donc si vous cliquez ici, comme cela, maintenant, qu'est-ce que cela, cela n'a pas compté, d'accord, vous pouvez augmenter le nombre de colonnes ici, vous pouvez aussi sélectionner la couleur et puis vous pouvez définir l'opacité ici comme cela aussi.

Donc je vais cliquer ici comme cela.

Et puis regardez cela, nous avons cette option sur les colonnes, nous pouvons aussi la changer en grilles comme cela, et vous pouvez voir ces petits points ici comme du papier millimétré, d'accord ? Vous voyez cela ? des lignes fines comme cela, d'accord ? Ce motif, d'accord ? Et donc c'est la grille.

Très bien, donc si vous voulez la changer en, disons, colonnes, ou désolé, lignes, vous pouvez aussi le faire comme cela.

Regardez cela.

Cela a changé de colonnes en lignes comme cela.

Maintenant, changeons cela en colonnes, d'accord, comme cela.

Je vais cliquer ici et puis colonnes comme cela.

Maintenant regardez, combien de colonnes avons-nous ? 12345, à droite.

Donc regardez cela ici, nous avons cinq colonnes ici, et sur cette marge ici, 50 pixels de marge.

Donc si je zoome ici, donc regardez cela ici, vous voyez cette première colonne ici, l'écart entre la première colonne et le début de notre écran ici est de 50 pixels.

C'est l'écart.

Je veux dire, c'est la marge ici.

Et concernant la gouttière, nous voyons que nous avons 30 pixels de gouttière ici, d'accord ? Maintenant regardez cela, c'est la gouttière, d'accord ? Je veux dire, l'espace entre les colonnes, d'accord, c'est 30 pixels.

Maintenant, le meilleur exemple que je peux vous donner en ce moment est celui-ci, attendez une minute, cette disposition ici, vous voyez celle-ci ici, les cours proposés.

Cela a trois cartes, combien de cartes, trois cartes, ce qui signifie que nous pouvons les empiler sur trois colonnes.

D'accord, laissez-moi vous montrer un gâchis comme cela.

Et regardez cela ici.

D'accord, je vais et maintenant je vais cliquer sur ce bouton ici pour vous montrer comment la grille de disposition fonctionne.

D'accord, donc regardez, combien de couches ? Je veux dire, combien de colonnes avons-nous ? Nous avons trois colonnes et trois cartes.

D'accord, donc combien, combien d'écart ? Ai-je mis entre les ? Je veux dire, combien de marge ai-je mis ? D'accord, donc je peux le voir ici comme cela, d'accord ? Regardez cela, nous avons trois colonnes.

Donc cela va être mis en évidence trois ici, et la couleur est celle-ci, rouge.

Et cela est utilisé pour changer la transparence.

D'accord ? Donc si j'augmente la taille comme cela, regardez cela, cela devient beaucoup plus rouge.

D'accord, je vais le changer à 10% afin qu'il soit visible.

Je veux dire, à la fois la grille de disposition et le contenu deviennent visibles, d'accord.

10% est un point idéal.

Et nous avons une marge de 77 pixels.

D'accord.

À gauche et à droite, et gouttière, nous avons tourné à pixels.

Il y a quelques secondes, je vous ai dit que cette grille de disposition est utilisée pour planifier votre contenu lorsque vous faites des sites web responsives, je veux dire, des designs web.

D'accord, laissez-moi vous montrer une démonstration.

D'accord.

C'est le meilleur exemple que je puisse vous donner maintenant.

Donc je vais cliquer ici.

Et regardez cela ici, combien de colonnes avons-nous ? Nous avons trois colonnes ici avec 77 pixels de marge à gauche et à droite et puis nous avons 32 pixels de gouttière, d'accord ? Donc c'est, vous voyez cet écart ici.

D'accord, espace de couleur blanche entre le rouge et notre début d'écran ici.

C'est 77 pixels de marge, d'accord.

Et cette gouttière ici, vous voyez cette couleur blanche ici ? C'est 32 pixels.

C'est la gouttière.

D'accord ? Donc c'est la disposition du bureau.

D'accord, combien de colonnes avons-nous ? Nous avons trois colonnes et trois colonnes empilent trois cartes.

Dans le cas de la disposition mobile, regardez cela, d'accord, je vais cliquer ici, cette section de page mobile et regardez cela, combien de colonnes avons-nous, nous avons juste une seule colonne et cette seule colonne empile combien de cartes, trois cartes parce que nous avons moins d'espace, moins d'espace sur la version mobile ? D'accord, donc je vais cliquer sur cela et puis je vais inspecter cette grille de disposition.

D'accord.

Donc je vais cliquer ici.

Maintenant regardez, combien de colonnes avons-nous ? Nous avons juste une seule colonne.

Et combien de marges avons-nous ? 20 pixels de marge.

Maintenant pour zoomer, regardez cela, cet espace ici est de 20 pixels de marge.

D'accord, et c'est la disposition mobile.

Si nous voulons ajouter une grille de disposition sur votre cadre, ce que vous devez faire, c'est sélectionner F, d'accord, sur votre clavier comme cela, et puis vous allez le faire glisser comme cela, regardez cela, nous avons un cadre, d'accord, si vous voulez ajouter cette grille de disposition, vous allez sélectionner cela comme cela et regardez cela ici, vous voyez cette grille de disposition ici, vous allez cliquer ici comme cela, le signe plus, d'accord, puis cela va ajouter ce motif ici.

Si vous voulez le changer, alors vous allez cliquer ici.

Et puis vous allez le changer en colonnes ou en lignes ici, selon vos besoins.

D'accord.

J'espère que vous avez compris comment utiliser la grille de disposition.

Très bien, maintenant je vais discuter des contraintes correctement.

D'accord, pour discuter des contraintes fournies, vous allez venir à cette section, je veux dire, cette page ici, test de réactivité.

D'accord, donc vous avez remarqué cela avant, d'accord, si vous cliquez sur n'importe quel élément comme cela, alors vous allez trouver cette propriété de contraintes ici.

Je vais discuter de cela.

D'accord.

Cela est utilisé pour tester si votre design est réactif ou non.

Donc j'utilise les contraintes fournies avec le plugin nommé breakpoints.

D'accord, c'est un plugin ici, j'ai en fait inclus cette section pour que vous puissiez tester.

Donc vous allez venir ici.

D'accord.

Donc voyez-vous ces gars ici ? Je vais zoomer un peu.

D'accord.

Je vais venir ici, vous voyez cela.

Ce sont nos points d'arrêt pour un pixel, c'est le point d'arrêt pour la version mobile.

D'accord.

767 168 pixels est le point d'arrêt pour la version tablette.

C'est le point d'arrêt pour la version ordinateur portable.

Et celui-ci est la version Dexter.

D'accord, maintenant regardez, qu'est-ce qui se passe si je le redimensionne ? Donc je vais cliquer ici.

D'accord.

regardez très attentivement.

Regardez cela, la propriété de contrainte fonctionne.

Quand je redimensionne la fenêtre comme cela, regardez cela, notre contenu est au centre, nous sommes ici.

Ne vous inquiétez pas, nous allons recréer les résultats.

D'accord, regardez juste ce qui se passe.

Donc quand il s'agit du point d'arrêt de la tablette, maintenant regardez ce qui se passe.

Maintenant, si je traverse maintenant le point d'arrêt de la tablette ? Bien, maintenant qu'est-ce qui se passe ? Voici le point d'arrêt de la tablette.

Donc je vais causer le point d'arrêt de la tablette.

D'accord, comme cela, regardez cela.

Regardez, notre design a changé parce que le plugin nommé breakpoints, et si je le redimensionne comme cela, maintenant regardez ce qui se passe.

Nous avons quelques écarts ici, d'accord, et le contenu est en fait au centre ici.

Donc si je le redimensionne encore plus, maintenant regardez ce qui se passe.

La taille de la police change et le contenu augmente en taille.

Comme cela.

Regardez cela.

Laissez-moi le redimensionner à nouveau.

D'accord, maintenant regardez ce qui se passe quand ce petit grand est l'ordinateur portable.

C'est la version tablette.

C'est la version ordinateur portable, version tablette, version mobile ici, mobile tablette, ordinateur portable, les propriétés de contrainte utilisées ici.

D'accord, je vais supprimer cela ici rapidement.

D'accord, donc je vais venir ici.

D'accord.

Attendez une minute.

Maintenant regardez cela.

C'est le design pour la version ordinateur portable.

C'est la version tablette ici et celle-ci est la version la plus ici.

D'accord, donc je vais juste me concentrer sur la version mobile ici comme cela, attendez une minute, nous y voilà.

D'accord, donc je vais amener mes options ici.

Et puis ce que je vais faire, c'est que je vais sélectionner tous mes éléments ensemble, d'accord ? Comme cela.

Et puis je vais les regrouper ensemble comme cela Ctrl G.

Maintenant, si nous sélectionnons celui-ci ici, et si vous remarquez ici, maintenant vous voyez cela, cette couleur bleue est mise en évidence, et celle-ci ici aussi.

C'est le haut et celle-ci est la gauche, d'accord, ce qui signifie que si vous redimensionnez la fenêtre comme cela, attendez une minute, comme cela, alors ce qui va se passer, c'est que votre contenu sera concentré, votre contenu sera verrouillé en haut à gauche, comme cela, regardez cela.

Mais disons que vous voulez qu'il soit en bas.

À droite.

Donc comment allez-vous faire cela ? contrôle cela. D'accord, je vais sélectionner cela, je veux dire, la section de contenu entière et je vais sélectionner cela.

D'accord, bas, droite.

Maintenant regardez, qu'est-ce qui se passe si je redimensionne la fenêtre.

D'accord, maintenant, regardez, ce qui s'est passé, il va rester concentré.

Je veux dire, il va rester fixe en bas, à droite ? D'accord.

D'accord, maintenant je vais sélectionner celui-ci.

Et je vais le faire glisser vers le bas comme cela, regardez cela.

Notre contenu est fixé en bas à droite.

Maintenant, disons que je veux qu'il soit en bas à gauche, que vais-je faire, je vais faire la même chose, d'accord, je vais venir à cette propriété de contraintes.

Attendez une minute, il y en a une, d'accord, puis je vais sélectionner le bas à gauche, d'accord, je vais juste cliquer ici, ou ce que je peux faire, je peux juste cliquer ici et sélectionner l'option de gauche comme cela.

D'accord, et maintenant regardez ce qui se passe, nous redimensionnons la fenêtre, je vais faire glisser cela ici.

Maintenant regardez, il va rester concentré en bas à gauche.

Comme cela.

Donc dans le cas de tester ma réactivité de mes designs web, ce que je fais, c'est que je vais sélectionner tout mon contenu, et puis je vais centrer à la fois horizontalement et verticalement comme cela.

D'accord, maintenant regardez, qu'est-ce qui se passe si je redimensionne la fenêtre comme cela, regardez cela.

D'accord, il reste au centre exact comme cela.

D'accord, je le fais pour tous mes contenus, attendez une minute, laissez-moi le redimensionner.

Et je vais sélectionner tout ce contenu ici comme cela Ctrl G.

Je les ai regroupés ensemble, je vais sélectionner cela et je vais activer cette option.

D'accord, centre centre.

Même chose pour la version aussi comme cela, d'accord, Ctrl, G, et puis centre centre comme cela.

Maintenant, il y a un plugin nommé breakpoints, d'accord, je vais faire un clic droit ici et puis sélectionner ce plugin, d'accord, vous n'aviez rien à faire, regardez juste ce que je fais.

D'accord.

Et si vous voulez le tester, je vais inclure cette section ici, vous allez venir à cette section, et puis le tester vous-même comment le système fonctionne, d'accord, donc je vais sélectionner cette option de plugins ici, et puis je veux, et puis je vais sélectionner ce breakpoints, comme cela.

Et il va me donner cette petite fenêtre ici.

D'accord, je vais sélectionner nouvelle mise en page adaptative comme cela.

Et puis je vais définir un point d'arrêt ici, et je vais le garder ici aussi.

Et laissez-moi en fait, d'accord, puis je vais sélectionner celui-ci.

Et puis je vais écrire ici pour un, quatre, qui est le point d'arrêt de l'affichage mobile, d'accord, et puis je vais écrire ici 768, qui est l'écran de la tablette, et puis je vais cliquer sur ce signe plus ici, d'accord, et puis je vais écrire ici, 1024 pixels, version rire, et puis plus ici, encore, nous sommes ici 1440 pixels, 1440 pixels, qui est la version Dexter, d'accord, maintenant regardez ce signe plus ici, je vais cliquer dessus et je vais sélectionner cette mise en page mobile, comme ce signe plus ici, je vais sélectionner cette version tablette.

D'accord, je vais sélectionner cela ici, et je vais sélectionner cet ordinateur portable aussi.

D'accord.

Maintenant, c'est le résultat que nous avons obtenu jusqu'à présent.

D'accord, maintenant, ce contenu est au centre.

Si je le redimensionne, attendez une minute, laissez-moi en fait sélectionner cela et puis devinez ce qui se passe ? Regardez ce qui se passe.

D'accord ? Oh, j'ai en fait besoin d'augmenter la largeur ici aussi comme cela, regardez, je veux dire la hauteur, j'ai besoin d'augmenter la hauteur comme cela.

Maintenant, regardez ce qui se passe si je redimensionne la fenêtre comme cela, nous allons voir la version mobile.

D'accord, c'est la version tablette.

Et celui-ci est la version ordinateur portable.

L'outil de contraintes.

Et le point de rupture à tous les deux sont très pratiques si vous voulez tester la réactivité d'un design web.

Donc, je vais le garder tel quel afin que vous puissiez venir et pratiquer ici, d'accord.

Très bien, maintenant je vais parler d'un outil appelé composants.

D'accord ? Donc regardez cela ici, ce pied de page ici.

C'est en fait un composant.

D'accord, nous allons, vous et moi ensemble, nous allons changer ces icônes de médias sociaux avec celles-ci ici.

Je vais venir à ces actifs ici et regarder ces icônes de médias sociaux ici.

D'accord, nous allons remplacer cela.

Donc nous allons remplacer celui-ci avec ceux-ci ici.

D'accord, mais avant cela, testons ce que font nos composants ? D'accord, donc je vais venir du côté gauche ici, et je vais dessiner un cadre F et puis comme cela, regardez cela.

Disons que je vais écrire un peu de texte ici, d'accord, comme cela.

A B, C, D, d'accord ? Ctrl A et je vais changer la taille à, disons, 100 pixels, d'accord ? Comme cela, regardez cela.

D'accord, je vais changer le poids de la police à régulier.

D'accord ? Maintenant regardez ce qui se passe si je copie cela, disons trois fois, d'accord ? C'est la deuxième fois, c'est la troisième fois ici.

D'accord, je vais zoomer un peu comme cela.

Maintenant regardez ce qui se passe, disons que l'un des nombreux avantages de la fonction des composants est qu'elle vous aide à arrêter de répéter le même design encore et encore, ils le jour, le jour et la nuit, la différence entre copier et coller la même chose et utiliser les composants, d'accord, disons que je l'ai copié et collé trois fois ici, d'accord, 123.

Disons que je veux enlever le C, d'accord, je n'ai pas besoin du C.

D'accord, donc ce que je dois faire, c'est que je vais sélectionner cela ici, et je vais enlever le C ici comme cela, d'accord ? Même chose, je dois répéter combien de fois trois fois une fois, deux fois ici comme cela, d'accord, et trois fois ici comme cela, regardez cela.

Mais si j'utilise un composant que, attendez une minute, laissez-moi enlever cela d'ici.

Et je vais écrire ABCD ici, d'accord ? Si je clique, oh, désolé.

Maintenant, si je fais un composant, comment faire un composant, d'accord, je vais cliquer sur ce bouton ici, créer un composant, ou ce que je peux faire, c'est que je peux faire un clic droit ici et créer un composant comme cela.

Maintenant, c'est un composant ici, vous pouvez le dire, vous pouvez le dire en regardant cette icône ici.

Ou vous pouvez aussi le dire en regardant cette surbrillance ici, un composant est mis en surbrillance en couleur violette, d'accord ? Maintenant regardez ce qui se passe si je copie de ce composant, d'accord ? Tout et puis cliquez ici et puis faites glisser comme cela, d'accord ? Maintenant, regardez cela, ici, regardez mes calques ici.

C'est une forme de diamant, ce qui signifie que c'est une instance du composant parent, c'est le parent, c'est une instance.

D'accord, je vais faire la même chose comme cela.

Encore, ils disent que je veux le faire plus trois fois, d'accord, comme cela, regardez cela.

Et disons que je dois le changer, je dois enlever le C, que vais-je faire, je dois l'enlever six fois, je dois faire la même chose six fois.

Mais si j'utilise un composant comme celui-ci, maintenant regardez ce qui se passe si j'enlève le C du composant parent comme cela, regardez cela, j'ai enlevé le C, le C est en train d'enlever tous mes six designs ici, regardez cela, juste en changeant celui-ci ici, et rien d'autre.

Tout est changé.

C'est le principal argument de vente des composants.

D'accord, donc je vais supprimer cela d'ici.

Et regardez ce design ici.

Je vais regarder mon pied de page ici.

Cette icône de média social est de couleur bleue, elle ne va pas avec notre équipe.

Si je viens à notre palette de couleurs ici, regardez cela.

C'est ma palette de couleurs ici.

D'accord, vous pouvez vérifier la valeur hexadécimale ici aussi, regardez cette valeur hexadécimale et cette valeur hexadécimale aussi.

Très bien, non, cela ne va pas avec notre couleur ici.

C'est de couleur bleue, bleu clair.

Donc je vais le changer en noir et blanc.

D'accord, celui-ci ici, si nous venons à ces actifs ici, il y en a un. D'accord, maintenant ce que je vais faire, c'est que je vais cliquer sur ce cadre ici et puis appuyer sur Alt sur mon clavier comme cela, et puis je vais le faire glisser comme cela.

D'accord, il va être copié, et puis je vais faire un clic droit, et puis je vais sélectionner cette option ici, déplacer la page vers Dexter.

D'accord, je vais venir à texte ici, attendez une minute, nous y voilà, nous avons notre design ici, vous avez en fait besoin de, vous avez en fait besoin de dézoomer un peu afin que vous puissiez voir où se trouve le cadre.

D'accord, comme cela, j'ai obtenu mon cadre ici.

Très bien maintenant.

Maintenant je vais sélectionner celui-ci, celui-ci.

Maintenant je vais sélectionner cette option de tuteur ici en double-cliquant ici, et puis en double-cliquant à nouveau, comme cela.

Maintenant je peux voir la largeur et la hauteur exactes de mon tuteur ici.

Je suis allé à l'icône ici, ce pour 8.81 pixel.

Donc je vais copier cela d'ici comme cela Ctrl C.

Et puis ce que je vais faire, c'est que je vais redimensionner toutes mes icônes de médias ici, d'accord, comme cela, je vais sélectionner cela ici, et puis je vais appuyer sur le gâteau sur mon clavier, d'accord, comme cela, je peux le redimensionner comme cela, regardez cela.

Maintenant ce que je vais faire, c'est que je vais le verrouiller ici, comme cela, c'est la propriété des contraintes.

Et puis Ctrl V, si je le colle ici, alors cette valeur sera automatiquement appliquée sur ma hauteur ici aussi.

D'accord, donc je vais sélectionner entrer comme cela.

Maintenant regardez cela.

Il m'a donné des calculs précis.

Donc je vais le faire glisser ici, attendez une minute, ici comme cela.

Au fait, ce dossier ici est le composant parent principal, d'accord ? Ce qui signifie que si nous changeons quelque chose ici, alors tous les enfants, c'est-à-dire tous les composants enfants, je veux dire, toutes les instances vont aussi changer, regardez cela, j'ai placé l'icône des médias sociaux, le Facebook, en noir et blanc ici sur le composant parent, et cela a été appliqué ici sur le composant enfant.

Même chose pour tous les composants enfants aussi, regardez cela.

Nous avons cette icône Facebook ici.

Maintenant je vais supprimer celle-ci ici.

D'accord, celle en couleur bleue.

Donc ce que je vais faire, c'est que je vais venir ici, et puis je vais double-cliquer ici.

Et puis je vais supprimer comme cela.

Donc cela a été supprimé.

Et même chose a été supprimée de tous les composants parents et enfants aussi, regardez cela, nous aurons les icônes des médias sociaux ici.

Même chose pour toutes les instances de pied de page.

D'accord, donc je vais revenir ici, et je vais les redimensionner aussi de manière similaire, je vais appuyer sur K et puis les redimensionner comme cela, regardez cela.

Et puis je vais appuyer sur cette propriété de contraintes.

Et puis je vais coller la valeur que j'ai copiée, d'accord, Ctrl V, entrer, regardez cela.

Donc je vais les sélectionner ensemble, et je vais les faire glisser ici, comme cela.

D'accord, maintenant, ce que je vais faire, c'est que je vais arranger une série comme cela.

Et puis je vais appuyer sur Maj plus a, après avoir fait glisser, après avoir sélectionné tout cela, d'accord, comme cela, Maj a, et puis je peux ajuster l'écart ici comme cela, disons que je veux un écart de 10 pixels, d'accord ? Je change d'avis, je vais le sélectionner, comme cela, nous y voilà.

Je peux aussi changer le trait ainsi.

D'accord, si je sélectionne Ctrl sur mon clavier, et si je sélectionne ce trait ici, comme cela, alors il va me sélectionner cela, regardez cela, je vais changer le à.

D'accord, et je vais faire la même chose ici, appuyer sur Ctrl sur votre clavier, et puis appuyer sur Ctrl sur votre clavier et sélectionner ce cercle ici.

Et puis changer le à de 3.5 à comme cela, regardez cela, cela a l'air beau.

Double-cliquez ici et puis suivez les guides de couleur orange, d'accord ? Regardez, notre contenu est, regardez, nos icônes de médias sociaux sont alignées à gauche selon ces textes là-bas.

D'accord, maintenant si j'inspecte tous mes, laissez-moi en fait supprimer cela d'ici.

Neuf maintenant si j'inspecte tous mes enfants instances, regardez cela, la même chose a été appliquée ici, parce que c'est parce que nous changeons le composant parent.

Tous les enfants, toutes les instances enfants sont liés à changer.

Regardez cela, j'espère vraiment que vous avez compris comment utiliser cet outil utile nommé composants.

Félicitations, les gars, nous avons terminé de discuter de tous les outils essentiels de figma.

Maintenant, nous allons commencer à faire notre design web pour la version bureau.

Commençons.

Mais la première question est, comment allons-nous pratiquer ? Très bien, alors nous allons pratiquer comme cela ici, nous allons dessiner nos cadres, d'accord, comme cela.

Et puis nous allons copier ce design sur notre cas de pratique ici.

En tant que débutant, il est tout à fait acceptable de copier les œuvres et les designs des autres, car cela fait partie du processus d'apprentissage.

Donc, je vais supprimer celui-ci ici comme cela.

Et puis ce que je vais faire, c'est que je vais déplacer cela du côté droit, d'accord, et puis je vais dessiner un cadre ici, comme cela, suivez-moi, je vais maintenir ma touche Maj, et puis je vais sélectionner les noms comme cela, d'accord, je vais nommer le cadre comme cela.

Très bien, et puis je vais sélectionner les doigts.

Et puis je vais le faire glisser ici comme cela.

Nous y voilà.

Maintenant, ce que je vais faire, c'est zoomer ici, d'accord, peu importe.

C'est ma palette de couleurs ici.

Je vais la garder ici.

Nous y voilà.

Et puis je vais faire un cadre ici.

D'accord, donc je vais sélectionner mon F, qui est le cadre pour localiser F.

Et puis je vais sélectionner cela ici, d'accord, dekstop.

Et puis celui-ci dekstop, qui a une dimension de 440 pixels de largeur, comme cela, regardez cela.

D'accord, je vais le garder ici comme cela, la première chose que je vais faire, c'est que je vais faire des grilles de disposition.

D'accord ? Donc ce que je vais faire, c'est que je vais sélectionner cet élément ici, d'accord ? Et puis je vais sélectionner cette petite icône ici, d'accord, afin que je puisse voir les grilles ici.

Et puis je vais sélectionner cela afin que je puisse mieux voir ce qu'est la marge et ce qu'est la gouttière ici, d'accord, vous pouvez voir la figure, nous pouvons voir 50 pixels de marge ici.

Mais disons que dans certains scénarios, vous ne pouvez pas réellement voir combien est la marge ici.

Donc que ferez-vous dans ce cas, dans ce cas, ce que vous pouvez faire, c'est que je vais vous montrer un truc ici.

Donc je vais venir ici, d'accord, vous voyez mon texte ici.

Et cet écart ici, je vais dessiner un rectangle ici, laissez-moi vous montrer. D'accord, je vais appuyer sur R.

Et puis je vais dessiner un petit rectangle ici, et je vais le garder ici comme cela, et il va s'enclencher à l'intérieur de cela, laissez-moi zoomer un peu, afin que vous puissiez mieux voir comment cela fonctionne.

Très bien, donc regardez ce rectangle ici, et puis je vais l'étirer jusqu'à ce côté ici, d'accord, comme cela, attendez une minute, comme cela, regardez cela, ce rectangle remplit cet écart ici.

Maintenant, si je sélectionne cela ici, et si j'inspecte ce rectangle, vous pouvez voir que ce rectangle est de 50 pixels de largeur, ce qui signifie que voici 50 pixels d'écart.

Donc maintenant ce que je vais faire, c'est que je vais enlever ce rectangle d'ici.

Très bien, puis je vais venir à mon design principal ici, je suis dans le cas de pratique, et puis je vais donner celui-ci ici, auto layout grid, d'accord, comme cela.

Et puis je vais le changer en colonnes comme cela, d'accord ? Et puis je vais donner ici combien de pixels de marge 50 parce que nous avons découvert au rectangle que c'est 50 pixels de marge, d'accord, comme cela.

Et laissez-nous en fait voir ce que nous avons spécifié dans la grille comme cela.

D'accord.

Et 30 pixels de gouttière, d'accord, nous y voilà comme cela 30 pixels ici, si vous maintenez Maj et haut, si vous maintenez Maj et puis appuyez sur la flèche haut bas, alors cela va changer 10 échelle à la fois comme cela, regardez, il est 20 3040 5060 7080 pendant que je maintiens Maj, mais si vous relâchez Maj, et si vous utilisez le signe de flèche, je veux dire le signe de flèche haut, alors qu'avons-nous ? Cela va changer un pixel, un pixel comme cela est 80 pixels, d'accord ? 8180 280-384-8586 cela va prendre beaucoup de temps, donc je vais utiliser Maj, d'accord, je vais sauter à 36.

Et puis je vais écrire 30.

Nous sommes ici comme cela.

Nous y voilà.

Cela a l'air assez parfait.

Maintenant, maintenant nous allons faire cette barre de navigation ici.

D'accord, pour inspecter cet élément, ce que je vais faire, c'est que je vais sélectionner Ctrl sur mon clavier, d'accord ? Et puis je vais cliquer ici comme cela.

Maintenant, vous pouvez voir toutes les propriétés ici, voyez-vous cela ? La couleur, la famille de polices, la police, le poids, la taille de la police, etc.

D'accord, donc regardez cela, c'est 90 pixels.

Donc je vais le copier ici comme cela Ctrl C, je vais venir ici et puis et puis appuyer sur t sur votre clavier comme cela T, et puis cliquer ici, d'accord, et écrire un do ou désolé, ils font.io.

Et la famille de polices est quatre pins, ce qui est correct ici, changez-la en semi gras ici, comme cela, et puis sélectionnez 90 ici comme cela.

90, d'accord.

D'accord, je vais le garder ici comme cela.

D'accord, voyez-vous ces guides de couleur orange qui vont s'enclencher comme cela, d'accord, donc vous n'avez rien à faire manuellement.

La prochaine chose que nous avons est les options d'accueil, d'enseignants, de contact et de signature.

Au fait, vous avez ce guide typographique de bureau ici, que vous pouvez suivre.

D'accord, donc ce logo est de 90 pixels ici, les éléments de navigation, chacun de ces éléments de navigation est de 47 pixels de taille.

D'accord, donc je vais venir ici, je vais appuyer sur t sur mon clavier comme cela T, cliquer, et je vais les mettre ici, d'accord, même chose, je vais les copier quatre fois, comme cela 123, et puis quatre.

D'accord, je vais écrire ici, enseignants.

Et je vais écrire ici, contactez-nous.

Et ici, signature, nous devons aussi changer la forme, nous devons aussi changer le poids de la police, pour inspecter le poids de la police, je vais venir ici sur le design original.

Et puis je vais cliquer sur Ctrl.

sur mon clavier, cliquer comme cela, regardez cela, nous avons régulier et 47 pixels, aussi la taille de la police, nous avons un poids de police régulier, 47 pixels, taille de la police, et regardez cela, les familles de polices sont révoltées, d'accord, donc je vais venir ici, comme cela, et je vais les sélectionner tous ensemble, comment vais-je faire cela, regardez cela, je vais les faire glisser tous ensemble comme cela, les sélectionner tous ensemble comme cela.

Et je vais écrire ici, 47, d'accord, Entrée.

Et puis je vais écrire régulier ici comme cela, regardez cela.

Et puis je vais écrire Roboto ici, parce que la police est rowboat là sur le design original, la pièce pour deux, nous y voilà.

Maintenant, la prochaine chose que je vais faire, c'est que je vais les sélectionner tous ensemble comme cela, et puis shift a ou ce que je peux faire, c'est que je vais faire un clic droit ici et puis ajouter une disposition automatique.

Ou vous pouvez aussi le faire en utilisant le raccourci shift plus a, je vais le faire ici comme cela.

Très bien.

Maintenant, je vais cliquer ici, parce qu'il devrait être sur la ligne horizontale comme cela, regardez cela, nous y voilà.

Et puis je vais cliquer ici.

Et je vais sélectionner cela afin qu'il reste toujours, je veux dire, tout le texte devrait rester au centre.

Nous sommes ici, à la fois horizontalement et verticalement à l'intérieur de ce cadre, comme cela, regardez cela.

Et maintenant la prochaine chose que je vais faire, c'est que je vais l'enclencher à ce côté ici de mes lignes de grille, d'accord, comme cela, regardez cela.

Nous y voilà.

Cela s'enclenche comme cela.

Très bien maintenant.

Maintenant, si nous regardons le design original ici, d'accord, si je sélectionne cela ici, en double-cliquant ici comme cela, alors vous pouvez voir que nous avons 50 pixels d'écart, ce qui signifie qu'il devrait y avoir aussi 50 pixels d'écart, entre cela entre les éléments de navigation.

Donc je vais cliquer ici comme cela, et il est défini à 93.

Donc je vais le changer à 50 pixels.

Nous y voilà.

Je vais commencer, je vais l'enclencher sur les lignes de grille ici comme cela à nouveau, et ce que je vais faire, c'est que je vais sélectionner à la fois le logo et les éléments de navigation comme cela.

Oh, au fait, vous devriez changer le texte de la maison en medium. D'accord, vous allez cliquer ici et puis de régulier à medium comme cela, d'accord, parce que dans le design original ici, il est dit medium aussi parce que c'est le design actuel.

Très bien alors.

Donc je vais cliquer sur les deux ensemble comme cela et puis shift plus a.

Maintenant regardez cela, les éléments de navigation sont déplacés en haut afin de les amener au milieu, au centre.

Ce que je vais faire, c'est que je vais cliquer ici. D'accord, et puis sélectionner cela ici.

Maintenant regardez, cela ressemble exactement à une copie carbone du document original.

design original.

Maintenant regardez cela ici sur le design original, nous avons ce rectangle ici, d'accord ? Je veux dire, souligner ici, comment le recréons-nous ? D'accord, suivez-moi.

D'accord, donc je vais cliquer ici et puis je vais le verrouiller, je vais verrouiller mon contenu comme cela.

D'accord, je vais zoomer ici comme cela, je vais sélectionner l'outil Rectangle en appuyant sur le bouton R de mon clavier, et puis je vais sélectionner, je veux dire, je vais faire un rectangle ici comme cela.

Je vais le redimensionner comme cela afin que je puisse voir les guides orange ici.

D'accord, les guides orange s'enclenchent comme cela, regardez cela, je vais le changer comme cela, r sept, sept pixels de hauteur, et 126 pixels de largeur.

D'accord, maintenant je vais changer le rayon de coin comme cela, je vais écrire 10 ici.

D'accord, nous y voilà.

Et pour changer la couleur, ce que je vais faire, c'est que je vais sélectionner cela, d'accord, en le sélectionnant, regardez cette palette de couleurs ici.

D'accord, je vais sélectionner cette couleur ici, et puis ce bouton œil ici, d'accord, comme cela.

Et puis je vais sélectionner cela, regardez cela, j'ai réussi à changer la couleur et aussi fait ce soulignement, je suis maintenant des éléments, nous y voilà, cela ressemble assez à celui-ci.

Maintenant, la prochaine chose dont nous avons besoin est l'image, cet actif ici.

D'accord, donc, donc ce que nous allons faire, c'est que nous allons venir à cette page d'actifs ici, d'accord, et puis regardez cela, nous avons l'actif ici.

Donc ce que je vais faire, c'est que je vais sélectionner cela et puis appuyer sur la touche Alt, mot, appuyer sur la touche Alt de mon clavier comme cela, et puis je vais le faire glisser comme cela, je vais le faire glisser comme cela ici.

Et je vais faire un clic droit ici et puis déplacer vers la page dekstop.

Comme cela, puis cela va m'envoyer à la page suivante ici, ce que vous devez vraiment rechercher où l'actif a été déplacé, d'accord, en zoomant comme cela, et nous y voilà, nous avons notre actif ici comme cela.

D'accord, maintenant regardez cela, nous avons un espace inutile autour de notre illustration.

Juste regardez cela, deux.

D'accord, donc je vais sélectionner cela ici.

Maintenant regardez tous ces fichiers ici.

Voyez-vous ce numéro de bienvenue deux, c'est un cadre.

D'accord, donc regardez cela, nous avons tant de vecteurs ici, je vais sélectionner le tout dernier comme cela, celui-ci, d'accord, je vais sélectionner le tout dernier ici.

Et puis ce que je vais faire, c'est que je vais littéralement le supprimer d'ici, supprimer.

Maintenant regardez cela, cet espace blanc est parti, je vais sélectionner ce texte ici, d'accord, je veux dire, je vais sélectionner le cadre entier, comme cela.

Maintenant, regardez, nous avons encore des espaces autour de notre illustration.

Maintenant, ce que vous allez faire, c'est que vous allez sélectionner cela ici, vous voyez cela, d'accord ? Comme cela, et puis sélectionner le groupe ici.

Maintenant regardez, tous les espaces blancs sont partis comme cela.

Donc je vais l'amener ici comme cela.

Maintenant, la prochaine chose que nous allons faire, c'est que nous allons copier la largeur et la hauteur de cette image, d'accord, en double-cliquant ici.

Maintenant, voyez-vous cela.

Donc la première chose que nous pouvons faire, c'est que nous pouvons soit copier les deux ensemble et puis les coller sur cette illustration un par un.

Mais si vous voulez gagner un peu de temps, ce que vous pouvez faire, c'est que vous pouvez simplement sélectionner celui-ci, et puis copier uniquement la largeur, d'accord ? Ctrl C, et puis vous sélectionnez celui-ci, et puis vous cliquez sur ce bouton de contrainte de proportion, d'accord, comme cela, et puis vous le collez ici comme cela.

Maintenant, ce qu'il va faire, c'est qu'il va mettre à l'échelle notre illustration, proportionnellement, il va suivre la mesure proportionnelle.

Et aussi, il va changer notre hauteur ainsi que la mesure proportionnelle.

Donc, je vais cliquer ici comme cela.

Nous y voilà.

Maintenant regardez, cela ressemble à celui-ci, vous voyez cela.

Je garde, je garde les deux l'un sur l'autre.

Regardez, cela ressemble assez à celui-ci.

D'accord, donc je vais l'amener ici.

Et puis je vais prendre l'aide de ce guide de couleur orange et enclencher mon image ici sur mes grilles comme cela, regardez cela.

Très bien, maintenant concernant le texte, comment écrivons-nous le texte, d'accord, donc je vais double-cliquer ici et double-cliquer ici, encore, comme cela maintenant cela va copier le texte, d'accord ? Ctrl C, vous n'avez pas à écrire quoi que ce soit, d'accord ? Juste copier le texte.

D'accord, donc je vais venir ici et puis T, cliquer ici, d'accord, Ctrl V.

Donc j'ai copié le texte ici.

Et avec cela, il a changé ces propriétés ici aussi.

Très bien, donc je vais le garder ici comme cela.

Et je vais revenir ici comme cela, double-cliquer ici.

Et si vous voulez copier quelque chose rapidement, ce que vous allez faire, c'est que vous allez double-cliquer ici, d'accord ? Et puis vous allez appuyer sur alt, sur votre clavier et puis le faire glisser ici comme cela, vous allez, il a été copié très rapidement comme cela.

Maintenant concernant le bouton, comment créer un bouton, je vais utiliser la disposition automatique, d'accord, donc ce que je vais faire, c'est que je vais venir ici et puis tout d'abord, je vais appuyer sur T, d'accord ? Cliquez, et je vais écrire la connexion.

D'accord.

Désolé, se connecter.

Maintenant, voyons les propriétés de ce texte ici.

D'accord.

Ctrl clic comme cela.

45 pixels.

Gras rowboat d'accord.

Donc je vais écrire rowboat ici.

Livre porte et bol ici.

45 ici aussi.

Entrer.

Maintenant regardez ce que je vais faire.

Je vais cliquer ici et puis clic droit Ajouter Disposition Automatique comme cela, regardez cela.

D'accord, maintenant nous avons un fond visible.

Donc je vais cliquer ici.

Et voyez-vous ce champ ici ? Je vais cliquer sur ce champ.

Je vais sélectionner cela ici.

D'accord ? Et voyez-vous ma palette de couleurs ici ? Ce n'est en fait pas du noir complet, il a en fait une couleur.

D'accord, voyez-vous cette couleur ici, c'est cette couleur.

Donc je vais le sélectionner à nouveau.

Et le champ, je vais sélectionner celui-ci et ce bouton œil ici.

Et puis je vais cliquer ici comme cela, il est devenu très sombre.

Donc je vais double-cliquer ici sur le texte ou contrôle, cliquer comme cela, d'accord, et puis cela est défini à noir, je vais sélectionner cela et f, f, f, f six fois, ou trois fois, vous pouvez aussi le lire trois fois f, f, f, entrer, regardez cela.

Nous avons du texte de couleur blanche à l'intérieur de notre bouton de couleur noire.

Donc je vais cliquer ici.

Et je vais définir un rayon de bordure, d'accord ? Je veux dire un rayon de coin, disons en pixels, d'accord, laissez en fait voir l'original, il est en fait 18 pixels, d'accord, et la largeur est celle-ci.

Donc je vais copier la largeur d'ici, Ctrl C, et la hauteur est de 105 pixels, d'accord.

Et je vais la coller ici, regardez cela, vous ne pouvez pas réellement la changer ici.

Mais dans ces cas, ce que vous pouvez faire, c'est que vous allez venir ici et simplement la faire glisser ici comme cela un peu, un peu, pas trop.

Et vous pouvez voir cela, il a été déverrouillé, et la hauteur est faible.

Pour déverrouiller le type, vous allez cliquer ici comme cela, et vous allez le faire glisser comme cela.

Regardez cela, la hauteur et la largeur, tous les deux ont été déverrouillés.

D'accord, donc je vais payer la largeur ici.

Ctrl V, entrer.

D'accord, ne vous inquiétez pas, nous allons changer les propriétés, d'accord, et la hauteur devrait être, attendez une minute, elle devrait être, je pense, 70 à 105.

D'accord, nous allons sélectionner cela, et 105, entrer.

Maintenant, nous avons besoin que le texte soit au centre, vous vous souvenez de cette propriété ici, cette petite icône, je vais sélectionner cela, et je vais cliquer ici afin qu'il soit centré au milieu, comme cela, regardez les deux horizontalement et verticalement.

Nous avons obtenu notre solution ici.

Très bien, donc je vais cliquer sur le bouton ici, et je vais faire un clic droit, et je vais répliquer un autre modèle.

Comment faire cela ? Tout sur votre clavier et le faire glisser comme cela, regardez cela.

Et je vais écrire ici, quoi ? Allez, dites-moi, inscrivez-vous.

Il y en a un.

D'accord.

Attendez une minute, inscrivez-vous.

D'accord, donc toujours, toujours allumez celui-ci.

Donc que l'espace blanc supplémentaire est réduit.

Et le bas reste, je suis dans le texte du bas reste au centre.

D'accord, donc je vais cliquer ici à nouveau, afin que cela soit activé, d'accord, toute la largeur est activée.

Donc ce que cela fait, c'est qu'il supprime tous les espaces blancs supplémentaires, afin que votre bouton ait l'air proportionnel esthétique.

Donc maintenant regardez cela, même si nous avons des boutons comme cela, ce que nous allons faire, c'est que nous allons utiliser notre disposition, d'accord, donc je vais les sélectionner tous les deux ensemble et shift plus a comme cela, regardez cela.

D'accord, et puis je vais cliquer ici, et puis centrer ici comme cela, afin qu'il reste toujours au centre.

Et regardez cela, nous devons aussi ajouter une ombre portée à nos boutons.

Comment faire cela, je vais cliquer ici comme cela, et regardez FX ici.

Je vais cliquer ici comme cela.

D'accord.

Maintenant, regardons notre document original, quelle est la priorité de notre effet, l'effet d'ombre portée, d'accord, donc je vais sélectionner ce bouton ici comme cela, attendez une minute, comme cela, et puis je vais sélectionner cette ombre portée ici.

Donc ils sont définis à 10.

Sur l'axe x, y est 10.

Et le flou est quatre ici.

D'accord, donc je vais venir à cette pratique ici, et puis je vais sélectionner le bouton, je vais sélectionner cette ombre portée, je vais dire qu'ils auront 10 comme cela, le flou est quatre, c'est bien.

Et pour les épouses, cela devrait être 10, comme cela, nous y voilà.

Maintenant, pour transférer ce rayon de flou à ce bouton ici, au lieu de le refaire, au lieu de répéter la même chose, ce que vous allez faire, c'est que vous allez cliquer ici, double-cliquer ici, et puis regardez cela, je vais double-cliquer ici, et puis je vais faire un clic droit ici et puis copier, coller.

D'accord, je vais copier les propriétés, et je vais double-cliquer ici, et faire un clic droit, et puis je vais coller les propriétés ici comme cela, regardez cela, j'ai réussi à transférer l'ombre portée du premier bouton au deuxième bouton ici comme cela, nous allons, c'est ainsi que fonctionne la copie des propriétés.

D'accord, jusqu'à présent, tout va bien.

Maintenant, regardons l'écart entre les boutons sur le document original.

D'accord, donc je vais venir ici.

Au lieu de regarder la disposition orale, ce que vous pouvez faire, c'est que vous pouvez simplement sélectionner ce premier deuxième bouton ici, et puis maintenir, vous appuyez sur alt et où que vous placiez la souris, cela va montrer cette distance entre ce bouton et l'élément comme, laissez regarder cela.

Je vais garder ma souris sur le premier bouton ici.

Laissez-moi vous montrer cela à nouveau.

D'accord, donc je vais double-cliquer ici et double-cliquer à nouveau, ou simplement appuyer sur Ctrl sur votre clavier et puis clic droit, clic gauche, désolé, comme cela.

Et vous allez appuyer sur Alt sur votre clavier, d'accord, et vous allez placer votre souris sur le premier bouton ici maintenant, regardez cela.

Laissez-moi zoomer, d'accord, regardez cela, nous avons 53 pixels d'écart entre le premier et le deuxième bouton.

Donc je vais venir ici, comme vous vous en souvenez, nous avons activé la disposition orale sur nos boutons ici.

Donc je vais cliquer ici, et puis je vais venir ici et écrire 53 pixels d'écart, d'accord, cinq, trois, entrer, comme cela.

Maintenant, concernant l'écart entre notre texte ici, et le texte ici, je veux dire, le premier texte et le deuxième texte, ce que vous allez faire, c'est que vous allez faire la même chose, d'accord, je vais venir ici comme cela, je vais Ctrl cliquer comme cela, et puis je vais appuyer sur alt, sur mon clavier, Alt, et puis je vais mettre ma souris sur ce deuxième test, nous allons, nous avons 41 pixels, je peux voir 41 pixels d'écart.

Donc je vais venir ici.

Et au lieu de le faire manuellement, sélectionnez simplement les deux ensemble comme cela, et shift plus a, et puis vous cliquez sur cette option.

Et puis vous allez le faire comme cela.

D'accord, vous allez le garder au milieu, milieu gauche, comme cela.

D'accord, donc combien était l'écart à nouveau ? 41.

À droite ? Donc je vais venir ici.

Et voyez-vous cette option après avoir cliqué sur cela 41, fixez-le comme cela.

41, entrer, nous y voilà.

Maintenant, regardons la différence, je veux dire, la distance entre les boutons et le texte, d'accord, je vais sélectionner ce bouton ici.

Et puis même processus, d'accord, alt sur votre clavier, et puis sélectionnez ce texte ici comme cela, nous avons obtenu 41 pixels aussi.

Donc je vais venir ici.

Et je vais sélectionner cela et un bouton comme cela, regardez cela, et puis shift plus a, maintenant je vais écrire 41.

Ici.

Et nous y voilà.

Regardez cela, nous avons réussi à copier le design, du design principal à notre cas de pratique ici.

Maintenant, nous devons en fait aligner notre contenu selon ces écarts et diverses propriétés, n'est-ce pas, donc je vais cliquer ici, d'accord, ce bloc ici, et puis je vais cliquer sur Alt sur mon clavier, même processus, à droite, donc je vais garder la souris en bas afin que je puisse voir l'écart entre mon écran et le contenu, nous allons, il est de 109 pixels ici, vous voyez ces 109 pixels.

Donc je vais revenir ici, cliquer sur cela et Alt, je vais appuyer sur Alt sur mon clavier, et puis je vais mettre ma souris ici comme cela, regardez cela, cela fait 200 000 pixels d'écart entre ce coin, je suis dans cette fenêtre, et ce contenu ici.

D'accord, donc ce qu'était l'original, c'était 109.

Donc ce que je vais faire, c'est que je vais le faire glisser en bas comme cela, d'accord, et puis je vais le tester à nouveau, caméra, cliquer ici et alt.

Et puis je vais mettre ma souris ici.

Regardez, c'est 124, ce qui signifie que je dois aller un peu plus bas, comme cela.

D'accord, testons à nouveau, alt 204.

Donc je vais cliquer ici.

Et puis sur cinq, appuyez sur la flèche haut sur mon clavier, d'accord, sur cinq, il est actuellement sur 104.

D'accord, 100 506 789, comme cela.

Et je vais sélectionner cela ici, et Alt, sur mon clavier, mettre ma souris ici, regardez cela, cela fait 109 pixels ici, concernant notre image ici, corrigeons cela aussi.

Donc je vais venir ici et je vais sélectionner cette image ici en double-cliquant ici.

Et je vais appuyer sur Alt sur le clavier, Alt, et puis je vais mettre la souris ici.

167 pixels ici, d'accord, donc je vais venir ici, en arrière ici et puis le faire glisser en bas, d'accord, et puis je vais sélectionner alt, regardez 140 pixels, d'accord ? Donc je vais cliquer ici, shift et flèche haut shift up, donc cela va bouger de 10 pixels, d'accord, donc c'est actuellement 150 161 234567, j'ai appuyé sept fois sur ma flèche haut.

Maintenant regardez cela.

Je vais cliquer ici.

Et alt, je vais mettre ma souris ici comme cela, parce que 167 pixels d'écart entre notre image, je suis dans l'illustration et l'écran du bas.

Maintenant, nous allons au design original ici.

Voyez-vous ces jolis gribouillis ici ? Voyez-vous ce petit flex ici, comment les recréer ? Laissez-moi vous montrer.

D'accord, donc je vais dézoomer et je vais venir à cette page d'actifs ici.

D'accord.

Maintenant regardez, maintenant regardez, j'ai en fait inclus cette illustration de flex ici, d'accord, donc je vais laisser cela et je vais la copier, comme cela, Alt, faites glisser comme cela, d'accord ? Cliquez avec le bouton droit, déplacez la page vers le bureau.

D'accord, donc je vais venir à la page suivante ici, dézoomez et regardez et regardez où se trouve le fichier.

D'accord, le fichier est ici.

Je veux dire, ce cadre est ici.

D'accord ? Donc je vais cliquer ici comme cela.

Et je vais le ramener ici comme cela.

Attendez une minute.

Nous y voilà.

Maintenant regardez, je vais zoomer dans le fichier principal, d'accord ? Comme cela.

Maintenant regardez cela.

Nous avons ce triangle ici, ce cercle ici, et puis ce motif d'onde ici, comment recréer cela.

Donc je vais venir à cette image de flocons ici.

Et tout d'abord, qu'était-ce, le triangle, d'accord, donc je vais copier un triangle d'ici.

Regardez cela.

Nous avons un triangle ici.

Donc je vais appuyer sur Ctrl sur mon clavier et puis cliquer ici.

Comme cela, d'accord, cela signifie que j'ai sélectionné cela. D'accord, donc je vais maintenant appuyer sur la touche Alt de mon clavier, copier.

D'accord, Alt, et puis je vais le faire glisser d'ici comme cela.

Regardez les deuces, vous verrez ce qu'il y a dans ma main ici, je l'ai copié.

Donc je vais le coller ici directement sur mon image de pratique ici, d'accord, comme cela, je vais relâcher ma souris, et puis je vais utiliser la touche Alt, nous y voilà.

Maintenant, la prochaine chose est, j'ai ce cercle ici, d'accord.

Maintenant, pour faire le cercle, regardez le cercle ici, je vais sélectionner cela, contrôle, clic, et puis alt, faites glisser comme cela.

D'accord, maintenant, je vais venir ici, et je vais sélectionner cela ici, et puis nous allons entrer, augmenter la taille un peu comment faire cela, je vais appuyer sur k sur mon clavier, et puis je vais le faire glisser comme cela un peu, et puis il va devenir un peu plus grand.

D'accord, maintenant, qu'est-ce que, qu'avons-nous, nous avons ce motif d'onde ici.

D'accord, donc je vais venir ici, et je vais sélectionner cette onde ici.

Maintenant, c'est, maintenant regardez cela, c'est un peu compliqué, d'accord ? Donc cette onde est en fait plusieurs icônes ensemble, d'accord ? Si je contrôle et clique ici, maintenant regardez cela, ce tout, cette onde entière ne se sélectionne pas, d'accord, juste une partie unique se sélectionne.

Donc dans ce cas, que devriez-vous faire, vous allez sélectionner, vous allez appuyer sur Ctrl, et shift tous les deux ensemble, d'accord, comme cela Ctrl, Shift, et puis cliquer comme cela, cliquer, cliquer, cliquer, cliquer OK.

Et puis vous allez faire ce que vous allez faire, vous allez appuyer sur Ctrl G sur votre clavier, ce qui signifie que nous allons en faire un groupe, ou ce que vous allez faire, c'est que vous allez faire un clic droit ici, et puis en faire une sélection de groupe comme cela, nous allons, maintenant cela va se comporter comme un seul élément, au lieu de se comporter comme un élément différent individuel.

D'accord, maintenant je vais copier cela d'ici, je vais cliquer OK.

Maintenant, je vais revenir ici, et je vais le coller ici, et puis je vais le faire tourner un peu, d'accord, comme cela.

Nous y voilà.

Donc cela ressemble assez à celui-ci.

Maintenant, je vais augmenter l'écart entre eux, comme cela, regardez cela.

Nous y voilà.

Et, et pour changer la couleur de ce triangle et de son motif d'onde, ce que vous allez faire, c'est que vous allez venir ici sur le design principal, Ctrl, Shift, d'accord, cliquez sur celui-ci, et puis cliquez sur celui-ci, oh, désolé, vous allez cliquer sur, vous allez, vous allez cliquer ici d'abord, d'accord, et puis cliquez sur celui-ci, cet outil pipette ici, et puis vous allez sélectionner celui-ci.

D'accord ? Donc tout d'abord, est-ce que je clique ici, et puis sélectionnez ce champ ici, puis cet outil pipette ici, d'accord, et puis vous allez sélectionner celui-ci, nous y voilà.

Regardez cela, nous avons coloré nos flocons comme cela.

D'accord, cela ressemble assez au design original.

C'est notre cas de pratique.

Et c'est notre design ici, regardez cela.

Maintenant, nous avons beaucoup de flocons ici, erreur et notre image ici.

Et puis nous avons un peu de ici.

Donc je vais mettre la vidéo en pause et compléter tous ces gribouillis ici.

En attendant, vous faites de même, vous mettez la vidéo en pause, et vous complétez, vous voyez le fichier original ici.

Et puis vous faites la même chose sur votre cas de pratique ici.

Très bien, donc je vais vous voir dans quelques minutes.

Donc nous reviendrons, j'ai complété tous ces gribouillis ici comme cela, regardez cela, cela ressemble assez à la copie carbone du design original ici.

Félicitations, nous avons terminé la création de notre premier design web.

Maintenant, passons à la section suivante.

Il y en a une ici.

D'accord, nous allons concevoir cela.

Donc je vais venir ici et créer un cadre F, d'accord, et puis suivant ici comme cela, regardez cela, j'ai créé ce cadre ici.

Et puis je vais venir à ces actifs ici.

Et sélectionnez celui-ci, d'accord, ce peintre ici et puis le copier d'ici comme cela, et clic droit, l'envoyer à, je veux dire, déplacer vers la page, Dexter ici.

D'accord, je vais revenir à la page suivante ici.

Et je vais chercher le fichier.

Où est-il ? Le voilà, nous avons notre peintre ici comme ce gars, je vais zoomer un peu.

Et le processus dit pendant le processus, vous devez supprimer ce fond de couleur blanche.

Donc sélectionnez cela et regardez cette surbrillance ici.

D'accord, donc je vais supprimer ce vecteur tout en bas ici, clic droit, clic gauche ici, et puis supprimer comme cela.

Regardez cela.

Et maintenant nous allons sélectionner cela et puis venir ici sur le cadre sélectionné pour le regrouper et cela va supprimer tous les espaces blancs inutiles.

D'accord, donc je vais le garder ici comme cela.

Maintenant je vais venir ici, et je vais inspecter cet élément, qu'est-ce que c'est en double.

Et maintenant je vais venir ici et double-cliquer ici pour inspecter l'élément avec cette largeur ici, 657.

Cliquez ici, Ctrl C, revenez ici, comme cela, cliquez et puis cliquez ici, contraintes proportions, d'accord, et puis collez-le ici comme cela.

Ctrl V, entrer.

Nous y voilà.

Comme cela.

Et je vais le garder au centre comme cela et le garder au centre comme cela.

Ou ce que vous pouvez faire, c'est simplement sélectionner cela, Align Horizontal Centers comme cela.

Oh, désolé, pas cela.

Un, celui-ci Align Vertical fin comme cela, et il va être enclenché au centre.

verticalement.

D'accord ? Nous y voilà.

Et concernant ce texte ici, ce que je vais faire, c'est que je vais Ctrl cliquer ici comme cela, et puis je vais appuyer sur Alt sur mon clavier, le faire glisser comme cela, d'accord, cela, je vais le garder ici comme cela.

D'accord ? Même chose.

Je vais faire la même chose pour ce texte ici aussi.

Ctrl, clic, et puis appuyer sur alt, glisser, comme cela, regardez cela.

Le processus dit, vous allez cliquer ici et puis alt et puis déplacer votre souris vers ce premier texte.

D'accord ? Combien d'espace voyez-vous, c'est des pixels, d'accord, donc je vais venir ici et shift plus a shift a comme cela.

Et je vais le garder au milieu ici comme cela, je vais cliquer sur cela, nous y voilà.

Et il devrait être combien d'écart, 80 pixels, non ? Il est actuellement défini à 51 pixels.

Donc écrivez un comme cela, d'accord, entrer.

Nous y voilà.

Et puis je vais revenir à ce bouton ici.

Donc j'ai déjà ce bouton, nous avons déjà créé les boutons.

Donc je vais venir ici et double-cliquer sur ce bouton, double-cliquer sur ce bouton, cela cliquera à nouveau ici.

D'accord, donc je vais copier ce bouton en écrivant en appuyant sur alt, et puis glisser comme cela.

D'accord, je vais le garder ici, le lever, et je vais changer le texte pour commencer.

D'accord, comme cela, double-cliquer ici, commencer.

Très bien maintenant, cela a l'air assez bien.

Donc ce que je vais faire, c'est que je vais cliquer sur ce bouton ici, et puis Alt sur mon clavier.

Et puis je vais mettre une souris sur ce texte sur celui-ci, combien d'écart avons-nous, nous avons 80 pixels d'écart.

Donc je vais revenir ici et donner 80 morceaux d'écart aussi.

D'accord, donc pour le faire rapidement, je vais cliquer ici comme cela shift plus a, d'accord.

Et puis je vais cliquer ici, et je vais le garder au milieu comme cela.

Et cela devrait être défini à 81 ad terminé.

Nous y voilà, nous avons terminé.

Et concernant le flex, et concernant ce petit flex ici, je vais mettre la vidéo en pause et compléter, vous faites la chose, vous mettez la vidéo en pause et créez ces flocons ici, comme je vous ai montré comment créer ces flocons.

Alors je vais vous voir dans quelques minutes.

Jusqu'à présent, tout va bien, nous avons en fait oublié d'inclure la grille de disposition.

Donc ce que je vais faire, c'est que je vais cliquer ici et puis activer la grille de disposition en cliquant comme cela, d'accord.

Et puis je vais cliquer ici et puis la changer en colonnes, d'accord, désolé, pas en lignes, en colonnes, comme cela.

Et je vais définir la marge à 50 pixels ici comme cela, d'accord.

Et puis la gouttière devrait être 30, comme cela.

Très bien.

Maintenant, nous allons enclencher maintenant, nous allons enclencher le contenu du côté droit ici comme cela.

Et puis nous allons enclencher cette image, cette illustration du côté gauche ici comme cela.

D'accord, nous y voilà.

Cela a l'air assez bien.

Nous avons terminé avec cette section ici.

Maintenant, je vais vous montrer comment vous pouvez faire des cartes.

Maintenant, je vais vous montrer comment vous pouvez faire des cartes ici comme cela, d'accord, donc je vais créer un cadre ici, F, d'accord, et puis sélectionner cette option ici.

Et puis je vais le garder côte à côte ici.

Très bien, maintenant regardez cela ici.

Donc vous le faites manuellement.

Donc vous faites tous ces travaux manuellement.

D'accord, je vais simplement copier et coller cela ici.

Je vais simplement vous montrer comment créer ces cartes.

D'accord, donc je vais copier d'ici comme cela, et alt glisser comme cela, d'accord.

Et je vais le garder ici.

Maintenant, sélectionnez le premier cadre, je veux dire le design original, d'accord, et voyez les grilles comme cela.

Donc je vais cliquer ici comme cela, attendez une minute, nous avons 77 pixels de marge et 32 pixels de gouttière.

Donc je vais cliquer ici et cliquer sur la grille de disposition ici comme cela.

Donc je veux la changer en colonnes ici, d'accord, donc la marge est de 77 pixels, donc 77 en comme cela, et la gouttière était de combien, laissez-moi en fait l'inspecter à nouveau, un 32.

D'accord, cliquez à nouveau.

Cliquez sur ce 132 ici.

D'accord, attendez une minute, 32. Nous y voilà.

Et nous devrions avoir combien de colonnes, trois colonnes.

D'accord, cliquez sur cela, trois, entrez.

Très bien maintenant.

Maintenant, ce que vous allez faire, c'est que vous allez cliquer ici et enlever ces colonnes comme cela et double-cliquer ici sur les cartes.

Regardez cela.

Largeur et Hauteur.

Regardez cela.

Regardez la largeur et la hauteur de notre carte numéro un, d'accord, cela fait 400 de largeur par 633 de hauteur.

Donc je vais revenir ici et je vais sélectionner un rectangle, clic droit sur mon clavier, d'accord, cliquez ici comme cela, ce qui devrait être bien.

400 D'accord, entrez, et quelle devrait être la hauteur, laissez en fait inspecter comme cela 633.

D'accord, donc cliquez ici comme cela, écrivez 633 633, entrez.

Nous y voilà, nous avons nos cartes, d'accord, je vais le placer ici, comme cela et de l'eau.

Et maintenant ce que je vais faire, c'est que je vais enlever la couleur, vous voyez cette couleur est de couleur gris foncé.

D'accord, donc je vais l'enclencher ici sur ma grille de disposition, d'accord.

Et puis je vais enlever pour enlever la couleur, vous cliquez sur ce signe moins ici, comme cela.

Et pour voir le rectangle, vous cliquez sur ce trait ici, d'accord, et puis vous le sélectionnez à trois images comme cela, ou peut-être même quatre à quatre, entrez, nous y voilà.

Et maintenant avec ce rayon de bordure, nous avons aussi un rayon de bordure autour de notre design principal, d'accord, donc je vais créer, donc je vais créer un rayon de bordure ici en cliquant ici comme cela.

Attendez une minute, nous y voilà.

Il devrait être de 15 pixels.

D'accord ? Regardez, cela a l'air assez bien.

Et cela ressemble à l'original aussi.

Et je vais sélectionner cela, et je vais créer deux copies de plus, d'accord, Alt, glisser, comme cela.

Faites-le à nouveau, Alt et glisser comme cela.

Nous y voilà.

Je vais vous donner le haut ici comme cela.

Je vais le prendre, je vais le prendre du haut aussi.

Et regardez cela.

Je vais le placer au centre pour une grille comme cela, d'accord, comme cela, attendez une minute, comme cela.

Nous y voilà.

Maintenant comment placer ces images, d'accord, revenez aux actifs, d'accord ? Vous voyez ces trois images ici ? Copiez-les, d'accord, en les sélectionnant une par une, en les sélectionnant toutes en les sélectionnant toutes ensemble, à droite Shift, cliquez, cliquez sur le nom, cliquez sur le nom, d'accord, maintenant alt copie, comme cela alt, faites glisser par ici comme cela, d'accord, maintenant, clic droit, déplacez vers la page de bureau comme cela, d'accord, et allez à la page suivante, zoomez et voyez où elle se trouve ? Voici notre image, d'accord, cliquez ici, cliquez ici, cliquez ici comme cela, amenez-la ici.

Comme cela.

Et vous vous souvenez des étapes, vous allez cliquer ici.

Et vous allez faire défiler tout en bas ici, et enlever ce vecteur d'ici, d'accord, supprimez, cliquez ici, cliquez sur ce cadre ici, et puis changez-le en groupe ici, comme cela maintenant cela va enlever tous nos espaces blancs supplémentaires, d'accord, maintenant faites-le glisser ici comme cela, venez ici sur le design principal, contrôle, je veux dire, sélectionnez celui-ci et regardez cette largeur et cette hauteur, 359 Ctrl, celui-ci et venez ici, sélectionnez cela, sélectionnez ce petit bouton de contrainte ici, comme cela, et collez-le ici comme cela.

Ctrl V, entrez.

Nous y voilà.

Nous avons une petite icône ici, nous pouvons la placer ici comme cela.

Et vous verrez cela, nous avons une petite partie ici.

Voyez-vous cette partie ? Nous n'avions pas cette partie ici.

D'accord, donc pour l'enlever, nous allons venir ici et Ctrl, cliquez comme cela et appuyez sur la touche Supprimer, appuyez sur la touche supprimer de votre clavier et cela va disparaître comme cela.

Regardez cela.

Nous y voilà.

Copiez le nom d'ici Ctrl, cliquez alt glisser, comme cela, le même processus pour la musique et la pharmacie aussi.

Comme cela contrôle, cliquez alt glisser par ici comme cela et faites le même processus.

Le même processus pour ces images ici.

vous mettez la vidéo en pause, prenez une minute et complétez le processus.

D'accord, je reviens dans une minute.

Très bien, maintenant j'ai terminé le processus.

Maintenant, ce que nous allons faire, c'est que nous allons centrer notre image et le texte au centre de notre carte.

Comment faisons-nous cela, nous allons cliquer sur l'illustration et la chimie comme cela.

Et je vais shift plus a ou cliquer sur cette disposition orale ici comme cela.

D'accord, maintenant regardez, cela va être au centre.

Et la prochaine chose que vous allez faire, c'est que vous allez cliquer ici comme cela, et cliquer ici pour le garder, le garder au centre à la fois horizontalement et verticalement.

D'accord, comme cela, regardez cela.

D'accord, et cliquez ici à nouveau et enlevez tous ces écarts ici, obtenez zéro comme cela, entrez.

Maintenant, ce que vous allez faire, c'est que vous allez copier ce bouton d'ici, d'accord, contrôle, contrôle, cliquez ici, comme cela, et alt glisser, d'accord, placez-le ici comme cela.

Faites de même pour toutes les cartes aussi comme cela.

Maintenant, regardons l'écart entre notre bouton et notre texte.

D'accord, donc je vais venir ici et contrôle clic et maintenir, appuyez sur le bouton Alt de votre clavier et mettez votre souris sur ce texte ici.

Maintenant regardez, nous avons 19 pixels d'écart, d'accord, donc je vais revenir ici, cliquez sur celui-ci et cliquez sur celui-ci en appuyant sur la touche Maj de mon clavier comme cela.

Maj plus a, il devrait être 90. D'accord, je vais mettre 19 ici.

Et pour mettre ce bouton au centre, je vais cliquer ici et cliquer sur cela.

Nous y voilà.

Maintenant, cliquez sur les deux ensemble comme cela.

Maintenant, vous allez cliquer et puis alt plus h, ce qui signifie que nous allons centrer les deux horizontalement et verticalement ensemble.

Donc alt plus h, alt plus h, alt plus v comme cela, regardez cela, nous avons centré horizontalement et verticalement à la fois la carte et le contenu.

D'accord, comme cela.

Et je vais sélectionner les deux ensemble.

Et je peux soit les regrouper ensemble dans un groupe, soit je peux aussi utiliser ou permettre, donc je vais juste utiliser le groupe, d'accord, Ctrl G, comme cela.

Cela est devenu un petit groupe ici.

Maintenant, vous dupliquez le même processus et fixez ces voitures ici.

D'accord, je vous laisse cela.

Voyez-vous ce design ici, c'est le même que le numéro un ici et le numéro deux ici.

D'accord, donc vous allez le faire vous-même.

Aussi, je crois que vous pouvez faire ce pied de page ici.

Donc je ne fais pas cela.

Je le donne juste pour vous.

Maintenant, laissez-moi vous montrer comment j'ai fait ces cartes ici.

D'accord, donc je vais revenir à mes actifs ici.

Et je vais venir, disons que je veux voir comme juste le premier, d'accord, je vais voir comme cela, et alt glisser ici comme cela, d'accord, clic droit, déplacer vers la page dekstop.

D'accord, comme cela, il a été déplacé vers mon bureau, laissez-moi dézoomer, voici mon actif ici, je vais le garder ici.

Oh, au fait, ce que vous allez faire, c'est que vous allez déplacer cela à droite en cliquant ici, Shift, cliquez comme cela.

D'accord, vous allez les sélectionner tous ensemble comme cela.

Et vous allez les déplacer comme cela.

Nous y voilà, cela a été déplacé ici, comme cela.

Et je vais venir ici, et je vais sélectionner mon F sur mon clavier, d'accord, F et puis je vais créer ce cadre Dexter comme cela, regardez cela, et je vais le faire glisser ici comme cela.

Nous y voilà.

Et concernant cela, et concernant la barre de navigation, ce que je vais faire, c'est que je vais la copier d'ici, d'accord, et puis je vais la coller ici, comme cela alt, et puis la faire glisser ici comme cela.

Nous y voilà.

Mais avant cela, nous devons aussi activer la grille de disposition comme cela contrôle, cliquez ici, et puis grille de disposition ici et la changer en colonnes, colonnes ici.

Et puis, quelle est la marge ? cliquez ici et activez cela ici comme cela.

Regardez cela.

Nous avons cette grille de colonne sur la grille de colonne ici, sélectionnez cela ici, et nous avons trois colonnes.

Et combien de marges, 50 pixels de marge, d'accord, 70 pixels de gouttière.

Donc, revenez ici, comme cela.

Sélectionnez cela ici, écrivez ici.

D'accord.

Donc, combien était-ce, 50 et 70, 50 pixels de marge, 70 pixels de gouttière, revenez ici, et écrivez 50.

Attendez une minute, 50 ici, et 70 gouttière.

Nous y voilà.

D'accord, maintenant, donc je vais sélectionner la première image ici, bien double-cliquez ici comme cela, double-cliquez ici, double-cliquez à nouveau ici.

Maintenant, continuez à cliquer, sauf si vous ne sélectionnez pas l'image, d'accord, comme cela, regardez.

Maintenant, j'ai sélectionné l'image.

Regardez cela.

Je peux voir la largeur et la hauteur ici aussi.

Donc je vais copier la largeur ici comme cela Ctrl C.

Maintenant, je vais revenir ici.

D'accord, je vais sélectionner mon cadre ici, vous voyez cet espace blanc ? Comment l'enlever, vous allez cliquer ici et le convertir en groupe comme cela.

Maintenant regardez, nous n'avons plus d'espace blanc.

Donc cliquez ici comme cela, et puis activez celui-ci, d'accord, propriétés de contraintes et puis payez la largeur ici comme cela.

Ctrl V, entrez.

Nous y voilà.

Nous avons notre image ici.

D'accord, maintenant comment ai-je fait ce cercle ici ? Tout droit, d'accord, vous allez voir comme ce cercle, pourquoi Ctrl.

Cliquez comme cela.

Maintenant regardez cela, j'ai un cercle de 198 par 198 pixels.

D'accord, donc je vais cliquer sur mon zéro, je suis sur la touche de mon clavier comme cela, entrer un désolé, cliquez.

Maintenant regardez cela.

J'ai ce cercle ici, comme cela, propriétés de contraintes et écrivez 198 comme cela, 198, entrez.

D'accord, maintenant ce que vous allez faire, c'est que vous allez le garder ici comme cela, regardez cela.

Au cas où le cercle serait quelque chose comme, au cas où, si le cercle ressemble à quelque chose comme cela, attendez une minute, laissez-moi vous montrer.

Au cas où le cycle ressemble à quelque chose comme cela, ce que vous allez faire, c'est que vous allez faire un clic droit sur le cercle, Envoyer à l'arrière comme cela.

D'accord ? Et je vais le garder ici à moins que je ne voie ce guide de couleur orange.

D'accord, regardez cela.

Il va être, il devrait être au centre ici.

D'accord ? Si vous ne voyez pas les gars qui regardent, nous allons faire, c'est que vous allez sélectionner les deux ensemble et appuyer sur alt H, ce qui signifie centrer horizontalement, comme cela.

Maintenant, vous allez sélectionner les deux ensemble.

Et puis voyez-vous cette option ici utilisée comme un masque.

Je vais sélectionner cela.

Maintenant regardez cela, j'ai cette option ici.

Encore, faites un cercle, d'accord, zéro sur votre clavier, cliquez ici, et puis utilisez ce 198 comme cela, tapez.

Désolé, entrez comme cela.

Maintenant, nous y voilà.

Maintenant, ce que vous allez faire, c'est que vous allez enlever le champ d'ici, voyez-vous cela ? Il a un champ, il est de couleur verte.

Voyez-vous cette couleur grise ici sur notre cercle, vous allez enlever le cercle, remplir, et puis sélectionner le trait ici et sélectionner trois ici comme cela, entrez.

Maintenant, ce que vous allez faire, c'est que vous allez l'amener ici comme cela.

Oui.

Voyez-vous cela ici, maintenant amenez-le ici comme cela.

Maintenant, si vous, si vous déplacez le cercle, si vous essayez de déplacer le cercle comme cela, vous allez voir un guide de couleur orange, qui va s'enclencher maintenant ce que vous allez faire, c'est que vous allez sélectionner votre cercle, d'accord, contrôle, cliquez comme cela, d'accord ? Maintenant, continuez à déplacer votre cercle, à moins que, tant que vous ne voyez pas le guide de couleur orange, qui s'enclenche au centre, nous sommes ici comme cela, regardez cela.

Il s'enclenche en fait ici.

le centre, nous sommes ici, regardez cela.

D'accord, maintenant ce que vous allez faire, c'est que vous allez sélectionner les deux ensemble comme cela, et Ctrl G.

D'accord, maintenant regardez, cela a été fixé.

D'accord, donc nous avons terminé de faire cette image de profil ici.

Maintenant, ce que vous allez faire, c'est que vous allez cliquer ici, comme cela et le faire glisser ici.

Mais avant cela, vous devez faire cette voiture.

D'accord, donc comment faire cette voiture.

Donc je vais double-cliquer ici et voir ces propriétés, regardez avec est 399.

Considérons-le comme 400.

D'accord, donc 400 ou 400, qui est un carré parfait.

Donc je vais venir ici, sur mon clavier, cliquer ici, comme cela.

Et ce que je vais écrire, c'est 400, ou 400.

D'accord, je vais cliquer ici et écrire 400.

Ici, 400, Entrée.

Et je vais enlever le champ d'ici complètement.

Maintenant, allez en fait voir l'image principale Ctrl, cliquez comme cela, et regardez cela, nous avons notre propriété de trait de quatre et cette couleur, d'accord, Ctrl C, je vais copier cette couleur de trait, comme cela, je vais voir et puis je vais sélectionner notre rectangle, d'accord, comme cela.

Si vous ne voyez pas le rectangle, ce que vous allez faire, c'est que vous allez sélectionner comme cela.

Maintenant regardez, je peux voir mon rectangle invisible, comme cela, trait ici, et couleur de base, Contrôle V, entrez, et puis je vais écrire trois ici comme cela.

Nous y voilà.

Maintenant, concernant le livre, maintenant concernant les watts d'ombre, vous allez faire, c'est que vous allez cliquer ici, vous pouvez simplement copier et coller l'ombre ou ce que vous pouvez faire, c'est que vous pouvez sélectionner cela ici comme cela, et puis cliquer sur ce FX ici, d'accord, et ombre portée, clic droit ici, et puis sur l'axe y aussi comme cela, entrez.

D'accord, maintenant je vais enlever les guides d'ici en cliquant sur cela.

Maintenant, vous voyez cela, nous avons un petit comportement étrange ici, vous voyez cela, nous avons un espace de couleur blanche ici qui est inattendu.

Donc pour l'enlever, ce que vous allez faire, c'est que vous allez cliquer ici comme cela, attendez une minute, nous allons cliquer sur ce rectangle ici, je veux dire carré ici, et puis nous allons le remplir avec la couleur.

D'accord, couleur de blanc, complet, pur blanc, d'accord, fff.

En tournant, maintenant regardez, le problème est résolu.

Puis ce que vous allez faire, c'est que vous allez soit écrire le texte ici ou copier le texte d'ici, d'accord, contrôle, cliquez alt, faites glisser comme cela, d'accord.

Et puis je vais mettre mon image ici comme cela, vous verrez quelque chose comme cela, clic droit, et l'amener à l'avant comme cela.

D'accord ? Maintenant contrôle.

Maintenant, sélectionnez les deux ensemble, comme cela, et shift plus a, et puis sélectionnez cette option ici, en haut au milieu comme cela, et sélectionnez les deux ensemble, shift plus a, et puis aussi ne voyez pas shift plus a, désolé, cliquez sur les deux ensemble, alt V et alt H, ce qui est le centre, à la fois horizontalement et verticalement.

D'accord, puis je vais en faire un groupe contrôle g comme cela.

Nous y voilà, nous nous sommes fait un composant de carte ici avec l'image de profil.

Maintenant, ce que vous allez faire, c'est que vous allez répliquer la même chose.

Donc mettez la vidéo en pause et complétez le processus ici et maintenant et je serai de retour dans un moment.

Très bien, nous avons terminé de faire notre page enseignants maintenant, copiez simplement ce pied de page d'ici que vous avez fait plus tôt.

D'accord, cliquez ici, et puis collez-le ici comme cela.

Nous y voilà.

Maintenant regardez, maintenant regardez ces deux pages ici, la page Contactez-nous et la page d'inscription ici, elles se ressemblent toutes les deux plus ou moins.

Je vais vous montrer comment vous pouvez faire celle-ci, la page Contactez-nous.

Et vous allez faire cette page de formulaire d'inscription vous-même.

Cela semble bien.

Maintenant, je vais maintenant zoomer et je vais sélectionner cela ici en cliquant et puis Shift, cliquez Shift, cliquez OK.

Je vais le garder du côté droit ici comme cela.

Maintenant, je vais zoomer ici et sélectionner un nouveau créer un nouveau cadre, d'accord, F et puis bureau comme cela.

Nous y voilà.

Et je vais le redimensionner un peu comme cela.

Attendez une minute.

Nous y voilà.

Maintenant, je vais copier cela.

Maintenant, je vais copier cela d'ici, attendez une minute, je vais sélectionner les deux ensemble et contrôle comme cela.

Nous y voilà.

Et regardez, nous sommes dans la page Contactez-nous, ce qui signifie que nous devons changer ce soulignement.

D'accord, donc je vais venir à ce design RTL ici, et je vais sélectionner cela.

Et je vais le faire glisser ici.

Dans cette page contactez-nous, d'accord.

Nous y voilà.

Et puis je vais le faire glisser pour couvrir toute la zone comme cela.

Et même chose pour la section enseignants aussi.

Vous voyez celui-ci ici.

Donc quand nous sommes sur la page d'inscription, ce soulignement devrait être sur la page d'inscription aussi.

D'accord, cela semble bien.

Maintenant, je vais revenir ici.

Maintenant, je vais simplement copier ce texte d'ici.

alt, faites-le glisser ici comme cela.

Et ici pour le garder au centre, sélectionnez les deux ensemble Ctrl G, et puis alt, H.

Maintenant regardez, il va être au centre du cadre ici.

Maintenant, comment ai-je fait ces icônes avec l'adresse, le numéro de téléphone, etc.

Maintenant, je vais revenir à ma page d'actifs ici, et vous voyez ces images ici, cette icône, je vais la copier d'ici, d'accord, alt et puis faites-la glisser ici, d'accord ? Ensuite, sélectionnez les deux, tous ensemble, clic droit, déplacez vers la page où, allez, dites-moi, c'est mobile.

Donc, venez à mobile ici, zoomez pour voir où il est, voici, je vais sélectionner tous ensemble comme cela et puis sélectionner k sur mon clavier et glisser ou sélectionner shift sur mon clavier, d'accord, et puis glisser comme cela.

Et cela va être redimensionné comme cela.

D'accord, je veux l'amener ici comme cela, dans cela.

C'est assez grand par rapport à celui-ci.

Vous pouvez, vous pouvez aussi inspecter la taille de l'icône comme cela contrôle clic comme cela, vous pouvez voir que c'est avec 50 pixels.

Et la hauteur est de 38.09 pixels, d'accord ? Donc vous pouvez faire cela aussi, ce que je vais juste utiliser mon outil d'échelle, d'accord, donc je vais les sélectionner tous ensemble et appuyer sur la touche k de mon clavier, et puis le mettre à l'échelle comme cela.

Nous y voilà.

Très bien, maintenant, maintenant ce que nous allons faire, c'est que nous allons sélectionner ce téléphone ici comme cela, d'accord, je vais, nous allons le rendre horizontal comme cela.

D'accord, maintenant, copions le texte d'ici, d'accord, alt, faites-le glisser comme cela.

Double-cliquez sur alt, faites-le glisser comme cela, d'accord, ou cliquez simplement ici, je suis dans le contrôle, cliquez ici et alt, non, désolé, alt, faites-le glisser comme cela.

Ou ce que vous pouvez faire, c'est simplement contrôle clic ici, comme cela, et puis alt, faites-le glisser comme cela.

Très bien, maintenant ce que vous allez faire, c'est regarder cela très attentivement.

Je vais sélectionner les deux ensemble et prendre l'aide de l'auto layout.

D'accord, le patron est ici, cliquez ici, comme cela, la chose plus.

Très bien, maintenant gardez-le au centre ici, à la fois le texte et l'icône comme cela.

Nous y voilà.

Maintenant, gardons un écart de 30 pixels, d'accord ? entre notre icône et le texte.

D'accord, même chose pour ici, shift a, cliquez ici et centrez-le ici comme cela.

Très bien.

Maintenant, combien était l'écart, 30 pixels, d'accord, voyez, comme cela, curly, entrez, allez.

Même chose ici, shift a, combien, 30, entrez, voyez comme cela, gardez-le au centre.

Nous sommes ici.

D'accord ? Maintenant, jusqu'à présent, tout va bien.

Cela ressemble à celui-ci.

D'accord.

Maintenant, maintenant si vous observez attentivement, alors vous pouvez voir que ces textes ne sont pas alignés sur une seule ligne.

D'accord, donc laissez-moi amener ma règle ici comme cela, en cliquant ici.

Et puis les règles ici comme cela.

Donc j'ai obtenu ma, donc j'ai obtenu ma règle ici, je vais cliquer ici et puis garder ma règle ici comme cela.

Donc je vais la garder ici, d'accord, à cette ligne.

Maintenant, si je zoome, alors vous pouvez voir que le texte est ici, d'accord, selon une règle, et ce que ce texte fait, il s'aligne avec une règle ici en même temps, ce texte ne s'aligne pas avec la règle ici.

C'est parce que la largeur de cette icône, la largeur de cette icône et la largeur de cette icône n'est pas la même.

Donc dans ce cas, ce que vous allez faire, c'est que vous allez simplement enlever cet auto layout, comment enlever l'auto layout, d'accord, cliquez ici, et sélectionnez ce groupe.

Et puis ce que vous allez faire, c'est que vous allez cliquer ici et puis Ctrl, Shift g sur votre clavier, enlevez ce groupe.

Maintenant, les deux se comportent comme des éléments individuels.

Très bien, même chose ici, enlevez le cadre du groupe et puis Ctrl Shift clé pour enlever ce groupe.

Venez ici.

Sélectionnez ce cadre de groupe, d'accord, Ctrl Shift G, enlevez ce groupe.

Nous y voilà.

Maintenant, ce que vous allez faire, c'est sélectionner tous les textes ici comme cela, d'accord, et puis utiliser l'auto layout shift plus a comme cela.

Maintenant, nos textes sont au centre ici, selon notre, selon cette règle ici, vous voyez cette règle et vous voyez ce continent, nous sommes ici.

Maintenant, si vous voulez aussi utiliser celui-ci et le garder ici, d'accord ? Du côté gauche de la ligne horizontale comme cela.

Très bien.

Maintenant, concernant ces icônes ici, vous pouvez faire de même, vous pouvez simplement utiliser l'auto layout aussi, en cliquant sur toutes ensemble, je veux dire en les sélectionnant toutes ensemble et puis shift plus K.

Et puis nous devons les garder au centre, à la fois horizontalement et verticalement.

Donc cliquez ici et regardez comme cela.

Très bien, puis, jusqu'à présent, tout va bien.

D'accord, maintenant nous allons sélectionner toutes ensemble comme cela.

D'accord, et puis Ctrl G sur votre clavier pour verrouiller la position.

Très bien, nous y voilà.

Regardez cela.

Cela a l'air très bien.

Maintenant, cliquez sur ce document original ici comme cela.

Très bien, et puis alt clavier, mettez votre souris ici comme cela, combien d'écart y a-t-il entre notre adresse et ce texte ? 46.

Il y a un duplicata du même aussi.

Cliquez ici et puis gardez-le ici comme cela.

Et l'alternative serait de le donner ici, combien, combien est-ce ? 53 donc vous devez aller combien ? Neuf étapes de plus ? D'accord, donc il a neuf fois la flèche vers le haut, d'accord.

123456789.

Maintenant, laissez inspecter. D'accord, cliquez ici, Alt n et puis mettez votre souris ici.

44.

Attendez une minute, c'était combien ? Désolé.

46 Oh, désolé, j'ai bougé deux pixels vers le haut.

Donc je vais descendre deux pixels.

Donc cliquez deux fois sur la flèche vers le bas.

D'accord, un, deux.

Maintenant, cela va être calamy mesure exacte.

D'accord, donc cliquez ici, alt et mettez-le ici comme cela.

46.

Nous y voilà.

Maintenant, créons ce formulaire ici.

D'accord, donc laissez inspecter le premier.

D'accord, cliquez sur Ctrl, cliquez ici comme cela, combien est la hauteur 63.9.

Considérons 64.

D'accord, donc venez ici.

Et si vous voulez enlever la règle, ce que vous allez faire, c'est que vous allez cliquer ici, et puis sélectionner ces règles et la règle, partez, comme cela.

Maintenant, appuyez sur r sur votre clavier et faites-le glisser comme cela, combien était la hauteur ? 65 ? À droite.

64.

Très bien, donc je vais cliquer ici et écrire 64, Entrée.

Et je vais le garder ici comme cela.

Et je vais le faire glisser jusqu'à ce que je n'aie pas couvert toute la largeur d'une disposition.

Super comme cela.

Maintenant, quel est le rayon de la bordure ? Oui, 9.36.

Donc du design RTL, donc je vais cliquer ici et écrire le garçon 9.36, appuyez sur entrer, nous y voilà.

Et puis ajoutez un trait, comme cela, combien trois, entrez ? Pas sûr, désolé, considérons-le comme deux, entrez, nous y voilà.

Maintenant, vous pouvez voir que ce formulaire en haut, et ici sont similaires, je veux dire, identiques.

Donc ce que vous allez faire, c'est que vous allez appuyer sur alt sur votre clavier et le faire glisser ici comme cela, d'accord.

Et nous avons celui-ci, même chose ici aussi, faites-le glisser ici, comme cela, et puis faites-le glisser comme cela, nous y voilà, boom.

Et écoutez, enlevons notre disposition orale et la grille de disposition d'ici en sélectionnant cela ou vous pouvez aussi l'enlever définitivement.

Mais ne faites pas cela.

D'accord, sélectionnez simplement celui-ci.

Et il va être enlevé, je veux dire, la disposition orale, donc commentaire et ainsi de suite ici.

Vous voyez ces formulaires ici, sélectionnez cela et enlevez le champ.

Et il va devenir blanc comme notre document original ici.

D'accord, même chose pour celui-ci.

Et faites de même pour celui-ci aussi.

Maintenant, je laisse le reste du travail à vous.

Ce que vous allez faire, c'est que vous allez placer ce texte, vous voyez ce texte ici, ce texte est du texte, ce texte et le bouton sur notre cas de pratique ici.

D'accord ? Je crois que vous pouvez le faire.

Très bien, très bien.

Maintenant, vous vous souvenez de notre dernier cadre ici ? C'est le même que celui-ci.

Attendez une minute, celui-ci, ce cadre de contactez-nous et celui-ci, d'accord ? Le premier cadre ici, d'accord ? Le processus est le même.

Vous devez le faire vous-même.

Je laisse cela, je laisse cela à vous.

Très bien, les gars, personnellement, je pense que cette vidéo est devenue extrêmement longue.

Donc, quel type de contenu voulez-vous ? Voulez-vous des vidéos de tutoriels très grandes et approfondies ou des vidéos courtes, faites-le moi savoir dans les commentaires ci-dessous.

Donc, mesdames et messieurs, nous avons terminé notre tutoriel.

Si vous avez aimé la vidéo, donnez un like, partagez avec un ami et n'hésitez pas à vous abonner.

Jusqu'à ce que je vous voie dans la prochaine vidéo.

Au revoir, au revoir