Figma pour design ui/ux 2021 : apprentissage par la pratique

1. Introduction au cours: Salut amis, bienvenue dans ce cours. Je m'appelle Samira et je suis un UX et designer de produits. J' ai conçu ce cours pour les débutants qui veulent apprendre sigma pour la conception UI UX. Dans ce cours, je vais vous emmener dans un voyage de l'exigence du client à la compréhension de ce qu'est un filaire, qui est l'exigence qui est illustrée. Et puis la conception de ce site absolument à partir de zéro. Nous allons utiliser l'apprentissage en faisant de la méthodologie, qui signifie que lorsque je crée ceci, vous pouvez suivre cette conception exacte du cours. Et vil que vous faites cela, vous apprendrez toutes les fonctionnalités et fonctionnalités de sigma. Une suggestion que je voudrais faire à ce stade est de suivre cette voie et de pratiquer côte à côte. Si vous avez deux moniteurs comme celui-ci, alors vous pouvez déclencher un moniteur Fichman et utiliser l'autre pour exécuter le cours. Si vous ne le faites pas, vous pouvez utiliser un mobile ou une tablette et exécuter le cours sur l'application mobile et utiliser votre ordinateur pour travailler sur sigma. Je suis très excité pour ton parcours d'apprentissage du sigma. Je vais prendre cette introduction courte et commençons. se voit dans la classe suivante. 2. Créer l'environnement: Laisse-moi sauter dans l'apprentissage réel. Donnons d'abord l'environnement. Je veux attirer votre attention sur deux dossiers, que je vais faire référence dans les liens de cette conférence. Donc, l'un est le dossier du classeur, excellente étude à l'étranger. Le fichier de classeur. C'est le fichier est quelque chose que vous allez utiliser pour travailler avec. Il a le dossier client, il a le filaire. J' ai fourni les filaires afin qu'il devienne un peu facile pour le design final. Et puis vous obtiendrez des zones de classeur pour créer votre propre palette de couleurs pour définir la propre typographie. J' ai aussi inclus les images ici. Et puis ici, vous pouvez commencer la conception réelle. Et le deuxième fichier que j'ai inclus dans la section des ressources est le fichier de référence dans lequel c'est le fichier que j'ai utilisé pour faire cette conception. Vous verrez donc cette palette de couleurs que j'ai conçue pour travailler le même cours, que vous pouvez également concevoir avec moi. Vous pouvez voir la topographie, ce que j'ai dit, et vous pouvez voir le plan final là-dedans. Donc, fondamentalement, j'ai fourni deux liens. Donc ce que je voulais faire est de cliquer sur un lien. Donc c'est quelque chose comme ça va arriver. Donc, une fois que vous cliquez sur un lien de projet et que vous venez d'entrer, vous devez d' abord vous connecter avec FISMA. Fisma fonctionne dans un navigateur. Fisma a aussi une application. Je vous recommande de télécharger l'application. Donc ok, donc une fois que vous avez cliqué sur les ressources, quelque chose comme ça s'ouvrira. Il s'agit d'un fichier de vue uniquement. Donc, c'est le fichier de classeur que vous avez. Ce que vous devez faire, c'est que vous devez passer ici dans l'article du bill seulement et que vous devez reproduire cela dans vos ébauches. Donc par cela, ce qui se passera quand vous dupliquez ce fichier, ce fichier est copié sur votre fig mes brouillons et il devient une partie de vos fichiers récents ou de tout projet que vous avez actuellement en cours. Donc je vais juste dupliquer ça dans mes brouillons. Et une fois que ça arrivera, je peux ouvrir ça. Et vous verrez qu'il est maintenant ouvert et que c'est complètement modifiable. Il a également une petite approche guidée. Je peux ignorer ça pour l'instant. Mais alors je serai en mesure d'apporter des modifications à la façon dont je veux dans ce fichier. Donc fondamentalement, je veux que vous utilisiez ces liens pour accéder aux fichiers. Alternativement, je vais télécharger les fichiers et aussi fournir un fichier zip afin que vous puissiez physiquement télécharger ces fichiers et peut-être même les télécharger ou les importer dans sigma. Ok, alors je pense que c'est suffisant pour mettre en place l'environnement. se voit dans la classe suivante. 3. Si vous avez du mal à importer des fichiers: L' alarme est désactivée, vous n'êtes pas en mesure d'ouvrir le fichier du classeur après l'avoir téléchargé à partir de la conférence précédente. J' essaie de trouver une solution rapide pour ça. Mais en attendant, vous pouvez toujours utiliser les liens qui sont fournis dans la conférence précédente, ainsi que cette conférence dans la description pour ouvrir directement le fichier classeur ou le fichier de référence. Comme vous le savez, pour sigma est un outil collaboratif en ligne. Vous n'avez pas besoin de télécharger les fichiers et de les importer exclusivement. Vous pouvez simplement utiliser ces liens et obtenir, obtenir à apprendre tout le meilleur. 4. HELLO WORLD: Cette leçon, nous allons explorer les fonctionnalités de base de sigma et essayé de comprendre l'interface utilisateur sigma. Mais avant cela, je veux que vous vous assuriez d'utiliser ce fichier, qui est une excellente étude à l'étranger, le fichier du classeur. Par souci de répétition, je voudrais simplement vous répéter que ce sera le fichier que vous allez utiliser tout au long du cours pour concevoir. Par exemple, ce fichier contient ces pages ici. Il a le dossier client, il a le filaire, la palette de couleurs. Ce n'est qu'une structure. Vous serez en mesure de me suivre dans les objectifs et de créer votre propre palette de couleurs. Idem pour la typographie, quelques images. Et ce sera une toile vierge où vous concevez. Donc je veux vous exhorter à garder ce fichier ouvert et juste me suivre et essayer de comprendre la fig, mon interface. Quand nous apprenons le codage, le tout premier programme qui enseigne est celui de hello world. Bonjour monde n'est rien d'autre qu'une simple introduction dans le monde du codage. Nous allons faire quelque chose de similaire pour le design. Jusqu' à présent que je veux faire la conception juste un couple d'écrans d'une application. Et je vais essayer d'utiliser autant que possible les fonctionnalités. Alors voyons. Je vais vous présenter Sigma. C' est donc tout l'espace de travail. C' est avec cela que nous devons travailler. Ces outils sont appelés les outils de région. Je vais sélectionner le premier double de légion qui est d'un cadre. Dans FISMA, le mode impair est appelé une trame. Nous avons toutes ces options sur la droite. Par exemple, vous pouvez choisir un cadre pour un téléphone. Vous pouvez choisir un cadre pour une tablette par rapport à une présentation de bureau, une montre, un papier, etc. Je vais juste sélectionner sont le cadre pour le téléphone. Faisons iPhone 11 pro. Donc, une fois que je clique dessus, je reçois ce cadre ici, qui devient aussi mon tableau d'art. Donc, cela va exactement regarder dans l'iPhone une fois que nous avons terminé la conception de l'application. Si je peux, ici, je peux double-cliquer dessus et peut-être lui lire cet art. Je voudrais le renommer écran de connexion pour l'instant. Écran de connexion. Donc pour notre application, que nous sommes en train de concevoir pour notre application Hello World. Ce sera l'écran de connexion. Maintenant, je vais à l'outil de texte et je vais juste cliquer n'importe où, et je vais juste écrire la connexion. Cela fonctionne vraiment très simplement. C' est assez simple. Et maintenant, je vais changer sa police. Pour ce faire, je peux aller à ce panneau de conception ici, et ensuite je peux voir du texte. Donc, cette zone est liée à la, toutes les manipulations que nous voulons faire à travers le texte. Je vais juste augmenter la taille de la police de 12 à 80. Une fois que je fais cela, vous pouvez voir que la taille de la police a été augmentée. J' irai à nouveau aux outils de forme. Je vais sélectionner la ligne et ensuite je vais juste tracer la ligne en dessous de cela. Maintenant, quand je dessine la ligne, tu peux voir que ça va plutôt Hayward. Mais si j'appuie sur Maj tout en faisant glisser cela, alors le type de ligne s'enclenche dans des angles de 4590 degrés. Plutôt cool. Fonctionnez ceci. Donc je vais juste tracer une ligne, non ? Faites-le un peu, vous savez, avoir un semblant d'écran de connexion. Maintenant, nous voulons faire la même chose pour capturer l'appel du mot de passe aussi, non ? Donc, un moyen rapide de le faire car je vais sélectionner ces deux éléments comme celui-ci, je vais juste faire glisser et je vais simplement appuyer sur Entrée sur mon clavier. Et puis on va le dupliquer comme ça. Je le fais simplement glisser. Et puis j'écrirai juste un mot de passe ici. Assez simple. Ne vous inquiétez pas les gars, on est juste en train de bricoler avec l'interface. Tout l'apprentissage réel va se produire dans les prochaines conférences. Et je serai beaucoup plus détaillé et je serai un peu lent aussi pour que tu puisses travailler comme tu apprennes. Cela va donc vous aider à développer les compétences ainsi que de ne pas passer beaucoup de temps plus tard à les réviser. Ok, donc en revenant à ça, maintenant ce que je peux faire, c'est que j'ai besoin d'ajouter un bouton ici qui dit peut-être entrer. Alors, comment faire ça ? Donc, je vais aller aux outils de forme comme un rectangle d'acteur. Et je vais juste dessiner un rectangle aléatoire. Donc, la bonne chose à propos de sigma est que si je suis, si je commence à déplacer ce rectangle, il me montrera juste le guide pour l'alignement, cette ligne rouge que vous êtes vu. Donc je vais juste l'aligner ici. Et je veux, je veux jamais changer la couleur de ça. Donc, afin de faire changer la couleur, nous allons de nouveau au panneau de conception et nous sélectionnons sur le rempli. Donc, une fois que je clique sur ce, je peux choisir n'importe quelle couleur que je veux par. Encore une fois, il suffit d'utiliser ce curseur pour passer par n'importe quelle gamme de couleurs. Je choisirai de choisir ça. Ok, ça sonne beaucoup de cerveau, donc je vais fermer ça. Comme vous pouvez le voir, la couleur n'a pas été changée. Pour que cela ressemble à un bouton, je vais ajouter un rayon de coin. Cela ne se produira qu'ici. Je vais juste faire 20 pixels en retard pour qu'il ressemble à un métal. Peut-être que je vais en faire 30. Ça lui donnera un look plus arrondi. Ok, et maintenant pour y mettre du texte, je vais de nouveau à l'outil Texte et je vais écrire ici et encore l'aligner en le faisant glisser le long. Et ainsi, jusqu'à présent, nous avons créé une sorte d'écran de connexion très rudimentaire. Maintenant, une chose très cool à propos de sigma est sigma vous permet télécharger beaucoup de plugins qui vous aident avec le flux de travail. Je vais vous montrer comment télécharger les plugins. Donc, si vous allez juste à la barre d'état, il y a déjà une barre de plugins sans Dieu. J' ai téléchargé tous ces plugins fourrage pour ce cours et pour mon FISMA. Donc, pour télécharger un plugin, vous devez aller dans Gérer les plugins. Et puis si vous, sont les plugins que j'ai installés, je vais vous recommander d'installer des gradients web. Quantifier et éclabousser ces trois plugins. Donc, la façon fondamentale de le faire est d'aller ici. Et puis il suffit de chercher le plugin. Comme par exemple, si je veux télécharger et splash, je vais juste chercher cela. Et vous les voyez splash plugin. ce moment, il est installé que mon système. Mais si vous cliquez simplement sur cela, comme par exemple, comme vous verrez un tel bouton, si vous ne l'avez pas installé, il s'installe en un seul clic. Tu n'as rien à faire. Et une fois que vous retournerez à votre feuille de calcul, elle sera là. Donc je vais juste ouvrir l'icône si je me branche en ce moment. Donc, et je vais juste trouver une icône, icône si je plug-in vous permet de trouver une icône. Donc, je vais en quelque sorte télécharger ça. J' aime vraiment ça. Je vais télécharger cela pour 200 pixels. Je fermerai ça et je le placerai ici. Cool moitié. C' est ainsi que nous avons juste réussi à concevoir un écran de connexion très rudimentaire de certaines sortes. Alors laissez-nous juste les gènes de cette couleur que nous pouvons changer. Si vous voulez faire correspondre cela à la couleur du bouton, vous pouvez simplement choisir le sélecteur de couleur. Vous pouvez cliquer ici comme vous pouvez voir les couleurs changer. Si vous voulez quelque chose d'un peu plus dynamique, vous pouvez opter pour un gradient linéaire. Et vous pouvez choisir une sorte de deux couleurs différentes de familles différentes et ensuite essayer, vous savez, juste Jazzy Cup, vous savez. Ok. Donc ça a l'air cool, non ? Donc d'accord. Alors allons de l'avant. Concevons un écran de plus. Juste pour le plaisir. On essaie juste de bricoler. n'y a pas de bonne voie, il n'y a pas de mauvaise voie pour l'instant. Donc, je vais aller de l'avant et maintenant je veux en créer un autre à bord. Donc, la façon de le faire est que je peux peut-être dupliquer ce tableau d'art aussi en appuyant sur la commande D. Et vous verrez le même à bord apparaître ici. Je peux simplement supprimer cela en cliquant sur retour arrière ou supprimer n'importe quel clavier que vous utilisez. Donc, afin d'ajouter une autre histoire, et je vais revenir à l'outil iFrame. Et je vais ajouter l'iPhone 11, Bruce vert à nouveau. Et maintenant ça va être une sorte de page de produit, vous savez. Donc, cela va avoir n'importe quelle image. Donc encore une fois, il y a ce beau plugin appelé Splash. Je vais juste vous montrer à quel point il est facile d'ajouter une image. Donc, je vais aller aux plugins. Je sélectionne et éclaboussure. Ok, donc, mais avant cela, je vais juste dessiner un rectangle ici pour que je puisse directement placer mon imaginé sur ce rectangle. Je vais donc aller à l'outil rectangle à partir des outils de forme. Je vais en quelque sorte garder un rectangle ici, aligné au centre. Et puis je vais chercher dans ce plugin. Je vais chercher des chaussures. Et oh, c'est génial. Je pense que je vais utiliser cette image. Donc mettre cette image sur ce rectangle est si simple et il suffit de cliquer dessus et de voir que vous obtenez votre image ici. Et juste, je vais utiliser un champ de texte pour juste mentionner un peu de prix. J' ai l'air d'ici. Je vais écrire 350 dollars. Sons à propos de droite, pour un taux de chaussures aussi vibrantes, sont Nike comme OK, donc pas de distractions. Ok, alors je dois juste faire un très gros boutons peut-être, mais c'est tout de suite. Donc, je vais aller dans le double rectangulaire Encore une fois. Je vais sélectionner le rectangle. Et puis je vais à nouveau sélectionner le grand rectangle. Je vais arrondir les bords à toddy de cette zone. Et pour abandonner cette couleur, je vais utiliser un autre plugin en ce moment. C' est ce qu'on appelle les dégradés web. Dégradés, et ce plug-in a déjà quelques dégradés en vrac. Donc, je vais juste continuer à défiler jusqu'à ce que je trouve un plug-in que j'aime vraiment. Peut-être que j'aime celle-là. Donc, je vais juste cliquer dessus et vous pouvez voir que nous avons un gradient à cela. Je vais utiliser un outil de texte. Et maintenant, je vais juste aligner ça au milieu. Et donc nous n'avons pas d'écrans trop rudimentaires de notre application. Je vais vite essayer de résumer ça. Je vais ajouter un cadre de plus à travers les outils de région. Et je vais juste écrire le succès ici. Et je vais juste aligner ça. Ok, donc c'est comme ça qu'on vient de rassembler quelque chose en bricolant avec Sigma. Afin de zoomer sur n'importe quelle partie. Ce que vous allez faire, c'est que vous pouvez appuyer sur Z ou Z, puis vous pouvez simplement faire glisser un carré comme celui-ci, puis il est juste zoomé sur cette zone. Si vous voulez utiliser votre molette de défilement sur la souris, vous pouvez appuyer sur la commande, puis faire défiler vers le haut, faire défiler vers le bas afin de faire un zoom avant et un zoom arrière. Et puis si vous voulez saisir ceci et comme faire glisser, alors vous pouvez utiliser la poignée. L' outil à main vous permet de saisir et de faire glisser les tableaux d'art autour et vous pouvez simplement appuyer sur Échap pour lâcher prise. L' une des caractéristiques cool de sigma est aussi que le prototypage de l'avare de figue. Voyons ce que nous entendons par là. Donc, donc un événement utilisateur, l'utilisateur vient à cette colline AP, il ou elle verra cet écran d'abord, puis ils vont entrer et aller à la page. Et quand ils cliquent sur acheter, ils recevront maintenant ce message de réussite. C' est le flux très basique que que nous avons actuellement devant nous. Donc, pour ce faire, je suis allé à la section Prototype. Et puis je dois juste connecter les boutons aux destinations. Comme par exemple, si je veux, si l'utilisateur clique sur Entrée, l'utilisateur devrait aller à cette fréquence d'écran. Donc je vais juste chronométrer ce tableau d'art. Et si l'utilisateur clique sur ce bouton, il devrait aller à cet écran. Et c'est tout. Maintenant, passons en revue ce que nous avons fait jusqu'à présent. Il suffit de bricoler en cliquant sur l'onglet présent ici. Si je clique sur présent, il va juste me montrer l'application. Voyons voir à quoi ça ressemble. Ok, donc c'est en fait dans un cadre iPhone. Donc, si je clique sur entrer, il me montre cet écran. Si je clique sur acheter maintenant, cela me montre le succès. Donc c'est, c'est l'opération très basique de sigma. Tout au long des prochaines leçons, nous allons ajouter beaucoup de nuances à cela. Dans la conception UI UX cet outil. C' est juste une partie de ça. compréhension du processus est la plus grande partie de la connaissance et de la pratique de la conception UX de l'interface utilisateur. Donc, dans les prochaines conférences, ce que nous allons faire est de passer par le processus de compréhension des étapes de la présentation du client à la connaissance du filaire, à la définition de la topographie de la palette de couleurs, puis sautant dans leur conception. Je suis très excité pour votre voyage dans Sigma et vous voir dans la prochaine classe. 5. Comprendre la nécessité de le client et le Wireframe: Maintenant, nous allons jeter un oeil au mémoire du client pour la facilité d'utilisation, j'ai inclus le mémoire du client dans cette page dans l'excellent cahier de travail de l'étude à l'étranger. Pour effectuer un zoom à l'intérieur de la fiche client, vous pouvez appuyer sur Commande sous Mac ou sur Contrôle sous Windows et utiliser la molette de défilement de la souris. Ou il y a une astuce soignée dans laquelle vous pouvez appuyer sur Z ou Z, puis simplement faire glisser une sélection, puis vous verrez zoomé sur la sélection que vous faites. Un bref de projet est essentiellement quelque chose que le client vous envoie, le client envoie un concepteur. Il s'agit généralement d'un document Word. Par exemple, ce document parle du nom de l'entreprise qui est excellente étude à l'étranger. L' objectif est que nous construisions une page de destination pour le nouveau site Web de l'entreprise. Il y a des composants sur la page du héros. Tout est là dans cette exigence. Pour faire glisser cela, vous pouvez le saisir à l'aide de l'outil à main et vous pouvez en quelque sorte vous déplacer autour du carton comme vous le souhaitez. Maintenant, ce mémoire client a été converti en un filaire, et j'ai inclus ce filaire dans ce fichier particulier. À la fin du cours, nous prendrons une dizaine de minutes sur la façon de faire un filaire. Mais pour votre apprentissage en ce moment, je pense que vous pouvez utiliser cette page de destination Bagram, que j'ai déjà incluse. Laissez-nous passer par le filaire très rapidement. Et puis commençons le processus de conception réel. Je vais utiliser z et puis je vais juste faire une sélection. Donc, fondamentalement, nous parlons de la première page du site Web. Il va y avoir un logo ici. Il va y avoir cette barre de navigation. Il s'agit de la copie en deux tailles de police pour les faces de matrice. Ce sont les icônes sociales qui sont mentionnées dans la fiche client. Cela signifie qu'il y aura une image ici. Le client a déjà mentionné dans le mémoire client qu' ils aimeraient une photo d'une fille qui va à l'université parce que cela va être comme parce que cela va être étudier à l'étranger site Web. Ce sont les services qu'ils ont actuellement. Sur le site. Il y a aussi des détails sur certains événements universitaires à venir. Ce sont les pays qu'ils couvrent. Il va y avoir quand témoignage et puis il y a ce dernier appel à l'action appelé comme êtes-vous prêt à réaliser vos rêves ? Et puis le bouton est appliquer non, pour vous ou si je vais à la note client en ce moment, vous verrez que exactement toutes les choses sont couvertes dans ce. J' ai utilisé ce brief très client pour créer ce filaire. Et juste pour vous donner un aperçu de ce qui va venir, si vous ouvrez l'excellente étude à l'étranger dossier sigma de référence, que j'ai donné. C' est donc le design final que j'ai créé à partir de ce filaire. Et ça va être tout le verre, dans lequel tu apprendras comment convertir ce filaire. Vous apprendrez à convertir ce filaire et à faire un design comme celui-ci. C' est tout pour l'instant. se voit dans la classe suivante. 6. Pallete et couleur primaire: Il va y avoir une leçon très intéressante. Dans cette leçon, nous allons concevoir notre palette de couleurs. Ce que j'ai fait, c'est que j'ai inclus un modèle dans cette page, la page de palette de couleurs. Voyons ce que ce modèle est tout au sujet. Donc, c'est le modèle. Il s'agit essentiellement d'une mise en page automatique. Nous allons couvrir ça pendant que nous continuons dans ce cours. Et ça a une couleur, en ce moment, celle-là. Et puis il a une dizaine de boîtes de couleur. Donc, quand vous ajoutez de la morsure à une couleur, il devient sa tente. Donc, le but de ce modèle est, par exemple, disons que si je change de couleur en allant aux couleurs de sélection et peut-être en choisissant le rouge, alors vous verrez que vous obtiendrez tous les tendons de rouge, ce que nous avons prévu pour. Je vais vous dire le but derrière tout ça. Les fins peut-être pendant que vous concevez, vous trouverez que peut-être cette lecture particulière est à Gaudi ou deux dans votre visage. Et vous voudriez quelque chose d'une résistance plus douce. Alors peut-être que vous aimeriez peut-être que ce soit sur votre document. Donc, afin de faire un choix très visuel, ce que nous faisons c'est essentiellement nous prenons de la couleur et ensuite nous faisons des dizaines de marionnettes. Je vais juste faire la commande Z ou le contrôle Z pour annuler cela. Et maintenant, parlons plus des couleurs. Nous allons faire quatre types de couleurs, les couleurs primaires, les couleurs secondaires, les couleurs tertiaires. Et puis nous allons faire paître. Voyons comment nous pouvons le faire. Donc, je vais juste dupliquer ce qui va être deux couleurs primaires parce que le logo de l'étude Excellence entreprise à l'étranger a un gradient linéaire. Laissez-nous juste vérifier cela rapidement. Je copierai ce logo de la page des images sur la page de la palette de couleurs. Je vais le coller ici. Et si je vais analyser le film ici, vous verrez que c'est un gradient linéaire. Et le dégradé linéaire est de cette couleur particulière, qui est cette valeur, à cette couleur particulière, qui est cette valeur. Ce que nous allons faire, c'est nos couleurs primaires seront les deux couleurs qui forment le dégradé du logo. Cela sera synchrone avec les lignes directrices de la marque ou les couleurs de la marque que l'entreprise a. Voyons comment on peut faire ça. Tout d'abord, je vais sélectionner cet ensemble de couleurs. Et puis je vais juste le dupliquer en appuyant sur Commande D, car il va y avoir deux couleurs. Je vais renommer ceci en couleurs primaires en double-cliquant ici et en écrivant les couleurs primaires. Ok, grille. Il y aura aussi deux couleurs secondaires. Donc y rien, laissez-nous simplement créer toute la chose de modèle. Je vais accélérer ça. Je vais juste dupliquer celui-là de plus. Et je vois les couleurs primaires venir ici. Je vais juste le poser. Je viens de le mettre en place, c'est vraiment génial avec ça. Vous obtenez des grilles lorsque vous essayez de déplacer des éléments. Je vais renommer ceci en couleurs secondaires afin de renommer ceci. Maintenant, quand je sélectionne ceci, le globe oculaire correspondant ici est mis en évidence. Je peux renommer ceci en couleurs secondaires. Maintenant, je veux encore dupliquer cela. Donc, ce que je vais faire est d'appuyer sur la touche Option ou Alt sur Windows. Et quand je fais cela, vous verrez soudainement que le curseur, il y a maintenant deux curseurs. Tu sais, tu verras le double curseur en miroir ou en jambe. Cela signifie juste que chaque fois que vous faites glisser quelque chose, il va juste le dupliquer. On y va. Je vais le renommer rapidement en couleurs tertiaires. Maintenant, les couleurs tertiaires, comme il y a deux couleurs primaires, il y a deux couleurs secondaires, couvrira simplement cela dans un peu. Mais les couleurs tertiaires sont essentiellement des couleurs d'accentuation et nous utilisons généralement pour les icônes. Alors pourquoi ne pas avoir beaucoup de couleurs tertiaires ? Donc peut-être aura six couleurs tertiaires. Je suis juste en train de dupliquer par le Commandement D. Et ça arrive. Et puis nous ferons de la place pour nos gris. Je vais appuyer sur la touche Option ou Alt sur Windows. Et je vais faire ce pâturage. Fantastique. Donc, en venant aux couleurs primaires, je vais appuyer sur Zed et juste faire glisser cette sélection pour qu'il soit zoomé à notre avantage. Donc la façon dont je vais faire est que je vais copier le code de couleur bleue d'ici. Et je vais le coller dans la couleur de sélection. Après avoir sélectionné cette première ligne. Je vais le coller ici. Et nous avons notre première couleur primaire. Pour la couleur secondaire, je vais faire la même chose. Je vais choisir l'autre code couleur. Et je vais le coller ici. Nous avons donc nos couleurs primaires. Voyons comment faire les couleurs secondaires, les couleurs tertiaires, et la grâce dans la classe suivante. 7. Couleurs secondaires et couleurs Secondary: Dans la dernière leçon, nous avons créé ces couleurs primaires. Et tout en les créant, nous les basons sur le schéma de couleurs de ce logo. Voyons maintenant pourquoi nous avons fait cela ? Donc fondamentalement couleurs primaires de la majorité des éléments dans la conception visuelle. Cela vaut pour les titres, qui vaut pour tous les liens, tous les composants majeurs, tout appel à l'action, etc. Et il est bon que cela soit synchrone avec lignes directrices générales de la marque sur les couleurs de la marque afin qu'il semble bon. Et c'est la raison pour laquelle nous avons choisi les couleurs primaires de notre logo. Commençons par parler des couleurs secondaires. C' est une règle empirique que les couleurs primaires et secondaires sont complémentaires les unes aux autres. Et par là, je veux dire que les couleurs secondaires et primaires, ils créent ce look harmonieux. Maintenant, comment trouver des couleurs qui sont complémentaires à ces deux couleurs. Donc, fondamentalement, ce que je fais est d'utiliser un très bon outil appelé couleur Adobe. Alors vérifions rapidement ce qui peut être fait. Donc, je vais juste sélectionner la roue de couleur. Je vais naviguer vers la roue de couleur du point de couleur adobe.com. Et pendant que cela se charge, ok, donc cela a chargé. Donc, le moyen le plus rapide de le faire, le moyen le plus rapide d'obtenir une couleur complémentaire est de suivre cette méthode. Je vais donc sélectionner ce code de couleur. Et puis je vais le coller ici. Et puis j'ai présenté, ça me montre que c'est la couleur. Et ici, il y a beaucoup d'options pour appliquer la règle de l'harmonie des couleurs. Donc, je peux aller monochromatique, dans lequel il va juste me montrer phrase d'ombre de la même couleur. Je peux aller à la triade, qui est une combinaison de trois couleurs. Et puis je viens à la gratification. Donc, quand je viens à gratuit, donc toutes les autres couleurs sont gratuites à cela. Donc, je vais choisir éventuellement cette couleur comme ma première couleur complémentaire. Donc je vais copier ce code couleur ici. Et je vais le coller dans la couleur de sélection ici. Et voilà, nous avons notre première couleur secondaire. Je vais répéter le processus pour la deuxième couleur secondaire. Je vais copier ceci et le coller ici. Et puis je prends ce code de couleur et j'ai collé dans la couleur de sélection et wallah, si vous pensez que cette couleur est un peu trop verte, peut-être qu'elle est trop fluorescente, alors nous pouvons toujours changer en utilisant cette option. Et peut-être que c'est plus un look Mac, et peut-être que je vais sélectionner ceci. Alors on y va. Donc maintenant, nous avons deux couleurs primaires et ensuite nous avons des couleurs secondaires. Parlons donc des couleurs tertiaires. Mais avant cela, comprenons rapidement où allons-nous utiliser les couleurs secondaires ? Nous allons utiliser les couleurs secondaires pour les pièces d'accent principalement. Et je vais récupérer les pièces d'accent et je vais me référer à ces couleurs secondaires comme et quand nous concevons dans les prochaines leçons, venir aux couleurs tertiaires, les couleurs tertiaires sont utilisées vraiment avec parcimonie dans l'ensemble du design. Nous allons les utiliser pour les objets la plupart du temps. Donc, la largeur d'onde, que je crée les couleurs tertiaires est que j'utilise la même roue de couleur Adobe. Donc je vais copier ceci et je vais peut-être le coller ici. Et puis je vais aller pour un composé de couleurs. Et puis je vais pour un composé de couleurs. Donc, je choisis les couleurs que j'aime à partir de cela. Et je vais juste commencer à faire les dés en trois couleurs. Vous êtes libre de choisir les couleurs que vous voulez. Assurez-vous simplement que ce ne sont pas les nuances ou les boîtes des couleurs primaires et secondaires. Fondamentalement, nous allons simplement les utiliser pour les icônes. Donc il y a ça. Je vais accélérer ça un peu et te voir dans la prochaine classe. 8. Tertiaire et gris: Ce sont donc les couleurs tertiaires que j'ai créées en utilisant exactement le même processus que j'ai montré dans la conférence précédente. Vous pouvez utiliser ces mêmes couleurs dans votre conception. Vous pouvez référencer ceux-ci du fichier de référence que j'ai partagé dans le cadre de cette classe. Ou vous pouvez utiliser le même processus et faire votre propre calendrier. Je vous recommande vivement d'essayer de trouver autant d' idées de couleur que vous pouvez utiliser la couleur Adobe B et de les faire vos couleurs tertiaires. Ceux-ci vont être utilisés juste pour les icônes pour au moins notre design. Et voyons ce que vous pouvez trouver. Maintenant, parlons de la graisse. Praze. C' est ça. C'est, dans notre cas, que nous allons les utiliser pour nos formes anti-phases. Fondamentalement, cette première couleur est noir total, comme nous pouvons le voir. Et maintenant, c'est comme les choses de la même couleur. Comme vous pouvez le voir, nous le sommes, nous réduisons l'opacité de cette couleur de 10% chacun. Donc, fondamentalement, ce que j'aime faire, c'est que j'aime que la couleur grise originale dans mes dessins soit une fonction de ma couleur primaire. Laisse-moi te montrer ce que je fais. Ce n'est pas très difficile et rapide, mais je pense que c'est un très joli petit nouveau à avoir. Donc ce que je vais faire maintenant, c'est que je vais faire un rectangle ici. Et puis je vais, je vais utiliser ma couleur primaire comme noyau de ce rectangle. Donc je vais copier ça et je vais le coller ici. Ok, donc nous avons un rectangle en couleur primaire. Je vais dupliquer ça. Je peux le faire en faisant la commande D ou je peux utiliser l'option sur la clé de l'autel. Je vais dupliquer ça. Et puis je vais rendre ça noir. D' accord ? Et maintenant, quand je vais super imposer les deux. Donc, si vous voyez clairement maintenant, je vais juste zoomer dessus. Donc, si je réduit l'opacité du noir, alors cela commence à ressembler à une fusion entre la couleur noire et la couleur bleue. Je vais le faire à 50% pour que vous le voyez, c' est presque, vous pouvez voir 50% du bleu qu'il y a. Donc c'est trop, que ce n'est pas génial. Mais si je fais 90%, alors c'est assez génial. Et c'est certainement une nuance plus légère que le 100% noir. Alors on y va. Donc, je voudrais utiliser cette couleur pour ma zone grise. Et ce que je vais faire, c'est que je vais choisir ça. Je vais utiliser le sélecteur de couleurs. Et je vais juste cliquer ici. Donc, nous l'avons là. Donc, ce n'est pas tout noir, ce n'est pas tous les six zéros, mais c'est ça 000318. Donc ça va être notre couleur grise. D' accord ? Très bien, donc dans cette section, ce que nous avons fait c'est que nous avons entièrement conçu notre palette de couleurs. Nous avons des couleurs primaires, nous avons des couleurs secondaires, des couleurs tertiaires et de la graisse. Ceci, nous sommes prêts avec notre palette de couleurs. Et à partir de la leçon suivante, nous allons plonger en profondeur dans le processus de conception actuel. se voit dans la classe suivante. 9. Sélection de polices de caractères et Typescale: Nous avons conçu cette belle palette de couleurs. Concentrons notre attention sur la typographie. typographie est essentiellement tout à voir avec le type de texte, polices de caractères et de polices que nous allons utiliser dans notre conception. Par ici, vous verrez. Et bien sûr, je fais un zoom avant en appuyant sur zag, puis en faisant glisser une section. Donc, fondamentalement, c'est un mot étrange dans lequel nous allons sélectionner notre police de caractères pour les en-têtes. Je fais un zoom arrière en appuyant sur la commande. Et puis j'utilise la molette de défilement sur ma souris. Et puis je fais glisser ceci en appuyant sur la barre d'espace, et puis je fais simplement glisser en utilisant le clic gauche sur les mémos. Donc, fondamentalement, nous allons prendre deux faces de type, une pour les en-têtes et une pour le corps du texte, sorte qu'il y ait une variété naturelle et quels ions dans la conception. Ensuite, nous allons faire quelque chose appelé comme échelle de type, qui consiste à organiser les tailles de police d'une manière que tout semble harmonieux. Ensuite, nous aborderons les styles de titre et les en-têtes de paragraphe. Vous savez, ce que nous allons utiliser exactement ou modifications de paragraphe ainsi que pour le texte de paragraphe. Laissez-nous plonger très rapidement afin d'évoluer. Afin de simplement zoomer sur une échelle de 100 %. Ce que vous pouvez faire, c'est utiliser un raccourci appelé US ship one. Donc, quand je déplace et un, il zoome pour s'adapter. Ok, commençons maintenant. Nous allons donc choisir une police de caractères pour nos titres. Laisse-moi juste enlever ça du chemin. Ok, super. Donc l'une des questions principales est, Hey, quel genre de police envisageons-nous ? Qu' est-ce que nous devrions chercher ? Comment trouver la police est comment sélectionner les téléphones. Donc tout le monde a sa propre méthode. Je voudrais vous montrer ma méthode. Je vais toujours sur le site Google polices pour choisir les polices de caractères. Réglons sur les formulaires Google. Donc en ce moment, en face de moi, j'ai des polices dot google.com, qui est le site Web du Fonds Google. Et sur ce site, vous pouvez prévisualiser beaucoup de polices. Une chose drôle à propos des polices est que si vous allez dans les catégories, alors le serif et le sans-serif, ce qui signifie sans serif, sont les deux types de polices de base dont nous devons choisir. Comprenons rapidement ce qui est un serif et ce qui est, qu'est-ce qu'un sans-serif ? Donc si je désélectionne tout ça, alors laissez-moi juste zoomer cette jambe vraiment en Colombie-Britannique, cette base à, sous cette lettre a ou cette L. Voyez-vous cette base ? Donc, cette base est appelée un serif. Donc, dans toutes les polices de caractères, famille Serif, qui base toujours là. En outre, si vous observez attentivement l'épaisseur de la course, le coup de pinceau du trait du stylo, cela varie, non ? C. Donc, cette ligne l'est. Un peu plus mince que cette ligne, et ainsi de suite, ainsi de suite. Fondamentalement, en règle générale, nous utilisons des polices serif lorsque nous imprimons quelque chose sur du papier, surtout à une taille de police très lisible. Serifs, meilleure lisibilité quand il est sur papier. Mais si nous parlons de quelque chose à afficher à l'écran, nous devrions toujours opter pour le sans-serif. Encore une fois, comme on peut définitivement utiliser polices sans empattement sur papier et des polices Serif sur l'écran aussi. n'y a pas de règle dure et rapide, mais quelque chose comme rubato, qui est assez moderne, police ou police sans empattement. Il a vraiment l'air bien à l'écran. Donc, fondamentalement, vous pouvez certainement passer par toutes ces polices pour faire le choix pour le, pour le formulaire que vous voulez inclure dans votre conception. Je vais sélectionner Poppins pour mes titres. Soit j'aime personnellement cette police et c'est peut-être la raison pour laquelle je vais choisir que vous pouvez choisir n'importe quelle autre police, style de police que vous aimez. Et pour le corps, pour la police, ce que je vais faire pour le corps. Je vais choisir la chanson ouverte. Revenons donc à la phase sigma et pi des rubriques. Je vais utiliser Poppins. Laisse-moi écrire Poppins pour les titres. C'est à peu près juste. Et laissez-moi sélectionner la police. Laisse-moi choisir une police de caractères, Poppins. Ok, ça a changé, et puis je vais juste le garder 55 pour qu'il soit de la bonne taille de cap. Maintenant, la Chine est une activité très visuelle. Donc, je voudrais d'abord imaginer d'abord voir les différents styles de polices de caractères. À quoi ressemblent-ils pour avoir une idée de quoi quand et comment vais-je utiliser cette police particulière dans ma conception ? Donc, pour ça, je vais juste dupliquer ça peut-être trois fois. Je vais le faire en appuyant sur Command Z ou Control G, pardonnez-moi, Commandement D et Contrôle D. Ok, donc maintenant, ce style est moyen ici. Je me suis converti en régulier, et ça va être semi audacieux. Donc maintenant, si vous pouvez voir, il y a trois hiérarchies dans les poids de la police de caractères. Et je pense que j'adorerais que ça continue comme mon chemin principal pour l'ancien. Ok, maintenant faisons le même processus pour le corps du texte. Pour le corps du texte, j'ai décidé d'opter pour l'open source MS donc je vais juste écrire ici ça. Et je vais sélectionner la police sur OK. Super. Une chose à retenir ici est ces deux-là, ces deux polices sont assez courantes et elles ont été préchargées. Et ils viennent avec Sigma. Si vous choisissez d'obtenir une autre phase TI habituée, vous devrez d'abord installer cette police sur votre système. Ok, donc pour la lisibilité et les femmes, jean bleu est 255. Et je m'intéresserai, encore une fois, à combattre visuellement les débats les uns contre les autres juste pour voir à quoi cela ressemble. Donc, je vais dupliquer ça BY communément. Et laissez-moi continuer à me changer de tard. Deux, régulier semi gras, gras, extra gras, métallisé peut-être. Ok, mais j'ai une idée. Donc la plupart du temps, je vais rester avec ce poids, le léger. Ok, donc c'est à propos des en-têtes et du corps du texte que nous avons choisi. Ici, c'est Poppins. Cela va être utilisé pour les en-têtes. Et c'est quand c'est une chanson ouverte, qui va être utilisée pour le corps. Ok, bouger. Alors maintenant, parlons de quelque chose appelé comme une peau de type est l'échelle de type. Allons le découvrir. Laissez-moi vous emmener à cette ressource web vraiment bonne appelée comme type scale.com. C' est une calculatrice visuelle. Comme vous pouvez le voir, toutes ces polices sont disposées d'une manière particulière. Maintenant, explorons ce que c'est. Faisons cela pour Poppins, qui est notre police d'en-tête. Et prenons la base comme 1818 points. Et l'échelle va être majeure. Troisièmement, c'est 1,25. Donc, si vous observez chacune des progressions sont 1,25 fois la plus ancienne. Cela crée donc cette belle harmonie des calendriers de temps. Et puis c'est très agréable à l'œil. Tout n'est pas une proportion. Vous n'avez pas à vous inquiéter de ma position proportionnelle au corps, ce qui est proportionnel au sous-texte. Donc tout est couvert ici. Donc, c'est exactement ce qu'on appelle l'échelle de temps. Et puis nous allons l'utiliser pour définir la hiérarchie du fort pour notre propre conception. Je vais le faire en copiant ça sur mon classeur sigma. Et je vais juste le coller au hasard ici. Et comme vous pouvez le voir, sont les tailles de police que nous recherchons vraiment. Laisse-moi juste zoomer sur ça. Ainsi 54, qui sera cinquante cinq, quarante quatre, trente cinq, vingt huit, vingt deux, cinq et dix-huit. J' aime l'événement 24 à ce sujet. Laissez-moi vous montrer comment nous pouvons apporter ces changements. Donc, dans le tableau d'art de l'échelle de temps, ce que je vais faire, c'est juste que je vais écrire n'importe quel texte aléatoire. Écrivons une excellente étude à l'étranger. Et puis je vais faire ça dans notre phase principale de type, qui est Poppins. Et puis je vais dupliquer ça six fois. Je vais donc combiner les six fois. Et puis je vais changer l'aspect polices de ceci. Laisse-moi faire ça à 255. Ce serait 43. Et je vais juste zoomer un peu. Ça va être 35. Ça va être 28. Je vais vérifier ça à 2422.5. C' est une préférence personnelle. Vous pouvez choisir d'adhérer strictement à cela. Et ça va être 80, ce qui est 80. C' est donc notre échelle de temps. Maintenant, c'est la très belle progression harmonique que nous avons avec nos visages et les tailles de police. Et cela va certainement se traduire dans un meilleur design. Permettez-moi donc de supprimer ceci et dans la leçon suivante, nous allons utiliser ces trois choses. Notre sélection étrangère ou Taipei pour les titres, le corps du texte, ainsi que l'échelle de temps. Et nous allons l'utiliser pour créer les styles de titre et le texte de paragraphe, paragraphe. se voit dans la classe suivante. 10. Référer des styles de tête: Bienvenue de retour. Dans la dernière leçon, nous avons cherché à savoir si la police de caractères forme les en-têtes, le corps du texte, ainsi que le schéma de type. Maintenant, nous avons vu que l'échelle de type est la progression harmonieuse des tailles étrangères, ce qui donne une très bonne API visuelle. Maintenant, ce que nous allons faire, c'est nous allons convertir ces tuyaux, tuer les titres sont les en-têtes des avions. Voyons comment le faire. Je vais donc les sélectionner. Ensuite, à quelques façons de sélectionner, je peux soit aller continuer à maintenir Maj, puis aller, continuer à cliquer. Mais je peux juste contrôler AR communément comme ça. Et maintenant ce que je dois faire, c'est que je dois recommencer les bayes dans les styles de titre ici parce que c'est leur zone désignée pour les états de cap. Voyons comment cela pourrait être fait. Donc, je vais maintenir la touche Alt enfoncée ou la touche Option. Donc tu verras ce Nobel Carson. Et puis tu pourras enlever ça. Mais afin d'insérer cela dans ce style de titre, afin d'insérer à l'aide de la mise en page automatique. J' ai enregistré le commandement Jasmine, et puis je les tiens, allez. Vous pouvez voir qu'il a fait bleu tout d'un coup. Il me demande si elle a éclaté au-dessous ou au-dessus de la position additionnelle. Je vais tomber en bleu et je vais le laisser. Vous verrez qu'il attache la barbe et fait les états de tête. Donc, je vais aller de l'avant et supprimer ceci afin que maintenant ce que j'ai fait est que j'ai essentiellement dupliqué ceci. Mais maintenant ils sont prêts à être nos styles de tête. Par exemple, il peut s'agir de l'en-tête 1. tête un. J'aimerais être un conseil d'administration. C' est un Poppins 55. Mais je voudrais errer, sera comme Boulez ce. Donc, je vais juste copier les propriétés et je vais les coller ici. Donc ça va être ma direction, MAN. Je fais de nouveau cette rubrique deux. Je pense que le titre 2 devrait aussi être audacieux. Je vais donc copier à nouveau leurs propriétés. Je vais baser votre TA. C' est la rubrique h3. La rubrique 3 peut être normale. C' est en route pour l'instant. Nous pouvons aller autant en profondeur dans les rubriques que nous n'étions pas. Mais ce que nous essayons de faire, c'est d'obtenir une progression harmonieuse des tailles étrangères. Et ça pourrait être enfin les rubriques six. Donc, donc oui, donc ce sont les styles de titre que j'ai créateur. Vous avez la liberté absolue de créer vos propres styles de titre. Assurez-vous juste que ceux-ci sont absolument dedans. Comment peut-on nommer ce prof que oh, attendez, je crois que j'ai raté ce cadran. Donc oui, ça ne devrait pas être 55, ça devrait être 43 selon cette échelle de temps. Donc je vais juste, je, juste si, formé avant D3. Super. Donc, vous pouvez jouer avec, n' importe quelle progression que vous aimez. Vous pouvez aller sur le site de l'échelle de temps et ensuite vous pouvez jouer avec les différentes options que j'ai un peu. Mais à des fins de conception, je vais les utiliser. À la place. Il arrive maintenant à la dernière partie de la typographie que nous devons affirmer que ce que nous faisons pour faire d'autres titres de paragraphe. Batygin ont des titres sont soit pas les titres réels recherchés de ce point sur la chienne écoutée, puis BBN dans leur conception. Donc, je vais choisir la rubrique trois, le style titre trois photos Maya paragraphes en-têtes. Je vais copier les propriétés et les propriétés ici. Grain. Et puis à partir de ce texte de paragraphe, je vais choisir la police 24. Je vais copier les propriétés et les coller ici. Mais si vous pouvez voir que je viens de faire les styles de titre pour les Poppins, mais je voudrais une chanson ouverte dans mon sac assez de texte. Donc, je vais juste changer le visage du type de police pour ouvrir la chanson. Et puis tu y vas. Il s'agit donc de la topographie que nous allons nous préoccuper de la façon dont nous concevons la lutte contre le projet. se voit dans la classe suivante. 11. Mise en place de planche de art et de grille: Maintenant que nous avons trié, la topographie va se diriger vers le design. Veuillez noter que dans la page des images, j'ai conservé toutes les images que nous allons utiliser dans notre conception. Plus tard dans le cours, je serai hors cours sur la façon d'ajouter des images provenant de sources externes. Et nous avons déjà vu ce que nous pouvons faire avec les plugins, et nous allons utiliser un peu de plug-ins aussi. Donc, sans plus tarder, allons à la page de conception et commençons notre conception. Tout d'abord, nous aimerions faire un tableau d'art ou un cadre. Pour cela, vous pouvez soit aller dans cette région pour sélectionner l'image, soit vous pouvez appuyer sur F sur le clavier. Et puis vous obtiendrez ce curseur avec lequel vous pouvez faire glisser un cadre. Avant de faire cela, nous pouvons voir qu'il y a beaucoup d'options données ici plus tailles de cadres sur téléphone, tablette et bureau et autre. A cet effet, je vais choisir un cadre aléatoire. Donc, je vais dessiner un rectangle aléatoire. Et j'irai dans cette région où je vais définir la largeur à 1600 pixels. Je prends 1600 pixels. Avant ce projet, vous pouvez choisir directement certains, certains préréglages réels comme un ordinateur de bureau ou une tablette ou un mobile en fonction de vos besoins pour ce projet, nous prendrons 1600. Maintenant, je vais définir la longueur de ce tableau d'art à 5 000 parce que ce sera un long site Web défilant, page de site Web. Et donc j'ai pensé que laissez-nous juste pour commencer, commençons par l'abondance. D' accord ? Maintenant que le tableau d'art a fait, ce que nous allons faire, c'est que nous allons placer une grille sur ce tableau d'art. Encore une fois, j'utilise Zed et je fais glisser, en utilisant ma souris pour zoomer. Le but de la grille est de vraiment aligner les éléments à l'intérieur d'une manière très agréable à regarder. Je vais aller à la, je vais sélectionner ce R. Et puis j'irai à la section de la grille de mise en page ici. Et je vais juste cliquer dessus. Comme vous pouvez le voir. En ce moment, la grille de mise en page est visible ici. Je vais juste zoomer et zoomer. Vous pouvez voir la grille. Pour le but de ce projet. Je vais aller pour la grille verticale. Donc je vais cliquer ici. Et je vais avoir une grille de colonnes. Donc, comme vous pouvez le voir que ce sont les colonnes. Je réduirai encore l'opacité à 5% afin que cela ne devienne pas intrusif. Et je vais centrer ces colonnes. Choisissons 12 colonnes pour commencer, car il devient vraiment facile d'aligner les éléments. La largeur de chaque colonne peut être de 72 pixels. C' est en phase avec ce que nous essayons de faire. Et la gouttière, qui est la distance entre deux colonnes. Donc ça pourrait être 32. Ok, donc nous sommes tous prêts avec la grille. La raison derrière laquelle j'ai choisi 12 colonnes est que je peux, quand j'utilise 12 colonnes, je peux organiser peut-être deux objets, trois objets pour les objets, et six objets en une ligne. C' est donc le principal avantage de choisir 12 comme nombre de nombre pour le nombre de colonnes. Vous pouvez évidemment activer et désactiver la grille en cliquant sur cette icône pour l'arrêter et la relancer. Ou vous pouvez utiliser le raccourci clavier Contrôle G. Il a le même effet. Ok, donc maintenant nous en avons fini avec notre tableau publicitaire et la grille. Donc, tout d'abord, ce que nous aimerions faire est de placer le logo. Donc, si vous allez à la page des images, vous verrez ce logo typographique. Je vais copier cette commande C, et je vais la coller ici en utilisant la commande V. Et je voudrais garder le logo en haut, en haut à gauche. Mais je voudrais l'aligner comme d'une manière appropriée sur les bords, donc je vais choisir 64 pixels. La raison derrière l'utilisation de 64 est le getter est 32. Donc deux fois le mieux serait 64. Donc je vais juste modifier les x et y's de ceci. Cela signifie que cette valeur X signifie la distance entre ce bord et ce logo. Si vous cliquez sur Alta, alors vous pouvez être en mesure de voir si vous venez de le mettre sur le papier et puis juste pointer votre souris autour, vous verrez que différent. Alors voyez si vous pouvez voir encore il est 90 et les axes 90. Donc mon d est cette distance. Donc je vais faire 6464 jours de m. Donc avec cela, nous avons mis notre logo en place. se voit dans la classe suivante. 12. Réalisation de la barre de navigation: Dans la dernière leçon, nous avons appris sur le réglage de l'hors-bord, la mise en place des grilles , puis nous plaçons ce logo, l'y. 6464 pixels équidistants du x et de ce que nous devons ajouter plus. Parlons donc de cette barre de navigation. Donc, cette barre de navigation apparaîtra en haut de sa page de conception. Donc, ce que je fais, c'est que je vais juste copier cette commande C et je vais la coller sur mon design. Et puis je peux juste l'aligner par rapport au logo que vous venez de placer. C' est une façon de le faire. Mais je vais vous montrer une vague qui est plus réutilisable et peut-être un meilleur moyen pour l'esthétique globale que nous recherchons. Donc, je vais choisir l'outil de texte à partir d'ici. Je peux aussi cliquer sur P sur mon clavier et l'outil apparaît. Et puis je vais juste écrire, écrire les noms des éléments dans la barre de navigation. Donc c'est à propos de nous. Nous avons un élément. Maintenant, je vais dupliquer ça. Je pourrais le faire avec la commande li et ensuite simplement le faire glisser vers le bas. Ou je pourrais juste, je voulais le dupliquer trois fois de plus. Je pourrais simplement appuyer sur la touche Option ou la touche. Et quand je vois le curseur Nobel, je cite, encore une fois, faites-le glisser vers le bas. Et puis je pourrais simplement copier et coller avec la commande C, la commande D. Et voici donc les quatre éléments, essentiellement ces éléments dont vous parlez. Donc je vais juste les écrire. Ce sont les services. Ce sont les témoignages et ce bouton est pour l'application. Super. Alors maintenant, quand nous le sommes, donc ce sont actuellement des éléments individuels comme vous pouvez le voir, mais nous voulons les ensemble en tant que groupe. Donc, la façon de le faire est que je peux juste les sélectionner tous. Je pourrais le faire individuellement. Et après avoir fait cela, j' utilise soit je vais cliquer avec le bouton droit de la souris et je vais cliquer sur ajouter la mise en page automatique. Ou je peux utiliser Shift et aide pour ajouter une couche d'ordre. Donc, une fois que je fais cela, vous pouvez voir que tous ces éléments sont dans une seule mise en page. Maintenant, la mise en page automatique est la fonctionnalité la plus cool de sigma que vous pouvez utiliser comme presque pour chaque élément et cela permet d'économiser beaucoup de temps. Maintenant, comme, comme vous pouvez le voir que ceux-ci sont empilés les uns sur les autres. Ils sont verticaux, mais nous voulons qu'ils soient horizontaux pour notre cas. Donc, si je vais à la section de mise en page automatique ici et je peux cliquer sur ce bouton. Cela dit la direction horizontale. Et voilà, nous les avons dans notre direction horizontale. Il s'agit de l'espacement entre les éléments. En ce moment, il est 46, c'est un peu arbitraire, mais je peux le choisir pour être 64 et voir à quel point il ressemble également espacé. Je peux aussi expérimenter en utilisant mai peut-être 32 parce que c'est la largeur de la gouttière. Mais je pense que 32 est un peu bourré, donc je vais rester avec 64. Je fais juste la commande Z pour annuler. Et maintenant si vous observez, si vous observez ces éléments, alors ceux-ci utilisent la police rubato, mais ce n'est pas la police que nous avons sélectionnée. Ce qu'on peut faire, c'est aller à cette topographie. Et peut-être que je voudrais utiliser le titre pour, qui est moyen et 28 pour ma barre de navigation. Donc, je vais copier ces propriétés. Et je vais aller au design. Je vais sélectionner tous les éléments. Donc, la partie cool à ce sujet est maintenant que c'est une mise en page automatique. Il, vous essayez de tout sélectionner à l'intérieur. Mais si vous appuyez sur la commande et maintenez simplement votre souris à quelque chose sur un élément, alors vous avez la possibilité de le choisir individuellement. Donc, je vais sélectionner tous les intérieurs de l'élément en utilisant la commande a. Eh bien cela va tout sélectionner et puis je vais coller les propriétés. Alors on y va avant de le placer, je voudrais vérifier la couleur. C' est noir pur en ce moment, si vous pouvez voir ici. Mais comme nous avons décidé dans notre topographie que nous allons utiliser un unique, ou plutôt nous avons décidé dans notre palette de couleurs, nous allons utiliser un partage très unique de Black. Donc, en gros, c'est cette ombre. Donc, et donc cette nuance de couleur est par ici. Et puis il passe à 90%. Donc je vais juste copier ça et je vais aller au design. Et je vais juste le coller ici. Lisez-le va juste changer la couleur par juste littéralement juste un peu beaucoup. Mais ce sera plus conforme à notre schéma de couleurs original. Je vais aussi le faire à 90%, donc cela donne un très bon effet. Et maintenant avec cela, je peux placer cette barre de navigation et je l' alignerai en fonction du quadrillage que sigma nous fournit déjà. Donc oui, c'est tout sur la configuration de la barre de navigation. Je vais supprimer ça. Ok alors vous voir dans la prochaine classe où nous commencerons à remplir le texte. 13. Titre de stylos et styles de texte: Bienvenue de retour. Dans la dernière leçon, nous avons appliqué cette navigation, mais une chose que j'ai manquée est que nous devons aligner cette barre de navigation de manière à ce que cette fin soit 64 pixels de cette extrémité. Donc, la façon de le faire actuellement est si j'appuie sur la touche Alt ou sur la touche Option C, je peux voir qu'il est de 184 pixels de là. Laissez-moi juste zoomer en appuyant sur zag et ceci. Ok. Donc, si j'appuie sur la touche Option de la touche Alt, je peux voir qu'il est de 184 pixels de là. Et maintenant, si j'appuie sur la touche de direction de mon clavier, si j'appuie sur la droite, alors vous pouvez voir qu'il a quand il a fait trois. Maintenant, chaque fois que vous faites 101, de la même façon, si je continue à appuyer sur la gauche, il va juste changer les obstacles d'un pixel. Cependant, si vous appuyez sur Maj en le faisant, puis appuyez sur la direction q0, alors cela va changer dans les incréments de dix pixels. Donc, comme nous voulons que ce soit 64, je suis prêt à faire juste un fait le volume 64. Donc je vais juste faire le contrôle G, enlever la grille et juste jeter un oeil. Et cela a l'air vraiment soigné. Ok, donc le meilleur retour sur. Et maintenant, passons au filaire pour commencer à mettre les éléments de texte, les en-têtes de cette conception finale. Et pour cela, nous devons aller au filaire. C' est, ça va faire l'objet de cette leçon. Donc cette copie nous est donnée. Nous vous aidons à construire votre rêve. Et puis, nous sommes libres de consulter, etc. Donc ce que je vais faire, c'est que je vais copier les choses et je vais les coller au hasard. Par ici. C' est un élément différent. C' est un élément différent. Donc, je vais juste copier ceci et je vais juste coller le texte aussi. Ok. Donc, maintenant, ce que nous devons faire, c'est que nous devons aligner cela sur le début de la grille comme celle-ci. Et ce sera notre premier taux de cap. Donc, lorsque nous faisons notre premier titre, nous avons déjà attribué la valeur à cela dans notre topographie. Donc, si vous allez à la typographie et si, si je sélectionne cette rubrique, alors je vais copier ces propriétés. Et puis je viendrai à la conception et je vais coller ces propriétés là-dessus. Et puis nous avons très audacieux 55 bind bosse en demi-bordure. Ce sera notre principal titre, le texte principal. C' est le cas, et ce sera le sous-texte de cela. Donc, pour cela, je vais choisir l'arbre de tête, qui est 35 citrouilles moyennes Barnes. Et je copie. Je vais copier les propriétés. Et puis je vais aller à la conception et je vais coller les propriétés ici. Et comme vous pouvez le voir qu'il a déménagé à elle a l'humeur ainsi qu'il a des gènes, le terme étranger, alors je vais garder cette surcharge. Il existe une autre façon de le faire en copiant simplement des propriétés et en collant des propriétés. Vérifions rapidement ce que c'est. Donc je vais annuler tout ça. Je fais le commandement Z. Donc, comme vous pouvez le voir, il y a beaucoup de défaites ici. D' accord. Donc oui, donc je n'ai pas tout fait. L' autre façon que je voulais vous montrer, c'est si je vais à la typographie et quand je sais que ça va être ma tête. Donc, ce que je peux faire, c'est que je peux créer un style de texte. Je vais vous montrer ce que je veux dire par là. Donc, cette rubrique 1 va chercher du textile. Donc pour cela, ce que je peux faire est que je peux cliquer sur cette icône de style et je peux cliquer sur ce signe plus qui dit créer un style. Et je vais écrire ceci comme le premier titre. Et si je crée cette tuile, alors cela devient le style. Donc, fondamentalement, il y a une sorte de création de composant qui dans elle enregistre le titre un comme textile américain afin que je puisse sélectionner n'importe quel texte et ensuite l'appliquer à cela. Je ferai de même pour le tarif de la rubrique 3. Alors je vais juste y aller. D' habitude, je viendrai plus un cap 3 furieux. Cool. Donc, la façon la plus simple de le faire est alors que je vais aller à la conception. Je vais sélectionner mon texte, puis je vais juste aller à cette icône de style. Et puis je vais juste cliquer dessus et voir que nous avons 55 Poppins. Je vais ici, je vais juste cliquer sur la rubrique 3, et ensuite on a ça aussi. Et je peux juste le garder ici et nous sommes prêts à y aller. Ok, donc on a parlé des styles de tête dans cette leçon. Dans la leçon suivante, nous ajouterons une mise en page automatique à cela et ajouterons également l'image. Et sous ça, je te verrai dans la prochaine classe. 14. Créer des images de fond et coller l'image: Retour. Avant d'aller plus loin, vérifions simplement le filaire pour ceux. Donc, fondamentalement, ce que nous avons fait est que nous avons mis le logo, la barre de navigation, et ces deux lignes de texte sont ce que nous avons mis dans notre conception principale. Cette image de fente horaire, nous devons insérer une image ici, puis il y a un appel à l'action Cortes s'appliquent maintenant. Et nous devons le faire aussi. Et puis cette leçon fera exactement ça. Alors allons à la page de conception maintenant. Ok, donc j'ai juste examiné l'image que je voulais insérer. Donc, c'est l'image que nous voulons copier sur la chose du design. Avant de le faire, essayons simplement de jaser cette page en incluant quelques éléments de couleur. Je vais le faire une fois que vous serez libre de choisir n'importe quel autre Sky linéaire ce vaisseau. Vous, vous allez, vous verrez le modèle et ensuite vous pouvez appliquer votre propre créativité pour créer vos propres arrière-plans. Ce que je vais faire actuellement, c'est que je vais choisir l'outil Ellipse. Je pourrais même appuyer sur mon clavier. Et avec cet outil, je peux dessiner un cercle. La façon de le faire est de cliquer et de faire glisser. Donc pendant que je dessine, vous pouvez voir qu'il fait une ellipse centrée ce prenant le vaisseau selon comment je traîne. Mais si j'appuie sur Maj sur mon clavier, alors cela crée un cercle parfait. n'y a donc pas de mesure de règle difficile et rapide à cela. Je vais créer un cercle comme ça. Et puis pour le remplir, je vais créer un dégradé linéaire, qui va correspondre au logo, le secteur des couleurs que le logo a, qui sont essentiellement des couleurs primaires, comme nous l'avons fait les créer dans notre palette de couleurs. Donc, en revenant à ça, je vais remplir ça, je vais le faire, je vais faire un gradient linéaire. Et quand je fais le dégradé linéaire, je vais juste aller à la palette de couleurs, Sélectionnez la couleur primaire. Viens ici, collez-la ici. Ok, donc on a une couleur et je vais retourner à la palette de couleurs. Je vais choisir la couleur secondaire. Et tu reviens ici et je vais coller le code couleur. Et nous avons notre gradient. Mais les gradients, où arriverons-nous à cet axe que nous avons nous donne le choix de choisir la façon dont ce gradient, qui interagit avec tout. Donc, cette fin est si MyTime, comme nous pouvons le voir, que c'est le dix plus léger de cette surcharge de couleur. Vous pouvez donc jouer autant que vous le souhaitez et choisir un dégradé qui vous semble plus flatteur. Ok, donc je pense que ça va le faire pour moi. J' aime bien ça. Ok, donc c'est mon gradient. Donc maintenant ce que je vais faire, c'est que je vais le rendre un peu plus transparent. Donc je vais le rendre opaque à 60%. Nous, je vais ajouter ceci à un passage ou à 60%. D' accord ? Ce que je fais, c'est que je vais essayer de créer un élément ou ce qu'il a entendu, qui va nous aider à mettre un accent. Faire l'autre façon est image terne. Je vais juste dupliquer ça en utilisant la dinde. Je vais encore dupliquer ça. Je garderai ce truc au sommet absolu. Je vais l'amener à l'avant. Et pour juste ajouter un accent, ce que je vais faire, c'est que je vais inverser les gradients ne veulent pas faire le bleu comme le truc de combat léger. Et donc, ok, donc c'est juste une pièce d'accent et tu peux vraiment le faire comme tu veux. Je pense que j'aime ça et nous pouvons jouer avec cela maintenant avec ceci comme un sac seul, ce que je vais faire est que je vais coller, je vais copier cette image Commande C et la coller. Et collez-le ici. Et je pense que cela fournit un regard un peu équilibré à cela. Donc, si je retourne juste au filaire maintenant, je peux voir que j'ai mis ce logo, la barre de navigation, ces deux lignes de texte et d'image. Maintenant, ajoutons simplement l'appel à l'action qui est appliqué maintenant. Et nous le ferons dans la prochaine classe. se voit dans la classe suivante. 15. Bouton de l'appel à l'action: Jusqu' à présent, nous avons conçu autant. Et une chose que je suis d'habitude est que je clique sur ce bouton Play en haut ici. Cela me donne la vue réelle ou le prototype de ce que j'ai conçu. Et ça ressemble à ça jusqu'à présent. J' ai tendance à faire ça. J' ai tendance à regarder ça sur grand écran pour que je puisse exister comme mon jugement visuel. Si je trouve que, si quelque chose est éteint, si je voulais ajouter n'importe quoi, si j'ai des commentaires impromptus à moi-même, je peux simplement l'incorporer. Donc, il s'agissait de regarder l'aperçu. Revenons à notre design principal. Et maintenant, nous allons ajouter un appel à l'action, comme nous l'avons vu dans le laboratoire. Il y a un appel à l'action propre appelé comme une planète. Et puis il y a ces icônes sociales. Donc, dans cette leçon, nous allons boo, ajouter ces deux éléments. Allons à la conception afin de concevoir ce bouton. Je veux choisir un processus très populaire. Je pourrais juste copier ce bouton, le coller ici et ensuite faire quelques ajustements superficiels. Mais je veux partir de zéro. Et pour cela, je pense que je vais aller à l'outil de texte prend peut également être activé en tapant T sur le clavier et je vais écrire appliquer maintenant ici. Si vous voyez l'option Appliquer maintenant se trouve actuellement dans la face de Roberto I. Je vais aller à ma typographie et je pense que je vais choisir Poppins medium, cette rubrique pour deux b. Je vais choisir la direction pour que ce soit le style mon appel à l'action qui est appliqué maintenant je vais juste coller cela. Donc maintenant, vous pouvez voir ce bouton appliquer maintenant ayant la propriété texte de Poppins et moyen là. Afin de convertir cela en un bouton, je peux utiliser un hack très propre de la mise en page automatique, que je peux activer en appuyant sur Maj minuscule. Ou je pourrais juste faire un clic droit et cliquer sur Ajouter la mise en page automatique. Donc, quand j'ajoute une mise en page automatique, ce qui se passe est ce morceau de texte, cette chaîne de texte, il est converti en un composant, il est converti en un bouton. Et ce sont les paramètres de mise en page automatique. Ce que je peux faire, c'est que je peux ajouter un remplissage de 32 pixels. Donc, si vous pouvez voir qu'il ya remplissage maintenant 32 pixels de tous les côtés à ce bouton. Mais les boutons ne sont généralement pas si encombrants. Je vais donc aller à cette section, l'alignement et le rembourrage. Et puis je vais en quelque sorte faire le rembourrage 16 sur les bords verticaux et 30 à un les bords horizontaux. Appuyez sur Entrée. Donc ça a l'air juste. Pour donner à cela une bordure, parce que pour le moment c'est juste une forme, mais il n'a pas de bordure. Alors je vais à la section AVC. Je vais cliquer dessus et puis peut-être deux bordures de pixels pour avoir. Donc, d'accord, on a maintenant un bouton rudimentaire avec ça. Il est assez similaire à celui dans le filaire. Mais pour en faire un bon bouton avec un appel à l'action, ce que je vais faire, c'est que je vais arrondir les coins de l' IA autour d'eux pour éventuellement un 100. Et ce type de bouton est appelé comme un bouton de pilule. Donc maintenant, comme vous pouvez le voir, le fardeau prend forme. C' est un appel à l'action. Un appel à l'action. Fondamentalement, nous devons utiliser la couleur primaire. Je vais donc choisir la couleur du texte pour être la couleur primaire. Je peux sélectionner cela dans la palette de couleurs. C' est la couleur primaire du quart quatre. Je vais copier ceci et en venir à leur conception. Et puis je vais le coller ici. Et nous l'avons là. C' est notre bouton. En regardant le bouton en ce moment, je sens que quelques façons d'améliorer ce truc. Tout ce que je voudrais contester l'opacité de ce typhus. Je vais le ramener à 80 %. Ok, maintenant cela a un registre très agréable et c' est similaire à l'arrière-plan que vous voyez. C' est donc plus congruent maintenant. Et puis je voudrais juste déposer une flèche là-dedans, juste un petit objet. Donc, pour cela, nous allons utiliser je quantifie. Nous l'avons fait, nous l'avons fait dans les leçons précédentes. Donc, je vais aller au plug-in et puis je vais cliquer sur l'icône. Je vais choisir une flèche pour une icône, je veux une flèche droite. Donc, c'est la flèche droite et aucune hauteur de pixel 36 ne semble appropriée. Donc, je vais juste importer l'article. Ok, donc maintenant que l'icône est importante, ce que je vais faire, c'est changer la couleur pour l'appel à l'action elle-même. J' ai déjà copié cela et puis je vais le convertir en un d. Ok, maintenant, afin d'insérer ceci dans ce bouton, c'est en fait une mise en page automatique. Ce que je vais faire, c'est que je vais traîner ça. Mais pendant que je fais glisser cela, si j'appuie sur la touche de commande, alors cela me permet d'insérer directement dans cela. Donc si je le laisse tomber, tu y vas. Donc, ça a l'air assez soigné. Hmm. C' est ainsi que nous avons créé notre bouton et l'appel à l'action. Maintenant, ce que nous devons faire est que nous devons ajouter une couche à cela maintenant tous ces textes sont assez arbitrairement placés et il n'y a pas de relation réelle entre l'espacement entre eux. Donc, cela peut être facilement trié. Ce que nous pourrions faire, c'est de sélectionner les trois éléments. Et puis nous pouvons ajouter un, une autre mise en page automatique par décalage a. Et quand je fais cela, vous pouvez voir que cette chose a déjà, il a maintenant une largeur de ligne fixe. Et puis je peux ajuster l'espace entre les éléments à 6060 pixels. Et peut-être que 60 pixels ressemblent à une petite crête. Donc si je fais ça à 72 pixels. Et maintenant, il y a comme un regard harmonieux à notre page. Maintenant, tout est en quelque sorte en train de se réunir à ce stade. Donc c'est à peu près pour cette leçon. Dans la leçon suivante, nous allons ajouter les icônes des médias sociaux, puis nous commencerons à concevoir pour les sections suivantes. se voit dans la classe suivante. 16. Section Suivante et autolayout: Retour. Avant d'aller de l'avant, appliquons une ombre portée à ce bouton d'appel à l'action afin qu'il ressemble réellement à un lien cliquable. Voici comment le faire. Vous devez sélectionner le bouton. Je l'ai fait en double-cliquant à l'intérieur de cette mise en page automatique. Et puis j'irai aux effets. Et l'effet est l'ombre portée. ce moment, nous allons le garder aux paramètres par défaut, ce qui est comme 44 flou. Et quatre sur l'axe y de l'ombre, qui est comme, qui tombe dans la direction verticale mais vers le bas. Donc, c'est à peu près cela va juste le garder au niveau par défaut. Et si vous pouvez voir maintenant ce bouton ressemble en fait à un lien cliquable. Donc je vais appuyer sur Maj 1, zoomer pour s'adapter. Et encore une fois, je vais appuyer et faire glisser et entendre parler de ça. Alors maintenant que nous avons terminé avec la construction de cette section, passons rapidement au filaire et voyons que nous devons ajouter ces icônes sociales. Et après cela, nous passerons à la section suivante de la page des héros, qui est les universités en vedette. Ajoutons les icônes. Maintenant. Ce que j'ai fait, c'est que j'ai gardé ces icônes dans la page des images. Habituellement, ce qui se passe est que vous devez télécharger ces icônes à partir de tout ce que je peux voir, puis les utiliser dans l'image. Pour faciliter l'utilisation, je viens de les garder dans la page des images. Je vais coller les icônes comme ça. Je vais les faire tomber. Et maintenant, encore une fois, afin d'aligner toutes ces icônes horizontalement, nous allons utiliser l'outil magique de mise en page automatique. Je vais tous les sélectionner. Je perds décalé. Donc, une mise en page automatique a décidé, et je vais juste aller aux paramètres de mise en page automatique et je vais cliquer sur la direction horizontale. Et vous avez toutes les icônes dans la direction horizontale. Je vais changer l'espacement entre les deux espacements propres entre les éléments à 32 pixels. Et cela a un look et une sensation uniformes pour elle. Et voilà, je peux même mettre sur la grille en appuyant sur le contrôle g pour voir que j'aligne le consentement à la grille comme ceci. Ou peut-être que cela par rapport à ce fardeau ne semble pas symétrique. Donc, je vais juste revenir en arrière et je vais choisir la symétrie centrale à ces deux éléments. Je vais changer de grille et je vais cliquer sur le bouton de lecture juste pour voir comment le prototype est, sont le, comment les concepteurs se forment. Et je pense que ça arrive d'une très bonne façon. Ok, note alors je vais au cahier de travail et maintenant laissez-nous concevoir pour le prochain article, qui est présenté dans l'onglet universités du filaire. Donc, pour cela, je vais aller à la page de conception. Ce que je vais faire maintenant, c'est que je vais créer des sections à l'intérieur de cette page elle-même. Pour faire ça. J' essaie d'abord de faire quelque chose à l'écran, puis j'ai essayé de l'expliquer au fur et à mesure que nous avançons. Je vais construire un rectangle. Et rectangle comme celui-ci. Donc, ce rectangle, mais il va faire, va couvrir cette couche de l'image. Parce que nous aimerions parce que cela, ce Crawford les images assez bon et standard en ce moment. Donc, je vais juste utiliser cette couche supplémentaire, forme supplémentaire d'un rectangle pour diviser la page en stratifiés lisibles. Et puis je vais travailler dessus. Alors voyons ce qui doit être fait maintenant, si je vais à la filature, je vais voir qu'il est écrit en vedette Université, donc je dois écrire des universités en vedette là-bas. Mais avant cela, ce que je vais faire, c'est que je vais changer le remplissage de ce rectangle qui est la couleur. Et je vais le changer pour quelque chose de plus agréable comme celui-ci. Il s'agit en fait d'un document et d'une couleur. Ce E phi, si je même E5 est l'un des gris que nous avons déjà définis dans notre palette de couleurs. Donc ça a l'air un peu sombre. Et maintenant, pour écrire des universités en vedette ici, je vais aller à l'outil Texte pour cliquer à l'intérieur ce rectangle afin qu'il devienne une partie de tout ce rectangle. Et je vais écrire des universités. Donc, pendant que j'écris des universités de fonctionnalité, centre des îles l'alignent comme ça. C' est assez bon. Style de tête pour notre long métrage Université. Ceci est directement tiré de la sous-rubrique de cet élément. Bien que ce que je voudrais modifier, c'est que je voudrais le rendre un peu moins opaque. Donc je vais changer l'opacité à 80%. Voyons voir à quoi ça ressemble. Je pense que ça a l'air bien. Si nous pouvons modifier la police de caractères et une taille de police au fur et à mesure que nous continuons à prouver ce que nous sommes fabriqués. Donc maintenant, en plus de cela, ce que nous devons faire est d'ajouter les quatre logos des universités qui sont en vedette. Donc je vais juste les sélectionner comme ça. Je vais les copier. Je vais apporter à leur page de conception. Je copie en utilisant la commande C. Je vais faire une commande v ici, donc je les ai collés. Donc maintenant ces quatre images, généralement avant FISMA, ce qu'il faut faire était de trier manuellement, de les envoyer, puis de s'inquiéter de la distance entre les images et tout. Mais grâce à la figue, la mienne, grâce à la mise en page automatique, c'est si simple. Maintenant, laisse-moi te montrer. Je vais sélectionner les quatre. Et je vais faire la mise en page automatique soit en cliquant avec le bouton droit de la souris et en cliquant ici, ou je peux utiliser le changement EIA chose aussi bien. Donc, je vais juste cliquer ici. Et la mise en page automatique créée. Je vais voir les paramètres de mise en page automatique. Je vais faire la réaction horizontale. Et nous l'avons là. Et Central et moi faisons un alignement central. Maintenant que j'y pense, je voudrais une petite séparation entre les deux images. Donc tout ce que j'ai à faire, c'est que j'ai besoin d'aller ici, qui est l'espacement entre les objets. Je les linspace 16 pixels entre les éléments. Ça a l'air un peu moins. Donc, je peux faire monter ça jusqu'à 32. D' accord ? Et je pense que ça a l'air assez décent. Je vais juste ajouter juste fait en ce moment. Ce qui peut être fait est que je peux également faire une mise en page automatique de cette forme de sorte que tous les autres espacements et pris en charge, mais ce n'est pas nécessaire en ce moment. Nous allons peut-être reconsidérer tout. Et nous allons regrouper tous les composants et nous normaliserons tous les espacements à la fin de ce projet une fois que nous aurons complètement conçu cela. Donc, donc oui, donc, jusqu'à présent, nous avons conçu deux éléments principaux. première est la page des héros et la seconde est la section consacrée aux universités de fond. Jetons un coup d'oeil à cela en cliquant sur Jouer. C' est une bonne pratique de le faire parce que cela vous donne une idée juste de ce que vous essayez de construire. Et je pense que c'est en train de prendre une très bonne forme en ce moment. Alors c'est tout pour cette leçon. se voit dans la classe suivante. 17. Concevoir des cartes de caractères avec la mise en page automatique: J' espère que vous suivez jusqu'à présent. Dans cette leçon, nous allons concevoir plus loin. Allons rapidement à la page filaire et voyons ce que nous avons devant nous. Donc, fondamentalement, nous avons cette section pour l'instant et voyons ce que nous en faisons. Fondamentalement, mon idée est de représenter toutes ces fonctionnalités que l'excellence a dans les cartes. Et nous allons faire les cartes en utilisant la mise en page automatique, ce qui est la meilleure caractéristique de FISMA. Commençons. Je vais commencer par sélectionner tout et je vais juste copier cela sur la page de conception à bord. Donc j'ai été très sale boulot de copier-coller. Ici, j'éteins la grille pour l'instant en concluant G. OK ? Maintenant, nos services vont être notre direction pour la section. Le titre de section, comme nous l'avons déjà décidé, sera une rubrique trois. Donc, quand nous allons à un titre trois, ceci sert de titre de section. Ce sera le sous-texte de cette rubrique. Donc, nous allons assigner ceci comme un titre pour. C' est très facile une fois que vous choisissez ces textiles. Et si je me dirige juste vers et voilà, nous avons cet ajout de c complet ici. Vous pouvez voir que c'est, cela convient assez bien. Ok, donc maintenant la tâche à accomplir est de les convertir en cartes. Et fondamentalement, je vais faire le processus pour ce conseil d'orientation professionnelle. Et puis je le répète aussi pour les admissions à l'université et ensuite tu pourras faire pour le reste. Et cela va être beaucoup de liberté créative dans Monde. Alors allons de l'avant et fondamentalement je vais commencer par dupliquer cela. Alors je vais appuyer sur l'autel sur le clavier. Je vais juste dupliquer ceci et ensuite je vais supprimer tout ce corps de texte de ceci. Je vais juste enlever tout l'espace, tout l'espace vide de celui-ci. Et je vais faire la largeur automatique par ici. Maintenant pour ça, ça va être la tête de l'ours avec moi. Je suis sûr que vous n'êtes pas en mesure de visualiser à quoi ressemble la courbe, mais nous y arriverons. Donc, je vais assigner cela de la même manière que ce style. Et ça se dirige vers, pour nous. Donc je vais juste faire un cap pour ici. Je vais aller au texto et je vais sélectionner ici. Je vais faire le cap 4. Donc d'accord. Donc nous avons notre orientation professionnelle ici. Et puis on a copié ça, non ? Alors maintenant, je vais supprimer la partie de l'orientation professionnelle de ça. Retirez également l'espace supplémentaire. Et ce sera le corps du texte ou le texte du paragraphe. Maintenant, si vous allez à notre topographie, nous verrons que le texte du paragraphe est la chanson ouverte à 24 attente, 2446. Donc je vais juste copier ça. Je vais copier la propriété et je vais juste coller la propriété pour cela. Et voir que nous avons l' Open Sans et à 24, je vais faire une largeur automatique rapide pour cela en cliquant ici le 8 octobre. Et puis je vais juste réduire la largeur et vous pouvez voir le flux de texte. C' est une fonctionnalité cool. Il est livré avec mise en page automatique. Et je vais garder trois rangées de texte pour qu'il y ait uniformité. Donc il y a ça. Maintenant, nous voulons un appel à l'action ici. Il manque dans le filaire, mais ce garde va faire un lien vers une page sur le site. Donc, il va y avoir un apprendre plus appel à l'action. Donc, je vais aller à la conception, je vais aller au design, je vais le faire. Alors, c'est ça ? Nous devons donc concevoir un appel à l'action. En savoir plus. Et je vais le faire en utilisant l'outil de texte. Je vais utiliser T sur le clavier, et je vais simplement taper En savoir plus. Donc, comme vous pouvez le voir, le En savoir plus n'est pas en science ouverte avait 24. Ce sera un bouton CPA, donc je préférerais qu'il soit dans Poppins, qui est notre police de caractères principale que vous avez décidé. Donc je vais juste à quatre 1s type Poppins ici. Quatre broches à moyen il est bon. Je réduit juste le poids de, je vais faire la taille de la police à 22. Je pense que ça a l'air un peu mieux. Donc, comme il s'agit d'un appel à l'action, cela devrait avoir la couleur primaire. Donc, je vais remplir, et puis je vais sélectionner cette couleur, qui est incidemment notre couleur primaire, que vous avez sélectionné. Le truc cool avec Sigma, c'est dans cette boîte, gros mes chaussures, la classe de documents. Et dans les couleurs du document, il conserve toutes les couleurs qui sont présentes dans ce document. Donc, si vous observez, ce sont les couleurs que nous avons créées dans notre palette de couleurs. Donc maintenant que la couleur primaire est sélectionnée, je vais juste réduire l'opacité à 80%, puis ajouter un peu d'ombre portée. Donc je vais aller aux effets et je vais faire l'ombre portée 44. Donc, cela ressemble en fait à un bouton cliquable. Maintenant, ce que je vais faire est que je vais aussi ajouter une flèche, juste le genre de flèche que nous avons gardé à la CTA originale s'applique maintenant appel à l'action. Donc, pour ce faire, ce que je vais faire, c'est que je vais cliquer sur l'icône du plugin. Si je, je vais chercher une flèche, je vais aller chercher un écrivain à nouveau essentiellement. Mais cette fois, comme les tailles de police sont 22, je vais garder la hauteur de la flèche 222 aussi. Et je vais juste importer cette icône. Ainsi, comme vous pouvez le voir, l'icône est importée et est importée. Donc oui, donc une fois que l'icône est importante, je vais juste apporter que je viens dans le cadre. C' est juste une petite chose à faire pour voir que tout n'est pas foiré. Ce n'est pas si important. De toute façon. Je vais donner cette flèche à nouveau, la couleur de la marque, la couleur du CTA, qui est ici. Alors on y va. Donc, nous avons notre flèche ainsi que ce qui correspond en couleur avec la discipline, savoir plus CDA, n'est-ce pas ? Donc, pour en faire maintenant une carte, nous avons parlé au début que ce seront des cartes maintenant. Donc, ce que je vais faire est que je vais faire ce CPA En savoir plus en un bouton de style de mise en page automatique. Donc, je vais juste appuyer sur Maj a. Donc la mise en page automatique est ajoutée avec, je vais appuyer sur 16 ici, 16 pour le rembourrage de tous les côtés. Ce que je vais faire, c'est que je vais prendre cette flèche, cette petite flèche, je vais la redimensionner. Je vais faire 22, 10-22 hauteurs pour qu'il devienne un peu plus grand en taille. Et puis je vais simplement le faire glisser dans cette mise en page en appuyant sur commande. Donc, quand j'appuie sur la commande, cela me permet de mettre des éléments dans les mises en page automatiques. Maintenant que vous pouvez voir que cela devient un bouton, une mise en page. Bien que vous puissiez voir que la flèche est légèrement plus élevée que le En savoir plus. Donc, cela peut être trié en allant dans ce menu ici et en appuyant sur ceci. Donc je pense que ce CTA en savoir plus est prêt. Donc, afin de maintenant convertir cela en carte, ce que nous allons faire est que nous allons faire une autre mise en page automatique de tous ces éléments. Et puis on va le remplir de blanc et ensuite mettre de l'ombre portée. Voyons comment faire ça. Donc, je vais commencer par sélectionner ces trois éléments. Je suis prêt à faire Shift a, c'est pour la mise en page automatique. La mise en page automatique n'a pas été ajoutée. Maintenant, après avoir ajouté la mise en page automatique, j'irai à la section de remplissage, et je vais y ajouter un remplissage de 16 pixels afin que vous puissiez voir qu'il y a des espaces autour du texte. Et puis, comme l'étape suivante, je vais introduire un filtre. Donc, quand je clique sur remplissage, le Phil par défaut est celui du blanc. Donc maintenant toute cette chose a un remplissage blanc, remplissez. Et puis je vais aller aux effets et je vais appliquer l'effet d'ombre portée. Maintenant, comme vous pouvez le voir, même avec un très minimum, un effet par défaut d'ombre portée, vous pouvez réellement voir qu'il prend la forme d'une carte. Nous devons juste accentuer cela plus. Je vais donc aller au menu de l'ombre portée et je vais changer le flou à 30. Et puis je vais changer le fil 215. Et on y va. Donc nous avons notre première carte prête pour l'orientation professionnelle. Un couple de points à améliorer pour cette carte, qui vient à mon esprit est cette apprendre plus doit être aligné vers la gauche. Donc, je vais juste sélectionner cet élément. Et c'est un problème du rembourrage lui-même. Donc je vais aller ici et je vais changer le rembourrage gauche à 0. Et pendant que je fais ça, vous pouvez voir le Moodle d'apprentissage se déplace juste vers la gauche non plus. C' est bien plus que moi. Une des choses qui pourraient vraiment ajouter une très bonne saveur à ce design va être une icône. Donc, et les marées et les icônes, ils vont vraiment bien ensemble. Pour cette orientation professionnelle, nous devons trouver une icône contextuelle. L' orientation professionnelle est tout au sujet de la conversation. Il s'agit d'un dialogue. Je vais donc aller à mon effet d'icône de plug-in. Et je vais chercher quelque chose comme un message. Un message. Je peux, je pense que je peux, j'aime ça. Je pourrais. Tu es libre de choisir ce que je veux. Et puis je vais choisir l'icône est 64 pixels. Et quand je le ferai, je vais juste importer l'icône ici. Nous icône est importée, comme vous pouvez le voir. Vous voyez. Donc, l'icône est juste ici dans cet élément et cette mise en page automatique, c'est parce que nous avons sélectionné cette icône, puis nous avons importé l'icône. Lci aurait pu atterrir n'importe où sur cette page. Tellement cool. Maintenant, si vous vous souvenez, pendant que nous concevons la palette de couleurs, nous avions décidé que toutes leurs couleurs tertiaires sont quelque chose que nous allons utiliser pour les icônes. Les couleurs tertiaires sont des couleurs flare. Donc, je vais revenir au design et je vais choisir une couleur tertiaire pour cette petite icône. Laisse-moi aller à la palette de couleurs. Je pense que j'irai avec cette couleur. Donc, je vais sélectionner le ColorCode. Et je vais aller au Design. Et je vais le coller ici. Et ça change la couleur. Et je vais le rendre à 80% opaque. Et tout ce que j'ai à faire c'est la boîte de mise en page automatique, donc je dois juste le faire glisser et le faire juste assis là. C' est ainsi que l'archive est prête afin d'accentuer davantage l'aspect de la carte. Ce que je peux faire, c'est que je peux éteindre un rayon de coordonnées de 20 pixels. Donc ça va juste faire éclater le garde. Alors on y va. C' est la carte sur laquelle nous avons conçu. Maintenant, nous devons placer la carte sur l'écran. Donc, pour cela, je vais activer à nouveau la grille par le contrôle g. Et je vais prendre cette carte et je vais l'aligner sur la grille. C' est ainsi que nous avons créé cette carte. Ce que je vais faire maintenant, c'est que je vais répéter tout le processus pour le garde des admissions de l'université aussi. Et puis je vais arrêter cette leçon. Et puis vous pouvez faire le même processus pour le reste des cartes. Alors commençons. Je vais éteindre le, plus grand en appuyant sur le contrôle G. et je vais dupliquer cette boîte. Donc je vais appuyer sur Alter et je vais juste dupliquer. En passant, si vous avez pris le coup du processus, alors vous pouvez arrêter cette vidéo tout de suite et travailler sur vos cartes ou vous pouvez également démarrer la vidéo suivante. Maintenant, revenant au processus, je vais supprimer ces lignes. Je vais juste supprimer tout l'espace vide et lui donner une certaine largeur automatique. Et je vais donner le style de texte comme cap pour. Avec l'en-tête du style de texte. Je vais prendre ça et je vais enlever le titre de ça. Je vais aussi supprimer tout l'espace supplémentaire qu'il n'y a. Je vais lui donner une largeur automatique. Oui, ça va au-delà des limites. Et puis je vais lui donner le style de texte de paragraphe que nous avons pris, qui est la police Open Sans. Donc je peux, ce que je peux faire est que je peux sélectionner ces propriétés et je peux copier ces propriétés. Je vais juste le coller ici et les propriétés sont collées. Ce que je peux aussi faire, c'est que je peux prendre cela et que les créateurs s'en empilent. Je peux nommer cela comme mon style de paragraphe. Et le style de paragraphe est créé. Nous allons en faire trois lignes. Donc, fondamentalement, ce que je vais faire est que je vais juste redimensionner ça et le transformer en trois voies. Je vais zoomer en appuyant sur la touche Contrôle et ma molette de défilement. Et quand ils le feront, alors je vais juste copier cet élément. J' ai juste dupliqué cet autre. Je vais appuyer et je vais le retirer. Je vais le garder ici et le week-end. Il suffit d'ajouter une mise en page automatique à cela. Je vais faire déplacer un pour ajouter la mise en page automatique. C' est beaucoup Elaine. Je vais choisir un rembourrage de 16 pixels. Ça sort bien. Je vais lui donner le remplissage par défaut. Phil va être blanc. Et puis je vais aller aux effets et je vais faire apparaître l'effet d'ombre portée avec le flou comme 30 et la valeur y à 15. Ensuite, je vais aussi prendre le rayon du jardinier à 20 pixels et le garde est prêt. Mais attendez une minute, nous n'avons pas ajouté l'article. Donc, pour ajouter l'icône, ce que je vais faire, c'est aller à mon plug-in, phi emblématique, et je vais chercher l'université. Donc je pense que c'est un article d'université décent. Je peux l'obtenir pour la hauteur 64. Et je vais juste importer ça. Donc, quand j'importe cette icône, ce que je dois faire est que cette icône vient dans sa propre, son propre démarrage d'art. Donc je dois, et c'est le taux d'icône, donc je dois ajouter ceci à la trame 29. Et puis je peux juste supprimer ça vers l'extérieur d'ici. Je peux juste changer la couleur pour n'importe laquelle des couleurs tertiaires que j'aime. Je vais aller à la palette de couleurs et peut-être que je choisirai une université décolorée. Et on va copier ça. Et je vais le coller ici. Je vais faire l'opacité à 80%. Et puis je vais juste déplacer cette icône en haut de la ligne. Et donc nous avons une petite seconde carte. Prêt. Je vais arrêter cette leçon à Munich. Et je vous demande de faire toutes ces trois cartes par vous-même. Lorsque l'une des façons de le faire comme possible pour simplement dupliquer cette couche comme ceci, et puis essayer de simplement le taper afin que vous ne gâchez pas avec tout le travail que nous avons fait. Ce qui peut également être fait est que vous pouvez vous référer à ces couches dans le matériel de référence que j'ai fourni afin que vous puissiez prendre, vous pouvez directement référencer les cartes qui avaient déjà été faites et éventuellement les rétro-ingénierie et apprendre d'eux. Donc je vais arrêter cette leçon pour l'instant. 18. Ajouter l'arrière-plan aux cartes: Bienvenue de retour. Je suppose que vous êtes sur une page similaire et vous avez effectivement travaillé bannir Dieu ces gardes pour vous-même. C' est bon s'il y a une petite différence entre ce que vous voyez à l'écran en ce moment et la sortie d'urine. Il y a certainement une liberté créatrice autonome avec nous avec les couleurs tertiaires spéculaires en ce qui concerne les tailles de police, etcetera. Donc, l'important est que vous ayez les cinq cartes en ce moment devant vous afin que nous puissions continuer et que nous puissions ajouter nos pièces d'accent. Parlons un peu de fond comme une pièce d'accent. Donc si, si ce n'est pas pour ce fond des couleurs, les trois cercles que nous mettons avec ce dégradé, cette image aurait l'air vraiment, vraiment fait. Donc la VOD, ces couleurs font actuellement, c'est qu'elles fournissent un arrière-plan et qu'elles fournissent un accent qui est très agréable à l'œil. Nous allons donc faire quelque chose du même genre ici. Et juste pour le garder ludique, l'image était sur le côté droit de l'axe. Donc nous allons mettre notre accent sur le côté gauche. Pour mettre cette pièce d'accent, je vais sélectionner l'outil de cercle, l'outil Ellipse qui est. Et je vais cliquer et faire glisser. Comme vous pouvez le voir, c'est comme un flux libre. Elle forme une forme d'ellipse fluide, mais au moment où j'appuie sur Maj, elle se verrouille sur une forme et c'est un cercle. Donc je vais prendre ce cercle et je le placerai juste ici. Maintenant, pour y mettre un dégradé, la dernière fois, nous avions choisi toutes les couleurs primaires. Cette fois, nous allons utiliser un moyen un peu plus efficace. Il y a donc ce plug-in appelé en tant que dégradés Web. Et je vais cliquer sur les dégradés Web et je vais juste vérifier les dégradés qu'ils ont dans le fichier. Je pense que l'Ashwin pluvieux est assez conforme à notre schéma de couleurs primaire. Donc je vais juste cliquer dessus. Et voila, nous avons cette villa Ash juste ici. J' ajouterai juste la transparence sur celui-ci. J' ajouterai juste l'opacité. Autrement dit, je vais le rendre à 50% opaque. Et puis je vais juste dupliquer ça pour un effet. Je vais appuyer sur l'ancien ou le contrôle ou l'option. Et puis je vais juste dupliquer ça. Et juste pour le plaisir, je vais changer le gradient sur celui-ci aussi. Je vais ouvrir ce même plug-in. Et laissez-nous maintenant un peu de couleur gratuite pour le plugin. Je pense qu'on peut se contenter de ça. Tentant comme votre, qui est assez similaire à l'une des couleurs tertiaires que vous avez sélectionné. Donc, si je fais ça, ça vient à ça. Je vais à nouveau changer l'opacité à 50%. Je ramènerai peut-être le remplissage à 80% aussi. Et maintenant ce que je dois faire, c'est que je dois cliquer sur les deux pièces et que je dois les renvoyer. Et comme ça, nous venons de transformer l'apparence de cet écran en ajoutant ces deux actes et pièces. se voit dans la classe suivante. 19. Créer des cartes pour la section suivante: Avant de plonger dans le prochain morceau, laissez-nous rapidement prévisualiser ce que nous avons fait jusqu'à présent. Nous allons cliquer sur ce bouton présent. Et puis nous allons voir un est à un aperçu réel de notre travail. Je regarde si loin, si bien. Ha, ok, donc c'est notre page de héros que tu as conçue. Tout a l'air assez soigné. Le, c'est une deuxième section que nous avons fait, qui était plus en vedette universités que quelques logos universitaires espacement égal entre chacun d'eux. Et c'est la troisième section que nous avons conçue, qui concerne nos services. Et puis nous avons conçu ces gardes à partir de zéro. Et puis nous avons également ajouté cet élément visuel. Donc, avec cela, commençons maintenant à travailler sur la section suivante. Et pour cela, passons rapidement au filaire et comprenons ce qui est le suivant. Nous avons donc conçu pour cette section principalement, c'est nos services. Donc, la prochaine section est à venir dans les événements USD. Donc, je vais utiliser le modèle d'opérations assez similaire que j'utilisais plus tôt. Je vais tout sélectionner. Et je vais juste copier ça. Je vais aller à la phase de conception et je vais le coller quelque part ici. D' accord ? Ok, maintenant, la tâche à accomplir est de convertir cela en section vraiment attrayante de ce site Web. Donc, pour cela, tout d'abord, ce que je vais faire est que je vais faire un rectangle et un rectangle de cette couleur. Donc, fondamentalement, le cadre que nous allons pour nous. Il y a une section blanche avec une pièce d'accent colorée, puis il y a une section grise rectangulaire qui n'a pas d'accent. Là encore, il y a cette pièce blanche. Et maintenant, nous irons pour une Greenpeace par ici. Donc, je vais cliquer sur et juste dessiner rectangle aléatoire. Je ne suis pas prêt à prêter beaucoup d'attention aux dimensions pour l'instant. Et je peux utiliser le sélecteur de couleurs. Et un sélecteur de couleurs sélectionne simplement la couleur sur laquelle vous cliquez. Alors je vais cliquer ici. Et donc nous avons grand cette couleur. Donc, avec cela, ce que je vais faire est que je vais copier cet élément sur ce rectangle. Je vais juste faire glisser ça. J' ai besoin d'envoyer ceci à l'arrière d'abord pour que les couches ne soient pas dérangeantes. Mais maintenant, je vais juste copier ça ici. Je vais utiliser l'alignement central. Et puis il s'agit essentiellement de la rubrique 3, que nous avons utilisée ici pour nos services. Nous pouvons aussi l'utiliser, qui ne sera pas exactement la troisième position, c'est Poppins et 28. Donc ça doit être une rubrique 4. Laisse-moi vérifier la topographie. Oui, c'est le cas. En fait, en quatrième position, vous pouvez voir Poppins sur 28. Alors laissez-moi simplement créer cette pile appelée comme cap pour afin que nous puissions l'utiliser en toute transparence. Ok, et puis, donc je vais utiliser le cap pour, pour ça. Super. Et je vais utiliser ce style, qui est à nouveau en tête pour ce texte en dessous. Alors je vais l'emmener ici. Et puis je vais juste cliquer sur le style. Et je vais me diriger vers. Bien que maintenant le problème ici soit ce qui se passe est la fois le titre et un sous-texte ont la même taille de police, même colorant, le même bit. Donc peut-être que ce que je voudrais faire est que je voudrais augmenter cette taille parce que de toute façon, cela va être comme un en-tête de section. Donc, je fais une rubrique 3. Je vais l'aligner au centre. Et je vais le prendre un peu vers le bas pour qu'il ne soit pas encombrant. Très bien. Nous passons en revue la chose de mise en page automatique, peut-être à la fin afin que nous puissions normaliser l'espace. Ok, donc maintenant, c'est l'information que nous voulons dépeindre ici. Et cela doit être dans un format très attrayant visuellement. Donc, ce que nous pouvons faire, c'est que nous pouvons concevoir une carte, mais nous ne suivrons pas le même processus que nous utilisons pour concevoir ces cartes. Voyons une autre façon que nous pouvons créer une carte avec. Je vais commencer par l'outil Texte. Donc, je vais juste appuyer sur T sur mon ordinateur. Et puis je vais écrire le 24 avril par ici. D' accord ? Donc le 24 avril, alors ce que nous pouvons faire, c'est que nous pouvons convertir ça en une sorte de bouton. Donc, je vais faire est de déplacer un, ce qui fait la mise en page automatique. Et une fois que la mise en page automatique est terminée, je peux choisir le remplissage. Et cette fois, je vais utiliser une des couleurs tertiaires. Nous avons décidé d'utiliser des couleurs tertiaires pour les icônes ainsi que pour les petits accents. Traitons ça comme un objet. Donc, je vais aller à la palette de couleurs. Et peut-être que je voudrais utiliser cette couleur. Cette couleur sonne bien. Donc, je vais utiliser cette couleur particulière à 30% d'opacité. Je vais copier ça. Je vais aller au design, puis je vais cliquer sur ça dans le film. Et je vais remplir ce 230. Je pense que je pourrais l'utiliser un peu plus léger, alors peut-être que je vais faire 20%. Ok, ça a l'air bien. Bien que maintenant ce que je ressens c'est qu'il faut de la place pour respirer. C' est comme se sentir un peu piégé. Donc, je vais augmenter le remplissage à 16 pixels, puis courbe le rayon à peut-être dix pixels. Grade. Ça a l'air bien. Ça a l'air très bien. D' accord ? Donc, en allant de l'avant, ce que je vais faire, c'est que je vais prendre le texte d' ici et je vais coller ce texte à côté de cela. On ne veut pas de 10h à 14h. Pour l'instant. Nous allons le présenter d'une meilleure façon. Et pour cela, je vais simplement cliquer sur la largeur automatique afin qu'elle redimensionne la boîte et que la boîte soit redimensionnée. Et maintenant ce que je vais faire, c'est que je vais changer le cap de la deuxième. Alors je vais ici et je vais cliquer sur la rubrique 4. Ok, ma rubrique a changé. Et puis juste pour la symétrie, j'essaierai d'apporter ça comme ça. Et pendant que je bouge la boîte, ce texte coule à l'intérieur. Et on y va. Nous avons donc ce 24 avril et l'Université d'Australie-Occidentale. Nous avons donc écrit ces deux composants de la carte que nous essayons de créer. Je vais les sélectionner tous les deux. Optez pour un décalage de mise en page automatique. Ok, si vous pouvez voir cette unité de l'Australie-Occidentale est légèrement au-dessus de la ligne de symétrie pour cela. Donc, pour y remédier, je vais cliquer ici, qui est l'option d'alignement et de remplissage. Et je vais l'amener au milieu. Alors c'est tout. C' est ainsi que nous avons créé ce composant particulier. Nous avons beaucoup de texte à ce sujet. Ce que nous ferons, c'est que nous utiliserons une sorte de processus similaire. Je vais copier ce texte. Je vais coller ce texte ici et je vais juste le faire glisser d'une manière qu'ils soient lisibles. D' accord ? Et puis je vais utiliser l'option de texte de paragraphe. Voir nous avons utilisé l'option Texte paragraphe ici aussi, qui est la police Open Sans à 24 Legler. Donc, je vais utiliser le texte du paragraphe sur celui-ci. Donc, je vais aller aux styles de texte et je vais faire le style de paragraphe. Et d'accord, donc vous avez ceci dit, ok, donc fondamentalement quand je visualise ce bouton, sont cette carte, je veux que cette carte soit liée à peut-être un calendrier ou peut-être une liste de courriels ou autre chose. Vous aurez donc besoin d'un appel à l'action. Je vais simplement double-cliquer ici, puis je vais cliquer à l'intérieur. Et puis je vais juste dupliquer ça. Je vais appuyer sur la touche Option. Et puis je vais l'amener ici. Et nous avons notre petit appel à l'action à ajouter à cela. Et maintenant, la dernière chose qui reste est d'ajouter l'heure, qui est de 10h00 à 14h00. Donc, je vais juste copier ceci et le coller ici. A savoir, je vais faire la largeur automatique sur celui-ci afin qu'il devienne gérable. Je vais aligner ça ici. Et je vais à nouveau utiliser le style de paragraphe pour cela. Bien que maintenant, bien que maintenant y penser, peut-être que je pourrais juste ajouter un peu de poids à cette police de caractères. Mais si vous voyez ici, l'option a disparu parce que nous avons choisi un textile pré-sélectionné. Donc, afin de récupérer cette option, ce que nous allons faire est que nous allons cliquer ici, ce qui dit détacher le style. Alors que nous détestons ce style, encore une fois, l'ensemble des options de texte sort. Et puis je vais juste le faire semi-gras, d'accord ? Et je pense que cela semble un peu mieux que le poids de la ligne précédente. Ok, donc pour juste ajouter un peu plus de flair à cela, ce que je vais faire, c'est que je vais obtenir une icône d'une horloge qui signifiera le temps. Donc pour ça, je vais aller à l'emblématique Phi. Je vais cliquer sur une icône. Si je de la liste des plugins, je vais chercher des horloges. Et peut-être que je voudrais choisir ceci, ajouter 24 hauteur de pixel. Et puis je vais juste importer l'icône et est ici. Enfin, ce que je peux faire, c'est que je peux sélectionner cette icône. Et puis je vais le faire glisser et le mettre à côté de ma section de chronométrage. Et juste pour le rendre un peu plus uniforme, je vais ajouter une mise en page automatique décalée. Si vous pouvez observer l'horloge a incliné vers le haut. Donc, ce que je vais faire, c'est que je vais aller à cette section et essayer de la ramener et tout centré et aligné. Je vais juste aligner ceci sur, je vais aligner cet élément sur notre appel à l'action. On y va. Il reste donc quelques pas maintenant. Donc, afin de faire une carte réelle, ce que nous allons faire, c'est d'utiliser un autre rectangle. Donc, je choisis un rectangle. Est-ce que je reçois même la presse R ? Et puis je vais juste dessiner un rectangle comme celui-ci. Ce que je vais faire, c'est que je vais remplir ça de blanc parce que c'est ce que je veux faire. Et puis je vais l'envoyer à l'envers. Donc, comme je l'envoie à l'envers couche par couche, vous pouvez voir que tout a commencé à pop et venir à l'avant. Continuez à faire ça jusqu'à ce que tous les éléments apparaissent devant moi. Et voilà. Donc, c'est là que toute la navigation se passe. Et dans le, dans les futures classes, je vais vous apprendre comment nous pouvons mieux organiser cela, comment nous pouvons regrouper les éléments ensemble. Mais pour l'instant ce que je vais faire à cette fin. Donc, je vais sélectionner ceci et je vais sélectionner tous les calques à l'intérieur. Et puis je vais faire le commandement G pour créer un groupe. Maintenant que j'ai créé ce groupe, tous ces éléments vont se déplacer ensemble. Ok, donc comme il s'agit d'une carte, ce que nous allons faire, c'est donner un rayon de 20 pixels pour qu'il apparaisse autour d'elle dans le coin. Et puis je vais aussi donner l'effet d'une ombre portée. Pour l'ombre portée, je vais garder 30 comme le flou et 15 comme le y. exactement comment nous avons fait pour ces cartes. C' est ainsi qu'un garde que nous avons créé. Afin de placer cette carte dans cette conception, ce que je peux faire, c'est que je peux réactiver cette grille en faisant le contrôle G. Et encore une fois, peut-être l'aligner au début de la grille. Je vais désactiver la grille en utilisant le contrôle G à nouveau. Maintenant que nous sommes ici, je vais arrêter cette leçon dans une minute, et je vais vous demander de faire une voiture similaire pour cet événement de l'Université Monash et de vous voir à la prochaine conférence. 20. Créer une section de prochaine avec des images et des cartes: Je suppose que vous avez créé une, une telle carte dont nous avons parlé lors de la dernière conférence. Alors allons maintenant de l'avant. Mais avant d'aller de l'avant, je tiens à signaler que nous n'avons pas implémenté le scroller, qui est présent dans le filaire dans notre conception. Ce scroller donne effectivement à l'utilisateur l'idée qu'il y a plus à venir et donc l'utilisateur peut faire défiler. Je pourrais copier ce défilement ici et l'appeler un jour. Mais je voudrais concevoir cela à partir de zéro afin que nous puissions voir une autre méthode d'utilisation des éléments, en utilisant des formes, ainsi que l'utilisation de la mise en page automatique. Donc, pour créer cela à partir de zéro, je vais choisir l'outil Ellipse. J' aurais pu aussi cliquer sur mon clavier. Et je vais dessiner une ellipse, plutôt, je vais dessiner un cercle. Donc, pour dessiner un cercle, je vais continuer à appuyer sur Maj. Et peut-être que je m'arrêterais n'importe où. Maintenant, ça ressemble à humungous dit, je vais faire ce 16 pixels. Donc, une fois que je fais ce 16 pixels, cela semble un peu minuscule et peut-être la taille que nous recherchons actuellement. Donc, ce que je vais faire maintenant, c'est que je vais dupliquer ceci en utilisant ma clé Option. Et je vais juste faire quatre petits cercles, qui sont assez analogues à ce que nous essayons de concevoir. Maintenant, je veux assombrir ce cercle et je vais peut-être utiliser une couleur primaire pour ça. Je vais donc passer ici et je vais sélectionner cette couleur primaire à partir de la couleur de mon document maintenant. Et comme dernière étape, je vais les sélectionner tous. Et je vais juste ajouter la mise en page automatique. Je vais appuyer sur Maj a et une mise en page automatique est ajoutée. Je vais choisir l'espacement entre les éléments à 16 pixels. Et je vais centrer cela en sélectionnant simplement. Et c'est comme ça qu'on obtient un scroller. Super. Allons donc maintenant et passons au filaire pour voir ce que la prochaine section nous réserve. Donc, ce que nous avons fait, c'est que nous avons couvert les prochains événements universitaires. Nous avons également ajouté le scroller, et maintenant nous avons un onglet Pays à concevoir devant nous. Ça va être, il y aura trois images. Maintenant, ces trois images porteraient sur les pays que le client veut que nous gardions sur la page. Et puis il y aura un autre scroller. Alors nous allons juste sauter là-dedans. Comme d'habitude, je vais juste copier ça. Et j'y vais, et je vais coller ça sur mon dessin. Je vais prendre ça ici. Je vais supprimer cela parce que nous avons conçu ceci. Maintenant, les pays semblent être un en-tête de section. Donc je pense que je vais le placer ici et je vais utiliser ce style de texte de la rubrique 3. Pour que cela, il apparaît vraiment car il apparaît vraiment comme un en-tête de section. Après ça, je veux que tu te concentres ici. Ces trois éléments doivent donc être en tandem. Il doit y avoir une carte pour ça. Et cela va être un élément quand il va y avoir quand image ici. Alors laissez-nous simplement concevoir cela à partir de zéro. Pour cela, je vais activer la grille par le contrôle g, essentiellement. Je veux donc aligner ça sur la gauche. Donc ce que je vais faire, c'est que je vais dessiner un rectangle maintenant. Et je vais dessiner un rectangle d'ici. Ici, je vais dessiner un rectangle couvrant quatre lignes de grille. J' en fais quatre parce qu'on a Dwell Gridlines. Et puis de cette façon, nous serons en mesure de concevoir trois rectangles. Donc maintenant ce rectangle va être là où notre image va être logée. Il y a donc plusieurs façons de mettre des images dans un rectangle, mais pour l'instant, je vais utiliser le plugin appelé comme un splash. Et je vais juste sélectionner et éclabousser. Dans un plug-in non épissé. Cela accélère simplement le flux de travail lorsque vous essayez d'importer des images. Je vais donc chercher le Canada. Je ne peux même pas chercher un satellite, Toronto ou Vancouver, ou quelque chose de ce genre. Mais cette image semble un peu plus cool. Donc ce que je vais faire, c'est que je vais juste cliquer sur cette image. Et puis vous verrez l'image venir ici. Je vais juste fermer ceci et splash plug-in. Maintenant, je dois construire le reste des éléments qui étudient le Canada. Et je vais juste le traîner ici et le sous-texte derrière l'étude du Canada. Afin de me faciliter la vie, ce que je vais faire, c'est de prendre directement ces styles. Je vais copier ces tuiles de l'en-tête ainsi que pour le sous-texte. Et je vais le coller ici. Alors faisons ça. Je vais copier les propriétés. Je vais coller les propriétés ici. D' accord ? Et je vais copier les propriétés de ce sous-texte aussi. Et je vais le coller ici. D' accord ? Donc maintenant, afin de convertir ces trois éléments en une carte a, nous allons utiliser la même procédure que celle que nous avons utilisée pour nos cartes de services, c' est-à-dire que nous allons combiner ces trois éléments en une mise en page automatique. Je vais utiliser Shift a pour cela afin que vous puissiez voir que tout est réarrangé. Maintenant, je vais ajouter un rembourrage de 16 pixels. Et puis je vais ajouter un film. Et le film va être de couleur blanc cassé. Donc, quand j'ajoute un remplissage et que je fais le rembourrage, il commence à ressembler à une carte déjà. Je vais juste faire un rayon de 20 pixels pour qu'il se brille sur les coins. Et un effet, je vais ajouter une ombre portée. Et pour l'ombre portée, le flou sera de 30 pixels et la valeur y sera de 15. Et comme ça, notre carte est prête. Je vais juste désactiver le contrôle GRID_WIDTH G. Et vous pouvez voir que nous avons une carte. Donc je vais arrêter cette leçon tout de suite. Et je vous demanderai de travailler le reste des cartes par vous-même en plus de la barre de défilement en bas. Et puis nous regrouperons dans la prochaine conférence pour concevoir les autres sections. se voit dans la classe suivante. 21. Faites-le pour le reste de la conception: Je suppose que vous avez conçu toutes ces trois cartes par vous-même à partir du titre que j'ai conçu lors de la session précédente. J' avais fait quelques modifications à ces gardes, surtout avec les rembourrages, sorte qu'il semble un peu cohésif. Je vous demanderai d'essayer cela aussi. Maintenant, c'est la section où l'arrière-plan est blanc et nous devons ajouter un élément visuel à cela. Donc, fondamentalement, ce que je vais faire est que je vais juste copier l'élément visuel que j'ai conçu plus tôt. Laissez-moi vous montrer comment. Donc je parle de ces deux cercles. Alors je clique sur eux. Je vais sélectionner les deux cercles et je vais les dupliquer en utilisant la touche d'option. Et je vais juste les traîner ici. Et je dirai juste les imprimer et je garderai un comme ça, l'autre comme ça. Et je pense que oui, je pense que c'est fini. Vous ne croiriez pas à quel point cela faisait juste d'avoir une petite pièce d'accent dans le design. Et ça fait vraiment bien le travail. Je vais appuyer sur le bouton Maj pour agrandir. Et si vous pouvez voir, c'est si harmonieux. Donc, toutes ces pièces d'accent sur le héros mesurent à droite, puis sur la carte suivante, à gauche, sur la carte suivante à droite. Donc, il y a ça. Donc, avant d'entrer dans les sections suivantes du design, ce que je veux faire, c'est que tu essaies tout. Dans les deux prochaines sections. Ce seront les mêmes techniques que celles que nous avons utilisées jusqu'à présent pour concevoir autant. Je vais donc vous emmener à la fiche de référence que j'ai déjà incluse. Et nous allons juste voir ce qui doit être fait. Et je vais vous demander de le faire vous-même. Prenez le temps de vous entraîner sur ce que nous avons appris. Et vous pouvez toujours me contacter s'il y a des difficultés. Si vous voulez des conseils, vous pouvez me laisser un message et je vous aiderai à dépasser votre obstacle. Donc je vais juste cliquer sur cette feuille de référence et je vais juste zoomer. Donc, fondamentalement, ce que nous avons fait est que nous avons terminé comme concevoir ensemble jusqu'à l'onglet Pays. Nous avons également inclus ces deux cercles pour élément visuel. Donc, dans la section suivante, il y aura un témoignage. Pour le témoignage, nous allons suivre ce modèle de qui offrent un grand fond gris. Le, ce sont nos rubriques et ce sont nos sous-titres. Et c'est une carte que nous avons conçue. Donc, si vous allez au filaire, vous verrez que le témoignage y est déjà donné. C' est le même témoignage, la même personne. Donc, tout cela a été fait pour les concepteurs finaux. J' ai ajouté cette image à partir d'une splash, et j'ai choisi ceci comme titre et ceci comme corps. C' est le même scroller, c' est-à-dire qu'ils sont tous finis. C' est donc cette section de témoignages. Dans la section suivante, il y a une section très courte et il y a un appel à l'action appelé comme prêt à poursuivre votre rêve. Ça va être notre première, Poppins 55. Et puis voici le bouton Appliquer maintenant que nous avons conçu ici sur la première page. C' est donc le même bouton Appliquer. Et puis cette section, c'est juste le pied de page. Le photon est donné dans les trames filaires. Ce n'est pas dans le fait le pied de page est donné dans le document d'exigence client. Ce n'est pas dans le filaire, mais de toute façon, c'est juste un simple rectangle peint avec du texte en couleur primaire comme invitation. Et ce sont les éléments. Donc, cela complète efficacement toute la conception de la page Web que nous avons faite. Et je veux vous demander de faire tous ces éléments par vous-même et d'essayer ceci. Reviens me voir si tu fais face à des difficultés. Et je te verrai dans le prochain cours. 22. Merci: Hey amis, merci d'avoir terminé ce cours et de regarder ça jusqu'à présent. J' espère sincèrement que vous avez appris quelque chose de valeur et utilisez sigma pour faire la conception UI et UX. Je suis en train de créer des ajouts à ce cours. Tout d'abord, je cible les commentaires des clients et modifie l'aspect des choses. J' ai montré cette conception exacte à cinq à six personnes qui travaillent dans l'industrie en ce moment. Et j'ai recueilli ces commentaires et je suis en train de créer une conférence vidéo dans le cadre du cours lui-même. Et je prévois de terminer ça d'ici le 28 février 2021, ce qui est cette année. Et je vais aussi augmenter le cours avec un autre projet, celui de la lampe intouchée. Ce projet d'application mobile sera terminé d'ici le 15 mars 20211 chose spéciale que ce projet d'application mobile va avoir est que nous allons explorer la partie composants, les composants réutilisables, qui sont des sigmas uniques, noyau forces. Nous allons donc couvrir cette partie complètement dans ce projet d'application mobile. Et nous allons aussi faire du prototypage. Alors à vous voir dans la prochaine classe est.