Typographie et rythme vertical pour les concepteurs d'interface utilisateur et les développeurs Web

1. Ce que nous aborderons dans ce cours: Voyons ce que nous allons couvrir dans ce cours, et concevoir dans ce cours, et développer dans ce cours. Ce ne sont pas des plans Dribbble, sont des exercices réels de ce cours, alors voyons les. C' est l'un d'eux. Un autre. Cachons les grilles. Il y en a un autre, et un autre, un autre, un autre, un autre, et aussi celui-ci. Quelques annonces de plus, nous allons concevoir comme ceux-ci, et il y a un thème de plus pour cette annonce, vous pouvez voir ici. Mais comment nous allons y parvenir, nous allons apprendre l'utilisation efficace des grilles typographiques en utilisant l'espace blanc. Nous maîtriserons les compétences du temps et de l'espace pour les designers, et en fait c'est appelé espace blanc. Tout cela est pour les concepteurs. Nous allons également apprendre à faire correspondre différentes polices, comment les jumeler, comment sélectionner des polices efficaces, comment transmettre votre message à l'aide de la typographie. Comment utiliser efficacement des grilles pour concevoir différentes mises en page et beaucoup de choses géniales. Même pour les développeurs, j'ai beaucoup de choses intéressantes comme cette unité VW, vous pouvez voir ici comment il se développe et se contracte avec la conception web responsive, et nous allons discuter beaucoup de typographie de design web responsive ou il est appelé topographie essentiellement réactive. Vous pouvez le voir ici en action, grand, moyen. Vous pouvez voir comment la taille de la police se déplace. Pour les petits, vous pouvez voir la taille du titre juste décalée. Ensuite, nous allons discuter de la façon d'utiliser les compétences typographiques personnalisées dans Bootstrap. Aussi dans Bootstrap, comment nous allons utiliser des compétences typographiques personnalisées avec un billet de blog comme celui-ci. C' est aussi appelé rythme vertical. Nous avons également mis en place un rythme vertical dans cet exercice. Donc, pour tout savoir sur ces techniques et normes de typographie en CSS et HTML, vous allez vraiment profiter de ce cours. Il y a des choses plus excitantes dans ce cours comme écrans mobiles et leurs tailles de police et PT, SP, DPI, DIP, toutes les différentes résolutions d'écran désordre et comment nous allons concevoir avec ce désordre. Donc, ce sont quelques appareils IOS, tous les appareils différents ayant le même billet de blog conçu pour eux. C' est l'un de l'exercice. En outre, nous allons chercher des compétences de typographie Google Android et comment l'utiliser efficacement. Aussi, je vais partager avec vous un secret comment connecter votre écran ou comment voir cette conception sur vos écrans mobiles afin que vous puissiez facilement choisir et sélectionner les polices, et le design, et les couleurs, et tout le reste. Donc voir, c'est croire. Si vous pouvez voir votre design directement sur un écran mobile, vous pouvez concevoir beaucoup mieux. Ok, maintenant la question est, qui devrait suivre ce cours ? Je ne recommande pas de concepteurs ou de designers très novices qui viennent de commencer à utiliser Photoshop pour suivre ce cours. C' est un cours de difficulté de niveau moyen, donc tous les designers qui connaissent déjà un peu Photoshop et qui savent comment l'utiliser, ils connaissent les raccourcis, ils devraient suivre ce cours. En outre, tous les développeurs qui connaissent les bases du HTML et du CSS sont les bienvenus. Si vous venez de commencer à apprendre CSS et HTML, je pense que ce cours n'est pas pour vous. Vous ne comprenez peut-être pas peu de choses. Aussi, j'ai besoin de vous pour télécharger et installer la dernière version de Photoshop CC. Tout concepteur qui pense que son design a quelque chose de manquant ou quelque chose d'étrange, alors il devrait vraiment suivre ce cours pour améliorer votre design. Je suis sûr que ce cours va améliorer vos conceptions beaucoup même pour les concepteurs de niveau Dribbble ou Behance. Alors creusons et commençons, et je te verrai dans le cours. 2. Introduction à la typographie: Que nous concevions pour une application mobile ou n'importe quel site web ou web design ou même de la publicité, 95 pour cent de chaque conception est essentiellement Type, qui est du texte. Pour utiliser ce texte à votre avantage, vous devez être un très bon concepteur et vous devriez être très bon en Typographie. Tous les bons designers qu'ils possèdent la compétence. Le texte est une partie majeure de tout type de média, qu'il s'agisse de publicités, de TV, de sites Web, de blogs , de livres, de titres de films, d'applications, tout, il y a toujours beaucoup de texte que vous devez voir ou consommer. Qu' est-ce que la typographie ? Si vous pouvez utiliser ce texte, ou bien écrire correctement, il peut agir comme une épée de samouraï en duel tranchant, ou peut-être plus qu'une épée de samouraï, pour chaque concepteur. Quel est le but de la typographie ? Chaque fois que vous concevez quelque chose ou que vous concevez une annonce ou une application, vous faites deux choses avec votre type. Numéro 1, vous devez l'organiser efficacement pour la lisibilité et la lisibilité. Si votre utilisateur ne peut pas la lire, il n' y a aucun sens à concevoir une telle annonce ou application mobile. La seconde est, vous devez communiquer votre humeur, votre message au lecteur ou au spectateur. Ce sont les deux objectifs de base de l'utilisation de la typographie dans vos conceptions. Maintenant, typographie pour Web et applications mobiles, nous allons couvrir beaucoup de choses dans ce cours. Donc, juste quelques bases que les gens ne scannent que les sites Web et les blogs. Ils ne le lisent pas vraiment à moins que ce soit très important. La deuxième chose est que nous allons répondre à beaucoup de questions concernant la topographie du site Web, comme la police que nous allons utiliser, si j'utilise cette police pour un site Web d'entreprise, un blog ou une application web. Pour les applications mobiles, nous allons couvrir comment utiliser la typographie sur les petits écrans car il est très difficile d'utiliser la typographie sur de petits écrans et il existe différents iOS et Android, différentes spécifications de polices et tailles que Apple et Android ont spécifié. Chaque fois que vous concevez quelque chose, vous devriez vous poser des questions, quelle police se chargera plus rapidement, ou devrais-je utiliser cinq polices ou trois polices ou 10 polices pour mon site Web ? Parfois, nous les designers faisons quelque chose comme ça ; « Proxima Nova est dans la tendance de nos jours. Les gars, je devrais l'utiliser partout. » Donc, quelle que soit l'application ou le site Web de votre design, vous n'avez qu'à y mettre votre police Proxima Nova. C' est très étrange. Chaque site Web a ses propres spécifications, type d'entreprise et tout, donc ce n'est pas sage. Nous allons couvrir beaucoup de choses dans ce cours, ne vous inquiétez pas. Voyons ce que nous avons ensuite. Maintenant, si vous êtes un concepteur ou un développeur novice, vous pourriez penser à combiner différentes formes, quelle police convient pour les sites Web amusants, pour les sites Web d'affaires ou un blog de mode. Aussi beaucoup de développeurs que j'ai vu qu'ils n'utilisent Open Sans parce que c'est le seul que je peux facilement combiner. Ne prenez pas de telles décisions ou ces décisions de conception. Ceux-ci peuvent vraiment vous causer des problèmes si vous continuez à concevoir en utilisant la même police pour comme 10 sites Web. Je vais vous guider à travers de nombreux exemples, même avec Bootstrap pour vous montrer comment nous pouvons utiliser différentes techniques typographiques pour même les développeurs et les concepteurs. Alors commençons le cours et passons à la leçon suivante. 3. À propos de polices et de polices de polices: Chaque concepteur doit être familier avec certains des termes typographiques comme la police, les familles de polices et ce qui est le style de police. Voyons ce qui est fondamentalement une police. La police est essentiellement un ensemble de caractères de style et de taille spécifiques. En fait, dans l'ancien temps, la taille était pertinente pour la police ou le style de type ou le type de visage. De nos jours, une police est disponible en différentes tailles, sorte que vous pouvez utiliser n'importe quelle taille comme 72 points, 12 points, 100 pixels ou ce que vous voulez la taille, parce que c'est numérique, vous n'avez pas besoin de faire un bloc de caractère de police métallique. Autrefois, les polices et les caractères étaient fabriqués avec des blocs métalliques spécifiques. Voyons quelques exemples de polices. Je montre ici deux polices différentes, une est la famille Amsi Pro et la seconde est la police Crique Grotesk. Ce sont des tailles différentes, nous pouvons utiliser n'importe quelle taille, il n'y a pas de limite aux tailles. Nous pouvons utiliser d'un point à illimité, la taille n'est pas pertinente ces jours-ci avec des polices. Maintenant, qu'est-ce qu'un style de police ? Ou nous pouvons l'appeler font-face aussi. Pour une utilisation moderne, il suffit de garder à l'esprit que c'est un style de police. Style spécifique d'une police, vous l'avez deviné correctement. Maintenant, les exemples sont gras, italique , régulier, moyen écran, condensé , noir, semi-gras, noir gras et extrabold. Il y a beaucoup de différents styles de polices ces ces jours-ci. Voici quelques exemples de styles de police, j'utilise Amsi Pro Ultra Style, qui est ultra gras, en ce moment. Il y a un autre style ici, qui est Amsi Pro Light 48 points, et nous avons Proxima Nova Condensed, les caractères sont condensés ou pressés ensemble, puis nous avons Proxima Nova Extrabold. Ce sont des styles différents, comme celui-ci est un style condensé, celui-ci est Extrabold, celui-ci est pro, ultra pro, et celui-ci est un style léger. Maintenant, que sont les familles de polices ? Donc, la famille de polices signifie qu'il devrait y avoir une grande famille de la même police, donc ce sont essentiellement des styles de police différents qui sont conçus sur une même géométrie, forme ou style. Par exemple, Helvetica est une très grande famille, il s'est condensé aux styles et il a beaucoup de styles audacieux que beaucoup de styles arrondis. Helvetica a plus de 30 ou 44 polices différentes dans une seule famille, c'est une très grande famille. Vous pouvez également trouver différentes polices Google de grande famille à partir de ce site, je vais vous montrer en ce moment. Ce site est mieux polices Google, et vous pouvez voir ici nous avons cette famille Raleway, et vous pouvez voir que nous avons 1, 2, 3, 4, 5, 6, 10, 15, 16, 17, 18, différents styles d'une seule police. C' est essentiellement une très grande famille, beaucoup de styles que vous pouvez voir ici, cette Source Sans Pro est aussi une très grande famille, Roboto, aussi une très grande famille. Aussi si vous pouvez voir que nous avons Roboto condensé à, si nous avons ici vous pouvez voir celui-ci Roboto Mono, cela appartient aussi à cette famille Roboto. Il a un style différent, mais ils sont en fait la même famille, ce sont des cousins. Ensuite, nous avons Source Code Pro, qui est également lié à la Source Sans Pro, et nous avons ce Roboto Condensed, il est également lié à la famille Roboto. Ce sont différentes polices Google qui ont de très grandes familles. Regardez et voyez ici eXO, eXO 2 et Kanit, ils ont aussi de très grandes familles, beaucoup de styles différents. L' avantage d'une grande famille est que vous pouvez utiliser une seule famille et vous pouvez avoir beaucoup de styles différents à choisir lorsque vous concevez. Il s'agit de polices, taille de police et de familles de polices. Passons à la leçon suivante. 4. Termes Anatomiques typographiques typographiques: Maintenant, dans cette leçon, nous allons apprendre certains des termes typographiques et un peu sur l'anatomie type. Ils sont donc très cruciaux parce que nous pouvons facilement jumeler la force en apprenant ces termes typographiques. Alors commençons. Tout d'abord, nous allons en apprendre davantage sur la ligne de base, la ligne moyenne et la ligne de cap-line. ligne Cap signifie la ligne majuscule, donc c'est la ligne, ligne imaginaire assis en haut de la lettre majuscule. Ensuite, nous avons la ligne de base, ce qui est très important. ligne de base est la ligne sur laquelle toutes nos lettres sont assis dessus. La ligne moyenne est fondamentalement en haut de nos petites lettres ou nous pouvons dire x-height. C' est essentiellement la hauteur de nos petites lettres. Donc, c'est fondamentalement la ligne moyenne. Le plus important est cette base de référence. Assurez-vous donc de savoir ce qu'est cette ligne de base. Encore une chose que certaines de ces lettres vont au-dessus de cette ligne majuscule et d'autres comme celles-ci y, p et autres, elles vont au-delà de cette ligne de base. Alors gardez juste à l'esprit. Apprenons-nous sur la hauteur x et la hauteur majuscule de n'importe quelle police. Donc, fondamentalement, la hauteur de la petite lettre x est fondamentalement la hauteur x de n'importe quelle police ou de n'importe quel type. La hauteur de la lettre majuscule est fondamentalement la hauteur du capital. Maintenant, la hauteur x est très importante et le rapport entre la hauteur x et lettre majuscule est également un facteur très important dans la lisibilité de la police. Donc maintenant, si nous avons une bonne hauteur x, il peut être plus facile de lire sur de petits appareils ou de petits livrets ou quelque chose comme ça. Donc, si vous concevez pour des applications mobiles, vous devez considérer une police avec une hauteur xplus grande. Aussi les polices efficaces comme Helvetica et peu d'autres, ils ont x-hauteur de 67 pour cent à 69 pour cent de la hauteur du capital. Donc, ils sont presque 65-70 pour cent de la hauteur d'une lettre majuscule. C' est donc aussi un autre facteur, c'est un facteur entre différentes classifications de polices. Les anciens types de polices, les anciennes familles de polices, ou les anciennes polices comme Garamond, ont une hauteur x faible. Maintenant, apprenons sur les ascenseurs et les descendants. ascendeurs sont fondamentalement la partie lettre qui est étendue au-dessus la ligne moyenne ou vous pouvez voir ici le haut du d. Ensuite, nous avons descender, qui est fondamentalement étendu vers le bas à partir de la ligne de base. Donc, tout ce qui tombe de la ligne de base est fondamentalement descendant. Counter est un autre facteur très important dans la reconnaissance ou la lisibilité de n'importe quelle police ou type. Il existe donc deux types de compteur, ouvert et fermé. Le compteur ouvert est fondamentalement la partie ouverte de la lettre drôle comme celle-ci. Il n'est pas complètement fermé de tous les côtés. L' espace entre cette lettre e est essentiellement le compteur ouvert et ensuite nous avons le compteur fermé. Compteur fermé est essentiellement l'espace enfermé dans une lettre comme celle-ci o et la partie supérieure de cet e. Pourquoi nous apprenons à ce sujet ? Parce qu'ils peuvent aider à la lisibilité si nous avons de très grands compteurs, cette police ou ce type ou ce style est très lisible. Maintenant, c'est aussi un autre facteur à écrire à ce x-hauteurs. Donc, ces deux jouent un très grand rôle dans la lisibilité ou les polices compteur et x-height. Apprenons quelques autres termes typographiques, afin que nous puissions facilement identifier n'importe quel type. Donc, nous y allons, nous avons ce bec, qui est un peu pointu fin de toute lettre majuscule ou lettre minuscule. Ils se trouvent normalement au début et à la fin de la lettre. Ensuite, nous avons cette attaque. Vous pouvez voir la partie supérieure de cette lettre p, il y a deux traits différents. L' un est très mince au début et au milieu il est très épais. Donc, fondamentalement, cela est appelé la différence de course semblent prendre et il est très important dans l'identification des différentes classes de polices. Ensuite, nous avons la boucle inférieure, qui est fondamentalement la partie inférieure de g. Vous pouvez voir ici. Également différentes classes de polices. Ils ont différent ce style de boucle. Alors nous avons l'oreille. Oreille est fondamentalement ce bouton de style oreille pointue sortir de cette lettre g. C' est également un facteur très important. Il est différent dans différentes polices. Ensuite, nous avons cet apex. Apex est fondamentalement la partie supérieure de toute lettre où nous avons ce style stylo reste de quelque chose comme voisin intestinal ici ou quelque chose comme ça. Ensuite, nous avons la queue. C' est essentiellement la partie inférieure de la lettre y. Ensuite, nous avons ce terminal qui est aussi comme la queue, mais il ne s'étend pas en bas. Il est essentiellement étendu sur le côté gauche ou droit d'une lettre comme celle-ci a. Ensuite, nous avons serif. Serif est fondamentalement n'importe quelle ligne ou quoi que ce soit qui est fondamentalement séparé les types de polices, comme nous avons ces polices serif, ils ont ces dalles à la fin de leurs lettres comme ceci. Vous pouvez voir ici y. donc aussi au bas de la lettre y. Donc, c'est essentiellement serif, et tout cela est à propos de différents termes typographiques. J' espère que vous avez apprécié votre conférence. Passons à la leçon suivante. 5. Ancien et transition de Humanist: Dans cette leçon, nous allons voir différentes classifications des types afin que nous puissions les utiliser efficacement. Avant d'aller voir différentes classes de types, nous allons en apprendre davantage sur le stress diagonale. Vous pouvez voir en bas d'ici, le O, j'ai montré une contrainte diagonale. Vous pouvez voir que cet O a des taux variables de coups, donc ici sur les côtés, il est un peu épais, et où j'ai mis la contrainte diagonale, c'est essentiellement le coup le plus mince. Là où le trait est le plus mince, il suffit de tracer la ligne de la plus mince à la plus mince et il montre le stress des diagonales. C' est l'un des facteurs dans l'identification des différentes polices. Maintenant, le premier est humaniste. Humaniste, comme son nom l'indique, c'est fondamentalement comment les humains écrivent avec la plume dans les temps anciens. Vous pouvez voir les traits et le style d'écriture ressemble à l'écriture humaine avec un stylo. Maintenant, il a deux facteurs de base pour l'identifier, un est cette barre transversale très inclinée de e. Vous pouvez voir qu'il est comme un angle de 30 ou 40 degrés, et vous pouvez voir ici dans la lettre Ours comment il est écrit. Deuxièmement, vous pouvez voir les serifs en bas de ce n que j'ai souligné. Vous pouvez voir que les serifs sont peu courbés comme un pied humain, donc c'est un autre facteur. Il s'agit donc de trois facteurs. Il a une très bonne contrainte diagonale, très inclinée, puis nous avons une barre transversale inclinée et puis nous avons des sérifs de style de pied. Maintenant, je vous ai montré vieux style ou garalde. Ce sont deux classes différentes, ancien style et transition. Le style ancien était un peu vieux et la transition a été construite sur, ou vous pouvez dire, version improvisée de ce vieux style. Maintenant, l'ancien style a très peu de facteurs pour l'identifier, un est cette contrainte diagonale, il a une bonne contrainte diagonale, moins que les humanistes, mais il a une bonne contrainte diagonale. Ensuite, le sommet de ceux-ci, vous pouvez voir ces ascendeurs et descendants, ils ont cette extrémité serif de pente, et puis nous avons ce W, c'est la propriété très unique de ce style ancien ou garalde style. Vous pouvez voir ici les W ont croisé la version, donc ils se chevauchent, c'est comme deux lettres V, V se chevauchent les unes avec les autres. Vous pouvez voir que j'ai mis en évidence cette e. à l'intérieur de l'e, il est fondamentalement compteur, donc ils ont très moins d'espace de comptoir. Vous pouvez voir ici, nous avons à l'intérieur de la lettre e, puis ils ont au sommet de la T, vous pouvez voir il becs sont quelque peu inclinés, et puis si nous regardons les serifs, vous pouvez voir à la fin de la lettre h ils ne sont pas totalement droites, elles sont un peu sinueuses. Tout est sur le style ancien, principaux facteurs sont ce W et le bec, et ces sommets inclinés de lettre d et un peu de cette contrainte diagonale dans tout ce que vous pouvez voir ici. Aussi, vous pouvez voir que la lettre R a un coup de spéléologie à la fin, et si vous regardez la transition, il y a beaucoup de différences avec cela. Vous pouvez voir en haut du d, le serif est un peu très pointu, puis le stress diagonal est presque droit. Vous pouvez voir la contrainte diagonale est presque droite, et aussi vous pouvez voir à l'intérieur de cette lettre e, le compteur est un peu plus large ou un peu plus grand que l'ancien style, alors nous avons ce W. W ne se chevauche pas, c'est un peu différent, et puis aussi les becs de cette lettre T, ils pointent également vers le bas un peu structurel. Vous pouvez dire un peu structurel. Aussi, il y a une autre différence que j'ai oubliée. Si vous voyez la différence de trait dans l'ancien style, différence de trait est que si vous voyez cette lettre h, vous pouvez voir ici à la fin de la h, nous avons un peu moins de contraste de trait. L' épaisseur et le mince sont très proches les uns des autres, mais dans la transition, vous pouvez voir les coups sont très nombreux, mince est très mince et l'épaisseur est un peu plus épaisse. C' est aussi une différence entre le style ancien et le style de transition. Voici quelques exemples de style ancien. C' est la police adobe devanagari, et vous pouvez voir ici comment cette police a été disposée, c'est une version italique de la police. Pourtant, vous pouvez voir que T est un peu incliné, et dans cette police, vous pouvez voir qu'il s'agit peut-être d'une version différente, c'est pourquoi dans différentes polices, certaines fonctionnalités ne peuvent pas être trouvées. Comme ici, nous avons W. W est juste comme la police de transition, donc parfois ces concepteurs de typhus, ils mélangent différentes propriétés de deux polices. Ensuite, nous avons ce Minion, Pro, c'est aussi une police de style ancien. Vous pouvez voir ici encore le W est différent, mais d'autres propriétés comme cette fin de cette r et les salopes top et top serifs, ils sont presque comme l'ancien style. 6. Sans Serif et Script: Parlons maintenant des polices modernes. Ceux-ci sont appelés essentiellement Bodoni, et leur principale caractéristique est la largeur de course. La différence de course est trop grande, très mince à très épaisse. Ensuite, l'autre est que ces sérifs sont comme des dalles, bandes très minces, quoi que je l'appelle. C' est la propriété principale de ce Bodoni. Aussi, le stress, vous pouvez voir dans le o, il est très droit, 90 degrés. Maintenant, la dalle serif ou il est aussi appelé dalle égyptienne. Vous pouvez deviner qu'ils ont des sérifs comme des dalles épaisses, et c'est pourquoi ils sont appelés slab serifs. Voici la police la plus courante que nous utilisons, qui est sans empattement. sans-serif n'ont pas de sérifs, ou pas de dalles, ou pas de fin à la fin. Ils sont très propres et très modernes. C' est tout au sujet de ce sans-empattement. Ils ont beaucoup d'autres classes de sans-serifs. Différents concepteurs de polices de caractères, ils mélangent les qualités de touche ancienne ou parfois humaniste dans la police sans empattement. Maintenant, c'est le script ou l'écriture manuscrite. Ce sont différents types de polices de script ou d'écriture manuscrite, mais je vais les combiner tous en un seul. Vous avez peut-être vu ces polices de script ou d'écriture manuscrite. Ils ne sont pas beaucoup utilisés sur le web parce que je ne pense pas que si vous écrivez un paragraphe en script ou en police manuscrite, et il peut facilement être lu. Maintenant, je vous ai dit dans la diapositive précédente que les sans-serif ont quelques autres modifications, comme celle-ci est humaniste sans empattement. Maintenant, vous auriez deviné qu'il partage les caractéristiques de ce type humaniste dont nous avons parlé au début de cette conférence. Humaniste sans empattement, vous pouvez voir, le top est Gill Sans. Ils ont cette fin à l'a, puis ils ont un peu de différence de course. Aussi, si vous regardez cette Open Sans et les inclinaisons dans le compteur dans le a ne sont pas très géométriques. Ils sont un peu obliques. Si vous regardez le g, c'est aussi un peu comme la police humaniste. Vous pouvez voir, je suis Open Sans-Serif et je suis aussi Humaniste Sans-Serif, et j'ai fière allure. Si vous regardez le g, c'est le facteur commun dans tous les humanistes sans empattement. Ils ressemblent un peu à l'humanisme ou à l'ancien style. En outre, cet autre exemple est cette police Calibri, Open Sans, Gill Sans. Ils sont du genre humaniste sans empattement. C' est pourquoi vous voyez Open Sans est très populaire de nos jours. Une autre variante du sans-empattement est Geometric Sans-Serifs, et ils sont construits sur une géométrie très spécifique, comme des triangles, des rectangles ou peut-être des cercles très spécifiques . Ils sont basés sur la géométrie. Vous pouvez voir ici nous avons la première police, un premier exemple est Futura. Vous pouvez voir les os et les es, ils sont presque un cercle parfait. Ici, vous pouvez voir. Maintenant, si vous regardez cette police Proxima Nova, elle est très populaire. Il est aussi géométrique. Si vous regardez ses o et es, ils sont presque le cercle parfait. Museo Sans est également géométrique. Là où se trouve le mot géométrique, vous pouvez voir comment ils sont construits. La lettre c est également construite sur un cercle parfait. Ensuite, il y a une autre police à la fin, Texta. C' est aussi une géométrique sans empattement. Ils peuvent ressembler à Humanistes ou avoir une nature sinueuse, mais ils doivent être construits sur des formes géométriques spécifiques. Ce n'est peut-être pas seulement des cercles ou des carrés, il peut être une forme déformée de carré ou quelque chose comme ça. Cela complète notre géométrique sans empattement et toutes les différentes classes. Je ne vais pas entrer dans trop de détails sur l'affichage de 16 ou 17 classes de polices différentes. Je pense que c'est assez bon pour que tu démarres. Je partagerai certaines des ressources si vous voulez aller de l'avant, comme un grotesque et d'autres sans-empattement. Dans la leçon suivante, je vais vous faire un exercice pour voir combien vous pouvez reconnaître une police. Je vous donne peut-être des polices géométriques, humanistes, et d'autres. Ce seront des échantillons, et voyons à quel point vous faites dans la reconnaissance des différentes classes de type. Passons à la leçon suivante. 7. À propos de la longueur de ligne: L' un des facteurs les plus importants en matière de lisibilité est la longueur de ligne, cela affecte vraiment votre lisibilité. Maintenant, la question se pose, quelle longueur une ligne devrait avoir dans un paragraphe pour une lecture optimale ? Certains disent que c'est 65, 70 caractères par ligne et 40 caractères par ligne, quelque chose comme ça. J' ai vu beaucoup d'articles et de livres différents, et la gamme est de 45 à près de 85 caractères par ligne. Ils sont optimaux. Maintenant, pourquoi cette longueur de ligne optimale ? Le problème est que si vous avez des lignes trop longues, alors l'utilisateur ou le lecteur doit déplacer sa tête de gauche à droite pour lire cette ligne. Maintenant, si vous avez une ligne très courte, alors ils doivent sauter de haut en bas, ligne à ligne encore et encore. Cela va produire de la fatigue dans votre utilisateur, même leurs yeux ou la tête ou peut-être certains de leurs muscles. D' après mon expérience, si nous traduisons des caractères en mots, alors presque 10-17 mots par ligne est optimale. Ils peuvent être 19 ou 20 selon la longueur du mot, mais c'est presque la moyenne. Maintenant, un autre facteur est la taille de la police. Si vous avez une bonne longueur de ligne et que vous passez la police à la police plus petite, alors vous avez beaucoup de mots dans le même espace et vous devez changer la longueur de ligne à nouveau. Maintenant, si vous essayez de passer à une petite police, alors la longueur de la ligne est très grande et vous devez lire les longues lignes. C' est un autre facteur, alors choisissez judicieusement votre taille de police, sorte que la longueur de ligne est optimale. Maintenant, qu'en est-il des mobiles et des sites web ? Les mobiles ont de petits écrans, donc je pense que généralement le texte devrait être un peu plus grand, le corps du texte devrait être plus grand. Maintenant, normalement sur les mobiles, le corps du texte ou les paragraphes représentent essentiellement 120 pour cent de la taille des paragraphes sur nos sites Web de bureau. Si vous développez un site Web et que vous affichez différentes vues de ce site Web sur mobile, sur ordinateur de bureau et tablette, alors vous devriez prendre soin de ceux-ci. Aussi sur les téléphones mobiles, les lignes seront moins longues parce que nous avons moins d'espace. Certains des principes de longueur de ligne ne s'appliquent pas là. En outre, vous devez également déplacer la taille du titre et la hauteur de la ligne. Tous ces facteurs que vous devez couvrir pour les mobiles. Sur le bureau, si vous êtes un développeur, vous devez utiliser des requêtes multimédias pour ajuster la taille pour une longueur de ligne optimale et une lisibilité optimale. Il s'agit de la longueur de ligne optimale et façon dont nous allons l'utiliser sur les mobiles et la conception de bureau, si vous concevez pour mobile ou ordinateur de bureau. Dans les deux dernières sections de notre cours, nous allons approfondir toutes ces choses sur les tailles mobiles et de bureau. Passons à la leçon suivante. 8. Alignements de texte: Discutons de l'alignement du texte. Maintenant, beaucoup de designers disent, « Ok, je sais que l'alignement du texte, qu'est-ce que l'alignement du texte, je sais, » mais il y a des utilisations spécifiques pour chacun d'eux. Si vous pouvez les utiliser correctement, vous pouvez vraiment améliorer votre design et votre lisibilité. Voyons différents exemples et différentes utilisations de l'alignement de texte. Maintenant, le premier est l'alignement le plus courant à gauche et l'alignement à gauche n' est pas utilisé pour les langues de droite à gauche. Nous parlons de l'anglais et d'autres langues qui sont de gauche, de droite. Maintenant, l'alignement à gauche est essentiellement utilisé pour les articles, paragraphes, les livres, les en-têtes, et beaucoup d'autres choses. Donc, la plupart du temps, c'est l'alignement utilisé le plus courant. Assurez-vous que ce n'est pas pour les langues de droite à gauche. droite à gauche sont fondamentalement opposés à cela. Pour l'alignement à gauche, ce sera l'alignement à droite. Suivant est l'alignement à droite et le texte d'alignement à droite est utilisé pour normalement petite quantité de texte. Si vous l'utilisez sur un paragraphe, alors vous gâchez vraiment votre utilisateur et votre lecteur. Assurez-vous donc d'utiliser l'alignement droit pour de très petites lignes ou très peu de mots. Maintenant, ici, nous avons le facteur est fondamentalement droit aux langues de gauche. Pour les langues de droite à gauche, alignement à droite est la meilleure option. Maintenant, venir au centre aligner. alignement central ne doit être utilisé que pour les lignes importantes et ne doit pas être appliqué aux paragraphes. J' ai vu certains designers utilisant le centre aligner sur quatre ou cinq lignes. Je pense que ce n'est pas très sage. Alors peut-être que les titres et les slogans de certains produits peuvent être alignés au centre ou peut-être une ligne de plus, mais pas au-dessus de trois, je suppose. Donc, ici, nous avons le facteur de lisibilité. Nos yeux ont sauté d'une à la ligne suivante, et ils prédisent normalement qu'ils devraient être sautés au même endroit. Maintenant, dans l'alignement central, ils sautent d'un endroit à l'autre, donc ce n'est pas une ligne droite. L' alignement justifié est fondamentalement lorsque vos côtés gauche et droit sont presque égaux. n'y a pas d'espace sur le côté droit. Donc aligner justifié est normalement utilisé dans les livres, les magazines, et les journaux. Je ne les recommande pas d'utiliser pour des sites Web ou des blogs. Il est difficile de les contrôler. Vous devrez peut-être modifier votre texte ou votre corps de texte, ou modifier votre texte de copie pour justifier vraiment l'alignement de vos paragraphes. Permettez-moi de vous montrer quelques exemples d'alignement à gauche et à droite. Vous pouvez voir sur le côté droit, je vous ai montré l'alignement droit, l'utilisation correcte de l'alignement droit. Je ne montre que trois lignes, et vous pourriez voir ça s'aligner sur beaucoup de cartes de visite. Maintenant, vous vous souvenez pourquoi l'e-mail, numéro de téléphone est presque aligné à droite sur beaucoup de cartes de visite, car il est très moins de texte et vous pouvez voir l'alignement correct ne nuit pas à la lisibilité. Maintenant, sur la gauche est un paragraphe, donc ils devraient être alignés sur la gauche. C' est ainsi que nous utilisons l'alignement gauche et droit. C' est la bonne utilisation des textes alignés à gauche et à droite. Ici, nous avons l'exemple de justifier aligner et aligner le centre. Vous pouvez voir sur le côté gauche, justifier aligner, nous avons différents espaces ou rivières qui coulent à l'intérieur. Certains mots sont plus espacés au suivant. Certains ont moins d'espace entre eux. Donc, on les appelle fondamentalement rivières. C' est alors que vous essayez de justifier l'alignement de votre texte. Assurez-vous donc qu'il n'y a pas de rivières trop larges ou de rivières très proéminentes à l'intérieur de votre texte. Maintenant, venir au centre aligner. Maintenant, aligner au centre vous l'utilisez sur très peu de lignes de texte ou peut-être de poésie, comme j'ai utilisé ici. Je ne sais pas comment j'ai écrit ceci, mais c'est comme ça que nous devrions utiliser l'alignement central, très peu de lignes, et peut-être de la poésie ou quelque chose comme ça. Peut-être une citation de deux lignes. Donc pas plus de deux ou trois lignes, je suppose. 9. Hauteur de ligne (dirigeants): Dans cette leçon, je vais parler de la hauteur de la ligne et aussi il a été appelé leader. Dans le passé, ils avaient l'habitude de placer des blocs de plomb en fusion entre deux lignes différentes pour les séparer. C' était ce qu'on appelait leader. Qu' est-ce qui mène fondamentalement ? Distance entre une ligne de base et la ligne de base suivante. Comme nous avons deux ou trois lignes de texte, la distance entre une ligne de base et la ligne de base suivante est fondamentalement la hauteur de la ligne. Maintenant, combien de hauteur de ligne devrions-nous avoir ? Elle varie de 120 % à 60 % pour le corps du texte. Le corps du texte est essentiellement les paragraphes et le texte où nous avons beaucoup de textes. Il faut qu'on le lise. Maintenant, pour les en-têtes, vous ne devriez pas le définir plus de 120 pour cent dans les en-têtes. Très gros texte, normalement, la hauteur de la ligne est presque de 100 pour cent à, ou parfois peut-être de 90 pour cent à 120 pour cent. Pour le corps du texte, il varie de 120 % à 160 %, et pour les en-têtes, il est un peu inférieur à notre hauteur de ligne normale. Voici quelques exemples de la hauteur de la ligne du corps du texte. Le corps du texte est essentiellement un paragraphe, alors ne vous inquiétez pas si vous ne savez pas ce qu'est le corps du texte. Il y a beaucoup de textes qui sont destinés à être lus. Sur le côté gauche, nous avons une hauteur de ligne 133 pour cent, ou nous l'appelons aussi 1,33 pour cent. Trente-huit pixels est la taille de nos textes. Fondamentalement, ce que nous faisons ici est, nous multiplions 38 pixels par 1,33, et ce que nous obtenons est, fondamentalement, notre hauteur de ligne. Il peut s'agir de 42 pixels, 46 pixels, ou quoi que ce soit. Sur le côté droit, nous avons une hauteur de ligne un peu plus grande qui est de 1,45 pour cent. Vous pouvez voir comment cela affecte la lisibilité. Aussi, si vous avez une hauteur de ligne très serrée, vous pouvez voir le bas des queues supérieures, et les queues de différents caractères, et le bas de différents caractères va toucher le haut de la ligne suivante. Il s'agit d'un problème de lisibilité très important. Essayez d'ajuster la hauteur de la ligne là où vous pensez qu'elle est plus facile à lire. Maintenant, voici un exemple pour le texte d'en-tête. Vous pouvez voir sur la gauche, je l'ai réglé sur 110 pour cent, et la taille de notre texte est 60 titre de pixel. Sur la gauche, vous pouvez voir qu'il est assez bon. Mais si vous voyez sur le côté droit, j'ai augmenté la taille du texte plus. C' est l'en-tête de 72 pixels, et je l'ai réglé à 1,05 pour cent. Comment on va le calculer ? Soixante-douze multiplient par 1,05, et il est près de 75-76 pixels. En outre, vous pouvez le définir sur 100 pixels. Si vous avez 72 pixels, vous pouvez également définir la hauteur de la ligne, 72 pixels pour les en-têtes plus grands. Permettez-moi de vous montrer comment nous pouvons définir la hauteur de ligne dans Photoshop pour les en-têtes et les textes de paragraphe. Comment on peut le contrôler. J' ai ce texte ici. C' est un titre, et vous pouvez voir, je vais sélectionner ce texte, et je vais obtenir ce panneau de caractères. J' ai déjà ce panneau de caractères A par ici. Vous pouvez voir ici nous avons 72 points qui est notre taille de texte, et c'est le contrôle où nous devons contrôler la hauteur de la ligne. Je peux également le définir à 72 pixels. Vous pouvez voir qu'il a l'air bien. Même je peux aller en dessous de cela, 70 points est également belle. Mais si je vais à 65 ans, cela semble un peu problématique, ou peut-être trop proche de. Vous pouvez voir ici, le i du temps touche le g. Je suppose que 70 pixel comme le dernier que nous pouvons aller et 72 pixel est, je pense, optimal, ou peut-être 75 comme nous l'avions avant. Ceci est toujours défini la hauteur de la ligne. Voyons un autre exemple que je vous ai montré avec le paragraphe. Ici, nous avons eu le paragraphe. Je vais sélectionner ce paragraphe et, vous pouvez voir en ce moment, il est 38 points de taille de texte, taille de police, et la hauteur de ligne est de 55 points. Si j'essaie de l'augmenter à 60, vous pouvez voir, il est toujours bon mais si nous allons au-delà de 60, comme 72, vous pouvez voir que notre est ne peut pas sauter si loin, dessous il est un peu trop de distance. Si vous continuez à augmenter ces 90 ou 100, vous pouvez voir qu'il ne ressemble pas à un paragraphe mais à des lignes séparées. C' est un très gros problème de lisibilité et de lisibilité, vous devriez les garder à la distance optimale. Je vais le mettre à 50. Voyons voir à quoi ça ressemble. C' est encore un peu proche pour moi, je suppose que 55, c'était mieux. Maintenant, c'est là. Tout est sur la façon dont nous pouvons définir la hauteur de ligne dans Photoshop et quelle hauteur de ligne devrions-nous utiliser pour le corps du texte et quelle hauteur de ligne devrait être utilisée pour le titre suivant. Même en HTML, vous pouvez le définir sur la propriété line-height avec la propriété line-height. Un est 100 pour cent, 1,2 pour cent, et même comme ça. Tout est question de hauteur de ligne, passons à la leçon suivante. 10. Espacement de lettres (noyau: Vous avez peut-être entendu différents concepteurs dire, d'accord, ceci, des défauts ou ce type de crénage est un peu désactivé, ou ces deux mots doivent être crénés. Donc, fondamentalement, le crénage est l'espace entre deux lettres individuelles de n'importe quel type, ou n'importe quelle police, ou n'importe quel mot. Donc, vous pouvez voir ici l'espace entre o et t, c'est essentiellement le crénage. Si nous regardons ce mot, j'ai augmenté le crénage, donc fondamentalement, ils ont un peu plus d'espace entre les deux lettres, voire toutes les lettres. Fondamentalement, ce que cela signifie est que parfois certaines des lettres, si vous pouvez voir ici dans le mot topographie, certaines lettres comme g et r sont un peu plus proches les unes des autres que quelques autres lettres comme p et o et d'autres lettres. Donc, c'est essentiellement appelé Kerning. Voyons comment ce crénage va affecter notre typographie. Donc, ce que cela signifie est si nous essayons d'avoir un bon espace parmi nos différentes lettres, alors il est plus aéré, ouvert, moderne, élégant, lié à la technologie. Si nous avons moins d'espacement des lettres, alors son humeur est vers l'intimité, et vous avez peut-être vu utiliser les lettres très proches les unes aux autres dans différents logos. Fondamentalement, moins d'espacement des lettres est utilisé principalement dans les logos car cela crée vraiment un problème de lisibilité et de lisibilité. Permettez-moi de vous montrer quelques exemples d'espacement des lettres ou de crénage. Je vais vous montrer le mauvais exemple et le fixe. Ici, nous avons écrit le FedEx sous deux formes différentes. Dans la gauche, vous pouvez voir les e et x sont très proches l'un de l'autre. Je n'ai pas modifié l'espacement des lettres. Il s'agit de la police par défaut. En bas, vous pouvez voir que j'ai ajusté l'espace entre e et x, donc le crénage est fondamentalement l'espace entre deux lettres séparées. J' ai fixé le crénage entre E et X. Dans le côté droit, vous pouvez voir les E, D et E, ils semblent avoir plus d'espace. Donc, en bas, j'ai réparé ça. J' ai réduit le crénage entre ces trois lettres et il regarde plus encore à nos yeux. C' est ainsi que nous utilisons le crénage. La plupart du temps, il est utilisé dans les logos. Vous avez vu des logos FedEx, c'est essentiellement un crénage très serré, la plupart des lettres se touchant. C' est ainsi qu'ils ont créé le logo FedEx. Mais c'est ainsi que nous réparons le crénage et quels sont les mauvais et bons exemples de crénage. Laissez-moi vous montrer comment vous allez accéder à ce crénage dans Photoshop. Dans Photoshop, si vous ne voyez pas ce panneau de caractères A ici, vous pouvez aller à la fenêtre et cliquer sur ce personnage ici, et cela apparaîtra ici. Vous pouvez voir ici, nous avons ce V/A et il y a une barre oblique entre deux lettres. C' est essentiellement le crénage. On peut avoir deux options comme l'optique. Vous pouvez voir que le crénage d'espacement des lettres a été décalé. Donc optique est fondamentalement liée à vos yeux, ce que vos yeux voient, et métrique est fondamentalement crénage machine, donc c'est basé sur un logiciel. Ensuite, nous avons zéro et d'autres options ne sont pas disponibles pour cette faute. Ce sont deux options en ce moment. Si vous souhaitez modifier l'espacement entre des lettres spécifiques, sélectionnez cette lettre et utilisez ce contrôle à la place, comme celui-ci. Maintenant, si je l'augmente à 200 pour cent, vous pouvez voir que l'espacement entre a et c a été augmenté. Voici comment j'utilise ce panneau Caractère pour augmenter le crénage. Sélectionnez une lettre, et vous pouvez utiliser ce contrôle de suivi, mais je l'utilise pour des lettres simples comme ça. Tout est sur la façon d'utiliser le crénage dans Photoshop. 11. Exercice de conception pour appliquer ce que nous avons appris jusqu'à présent: Bonjour tout le monde. Dans cette leçon, nous allons concevoir cette page de blog impressionnante. Maintenant, nous avons appris la hauteur de la ligne, espacement des lettres, le crénage, le suivi, tout. Alors appliquons cela dans cette conception et commençons. Je vais utiliser la police Google pour cet exercice, qui est Source Sans Pro, c'est une seule police Google et sur le côté droit, j'utilise l'image d'un site libre peut être Pixabay ou quelque chose comme ça. Vous pouvez utiliser n'importe quelle image ici. Je vais partager les liens dans la section des ressources alors assurez-vous d'utiliser les liens pour obtenir cette police, Source Sans Pro. Commençons et je vais ouvrir un nouveau fichier et la largeur devrait être 1400 par 1800 pixels, résolution 72 pixels transparente. Ne coloriez pas ce document. Cliquez sur « OK » et ici nous avons notre toile vide. Je vais appuyer sur « Alt+Supprimer » pour le remplir. Nous allons utiliser la couleur blanche comme arrière-plan. Sélectionnez « Blanc » ici, puis à nouveau, appuyez sur « Alt+Supprimer » et ici nous avons notre option Supprimer sur votre Mac. Maintenant, nous avons notre toile vide. Maintenant, nous pouvons commencer à concevoir, mais tout d'abord, nous allons avoir une grille ici pour exposer nos choses. A propos de la grille, je vais l'expliquer dans la section suivante donc ne vous inquiétez pas pour le moment. Fais ce que je fais en ce moment. Accédez à Afficher et Nouvelle mise en page du guide et, dans les colonnes, utilisez le paramètre prédéfini personnalisé. Dans les colonnes, vous pouvez également utiliser cette 8 colonne et gouttière largeur 20 ou si vous voulez plus que cela, vous pouvez utiliser 30 comme ça et cliquer sur « OK ». Maintenant, notre toile est prête. Commençons et j'utilise Real Lorem Ipsum site pour obtenir le texte ici, donc je vais utiliser Chrome pour obtenir cela. Voici les deux ressources que j'utilise pour cet exercice. C' est Real Ipsum site et j' aime vraiment comment ils ont du texte réel ici avec les en-têtes, tout le reste et nous utilisons la police Google Source Sans Pro. Si vous voulez l'ouvrir dans les polices Google, vous pouvez cliquer ici et aller à cette page et sélectionner n'importe quelle police ici, comme gras, semi-gras, ou peut-être les sélectionner toutes et les télécharger à partir de ce bouton. Cliquez ici, vous pouvez voir ici il est dit, fichier Zip. Téléchargez le fichier zip et installez-le sur votre PC ou Mac. Ce sont les deux ressources que nous utilisons. C' est celui que nous allons utiliser pour l'en-tête, copier ce texte d'en-tête, et nous allons le coller dans notre Photoshop. Sélectionnez cette police standard Source Sans Pro, taille, je vais sélectionner 64 points ou 64 pixels et je vais sélectionner ici, Contrôle V. J'ai le texte ici. Utilisons cette couleur noire grisâtre par ici. Nous allons utiliser Source Sans Pro régulier, mais nous avons besoin d'un hardface par ici. C' est une ligne très longue. Faites un clic droit dessus, convertissez en texte de paragraphe, et faites-le glisser ici, comme ceci. Maintenant, nous avons un problème de hauteur de ligne donc nous allons utiliser cette hauteur de ligne ou tête 64 et je pense que 72 sera plus que suffisant car il est en tête. Nous allons utiliser près de 64 ou il est 66. Rendons la zone de délimitation du paragraphe un peu plus grande comme ça. Notre cap est prêt. Ensuite, nous allons copier ce jeudi, juillet quelque chose comme ça, cette date. Si tu veux ça il y a neuf minutes, tu peux le copier. Je n'aime pas celle-là, alors je vais m'en servir. Il suffit de le coller ici. Maintenant, nous allons utiliser le texte de 18 points et il devrait être régulier. ce moment régulier et nous devons changer sa couleur pour une couleur grisâtre, quelque chose comme ça, gris brunâtre. C' est 808080. Parce que celui-ci n'est pas très important, nous ferons quelque chose comme ça. Ensuite, nous avons besoin de tout ce texte pour être copié, trois paragraphes, copier et nous devons le coller ici. Notre outil de texte est déjà sélectionné, donc nous allons le faire glisser comme ça dans cette zone comme celle-ci et Control V. Maintenant, nous avons un problème de hauteur de ligne ici donc maintenant nous avons 18. Pourquoi ne pas utiliser 18 multiplié par 1,5, 27. Peut-être que nous avons besoin d'un peu de texte plus grand, donc nous allons utiliser 21 multiplié par 1,5, 32. Trente-deux points dans la hauteur de la ligne et 21 points pour la taille du texte comme ça. Il a déjà l'air bien. Sélectionnez celui-ci, en haut, nous avons besoin qu'il soit un peu plus grand donc nous allons utiliser 24 points et en ce qui concerne 24 points, nous utilisons 1.5. Sa hauteur de ligne devrait être de 36 points. C' est comme ça que je vais tout calculer. J' utilise la hauteur de ligne 1,5, et j'utilise cette taille de pont pour être 21, celui-ci est 24, et celui-ci est 18, et celui-ci est 64. Alignons tous vers la gauche. Sélectionnez tous ces éléments en cliquant sur la touche Ctrl ou Maj. Cliquez sur le dernier et le premier, puis appuyez sur « V » et aligner à gauche comme ça. Ils sont tous alignés à gauche et ils ont l'air bien. Rendons cette date un peu plus terne comme celle-ci, cette couleur grisâtre. Vous pouvez utiliser n'importe quelle couleur, peut-être que vous pouvez utiliser quelque chose comme ça ici B6B6B6 et c'est la couleur que j'ai. Maintenant, notre texte est tout mis en place. Vous pouvez voir comment je l'expose, j'utilise 1, 2, 3, 4 colonnes, cette zone de délimitation pour ce texte, et nous allons utiliser cette zone pour l'image. Dessinons la ligne orange ici, il suffit de sélectionner l'outil rectangle et nous allons faire glisser une ligne orange de 15 pixels ici. Il est blanc en ce moment donc nous allons double-cliquer dessus et sélectionner la couleur orange. C' est f7a94a. Maintenant, tout est prêt. Faisons un peu plus grand de ce côté étendu à l'extérieur. Maintenant, cachons la ligne de grille, contrôle deux-points, et notre grille est cachée. Choisissons celui-là. Il a déjà l'air très agréable et cool alors faisons glisser l'image ici. Je vais utiliser la même image donc je n'ai pas besoin de la trouver encore et encore. Ici, nous avons Fenêtre, Arrangement, Carrelage tous verticalement, et c'est notre design original. Je vais utiliser celui-ci, le traîner ici, et fermer celui-ci. Maintenant, nous avons une très grande image, donc nous devons la lier dans une boîte. Cachons d'abord cette image. Créez un rectangle ici, activez vos guides, Contrôle deux-points, et je vais utiliser cette zone pour l'image. C' est mon rectangle. Il suffit de déplacer le rectangle sous cette image et nous allons créer un masque. Je vais cliquer entre cette image et ce rectangle et ici nous avons notre masque. Ce rectangle agit essentiellement comme un masque. Nous pouvons également réduire la taille de ce rectangle si nous le voulons. Peut-être qu'on doit les déplacer tous les deux du bon côté. Il suffit d'entrer 1, 2, 3 pixels, donc 30 pixels. J' ai bougé un peu plus à droite. Notre design est presque superbe et complet. Ajoutons une variété et nous allons utiliser Italic pour l'état et c'est ainsi que nous avons mis en place notre design. C' est vraiment cool regarder déjà, très agréable et je pense que peu de designers peuvent concevoir comme ça. C' est très simple. J' ai utilisé toutes les techniques que nous avons apprises dans les leçons précédentes. Nous améliorerons cette conception à la fin de la section suivante. Restez à l'écoute et attendez plus d'exercices. Avant, prenez soin de vous et au revoir. Passons à la leçon suivante. 12. Hyphen, et l'utilisation d'autres d'autres: Aujourd'hui, nous allons en apprendre davantage sur les traits d'union et les tirets. Il y a deux tirets, em et en tirets et tirets. Maintenant, nous allons tout apprendre à leur sujet. Tout d'abord, nous allons parler de trait d'union. tiret est le plus court et il se trouve sur votre clavier à gauche du signe plus. Maintenant, le trait d'union est utilisé de trois façons. Numéro un, il est utilisé lorsqu'un mot est divisé à la fin d'une ligne de texte, comme vous pouvez le voir ici dans le mot irréaliste à la fin. Il est également utilisé pour combiner deux mots ensemble pour créer des mots composés comme vous pouvez le voir ici, aimant le plaisir. Il y a un trait d'union entre le plaisir et l'amour. En outre, il est utilisé avec deux nombres de mots comme 20-42. Ce sont toutes les façons dont nous pouvons utiliser des traits d'union. Maintenant, nous allons parler de en dash. En tiret est le deuxième plus long en longueur et est utilisé pour montrer l'espace de temps ou la plage numérique. Vous pouvez voir les exemples comme 9:00am - 17:00pm, juillet-septembre, vacances est du 5 au 9 juin. C' est comme ça que nous allons utiliser en tiret. Maintenant, em tiret. Em tiret est la plus longue en longueur de tous les trois tirets, et est utilisé pour montrer une pause dans la pensée. Comme vous pouvez le voir ici dans les exemples en bas de la route et le long de la route sinueuse, c'était. Il y a une pause dans la pensée et c'est ainsi qu'ils l'ont séparée. Aussi, vous pouvez voir dans l'exemple suivant, nous avons rassemblé nos fournitures. Il y a une pause, les huit chargements de camions et a commencé lentement. C' est ainsi que nous utilisons em tiret. Maintenant, je vais résumer cette conférence sur tiret en et em tiret juste pour être sûr que vous vous souvenez. Gardez à l'esprit que em pour méga. Em tiret est le plus long et en tiret est le deuxième plus long, et tiret est le plus court. Aussi, gardez à l'esprit que vous devez les utiliser là où ils sont correctement utilisés et requis. Ne les utilisez pas où vous voulez. Même beaucoup de typographes ou même sur différents sites Web, j'ai vu beaucoup de gens faire les mêmes erreurs encore et encore. Il s'agit de tirets et de tirets. Passons à la leçon suivante. 13. Utiliser des marques de citations correctement: Aujourd'hui, nous allons parler de guillemets. Maintenant, beaucoup de gens que j'ai vus ne connaissent pas la bonne utilisation des guillemets. Maintenant, nous allons voir dans cette conférence, comment utiliser les guillemets correctement comme un pro. Maintenant, la première chose que vous devez savoir est que toutes les polices, elles ne supportent pas les guillemets bouclés. Dans le premier exemple, vous pouvez voir que ces marques ne sont pas bouclés du tout. Dans la seconde, ils sont purement bouclés, et dans la troisième, ils sont un peu comme des citations bouclées de style machine à écrire. Assurez-vous d'utiliser une police qui prend en charge les guillemets bouclés, et les guillemets bouclés sont essentiellement utilisés dans une bonne typographie. Ici vous pouvez voir que j'ai montré quelques exemples. « Bonjour là », dit-elle. Les guillemets bouclés sont correctement utilisés ici. J' ai vu beaucoup de concepteurs et de développeurs qu'ils ne connaissent pas l'utilisation appropriée des guillemets, et les types de guillemets. Il existe deux types de guillemets. L' un est des guillemets droits et l'autre sont des guillemets bouclés. Maintenant, les guillemets droits sont normalement utilisés pour les pieds et les pouces, et aussi ils sont appelés pieds et pouces marque ou marque de deuxième et de minute. Ceux-ci sont fondamentalement droits, et les guillemets bouclés sont essentiellement utilisés lorsque vous montrez que quelqu'un parle. C' est la bonne utilisation. Vous pouvez voir dans le premier exemple, j'utilise des guillemets bouclés ouverture et fermeture à la fin et au début. Six pieds est montré avec juste un guillemet droit, et les pouces sont représentés avec deux guillemets qui sont droits. Les deux autres sont les mauvais usages des guillemets. Maintenant, sur l'écran, je vais vous montrer les touches de raccourci pour afficher ces ou utiliser ces guillemets dans Photoshop, ou tout autre programme, programme d'édition de Word, ouverture simple citation, Alt plus 0145. On doit appuyer dessus tout en appuyant sur la touche Alt. Pour les utilisateurs Mac, Option plus crochet droit. Aussi la citation simple de clôture, Alt plus 0146, et pour Mac, Option plus Shift plus crochet droit. Maintenant, pour les doubles guillemets d'ouverture, vous devez utiliser Alt plus 0147 dans Windows, et dans Mac, vous devez utiliser Option plus crochet gauche. Pour fermer les guillemets doubles, vous devez utiliser Alt plus 0148, et sur Mac, vous devez utiliser Option plus Shift plus crochet gauche. Il s'agit d'utiliser correctement les guillemets et quand utiliser lequel, droit ou bouclés. Si vous avez des questions, posez-moi. Passons à la leçon suivante. 14. Rectifs de caractères: Maintenant, quels sont les rôles des différentes polices de caractères ? En fait, à l'intérieur d'une seule famille, vous avez peut-être vu des polices avec des noms comme display, légende, sous-head, regular, italic, quelque chose comme ça. En fait, cet affichage, cette légende et cette sous-en-tête sont essentiellement les rôles de cette police ou police de caractères. Ce qui est essentiellement le type d' affichage, le type d'affichage est fait uniquement pour les en-têtes ou le texte très volumineux. Le type de texte est utilisé pour les paragraphes de corps de texte standard ou beaucoup de texte où vous avez besoin de le lire beaucoup. Maintenant, il y a aussi peu d'autres rôles de polices de caractères comme la légende. Si nous avons vu une image sur Internet, vous pouvez voir qu'il y a une légende grisâtre en bas. C' est essentiellement parfois une famille de polices contient une police de légende, donc vous devez utiliser cette légende car elle est essentiellement conçue à cet effet. Les polices d'affichage sont conçues pour les en-têtes, sorte que vous ne pouvez pas les utiliser pour les polices de corps ou un paragraphe très grand ou volumineux. Sous-tête désigne la sous-position. L' affichage signifie que vous pouvez normalement l'utiliser pour les en-têtes. Tout cela concerne les rôles des polices de caractères. Utilisez toujours le rôle et définissez-les correctement. Si vous utilisez une police pour le type d'affichage, ne l'utilisez pas pour le type de texte. Voyons quelques exemples. Maintenant, vous pouvez voir ici j'ai utilisé essentiellement un type d'affichage d'une bonne manière et d'une mauvaise manière. Sur le côté droit, vous pouvez voir que j'ai utilisé une police de caractères, qui est destinée à être pour les types d'affichage dans le paragraphe. Vous pouvez voir que ce sont des casquettes, et je pense que vous ne pouvez pas le lire très facilement. Il a été essentiellement conçu pour le type d'affichage ou essentiellement les en-têtes. Sur le côté gauche, vous pouvez voir que je l'ai utilisé correctement, et je l'utilise essentiellement pour les en-têtes. Vous connaissez peut-être la nouvelle police de Bieber et/ou Bieber, gros c'est une police très grande, la même que celle que j'utilise en ce moment. Ceci est essentiellement conçu pour les types d'affichage. Parfois, si vous achetez une police ou la voyez en ligne, vous devrez peut-être lire une partie du texte ci-dessous. S' il dit qu'il est pour l'affichage ou s'il s'agit d'un type d'affichage, alors l'utilisateur pour les en-têtes. Dans l'ensemble de votre conception, utilisez-le uniquement pour les en-têtes, ne l'utilisez pas pour le texte de paragraphe. Définissez les rôles. Cette police va être ma police de titre ou celle d'affichage, et l'utiliser pour l'affichage. Il s'agit d'un autre exemple d'utilisation erronée des polices de caractères. Vous pouvez voir à gauche que j'utilise une police de transition, et c'est le type d'affichage comme en-tête, et sur le côté droit, je l'utilise comme un paragraphe, ce qui est faux. N' utilisez pas un type d'affichage d'une police comme paragraphe. Essayez de l'utiliser uniquement pour les en-têtes ou peut-être les sous-titres, pas pour le texte du paragraphe. Voici quelques exemples de rôles de polices de caractères. J' utilise ici PT Sans Google police sur le côté droit et sur le côté gauche c'est la police Chapel pro. Je ne sais pas que c'est gratuit ou je l'ai acheté, parfois je ne me souviens pas. Sur le côté droit, vous pouvez voir PT Sans de Google venir dans beaucoup de saveurs comme la légende, régulière, et audacieuse ou quelque chose comme ça. J' utilise tous les trois pour styler la légende. bas et au milieu, j'utilise régulièrement et en haut j'utilise bold. Sur le côté gauche, c'est la même histoire. J' utilise le type d'affichage comme en-tête, normal comme paragraphe, et la légende comme légende en bas. Tout cela concerne les rôles des polices de caractères. Définissez le rôle de votre police de caractères lorsque vous concevez quelque chose et utilisez-le dans votre conception. Gardez-le cohérent et votre design aura fière allure et géniale. Passons à la leçon suivante. 15. Échelles typographiques: J' ai vu beaucoup de designers qui n'ont jamais utilisé la hiérarchie typographique ou l'échelle. Maintenant, cela se produit avec beaucoup de concepteurs novices ou de designers qui apprennent de différents tutoriels ou quelque chose comme ça. Donc, la hiérarchie typographique vient fondamentalement de la hiérarchie visuelle où nous avons un concept de genre, les choses importantes obtiennent de plus grandes tailles. Donc, si vous avez des en-têtes, des sous-titres ou des slogans, ils seront plus grands que les textes normaux ou les textes de paragraphe. Gardez donc à l'esprit que la taille diffère avec l'importance. Voyons comment nous allons créer une échelle. Venir à l'étape que comment créer une hiérarchie typographique ou à l'échelle. Donc, tout d'abord, ce que nous allons faire, c'est que nous allons sélectionner une taille de base. Par exemple, vous considérez que 16 pixels devraient être ma taille de base ou la taille de paragraphe ou la base de ma hiérarchie typographique. Ensuite, vous allez sélectionner un ratio d'échelle ou combien vous allez le mettre à l'échelle. Comme dans chaque étape, vous allez l'échelle de 1,5 ou 1,25, ou le ratio d'or, qui est appelé 1,618. Donc, en bas, je vous donne un exemple simple de la façon de le calculer. Par exemple, ma taille de base est de 18 pixels. Ainsi, la prochaine étape d'échelle sera de 18 pixels multiplier par 1,5, ce qui sera 27 points ou 27 pixels taille de police. Gardez donc à l'esprit que c'est ainsi que nous allons calculer l'échelle. C' est donc la première étape. Si vous voulez la deuxième étape, alors vous allez multiplier 27 par 1,5 pour obtenir l'étape suivante. Laissez-moi vous montrer un exemple. Maintenant, nous avons un exemple de hiérarchie. Sur le côté droit, je vous montre que nous avons un rapport d'échelle de 1,44, et vous pouvez voir en utilisant ce rapport, nous avons un cap à 54 pixels, puis le sous-titre est de 37 pixels. titre quatre correspond à 26 pixels et le titre quatre à 18 pixels et le petit texte à 13 pixels. Vous pouvez voir sur le temps gauche en utilisant cette échelle pour le slogan, j'utilise la taille de titre trois qui était 26 pixels pour le titre 54 et pour le corps du texte, j'utilise 18 pixels. C' est donc essentiellement le concept de la façon dont nous allons harmoniser fondamentalement chaque étape. Ceci est calculé de sorte qu'il aura l'air bien. Si vous sélectionnez simplement des valeurs aléatoires, elles ne vont pas s'intégrer ensemble. 16. Outils en ligne pour les niveaux typographiques: Maintenant, je vais vous montrer certains des outils en ligne pour créer cette hiérarchie automatiquement ou obtenir les valeurs. Même si vous êtes un développeur ou un concepteur, cela vous aidera beaucoup. Voyons ce que sont ces joyaux cachés. Le premier site que je vais vous montrer est ce modularscale.com. Vous pouvez voir ici nous avons, à gauche, est la base et puis le rapport. Vous pouvez définir le ratio à partir de cela. C' est le troisième majeur et ceux-ci sont basés sur, je pense que la musique. J' utilise peut-être ce ratio d'or. Vous pouvez utiliser celui-ci ou vous pouvez définir votre personnalisé. Je peux définir comme 1.35, quelque chose comme ça ou peut-être 1.4, qui est même nombre. Pour les concepteurs, ils peuvent être confondus ce que sont ces valeurs em. Fondamentalement, il s'agit d'une mesure relative. Donc, 1em est égal à fondamentalement 16 pixels. Vous pouvez multiplier toutes ces valeurs par 16 pixels, comme 7,53 multipliez par 16 pour obtenir votre valeur de pixel. L' autre méthode est que juste ici, 18 pixels. Vous pouvez voir avec cet em, il vous montre avec la taille de base de 16 que la valeur de pixel est fondamentalement ceci. Maintenant, 18 pixels, puis 25 pixels, 35 avec ce rapport. Si je change le ratio, vous pouvez voir que cela va augmenter. Je vais utiliser 54. Quelque chose comme ça. Peut-être 618. C' est le ratio d'or : 18, 29, 47, 76, 123, et ainsi de suite, et ainsi de suite. L' avantage de ce site est que nous pouvons aller dans les plus petites tailles aussi. Après 18 pixels, nous avons 11 pixels. J' aime normalement qu'il soit plus proche de ce 1.33 ou quelque chose comme ça. Il vous donne beaucoup de bonne portée comme 18, puis 24, 32, 42, 56, quelque chose comme ça. Aussi dans les petites tailles, il n'est pas très petit. J' ai 14 pixels par ici. C' est ainsi que nous allons utiliser cette échelle modulaire. Ensuite, il y en a un autre qui est celui-ci. Il est également très cool et vous pouvez facilement saisir le CSS. Il génère automatiquement. Pour les développeurs, c'est un très bon outil. Il peut facilement générer les mesures relatives et tout pour vous. Encore une fois, la taille de base est de 16 pixels égale à 1em. Il vous montre. Ensuite, vous pouvez les utiliser. Je crois que j'aime bien celle-là. Ensuite, vous pouvez également voir une très belle vue de comment cela ressemblera. Voici le titre, puis nous avons les paragraphes et les rubriques 1, 2, 3, 4, je suppose. Ici, nous avons le petit texte ou peut-être la légende. C' est un autre outil. C' est un outil très cool. Vous pouvez voir ici nous avons les valeurs en em. Si vous voulez en pixels, vous le multipliez facilement avec 16 pixels. Je vais le régler à 18 pixels en ce moment. Il a décalé à nouveau avec 18 pixels. Maintenant, mon texte est un peu plus grand. Le dernier outil, qui est également très agréable et il a un autre facteur qui est cette hauteur de ligne. Si vous utilisez cette échelle comme j'utilise 1.33, il y a un autre facteur à contrôler ici, qui est la hauteur de la ligne. Vous pouvez voir qu'il vous montre à quoi ressemblera cette hauteur de ligne. Je l'ai mis à 1.45. Prévisualisons ça. Très gentil. Fermez l'aperçu. Il y a quelques bonnes choses à ce sujet et quelques inconvénients à propos de ce site ou de cet outil. Il peut créer le code en pixels valeurs. Vous pouvez voir ici la taille de la police, la hauteur de la ligne, tout. Dans l'unité RAM, qui est destiné aux développeurs. Donc, si vous êtes designer, ne vous inquiétez pas à ce sujet. Il suffit d'utiliser cette valeur de pixel ici et vous serez prêt à partir. Ici, nous avons des textes corporels, qui est le paragraphe 18 pixel, puis le titre 1 est 42 pixels. Si vous êtes un développeur, vous pouvez facilement copier tout ce code ici et l'utiliser dans votre développement. Voici le HTML qu'ils ont utilisé, voici le CSS. Ce sont tous les outils que je voulais vous montrer comment utiliser les échelles de grille ou l'échelle typographique de bonne manière et améliorer vos conceptions. J' espère que vous avez tiré de bonnes leçons de cette conférence. Passons à la leçon suivante. 17. Combien de niveaux de typographie How besoin ?: Nous avons déjà appris la hiérarchie typographique et ce qu'elle est. Maintenant, nous devons savoir combien de niveaux hiérarchiques ai-je besoin ? Peut-être que cela dépend de votre projet, mais normalement 4-6 niveaux sont plus que suffisants. Maintenant, que signifie 4-6 niveaux ? Je vais te montrer dans les prochaines minutes. Maintenant, vous avez peut-être vu ces petites rubriques comme la rubrique 5 ou la rubrique 6. Si vous êtes un développeur, vous pourriez comprendre ce que je dis en ce moment. Donc, si vous êtes designer, ne vous inquiétez pas. Je vais te montrer dans quelques secondes. petites positions sont rarement utilisées, comme la position 5 ou la position 6. Certaines personnes pourraient être d'accord ou d'autres pourraient ne pas être d'accord avec moi, mais je pense que six niveaux de hiérarchie sont plus que suffisants. Maintenant, tout d'abord, nous pourrions avoir besoin de rubriques, qui sont les rubriques 1, 2, 3, 4. Ainsi, quatre niveaux pour les positions ou quatre tailles différentes pour différentes rubriques, comme la rubrique 1 puis la sous-position et la sous-position, quelque chose comme ça. Ensuite, nous avons besoin d'une taille pour le corps du texte, qui pourrait être de 18 pixels, 20 ou 16 pixels. Ensuite, nous avons besoin d'un petit texte. Parfois, nous avons besoin d'écrire un très petit texte, comme des légendes ou un texte très grisâtre, quelque part comme vous pourriez avoir vu dates écrites en très petits nombres ou très petites tailles. Donc, de mon point de vue, six niveaux de hiérarchie sont plus que suffisants, si vous concevez pour mobile et web. Je ne parle pas de livres. livres ou les magazines peuvent avoir besoin de plus que ces niveaux. Voyons comment j'ai utilisé cinq niveaux de hiérarchie, ou vous pouvez dire cinq tailles différentes du ratio d'échelle dans ma hiérarchie et comment je l'ai implémenté. Vous avez peut-être vu ça avant. C' est le même exercice. Vous pouvez voir sur la droite que j'utilise cinq tailles différentes ; 54, 37, 26, 18 et 13. Maintenant, sur le côté gauche, j'utilise un slogan et un titre et un texte de paragraphe. Ainsi, vous pouvez voir pour le titre 4 et le corps du texte, la taille est la même, juste le titre est un peu gras. Le titre est en gras et le corps du texte est une police de caractères normale. Ensuite, j'utilise 26 pixels, qui est en tête 3 taille pour mon slogan. Donc, si vous concevez, vous êtes le concepteur ou un concepteur web ou un concepteur d'applications mobiles, vous devriez garder cela en considération. Vous pouvez donc utiliser les mêmes cinq niveaux dans vos slogans, titres , corps de texte, listes, ou quelque chose du genre. Il s'agit donc de niveaux de hiérarchie, ou de combien de niveaux avons-nous vraiment besoin dans notre conception web ou mobile. J' espère que vous avez apprécié cette conférence. Passons à la prochaine conférence. 18. Rythme verticale: Maintenant, parlons de ce qui est le rythme vertical ou la grille de base. Certains d'entre vous utilisent peut-être la ligne de base, mais je sais que la plupart des concepteurs, même qui utilisent Photoshop depuis quelques années, ne savent pas ce qu'est un rythme vertical ou une grille de ligne de base. Fondamentalement, nous allons créer l'harmonie dans différents éléments de conception en utilisant un espacement vertical uniforme. C' est essentiellement pour mettre en page notre texte. Même vous pouvez l'appliquer sur différents éléments de conception comme les boutons, les graphiques, et peu d'autres choses. Il crée essentiellement une harmonie verticale entre nos éléments de conception et notre type. Maintenant, comment calculer la taille de la grille de base. Fondamentalement, la taille de la grille de base est basée sur la taille de votre police de base multipliée par votre hauteur de ligne. Donc, si j'ai une taille de police de base comme 18 pixels et que ma hauteur de ligne est de 1,5, vous obtiendrez une taille de grille de base de 27 pixels. Maintenant, il s'agit essentiellement de la taille de la grille de base. Vous pouvez également utiliser des multiples de la taille de votre police de base, comme si vous avez des grilles de ligne de base de 27 pixels, vous pouvez également utiliser neuf pixels ou peut-être 18 pixels. Parfois, vous pourriez avoir besoin d'utiliser neuf ou peut-être multiple de 27. Cette grille de base est essentiellement l'unité d'harmonie. Donc, si vous voulez l'utiliser, vous pouvez l'utiliser dans tous vos éléments de conception. Comme si vous voulez dimensionner un bouton, sorte que vous pouvez le dimensionner comme 27 multiplier par 2, il est 54, je suppose. Maintenant, vous pouvez utiliser la hauteur de 54 pixels pour vos boutons. Il en va de même pour la largeur. s'agit essentiellement d'un rythme vertical, donc il sera plus appliqué à la hauteur des articles plutôt que à la largeur des articles. C' est ainsi que vous l'appliquez à votre design, votre type et à tout. Permettez-moi de vous montrer l'exemple de grille de base de 26 pixels. Sur le côté gauche, j'utilise un mot sans rythme vertical. Je suis juste en train de m'écarter avec mon instinct. Vous pouvez voir sur le côté gauche, ils ne sont pas alignés verticalement très bien. En outre, le paragraphe est un peu mal aligné. Ensuite, sur le côté droit, vous pouvez voir que j'utilise la grille de base et que je suis en train d'aligner verticalement tout en fonction de mon rythme vertical et de ma ligne de base. Vous pouvez voir le sous-titre Roboto Condensed 26 pixels sur le côté droit est aligné entre, au milieu des deux lignes de base. De plus, notre titre principal est aligné entre trois unités de base, et notre paragraphe est également placé à l'intérieur de chaque ligne de base et au milieu de celle-ci. Vous pouvez également l'aligner avec le bas de votre texte. Ainsi, au lieu d'aligner des paragraphes au milieu de ces lignes de base, vous pouvez les placer ou les placer au bas de votre ligne de base de force. Faites correspondre la ligne de base de force avec la grille de ligne et cela peut également vous aider à aligner parfaitement tout. Dans cette section, je vais vous montrer comment vous pouvez utiliser les multiples de la grille de base, des marges avant, de l'espacement et/ou d'autres éléments de conception. Comme je vous l'ai déjà dit dans la diapositive précédente, vous pouvez voir à gauche que j'utilise le 26 pixel comme ligne de base, donc 13 pixel est également une unité de cette ligne de base un multiple de cette ligne de base puis 52,78,104, et 130. Comment j'ai obtenu cela, 26 multiplié par 2 est 52, puis multipliez par 3, 78, multipliez par 4,104. Sur le côté droit, vous pouvez voir que j'utilise ce même multiple pour espacer deux sections. Le premier paragraphe et le titre et la nouvelle section en bas, vous pouvez voir que je suis eux avec 104 pixels, qui est également un multiple de 26 pixels. C' est essentiellement comment créer l'harmonie et le rythme vertical dans vos conceptions. Cela améliorera vraiment votre design au niveau supérieur. Si vous utilisez une très bonne compétence typographique avec cette grille de référence, alors même seul le type de votre conception, juste le type, le titre et les textes peuvent vraiment avoir un impact sur l'utilisateur, alors utilisez-les à bon escient et passons à la leçon suivante. 19. Rythme vertical dans Photoshop: Maintenant, laissez-moi vous montrer quelques façons de créer ce rythme vertical dans Photoshop. Je vais ouvrir un nouveau fichier et je vais le dimensionner 1400 par 972 pixels. Ne gérez pas ce document en couleurs. Ici, nous avons la toile vide. Je vais appuyer sur « Alt Supprimer » pour le remplir avec une couleur de premier plan. Maintenant, je vais utiliser l'échelle modulaire de base de 18 pixels. Celui-ci, j'utilise ce site 18 pixel base et 1,5 est mon rapport. Fondamentalement, ma base est de 27 pixels. Je vais vous montrer comment dessiner ces lignes de 27 pixels afin que vous puissiez facilement les utiliser dans vos designs. Ce que je vais faire, c'est que je vais vous montrer comment le faire dans Photoshop. Tout d'abord, nous allons utiliser du texte ici. Peut-être que je vais choisir cette couleur grisâtre. Je vais utiliser un paragraphe ici. La taille doit être de 18 pixels. Notre note de 18 points est de 18 points. Je vais taper et coller Lorem Ipsum ici. La hauteur de ligne que je vais utiliser est de 1,5. Donc je vais dire 27 pixels par ici. Gardez cela à l'esprit, vous allez utiliser la hauteur de ligne identique à celle d'une ligne de base. Donc, 27 pixel est fondamentalement votre hauteur de ligne pour la police de 18 points. Maintenant, voici le texte de notre paragraphe. Désolé, je devrais utiliser une police régulière plutôt que moyenne. C' est ma police de base, mon type de base, et je vais utiliser un titre. Voyons quelle est la taille du titre, 41 pixels. Je vais utiliser en ce moment, 41 pixels. Je vais cliquer une fois par ici, 41 points par ici. Je vais utiliser le visage audacieux ici. Je vais vous montrer que ce sera notre cap. Utilisons un sous-titre ici. Utilisons le médium pour ça. C' est un sous-titre. La sous-rubrique est ici. Ce n'est qu'un texte factice, alors ne vous inquiétez pas à ce sujet. Je vais changer sa couleur pour un peu grisâtre en ce moment, comme ça, juste pour avoir un peu de variété. Voyons ce qui tombe la prochaine taille, 27. Je vais utiliser 27 pour celle-là, comme ça. ce moment, je n'utilise aucune grille pour aligner tous ces éléments. Maintenant, nous allons utiliser une grille. Commençons. Nous allons créer un nouveau fichier avec la largeur de 100 pixels et notre grille était de 27. Alors définissez la hauteur de ce document à 27 pixels, appuyez sur OK. Ensuite, dans ce menu Formes, sélectionnez cet outil de ligne. Zoomez un peu, contrôlez plus et faites glisser un pixel. Assurez-vous qu'en haut il s'agit d'une ligne de point. Donc, j'utilise cette ligne de point et faites-la glisser en bas. Nous pouvons également utiliser une couleur noire un peu plus foncée. Maintenant, contrôlez A marche S, sélectionnez tout. Nous allons utiliser un patron défini. Ici, nous le nommons grille de base de 27 pixels. Appuyez sur OK. Accéder à ce document. Sélectionnez ce calque et je vais appuyer sur les styles de calque et y accéder. Ensuite, nous allons utiliser cette superposition de motif. Nous allons utiliser ce dernier, qui était notre modèle de base. Maintenant, c'est notre modèle de base. Vous pouvez voir que notre texte n'est pas aligné. Il y a deux façons de l'aligner comme ça, s'asseoir au bas de la ligne de base. C' est comme ça que je le fais normalement, comme ça. La sous-rubrique devrait être ici, comme ça. C' est ainsi que nous allons tout aligner. Si vous voulez, vous pouvez y aller, par exemple, si je veux que le sous-titre soit plus proche de celui-ci, combien je peux déplacer ici, vous savez ? Tu te souviens ? Je peux déplacer neuf pixels en dessous. Donc maintenant je vais bouger 1, 2, 3, 4, 5, 6, 7, 8, 9. Elle est toujours proportionnée parce que neuf est aussi le multiple de 27 et 18. Voici donc à quoi ressemblera notre texte sur une ligne de base, et en utilisant une grille de ligne de base. Une autre chose est normalement, certains concepteurs l'utilisent aussi comme ça sur le web, utilisent au milieu comme ça, et aussi l'alignent comme ça. Le sous-titre devrait être par ici, comme ça. Donc c'est un autre arrangement. Je suis en train d'aligner tout au milieu. C' est un autre arrangement qui est recommandé par beaucoup de développeurs web. Donc maintenant, nous allons utiliser celui-ci, suivre celui-ci. Il me semble plus professionnel. Maintenant, si nous essayons de cacher cette superposition de motif, vous pouvez voir notre texte est parfaitement disposé. Voici le prochain défi pour vous. Créez quelque chose comme ça. Utilisez une échelle modulaire. Vous créez une hiérarchie typographique et vous l'utilisez et l'alignez avec le rythme vertical et me le montrez. Passons à la leçon suivante. 20. Exercice de conception pour le rythme vertical: Dans cette leçon, nous allons améliorer la dernière leçon que nous avons faite dans la première section. C' est la leçon que nous avons faite dans la première section. Maintenant, ce que nous allons faire, c'est appliquer les compétences que nous avons acquises, compétences typographiques que nous appliquerons à cela. Ensuite, nous allons appliquer la grille de base à cette conception et la hauteur de la ligne et tout. Commençons. Voici notre article de blog de la leçon précédente, alors enregistrez-le comme un autre fichier. Peut-être réparé ou quelque chose comme ça. Maintenant, tout d'abord, nous allons utiliser ce site qui est gridlover.net et notre taille de police de base est de 20 pixels, hauteur de ligne, je vais utiliser 1.6, facteur d' échelle est 1.3. Les facteurs d'échelle signifient essentiellement combien la différence d'un titre à l'autre. Notre différence de taille de police. C'est le ratio. J' utilise très faible ratio. Ne mélangez pas cette hauteur de ligne avec le facteur d'échelle. Le facteur d'échelle est différent, la hauteur de la ligne est différente. Donc 20 multiplié par 1,6 est 32, donc notre hauteur de ligne sera 32. Appliquons d'abord la hauteur de la ligne à cette page ou à cette conception. Ce que je vais faire, c'est que je vais dupliquer ce contexte. Nous allons d'abord appliquer rapidement le modèle. Dans les leçons précédentes, je vous ai dit comment créer ce modèle, donc je ne veux pas le répéter à nouveau. J' ai déjà créé un motif pour ce 32 pixels. Je vais l'appliquer à ce document. Vous pouvez voir que ce document ne convient pas bien en haut et en bas. Ce que nous allons faire, c'est nous allons modifier la taille de l'image. Voyons voir, diviser 800 par 32 et il est 25, donc c'est presque parfait. Commençons. Déplaçons un peu l'arrière-plan. Zoom, 1, 2, 3, 4, 5, 6, 7, 8. Ça a l'air parfait. Maintenant, il est adapté à notre superposition de modèle de 32 pixels est approprié. Si vous ne vous souvenez pas comment créer cela, consultez la section un, j'ai créé ceci pour vous. Maintenant, tout d'abord, maintenant nous allons changer les paramètres et les tailles de notre texte et tout. C' est notre texte. Tout d'abord, nous allons utiliser 20 pixels car 20 pixels est notre taille de ligne de base. Allons à 20 pixels et la hauteur de la ligne était de 1,6, donc elle est égale à 32 points. Passons ça à 32 points. Déplaçons notre texte en fonction des lignes de base ici, grille par ici. C' est à ça que ça ressemble. Déménageons le jeudi. La taille du jeudi est 18. Maintenant, nous avons le problème. Nous avons besoin d'une autre échelle qui montre aussi notre petit texte. Nous allons utiliser l'échelle modulaire et 20 pixels et 1.3. C' est déjà que j'ai enregistré, alors entrez 20 pixels, 1,3 ratio. Je vais voir la taille plus petite que ce 20 pixels, il est 15. Si vous le souhaitez, vous pouvez utiliser 15 points ici comme ça, 15 points et le déplacer au-dessus et au-dessous de cette rubrique. Pourquoi j'utilise celui-là ? Parce que ce niveau de grille ne me montre pas la taille du petit texte. Si vous allez à ce code, vous ne pouvez pas voir de petit texte ici. rubrique 5 correspond à 20 pixels et aucune taille n'est inférieure à 20 pixels. Nous avons besoin d'une taille inférieure à 20 pixels, donc je la déplace à cette échelle modulaire. Maintenant, si vous voyez que nos tailles de police sont 20, 26, 34 et 44. C' est la même chose ici. Vous pouvez voir le titre 1 est de 44 pixels. Vous pouvez voir ici taille de police 44 pixels, alors nous avons 34, puis nous avons 26, et 20. échelle est la même, mais nous n'avons pas le calcul de petite taille ici. Notre prochaine étape sera de dimensionner parfaitement cette rubrique. Nous allons utiliser peut-être 57 ou 44. Vous pouvez décider ce que vous voulez utiliser. J' irai avec ce 44 pixels. Maintenant, je vais sélectionner ce titre et mettons-le à 44 pixels. C' est comme ça que ça ressemble en ce moment. Ajoutons un peu plus de texte pour qu'il s'adapte sur deux lignes. Nous ne voulons pas laisser une seconde ou deux lettres à la fin. Ce n'est pas une très bonne pratique typographique. La taille est 44. Maintenant, je vais aussi définir la hauteur de la ligne à 44 parce que je veux juste un égal à la hauteur de la ligne, un pour les en-têtes. Si vous vous souvenez de mon dernier tutoriel ou leçon, vous vous souvenez peut-être que la hauteur de ligne pour le titre est de presque 100 % ou 110 %, donc elle est plus proche de 100 %. Vous pouvez voir que j'utilise ces trois lignes ici pour équilibrer ce titre. Vous pouvez voir que j'utilise ces trois lignes, alors nous allons l'aligner un peu plus vers le bas. Amenons la taille de celui-ci égale à 20 pixels, donc il est facilement lisible. Nous ne cherchons pas trop de variété. Nous avons besoin de l'utilisateur pour le lire et tout est réglé en ce moment. Je suppose qu'on va changer la taille de celui-ci. La hauteur est 15, donc nous la rendons égale à huit, ce qui est également lié à notre taille de base et nous le plaçons juste au milieu du C comme ceci. Encore une chose. Dans la leçon précédente, nous avons appliqué cette ligne de grille, alors assurez-vous que vos éléments sont alignés sur cette ligne de grille. Si vous ne vous souvenez pas comment créer cette ligne de grille, accédez à Affichage, Nouvelle mise en page du guide, puis utilisez huit colonnes, gouttière de 30 pixels et tout le reste. Laissez-le juste des marges. Si vous ne voulez pas de marge, laissez-les comme ça et appuyez sur OK. Vous allez générer quelque chose de similaire à moi. Huit colonnes, 30 pixels gouttière, et jusqu'à maintenant je pense que vous ne savez peut-être pas ce qu'est la gouttière parce que ce sera dans la prochaine leçon. Ne vous inquiétez pas pour ça. Il suffit de garder les paramètres comme celui-ci. J' ai activé ma grille avec ces colonnes de contrôle pour voir où mes choses sont alignées. Cette barre orange est alignée avec précision. Tout le reste est superbe. C' est notre premier jalon. Masquons la superposition de motif et voyons à quoi ressemble notre document. Ça a l'air vraiment sympa. L' espacement entre les éléments est génial, tout semble bien. Nous avons appliqué l'échelle typographique et la ligne de base pour améliorer nos conceptions. Maintenant, la deuxième étape. La deuxième étape est que si vous voyez de près entre ces deux paragraphes et les paragraphes inférieurs, je pense que c'est un peu plus grand espace entre tous ces paragraphes. Pourquoi ne pas les rapprocher ? Nous allons au contrôle J dans ce texte. C' est notre ancien texte, donc je vais dupliquer ce calque. Ce que nous allons faire, c'est enlever un espace ou revenir ici. J' ai appuyé sur Entrée ou retour ici. Maintenant, ils sont alignés. Maintenant, sélectionnez la première ligne et voyez quelle est la hauteur de la ligne est 32. Il nous faut quelque chose entre 48 et 64 ans. L' étape suivante est 64, mais nous diviserons notre ligne de base à moitié, donc la moitié de la ligne de base est de 16 points. J' ajoute 32 plus 16, donc c'est 48. Je vais passer à 48 plutôt que 64, ce qui était le réglage précédent. Aussi celui-ci à 48. Je vous montrerai la différence une fois qu'elle sera terminée. Permettez-moi d'activer la superposition de modèle pour notre grille de base. C' est notre grille de référence. Vous pouvez voir ici que notre ligne de base se dégage comme dans la musique, mais dès qu'elle passe au point suivant, elle est à nouveau à l'intérieur du modèle. Il est de nouveau aligné sur notre grille de référence. Pourquoi ? Parce que notre échelle de base qui est de 48 points est fondamentalement, qu'est-ce que c'est ? C' est en fait 1,5 fois notre taille de base, donc 32. Disons le secret ici, 32 multiplié par 1,5, 48. Chaque fois que vous essayez de sortir battre juste aller quelque chose comme ça, multipliez-le par 1,5 ou 1,25, 32 multipliez par 1,25, quelque chose comme ça. 1.25 et 40, cela pourrait aussi bien se passer, mais je pense que 1.5 est assez bon. C' est ainsi que nous avons utilisé notre grille de référence et c'est le texte précédent. Celui-ci est précédent et celui-ci est un peu décalé vers le haut. Ici, vous pouvez voir un peu moins d'écart entre les paragraphes et il est très agréable. Ce sont les secrets de la hauteur et des échelles de ligne, des échelles typographiques, de la grille de base. Aussi si vous comptez les mots dans cette ligne, je pense qu'ils sont plus proches de quelque chose comme peut-être 70 caractères. Je pense que c'est plus proche de 70 ou 80 peut-être. C' est la longueur optimale de la ligne. Je ne veux pas perdre ton temps à compter ici. C' est ainsi que nous avons appliqué notre hauteur de ligne avec deux méthodes différentes. On utilise une hauteur de ligne parfaite, qui est de 32 pixels ou 32 points. Ensuite, nous sommes allés un peu décalés en multipliant notre hauteur de ligne à 1,5 en déplaçant deux paragraphes plus près l'un de l'autre. Ce sont deux techniques que nous avons faites. J' espère que vous avez aimé cet exercice, télécharger ses fichiers à partir des ressources, et vous voir bientôt avec plus à de tels exercices. C' est un autre défi pour vous, essayez de reproduire ce que j'ai fait ici. Voyons ce que vous pouvez trouver et espérons voir vos créations très bientôt. Passons à la leçon suivante. 21. Introduction à la grille modulaire: Dans cette leçon, nous allons en apprendre davantage sur la grille modulaire, et nous allons voir comment l'utiliser, quelles en sont les différentes parties, et comment utiliser des modules, des marges, des scatters et des lignes de grille pour créer des designs incroyables. Notre première étape est que nous connaissons déjà les lignes de base. C' est notre ligne de base de 30 pixels. Ce que j'ai fait, c'est que j'ai créé ce document avec la taille, qui est multiple de 30 pixels. La hauteur est 810, donc la hauteur est fondamentalement multiple de ma ligne de base de 30 pixels. Vous pouvez voir dans le panneau des calques, j'ai créé un calque qui est nommé ligne de base de 30 pixels. Donc, comme je vous l'ai montré dans les leçons précédentes, créé un motif avec 30 pixels de base, et je l'ai appliqué à un calque. De là, vous pouvez voir que nous savions déjà ce truc de base, c'est la première étape. La deuxième étape est que nous allons diviser cette conception en parties horizontales et verticales. Voici donc les gouttières. Comment j'ai créé ces gouttières, vous pouvez voir ici, c'est essentiellement ma grille. Si j'allume ma colonne de ligne de grille contrôlée sur Photoshop. grilles sont essentiellement des espaces entre différentes colonnes. Vous pouvez voir ici la partie blanche est la colonne et la partie grise est la gouttière. Donc, la gouttière est fondamentalement des marges intérieures entre différentes colonnes, c'est juste pour espacer différents éléments les uns aux autres afin qu'ils ne touchent pas les oreilles ou le nez de l'autre, etc. Donc, si je conçois quelque chose et j'ai placé quelque chose ici Comme ça, la prochaine chose est que je vais en placer un autre ici comme ça. C' est essentiellement la marge entre eux. Il crée vraiment une élégance dans votre design si vous suivez cela. Si vous êtes un développeur web, vous connaissiez déjà les lignes de grille de 12 colonnes ou de 60 colonnes. Ils sont également basés sur cela. Même Bootstrap utilise 30 pixels gouttière. Donc, cette gouttière dans Bootstrap est égale à 30 pixels. Comment j'ai créé ces gouttières dans Photoshop, je viens d'aller à cette nouvelle mise en page de guide et j'ai 30 pixels gouttière et huit colonnes. moment, j'ai divisé cette mise en page en huit colonnes. Vous pouvez utiliser 12, 16, tout ce que vous voulez. En outre, la troisième partie que j'utilise dans mon design, ce qui est très important, est que vous laissez une certaine marge autour de votre conception. Laissez-moi d'abord effacer la marge, vous montrer la marge. Donc, cette partie jaune est fondamentalement ma marge. Donc, si vous le visualisez ici en ligne de grille, vous pouvez voir que j'ai 90 pixels de marge supérieure, gauche 30, 90 en bas, et à droite à 30. Voici le secret : Pourquoi je laisse 30 pixels et 90 pixels marges, le secret est notre ligne de base. Notre ligne de base est de 30 pixels, donc j'ai tout réglé autour de ce nombre ; 30 pixels, puis 90 pixels, multiple de notre ligne de base. Donc c'est comme ça que j'ai tout mis en place. Nous avons configuré notre grille de base, c'est tout, et ensuite nous avons des gouttières, puis nous avons des marges, puis l'étape suivante. Donc l'étape suivante est que nous avons l'espace à l'intérieur de cette zone, nous l'avons divisé en colonnes horizontales et verticales, huit colonnes, mais maintenant nous allons créer une autre chose qui s'appelle modules. Nous allons subdiviser cela en différentes boîtes ou modules distincts. Vous pouvez voir ici que c'est un module, celui-ci est un module, et celui-ci est un autre, ou nous pouvons aussi utiliser des modules comme celui-ci ; comme nous avons 1, 2, 3, 4, quelque chose comme ça, mais la hauteur que nous utiliserons sera égale à ce module. Donc, en fait, ce que nous avons fait est que nous divisons le design entier en différentes parties qui sont calculées mathématiquement sorte qu'il apporte harmonie et élégance à l'œil de votre utilisateur. Donc, par exemple, si j'utilise ces deux pour mon image comme ça, alors je vais utiliser, par exemple, quatre premiers modules comme ça ou peut-être cette partie pour mon texte. Pour un Lorem Ipsum moins espacé ici comme ça, changeons la taille, peut-être 72 est bon. Changons cette hauteur de ligne à 72 et augmentons la taille à 100, peut-être comme ça. La hauteur de la ligne devrait être de 90, et utilisons 10 ici comme ceci. Pourtant, je pense que nous avons un problème avec la hauteur de la ligne. Celui-ci a l'air bien, il suffit de créer une mise en page simple comme celle-ci. Donc c'était notre image Cachons celle-là. Où est l'image ? Ok, celui-là. Verrouillons ces couches qui sont notre ligne de base et tout, nous allons les verrouiller. Gutter, je vais le verrouiller, les marges, je vais le verrouiller pour qu'on ne les sélectionne pas par erreur. Celui-ci était un peu hideux donc je vais le convertir en cette couleur et nous allons enlever sa bordure. Où sont les propriétés ? Ici, nous avons les propriétés de forme, nous n'avons pas besoin de bordures. Nous avons créé une mise en page simple. Cachez simplement ces marges et tout pour que vous puissiez voir comment nous faisons avec le mot design. Cachons ça et tout. Vous pouvez donc voir comment nous utilisons les marges et tout pour disposer nos affaires et tout. Nous allons créer un autre calque de texte ici. Maintenant, je vais utiliser toute cette zone ou peut-être toute cette zone pour créer du texte ici. Espacons Lorem Ipsum, et cette fois nous allons utiliser une très petite taille, comme peut-être 24 pixels. Utilisons la hauteur de 30 pixels comme ça, nous allons utiliser zéro ou peut-être moins de zéro, moins 10 comme ça, et nous sommes presque là avec nos marges comme ceci. Changeons la couleur en noir ou quelque chose de gris-âtre comme ça, cachons nos marges, gouttière, et tout le reste pour voir à quoi ça ressemble. C' est à quoi ressemble notre design en ce moment. Il y a encore une chose que nous pouvons faire, nous pouvons utiliser les marges un peu plus ici pour ne pas avoir l'air de toucher du côté droit. Donc peut-être que nous pouvons réduire sa taille à 30 pixels. Avec 30 pixels, créons un peu plus de marge ici. Sur le côté droit, j'ai créé une boîte de 30 pixels ici. Donc, c'est 30 pixels, alors je vais le dupliquer avec ma touche alt. C' est à nouveau 30 pixels, donc nous avons maintenant 90 pixels de marge ici. Donc, redimensionnons ce paragraphe à cette marge de 90 pixels comme celle-ci, et cachons ces marges et tout le reste. Vous pouvez voir comment nous avons créé la mise en page comme ça, vous avez vu ce genre de mises en page dans les magazines. Même si on peut le rendre un peu plus audacieux, quelque chose comme ça, peut-être un peu moins d'espace entre les lettres, moins d'espace entre 72 comme ça. Vous avez peut-être vu ce genre de mises en page dans les magazines sorte que vous savez que les concepteurs de magazines, ils sont très bons pour créer ces mises en page ou ces grille modulaire. Gardez à l'esprit comment utiliser cette grille. Ce sont les bases. Nous avons des gouttières qui se trouvent entre nos différentes colonnes. Vous pouvez voir que mon contenu n'est pas à l'intérieur d'une gouttière. Je les large comme ici, touchons-le à gauche de notre gouttière comme ceci, et vous pouvez voir même mon contenu ne touche aucune marge, il est loin de la marge. Il y a deux choses que vous devez garder à l'esprit lors de la conception. La première est que l'utilisation de la grille modulaire, et dans le prochain exercice, nous allons créer beaucoup de thèmes différents comme vous pouvez voir ici, celui-ci, celui-ci, et celui-ci en utilisant notre grille modulaire. Maintenant, vous avez tout appris sur les grilles modulaires, alors passons à la leçon suivante. 22. Préparer la grille pour l'exercice de conception de blog: Dans cette série d'exercices, nous allons concevoir quelque chose de similaire à cela. Laisse-moi me cacher les détails ici pour que tu puisses voir ce que ça va être. C' est un exemple. J' échange beaucoup de mises en page et de conceptions différentes pour le même contenu. C' est notre contenu. C' est un arrangement, c'est le second. Vous pouvez voir comment cela affecte notre design. C' est le troisième. Nous utiliserons des modules, des marges, lignes de base, tout dans cet exercice, même le rythme vertical. C' est le dernier. Il y a beaucoup de choses que vous devez configurer en premier. Dans cet exercice, je vais vous dire comment configurer cette ligne de base, cette taille de dispersion, ces marges et comment créer ces modules. C' est notre document. Voyons d'abord quelles autres ressources nous allons utiliser pour ce document. La première étape que nous allons franchir est que nous allons choisir nos polices Google. Les deux polices que j'essaie de sélectionner ici sont Lato et Source Sans Pro. Si vous vous souvenez de mes derniers exercices, vous savez déjà qu'une police sera pour les en-têtes et une autre pour le corps du texte. J' utilise Source Sans Pro pour les en-têtes et Lato pour mon texte. Ce sont deux polices. Si vous voulez les télécharger, vous pouvez les télécharger à partir d'ici, cette icône ici et les installer sur votre PC ou Mac et les utiliser. Ensuite, nous allons utiliser Gridlover ou Modular Scale, selon ce que vous voulez utiliser. Nous allons utiliser un facteur d'échelle 1.3, une hauteur de ligne 1.5, et la taille de la police de base est de 20 pixels. La hauteur de la ligne pleine sera égale à 20 multipliée par 1,5, 30 pixels. Trente pixels, hauteur de ligne, taille de police sera de 20 pixels, facteur d' échelle sera de 1,3, donc notre titre 1 sera de 44 pixels. Vous pouvez voir ici, taille de police 44 pixels. Si vous passez à l'échelle modulaire, vous pouvez obtenir les valeurs plus facilement car il n'a que des ratios et la taille de base. On en a 44 ici. Vous pouvez également utiliser ce 57 si vous le souhaitez, mais 44, 34, 20, puis 15. C' est notre échelle si vous voulez utiliser la table ici, vous pouvez passer à cette table pour voir toutes les tailles. Nous avons sélectionné notre échelle, échelle typographique, nos polices et leurs rôles, quelle police va jouer quel rôle. Ce sont les étapes que nous avons couvertes. Ensuite, nous allons utiliser les données de ce site, le contenu de ce site, RealiPSum. Pour les images, vous pouvez télécharger des images à partir de ce picjumbo.com ou Pixabay ou tout autre bon site Web. J' aime vraiment ce site web. Si vous allez dans Catégories, vous pouvez passer à Personnes, Nature, Amour, quelle que soit la catégorie que vous préférez, vous pouvez aller à Architecture. Ce sont de très belles images, vous pouvez voir ici. Vous pouvez sélectionner l'un d'entre eux, allez à la page suivante. Pour les images, utilisez ce picjumbo.com, catégorie, personnes ou toute catégorie que vous aimez, RealiPSum pour le texte. Nous avons sélectionné nos polices et lignes de polices, notre échelle modulaire et notre taille de grille, qui est de qualité de base, qui est de 30 pixels, et la taille de police de base de 20 pixels. Maintenant, notre première étape sera, nous allons créer quelque chose comme ça. Commençons et ouvrons un nouveau fichier. Ce que nous allons faire, c'est que nous allons définir la largeur à 1400 et la hauteur va être de 810 pixels. Pourquoi ? Parce que 810 est facilement divisible par notre ligne de base, qui est de 30 pixels. Si vous essayez de diviser 810 divisé par 30, ce sera une valeur entière qui est 27. Huit cent dix et appuyez sur OK. C' est la taille de nos documents. Maintenant, mettons en place une grille par ici. abord, ce que nous allons faire est de créer une nouvelle mise en page de guide. Nous n'allons pas utiliser 12 colonnes, nous allons utiliser huit colonnes. Si vous voulez créer des lignes, c'est à vous de décider. Vous pouvez créer des lignes ou créer huit lignes. Je pense que nous avons ici huit rangées, 1, 2, 3, 4, 5, 6, 7, 8. C' est essentiellement la création de nos modules. Maintenant, je vais le cacher. La taille de la gouttière va être de 30 pixels. Chaque colonne a un espace entre 30 pixels. C'est notre caniveau. Maintenant, pour les marges, la marge supérieure est de 90, ce qui est égal à notre hauteur de base de trois. Ce sera 30, le fond sera encore 90, et le droit sera 30. n'y a pas de règles difficiles et rapides, si vous voulez définir plus de marge, comme 120 ou peut-être à droite et à gauche vous voulez être 45 ou 60, c'est à vous de décider. Assurez-vous qu'il est synchronisé avec la hauteur de votre ligne de base, qui est de 30 pixels. Maintenant, c'est comme ça que j'ai créé ma grille. Appuyez sur OK. Voici ma grille et les gouttières et les marges en haut et en bas et à droite et à gauche ici. Ce n'est qu'un début de mon document. Maintenant, ce que nous allons faire, c'est de créer des modules. Comment nous allons créer des modules. Mais la première étape est que nous avons besoin d'une grille de référence. Créons une grille de base qui sera de 30 pixels. Donc poids 100 pixels, hauteur 30 pixels. Zoomons 1,200 pour cent et utilisez cet outil de ligne, appuyez sur « Maj » et créez une ligne ici, changez la couleur à un peu de gris. Une ligne de pixel, assurez-vous qu'il s'agit d'une ligne de pixel. Voir en haut ici où est la hauteur d'un pixel. Assurez-vous que la hauteur est d'un pixels car cela créera un problème si vous avez une ligne de deux pixels. Contrôlez A et définissez la ligne de base de 30 pixels du motif. Ce que nous allons faire, c'est créer une nouvelle couche pour notre grille de base. Contrôle A ou Alt + supprimer pour remplir ce calque de couleur grise. Nous allons à Pattern Overlay ce calque qui va être nos 30 pixels comme ça. Notre grille est un peu désactivée. On va l'ajuster. Ne vous inquiétez pas, assurez-vous que cela est mis à l'échelle à 100 % Snap à l'origine, et je pense qu'il est déjà corrigé. Appuyez sur OK, et Control D. C'est notre grille de base, c'est la configuration. Maintenant, nous allons créer quelques modules dans ce document. Ce que nous allons faire, c'est nous allons créer 1, 2, 3, qui va avoir 90 pixels de haut. Faites-le 90 pixels. Ça va être une couleur un peu différente comme ça, ou peut-être celle-là. C' est notre module unique, ou fondamentalement une rangée. Fondamentalement, les lignes et les colonnes, ils se mélangent pour créer ce style de grille modulaire. Je vais regrouper ceci et contrôler G. Nous allons fondamentalement les aligner les uns avec les autres comme ça. Je vais le faire rapidement. Passez cette étape pour que vous compreniez ce que nous faisons ici. Ici, nous avons tous les modules. Nous pouvons maintenant utiliser quelque chose comme ça. Nous pouvons utiliser trois comme ça, trois modules ici sur peut-être quatre colonnes et trois lignes ici. C' est ainsi que nous allons utiliser. Fondamentalement, nous avons créé quelques blocs juridiques ici. Regroupez-les tout à fait. Contrôlez G et faites son opacité 50 pour cent. Nous pouvons voir notre ligne de grille, nos modules sont des rangées. C' est notre grille. Notre document est prêt. Vous savez déjà que la partie supérieure ou la gauche et la droite, c'est essentiellement la marge. Nous avons créé une grille de base de 30 pixels avec des modules, différentes parties sont des lignes et des colonnes. C' est fondamentalement une grille modulaire et nous allons l' utiliser pour créer trois mises en page différentes dans la prochaine leçon. C' est ainsi que j'ai préparé mon design et vous devez également suivre ces étapes lorsque vous concevez et étalez vos sites Web ou typographie sur des applications mobiles. Passons à la leçon suivante où nous allons créer trois mises en page différentes à partir de ces modules. Passons à la leçon suivante. 23. Conception de premier blog: Maintenant, d'abord, nous allons créer cette mise en page, donc en haut, nous allons définir notre cap, à gauche, notre date de cet article, et sur le côté droit, 147 aime. À gauche, nous allons utiliser Lato, une version en italique inclinée, style italique de Lato pour avoir un texte de citation ou de citation ici, texte cité. Autrement dit, nous allons utiliser 1, 2, 3, 4 blocs, quatre colonnes pour mettre en page le premier paragraphe d'introduction, et pour le texte suivant, nous allons utiliser ces trois blocs. Trois et blocs, ou trois lignes et colonnes pour celui-ci, ce module pour cette image. Fondamentalement, ce que nous essayons de faire, c'est d'équilibrer cette mise en page. Discutons de l'équilibre ici. Comme vous pouvez voir cette couleur bleue, normalement la couleur reçoit plus d'attention et elle est plus lourde. C' est ainsi que nous sommes en équilibre avec cette image et cette couleur ici. Cet espace vide est essentiellement en équilibre avec tout ce texte ici. Au milieu, nous avons du texte, à gauche, nous avons, encore une fois, couleur pour équilibrer le poids global de la conception. C' est comme si vous étiez en train d'équilibrer ou de peser des choses dans vos deux mains ou peut-être comme si vous étiez en équilibre sur la scie. Ici, nous avons un petit objet plus lourd, et ici nous avons un gros objet moins lourd, comme un sac de ballons à air ou quelque chose comme ça. Ici, nous avons deux pierres. C' est ainsi que j'essaie d'équilibrer mon design. C' est une astuce de base très, vous pouvez dire, que beaucoup de designers pourraient ne pas connaître. C' est ainsi que nous équilibrons notre mise en page, c'est la technique de base entre derrière ce design. Commençons. abord, nous allons utiliser l'échelle, si vous vous souvenez, la taille du titre était de 44 pixels, et la taille du texte était de 20 pixels. ce moment, je vais utiliser ces deux tailles. J' ignore tous les autres. Rendons nos modules plus ternes ou plus en arrière-plan, afin que nous puissions voir comment nous allons mettre en place différentes choses. abord, je vais utiliser ces trois lignes pour créer mes en-têtes, peut-être tout ce bloc, et je vais utiliser à nouveau Real Ipsum. Voyons où il est. Voici le Real Ipsum. Copions tout cela et collez-le ici comme ça. La taille du texte que j'utilise 44 points et Source Sans Pro gras. Si tu veux aller avec le noir, tu peux aller avec le noir aussi, comme ça. Juste pour remplir l'espace, ne vous inquiétez pas du texte que j'utilise. Je vais régler sa hauteur de ligne à 44, comme ça. Si on veut dépasser 44, on peut aller comme 50, comme ça. Assurez-vous juste qu'il est entre ces trois lignes comme ça. Aussi, il est touchant, vous pouvez voir cette colonne ici. C' est la gouttière, nous ne sommes pas à l'intérieur de la gouttière, nous sommes à l'intérieur de ces 1, 2, 3, 4 colonnes. C' est ainsi que j'utilise ceci, si vous voulez étendre cela, peut-être que vous pouvez utiliser cinq comme ça. Pas beaucoup élargi, parce que c'est un titre, donc nous avons besoin de moins d'espace entre les lettres. Maintenant, nous allons utiliser du texte ici, peut-être que nous pouvons laisser cette ligne, cette ligne ici, et commencer notre texte et utiliser ces peut-être quatre colonnes dans ce module, et nous allons le coller sur quelque chose comme ça. C' est notre paragraphe de départ ou le paragraphe d'introduction. Je vais utiliser 20 pixels par ici. Nous pouvons utiliser un peu plus de hauteur de ligne, peut-être le 45, quelque chose comme ça, et nous allons utiliser régulièrement, et ce sera Lato, pas Source Sans Pro. Lato pas la racine des cheveux, mais nous allons utiliser régulièrement. Maintenant, vous pouvez voir que je peux définir ce bloc de texte en haut de ce module, ou peut-être en bas, c'est à vous de décider. Maintenant, si on le met en place comme ça, peut être comme ça, ou peut-être en bas. Je pense que je vais le mettre au sommet. Créons un autre bloc de texte comme celui-ci, le même, Control J. Je vais copier celui-ci, et nous allons double-cliquer dessus et ajuster la largeur et la hauteur de ces trois colonnes, et nous allons utiliser ceci ou peut-être que vous pouvez aller au-delà de cela parce qu'il s'agit d'une page Web continue. Je vais utiliser 30 pixels de hauteur de ligne, et nous allons utiliser ces deux paragraphes. Copiez d'abord celui-ci, collez-le ici. Je pense que c'est un paragraphe très long. Peut-être qu'on doit le changer un peu vers le bas, ou peut-être sur la ligne comme ça. Peu importe pendant que vous concevez, si vous voulez définir vos textes sur la ligne de base, vous pouvez le faire, mais quand vous codez, je pense que ce n'est pas possible facilement, alors peut-être que nous pouvons définir c'est comme ça, et aussi celui-ci, je vais l'utiliser comme ça. Cachez-le, il ne semble pas très bon, peut-être que nous allons utiliser des paramètres différents. C' est Lato 20 et peut-être que nous pouvons aussi utiliser la même hauteur de ligne ici, ou peut-être changer la couleur pour une couleur plus foncée comme celle-ci. Rendre ce paragraphe d'introduction agréable. Si vous voulez séparer avec deux lignes, c'est bon, mais je pense que deux lignes entre cette introduction et ce paragraphe sont trop nombreuses. Laissons-le maintenant, mettons l'image et d'autres textes ici. Nous allons mettre un texte ici. D' abord, nous allons mettre ici. Copions-le d'ici. Vendredi 30 septembre 2010, je vais le coller ici, et nous allons changer la couleur pour cette couleur grise, peut-être un peu plus foncée comme celle-ci. L' étape suivante était, je suppose, 15. Si vous voulez le dimensionner à 15, vous pouvez le dimensionner à 15. En ce moment, ce que j'essaie de faire est d'utiliser ces deux colonnes et de centrer ce texte ici. Maintenant, cette date a tout réglé, donc nous allons utiliser ce 147 aime ici, donc 147 entrer et Likes. Faisons le fermer ensemble, et je vais utiliser la ligne centrale pour cela parce que c'est un très petit morceau de texte, il peut être facilement lu avec l'alignement central. Réduisez c'est à auto, et je vais utiliser 34 pixels ici. La police sera Source Sans Pro. Si vous voulez aller à cette « Lumière », vous pouvez aller à cette Lumière et simplement sélectionner celle-ci, utiliser la Couleur, peut-être celle-ci. Je vais le centrer dans cette colonne, comme ça. Si vous voulez aller avec Bold, je suppose que nous pouvons utiliser Bold ou peut-être Semi bold. « Semi bold » a l'air bien. Nous avons défini nos 147 likes, notre date et notre titre, et notre texte. Mettons un peu plus de texte ici parce qu'il a l'air très étrange. Peut-être qu'on peut « copier » une ligne d'ici et « coller » ici comme ça. Supprimez une partie du texte pour le faire ressembler à ça. Utilisons un peu de couleur terne pour celui-ci parce qu'il est tout de même. J' utilise la couleur pour cette variation. Peut-être « 50 pour cent » et je vais aller vers le peu de couleur grise. « Gris foncé » comme ça. Ça a l'air super maintenant. Nous pouvons ajouter une image ici et sur le côté gauche nous allons ajouter une citation. Il mettra fin à la première itération de conception. Permet d'obtenir l'image. J' ai beaucoup de collection d'images. Utilisons l'un d'entre eux à partir d'ici, plutôt que de télécharger et de perdre du temps. Peut-être utiliser ce garçon ici avec un ballon. Je vais « faire glisser » ici et « taille » comme ça. Je vais utiliser ces trois modules ici. Je l'ai collé ici comme ça. Si vous voulez que cette image soit exactement dans ce module, alors nous allons le clipser à l'intérieur de cette boîte ici. Créer une boîte de délimitation et nous allons « Clip » cette image, appuyez sur « Alt » et « Clip » il. C' est ainsi que nous allons couper cette image comme ça. « Cacher » nos modules et tout pour regarder à quoi cela va ressembler. C' est comme ça que ça ressemble en ce moment. air superbe, les espaces sont grands et tout semble bien. Ajoutons une citation ici. Je vais utiliser à nouveau ma grille et « Drag » d'ici comme ça. Je vais utiliser ces trois lignes pour cette citation, et je vais utiliser du texte ici peut être comme ça. C' est la citation. « Copier » et « Coller » ici. C' est très petit. Peut-être qu'on a besoin de plus de textos. Fais quelque chose comme ça. C' est une longue citation, je change le texte pour équilibrer ce design donc ne vous inquiétez pas pour le moment. Permet de « supprimer » les guillemets, parce que nous n'allons pas en avoir besoin. Peut-être qu'on doit le presser un peu parce que je vais utiliser une barre bleue par ici. Utilisons ces trois lignes pour celle-là et je vais utiliser la barre bleue ici comme ça. Dix pixels. Je vais « Changer » la couleur pour ce bleu plus léger. La plupart de ces couleurs sont plates, donc ne vous inquiétez pas si vous ne comprenez pas quelles couleurs j'utilise. Vous pouvez voir que j'utilise très peu de couleurs. La plupart des gris et des noirs et des bleus. Rien d'autre. C' est ainsi que je vais exposer cette citation. Si vous vous souvenez, nous avons le titre italique. Peut-être qu'on peut utiliser le titre Italic ou peut-être Light Italic. Je pense que « Light Italic » a l'air génial. C' est un peu difficile à lire, alors peut-être que « Regular Italic » est bon. Peut-être que nous pouvons changer la couleur en bleu ou ce blanc, ou peut-être cette couleur grise. Je « Double Modules » et ces lignes et vous pouvez voir à quoi cela ressemble. Une fois que vous avez défini vos éléments de conception essayez de cacher tout le reste pour voir à quoi il ressemble ou quel résultat il obtient afin que vous puissiez changer la « Couleur » de ici. Je l'ai déplacé à cette couleur « grisâtre ». Je pense que c'est génial. Peut-être utiliser le même « Gray » ici comme celui-ci. Maintenant, vous pouvez voir que c'est la façon dont nous utilisons les modules et la grille de base pour mettre en place notre conception. Nous allons créer plus de mises en page à partir d'un même design en réorganisant nos modules ou en réorganisant nos éléments de conception. C' est le premier élément. Vous pouvez voir ici comment j'ai utilisé tous ces modules si je roule la grille comme ça. C' est la fin du premier exercice et vous pouvez voir à quel point il est beau. Si vous voulez changer quelques choses comme déplacer cette image un peu en dessous parce que notre texte n'est pas aligné avec cette image. Ce sont quelques paramètres. Tu peux aller avec cette fin. Vous sélectionnez cette image et ce rectangle et déplacez-la un peu vers le bas comme ceci et réduisez un peu la taille de votre rectangle afin que cette image soit presque parallèle à votre paragraphe. Masquer ces lignes et tous les modules. C' est presque parfait. C' est la première mise en page. Créons d'autres mises en page dans la leçon suivante. Restez à l'écoute et je vais faire beaucoup de ces exercices. Ne vous inquiétez pas, vous aurez beaucoup de choses formidables d'ici. Supprimez simplement cette citation. Ça m'irrite comme ça. Restez à l'écoute et passons à la leçon suivante. 24. Conception deuxième pour le blog: Maintenant, dans cette leçon, nous allons créer cette mise en page en utilisant uniquement ce gris et cette couleur rouge comme couleur de surbrillance et aussi, je pense que nous allons remplacer l'image et cette citation place les uns avec les autres. Commençons et voyons ce que nous allons trouver. C' est la dernière partie où nous sommes partis. Ce que nous allons faire, c'est d'abord, nous allons créer un autre groupe. C' est notre deuxième conception, donc c'était la première conception. Maintenant, ce que nous allons faire, c'est que nous allons changer quelques choses ici. Tout d'abord, je vais utiliser pas toutes les majuscules, mais je vais utiliser, dimanche, aimez-vous ça, et sélectionnez ce th, et aller dans ce panneau de texte et utiliser cet indice ou exposant, quel qu'il soit appelé . Aussi, nous allons changer la taille à 20 pixels comme ceci. Nous allons aussi utiliser l'italique ici. Cela va être beaucoup de changement dans le correcteur, et peu de choses. Maintenant, nous ne allons pas mettre en évidence celui-ci. Nous allons utiliser une couleur grisâtre pour ce 147 et utiliser, aime, la même couleur que celle-ci. Je suppose que c'est pareil, non. Ce que nous allons faire, c'est que nous allons utiliser 44 pixels pour ce top, utiliser gras. Ce que nous essayons de faire, c'est que nous essayons de faire correspondre la largeur de celle-ci et celle de la seconde. Vous pouvez utiliser cette valeur de suivi. On peut définir 30, 50, 150. Je pense que 150 un peu plus. Donc 100 a l'air bien, 147 aime. Si vous voulez changer la largeur des likes, vous pouvez utiliser zéro ici comme ceci. Tout est prêt. Peut-être qu'on peut réduire la hauteur de la ligne. C' est le 30 et on peut le passer à 45. Je pense que ce n'est pas très bon, peut-être qu'on peut utiliser 30 à la place. Changez également cette couleur à celle-ci. Donc, ils ont l'air de la même façon. Maintenant, l'étape suivante est, nous allons remplacer cette image par une autre image d'une femme ou d'une fille souriante. Je vais sélectionner cette image et nous allons déplacer l'image et le conteneur ici comme ça. Allons sur notre grille. ce moment, j'ignore mes marges et je vais définir la taille de ceci à tous ces trois modules ici ou lignes, je pense que quatre lignes. Voyons combien sont ceux-ci ; un, deux, trois, quatre, cinq, six, six rangées, je mets la taille et tout ici. Déplaçons un peu vers le bas, égal à ce texte ici. Celle-ci est notre citation, alors passons tout ça ici. Maintenant, pour la citation, nous allons utiliser cette zone, ces deux colonnes et ces trois lignes. C' est comme ça que j'organise tout ici. Copions cette image. Celui-ci, faites-le glisser ici, et copiez-le comme ça. Nous allons le faire glisser ici, supprimer ceci, et sélectionner celui-ci. Il est ici, déplacez-le à gauche. Parfois, vous ne pouvez pas voir l'image lorsque vous la collez car elle est à l'extérieur du conteneur, vous l'avez découpée. Je vais appuyer sur « Maj et Alt » pour redimensionner cette image comme ceci. Cachons la grille, c'est presque parfait, mais ici nous utilisions autre chose. Alors changeons le style. Utilisez quelques guillemets ici. C' est ainsi que nous allons utiliser quelques guillemets en italique, et utilisons une taille plus grande, qui était la taille 74 pixels. Donc, je vais utiliser 74 pixels. Ajoutez les guillemets comme ça. Tournons-le. J' ai appuyé sur « Shift » pour le faire pivoter dans un angle spécifique. Mettons-le ici comme ça. Rallons-le un peu plus près l'un de l'autre, comme ça. Il reste quelque chose d'autre ici ? Alors peut-être que nous pouvons changer ce texte en italique. Juste un changement de style, peut-être. Nous pouvons aussi l'étendre un peu, 15, semble bon. Y a-t-il autre chose que nous devons changer ? Ajoutons quelques détails. Il y avait une ligne après ce texte ici. Créons une ligne, ligne mince, outil de ligne. Je vais mettre en évidence ce domaine, c'est notre ligne. Ça devrait être cette couleur peut-être. Déplaçons le sur la gauche et faisons deux pixels de hauteur, comme ça. Aussi, nous allons utiliser une autre couleur, mettre en évidence ce texte. Nous allons utiliser cette couleur pour mettre en évidence cette zone juste pour l'équilibrer. Aussi, nous allons utiliser une couleur terne pour cette zone. Peut-être ce 7a7d80. Aussi, je vais utiliser deux paragraphes séparés ici parce que cela semble très étrange. Créons deux paragraphes en donnant un peu d'espace ici, comme ça, j'ai appuyé sur « 1" entrer ici et nous avons deux paragraphes maintenant. Aussi si vous voulez être plus spécifique, vous pouvez utiliser quelque chose comme ça, mais je pense que c'est aussi bon. Maintenant, on peut en faire plus ici et utiliser 20 ici comme ça. Aussi dans ce texte aussi, utilisez 15 ou peut-être 20 comme ceci. Retirez une ligne afin que nous ayons un bon équilibre de notre conception. Peut-être qu'on peut utiliser un peu de couleur ici pour représenter notre lien comme ça. Il est superbe et je pense que cela résume notre deuxième itération sur ce design. Aussi, je suppose qu'il y a une ligne par ici. Je crois qu'on a oublié ici. Mettons un bloc de ligne ici comme ça. Utilisons-le comme ça, à l'intérieur de notre grille. Cela a l'air génial et je pense que cela résume le deuxième design. C' est l'itération que j'ai trouvée. Je pense que c'est tout et que nous devrions passer à la prochaine leçon. 25. Affiner la 2ème conception de mise en page: Maintenant, laissez-moi vous montrer que j'ai fait quelques ajustements à ce design à la fin parce que je ne me sentais pas bien dans ce domaine ici. Donc, ce que j'ai fait, c'est que j'ai déplacé ceci un peu en dessous, et déplacé cette ligne sur cette ligne de base. Alors que cette ligne, l' a placée sur notre ligne de base. Aussi, vous pouvez voir ici, j'ai utilisé ces guillemets entre ces deux lignes de base, et aussi je l'ai déplacé un peu à l'intérieur de cette gouttière. Si vous voulez le déplacer plus, vous pouvez le déplacer aussi comme ici, comme ça. Je pense que nous devons changer ce texte ici. Nous allons utiliser Source Sans Pro Regular pour cela, et nous allons utiliser l'italique essentiellement. Ce sont peu de paramètres ou de changements que j'ai fait à cette conception parce que je ne me sentais pas très bien avec cette zone. Aussi, si vous voulez revenir à la normale, vous pouvez revenir à la normale, et peut-être que nous pouvons utiliser plus d'espace entre les différentes lettres et avoir quelque chose de similaire à cela. Aussi si vous voulez, vous pouvez changer sa couleur et la rendre un peu plus sombre comme nous l'avons fait lors de notre premier exercice. Voyons et cachons nos modules et tout. Voyez à quoi ça va ressembler. Il semble plus équilibré maintenant parce que j'ai déplacé cette partie, cette guillemet un peu plus bas parce que nous avons besoin d'une bonne quantité d'espace entre ces deux paragraphes et cette partie. C' est presque parfait. Je pense que cette ligne reçoit trop d'attention, donc si vous voulez, vous pouvez changer sa couleur pour peut-être ce rouge ou quelque chose de gris, je pense, qui semble aussi bien. Peut-être celui-ci, et changer la couleur des guillemets en rouge juste pour attirer l'attention. Je pense que cela semble mieux, et c'est bon et meilleur plutôt que le design avant. Aussi, je pense qu'il a l'air très terne, donc je vais utiliser un peu de couleur gris foncé pour montrer cette date. Maintenant, pourquoi j'ai utilisé une couleur un peu plus foncée parce que la lisibilité est notre première priorité. Donc, utilisez une couleur gris un peu plus foncé. C' est ainsi que j'ai ajusté le dernier design et changé quelques choses. Assurez-vous toujours que le design est une chose progressive. Si vous concevez quelque chose une fois, vous devez l'ouvrir et l'affiner encore et encore, jusqu'à ce que vous trouviez l'équilibre parfait, et des couleurs parfaites, et le sens parfait. C' est tout au sujet de la façon dont j'ai affiné la deuxième partie. Passons à la troisième partie. 26. Dernière mise en page pour la conception de blog: Maintenant, dans cette troisième leçon, nous allons créer celle-ci et aussi celle-ci. Ceux-ci ne sont pas différents de la deuxième partie, vous pouvez voir que c'est un peu différent, ce style de signet haut. En outre, j'ai utilisé seulement deux blocs pour cette image, pas toute la zone ici, tout le reste est presque le même. J' ai changé les couleurs du rouge au bleu ici et ensuite nous allons aussi créer cette mise en page. Ici, nous avons différentes choses ici, je vais les expliquer, comme si nous avions cette couleur jaunâtre et cette couleur pourpre ici. Commençons et créons ces deux mises en page dans cette partie de conception C. C'est là que nous sommes partis, donc nous allons garder tout le même. Ici, nous avons l'image, et je vais prendre une autre image, peut-être celle-ci. Je pense que nous avions celle-là, traîne-le ici et nous allons l'utiliser ici comme ça. En outre, vous pouvez utiliser toute cette zone comme celle-ci pour l'image, c'est aussi une autre mise en page. moment, je vais utiliser cette image et la clipser à l'intérieur de ce bloc. Maintenant, ce que nous allons faire, c'est mettre en évidence nos modules. Ici, nous avons nos modules et je vais l'utiliser et le dimensionner à cette zone et nous allons laisser toute cette zone ici. Juste pour être sûr que nous allons tailler cette fille pour qu'on puisse voir ses cheveux et quelques autres choses comme ses vêtements, peut-être comme ça. Il a l'air mieux maintenant. On peut cacher d'autres choses, je pense que ça me semble bizarre. Peut-être que je vais utiliser un peu de couleur bleue de sa chemise, cette couleur bleu violet et la rendre un peu plus saturée comme ça. Pour les liens, et je vais utiliser le même gris. Quelle est la couleur de ce texte ? C' est 7a7d80. Maintenant, nous avons ensemble de nos couleurs ici, nous pouvons aussi échantillonner les couleurs de sa chemise. Peut-être encore, utilisez cette couleur, 147 aime, peut-être que nous pouvons utiliser cette couleur ici, peut-être sa couleur de cheveux ou cette couleur pourpre. Je pense qu'il fait très sombre, donc peut-être très pointu, alors laissez-le comme ça. On va cacher nos modules. C' est ainsi que je viens de changer ce design. Peut-être qu'on doit changer celle-là aussi. Je peux utiliser une couleur très sombre ici pour attirer l'attention sur cette couleur vive ici, pour attirer l'attention sur le titre. Je vais utiliser mon outil de stylo pour ajouter un point d'ancrage ici. Appuyez sur A et déplacez ce point d'ancrage. Que se passe-t-il ? Vous étirez l'outil de sélection. C' est étrange. Je pense que je devrais utiliser A, puis l'outil Plume pour ajouter un point d'ancrage ici. Comme ça. Effectuons un zoom avant et cliquez dessus avec cet outil de conversion de point une fois pour le rendre tranchant, pas arrondi. C' est notre forme principale, donc j'ai changé cette forme et tout le reste. Il a l'air bien. Peut-être que je dois utiliser Lato ici. Lato Bold. Voyons voir à quoi ça ressemble. Ça a l'air bien. C' est comme ça que j'ai tout changé ici. C' est un autre design. Copions et enregistrez-le en tant que conception 3.1. Maintenant, nous allons aller de l'avant et nous allons créer le design 3.2. Sauvegardons d'abord avec l'autre nom, 3.2. Maintenant, ce que nous avons fait ici, c'est que nous allons élargir cette zone. Supprimons cette fille ici. Développez ce rectangle à la taille réelle comme ça. Ok, alors prends un peu de couleur ici, peut-être celle-là , n'importe quelle couleur que tu aimes. Il doit être une couleur un peu plus nette. Où est notre rencard ? Date, voici, apportez-le en haut de cette couche, changez la couleur en blanc et nous avons fait presque tout le travail ici. Est-ce qu'on ajoute quelque chose ici ? Non. Alors enlevons-le. Il ne fait que créer plus de nuance. Nous voulons un sentiment plus ouvert et vide. C' est notre date et mettons en évidence notre grille. Créons un autre rectangle ici en utilisant cette zone et déplacez-le en dessous de ce 147 likes, changeons la couleur à celui-ci, ou peut-être celui-ci, et changez sa couleur de ceci à peut-être ce noir ou peut-être blanc. Cachons ceci et vous pouvez voir notre design est presque parfait, alors changeons les couleurs pour cela. Notre nouvelle couleur, couleur de surbrillance. Peut-être qu'on peut utiliser cette couleur grisâtre. Cela ressemble beaucoup et si vous voulez utiliser le violet ici, vous pouvez utiliser le violet, le bleu, le violet ou le violet ou ce violet. C' est superbe, violet et cette couleur crème, ils sont superbes. Si vous voulez vraiment, vous pouvez utiliser ce titre et le déplacer ici. Il va également créer un autre titre de mise en page ici dans cette zone, et les dates et les goûts ici et peut-être déplacer le texte ci-dessus. Il y a beaucoup de variations que vous pouvez faire avec ces conceptions. Nous avons cette grille et modules configurations. Nous avons juste besoin de changer les parties légales et d'équilibrer la conception. Vous pouvez les utiliser avec le texte en gras et peut-être des couleurs. C' est ainsi que nous utilisons les couleurs et texte gras et la mise en page et la grille modulaire pour créer différentes mises en page. Cela résume mon dernier exercice, je vais le sauver, il est déjà sauvé. Je vous ai donné défi qui crée une mise en page comme celle-ci. C' est le dernier. Utilisez quelques images de ce picjumbo.com, utilisez un texte de Real Ipsum, Google Fonts, sélectionnez deux polices Google que vous aimez. Utilisez une échelle modulaire, utilisez votre propre facteur d'échelle, mais maintenez-le cohérent dans vos conceptions et créez quelque chose de génial et montrez-le moi. Vous pouvez le poster dans les réponses aux questions. Donnez-moi le lien et je partagerai avec vous mes idées sur la façon de l'améliorer ou comment le changer ou quelque chose comme ça. Je vois qu'il y a quelque chose comme ça, alors ne vous dérange pas. Je vais créer d'autres exercices. Mais cela résume cet exercice de conception modulaire. C' est le dernier. Je pense que vous avez peut-être beaucoup de bonnes compétences sur l'espacement des éléments et comment utiliser cette topographie efficacement avec cette hauteur de base et cette harmonie verticale et comment utiliser les lignes et les colonnes et les grilles modulaires. Passons à la leçon suivante. 27. Combien de polices à sélectionner ?: Quand il s'agit de sélectionner les polices, la question la plus difficile, la première est le nombre de polices à sélectionner ? J' ai vu beaucoup de concepteurs et de développeurs novices, ils font beaucoup d'erreurs. Même j'ai vu peu de sites Web et fait des ajustements à eux, où les codeurs ont sélectionné peut-être cinq ou six différentes polices Google, et quand il s'agit de charger, cela peut vraiment avoir un impact ou ralentir votre site Web. Gardez donc toujours à l'esprit que vous ne devriez pas sélectionner trop de polices. Vous ne devriez aller qu'avec un maximum de deux ou trois, si vous savez vraiment comment les combiner. J' insiste toujours sur la sélection de deux polices. Ils sont presque suffisants pour l'ensemble de votre site Web. Veillez également à ne pas sélectionner trop de styles à partir de polices simples. Encore une fois, cela aura un impact sur votre temps de chargement et la taille de la page. Maintenant, gardez en vérifier la taille de la police, combien de taille de chargement en kilo-octets, je vais vous montrer juste dans quelques instants sur Google Fonts. Maintenant, la deuxième étape est, une fois que vous avez sélectionné les polices, vous avez sélectionné une ou deux polices, leur attribuer des rôles. Nous avons déjà parlé des rôles. Choisissez une police pour les en-têtes, les sous-titres et/ou les slogans, et tout et une police pour le corps du texte, parce que la police du corps du texte va être beaucoup lu et qu'elle devrait être facilement lisible et visible. Assurez-vous donc que votre police de corps est lisible et que son niveau de lisibilité est bon. Voici un exemple de choix des polices pour l'affichage et le corps. Vous pouvez voir ici je choisis une police pour l'affichage. Maintenant, sur le côté gauche, vous pouvez voir que j'ai utilisé une police très haute, une police toutes majuscules, comme Bebas Neue Font et vous pouvez voir que le texte ou la copie du corps est lisible et très simple police sensorielle. Maintenant, il y a un truc de plus. Si vous sélectionnez la police pour votre titre ou votre texte d'affichage, nous l'appellerons en termes plus simples, alors gardez simplement dans la rubrique. Donc un pour la direction, un pour le corps. Maintenant, lorsque vous essayez de sélectionner la police pour votre titre, vous pouvez être un peu créatif car le titre sera un peu plus grand que le corps du texte. Donc, même si c'est une police très squiggly, ou une police très grande, ou quelque chose comme ça, ils peuvent être facilement lus en raison de sa taille, mais à propos de la police du corps, elle doit être lisible, son x- hauteur devrait être bonne, et il peut facilement être lu en grande quantité, par exemple, un grand paragraphe, essayer de voir si elle va être facilement lu ou non. Ce sont donc quelques considérations que vous devez garder à l'esprit. Permettez-moi de vous montrer Google Fonts et comment nous allons interpréter notre vitesse de chargement. Gardez donc à l'esprit que lorsque vous sélectionnez, par exemple, si je sélectionne cette police comme celle-ci, une famille sélectionnée et la suivante, sélectionnons cette Source Sans Pro avec celle-ci. Je vais donc sélectionner Source Sans Pro et au-dessus d'un. Deux familles ont été sélectionnées, sorte que vous pouvez voir leur temps de chargement est rapide ici en haut. Maintenant, si j'essaie de le personnaliser et j'essaie de sélectionner un peu plus, où c'est comme, je veux gras, vous pouvez voir le temps de chargement est modéré. Aussi, si je vais à cette police séculaire, elle n'a qu'un seul visage, donc elle n'a qu'un seul style, qui est normal 400, qui est son poids. Peut-être qu'on peut arriver à cette italique régulière, je crois. Le temps de chargement est modéré. Maintenant, vous pouvez le télécharger à partir d'ici comme ça et l'installer sur votre PC ou Mac pour les utiliser dans vos conceptions. Vous pouvez utiliser ces polices de ciel. Je ne l'ai pas utilisé avant. Si vous voulez l'essayer, vous pouvez l'essayer. C' est une chose que vous devez garder à l'esprit lors de la sélection de votre police. Si vous sélectionnez trop de polices, si j'y passe comme plus de trois ou quatre, cinq, six styles, vous pouvez voir qu'il va être lent, alors assurez-vous que votre temps de chargement est rapide ou modéré. Ne va pas plus de trois styles. Je pense que deux styles, comme l'italique régulier et régulier, sont bons pour notre corps texte et celui-ci est bon pour nos titres. Donc, tout est sur la façon de sélectionner les polices. Passons à la leçon suivante. 28. Humidités ou voix de polices de caractères: Dans cette conférence, nous allons former votre instinct sur les polices et la topographie, ce que la police dit, ce que votre instinct entend, et votre sentiment à propos de cette police, nous allons augmenter cette échelle et je vais dire vous comment vous y habituer. Ainsi, chaque police a des voix ou des humeurs différentes. Si vous concevez pour un produit peut-être portuaire ou biologique, vous allez sélectionner une police particulière qui conduit l'ambiance de cette marque ou quelque chose comme ça. Donc, d'abord, vous devez trouver l'ambiance si l'humeur de cette police est liée à votre projet, est-ce bon pour votre site d'affaires ou votre magazine de mode ou si elle est élégante ? C' est amusant ? Est-ce bon pour lire ? Donc, ce sont des situations différentes où vous devez voir quelle humeur différentes polices ont. Maintenant, je vais vous montrer différentes humeurs, j'ai sélectionné au hasard quelques polices de ma collection et je vais vous montrer comment vous y habituer ou vous pouvez dire, former votre oeil pour les humeurs des polices de caractères. Alors commençons. Le premier est le thème amusant. Maintenant, vous pouvez voir toutes ces polices que j'ai sélectionnées, certaines sont splash fun pour vos enfants, manger sainement, amusez-vous avec de l'huile d'olive. Ils ne sont pas trop audacieux, donc ils n'ont pas de bords très tranchants ou quelque chose comme ça. C' est donc un thème un peu amusant, un peu détendu. premier est une police Sans Serif et le second est un peu Slab Serif, mais son coin est un peu arrondi. Puis en bas, nous avons à nouveau la police Sans Serif et ses coins sont également ronds. Même vous pouvez voir dans le bord de l'école, retour à l'école, école de mots, il a une touche très sinueuse à elle à la fin. Vous avez besoin de voir peu de choses, vous devez l'écrire dans une couleur qui est amusant, donc c'est la première étape et essayer, j'essaie différentes polices, si vous aimez une, puis passez à la suivante. Je ne pense pas que ça corresponde à mon thème, alors passez au suivant. Pas de concepteurs de caractères, peut-être il y a peu d'experts qui sont très experts dans cet exercice de correspondance typographique. Mais pour moi, normalement j'essaie de continuer à itérer différentes polices jusqu'à ce que je trouve celle qui semble parfaite pour mon thème. Suivant est le thème de l'amour. Vous pouvez voir que j'ai sélectionné quelques polices différentes ici, peu sont des polices très incurvées et scriptées, des polices manuscrites, et l'une est Slab Serif et la première est une police un peu transitoire qui a un style très distinct. Donc tout dépend de votre situation. Si vous écrivez pour une cérémonie de mariage ou quelque chose comme ça, vous pourriez opter pour la police de script, peut-être comme je l'ai fait dans John et Jenna se marie. Si vous êtes dans un thème d'amour heureux, vous pouvez aller à la dernière option qui est que tout peut être réalisé avec amour, donc il est aussi montrer un peu d'espoir à elle. Ce sont donc des thèmes différents. Si vous voyez le thème de sensation le plus doux que j'ai, l' amour est la sensation la plus douce que j'utilise, couleur cyan ou bleu verdâtre à elle et vous pouvez voir même il est une police Slab Serif très mince mais il est très agréable. Le top est un thème comme perdre l'amour ou peut-être l'avoir pour toujours ou quelque chose comme ça qui est lié au temps ou quelque chose comme ça. Je l'ai donc utilisé, un thème où certaines parties de mes polices sont supprimées, donc c'est peut-être lié au temps. Tout comme nous avons des souvenirs d'amour ou quelque chose comme ça. Donc, cela vient avec la pratique, vous devez itérer beaucoup de polices, écrire la ligne, vous voulez le thème, par exemple, j'ai cet amour est la sensation la plus douce dans mon cœur. C' est donc la ligne de thème Ecrivez la ligne de thème, puis continuez à itérer différentes polices une par une, jusqu'à ce que vous trouviez la meilleure. Voici le thème de la santé, premier est bonbons bonbons, vous pouvez voir que sélectionné pour les enfants et les bonbons, il est très différent police, ont de grandes dalles, touche très drôle. Ensuite, nous avons des cupcakes sont la sensation la plus douce pour les enfants. Vous pouvez voir que c'est la même police que j'ai utilisée dans le dernier exercice qui était le thème de l'amour. Maintenant, ici, nous avons encore peu à sucré, donc il est peu à la douceur, donc nous pouvons l'utiliser avec des petits gâteaux aussi, alors nous avons des fruits et légumes sont plus sains que la malbouffe. Maintenant, fruits et légumes, c'est une police très large. Il a une certaine intégrité à elle ou vous pouvez dire un peu de poids en vous montrant que cette chose est bonne. Donc, il est descente, je peux dire ou très rond où j'ai quelques formes très régulières qui est lié à, vous pouvez dire la police géométrique Sans Serif, géométrie parfaite, et il semble bon sur ce thème. Ensuite, nous avons tous les bonbons naturels, biologiques, sans OGM pour les enfants en bonne santé. Bien qu'il ait des coins très audacieux, comme vous pouvez dire que k et h et tout. Mais les angles sont très différents. Donc, il ressemble à une police de style enfant, donc il peut vraiment fonctionner bien pour naturel organique et quelque chose comme ça. Ensuite, nous avons pur, bio, sans OGM tonique de santé 500 ml, vous pouvez voir en bas. Aussi, gardez à l'esprit que j'utilise les couleurs avec le mélange avec mon thème. Donc, le pop up mieux que juste une simple couleur grise ou noire. Ici, nous avons à nouveau thème organique mais il est différent, peut-être que c'est un tonique pour les adultes ou quelque chose comme ça, donc j'ai utilisé une police. Encore une fois, il a des formes très arrondies, c'est Sans Serif et il a l'air bien avec ce thème. Ensuite, nous avons le thème de la technologie drone rover version 2.5 grand pour les adolescents, vous pouvez voir la différence entre x-height et la hauteur du capital est grande, donc il est à la recherche bon pour les sites Web de technologie, peut-être techs modernes, quelque chose comme ça. Pour les enfants ou peut-être les adolescents, alors nous en avons un autre, comme la technologie moderne est dangereuse pour les enfants, me dit. C' est juste notre direction amusante. Donc c'est aussi quelques Sans Serif géométrique avec des formes très arrondies, pas des rondes parfaites, mais des formes rondes de type ovale. Ensuite, nous avons en bas, nous sommes studio de design le plus innovant à New York. Celui-ci est un peu sérieux et géométrique Sans Serif et il est lié au studio de design, donc peut-être que nous voulons dire un peu de sérieux avec notre innovation de travail, quelque chose comme ça, donc j'utilise cette police peut-être, vous pourriez choisir une autre police, donc cela dépend de chaque designer et de son goût, mais c'est juste pour former vos yeux. Maintenant, nous avons le thème des affaires. Les affaires sont liées au sérieux ou peut-être à la puissance ou quelque chose comme ça, donc ces polices, même elles sont très semblables les unes aux autres, elles sont Sans Serif. Ils ont un thème très sérieux, ils ne montrent pas beaucoup de rondeur, vous pouvez voir ici les bords sont totalement plats. J' ai vu beaucoup de nouveaux designers qui utilisent un type très moderne de polices avec des thèmes d'affaires, donc c'est juste votre jugement, c'est juste pour former votre œil si vous le voulez. Allez avec un type de police moderne, vous pouvez aller avec, ce n'est pas un problème. C' est le thème de la mode, quelques polices élégantes ou polices de caractères ici, certaines sont très minces et ternes tout comme les modèles, les supermodèles. Bien que je n'aime pas personnellement les modèles très minces, ils ressemblent à des bâtons et peut-être à des vêtements accrochés aux bâtons, donc c'est ma propre opinion, ne le prenez pas personnellement. Maintenant, le second est un peu classique, peut-être des montres de poignet, donc j'utilise une police humaniste, vous pouvez voir le e dans les montres et le dernier, vous pouvez voir e est très incliné, il a une pente très inclinée. Donc, c'est fondamentalement une police humaniste et elle est liée à l'ancien type classique, donc nous avons utilisé celui-ci. Ensuite, nous avons une police très géométrique en bas, qui est le design de mode n'est pas seulement une question de vêtements, il est à propos de vous. Il est lié à une certaine géométrie, il est très géométrique, très mince et mince, les points sont ce que vous pouvez voir, les points sur les yeux sont verticaux et tout comme des rectangles minces. C' est ainsi que je choisis différentes polices pour différents thèmes. Voyons plus d'exemples pour le thème de la mode, vous pouvez voir à nouveau, j'utilise les polices modernes Bodoni, vous l'avez peut-être vu sur beaucoup de sites Web. polices Bodoni sont des polices modernes comme celle-ci, créateurs de mode de nos jours sont des idiots. Ce ne sont pas des idiots, c'est ce que je pense parfois. super modèles sont très fins comme les balais, oui, c'est vrai. Vivaldi 2.0, les dernières montres classiques en vente. J' essaie donc d'utiliser différentes polices cette fois, la plupart d'entre elles sont Bodoni, elles ont une altération très épaisse et mince des traits. C' est ainsi que nous utilisons les polices Bodoni dans les thèmes de mode. Maintenant, nous avons le thème du sport. Donc vous pouvez voir ici j'ai quatre lignes de thème différentes. Tu peux courir comme un guépard ? Il est très mince, incliné pour courir comme un guépard, donc il me montre de la vitesse quand c'est italique. Ensuite, nous avons 69 pompes pour obtenir votre ventre mince aujourd'hui, donc c'est très dur exercice, pushups. Je pense que je ne peux pas aller plus de 10 dans mon état actuel. Maintenant, donc j'utilise une police texturée très dure ou très dure sur celle-ci. Ensuite, si un éléphant peut devenir mince, vous pouvez aussi. Maintenant, vous pouvez voir comment j'ai utilisé [inaudible] dans cette ligne pour montrer mon thème, c'est un thème amusant mais vous pouvez voir si un éléphant est audacieux et alors mince est un peu plus mince. C' est ainsi que j'ai utilisé différents poids pour transmettre mon message. Ensuite, nous avons Fantasy Football est là. C' est une annonce. Il est donc en caractères gras très épais. J' ai vu cette police utilisée sur publicité Yahoo sur yahoo.com, donc je viens d'essayer celle-ci ici. 29. Effet de couleur sur l'atmosphère de type (Voice): Maintenant, l'arrêt suivant est l'effet de la couleur sur les polices de caractères. Maintenant, vous pouvez voir dans la leçon précédente, je vous ai montré différents modes de police. Donc, la couleur ont un effet de création sur le mode police. Si vous utilisez une couleur qui est très différente de votre thème, elle peut vraiment changer ou modifier son humeur ou sa voix. Tu vois, tu peux courir comme un guépard ? J' utilise des couleurs de guépard et un peu de couleur brune qui est liée au sol, peut-être du sable, ou quelque chose comme ça. Ensuite, vous pouvez voir dans la ligne suivante, 69 push-ups, j'utilise la couleur grisâtre noir, qui est liée à la ténacité ou quelque chose de similaire. Ensuite, dans la ligne d'éléphant, j'utilise la couleur, qui est liée à l'éléphant et mince est les principaux points focaux, donc j'utilise la couleur rouge que vous pouvez obtenir mince. La fantaisie est liée à la couleur violette, c'est magique, c'est spirituel. Ou quelque chose comme ça, donc j'utilise la couleur pourpre pour le football fantastique est ici. Donc, lorsque vous concevez ou choisissez une police de caractères, assurez-vous de choisir la bonne couleur pour la bonne équipe et de ne pas trop entrer dans ces couleurs. Si vous utilisez déjà une seule couleur pour vos en-têtes, utilisez-les sur votre police de caractères pour les en-têtes. Si vous avez une autre couleur pour votre corps de texte, utilisez-la sur votre corps de texte. Alors ne vous inquiétez pas, essayez de sélectionner deux couleurs différentes, peut-être que vous pourriez avoir une couleur différente pour votre sous-titre ou votre slogan, et une couleur différente pour votre titre, donc quelque chose comme ceci. Permettez-moi de vous montrer quelques exemples de mon travail où j'ai utilisé cette couleur. Vous pouvez voir ici la saveur menthol. J' utilise la couleur menthol pour celui-ci et vous pouvez voir ici nous avons trois saveurs traditionnelles de tabac où j'utilise la couleur brune pour cette saveur de tabac. Aussi, vous pouvez voir ces boîtes sont aussi de la même couleur que j'utilise ici. Vous pouvez voir ici que j'ai un titre, puis un sous-titre, puis ce sont des titres de section, et nous avons deux fonctionnalités comme celle-ci dans ce produit. C' est donc un exemple d'utilisation de couleurs avec votre police de caractères. Voyons si je peux en trouver un autre, un autre exemple ici. Ici, nous avons un autre exemple, vous pouvez voir que j'utilise trois couleurs ici pour différentes icônes sur la gauche, au milieu, et le côté droit. J' utilise la même couleur pour chaque étape, comme pour celle-ci, notre étape numéro 1, 2, 3. C' est ainsi que j'utilise deux couleurs. Puis encore une fois, j'utilise ici deux couleurs pour montrer un certain intérêt comme, laissez-nous vous aider à acquérir, et puis le numéro pour appeler est de couleur différente juste pour le souligner. Maintenant, vous pouvez voir ici j'utilise à nouveau deux couleurs, une est pour le titre et la seconde est une couleur un peu grisâtre parce que je ne veux pas qu'il soit très proéminent. Encore une fois, ici, j'utilise la notation A+ avec Better Business Bureau en rouge parce que je voulais le mettre en évidence ou le rendre plus puissant, peut-être avoir l'air plus puissant. C' est ainsi que j'utilise différentes couleurs sur différentes polices de caractères. Donc, tout est sur la façon d'utiliser les couleurs pour différentes polices de caractères. Passons donc à la leçon suivante. 30. Introduction à la répartition de polices de caractères: Voici une brève introduction sur les appariements de polices, donc juste pour vous débarrasser de certaines hypothèses ou de quelques réflexions sur la façon de jumeler les polices. D' abord et avant tout, il n'y a pas de règles difficiles pour jumeler les polices, donc vous devez entraîner vos yeux et vos tripes pour cela. Essayez de développer votre instinct sentiment que, d'accord, ces deux combinaisons ont l'air horrible homme, c'est laid ou quelque chose comme ça. Ces deux polices sont superbes ensemble. C' est ainsi que vous entraînez votre sensation oculaire ou intestinale, mais cela vient avec le temps. Vous continuez à voir différentes combinaisons encore et encore de différents designers, puis vos yeux et vos tripes seront automatiquement entraînés. Il y a quelques règles de base. Le premier est d'éviter trop de similitude entre les polices. S' il y a des polices qui sont également rondes, et que la hauteur X est identique, et que les courbes sont identiques, alors elles seront identiques pour installer de telles polices [inaudibles]. Ensuite, la deuxième règle est de chercher le contraste. Même dans la nature, vous pouvez voir le contraste est partout, même dans les plantes, les fleurs, les couleurs, tout. Donc, deux polices différentes qui sont très différentes les unes des autres, comme Serif et Sans Serif, ou Slab serif et sans serif, elles fonctionnent très bien les unes avec les autres. Maintenant, la troisième règle est de rechercher des fonctionnalités similaires. Vous devez rechercher la géométrie de cette police, la rondeur, les compteurs ouverts ou les compteurs fermés. Que les compteurs aient un très grand espace ou qu'ils aient très moins d'espace. Ensuite, cherchez aussi la hauteur X. S' ils partagent la même hauteur X, ils pourraient se retrouver bien ensemble. Nous allons voir toutes ces règles en détail dans la prochaine leçon, alors ne vous inquiétez pas à ce sujet. Voici quelques points importants que vous devez garder à l'esprit lorsque vous essayez de jumeler des polices. Le premier est la lisibilité. C' est très important. Si vous choisissez du texte pour votre corps , la lisibilité est notre priorité absolue. La deuxième est la police d'affichage ou la police d'en-tête. Vous pouvez être un peu créatif ici, vous pouvez sélectionner n'importe quelle police, peut-être très large, très épaisse, très squiggly, ou quelque chose comme ça. Maintenant, le troisième est la voix de la police de caractères. Vous allez apparaître les deux polices ou sélectionner les deux polices, en gardant à l'esprit votre thème ou le but de votre conception. S' il s'agit d'un design organique ou quelque chose lié à la nature, alors vous devez garder à l'esprit que les deux paires de polices devraient refléter cela. Il y a la dernière chose que je dois effacer, qui est quelques polices, ils ont juste stocké correspondance du tout. Donc, si vous sentez que ces polices ne correspondent pas, alors n'essayez pas de les faire correspondre. Certaines polices qu'ils se repoussent vraiment. Le dernier est que continuer à combiner différentes polices ensemble. Vous apprendrez avec l'expérimentation. Personne ne te dit ce truc. C' est le meilleur pour apprendre l'appariement typographique. Ouvrez vos polices, sélectionnez-en une pour le corps du texte, puis itérez pour l'en-tête de votre thème. Continuez à itérer jusqu'à ce que vous trouviez le meilleur. C' est ainsi que vous entraînez votre instinct et entraînez votre œil pour combiner différentes polices. C' est une petite introduction sur les appariements de polices, alors commençons à voir et plongons en profondeur dans les prochaines leçons sur la façon de jumeler les polices. 31. correspondance x-height: Jetons un coup d'oeil à une autre technique de correspondance ou d'appariement typographique, qui est appelée correspondance x-height. Vous connaissez déjà X-height. Si vous pouvez faire correspondre la taille de la lettre minuscule de deux polices, elles sont susceptibles d'aller très bien ensemble. Je vais vous montrer quelques polices que j'ai trouvé juste pour former vos yeux. Ce n'est pas de la magie vaudou. C' est juste du travail acharné. Vous devez faire correspondre un x avec un autre x d'une autre police. Donc, continuez à itérer et à sélectionner différentes polices jusqu'à ce que vous obtenez la hauteur x presque exactement correspondant. Ainsi, vous pouvez facilement combiner ces polices. C' est le premier. Ce sont les polices sur le côté droit, Andron et Chaparral Pro Regular. C' est la première combinaison. J' enchère la police Old Style ou la police de style Garamond avec Slab Serif. haut à gauche, vous pouvez voir que les deux x sont en haut, ils ont la même hauteur. Seulement, ils diffèrent dans le coup et les terminaisons Serif. Donc, les terminaisons Serif, l'une est le style Slab Serif, l'autre est le style ancien. Il a un peu de dalles sinueuses en haut. Vous pouvez voir en bas à gauche, j'ai égalé ceux-ci. L' un est utilisé pour le cap. L' autre est pour le corps du texte et ils ont l'air bien ensemble. Il ne semble pas toujours qu'ils soient vraiment parfaits ou qu'ils ont l'air bien ensemble. Parfois, ils peuvent sembler normaux ensemble. Ils pourraient vous surprendre  : « C'est génial. Ils ont l'air super. » Mais parfois, lorsque vous faites correspondre x-height de deux polices, parfois elles correspondent parfaitement. Regardons un autre exemple ici. Encore une fois, j'ai la même hauteur. L' un est ancien style avec Slab Serif et l'épaisseur de style ancien. Vous pouvez voir qu'il a une alternance très épaisse et mince. Dans cet exemple, j'utilise Chaparral Pro avec police Garamond et vous pouvez voir qu'ils sont superbes ensemble. Si vous voulez varier, vous pouvez aller de l'avant et choisir d'autres styles comme j'ai utilisé dans ce chapitre 25 ici à gauche dans la rubrique. J' ai utilisé l'italique ici. C' est ainsi que vous pouvez introduire une troisième police. Utilisez un autre style de la même police. Si vous avez sélectionné Chaparral Pro comme titre, vous pouvez utiliser Chaparral Pro italique comme sous-ligne ou sous-titre, ou date, ou afficher le numéro de chapitre, ou quelque chose du genre. C' est donc un truc très basique. En voici un autre, transition avec un style ancien. Ils, encore une fois, partagent la même hauteur x et vous pouvez voir un est ce Plantagenet Cherokee. Un autre est MM Times, qui ressemble à un peu de police de transition pour moi. Ici, j'utilise l'un de transition comme titre et l'autre comme texte de corps. Voici une autre paire. J' utilise MM fois bold comme titre et Inconsolata Medium, qui est un peu de polices monospace tout comme les machines à écrire en bas. Ils ont l'air bien ensemble. Ils partagent la même hauteur x. L' un est transitoire, l'autre est Sans-Serif, ou vous pouvez dire beaucoup d'une police de machine à écrire monospace plutôt que Sans-Serif. Alors regardons un autre exemple. Ici, nous avons un très bon match. Je ne sais pas, peut-être que tu ressens un autre sens. Je me sens comme ça. Il s'agit de la même police ou de la même famille de dactylographes, Droid Sans et Droid Serif. Encore une fois, la hauteur x est la même. Juste leur audacieux est différent. L' un est Slab Serif ou l'autre est Sans-Serif et ils sont superbes ensemble. J' utilise un style italique pour la variation. Vous en apprendrez plus sur la variation dans la section suivante. Maintenant, c'est le dernier exemple. J' ai eu cet exemple de googling et je l'ai trouvé très utile. L' un est la Géorgie et l'autre est Proxima Nova. Vraiment ils ont fière allure les uns avec les autres, et pourquoi ? Parce que leur hauteur X correspond parfaitement. Ainsi, vous pouvez voir même pas un seul pixel est en haut ou en bas. Ils sont parfaitement assortis les uns des autres. Donc j'utilise Georgia comme titre et Proxima Nova comme texte de corps. Il s'agit donc de faire correspondre les polices avec des hauteurs X similaires. Vous devez les trouver. Ils ne viendront pas à ta porte. Vous devez les trouver. J' ai essayé différentes combinaisons de polices. Pendant votre temps libre, essayez d'utiliser cette technique et essayez de jumeler quelques polices. Donc, tout cela est à propos de cette technique de correspondance x-hauteur. Passons donc à la leçon suivante. 32. Associer le contraste: Parlons maintenant d'une autre technique appelée contraste dans l'appariement de polices. Il y a quelques années, je n'étais qu'un novice et un débutant en correspondance typographique. Je me considère toujours comme un débutant comme vous. Quel est le contraste dans l'appariement de polices ? Le contraste est fondamentalement de nombreux types. Cela pourrait être un contraste dans l'épaisseur de deux polices, peut-être l'épaisseur de trait, l'une est très mince et l'autre est très épaisse. Il peut aussi être une différence dans le style, peut-être parce qu'on est très rond et on est très audacieux et volumineux et solide, il n'est pas très rond. Ne corrigez pas votre esprit qu'il est juste un contraste entre peut-être x-height ou quelque chose comme ça, il pourrait être un contraste dans toutes les fonctionnalités de deux polices. Maintenant, vous pouvez voir ici que j'ai fait correspondre trois polices Gadugi Regular, Colaborate-Regular, Aleo Regular, et je vous ai montré les x-hauteurs de tous ces trois. Vous pouvez voir que l'un est un peu plus petit et les deux autres sont presque identiques. J' ai vu quelques exemples sur Internet, j'ai googlé quelques exemples où les concepteurs ont mis en correspondance trois polices. Maintenant, la chose la plus courante et le secret le plus commun que j' ai trouvé est que la plupart du temps, 90 pour cent du temps, les deux polices de caractères, comme ici nous avons deux polices de caractères qui partagent la même hauteur x, donc l'une est différent. La plupart du temps, les deux autres partagent la même hauteur. C' est donc la clé de leur correspondance de trois polices différentes ensemble. Cela pourrait donc nous aider à utiliser le contraste dans notre couplage de polices. Ici, nous avons trois polices, et deux ont la hauteur x-similaire. En outre, l'un est un peu plus mince, les deux ont plus d'épaisseur. Si vous avez une police plus épaisse, vous pouvez l'utiliser uniquement pour les en-têtes. C' est le bon sens. Si vous voulez aller avec plus de détails comme cette sous-section Internet/Market/ Derniers messages ou un slogan ou quelque chose comme ça, vous pouvez en utiliser un autre. Pour le corps du texte, choisissez celui qui a bonne hauteur x et il est facile à lire ou quelque chose comme ça. C' est ainsi que nous allons utiliser le contraste dans l'appariement de polices. Ici, nous avons un autre exemple. Ici encore, nous avons trois polices : Garamond, Franklin Gothic, et fondamentalement Franklin Gothic Medium ; ce sont deux styles de la même police. C' est pourquoi je vous montre seulement deux hauteurs X parce que ces Franklin Gothic ont la même hauteur. Donc ici, ce que j'ai fait, c'est que j'utilise Garamond comme cap. Garamond est un peu plus audacieux que les autres polices Franklin Gothic, donc je l'ai utilisé pour ma rubrique. Ensuite, dans le sous-texte, Internet/Market/Latest Post, j'utilise Franklin Gothic Medium, je suppose, et pour le corps du texte, j'utilise Franklin Gothic. C' est ainsi que j'ai combiné toutes ces polices et elles ont l'air vraiment génial. Voici un autre exemple où j'ai fait correspondre Garamond, Halifax Light et Georgia, trois polices différentes, et il est difficile de faire correspondre trois polices différentes. Maintenant, la source secrète que je vous ai déjà dit est que deux polices avec des hauteurs X similaires et une est différente de ces deux polices. Donc, un ont une hauteur x plus petite, deux autres partagent la même hauteur x. En ce qui concerne le contraste, ils ont beaucoup de caractéristiques similaires, mais leur épaisseur et leur course sont différents. Donc, Halifax Light est utilisé comme slogan et Garamond est utilisé comme titre, et Georgia est utilisé pour le corps du texte. Voici un autre exemple de contraste. Ici, j'utilise Garamond, Garamond Italic, et Georgia. Donc, en gros, deux polices, Garamond et Georgia. Vous pouvez voir qu'ils ont un contraste ici, si vous regardez le X ici à gauche. Ils ont un contraste en x-height. Donc, beaucoup de contraste en x-height, bien que leurs caractéristiques soient très identiques, un est Old Style, l'autre est Transitional, et ils sont toujours superbes. Ils font un thème d'un poème ou peut-être une histoire de suspense ou quelque chose comme ça. C' est donc un très bon exemple de contraste en utilisant seulement notre x-height et un peu de contraste entre Old Style et Transitional. Voici un autre exemple correspondant à deux polices. Encore une fois, nous avons des polices de transition les unes avec les autres. Juste ils ont une différence dans les coups et le style un peu. L' un d'eux, je pense, est une ancienne police de style Garamond. Donc, ils n'ont pas trop de contraste, mais ils peuvent quand même faire une bonne paire. Plantagenet Cherokee, une police est, et l'autre est MMTimes. De mon point de vue, mon instinct est que ce n'est pas une très bonne correspondance parce qu'il y a juste un contraste entre l'épaisseur du trait. Sinon, leur hauteur x est similaire. Donc, ils ne nous donnent pas l'impression qu'ils sont un match parfait. Voici un autre exemple. Ici, nous avons un bon contraste entre les hauteurs x, bien que les caractéristiques soient identiques. Ils ressemblent tous les deux à des polices géométriques. L' un est l'Inconsolata Medium monospace, qui est la police monospace et l'autre est Montserrat Regular, et celui-ci crée vraiment une paire de polices très impressionnante. C' est donc un autre exemple. Ici, j'ai utilisé x-height comme contraste et aussi un peu d'épaisseur de trait. Voici un autre exemple de contraste avec l'utilisation deux polices de la même famille qui est Droid Sans et Serif. Bien qu'ils partagent la même hauteur x, leur différence de course et aussi leurs dalles et Sans et Serif est fondamentalement le contraste. Beaucoup de fois, Serifs et Sans Serifs, ils font un couple vraiment génial. C' est le dernier exemple que je vais vous montrer. Alors ne t'ennuie pas avec ma voix ennuyeuse. Je sais que tu détestes ma voix. Celui-ci est Ubuntu et Proxima Nova. Vous pouvez voir que Ubuntu est très épais et une courbe de bits dans ses jambes de X. Vous pouvez voir aussi la hauteur x des deux est un peu différente, mais ils ont l'air très bien ensemble. Ils peuvent faire une très bonne équipe, liée à la santé ou peut-être liée à la technologie. C' est le dernier en revanche, dans l'exemple de couplage de polices. Je pense que vous pourriez avoir acquis une bonne connaissance et peut-être un bon sentiment de cette session. Passons donc à la leçon suivante. 33. L'assemblage de polices sur des caractéristiques similaires: Dans cette leçon, nous allons apprendre une autre astuce très basique pour faire correspondre la police, qui est de faire correspondre les caractéristiques de deux polices différentes. Qu' est-ce que signifie fonctionnalités ? Permettez-moi de l'expliquer avec quelques exemples. Parce que cette technique ne peut être apprise qu'en vous montrant quelques exemples. Sinon, il n'est pas facile d'apprendre. Ici, j'ai, c'est un blog stored.org. J' ai trouvé cet exemple à partir de ce site Web. C' est typ.io. Vous pouvez voir ici nous avons une police dans la rubrique. Il est juste conduit lettre deux titre. Ensuite, nous avons la police de copie, ici nous l'avons. Si vous regardez de près, même vous penserez que cette police a un trait très épais. Mais si vous regardez les caractéristiques comme le E, la pente de E, et le X, comment il est écrit. Aussi le I, tout ce qu'ils correspondent beaucoup à cette police ci-dessous. La police ici vous pouvez voir si vous regardez même la lettre Q. Si je vais ci-dessous un peu ici, vous pouvez voir à la fin, vous pouvez voir que Q, vous pouvez voir que le Q est presque similaire à celui-ci, juste la différence d'un peu de trait et de style, la forme et le placement, tout est presque pareil. Aussi, si vous regardez A, ceci est A, et ici nous avons A nouveau, l'inclinaison de cette zone de compteur de A est presque la même. Donc, ils ont les mêmes caractéristiques. Vous pouvez voir par ici. Si nous pouvons zoomer un peu plus, peut-être que nous pouvons le voir facilement. Vous pouvez voir la similitude entre A, aussi le T, la fin de ce T. Vous pouvez voir ici. C' est presque la même chose que celle-là. Il est également a la même fin. Ce sont quelques fonctionnalités que vous chercherez. Ils ont mis ces polices en correspondance avec des fonctionnalités similaires. Bien que je crois toujours que vous devriez former votre instinct ou vos yeux pour correspondre aux polices. Ces caractéristiques peuvent être détectées. Vous ne pouvez pas les ressembler à ça et les analyser mathématiquement. Voyons un autre exemple. Ici, nous avons un autre exemple. Il s'agit d'une police. C'est très audacieux. Je pense que c'est circulaire, le nom de la police est circulaire. Ensuite, nous avons ici une autre police dans le paragraphe qui est texte frite. Maintenant, en revenant aux similitudes, nous allons zoomer. Si vous voyez les deux polices, certaines des courbes, elles ont comme ça, c'est presque la même chose. Ensuite, on a des T. Vous pouvez voir le haut du T, comment il se réunit ici dans cette zone. C' est presque la même chose avec ce T. Ce sont quelques fonctionnalités qui sont similaires dans ces deux polices. Il semble très proche les uns des autres en ce qui concerne certaines des courbes et certaines caractéristiques. C' est un autre exemple alors nous avons, voyons, quelques autres exemples. Maintenant, si vous regardez les spécimens Google Fonts où Google Fonts partagent certains appariement de polices, passons au nouveau couplage Google. Je pense que c'est mieux. Peut-être qu'on peut le regarder ici aussi, donc ce n'est pas un problème. Maintenant, si vous regardez ce premier jumelage, ils ont suggéré Open Sans et Roboto, vous pouvez voir qu'il y a beaucoup de similitude entre ces deux. Les deux sont Sans Serif, vous pouvez regarder les A dans le paragraphe, et ils sont presque le même Robot est un peu mince ou les O, O de Robot sont un peu, vous pouvez voir qu'il a moins de compteur et un peu vertical plutôt que ce compteur ouvert Sans, nous avons plus de compteurs dans les O. Pourtant, ils ont l'air très similaire, bien que je pense qu'ils partagent trop de similitude, mais ils l'ont quand même montré comme une paire. Alors j'aime ce Open Sans et Source Sans Pro, ils partagent aussi beaucoup de similitudes comme les courbes que vous pouvez voir N et A est un N et aussi les O. Ils sont très semblables. De mon point de vue, ils font une très bonne paire. Dernier arrêt est que ce site, il est typeconnection.com et j'ai essayé de jumeler deux polices avec des personnalités similaires. Une police est Adobe Garamond Pro, et la seconde est Chaparral Pro. Il montre également certains des physiques de comme un tranchant, garniture, solide, durable, agile avec des formes définies. On ne sait pas grand-chose à ce sujet. Je ne suis pas un expert. Mais ce que je veux vous montrer, c'est ce graphique correspondant ici. C' est très interactif et très agréable. moment, j'ai cliqué sur ce Garamond Pro et vous pouvez voir celui-ci mis en évidence est la police Adobe Garamond Pro. Vous pouvez voir la fosse en arrière-plan, très léger, qui est fondamentalement Chaparral Pro. Vous pouvez voir que les compteurs sont presque les mêmes et donc les laboratoires sont des sérifs qu'ils partagent la même longueur. Bien que ces Adobe Garamond Pro ont des dalles arrondies, désolé, sérifs ils ont des extrémités arrondies, ils ne sont pas tranchants ou audacieux. Mais la forme ou les angles sont presque les mêmes. Vous pouvez voir le L ici, il va presque dans le même angle et la même direction. Aussi, vous pouvez voir ici, il montre des séries de tête en forme de coin. Ils sont en forme de coin pour les deux polices. Ensuite, nous avons de petits compteurs. Ensuite, nous avons un décalage de balayage. Je ne sais pas ce que c'est, mais ils l'ont montré ici. Maintenant, barre transversale horizontale. Nous avons barre transversale horizontale très droite. Ensuite, nous avons des transitions en douceur vers les sérifs de pied. Transition douce signifie qu'il y a un angle très lisse pour la tige à ce pied serif. C' est ce qu'ils montrent. Maintenant, passez à ce Chaparral Pro. Chaparral Pro est à l'avant, ce qui est un peu sombre. Vous pouvez voir les terminaisons sont un peu épaisses et slabish. Mais il est encore très similaire à Adobe Garamond Pro ou certaines fonctionnalités, les parts dans les mêmes fonctionnalités. Comme vous pouvez le voir, O a de petits compteurs. Ils ont tous deux de petits compteurs qu'ils ont une légère modulation. Je pense que c'est ce qu'ils essaient de dire à propos de l'angle. Puis serifs de tête en forme de coin. C' est le même, puis les slab slab sans bracketed, il est différent de l'autre police. Il a des dalles plutôt que ce serifs courbes ici comme ce Adobe Garamond Pro. Mais c'est un très beau site si vous voulez essayer connecter différentes polices avec des similitudes, vous devriez consulter ce site. Je partagerai tous les liens de ces sites dans les ressources. Vous pouvez les essayer, jouer à ce jeu. C' est très agréable et très cool. Il améliorera votre oeil pour les polices correspondantes. Aussi, je veux vous montrer un autre exemple. Bebas Neue et Din Web condensé. La première chose quand je regarde ces deux polices est qu'elles sont grandes. Celui-ci est un peu grand. C' est aussi une police très grande. Bien qu'il soit épais, mais il semble un peu mince et grand. La construction est grande, la hauteur X est bonne. C' est pourquoi ils ont l'air très similaires parce que c'est aussi épais et grand. C' est aussi épais et grand. C' est la seule similitude que je peux voir car en ce moment la police Bebas Neue est dans toutes les majuscules et je pense qu'elle est disponible uniquement dans toutes les majuscules. Voici quelques exemples que je voulais partager avec vous, Adobe Garamond Pro, Chaparral Pro et quelques autres. Vous pouvez rechercher les sites web, ce typ.io, et rechercher des similitudes juste pour former votre œil et continuer à améliorer vos compétences en typographie. Passons à la leçon suivante. 34. Éviter trop de similitude: Dans cette leçon, nous allons parler de trop de similitude. Donc, dans la leçon précédente, nous avons parlé d'essayer de trouver des fonctionnalités similaires parmi différentes polices pour les combiner. Mais dans cette leçon, nous allons regarder, si vous essayez de trouver trop de similitude, cela va nuire à votre contraste et votre design, il peut facilement ruiner votre design. Gardez donc à l'esprit que trop de similitude peut facilement tuer l'aspect de contraste de notre technique de correspondance avant et cela peut vraiment avoir un impact sur votre conception, alors essayez d'éviter trop de similitude. Ici, je vous montre deux polices, Noto Sans et Open Sans. Alors que je concevais pour une application web pour les médecins, je suppose, je suis venu avec cette combinaison. J' ai essayé d'utiliser Noto Sans et Open Sans les uns avec les autres dans cette application et à ma grande surprise, il n'y avait pas de contraste du tout. J' étais juste confus pourquoi cela se produit encore et encore. Je devrais utiliser une autre police, elles ne correspondent pas très bien. Vous pouvez voir en haut que la hauteur x est similaire, même la largeur du trait est similaire, ils ont un trait presque similaire. En bas, vous pouvez voir que je montre différentes lettres, grandir foax, ça ne veut rien dire juste pour vous montrer les courbes, les angles et les compteurs, combien sont grands les compteurs ? Quelle est la forme du compteur ? Vous pouvez voir à l'intérieur des lettres O, les deux polices ont presque 99 % de similitude. Même si vous regardez A les courbes sont identiques, même les compteurs sont presque identiques, W est le même, seule différence est cette lettre G, je suppose qu'on est humaniste sans empattement et il y a un peu géométrique. Le problème que je veux vous montrer ici est trop de similitude, alors essayez d'éviter trop de similitude. Voici une autre paire que j'ai trouvée qui est Euphemia Regular et Open Sans. Je pense qu'ils ne sont pas trop semblables, mais ils partagent encore beaucoup de la même personnalité. Si vous regardez Euphemia Regular, je pense qu'il a une nature un peu plus sinueuse et se termine et vous pouvez voir une queue après une lettre ici. En outre, F est un peu différent mais la structure de base de la lettre est presque la même. Ceci est un autre exemple, essayez d'éviter de telles combinaisons. Il est préférable que vous écriviez quelque chose comme deux lignes dans deux polices différentes et essayez de voir si elles ressemblent ou non. Maintenant, voici une autre combinaison que j'ai trouvée. J' ai beaucoup cherché et essayé de mélanger beaucoup de polices puis j'ai atteint ces deux combinaisons très similaires. Donc, si vous regardez Droid Sans et Source Sans Pro. Il y a beaucoup de similitudes entre ces deux polices. Si vous regardez le G et l'oreille de G, la lettre R, c'est presque le même, W est presque le même, on est plus large, on est un peu moins large, F est presque le même, puis les courbes à l'A, le compteur à l'intérieur de la lettre A, compteur proche, c'est la même chose, et le X est presque le même. X-height est un peu différent entre ces deux polices, mais elles partagent encore beaucoup de similitudes. Donc, il s'agit d'éviter trop de similitude, si votre instinct a l'impression que ces polices n'ont aucune différence parce que vos yeux et votre cerveau sont plus formés à regarder les différences et les similitudes. Si vous trouvez une similitude ou si vous trouvez qu' il y a trop de similitude entre deux polices, essayez de les éviter. Passons à la leçon suivante. 35. L'association de polices de même concepteurs ou de même famille: D' abord, nous allons décoller très lentement. Nous allons donc examiner les techniques qui sont liées à la combinaison facile de différentes polices. Alors, comment nous pouvons jumeler des polices très facilement. Maintenant, la première règle est, si les polices appartiennent à une très grande famille ou à un même concepteur, alors elles s'adapteront très bien ensemble. Maintenant, pourquoi c'est ça ? Parce que même concepteur ou même famille signifie principalement la géométrie similaire. Ainsi, les formes et les angles, la plupart d'entre eux, ils partageront leurs traits. Maintenant, il y a des familles qui sont appelées super-familles comme nous avons Roboto ici. Laissez-moi vous montrer sur Google Fonts. Si vous regardez Roboto, où est Roboto ? Ici. L'un est Roboto par ici. Il a 10 ou 15 tailles différentes. Puis Roboto Mono. C' est une très grande famille, donc il a différentes variantes comme Roboto Mono. Il y en a un de plus, Roboto Condensed. Donc, tout cela peut être mélangé très facilement parce qu'ils sont construits et conçus par le même concepteur. En fait, c'est essentiellement une très grande famille de polices Jimbo. Donc, la même famille pourrait être une très grande famille ou il pourrait s' agir d'un mélange de sans-serif ou de serif du même type. Droid Sans, vous connaissez peut-être les Droid Sans et Droid Serif. Il s'agit aussi de deux familles et ils sont fondamentalement les mêmes. Ensuite, Roboto et Lato sont de grandes familles célibataires. Alors gardez à l'esprit que si une police a une très grande famille et qu'elle a des styles de, par exemple, laissez-moi vous montrer. Comme ce Kanit. Donc, il a beaucoup de variations, beaucoup de styles différents, beaucoup d'épaisseurs. Donc l'épaisseur de course ; 100, 200, 300 différents. Aussi ce Exo, Exo 2, il a beaucoup de variation. Avec ces polices, nous pouvons créer beaucoup de variations. Donc, la première étape est que vous trouvez une famille qui a beaucoup de styles. Vous pouvez donc utiliser uniquement une seule famille et utiliser différentes manières et styles pour créer des variations et des contrastes dans votre texte. Donc c'est le premier. Ensuite, le second est que vous sélectionnez des polices du même concepteur. Laissez-moi vous montrer l'exemple. Ici je vous montre des exemples de Justin Gravante Site of the Day. C' est à partir de janvier et il utilise des polices FF Mark, Freight Display et Freight Text. Maintenant, les textes Freight Display et Freight sont essentiellement conçus par la même fonderie de polices, qui est GarageFonts. Vous pouvez voir ici mes polices ici, Freight Text, GarageFonts. Le concepteur est fondamentalement ce Joshua Darden pour les deux polices. C' est le même concepteur. Si vous cliquez sur le « Profil » de ce Joshua Darden, vous pouvez voir qu'il a beaucoup de différentes polices de conception comme Freight Text Pro, Freight Display Pro, Freight Sans. Donc toutes ces polices, elles peuvent être mélangées facilement parce que je pense qu' elles partagent presque la même géométrie, parce qu'elles sont conçues par le même concepteur. Aussi leur nom est le même, Freight Sans, Freight Sans. C' est ainsi que nous faisons correspondre différentes polices du même concepteur. Ensuite, nous avons quelques autres exemples de ces textes de fret et d'affichage de fret. Vous pouvez voir ici, ils ont utilisé quatre polices différentes sur ce design. Vous pouvez voir par ici. C' est une utilisation très merveilleuse des polices. Je pense qu'il pourrait être très expert en typographie. Ensuite, nous avons un autre côté. C' est UrbanStems. Il utilise également juste Freight Display et Freight Sans. Ils ont l'air bien ensemble. L' un est sans serif et l'autre est la police serif. Ensuite, voici un site Web de Viaduct Rail Park et il est également présenté sur Typewolf. Ici encore, nous utilisons Freight Display et Freight Sans. Pas nous, mais ce designer. Ils ont l'air cool ensemble. Il est aussi l'un est un peu lié à la famille sans serif et l'autre est pour serif. Ils sont donc conçus par le même concepteur. C' est en gros, je veux te montrer ici. C' est ainsi que vous utilisez des polices de la même grande famille ou du même concepteur. Utilisez ce site, de meilleures polices Google. Je vais vous faire part de cette ressource. Alors assurez-vous de le garder et de chercher différentes formes qui ont de grandes familles. Il s'agit donc de la première règle, qui est la façon dont nous allons facilement combiner les polices de la même famille ou du même concepteur. Passons donc à la leçon suivante. 36. Outils en ligne pour le jumelage de polices: Dans cette conférence, je vais partager avec vous quelques-uns des meilleurs sites Web qui amélioreront vraiment vos techniques de couplage de polices, et votre garde de couplage de polices, et vos yeux de couplage de polices, et votre appariement de polices, Je ne sais pas, peut-être le cerveau, quelque chose comme ça. Je ne sais pas que tu l'as ou pas. Maintenant, ce premier est la connexion de type. C' est un très grand jeu pour taper appariement. Vous pouvez sélectionner différentes polices, comme nous avons ces anciennes polices, Garamond Pro, ITC Century polices, Univers, très structurelles, beaucoup de polices de style sans serif. Ensuite, nous avons des polices de style slab serif, et c'est une police très différente. Si vous sélectionnez l'un d'entre eux comme si je sélectionne celui-ci, alors cela vous donne quatre options. Cherchez le similaire, vous voulez utiliser la même similitude dans deux polices ou vous voulez obtenir le contraste, explorer le passé, ou vous voulez aller avec les données historiques de cette police comme quelle police était en 1800 et qui était en 1900 ou quelque chose comme ça. En outre, vous pouvez compter sur la famille. Que vous souhaitiez choisir parmi la même famille comme Adobe Garamond Pro. Ce sont quelques options. Si vous cliquez sur cela comme « Embrace the Autre », alors il vous donne des options pour sélectionner trois autres. Vous pouvez sélectionner l'un de ces trois. Par exemple, si je sélectionne celui-ci, voyons comment ils vont correspondre les uns aux autres. Il montre la tête sur le cœur. Ils correspondent vraiment. Envoyez-les à un rencard. Peut-être pas parce que sont trop semblables, ils sont tous les deux vieux style serif qui restent chips petite taille. C' est ainsi qu'il vous entraîne avec la correspondance de type. Retournez et essayez de les combiner à nouveau comme ici. C' est un jeu très cool, vous pouvez jouer encore et encore et former votre oeil. Par exemple, si vous sélectionnez celui-ci et que je vais embrasser l'autre, il est très arrondi, donc nous pourrions aller avec Futura qui est très nette et audacieuse police. Envoyez-les à un rendez-vous, voyons comment ça se passe. Oui. Ils ont fait un match très réussi. Voyons voir à quel point tu peux faire ici. Ensuite, nous avons peu d'autres côtés. Celui-ci est très bon, Type Genius. Vous sélectionnez une police comme celle-ci, et la vue correspond, et elle vous montrera beaucoup de correspondances différentes comme Adelle, FF Dagny Pro. Il s'agit d'une correspondance qu'il a trouvée pour cette police. Vous pouvez sélectionner d'autres comme peut-être Bebas Neue et voir les matchs et vous trouverez beaucoup de combinaisons comme 1, 2, 3, 4 et 5 différentes combinaisons. C' est très bon, un autre outil pour peut-être entraîner votre œil ou trouver rapidement une paire de polices. Ensuite, nous avons ce site web, fontpair.co. Vous pouvez rechercher ici ou vous pouvez sélectionner des polices ici. Vous pouvez également aller avec san serif, combinaison san serif, ou cursive avec san serif, ou serif et sans serif, quelque chose comme ça. L' un est pour le titre, le second pour le corps du texte. Il vous montre normalement, plupart du temps, Google Fonts. Ce sont toutes des polices Google. Il vous montrera également où télécharger ces polices. Ensuite, nous avons peu d'autres sites Web pour l'inspiration de type. Celui-ci est create typewolf.com, et il vous montrera tous les nouveaux designs de création et de typographie maîtres et leurs chefs-d'œuvre et avec leurs polices. Vous pouvez voir en bas, ils ont trois polices utilisées dans ce site Web. Si vous cliquez dessus, vous pouvez voir les détails ici, comme ceci. En bas, et en haut, si vous cliquez sur ces polices, vous pouvez aller à ces détails de police et où elle a été utilisée. En outre, vous pouvez télécharger cette police ou peut-être vous l'acheter. Ensuite, il y a un autre typ.io, il vous montre des inspirations de différentes polices, aussi les polices utilisées ici. Aussi les tags qui signifie que la catégorie à laquelle il appartient. Ensuite, le lien du site, si vous voulez aller ici, vous pouvez vérifier votre auto. Ce sont quelques outils que je pourrais trouver plus et j'inclurai un PDF ou peut-être autre fichier dans les ressources pour le télécharger et voir par vous-même. Continuez à pratiquer et à améliorer vos compétences de couplage de polices. Je vais vous donner beaucoup de défis dans les prochaines leçons, alors voyons comment vous pouvez améliorer et combien vous avez déjà amélioré. Passons à la leçon suivante. 37. Preperations d'exercices de conception de la Preperations de techniques de coutures de coutures en extr: Dans cet exercice, nous allons créer quelque chose de similaire à celui-ci. abord, je vais vous montrer les ressources que nous allons utiliser et les polices que nous allons utiliser. Laissez-moi vous montrer les ressources. Pour l'image d'arrière-plan, j'ai utilisé ce pixabay.com. Vous pouvez voir ici tablette iPad. Vous pouvez rechercher ici, tablette iPad et je pense que cette image apparaîtra. Pour les polices, j'utilise trois polices. L' un est Bitter par les polices Google, celui-ci. Vous pouvez chercher ici. Ensuite, nous avons la police Aller, qui est une police gratuite de Font Squirrel. J' aime vraiment cette police. Ensuite, nous utilisons la police Aleo juste pour le logo. Donc, il ne va pas être utilisé dans le design, juste pour le logo. Ensuite, pour l'échelle du module, en fait, je n'ai pas utilisé d'échelle de module. Je viens d'utiliser 42, 16 et 18 pixels, trois valeurs. Mais en fait, j'ai trouvé une échelle qui est liée à ce ratio, base de 16 pixels et ratio 1,15, et vous pouvez obtenir les mêmes valeurs que j'ai utilisées 16, 18, 42 ou 43. Vous pouvez donc utiliser cette échelle. En fin de compte, nous allons utiliser ce fichier de maquette Galaxy main, fichier gratuit de graphicburger.com, et nous allons l'utiliser dans notre conception. Vous pouvez utiliser n'importe lequel de cela, car nous n'avons pas d'application mobile en ce moment, donc nous allons utiliser le même aperçu ici. Commençons. Tout d'abord, nous allons juste mettre en place notre toile. Allons-y, nouveau dossier. Je vais sélectionner 1 920 par 1 080 Full HD. Ne gérez pas la couleur de ce document, pixels carrés, et nous allons cliquer sur « OK », comme ça. Ensuite, nous allons glisser sur cette image dans notre Photoshop comme ceci, et essayer de l'étendre pour qu'elle couvre toute la toile comme ça. Ensuite, au milieu, nous allons créer un rectangle. Cliquez ici une fois, et la largeur du rectangle devrait être de 1,360 par 784. Donc 784 est fondamentalement divisible par 16 pixels, donc je considère cette taille en hauteur. Créons ça. Cachons sa frontière. Sélectionnez une couleur grisâtre ici, et nous allons la déplacer au milieu, comme ça. Maintenant, la première étape est que nous allons créer des guides, des colonnes, des gouttières et tout ce qui entoure cette couche. La meilleure façon dans cette situation est que je vais utiliser un plug-in appelé GuideGuide. abord, je vais faire une sélection, contrôler le clic autour de ce calque, et notre marge est 0, 0, 0, et 0, 12 colonnes. Nombre de lignes, je vais le diviser en quatre sections. Ici, nous avons 1, 2, 3 et 4, donc quatre sections. Ensuite, nous n'avons pas de largeur et voici notre gouttière taille 20 et ajoutons les guides comme ça. Maintenant, si vous n'avez pas ce plug-in, ne vous inquiétez pas, vous devez d' abord créer la taille du document. Dans ce cas, vous allez créer 1 360 et 784. Il suffit de créer ce document d'abord et de construire des guides autour de lui, comme ceci, Nouvelle mise en page du guide, 12 colonnes, 20, et de laisser les marges autour de lui comme ça. Appuyez sur « OK ». Donc, si vous n'avez pas ce plug-in, votre première étape sera celle-ci. Donc, d'abord, vous devez créer ce document, puis aller à cette taille de canevas et étendre votre taille de canevas à 1 920 par 1 080. Appuyez sur « OK ». Maintenant, vous pouvez voir que votre canevas a été étendu et que vos guides ont là-bas. Vous pouvez donc utiliser ces guides comme ça. Mais en ce moment, j'utilise ce plug-in. Donc juste pour faciliter les étapes, j'utilise cette méthode. Faisons un peu plus de couleur blanche, couleur gris blanchâtre. Notre grille modulaire a été créée. Nous avons beaucoup de colonnes et quatre rangées. Nous allons utiliser toutes ces lignes pour créer notre design. Dans la leçon suivante, nous allons concevoir sur cette toile. Passons donc à la leçon suivante. 38. Conception de HEer de héros Partie 1: Maintenant, commençons à créer son logo d'abord, nous allons sélectionner Outil de texte ou taper T sur le clavier pour sélectionner cet outil. Nous allons sélectionner la police Aleo. Je pense que c'était gras, et la taille doit être 36 points, et la couleur sera celle-ci, je pense aaafb2, appuyez sur « OK ». Cliquez n'importe où et écrivez F-A-S-T. Fast est essentiellement le nom de la firme, nous l'avons imaginé. Il y avait quelque chose en dessous, une ligne orange juste pour souligner que c'est un logo. C' est un logo factice, alors ne vous inquiétez pas si vous vous inquiétez trop pour savoir pourquoi et d'où vient ce logo. Faites simplement glisser une ligne en dessous. Il suffit de supprimer ce trait et d'utiliser cette couleur orange. Cette couleur orange que nous avons utilisée ici, c'est un peu d'orange plat mais un peu pointu comme ça. instant, ne vous inquiétez pas pour les placements. Il suffit de créer un groupe ici appelé Logo pour que tout soit organisé. C' est notre conteneur principal, alors nommez-le Conteneur. C' est notre arrière-plan, alors faites-le Background. Utilisez toujours la convention de dénomination qui est sensée et facile à comprendre. Sinon, cela créera un très gros gâchis à la fin. Maintenant, pour cette navigation supérieure, nous allons utiliser la police, qui est Aller. Donc, fondamentalement, nous utilisons deux polices ; Aller et Bitter. Je vais utiliser Aller régulier et la taille de la police sera de 18 points, déplacer à 18 et la couleur sera un peu plus sombre couleur grisâtre, peut-être celui-ci, je pense que ce n'était pas celui-ci, c'était celui-ci, 333683, appuyez sur « OK ». Le premier était à propos de nous. Pourquoi je ne vois pas parce que je peux le déplacer, à propos de nous. Ensuite, nous avons eu des études de cas, des études récentes et des contacts. Je vous conseille d'utiliser une autre copie. Des études de cas, maintenant toutes ces études ont été créées. Déplaçons le dernier qui est Contact à la fin où nous en avons besoin. Mettez en surbrillance vos lignes et colonnes en cliquant sur « Contrôle point-virgule », sélectionnez toutes ces lignes et nous allons les aligner comme ceci. C' est essentiellement le distribuer horizontalement. Parfois encore, il ne le distribue pas horizontalement très bien. Vous pouvez voir A propos de nous, a été déplacé ici. J' ai besoin qu'il soit ici, et encore une fois, je vais le sélectionner comme ça. J' ai besoin d'études de cas pour être ici. Allons l'arranger encore. Pas de soucis si Recent est par ici, alors gardons ça comme ça. Maintenant, nous allons créer ces trois barres ici. Pour cela, nous allons utiliser cet outil rectangulaire, qui est notre rectangle. Vous pouvez également utiliser ce rectangle arrondi si vous le souhaitez. Je pense que j'ai utilisé rectangle arrondi peut être comme ça. Il a une couleur grisâtre comme ça. Ici, nous allons sélectionner la couleur, peut-être celle-ci, peut-être la couleur grisâtre plus claire. Dupliquez-le, un, deux. Comme ça. Regroupez-les et nous avons notre navigation ici. Si vous voulez le déplacer, vous pouvez le déplacer ici. Il suffit de garder la distance, qui va être 1, 2, 1, 2, 3, 4. Nous pouvons également ajouter un peu plus, peut-être six de plus, 1, 2, 3, 4, 5, 6. La distance totale par rapport au sommet est de 30 pixels. Je ne suis pas en ce moment, compte tenu de ma ligne de base, donc maintenant je suis libre de ma ligne de base. Parfois, lorsque vous concevez, vous n'avez pas besoin de trop penser à la ligne de base lorsque vous n'avez pas de très longs paragraphes ou très longs textes à modifier ou que vous avez besoin de concevoir pour des blogs ou quelque chose comme ça. ce moment, je conçois pour l'en-tête. Donc j'utilise juste mes blocs de legos pour tout arranger. Quatre rangées ou quatre sections, horizontalement et verticalement, j'ai 12 colonnes. Appelons-le Menu ou Nav, navigation. Déplaçons le haut, alignons avec cela. Pourquoi j'utilise des groupes parce que je peux facilement les aligner les uns avec les autres. Celui-ci a été aligné avec cela facilement. En outre, vous pouvez double-cliquer dessus et vous pouvez changer la couleur de l'ensemble du groupe simultanément. Color Overlay, et nous allons utiliser une certaine superposition de couleur ici comme ceci, cela ressemble beaucoup plutôt que trop sombre couleur grisâtre. En outre, cela s'appelle menu Hamburger. Notre barre d'onglets est presque prête. Alignons aussi les logos avec ceux-ci. Peut-être que j'ai besoin d'avoir 1, 2 , 3, 1, 2, 3, 4, 5, 6. Je suppose que 16 multiplié par 2 est égal à 32. Alors déplacons-le quatre pixels ici, 1, 2, 3, 1, 2. Donc 32 pixels, je l'ai déplacé de haut. Déplaçons les deux pixels en dessous, un et deux. Un grand design est fondamentalement très calculé. Alors ne pensez pas que vous avez besoin d'être très créatif pour concevoir cela. Je pense que vous devez être très analytique pour concevoir ça. Cachons ceci et voyons quelles sont les distances entre nos éléments. Je pense toujours qu'il y a beaucoup plus de distance entre A propos et Récent. Utilisons notre sensation intestinale intérieure pour les aligner. Je vais le déplacer ici et déplacer le Récent là-bas. Déplaçons ça comme ça. Déplaçons le contenu deux fois ici. Maintenant, il a l'air parfait. Vous pouvez voir comment j'ai utilisé mon sens intérieur, ou le sentiment de l'intestin pour aligner ceux-ci. Ne comptez pas toujours sur ces grilles. moment, j'utilise cette zone pour la navigation, 1, 2, 3, 4, 5, 6 colonnes, et deux colonnes pour ce logo. C' est comme ça que je suis en train de tout aligner. Maintenant, j'ai besoin du texte ici, qui va être dans Bitter. Je vais utiliser ce bloc entier, 1, 2, 3, 4 colonnes. Collons quelques textes ici, qui était celui-ci, voir comment Woo-Commerce et tout. J' utilise Bitter ici, et la taille de la police est de 43, comme je l'ai mentionné plus tôt dans notre compétence typographique. Copions-le. Je vais utiliser le Bloc-notes pour le coller car il va coller tout le style. Je veux que vous me voyiez tout en stylisant ce texte. Collons-le ici. Celle-ci est une fausse couche, celle-ci était réelle. C' est notre texte. Ce qu'on va faire, c'est choisir Bitter ici. Ce sera Bitter Bold. Je ne sais pas, était-ce audacieux ou quoi que ce soit ? Voyons voir. Non, ce n'était pas audacieux, c'était normal. Maintenant 43 et j'ai choisi la hauteur de ligne pour être 60. Vous pouvez voir par ici. Maintenant, l'espace semble un peu moins par ici. Je ne sais pas pourquoi ce n'est pas là. Élargissons ceci à la suivante. Donc 1, 2, 3, 4, 5 colonnes, en ce moment nous utilisons ici. Maintenant, je vais sélectionner ceci et je vais utiliser une couleur plus foncée ici. Je crois que c'était celle-là. Est-il en dessous d'une couche ? Je pense que c'était à l'intérieur de ce groupe et j'avais appliqué une superposition de couleur sur cette navigation. Donc, je l'ai déplacé. Je vais utiliser un peu de couleur gris bleuâtre terne ici. Je pense que ça a l'air génial. Je serai un peu moins. Cela a l'air génial, maintenant je vais l'utiliser. Sélectionnez ceci d'abord et je vais utiliser cette couleur gris-bleu terne. Cette zone est prête. Maintenant, créons notre bouton ici. Donc, pour le bouton, je vais utiliser le rectangle arrondi, et nous allons utiliser une certaine taille. Utilisons 240 par 36. Essayons celui-ci, et notre rayon sera de 30. Utilisons 30 par ici, 30 par ici, et 30 par ici, et 30 par ici. Il est donc très mince. Créons un peu plus de hauteur, un peu plus grand bouton. Peut-être que nous pouvons utiliser 16 multiplier par 3 est 48, je suppose. Oui. Je pense que 48, c'est plus proche. Voyons quelle était la taille que j'ai utilisée ici. Contrôle D, et la hauteur était de 60 pixels. Donc je pense que 64 seront dans notre gamme pour notre hauteur de base ou tout. Utilisons-le par ici. Donc, je vais utiliser 64 pixels. Allons le colorer quelque chose d'autre en ce moment. Maintenant, nous avons un problème avec la rondeur. Je l'ai déplacé à 32 pixels. Maintenant, c'est parfaitement rond. Nous avons créé notre bouton. Déplaçons un peu plus bas, peut-être dans cette zone, ou peut-être si nous avons besoin de l'espacer, nous pouvons utiliser 1, 2, 3, et 1, 2. Donc, 32 pixels loin de cette zone. Voyons combien c'était de cette région. Je pense que c'était au milieu de ces deux-là, en haut et en bas. Peut-être que vous devriez utiliser votre intestin intérieur ici, donc ne vous inquiétez pas. Aussi, je pense que vous pouvez voir ici je l'ai fixé en deux colonnes. Donc, en ce moment, il est étendu à partir de cette colonne. Nous allons le contracter à partir d'ici. Nous allons le réparer en deux colonnes, comme ça. Déplaçons un peu plus en dessous de 10 pixels et un, deux. Il est en ce moment à 48 pixels du haut. Donc, nous allons utiliser Aler ici, donc 16 points de pixel, En savoir plus. Il a l'air vraiment cool. Changeons sa couleur en blanc, comme ça. Que se passe-t-il avec moi ? Pour l'icône ici, l'icône de flèche, j'ai utilisé ce plug-in appelé Font Awesome PS. Je vais chercher ici flèche, et il me montrera toutes les flèches à l'intérieur de cette police impressionnante. C' est la flèche que j'ai utilisée parce que finalement je vais la donner aux codeurs. Donc ce sera d'une grande aide s'ils peuvent utiliser cette flèche ici. Déplaçons cette flèche. Il place une très petite flèche, donc ne vous confondez pas où est ma flèche ou elle a été enlevée quelque part. Utilisons le blanc dès maintenant et déplacons la taille vers le haut. Je vais zoomer et contrôler T, et appuyez sur « Maj » et « Alt Shift Option », et nous allons augmenter la taille comme ça. Je pense que la taille est presque parfaite. Maintenant, nous avons créé notre bouton. Mettons le texte ici. ce moment, ne vous inquiétez pas de cette couleur de bouton. Nous allons donner une touche finale à la fin. Donc, c'est le texte. Je pense que j'aurais dû le copier avant de commencer ce cours ; quelque part comme ça, quelque part ici. C' est un peu d'inconvénient pour vous, mais je pense que vous devriez le supporter avec moi. Maintenant vous pouvez voir ici, c'est la zone que j'utilise. Maintenant, dès que cette zone finira par ici, ce bloc, je vais mettre mon texte ici. Je vais mettre du texte ici comme ce Control V. Ce sont deux couches, colorions avec ce gris maintenant. Je pense qu'ils ont beaucoup de séparation à cause de cette hauteur de ligne. J' ai donc fixé la hauteur de ligne à 24, et je pense que nous devons rendre celle-ci un peu plus grisâtre comme ça. J' ai donc utilisé cette couleur de bouton. Si vous concevez, il est préférable et sage d'utiliser d'abord des couleurs grises. Essayez donc d'utiliser des nuances de gris sur tout votre design plutôt que d'utiliser n'importe quelle couleur. Ensuite, à la fin, utilisez une ou deux couleurs pour tout mettre en évidence. Ceci est un autre bon conseil pour vous aider à démarrer et créer un très grand design. Passons à la leçon suivante où nous donnerons quelques touches finales à ce design. 39. Conception de HEer de héros partie 2: Ok, maintenant c'est la dernière session. Nous allons d'abord apporter l'écran de notre téléphone portable ici. Allons à l'écran mobile que nous avons téléchargé. Extrayons ça ici. Nous allons utiliser ce premier. C' est le premier. Ce que je vais faire, c'est juste cacher ce contexte. Vous pouvez apporter tout comme ça, Contrôle G et grouper ceci, Fenêtre Disposer et aller à Tile vers le haut verticalement et déplacer ici comme ça. Nous allons fermer ce 1.psd. Allons arranger les fenêtres. Consolidez tous les onglets comme ceci. Maintenant, c'est très grand. Gardons-le mobile, zoom arrière, Control T, Ok, et on va le déplacer comme ça. Appuyez sur « Entrée ». Maintenant, je vais m'excuser. Maintenant, je vais sélectionner ce groupe. Nous allons utiliser nos touches majuscules et fléchées pour le déplacer comme ça. Maintenant, ce que je vais utiliser, c'est que je vais utiliser 1, 2, 3, 4, 5 colonnes pour ce téléphone. ce moment, j'utilise presque six, donc ne vous inquiétez pas. Il va presque être là. Je pense que la taille est presque parfaite. Comme ça. Maintenant, vous pouvez voir que j'ai tendu un peu la main en bas et vous pouvez voir que la main sort. Ce que nous allons faire, c'est, nous allons le convertir en objet intelligent, déplacer vers le bas dans le conteneur. Ce fond blanc est spécifiquement le conteneur et le clipser comme ça. Cette main a été réparée. Cachons [inaudible]. Tout va bien en ce moment. Il y a peu de choses comme nous avons besoin de réparer la zone par ici. Ce que je vais faire, c'est que nous allons sélectionner ce bouton, en savoir plus arrière-plan du bouton, en savoir plus arrière-plan du bouton, aller à Styles de calque Gradient Overlay. Je vais utiliser cette orange pour ne pas se multiplier mais normal. Ça va être orange à jaune. Il ne devrait pas être radial, il devrait être linéaire. Je vais utiliser 180 de la gauche, l'angle est de la gauche, donc cette couleur vient de la gauche. Vous pouvez utiliser cette méthode à tout ce que vous voulez. Je l'utilise comme ça. Si vous voulez fixer les couleurs, vous pouvez aller de l'avant et utiliser plus de saturation ici comme 95 peut-être. Aussi pour cette couleur peut-être, il est très léger, faisons un peu terne. Peut-être 95 et saturation 100. Non, je pense que c'est très proche de cette couleur, donc je vais utiliser une autre couleur peut-être dans la zone jaune comme ça. Un peu plus jaune. Ok, maintenant ça a l'air super. Fondamentalement, je combine le jaune avec la couleur orange. Ils sont très proches dans le spectre, donc ils ont l'air vraiment agréable et dynamique. C' est essentiellement comme ça que j'ai créé ceci. Utilisons 1, 1, 2, 3, 4, 5, 6 et 1, 2, 1, 2, 3, 4. J' ai utilisé 24 ici, alors créons 24 ici aussi. Donc 1, 2, 1, 2, 3, 4. Donc 24 des deux côtés. Si vous le souhaitez, vous pouvez utiliser votre propre imagination et votre propre intuition pour les aligner. Si j'essaie de le déplacer ici peut-être 1, 2, 3, 4 pixels, ça a l'air bien. Aussi, cette flèche, si vous voulez la déplacer vers le haut, ou peut-être sur la gauche, peut-être sur la droite. Il a l'air de mieux maintenant. Si vous voulez avoir une ombre autour de ce bouton, sélectionnez celui-ci et je vais utiliser une ombre diffuse ici, donc comme ça. Ce que j'utilise, c'est que j'utilise 20 pour cent d'opacité pour l'ombre et créons l'ombre un peu plus près. La distance est de trois pixels. Vous pouvez utiliser neuf ou quoi que ce soit si vous voulez déplacer cette distance en bas comme ça. Je pense que peut-être six sera assez bon ou peut-être huit, c'est le moyen de votre hauteur de base, donc 16. Maintenant, il a l'air superbe. Si vous voulez changer la couleur plus subtile, vous pouvez aller comme ça. Ombre très subtile, très légère, ombre très diffuse. Appuyez sur « OK ». Je pense que nous avons terminé cet exercice. Pourtant, si vous pensez que cette zone a moins d'espace que celle-ci, vous pouvez baisser un peu ce bouton. Créons ces alignements. Nous allons utiliser notre intuition intérieure pour changer cela. Je vais utiliser ici, 1, 2, 3, 4, 1, 2, 3, 4, 5, 6, 7, 8. Il est presque aligné avec cette zone ou ce téléphone mobile bas ici. En outre, nous pouvons déplacer cette flèche et ce bouton. Regroupez-les au bouton. Déplaçons vers le bas, ou un peu vers le bas, 10 pixels vers le bas. Donc c'est mieux maintenant. Vous pouvez voir ici, encore si vous sentez, vous pouvez déplacer le bouton comme ça, je pense que c'était mieux ici. Peut-être 1, 2, 3, 4, pixels vers le bas. Ouvrez votre imagination, ne corrigez pas votre pensée que nous allons utiliser la base de référence, et cela ne sera pas dans la ligne de base. Utilisez votre imagination. Assurez-vous juste que cela va être dans toute cette zone, et aussi vous pouvez jouer avec la hauteur de la ligne si vous voulez. Si vous voulez, vous pouvez jouer avec la lumière de hauteur de ligne 64 ou peut-être 68, quelque chose de similaire à cela. Vous pouvez utiliser plus d'espace ici et vous pouvez envoyer le bouton un peu plus bas comme ça. C' est une façon. Une autre chose est, vous pouvez voir ici que notre alignement visuel est un peu désactivé. Pourquoi ? Parce que ceux-ci ont des bords et c'est rond. Si vous le regardez, vous pouvez voir qu'il regarde un peu à l'intérieur de cette zone, sorte qu'ils ne semblent pas alignés avec cette ligne. Comment vous pouvez corriger cela, vous pouvez déplacer ce paragraphe et ceci ici. Je pense que c'est un peu plus. Je vais utiliser 64, et je peux aussi le déplacer huit pixels vers le bas. Je l'ai déplacé huit pixels vers le bas, c'est juste mon goût. Je veux créer plus d'espace ici, donc je le déplace vers le bas. Aussi, si vous voulez sélectionner ce téléphone mobile et que nous allons le déplacer un peu plus comme ça. Peut-être déplacer le Samsung à l'intérieur. Déplaçons un peu vers le haut et un peu à gauche. Parfois, vous devez cacher vos notes et vos guides pour voir ce que le design est à venir et déplacer les choses autour librement. Maintenant, pour résoudre ces deux problèmes, nous avons nos deux zones de texte, nous allons les envoyer ici comme ça. C' était 10 pixels, alors déplacons-les en arrière 1, 2, 3, 4, 5. Je pense que cinq pixels, ou peut-être quatre pixels seront plus que suffisants pour les faire apparaître dans votre alignement visuel. Ceci est essentiellement appelé alignement visuel, bien qu'ils soient mathématiquement alignés, mais visuellement à nos yeux, ils ne semblent pas très alignés. Aussi, je pense que j'ai utilisé une police un peu régulière ici, alors passons à la police normale. Si vous voulez utiliser bold, c'est votre choix. Je pense que c'est un excellent exercice. J' ai partagé beaucoup de mes conseils de conception très spéciaux ou des conseils secrets avec vous, comme la façon dont je conçois, comment cacher les notes. Parfois, vous devez voir votre design de loin. Zoom arrière et voir à quoi il ressemble. Vous pouvez que ce texte soit trop éloigné. Peut-être que je dois changer sa hauteur de ligne à 60. C' est mieux maintenant. Peut-être que je peux le déplacer vers le bas. En ce moment, vous pouvez voir qu'il y a beaucoup de distance entre ce bouton orange et ce texte. Je peux le déplacer ici ou peut-être je peux déplacer le bouton un peu vers le haut. C' est tous vos choix. Comme ça. Je pense que maintenant c'est mieux. Cela ressemble à un bloc, celui-ci est continu. Ceci est séparé. C' est ainsi que nous créons des designs qui sont plus proches du niveau de dribble. Continuez à pratiquer, ne perdez pas votre concentration. Je pense que celui-ci a un peu floue parce que j'ai utilisé cette autre technique. Je pense que la prochaine fois, si vous voulez le déplacer ici, vous verrez qu'il est plus clair ici. Ne faites pas glisser les calques entiers, mais copiez et collez ici. Laisse-moi te montrer. Je pense que c'est mieux si je te montre comme ça. Masquer ceci, Contrôle A, Contrôle Maj C ou Copier Fusionner fondamentalement. C' est notre design en ce moment, et collons-le ici. Maintenez F5, convertissez-le en objet intelligent. Cachez le premier, qui est flou. Déplaçons ça par ici. Votre design doit être parfait, donc vous devez le déplacer comme ça. C' est le déplacer avec le conteneur. Aussi, voyez-vous que je suis en train de l'aligner sur cette zone presque au milieu. Voyons où est notre main en ce moment. Déplaçons un peu en bas comme ça. Maintenant, je pense que c'est parfaitement équilibré. Si vous voulez ajouter quelque chose ou essayer de créer quelque chose de similaire à lui, vous pouvez voir maintenant qu'il n'est pas floue à partir de zones ici. C' est ainsi que vous créez un design très cool, un design plus proche de la conception de niveau dribble. Maintenant, pour cette sélection de quatre, c'est le sujet principal ici. Maintenant, vous pouvez voir que j'ai sélectionné cette police bêta, qui est un peu, vous pouvez voir sinueux et avoir très des dalles. Il montre une forme solide. Nous avons une forme très solide et très innovante comme nous avons une très bonne courbes, surfaces courbes. Il semble très moderne, solide et très réglable et peut-être flexible entreprise. C' est pourquoi j'ai utilisé celui-ci, j'ai essayé d'utiliser Aleo, je pense qu'avant A-L-E-O je suppose, oui. J' ai aussi essayé d'utiliser Aleo ici. Si vous voulez changer, vous pouvez voir comment tout le message s'est déplacé vers le haut. Vous pouvez voir maintenant qu'il ne semble pas très solide ou audacieux société. Si vous essayez d'utiliser régulier, vous pouvez voir ici l'effet. Si je reviens à la police que j'ai sélectionnée, la bêta que vous pouvez voir a plus de poids et plus de valeur. C' est ainsi que j'ai choisi la bêta plutôt qu'Aleo pour cet exercice. Aussi, vous pouvez voir cette police Aleo il a une surface très arrondie, est des coins bien arrondis, et il est très lisible. J' ai essayé cette police et je pense qu'elle a l'air parfaite. Déplaçons ce récent un peu ici comme ça. Je vois un peu l'espace entre ces deux éléments. Sauvegardons l'exercice ultime 1. Je pense que vous avez apprécié cette leçon. Je vais créer beaucoup de tels exercices. Restez à l'écoute et continuez à regarder les mises à jour. Je vais vous envoyer les mises à jour, alors surveillez les. Passons à la leçon suivante. 40. Conception d'HEer -2nd thème: Maintenant, dans cette leçon, nous allons concevoir quelque chose de similaire à celle-ci. Il est très élégant et très puissant site Web d'affaires ou d'entreprise à site Web d'affaires avec beaucoup de solutions fournies à d'autres entreprises. Donc, à partir de la dernière leçon, nous allons convertir notre dernier exercice en celui-ci. abord, laissez-moi vous montrer quelles sont les polices et les couleurs que j'utilise. Vous pouvez voir que la couleur dominante est rouge ici, et l'arrière-plan est un peu texturé, cette architecture. Maintenant, vous pouvez voir que l'ensemble du thème a été changé en changeant simplement l'arrière-plan et quelques couleurs et quelques polices. C' est ainsi que nous allons créer et utiliser nos combinaisons de pensée ou de typographie et convertir un design en un autre thème totalement différent. Calculs, hauteur et largeur, tout est pareil, juste j'ai changé à travers les polices, qui est fondamentalement la topographie et peu d'images ici qui reflète cette organisation. C' est ainsi que vous convertissez un thème en un autre. Permettez-moi de vous montrer quelques-unes des polices et des ressources que j'utilise dans cette leçon. Maintenant, la police que j'utilise pour le logo est cette ARCHIVE TYPEFACE. J'adore vraiment ça. Il est très audacieux, très épais, et très techno-côté ou peut-être vous pouvez dire basé sur la technologie, très arrondi et droit. Ensuite, nous avons ce Clear Sans. C' est sans Serif moderne, je suppose, et il y a quelques courbes dedans. J' utilise Clear Sans pour le texte plus petit. Alors c'est une police premium que j'utilise, qui est Amsi Pro. Je l'ai acheté, je pense qu'il y a un an à cette époque, il a été lancé et je pense que je l'ai obtenu pour peut-être 26 ou 30$. ce moment, c'est pour 300$. Donc je vais te donner une autre alternative pour celle-là si tu n'as pas celle-là. Voici une alternative pour cet Amsi Pro. Si vous n'avez pas cette Amsi Pro, vous pouvez utiliser cette police Google qui est Muli. Vous pouvez utiliser la version légère ou la version extra légère de celui-ci pour le texte. Je vais vous montrer le document que nous allons concevoir. Voici notre Amsi Pro, et voici Muli. Donc, je vous montre les deux exemples. Vous ne remarquerez pas beaucoup de la différence. Donc, ce que j'ai fait est en fait j'ai sélectionné cette police, une partie du texte ici et j'ai utilisé la dernière chose de Photoshop qui est cette police de correspondance. Quand je corresponds à cette police, j'ai trouvé Muli ici. Donc c'était très proche. Je pense qu'il faudra un certain temps pour faire correspondre les polices. Alors donnez-lui un peu de temps et si vous avez une police similaire ou la mienne, vous pouvez aller de l'avant. Vous pouvez voir ici quelques polices qu'il a apparié. Aussi, je suis allé sur les polices Google pour voir à mes yeux quelle police va aider, et c'était ce Muli. Donc tu peux utiliser Muli ici. Il est très élégant, très unique. Vous pouvez donc utiliser Muli au lieu d'Amsi Pro. Donc, dans cet exemple, je vais utiliser Amsi pro. Il a quelques courbes et de très belles courbes arrondies autour d'elle, autour du texte. Donc j'adore ça. Donc, pour cette zone, nous utilisons Clear Sans, c'est aussi Clear Sans, c'est aussi Clear Sans. Pour ce logo, nous utilisons des archives et quelques couleurs ici, je les ai déjà assemblés. Commençons donc et voyons ce que nous pouvons trouver dans cette session de conception. 41. Conception de HEer de héros - 2ème thèmes partie 1: Maintenant, dans cette leçon, nous allons créer quelque chose de similaire à ça. Nous allons commencer à partir de notre conception précédente. C' est un thème totalement différent, il est très business like élégant, ou business premium thème. C' est un thème un peu énergique et créatif, il y a donc peu de différences comme le texte, les couleurs et les polices. Les courbes des polices, j'ai sélectionné des polices très différentes. Dans cette situation ici, vous pouvez voir qu'ils sont très droites, vous pouvez voir parfois audacieux, et un peu sérieux, comme les polices basées sur la technologie très sérieuses. Commençons, et changeons ce thème en celui-ci. Tout d'abord, nous allons changer l'arrière-plan, nous avons ce fond d'image. J' ai eu ces antécédents d'un endroit dont je ne me souviens pas. Voici mes antécédents. Il était à partir d'un site Web gratuit. Je vais le faire glisser et le déposer dans mon Photoshop ici comme ça. Il est presque parfaitement en forme et je vais juste le déplacer comme ça. Shift et Alt, pour le faire au centre comme ça. Vous pouvez avoir des choses pointues ici si vous le voulez. La deuxième chose que nous allons faire est d'ajouter une certaine opacité à ce conteneur. J' utilise 90 pour cent de ce conteneur. Effectuons un zoom avant et faisons d'autres changements comme changer ces polices ici. abord, nous allons changer ce logo et changer la police de ce logo qui était Archive. Archive Regular est la police et la taille est 36. Je vais le changer en Userable. Cela va être dans le rouge, donc je vais le changer pour cette couleur rouge qui est la couleur rouge mat ae5240. Vous pouvez l'obtenir un peu plus net, comme ça. Peut être augmenter la saturation un peu vers le haut. J' utilise cette couleur, puis supprimez cette ligne orange d'ici. Ensuite, la deuxième chose est que nous allons changer les polices de tous ces textes ici, ce texte liens ou navigation. Je vais sélectionner le personnage et je vais changer tous les liens à la fois. La police que nous allons utiliser est Clear Sans Regular. Il va être 18 pixels, n'oubliez pas cette hauteur de ligne, et puis nous allons changer quelques textes ici, quelques boutons, et quelques autres choses ici, aussi cette image. Le réglage final du réglage fin sera effectué à l'étape suivante ou à la prochaine leçon, alors ne vous inquiétez pas pour le moment. La distance et tout ce que nous allons les ajuster dans la prochaine leçon. Le texte que nous allons coller ici sera le texte que j'ai déjà écrit pour cet exercice. Je vais copier cela, nous fournissons des solutions puissantes, copier et je vais le coller ici. Ctrl+V ou Commande+V, double-cliquez pour mettre en surbrillance et je vais le changer en Amsi Pro Light, et la taille de la police était de 36, et la hauteur de la ligne est de 48. Comme ça. Maintenant, nous allons aller sur ce bouton, supprimer le dégradé, donc nous avons ceci. Ensuite, allez à ces propriétés, et nous allons utiliser quatre pixels pour la rondeur. C' est bon d'y aller, c'est bon. En savoir plus, la police est Aler, donc je vais la changer en Effacer Sans, qui est notre police pour le corps du texte. Ensuite, pour cette zone, nous allons également changer la police en Clear Sans Regular, et nous allons également changer le texte. Allons au texte ou au contenu ici, et nous allons copier ceci, et nous allons le coller ici dans Photoshop. Colle-le comme ça. Ensuite, nous allons souligner cela parce que c'est un lien, c'est une autre étape. Ce sera un lien, je vais utiliser bleu terne, couleur grisâtre. Nous utilisons essentiellement des couleurs ternes ici, c'est 376899. Nous allons aussi le souligner. J' utilise ce textile pour le souligner. Vous pouvez également utiliser le soulignement en mettant une ligne en dessous et je pense qu'il est plus efficace en ce moment, vous pouvez voir que c'est une ligne un peu floue par Photoshop. Le meilleur moyen est d'utiliser un outil de ligne ici et de dessiner une ligne manuellement comme ceci. ce moment, sa taille est de 10 pixels, donc je vais changer sa hauteur à un pixel. Permet de supprimer le soulignement de ce texte, vous pouvez voir ici. Maintenant, changez la couleur pour cela, et vous pouvez voir qu'il est plus vivant et plus précis. Je vais sélectionner ceci, déplacer un peu comme ça, vous pouvez voir qu' il a l'air plus net, et aussi vous pouvez changer la couleur de celui-ci. Ce texte à cela, aussi pour cela, je pense que quelque chose foiré. Maintenant, nous en avons fini avec la plupart des changements. Nous allons changer l'image ici si vous voulez changer l'image, ou vous pouvez mettre quelque chose ici comme peut-être en ce moment je vais copier cette zone ici et je vais la copier, copier fusionné, et je vais la coller par ici. Juste pour vous obtenir une démonstration, c'est une autre application que j'ai conçue. Je n'en suis pas vraiment fier, mais c'était une ligne de travail très étrange. C' est ainsi que nous avons changé l'image ici. En fait, cette image compte vraiment. Peu importe ce que vous concevez, le thème que vous concevez, cette image doit avoir des couleurs ou un schéma de couleurs similaire à ce thème. Si je conçois en bleus et en rouges, vous pouvez voir que ce sont nos bleus et rouges. Cela correspond vraiment à cela. C' est la principale raison pour laquelle nous utilisons tout ici. Vous pouvez voir que c'est l'exercice que nous concevons, je pense que je devrais fermer celui-ci. Pour éviter les erreurs, j'ai fermé celui-là. Nous travaillons sur ce domaine. Dans la leçon suivante, nous allons affiner et changer tout l'espacement autour, et je vais vous montrer comment je vais utiliser cette grille pour espacer ces trois zones. Ces trois sont très importants. Nous allons également utiliser un peu d'espacement autour de cette zone et de cette zone. Passons donc à la leçon suivante. 42. Conception de HEer de héros - 2ème thèmes partie 2: Maintenant, dans cette leçon, nous allons affiner ce design. Ajustez certains problèmes d'espacement et d'espace qui est, vous pouvez dire, une partie très importante de votre conception. Fondamentalement, votre conception va s'améliorer et obtenir plus d'attention ou plus de forme et de forme avec ces problèmes d'espaces blancs. Ce que je vais faire, c'est tout d'abord, cette zone ou ce texte, notre titre principal, nous allons le déplacer vers cette ligne de flux supérieure. Ces lignes sont essentiellement appelées lignes de flux. Ces lignes. Il s'agit essentiellement de modules ou de zones spatiales. Vous pouvez voir ici, ce sont quelques modules. C'est un. Maintenant, ce que je vais faire, c'est de l'aligner en haut le long de cette ligne. Maintenant, pour celui-ci, ce bouton, je vais l'aligner au milieu de ce module. Cette zone ici, je vais en prendre le milieu. C' est vraiment utile. Pourquoi ? Parce que vous pouvez voir que cela prend tout cet espace et cela prend tout cet espace. Maintenant, encore une fois, je vais répéter cette zone, ce même patron, et ce que je vais faire , c'est que je vais aligner ça avec cette, encore une fois, ligne de flux. C' est ainsi que j'ai parfaitement aligné mes textes pour un meilleur espacement. Ici, nous avons de l'espace comme ça. Si nous pouvons essayer de l'améliorer, peut-être que nous pouvons l'améliorer avec un peu plus de hauteur de ligne, peut-être 52, quelque chose comme ça. Ou peut-être qu'on peut augmenter ça à 38, quelque chose comme ça. Cachons les lignes de flux et nos guides et voyons à quoi il ressemble. Peut-être que ça devrait être 36. Trente-huit avait l'air bien. Passons à 54, activons les lignes et elles ont l'air bien. Les distances entre ces deux sont superbes. Même si vous voulez utiliser 48, il aura toujours fière allure. Toute la distance sera harmonieuse. C' est comme ça que j'ai traité cette zone. Maintenant, pour cette zone, vous pouvez voir par ici, nous devons avoir le même espace par ici. Activer nos guides et supprimer ce guide ici. Aussi, je vais déplacer ce guide en haut comme ça, et un guide, je vais placer ici. Maintenant, nous allons sélectionner ce conteneur, Contrôle et cliquez ou Commande cliquez sur ceci, et nous allons utiliser Griddify pour obtenir un espacement de 42 autour d'elle en haut, comme ceci, et aussi à partir d'ici comme ceci. Je pense que 42 a l'air trop, peut-être. Essayons-le. Maintenant, ce que nous allons faire, c'est que nous allons aligner notre navigation sur ces lignes ici, comme ça. Donc 42 est l'espace que j'utilise en haut et en bas, comme ça, qui a l'air bien. Aussi, je vais faire la même chose pour cette utilisable. Je vais l'aligner à la croix de tout ça. Maintenant, vous pouvez voir comment il a l'air vraiment cool, vous pouvez voir l'espace autour de cette zone. C' est très gérable, très agréable. C' est l'avantage des marges vivantes autour de votre design. Maintenant, tout semble bien. Il y a un peu de petit problème qui est, vous pouvez le voir, cette main est un peu transparente en arrière-plan et aussi dans ce fond d'architecture derrière. Maintenant, ce qui se passe ici, c'est que ce téléphone est coupé à l'intérieur de ce conteneur et que le conteneur est essentiellement opacité de 90 pour cent. C' est un peu transparent, 10 pour cent de transparence. Il prend les propriétés de ce conteneur. Ce que nous allons faire, c'est que nous allons décliquer ça comme ça, et nous allons utiliser un masque. Commande, cliquez sur ce conteneur, puis allez sur le téléphone, et cliquez dessus. Donc, nous avons terminé, nous avons terminé cette conception. Si vous avez des questions, posez-moi. Si vous voulez d'autres exercices ou quelque chose que vous avez en tête, vous pouvez m'envoyer un message. Si quelque chose a l'air bien, je vais vraiment essayer de mettre à jour ce cours. Je vais ajouter un exercice de plus à ce cours, puis je vais m'arrêter parce que j'ai presque transmis beaucoup de conseils et de techniques de conception liés à l'espacement et à l'utilisation de la grille. Si vous avez d'autres questions, posez-moi. Faites-le moi savoir. Si vous rencontrez des problèmes, vous pouvez aller de l'avant et me demander à tout moment. Si nécessaire, vous pouvez configurer une vidéoconférence avec moi. L' un des étudiants l'a déjà fait. Passons donc à la leçon suivante. 43. Exericse sur les règles de publicité sur réseau social → Preperations: Dans cet exercice, nous allons concevoir quelque chose de similaire à cela. Vous pouvez l'appeler une annonce sur les réseaux sociaux, une annonce à rabais ou une annonce imprimée. Vous pouvez le concevoir même dans Illustrator ou Photoshop ou n'importe quel outil que vous voulez, mais la base de ce design restera la même. Ce que je vais faire, c'est que j'utilise un modèle unique en arrière-plan. Ensuite, j'ai ce fond de superposition au-dessus de ce motif. C' est un peu transparent. Ensuite, nous avons du texte en trois polices différentes et quelques couleurs comme celle-ci, orange pâle et cette couleur jaune. Tout d'abord, je vais vous montrer toutes les ressources que j'ai utilisées dans cette conférence. Voyons les ressources et où vous pouvez obtenir toutes ces polices parce que j'ai mélangé trois polices ici. L' un est un peu que vous pouvez dire très large et très grand comme celui-ci. C' est Aileron, et donc un peu, vous pouvez dire script-ish police, et ensuite nous avons cette police arrondie, très audacieuse Signika. Laissez-moi vous montrer toutes ces ressources. abord, nous allons voir quelles autres polices j'utilise. Celui-ci est des polices Google Signika Negative. C' est le top que j'utilise. Vous pouvez voir ici, c'est la nature très sinueuse et très ludique. Ensuite, nous avons cette police Antre, qui vient d'un type, Taner Ardali, Istanbul, Turquie et elle se connecte vraiment avec la lettre suivante très bien. Vous pouvez voir par ici. C' est un autre. Ensuite, la troisième police que nous utilisons est par TipoType Aileron, et c'est une police gratuite, vous pouvez télécharger à partir d'ici, taper « zéro » ici et Ajouter au panier et vous pouvez télécharger toute sa grandeur. Ce sont trois polices. Puis passer aux autres éléments. J' ai utilisé ce truc de type doucement éclaboussures ici, cet art floral ou ce que vous pouvez appeler ça. Ensuite, il y a ce fond ici, ce modèle. Je les ai téléchargés gratuitement et je vais vous montrer un site où vous pouvez télécharger toutes ces choses gratuitement. C' est essentiellement ce site. Creative Market vous montre toujours six téléchargements gratuits chaque semaine et vous donne ces arrière-plans, icônes, pinceaux parfois, polices. C' est le paquet de cette semaine. J' ai téléchargé ces quelques semaines comme celui-ci, ce Ditsy Floral Digital Pattern par, je ne sais pas, par JSquarePresents, et puis j'ai téléchargé celui-ci. Je les ai achetés gratuitement donc je ne vous recommande pas de les acheter, mais vous pouvez vous abonner ou créer un compte sur ce site et vous pouvez obtenir des téléchargements gratuits chaque semaine. Peut-être que vous pouvez trouver de telles choses en ligne sur Google en cherchant. Peut-être que vous pouvez les trouver gratuitement, mais j'utilise ces deux éléments. Motif floral numérique Ditsy et éléments de conception de fleurs dessinées à la main. Commençons. Passons à la leçon suivante où nous allons commencer cette leçon et concevoir. Passons à la leçon suivante. 44. Conception d'annonces de réseaux sociaux Partie 1: Dans la dernière leçon, nous avons examiné les ressources de cet exercice de conception. Commençons. Je vais ouvrir un nouveau fichier et la taille sera 1.400 largeur et 900 pixels hauteur. Appuyez sur « OK » et voici notre tableau d'art. Pour convertir ce calque en arrière-plan, il suffit de le nommer en arrière-plan et nous allons aller au calque, nouveau et arrière-plan à partir du calque. Nous pouvons aligner les choses avec cela parce qu'il est verrouillé. Maintenant, nous allons créer une boîte intérieure sur cela parce que nous avions celui-ci et ce calque jaune et ensuite nous avons le texte à l'intérieur. Nous avons en fait un et deux rectangles sur ce fond. Nous allons créer un autre rectangle. Cliquez sur l'outil rectangle que vous appuyez sur « U » sur votre clavier et appuyez une fois comme ceci et la taille devrait être de 1 200 par 725. Vous pouvez ajuster sur votre côté si vous le souhaitez, mais j'ai calculé toutes ces tailles avant afin que nous puissions mettre en place rapidement. Alignez-les au milieu et maintenant nous avons besoin du troisième. Le troisième rectangle sera à l'intérieur de ce rectangle qui sera notre principal tracé jaune. Il sera en fait 900 par 500 pixels. Celui-ci a été créé mais vous ne pouvez pas voir les calques car il s'agit d'une autre couleur en ce moment. Nous allons l'aligner au milieu de ce rectangle. Appelons-les en conséquence. C' est notre dos transparent. Ce sera un peu transparent, alors celui-ci est notre principale bordure jaune. C' est ainsi que nous allons concevoir cette zone, en fait ce que nous avions c'est que nous avions ce rectangle comme notre jaune, il avait un trait jaune. Réglons le trait jaune aller à la couche, effets de couche, et nous allons aller à la course, et la couleur est F-F-E-9-9, appuyez sur « OK ». La taille du trait est de six. Je le mets à l'extérieur et c'est tout ce que vous pouvez cliquer sur « OK » alors vous pouvez aller à remplir, appuyer sur zéro, et ici nous avons notre rectangle jaune. Maintenant, pour le motif en arrière-plan, nous pouvons créer, qu'est-ce que c'est, un nouveau calque ici, remplissez-le avec tout ce que vous voulez. Contrôle + Alt supprimer pour le remplir, comme ceci. Je l'ai rempli de cette couleur. Maintenant, ce que nous allons faire est de créer un modèle à partir de ce fichier. Je vais le laisser tomber dans Photoshop comme ça, juste ignorer les couleurs et nous allons créer un motif. Contrôlez A, sélectionnez tout cela, et allez à éditer, définissez le motif et c'est notre motif, fermons le, et sur ce calque 1, qui était notre calque d'arrière-plan, juste un calque. Nous allons utiliser ce calque pour notre motif, donc calque de motif. Faisons le colorer quelque chose d'autre pour que ça ne se sente pas très bizarre. Peut-être celle-là, donc ça se sent différent de l'autre. Ne vous inquiétez pas de la couleur car notre motif va superposer sur ce design. Allez à la fin et vous verrez ce modèle. Revenons à 100 pour cent. L' opacité devrait être pleine et elle a l'air très grande. Peut-être qu'on peut s'accrocher à une région. Nous pouvons réduire sa taille à 50 pour cent ou 25 pour cent, 25 pour cent est superbe. Appuyez sur « OK » et nous avons notre modèle. Changeons la couleur de celui-ci à ce ton de terre. C' est un peu du ton de la terre, vous pouvez voir ici. Peut-être cette couleur ou celle-ci. C' est un mélange de rouge et de graisse. Pour faire ce ton de terre, vous pouvez utiliser celui-ci. Je pense que celui-ci est plus proche. Maintenant, nous allons le rendre un peu transparent en changeant cette opacité à 90 pour cent. Vous pouvez voir que notre expérience est déjà terminée. Créons un motif ici. La taille du motif sera de 500 x 110 pixels, ce sera aussi un rectangle ici comme ça. Déplaçons le au-dessus de cette fenêtre, et nous allons la colorer avec un peu de couleur orange, peut-être celle-là, une orange plus nette ou cette orange. Quelles que soient les couleurs que tu aimes, je pense que ça n'a pas l'air très bien ici. Peut-être qu'on a besoin d'un peu plus de couleur. Quelque chose comme ça. Zoom arrière et voyons à quoi il ressemble en ce moment. Je pense que cette couleur orange a l'air quelque chose d'un peu bizarre. Celui-ci a l'air mieux. Je vais utiliser une couleur un peu plus nette ici. Aussi cette couleur me semble un peu étrange. Je ne sais pas pourquoi, mais il manque quelque chose. Maintenant, ça a l'air super. Ne vous inquiétez pas pour les derniers détails, nous pouvons le régler à la fin. On peut changer de couleur pendant une heure donc je ne veux pas que tu perdes ton temps ici. 45. Conception d'annonces de réseaux sociaux Partie 2: Tout d'abord, nous allons créer notre rubrique, qui sera en Signika négatif. Sélectionnez la police. Vous avez déjà installé la police, recherchez ici Signika. Il y a deux polices, Signika regular et Signika négatif. Je vais utiliser Signika négatif gras, et la taille sera de 170 points. Ce n'est pas une règle difficile et rapide, ne vous inquiétez pas où j'ai trouvé cette taille, en fait. Je viens d'expérimenter et j'ai découvert que c'est la meilleure taille qui correspond à la ligne suivante, laissez-moi vous montrer 35 pour cent OFF. Maintenant, dans cet exercice, je ne vais pas contracter cette taille. Je ne vais pas le déplacer un peu plus petit. Déplaçons-le au milieu. Créons un autre calque et nous allons utiliser la police Andre regular. Nous allons utiliser la ligne surprise d'été et la taille devrait être 83 points. Maintenant, vous pouvez voir qu'il est presque la même taille que le haut. Vous pouvez voir que les bords sont un peu arrachés, cela se passe à cause de ce suivi, je suppose. Nous allons le mettre à zéro. Maintenant, ils sont en fait rencontrés la lettre suivante. C' est bon, jusqu'à présent, si bon, nous allons créer une autre couche. Ce sera le texte Dépêchez-vous. Quel était le texte ? Dépêchez-vous d'expirer le 31 juillet. On va écrire ici, vite. La troisième police que nous avons utilisée était Aileron Regular et nous allons réduire sa taille à 50 points. Vous pouvez voir ici, il est presque la taille d'ajustement ici, il est en fait égal à la taille au-dessus de la surprise estivale. Maintenant, la ligne suivante qui était le code coupan d'été, certains disent le code coupon. Je dis le code coupan, alors ne vous inquiétez pas. Été 16. Il sera large et nous devrions le déplacer au-dessus de ce bouton. Je vais utiliser une version plus légère de cette police en ce moment. Ce doit être toutes les capsules, donc nous allons utiliser celle-ci. Déplaçons ça dans ça, je vais l'aligner au milieu. Vous pouvez les utiliser. J' ai créé des touches de raccourci personnalisées que j'ai expliquées dans mon autre cours, où j'ai créé beaucoup de raccourcis clavier personnalisés pour Photoshop. Il y a encore une chose, on doit le faire en exposant. On l'appelle exposant ? Oui, exposant. Maintenant, juste pour être sûr qu'il va s'aligner avec tous les meilleurs, nous allons augmenter son suivi, il est presque égal au sommet. Surprise estivale. Pourquoi on a des surprises d'été ici ? Allons les aligner et utiliser cet espacement vertical. Il est encore un peu décalé, donc nous allons tout bouger au milieu comme ça. C' est à vous de décider, vous pouvez laisser ce message plus près de celui-ci, ou vous pouvez les séparer avec le même espace. C' est à vous de décider ce que vous voulez. Vous pouvez également créer quelque chose comme ça, comme j'ai deux messages de promotion principaux en haut, puis l'action en bas. J' ai donc séparé ces deux domaines en deux domaines différents. Aussi, si vous voulez arrondir ce rectangle, vous pouvez aller dans ce panneau de propriétés et obtenir un peu de rondeur. Peut-être que c'est plus proche de cette équipe. C' est en fait une surprise d'été, ou vous pouvez dire la vente d'été. Je vais ajouter une chose de plus. Je vais ajouter de l'ombre portée à ce modèle. Il va être plus proche de ce modèle. Comme ça, vous pouvez voir ici, un peu d'ombre qui sort et vous pouvez augmenter l'opacité de cette ombre. Peut-être que c'est assez bon. Nous avons presque terminé cet exercice. Si tu veux que quelque chose change dans ça, désolé, j'ai la mauvaise orthographe de l'été. Maintenant, c'est la surprise estivale et peut-être que nous devons changer la taille à 81 points, ajuster en fonction de vos besoins. Encore un petit détail. J' ai laissé le truc swoosh. C' est celui que j'ai utilisé. C' est l'art clipart. Je vous ai montré les ressources avant donc je vais juste le faire glisser dans Photoshop comme ça. Nous allons réduire sa taille. Tournez-le comme ça. J' appuie sur Shift donc il tourne avec les angles que j'ai spécifiés dans Photoshop. Si vous ne le savez pas, alors vous devriez aller à ces préférences et vous devriez définir les tailles ici. On est ici, je ne me souviens pas, mais je pense que c'est dans ce contexte. Vous pouvez les trouver ici. Mon Photoshop ralentit. Il a l'air très grand, donc je vais le presser un peu plus. Ça a l'air presque parfait. Nous allons lui donner une superposition de couleur parce que nous ne voulons pas un swoosh noir par ici. Color overlay, peut-être que vous pouvez utiliser celui-ci. C' est à vous de décider. Vous pouvez utiliser le blanc ou le gris ou tout ce que vous voulez. Assurez-vous que l'opacité des couleurs est de 100 %. C' est un Control J, et je vais le déplacer ici. Je vais contrôler T ou Command T sur votre Mac. Donc, remplacez, chaque fois que je dis contrôle, vous le remplacez par la commande flip horizontal et appuyez sur OK, et rendez-le un peu plus près de celui-ci. Maintenant une chose, assurez-vous que cet espace de cette ligne, cette frontière à ceci, cet espace est égal à l'espace autour d'ici. C' est une chose que vous devez vous assurer. Maintenant, vous pouvez voir que nous avons presque terminé notre exercice. Peut-être qu'on a besoin d'un bouton plus grand parce qu'il me semble un peu plus petit. Aussi, si vous voulez, vous pouvez les rapprocher ou peut-être plus spacier, c'est à vous de décider comme ça. Alors peut-être le rendre plus espacier. Aussi, je pense que le bouton est un peu plus petit pour moi donc je vais augmenter sa taille. Je pense que c'est trop. Peut-être que la hauteur va être de 120 pixels, c'est bon. Maintenant, peut-être que je dois le déplacer. Ce ne sont que les derniers détails. Vous pouvez les utiliser quand vous le souhaitez, ou les essayer et simplement verrouiller cela. Je vais sélectionner celui-ci, le déplacer un peu vers le haut, ou peut-être plus près de ça. Donc c'est logique. Je vais aussi déplacer ces deux-là un peu plus haut comme ça. Alors créons un groupe de tous ces éléments supérieurs. Bougez-les un peu vers le haut. Je pense que nous avons ici l'équilibre parfait. Maintenant, si vous voulez ajouter quelque chose de plus à ce design, vous êtes libre d'y aller. C' est juste un exercice pour créer quelque chose de similaire à, vous avez peut-être vu beaucoup d'annonces sur les réseaux sociaux comme ceux-ci, afin que vous sachiez comment les créer. Maintenant vous pouvez voir, je vois qu'il y a moins d'espace ici qu'ici. Donc, vous pouvez voir ici, il est équilibré. On a plus d'espace ici. J' ai ajouté cela intentionnellement, donc nous allons l'ajouter ici. Alors rends-le un peu plus grand comme ça. Donc, vous pouvez voir est un peu d'espace plus équilibré. On a besoin d'un accroissement de taille comme ça. C' est ainsi que nous utilisons notre propre jugement et nos compétences intestinales pour aligner les choses et concevoir des choses. Donc peut-être qu'on a besoin d'une couleur orangée plus nette comme ça. C' est mieux, je suppose. Celui-ci est mieux. Aussi, nous avons besoin de plus de tons de terre, alors peut-être que nous devons nous déplacer un peu. Peut-être qu'ici, celui-là a l'air bien. Donc, cela vient avec la pratique. Le sens de la couleur n'est pas facile à développer. En outre, cette typographie compétences ne sont pas plus faciles à développer. Vous pouvez voir toutes ces polices sont bien ensemble. Celui-ci est un peu sérieux, ou vous pouvez dire un peu lisible, plus lisible parce que je voulais que l'utilisateur lise exactement ce qu'il est. C' est très grand, donc je peux faire preuve de créativité avec ces domaines. Donc surprise d'été car il est utilisé dans une très grande police. Il est donc bon d'aller avec la police de script, donc plus facile à lire. Assurez-vous que vous n'avez pas trop de suivi dans la lettre. Il devrait donc toujours remplir un script plutôt qu'une police de script cassée. Donc maintenant, nous avons cette zone de contenu interne. Alors faisons-les tous ensemble. Et celui-là, déplace-le ici. Alors regroupez-les ensemble. Encore une fois, j'appuie sur Maj. C' est donc notre contenu de conception principal. Je fais toujours ça parce que nous devons bouger ça et l'aligner. Donc, je ne sais pas ce qui se passe, pourquoi cela ne correspond pas à nos antécédents. Alors déplacons-le vers le haut. Donc nous avons une couche verrouillée à l'intérieur de celle-ci. Il suffit de déverrouiller ça et nous allons le déplacer. Maintenant, c'est presque parfait, donc c'est très proche de ce design. Je crois que j'avais plus de couleur pêche ici. Quelle est la couleur, quelle est cette couleur ? B10. Donc, il est plus dans la teinte orangâtre et il est dans le mélange orange grisâtre. Donc vous pouvez voir ici, ici nous avons curseur de couleur. Donc, ici, nous avons un peu de couleur plus foncée. Je pense que ce n'est pas toujours parfait, dire que copier tout de la même conception. J' essaie donc de créer quelque chose de différent à chaque fois. Donc, ça a l'air un peu plus. Peut-être que j'ai besoin d'une couleur plus claire comme celle-ci. Nous avons donc créé cet exercice. Nous allons créer une nouvelle alternance ou une nouvelle variation pour celle-ci, qui était, je suppose, celle-ci. Donc, nous le ferons dans la prochaine leçon. Nous allons utiliser cette couleur vive Sian, très Sian. Donc, nous le ferons dans la prochaine leçon. Alors restez à l'écoute pour de tels exercices et continuez à collecter différentes polices, essayez de les combiner et de créer des designs en utilisant cette technique de motif de fond. Il suffit donc d'ajouter un peu de contexte dans votre conception. Donc ça ressemble à un modèle de vêtements, à votre chemise ou à votre chemise de femme, quelque chose comme ça. Passons donc à la leçon suivante. Encore une chose, n'oubliez pas de télécharger les fichiers d'exercices, les fichiers PSD, les fichiers originaux que je vais inclure. Donc aussi, j'inclurai tous les liens vers toutes ces ressources de conception comme toutes ces polices que j'ai utilisées. Passons donc à la variation suivante dans la prochaine leçon. 46. Touches finales de conception d'annonces de réseaux sociaux: Bonjour les gars. C'est le même design que nous avons fait dans la dernière leçon. Je viens de faire quelques ajustements. Je suppose que je devrais les partager avec vous. La première chose est que j'ai déplacé tous ces éléments au centre. Je réduit la taille de ce texte de 50 points à 45, juste un peu plus grand que ce bouton. Si vous voulez l'aligner avec le bouton, je pense que c'est bon, mais ça me fait mieux comme là. Suivez également ce contexte, c'était quelque chose de plus près de ce domaine. Grisâtre et orange. Je l'ai déplacé dans une partie supérieure un peu plus où il est plus de couleur pêche. Quelque chose de plus proche de ça, ou peut-être celle-là. Ensuite, la troisième chose que j'ai fait est que j'édite un effet, vous pouvez voir ici il est orange et ici c'est une couleur pêche rougeâtre. Ils sont comme le schéma de couleur pêche tout à fait. Couleurs rougeâtres et orange, si jamais vous avez vu une pêche, toutes ces couleurs sont de la pêche, je suppose jaune, cette couleur et cette couleur de bouton. Ce que j'ai fait, c'est que j'ai ajouté une ombre intérieure avec cette couleur, e55f50. Ce que j'ai fait, c'est que je viens de déplacer le curseur un peu vers le bas et c'est tout ce que j'ai fait. J' utilise la distance de réglage 81 parce que j'ai besoin d'une très bonne zone couverte ici. Vous pouvez également le faire avec une superposition de dégradé. Il y a beaucoup de choses que vous pouvez faire pour appliquer le même style. La taille est 128. C' est ce que j'ai fait. Aussi, j'ai changé la taille de celui-ci, je pense qu'un peu 81 points. Je l'ai déplacé de 83 à 81 points. C' est tout ce que j'ai fait. Je pense que ça a l'air parfait. Je t'ai montré ça parce que je crois que le design est progressif. Vous essayez de l'améliorer encore et encore. Si vous concevez quelque chose et qu'il n'a pas l'air très bien, levez-vous de votre siège et revenez peut-être plus tard après 30 minutes et recommencez votre conception. J' ai ajouté quelques choses ici. Je vais partager ce PSD avec vous, n'oubliez pas de télécharger ce PSD. C' est tout au sujet de cette conception, dans la prochaine leçon, nous allons concevoir la version alternative de celui-ci. Juste nous allons changer quelques couleurs. C' est tout, tout le design restera le même. Passons à la leçon suivante. 47. Exercice de conception Juicy - Préférences: Dans cette série de leçons, nous allons créer cet en-tête de recette de repas frais et juteux . Je vais faire beaucoup de variations, alors laissez-moi vous montrer les variations. Tu vois que c'est celui que je t'ai montré. Ensuite, nous avons ceci avec le bouton ovale et différentes polices ici. Ensuite, nous avons la troisième qui est avec une autre police comme celle-ci partagée par Venessa Malik ou quelque chose comme ça. Ce sont essentiellement quatre polices différentes combinées ensemble et je ne suis toujours pas sûr de la quatrième, mais je suis très beaucou- comme cette combinaison, ces trois combinaisons. L' un est très gros et vous pouvez dire le type squeezy, coin arrondi et la police ludique et drôle, amusante , celle-ci. C' est bon pour ce thème, qui est frais et juteux. Alors rappelez-vous l'exercice dont je vous ai parlé, j'ai un exercice précédent où nous avons eu cette sélection de polices à thème. Cette sélection de polices est basée sur ce thème. Ensuite, nous avons des repas sains, donc il est juste pour être plus ouvert et autoritaire que ce sont des repas vraiment sains. Ensuite, nous avons cette police de script utilisée ici pour Browse Recepie. Peut-être que c'est pour l'intimité ou peut-être la proximité avec votre client ou quelque chose comme ça. Donc, il est fondamentalement vraiment agréable avec ces trois combinaisons. Je vais vous montrer dans cette leçon que, où les ressources que j'ai eu pour cet exercice ? Toutes ces polices sont gratuites, je vais vous montrer ces trois. Ok, une police est ce Blenda Script. J' ai utilisé cette police, c'est une police gratuite et vous pouvez voir ici, licence ; Gratuit pour un usage personnel et commercial. Vous pouvez télécharger cette police et l'installer. Ensuite, nous avons cette police Damion, donc aussi télécharger et installer celle-ci. Je vais partager les liens pour ces ressources, alors téléchargez-les. Celui-ci est Gilroy, Il est une police premium, mais ils ont deux polices gratuites avec elle. Si vous naviguez vers le bas, vous pouvez voir celui-ci est zéro, Gilroy Light et il y en avait un de plus, Gilroy Extra Bold, c'est aussi zéro. Alors téléchargez ces deux polices ou vous pouvez aller à Font Squirrel et télécharger ces Gilroy. Il a également ces deux mêmes polices. Ensuite, nous avons cette image. Je l'ai obtenu de picjumbo.com et c'est le lien, oranges fraîches sur le marché des petits agriculteurs. Je pense qu'une police de plus était cette Douzaine de polices gratuites et je l'ai téléchargée à partir de ce freedesignresources.net. Donc vous pouvez voir ici personnel et commercial, il est gratuit et conçu par Kenny LKC. Téléchargez donc toutes ces ressources avant de commencer cet exercice. Allons de l'avant et creusons dans la conception de cet exercice impressionnant. 48. Exercice de conception typographie en Juicy Partie 1: Maintenant, commençons et créons cet exercice génial, frais et juteux. Nous allons commencer par un nouveau fichier. La taille sera 1920 d'ici 1080, et le contenu d'arrière-plan, ne pas gérer la couleur de ce document, cliquez sur « OK ». Tout d'abord, nous allons faire glisser notre image ici, alors faisons glisser l'image. Nous allons faire glisser l'image vers le Photoshop et nous allons la déposer. Il sera converti en un objet intelligent et nous allons le mettre à l'échelle comme ça. Ne l'agrandissez pas trop, c'est déjà sur les frontières. Nous allons appuyer sur Entrée, et c'est notre plan de travail ou fond principal qui est prêt maintenant. Sélectionnez ce calque et nous allons le convertir en calque d'arrière-plan. C' est un bug avec ce Photoshop ici, donc il a disparu mon arrière-plan. C' est essentiellement le plan de travail. J' ai supprimé le plan de travail en le sélectionnant, et mon arrière-plan est de retour. Maintenant, nous allons lancer des polices dessus, et tout d'abord, nous allons sélectionner cette police douzaine, qui était notre police principale. La taille sera de 96 points. J' utilise presque cette échelle, donc la taille sera cette, fraîche et juteuse. Contrôle A, Contrôle Alt H, pour centraliser. Ce sont mes raccourcis personnalisés. Si vous ne savez pas comment les créer, vous devriez regarder mon autre cours, conception de l' interface utilisateur dans Photoshop. Celui-ci est créé, maintenant maintenant nous allons créer ce rectangle arrondi ou peut-être ce rectangle. Créer comme ça. Utilisez simplement votre largeur de tête pour les proportions, comme ceci. Nous allons le colorer en blanc, et nous allons déplacer ce frais et juteux vers le haut. D' abord, nous allons changer le rayon du coin. Allez dans ce panneau de propriétés pour ce rectangle, et ce coin sera 60, et déverrouillez-les. Nous allons choisir différents paramètres pour eux, comme ça, 60, 60, 0, et 0. Laisse-moi juste le colorer autre chose pour que tu saches qu'il est là-bas. Ce qu'on va faire, c'est d'abord placer ça dans ce rectangle, comme ça. Il regarde un peu vers le haut, alors utilisez votre centre visuel. Il y a deux centres dans une refonte. L' un est calculé par machine et l'autre est calculé par vos yeux. Je suis en train de le déplacer vers le bas. Mes yeux pensent qu'il est au centre. Maintenant, il est presque au centre. C' est presque parfait. Maintenant, ce que nous allons faire est que nous allons contrôler cliquer dessus pour sélectionner cette sélection de calque, cette police. Ensuite, nous allons sélectionner ce rectangle, le rectangle ci-dessous, et inverser la sélection, Contrôle Shift I, puis cliquez sur ce masque. Vous pouvez voir ici, il a créé un masque. Celui-ci est ce calque que notre pour la sélection est presque transparent. Si vous ne comprenez pas, je vais répéter cette étape. La première étape était que nous allons sélectionner cette couche. Contrôle cliquez sur ce pour sélectionner cette sélection, puis inverser la sélection, Contrôle Shift I. Nous avons sélectionné tout le reste, cette zone à l'intérieur de ce texte. Inverse la sélection, puis cliquez sur ce calque, puis cliquez dessus. Maintenant, vous pouvez masquer cette police et vous pouvez voir que ce calque a été vidé. Encore une chose que j'ai oublié, nous allons utiliser une grille modulaire ici. Nous allons diviser tout ce contexte en sept divisions. Pourquoi sept ? Parce que notre conception est fondamentalement centralisée, tout est centralisé, donc nous utilisons essentiellement deux modules en haut pour l'espace et deux en bas, et trois à l'intérieur de cette zone. Trois modules ici vers le haut, nous allons vous montrer pour que vous puissiez mieux le comprendre. Avec Griddify, je vais le diviser comme ça dans cette direction avec ceci. Je vais à Control Colon pour montrer ma note. Si vous n'avez pas Griddify, vous pouvez utiliser cette vue ici, ainsi que la nouvelle mise en page du guide. Laissez-moi vous montrer une autre façon. Effacons ces lignes directrices, claires sur Canvas, et nous allons créer une nouvelle mise en page de guide. Dans cet exemple, nous n'avons pas besoin de colonnes car tout est centralisé. Ce qu'on va faire, c'est qu'on va avoir besoin de lignes, sept rangées sans gouttière. Comme ça. Aussi, si vous voulez supprimer les marges, c'est mieux. Sept lignes, vous pouvez créer une mise en page de guide comme ça. Ici, nous avons ce rectangle presque terminé. On le déplace vers le bas sur ces oranges comme ça. Je pense que c'est mieux. Maintenant, nous allons sélectionner la deuxième police qui va être notre Gilroy. Il s'agit essentiellement d'une police géométrique. Je vais utiliser Gilroy juste ici, et nous allons écrire des repas sains dans tous les casquettes. Si vous vous souvenez, nous avons utilisé tous les capuchons pour les en-têtes, donc nous allons l'utiliser, colorer en blanc. On doit le dimensionner un peu plus bas, peut-être 60. Déplace-le ici au milieu, Contrôle A. Faisons-le au milieu, comme ça. Encore une chose, nous allons utiliser un peu de suivi pour l'ouvrir, comme ça. Je pense que 75 sera bon, comme ça. Ça a l'air un peu petit pour moi, peut-être que je pense qu'on devrait utiliser 72. Soixante-dix deux, c'est bon, 72 et 96, ce sont deux tailles de police que nous utilisons en ce moment. Je vais le déplacer un peu vers le bas, comme ça. La prochaine chose, c'est que nous allons créer un bouton ici. Pour le bouton, nous allons utiliser le rectangle arrondi, ou peut-être juste le rectangle, rectangle régulier, et nous allons créer un bouton comme celui-ci. Maintenant, oublie la couleur en ce moment, nous allons utiliser un trait ici, un trait de quatre pixels. Il devrait être blanc, et il devrait être à 100 pour cent opaque. Nous allons l'utiliser à l'extérieur. Maintenant, une chose que nous allons utiliser ce remplissage à zéro. Je vais te montrer un truc de plus maintenant. Maintenant, nous allons ajouter la troisième police pour celle-ci, qui était Damion, je suppose. Oui, c'était Damion. Celui-ci, Damion régulier, et nous allons écrire ici la recette de navigation. Je viens d'ajouter un S ici. Maintenant, nous allons le dimensionner jusqu'à 36. Non, je pense que 36 est trop petit. 48, 48, c'est trop grand, alors on va trouver un juste milieu, peut-être 42. Ne vous inquiétez pas pour la balance. ce moment, nous utilisons notre propre imagination ou tout ce que vous pouvez voir. Maintenant, nous avons presque notre bouton par ici. Maintenant, ajoutez une flèche à la baisse. Encore une chose que vous pouvez voir, que notre texte n'est pas visible. Maintenant, c'est un truc simple. Comme notre arrière-plan est rempli, nous avons déplacé le remplissage à zéro pour cent, ou nous utilisons un remplissage ici. Vous ne pouvez pas remarquer est ce remplissage en ce moment, mais il est là. Nous avons assombri l'arrière-plan un peu en dessous ce texte et vous pouvez voir qu'il a l'air génial. C' est le truc que j'ai utilisé ici. Vous ne le remarquerez peut-être pas, mais vous pouvez voir ici, 5 % de remplissage. ce moment, j'utilise 12 % de remplissage. Tu peux l'installer là où tu veux, donc j'aime ça ici. Maintenant, nous allons ajouter une flèche ici. Pour cela, nous allons utiliser notre super police. PS cette extension. Si vous ne savez pas comment l'installer, vous devriez aller et tel pour elle, police impressionnante extension PS et l'installer. J' ai parlé de toutes ces extensions et extensions secrètes dans mon autre cours, qui est la conception de l'interface utilisateur pour Photoshop. Donc ce qu'on va faire, c'est flèche, alors peut-être qu'on doit écrire. Celle-ci, c'est ce dont nous avons besoin. Allons le dimensionner un peu plus haut. Peut-être ici, déplace-le vers le bas, contrôle un mouvement, ça au centre. Aussi, nous devons jumeler ça. C' est un bouton. Alors nommez-le bouton. Nous allons utiliser la superposition de couleur pour cette flèche, nous allons utiliser la couleur blanche. Je vais tout aligner au même milieu. Maintenant, vous pouvez voir, nous avons déjà créé beaucoup de bonté. Maintenant, il y a peu de choses supplémentaires que j'ai faites ou tu peux. Tu ne peux pas voir maintenant, laisse-moi te montrer. Si vous regardez ces repas sains, il y a une ombre rouge autour d'elle. Ensuite, dans ces repas juteux, vous pouvez voir qu'il y a une ombre ici dans ces zones. Donc, ces petites touches ou détails ont vraiment un impact ou créent un très grand impact sur l'utilisateur. Vous ne le ressentirez peut-être pas très instantanément, mais c'est là. Donc pour ce repas, je vais utiliser une ombre portée et la couleur va être cette lecture de 4 000 bf. Vous pouvez aussi goûter la couleur d'ici, par ici, ou peut-être par ici, c'est à vous de décider. Comme ça. Vous pouvez échantillonner une couleur de l'image comme celle-ci. Je l'ai échantillonné d'ici en ce moment. Maintenant, voici comment vous pouvez utiliser 30 pour cent multiplier, garder la même distance à un minimum de deux et trois pixels. Pas trop, mais c'est à votre goût. Si vous voulez l'augmenter, vous pouvez l'augmenter. C' est ainsi que nous avons utilisé. Si vous voulez ajouter une autre ombre, ajoutons une autre. Maintenant, ce que nous allons faire, c'est que nous allons ajouter une ombre sombre ici et nous allons la répandre comme ça. Comme ça. Ce que nous faisons, c'est en fait, laissez-moi vous montrer l'effet. Si j'ai essayé de cacher ça, vous pouvez voir l'effet aller et revenir. En fait, nous le rendons plus visible ici. Donc, si j'ajoute une ombre portée ou une ombre portée très répandue autour d'elle, vous ne sentirez pas que l'ombre portée est là, mais cela rendra vos textes plus nets et faciles à lire. Vous pouvez voir si j'essaie d'augmenter la multiplication de cet effet, vous pouvez le sentir comme ça. Aussi, je vais augmenter cela un peu. Il a l'air vraiment génial. Quatre. Passons à la normale plutôt que de se multiplier. Appuyez sur OK. Maintenant, il a l'air superbe et je pense que nous l'avons presque terminé, nous avons juste besoin d'un autre ici. Donc, sur cette couche, c'est notre couche principale fraîche et juteuse, couche fraîche et juteuse et nous allons ajouter une autre ombre ici, ombre portée comme ça. Ce ne sera pas celle-là, ce sera le rouge. Maintenant, ce qu'on va faire, c'est qu'on va le garder très petit comme ça. La distance serait d'un pixels ou deux pixels, quelque chose de plus proche de cela. Faites-le 35 pixels, et faites-le deux et celui-ci trois. C' est ainsi que j'utilise cet effet. Peut-être que vous pouvez plus alléger cet effet, le rendre plus léger comme ça. 15, non, 15 est à la lumière. 25, c'est bien. Si vous voulez essayer, vous pouvez essayer quelque chose comme ça. Vous pouvez voir comment cet effet s'éteint. Donc, gardez cette taille au minimum. Peut-être que deux pixels, c'est bon. Aussi cette distance, vous pouvez voir comment il se déplace toute la zone au-dessus et vers le bas. Gardez-le aussi trop minimum, je pense que deux pixels sont plus que suffisant, vous ne pouvez pas aller au-delà car il affichera plus de zones déformées ici en bas. Donc c'est bien. Je pense que nous avons presque terminé notre exercice. Dans le prochain exercice, nous allons faire quelques variations et aussi nous allons le rejoindre pour les détails fins. Passons donc à la leçon suivante. 49. Exercice de conception typographie en Juicy partie 2: Dans cette conférence, nous allons faire quelques retouches finales qui sont vraiment importantes pour obtenir la forme réelle de votre design. Nous avons presque tout terminé, mais il est en train de regarder en raison de certains problèmes. Je vais créer la grille, je ne sais pas pourquoi elle ne montre pas ma grille. Où est ma grille ? Désolé. Je veux juste mes lignes de grille ici. Maintenant, vous pouvez voir la distance en haut, c'est un problème avec beaucoup de nouveaux designers, c'est plus que la distance en bas. C' est ce qui rend notre design un peu, vous pouvez dire, « Pas en harmonie ». Nous allons utiliser notre tête dans ce jeu. Maintenant, cette flèche, je vais la déplacer vers le bas de 1, 2, 3, 4, ok, 24 pixels. Nous allons faire en sorte que ce bouton reste là où il se trouve. Nous allons déplacer ces deux couches supérieures en haut un peu comme ça. Peut-être comme ça. Maintenant, la prochaine chose que vous allez faire est de continuer à cacher et à montrer vos guides de lignes de grille et de voir si cette conception a l'air équilibré ou non. Si vous voulez le déplacer vers le bas ou peut-être que vous devez le déplacer vers le haut, voici comment cela fonctionne. Vous allez le déplacer de haut en bas. Vous pouvez aussi faire quelque chose comme ça. J' ai juste la moitié des lettres là-dessus et le reste des lettres comme ça. Tu peux cacher cette ombre, il suffit de garder l'ombre rouge. Aussi parfois les gens colorient ceci, autre moitié de couleur, et l'autre est coloré dans une autre couleur. Aussi, vous pouvez voir ici nous avons un problème comme nous avons un autre élément qui vient à l'intérieur de cela. Ce que nous allons faire, c'est que nous allons dupliquer notre calque, ce calque d'arrière-plan, et nous allons l'ajuster. Nous allons le déplacer vers le haut. Nous avons un problème ici parce que l'image originale est maintenant perdue. Faisons un peu plus grand comme ça, plus proche et plus grand. Déplacez-le comme ça, et nous avons nos oranges fraîches et juteuses dans le cadre. Maintenant, déplaçons un peu ces repas sains par ici, je pense que ça a l'air bien. Peut-être que je pense que nous pouvons déplacer ce bouton et cette flèche un peu vers le haut, peut-être 1, 2, 3, 4, 5 , 6, 60 pixels en bas. Nous devrions également mesurer celle-ci aussi. Donc 1,2, 1,2,3,4, nous avons 24 et 60 pixels ici. Pourtant, je pense qu'il manque quelque chose. Donc je vais le déplacer un peu comme ça, et nous allons encore le déplacer plus vers le haut, un peu plus vers le haut. Ouais, je pense que ça va mieux maintenant. Si vous voulez le rendre plus mince parce que ce bouton prend plus de place. Donc, nous allons le rendre un peu mince. Allez à cette hauteur et faites-le 85 pixels, quelque chose comme ça. Il a l'air mieux. Nous avons besoin de plus de concentration et d'énergie ici dans ce domaine, pas sur ce bouton, alors rendez-le mince. Aussi, je vais voir si ce texte est aligné avec ce bouton. Maintenant, je pense que nous avons presque terminé cet exercice. Peut-être qu'on a besoin de remonter un peu ce fond comme ça. Rends-le plus grand comme ça. Je pense que nous avons fait cet exercice, nous avons presque terminé l'effet final. Aussi, si vous voulez le rendre plus grand, vous pouvez le rendre plus grand comme ça. Donc, il a plus d'effet comme celui-ci. Une autre chose que vous pouvez faire, vous pouvez déplacer ces repas sains en haut et vous pouvez déplacer cette flèche un peu haut comme ça. Peut-être qu'on peut déplacer le bouton, peut-être qu'on a 1 et 1, 2 comme ça. Si vous essayez d'augmenter la taille de ce bloc, il va augmenter en taille proportionnellement, alors ne vous inquiétez pas à ce sujet. Maintenant, je vais revenir à mes paramètres précédents. Je ne veux pas qu'il ait l'air trop grand. Je pense que nous devrions déplacer la taille de celui-ci un peu plus bas. Maintenant, il a l'air plus équilibré. Les repas sains sont un peu plus petits, c'est 60 pixels, c'est 96, et c'est, je pense 42. Faisons 40, 42 est un peu plus grand à mon goût. [ inaudible] et je vais bouger un peu vers le bas. Juste en le centrant visuellement. Maintenant, c'est notre dernier exercice. Ce sont vraiment importants, ces dernières touches. Maintenant pour le bouton, je vais changer le bouton, et nous allons utiliser l'autre bouton ici, comme nous l'avons fait avant, et c'était notre bouton Eclipse, 190 par 190, et je vais le placer sur ici. Maintenant, nous allons utiliser la police Blenda Script sur cela, donc je vais sélectionner le script blenda. Maintenant, je vais le centraliser, ici comme ça, et aussi je vais rendre la taille un peu plus petite, 32 pixels, cachant le bouton en bas. Aussi, je pense qu'il est très petit, alors faites-le un peu plus grand. Verrouillons à la taille et augmentons sa hauteur à 200 pixels comme ça. Nous allons aussi avoir besoin de cette flèche angle-bas, donc je vais utiliser cette flèche ici, et nous allons la déplacer vers le haut de cette éclipse. C' est notre flèche. Vous pouvez utiliser une flèche, vous pouvez la dupliquer, c'est à vous de décider. Maintenant, en ce qui concerne ce script de navigation, nous avons beaucoup de suivi ici, alors gardons les près parce que c'est une police de script. Dans les polices de script, assurez-vous toujours que vous n'utilisez pas trop de suivi, cela va séparer leur effet comme ça. Vous pouvez voir qu'ils ont l'air bien quand ils sont très proches comme ça. Assurez-vous donc toujours qu'il est défini sur 0 sur les polices de script. Si vous voulez le rendre plus grand comme 36, ok 36 semble mieux. Laisse-moi te montrer un truc de plus par ici. Si vous allez à ce S, et vous pouvez voir que nous avons quelques autres fonctionnalités disponibles ici. Ceux-ci sont appelés ligatures ou plus d'entités dans la police de type ouvert. Si je passe à ce style alternatif, vous pouvez voir comment cette swash est arrivé en dessous mes recettes S. Aussi, vous pouvez donner ce même effet à ce E, si vous sélectionnez ceci, vous pouvez voir ici. C' est ainsi que nous pouvons utiliser des effets alternatifs et des caractères alternatifs pour la même police de caractères. Cette fonctionnalité n'est pas disponible dans toutes les polices ou polices, elle est disponible dans peu d'entre elles. Donc, toujours chercher ces options ici. Si l'un est activé, vous pouvez l'utiliser. Je vais revenir en arrière maintenant. Peut-être que cela semble mieux pour moi, je ne l'aime pas en très petite taille, donc si vous avez une police de très grande taille, vous pouvez utiliser ces effets alternatifs. Dans la petite taille, je ne recommande pas d'utiliser ces croix de terminaisons florales. Donc c'est notre prochain. Nous pouvons dupliquer cette flèche et la déplacer vers le bas et réduire son opacité à 50 pour cent ou peut-être 30 pour cent, ce que vous voulez et comme vous le souhaitez. Je pense qu'une flèche est plus que suffisant ici, alors utilisez-le comme ça. Maintenant, pourquoi cette couleur est superbe sur cela parce que je l'ai échantillonné d'ici. Ainsi, vous pouvez échantillonner la couleur d'ici. Peut-être ce panier par ici. C' est ainsi que j'ai créé la deuxième alternance pour ce design, et je pense que cela va finir mon travail ici. Je ne recommande pas que nous ajoutions une autre police ici. Si vous voulez vraiment une autre police, j'ai utilisé celle-ci. Voici mon étudiant Saqib Ameen. Donc recette par Saqib Ameen et la police que j'utilise vraiment. Une police géométrique et celle-ci est également géométrique, donc deux polices géométriques un script et une police un peu arrondie et amusante. Vous pouvez ajouter une police géométrique ici si vous le souhaitez, et vous allez l'ajouter dans le dernier module ici dans cette zone. Tenez-moi au courant de ce design. Je vais partager ce PSD avec vous. Donc je vais le sauver dans la partie 2 juteuse et me dire si vous pouvez créer quelque chose comme ça. C' est aussi un exercice, essayez de créer quelque chose comme ça. Vous pouvez également changer le titre ici, comme peut-être un mélangeur juteux, ou quelque chose comme ça. J' espère que vous avez apprécié cette leçon, et si vous rencontrez des problèmes, ou si vous ne connaissez pas les touches de raccourci, vous devriez me contacter ou suivre mon autre cours qui est la conception de l'interface utilisateur dans Photoshop. Prenez soin, et passons à la prochaine leçon. 50. Taille de point (PT) dans des appareils IOS: Tout d'abord, vous devez comprendre quelles sont ces tailles de points parce que toutes les tailles pour la conception de l'iPhone sont en points. Vous devez donc comprendre deux concepts ici. L' un est des points et l'autre est ce 1x, 2x et 3x, donc on l'appelle fondamentalement densité de pixels. Maintenant, l'iPhone d'origine quand il est venu, il avait un petit écran et la densité de pixels était 1x, donc cela signifie que si les spécifications de l'iPhone sont 320 par 480, cela signifie même devrait être dans les pixels. Si vous voyez ci-dessous, il est traduit en pixels. Donc 1x signifie que c'est la même chose, et que sont les points ? Les points sont essentiellement des unités de mesure relatives pour Android. Ils ont différents DP et SP et pour iPhone c'est des points. C' est la taille de l'écran, 320 est la largeur, 480 est la hauteur. Maintenant, si vous venez à l'iPhone, qui est l'iPhone 5, vous pouvez voir 320 largeur est la même et le 568 est la hauteur. Maintenant, si vous voyez des tailles de pixels réelles, sa taille réelle de pixel est le double de ses points. Ainsi 320 multiplier par 2 est égal à 640, 568 multiplié par 2 est égal à 1,136. Maintenant, un point est fondamentalement égal à deux pixels. Ici, nous avions dans l'iPhone d'origine, un point est égal à un pixel, maintenant nous avons un point égal à deux pixels. Cela se poursuit jusqu'à ce que nous atteignions cet iPhone 6 plus, qui ont 414 points. Donc 414 multiplié par 3, il est donc 3x. Chaque point contient 3 pixels, sorte que chaque point est égal à 3 pixels, il est donc 1242 pixels réels, et il est échantillonné par iPhone 6 appareil à 87 pour cent pour être à 1080 par 1920 taille haute définition. Gardez à l'esprit toute cette relation que nous avons des points, qui sont en fait propres iPhones unités de mesure relatives. Donc, tout sera en points, même votre taille de texte, dont nous discuterons dans la prochaine conférence sera en points. Si vous concevez pour cette taille, 320 par 480 dans Photoshop, vous n'avez pas à modifier la taille de votre police. Vous devez utiliser la même taille de police et elle sera de 320 par 480 car vos pixels et points correspondent. Donc, si vous essayez de concevoir pour iPhone 5, alors vos points seront différents. Aussi dans ce, parce que nos pixels, maintenant pixels ont un rapport différent dans cet écran. Ici, nous avons doublé les pixels, ici nous avons triplé les pixels dans le même écran. Donc, avant de concevoir une application iPhone ou quoi que ce soit, vous devez comprendre toute cette relation entre les points et les pixels. Voici une autre très bonne explication de la taille de l'écran par ce gars de Kyle. Je l'ai trouvé en ligne. Kyle Larson. Vous pouvez voir ici est la taille réelle de l'écran, 5,5 pouces, alors nous avons la taille de l'écran en points, multiplier par 3x, et les pixels rendus devraient être 1,242 par 2,208 pixels. Ensuite, il est échantillonné par des pixels physiques, qui est pixel de l'appareil, sur l'appareil, ils vont être affichés 1080 d'ici 1920. C' est ainsi que tous ces points et points sont convertis en pixels réels. Ce sont les pixels que nous allons concevoir pour 1 242 par 2 208. Voici une comparaison relative dans Photoshop, donc je vais partager ce fichier PSD avec vous, alors ne vous inquiétez pas à ce sujet. Ce sont quatre plans de travail différents. Si vous ne connaissez pas les plans de travail, vous devriez voir mon autre cours sur la conception de l'interface utilisateur pour les débutants. C' est l'iPhone d'origine, c'est 320 pixels. Donc je suis juste en train de calculer la largeur. Je ne montre aucune hauteur. Donc 320 pixels sur l'iPhone d'origine est 320 points. Donc, c'est la taille de l'écran. Puis sur l'iPhone 5, nous avons 2x, donc c'est presque un double. Donc 320 points, mais la taille de l'écran sur notre document Photoshop est 640 pixels de largeur. Ensuite, nous avons 375 points et 750 pixels de largeur, c'est un double. Ensuite, sur l'iPhone 6 Plus, c'est l'iPhone 6 Plus, donc nous avons 1 242 pixels, qui est en bas de l'échantillon à 1 080 pixels. taille réelle du point est de 414 points. Permettez-moi de vous montrer un exemple dans Photoshop sur la façon dont nous allons mettre à l'échelle toutes ces choses, tous ces écrans. D' abord, nous allons ouvrir le premier écran, iPhone original. La norme est de concevoir à l'aide de cet écran. Donc, il est 1x. Donc toujours concevoir en 1x plutôt que 2x ou 3x. Donc je vais cliquer ici. C' est notre tableau d'art. Donc, je vais utiliser Sensitive Compact Display, semi-gras, 32 points dit mon titre. C' est mon cap. Mettons un texte fictif par ici. Mettons le texte factice. Je vais mettre 16 points ici et je vais utiliser le type, coller Lorem Ipsum. Réglons sa hauteur de ligne à 24. Changeons la couleur pour qu'elle ne soit pas si différente de notre rubrique. Maintenant, nous avons mis en place ce plan de travail, qui est notre iPhone d'origine. Maintenant, comment nous allons concevoir notre deuxième écran ou troisième écran, alors allez à cette taille d'image. Vous pouvez facilement doubler jusqu'à 640 et vous assurer que tout est sélectionné comme ceci. C' est sur le cadenas. Donc ces deux-là sont verrouillés. Ils vont augmenter les uns avec les autres. résolution sera de 72 pixels, le même rééchantillonnage plus cliquez sur « OK ». Maintenant, c'est l'écran de notre iPhone 5, donc il est 2x. Je l'ai multiplié à 2x. Vous pouvez voir ici 640 x 960. Notre taille réelle est différente, mais ne vous inquiétez pas pour le moment. Maintenant, vérifions les tailles de police. J' ai double-cliqué sur cette police, c'est 32 points. Vous pouvez voir que Photoshop a automatiquement doublé ma taille de police. Avant, il était 16 points pour mon texte, maintenant il est 32 points. Assurez-vous que c'est ainsi que la mise à l'échelle se produit. Si je reviens à la taille d'origine et je vais à la troisième 3x, et donc ce dont j'ai besoin ici est 3x signifie 320 par, c'était quelque chose comme 1,080 peut-être. C' était 1 242. Donc je vais utiliser 1 242 et appuyer sur « OK ». Ceci est mon iPhone 6 plus écran. Voyons comment les tailles ont été. Donc, vous pouvez voir que ma taille de cap a été augmentée à 124 points et ma taille de pont est de 62. Je pense qu'il devrait être 64 en fait. Maintenant, le problème est entre cette multiplication de ces quatre tailles. Ce qui se passe ici, c'est que Photoshop essaie de multiplier et d'ajuster nos tailles de police. Assurez-vous que vos tailles de police sont multiples de deux. Si elles sont multipliées par trois ou quelque chose comme deux ou trois, il devrait y avoir une valeur entière. Maintenant, 16 devrait être 3 multiplié par 3, 16 trois sont 48. Je suppose que c'est la bonne taille. Ensuite, pour la rubrique, il devrait être 32 multiplié par 3 est 96, il devrait donc être 96. C' est notre rubrique et elle devrait être de 96 points. Quelque chose comme ça. Non, je ne sais pas pourquoi Photoshop l'a mis à l'échelle différemment, mais il y a une autre façon de le mettre à l'échelle. Je vais tout changer à ma taille d'origine, qui est celle-là. Maintenant, j'ai téléchargé quelques actions qui sont liées à la mise à l'échelle par les actions d'échelle B Django. Vous pouvez voir par ici. Si vous ne savez pas comment installer les actions, vous devriez regarder mon autre cours où j'ai discuté de toutes les bases de Photoshop. Maintenant, nous allons l'augmenter à 300 pour cent. Je sélectionne ça et joue. C' est ainsi qu'il a été mis à l'échelle à 300 pour cent. Maintenant, vous pouvez voir les tailles sont parfaites, donc je préfère que vous devriez utiliser ces actions. J' inclurai le lien pour augmenter ou réduire l'échelle. Alors réduisons la taille comme ça. Maintenant, tout est question de points et de pixels, et comment nous allons utiliser différentes tailles de types et comment ils passent d'une taille à l'autre. C' est ainsi que nous multiplions notre taille lorsque nous concevons dans quelle résolution ? Soixante-dix deux pixels par pouce. Il y a une autre façon dont je discuterai dans les prochaines leçons que la façon d'ajuster différentes tailles de police. Nous utiliserons une résolution de 144 et 216 pixels par pouce ici. Pour cette leçon, je voulais juste que vous compreniez comment ces pixels et points fonctionnent les uns avec les autres et comment nous allons mettre à l'échelle notre conception 1x, qui était, celui-ci était le design réel qui était sur 320 x 480. Nous l'avons amélioré en 200 pour cent et 300 pour cent et essayons d'utiliser ces actions B Django. Ce sont vraiment de grandes actions. Il s'agit de la mise à l'échelle, du type de point, pixels physiques et des points, et du rendu à 2x ou 3x Retina ou 3x, quelle que soit la rétine. Passons à la leçon suivante. 51. Spécifications de typographie IOS: Dans cette leçon, nous allons examiner les directives d'interface humaine d'Apple, sont appelées « Directives d'interface humaine iOS ». On va regarder la section typographique. Vous pouvez lire tout à ce sujet ici. Si vous voulez télécharger, vous pouvez aller à Ressources et télécharger les polices pour les personnes qui utilisent Mac, je pense qu'ils ont peut-être déjà installé ces polices de San Francisco, donc il y a deux polices essentiellement. L' un est le texte de l'interface utilisateur de San Francisco et l'affichage de l'interface utilisateur de San Francisco L' affichage est pour les en-têtes et le texte de l'interface utilisateur est pour les paragraphes et le texte de petite taille. Leur spécification est si vous avez 19 points sont plus petits que vous devriez utiliser le texte de l'interface utilisateur de San Francisco et si nous avons 20 points ou plus que nous devrions utiliser police d'affichage parce qu'ils sont faits pour des tailles de texte plus grandes. Voici quelques points supplémentaires sur les directives iOS. Souligner les informations importantes. Nous savons déjà comment utiliser le poids de la police, la taille et la couleur. Ensuite, si possible, utilisez une seule police parce que mélanger trop de polices peut être un peu bâclé, cela peut également ralentir votre application ou quelque chose comme ça, donc c'est la suggestion. Si vous pouvez utiliser cette police de San Francisco, vous devriez l'utiliser car il s'agit de police système. Il sera chargé facilement dans votre application. Pour les utilisateurs Windows, vous devriez télécharger votre police San Francisco à partir d'ici. C' est le référentiel GIT. Aussi, vous pouvez Google à ce sujet puis télécharger la police San Francisco pour Windows. Vous trouverez sûrement beaucoup de liens il suffit de le télécharger et de l'installer sur votre PC. Voici quelques spécifications si vous utilisez l'affichage de l'interface utilisateur de San Francisco, qui est pour les en-têtes, il y a une ligne ici qui est la taille de la police à 2x, 144 P PI. Fondamentalement, il dit qu'à 2 x, aux écrans de rétine pour iPhone 55 S, 6, pas 6 plus. Ce sont des tailles pour ajouter 2x écrans je pense que nous avons discuté tout cela dans la leçon précédente. Ce sont les tailles de police en points. C' est le suivi. Le suivi est essentiellement l'espacement des lettres que nous avons entre dans notre texte ou dans notre paragraphe. Nous allons ajuster cela en utilisant le suivi de photos et ce sont quelques tailles de police pour nos en-têtes. Maintenant à ce texte de l'interface utilisateur de San Francisco, il y a beaucoup de tailles différentes en points. Encore une fois, nous avons beaucoup de suivi. Vous pouvez voir que lorsque la taille est très faible, suivi est très élevé parce que très petit texte n'est pas lisible si les lettres sont très proches les unes des autres. Ensuite, nous allons concevoir quelque chose comme ça pour la taille originale de l'iPhone 1 X, 2 X et 3 X. iPhone, vieux iPhone régional iPhone, iPhone 4, je suppose, iPhone 5,6 et iPhone 6 Plus. Passons à la leçon suivante. 52. Concevoir des écrans IOS à multiples résolutions avec Photoshop: Créons une planche d'art avec toutes ces tailles différentes. Nous allons créer un nouveau fichier avec ce tableau d'art. Nous allons utiliser notre taille est 320 par 480. Appuyez sur « OK ». Maintenant, nous allons ajouter un autre écran ici. Il s'agit d'iPhone quatre ou d'anciens iPhones. Ensuite, nous allons cliquer sur cette icône plus et nous allons sélectionner iPhone 5 ici et cliquer sur ceux ici. Cela va être l'écran iPhone 5s. Ensuite, nous allons en ajouter un autre ici. Nous allons en créer un autre ici. Je vais cliquer sur iPhone 6 et cliquer ici une fois. Ensuite, je vais en créer un autre ici, qui est l'iPhone 6 Plus. Le dernier a été sélectionné. Je vais cliquer sur celui-ci et je vais appuyer ou mettre en surbrillance comme ceci. Maintenant, zoomez et vous pouvez voir ce sont tous les écrans. Allons les aligner. C' est une ligne à celle-là. Je contrôle les clignote pour les aligner. Alors, tous nos tableaux d'art sont prêts, alors commençons. D' abord, je vais commencer avec notre plus petit écran, qui est 1x. Je vais utiliser mon texte de l'interface utilisateur de San Francisco. D' abord, je vais tracer quelques marges autour de lui. Maintenant, je vais utiliser Photoshops, par défaut, GridLayout et supprimons les colonnes. Nous allons utiliser quelques marges au sommet, 20, 20, 20 et 20. C' est notre cadre. Nous allons concevoir dedans. J' ai caché tous les autres tableaux d'art afin que nous puissions facilement y concevoir. Je vais sélectionner le texte ici. Je vais cliquer et faire glisser comme ça. C' est notre rubrique principale. Notre titre doit être de 32 pixels ou 32 points. Je vais définir la taille de 32 points à partir d' ici, nous avons une taille de point différente est de 32 et 12 points de suivi. Ici j'ai, nous allons zoomer sur un 100 pour cent. Maintenant que notre document est prêt, nous avons fixé les marges autour d'elle. Nous allons utiliser l'outil de texte et tracer une ligne ici pour obtenir notre titre. Nous allons utiliser 32 points avec l'affichage de l'interface utilisateur de San Francisco. Nous allons utiliser semi-gras. Je vais écrire ici ceci, mon long et long cap, et c'est juste pour le plaisir. Je vais déplacer la hauteur de la ligne à 1,5. Je pense que si le suivi était 12e, je suppose que le suivi était de 12 points. Le suivi est réglé sur 12, et je vais le définir à 36 pixels comme hauteur de ligne, donc c'est mon titre. Changeons la couleur à cette couleur bleue. Maintenant, nous allons ajouter un peu plus de texte ici. Je vais sélectionner ce Lorem Ipsum, Lorem Ipsum. Nous allons utiliser 14 points avec 21 points de hauteur de ligne, et il est moins 11 dans lignes directrices de l'interface humaine de San Francisco IS. On va le régler pour qu'on ait besoin d'un peu de couleur terne, quelque chose comme ça. Maintenant, nous allons zoomer un peu plus pour voir l'espacement. un autre texte qui est publié le 6 mai 2016. Je vais sélectionner ce t et h, et je vais utiliser cette commande pour le faire en exposant ou en indice. Je ne sais pas ce que ça dit. C' est un exposant. Maintenant, nous allons changer la couleur de cette rubrique. Cette date. Ils ont changé la couleur en gris terne. Alignons ça à cette ligne, comme ça. Mode, maintenant nous allons utiliser 12 points ici pour la date et je vais voir quelles sont les spécifications pour le suivi pour 12. On va utiliser le zéro ici, comme ça. Voyons comment ça va. Je pense que pour 14 points, c'est moins 11, donc ça devrait être moins 11. Tout est mis en place alors copions-les sur nos autres tableaux d'art. Maintenant, nous allons utiliser tous ces paramètres et tout ce texte, et nous allons le dupliquer sur nos autres tableaux d'art, alors nous allons zoomer. Je vais traîner mon tableau d'art ici, les aligner avec ça. Maintenant, je vais sélectionner tout le texte, supprimer ce calque vide, aussi, celui-ci dans un groupe. Vous donnez juste un nom de texte, et je vais utiliser Alt et le faire glisser vers le suivant. Cachons d'autres, tous les autres tableaux d'art comme ça. Il suffit de zoomer sur ce 100 pour cent. Maintenant, si vous vous souvenez, nous sommes en ce moment dans iPhone 5. iPhone 5, maintenant ce que nous allons faire c'est nous allons dimensionner ces textes et nous allons « contrôler T ». Nous allons changer la largeur de cela aussi. Faisons le pour cent et nous allons le changer à 200 pour cent. C' est comme ça que nous allons tout adapter ici. Comme ceci, et si vous voulez définir les marges, vous pouvez définir les frais généraux des marges. Maintenant, si vous vérifiez les tailles de toute la force, vous pouvez voir qu'il est parfaitement doublé. Les 64 points et tout le reste est le même. Si vous le voulez, parce que nous avons plus de hauteur, vous pouvez le faire glisser comme ça, et nous pouvons avoir plus de textes ici. C' est ainsi que nous allons utiliser d'autres écrans avec cela, donc nous avons terminé deux écrans. Je n'utilise aucune marge, vous pouvez utiliser les marges, vous pouvez utiliser les marges sur chacun de ces écrans. Peut-être doubler les marges ou les augmenter de 10 pixels, ce que vous voulez le mieux. Passons maintenant à la suivante, qui est l'iPhone 6. Maintenant, nous allons copier à nouveau ceci et nous allons faire glisser ici sur notre écran iPhone 6. Vous pouvez voir que la taille de notre texte doit être la même. Juste nous avons un peu plus de taille d'écran en pixels ou taille d'écran physique. Nous allons simplement augmenter nos tailles, tailles paragraphe dans la largeur et aussi dans la hauteur. Aussi, nous pouvons aller à la rubrique et nous pouvons le faire glisser et le rendre égal à notre paragraphe. Maintenant, nous avons plus d'espace ici pour que nous puissions le déplacer. Maintenant, vous pouvez voir comment cela va changer sur différents écrans parce que nos tailles d'écran et les dimensions d'écran, nous avons plus d'espace sur certains écrans et certains sur certains schémas, nous avons moins d'espace. Gardons-tout pareil. Essayez de copier toutes les distances entre les différents éléments de la même manière. Si vous voulez appliquer le rythme vertical, vous allez l'appliquer parce que si j'essaie d'appliquer verticalement alors non, je pense que cette conférence durera 30 minutes. Je ne veux pas que ce soit aussi long. Ici, nous avons le dernier écran, qui est l'iPhone 6 plus. Maintenant, je vais à nouveau sélectionner ceci et je vais appuyer sur « Alt » et le faire glisser ici comme ceci. Maintenant, c'est notre iPhone 6 Plus. Je vais renommer ce tableau d'art. Maintenant, vous pouvez voir ces rubriques et tout semble un peu plus petit, donc nous allons l'augmenter à 150 pour cent. Pourquoi 150 pour cent ? Parce que celui-ci est 200 et celui-ci 300 pour cent. Nous allons l'augmenter pour se multiplier à 150 pour cent, alors changez la largeur à 150 pour cent. Attendez une minute. abord, assurez-vous que vous avez « contrôle T » et appuyez sur ce verrou parce que nous voulons que tout soit augmenté en proportion. Faisons 150 pour cent. Voici comment notre texte va tenir sur l'écran, iPhone 6 Plus écran. Maintenant, vous pouvez tout ajuster en conséquence, si vous voulez ajuster le titre et l'espacement, vous pouvez l'ajuster comme ça. Tous nos écrans sont prêts en ce moment, vous pouvez voir comment j'ai utilisé toutes ces techniques pour tout copier. Nous avons fait un calcul simple pour multiplier les dimensions de l'iPhone et les résolutions de pixels. Nous avons mis au point tout ce design. Pour une heure prochaine. Tout était pareil pour 2x. Il a été multiplié par deux, nous augmentons la taille puis c'est aussi 2x, donc aucune différence de taille. C'est 3x. Nous multiplions ce 2x par 1,5 pour obtenir cette taille 3x. Vous pouvez également copier ce texte et le faire glisser ici et le multiplier avec 300 pour cent déplacer à 300 pour cent. Cela vous donnera le même effet. Maintenant, si vous vérifiez la taille de la police. Celle-ci devrait être 96. Celui-ci devrait avoir 64 ans. Celui-ci devrait avoir 32 ans. Si nous allons sélectionner celui-ci, c'est 32. Son est la façon dont nous utilisons les tailles de texte parce qu'un développeur d'application iOS, il va avoir besoin des distances et tailles de texte en points. Tu vas lui donner quelque chose comme ça. Hauteur de la ligne, ce point et la taille de la police, police. Vous avez utilisé cette seule couleur, vous avez utilisé celle-ci. l' espacement entre les éléments est autant. C' est ainsi que vous allez concevoir des appareils iOS et utiliser la typographie dans les appareils iOS. C' est tout au sujet de cette pratique iOS dans cette leçon, nous avons créé quatre écrans différents iPhone 6 plus iPhone 5 et iPhone 4. Il y a un défi que je veux que vous conceviez quelque chose de similaire à celui-ci. J' ai essayé de concevoir, créer quatre tableaux d'art comme ça. Essayez de répliquer votre design sur chacun d'eux. Montre-le moi. Vous pouvez le poster dans les questions. Posez une question, montrez-moi votre travail et je vais essayer de l'améliorer. Si vous voulez appliquer le rythme vertical, vous allez appliquer le rythme vertical, vous pouvez définir la ligne de base et tout. Même si vous voulez concevoir un seul écran, vous pouvez sélectionner un seul écran et le concevoir correctement. Je voulais juste m'assurer que vous comprenez que si vous devez concevoir une application iOS dans différentes tailles, comment vous allez le gérer. C' est la chose la plus difficile dans, pendant que vous concevez votre application iOS ou Android ou quelque chose de similaire à cela. Passons à la leçon suivante. 53. Question des apprenants sur les résolutions d'apprenant: Aujourd'hui, un de mes étudiants m'a posé des questions sur la solution iOS et c'était une très bonne question. Je n'ai jamais pensé que ça allait venir d'un de mes étudiants. Laissez-moi vous montrer la question. Il a demandé pourquoi vous concevez à un x, qui est de 32 pixels sur un iOS avec les quatre spécifications à 2x. J' utilise essentiellement 32 points ici et il me demande pourquoi j'utilise 32 points au lieu de 16 points sur 1x. Donc, pour éclaircir tout ce problème ou concept, je pense que nous les concepteurs devrions expérimenter d'abord. Nous apprenons toujours avec l'expérimentation. Ce que je vais faire, c'est que je vais vous montrer dans Photoshop que nous allons nous attaquer à cela et comment comprendre tout ce gâchis. Commençons. Je vais ouvrir un nouveau fichier Photoshop. Fichier et Nouveau. Ce que nous allons faire cette fois, c'est que nous allons sélectionner le plan de ici et nous allons sélectionner l'iPhone 6 ou peut-être l'iPhone 5, qui sont essentiellement des appareils haute résolution ou 2x. Maintenant, ce que je vais faire au lieu d'utiliser la solution 72 points, qui est notre norme, je vais utiliser 144. Fondamentalement ce que j'ai fait est que j'ai déplacé ce 144 à 2x. Maintenant, mon document est déjà rétine. C' est 2x, alors je vais appuyer sur « Ok ». C' est notre plan de travail. Maintenant, pour que ce problème soit résolu, je vais sélectionner ma taille de titre à 32. Vous pouvez voir ici c'est l'une de l'échelle des appareils iOS. Quel est votre jeu ? Prenons quelque chose comme celui-ci et je vais l'aligner au milieu. Décalons-le simplement à la taille du point, convertissez-vous en taille du point pour mieux l'aligner car il s'agit d'une seule ligne. Maintenant, vous pouvez voir qu'il est 32 points à 2x écrans. Si vous allez à l'image, taille de l'image, vous pouvez voir, il suffit d'ignorer ces pouces. Notre résolution est essentiellement de 144 pixels par pouce. Maintenant, ce que nous allons faire, c'est que nous allons décocher ce rééchantillonnage et nous allons revenir à notre solution 1x qui est de 72 pixels par pouce. C' est juste pour clarifier votre esprit que la façon dont nous allons utiliser notre taille de points. Fondamentalement, nos développeurs devraient utiliser cette taille de police iOS de 32 points. Mais alors que nous concevons simplement par souci de simplicité, nous utilisons normalement des documents de résolution 72 pixels dans tous nos différents écrans. Appuyez simplement sur « OK ». Si vous sélectionnez maintenant votre police, vous pouvez voir qu'elle est décalée à 64 points. Pourquoi c'est ça ? Parce que nous avons converti de la résolution 2x à 1x. Maintenant, nous avons moins de pixels par pouce, c'est pourquoi notre taille de police vient d'augmenter et parce que sur les écrans plus grands, cela va être contracté. Sur un écran plus grand, ce 64 sera 32 points. Pourquoi ? Parce que nous avons plus de pixels à afficher par pouce. Ainsi, plus de pixels sont pressés les uns contre les autres dans moins d'espace dans les écrans de rétine. Cela va être, vous pouvez dire compressé à 32 points. C' est pourquoi sur 72 pixels, la pleine taille est agrandie. Vous pouvez voir ici que c'est ainsi que cela a été élargi. Parfois, quand vous concevez, comme il m'a demandé pourquoi j'ai utilisé 32 points sur cet écran parce que si j'essaie d'utiliser, vous pouvez voir 64 ici, nous allons utiliser 64, c'est mon cap, juste la tête suffit. Je pense qu'on ne peut pas le réparer ici. Si nous essayons d'utiliser quelque chose comme ça et que nous déplaçons notre taille d'image à 144. Changeons les valeurs de pixels à l'endroit où se trouve le pixel. Je vais le rééchantillonner. Prenons les pixels. Je pense que c'était 750, environ 750 ou 760 quelque chose comme ça. Voyons la taille de notre iPhone 5 parce que je ne me souviens pas d'eux. 640 par 1136. Je vais changer la largeur ici à 640. Rééchantillonnons ici, 144 et pixels. Il est déjà déplacé à 640, donc j'ai juste changé la résolution et vous pouvez voir qu'il est 640. Si vous voulez changer la hauteur, vous pouvez changer la hauteur en utilisant 1140 ici, comme ça. Je pense que tu devrais t'en tenir comme ça, 144. Nous sommes en train de changer dans notre résolution alors appuyez sur « OK ». Maintenant, vous pouvez voir que cela est déjà déplacé à 64. Il ne change pas de taille. C' est très étrange. Essayez toujours d'utiliser la taille de police qui est, vous pouvez dire réaliste, et je pense que 64 est trop grand ici. On a peut-être besoin de 32 points. C' est, je pense, une bonne taille de cap. Essayons 32 avec notre écran 1x comme ceci. C' est ma taille de cap. Je vais utiliser 32 points. Laissons-le comme ça maintenant. Ne vous inquiétez pas pour ça. Dans la taille de l'image, je vais passer à 144. Voyons ce qu'il va faire. Encore une fois, il est de 32 points. Fondamentalement ce que cela signifie est qu'à 1x, si vous utilisez 32 points, il va être 32 points. Si vous déplacez la taille de votre image à 2x. Dans cet exemple, comme vous pouvez le voir, j'ai déplacé jusqu'à 144 résolution sur laquelle se trouvent les spécifications iOS et notre taille de police décalée était la même. C' est le vrai problème, l'étudiant qui s'appelle Antonella, je ne sais pas qu'il est un il ou elle, mais Antonella m'a demandé, pourquoi j'utilise 32 points sur un écran 1x ? C' est la réponse. Répétons-le encore. Je vais utiliser 320, 480, 72 pixels. Il s'agit de l'écran 1x iPhone 4. Appuyez sur « OK », et je vais utiliser 32 points ici pour ma taille d'affichage et bonjour Antonella. Quel était son nom ? Antonella. Utilisons l' auto ici. Maintenant, vous pouvez voir que nous utilisons ces paramètres, 320, 480, 72 pixels résolution, et j'utilise 32 points. Maintenant, nous allons passer à 144 résolution et appuyez sur « OK », c'est essentiellement écran Retina à 2x. Appuyez sur OK et si vous sélectionnez cette taille, vous pouvez voir qu'il est encore 32 points parce que nous avons décalé notre résolution. C' est ainsi que nous allons dire à nos développeurs que nous utilisons 32 points pour la taille. Dans mon exemple précédent, je ne décalais pas les tailles comme ceci, nous n'utilisions que la résolution de 72 pixels. On en utilisait 32 ici. Permettez-moi de vous montrer cet exemple. C'est en direction. Si nous essayons de créer un nouveau plan de travail ici, si nous allons à ce plan de travail et essayons d'en créer un nouveau ici avec cette taille, c'est essentiellement la taille de l'iPhone 6, et je pense que c'est une taille moyenne. Supprimons simplement, iPhone 5. Créons cet iPhone 5 ici et appuyez sur ce plus et cliquez sur celui-ci ici. C' est l'iPhone 5 et c'est un écran de préparation. Si nous essayons de le faire glisser ici, vous pouvez voir qu'il est fondamentalement 32 points. Ce que nous allons faire, c'est que nous allons le multiplier par 2 et ce sera 64. C' est essentiellement la taille réelle. Si nous le replaçons ici dans ce plan de travail, il devrait être 32 points. Voici la règle que si vous concevez avec les 72 pixels par pouce, vous devez multiplier votre taille de police dans des écrans plus grands comme la rétine et l'écran 3x, qui est iPhone 6 plus. Sur 1x, vous utiliserez cette taille de point. Quoi que vous utilisiez sur votre écran 1x, tout en concevant avec cette résolution de 72 pixels, ce sera votre taille réelle, vous allez dire à vos développeurs que nous utilisons 32 points, taille d'affichage, taille de titre, et pour la facilité de travail, nous concevons à 72 pixels par pouce, donc nous n'avons pas besoin de déplacer les pixels partout ou la résolution. Ils sont tous dans la même résolution. Cette taille de police était en fait activée, celle-ci était pour 144 donc nous la multiplions par deux parce que nous concevons à 72, qui est la moitié de cette révolution. Nos spécifications étaient à 144, mais nous en sommes à la moitié, donc nous l'avons multiplié par deux pour l'obtenir également à nos spécifications. Je pense que cela a mis votre esprit clair sur cette résolution et ce gâchis d'écrans. Je crois que c'est tout. Si quelqu'un d'autre a un problème comme celui-ci, je suis prêt à créer une nouvelle conférence ou vidéo pour cela. N' essayez pas d'évaluer mon parcours comme deux ou trois étoiles. D' abord, posez des questions. J' ai vu beaucoup d'étudiants qui posent des questions, ils ont beaucoup de grandes améliorations dans leurs conceptions, et les étudiants qui ne posent pas de questions et qui lisent parfois mal, et puis je leur ai envoyé un message que ce qui était la raison et étonnamment, ils disent : « Nous avons eu ce problème. » Je dis : « Pourquoi ne m'avez-vous pas posé d'abord ce problème avant de mal évaluer mon cours et de me donner une crise cardiaque ? » Avant d'évaluer mal mon cours ou d'être frustré, vous devriez d'abord me poser des questions. J' essaie toujours de répondre le plus tôt possible, et si nécessaire, je vais créer une nouvelle vidéo pour vous. Alors prenez soin et passons à la leçon suivante. 54. Mirage de votre Photsshop sur Iphone: Dans cette leçon, je vais vous montrer comment connecter votre Photoshop à votre appareil iOS pour voir ce tableau d'art sur votre iPhone. Vous allez d'abord aller à cette édition et les connexions à distance. Ce que nous menons est ce nom de service serveur. Il est départ par écrit comme ceci comme le serveur Photoshop et faire un mot de passe ici. Ça doit contenir six caractères. Ne le rendez pas très complexe, juste simple. Ensuite, vous allez avoir besoin de cette adresse IP. Copiez ceci ou gardez ceci dans votre esprit que vous allez avoir besoin de ce mot de passe, de cette adresse IP et du nom du service. Commençons. Maintenant, je vais passer à l'écran de mon iPhone. L' application que j'utilise en ce moment est celle-ci. Il s'agit de l'iTunes Store, Apple Store, de Ps jouer pour Photoshop. Je vais vous montrer cette application, et aussi je vais vous montrer cet appareil Photoshop prouvé prévisualisation application. Il s'agit de deux applications que vous pouvez utiliser pour connecter votre appareil iOS à votre Photoshop et afficher vos créations. Passons à l'écran de l'iPhone. Ceci est mon écran iPhone, et comme vous pouvez le voir dans la troisième rangée, J'ai cette application Ps jouer. Vous pouvez cliquer dessus et vous pouvez voir qu'il a déjà été connecté. Donc, je vais revenir en arrière et vous montrer comment vous allez le connecter à votre iPhone. Il montre les connexions découvertes et certaines connexions enregistrées. Donc, très probablement vous allez aller avec cette découverte, il va se connecter avec elle. Il faudra l'adresse IP ou le mot de passe, mais vous devez le copier et le coller ici. Je vais ajouter de nouveaux. Pour une raison quelconque sur mon ordinateur, il ne me montre pas. Il ne me permet pas de me connecter à ce serveur iPhone avec de nouvelles connexions, peut-être que c'est mon pare-feu. Donc, si vous avez de tels problèmes 79.1, et ici vous allez entrer votre mot de passe, le mien était microsoft. Lorsque vous avez entré toutes ces informations, appuyez sur OK et il sera connecté à votre écran. ce moment, j'ai déjà une connexion, donc je vais utiliser celle-ci. Vous pouvez voir qu'il met à jour et me montre l'écran. Si vous appuyez une fois que vous pouvez voir toutes ces fonctions ont disparu. Vous pouvez prendre une capture d'écran, étendre et il y a aussi cette option de 101, un par un rapport, je pense que le rapport d'écran. Vous pouvez également l'actualiser si vous le souhaitez. Je n'utilise pas cette application pour prendre des captures d'écran ou faire d'autres choses. Je l'utilise juste pour, vous pouvez dire voir mon design ici et pour voir combien d'espaces j'ai besoin, ou peut-être que j'ai besoin de déplacer un élément ici ou là-bas. Voici comment j'utilise cette application. Permettez-moi de vous montrer une autre application, qui sera notre Photoshop, application Adobe Photoshop, qui est la dernière à propos de l'aperçu. Vous devez être connecté au serveur Photoshop, qui est essentiellement Photoshop CC. Vous pouvez voir qu'il est déjà connecté. Il me montre le tableau d'art. Donc, il montre le nom du tableau d'art 2. Voici comment cette application est connectée. Normalement, il vous suffit de vous connecter à votre compte Adobe, à votre compte Adobe CC, et il sera connecté à votre serveur Photoshop. Je ne me souviens pas comment je l'ai connecté et il ne me montre aucune option. Vous pouvez voir par ici. Il est juste de me donner ce tableau d'art iPhone 5 et le document Canvas, celui-ci. Ce sont deux méthodes que vous allez connecter votre iPhone à votre Photoshop. Assurez-vous que votre Wi-Fi est en cours d'exécution car il utilise une connexion Wi-Fi pour se connecter à ce serveur. Donc, cela résume cette conférence sur la façon dont vous pouvez connecter vos appareils à vos iPhones ou appareils Android. D' une manière ou d'une autre sur mes téléphones Android en raison de mes paramètres de pare-feu, je pense qu'il ne me permet pas de me connecter au serveur Photoshop. Donc seulement je suis resté avec cette option pour vous montrer sur les appareils iOS. Donc je pense que ça fera l'affaire. Donc, si vous avez un problème ou que vous rencontrez des problèmes, faites-le moi savoir et assurez-vous que vous n'avez pas de pare-feu. Voici comment vous utilisez différentes applications pour vous connecter à votre iPhone et afficher ces écrans. Cela finit par ces conférences, et passons à la prochaine conférence. 55. Typographie Android: Maintenant, vous concevez pour le système Android. Il y a donc deux choses que vous devez comprendre. Qu' est-ce que DPI et ce qui est SP qui est l'unité de mise à l'échelle de quatre tailles pour les systèmes Android, qui est appelé les pixels indépendants de l'échelle ou des pixels évolutifs comme celui-ci, vous pouvez voir ici. Maintenant, si vous allez à ce matériel, les styles de typographie Google.com, vous pouvez voir qu'ils ont tout disposé et pas d'une manière comme Apple fait, mais je pense que c'est mieux qu'eux parce qu'il montre beaucoup de choix différents pour l'affichage 4,3 ,2,1. Ici, ils ont quelques types d'échelle ici. Vous pouvez voir ici est l'échelle typographique 12, 14 ,16 ,20 et 34. Donc vous pouvez utiliser tous ces, je pense qu'ils ont deux ou parfois des lacunes de quatre. Ici, ils ont quelques exemples comme l'affichage titre titre 2, 3, 4, sous-titre, corps 2, corps 1, bouton de légende. Ils utilisent 12sp pour cela. Ils mentionnent aussi toutes les tailles ici, 112sp, 56, 45. C' est une très belle échelle. Il a beaucoup de, vous pouvez dire des variations illimitées. Voici quelques écrans qu'ils vous montrent par exemple, comment nous allons utiliser toutes les tailles interprétées dans notre Photoshop lors de la conception pour Android. Maintenant, il y a deux choses. L' un est, qu'est-ce que le DPI ? DPI est essentiellement les différentes tailles d'écran résolutions qui sont prises en charge par Google. Il s'agit de LDPI faible, DPI, DPI moyen, High, Extra High, Extra Extra High, Extra Extra Extra Extra High DPI. Contrairement à Apple, ils ont beaucoup de résolutions, 1.5x, 2.0x, 3x, 4x, taille originale et 0.75x ce qui est très correct. Maintenant, comment ceux-ci sont calculés, si vous pouvez aller à ce petit outil, vous pouvez voir ici, il est très simple calculatrice pour calculer différentes tailles et échelles. Maintenant, si vous passez à ce MDPI et mettez un pouce ici, il est fondamentalement un pouce sur l'écran et il contient 160 pixels, qui est égal à ce MDPI qui est aussi 160. Donc, sur le DPI moyen, votre résolution d'écran et vos tailles de pixels, ils sont appariés. Donc, nous allons concevoir en utilisant cette taille d'écran MDPI. Ne vous inquiétez pas pour ce 160 en ce moment. Ok, maintenant les pixels indépendants de l'échelle sont également 160 donc nos unités sur cette taille d'écran seront égales aux valeurs réelles. Aussi, vous pouvez voir la densité pixel indépendant ils sont également 160. Tout le reste est 160, 160 et 160. Maintenant, si vous allez à ce HDPI, vous pouvez maintenant voir la taille de l'écran dans ce pouce est de 240 pixels. Donc, essayez juste de comprendre ce concept dans un pouce d' écran maintenant nous avons emballé 240 pixels. Donc, toutes les autres choses ont changé, mais les pixels indépendants évolutifs sont les mêmes et les pixels de densité indépendants sont les mêmes parce qu'ils sont indépendants des valeurs de pixel. Donc, pour éviter toute confusion, nous allons concevoir pour ce MDPI et nous pouvons extraire nos ressources et tout. Nous pouvons dire à nos codeurs que c'est la taille que j'ai utilisée, nous n'avons pas besoin de calculer quoi que ce soit. Maintenant, pour quatre tailles, nous utilisons ce SP. Donc, nos codeurs ou développeurs Android, ils auront besoin de l'échelle quatre ou quatre échelles typographiques dans ces tailles. 56. Desinging pour plusieurs tailles d'écran Android: Concevons un écran simple, peut-être quelque chose de très simple. Maintenant, nous allons commencer avec un fichier de 320 par 480 hauteur. Vous pouvez augmenter la hauteur, peut-être 600, et appuyer sur « OK ». Laissez la résolution à 72 car nos pixels indépendants de l'échelle seront de la même taille. C' est la taille que nous allons développer, c'est-à-dire MDPI. Vous pouvez aussi le changer à 40 si vous le voulez, mais 320 par 600 me semble bon. Appuyez sur « OK », ne coloriez pas ce document, et c'est notre taille. Allons zoomer un peu. Maintenant, pour la rubrique, nous allons utiliser la police de Google, qui est Roboto. Utilisons ce Roboto audacieux peut-être, et 56 point. Je crois qu'ils en ont 56. Je vais utiliser 56 ici. C' est une très grande rubrique pour nous et nous allons utiliser 56, même. Laissons ça à Auto comme ça, ou peut-être qu'on pourrait utiliser 56 ici, 56. Ils n'ont pas spécifié de suivi, donc nous allons utiliser nos propres yeux et notre intuition. Fondamentalement, ou peut-être que nous pouvons utiliser zéro ici, peut-être qu'ils ont développé une police comme ça. C' est la rubrique, puis nous allons passer à la sous-rubrique. La sous-rubrique devrait être quelque chose 24 titre, 24 sp, donc ce sera 24. Le calcul est très facile comme ça. Déplaçons ça vers le haut. Nous allons utiliser non pas Bold mais peut-être Light police pour celui-ci. Maintenant, peut-être que nous allons utiliser cette couleur grise comme ça. Allons le plus près de ça. Zoom arrière pour voir à quoi ça va ressembler. Nous pouvons faire _it, c' est notre gros titre et nous pouvons aussi dire Oui, juste pour nous assurer qu'il a l'air bien. C' est notre gros titre et ensuite nous allons coller du texte ici comme ça. Nous allons utiliser le type Lorem Ipsum. La taille que nous allons utiliser est que nous allons à 40 sp, donc 14 sp est pour le corps 14 points. Utilisons 18 points pour la tête, comme ça. Peut-être que plus de 18, c'est bien, 20, c'est bon. Nous avons défini notre leader tout sur cette taille d'écran. Pour ce MDPI, il s'agit de quatre MDPI. Toutes les tailles sont les mêmes. Peut-être que nous pouvons réduire ce 56 à 45 parce que 56 est trop grand. Celle-ci a 56 ans, ramenons-le à 45 ans. Ouais, je pense que c'est mieux, 45 et 45. Reste simple comme ça, peut-être que le rouge est bon. Déplaçons un peu en dessous comme ça. Déplacez le texte plus en bas comme ceci. Changeons la couleur pour celui-ci à cette couleur noirâtre foncée. C' est notre tableau d'art. Déplaçons le cap en haut, peut-être comme ça. J'ai l'air bien. Maintenant, nous avons déplacé notre titre, sous-titre, et tout selon l'échelle de cette échelle typographique par la conception matérielle, Google Material Design. Je crois que c'est tout. Si vous voulez concevoir pour un écran plus grand, je pense que vous devriez ajuster vos tailles de police et les multiplier avec les résolutions respectives. Voyons s'ils ont des tailles ici. C' est HDPI qui est 800 par 480, alors concevons pour celui-ci. Ou peut-être que nous pouvons augmenter notre taille d'image à 150. Je pense que c'est 150. Il va être 150 par 150, et c'est ainsi que nous sommes passés à l'autre taille de l'écran. Maintenant, si vous allez à cela, vous pouvez voir les pixels. La hauteur est de 900, et la largeur est de 480. Il est très facile de passer de l'un à l'autre. Si vous voulez aller à la suivante, vous pouvez également aller à ce 720. Changez 720 dans la largeur ici, comme ça, et vous pouvez voir que c'est ainsi que nous passons vers les prochains écrans XXHDPI, 960 par 1600. Fondamentalement, c'est la largeur, ne vous inquiétez pas de la hauteur. Nous allons passer à 960. Maintenant, vous pouvez voir toutes nos tailles de texte sont également en augmentation avec elle. Nous ne devrions pas nous inquiéter parce que nous avons le dimensionnement des points dans nos paramètres Photoshop. Comment vous pouvez le définir, vous pouvez aller à cette Préférences, et aller à Unités et règles, et définir votre Type sur Points. Il est recommandé de le définir sur Tapez en points à cause de vous lorsque vous concevez des écrans mobiles. C' est ainsi que nous avons passé à différentes tailles d'écran et c'est 100 pour cent. Vous pouvez voir comment il a l'air très agréable. C' est la police Roboto. Vous pouvez utiliser d'autres variantes de Roboto si vous le souhaitez, mais je reste en ce moment avec seulement une police Roboto. Il s'agit de DPI et sps, pixels évolutifs et de tailles différentes. Vous devriez donner à vos développeurs ces tailles. ce moment, nous l'avons fait, je suppose que celui-là va bien. Je pense que je devrais revenir à mon format original. Reculer, reculer, reculer. Ça ne marche pas comme ça. Peut-être que nous devrions changer la taille de l'image à 320 à nouveau, et c'est ainsi que notre taille réelle de texte est fondamentalement disposée. Voyons ce qui était ça. C' est 14 points, puis 24 points ou essentiellement 45 points. Nous allons leur dire que 45, 24 et 14 sp sont utilisés. Il s'agit de la typographie sur vos applications Android et téléphones mobiles. Je vous ai dit comment faire cela aussi dans Photoshop, et comment répondre aux différentes tailles d'écran. C'est ça. Si je trouve autre chose ou si tu as besoin de mon aide, pose-moi toujours des questions. Je pense que nous devrions passer à la prochaine conférence. 57. Pour les développeurs → Utiliser Google Fonts: Le premier choix pour chaque développeur est d'utiliser Google Fonts. Même les concepteurs aiment les utiliser parce qu'ils peuvent être facilement hébergés et qu'ils peuvent être plus faciles à utiliser pour les concepteurs et les développeurs. Vous avez juste besoin de les intégrer avec une seule ligne de code et vous êtes prêt à partir en ce moment, il y a 804 pour les familles qui sont totalement gratuites et hébergées pour vous. Hébergé signifie qu'ils sont sur un autre serveur sur les serveurs de Google. En outre, le problème avec ces polices Google est la qualité de la police. Parfois, ce Kerning est désactivé, parfois des problèmes d'anti-crénelage. L' anti-aliasing signifie que les bords peuvent être déchiquetés et qu'ils ne sont pas lisses. Cela se produit avec beaucoup de polices Google. Parfois, la plupart d'entre eux sont de bonne qualité, mais certains d'entre eux, ils ont des bords dentelés. Il y a peu d'autres bonnes choses à propos de Google Fonts. Passons à Google Fonts, maintenant, il y a une chose de plus, vous pouvez facilement sélectionner une famille et si vous allez à la personnaliser, vous avez juste besoin d'intégrer cette ligne de code et vous êtes prêt à utiliser cette famille. C' est le code vous montre également le temps de chargement, qui est rapide, si vous essayez de le personnaliser, il n'en a qu'un [inaudible] en ce moment. Essayons un autre, comme celui-ci, un avec ceci, nous allons en sélectionner quelques autres. Vous pouvez voir qu'il vous montre quel est le temps de chargement sera. Même si vous êtes un concepteur, vous devriez choisir vos polices facilement à partir de cet aperçu Google New Fonts. Une autre chose est que si vous essayez de sélectionner ce spécimen de vue, vous pouvez vraiment voir beaucoup de grandes choses ici, comme tous les styles différents, donc différents styles ici alors nous avons roulement, ce qui est très agréable. Pourquoi vous embêter à passer des heures, essayez de faire correspondre différentes polices. Pourquoi ne devrions-nous pas utiliser simplement des formulaires intégrés ou déjà appariés, choisir un que vous aimez ou qui est vraiment plus proche de vos projets. Essayez d'utiliser celui-ci aussi il vous montre combien il est utilisé dans différents pays ou différents domaines, et c'est le nombre de sites Web qu'il sert. C' est un excellent outil pour vous faire démarrer, copier une ligne de code, obtenir baring à partir d'ici. Il y a beaucoup de bonnes choses à ce sujet. Mais vous pouvez toujours voir, si vous voyez certaines polices, elles pourraient avoir, certains des bords dentelés comme vous pouvez voir ici, ce n'est pas très lisse sur mon écran. Aussi, vous pouvez voir ou entendre Merriweather Sans, vous pouvez voir entre A et M assombrissement est un peu off. Donc, ce sont peu de choses, et je pense toujours que c'est une très bonne option pour commencer avec Google Fonts parce que les développeurs vont l'adorer, car il est très facile pour eux de l'utiliser. Il suffit de copier une ligne de code et ils sont prêts à partir, si vous êtes un développeur, vous devriez communiquer avec votre concepteur, si vous êtes un concepteur, vous devriez communiquer avec votre développeur pour commencer et savoir ce qui est les possibilités. Passons à la leçon suivante. 58. Pour les développeurs et l'utiliser des polices de caractères premium: Parlons maintenant des polices premium et pourquoi devrions-nous acheter ces polices premium et quelles sont les gemmes qui y sont cachées ? Maintenant, la première chose est de grande qualité, ok ? Ils sont vraiment super. Ils ont un grand crénage. Ils sont conçus par de grands typographes et des compagnies typographiques, des fonderies de type. crénage est génial, et ils ont beaucoup de liens et peu d'options supplémentaires. L' anti-aliasing est bon. Ils n'ont pas de bords déchiquetés, leurs polices Web sont géniales. Maintenant, le plus grand avantage que tu as est un look personnalisé, ok ? Maintenant, vous avez une marque, vous avez une équipe dans votre esprit, donc si vous utilisez une police premium, cela va avoir beaucoup d'impact sur vos spectateurs et utilisateurs, ok ? Choisissez judicieusement, vous pouvez acheter des polices premium et vous pouvez les utiliser dans votre image de marque, dans vos sites Web, dans vos applications mobiles partout. Les clients vont reconnaître instantanément votre entreprise entreprise ou produit de son type, d'accord ? Maintenant, il y a quelques inconvénients associés à cela. Le problème que nous avons, c'est qu'ils coûtent cher. Certaines polices si vous avez essayé de les acheter, ils sont 700$ toute la famille donc il est très coûteux. Même, j'aime peu de téléphones qui sont quatre ou 500$ et parfois je pense que quelqu'un devrait me donner de telles polices parce que je ne peux pas les acheter. Ok, donc l'autre chose, c'est qu'ils ne seront peut-être pas hébergés gratuitement, d'accord ? Si vous achetez une polices de ce site, myfonts.com, c'est mon site préféré. Vous pouvez voir ici, je suis connecté. J' ai acheté beaucoup de polices d'ici, beaucoup de familles que vous pouvez voir ici. Maintenant, l'avantage de ces sites est que vous pouvez trouver ou faire correspondre votre équipe exactement ce que vous cherchez. Vous pouvez voir ici différentes lettres, il y a des formes, d'accord ? Il y a des usages que vous pouvez voir ici. Britannica, puis storytelle, d'accord ? Il y a des millions de thèmes. Vous pouvez chercher de grands artistes, vous pouvez chercher des offres spéciales. Vous pouvez les acheter sur une réduction. En outre, vous pouvez rechercher des polices gratuites si vous le souhaitez. Je vous suggère vraiment de vous abonner sur ce site et ils vous enverront des polices gratuites. Si vous voulez rechercher des polices gratuites, vous pouvez comme ici et les ajouter à votre panier et les utiliser sur le web ou vos designs. C' est ainsi que j'ai beaucoup de collection de polices premium gratuites. Quoi qu'il en soit, c'est le site que j'aime vraiment. Il y a aussi beaucoup d'idées de design. Si vous regardez ces polices et leur présentation, il y a beaucoup d'idées aussi, alors achetez quelques bonnes polices d'ici et achetez-les à bon escient. Peut-être que vous avez besoin d'un ou deux ou trois style pas toute la famille de polices. C' est ainsi que vous commencez à utiliser les polices premium. Il y en a un autre qui est Typekit, qui est lié à cette licence de photo-shop. Vous pouvez également acheter Typekit, c'est un site Web basé sur l'abonnement avec beaucoup de polices. Je ne sais pas que c'est typekit.com ou quoi que ce soit, mais je pense que c'est de la société Adobe et c'est là. Je crois que je suis déconnecté, je suppose. Quoi qu'il en soit, maintenant je suis connecté. Ok, maintenant vous pouvez voir ici il y a beaucoup de classifications que vous pouvez sélectionner n'importe qui ici et comme des dalles décoratives grattées mono manuscrites si c'est très bon et vous pouvez les ajouter. Vous pouvez utiliser ces polices dans votre barre Web, applications mobiles ou même vos designs dans Photoshop. J' ai en ce moment, je suppose que quelques 276 polices et si vous opérez à un autre plan, vous pourriez avoir beaucoup plus d'options. C' est une autre façon. Ces polices sont hébergées sur Adobe Typekit donc elles fonctionnent aussi comme Google, je suppose. C' est ainsi qu'il existe différentes options pour utiliser les polices premium. Il pourrait y avoir plus de sites comme celui-ci. Nous avons ce Adobe Typekit. C' est là que vous achetez différentes polices et polices Web. Ok, alors vous pouvez voir ici les polices web, même si vous allez à n'importe quelle police comme celle-ci. Vous pouvez voir leurs polices Web tout de suite. Si vous cliquez ici, vous pouvez voir, si vous cliquez ici, vous pouvez voir comment cette police va ressembler sur le web, ici c'est et vous pouvez voir ici. Si vous voulez acheter, vous pouvez voir dans les choix d'achat. Nous avons des polices de bureau et Web, donc vous devez toujours cliquer sur la police Web si vous allez l'utiliser sur le web, si vous allez l'utiliser dans une application ou une publication comme un livre ou quelque chose comme ça, alors vous devez acheter plus de licences. Tout cela concerne les polices premium et leurs différentes méthodes d'achat basées sur l'abonnement ou vous devez acheter toute la police de leurs licences afin que vous puissiez avoir une bonne compréhension et passons à la leçon suivante. 59. Pour les développeurs → La taille de polices CSS: En ce qui concerne la taille des polices web unités CSS, il existe en fait deux catégories. L' un est des unités absolues comme les pixels que nous utilisions dans le passé beaucoup, peut-être il y a quatre ou cinq ans. Maintenant, il y a une autre catégorie qui est relative. Dès que c'est réactif et adaptatif, Web Design devient populaire et il est en ce moment là. Il est vraiment essentiel de développer des sites Web qui ont des unités majeures de pixels relatifs. Nous avons ; em, rem vw et%. Pixel est utilisé très moins ces jours-ci. Peut-être que dans le corps ou quelque chose comme ça à la police de base, nous pourrions avoir besoin de l'utiliser. Sinon, il y a très moins d'utilisation pour les valeurs de pixel, Maintenant, nous allons d'abord voir que em et% sont tous les deux par rapport aux parents. Ils sont en fait similaires les uns avec les autres. S' ils ont div parent et ensuite un autre div parent, cela peut créer des problèmes. Je vais l'expliquer dans une vidéo d'exercice de codage, alors ne vous inquiétez pas si vous ne comprenez pas en ce moment. vw signifie la largeur de la fenêtre donc elle est relative à la fenêtre d'affichage, qui est la fenêtre du navigateur que notre utilisateur a ouverte. Il est très réactif si vous essayez de presser votre taille de fenêtre ou votre navigateur, votre titre ou police sera pressé aussi. Il va changer sa taille donc il est relatif à la clôture. Nous verrons son exemple avec le code. Je vais juste vous donner un bref aperçu. Maintenant, la dernière est rem. Rem est relatif à la taille de police du corps de base. Si vous avez défini la taille de votre corps de police sur 18 pixels, alors un rem sera égal à 18 pixels. Il ne dépend pas de n'importe quel Div parent ou quoi que ce soit. Donc, dans l'ensemble de votre site Web, tout votre blog WordPress. Si vous utilisez rem comme taille de police, il recherchera toujours la taille de la police du corps et fera son calcul en fonction de celle-ci. Deux rem seront 36 pixels. C' est une très grande fonctionnalité si vous voulez garder la cohérence. Nous allons creuser dans les sections de codage. Passons aux prochaines leçons de codage. 60. Pour les développeurs → la taille de polices d'em: abord, nous allons examiner les unités em, alors comment nous allons spécifier. Voyons voir, voici un exemple de document que j'ai créé pour vous. part et d'autre, nous utilisons des unités em mais dans des situations différentes et des parents différents. Voyons comment cela peut gâcher, un tel problème comme nous avons sur le côté gauche. Sur le côté droit, nous avons le bon usage. Reste dans le codage. n'y a rien de fantaisie. Voyons ce que nous avons dans notre document HTML. J' ai importé cette normalisation à normalize.min.css. Si vous ne savez pas ce que normaliser est, c'est essentiellement pour éliminer tous les styles de navigateur et d'autres problèmes, problèmes non-correspondance que nous avons. Il va réinitialiser vos styles. Ensuite, nous avons cette API Google. Nous importons essentiellement cet em. Nous avons importé cette police Source Sans Pro, puis nous avons une feuille de style liée à elle. C'est ça. C' est mon titre pour l'en-tête, cela n'a rien à voir avec l'exemple. Le code min est par ici. Ceci est un conteneur en-tête 1, 2, 3, tags body, span. Ensuite, nous avons un petit texte, petit, et puis nous avons un autre conteneur qui est à droite ici. Celui-ci est un autre conteneur. A gauche, c'est le conteneur. Nous avons deux conteneurs, à droite et à gauche sur le côté gauche et à droite. Maintenant, ce qui se passe ici est si vous regardez ce conteneur, allons au CSS style.css. Ici, j'ai toutes les tailles spécifiées. Maintenant, dans mon élément HTML, je dis pour la taille 18 pixel, donc la hauteur de la ligne 1.5. Lorsque vous souhaitez configurer votre police de base, utilisez toujours HTML ou vos balises body. Vous pouvez également utiliser init, mais je préfère l'utiliser ici. Vous pouvez utiliser dans les deux. Vous pouvez utiliser cette taille de police. Nous définissons notre taille de police de base. La base de référence est 27 en ce moment. Si vous multipliez 18 par 1,5, il est 27. Maintenant, vous pouvez voir ici notre taille de paragraphe est 0.9 em. Si nous calculons 18 pixel multiplié par 0,9, 16,2 pixels, la hauteur de la ligne est de 1,25. Même que les autres calculs comme trois em, 18 pixels multipliés par 3, et ainsi de suite et ainsi de suite. Ce que nous faisons, c'est que nous multiplions notre police de base avec notre valeur em dans chaque élément. Si nous avons un élément paragraphe, nous multiplions sa valeur par le HTML. Nos em fonctionnent d'une certaine manière, comme si nous avions cette unité. Il cherche le parent immédiat. Si le paragraphe est à l'intérieur de ce corps et de la balise HTML, il n'y a pas d'autre div, alors ce sera 18 pixel. Dans ce cas, si vous regardez notre code conteneur, allons vous montrer ce que mes conteneurs ont. Si vous regardez ce conteneur sur la gauche, c'est celui de gauche. Ajoutons ici. Maintenant, vous pouvez voir le conteneur gauche a une certaine taille pour la taille qui est de deux em. Mais celui-ci sur le côté droit, ce conteneur n'a aucune spécification de taille de police. Ce qui se passera ici, c'est que tous les éléments à l'intérieur cette div seront calculés avec une police de base HTML de 18 pixels. Ça va se passer ici. Dans ce conteneur, chaque titre, chaque élément de paragraphe, tout ce que nous voyons, vous pouvez voir sur le côté droit, il est calculé au niveau de notre taille de police de base d'élément HTML. Si vous cliquez dessus et inspectez l'élément, vous pouvez également le faire dans Chrome. Si nous allons à ce modèle de boîte calculée, alors cela calculé, vous pouvez voir la taille de la police est de 16,2 pixels. Donc, 18 multipliez par 0,9, c'est la taille de police correcte. Mais si nous regardons le paragraphe à l'intérieur de ce conteneur, qui est celui de gauche, il est 32.4. Comment se fait-il que ce 32,4 pixels ait été calculé ? Voyons comment cela a été calculé. Tout ce qui est un peu différent est dans ce conteneur. On en a deux. Ce conteneur avait un parent qui était HTML. Notre taille de police de base était de 18 pixels multipliée par 2, est égale à 36 pixels. Maintenant, dans cette situation, notre parent a la taille de police de base a changé. Donc, tout ce qui est à l'intérieur de ce conteneur utilisera ce 36 pixels comme police de base, car maintenant leur conteneur a une police de base différente. J' utilise une touche de raccourci pour mon texte sublime. Donc 18 multiplié par 36 pixels est notre police de base pour ce conteneur éléments enfants. Fondamentalement, les éléments enfants signifient que tout dans ce conteneur est son enfant. Ici, nous pouvons voir si vous regardez cela, pourquoi cela a été calculé comme 32.4, parce que notre taille de paragraphe était 0.9. Si nous multiplions 36 pixels multipliés par 0,9, ce sera 32,4 pixels. C' est ainsi que notre paragraphe a été calculé. C' est ainsi que nous calculons la taille de nos paragraphes ainsi que toutes nos tailles de titre. Trois em dans cette situation signifie maintenant que nous avons 36 pixels multipliés par 3, est égal à 108, 108 pixels est notre titre 1 dans cette situation. Voyons si cette rubrique 1 est de 108 pixels ou non. Inspectez-le et vous pouvez voir ici. Taille de police, 108 pixels, aussi la hauteur de ligne est de 108 pixels. C' est comme ça que ça marche. Ici, nous n'avons qu'un seul parent, qui est HTML. Ce conteneur, il n'a pas de spécification de police. Dans ce cas, nous avons conteneur à l'intérieur cet élément HTML et nous avons deux niveaux de ce calcul. Em est essentiellement relatif à son parent immédiat. Son parent immédiat était ce conteneur. Nous avions cette taille de police deux em, donc maintenant sa taille de police de base a changé. Si vous voulez l'utiliser, utilisez-le avec soin et assurez-vous d'utiliser de bons calculs relatifs. Il s'agit d'unités em. Passons à la suivante. 61. Pour les développeurs → Rem rem de polices: Parlons de la spécification de taille de police Rem Unit ou CSS. C' est mon préféré, il est relatif au corps. Voyons comment ça va marcher. Je mets ma taille de police de base sur HTML plutôt que sur le corps. Soixante deux points cinq pour cent signifie 10 pixels qui est 16 pixels multiplient par 0,625 ce qui est égal à 10 pixels qui est comment il va être égal à 10 pixels. C' est parfois concepteur faire des concepteurs ou des quartiers qu'ils utilisent cette technique, il est très vieux pour rendre vos calculs plus faciles, mais le recommandé est quatre taille 100 pour cent, donc toujours utiliser celui-ci. J' utilise seulement pour cet exercice juste pour vous expliquer quelques concepts. Maintenant, rem va toujours chercher ce HTML ou à l'intérieur de cette balise body, quelle que soit la police de base. Si nous n'avons pas HTML, il regardera dans la balise body. Il cherchera cette taille qui est de 10 pixels, et tout son calcul sera basé sur cela, donc 10 pixels. Notre paragraphe ici est 1.6 rem qui est 10 multiplié par 1.616 pixels. Alors nos tailles de portée 2.4 rem qui sera égal à 24 pixels, pourquoi ? C' est plus facile à calculer parce que nous avons mis ici. Puis à l'intérieur du h_2, il est 36 pixels, c'est 24, 2016, 14 pixels ainsi de suite et ainsi de suite. Maintenant, à l'intérieur du conteneur, si vous essayez de spécifier une taille de police comme je spécifie en ce moment, 24 pixels. Voyons voir s'il va chercher cette taille comme taille de base ou il va chercher cette taille. Je l'ai en ce moment ouvert dans Chrome juste pour vous donner un peu de goût des niveaux Chrome. Maintenant, vous pouvez voir que c'est un effectif et notre taille de police est, celle-ci va être, voyons quelle est la taille de police calculée. Voyons voir. La hauteur de la ligne est de 48 pixels. Ensuite, il y a notre taille de police, il sera dans le f, c, d, e, f. Ici nous avons. Taille de la police 48 pixels. Il était un peu difficile de trouver cette valeur dans Chrome car il a beaucoup d'autres valeurs comme flex, un autre le caché. C' est difficile à trouver, mais ici, nous avons la taille de la police 48 pixels. Nous avons spécifié 4.8 rem. qui signifie qu'il calcule en fonction de cette valeur. Il ne cherche pas cette valeur ou même pas la considérer. Nous devrions toujours nous assurer que cela fonctionnera avec l'élément de police de base. Ce sera toujours cohérent. Si je veux changer toutes les tailles, je vais juste changer votre ici. Un changement contrôle tout le reste. C' est ce que j'aime, rafraîchir. C' est vraiment magique et j'aime vraiment cette fonctionnalité que vous pouvez contrôler toutes les tailles de police par rapport à un élément qui est ce HTML, ou si vous avez du corps, c'est ainsi que nous utilisons cette unité de dimensionnement HTML CSS Rem, et nous utilisons HTML comme taille de base et changer toutes les valeurs en fonction de lui. J' essaie normalement d'utiliser rem dans mes projets si j'ai une page de destination, j'essaie d'utiliser rem parce que je sais alors que toutes mes tailles de police sont relatives à celle-ci. Si je veux changer, je peux changer ici et tout sera changé sur toutes les pages ou sur tout le thème. Assurez-vous de faire ces exercices et de télécharger les exemples de fichiers. Je vais télécharger tous ces fichiers, pour que vous puissiez les vérifier. Passons à la leçon suivante. 62. Pour les développeurs → % Taille de polices: Dans cette leçon, nous allons examiner l'utilisation unitaire en pourcentage dans les spécifications de taille de police CSS. Si vous utilisez le pourcentage, il est également similaire à émuler, c'est pourquoi j'ai discuté émuler avant. Maintenant, ici dans mon corps, qui est ma taille principale de police de base. , ici, je spécifie une taille de police de base égale à 100 pour cent, ce qui signifie 16 pixels. Pour presque tous les navigateurs par défaut, 100 % correspond à une valeur de 16 pixels. Il est également considéré comme standard, alors assurez-vous de spécifier une taille de police à 100 % dans votre élément body ou votre élément HTML. Maintenant, nous avons des conteneurs à gauche et à droite. Dans le conteneur de gauche, vous pouvez voir que je spécifie la taille de la police 140 pour cent. Dans le conteneur de droite, il n'y a pas de police, donc tout à l'intérieur de ce conteneur sera calculé sur la base de ce corps parce que c'est leur parent. n'y a pas de spécification de taille de police dans les autres parents comme celui-ci, mais celui-ci a une spécification de taille de police de 140 pour cent. Donc tout ce qui est à l'intérieur de ce conteneur gauche sera traité de la même manière que nous avons calculé M. Laissez-moi vous montrer un exemple ici. C' est l'utilisation de l'unité de pourcentage, et vous pouvez voir sur le conteneur de gauche tout est plus grand, et sur le conteneur de droite tout est de la bonne taille. Pourquoi nous avons ce problème ? C' est aussi le même problème avec l'unité M que le parent immédiat de ce quart gauche, celui-ci, H1, H2 et H3, ils ont leur taille parent définie à 140 pour cent. Cela signifie que la taille du parent est 16 multipliée par 1,4, ce qui est 140 pour cent. Donc, 22.4 est leur taille de base. Maintenant, nous avons 22,4 pixels comme taille de base. Si nous avons 22.4, alors la taille de la police 100 pour cent sera 22.4. Vous pouvez voir ici, si nous allons à ce paragraphe et cliquez avec le bouton droit et inspecter l'élément, il sera égal à 22.4 car il est en ce moment calculé en fonction de son parent qui est ce conteneur gauche, celui-ci sur ici. Maintenant, c'est aussi le même que M, donc je ne vais pas vous montrer une conférence très détaillée sur celui-ci. Vous pouvez voir ici, pour les autres tailles que j'utilise rem, donc supprimez-le dès maintenant pour éviter toute confusion. Donc, rubrique 1, 2, 3. Maintenant, vous pouvez voir ici sur ma rubrique 3, J'utilise la valeur absolue 36 pixels. Voyons voir dans les deux exemples, côté droit et côté gauche vous pouvez voir le niveau d'en-tête 3 est fixe, donc il est de 36 pixels, mais tout le reste est en unité relative, qui est pourcentage. Donc, ils ont différentes tailles dans les deux conteneurs. Maintenant, vous pouvez voir ici que j'utilise 400 pour cent, 350 pour cent, et ainsi de suite, et ainsi de suite. Pour les petites, j'utilise 90 pour cent. D' accord. Il y a une autre utilisation de ce pourcentage dont je parlerai dans les conférences ultérieures lorsque nous examinerons la typographie réactive, alors passons à la prochaine leçon. 63. Pour les développeurs → l'unité de polices vw: Voici un peu d'introduction à cette unité impressionnante VW et j'aime vraiment comment il se développe et se contracte sur les sites réactifs. Voici trois titres et puis nous avons un paragraphe ici et vous pouvez voir le paragraphe est très grand. Permettez-moi d'expliquer pourquoi c'est très grand. Maintenant, si nous passons à ce conteneur, désolé, style CSS. Alors, que se passe-t-il ici ? La première chose est la taille de la police HTML un 100 pour cent, aussi cette largeur de conteneur est de 80 pour cent et la taille de la police dans ce conteneur parent est également de 24. Donc, vous pouvez voir ici cette unité VW, est relative à la taille de cette fenêtre de navigateur. Donc, il n'a aucun effet de ce 100 pour cent ou cette taille de police 24 pixels. Donc, ce qui se passe est que j'ai défini pour une taille de police de paragraphe à 4.5 vw. Vous pouvez expérimenter avec elle. Donc, vous pouvez voir qu'il est très grand. Cette taille de paragraphe aussi les en-têtes sont très grandes. Les tailles de titre sont également dans la largeur de la fenêtre vw 15 et puis nous avons la hauteur de la ligne, d'autres choses, les marges et tout configurer. En outre, le titre deux, le titre trois et le petit texte est en RAM ou vous pouvez voir si j'essaie d'utiliser ce vw, alors peut-être que nous pouvons utiliser 2.5 vw ici, comme ceci. Voyons comment ça va ressembler à notre petit texte. Donc, petit texte est comme ça. Maintenant, pour les en-têtes, c'est très bon, mais pour le texte de paragraphe, ce n'est pas vraiment sympa. Passons donc à notre vision réactive. Maintenant, vous pouvez voir que je développe et contracte ma taille de fenêtre, vous pouvez voir ici en haut 623 pixels, j'appuie sur « Ctrl+Maj +M » sur mon Firefox. Si vous utilisez Chrome, je pense que vous pouvez « Shift » et appuyez sur « F12" et sélectionnez celui-ci appareil Toggle. Il est aussi « Control », « Shift, M ». Donc, vous pouvez le voir sur différentes tailles comme ça, comme ça, et comme ça. Donc, en ce moment, j'utilise ce navigateur Firefox. Maintenant, vous pouvez voir que notre taille de titre est relative à notre largeur de fenêtre et qu'elle est vraiment réactive dès que nous le contractons. Passons à cette largeur de 320 pixels, qui est iPhone cinq ou quatre, je suppose. Ok, donc c'est à ça que va ressembler notre texte. Mais vous pouvez voir que le petit texte souffre vraiment. Il est très petit et la taille de titre est bonne sur les petits appareils, mais il est très grand, désolé, texte de paragraphe est très grand sur les grands écrans. Ce n'est donc pas une très bonne pratique. Donc, lorsque vous utilisez cette VW, essayez de l'utiliser uniquement sur les titres, comme la rubrique 123, pas sur les petites rubriques parce qu'elles vont devenir très petites. Ainsi, de très grandes rubriques peuvent obtenir un bon bénéfice ferme. Si vous utilisez un paragraphe, je pense que vous devriez utiliser la valeur RAM ou quelque chose de plus proche, comme 1.2 RAM ici. Donc, il va être bon aussi pour le petit texte. Nous allons utiliser la RAM ici. Donc, je vais utiliser une RAM ici pour le petit texte. Il y a trois facettes. C' est ainsi que nous pouvons utiliser cette unité VW et essayer d'éviter les choses que j'ai mentionnées ici. Ne pas l'utiliser sur le texte de paragraphe. Bon, passons à la leçon suivante. 64. Pour les développeurs → Comment le rythme vertical dans CSS: Maintenant, vous êtes familier avec l'espacement vertical ou le rythme vertical, mais comment ces calculs vont réellement fonctionner en CSS. Pour contrôler votre espacement vertical en CSS de différents éléments typographiques ou même vos autres éléments graphiques, images ou boutons ou quelque chose du genre, vous devez utiliser des marges, remplissage et une hauteur de ligne. Maintenant, gardez à l'esprit que toutes ces choses seront relatives à notre hauteur de base. Si vous avez une ligne de base de 27 pixels, vos marges, les marges et les marges de rajustement et les hauteurs de ligne seront des multiples de 27 pixels ou peut-être la moitié de cette hauteur de ligne de base. Maintenant, comment cela est calculé est que nous avons besoin d'une hauteur totale qui doit être un multiple de notre ligne de base. Ici, vous pouvez voir que la marge supérieure est de 27 pixels car ma ligne de base est de 27 pixels. La marge inférieure est également égale à la ligne de base, et la hauteur de ligne est également égale à la ligne de base. La hauteur totale sera de 81 pixels. S' il s'agit d'une seule ligne, notre ligne de texte sera égale à 81 pixels de hauteur. C' est ainsi que la hauteur va être calculée dans notre navigateur. Il peut être multiple de cette hauteur de ligne de base, ou il doit être multiple de hauteur de ligne de base ou égal à la hauteur de ligne de base qui peut également fonctionner. Voici un autre exemple. Parfois, vous pouvez utiliser la moitié de votre hauteur de base. Si vous utilisez la moitié de votre hauteur de ligne de base, je ne recommande pas d'utiliser ces 13,5 pixels ou demi pixels. Vous pouvez utiliser à la place 13 pixels et 14 pixels. La hauteur totale sera de nouveau de 54 pixels. Cinquante-quatre est aussi un multiple de base, donc nous ne allons pas nous inquiéter à ce sujet. Il va s'intégrer très bien dans notre rythme vertical. Assurez-vous de ne pas utiliser ces valeurs de 0,5 ou 0,5 demi-pixel, vous pouvez utiliser 14 pixels et 13 pixels. Encore une chose. Parfois, si vous essayez d' obtenir peut-être un slogan ou quelques titres, quelque chose comme ça et que vous ne voulez pas utiliser la même taille de police que vous avez déjà utilisée dans votre facteur d'échelle, vous voulez dévier d'ici comment vous allez espace vertical cet élément. Par exemple, je change la hauteur de la ligne. Je n'aime pas la hauteur de la ligne de ma ligne de balise. Vous pouvez dire très spacieux. Peut-être prendre trop de place. Je vais le définir à 32 pixels. J' ai changé la hauteur de la ligne et j'ai réellement besoin de la hauteur totale qui doit être égale au multiple de la ligne de base. Ce que je vais faire est 54 moins 32, et il me reste 22 pixels. Je les ai divisés en marge supérieure et marge inférieure, qui est de 11 pixels, 11 pixels. Le total est de nouveau de 54 pixels. Nous avons atteint le mot rythme égal à nouveau. Voici un exemple d'espacement vertical, comment nous allons utiliser cette technique. Si vous pouvez voir mon titre, j'utilise la marge supérieure et la marge inférieure pour le titre et la hauteur de la ligne. Ajoutez tous ces trois et le bloc total est où tout est gris. C' est cet espace qui va prendre. Ensuite, nous avons notre texte de paragraphe. Vous pouvez voir qu'il est tout rouge, donc une hauteur de ligne est égale à 27 pixels. Il va être de 27 pixels pour chaque ligne. Le bas de la marge, je n'utilise que le bas de la marge ici. Certains experts suggèrent que vous ne devriez utiliser marge inférieure pour tous vos éléments pour atteindre l'espacement vertical. Dans cette situation, j'utilise seulement margin-bottom et je n'utilise pas marge top parce que la marge supérieure est fondamentalement que je reçois de ma rubrique. Le cap a déjà beaucoup de rembourrage ou de marge en bas, donc je n'ai pas besoin de plus d'espace ici. C' est ainsi que nous utilisons différents calculs. Laissez-moi vous montrer un exemple. Voici l'échelle typographique personnalisée Bootstrap. C' est le dernier exercice que nous allons faire avec Bootstrap. Bien qu'il soit très, très difficile de les atteindre verticalement dans Bootstrap car il y a trop d'éléments pour enchaîner le rembourrage et tout. Bootstrap craint vraiment les échelles typographiques ou le rythme typographique. Ici, j'ai cette rubrique en haut. Il est en tête un. Si je clique avec le bouton droit de la souris et inspecte l'élément, vous pouvez voir l'espacement autour d'elle. Sa hauteur totale est 135, ce qui est également un multiple de 27 pixels. Actuellement, ma ligne de base d'échelle typographique est de 27 pixels. Vous pouvez voir que j'ai rembourrage haut qui est de 27 pixels, puis j'ai rembourrage bas, qui est également de 27 pixels. C' est ainsi que j'ai utilisé le rembourrage haut et bas dans cette rubrique un. Ma hauteur de ligne est égale à 81 pixels. C' est essentiellement la hauteur. Si vous voyez ici les styles calculés, vous pouvez voir la taille de la police est 61 et la hauteur de la ligne est 81. Vous pouvez voir par ici. Ensuite, nous n'avons pas de marge en haut et en bas. Nous avons la marge inférieure et supérieure de rembourrage, qui est égale à 27 pixels, ce qui est ma ligne de base. Maintenant, comme vous pouvez le voir en bas tous ces éléments, nos paragraphes titre 3, celui-ci est la rubrique 2, ils sont tous parfaitement alignés sur notre rythme vertical ou notre ligne de base. Vous pouvez voir même l'image que j'ai utilisée, la hauteur de l'image que j'ai définie sur le multiple de base 1,2,3,4,5,6,7,8,9, 27 multiplié par neuf, je ne sais pas ce que c'est, mais c'est égal à celui-ci. Maintenant, c'est comme ça que j'ai utilisé mes marges et tout le reste. Permettez-moi de vous montrer un autre exemple qui est un exemple décalé. Il s'agit de 32 pixels, texte de hauteur de ligne 32 pixels. Voyons comment cela est disposé. La taille de la police est de 32 pixels, la hauteur de la ligne est de 32 pixels, marge inférieure de 27 pixels. Vous pouvez voir le bas de rembourrage et le haut de rembourrage est de 11 pixels. Vous pouvez voir ici 11 pixels. C' est ainsi que j'ai utilisé mes propres paramètres personnalisés pour atteindre le rythme vertical, vous pouvez dire dans le même contexte. Donc 11 et 11 et 32 est égal à 54. Fondamentalement 54 est à nouveau le multiple de notre ligne de base, qui est de 27 pixels. Laissez-moi vous montrer un autre exemple où j'ai éliminé, celui-ci. C' est aussi 54, mais ici ce que je fais est que je n'utilise aucun rembourrage, aucune marge ou quoi que ce soit, juste la hauteur de la ligne pour y parvenir. Maintenant, pourquoi j'ai utilisé la hauteur de ligne ? Parce que je ne voulais pas m'approcher trop de ce paragraphe. J' utilise la hauteur de la ligne pour atteindre ce rythme ou cet espacement, espacement vertical. C' est ainsi que vous utilisez vos marges, rembourrage et votre hauteur de ligne pour obtenir un rythme vertical et un espacement vertical. C' est ainsi que nous utilisons CSS pour obtenir un rythme vertical ou un espacement vertical. Passons à la leçon suivante. 65. Pour les développeurs→ Exercice de codage Gridlover de Gridlover: Dans cette leçon, nous allons créer quelque chose comme ça. Nous allons créer un rythme vertical en utilisant cet outil Grade Level et ventilateur [inaudible] ce Basehold.it. Alors commençons et nous allons créer quelque chose comme ça. Je vais utiliser Sublime Text. Vous pouvez utiliser toutes les données de codage que vous avez, vous pouvez même utiliser le bloc-notes. Je vais rapidement utiliser Doc, qui est un raccourci pour le document HTML et je vais l'enregistrer, utiliser Control S, donc je vais l'utiliser et l'enregistrer sur le bureau en ce moment juste à des fins de pratique. C' est notre rythme vertical HTML. Dès que j'utilise HTML, vous pouvez voir ici. Maintenant, je vais supprimer ce bootstrap nous n'avons pas besoin de bootstrap en ce moment. Ce que nous allons utiliser, c'est que nous allons utiliser la feuille de style et quelques autres choses comme lien rel. Nous allons utiliser la feuille de style à des fins de normalisation. Donc, nous allons utiliser CDNJS normaliser. Voyons ce qui va arriver avec celui-ci. Je vais normaliser mon CSS, copier et aller à celui-ci. Ici, nous avons notre CSS normaliser et nous avons besoin d'un exemple de texte. Je vais ouvrir ma barre d'outils secrète, et je vais utiliser ce HTML Ipsum pour obtenir du code ici. Ce dont nous avons besoin, c'est peut-être qu'il nous faut quelques rubriques. Où sont les titres ? Ici, nous n'avons pas de rubriques. C' est un peu d'or. Ce sont des titres et tout le reste. Je vais l'enlever ici et le coller comme ça. Peut-être que nous avons besoin de plus de paragraphes ici comme ça, et peut-être de niveau 3. Peut-être qu'on peut utiliser un conteneur. J' utilise MX. Donc, c'est pourquoi il obtient tout dans le raccourci et je remplit tout le reste. Donc, si vous connaissez CSS, vous aurez l'idée. Ce que j'essaie de faire est que je suis juste en train de remplir cela et j'utilise cette normalisation et je vais lier et ensuite aussi lier une autre feuille de style. Je vais l'utiliser comme, style.css. Je vais créer un autre fichier en fait c'est le premier. Donc, c'est le fichier CSS que j'ai créé ici. Maintenant, nous allons utiliser quelque chose d'ici, Grade Level. Donc, ce sont mes paramètres 4 taille est égale à 18 pixels, hauteur de ligne 1,5, facteur d'échelle 1,44, et j'utilise des valeurs de pixel. Vous pouvez aussi utiliser REM ou M. Donc, ce que nous allons faire est que nous allons tout copier à partir d'ici, 1.44 oui. Cela fonctionne mieux dans Chrome. Certaines fonctions ne fonctionnent pas dans Firefox. Je ne sais pas pour quelle raison. Donc, je vais utiliser REM et je vais tout copier et copier et coller dans mon CSS. Voyons à quoi cela va ressembler dans notre navigateur. C' est ainsi que mes en-têtes en ce moment et tout fonctionne. Voyons s'il a été appliqué ou non. Appliquons le rythme vertical en utilisant notre bashold.it, et notre rythme vertical est de 27. Je vais utiliser 27 ici comme ça. Voilà comment est notre rythme typographique actuel. Donc ça a l'air beau. Peut-être que j'ai besoin de plus d'espace autour de ce titre HTML 1. Vous pouvez voir comment tout cela a l'air vraiment sympa dans cette configuration. Voyons voir, peut-être que le titre 1 a besoin d'un peu plus de scintillement. Peut-être que je peux ajouter un fond de marge de 1,6, une coupe comme celle-ci. Il a l'air mieux maintenant. Ensuite, nous pouvons également utiliser quelque chose pour les paragraphes. Avec la taille des paragraphes, je pense qu'il prend la taille du corps. Maintenant, pour la taille de la police dans le corps, je vais la fixer à 18 pixels. La hauteur de la ligne sera en fonction de cette taille de police. Nous pouvons le laisser comme ça ou nous pouvons aussi utiliser 27 pixels ici et laisser tout reposer comme ça. C' est ainsi que nous utilisons le niveau pour obtenir notre espacement vertical et notre alignement et tout. C' est votre prochaine mission , c'est que vous allez me créer quelque chose comme celui-ci. Assurez-vous qu'il est aligné verticalement sur votre ligne de base. Vous pouvez utiliser le niveau de niveau et créer quelque chose de similaire à celui-ci. Aussi, vous pouvez voir ici en haut que j'utilise cet en-tête, qui est la hauteur de mes trois lignes de base. Donc, il est presque 81 pixels. Si vous voulez similaire, ici, vous pouvez utiliser l'en-tête et vous pouvez utiliser cette chose ici. Ce que j'utilise, c'est qu'il n'y a que trois choses que j'ai utilisées. L' un est que normalize.css juste pour garder vos feuilles de style de paramètres cool, donc embord qu'en haut, alors nous utilisons notre feuille de style personnalisée, qui est celui-ci où nous venons de copier et coller, notre code RAM de niveau grade. Donc c'est le code qu'il a généré et nous l'utilisons ici. Ensuite, nous avons utilisé Basehold.it pour nous montrer 27 pixels de base, et c'est tout ce que nous avons besoin d'utiliser, un beau rythme vertical à la recherche. Je ne vais pas importer des forces différentes de Google. Si vous voulez un peu de force, vous pouvez l'importer. C' est ainsi que nous utilisons l'alignement vertical dans notre code, et pour atteindre l'alignement vertical en HTML et CSS. Votre prochain défi est de créer quelque chose de similaire à celui-ci ou celui-ci, vous pouvez utiliser du texte fictif ou autre, juste me montrer vos compétences et j'attendrai. Passons donc à la leçon suivante. 66. Pour les développeurs→ Bootstrap typographiques personnalisés: Aujourd'hui, nous allons apprendre à utiliser l'échelle typographique personnalisée Bootstrap, alors comment éditer la police de base et d'autres choses pour Bootstrap. Maintenant, une chose que vous devez savoir que Bootstrap craint vraiment au rythme vertical parce qu'il y a trop d'éléments, et de rembourrage, et tout. Tu ne peux pas tout changer ici. En outre, il est réactif, donc il va répondre à différents écrans et tailles différentes donc vous devriez utiliser l'échelle typographique par défaut que Bootstrap a déjà. Ce que j'ai fait, je viens de télécharger Bootstrap et commencer Bootstrap. ce moment, c'est la version 3.3.6. Maintenant, si vous voulez télécharger la source, vous pouvez télécharger la source dans Sass ou Less. J'utilise Moins. Sass et Less, si vous ne savez pas, ce sont essentiellement des pré-compresseurs CSS. Si vous ne les connaissez pas déjà, vous devriez commencer à apprendre l'un d'entre eux, Sass ou Moins. Sass est un peu plus populaire et Less est un peu moins, mais ils sont aussi presque les mêmes. Maintenant, vous pouvez cliquer ici et télécharger la source. Vous pouvez utiliser les deux. Si vous voulez Moins, vous pouvez télécharger Moins ou celui-ci. J' ai téléchargé celui-ci, et je l'ai extrait ici. Le dossier dont j'ai vraiment besoin est ce Moins. C' est le dossier dont j'ai besoin. Je viens de copier ce dossier et inclus dans ce billet de blog ou document à l'échelle typographique. Les deux utilisent tous ces fichiers Less. Laissez-moi vous montrer comment tout cela fonctionne. Maintenant, nous avons notre fichier HTML, et vous pouvez voir ici j'ai le lien rel="stylesheet/less, » donc j'utilise « less.js ». Vous pouvez voir en bas ou ici le type de script, JavaScript et CDN. C' est le « less.js » que vous devez inclure pour laisser le dernier script ou code pour le compiler en CSS. Si vous ne connaissez pas Less, allez dans ce « less.js » et lisez à ce sujet. C' est très facile, comme vous pouvez le voir ici. Ce n'est pas difficile à utiliser. Vous avez juste besoin d'inclure une ligne de code dans votre front end et, et vous pouvez changer la feuille de style rel à cette feuille de styles/less plutôt que CSS, et vous commencez à utiliser Moins de fichiers. Ici, j'ai ce fichier moins/bootstrap, importé ici. Je crois que je l'ai importé deux fois, alors retirons celui-ci. Ouvrons-le dans le navigateur, et voyons tout fonctionne bien. Nous avons cette rubrique de niveau 1, 2, 3, 4, 5, et cette police de paragraphe, et celle-ci. Voyons comment j'ai utilisé ces tailles personnalisées pour mes polices. La première chose est que nous connaissons déjà ce gridlover.net, et j'utilise à nouveau le même réglage, 18, hauteur de ligne 1,5, facteur d'échelle 1,44. Maintenant, ce dont nous avons besoin à partir d'ici, ce sont ces valeurs em de ces polices. Tourne-leur ça, et nous allons les utiliser dans Bootstrap. Alors ouvrons les fichiers Bootstrap. Fondamentalement, le fichier principal que vous devez inclure ici à partir de ce dossier Less est ce fichier bootstrap.less. Il a toutes les importations de fichiers différentes, et les fichiers que nous allons changer sont ces « variables .less », et un autre, si vous avez vraiment besoin de jouer avec elle, est ce « type.less ». Je recommande que ne gâche pas ce « type.less ». Il a d'autres paramètres. Juste nous allons à cette « variables.less », et aller à cette section où nous avons la typographie, police, la hauteur de ligne et la couleur. Maintenant pour la famille de polices Sans Serif. Si vous voulez une autre police, comme je voulais avoir Source Sans Pro, je l'ai changée en Source Sans Pro, et j'ai également importé cette Source Sans Pro dans mes documents HTML afin que nous puissions l'utiliser ici. Ensuite, la famille de polices Serif est celle-ci, la famille de polices mono-espace. Maintenant, la base de la famille de polices est essentiellement notre famille de polices Sans Serif, donc notre police de base est fondamentalement celle-ci, Source Sans Pro. Ils remplacent les valeurs par ces variables. Ce n'est pas très difficile à comprendre. Maintenant, la taille de base de police était de 18 pixels, comme nous le voyons ici. C' est 18 pixels. Je l'ai mis à 18 pixels. Ce sont différentes fonctions, ceil et plancher, pour arrondir ces valeurs. Vous pouvez utiliser n'importe lequel d'entre eux. L' un arrondit au chiffre suivant, et l'autre au précédent. Vous pouvez le vérifier si vous voulez le changer. Maintenant, comment cette valeur vient, c'est essentiellement mon échelle. 1.44 est mon échelle. Vous pouvez également utiliser cette échelle Modularscale pour obtenir toutes ces valeurs, donc je vais utiliser celle-ci. Laissez-moi vous montrer comment utiliser celui-ci, 18 pixels et notre rapport est de 1,44. C' est notre première police, qui est de 18 pixels, puis de 1,44, puis de 2,074, puis de 2,968, puis de 4,3. Dans le même sens, si nous allons à cela, il a différents calculs, taille de police 3 em, 2.05, ou quelque chose comme ça. Donc, ce que nous allons faire, c'est que nous allons copier ces valeurs et les coller là où nous en avons besoin. Comme 4.3 va être notre, par exemple, la taille de titre 1. Donc, ce que nous allons faire est la taille de la rubrique 1 est 4.3, alors nous avons 2.986. Je vais sauter rapidement tout pour que vous puissiez utiliser la taille que vous voulez. J' utilise le titre 5, qui est de la même taille à 18 pixels. rubrique 6 est un peu plus petite. Je pense que nous devrions tous les deux avoir la même taille pour celle-là. rubrique 6 est un peu plus petite, peut-être que nous pouvons utiliser une petite taille pour celle-ci, qui est 0.694 par ici, mais nous allons utiliser une taille plus petite qui est 694 par ici. C' est 694. Ensuite, nous avons 2.074, et ensuite nous avons 1.44. Je dois changer beaucoup d'écrans, 1.44. Ensuite, nous avons 1 em, celui-ci, et ensuite celui-ci. Nous sommes tous disposés pour les titres. Hauteur de la ligne. Vous pouvez changer la hauteur de la ligne, si vous le souhaitez. Je l'ai mis à 1.25 parce que, si vous vous souvenez, les titres ont besoin de moins de hauteur de ligne. Nous définissons donc moins de hauteur de ligne pour les en-têtes. Vous pouvez également utiliser 1 ou peut-être 1.1, quelque chose comme ça. Sauvegardons-le et voyons à quoi ressemblera notre post. Voici notre échelle typographique définie dans Bootstrap. C' est, fondamentalement, l' échelle personnalisée pour Bootstrap, le rythme vertical, donc nous ne allons pas gâcher le rythme vertical personnalisé de Bootstrap. Si tu veux vraiment, vas-y et gâche avec ça. Laissez-moi vous montrer un exemple. Vous devez changer le fichier « type.less », fondamentalement. Donc, ici, nous avons un titre pour la famille avec la hauteur de ligne et tout réglé pour tous les titres. Ce que nous allons faire, c'est que nous allons changer les marges, haut, le bas et tout pour chaque rubrique, même les paragraphes et tout. Laissez-moi vous montrer le fichier exemple. Je vais l'inclure dans ce post. Cette conférence exercices sources, vérifiez-les. Laissez-moi vous montrer où il est. C' est aussi un exercice pour vous, les gars, donc je l'ai rendu un peu difficile. C' est le post que je vous ai montré blog avec Bootstrap en utilisant l'échelle et les tailles typographiques personnalisées, et j'utilise 27 pixels comme base de référence. Comment je l'ai fait, laissez-moi vous montrer les variables dans ce fichier de type. Laisse-moi te montrer ce que c'est. Maintenant, vous pouvez voir ici, j'ai changé de hauteurs de ligne et tout pour h2. C' est différent. Vous pouvez voir la marge supérieure, inférieure, rembourrage, 0, mais la hauteur de la ligne est la hauteur de la ligne multipliée par 2. Ensuite, nous avons le titre 3, tout est 0, la hauteur de la ligne par deux. Ensuite, nous avons le test Heading 3, qui est le titre le plus haut ici, celui-ci. Il a [inaudible] les off beat, donc il est padding-top 11, puis padding-bottom 11, line-height 32 donc tous ces sont égaux à 54, taille de police 32, et famille de polices est également personnalisé. Ce sont les paramètres personnalisés des paramètres par défaut de Bootstrap, donc ne vous inquiétez pas à leur sujet. Donc c'est comme ça que j'ai tout mis ici. Vous devez ajuster chaque titre en haut, les marges inférieures et tout, et la hauteur de ligne pour vraiment utiliser le rythme vertical dans Bootstrap. Donc, je ne conseille pas cela parce que cela va juste définir le texte. Mais qu'en est-il des boutons, fenêtres modales, d'autres contrôles ? Ils vont souffrir de ce paramètre, donc je vous suggère de rester avec les paramètres par défaut de Photoshop et juste changer les variables. Jouez avec eux. Donc, ce que nous avons appris aujourd'hui, c'est que nous utilisons notre échelle modulaire pour obtenir ces valeurs et les utiliser dans nos rubriques 1, 2, 3 et 4, ou vous pouvez également utiliser ces valeurs si vous le souhaitez, si vous les aimez. C' est ainsi que nous utilisons l'échelle typographique personnalisée dans Bootstrap. Ça met fin à ma conférence. Aussi, je veux que vous jouiez avec, essayez de le télécharger, et changer quelques paramètres, et voir à quoi ils ressemblent. Essayez également de changer cette famille de polices et de jouer avec elle. C' est donc la fin de cette section. Je vais essayer d'inclure quelque chose de nouveau que je trouve comme changer les polices ou l'échelle typographique pour les appareils mobiles et les appareils de taille moyenne comme les iPads et autres appareils de taille moyenne. Passons à la prochaine conférence. 67. Pour les développeurs → Ne pas utiliser le code de Typescale: Bonjour tout le monde. Je vous ai parlé d'un outil qui est typescale.com. Aujourd'hui, j'ai essayé son CSS, celui-ci et il a lamentablement échoué. Donc, n'essayez pas d'utiliser son CSS ou ses valeurs d'ici dans votre échelle. Le meilleur outil est à nouveau ce gridlover.net. Donc, utilisez ce code d'ici. Maintenant, j'utilise ce code et laissez-moi vous montrer comment mes trucs sont sortis. Laissez-moi vous montrer l'exemple dans la démo. Ok, maintenant la hauteur de la ligne, ils ne l'ont pas montré, mais je l'ai calculé, c'est 29 pixels. Vous pouvez voir que nos titres s'alignent très bien dans les trois hauteurs de base. Mais le problème, c'est avec nos paragraphes, ils ne sont pas alignés. Maintenant, il y a un autre problème, celui de nos niveaux 2 et 3. Donc, si vous utilisez la rubrique 2 puis la rubrique 3, il y a beaucoup d'écart. Parce que ce code utilise la même marge supérieure que vous pouvez voir ici, marge supérieure est 1.4144, titre 1, 2, 3 et 4. Donc, tous ces titres ont une marge supérieure qui est beaucoup, donc ils vont être trop séparés les uns des autres. Je ne pense pas que tu devrais utiliser celui-là. Vous pouvez utiliser des valeurs à partir d'ici dans votre échelle. Donc, si vous utilisez quelque chose comme 1.44, donc vous pouvez voir que la valeur inférieure ou la petite valeur de texte est 0.694, vous pouvez l'utiliser, mais je ne recommande pas d'utiliser ou d'attraper son CSS. Pour moi, cela génère quelques problèmes. Il n'est pas aligné avec précision. Je ne sais pas à quoi le fabricant d'outils ou le codeur l'utilisait ou peut-être ce qu'il avait en tête. Mais pour moi, ce n'est pas la queue. C' est donc une autre astuce pour ne pas utiliser le code d'échelle de type et utiliser le niveau de la grille. Je suppose qu'on devrait passer à la prochaine leçon. 68. Pour les développeurs → Introduction à la typographie réactive: Parlons de la typographie réactive pour ceux qui sont codeurs et concepteurs frontaux ou codeurs qu'ils savent que c'est un très gros problème. Il y a deux façons, il pourrait y avoir beaucoup de quelques plugins disponibles à partir de jQuery ou quelque chose comme ça, mais j'utilise normalement ces deux solutions. La topographie réactive signifie que les tailles de police doivent être ajustées en fonction de la taille de l'écran. Si vous avez une très grande taille de police comme 80 pixels ou 61 pixels police ou peut-être 70 pixels sur un grand écran. Pensez-vous que sur un petit appareil comme peut-être 480 pixels de large, il est bon ou pertinent taille ? Non, parce que votre taille de police sera trop grande pour ce petit écran, peut-être que tout l'écran sera rempli avec juste votre titre. Tu veux vraiment ça ? Non, d'accord. Nous allons voir quelles sont les solutions à ce problème. La première solution dont je vais parler est l'utilisation d'une valeur de pourcentage de taille de police HTML. Ce que nous faisons ici, c'est que nous fixons la taille police de base et la hauteur de la ligne dans l'élément HTML. HTML est fondamentalement l'élément supérieur. Il va contrôler tout la taille de chaque police ou de chaque texte sur votre page. Pour les petits écrans ou peut-être les écrans moyens, vous définissez la taille de la police à un certain pourcentage afin que cela soit pertinent pour l'écran de votre bureau. Si vous avez une police de 18 pixels sur votre écran de bureau ou de grande taille pour les grands écrans pour les petits écrans, vous les définissez à 80 pour cent. Vous pouvez définir sur les écrans moyens à 90 pour cent. C' est une solution un peu bon marché pour celui-ci parce que nos rembourrages, marges et tout le reste seront les mêmes, cela pourrait générer un problème, mais c'est une bonne solution. Réduisez la taille de police à 80 % par rapport à la taille de base. Si votre titre est comme 60 pixels, il peut devenir 50 pixels ou peut-être moins que celui sur les petits écrans. C' est une façon. Je vais vous montrer des exemples de codage pour ces deux solutions. C' est la première solution. Jetons un coup d'oeil à la deuxième solution. La deuxième solution est plus avancée ou vous pouvez dire qu'elle est plus efficace que la précédente. Ici, nous utilisons deux échelles de type distinctes pour nos différents écrans. Pour mon écran mobile ou de petits écrans, je pourrais utiliser une échelle de type qui s'adapte moins lorsqu'il est mis à niveau de 18 pixels à une autre taille de titre. Pour l'écran de bureau, je pourrais avoir une échelle très abrupte qui évolue avec beaucoup de changements d'une taille de police à l'autre. Permettez-moi de vous montrer un exemple avec l'utilisation du site d'échelle modulaire. Ici, nous avons le site de l'échelle modulaire. Je vais utiliser 18 pixels et ma base. Mon premier rapport sera de 1,5 ou vous pouvez avoir 1,44 que nous utilisions dans nos exercices précédents. Ce que vous pouvez faire, c'est que vous pouvez utiliser le second comme 1.2 pour quelque chose comme ça. Vous pouvez voir la taille B et A, ce sont deux tailles différentes. Sur les écrans mobiles, notre première taille de police sera de 18 pixels, puis il sera de 22 pixels puis il sera de 27 pixels environ, puis il sera de 32 pixels ou 33 pixels. Ou si vous voulez aller plus loin, vous pouvez aller à 40 pixels. Mais vous pouvez voir notre rapport supérieur qui était bleu un sur ici.Vous pouvez voir 18 pixel est notre base qui est en noir et le prochain arrêt est de 26 pixels, puis 37 pixels, puis 54 pixels ou peut-être comme les 77 pixels. Nous avons un très grand nombre de changements dans un rapport et dans l'autre rapport que nous allons fixer pour nos appareils mobiles ou de petite taille, nous allons utiliser moins ou moins. Un autre conseil est que j'ai vu sur différents sites Web ou experts, ils disent que si votre ratio est de 1,5 essayez d'obtenir l'autre ratio qui est comme avec la différence de 0,25. Cela ne va fondamentalement pas changer brusquement problème de mise à l'échelle, donc c'est fondamentalement un changement étape par étape, une étape va être 0.25. En gros, nous augmentons ou diminuons le ratio avec 0,25, soit la moitié de 5,5. Si j'ai comme 1.44, je pourrais aller à quelque chose comme 1.2 à quelque chose comme ça. Cela semble plus rationnel et c'est qu'il y a deux échelles de module pour différents écrans. Vous pouvez en avoir un troisième, mais je pense que pour les tablettes et les grands écrans un ratio est suffisant et un est bon pour vos écrans mobiles et plus petits. Ce sont les solutions que nous utilisons pour la topographie réactive. Vous pourriez trouver beaucoup d'outils JavaScript ou peut-être des plug-ins. Je vais partager un document de ressources contenant tous les liens ou peut-être les plugins JavaScript que j'ai trouvés sur ce sujet, mais en ce moment je suis plus préoccupé par les solutions CSS plutôt que d'inclure un autre fichier supplémentaire JavaScript. Il s'agit de topographie réactive. Dans les deux prochaines leçons, nous allons voir les exemples pour les deux. Nous allons utiliser ces échelles, alors commençons et passons à la leçon suivante. 69. Pour les développeurs→ différentes tailles pour plusieurs tailles d'écrans: Dans cette leçon, nous allons utiliser la deuxième technique de ninja secrète pour la taille de la police, pour la conception web réactive. En fait, nous allons simplement changer le facteur d'échelle parce que notre taille de police semble très grande sur les petits écrans. Auparavant, nous utilisions 1,44 comme facteur d'échelle, maintenant nous allons utiliser 1,22. Ce que nous allons faire, c'est nous allons tout copier d'ici. Changons-le en pixel, puis REM, juste pour voir que les tailles ont été mises à jour. Je vais copier d'ici vers le haut, CTRL+C, et ce que je vais faire est, je vais aller à mon petit écran, qui est celui-ci, donc écran multimédia seulement, c'est petit écran, je vais supprimer ce pourcentage HTML système de contrôle, et nous allons le coller ici. Remplaçons cela par nos 18 pixels. Pour la hauteur de ligne, nous avons utilisé 27 pixels, désolé, c'était 27. Je ne vois pas mon clavier à l'arrière de mon micro, il est juste devant mon visage. HTML. C' est vraiment mauvais. La première étape est, j'essaie toujours d'utiliser ma taille de police à l'élément HTML. C' est mieux pour moi et parfois je pense qu'il est recommandé par la plupart des utilisateurs experts. Si vous êtes plus expert que moi, vous pouvez écrire à ce sujet dans la question ou tout ce que vous pouvez suggérer à ce sujet. Maintenant, ce que nous allons faire, c'est, voyons comment ça va ressembler sur notre petit écran. abord, ce que nous allons faire est que nous allons supprimer cette taille de police HTML et passer sur nos écrans moyens, parce que nous n'en avons pas besoin. Voyons à quoi ressemblent nos polices et leurs tailles. Changez avec ce grand, ok, moyen, c'est la même chose, nous n'avons besoin de rien pour changer. Allons à ça. Ici, nous avons le petit. Vous pouvez voir que la taille est décalée de façon spectaculaire, mais nos hauteurs de ligne ont l'air quelque chose d'étrange. De plus, il y a beaucoup de distance entre ces deux paragraphes. Notre deuxième position est bonne, la troisième est aussi bonne, mais la première a un peu de problème. Allons réparer ça. Passons à la première rubrique de notre requête média, donc c'est notre début de requête média, et c'est notre premier titre. La taille de la police est celle-ci, la hauteur de la ligne est un peu au-dessus de la taille de la police donc je pense qu'elle devrait être similaire. Peut-être que vous pouvez utiliser quelque chose comme ça, juste la hauteur de ligne 1. Sauvegardons-le et rafraîchissons-le. Cela va mieux maintenant, mais nous avons maintenant une autre question à savoir que ce paragraphe s'est rapproché trop de cette rubrique. Éloignez-le de la première position. Nous allons utiliser celui-ci. Nous allons copier-coller la marge, bas, et le haut sont les mêmes. instant, ne vous inquiétez pas à propos de la verticale avec eux, juste nous allons aller avec notre intuition, alors ne vous inquiétez pas pour ça maintenant. Ça a l'air mieux. 70. Pour les développeurs → Unité CSS pour la typographie réactive: Dans cette leçon sur la typographie réactive, nous allons regarder le premier exemple que nous avons vu dans notre conférence précédente, le changement de valeur en pourcentage pour l'élément HTML pour contrôler la taille de la police. Maintenant, c'est le fichier que nous utilisions dans nos exemples précédents. Laissez-moi vous montrer quels sont les paramètres que nous avons. Taille de police qui est 18 pixels, gridlover.net. Nous utilisons ces paramètres,1,5 hauteur de ligne, et le facteur d'échelle est 1,44. Ce que j'ai fait, c'est que j'ai copié ce code REM d'ici dans le fichier CSS. C' est le même fichier CSS. Il y a peu de choses que j'ai faites avec. Un, est que j'ai importé normaliser, toujours essayer d'importer ce normaliser pour réinitialiser vos styles CSS ou les styles par défaut de votre navigateur et tout le reste. C' est donc un must-have, toujours l'inclure dans vos projets. Le deuxième est cette méta viewport. Vous devriez avoir celui-ci pour vos écrans mobiles ou appareils, petits appareils. Ceci est notre feuille de style et voici comment il est en ce moment à la recherche. Laisse-moi te montrer celle-là. Ouvrons-le dans le navigateur. Ici, nous avons, vous pouvez voir sur le côté droit il montre grand écran. Comment je l'ai fait, j'ai utilisé body:after tag. Si vous n'êtes pas familier avec ces pseudo-balises ou pseudo-éléments de HTML, vous devriez étudier à leur sujet. Tapez le site Web Google ou W3C pour en savoir plus. Cela consiste essentiellement à ajouter un bouton après mes balises de corps. Donc c'est comme ça que ça se montre ici. Sa position est fixe et le centre d'alignement du texte. Fondamentalement, j'affiche un bouton après le corps. Alors que mes éléments de corps ont commencé, celui-ci continue à apparaître après ça. Donc, ce sont tous les paramètres. Il s'agit de la couleur d'arrière-plan. Pourquoi je l'utilise ? Parce que, laissez-moi vous montrer, si je passe à ma vue réactive, vous pouvez voir que l'écran devient trop petit, il change le texte et la couleur pour les petits. Je l'ai utilisé pour tester notre topographie réactive. C' est un écran moyen et c'est grand. Ici, nous avons comme ça. Vous pouvez voir petit, moyen, puis grand. Rendons-le un peu plus grand. Maintenant, c'est une chose, comment je l'ai atteint rapidement ? J' ai déclaré ce corps dans mon CSS normal simple. Ensuite, je suis allé à cette requête multimédia au média seulement la largeur maximale de l'écran 600 pixels. À ce stade, tout écran qui est de 600 pixels ou moins de 600 pixels, j'ajoute un contenu de petit à ce corps : après la balise et la couleur d'arrière-plan est celui-ci. Celui-ci est un peu verdâtre. C' est un très petit extrait que j'ai choisi d'un gars en ligne. Je ne suis pas sûr de me souvenir de son nom, mais c'est un outil très pratique lorsque vous devez tester vos requêtes médias. Tout est prêt. instant, notre taille de police ne change pas. Si vous allez à l'écran moyen ou petit, vous pouvez voir si je vais à cette petite taille d'écran, qui est comme 360, quelque chose comme ça, il ne change pas du tout. Donc, le titre est que vous pouvez voir une lettre, désolé, un mot par ligne, ça me semble très étrange. Je suppose que ça ne devrait pas ressembler à ça. Maintenant, ce que nous allons faire est, laissez-moi voir si le bon fichier est ouvert dans le navigateur. Oui, c'est le même. Maintenant, ce que nous allons faire est que nous allons utiliser une autre échelle, désolé, un pourcentage pour nos documents HTML. Ce que j'ai fait, c'est que j'ai copié tout ce code. Copions à nouveau juste pour être sûr que vous ramassez tout. Donc, « Copiez » ceci et je vais le coller dans mon style.css comme ça. Il suffit de supprimer tout ce que j'avais avant. Pas ce corps : après tag et Control V. C'est ce que j'utilise. Il suffit d'actualiser le fichier, et vous pouvez voir ce sont les paramètres que j'utilisais. Vous pouvez voir ici que j'ai quelques problèmes avec le bas de la marge à cette rubrique 1, ignorons maintenant. Maintenant, le premier changement que nous allons faire est, nous allons écrire notre modèle HTML parce que nous devons contrôler les éléments. Donc HTML, et nous allons utiliser la taille de la police et la hauteur de la ligne dans celui-ci. Je vais utiliser plutôt que 1.25 REM, je vais utiliser 18 pixels. C' est notre police de base, et la hauteur de ligne va être de 27 pixels. Donc, la première étape est, je vais supprimer cette taille de police de mon corps à cet élément HTML, et nous avons sauvé cela, nous allons le rafraîchir. Rien ne va changer. Changeons ce bas de marge égal à ce haut de la marge pour le titre dont il a l'air très différent de mon point de vue. Maintenant, c'est mieux. Aussi, vous pouvez voir dans cette zone ici, cette étiquette de titre 2, il a beaucoup de hauteur de ligne, qui est celui-ci. Rendons la hauteur de la ligne égale à ceci, égale à cette taille de police, qui est deux points quelque chose comme ceci. C' est mieux maintenant. Ce sont les quelques ajustements que j'ai faits. J' ai utilisé mes tripes intérieures ou peu importe ce que vous appelez, pour m'assurer que tout semble bien. Maintenant, si nous marchons vers le petit, et moyen, puis grand, il montre très grande police sur le petit écran, je suppose. Voyons quelle est la taille de cette police. Je pense que ce sera 61 pixels avant d'aller le calculer. Oui, c'est 61, 60,75, ce qui est 61 pixels. Donc, ignorons tout de suite. Maintenant, nous allons utiliser notre pourcentage HTML pour contrôler la taille sur les tailles d'écran. Donc, nous allons copier ce code et nous allons à cet écran média seulement. Je vais le coller à l'intérieur de ceci, parce que celui-ci est lié à... nous allons le déplacer ici. Je vais le coller ici comme ça. Maintenant, pour les petits écrans, nous allons déplacer notre taille de police à 80 pour cent ou peut-être 85, 80 pour cent. Mettons-le à 80 pour cent. Pour nos écrans moyens, nous allons utiliser le support système, nous allons utiliser 90 pour cent. Voyons à quoi cela ressemble ou ressent. Oui. Maintenant, sur le petit écran, vous pouvez voir que nous avons au moins deux mots sur nous, une seule ligne et il a l'air mieux qu'avant. Avant que ce n'était qu'un seul mot sur une ligne, et il prenait beaucoup d'écran sur le médium, vous pouvez voir la taille va se déplacer vers le haut. Vous pouvez voir comment la taille change sur les différentes tailles d'écran. Le problème avec cette technique est que vous pouvez voir que la taille de la police de paragraphe se déplace également, et qu'elle semble un peu plus petite sur votre petit écran. Donc, si vous voulez ajuster cela, vous pouvez ajuster la taille de la police de paragraphe ici comme ça. Taille de la police, 120 %. Augmentez la taille car votre code HTML la diminue déjà. Copions, désolé. On doit le coller ici, comme ça. Alors voyons à quoi ça va ressembler. Maintenant, c'est mieux. Vous pouvez voir ici, à l'écran moyen, il est mieux. Sur le petit écran, encore une fois, notre taille de paragraphe est meilleure qu'avant. Ceci est une solution rapide pour votre typographie réactive, et si vous ne connaissez pas les requêtes multimédias, vous lisez à leur sujet ou apprenez à leur sujet. Ce n'est pas très difficile. Voyons voir quel est l'effet de cela. C' est ainsi que nous utilisons des valeurs de pourcentage pour notre HTML, désolé, taille de police HTML et différents éléments comme j'ai utilisés sur le paragraphe. Vous pouvez également cibler vos balises d'en-tête comme H1, H2, H3, H4 et les dimensionner à l'aide de valeurs de pourcentage. Je pense que c'est une technique très soignée. Mais le problème est avec ces marges, elles vont être les mêmes sur tous les écrans comme vous pouvez le voir ici. Donc, si vous voulez les ajuster, nous avons besoin de la deuxième technique. Je vais inclure tous ces fichiers dans les ressources, alors assurez-vous de les télécharger et de voir le code vous-même. Si vous rencontrez un problème, si vous ne comprenez rien, posez simplement des questions. Ne vous embêtez pas à ce sujet. Je vais répondre à l'une de vos questions les plus stupides. Alors ne résistez pas, ne vous inquiétez pas, demandez. Passons donc à la deuxième technique, qui est que nous allons utiliser deux échelles typographiques différentes pour différents écrans. Passons à la leçon suivante. 71. QR apprenants → Comment élargir l'échelle typographique pour un usage réactif de conception Web: Dans cette leçon, je vais parler des balances modulaires, et je vais parler des balances spécifiquement modulaires pour le web, les mobiles et les tablettes. Une de mes étudiantes, elle s'appelle Sandra, et je pense qu'elle a du mal à comprendre comment elle peut utiliser une échelle modulaire différente pour un mobile et pour une tablette, parce que sur les tablettes et les mobiles, on ne peut pas utiliser une très grande taille comme les ordinateurs de bureau. Je vais vous montrer en utilisant l'échelle modulaire dot com, comment nous pouvons choisir différentes échelles, ou peut-être nous pouvons avoir plusieurs échelles, afin que nous puissions les utiliser dans n'importe quel appareil ; peut-être des appareils plus petits, des échelles différentes, puis des tablettes, échelle différente, et pour les ordinateurs de bureau, nous allons utiliser une échelle différente. Commençons. Maintenant, comme vous pouvez le voir sur cette échelle modulaire dot com, ma base est définie sur 16 pixels et le ratio est de 1,5, donc c'est la valeur par défaut. Maintenant, je recommande de ne pas choisir beaucoup plus grand rapport parce que vous pouvez voir ici, vous avez ces 81 pixels, donc peut-être que nous pouvons utiliser sa très grande taille. Ensuite, nous avons ce 54, puis 36, 24, 16 est notre taille de base. Maintenant, si nous allons à cette petite taille, ils sont presque inutilisables, donc nous ne pouvons pas utiliser ce 11 pixels ou 10 pixels, parce qu'il est vraiment petit. Maintenant, comment résoudre ce problème ? Maintenant, si vous allez à ce ratio, nous allons utiliser ou ajouter un autre ratio ici, donc ce que nous allons faire est, nous allons utiliser, juste supprimer cela ; et nous allons utiliser, écrire ces tailles par ici, 81, 54, 36, 24 et 16. Maintenant, ce que nous allons faire, c'est que nous allons diviser ces cinq par moitié, donc nous allons en utiliser la moitié, ce qui va être de 0,25. Maintenant, nous avons un ensemble séparé de tailles, qui est 61 et 49, 39 pixels, 31 pixels, 25, 20, 16, et là nous avons une autre taille qui est de 13 pixels ou 13 points. C' est une petite taille, maintenant nous avons une très grande échelle, nous avions quatre tailles de l'échelle précédente, où nous utilisions 1,5 ratio, donc un, deux trois, quatre, cinq, donc 16 est commun, donc Je vais utiliser ces trois, 54, 36 et 24. Ensuite, nous pouvons également utiliser 0.25 et nous pouvons également utiliser ceci, 49, 39. Par exemple, si vous utilisez un mobile, vous voulez une taille mobile pour votre titre, donc le titre le plus grand, vous pouvez utiliser celui-ci. Parce que si vous utilisez celui-ci ou peut-être 54 pixels, ce sera trop grand, alors nous y allons. Nous avons beaucoup d'options de tailles différentes ici comme ça, et si vous voulez plus, vous pouvez également aller à 1.75 et vous aurez différentes tailles comme 49, 28. Vous pouvez voir que c'est une nouvelle taille, 28, aussi, vous pouvez voir ce 85 ou 86. Ce sont les méthodes que j'utilise pour obtenir l'échelle avec beaucoup de taille différente. Si je vais à cet ajout, maintenant vous pouvez voir que j'ai ajouté deux écrans ici, j'ai utilisé ce plus, donc j'ai deux échelles différentes, 1,5 avec celui-ci, et si je vais à celui-ci, je peux utiliser 1.25. Maintenant, ils sont côte à côte, maintenant vous pouvez voir ici, si je vais à cette table, vous pouvez voir que nous avons beaucoup de tailles qui sont vraiment utilisables, et vous pouvez voir ce 61, 48, un, deux, trois, quatre, cinq, six et sept ; Sept tailles ici, un, deux, trois, tailles ici, donc sept et trois, nous avons beaucoup de flexibilité à partir de 16 pixels, puis nous avons 20, 24 ou 25, alors vous pouvez utiliser 31, 36, 54, 40 pixels et 49 pixels, alors nous pouvons utiliser 61, et ensuite nous pouvons utiliser 81. Vous pouvez voir ici nous avons une autre échelle, alors vous pouvez également ajouter une autre, qui va être 1.25, et vous pouvez voir ici, nous avons quelques tailles plus, donc 1.75, maintenant vous pouvez voir nous avons 28, qui est une nouvelle taille, 49. Nous en avons déjà 49, vous pouvez voir par ici. Si vous incrémentez ou diminuez vos valeurs dans cette plage, comme les étapes de vous pouvez dire des montants égaux comme si nous avons, par exemple, 1.8 comme un ratio. Par exemple, celui-ci, c'est 1.8, donc je vais passer celui-ci à 1.6, et celui-ci à 1.4. Vous pouvez voir comment j'utilise tout cela, donc il est 22 puis nous avons 26, puis nous avons eu 29, trois tailles différentes. 32, 41 et 52. De cette façon, vous pouvez avoir plusieurs échelles modulaires, une large gamme de différentes tailles et vous pouvez les utiliser comme vous le souhaitez, vous pouvez les utiliser sur des mobiles. Vous pouvez sélectionner trois ou quatre tailles pour les mobiles, et vous pouvez sélectionner seulement deux ou trois pour le bureau C'est ainsi que vous pouvez appliquer cette échelle modulaire et l'étendre pour n'importe quelle application. Il s'agit de balances modulaires et de la façon dont vous pouvez l' étendre pour les mobiles, les tablettes et les smartphones. Je pense que c'est tout, et si ça ne fait toujours pas votre confusion ou vous enlève vos confusions, vous pouvez me poser des questions à tout moment. À bientôt dans une autre leçon. Prenez soin et au revoir.