Concevoir un site Web dans Affinity Designer pour les débutants et au-delà

1. Conception Web dans la vidéo promo de Affinity Designer Promo: Si vous envisagez de commencer comme un webdesigner freelancer, vous avez probablement essayé d'exploiter photo shop dans le passé, et je sais la douleur que je dîne. Je me souviens avoir passé des jours après jours, voire des semaines après semaines, à essayer de me souvenir de certains outils et effets. Mais heureusement, nous vivons à des moments où si vous voulez commencer comme un web designer freelancer. Mais vous pouvez juste mettre la boutique photo de côté. Bonjour, mon nom est David Tyminski, et dans ce cours, vous apprendrez comment utiliser une ailette dans le concepteur pour concevoir des sites Web de A à Z. Ce cours est rempli d'informations précieuses. Toute recrue de concepteur Web devrait savoir, par exemple comment choisir les meilleures couleurs et fonds pour vos sites Web. Qu' est-ce qui rend un site Web conçu par des professionnels ? Quelles sont les tendances modernes en matière de design Web que vous devez connaître ? Et ce n'est que l'introduction, parce que le vrai pain et le beurre du discours sont à l'intérieur de ses parties pratiques. Nous allons se salir les mains et explorer tous les outils et techniques armes professionnelles et refuser de concevoir un site Web à l'intérieur de concepteur d'affinité qui comprend la construction de cadres de fil et de gruau, qui sont les blocs de construction de chaque en utilisant des ressources pour rendre le processus de conception ultrarapide, créant des styles de texte qui vous permettent de modifier des fonds en un clin d'œil. Et, bien sûr, conception d'un site Web, vous apprendrez à le concevoir à partir de l'ouverture du fichier en passant par le lieu et les images, en ajoutant du texte et des arrière-plans jusqu'à l'exportation dans la conception que vous distribueriez finalement à un client. Nous avons beaucoup de bonnes choses à couvrir dans ce cours, et je crois vraiment que cela vous aidera énormément dans la conception de sites Web étonnants à l'intérieur d'un ajustement pour concepteur, donc j'aimerais vous voir à l'intérieur. 2. 1Introduction au cours: ce cours est tout au sujet de l'utilisation d'un ajustement dans le concepteur pour la conception Web. Si vous n'êtes pas familier avec les logiciels d'abord, vous découvrirez rapidement ce qu'il s'agit et comment le configurer pour la conception Web. Avant de commencer à concevoir quoi que ce soit dans Afinitor, Designer examinera les concepts de conception Web et les bonnes pratiques. Vous apprendrez comment choisir les couleurs pour votre design et où trouver la couleur, inspiration et les thèmes de couleur prêts à l'emploi. Vous apprendrez également les armes de base et la topographie, ce qui est extrêmement important non seulement pour une bonne conception Web, mais aussi pour une bonne conception en général pour tout savoir sur les titres imposés par le corps et la façon dont les orteils les jumelent pour une excellente expérience utilisateur. Ensuite, nous allons jeter un oeil à une structure de sites Web typique. Design sage, bien sûr. Nous parlerons des logos, guerres secondaires de navigation et de tous les autres blocs de construction de sites web. Après cela, nous parlerons de ce qui est dans et ce qui n'est pas dans les armes sur le monde en ce moment. Nous rechercherons également une source d'inspiration pour la conception Web sur le Web. Avec toutes ces connaissances et compétences vont passer à la partie conception du cours lorsque les conceptions effectuées vont jeter un coup d'oeil à la finalisation de votre travail, vous apprendrez comment enregistrer et exporter correctement pour différents formats de fichiers. Il y a beaucoup de bonnes choses à couvrir, et je crois vraiment qu'une fois que vous avez terminé le cours et pratiqué vous-même, vous allez commencer à créer des designs de sites Web étonnants dans un ajustement dans le concepteur en un rien de temps. Alors, sautons droit dans le cours et commençons par les fondamentaux. 3. 2.1Qu'est-ce qu'Affinity Designer et comment le configurer pour la conception de sites Web: Si vous êtes complètement nouveau à offenser le concepteur, voici quelques faits à ce sujet. Tout d'abord, offenser le concepteur est avant tout une application de conception graphique factorielle. Mais cela ne signifie pas qu'il ne convient pas pour la conception de Scream et d'appareils. En fait, c'est une excellente combinaison d'outils et de capacités conçus pour le travail à l'écran et hors écran. Au début, il était juste disponible pour Mac OS, mais depuis la fin 2016, vous pouvez également l'installer uniquement Windows Machine. Dans ce cours, je vais utiliser une version PC hors du logiciel. Cependant, si le concepteur est installé sur un Mac, vous ne devriez pas avoir de problèmes à suivre seul. Rappelez-vous juste que chaque fois que j'utiliserai le modificateur de contrôle keep, vous devrez utiliser la touche de modificateur de commande. Et chaque fois que j'utiliserai le modificateur Olt keep, vous devrez utiliser la touche modificateur d'option sur votre clavier. La touche Maj est la même pour les deux systèmes d'exploitation. Ce qui est génial dans le concepteur en termes d'interopérabilité, c'est qu'il vous permet de travailler et d'exporter vers différents formats de fichiers allant du vecteur standard, une fois comme V G et E. P s à un fichier raster standard comme J. P, G, P et G et Cadeau. Il vous permet d'ouvrir des fichiers PSD standard et A. I, et il fait vraiment bien le travail. Il peut également exporter vos illustrations dans des formats de fichiers qui peuvent être lus par d'autres morceaux de logiciels de conception tels que Dobie Photo Shop et Adobe Illustrator. Donc, si vous avez besoin d'enregistrer votre travail en tant que pdf tiff ou même PSD, vous pouvez le faire dans affinity Designer. Donc, si finalement vous allez envoyer votre conçu à un développeur, vous pouvez le faire en utilisant un fichier PSD standard, et vous n'avez pas à vous inquiéter que le développeur ne sera pas en mesure d'ouvrir le fichier. Vous avez produit des supports de concepteur d'affinité , des calques , des symboles, des photos comme des effets, guides et du grain, et pratiquement tout ce dont vous auriez besoin pour concevoir des sites Web avec elle. Je dois te dire que tout ça n'est qu'une pointe de l'iceberg. Je veux dire, le logiciel peut faire tellement de choses, et il y a certains aspects qui le rendent plus frappant qu'illustrateur ou photoshoppé. Pour certains types de travaux de conception, c'est vraiment un guichet unique pour les besoins de conception. Vous pouvez concevoir des logos avec des sites Web cartes de visite, pratiquement tout ce que votre client pourrait vouloir être conçu. Mais ce cours n'est pas une question d'apprentissage. Tout ce qu'il y a à savoir sur l'évanouissement d'un designer. Si vous avez besoin de cela, jetez un oeil à mon comment commencer rapidement avec le cours de concepteur d'affinité où vous pouvez apprendre tout ce qui est à savoir. Le logiciel de ce cours se concentrera sur l'utilisation du programme dans un scénario de conception Web, donc je pense que nous pouvons jeter un oeil sur les capacités de conception Web hors concepteur en ce moment. 4. 2.2.2Affinity Les capacités de conception Web de concepteurs: Afinitor designer est mis en place pour vous grand. J' ai de l'expérience de conception dès la sortie de la boîte. Il n'y a vraiment pas grand-chose à faire pour profiter de toutes ses capacités de conception Web , qui va jeter un oeil maintenant. Tout d'abord, offensant. Le concepteur prend en charge les couches, ce qui est assez important si vous voulez rendre votre design soigneusement organisé. C' est toujours une bonne idée de placer vos éléments séparés en construisant des parties séparées d'une conception de site Web sur des couches distinctes. Les éléments comprenant l'en-tête doivent être placés sur un calque séparé. Les éléments comprenant la barre latérale doivent aller sur un calque séparé et ainsi de suite. C' est une bonne technique de production de nommer correctement les couches. Au lieu de laisser leurs noms génériques, tels que calque une couche à etcetera, vous devriez les renommer et leur donner des noms plus logiquement descriptifs qui se rapporteraient au contenu des couches. Par exemple, article de la barre latérale Hatter Food ER, etc. J' irais même un pas plus loin et creed sous-couches valant logiquement des noms descriptifs,par exemple, par exemple, qui crée des sous-couches pour seulement les blocs de navigation ou Brandon assis à l'intérieur de la couche de chapelier . y a vraiment rien de plus indicatif d'un design bâclé et d'un concepteur qui conserve tout son contenu sur une seule couche générique. Si vous êtes un fan d'ombres, Grady INT et de flous, vous serez heureux d'apprendre que le designer offre une variété d'effets hors jeu que vous pouvez mettre fin à votre œuvre. Ils ne sont pas destructifs, ce qui signifie qu'ils ne modifient pas définitivement l'illustration mais sont ajoutés dynamiquement à son œuvre et peuvent être modifiés à tout moment. Il serait beaucoup plus difficile de créer des conceptions de sites Web sans nos tableaux. Ils sont le meilleur moyen non seulement de concevoir des versions mobiles du site Web, mais aussi de mettre en valeur votre travail. chose la plus importante qu'il doit garder à l'esprit lors de la création de sites Web suffisamment dans concepteur est que par défaut, lorsque vous créez un nouveau fichier, vous ne créerez pas de tableau d'art. Le vers le sud vous permet de choisir si vous souhaitez créer une illustration ou simplement quitter page par défaut. N' oubliez pas que lorsque vous souhaitez créer dans notre rapport, lorsque vous créez votre fichier, cochez l'option Créer une illustration à bord. Bien sûr, si vous l'oubliez simplement ou changez d'avis, vous pouvez toujours utiliser l'art à bord. Toujours pour créer un site Web de conseil d'art Les conceptions ont besoin de la perfection des pixels, et vous pouvez utiliser des concepteurs, toute la famille d'outils et d'options. Juste pour ça. Ce qui est génial avec cette fonctionnalité, c'est que vous pouvez simplement choisir un préréglage de capture que je conçois et être sûr que les options de capture parfaites à des fins de conception Web sont activées . Il va également activer l'alignement des pixels de force et se déplacer par les options de pixels de maintien juste pour s'assurer que tous les objets sont accrochés et se déplacent correctement. Quand vous avez le claquement. design activé vous montrera quand les objets sont alignés, mais indiquera également la distance en pixels entre des objets spécifiques. Le préréglage de capture U que j'ai conçu permettra également à votre œuvre d'accrocher deux guides et de s'accrocher à la grille. Donc, s'il y a les utiliser dans votre flux de travail, vous que j'ai conçu le préréglage de capture vous permettra d'aligner parfaitement l'illustration avec eux. Et si vous n'avez jamais utilisé la grille avant parce que c'était trop déroutant, vous serez heureux d'apprendre que Designer propose une grille automatique, qui trouve les meilleurs paramètres par lui-même. Tu n'as pas besoin de tout compter seul. La grille change en fonction de la valeur Zoomer que vous avez définie. Bien sûr, si vous le souhaitez, vous pouvez changer la grille en manuel et entrer vos propres valeurs. Vous pouvez également utiliser le gestionnaire de guides pour placer vos guides précisément là où vous voulez qu'ils aillent . Afinitor designer est avant tout un programme de conception de facteurs, mais il vous permet d'imiter l'environnement de pixel dans lequel vos conceptions de sites Web vont finalement vivre . À des fins de conception Web, vous pouvez utiliser la vue en pixels standard et une vue rétine haute densité de pixels. Cela vous permettra de prévisualiser ou de concevoir comme s'il avait été entièrement réalisé à partir de pixels. Un site Web ne peut pas vivre sans texte. Il est si important que de nombreux designers en font le point central de leurs conceptions, en supprimant les éléments graphiques Manny que possible. Et c'est vraiment facile de travailler avec le concepteur taxant. En plus des options standard de caractère et de paragraphe, vous pouvez créer des styles de texte qui accélèrent le processus de désactivation des fonds. Dans votre design. Vous pouvez avoir des dizaines et des dizaines de styles de texte différents, et vous pouvez changer pratiquement tous les aspects de ceux-ci. Designer compte avec la possibilité de créer vos propres bibliothèques à partir des ressources que vous pouvez utiliser lors de la conception de sites Web. Il est livré avec jolie trouver les 10 actifs de l'Iowa que vous pouvez simplement glisser sur les actifs de la planche de pâte étaient un peu comme des symboles. À propos de la différence entre les ressources et les symboles est que vous pouvez créer des bibliothèques à partir d'actifs qui peuvent être exportés ou incorporés dans un document spécifique. Et vous ne pouvez pas faire ça avec des symboles assez dans le designer. Donc, disons que vous construisez un cadre métallique pour votre site web. Vous voudriez juste les éléments schématiques pour ce droit ? Créez simplement vos propres représentations d'un système de navigation de logo. Bloquer dispose etcetera, puis sélectionné, et dans le menu du panneau, choisissez et parmi la sélection. L' élément ira directement dans la bibliothèque d'actifs et vous attend. Si tu veux l'utiliser à nouveau. Offrir le concepteur est livré avec cet espace de travail séparé destiné uniquement à exporter des éléments de votre conception. Il est appelé à la personna d'exportation, et c'est un excellent moyen d'exporter des parties tranchées de votre design. Vous pouvez simplement accorder l'outil de tranche, créer une tranche à partir d'un certain élément de conception et exporter en tant que plaidoyer de fichier séparé. Il y a beaucoup d'outils et d'options qui vous permettent de créer des conceptions de sites Web magnifiques dans un ajustement dans les outils de concepteur et les panélistes comme les couches sont vers la capture. Manager etcetera vous aidera à créer vos propres sites Web. Mais croyez-moi qu'on a juste écrémé la surface ici. Il y a tellement plus à concevoir des sites Web en utilisant offensant au concepteur et vous découvrirez tout cela au fur et à mesure que le cours progresse. Je suppose qu'à ce stade, nous pourrions nous lancer dans la création de notre premier design, mais je veux que ce cours soit quelque chose de plus qu'une simple vitrine des techniques et des processus de conception . Je voulais acquérir des connaissances Thora sur le web design contemporain. Ensuite, nous allons jeter un oeil sur les principes d'une bonne conception Web, suivi d'informations pratiques sur les couleurs, typographie et les éléments utilisés pour assembler un site Web. 5. 3.10 principes de bonne conception Web de bons principes: Si vous êtes un concepteur Web débutant, l'abondance d'informations que vous devez découvrir et apprendre peut faire tourner vos mains. C' est pourquoi j'ai dressé une liste de 10 principes essentiels sur une bonne conception Web qui vous aidera à commencer. Regardez chacun de ces principes est une sorte de ligne directrice, mais pas une règle absolue que vous ne pouvez pas grouper. Cependant, les suivre, surtout si vous venez de commencer, vous permettra d'éviter beaucoup d'erreurs débutantes. Donc une bonne conception Web se soucie toujours de l'utilisateur final. Après tout, comme Steve Jobs l'a dit, le design n'est pas à quoi il ressemble, mais comment il fonctionne. Et il doit fonctionner parfaitement en termes de servir le visiteur de la meilleure façon possible, vous devez concevoir le site Web avec son but à l'esprit. Vous devez penser, comme l'utilisateur le pense quand il ou elle visitera le site, penser à ce que les visiteurs s'attendent à trouver sur le site des informations, divertissements, peut-être des produits. Qu' est-ce que cela attire en termes de conception et ensuite conçu le site en conséquence ? Celui-ci est extrêmement important, et je dois admettre que j'ai une sorte de partialité personnelle à l'égard du texte mal exécuté sur le côté. Je ne parle pas de topographie spécifique, mais de composition taxée. L' utilisateur veut trouver et consommer l'information rapidement et sans effort. C' est pourquoi il est si important de construire correctement vos paragraphes. Le texte joliment composé comporte des en-têtes, des paragraphes courts et des puces pour une lecture facile. Je pense qu'à la longueur des paragraphes est crucial pour les conceptions orientées vers l'information. Ces dernières années, droit d'auteur mobile s'est répandu sur Internet, rendant l'ensemble des paragraphes aussi courts qu'une seule phrase. Un bon nombre de phrases dans les paragraphes est généralement de 2 à 3. Il est généralement admis que les polices de caractères sensorielles, c'est-à-dire celles qui n'ont pas de terminaisons décoratives sur les lettres, sont plus faciles à lire sur les écrans numériques. Je ne le considérerais pas comme un dogme, mais je conseille fortement de ne pas utiliser plus de deux polices de caractères différentes dans votre conception . Que vous optiez pour Sand Saref ou Serif Politefaces est une filiale pour rester dans votre choix de fonds tout au long de cette conception. Si vous avez décidé d'aller pour les titres de Sarah et un corps serif, tenez-vous à eux. La mise en page de votre site Web devrait aider les visiteurs à trouver l'information plutôt que les faire chercher dans la frustration. C' est pourquoi il est important de construire la conception qui permet à l'œil humain de naviguer facilement le contenu de haut en bas et de gauche à droite de plus important à moins important. Bientôt, vous en apprendrez plus sur la théorie des couleurs et comment l'utiliser dans la conception Web. Mais pour l'instant, rappelez-vous simplement que les couleurs que vous choisissez peuvent faire ou casser votre composition. Il est essentiel de créer des combinaisons de couleurs qui aideraient les utilisateurs à comprendre le message du site Web et à trouver les informations qu'ils recherchent tout en rendant le design esthétique. 6. 3.2Top 10 de bonnes principes de bonne conception de Web - continue: peuvent vous aider dans les nœuds, juste rendre le site plus agréable à regarder, mais aussi pour raconter une histoire. Ils peuvent engager les utilisateurs à un niveau plus profond s'ils sont choisis correctement et bien jumelés avec le couleurs Sites, ils vous aideront énormément à créer un design beau et utile. Récemment, il est de plus en plus courant d'utiliser la photographie de clients plutôt que de simples photos coincées au fromage téléchargées à partir du web. N' oubliez pas d'optimiser les images lors de la remise du design à un développeur, et d'optimiser les moyens de compresser les images afin qu'elles soient plus petites. La taille aide le site Web à se charger plus rapidement. La plupart des sites Web contemporains sont basés sur des grilles, et celui qui est le plus souvent utilisé est la grille de 12 colonnes. Considérez cela comme des lignes invisibles de Siri qui vous aident à structurer la conception de votre site Web et à le rendre symétrique et plus facile à coder. Ces lignes sont d'une grande aide lorsque vous placez les éléments sur le design. Ce n'est que les conteneurs principaux. Aleck off alignement est très perceptible et crée une impression bâclée. Vous en apprendrez plus sur les grains et comment créer les vôtres plus tard dans les partitions. Cela va sans dire que votre design doit bien paraître sur les appareils mobiles. En fait, vous pouvez même créer vos conceptions principalement pour les appareils mobiles, en particulier les smartphones, puis créer des conceptions de bureau en plus d'eux. Elle s'appelle la première approche mobile et est une conception en réponse au fait que les utilisateurs connectent beaucoup plus souvent à l'aide de leur smartphone, pas d'ordinateurs de bureau. Dans tous les cas, votre design doit être prêt à être affiché sur n'importe quel écran. n'y a rien de plus destructeur pour un design puis un cliquetis. Gardez votre mise en page simple afin qu'ils soient faciles à digérer. Cela signifie choisir la bonne quantité de couleurs, qui ne dépasse généralement pas cinq. Cela signifie être cohérent au sujet du choix trouvé. Mais cela signifie aussi rendre l'interaction entre les éléments des sites Web facile à comprendre le bon espace et est important pour une raison majeure. Il rend la consommation de contenu facile et agréable. Il existe différents types d'espace, et vous pouvez utiliser et devez être conscient dans votre conception. Espaces entre les lignes. Le texte hors texte ne doit pas être trop petit, sorte que les lignes de texte ne se chevauchent pas, mais pas trop grandes non plus. Donc l'œil humain ne se perd pas. Je peux aussi jouer avec des espaces entre les personnages. Mais je partirais pour les rubriques majeures si vous voulez aller pour plus d'une approche artistique dans le monde de la conception Web et du développement, il ya aussi des types spéciaux d'espaces appelés rembourrage et motif de marge est l'espace entre les morceaux de contenu à l'intérieur d'un conteneur, et les marges sont des espaces entre les conteneurs. La règle générale est celle-ci. morceaux de contenu ne devraient jamais se toucher, et vous devriez toujours avoir un peu d'espace entre eux. Un bon design Web moderne ne peut pas vivre sans une quantité décente d'espace blanc. L' espace blanc signifie espace vide entre les objets et est nécessaire pour un look propre et moderne. L' espace blanc peut diriger un design spécifique d'une certaine manière. Utilisez-le somptueusement si vous optez pour une sorte de look sophistiqué de votre design . Ce sont donc les 10 principes essentiels d'une bonne conception Web. Il y a, bien sûr, d'autres principes à considérer, tels que la navigation claire, en utilisant le rapport d'or ou le temps de charge. Mais l'idée générale est toujours la suivante. Vous devez concevoir pour l'utilisateur et, en ayant à l'esprit l'objectif de vos clients, utiliser ces principes comme lignes directrices pour créer des conceptions esthétiques et réussies 7. 4.1Le facteur le plus important à prendre en considération avant de choisir les couleurs: juste dans l'habillage de bonne couleur pour votre prochain site Web. Le design est avec la typographie. La plus grande importance de faire les couleurs que vous choisissez sera la première chose qui attirera l' attention du visiteur et, si elle est choisie correctement, ne fera pas mal aux yeux et les doigts cherchent rapidement le bouton de fermeture. La raison derrière votre choix de couleur peut être juste le fait que vous l'aimez. C' est une partie de toute la stratégie qui aide à envoyer le message que votre client veut envoyer. Cela peut sembler étrange, mais n'oubliez pas que vous n'êtes pas en train de concevoir le site pour vous-même. Tu ne le conçois même pas pour ton client. Vous le concevez pour vos clients. Et cela signifie que les voitures hors du site doivent aider les visiteurs à comprendre ce qu'est le site Web. Parcourez le site sans le sentiment de confusion et trouvez le contenu qu'ils recherchent . Alors, comment choisir réellement les meilleures couleurs pour un travail de conception Web spécifique ? Il y a très peu de choses que vous devez prendre en considération. Cela vous aidera à comprendre le message que le site Web est censé envoyer et comprendre ce que les visiteurs attendent de vivre. Tout d'abord, vous devez savoir, ce que fait votre client, Que ce soit une entreprise de grande rue, une maman et pop shop, une organisation caritative, vous devez comprendre cette entreprise. Vous n'opteriez pas pour le même schéma de couleurs pour une société financière que pour un magasin de jouets , n'est-ce pas ? Nous parlerons de psychologie des couleurs un peu plus tard pour l'instant. Il suffit de noter aussi que les couleurs véhiculent et allument les émotions, et il est extrêmement important d'allumer les bonnes. Parfois, des entreprises, d'une certaine manière, forcer l'utilisation de certaines couleurs. Par exemple, si vous créez un site Web pour un magasin de coin de nourriture biologique, très probablement vous iriez pour les tons de terre, et si vous deviez créer un site Web de jardin d'enfants, vous iriez pour un peu plus coloré et trouvé couleur palettes. Deuxièmement, si l'entreprise a déjà un logo ou est en train de le redessiner, vous devez prendre ses couleurs en considération. Cela ne signifie pas que toutes les couleurs du site doivent être exactement les mêmes que celles utilisées dans le logo, mais elles doivent absolument se compléter mutuellement. Troisièmement, écoutez votre client, mais ne succombez pas à de mauvaises idées. Je veux dire, il y a une raison pour laquelle le client vous a engagé au lieu de le faire eux-mêmes ou de demander à son neveu de concevoir son site web. Mais bien sûr, vous n'avez pas à être trop schématique si votre client veut se démarquer d'une manière ou d'une autre. Et si vous jetez un oeil à ses concurrents présence Web, vous pouvez expérimenter un peu avec des schémas de couleurs. Si, par exemple, vous concevez un site Web pour un environnement moderne une entreprise, vous n'avez pas à opter pour le bleu foncé et le gris, mais saupoudrez les choses avec le brun clair ou le vert. Regardez le site Web du client Earth Dot org. Cela peut ne pas être le meilleur design dans le monde, mais il montre clairement que le message et les émotions bras ou important que l'exactitude du collier lors de la décision sur un schéma de voiture que vous voulez utiliser dans la conception. Rappelez-vous du type d'entreprise que votre client est et des utilisateurs qu'il va visiter sur le site. Ensuite, nous allons parler de l'aspect plus pratique du choix des couleurs pour vos designs. Nous allons jeter un oeil à la préparation des couleurs pour la meilleure expérience utilisateur 8. 4.2Comment mélanger des couleurs pour la meilleure expérience utilisateur possible: Il y a beaucoup de concepteurs qui laissent leurs yeux juger d'une certaine palette de couleurs ou de couleurs sera bon pour un travail de conception Web spécifique. Mais le problème avec cette approche est le fait que tant de couleurs peuvent être belles. Et donc les palettes de couleurs maney peuvent sembler appropriées pour ce design spécifique. Alors, comment savoir si votre choix de collier est bon ? Y a-t-il un moyen de juger les combinaisons de couleurs que vous avez choisies ? Bien, probablement celui de Leary. Mais nous devons jeter un oeil à certains aspects hors de la théorie des couleurs, mais je promets que ce sera aussi pratique que possible. Fondamentalement, nous pouvons parler de quatre sortes hors couleurs, monochromatique, gratuit et les logos et d'essayer grenier. Parlons donc de ceux-ci pour un deuxième modèle. Le schéma de couleurs chromatiques utilise une couleur de base et diverses teintes et situations hors de lui. C' est le meilleur choix si vous avez besoin d'un design cohésif, mais vous pouvez tomber dans un piège en utilisant un schéma de couleurs ennuyeux. Ici, couleurs composées, parfois appelées split gratuit, sont basées sur deux couleurs de taille opposée hors de la roue de couleur. Lorsque vous voulez créer votre propre jeu de couleurs complémentaire, jetez un oeil à la roue de couleur et imaginez que vous dessinez un sablier dessus. Essentiellement, vous prenez deux couleurs des extrémités opposées du spectre des couleurs, ce qui donne à votre conception plus de liberté que les schémas chromatiques du moteur. Si c'est la cohérence que vous recherchez dans votre conception, optez pour et logos schéma de couleurs. Jetez un oeil à la roue de couleur à nouveau et choisissez trois couleurs voisines. Ces thèmes peuvent créer un champ unifié sans être né en tant que couleur monochromatique askew. Pour créer un schéma de couleurs grenier essayer, dessinez un triangle dont les côtés sont de la même longueur et choisissez les couleurs au niveau des triangles. Points de terminaison. Cela crée un schéma de couleurs varié mais équilibré avec des couleurs tout aussi vives. En dehors de ces principaux types de couleurs, il y a quelques autres facteurs que vous devez prendre en considération lors du choix des couleurs pour votre conception. Je parle de complémentation, contraste et de dynamisme. Les couleurs qui se complètent se trouvent sur les extrémités opposées du spectre de couleurs car elles sont visuellement significativement différentes. C' est plus facile pour l'œil humain de les distinguer. C' est pourquoi les gens ont tendance à aimer la pâte qui est facile à regarder, ce qui signifie qu'ils fournissent un certain équilibre et ne forcent pas l'œil à rechercher de légères différences entre les couleurs. Dans un schéma monochromatique, complémentation est utilisée dans les schémas de couleurs trias et composées. Une bonne expérience utilisateur ne peut pas vivre sans une utilisation appropriée du contraste. Le choix le plus important en matière de contraste est, bien sûr, le grand sol et la couleur du texte. Si vous n'êtes pas sûr des couleurs à utiliser, la meilleure pratique consiste généralement à choisir une couleur très claire pour l'arrière-plan et une couleur très sombre pour le texte lui-même, ou vice versa. vibrance est le côté émotionnel de la palette de couleurs. plus vives couleursplus viveset plus vivantes provoquent des sentiments énergiques, tandis que plus sombre, calme, toutes les couleurs détendu les visiteurs, ce qui les aide à se concentrer sur d'autres choses. Ce sont les principaux outils théoriques qui devraient vous aider à faire plus, bien quatrième choix pour vos jeux de couleurs. Bien sûr, il y a beaucoup plus d'outils et d'idées à utiliser et à choisir en termes de choix de couleurs . Mais si vous vous familiarisez avec ceux que nous avons couverts, vous serez sur la bonne voie vers une manipulation professionnelle des couleurs en design graphique. Puisque nous avons mentionné les émotions provoquées par les couleurs, je pense que c'est le bon moment pour parler de la psychologie des couleurs, ce qui est extrêmement important, pas seulement dans la conception Web, mais le design en général. 9. 4.3Comment choisir les couleurs « “psychologically »: les couleurs que vous choisissez pour votre conception, créer une ambiance spécifique. Vous devez comprendre la psychologie derrière des couleurs spécifiques. La psychologie des couleurs peut sembler trop scientifique, mais elle décrit simplement les sentiments et les significations que les gens associent souvent à des couleurs particulières . En les sélectionnant soigneusement, vous pouvez renforcer le message global d'un site. Jetons un coup d'oeil à certaines des couleurs de base que vous êtes le plus susceptible d'utiliser lors de la conception de vos sites Web. rouge est la couleur la plus vibrante et agressive. C' est le 1er 1 pour attirer les yeux des hommes, selon les couleurs qui le font avec peuvent transmettre le pouvoir et le courage, mais aussi l'amour et la passion. Comme il est utilisé dans de nombreux panneaux de signalisation routière, il est fréquemment utilisé sur les sites Web pour avertir l'utilisateur de tout danger. Par conséquent, c'est une erreur de l'utiliser pour votre appel à des actions. Un tel Spartiates ou des liens orange est l'une des couleurs les plus agréables à regarder. Difficile à manquer, et il peut évoquer une atmosphère amusante et énergique. jaune est la couleur off, la chaleur et l'heure d'été. C' est aussi la couleur la plus visible du spectre, alors ne l'utilisez pas trop. Beaucoup de gens trouveront trop de jaune irritant. Il est particulièrement accrocheur lorsqu'il est combiné avec le blanc ou le noir, car il s'agit d' équipements de sécurité , autobus scolaires et de taxis. Si vous demandez aux gens sur leur couleur préférée, ils sont plus susceptibles de dire bleu. Il est agréable de regarder son discret et vous fait sentir à l'aise. C' est peut-être parce que c'est la couleur du ciel. C' est aussi la couleur hors de l'eau, sorte que les gens se connectent bleu avec rafraîchissement et le bleu nettoyant, en particulier bleu foncé, est le plus professionnel. La couleur, après tout, est la couleur du costume présidentiel. Donc, utilisez cette couleur quand c'est le professionnalisme que vous voulez transmettre. Avec votre design, vert est la couleur de la nature. Si vos yeux font mal à regarder plus longtemps un écran d'ordinateur, regardez le vert. C' est un choix parfait et le plus évident pour les produits biologiques, respectueux de l'environnement et sains, même s'il s'agit d'une couleur du dollar américain. Si vous créez un site Web pour une société financière, n'allez pas trop loin avec green. Au lieu de cela, adressez-vous au bleu foncé, au gris foncé, blanc et au noir pour transmettre confiance et professionnalisme. Le violet est historiquement associé à la royauté, ce qui le rend parfait pour les marques de luxe. En outre, lorsqu'il est combiné avec d'autres couleurs, il perdra une partie de son héritage royal. Avec le rouge, il peut se sentir intime et romantique. Avec les blancs et les roses, il devient ludique et enfantin. Pourquoi cela signifie pureté et innocence. Mais il est également utilisé pour créer le minimalisme et la sophistication que vous êtes le plus susceptible de vous installer sur des sites. Concentrez-vous sur les mariages, les soins de santé et les enseignes, ainsi que sur le noir moderne et minimal du blog est sans aucun doute la couleur élégante ultime. Ça ne se démode jamais. Cela implique la force, le luxe, le mal, la mort et éviter. Rappelez-vous que vous pouvez décider quelles émotions les visiteurs ressentiront en regardant le site que vous avez conçu, sorte que vous avez un rôle important à jouer en tant que concepteur. En outre, les significations des couleurs peuvent varier considérablement selon les cultures et les régions, il est donc préférable de vérifier si la couleur de Joe est appropriée dans une culture donnée. Maintenant, vous savez un peu sur la théorie des couleurs, et j'admets que ça pourrait se sentir écrasant. Heureusement, il existe des outils qui peuvent grandement vous aider à choisir le bon schéma de couleurs. Donc, prochaine va jeter un oeil à sept outils faciles pour choisir des schémas de couleurs à l'épreuve des erreurs 10. 4.4-7 outils faciles pour choisir des schémas de couleurs conformes à l'erreur: choisir des couleurs pour votre prochain design peut être un processus long et même intimidant. Pour moi, il faut toujours beaucoup trop de temps pour trouver la bonne combinaison, mais probablement tout leur processus peut être accéléré avec certains générateurs de couleurs en ligne. Jetons un coup d'oeil à sept outils simples pour choisir nos combinaisons de couleurs d'épreuve. Commençons par Kohler hex a dot com. Ce signe est génial si vous êtes un fanatique de couleur. Tout ce que vous avez à faire ici est de taper n'importe quelle couleur, valeur ou nom de couleur pour obtenir une énorme quantité d'informations possédées cette couleur plus, bien sûr, différents schémas de couleurs. Vous obtiendrez également des exemples de différentes utilisations de cette couleur particulière, ainsi que des alternatives pour cela. Et si vous préférez les alternatives, vous pouvez simplement cliquer dessus pour voir toutes les informations nécessaires et les combinaisons de couleurs. Le deuxième outil, appelé point de couleur, est vraiment amusant et facile à utiliser. Cet outil vous permet de créer rapidement un jeu de couleurs en utilisant votre souris glisser vers la gauche et la droite pour changer la teinte, glisser vers le haut ou vers le bas pour changer la luminosité et faire défiler vers le haut ou vers le bas pour modifier leur saturation . Si vous êtes satisfait de la couleur, cliquez pour l'enregistrer et répétez le processus avec une autre couleur. L' outil vous montrera uniquement les couleurs qui fonctionnent bien avec celle que vous avez choisie avant de pouvoir répéter le processus autant de fois que vous le souhaitez. Les deux suivants, appelés Palatable, sont particulièrement amusants à utiliser. Vous pouvez choisir votre propre couleur ou cliquer sur le bouton d'aversion pour que le programme choisisse les couleurs pour vous. Si vous l'aimez, cliquez sur Like et Seve, la couleur suivante qui est censée correspondre à la précédente correspond à votre goût. Vous pouvez également supprimer une couleur particulière pour réduire toute la palette sur la couleur. esprit. Vous pouvez choisir vos propres nuances de couleur, et si vous les aimez, vous pouvez les regarder et frapper. Générez pour que le programme trouve, imaginez des couleurs à celles que vous avez choisies. Ce qui est spécial à propos de ce tabouret en termes de conception Web est que vous pouvez choisir l'option de couleurs du site Web et la palette d'eau appliquée à une page Web factice. La palette de matériaux a été créée principalement dans le but de fusionner les couleurs de conception de matériaux dans vos conceptions. Alors, c'est quoi la conception matérielle ? Eh bien, c'est le concept de Google qui est orienté vers l'expérience utilisateur. Il est spécialement conçu pour fonctionner le mieux sur les appareils mobiles et la palette de matériaux est là pour vous aider à choisir les couleurs. Si vous souhaitez concevoir en suivant les principes de conception des matériaux, tout ce que vous avez à faire ici est de choisir deux couleurs et de laisser le programme faire le levage lourd pour vous. Il ne sera pas seulement créer un jeu de couleurs pour vous, mais aussi plus grand. Un aperçu du schéma appliqué à une interface utilisateur mobile que vous avez probablement entendu parler de Can Va  ? Mais avez-vous entendu parler de sa palette de couleurs pour vous ? Peut l'utiliser pour créer des jeux de couleurs à partir des images importées. Dragon image sur l'interface et laisser le programme ramasser les couleurs de cette image. Et le dernier mais non le moindre, est mon générateur de couleurs préféré. C' est totalement différent dans la façon dont il pense à la création de palettes. Au lieu de taper les noms des couleurs, télécharger des images ou de faire glisser la souris pour créer des nuances de couleur, tapez l'événement de thème ou tout mot décrivant votre design. Après quelques secondes, vous obtiendrez des jeux de couleurs associés à ce mot-clé. Plutôt gentil, hein ? Tous ces outils de génération de couleurs sont une humble représentation d'une zone d'outils que vous pouvez trouver en ligne. La plupart d'entre eux fonctionneront à peu près de la même manière. Donc, si vous trouvez juste votre ou deux favoris, c'est vraiment tout ce dont vous aurez besoin. Ensuite, vous apprendrez les fondements de la topographie dans la conception Web, alors ne partez pas. 11. 5.1A histoire très courte de la typographie web: par rapport à l'existence d'Internet depuis plus de 25 ans. typographie vraie sur le Web ressemble à un jardin d'enfants. Il n'a que quelques années. Bien sûr, même les premiers sites Web contenaient du texte. En fait, le tout premier site Web n'était rien sur le texte, mais le choix du téléphone était limité, pour le moins dire. Avant la naissance. Les concepteurs de topographie du Web ont pu choisir parmi cinq polices différentes, mais seulement deux d'entre elles, verdana et Georgia, ont été créées spécifiquement pour une utilisation sur le Web. Les autres fonds, à savoir Aerial, Helvetica et Times New Roman, ont été prélevés sur le système d'exploitation de l'ordinateur et chargés sur un site Web. Bien sûr, cela ne signifie pas que les concepteurs et les développeurs ont poliment accepté ce concept trop limité d'avoir seulement cinq polices de caractères disponibles. L' alternative la plus simple était d'utiliser l'image que les désirs de texte pourraient utiliser les fonds installés sur leurs ordinateurs sans donner trop de préoccupation, licence trop formée dans. Mais il y avait deux inconvénients majeurs de cette méthode. Tout d'abord, pour transformer le plein de design d'images en un site Web, vous avez dû le découper en un nombre ridicule d'images dans un logiciel comme Photo Shop. N' oublie pas non plus que c'était le temps libre. Pas une connexion Internet si rapide. Donc, le temps qu'il a fallu pour charger un côté plein d'images était significativement plus long. Tout a changé dans le 2010 lorsque Google a créé sa propre bibliothèque sur les fonds Web. Ils sont gratuits, plupart du temps bien faits et certainement faciles à utiliser à la fois pour les concepteurs et les développeurs. Cela a changé le monde de la typographie Web. De nos jours, vous trouverez des fonds spécifiques au Web dans toutes les grandes fonderies de typographie, et il est difficile d'imaginer concevoir des sites Web. Sans eux. L' essor de la conception Web réactive a fait passer leur typographie par un nouveau type de transformation. Le fait que votre travail va être vu sur différents appareils rend impossible de prédire à quoi ressemblera un fonds spécifique sur un appareil spécifique. Cependant, il existe quelques règles de base pour choisir les bons fonds pour les bons types d'emplois, et nous en parlerons ensuite 12. 5.2Comment mélanger des couleurs pour la meilleure expérience utilisateur possible: correctement choisi. typographie pour le projet signifie qu'il aide à envoyer le message hors du site Web. Il est également important de se rappeler que les polices de caractères, tout comme les couleurs, peuvent provoquer certains types d'émotions. C' est pourquoi il est important de choisir vos amis avec soin et avec le lecteur à l'esprit. Les personnes qui consultent le site passeront la plupart de leur temps à lire le corps du texte. C' est pourquoi c'est une bonne idée de choisir d'abord le fonds pour le corps du texte. La police que vous choisissez doit être discret et lisible. Il y a quelques façons de choisir des fonds avec ces caractéristiques, mais j'ai promis de le garder aussi régulier designer convivial que possible. Je veux dire, tous les designers ne sont pas très satisfaits de la topographie. Alors, quelles sont les fonctionnalités de fonds discrets et lisibles pour vos conceptions de sites Web ? Un trouvé lisible a beaucoup de hauteur X, qui est la mesure verticale d'un X minuscule . Plus la hauteur X est courte, plus cette dernière apparaîtra, qui peut rendre le type illisible. D' autre part, trop de hauteur X peut rendre les lettres M et H difficiles à distinguer. Jetez un oeil au même mot écrit dans Lotto et des fils ouverts pour comparer leurs hauteurs ex. La deuxième chose à prendre une note, c'est à quel point les ouvertures sont ouvertes. Mais ce que nos ouvertures sont les lacunes dans les lettres comme un C ou s. Plus elles sont ouvertes, plus les lettres deviennent lisibles. Vous devez également faire attention aux centres A. expéditeurs et D des passagers de ce dernier sont les traits qui s'étendent au-dessus de la ligne moyenne et D centres sont les traits qui s'étendent au-dessous de la ligne de base. Plus ils sont distinguables, plus le texte devient lisible. La plupart des polices de caractères Saref sont souvent des choix idéaux pour lire des passages de texte plus longs. En raison des traits perceptibles dans leurs expéditeurs A et D. Votre choix de caractère fiscal doit contenir au moins quatre styles différents. italique régulière. italique gras et gras. Si la police ne contient pas de police italique, les navigateurs seront forcément inclinés. Et s'il ne contient pas de version en gras, les navigateurs doubleront la version normale de l'avant, rendant le texte dur sur les yeux. La dernière chose à prendre en compte lors du choix des polices de caractères pour son corps de texte est le contraste entre les lignes fines et les lignes épaisses dans les lettres. Lorsque vous jetez un oeil aux polices de caractères comme Play for display, vous remarquerez un contraste énorme entre les lignes épaisses et fines dans des plateaux séparés. caractères comme ça peuvent avoir fière allure dans les conceptions de titres pour les blogs de mode, mais ils ne fonctionneront pas bien comme corps taxé. Maintenant, vous savez ce que les cinq traits cruciaux hors polices qui fonctionneront bien comme corps de texte. Ces polices de caractères auront une hauteur X généreuse, des ouvertures ouvertes, des entrées de cul distinctives et des expéditeurs D, au moins quatre styles et poids et un faible contraste entre les lignes à l'intérieur des échelles. Non, tout est bon et bien sur la question principale reste toujours sans réponse. Et cette question est : Quelle est la taille du corps du texte ? Eh bien, la réponse courte est de 16 points. C' est la taille du texte que les navigateurs s'affichent par défaut. C' est les navigateurs de taille de texte étaient destinés à afficher. Généralement, cette taille fonctionne bien pour les ordinateurs portables, ordinateurs de bureau et les téléphones. Et qu'en est-il de la hauteur de la ligne, qui, bien sûr, signifie la distance verticale entre les lignes de texte. Une bonne règle de base est d'ajouter six points à la taille du corps du téléphone texte, donc si vous utilisez 16 importance que la taille du corps du texte du téléphone va avec 22 points comme hauteur de ligne . Bien sûr, vous pouvez expérimenter avec d'autres valeurs de hauteur de ligne. En fait, de nombreux modèles de sang modernes utilisent des hauteurs de ligne plus généreuses, donc nous avons eu le corps. caractères de texte est assez bien couverte. Si vous suivez toutes ces règles, vous ferez une énorme faveur aux utilisateurs en faisant de la lecture de votre site une expérience agréable. Vous économiserez toujours beaucoup de temps et éviterez les polices de caractères. Ils ne valent pas la peine de finir dans ton design. Ensuite, jetons un coup d'oeil à la création d'attrapeurs d'attention. On parlera de titres. 13. 5.3Comment choisir les polices pour les polices pour des titres: bonnes rubriques et les sous-titres sont les éléments d'un site Web de conception qui attirent les utilisateurs et encouragent la lecture plus poussée. C' est pourquoi il est essentiel d'apprendre à les créer correctement. Si vous n'êtes pas sûr de la police de caractères à utiliser en péril avec le fonds du corps, suffit d'opter pour la même famille de téléphone. Par exemple, si vous avez choisi les sables ouverts comme fonds pour le corps, optez pour une version audacieuse et agrandie ou même une version triplée de celui-ci pour vos titres. Cela rendra le design Luke harmonieux et réduira le temps nécessaire pour charger le site. C' est le moyen rapide et facile, mais il y a des chances que tôt ou tard votre concepteur prévaudra et vous incitera à mélanger différentes polices de caractères. Vous voudrez utiliser un fonds pour les tags body et quatre autres titres si vous voulez le meilleur des deux mondes. Je veux dire, si vous voulez rester sur le côté sûr et encore effacer la topographie de votre site web un peu plus haut, vous pouvez rester dans une super famille. Par exemple, vous pouvez choisir des fils droïdes pour les titres et le serif droïde. Pour le corps du texte. Vous trouverez quelques bonnes familles parmi les téléphones Google, par exemple, Roboto et Roboto Slab Merryweather et Merryweather Sands ou Noto Santas et Noto Saref. La prochaine grande question est, quelle est la taille des rubriques ? Tout d'abord, rappelez-vous que votre côté va utiliser un nombre maximum de six titres. Tous ne doivent pas nécessairement être inclus dans la conception. Je veux dire, conceptions typiques ne vont pas au-dessous de la rubrique pour, mais c'est une bonne pratique de développer un ensemble de tailles pour tous les titres pour les mettre. en-têtes simples sont des titres hors des composants de sites Web. L'en-tête un est généralement réservé à l'image de marque des sites, donc techniquement, il n'a pas besoin d'être du texte du tout. Il peut englober le logo de l'entreprise, les titres que la plupart de vos designs vont compter sur nos deux titres. Ces gars sont vos titres de bloc , titres de section principale etc. Je recommande de les faire au moins 32 points de taille, ce qui est le double de la taille d'un corps de texte typique. La ligne haute troll d'ajouter six points à la taille de la police s'applique également ici. Toutes les autres tailles de titre varient en fonction du travail qu'ils effectuent au sein de la conception. Par exemple, la rubrique 3 est habituellement utilisée comme titre de propriété des cyberéléments. Donc, sa taille doit bien fonctionner avec l'ensemble du concept de conception, plutôt que d'être juste un pourcentage ou une sorte de dérivé des autres rubriques. Cependant, si votre conception va descendre en profondeur comme tête dans six, je ne recommanderais pas de le rendre plus petit que la taille du corps du texte lui-même. Je veux dire, se dirigeant plus petit que le corps s'attaque lui-même. C' est juste hilarant, n'est-ce pas ? Maintenant, vous savez comment choisir des polices de caractères pour le corps et les en-têtes. Alors maintenant, il est temps de regarder les mélanger ensemble. Faisons ça ensuite. 14. 5.4Comment mélanger des polices pour le texte du corps: Heureusement pour nous. Il y a une tonne de ressources et sur les lentilles pour plus facile pour les parents. Jetons un coup d'oeil à certains d'entre eux maintenant. Le 1er 1 est un outil intégré directement dans les fonds Google lui-même. Lorsque vous choisissez une police de caractères, disons que vous ouvrez les sables et cliquez sur Voir spécimen. Vous verrez une panne à l'avant. Dans le coin inférieur gauche, vous remarquerez une liste des appariements avant populaires. Tout ce que vous devez faire est de choisir une paire avant. Et qu'est-ce qui devrait être appliqué au morceau de texte à droite ? Vous pouvez également vérifier avec l'avant va ressembler comme en-tête et comme corps de texte. Mais il y a un inconvénient majeur de cet outil. Vous obtenez seulement un aperçu modeste des fonds en action. Il est difficile d'imaginer simplement en regardant ces morceaux de texte à quoi ils vont ressembler dans différents scénarios. Par exemple, lors d'un appel aux cartes Sliders d'Action, etc., pour voir d'autres paires avant. Avec des exemples étendus, allez au téléphone démarrer grand point io simple. Ici vous trouverez quelques rares Google de Paris que vous pouvez considérer lors de la conception de votre prochain site Web un sur le plus grand et le plus visité parent de fonds, ALS, est avant paire dot co. Ici, vous trouverez une vaste bibliothèque hors paires frontales divisées en catégories spécifiques. Vous transmettre n'importe quelle combinaison de Saref, San Serif et des fonds cursifs, et si vous aimez l'une des paires avant, vous pouvez simplement le télécharger en un seul clic. Vous obtiendrez un fichier ZIP dont vous avez besoin pour décompresser et installer des téléphones cachés à l'intérieur. Mais bien sûr, le plus grand référentiel de paires Google Front est Google lui-même. Je veux dire, si vous venez Google paires téléphone Google, vous trouverez Tom et Thomas hors articles sur le prêt fait à partir de poires pour vous de choisir et d'utiliser. Donc, si vous êtes toujours débattu avec vous-même, quels fonds utiliser, c'est une bonne idée de regarder les suggestions d'autres designers qui ont passé avec succès ce processus minutieux. Un mot de mise en garde ici Si vous remarquez un affichage de mots dans un nom de polices, cela signifie qu'il est destiné aux en-têtes, pas au corps imposé. Donc, si une paire de fonds suggère une sorte de fonds d'affichage pour le corps du texte, c'est juste de mauvais conseils et de l'ignorance. Alors soyez prudent que ce sont les moyens les plus courants et les outils pour trouver de grandes paires de téléphones Google . Ils peuvent être un excellent moyen de concevoir un site web unique, juste très esprit que vous n'êtes pas seulement après l'effet artistique, mais aussi après la lisibilité. Ensuite, nous résumerons brièvement cette section et nous nous concentrerons sur les trois aspects les plus importants des fonds bien choisis pour la conception de votre site Web. 15. 5.5La police parfaite pour la conception d'interface utilisateur en conception d'interface utilisateur: Faites savoir que quelque chose est en cours et jetez un oeil à trois aspects majeurs de n'importe quel fonds qui vous sera reconnaissant vos conceptions Web. Je pense que maintenant vous comprenez assez bien que vos conceptions devraient servir votre public de clients . Si un utilisateur visite les sites que vous avez conçus et les quitte après quelques secondes parce qu'il ou elle ne peut rien lire, c'est un signe d'un mauvais design. Les meilleurs indicateurs de lisibilité sont des distinctions claires entre les lettres qui pourraient sembler similaires. Par exemple, typographie en majuscule I et en minuscules L bien choisie reste en dehors des utilisateurs. Attendez, pour ainsi dire. Je veux dire, ça rend le processus de lecture plus facile. Mais la lecture n'est pas seulement pour afficher les messages de bloc. C' est aussi pour lire les descriptions de produits, lire appelés Toe Actions sur les boutons sur moi sections de sites Web. Par conséquent, typographie est un moyen d'amener l'utilisateur du point A au point B aussi rapidement et aussi authentique que possible. Donc dépendant de l'objectif des sites Web, que ce soit la vente, abonnement ou l'information facile à absorber topographie peut grandement aider ou entraver la région de ces objectifs, et enfin, bon vous je police fonctionne bien sur différentes tailles d'écran, quel que soit l'appareil ou le site Web apparaît sur la masse de typographie restent lisibles. Certaines personnes affirment que les fonds de Sarah sont plus difficiles à lire sur les écrans de smartphones, puis les téléphones sans serif. Et en fait, les personnes ayant des troubles de la lecture ou une déficience visuelle pourraient trouver plus difficile à lire un impôt plus petit . Mais si une police web serif est bien composée, elle devrait être facile à lire, même sur des vis plus petites, même pour les personnes ayant des troubles de la lecture qui n'ont jamais trouvé de choix. Rappelez-vous que le but de tout texte sur votre site Web utilisé pour aider vos utilisateurs à atteindre leurs objectifs. Tenez compte de l'ensemble du contexte, plutôt que de simplement compter sur un ensemble de règles lorsque vous faites vos choix de conception. Jusqu' à présent, nous avons beaucoup appris sur les couleurs et la typographie dans le design Web. Maintenant, il est temps de jeter un oeil aux blocs de construction d'un site Web typique. 16. 6.1, rubrique de marquage, navigation et héros: Lors de la conception de sites Web, vous devez vous souvenir de certains blocs qui le construisent. Certains d'entre eux seront toujours présents dans la conception, mais certains d'entre eux sont facultatifs. Jetons un coup d'oeil à la façon dont un site Web typique est construit. Nous allons disséquer un site en commençant par le haut et en descendant. Le tout premier bloc de construction d'un site web serait mange Hatter. Il s'agit d'un conteneur qui contient généralement les informations Brandon comme le logo et le slogan, une sorte de système de navigation et parfois des coordonnées, y compris les médias sociaux. Beaucoup de conceptions de sites Web, y compris la boîte de recherche dans l'en-tête ainsi. Généralement, le Brandon se trouve à gauche et la navigation à droite. Le système optionnel d'informations de contact et de recherche peut également aller sur la droite, au-dessus ou au-dessous de la navigation. Mais ce n'est qu'une façon de présenter le Chapelier. Dans certains modèles, en particulier les modèles sanguins modernes, le contenu Heller est souvent centré, sorte que le logo est au centre et la navigation passe en dessous, et il est également centré. Je pense que cela rend le design encore mieux organisé et plus facile à comprendre. Ce qui passe sous la bruyère est facultatif. Je veux dire, vous pouvez inclure quelque chose qui s'appelle une section de héros. Alors qu'est-ce que c'est ? Fondamentalement, il s'agit d'un composant mettant en valeur le contenu clé de votre côté. Son but principal est d'attirer rapidement l'attention de l'utilisateur et d'expliquer ce qu'est le site Web . Vous pouvez souvent le voir sur les informations du marché où vous êtes invité à entrer votre adresse e-mail pour obtenir un livre électronique gratuit. Ooh, un rapport ou quelque chose comme ça. Généralement, la section Héros contient une image d'arrière-plan complète ou une vidéo avec un contenu superposé que topographie est grande et audacieuse, et le plus souvent vous trouverez une sorte d'appel à l'action ici aussi. Parfois, l'image de fond complète est partagée entre les sections d'en-tête et de héros en réponse aux versions de la conception, en particulier dans les téléphones mobiles, une section de héros peut se transformer en quelque chose de complètement différent. L' image d'arrière-plan peut être remplacée ou même complètement supprimée, ce qui rend le design plus léger. Une autre idée pour la section héros est d'utiliser le curseur, qui est une vitrine d'images ou une combinaison hors images et texte. Ces images sont interactives et changent automatiquement ou lors de l'interaction de l'utilisateur. Cependant, de nos jours, les curseurs commencent à devenir redondants. Tout d'abord, ils ne sont pas trop sympathiques. Deuxièmement, ils sont trop lourds et un peu inutiles sur les petits écrans de smartphones. Mais toute la section des héros est vraiment facultative. Dans certains cas, cela peut être en fait obstruction à l'ensemble du but du site, et je parle de conceptions de blocs. Une blonde concerne principalement les articles, donc l'utilisateur qui visite un site Web devrait être présenté avec ce qu'il ou elle s'attend à trouver ici, qui est exactement les articles. Bien sûr, les articles peuvent être présentés d'une manière plus intéressante que simplement claquer le texte, mais nous allons parler et sur d'autres sections qui vont sous le héros dans la prochaine vidéo . 17. 6.2Les sections de centre et bas de votre conception de site Web: Passons maintenant l'en-tête et les sections héros et arrêtons les articles et les barres latérales . Ces sections seront différentes non seulement en raison de votre choix de conception, mais principalement en raison de la nature du site. Ils auront l'air différent pour un blawg différent site corporatif ou personnel gratuit. Variations annuelles C au sein de ces concepts pour simplifier les choses. Si ce n'est pas un blawg, la section sous l'image du héros ressemblera à des boîtes horizontales, séparées par le contenu et les couleurs, elles peuvent contenir des mélanges d'icônes, images de texte et de liens. La raison principale derrière la création de ces sections d'une manière spécifique est de les rendre facilement lisibles sur les appareils mobiles. La clé ici est de créer la conception de bureau en plus de la conception mobile. Tout ce qui aura l'air bien sur un smartphone devrait également être bon sur un ordinateur de bureau en cas de conceptions de blocs. Ces sections englobent très probablement les articles, et elles peuvent être présentées de différentes manières. Mais un dénominateur commun est qu'ils auront toujours les titres d'articles qu'ils peuvent également présenter des images en vedette, bloquer des extraits de poste, des liens et d'autres informations. Parfois, s'il s'agit d'un site Web de commerce électronique, articles peuvent contenir des photos de produits, descriptions prix à un autre bloc de construction de site Web qui peut s'asseoir à côté des sections ou articles est une barre latérale. Une barre latérale typique contient des informations qui, d'une certaine manière, sont complémentaires au message principal du site Web. Il pourrait s'agir de l'information de l'auteur du blog. Les médias sociaux alimentent les derniers messages, tags appellent à des actions , les produits connexes etc. La chose intéressante à propos des barres latérales est qu'ils peuvent s'asseoir sur le côté droit de la page sur le côté gauche ou des deux côtés en même temps. dernier bloc central de construction d'un site Web est son pied de page ont vraiment grandi au fil des ans à partir de simples sections d'une ligne contenant principalement le droit d'auteur dans le folk. Ils ont évolué en boîtes sophistiquées avec beaucoup de données supplémentaires. pieds de page ainsi que les en-têtes sont les mêmes sur chaque site, et ils contiennent des informations qui ne changent pas. Quelle que soit la page que l'utilisateur consulte actuellement, il s'agit d'un guichet unique pour toutes les informations essentielles dont l'utilisateur pourrait avoir besoin. C' est pourquoi, dans les sections de pied de page, vous verrez des bios rapides ou à propos de moi des liens vers les pages les plus importantes ou vantails récents. Une récente ailes de médias sociaux Commons ou des sous-sections entières avec des flux de médias sociaux tels que des photos Instagram. Les pieds de page sont généralement facilement distinguables grâce à l'utilisation du contraste des couleurs par rapport à l'ensemble du site Web. Si elles sont faites correctement, elles rendent l'ensemble du site professionnel et soigneusement conçu. Pour résumer les choses, un site Web typique contiendra un en-tête. Une section de héros sections avec des articles, parfois des barres latérales et toujours pied de page f. Maintenant que vous savez comment structurer un site Web, il est temps de regarder les grilles. Ils peuvent sembler effrayant au début, mais ils aident à créer un site symétrique et plus facile à coder, alors jetons un coup d'oeil sur eux ensuite. 18. 6.3 : Quelles sont les grilles et comment les utiliser: Alors c'est quoi une grille ? Considérez cela comme des lignes invisibles sérieuses qui vous aident à structurer la conception de votre site Web et à le rendre symétrique et plus facile à coder. Ces lignes sont d'une grande aide lorsque vous placez les éléments de votre conception, pas seulement les conteneurs principaux. Un manque d'alignement est très perceptible et crée une impression effondrée. Une grille typique est constituée d'unités, gouttières et de colonnes. Jetons un coup d'oeil à ceux qui utilisent une grille de 12 colonnes à titre d'exemple. Les unités sont les éléments de base de chaque grille. Ils ressemblent à de longues colonnes un peu étroites avec un peu d'espace de chaque côté d'eux. Les gouttières sont des espaces assis, à gauche et à droite de chaque unité. Peu importe si c'est un centre pour l'unité droite ou extrême gauche. Il y a toujours la même quantité de Ghadir des deux côtés d'eux. Les colonnes ont le nom le plus confus de tous les blocs de construction de grains. Fondamentalement, ils sont des clusters de contenu similaire, répartis sur une quantité spécifique d'unités et obtenu le sien. grille la plus commune et la plus polyvalente est une grille de 12 colonnes. C' est un grand terrain d'entente. Pour les concepteurs et les développeurs, le plus grand avantage est qu'il peut être facilement divisé en différents groupes d' unités. Par exemple, vous pouvez créer quatre colonnes à partir de trois clusters d'unités, six colonnes créées à partir de deux blasters d'unités, etc. La beauté de ce système est que vous pouvez mélanger des colonnes ensemble. Par exemple, à gauche, vous pouvez avoir un plâtre de huit unités et à droite, un groupe de quatre unités et ainsi de suite. L' astuce ici est de diviser la grille en colonnes dont certaines seront toujours 12. Vous pouvez également faire des colonnes horizontalement, pour ainsi dire. Une section peut être divisée en deux colonnes, une autre en quatre, une autre en trois et ainsi de suite. Je conseille d'utiliser la grille tout le temps. Au début, il peut être un peu gênant, mais après un certain temps, vous aimez les grilles. Ils vous aideront énormément à créer des designs cohésifs et esthétiquement agréables. Si c'est plus facile pour vous, vous pouvez simplement télécharger une version PSD d'une grille de 12 colonnes et l'utiliser facilement à l'intérieur. Concepteur d'affinité. Vous pouvez juste google 12 colonne grain et vous trouverez beaucoup et beaucoup d'exemples, mais je pense que pour le bien de comprendre un peu mieux, ce qui serait concevoir notre propre nous allons le faire dans la prochaine vidéo. 19. 6.4Comment concevoir votre propre grille: Ouvrons le concepteur et créez un nouveau document qui va utiliser le profil Web pour le préréglage de page. Je vais aller avec Full HD et je vais vérifier l'option Creat art à bord. Je laisserai toutes les autres options intactes. Avant de commencer à créer quoi que ce soit, je m'assurerai que le préréglage de capture U I est activé. Cela m'aidera à créer une grande grille de faits pantoufles. Commençons par créer un angle craquelé de base qui va être de 1200 pixels de large. Ceci est important parce que nous allons créer des designs basés sur une grille de 1200 pixels avec et 1200 pixels est le plus typique avec des sites web contemporains. Assurez-vous que le rectangle est exactement au milieu de l'art à bord, et maintenant nous pouvons passer à sortir les premiers guides. Oppressé le contrôle, sont combinaison de touches sur mon clavier et faire ressortir deux guides qui s'enclencheront des deux côtés du rectangle. Notre grille va suivre les directives de bootstrap. Si vous ne savez pas ce qu'est bootstrap, laissez-moi vous dire rapidement que c'est un framework de développement Web qu'il est largement adapté dans le monde W W W. Il utilise un système de grille de 12 colonnes où toutes les colonnes ont 15 pixels sur les deux côtés . C' est pourquoi maintenant je vais divins le rectangle par 12 en utilisant ce panneau de transformation, et je vais m'assurer que le point de départ de la transformation est assis sur la gauche. Après cela, je vais soustraire 30 pixels du résultat dans le rectangle, car 15 pixels plus 15 gros glissements off tapotant de chaque côté équivaut à 30 pixels. La dernière chose à faire est de déplacer la colonne de 15 pixels vers la droite, et l'unité de base est prête. Maintenant, nous allons cloner sur la première colonne vers la droite en appuyant longuement sur la touche de contrôle jusqu'à ce que la colonne clonée s'enclenche avec l'original. Après ça, tout ce qu'on a à faire, c'est de déplacer ce type de 30 pixels vers la droite. Maintenant, si nous clonons simplement dans la deuxième colonne vers la droite, concepteur nous montrera la distance entre les colonnes et les accrochera en place lorsque les distances sont égales. Tout ce qu'il vous reste à faire, c'est d'appuyer sur Control plus J sur votre clavier. Pour dupliquer la dernière transformation, qui était le clonage et le déplacement. Nous devons le faire neuf fois de plus jusqu'à ce que nous ayons les 12 colonnes. Maintenant, vous avez votre propre grille de 12 colonnes sur mesure pour une conception de site Web. Si vous le souhaitez, vous pouvez changer la couleur des colonnes, changer leur transparence et, bien sûr, sa taille. Une fois la conception grandit en hauteur, lorsque nous passons à la partie de conception réelle du cours, vous verrez cette même grille en action. Mais avant de le faire, jetons un coup d'oeil à ce qui se passe en ce moment en termes de conception Web. Découvrez les dernières inspirations de design Web. 20. 7.1-7 tendances de conception Web qui régissent le monde de conception Web: Dans les prochaines vidéos, nous allons jeter un oeil sur les tendances modernes du design Web. Cela vous aidera à comprendre la conception des modèles que les concepteurs suivent ces jours-ci. Commençons par des menus qui sont cachés d'abord chez Glenn. Ils se cachent généralement derrière trois barres de chorizo NITEL appelées un manuel de hamburger. Il suffit de cliquer dessus pour voir un système de navigation complet. Si vous pensez que c'est une façon d'imiter les menus de l'application mobile, vous avez absolument raison. Puisque de plus en plus de gens naviguent sur le Web à l'aide de leurs smartphones, il fait du Père Noël de transférer une partie de cette expérience sur le site Web de bureau. Les conceptions, un des avantages de la navigation cachée, est qu'il crée plus d'espace sur la page principale. Il permet aux contenus principaux d'être mis en évidence. Un autre avantage du menu de son nom est le fait que vous pouvez le combiner avec un menu traditionnel si ce design en a besoin. Si vous avez beaucoup d'endroits où emmener l'utilisateur, vous pouvez masquer certains d'entre eux dans un menu et en afficher d'autres dans le menu visible. Concevoir des menus mobiles souvent utilisés couleurs de fond contrastent avec le schéma de couleurs global du site, ce qui le rend à se démarquer du reste. Les liens de texte contrastent avec l'arrière-plan pour faciliter la navigation. Il semble que les utilisateurs se sont habitués à voir les systèmes de navigation comme de simples trois lignes qui doivent être collectées pour voir ce qui se cache en dessous. C' est pourquoi vous pouvez expérimenter librement avec du hamburger. Manu est dans vos dessins. Expérience utilisateur contemporaine se déplace lentement de visuels deux mots. C' est pourquoi la typographie joue un rôle plus important que jamais. Mais que signifie la typographie grosse et audacieuse ? Eh bien, cela ne signifie certainement pas que vous devez absolument utiliser uniquement des versions en gras de la police et la définir à la taille la plus élevée possible. Cela signifie que beaucoup de conceptions ont une quantité décente d'espace pour un texte propre et concis juste au milieu d'une certaine section. L' exemple le plus évident de cela sont, bien sûr, les actions du héros. Avec une grande typographie sur des images de fond de voie, l'UX moderne se déplace vers des slogans qui sont propres à la taille et utiles, ce qui signifie qu'à l'avenir, typographie est un rôle dans le design sera plus grand que jamais auparavant. La révolution du smartphone a sans aucun doute changé. La façon dont les gens interagissent avec le monde Internet. Mais il y a un aspect de cette révolution qui est souvent omis, et qui est vraiment important pour les designers américains. Jusqu' à récemment, le système d'exploitation principal utilisé pour aller en ligne avec Microsoft Windows. Mais maintenant, il est Android de Google, et Google a mis au point leur système de conception, appelé la conception de matériaux et la lumière de conception de matériaux. C' est pourquoi les concepteurs qui veulent créer un que vous je l'expérience transparente pour la main des utilisateurs d' utiliser des visuels de conception de matériaux. Idées dans les conceptions Web. Le design matériel n'est pas loin dans un design plat Hanson. Il met également l'accent sur la simplicité mais ajoute une touche de trois dimensions. Si vous voulez l'utiliser dans vos designs, vous serez heureux d'apprendre qu'il est livré avec tout un spectre de vos outils, couleurs , topographie , interactions, etc. Vous pouvez les vérifier sur le matériel que je dois. Site web. Il est indéniable que la croissance et le développement les plus rapides sont dans le monde des appareils mobiles . Il a des répercussions importantes pour le Web conçu pour, avec l'accent sur la conception du mot. changement de communication visuelle commencé par la conception de l'application mobile fait son chemin vers la conception Web ainsi, et tout a commencé avec le changement de logo d'Instagram. Le design contemporain utilise souvent des couleurs plus vives. Ensemble, il a Grady INT sont de retour, mais ils sont des consignes et un peu subtiles. Ils sont souvent priés avec des icônes de design plat simples et une typographie bien en vue. Qu' est-ce qui est intéressant ? Radiance font son chemin icône d'orteil et design logo ainsi. Mais comme toujours, dans le cas de Grady INT, vous devez être vraiment prudent de ne pas aller par-dessus bord avec eux. Heureusement, il existe des outils en ligne qui peuvent vous aider à créer de beaux ingrédients pour vos conceptions Web . Le meilleur exemple est un outil appelé U I Grady ints dot com. Ici vous trouverez une fantastique collection de belles Grady INT, ainsi que les codes de couleur pour Easy Implementation, un des éléments les plus dynamiques dans la conception de sites Web. Est. L' utilisation hors vidéo à partir d'images mobiles plein écran souvent utilisées comme arrière-plans au lieu d' images à pop ups et de vidéos intégrées à partir de médias sociaux est un must have quand il s'agit de contenu. L' utilisation la plus répandue de la vidéo est qu'elle est affichée comme arrière-plan dans les sections héros des sites Web. La meilleure façon d'utiliser la vidéo dans ce format est de la rendre complémentaire au message et à un appel à l'action qui sont mis sur la vidéo. Mais parfois, en particulier sur les sites Web personnels, les vidéos ne sont pas obstruées par des visuels. Ils sont gentils présentation du propriétaire du site. Il y a aussi des vidéos qui imitent en quelque sorte des images fixes. Le déplacement du site est limité. Imaginez le vent soufflant dans les arbres, ce qui les rend parfaits comme une vidéo de fond, mais ajouté que quelque chose de spécial supplémentaire à la conception sans être distrayant. Internet dit que la vidéo est roi de nos jours. Il est tout à fait possible qu'à un moment donné de votre conception, carrière sera demandé de concevoir un site Web qui va utiliser la vidéo dans un certain format. C' est pourquoi c'est une bonne idée de regarder de plus près cette tendance. De plus en plus de designers acceptent le fait qu'ils ont vraiment besoin de penser à leurs designs comme étant plus souvent vus sur les écrans de smartphones plutôt que sur les ordinateurs portables. Cela implique un changement total dans le développement de leurs conceptions. La version de bureau du site devient Onley, un dérivé de son original mobile. Ce designer doit lui demander. Une question fondamentale sera-t-il bon que smartphone. Mais la question pourrait éventuellement changer à l'avenir avec le développement hors wearables. Peut-être qu'il est temps de commencer à nous demander, Est-ce que ça va bien paraître sur une montre intelligente ? Ce qui nous amène au dernier loyer de notre liste, ce qui est des cartes que je dessine. L' idée derrière les cartes est de farcir le contenu dans de petits conteneurs pour le faire croiser dispositif . Des montres intelligentes aux grands ordinateurs de bureau. Chaque conteneur est un ensemble d'informations sur une idée spécifique. L' interface est simplifiée et facilement compréhensible. Cette approche est également utilisée dans de nombreux blogs modernes, où un article sur la page de destination a son propre module. Ce sont les sept tendances les plus importantes de la conception Web aujourd'hui. C' est une bonne idée d'en être conscient car il ne s'agit pas seulement d'éléments visuels, mais plutôt de concepts entiers hors de la diffusion de contenu efficace pour les utilisateurs. Ensuite, vous allez jeter un oeil à quelques endroits autour du Web où vous pouvez trouver une grandeinspiration de conceptionWeb inspiration de conception 21. 7.2Où trouver la bonne inspiration pour votre prochain design: Dans cette vidéo, nous allons jeter un oeil à quelques endroits autour du Web où vous trouverez une grande inspiration votre prochain projet de design Web. Le premier site que je recommanderais est appelé un point com mots orthographié avec un triple double vous pour www. Ici, vous trouverez de nombreux exemples de design différents rassemblés dans des catégories telles que l'illustration, les blogs d' entreprise etc. Si vous aimez un design particulier, vous pouvez visiter le site Web source et jeter un oeil à la façon dont ils sont construits. Que, cas échéant, les tendances qui suivent et tout simplement apprendre du meilleur deuxième site Web que je recommanderais est un marché de thème WordPress appelé thème forêt dot net. Ici vous trouverez non seulement des thèmes WordPress, mais aussi des conceptions codées HTML. C' est un énorme dépôt de différents designs pour votre inspiration. Vous pouvez choisir parmi un grand nombre de catégories différentes, et vous pouvez également prévisualiser comment un certain design fonctionne dans le monde réel. Vous pouvez également visiter Web design inspiration dot com ici, même aussi seulement des tags spécifiques et des catégories que vous souhaitez trier leurs designs par. C' est une grande ressource à partir de différents modèles. Je pense que c'est la variété qui est l'aspect le plus important de ce référentiel de conception Web vicié beaucoup et beaucoup de dépôts d'inspiration de conception Web autour du Web. Si ces trois ne sont pas suffisants pour vous, bien que je pense que pour commencer, ils vont très bien, vous pouvez simplement Google Web design, inspiration et immense vous-même dans le monde de la conception Web. Je pense que maintenant vous n'avez pas assez de liste pour commencer à trouver vos propres designs. Vous connaissez les principes que vous connaissez, les tendances et où chercher l'inspiration. La prochaine partie est de commencer à utiliser le concepteur d'affinité pour donner vie à vos idées. 22. 8.1Chaque conception de site Web doit découper: d' un point de vue typique des concepteurs avides. Créer un cadre métallique pour la conception d'un site Web est aussi ennuyeux que redondant. Eh bien, ce n'est pas vrai. En fait, un cadre métallique peut vous aider à accélérer considérablement votre flux de travail, et cela peut vous faire gagner beaucoup de temps. Beaucoup d'idées qui semblent géniales dans votre tête lorsque vous les imaginez ont tendance à paraître mal lorsqu'elles sont mises sur un écran d'ordinateur. Et croyez-moi, je le sais par expérience, mais qu'est-ce qu'un cadre métallique, et pourquoi est-ce que je fais autant de choses à ce sujet ? Les cadres de fil sont des versions schématiques de sites Web qui vous aident à liser visuellement les blocs de construction de sites Web. Il y a une tonne off plug ins, outils et ressources en ligne est payé et gratuit que pour vous aider à créer des cadres de fil. Mais en une seconde, nous allons concevoir notre propre bibliothèque de cadres métalliques, ou du moins les éléments essentiels d'un cadre métallique, puis nous les importerons dans notre bibliothèque d'actifs. Mais d'abord, disséquons l'idée de cadrage métallique et son application pratique. Pour commencer, vous pouvez créer des cases simples qui correspondraient aux éléments des sites Web. C' est une bonne idée de le mettre contre un bien que vous êtes déjà familier avec cette étape préliminaire est le moyen le plus basique de sortir. Construire un échafaudage de site Web Pensez-y est un simple doodle qui est censé vous montrer si ce qui est dans votre tête va bien paraître sur papier ou écran. Les cases les plus typiques représenteraient une section de héros de navigation Brandon Element, image , bannières , pied etc. L' étape suivante serait de construire à la hiérarchie d'informations avec le type. À ce stade, votre choix de police n'est pas aussi important que l'utilisation de différentes tailles de fonds pour montrer les différences d'importance des éléments des sites Web. Généralement, les éléments les plus importants seront présentés pour être utilisés dans une taille de police plus grande, et les éléments les moins importants seront présentés en utilisant une taille de police plus petite. La prochaine étape en soulignant l'importance des éléments de sites Web est en utilisant différentes nuances de gris. La règle générale dit que les couleurs plus foncées signifient mawr. Les éléments importants et les couleurs plus claires signifient des éléments moins importants. C' est donc à quoi ressemble un cadre métallique typique. Je pense que c'est une bonne idée d'avoir votre propre bibliothèque de cadres métalliques afin que vous puissiez l'utiliser chaque fois que vous concevez un site Web. Le concepteur d'affinité vous permet de construire vos propres éléments de cadrage de fil et de les placer dans des groupes séparés des actifs. Jetons un coup d'oeil au processus de construction de ces éléments dans l'affinité. Designer. 23. 8.2Bâtisser votre propre cadre de wireframe dans Designer: lors de la construction de votre propre système de cadre métallique, je pense que vous devriez commencer par les éléments que vous êtes le plus susceptible d'utiliser dans un scénario de conception Web typique. Je veux dire, si vous voulez, vous pouvez un credo, tous les éléments que vous pouvez imaginer. Mais je pense que si vous créez d'abord les éléments essentiels, nous aurons une excellente base pour la construction et l'expansion des cadres métalliques. Mais quels sont ces éléments essentiels ? Je pense que nous allons commencer avec une marque en bloc une navigation, avec un menu hamburger, un bloc de section héros se vanter, un texte horizontal et un diviseur d'arrière-plan. Icahn Sidebar et un pied de page. De nos jours, il pourrait être une bonne idée de créer un fil vidéo à partir d'éléments pour des raisons que vous connaissez déjà . Alors construisons notre bibliothèque de cadres métalliques essentielle. Je veux que vous le considériez comme un point de départ pour construire votre propre bibliothèque. Je veux que tu apprennes le processus et la logique qui le sous-tend. Cela vous permettra de créer vos propres cadres de fil étendus. J' ai un simple document Full HD déjà créé, mais honnêtement, tous les documents, signes qui me permettraient de créer confortablement votre œuvre sera bien. Remarquez, cependant, que je n'ai pas décidé de créer un tableau d'art pour ce genre de travail d'esquisse. Je ne pense pas qu'un tableau d'art soit nécessaire. Je m'assurerai également que le U I Snap dans l'Est prédéfini est activé. Je vais commencer par créer un bloc d'image. Celui-ci sera utilisé dans beaucoup d'éléments, donc je pense qu'il est tout à fait logique de commencer avec. Je vais simplement saisir l'outil rectangle et créer un rectangle dans le panneau de transformation. Je vais entrer 16 pour avec et 94 hauteur, et je le fais parce que 16 par neuf ratio est le rapport d'aspect d'écran le plus typique. Et les images sur un site Web sont généralement affichées de cette façon, tout comme les vidéos. Bien sûr, il est beaucoup trop petit tube utilisable, donc je vais regarder leurs proportions dans le panneau de transformation et augmenter la taille du rectangle. Mais le fait que nous avons commencé avec le 16 par neuf pixels fera le nouveau rectangle ennemi que 16 par neuf rapport d'aspect. Je ne veux pas que nous ayons un coup, mais je veux avoir un gris assez foncé, Phil une fois qu'il sera créé, je vais dessiner deux lignes croisées qui indiqueront qu'à cela, est en fait un élément image. Donc, je vais saisir le tal de la plume et le mettre en mode dessin au trait. Je vais la joie, Ligne simple qui va avoir un trait blanc d'un point. Et pas Phil, bien sûr, je vais baisser l'opacité à environ 25 à 30%. Enfin, copions la ligne et la rebasons. Ensuite, retournons horizontalement, en utilisant le panneau contextuel. Tout ce qu'il reste à faire, c'est de l'apporter dans notre bibliothèque d'actifs. Et d'ailleurs, si vous n'avez pas la bibliothèque d'actifs, allez simplement dans la vue, puis studio et choisissez des ressources dans le panneau d'actifs. Je vais créer une nouvelle catégorie, que je vais renommer comme cadre métallique. Maintenant, je peux simplement sélectionner l'image et dans le menu du panneau choisir et de la sélection pour commencer à construire leur bibliothèque. Et comme ça, nous avons créé le premier élément, et nous avons déjà commencé à construire la bibliothèque. Continuons, cependant, dans la prochaine vidéo 24. 8.3Entraînons la construction de bibliothèque: Je vais commencer par créer un élément de bague de femme vidéo. Et pour cela, je vais cloner l'élément image et me débarrasser des lignes intérieures. Maintenant, nous allons créer un symbole de bouton de lecture pour cela. Prenons leur outil triangle et créé triangle que nous devrons faire pivoter et re taille un peu. Quand ça sera fait, ça lui donnera un Phil blanc. Déposez l'opacité à 25 % et alignez-la avec le rectangle. Regrouperons ces gars afin que nous puissions maintenant les ajouter à notre bibliothèque de cadres métalliques, tout comme nous avons ajouté à l'élément image. Maintenant, nous allons créer une image et un élément combiné de texte. Encore une fois, je réutiliserai l'image que j'ai déjà, mais j'ajouterai un titre et j'y excercercerai des éléments. Pour cela, je vais saisir l'outil de texte du cadre et dessiner une zone de texte qui sera comme un Zweig comme l'image. Je ne rectifierai aucun texte, mais j'utiliserai l'option d'insertion de texte de remplissage à la place. Bien sûr, c'est une bonne idée de faire en sorte que le titre ressemble à un vrai titre, donc je vais changer la police avec sa taille et son style. Je vais le cloner maintenant et changer la famille avant, style de Sonny et le leader aussi. Donc, avec cette partie peut ressembler plus à un extrait de post Blawg. L' avantage de créer cet élément de cette manière spécifique est qu'après l'avoir transformé en groupe, puis en un élément, puis le faire glisser sur la page, je ne peux pas le redimensionner et laisser le logiciel remplir les cadres de texte avec du texte. Et quand même, si je veux, je peux redimensionner les cadres de texte, réduire ou développer à la fois le titre et l'extrait de texte, et c'est assez pratique. L' élément suivant va créer est qu'ils vont logo à nouveau. Je vais utiliser l'élément image, mais cette fois je vais le transformer en un carré. J' ajouterai aussi un mot sur le côté droit. Maintenant, je vais regrouper ces gars et les transformer en un atout. Suivant va créer un système de navigation. Eh bien, c'est aussi facile dans un morceau de l'éditeur de texte, puis le dupliquer. Ils sont amusants à utiliser pour le Manual Inc ne devrait pas être trop grand ni audacieux. Nous allons également créer un menu de hamburger. Et c'est ces trois lignes horizontales qui couvrent l'homme principal. Tu te souviens ? Ok, super. Nous allons saisir le tal de la plume et puis assurez-vous qu'il est dans le mode ligne a créé une ligne simple qui va avoir un deux points quelqu'un à coup sombre et pas Phil. Quand cela sera fait, dupliquons la ligne deux fois et transformons notre manuel de hamburger en un atout. Notre prochaine activité consiste à créer une section héros, et cela nous donnera l'occasion de profiter d'une assez grande flexibilité quand il s'agit de créer des actifs au sein d'un designer. J' étais coincé avec emprunter l'actif d'image et en gros, et c'est un peu. Ensuite, nous allons créer un titre grand et gras écrit en contraste, en couleur claire, suivi d'un texte plus petit. Le dernier accent ici serait d'ajouter un appel à l'action. Donc, nous allons créer un bouton en utilisant l'outil rectangle et l'outil de type, bien sûr, qui va regrouper les éléments du bouton, puis regrouper les vieilles pièces sauf pour l'arrière-plan mais une ligne tout joliment au milieu de l'image d'arrière-plan. Si nous savons groupe tous ces éléments affaiblir, les transformer en un élément de cadre de fil de héros, mais si nous les gardons séparés, nous pouvons les entrer dans les actifs séparément, ce qui nous permet d'avoir un atout de héros et séparer éléments tels qu'une position inférieure toute pièce hors corps imposés. C' est très pratique,tu ne trouves pas ? C' est très pratique, Avec tous ces éléments, nous pouvons maintenant créer un élément de fonction. Vous pouvez faire glisser l'élément d'image sur le panneau de collage, puis le titre et leur corps sont taxés. Maintenant, il est juste une question de désactiver l'élément d'image en un carré et de changer à l'avant de la rubrique et le corps taxés pour faire cela alors que l'élément de cadre fonctionne. - Non , nous avons à peu près tous les éléments dont nous avons besoin pour mettre sur pied un cadre de fil de site web. Parfois, nous devrons utiliser l'outil rectangle pour créer un plan par concession, et si vous le souhaitez, vous pouvez créer des éléments de cadre de fil rectangulaire. Mais je vais m'en tenir aux blocs essentiels et créer des arrière-plans au fur et à mesure que je vais. Alors faisons ça en fait. Jetons un coup d'oeil à l'ajout de fil à partir d'éléments pour créer une vision schématique de notre site 25. 8.4Comment utiliser les ressources pour créer un wireframe: Une fois que tous vos actifs ont été créés, ils sont prêts et attendent que vous les utilisiez pour construire votre cadre métallique. Dans cette vidéo, nous allons jeter un oeil sur la façon d'utiliser pratiquement vos actifs pour créer un cadre métallique. Le processus est super facile et agréable. Je recommande d'utiliser une grille comme base pour votre cadre métallique. C' est une bonne idée de simuler un scénario de conception Web réel lors de la création d'un cadre métallique. Cependant, si c'est un cadre de fil très, très préliminaire, si vous voulez juste obtenir le sentiment hors du projet, vous n'avez pas absolument besoin d'utiliser la grille. Commençons par créer la section d'en-tête. Je vais apporter le Brandon et les blocs de navigation et les positionner correctement, laissant une quantité assez décente d'espace blanc sur le dessus et le bas. Non, il est rapidement créer un arrière-plan clair pour notre chapelier tout d'abord tous les éléments d'en-tête et initialisé l'insertion derrière l'option de sélection dans la barre d'outils. Maintenant, quand je commence à créer un angle érigé s'étirant sur toute la page, vous pouvez voir qu'il est inséré derrière les éléments plus lourds. La dernière chose à faire serait d'aligner tout bien sur le groupe central tous les éléments et de les renommer en tant qu'en-tête No. Entrons dans la section héros du site. Très probablement, cet atout aura besoin d'un réglage fin. Par exemple, vous voudrez peut-être développer ou souscrire un contrat. Vous voudrez peut-être changer la position des éléments et peut-être la taille du téléphone, aussi. La beauté de travailler avec des actifs en effin dans le concepteur est que vous pouvez facilement sélectionner éléments dans les groupes en double-cliquant sur eux et les changer comme vous changeriez des objets réguliers. Je vais commencer la section suivante en ajoutant un autre titre et un sous-titre. Ces gars pourraient aussi avoir besoin de tweeter, selon la façon dont vous les avez créés plus tôt. Ils pourraient avoir besoin de leur couleur de fonds pour être changé. Taille ajustée. Peut-être que nous allons vouloir changer l'alignement de gauche au centre là vraiment flexible et en effet. Si vous décidez que vous pourriez en avoir besoin dans votre bibliothèque d'actifs de cadre de femme, vous pouvez simplement les regrouper et les ajouter au panneau d'actifs. Oui, vous pouvez créer différentes ressources à partir des ressources déjà existantes. Personne ne jaillit certains objets en vedette. Je vais créer deux lignes avec quatre éléments dans chacun d'eux, j'apporterai l'un des éléments en vedette et le modifier jusqu'à ce qu'il ressemble exactement à ce que je voulais. Et puisque je veux en avoir quatre dans une rangée, un article ne peut pas dépasser trois colonnes de notre grand. Une fois qu'il est créé, je vais juste dupliquer il essaie vers la droite, puis tous une fois vers le bas. Enfin, je vais sélectionner toutes les pièces, les regrouper et dessiner un fond en dessous, en utilisant la même technique qu'avec l'arrière-plan de l'en-tête. Maintenant, je peux renommer cette section et l'appeler quelque chose comme présenté. Mais vous pouvez le nommer tout ce qui rendrait cette section facilement reconnaissable. La section suivante que nous pouvons créer pourrait être une de notre genre blawg de section. allons donc apporter le titre de section et ajusté de celui-ci pour les vantails de bloc, nous pouvons utiliser soit les éléments en vedette, éléments ou des articles blawg. Ce n'est qu'une autre preuve de la flexibilité de ce programme. Je veux dire, vous pouvez attraper l'élément en vedette, faire l'image aller à gauche et le texte à droite tout en conservant int comme un atout. Je veux juste avoir à bloquer les vantails dans chaque rangée, donc un post ne peut pas dépasser six colonnes. Je veux aussi me lever sur les vantails, pour qu'on puisse juste cloner le coin supérieur. - sûr Bien sûr, comme avant, nous pouvons savoir grouper toutes ces pièces et créer un fond légèrement plus sombre pour l' action des blocs . Vous pourriez même expérimenter avec mettre des éléments légers sur un fond sombre, mais pour l'instant, je vais garder cela simple. - La dernière partie va créer est la section pied de page. pieds de page ont généralement un arrière-plan distinct et sont assez grandes vacances. Ils peuvent contenir le logo et le slogan de l'entreprise. Quelques liens, y compris les réseaux sociaux , Instagram de Ling , flux , extraits, etc. Cette fois, je vais commencer par créer un arrière-plan plus sombre sur lequel je vais placer les éléments de pied de page sur le côté gauche. J' ajouterai le bloc d'image qui représenterait le logo. Il peut nécessiter quelques ajustements de couleur, sorte qu'il est facilement visible sur le fond plus sombre sous celui-ci. Je vais ajouter certains taxés qui pourraient être l'extrait américain environ pour quelques informations supplémentaires. Je veux dire, c'est juste un cadre métallique, donc on teste juste le placement de certains éléments, pas essayer de créer le design final. Je vais créer une variation de sur l'extrait de flux instagram sur le trajet, et je vais le construire, en utilisant l'élément d'image que je peux redimensionner légèrement si j'en ai besoin, et je vais créer deux rangées d'images ici en dessous, je ajoutera un autre morceau de texte et quelques petits éléments d'image représentant les médias sociaux. Chez Aiken. - La dernière étape serait de regrouper tous les éléments de pied de page et de nommer correctement le groupe nouvellement créé . Et on y va. Nous avons créé notre propre cadre métallique. Je voulais vous montrer le processus de construction d'un cadre métallique à partir d'actifs que vous pouvez créer vous-même. Imaginez à quel point vos cadres de femme peuvent être complexes si vous venez de passer un certain temps sur la conception actifs joliment à la recherche. Comme vous obtenez bon à créer un cadre métallique, vous ajouterez de plus en plus d'éléments à votre bibliothèque. Et bientôt, vous aurez tous les éléments nécessaires pour créer des images y, avec zéro ou peu d'ajustements nécessaires. Mais si vous n'avez pas envie de créer vos propres bibliothèques de cadre métallique, vous pouvez toujours rechercher certains outils et les ressources sont en ligne. Ils ont leurs limites, mais c'est une bonne idée de savoir comment ils fonctionnent et vérifient. Si vous souhaitez les utiliser dans votre propre workflow de conception Web, et nous les explorerons ensuite 26. 8.5Wireframing en ligne: Il y a beaucoup d'outils, et la ressource est en ligne que vous pouvez utiliser pour construire vos propres cadres et prototypes de femme. Le problème avec eux est que la majorité de ceux que vous êtes le plus susceptible de trouver sont payés . Ils ont des capacités libres limitées. Mais pour découvrir leur vrai potentiel, vous devez payer dans la plupart des cas, frais récurrents. Il y en a un. Jusqu' à ce que vous voudrez peut-être jeter un oeil à ce qu'il est appelé fil frame dot cc, et il vous permet de construire rapidement des prototypes sur des sites Web. Si vous voulez l'utiliser, je vous recommande de commencer par modifier certains paramètres. Tout d'abord, vous pouvez choisir d'afficher un grain 12 Colin, ce qui est toujours une bonne idée, et d'autre part, je recommande de changer la largeur et la hauteur du cadre métallique dans la partie inférieure de l' onglet des paramètres. La seule chose que vous avez à faire pour commencer à construire une femme à partir d'ici est de commencer à dessiner. L' outil vous montrera une boîte d'options à choisir. Vous pouvez transformer votre dessiné en une boîte dext image liste paragraphe, etc. Vous pouvez regrouper les éléments que vous avez créés et même les organiser correctement si nécessaire. Un inconvénient majeur du tabouret qui semble seulement être complètement gratuit est que pour partager ou vers le bas avec votre cadre de femme, vous devriez vous inscrire à leur service. Et si vous voulez le faire, ce seront mes invités. Mais il y a d'autres moyens d'accélérer le cadre de fil dans le processus. Si vous google modèles de cadre de fil gratuit, vous trouverez beaucoup hors cadre de fil libre. La ressource est de télécharger et d'utiliser dans vos propres bibliothèques de cadres de fil. Je veux dire, si vous n'avez pas envie de construire la vôtre, jetons un coup d'oeil à la création d'une bibliothèque de cadres métalliques à partir de ces éléments prêts à l'emploi avant de commencer. Je pense que cela vaut la peine de gérer en ce que si le fichier que vous avez téléchargé est un fichier PSD, vous serez heureux de découvrir que l'ouvrir est un morceau de gâteau pour le concepteur. Même s'il s'agit d'un fichier illustratif. Offensé, le concepteur l'ouvrira sans une seconde d'hésitation. La plupart de ces dépôts prêts à faire un cadre métallique contiendront des éléments que vous pouvez utiliser pour construire vos propres bibliothèques. Vous pouvez grossir ceux que vous aimez et les rend ensemble pour les étonnants. a saisi le panneau des ressources et créé une nouvelle catégorie. Renommez-le à votre goût. Mais grâce nom quelque peu descriptif. Non. Vous pouvez simplement un glisser-déposer les éléments dont vous avez besoin et aimez la bibliothèque afin que vous puissiez les utiliser plus tard. Bien sûr, tout ce processus est facultatif. Je veux dire, si vous voulez, vous pouvez juste laisser le fichier tel quel et copier et coller les éléments dont vous avez besoin sur votre fichier de cadre métallique. Fonctionne eatherly, et il sera de votre tâche de décider lequel convient à votre pâte de flux de travail spécifique. je Cependant, recommande d'utiliser le panneau d'actifs car vous pouvez toujours les garder à portée de main dans votre espace de travail, et vous n'avez pas à rechercher ces fichiers spécifiques à des cadres de fil. Donc je pense que nous avons le cadre métallique et la matière assez bien couvert. Nous pouvons passer à un autre aspect important de nous préparer à commencer la conception, à savoir le choix et l'optimisation des images, et je viens 27. 8.6, Commandez des images et des icônes: il est difficile d'imaginer un site Web sans images et autres éléments graphiques. Certes, il existe certains modèles qui utilisent la typographie Onley, mais ce sont des projets très, très soignés. Il est probable que dans votre carrière de concepteur Web, vous utiliserez des images dans vos projets et que vous les utiliserez beaucoup. Il est essentiel de savoir comment les manipuler dans vos designs. Alors explorons le sujet maintenant. La façon la plus simple d'ajouter une image en affinité. Designer est dit d'utiliser l'endroit. Outil Image. Une fois que vous appuyez dessus, il vous sera demandé de sélectionner une image que vous souhaitez placer. C' est, en passant, la même chose que de choisir la commande place dans le menu fichier. Si vous utilisiez une version plus ancienne de l'illustrateur avant que les concepteurs ne tournent, vous avez probablement été frustré calme beaucoup quand vous voulez qu'il recadre une image parce que , eh bien, eh bien, il n'y avait pas où vous pouviez le faire sans utiliser de masque d'écrêtage. Un designer de meubles est livré avec une culture factorielle. Il va qui peut recadrer des images facilement et rapidement. Tout ce que vous avez à faire est de saisir le cadre de sélection par l'un de ses bords et simplement faire glisser. Mais ce n'est pas tout ce que vous pouvez librement repositionner l'image à l'intérieur du nouveau cadre de sélection, et une fois que vous êtes satisfait de l'opération, vous pouvez simplement sécuriser rapidement cette image en utilisant la fonction d'exportation dans Ici. Vous pouvez choisir les formats de fichiers que vous voulez utiliser, mais je recommande de s'en tenir aux fichiers. Ancien natif. Je veux dire, si c'est un choix J, suffit de choisir J. Pick et de réduire la qualité à environ 75%. Ce sera une bonne limite entre une taille de fichier raisonnable et une bonne qualité d'image. N' oubliez pas de choisir la sélection sans arrière-plan comme zone que vous souhaitez exporter lorsque des images plus anciennes sont prêtes, vous conseillez de les compresser davantage. Il est extrêmement important pour la vitesse globale de la page, ce qui affecte la recherche et l'optimisation en mots simples Google aime. Lorsque les images sur la page sont bien optimisées, il y a beaucoup d'outils en ligne qui peuvent vous aider à optimiser vos images. A propos de celui que j'ai tendance à utiliser le plus est appelé minuscule J p g dot com pour profiter de ses capacités de compression. Il suffit de dragon image sur la fenêtre et la lettre que l'outil faire sa magie. Parlons maintenant brièvement des endroits sur le Web où vous pouvez trouver des images de bonne qualité gratuitement . J' ai été C'est une situation parfaite quand votre client veut payer pour des images d'actions. Mais heureusement, il y a des dépôts en ligne avec de bonnes images gratuites que vous pouvez suggérer comme alternative . Mon endroit préféré pour les photos de stock gratuit est le signe appelé pixels dot com. C' est une grande source de photos extraites d'autres dépôts de photos stock, donc vous n'avez pas besoin de parcourir chaque service photo STOCK pour trouver les images que vous recherchez. suffit d'entrer le mot-clé dont vous avez besoin et de choisir parmi des dizaines d'images de haute qualité. Quant à Aikens, Onley ont tendance à utiliser l'icône plate dot com le plus. C' est un excellent site Web pour utiliser gratuitement des icônes de haute qualité pour votre projet de conception Web. Quand tu as trouvé un Nikon, tu aimes. Vous pouvez le mettre dans une collection ou en prévisualiser, et si vous le souhaitez, vous pouvez le télécharger à cet endroit sur des conseils. Choisir s v. G.En G. ce qui concerne le type de fichier. C' est un type de fichier de facteur standard qui fonctionnera très bien dans n'importe quel type d'application de conception. Je visite également libre pick dot com, qui est un énorme dépôt de toutes sortes hors ressource de conception est des images, des icônes. Pia est ces vecteurs, etc. Non, cependant, que certains d'entre eux sont payés. C' est ainsi que vous pouvez travailler avec les images à l'intérieur de Fit in designer. Bien sûr, fur et à mesure que nous passons à la partie design du cours, vous verrez quelques exemples réels de manipulation d'images dans un scénario de conception Web. Pour l'instant, je veux juste que vous vous souveniez que vous pouvez les importer avec l'outil d'image de lieu. Vous allez les recadrer avec l'outil de recadrage factoriel, et vous pouvez les exporter à l'aide de la commande export. Passons maintenant à la dernière partie de l'étape de préparation, qui crée des styles de texte. 28. 8.7 : comment créer des styles de polices dans Affinity Designer: styles de texte dans le concepteur offensé sont un excellent moyen d'accélérer un processus de conception Web. Si vous êtes un fan désactivé, modifiez trop rapidement les jeux de polices. Prévisualisez les différentes variations de votre design. Vous allez adorer les styles de texte. Comment créer un style de texte basé sur les caractéristiques d'un morceau de texte que vous avez déjà saisi. Sélectionnez simplement ce texte, puis dirigez-vous vers le panneau Styles de texte et choisissez le style que vous souhaitez créer. Avoir une boîte de dialogue qui apparaît immédiatement vous permet d'ajuster toutes les options de caractère et de paragraphe auxquelles vous pouvez accéder depuis les panneaux de caractère et de paragraphe. Il est préférable de commencer par entrer le nom des styles, et je suggère de le rendre quelque peu descriptif. Votre style de texte sera affiché dans le panneau Styles de texte. Par conséquent, un nom facile à distinguer rendra le processus de conception plus rapide. Une bonne technique de production est de nommer votre style en fonction de ses caractéristiques les plus importantes. Si, par exemple, vous voulez que le style de texte utilise le fonds Roboto Condensed, avoir ah, seuls les caractères verts de 32 points placeront cette information comme nom de style de texte . Quand vous aurez terminé votre texte, je serai prêt et j'attendrai que vous l'appliquiez à n'importe quel morceau de texte que vous souhaitez. Le processus de création de styles de texte dans Afinitor designer est vraiment flexible. Vous n'avez pas absolument besoin d'avoir certains précédemment créés taxés pour créer un style de texte à partir de celui-ci. Vous pouvez simplement appuyer sur n'importe quel bouton du nouveau style de texte d'accueil dans le panneau Styles de texte et choisir leur type de désir dans la liste. Et si vous avez besoin de changer certaines choses sur votre style de texte, mais que vous deviez conserver l'original, il est préférable de simplement dupliquer et de style de texte dupliqué, clic droit dessus et choisissez dupliquer. La même boîte de dialogue s'affiche où vous pouvez entrer les réglages que vous utilisez sans aucun fait dans le style de texte original. Par défaut, le style de texte dupliqué obtiendra un suffolk numérique. Donc encore une fois, c'est une bonne idée de commencer par changer son nom pour supprimer un style de texte clic droit dessus et choisir, supprimer ou appuyer sur la corbeille que j'ai considérée dans le coin inférieur droit du panneau. Créer et gérer des styles de texte dans Afinitor designer est un processus simple, et il est donc ensoleillé dans les styles de texte à votre texte. Je suis sûr qu'une fois que vous commencez à créer beaucoup de conceptions de sites Web, vous les trouverez essentiels dans votre quotidien. styles de texte courants ont conclu à cette étape de préparation du processus de conception Web. Vous avez maintenant la connaissance de tous les outils et techniques qui sont essentiels pour concevoir un site web dans Affinity Designer. Alors commençons la partie design. 29. 9.1The Partie de conception de partie de conception: bienvenue à la conception d'une partie du cours. Dans les prochaines vidéos, vous apprendrez comment concevoir cette page de destination en utilisant des affinités, des concepteurs, concepteurs, outils, des techniques et quelques astuces. Mais avant de nous lancer dans le design et le processus de conception, permettez-moi de briser rapidement ce projet pour vous. Donc ici en haut, vous pouvez voir l'en-tête, et nous sommes arrivés au logo sur la gauche que c'est fondamentalement juste quelques lettres, un morceau de texte avec les INT Grady ajoutés à lui. Et quand nous créerons ce solo, vous apprendrez à ajouter des ingrédients au Fonds vie à la vie. Texte dans affinité Designer sur la droite. Nous avons eu la navigation avec em batté un icônes de médias sociaux. Ces gars ici sont tous comme des fichiers V g, et bientôt vous apprendrez comment dans le mauvais comme V g rapide, comme ces icônes sociales et comment travailler avec eux à l'intérieur d'un sentiment de designer sous l'en-tête que nous avons obtenu à cette section de héros ici, cette grande image en arrière-plan, avec un petit rectangle étant mis sur son pour rendre cette image un peu plus sombre. Nous avons, bien sûr, ce gros morceau de typographie juste ici. Et on a obtenu ce petit morceau sur un curseur. Navigation. Je veux dire, Je pensais que si jamais vous voulez créer un curseur pour votre pour vos conceptions est une bonne idée d'alerter comment créer une petite navigation pour une section de curseur. Ensuite, nous avons une autre section avec ces éléments en vedette ici. Bien sûr, avant cela, nous avons eu ce grand diviseur avec un titre de section et un texte de sous-titre et nous sommes arrivés à ces icônes d'aide juste ici, divisés en deux rangées. Et pour les colonnes ici, j'ai laissé le texte à la même chose pour chacun de ces morceaux. Les morceaux hors des éléments en vedette parce que je pensais que, euh, vous savez, taper tout dans ah type dans de nouveaux mots de nouvelles phrases serait juste redondant. Eso j'ai juste copié le texte et puis juste les remplacer les icônes et ces deux comme juste comme les icônes ici dans l'en-tête. Ils sont deux. Ils sont comme des éléments v g incorporés dans ce document. Donc encore une fois, vous apprendrez à intégrer comme des icônes V g m comme celles-ci dans un document de concepteur infini . Ensuite, nous avons une autre section qui serait un peu comme un diviseur entre les éléments en vedette et bien, la section suivante qui vient juste ici. Comme vous pouvez le voir qu'une grande image sur la gauche et nous avons obtenu quelques simples taxés sur la droite avec un fond sombre. C' est ce qui est une autre peut-être pas une tendance entière, mais un morceau hors tendance et qui est qui est en train d'utiliser le design Web en ce moment. Je veux dire, diviser la page entière en deux sections et mettre une diviser la page entière en deux sections et mettre uneimage d'un côté et une autre pièce. Eh bien, morceau de texte de l'autre côté. Eh bien, c'est juste une des tendances du designer en ce moment. Ensuite, nous avons quelque chose comme un de nos blocs action. J' ai donc créé une section plus légère ici avec un fond plus léger. J' ai ajouté quelques images à gauche et ces gars, comme vous pouvez voir nos carrés et ajouter ces images nous permettra d'apprendre une autre technique pour travailler avec des images à l'intérieur. Si dans le designer avec ces gars, cette image juste ici, cette grande image dans la section héros. Eh bien, ces gars allaient utiliser l'outil de culture factorielle. Mais avec ces gars, eh bien, nous allons utiliser Eh bien, c'est une technique légèrement différente sur la création d'images parfaites pour votre image bien en vedette sur le bloc post pour vos extraits de bloc Post comme ces gars ici. Ensuite, on a eu une sorte de flux Instagram que je voulais. Je voulais le faire ressembler à un flux Instagram. Et en fait ici, nous allons apprendre comment ajouter des images et comment utiliser le masque de coupe à l'intérieur, offensant au concepteur. Et ce sera encore une autre, je pense, je pense, troisième technique moyen d'utiliser des images à l'intérieur d'un designer de meubles. Je veux dire, je vous ai promis qu'une fois que nous arriverons à la partie design du cours, vous apprendrez à utiliser pratiquement des images à l'intérieur du concepteur d'affinité lors de la conception sites Web. Et ces trois techniques, je pense que sera une pensée va satisfaire votre faim pour les techniques de manipulation d'image . Ensuite, nous avons un pied de page ici qui, comme vous pouvez le voir, a une couleur de fond complètement différente, complètement différente. Je voulais le faire vraiment contraste. Je voulais le faire ressortir dans ce design et nous avons eu les trois sections avec certaines avec quelques liens et quelques textes juste ici. Et bien sûr, ces lignes de division, lignes horizontales et l'ensemble de la conception est fini lui avec le puits, une répétition de notre de notre en-tête, mais il est beaucoup plus petit. Le logo est plus petit, la navigation est plus petite et l'arrière-plan Hatter entier est plus petit. Donc je suppose qu'on pourrait commencer à concevoir. Mais avant de commencer à concevoir, nous devrons examiner les actifs dont nous disposons. Nous devrons créer des styles de texte pour faciliter notre travail. Nous devrons aussi créer des nuances de couleur, et nous devrons jeter un oeil à nos images et je viens pour que nous sachions ce que nous avons à notre disposition et ce que nous allons utiliser dans ce design. Jetons donc un coup d'oeil à la façon dont orteil vous préparez-vous à concevoir un site Web comme celui-ci 30. 9.2, Allons créer les échantillons de couleurs: Le document que nous allons utiliser pour notre conception est exactement le même document que nous avons créé lorsque nous apprenions à propos du grain de 12 colonnes. Mais ce n'est pas seulement le grain que nous allons utiliser pour réaliser ce design. Il y a aussi des couleurs, topographie, icônes, des images, toutes les bonnes choses dont nous avons besoin pour faire d'elle le site du design se produire. Laisse-moi cacher la grille une seconde et laisse-moi venir ces gars. Comme vous pouvez le voir, j'ai des carrés de couleur de chanson juste ici, et j'ai un fond sombre ici. Les carrés vont donc servir de base à nos nuanciers de couleur. Et ici, j'ai un fond sombre qui, dans une seconde, va être bien peuplé avec une typographie. Et j'ai rendu cet arrière-plan sombre parce que, comme vous pouvez le voir dans le design original, la plupart de notre typographie ici est un rempli d'une couleur large. Donc je pense que ce serait juste plus facile pour vous de voir cette couleur blanc cassé sur un fond plus sombre, nous avons aussi des morceaux de texte plus sombres et plus sombres, mais nous prendrons soin de ces gars plus tard, donc je suis pour commencer par créer une nouvelle palette Swatch. Ainsi, comme vous pouvez le voir ici dans le panneau des nuanciers, nous pouvons choisir l'annonce sera soit l'application ou une palette de documents. La différence entre ces deux gars est que si nous ajoutons une application de palais, les nuances de couleur seront disponibles. Et chaque fois que vous créez dans votre document, et si vous ajoutez simplement une palette de documents, ce groupe de nuances de couleurs sera disponible sur Lee avec ce document spécifique. Donc, en fait, je vais créer juste une palette de documents comme ça. Et comme vous pouvez le voir par défaut est, il fait froid. Eh bien, en fait, il est appelé sur le nom, donc c'est pour qu'il ne fasse pas vraiment froid. Donc je vais renommer cette palette, et je vais la nommer quelque chose comme, Peut-être nous a créés. C' est le nom du site. Mettons-le comme ça maintenant. La partie de l'ensemble sur la création des couleurs à l'intérieur, si dans le concepteur de carré existant pour que vous puissiez avoir, est que vous devez le faire un par un, donc je ne peux pas juste attraper tous ces gars et juste peut-être, genre, les mettre ici ou en choisir un, choisissez une option dans le menu pour ajouter tous ces gars un échantillon séparé. Malheureusement, il existe des moyens de créer des appels à partir de l'ensemble du document. Mais puisque nous avons un Grady int tri vous ici, eh bien, grand remplissage, si dans le monde du designer ajouterait beaucoup de différentes couleurs qui sont entre la gauche , partie de la grande tante et le partie droite de la grande, et nous, je ne veux vraiment pas que nous voulons juste des couleurs de swat simples. Donc je vais prendre ce premier remplissage radieux juste ici. Et je vais simplement cliquer sur cette icône de palette qui dit à Phil pour palais, juste comme si je vais être je vais être je vais ajouter toutes ces couleurs restantes à ma palette de nuances , comme ça. Et une fois que j'ai terminé, j'ai mes nuances de couleur qui s'appellent Created, et je peux les utiliser dans ce document. Non, bien sûr que je n'aurai plus besoin de ces rectangles. Je peux juste les supprimer. Et maintenant, si je crée juste un puits est simple rectangle. Je peux utiliser n'importe quelle de mes couleurs comme si Ok, alors maintenant que nous avons nos couleurs créées, nous pouvons maintenant passer à la création des styles de texte que nous allons utiliser pour notre design . Et comme vous pouvez le voir, il y a ce que beaucoup de couleurs différentes signifieront que les couleurs mais les styles se passent ici . Mais je pense que nous pouvons commencer à créer les textiles dans la prochaine vidéo. 31. 9.3, Allons créer les styles de texte: cette conception hors cours aurait l'air assez triste si elle n'avait pas beaucoup d'images et d'icônes. Alors j'ai préparé des images pour vous. Et bien sûr, vous trouverez ces gars bien dans un dossier que je vais lier Teoh à l'intérieur de ce puits, la description du cours. Donc, si vous voulez suivre juste pour jeter un oeil à ce dossier et télécharger tous les éléments et toutes les pièces que vous y trouverez. Pour autant que les images vont là où nous avons le blogueur extrait des images juste ici, ces petits carrés nous avons aussi ce flux d'images Instagram et nous avons aussi quelques images plus grandes pour notre section héros. Donc, si vous voulez aller avec une autre image, vous ne voulez pas aller avec celle que j'ai utilisée, vous pouvez choisir. Choisissez-le d'ici. Maintenant, nous allons ajouter ces images en utilisant l'outil d'image de lieu et de lieu juste ici. Cependant, quand il s'agit d'icônes, nous allons les ajouter d'une manière un peu différente. Mais nous y arriverons dans une seconde. Donc mes icônes sont assis dans ce dossier services Donc ce sont toutes ces icônes juste ici . Et j'ai aussi des icônes de médias sociaux. Il y a ces gars ici, et vous n'allez pas utiliser la commande place ou quoi que ce soit du genre. Nous allons simplement faire glisser toutes ces icônes dans notre design. Mais comme vous le remarquerez en seulement une seconde. C' est et c'est facile, mais il y en aura. Nous devrons faire quelques choses au sujet de ces icônes intégrées. Et c'est le mot clé ici. Il y avait Aiken embarqué. On va faire un glissement sur le document, mais ça va arriver dans une seconde. Nous allons commencer leur processus de conception. Permettez-moi de passer à la conception principale. Nous commencerons le processus de conception avec la création du logo ici. Donc, vous apprendrez comment ajouter réellement eux et le grand et tombé à votre à votre morceau de texte de la taxe sur la vie. Parce que si je prends juste le textile artistique, si tu veux, on peut encore changer certaines choses à ce sujet. Nous pouvons éloigner apostrophe et taper simplement e. Et quand même cet ingrédient est Ah a été appliqué à eux à la taxe, et il est mis à jour sur le pouce. Mais je vais laisser partir, laisser l'apostrophe en direct. Et pourtant je pense que nous pouvons passer à la création, à créer dans notre première pièce de design, qui sera ce logo. 32. 9.4, 9.4Let's d'un coup de l'un des images et des icônes: cette conception hors cours aurait l'air assez triste si elle n'avait pas beaucoup d'images et d'icônes. Alors j'ai préparé des images pour vous. Et bien sûr, vous trouverez ces gars bien dans un dossier que je vais lier Teoh à l'intérieur de ce puits, la description du cours. Donc, si vous voulez suivre juste pour jeter un oeil à ce dossier et télécharger tous les éléments et toutes les pièces que vous y trouverez. Pour autant que les images vont là où nous avons le blogueur extrait des images juste ici, ces petits carrés nous avons aussi ce flux d'images Instagram et nous avons aussi quelques images plus grandes pour notre section héros. Donc, si vous voulez aller avec une autre image, vous ne voulez pas aller avec celle que j'ai utilisée, vous pouvez choisir. Choisissez-le d'ici. Maintenant, nous allons ajouter ces images en utilisant l'outil d'image de lieu et de lieu juste ici. Cependant, quand il s'agit d'icônes, nous allons les ajouter d'une manière un peu différente. Mais nous y arriverons dans une seconde. Donc mes icônes sont assis dans ce dossier services Donc ce sont toutes ces icônes juste ici . Et j'ai aussi des icônes de médias sociaux. Il y a ces gars ici, et vous n'allez pas utiliser la commande place ou quoi que ce soit du genre. Nous allons simplement faire glisser toutes ces icônes dans notre design. Mais comme vous le remarquerez en seulement une seconde. C' est et c'est facile, mais il y en aura. Nous devrons faire quelques choses au sujet de ces icônes intégrées. Et c'est le mot clé ici. Il y avait Aiken embarqué. On va faire un glissement sur le document, mais ça va arriver dans une seconde. Nous allons commencer leur processus de conception. Permettez-moi de passer à la conception principale. Nous commencerons le processus de conception avec la création du logo ici. Donc, vous apprendrez comment ajouter réellement eux et le grand et tombé à votre à votre morceau de texte de la taxe sur la vie. Parce que si je prends juste le textile artistique, si tu veux, on peut encore changer certaines choses à ce sujet. Nous pouvons éloigner apostrophe et taper simplement e. Et quand même cet ingrédient est Ah a été appliqué à eux à la taxe, et il est mis à jour sur le pouce. Mais je vais laisser partir, laisser l'apostrophe en direct. Et pourtant je pense que nous pouvons passer à la création, à créer dans notre première pièce de design, qui sera ce logo. 33. 9.5, Commençons d'abord le logo: Commençons donc ce processus de conception en créant un logo. Mais d'abord, je vais juste cacher le grain. Je n'en aurai pas besoin juste maintenant, mais je vais créer une nouvelle couche que je vais renommer A et je vais l'appeler, hum, hum, en-tête, juste comme ça. Et je vais attraper l'outil de texte artistique et je vais simplement taper créer fait juste comme maintenant le plaisir que nous utilisons est, eh bien, eh bien, notre principal pour rester en tête téléphone, qui est appelé indice, comme nous le savons déjà. Mais bien sûr, nous ne voulons pas que ce soit cette lumière. Je veux dire, quand nous créons, si nous créons un fond plus sombre, bien sûr, nous pourrions aller avec cette couleur claire, mais vous voulez ajouter un Grady pour le faire. Et puisque nous avons cette nuance ici, cela remplit cette super info, nous pouvons simplement ajouter à notre texte. Cependant, si vous n'avez pas un bon échantillon ici, vous pouvez simplement aller de l'avant et activer le filtre. Et ici, où vous pouvez voir le type, vous pouvez utiliser solide, ce qui serait une couleur simple n'importe quelle couleur que vous voudriez juste comme ça. Mais vous pouvez également choisir ingrédient linéaire, ingrédient elliptique, radial, conique ou même vous pourriez ajouter une carte de bit à votre local, mais ce serait étrange pour un logo sur un site web. Donc, je vais simplement choisir linéaire comme ça. Et comme vous pouvez le voir, nous l'avons déjà. Il suffit de zoomer un peu. Nous avons ce curseur Grady int Grady int juste ici. Et si vous voulez changer les couleurs du grand et curseur, vous pouvez simplement cliquer sur ce et cette case ici et vous pouvez changer les couleurs de votre Grady int de votre Grady dans les arrêts. Alors peut-être que c'est choisir quelque chose comme ça et encore plus sombre. Je veux dire, vous pouvez jouer avec elle un après-midi entier et vous pouvez juste cliquer et changer la direction du curseur comme ça. Cependant, comme je l'ai dit, je vais simplement utiliser cette nuance Grady int ici, et je vais la rendre beaucoup plus petite maintenant. Je ramènerai un migrant juste pour voir ce que je fais ici. Et je vais déplacer mon logo ici. Je vais le placer contre ma colonne de gauche à gauche. Mais cette première colonne ici et je vais augmenter la taille. Voyons 36 peut-être, et il y aura un peu trop gros. 28 devrait aller bien, juste comme ça. Bien sûr qu'on peut. On peut toujours le changer à plus tard si on ne l'était pas. Maintenant que nous avons notre logo, juste vous montrer rapidement à quoi il ressemble maintenant que nous avons notre logo qui pourrait réellement avoir besoin d'un traitement qu'il pourrait obtenir. On voudra peut-être l'étendre un peu trop quelque part ici. Pourquoi pas ? Maintenant que nous avons le logo, nous pouvons continuer à créer la navigation et intégrer nos premiers Aikens, ces icônes de médias sociaux que nous venons de voir dans la vidéo précédente. En fait, laissons le logo juste une seconde, puis passons à la création de leur navigation 34. 9.6, Allons créer les liens de menu: dans cette vidéo, nous allons commencer à construire cette navigation à partir de notre site Web. Et c'est en fait aussi facile que de saisir le textile artistique, cliquer et de dragon et de taper quelque chose comme le calme et vous liez. Pourquoi pas ? Ça peut l'être. Ça va lire Manual Inc maintenant. Ils sont devant. Il va que je vais utiliser est bien, est le même fonds que le logo. Alors c'est Hinde ? Bien sûr. Je voulais être beaucoup plus petit. Peut-être 18 ou 20. Nous verrons dans une seconde. Bien sûr, je voulais avoir une couleur différente, et je voulais être écrit dans toutes les capitales. Donc je vais aller dans le panneau des personnages et ici je peux changer tout ce que je veux sur ce texte. Eh bien, à propos de ce Eh bien, avait cet élément de navigation de cette chose. Donc d'abord, je vais changer la couleur de cet int Grady. Je vais choisir mes échantillons, et ce sera cette couleur claire,comme ça, comme ça, et le mot que vous pouvez voir tout de suite. On va arranger ça dans une seconde. Ok, donc maintenant je vais cliquer sur toutes les majuscules en bas juste ici. Donc maintenant, nous avons notre encre manuelle écrite en utilisant Onley, les vieux casquettes, le puits, le tout bouchon de la CIA. Construisons maintenant à l'ensemble du système de navigation Eh bien, aussi facile que cela ne peut être que. Je veux dire, laisse-moi juste le fermer. Je veux dire, on peut simplement maintenir la touche de contrôle enfoncée et maintenir la touche de changement pour limiter la proportion et affaiblir juste l'eau de Cologne ce gars à droite. Et maintenant, si vous appuyez juste sur le contrôle, j affaiblir dupliquer la dernière transformation de ce qui était de faire face et ah, et de bouger. Donc on a 12345 manuels comme ça. Et je sais que vous ne le voyez probablement pas trop bien pour clairement. C' est pourquoi je vais juste regrouper ces gars et que je vais les regrouper avec le logo, comme ça. Et maintenant, si nous cliquons simplement sur cette insertion derrière l'option de sélection que nous connaissons déjà et maintenant il suffit de saisir l'outil rectangle qui vient juste de zoomer un peu. Et maintenant, si nous créons simplement un rectangle, nous allons le créer en bas. Ça devrait être bien. Tu pourrais le rendre plus grand. Vous pouvez le rendre plus petit. Je vais vous laisser le soin. Je vais le laisser comme ça. Et bien sûr, je veux avoir voulu avoir un autre type de remplissage de couleur différente ah, couleur cette couleur plus foncée. Et j'espère qu'en ce moment vous pouvez tout voir clairement. Mais bien sûr, je ne veux plus que ces gars soient regroupés, alors je vais juste les regrouper. Mais je vais aussi regrouper ces gars parce que maintenant je veux m'assurer que les distances entre ces liens ces éléments ici sont égales. Donc, je vais acheter Shift, cliquer, et je vais les sélectionner tous, juste comme ça. Et à partir de l'onglet Ligne A, je vais choisir ce gars ici qui dit l'espace horizontalement, juste comme ça et que je vais frapper. Ok, donc maintenant je peux être sûr que sur ces distances sont égales. Bon, maintenant que je sais que toutes ces distances sont égales ici, je peux simplement sélectionner tous ces types et les regrouper, comme ça. Donc, notre prochain ordre de travail serait d'ajouter les icônes des médias sociaux ici à droite. Et comme je l'ai mentionné précédemment, nous allons intégrer les documents en tant que V G dans ce document. Maintenant, cela peut sembler compliqué, mais ce n'est vraiment pas le cas, mais il y a en fait quelques choses qui 35. 9.7, Ajoutons les icônes de réseaux sociaux: Donc, comme vous pouvez le voir, j'ai ouvert le dossier où je garde mes images. Donc ces 1234 icônes sont prêtes et m'attendent ici. Donc, la façon la plus simple d'ajouter et d'incorporer un document dans un autre document ici, assez dans le concepteur, particulier Aiken. Des documents comme ceux-ci. Il suffit de le saisir et de le placer ici à l'intérieur, à l' intérieur de cette fenêtre. Maintenant, ça peut sembler Ah, eh bien, ça peut ressembler à un super super facile, et ajouter, en fait, c'est que changer dans cette icône en changeant sa couleur Eh bien, ce n'est pas aussi simple. Je veux dire, vous pourriez bien, vous pourriez penser que tout ce qu'il faut est juste de saisir, saisir cette icône et juste changer sa couleur de remplissage pour quelque chose de différent. Comme ça. Mais comme vous pouvez le voir, en fait, rien ne se passe. Je ne peux pas changer pour remplir. Je ne peux pas ajouter le trait près de cette icône. Comme vous pouvez le voir, rien ne se passe réellement. Je ne le rendrai pas plus grand. Je ne changerai pas le coup. Et pourquoi c'est ce hap ? Pourquoi je ne peux pas ? Pourquoi je ne peux rien changer ? Tout ce que je peux Eh bien, c'est en fait parce que c'est un document incorporé. Afinitor designer considère ce gars juste ici comme une représentation de l' original. Donc tu ne l'es pas en fait. Eh bien, vous essayez d'affecter cette icône parce que vous pourriez penser que c'est en fait bien, l'original, l'original, mais ce n'est pas le cas. L' original est toujours assis eso ailleurs. Et la façon la plus simple d'accéder à cet original est de cliquer sur cette option de document ajoutée ici . Et dès que vous faites ça, vous pouvez le voir. Affinity Designer ouvre juste ce document dans une nouvelle fenêtre. Comme vous pouvez le voir, il est écrit intégré juste ici. Donc maintenant, nous pouvons simplement ajouter la couleur de remplissage à notre document à notre je viens dans ce cas. Et comme vous pouvez le voir, nous n'avons pas notre palette de couleurs ici. Nous l'avons seulement dans ce document parce que nous l'avons créé comme une palette de documents et nous ne avons pas même dans un document quelque peu virtuel et dynamique juste ici. Mais ce n'est certainement pas quelque chose que nous pouvons gérer. Je vais donc simplement aller à mon document d'origine et dans le panneau des nuanciers, je vais choisir la palette d'exportation. Je vais laisser le nom tel qu'il est Cliquez sur Enregistrer. Et puis quand je retourne au document incorporé, je peux maintenant choisir la palette d'importation, et nous pourrions la choisir comme une application de palette. Pourquoi pas que je vais simplement choisir ce type. Double-cliquez dessus. Et comme vous pouvez le voir, nous avons notre palais juste ici et maintenant nous pouvons choisir cette lumière remplie comme ça. Et maintenant, quand on y retourne, on ne peut même pas fermer ce type en ce moment. Et maintenant, quand nous revenons à notre document, vous pouvez voir que notre gars, notre Aiken a créé juste ici. Il a changé le fonds et même si ici, dans le panneau de toast, il montre donc qu'il a un peu comme un coup et un remplissage appliqués. Et comme vous pouvez le voir, la tête attend, ce sont des couleurs différentes de l'appel de Phil. C' est vraiment ça qui s'appelle ça ? Cela est appliqué à notre à notre et moi pouvons. Donc maintenant, nous pouvons juste le rendre plus petit, le mettre quelque part ici sur notre fond plus sombre et le rendre encore plus petit que ça. Peut-être pas si petit. Quelque chose comme ça devrait faire je pense que ça devrait être bien maintenant, afin d'accélérer le processus, affaiblir Simplement cloner ce gars vers la droite. Je maintiens le décalage et le contrôle comme ça. Et maintenant, vous pouvez utiliser cette option de remplacement du document ici. Et si je choisis peut-être Instagram. Je change ce document. Cependant, je n'ajoute pas la même chose. Le même collier rempli à mon testament Aiken. Donc encore une fois, je dois aller au document ajouté et je dois aller à des nuances de couleur créées et je vais changer cela juste comme ça. Et maintenant, si on clique sur le contrôle J, on peut cloner ce type et le déplacer vers la droite. Comme à nouveau, Remplacer le document. Choisis-moi. Twitter à ce moment encore ajouté le document. Choisissez la couleur appropriée comme ça. Ainsi, comme vous pouvez le voir, la taille reste la même. Mais la voiture va malheureusement ne change pas pour nous à nouveau. On peut le cloner vers la droite. Remplacer le document cette fois avec le Pinterest Je viens maintenant nous pouvons l'éditer, changer le collier et nous pouvons juste le fermer, comme ça. Ok, donc maintenant nous pouvons nous assurer que les distances entre ces manuels sont les mêmes que distances entre les bons manuels et les icônes des médias sociaux et entre ces icônes des médias sociaux . Donc, je vais simplement sur le groupe ces liens manuels et puis je vais simplement ajouter à la sélection ces gars ici, certains décalage en cliquant sur eux. Et maintenant, si je choisis de l'espace pour Izon Tole et cliquez sur OK, affaiblir. Nous pouvons maintenant être sûrs que tous ces types sont espacés uniformément. Donc maintenant, nous pouvons simplement les regrouper, les déplacer vers la droite si fait affaiblir peut-être même une ligne de notre à notre grille et puis juste les déplacer quelque part ici nous pouvons maintenant juste ami ce logo vers le bas un peu pour s'assurer que la ligne bien. Et on y va. Nous avons créé l'en-tête. Nous pouvons, bien sûr, peut-être déplacer ce type un peu vers le bas. Bien sûr, vous pouvez peut-être agrandir les distances entre tous ces types si vous voulez. Eh bien, c'est totalement à vous de décider. Mais la dernière chose que je veux faire ici est qu'ils veulent indiquer quel côté est en fait le côté actif donc je voulais avoir une couleur différente. Maintenant, maintenant, puis les autres liens certains vont simplement double-cliquer dessus et que c'est la façon dont vous êtes un ciblage, um, un élément dans un groupe que je vais simplement ajouter ce Grady et rempli comme ça. Et nous avons essentiellement un où ont notre en-tête de puits créé ? Comme si je pense que c'était assez facile. Ne pensez-vous pas qu'il y a quelque chose que vous devez être conscient, par exemple, en ajoutant, Ah, le classement rempli au texte, en particulier Erin, que svg icônes ou d'autres documents les incorporer et les manipuler correctement. Mais je pense que toutes ces techniques sont vraiment bien, assez simples. Ils ont besoin d'un peu de s'habituer à, mais une fois que vous aurez le coup d'eux, vous les utiliserez facilement et rapidement. Donc, notre prochain ordre de choses serait de simplement prendre une grande image. Mettez-le. Teoh en fera notre proéminent pour la pièce la plus importante de ce monde, la partie stop de la conception, puis mettre une table plus sombre bien, typographie plus légère contre elle et créer ce système de navigation juste ici. Alors commençons à le faire dans la prochaine vidéo 36. 10.1Enbutons par l'image principale: la section suivante que nous allons créer est cette section de héros juste ici. Bien sûr, ce qui est le plus important à ce sujet, c'est qu'il a cette grande image comme arrière-plan. Il y a aussi cette typographie audacieuse, et nous avons aussi ce système de navigation ici en bas, et la création de la section nous donnera en fait l'occasion de découvrir les concepteurs d'affinité les techniques et les outils qui sont vous permettant d'ajouter des images. Et cette méthode est la plus simple. C' est le plus facile, donc nous allons commencer par. Mais avant d'ajouter une image, ajoutons un calque. Donc, je vais créer un plus tard juste ici. Je vais le nommer comme un héros, comme ça. Et je vais le déplacer sous la section Chapelier et Heather Layer juste ici. Donc, la façon la plus simple d'ajouter une image à l'intérieur d'un ajustement dans le concepteur est simplement en utilisant l'outil d'image de lieu , qui est ce gars juste ici. Ce qu'il fait, c'est qu'il vous permet simplement d'ouvrir et de placer une image, ce qui est quelque chose qui peut également être fait en utilisant la commande file place. Mais cette commande vous permet également d'incorporer d'autres formats de fichiers, pas seulement des images où il est l'image de place donc est spécifiquement conçu pour ajouter seulement des images à votre volonté. Pour vos sons de document va simplement cliquer dessus et toutes ces images, en passant, nous sommes télécharger à partir des essieux qui viennent un site que nous avons découvert dans l'une des vidéos précédentes . Donc je vais simplement choisir peut-être cette image, et comme vous pouvez le voir, rien ne se passe. Je suppose que vous ne pouvez rien voir parce que rien ne se passe autre que notre curseur Kherson a un acolyte. Et cette petite icône indique en fait que si je clique maintenant n'importe où dans mon document, je vais aller à la pointe. Ajoutez cette image. Et comme vous pouvez le voir, c'est grand. C' est beaucoup trop grand pour nos besoins, donc nous devons le rendre plus petit et pour le rendre plus petit, affaiblir simplement simplement traîné par l'un de ses coins, juste comme ça, jusqu' à ce qu'il aille bien, aussi petit que nous en ont besoin. Et en passant, vous n'avez pas besoin d'appuyer et de maintenir la touche Maj enfoncée car, eh bien, un concepteur faible par défaut suppose que vous voulez garder les proportions telles qu'elles sont. Vous ne voulez pas déformer votre image, et c'est en fait très pratique parce que nous ne voulons pas déformer notre. Vous ne voulez pas commencer notre image. Donc, si vous voulez faire téléphone, votre document a la même chose que votre toile. Vous pouvez simplement les entrer ici à l'intérieur de ce panneau de transformation. Mais ce qui est important ici, c'est que nous voulons que notre section soit tirée cette image d' arrière-plan soit plus petite. Je veux dire, on voulait être aussi large que l'ensemble puisse durer. Nous voulions aller du côté gauche du port View vers le côté droit du port de vue, mais nous ne voulons pas que ce soit ce péage. Nous voulons le rendre plus petit. Et, bien sûr, si nous l'attrapons juste par l'une des poignées juste ici, nous allons déformer notre image, et ce n'est certainement pas ce que nous voulons. Alors, comment pouvons-nous nous assurer que, bien, l'image reste en proportion, mais elle n'est pas aussi grande que cet original. On pourrait peut-être utiliser le masque d'écrêtage pour ça, mais je pense que ce serait plus facile de prendre la récolte de facteurs jusqu'à ce que ce gars juste ici et simplement déplacer ce gars un peu vers, je ne sais pas, peut-être que quelque part ici nous sommes va le vérifier dans une seconde. Ainsi, l'outil de recadrage vectoriel nous permet simplement de recadrer l'image. Même si ça s'appelle une culture vectorielle. Il nous permet de recadrer une image comme ça sans affecter et l'image elle-même que nous pouvons même savoir déplacer ce gars autour de notre intérieur ou image recadrée cadre, juste comme si pour s'assurer que c'est bien, il semble juste un moyen que nous voulons qu'il regarde. Donc, si nous faisons un zoom avant un peu plus, et maintenant si vous regardez simplement le panneau des calques, vous pouvez voir que nous sommes tombés sous notre image. On a ajouté ce rectangle ici. Et, comme vous pouvez le voir par sa miniature, et si vous êtes familier avec la boutique photo, il ressemble un peu à un masque, ne pensez-vous pas ? Eh bien, c'est essentiellement parce que c'est un masque, un masque qui est appliqué dynamiquement à notre image. Si nous l'avons désactivé, vous pouvez voir que nous récupérons toute notre image. Mais si nous faisons demi-tour, vous pouvez voir qu'il est coupé comme ça, et il a un avantage majeur. Je veux dire, ajouter un masque à notre image, même si nous n'avons pas demandé à Adam. Je veux dire, un ami à concepteur a ajouté ce masculin automatiquement, mais nous pouvons juste aller envelopper ce rectangle et nous pouvons aller ici à notre panneau de transformation, assurez-vous que notre transformation se passe d'un point hors des premiers. Et maintenant on peut juste changer cette hauteur de valeur ici à quelque chose comme, je ne sais pas, peut-être 700 pixels. Voyons voir. Et comme vous pouvez le voir, c'est notre masque qui est coupé à exactement 700. Donc maintenant, nous avons 920 pixels sur 700, comme ça. Et si nous venons d'afficher un aperçu à 100% et de nous débarrasser des panneaux comme pour que nous puissions voir si nous aimons vraiment ça bien, cette hauteur, donc si vous voulez le rendre plus grand, nous pouvons le rendre plus grand. On peut le rendre plus petit si tu le veux, mais je pense que je vais te laisser le soin de décider si tu veux expérimenter un peu plus. Tu sais comment faire. C' est Oh, donc tu peux le faire maintenant. Tu peux le faire toi-même. Ce que je veux faire, cependant, c'est que je veux rendre cette image plus sombre parce que je n'aime pas le fait que c'est si léger , surtout compte tenu du fait que je vais être mis dans une typographie légère dessus en une seconde. Donc ce que je veux faire, c'est qu'ils veulent le rendre un peu plus sombre. Mais il y a une chose dont vous devez être prudent, mais je vais tout vous raconter dans la prochaine vidéo. 37. 10.1Enbutons par l'image principale: que vous continuez à construire votre site Web, vous concevez et continuez à ajouter des images et de grandes images comme celui-ci. Votre document va devenir de plus en plus grand et de plus en plus grand et aller. Ton ordinateur s'en va. Teoh courir plus lentement, plus lentement et plus lentement. Je veux dire, plus il y a de grandes images qu'il a à traiter c'est plus lent que plus de bélier et le processus de consommation d' énergie tout le processus va obtenir donc il y a une petite astuce que vous pouvez faire pour vous assurer que tout semble bien. Mais en même temps, tout ce que je suis dans le processus est rapide et lisse. Si vous savez que vous allez aller bien, en laissant cette image comme c'est, vous voulez que votre image de héros soit aussi grande que ce gars ici. Et vous vouliez être rogné comme ça, vous pouvez simplement le sélectionner. Et maintenant, si vous allez simplement à l'exportation de fichiers, nous pouvons simplement sélectionner la sélection sans arrière-plan, faire un J peg, descendre la qualité à environ 75% comme ça Et maintenant, quand nous exportons cette image avec ces paramètres, toute l'image va être recadrée. Ce n'est plus une image énorme. Ce sera beaucoup, beaucoup plus petit. Mais ce sera, eh bien, le même que celui que vous êtes vu ici. Donc, si je vais maintenant juste aller de l'avant et cliquez sur Exporter et je vais l'appeler comme, hum, image rognée comme ça Et maintenant je peux simplement la supprimer. Et maintenant, si vous voulez aller à l'image de lieu, outil et que je peux vérifier où je mets mon ici est là ? Voici Et si je clique juste ici, vous pouvez voir que j'ai mon image rognée et parfaitement alignée avec mon avec mon ensemble sur l'ensemble de la conception du site Web. Et c'est en fait que vous pouvez faire avec tout votre puits, au moins ces grandes images. Si votre ordinateur est peut-être un peu plus lent si vous n'avez pas assez de RAM ou votre processeur est un peu lent, vous pouvez toujours juste ah dire offensant au concepteur Teoh Inouye, optimiser les images en les rendant simplement plus petits. Et une fois que vous les avez recadrées, une fois que vous les avez bien préparés comme vous voulez qu'ils soient. Vous pouvez simplement les enregistrer en tant qu'actifs distincts, puis les ajouter à nouveau. Mais ils seront beaucoup plus petits, et la qualité sera à peu près la même, et tout fonctionnera plus lisse. Donc maintenant, nous sommes prêts à commencer à ajouter le collier dans le à notre image. Et encore une fois, il y aura quelque chose que vous avez laissé que vous avez l'esprit Teoh Barre quand vous ajoutez une couleur à vos images parce que vous pourriez être tenté comme si je suis habituellement tenté de faire une chose, mais ça ne fonctionnera pas comme son tournage, alors parlons à ce sujet dans la prochaine vidéo. 38. 10.2Comment redimensionner rapidement l'image: que vous continuez à construire votre site Web, vous concevez et continuez à ajouter des images et de grandes images comme celui-ci. Votre document va devenir de plus en plus grand et de plus en plus grand et aller. Ton ordinateur s'en va. Teoh courir plus lentement, plus lentement et plus lentement. Je veux dire, plus il y a de grandes images qu'il a à traiter c'est plus lent que plus de bélier et le processus de consommation d' énergie tout le processus va obtenir donc il y a une petite astuce que vous pouvez faire pour vous assurer que tout semble bien. Mais en même temps, tout ce que je suis dans le processus est rapide et lisse. Si vous savez que vous allez aller bien, laissant cette image comme vous voulez que votre image de héros soit aussi grande que ce gars ici. Et vous vouliez être rogné comme ça, vous pouvez simplement le sélectionner. Et maintenant, si vous allez simplement à l'exportation de fichiers, nous pouvons simplement sélectionner la sélection sans arrière-plan, faire un J peg, descendre la qualité à environ 75% comme ça Et maintenant, quand nous exportons cette image avec ces paramètres, toute l'image va être recadrée. Ce n'est plus une image énorme. Ce sera beaucoup, beaucoup plus petit. Mais ce sera, eh bien, le même que celui que vous êtes vu ici. Donc, si je vais maintenant juste aller de l'avant et cliquez sur Exporter et je vais l'appeler comme, hum, image rognée comme ça Et maintenant je peux simplement la supprimer. Et maintenant, si vous voulez aller à l'image de lieu, outil et que je peux vérifier où je mets mon ici est là ? Voici Et si je clique juste ici, vous pouvez voir que j'ai mon image rognée et parfaitement alignée avec mon avec mon ensemble sur l'ensemble de la conception du site Web. Et c'est en fait que vous pouvez faire avec tout votre puits, au moins ces grandes images. Si votre ordinateur est peut-être un peu plus lent si vous n'avez pas assez de RAM ou votre processeur est un peu lent, vous pouvez toujours juste ah dire offensant au concepteur Teoh Inouye, optimiser les images en les rendant simplement plus petits. Et une fois que vous les avez recadrées, une fois que vous les avez bien préparés comme vous voulez qu'ils soient. Vous pouvez simplement les enregistrer en tant qu'actifs distincts, puis les ajouter à nouveau. Mais ils seront beaucoup plus petits, et la qualité sera à peu près la même, et tout fonctionnera plus lisse. Donc maintenant, nous sommes prêts à commencer à ajouter le collier dans le à notre image. Et encore une fois, il y aura quelque chose que vous avez laissé que vous avez l'esprit Teoh Barre quand vous ajoutez une couleur à vos images parce que vous pourriez être tenté comme si je suis habituellement tenté de faire une chose, mais ça ne fonctionnera pas comme son tournage, alors parlons à ce sujet dans la prochaine vidéo. 39. 10.3Enregistre l'image un peu plus proche: en cela, nous ne le faisons pas Ils vont rendre notre image un peu plus sombre, parce que si nous regardons l'original, nous pouvons voir que c'est vraiment bien. Il est plus sombre que cette image originale parce que nous voulons mettre cette typographie légère contre cette image. Et surtout dans l'affaire. Dans le cas de cette image, si nous mettions la typographie des lumières sur ce fond, elle serait à peine visible. Et ce n'est pas une bonne expérience utilisateur. Donc, ce que nous voulons faire, c'est que nous voulons rendre plus sombre, donc une chose que vous pourriez être tenté de faire. Si tu essayes de Teoh juste, tu sais, battre. Le système a essayé plusieurs fois, vous pouvez être tenté d'utiliser simplement l'outil de remplissage. Et pour le type de remplissage, vous pouvez choisir une couleur. Par exemple, si nous allons simplement avec solide, vous pouvez voir que nous n'ajoutons pas de couleur en fait. Mais nous sommes en train de changer. Nous changeons toute la photo, et si vous voulez aller pour ce genre d'effet artistique, sera à mon avis. Vous pouvez choisir beaucoup de couleurs différentes et réellement changer la façon dont cette voiture que cette image est en fait va regarder dans, mais ce n'est vraiment pas ce que nous voulons. Alors n'oubliez pas de bien ne pas utiliser cette option si vous. Si vous voulez simplement rendre l'image plus foncée, n'optez pas pour la couleur de remplissage pour la rendre. Mais si vous voulez essayer de battre le système, vous ne le battrez pas comme ça. Vous pouvez, cependant, saisir simplement le rectangle pour créer un petit rectangle et le remplir avec une couleur foncée. Donc, je vais simplement choisir. Peut-être que cette couleur et je veux le rendre aussi grand que l'image. Et comme il est 1920 par 700, c'est ce que je vais entrer ici. 700 comme si nous pouvons maintenant simplement le placer sur notre image et s'assurer qu'il s'accroche comme ça . Et maintenant, nous pouvons simplement baisser l'opacité. Allons voir quelque chose comme peut-être 40%. Je pense que 40% devrait être bien parce que, comme je l'ai dit, l'image sous-jacente est assez légère, donc je ne pense pas que nous devrions baisser l'opacité à quelque chose comme, je ne sais pas, 17% Goes dit que n'aura tout simplement aucun sens. Bien sûr, on pourrait peut-être essayer d'ajouter un appel plus sombre peut-être, comme, couleur noire et ensuite affaiblir. Laissez tomber l'opacité encore plus loin. Mais je pense que je vais aller avec ma couleur d'origine, et je vais augmenter la capacité à quelque chose comme, peut-être 35 40% juste comme ça. Donc maintenant, nous pouvons simplement saisir à la fois l'image et le rectangle et affaiblir. Il suffit de les regrouper si vous voulez. Vous pouvez renommer le groupe comme peut-être Image principale, Quelque chose comme ça. Juste pour que tu saches quoi ? En fait, c'est juste ici, à l'intérieur de ce groupe. Maintenant, nous pouvons commencer à ajouter cette typographie que nous pouvons commencer dans ce texte principal. Le texte principal ici. Rappelez-vous, nous avons créé un style de texte spécifique pour cela, mais je pense que nous pouvons commencer à le faire dans la prochaine vidéo. 40. 10.4, maintenant, ajouterons le texte principal: Maintenant, nous pouvons commencer à ajouter la typographie principale et à la mettre contre ce fond d'image plus sombre . Donc, je vais simplement saisir l'outil de taxe de cadre et je vais créer je vais créer un cadre de texte juste comme pour qu'il n'ait pas à être tous ces grands engourdissements. Nous allons prendre l'outil de texte et je vais choisir insérer du texte de remplissage, comme ça et à partir de nos styles de texte, je vais choisir notre pensée appelée le titre principal. Je vais l'aligner vers la gauche et maintenant le déplacer, le déplacer quelque part. Ici, laissez-moi juste voir si s'accroche bien Moovit été ici maintenant, si vous voulez, vous pouvez bien sûr. Ah, eh bien, tapez de vrais mots ici comme je l'ai dans l'original, mais je vais vous laisser le soin. Je veux juste vous montrer comment créer ce genre d'effet. Maintenant, si vous n'aimez pas la façon dont cela ressemble, si vous n'aimez pas la façon dont les personnages sont placés si vous n'aimez pas le chemin sur la ligne Salut, Tim est, Ah, bien affiché ici. Bien sûr que tu peux. Vous pouvez changer certaines choses à ce sujet. Donc, par exemple, nous pouvons simplement saisir le panneau des personnages et, par exemple, nous pouvons essayer de changer, augmenter la tête, peut-être à 78 comme ça. Et bien sûr, on allait devoir agrandir ce cadre comme ça. Vous pouvez également essayer d'augmenter la distance entre des caractères spécifiques. Et c'est, bien sûr, le suivi. Alors voyons pour vous il suffit d'entrer un. Je n'irais pas par-dessus bord avec ça. On voit une légère augmentation, mais pas beaucoup. Et je n'irais pas trop loin avec ça. Peut-être allons nous en tenir à cinq. Quelque chose comme. Donc ça devrait être bien. Et aussi, si vous voulez, vous pouvez peut-être essayer avec les autres poids avant, comme régulier, semi-chauve. Je n'irais pas avec la lumière et peut-être moyenne. Je pense que l'audace serait le meilleur parce que cela nous donnerait, eh bien, un sentiment de cohérence dans notre conception. Je veux dire, le logo est écrit dans n'importe quelle version plus audacieuse de la police. Le texte lie bien, les manuels sont écrits dans une version en gras sur le devant, donc je voudrais simplement rester avec l'état en gras Si vous voulez, vous pouvez choisir Teoh, souligner tout ce texte si nous jetons un oeil à l'original parce que vous pouvez voir que j'ai souligné à ce mot que le monde créé. Mais c'est possible sur Lee. Si vous seulement si vous allez ajouter un vrai morceau de livre de texte est si c'est juste que ce texte de remplissage automatique est juste un filtre et vous ne serez pas en mesure, Teoh Ah, manipuler Onley œuvres séparées. Donc à titre d'exemple, si je prends ce type et si je le copie, je vais m'assurer que je suis sur la droite plus tard et que je vais me débarrasser de ce gars. Et si je bouge, c'est comme ça. Maintenant, si tu veux, tu peux juste saisir le cadre ou le textile artistique. Je vais peut-être prendre le textile artistique et nous pouvons juste choisir des mots spécifiques. Donc, par exemple, prenons juste fascinant. Laisse-moi juste l'attraper. Et maintenant, je peux le souligner, ou je peux même le doubler si je le veux, mais je ne peux pas le faire avec le juste cette taxe de remplissage que vous pouvez utiliser à partir du manuel de texte . Parce que, comme je l'ai dit, c'est juste un filtre dynamique et vous n'êtes pas capable de manipuler des mots simples. Et bien sûr, la dernière chose à faire, il serait juste de saisir le texte et l'arrière-plan Souligner et simplement aligner ces gars à la dissension, juste comme si juste pour s'assurer que tout va bien. Donc, si nous examinons maintenant nos progrès, c'est ce que nous avons jusqu'à présent. On a le brevet, l'en-tête. On a le logo, on a le menu, on a les icônes sociales, les icônes des médias sociaux. On s'est bien passé, presque la section de héros finie. Et si vous ne voulez pas créer un curseur de navigation, vous pouvez simplement passer à une autre section à la section suivante. Mais je crois qu'on y va. Teoh vont certainement créer que les boutons de navigation de curseur ici, Mais jusqu'à présent si bon, nous avons ce qui pourrait facilement être fini, partie finie, partie supérieure de la conception parce que nous avons obtenu le en-tête. On a le héros. Maintenant, nous allons passer à la prochaine section à côté de la section deux articles en vedette. Mais avant que nous ne soyons pas avant nous le faisons, c'était en fait créer la navigation de Styler navigation ici en bas, droite, donc restez à l'écoute. 41. Ajouter la navigation de diapositive de diapositives: la création du curseur. La navigation est en fait un processus assez simple. Alors commençons à le construire dès maintenant. Tout d'abord, je veux créer une ellipse qui va avoir une couleur de trait, et il n'aura pas de couleur de remplissage le trait avec la canopée. Juste un point. On peut toujours le changer plus tard. Et je vais simplement créer une ellipse. Ah, à environ 25 pixels dans le puits, la fois avec et hauteur. Laissez-moi zoomer de plus près pour que vous puissiez voir ce que je fais ici. Et ce que je vais faire, c'est que je vais simplement le cloner deux fois. Donc c'est un et deux comme ça. Maintenant quoi ? Je vais le faire. Laisse-moi peut-être déplacer ce type mordant à gauche et à droite, ce gars. Mais bien sûr, on va le réparer, réparer, réparer, euh, l'espace. Et en une seconde, Donc, le premier puits, la première icône du premier cercle va avoir un Phil va avoir un grand remplissage qui correspondrait avec le Grady dans le logo de remorquage. Nous voulons indiquer qu'en fait, cette diapositive est la première diapositive dans les piles. C' est pourquoi ce premier cercle de cercle va avoir un remplissage. Sons simplement aller cliquer sur mon grand et remplir mes échantillons comme ça. Et maintenant, nous pouvons simplement créer ce triangle boutons sur la gauche et sur la droite. Ce serait en fait notre précédent et notre prochain fond. Donc, à partir du panneau Outils que je vais créer, je vais sélectionner l'outil triangle. Et je vais simplement créer un triangle qui va ressembler à quelque chose. Bien sûr je ne veux pas qu'il ait un Phil. Je voulais avoir un accident vasculaire cérébral, certains vont simplement échanger ces gars les couleurs. Et je voulais être léger comme ça maintenant, laisse-moi tourner. Je maintiens la touche Maj enfoncée, et maintenant je vais la cloner vers la droite et à partir du panneau Outils. Je vais simplement jus leur noyau Philip de commande horizontale comme ça. Et maintenant, si je choisis juste tous ces gars, je peux à nouveau aller au panneau d'alignement et en fait, vous allez utiliser ce panneau de ligne beaucoup. Donc je vous conseille que vous je vous conseille de vous familiariser avec ce panneau parce que c'est extrêmement important dans la conception de sites Web. Il semble simplement aller choisir l'espace horizontalement clic. OK, et ensuite on peut simplement regrouper tous ces types et s'assurer qu'ils restent ensemble comme ça. Maintenant, je vais juste les déplacer, il suffit de les aligner sur la grille plus que légèrement jusqu'à quelque part ici et juste zoomer un peu comme ça. Et on y va. Nous sommes arrivés à la navigation qui a créé, Bien sûr, si vous voulez, vous pouvez toujours le faire. Nous aurons le A est, bien, bien, coup plus fort. Laisse-moi prendre tous ces types comme ça et dans le panneau de course, je vais l'augmenter à deux points. Donc c'est juste pour qu'ils soient bien visibles sur notre arrière-plan. Et si je me débarrasse maintenant des panneaux maintenant, nous pouvons voir que nous avons tout l'en-tête et nous avons reçu la section héros complète de la section héros avec notre curseur de navigation. Donc la prochaine chose que nous ferions est de commencer à créer cette section en vedette, cette grande section juste ici. Alors commençons à le faire dans la prochaine vidéo 42. Commençons à créer la première Secion de Secion plaquée: la section suivante que nous allons créer est nos articles de section en vedette, donc c'est Ah, il est en fait divisé en deux parties distinctes. Cette partie principale, comme vous pouvez le voir, est placée sur un fond rose, et il y a ce gros titre de section et du texte en dessous. Ensuite, nous avons obtenu une partie de la section qui a un fond plus léger et ah, 1234 huit éléments en vedette au total, et chaque élément comprend hors. D' abord, je viens un morceau de titre Andy hors texte. Nous pourrions ajouter un comme un bouton de lecture plus juste ici ou un lien, mais c'est ah bien, n'est pas nécessaire parce que toute cette section ici peut être un lien. Et il est en fait bien, plus facile de cliquer ou de taper sur un lien comme celui-ci que quand il est un gros comme cet article et en vedette que juste un petit lien ici en bas, a été en fait commencer à les créer que cette section de ce haut de la partie rose. Encore une fois, permettez-moi de ramener les panneaux. Je vais commencer par la création dans un calque séparé pour mon pour ma section, et je vais l'appeler quelque chose comme en vedette un juste comme ainsi Et je vais le mettre sous un autre héros, un calque de héros. Donc, je vais juste attraper l'outil rectangle et je vais créer et rectangle qui va s'étirer sur notre toile. Je vais le rendre plus grand. Il faut qu'on trouve quelque chose comme pour qu'on puisse toujours le changer plus tard. Et bien sûr, je ne veux pas qu'il ait un accident vasculaire cérébral. Je voulais avoir un plein et je voulais l'être. Je voulais être rose, comme ça. Bien sûr que non. Ce que nous devons faire, c'est simplement ajouter à cette typographie. Donc je vais lui prendre le texto, un ami Tal Frame Textile. Je vais créer un cadre de texte que je vais remplir avec du texte de remplissage, comme ça. Et comme nous avons un sous-titre, un titre de section, eh bien, style de texte, je vais simplement l'utiliser maintenant. Bien que je vais changer est légèrement. Je vais le mettre au centre comme ça. Maintenant, ce que nous pouvons faire est que nous pouvons simplement emprunter ce morceau de texte et le cloner et simplement changer dans le style du texte en lumière du corps, comme ça. Et si on veut, on peut le rendre encore plus grand, juste comme ça. Et si vous pensez que c'est trop petit ou peut-être trop grand, vous pouvez simplement aller au panneau supérieur et peut-être en faire 18 si vous voulez. Mais c'est totalement optionnel. Je veux dire, je pense que j'irais juste avec les 16 points simples car c'est eux. Un mai nah, taille du téléphone, le typique de la taille pour Old Boy Tech. Donc je vais juste avec 16 comme ça. Et bien sûr, nous pouvons jouer avec la position en un peu. Et une fois que tout est réglé, nous pouvons simplement attraper ces deux gars, les regrouper et puis déplacer le clic sur eux que l'arrière-plan. Pour l'ajouter à la sélection et l'affaiblir, assurez-vous simplement que tout est bien aligné au centre. 43. Ajouter les éléments vedettes: Maintenant, comme vous pouvez le voir, nous commençons à perdre un peu de place ici. On doit bouger ce type. Nous devons élargir notre volonté, notre conseil d'administration. Mais avant ça, je pense qu'on pourrait peut-être juste déplacer ces gars juste un peu vers le haut et peut-être rendre ce gars juste un peu plus petit et aligner à nouveau tout bien au centre. Juste comme ça. Donc maintenant on peut juste l'attraper Le tableau d'art Still, juste comme ça, cliquez sur l'art de la planche. Laissez-moi juste zoomer un peu et simplement étendre notre notre bateau et étendu encore plus faire quelque part Peut-être ici, juste comme ça. Ça devrait être bien. Donc,la prochaine Donc, partie pour faire la prochaine pièce d'art que nous devons créer à l'Est ? Bien sûr, cette partie inférieure inférieure de cette section des articles en vedette. Donc, cette fois, je ne vais pas commencer par créer ce fond d'écran. Je vais commencer par créer un seul élément en vedette, juste celui-ci. Donc, encore une fois, je vais simplement naviguer vers le dossier où je garde mes couleurs d'yeux et je vais en apporter une dans mon document. Ok, donc j'ai le dossier juste ici et maintenant je peux juste apporter cette réponse que je viens dans mon document juste comme ça. Bien sûr, c'est beaucoup trop grand, donc je peux simplement le rendre plus petit à quelque chose comme Donc ça devrait aller. Juste une minute. Mais et bien sûr, encore une fois, si vous voulez changer la couleur de notre je ne peux pas nous ne pouvons pas utiliser juste ce Phil et un coup pour les outils de couleur de trait. Nous devons ajouter le document et maintenant nous pouvons tout sélectionner et nous pourrions peut-être nous débarrasser du coup. Je ne pense pas qu'on en aura besoin. Et encore une fois, nous devons trouver notre groupe d'échantillons et simplement changer la couleur. Et on ne peut pas fermer ce gars, juste comme maintenant maintenant prochain. Ce que nous devons faire, c'est ajouter cette taxe sous notre icône. Donc encore une fois, je vais attraper le textile de cadre, créer un petit cadre à nouveau, insérer du texte de remplissage, Mais cette fois, je vais utiliser le textile de titre vedette. Juste comme ça. Bien sûr, il avait peut avoir une ligne de taxe à la main, il pourrait avoir deux lignes de texte. Je vais vous laisser le soin de savoir qui, qui, eh bien, quelle est la taille de ce texte dans votre conception. Ensuite, je vais simplement emprunter ce type à Kelowna. Dour s'est allongé juste un peu, mais je vais changer ce textile en body dark comme ça. Ainsi, comme vous pouvez le voir, travailler avec les textiles nous permet d'économiser beaucoup de temps. Cela rend l'ensemble du processus facile et agréable. Vraiment, c'est, hum c'est juste une question d'ajouter le texte de remplissage et le droit au style de texte, et on a fini. Mais avec ça, je pourrais m'affaiblir. Maintenant, assurez-vous simplement que tout est bien aligné au centre, comme ça, et nous pouvons simplement le regrouper maintenant. Un autre avantage sur le travail de cette façon est que si nous faisons maintenant juste plus petit, vous pouvez voir que la taxe de remplissage est également s'ajuster à nos deux à la taille de la nouvelle taille de notre Aiken, sources espèrent, peu importe comment petit nous allons le faire ou grand, il sera toujours bien affiché en proportion. Bien sûr, nous pouvons toujours simplement sélectionner, le sélectionner et peut-être élargi un peu, sorte qu'il semble si bien un peu différemment. Une chose que nous devons enterrer ma lors de la création de ces gars ici est que si nous revenons juste à l'original, vous pouvez voir que nous avons 1234 articles en vedette juste ici dans une rangée. Et bien sûr, nous avons deux rangées. qui veut dire que puisque nous avons quatre articles, nous devons nous assurer que ce n'est pas plus grand que trois colonnes, accord, parce que quatre fois trois est 12e. Donc maintenant, je peux voir que je le suis. Je pense que je vais aller bien, parce que mon icône n'est pas à plus grand. Ce n'est pas plus large que les trois colonnes. Donc vraiment, tout ce que nous avons à faire maintenant, ce montant de justice, tout ce que nous devons faire maintenant, c'est simplement de Cologne. Tout ce groupe, tous ces gars à droite, juste comme ça et puis appuyez sur le contrôle J Control J. Et bien sûr, vous pourriez vouloir faire du ménage. On voudra peut-être en faire un peu. Il y a un peu d'alignement, juste comme Donc juste pour s'assurer que tous ces gars sont alignés pour aligner proportionnellement Et bien sûr, vous pouvez jouer avec la taille de ces icônes. Je vais te laisser le soin. Ce que je veux vous montrer, c'est comment le créer. Ceci la section hors éléments en vedette. Mais bien sûr, nous ne voulons pas que toutes ces icônes soient seulement des ordinateurs et des appareils mobiles. On veut qu'ils soient des icônes différentes, non ? Donc, tout comme dans le cas de nos icônes de médias sociaux, nous pouvons simplement sélectionner et 11 image quand je peux ici. Et rappelez-vous que vous pouvez lui cibler un sous-groupe ou un objet au sein d'un groupe en double-cliquant dessus, comme ça, juste comme ça. Et maintenant, nous pouvons juste frapper, remplacer le document et juste trouver l'image que nous recherchons. Je vais faire la même chose avec le reste du document. Certains vont simplement remplacer le document. Remplacer ce qui était la brochure. Peut-être que ce conseil, hum peut-être qu'il grandit. Pourquoi pas le prochain avec les bâtiments à côté pourrait être l'appareil photo et le dernier pourrait être la carte i d. Juste comme ça. Bien sûr, on a encore besoin de changer leurs couleurs, non ? Je veux dire, nous voulons que ces couleurs soient bien, un peu. Eh bien, exactement. Eh bien, en correspondance avec les autres couleurs avec notre schéma de couleurs. Donc, je ferais ces couleurs aussi bien avec ceux-ci avec ces morceaux de texte, je les ferais en sorte qu'ils aient la bonne couleur. Eh bien, nous sommes bons d'aller avec ces morceaux de texte parce que rappelez-vous que nous avons créé des styles de texte quand nous créons ces textiles, nous avons ajouté la bonne couleur, ce qui est indiqué ici. Mais ces icônes doivent toujours avoir la bonne couleur pour être ajoutées à eux. Donc encore une fois, si nous double-cliquez sur un spécifique incorporé pour documenter cette icône ici et double-cliquez dessus à nouveau, nous pouvons intégrer avec isolé dans une fenêtre séparée. Et maintenant, nous sélectionnons tout ce que nous pouvons à nouveau, assurez-vous juste que nous ajoutons la bonne couleur et le processus est le même qu'il waas avant que je sache que le changement est très léger ici. Je veux dire, vous ne pouvez pas vraiment voir la différence de couleurs. Mais croyez-moi, il y a une différence dans les couleurs. Et pour être presque cohérent au sujet de votre conception, il est bon de savoir que c'est bon de faire. Il est bon de s'assurer que toutes les couleurs sont affichées correctement. Laisse-moi vérifier ce type et ça devrait être bon. Alors laissez-moi juste ajouter rapidement le puits, les bonnes couleurs orteil tous ces gars et je serai de retour avec vous. Donc, une fois que toutes les couleurs sont à elle et que toutes les couleurs sont bien correctes, nous pouvons maintenant simplement sélectionner toutes ces icônes et les regrouper. Maintenant, nous pouvons nous assurer que nous dessinons derrière eux. Donc, je vais activer l'insert derrière le mode de sélection, juste comme ça, attraper l'outil rectangle et juste créer une direction qui s'étirerait sur tout le canevas comme ça. Je pense que ça devrait être bien. Et bien sûr, je vais m'assurer qu'il a le bon champ. Cette fois va être un peu plus sombre. Gris. Juste comme ça Maintenant, la dernière chose à faire serait de s'assurer que tout est bien vivant au centre, juste comme ça. Et bien sûr, si vous voulez, vous pouvez encore faire ça bien, tout cet arrière-plan plus grand si vous le voulez, ou peut-être les icônes juste un peu plus petites. Mais comme je l' ai dit, je vais tout laisser à vous. Je veux que vous expérimentiez avec toutes ces techniques parce que c'est la seule façon dont vous allez être bon pour eux. Donc, la prochaine section que nous allons créer sera notre deuxième section, qui est ce gars juste ici. Et en passant, cela va créer dans cette section nous donnera une autre occasion mais de travailler avec des images à l'intérieur, offensant au concepteur et voir et comment nous pouvons également gérer. Est-ce que les images placent une image à l'intérieur de l'ajustement dans le concepteur, alors restez à l'écoute 44. 11.3, ajouterons la deuxième section d'éléments vedettes: dans cette vidéo, nous allons découvrir un autre aspect important de la manipulation des images à l'intérieur du concepteur d' affinité. Nous allons créer cette deuxième section vedette ici et nous allons commencer . Permettez-moi de ramener les panneaux en créant d'autres couches. Donc, je vais simplement en créer un et le renommer comme présenté à Ce sera bien. Nous allons le ramener en dessous de la vedette une à nouveau. Je vais utiliser l'endroit, l' outil d'image, et je vais choisir cette image ici. Ce que je veux, c'est que je veux que cette image soit bien étirée sur la partie gauche du port de vue . Donc je dois m'assurer qu'il ne passe pas à travers la sixième colonne Collins dans notre grand. Donc c'est 12345 six. Donc je vais m'assurer que ça s'aligne bien avec cette colonne. Juste comme ça. Juste comme ça. Et comme vous pouvez le voir, l'image est recadrée ici à gauche. Par défaut, concepteur d' affinité recadrera tout ce qui touche son bord ou qui traverse son. Donc, si vous êtes familier avec la boutique photo et Si vous êtes familier avec illustrator, vous remarquerez que, eh bien, ces deux que vous savez déjà que ces deux pièces hors logiciel manipulent des images dans ce genre de situation un un peu différemment. Dans Illustrator, vous pouvez placer une image en dehors du tableau d'art et vous déplacer librement dans un magasin de photos. Par défaut, l'image va être collectée par le tableau d'art, pour ainsi dire. Dans Afinitor Designer, vous obtenez le meilleur des deux mondes parce que par défaut, vous concentrez que l'image est coupée à droite est coupée et que l'angle direct est coupé ou que cette section entière obtient un clip. Tout est coupé. Cependant, si vous l'amenez assez loin, vous pouvez le détacher du cannabis de la plinthe elle-même afin que vous puissiez l'avoir à côté. Vous pouvez l'avoir sur le côté, pour ainsi dire. Vous pouvez le faire bien, vous pouvez faire transformé dans votre horaire, vos notes ou quelque chose comme ça. Mais si vous voulez, vous pouvez l'amener sur le design et vous pouvez lui faire les plinthes clip toute votre image entière, et c'est en fait ce que je veux donc je veux le mettre sur la sixième colonne. Donc c'est 12345 et c'est six. Laisse-moi juste m'assurer qu'il est bien aligné, juste comme si peut-être juste un peu plus haut. Je vais juste faire un peu Nagy. Et, bien sûr, la prochaine pièce d'art que nous devons créer est la bonne partie de cette section. Donc, je vais juste attraper l'outil rectangle, et je vais créer un rectangle qui va s'étirer comme ça. Bien sûr, si je le voulais, je pourrais aller l'étirer comme ça. Mais je n'en ai pas besoin. Donc je vais simplement le laisser comme ça et lui donner une bonne couleur. Et maintenant je vais m'assurer que tout est bien aligné comme ça. Et la dernière chose à faire ici serait juste d'ajouter le texte. Encore une fois, je vais saisir l'outil de texte du cadre et créer un cadre de texte. Remplissez-le avec ensuite, et je vais m'assurer qu'il a le bon style de texte, qui serait l'en-tête de section Align ! C' est à gauche, peut-être juste le rendre plus petit, juste comme ça. Je vais m'assurer que c'est bien aligné avec mon peut-être avec cette colonne, juste comme ça. Je vais en parler. Brennan est tombé, clone le vers le bas, en fait, et a changé ceci en style texte en lumière corporelle. Cela peut être prolongé juste un peu, juste comme ça. Ainsi, vous pouvez voir à quel point cela est facile une fois que vous avez la taxe de remplissage et que vous avez les styles de texte, combien il est facile d'ajouter quelques morceaux de taxe et de manipuler le texte avec cela avec les étoiles de texte . Donc, je vais juste prendre les pieds, attraper ces gars, les regrouper et m'assurer qu'ils sont alignés au centre, juste comme ça. Et nous avons créé cette section maintenant affaiblir Juste j'espère que tous ces gars juste pour s'assurer qu'ils sont, ils sont bien mis ensemble. Et on y va. On l'a créé et le deuxième groupe futur de long métrage. Laisse-moi juste accorder où il doit aller, juste comme ça. Et on y va. La prochaine partie, la prochaine section que nous allons créer va être ce post blawg bloquera les extraits de post en fait, juste ici donc cela pourrait être comme dans notre section Blawg et tous ces gars pourraient être bloqués post bloc extraits post et encore. Et cette création de cette section nous donnera une autre occasion. Teoh travailler avec des images d'une autre façon que bien, cette façon donc en fait pourrait être vraiment utile dans votre volonté quotidienne tous les jours. Eh bien, site web un travail de conception, alors restez à l'écoute. 45. Commençons de créer la section du blog: avant de commencer à créer à partir de notre section bloc, nous devons élargir notre tableau d'art un peu plus. Donc je vais m'assurer que ce tableau d'art est toujours sélectionné. Cliquez sur le panneau de cour et étendu encore plus à quelque part ici, peut-être même juste un peu plus. Maintenant, je dois étendre la grille elle-même. Laisse-moi juste trouver la grille. C' est ici que je vais simplement le faire tomber comme ça. Laisse-moi le verrouiller à nouveau et je vais créer une autre couche et l'appeler Ah, bloc. Juste comme ça. Commençons donc par la création de la section accrocher. Donc, je vais lui prendre le textile de cadre et simplement créer un cadre de texte qui va ressembler à quelque chose comme ça. Je vais insérer du texte à l'intérieur, et je vais m'assurer que l'en-tête de section est activé comme ce style. Et je vais m'assurer qu'un centre de ligne est également activé comme ça. Cependant, je veux changer la couleur de ceci de ces titres. Je vais simplement choisir cette couleur plus foncée comme ça maintenant je vais peut-être en faire une seule ligne de texte cette fois et je vais m'assurer qu'elle est alignée au centre de mon tableau d'art. Tout comme cela lorsque nous jetons un coup d'oeil à l'original, vous remarquerez que les images en vedette sont en fait des carrés. Et si vous le souhaitez, vous pouvez saisir l'outil de recadrage factoriel, importer des images et essayer de les recadrer vous pouvez saisir l'outil de recadrage factoriel, importer des images et essayer de les recadrer pour correspondre aux proportions carrées. Mais il y a un moyen plus facile de créer des images carrées à l'intérieur d'un designer de meubles. Alors jetons un coup d'oeil maintenant. Je vais simplement créer rapidement un nouveau document que je ne vais même pas enregistrer. Mais je vais m'assurer qu'il a réellement les proportions carrées, pour ainsi dire que je crée une toile carrée. Je vais m'assurer que le avec par exemple, 200 pixels et la hauteur sont les mêmes, et je vais simplement frapper. Ok, Maintenant, je congee juste attraper l'outil d'image de lieu, et je peux juste naviguer vers le dossier où je garde mes images et commence en images. Donc je vais commencer avec ce gars ici, et je vais le placer, et bien sûr, c'est beaucoup trop grand, donc je dois m'assurer que IHS quoi ? C' est plus petit. Laissez-moi juste zoomer un peu et je maintiens la touche de contrôle enfoncée et je fais marcher beaucoup plus petit. Juste comme ça. Juste comme ça. Et maintenant, comme vous pouvez le voir, ma toile mon bateau agit comme un masque de coupe. Donc je suis sur que Lee va sauver la guerre. Je peux voir à l'intérieur de mon campus. Donc maintenant mon, mon œuvre d'art mesure 250 pixels de large et 250 pixels de haut. Donc maintenant, je peux simplement aller de l'avant et exporter le document entier parce qu'il a les bonnes dimensions et les bonnes proportions a une photo J. Je vais juste ramener la qualité à environ 75% et je peux simplement frapper l'exportation. Et bien sûr, puisque j'ai déjà ces images créées ici, je vais juste nommer souvenir différemment, peut-être comme un juste comme ça et puis B c. D. Etcetera. Donc maintenant, ce que nous pouvons faire est que nous pouvons simplement saisir cette image et choisir remplacer l'image, et nous pouvons maintenant choisir Peut-être ce gars ici et comme vous pouvez le voir, c'est Ah, cette image ressent les mêmes proportions que notre image précédente. Donc, nous n'avons pas à redimensionner quelque chose qui pourrait être comme changer les proportions. Rien de tel. Nous pouvons simplement remplacer une image et ensuite juste peut-être utilisé le contrôle tout plus Shift Plus comme un raccourci pour obtenir les paramètres d'exportation. Et tous les paramètres d'aperçu sont déjà là, donc nous pouvons tout simplement aller de l'avant et cliquer sur Exporter. Renommer ce gars et faire de même va répéter le processus une fois de plus. Donc, nous allons juste saisir sur cette image, comme Donc encore une fois l'exportation de l'ancien décalage de contrôle, voir et entrer remplacer l'image. Peut-être que ce gars en ce moment, vieux changement de contrôle comme export et ce gars va être, je pense juste comme ça remplacer l'image et je suppose que ce sera peut-être peut-être cette image cette fois encore. Ancien changement de contrôle comme. Et il va être et remplacer l'image. Et prenons en pensant à ce type trop d'images, je pense. Mais trop d'images et d'exportation et f comme ça. Maintenant, nous pouvons simplement fermer ce document. Nous n'en avons pas vraiment besoin, mais maintenant nous pouvons simplement saisir l'outil d'image de lieu, et nous pouvons commencer à placer dans les images. Laisse-moi juste trouver mon image comme ça. Et si vous voulez, vous pouvez le rendre plus petit, simplement peut simplement glisser par l'un de ses coins et le rendre plus petit, juste comme ça. Bien sûr, si nous réduisions les documents, nous n'aurions pas à redimensionner cette image. Mais juste pour l'amour de l'apprentissage de techniques spécifiques ici à l'intérieur du concepteur de meubles , faisons simplement le long chemin. Donc maintenant nous avons une image et tout ce que nous avons vraiment à faire est d'ajouter du texte sur le côté, parce que si nous regardons cet original, vous pouvez voir qu'il y a une image et il y a quelques textures, un titre et il y a du texte sur le droit et en fait à la fois le je veux dire, le titre et le texte. Ils ont déjà des textiles spécifiques dans notre bibliothèque, donc vraiment seulement besoin de faire est d'obtenir et de saisir l'outil de texte cadre et juste créer un cadre de texte à un certain texte et à partir des styles de texte choisir titre vedette rendre peut-être justice juste un peu plus petit. Aligner. C' est à gauche et peut-être juste plus petit, comme ça. Et puis il suffit de le cloner vers le bas juste comme ça et étendu un peu changé. Ah, style de texte pour le corps sombre. Juste comme ça. Et c'est ainsi que nous pouvons créer un élément vedette, un extrait de bloc assez dans le concepteur. Nous pouvons, bien sûr, jouer avec une certaine position en juste un peu, puisque nous voulons avoir ah trois éléments bien en vedette sur notre planche de rythme. Un article en vedette ne peut pas dépasser quatre appels, à droite, parce que trois fois quatre est égal à 12. Donc maintenant, nous pouvons simplement saisir l'image, saisir le texte et simplement le rendre plus petit juste comme ça, et nous assurer que le célèbre designer fait tout le poids lourd pour nous. C' est ah rendant l'image plus petite, et c'est ah, ce qui rend le texte du cadre plus petit aussi. Mais maintenant, nous pouvons simplement simplement le mettre ici et étendre le cadre de texte comme si peut-être étendre ce gars aussi bien juste un peu. Et on y va. On a notre cadre. Eh bien, nous avons créé notre image vedette 46. 12.2Voirons les images: Donc, afin de terminer notre une section de messages blogueurs, nous devons grandir rampe notre élément vedette affaiblir le groupe si vous voulez. Et maintenant, il a tout simplement l'orteil les tenant pour contrôler le clone de clé et vers la droite, comme ça. Tout ce que nous avons à faire maintenant, c'est d'appuyer sur le contrôle J pour dupliquer la dernière transformation. Maintenant, si nous sélectionnons tous ces éléments en vedette et les ramenons au pied quelque part ici, nous pouvons maintenant créer six éléments en vedette. Et tout ce que nous avons à faire maintenant est de simplement saisir, double-cliquer sur cette image pour l'attraper et cliquer, Remplacer l'image, trouver l'image, faire la même chose avec ce gars. Ce sera voir l'image, juste comme si ce gars sera l'image D comme ça. Ce sera l'image, et ce sera l'image F. Maintenant, ajoutons simplement un lien simple qui dirait Voir le blawg. Donc je vais attraper le type textile artistique dans, voir la blonde, ce bloc, pas nécessairement dans le journal. Et maintenant, nous pouvons juste ah, avait la vedette de la direction textile à elle. Mais je ne veux pas que ces caractères soient majuscules. Donc, je vais m'assurer que dans le panneau de caractères la fonction majuscule est désactivée comme ça et je vais m'assurer que la couleur est correcte. Juste comme ça, je vais mettre l'été sur la droite. Euh, quelque part ici, ce serait bien. Et bien sûr, maintenant on peut juste s'assurer que tous ces types sont groupés et que tous ces types sont groupés. Maintenant, nous pouvons simplement ajouter l'arrière-plan sous eux afin que nous puissions saisir l'outil rectangle et commencer à dessiner un arrière-plan comme ça. Et bien sûr, nous allons nous assurer qu'il ne fait pas si sombre, bien que ça puisse paraître beau. Et mais il va avoir ce fond Aziz de couleur claire. Juste comme si Maintenant, nous pouvons juste attraper ces deux gars, assurez-vous qu'ils sont alignés au centre correctement étendre ce gars juste un peu pour assurer que c'est il est également mis bien, exactement au milieu de la planche d'art. Et on y va. On a créé la section de bloc. Ensuite, nous allons créer cette section de flux Instagram et nous allons avoir beaucoup de plaisir avec le masquage à l'intérieur d'un ajustement dans le concepteur. abord, nous allons créer un tas de rectangles, puis nous allons les utiliser comme masques de coupure pour créer ce flux Instagram, alors restez à l'écoute. 47. 13.1, Commençons à construire la galerie d'images: notre site web commence à être agréable. Nous avons déjà la section d'en-tête ici, ainsi que les icônes de navigation et de médias sociaux. Nous avons eu l'image du héros avec l'image de fond, la typographie et la navigation du curseur. Ensuite, nous avons eu cette grande section d'articles en vedette ici qui le diviserait en deux sous-sections distinctes. Et puis nous sommes arrivés à cette seconde en vedette un article, la sous-section qui divise en fait l'ensemble de notre site Web en deux moitiés gauche et droite. Et puis nous avons eu notre de notre section blawg. Ensuite, nous allons créer le flux instagram une section pour notre conception. Donc, je vais créer une nouvelle couche comme d'habitude et nous pourrions l'appeler Instagram. Ou nous pourrions simplement l'appeler galerie, juste comme ça, dans le processus de création de la galerie, vous apprendrez à utiliser un masque de coupe à l'intérieur du concepteur de meubles, et il va être la dernière technique hors d'utiliser images à l'intérieur de ce logiciel. Donc, ce que nous voulons ici, c'est des rectangles et des carrés de Siri qui vont être les conteneurs pour nos images. Donc, je vais juste à grand-père l'outil rectangle, et je vais simplement créer. Je vais simplement créer un rectangle qui va être, eh bien, eh bien, quelque chose comme Alors pourquoi pas ? Non, je vais simplement le cloner vers la droite juste comme ça, et peut-être le rendre juste un peu plus petit à quelque chose comme Donc alors je vais le cloner à nouveau vers la droite et l'étendre que clone int à nouveau et étendu encore plus. Et puis je vais simplement attraper ce gars, déplacer dans la droite et le rendre beaucoup plus petit, juste comme si les lampes et va peut-être changer certaines de ces couleurs juste pour qu'il ne semble pas si ennuyeux juste comme ça. Et ce que nous pouvons faire maintenant, c'est affaiblir simplement faire tomber ces gars et les cloner , comme ça, les transformer en groupe et simplement les retourner comme ça. Alors maintenant, notre volonté. Notre Galerie de flux Instagram n'est pas si répétitif. Je vais au groupe ces gars et chacun de ces petits éléments de ces petits rectangles et carrés va être 11 conteneur pour nos images. Donc, ce que nous pouvons faire en ce moment est affaiblir simplement commencer à ajouter des images. Donc je vais utiliser l'outil d'image de lieu, et je vais naviguer vers mon dossier Instagram. J' ai spécifiquement fait ces images juste un peu plus petites, juste pour que vous n'ayez pas à me voir les tailles. Et Justin, ils vont trop sonner pour ouvrir ce gars et le placer comme ça. Donc maintenant vous pouvez voir dans mon plus tard dépenser tout ce que j'ai eu l'image et j'ai tous ces rectangles juste ici. Alors comment orteil pince réellement cette image en utilisant l'un de ces rectangles ? Eh bien, c'est facile et pas facile en même temps. C' est facile parce que vous pouvez simplement le saisir et le déplacer sous le rectangle que vous voulez. Teoh. Les enfants, eux aussi, fonctionneront comme un clip dans un désordre. Disons que ce sera ce type vert ici. Mais comme vous pouvez le voir, parfois vous avez juste à Vous devez simplement glisser et de trouver le bon endroit pour cette technique pour fonctionner. Mais une fois que vous l'avez trouvé, vous pouvez voir que juste là vous pouvez en faire un masque de coupe, juste comme ça, et nous pouvons le déplacer quelque part ici. Ça devrait être bien. Donc encore une fois, je vais m'assurer que je suis sur le bon joueur juste ici et prendre une autre image. Peut-être que ces crayons, comme ça et je vais simplement cliquer comme ça. Et je me demande vraiment que cette image soit coupée par ce rectangle vert. Comme vous pouvez le voir ici, mon panneau de calques, tous ces rectangles ont une miniature différente, et c'est Ah, je pense que c'est une bonne idée de faire ces gars pour leur donner une couleur différente, parce que maintenant vous pouvez voir qu'ils sont différents dans le panneau des calques aussi, il est donc plus facile de distinguer quel rectangle est lequel. Donc je vais déplacer ce type sous ce rectangle, mais comme vous pouvez le voir, il a très bien disparu. C' est parce que ça tombe à l'extérieur de notre masque de coupure. Mais si on le déplace sur notre rectangle, il réapparaît comme par magie. Juste comme ça. Donc maintenant, nous pouvons simplement répéter le processus avec toutes les images restantes, mais je pense que avant de le faire, nous pouvons peut-être changer les couleurs de certains de ces rectangles parce que nous avons quatre angles corrects ping ici, et il pourrait être un peu déroutant dans notre panneau de calques Donc, nous allons juste que juste choisir rapidement quelques couleurs arbitraires. Juste pour que nos rectangles soient bien mieux visibles dans notre panneau de calques. Peut-être que ce noir aussi. Laisse-moi changer sa couleur pour une couleur bleutée comme ça. Et maintenant, nous pouvons vraiment nous assurer que nous sommes sur la bonne couche. Placez une image, peut-être ce gars et disons qu'il va être coupé par ce gars vert juste ici. Laisse-moi juste le trouver dans le panneau des calques. C' est ce type ici, et je vais simplement le déplacer là-bas. Encore une fois, je vais m'assurer que je suis sur la bonne couche et peut-être celle-là et peut-être que nous allons peut-être le mettre en tête sur ce rouge alors encore ici et remonter. Laissez-moi donc faire rapidement ce processus avec toutes les images restantes, et je reviendrai vers vous dans une seconde. Et on y va. Nous avons créé la galerie, le flux instagram créé. Alors rappelez-vous juste que pour créer un masque de coupe, eh bien, eh bien, la façon la plus simple à l'intérieur, si dans le concepteur est juste de placer une image et ensuite il suffit de le mettre dans un récipient comme un ah, bien, rectangle ou un carré ou une silice ou toute forme que vous voulez. Alors maintenant que nous avons cette section de créé, notre prochain ordre d'affaires sera de simplement créer leur pied de page. Et dans notre cas de Footer est bien composé de deux parties avec de celui-ci contre le terrain vert et le plus petit ici dans le fond. C' est en fait une répétition de notre Chapelier. Alors commençons à le faire dans la prochaine vidéo. 48. Créer la première colonne du pied: dans cette vidéo, nous allons commencer à créer notre pied de page. Et comme vous pouvez le voir, j'ai déjà étendu notre art, mais parce qu'il devenait trop petit. Donc, nous allons maintenant créer un autre calque. Laisse-moi juste faire un peu de ménage juste ici. Alors laissez-moi juste rapidement creedy nouvelle couche et appelez-le pied de page juste comme si je vais l'amener ici sous la galerie, et je pense que nous allons commencer par la création de l'arrière-plan parce que notre taxe va être blanche et je viens voulait être facilement visible pour vous. Donc, je vais saisir l'outil rectangle et simplement créer un arrière-plan qui va être aussi grand. Je pense que ça devrait aller. Bien sûr, il doit avoir la bonne couleur. Et peut-être que je vais juste le noter un peu, juste comme ça. Mais je vais faire en ce moment est que je vais Gramp le textile cadre et je vais créer un ami texte qui va être peut-être trois colonnes de large. Juste comme ça et encore. Insérer remplissage, texte hors cours, si vous aviez un ancien client vraiment texte, vous seriez rempli avec ceci. Mais puisque nous ne l'avons pas. Nous sommes simplement peuplés de le remplir avec le texte fictif. Donc, je vais aller de l'avant et choisir les styles de texte et choisir l'en-tête de section et laissez-moi juste le mettre en place juste comme si Peut-être étendu juste un peu comme ça et le mettre un peu jusqu'à trébucher ici. Ça devrait être bien. Bien sûr, si vous ne voulez pas Teoh avoir cette volonté cadres de texte si grand, vous pouvez simplement le rendre plus petit. Ou vous pouvez simplement saisir l'outil de texte de cadre encore et encore et créer un autre cadre de texte et insérer du texte de remplissage parce que cette fois le concepteur offensé vous donnera probablement d'autres mots à l'éditeur que vous pouvez utiliser pour simuler le simulateur qui, eh bien, la tête de chaque section spécifique. Laisse-moi juste effacé. Je vais cloner ce type à quelque part ici assez significativement. Je vais le laisser juste une seconde parce que maintenant je veux attraper le stylo. Je veux m'assurer que j'utilise la course, mais pas sur ce gars pour qu'on ait élu diesel. Je vais encore attraper le mental. Je vais m'assurer que j'ai sur Lee le coup, que je n'ai pas de Phil et que je veux caresser pour être léger. Et je vais créer une ligne qui va gratter de gauche à droite sur ces quatre colonnes. Et je le fais parce que si tu laissais juste ce mot ici, ça aurait l'air vide. Je veux dire, nous allons avoir quelques liens ici à gauche dans une seconde. Et si nous l'avons laissée comme ça et ensuite entré une autre colonne et une autre colonne, parce qu'au total, nous allons avoir trois colonnes. On dirait qu'ils gaspillent beaucoup d'espace. Et cette ligne juste ici agit comme un beau séparateur comme un gentil Philip. Il n'y a pas trop envahissant, mais en même temps, il semble vraiment avoir sa place. Donc maintenant, je vais juste changer ça d'un titre de section à la lumière du corps, juste comme ça, et je vais en faire juste 11 mots comme ça. Et je vais l'évoquer et le cloner peut-être trois fois comme ça et bien sûr , encore une fois, si vous voulez, vous pouvez simplement ajouter un autre cadre de texte et changer le remplissage de texte. Ou vous pouvez simplement taper un autre. Il y a d'autres mots bien, que vous choisissez. Peut-être que des liens vraiment si vous voulez. 49. 13.3Voirons le design et le pied de pied de pied entier: au total. Nous voulons avoir trois colonnes. Si on regarde l'original, c'est trois colonnes. Ce sont ces gars juste là. Donc, je veux m'assurer que chacune de ces colonnes est correctement alignée. C' est le bon appel d'une grille. Mais ce contexte bloque mon point de vue. Donc, je vais m'assurer que ce Phil est sélectionné ici à l'intérieur du panneau des nuanciers que je vais le déposer à quelque chose comme 25%. Peut-être que je vais le ramener dans une seconde. Laisse-moi zoomer un peu. Et maintenant, si j'attrape tous ces types tous ces éléments et que je vais les regrouper maintenant, je peux facilement déplacer ce type vers la gauche et ensuite appuyer sur la touche J pour le cloner vers la droite, comme ça. Et maintenant, nous pouvons simplement saisir notre arrière-plan et ramener l'opacité à 100% dans l'original . Nous avons un peu plus de texte à droite ici sur la droite, Donc quelque chose comme un extrait américain juste ici sur la droite, au lieu de juste des liens ici sur la gauche. Donc, je vais juste cliquer sur ces gars, les supprimer et puis double-cliquer sur ce gars et juste étendu comme ça. Peut-être juste un peu. Juste un peu en haut et peut-être le cloner quelque part ici. Et si nous supprimons simplement les panneaux pendant une seconde et peut-être un peu de zoom arrière, nous pouvons voir que nous avons créé nos colonnes avec les liens et du texte juste ici. Vraiment vieux. Il reste à faire est simplement de s'assurer que tout est bien aligné. Donc nous devons juste regrouper tous ces gars ramener les panneaux, ajouter la chambre à la sélection et juste une ligne, tout à dissenter. Donc, vraiment, la dernière chose que nous devons faire ici est juste d'emprunter l'en-tête Paul de ces gars, juste comme Pete et juste descendre ici, trouver les bonnes trouvailles juste plus tard, badigeonner à l'intérieur et Apportez-le juste un peu vers le bas. Peut-être allons le déplacer vers le haut. Et maintenant ce que nous pourrions faire, c'est que nous pourrions simplement rendre tous ces gars plus petits parce que d'habitude, si vous répétez un pied dans un en-tête, pour ainsi dire, généralement ces gars sont juste plus petits tous ces éléments ou plus petits. Donc je vais faire que ce soit si grand et dire va pour ce menu. Donc je vais simplement le rendre plus petit, juste comme ça. Et bien sûr, nous pouvons simplement enlever notre panneau dur, sortir un peu et nous y allons. Nous avons créé notre design. J' espère vraiment que tu as appris qu'ils le savent aussi. Mais surtout que vous avez aimé créer ce site avec parce que j'espère vraiment que vous l'avez créé avec moi. Si quelque chose ne va pas, suffit de rembobiner la vidéo, regarder à nouveau. Et si quelque chose est encore pas trop clair, vous pouvez toujours simplement poser une question Dans notre forum de discussion, la conception peut être terminée, mais nous n'avons pas fini de travailler avec ont encore quelques choses à faire. On a toujours besoin que Teoh le fasse. Nous allons le préparer pour le livrer au client et le livrer à un développeur Web. Si vous allez travailler avec un si vous n'êtes pas le désir de développer le site vous-même. Mais la conception est faite 50. 14.1Donner le design au client: Lorsque vous avez terminé avec la conception d'une page Web, il est temps de la livrer au client à différentes étapes de la communication avec le client. Vous allez présenter différentes versions légèrement modifiées de la conception, il est donc bon de savoir comment enregistrer et partager rapidement votre travail. En utilisant une chose pour le concepteur, La façon la plus évidente de présenter travailleur serait de sauvegarder la conception et de l'envoyer au client. Dans la plupart des cas, ils n'auront pas offensé concepteur installé sous les ordinateurs, vous devez donc envoyer un fichier qui sera commun, facilement reconnaissable lumière et qui permettra de préserver la qualité de votre design. Le format de fichier le plus simple et le plus infaillible à choisir d'envoyer à vos clients est, bien sûr, J. P G. Enregistrer votre travail en tant que fichier J pic est aussi facile que d'utiliser la commande d'exportation que vous avez confinée sous le menu Fichier. Vraiment, les deux seules options que vous devez faire attention à cette étape est que le curseur de qualité et le sélecteur de zone, comme je l'imaginais avant le meilleur compromis entre la bonne qualité et la petite taille de fichier, est de 70 à 75%. Un inconvénient majeur, bien qu'en utilisant un choix J comme format de fichier, c'est qu'il ne prend pas en charge la transparence. Si votre conception comporte des éléments graphiques qui contiennent de la transparence , choisissez P et G comme format de fichier. PNG prend en charge la transparence, mais comme vous pouvez le voir, il n'y a aucun moyen de contrôler la qualité, ce qui signifie essentiellement le niveau de compression appliqué. Leur dossier. Vet signifie que généralement les fichiers PNG sont plus grands que ceux de J. P G, mais vous savez déjà comment compresser P et G de sorte que la taille de fichier plus grande ne devrait pas être un problème. En ce qui concerne la région, vous voulez exporter Juifs document entier ou un art spécifique à bord si Europhile a plusieurs dessins répartis sur plusieurs tableaux d'art, comme beaucoup de questions des étudiants demandant quels formats père ils devraient livrer à leurs clients. Alors laissez-moi aborder ce problème très rapidement, en supposant que le design est terminé et que le client est heureux et a payé, il est temps de remettre votre design. Les formats de fichiers que vous mettez dans leur colis de livraison doivent inclure tous les formats principaux, tels que P et G. J. Paige. Pdf PSD tiff et dernier mais certainement pas des moindres le fichier source, qui dans ce cas est point un design f. Je recommande d'exporter la conception dans tous ces formats de fichier, puis zip dans les fichiers en remorquage. Un fichier plus petit mais le client est activé. Lee a remporté la fin du processus de livraison de conception. L' autre est le développeur qui va développer le site Web. Je veux dire, si vous êtes le développeur, vous pouvez sauter la prochaine vidéo. Mais si ce n'est pas le cas, laissez-moi vous accompagner à travers le processus de remise du fichier et des ressources différentes au développeur Web suivant. 51. 14.2Donner le fichier au développeur: Si vous êtes prêt à envoyer le conçu à un développeur, il y a quelques choses que vous devez prendre en charge. Tout d'abord, les chances sont qu'un développeur auquel vous allez envoyer le fichier aura Photoshopped tout juste vieux sur son ordinateur photo shop est tellement omniprésent que vous devriez vraiment être du sable fin dans un fichier PSD ou TIFF. Exporter vers n'importe lequel de ces cinq formats est, bien sûr, vers le bas, via la commande expert trouvée dans le menu Fichier. Mais l'exportation vers un PSD, vous pouvez choisir parmi un sur trois presets dont seulement le premier devrait être un sujet de votre préoccupation. Vous pouvez demander au concepteur de conserver une précision maximale ou une capacité de modification maximale. Malheureusement, aucun de ces préréglages ne conservera le texte comme Aditya Ble. Peu importe si vous utilisez le texte de remplissage ou tapez des mots réels. Designer les convertira en pixels. Toutes les couches et la masse doivent être conservées, mais pas le texte vérifiable. Donc c'est juste quelque chose que vous devriez garder à l'esprit. Un autre facteur important à prendre en compte dans ce processus spécifique est l'exportation des ressources que vous avez utilisées dans votre conception. Je ne parle pas de tout ce que vous mettez à l'intérieur du panneau d'actifs, mais des images, icônes et autres éléments graphiques que vous avez utilisés. Il y a essentiellement deux façons d'exporter ces actifs dans le concepteur, alors regardons les deux. Le 1er 1 est génial. Si vous avez juste besoin d'exporter rapidement une ou deux ressources, sélectionnez simplement une icône d'image ou même un morceau de texte comme notre logo et utilisez la commande d'exportation . Choisissez le format de fichier dont vous avez besoin et n'oubliez pas de changer la zone. Option de sélection sans export d'arrière-plan, et vous pouvez exporter tous les éléments que vous voulez très rapidement. Mais un ami au concepteur est livré avec un espace de travail spécial dédié uniquement à l'exportation. C' est ce qu'on appelle la personna d'exportation, et nous allons y jeter un coup d'oeil. 52. 14.3Comment utiliser l'exportation Persona pour exporter les ressources en vrac: l' export persona est un espace de travail tout à fait différent et définit des outils créés uniquement pour exporter vos ressources. Son outil principal est appelé à l'outil de tranche, et il vous permet de créer de petites pièces à partir d'illustrations appelées tranches, et ces tranches peuvent ensuite être transformées en fichiers séparés, grâce au panneau de tranches. Mais il y a un problème majeur avec cet outil. Parfois assez souvent, imaginez vraiment la tranche avec l'objet réel que vous voulez exporter peut être extrêmement difficile. Malheureusement, vous ne pouvez pas simplement sélectionner une image ou tout autre élément, puis choisir l'étole de tranche pour créer une tranche parfaite. Je ne sais pas pour toi, mais pour moi, c'est vraiment frustrant. Mais heureusement, il y a une solution à cela. Si vous prenez simplement l'outil de sélection et le clic droit sur une œuvre d'illustration, vous pouvez sélectionner l'option Créer une tranche et quel concepteur a créé la tranche pour vous et même lui donner un nom correspondant avec son nom dans le panneau des calques et ce qui est encore plus cool . Vous allez sélectionner plusieurs éléments à la fois et créer plusieurs tranches en utilisant la même méthode . Une fois toutes les tranches créées, vous pouvez passer au panneau des tranches et choisir celles qui sont censées être exportées. Il suffit de les cocher ou de les ancrer, puis d'exporter un seul fichier ou tous en même temps. N' oubliez pas de choisir le préréglage d'exportation qui convient à vos besoins. C' est ainsi que vous pouvez utiliser la personnona d'exportation pour enregistrer des ressources uniques de votre conception. Je pense que c'est un excellent moyen d'exporter plusieurs œuvres d'art lorsque vous voulez gagner du temps. 53. Merci d'avoir regardé le cours: Alors félicitations. Vous avez terminé le cours. J' espère vraiment que ça vous a plu et que vous avez beaucoup appris. Je veux dire, j'espère que maintenant vous vous sentez beaucoup plus à l'aise sur l'utilisation d'un designer évanoui pour concevoir des sites Web. Donc, dans le cours, vous avez appris non seulement comment utiliser ses outils et ses techniques pour assembler un site Web, mais aussi les tendances et les inspirations du Web design. Comment choisir les meilleurs fonds et couleurs pour vos sites Web. Où trouver de grandes images, comment travailler avec des icônes, comment travailler avec des couleurs, fondamentalement tous les outils essentiels, choses, techniques et astuces qui devraient vous aider à démarrer et vous permettre de concevoir sites Web manière indépendante. Donc, si vous aimez ce cours, s'il vous plaît donnez-lui un avis honnête. Et j'espère vous voir dans l'un de mes prochains cours ont un beau design. Je m'appelle David Tyminski. 54. 1Découvrons le format Wireframe pour le design: dans les prochaines vidéos, vous allez apprendre à créer ce design de bloc créatif moderne, et nous allons créer à la fois la première page et une seule page de publication. Mais avant de passer au processus de conception réel, regardons le cadre métallique que j'ai créé spécifiquement pour cette conception. Et commençons en fait avec le cadre métallique pour seulement le principal, le devant, une page bloquée. Donc, comme vous pouvez le voir, j'ai commencé avec l'en-tête et vous pouvez voir qu'il y a un logo sur la gauche et un système de navigation sur la droite. Maintenant, l'arrière-plan est sombre parce que je veux la volonté. En fin de compte, je vais créer l'arrière-plan qui va être sombre, et je vais mettre un peu de contraste dans des éléments plus légers comme le logo et le système de navigation. Dans ce contexte sous la bruyère, nous avons eu le héros de la section, et même si dans ce cadre métallique il semble que nous allons juste créer une seule image , en fait, dans le dessin principal, nous allons créer quelque chose. Nous sommes intéressés. Nous allons créer un curseur de carrousel avec les multiples images, bloquer les extraits de post et bien sûr, navigation. En dessous de cela, j'ai décidé de diviser les sections principales en deux sections. Donc, sur la gauche, nous avons obtenu le bloc Boast extrait le bloc vedette principal se vanter extrait. Et à droite, j'ai décidé de créer une barre latérale. Donc d'abord sur la gauche, nous sommes arrivés à l'image future hors du futur pour bloquer la gloire. Et puis on a eu quelques représentations de cadres de femme à partir de la date. Bien sûr, tous ces éléments sont un texte simple. Donc nous avons l'élément de cadre de date sur le bloc Post dirigera son titre. Nous avons obtenu à l'auteur info le nombre de Commons ici. Nous avons eu quelques petites représentations des icônes des médias sociaux que nous avons obtenu à l' extrait de post bloc sur les balises ou les catégories et le bouton lire la suite ici sur la droite. Et tous ces gars, tous ces éléments sont affichés contre un contraste en arrière-plan ce conteneur comme un différent par terre, un plus large alors qu'un fond clair. Et c'est en contraste avec l'ensemble de l'arrière-plan de la page Web du bloc sanguin entier. Comment, en dessous de cela, nous pourrions continuer. Nous pourrions simplement dupliquer cette idée et simplement cloner tout cela, tout ce conteneur entier pour un post de bloc. Sauf mais j'ai décidé que nous pourrions pimenter des choses que le peu nous pourrions diviser ce bloc ici en deux sections séparées en deux colonnes séparées. Cependant, nous dupliquons au poste de bloc. Sauf, mais bien sûr, nous le rendons beaucoup plus petit. Et ces deux colonnes hôte sera 123456 bloquer les extraits de post ensemble. Et en dessous de cela, j'ai décidé de mettre une bouteille ou un lien texte qui naviguerait vers les anciens messages bloqués dans ce site et sur la droite. On a la barre latérale juste ici. Et le cyber est également séparé en Collins spécifiques. Alors peut-être laissez-moi juste zoomer rapidement, zoomer un peu comme ça. Donc on est arrivés à la boîte de recherche juste ici, puis on a le premier. La première section qui est ah, eh bien, qui commence par une petite étiquette juste ici. Ensuite, nous avons eu le texte de l'image et quelques cycles de médias sociaux. Et toute cette section, ce fragment de volonté va être notre section à propos de moi. Ensuite, on a eu une autre étiquette et du texte. Ensuite, nous avons quelque chose comme un bloc le plus populaire ou tendance vante. Nous avons donc une image en vedette sur la gauche sur le bloc. Dispose du titre à droite, de la date et du testament, la date en haut et de la catégorie ou des tags ici en bas. Et comme vous pouvez le voir, ces petits conteneurs sont séparés par une ligne de séparation. Mais pas tous. Le dernier n'a pas cette ligne, parce qu'ici on a une autre étiquette. Donc, cette ligne de séparation ici aurait l'air redondante. Je ne pense pas qu'on en ait besoin ici. Alors et puis, bien sûr, nous avons juste une étiquette simple et quelques images la et cette section. J' ai décidé de le faire comme un conteneur pour certaines annonces. Peut-être alors quand tout ce qui est fait, nous pouvons passer au pied de page hors cours si vous le voulez, vous pourriez peut-être ajouter quelques flux Instagram juste ici. Mais depuis que nous avons créé ce flux instagram dans notre conception précédente, j'ai pensé que je laisserais cette décision à vous. Je veux dire, si vous voulez créer ce conteneur de flux Instagram ici, vous savez déjà comment le faire, et vous pouvez inclure dans ce fil à partir de cette conception. J' ai donc décidé de passer directement au pied de page. Et comme vous pouvez le voir, je l'ai séparé en trois colonnes avec les mêmes étiquettes que nous pouvons voir dans notre barre latérale juste ici. Et bien sûr, nous avons des liens sur le texte ici, et je l'ai répété l'en-tête. Mais bien sûr, c'est qui gonflent, plus petit, beaucoup plus petit que le principal heller sur le dessus. Et, bien sûr, sur la base de ce cadre métallique, nous allons créer cette conception. Mais je pense que nous allons le décomposer et dans la prochaine vidéo. 55. 2Découvrons le design de blog: Donc, dans cette vidéo, nous allons jeter un oeil à leur conception principale. Maintenant, nous savons à quoi ressemble le cadre métallique. Alors maintenant, il est temps de jeter un oeil à la conception principale. À quoi ressemblera l'ensemble du concept, basé sur ce cadre métallique. Encore une fois, dans le coin supérieur gauche de notre chapelier, nous avons eu le local, qui est un texte simple et simple sur la droite. On a le système de navigation avec les icônes des réseaux sociaux juste ici. C' est donc un concept assez, assez basique, mais j'aime cette approche minimaliste quand il s'agit d'en-têtes. Ensuite, on a eu l'image du héros. Et comme vous pouvez le voir, nous avons créé un carrousel. Le curseur de type, un curseur de carrousel, est un curseur qui héberge non seulement une image, une grande image dépenser sur l'ensemble du port de vue, mais un sérieux off, des images plus petites que quand ? Je veux dire que lorsque vous cliquez dessus, les boutons de navigation se déplacent simplement vers la gauche ou vers la droite, comme un carrousel. Donc, chacun d'entre eux, comme des conteneurs pour les images, a son propre titre unique ici. Et bien sûr, nous avons ces boutons de navigation juste ici et si vous vous demandez pourquoi ces gars sont blancs , ce titre, ce titre et cette flèche et ce titre et cette flèche bien, le Bagram pour cette flèche et sont je suppose que c'est comme une couleur rose foncé. Eh bien, c'est juste parce que je suis en train d'indiquer ce que je voudrais que ces liens ressemblent à chaque fois que vous passez la souris sur cette flèche, je veux que l'arrière-plan devienne rose. Et chaque fois que je survolais ce titre, je voulais me tourner vers le rose. Il en va de même pour cette maison. Eh bien, pour le lien de la page actuelle juste ici. Mais ce logo dû à la photo va être, eh bien, eh bien, rose tout le temps. Ensuite, nous avons, bien sûr, nos sections. Donc, nous avons eu l'image principale principale de l'image en vedette juste ici. Les données, le titre de la publication du bloc. Nous sommes arrivés à l'auteur info, commentaires, icônes, texte, quelques tags et le bouton Lire la suite ici. Nous allons déjà vu dans la partie du cadre de fil quoi ? Ce que tous ces conteneurs devraient contenir. Mais remarquez que certains d'entre eux sont de la même couleur. Je veux dire, cette date de régime est de la même couleur que les arcs de bloc. Ceci par texte est le même. Le choléra. L' extrait de texte est de la même couleur que nos couleurs pour eux, les icônes des médias sociaux. Cependant, tous ces liens ici les commentaires, les tags de voyage mode de vie photo sont écrits dans une couleur différente. C' est la couleur principale des liens à l'intérieur de ces conteneurs. Cependant, quand vous les survolez, ils ont dit qu'ils étaient censés se transformer en rose comme ces gars ici. C' est pourquoi ils sont écrits dans une couleur différente. Mais quand vous allez à ces le poste, sauf que vous considérez, ont décidé juste de laisser les couleurs de liens de base qui sont verts, qui est vert dans ce cas. Et bien sûr, tous ces morceaux de textes sont réduits, donc ils sont plus petits que le principal, le tex principal ici. Et bien sûr, nous avons deux colonnes et nous avons des photos différentes, et nous avons six éléments ensemble. Maintenant, en ce qui concerne le côté de Margo, vous pouvez voir qu'on a une simple loupe ici que ce conteneur a une bordure simple et simple , , et j'ai la recherche de texte ici à l'intérieur, et on est arrivés aux étiquettes. Ensuite, nous avons eu le texte photo qui est, euh, aligné sur les armes du centre Social Media I. Et puis il y a le texte que nous venons de voir. Bien sûr, l'étiquette et le texte. Ce texte n'est pas aligné au centre, mais à gauche. Et puis nous avons eu les vantations de bloc les plus populaires. Donc, cette image en vedette. Il s'étend de haut en bas. Mais bien sûr, il est juste pris environ 1/3 de l'ensemble du conteneur. On a la date sur le titre et la catégorie ici, et on a 1234 conteneurs. Et puis on pourrait juste avoir un conteneur, 40 annonces. Et bien sûr, ce ne sont que des images simples. Et puis, bien sûr, on a eu la nourriture. Ou laissez-moi juste zoomer dessus. On a le pied de page avec quelques jambes. C' est juste un texte d'espace réservé. Et bien sûr que j'ai été va dupliquer. Mais, euh, mais a réduit l'en-tête de haut en bas ici vers le bas. Donc on a le logo. On a la navigation et les médias sociaux que j'ai. Alors on y va. C' est à ça que va ressembler notre design de base. Mais, bien sûr, nous avons encore besoin de T o. Jetez un oeil à ce que seront nos actifs aux couleurs, les fonds, les images que nous allons utiliser pour faire ce design arriver. Mais je pense qu'on devrait le faire dans la prochaine vidéo. 56. 3Invoquanten de nos ressources: Donc, pour que ce design se produise, nous allons avoir besoin de trois choses. Nous allons avoir besoin de colliers, images et de typographie. Maintenant, les couleurs de cette forêt vont. On est dans le panneau des échantillons que tout le groupe a créé ici. Donc on a 12345 couleurs. Nous n'aurons pas besoin de plus. Nous sommes arrivés à cette couleur très pâle, très pâle, très pâle, grande qui est en fait la couleur de notre fond principal. C' est ce type là. On est arrivés à l'accent en couleur blanche. C' est la couleur de ces liens les liens de navigation, ces icônes de médias sociaux, bien sûr, les arrière-plans des conteneurs, une houle. Ensuite, nous sommes arrivés à la couleur typographique principale, qui est cette très, couleur gris très,très foncé. Ce n'est pas noir, c'est très pour un noir. Et puis nous sommes arrivés à ces deux accent principal en couleurs, qui est cette banque ce rose foncé et cette couleur verte. Et j'ai créé toute cette palette. Ils utilisent des refroidisseurs qui co cet outil qui étaient déjà bien, nous avons appris l'une des vidéos précédentes et j'ai commencé avec juste un je savais que je voulais créer un plus sombre va mentir à grand fond et je voulais mettre quelques conteneurs blancs contre cela arrière-plan. Donc, j'ai d'abord simplement tapé la valeur pour cette grande couleur, la couleur blanche. Et puis je viens d'ajouter cette couleur grise très, très foncée. Et puis je laisse juste l'algorithme pour venir avec ces deux accent en couleurs pour moi. Bien sûr, on a beaucoup d'images ici. Et ils le sont. Ils vont tous vous être fournis dans un dossier séparé pour que vous puissiez travailler avec moi. Et comme vous pouvez le voir, il y a beaucoup de ces images et elles sont indifférentes aux tailles et dans différents conteneurs. Et ce type de conception nous permettra de travailler à nouveau avec les images de mise à l'intérieur de conteneurs spécifiques comme des conteneurs carrés, des conteneurs rectangulaires. Je pense donc qu'il est essentiel de savoir comment travailler en douceur avec des images à l'intérieur d'un cadre. Le concepteur, quand vous concevez des sites Web et laissez-moi juste vous dire que nous n'allons pas utiliser de masques , allait utiliser une autre technique de travailler avec des images à l'intérieur d'un ami au concepteur, qui pourrait être un peu plus facile pour vous. Oh, il pourrait déjà ne pas se fatiguer. En fin de compte, vous devez décider quelle technique est la plus facile pour vous, que soit le masquage ou cette autre technique encore un peu mystérieuse. Et une fois que nous serons bien après que vous connaissiez ces deux techniques de masquage et l' autre, vous serez en mesure de décider lequel fonctionne le mieux pour vous. Donc cette typographie forestière va. J' ai décidé d'aller avec la famille Roboto Superfund. Maintenant ça s'appelle Super Family parce que vous obtenez différentes polices dans cette famille et différents fonds avec ces familles,par exemple, par exemple, le logo juste ici et là Block post titres sont écrits en utilisant la firme, le Roboto Condensed et sa version audacieuse du fonds. Mais le texte principal du corps est écrit est écrit en utilisant Roboto régulier. Mais les liens ici sont écrits en utilisant Roboto, italique et, bien sûr, la lire plus de texte ici et ils utilisent Roboto bold qui condensé mais roboto bold et tous ces gars ont des textiles de texte séparés ici. Cependant, je pense que dans ce cas, nous ne créerons pas d'abord des textiles. Mais je pense que nous allons les créer en dernier. Je veux dire, avec des dessins comme celui-ci. C' est quoi ? Jusqu' à ce que ce soit fini, c'est toujours un progrès de travail, non ? Vous pourriez donc changer d'avis de temps en temps ou plus souvent que de temps en temps et quant à ce que vos fonds devraient ressembler. Donc, jusqu'à ce que vous soyez complètement décidés, disons, sur , disons, les titres ou les liens, vous ne devriez pas. Je pense que peut-être pas. Tu ne devrais pas. Mais c'est une bonne idée. Peut être d'attendre que vous ayez le concept tout compris et puis juste pour créer le textile. Et je pense que c'est l'approche que nous allons adopter dans ce design parce que travailler avec des textiles dans un ami à designer peut être un peu difficile. Donc peut-être que l'utilisation de cette façon vous aidera à exploiter suffisamment les textiles dans le designer et vous permettra de travailler avec eux un peu plus efficacement. Ok, donc on a recouvert le cadre métallique. Nous avons décomposé cette conception et nous savons quels actifs nous allons avoir besoin. Ne vous souvenez pas non plus du souvenir N'oubliez pas que nous avons les sections mises contre des couches séparées. Nous avons donc la couche d'en-tête. Le héros a superposé la barre latérale de la couche de section, pied de page. Et, bien sûr, tout ce design est affiché est mis contre une grille que vous pouvez voir ici . Donc je pense qu'on a tout bien couvert. Ne soyez pas surpris si, de temps en temps, je vais faire référence soit au cadre métallique ou de préférence cette conception principale, parce que je ne veux pas un je veux passer trop de temps à me regarder, à essayer de comprendre ce qu'était l'original. Pardonnez-moi si je juste de temps en temps, il suffit de jeter un coup d'oeil à l'original Swyche et donc je peux vous montrer les techniques nécessaires pour créer ce design un peu plus rapidement sans essayer de comprendre la taille du téléphone ou la couleur. Donc, sans plus tarder, plongons en fait directement dans le processus de conception principal. Et commençons par la création du Chapelier 57. 4Comment créer le logo et le vaisseau: Ainsi, comme vous pouvez le voir, nous allons créer notre design et basé sur la grille de 12 colonnes que nous avons utilisée auparavant. Donc, si vous voulez travailler avec moi, vous pouvez simplement télécharger les mêmes cinq que vous pourriez télécharger lorsque nous avons créé notre conception précédente et simplement travailler en utilisant ce fichier. Mais avant de commencer à concevoir quoi que ce soit, je vais créer une couche pour notre en-tête. Donc, dans le panneau Calques, je vais simplement cliquer sur le nouveau calque. Je viens et je vais l'appeler. Header l'a juste comme si la tête comme ça, et je vais la déplacer sous la grille. Donc, je vais commencer par créer le terrain du sac pour l'en-tête et laissez-moi juste rapidement jeter un oeil à l'original pour vérifier les dimensions de cet arrière-plan. Et comme vous pouvez le voir dans le panneau de transformation, il fait 1920 pixels de large et il mesure 100 pixels de haut. Et bien sûr, il fait 1920 pixels de large parce que c'est le port de vue hors de notre page Web. Donc ce que je vais faire, c'est que je vais m'assurer que, bien sûr, je suis sur la couche d'en-tête a attrapé l'outil rectangle. Créer un rectangle qui va avoir, comme, comme, très arbitraire dans les dimensions du monde. Parce que maintenant je vais m'assurer que mon point de référence ici est réglé dans ce coin supérieur gauche afin que je puisse le déplacer. Teoh en haut à gauche de ma page web. Donc, je vais simplement entrer zéro pour la valeur X et zéro pour la nature. Pourquoi la valeur Juste comme ça Pour le faire accroché dans ce coin supérieur gauche juste ici. Et maintenant, je vais simplement y aller Teoh. Eh bien, je vais m'assurer que cette option de lien n'est pas cochée. Donc je vais taper en 1920 et je vais taper 100 pour la hauteur, juste comme ça. Et on y va. Nous avons créé notre expérience. Bien sûr, nous devons toujours lui donner une bonne couleur de remplissage. Je vais donc cliquer sur cette nuance plus foncée ici et maintenant nous pouvons commencer à créer notre logo puits. Donc encore une fois, je vais me référer à mon original. Je veux juste voir la taille de ce devant comme vous pouvez le voir c'est 42 points comme ça , et c'est bien sûr, écrit dans la réfutation condensée, audacieuse. Et en passant, si vous n'avez pas ce Roboto Super Family installé sur votre système, vous devrez aller sur les fonds Google Web et simplement téléchargé et à partir de là. Mais nous avons déjà discuté de la façon de le faire. Donc je pense que vous ne devriez pas avoir de problèmes et ils se contentent de télécharger sur ce front et l'installer. Insider Afinitor designer. Donc je vais juste prendre le textile artistique, juste comme si bien sûr que je vais m'assurer que je suis sur la bonne couche. Donc, avec le textile artistique, je vais simplement cliquer et faire glisser pour commencer à créer du texte. Je vais mettre l'avant sur Roboto condensé comme ça, et je vais choisir sa version audacieuse. Et je vais taper 42 pour sa taille et changer la couleur pour ce, euh, pâle retour de bienvenue d'une couleur rose foncé comme ça. Et je vais taper des ennemis remorqués comme ça. Et je vais simplement y aller et bien sûr que je dois le déplacer vers la bonne couche, et je vais simplement le déplacer jusqu'à ce qu'il corresponde à leur mon, euh bien, pourrait grain. Et bien sûr, nous pouvons simplement sélectionner ces deux gars pour nous assurer que ce logo ah est assis exactement au milieu de notre arrière-plan. Et je vais simplement aller à la ligne du panneau d'arrangement et choisir ce gars juste ici . C' est un métal de ligne comme ça. Appuyez sur OK Et nous avons fini avec le logo. Donc, ensuite, nous créerions ce sera ce système de navigation avec ce bois, le puits sera articles de médias sociaux. Laisse-moi vérifier la hauteur de ce gars. C' est ah Roboto moyen 16 points, comme vous pouvez le voir ici. Donc, je vais simplement récupérer le textile artistique à nouveau. Cliquez et faites glisser. Je vais changer la couleur en blanc que je vais taper et peut-être à la maison comme alors Laisse-moi juste la déplacer contre la chambre plus sombre. Donc, vous concédez. Et donc c'était roboto un roboto moyen roboto huit sur la hauteur était 16 Je crois. Laisse-moi vérifier ça encore une fois. 16 et ah, Ce que nous voulons faire, c'est que nous voulons nous assurer que tous ces liens de navigation sont écrits en majuscules Onley. Donc, je vais aller dans le panneau des personnages et je vais choisir cette option ici qui dit toutes les majuscules. Et si je clique juste dessus, vous pouvez voir que toutes ces lettres sont changées pour true à leurs versions majuscules . Mais pour autant que je me souvienne, notre lien d'accueil a été écrit en utilisant cette couleur rose, qui indique qu'il s'agit en fait de la page active. Donc je vais le changer pour la couleur rose, juste comme ça Maintenant, la seule chose à faire ici est de simplement dupliquer ce gars à droite, et je maintiens la droite, touche de contrôle et la touche Maj enfoncée pour contraindre le mouvement comme donc. Et je vais changer la couleur de l'orteil blanc, et je vais taper quelque chose de différent, par exemple, peut-être la galerie et remarquer que nous n'avons pas à appuyer sur le verrouillage des majuscules ni sur la touche Maj pour les rendre ces lettres vieux veau. Parce qu'ils le sont, Ils ont toujours assigné les anciens attributs de majuscules ici. Cela a été dit, juste une seconde pour aller dans le panneau des personnages. Maintenant, nous pouvons simplement me laisser fermer. Maintenant, on peut tout simplement Cologne ce gars à droite et ah, taper et peut-être mon équipement et peut-être un autre qui va juste être, euh disons peut-être un contact juste comme ça. Maintenant, nous avons la navigation. Ah, système de navigation que j'ai créé. Je vais les déplacer un peu sur le côté, juste comme ça. Peut-être tous, mais plus loin sur le côté. Ce que nous devons faire maintenant, c'est que nous devons ajouter ces gars ici, ces icônes de médias sociaux juste ici. Donc, pour cela, nous allons utiliser le commandement de la police. Et je pense que nous pourrions le faire dans la prochaine vidéo parce que nous allons faire du montage avec nos icônes de médias sociaux. Donc je pense que ce serait mieux si nous le faisions dans la prochaine vidéo 58. 5 :: Donc, avant de commencer à placer dans sur les icônes des médias sociaux, laissez-moi juste vérifier rapidement à quel point ils sont grands. Laisse-moi juste zoomer un peu et laisse-moi juste cliquer sur ce gars juste ici. C' est Ah. Disons que c'est 16 pixels juste ici. Donc, ce que je vais faire, c'est que je vais cliquer sur l'outil Image, et je vais naviguer vers l'endroit où je garde mes icônes de médias sociaux. Et je vais commencer par l'icône Twitter et je vais simplement ouvrir et je vais la placer quelque part ici. Bien sûr, c'est beaucoup trop grand, donc je vais le rendre plus petit cette fois. Je vais m'assurer que l'option de rapport d'aspect de verrouillage est prise. Et je vais taper 16 pour rendre ce type bien plus petit. Mais bien sûr, la couleur de cette icône n'est la couleur de cette icône n'est pas bonne. Il est censé être blanc, mais comme nous le savons déjà, nous pouvons simplement le changer dans notre panneau d'outils. Nous devons aller à l'option de document ajouté, et nous devons simplement choisir la couleur blanche comme ça et fermer ce gars afin que nous puissions maintenant avoir Ah afin que nous puissions maintenant avoir à cette icône des couleurs incorrectes. Ensuite, je peux tout simplement Cologne ce gars à droite aller remplacer le document et choisir peut-être Facebook. Mais encore une fois, comme vous pouvez le voir, nous devons à nouveau changer la couleur. Je souhaite vraiment un ami au designer. Eh bien, je suppose que ce n'est pas une boîte. Donc, je peux dire que j'aimerais vraiment qu'ils corrigent ce bug, mais je pense que ce serait mieux s'ils viennent d'ajouter dysfonctionnel que si je suis cologne dans ce gars ce document incorporé je cloner ses attributs aussi bien afin qu'ils puissent être un clone. Comme dans ce cas, le collier pourrait également être cloné sur l'objet cloné. Mais comme ce n'est pas le cas, nous devons encore aller ajouter un document, cliquer sur le blanc, une nuance, puis dupliquer le Facebook. Je viens à droite dupliqué laissez-moi juste dupliqué, juste comme si encore une fois remplacé le document avec le logo Instagram, a ajouté le document et encore cloné ce gars sélectionné et vêtements à droite. Remplacez-le par un logo d'arrêt de pincement édité ed, couleur blanche. Et on y va. On a créé le concert des yeux. Donc la dernière chose à faire ici serait d'aligner tout bien. Ce que je veux, c'est que je veux des distances égales entre tous ces gars, pas seulement les liens textuels, mais aussi avec les Aiken. Donc ce que je vais faire, c'est que je vais d'abord grandir ce logo Pinterest, j'Instagram, Facebook, Twitter et tous ces gars. Et je vais m'assurer qu'ils sont alignés correctement pour dissenter au milieu , juste comme maintenant je pourrais les déplacer vers la droite et les aligner avec mon avec ma grille. Il suffit de zoomer un peu, juste comme ça. Ça devrait être bien. Donc ce que je veux faire maintenant, c'est que je veux m'assurer que la distance entre tous ces gars se calme égale. Donc, non seulement entre les liens de texte, mais aussi entre le texte lings et les icônes des médias sociaux. Donc ce que je vais faire, c'est que je vais simplement déplacer le clic sur tous ces éléments pour les sélectionner . Mais juste ces gars et les icônes des médias sociaux aussi, juste comme ça. Et je vais y aller. Laisse-moi le déplacer un peu vers le bas pour que tu puisses tout voir mieux. Donc, je vais aller à ce panneau de plage et à partir de l'option aligner horizontalement, je vais choisir l'espace horizontalement. Et si vous voulez le laisser, comme distribue aussi, eh bien, vous pouvez le faire. Mais si vous voulez vous assurer que la distance entre tous ces éléments est exactement celle que vous voulez, vous pouvez simplement vérifier, commander, distribuer et juste jouer avec ce curseur ici. Peut-être. Voyons quelque chose autour de 20 ou 24 pixels. Je suppose que cela devrait le faire maintenant nous pouvons juste déplacer ces gars vers la droite et s'assurer qu'ils sont bien alignés avec notre grille. Peut-être juste un peu à droite. Quelque chose comme ça. Et on pourrait les regrouper par le Président Contrôle G sur notre clavier. Alors maintenant que tous ces gars sont créés des lignées, zoom arrière, Tous ces gars sont créés. Nous pouvons à nouveau nous assurer que tout est bien aligné. Je suppose que je dois regrouper ces gars comme ça, Control G. Donc nous pouvons juste nous assurer qu'ils sont bien alignés comme ça, et qu'ils sont correctement alignés par rapport à l'arrière-plan, juste comme ça. Alors on y va. On a créé ce Chapelier. Si j'appuie simplement sur l'onglet, nous pouvons voir notre site Web. Je suppose que ce type a bougé un peu. Nous pouvons voir notre site web dans toute sa beauté. Eh bien, site Web, c'est juste que c'est juste notre en-tête. On peut rapidement se débarrasser de la grille comme ça. Pour qu'on puisse voir. Et notre et il y avait des guides pour que nous puissions tout voir mieux. Donc c'est ce que notre et c'est à quoi ressemble notre en-tête. Je pense que ça a l'air minimaliste, mais en même temps, cette couleur rose est que dans un peu. Ah, eh bien, ça rend tout cet en-tête un peu plus vivant. Donc, le prochain ordre de choses serait de créer notre curseur. Laissez-moi juste faire un zoom arrière pour créer notre curseur pour créer ces photos pour créer ces blocs. Eh bien, ils mènent en fait à un poste de bloc. Donc je suppose qu'on pourrait dire bloquer les titres de poste et cette navigation. Mais nous allons le faire dans la prochaine vidéo 59. 6, Jetons des premières images: comme d'habitude, nous allons commencer à créer la section héros en créant une couche inappropriée pour cette section. Donc encore une fois, je vais simplement ajouter un nouveau calque et ah, nommez-le. Ah, héros. Et je vais le déplacer sous la couche d'en-tête comme ça. Donc, ce que je vais faire à nouveau, c'est que je vais simplement saisir l'outil rectangle et je veux rendre aussi péage que le site lui-même. Et je vais simplement le positionner correctement, juste comme ça. Parce que ce que nous allons faire maintenant, c'est que nous allons créer trois conteneurs distincts pour ces images. Eso pour avoir trois conteneurs séparés, nous devons diviser ce rectangle ici. Laissez-moi juste pour que les hommes jamais si légèrement juste comme ça. Donc, à ce stade, la hauteur n'est pas importante. Ce sera dans une seconde. Mais pour l'instant, ce qui est important, c'est que notre rectangle se répand sur notre page Web à travers notre port de vue . Donc, puisque nous voulons avoir trois conteneurs séparés, nous devons diviser notre rectangle par trois. Donc là-dedans et je vais tout simplement d'abord, je vais m'assurer que je suis divisé par le point d'ancrage gauche de l'arrêt. Donc ce que je vais faire, c'est que je vais simplement taper ah slash trois, qui va diviser le rectangle un par trois, juste comme ça. Et comme vous pouvez le voir, c'est avec ses 640 pixels comme ça. Donc, si je veux que ce conteneur soit un carré comme ici que je dois simplement faire la hauteur égale à la avec. Donc, dans ce cas, 640 comme maintenant, une autre chose qui mérite d'être notée est que les principales distances entre les sections ou à l'intérieur sections et entre les éléments principaux hors sections sont généralement de 25 pixels ou le double de ce qui est de 50 pixels. Donc la distance entre ces conteneurs est cet écart ici. Cette marge est de 25 pixels, et la marge entre ce curseur et l'heller est également de 25 pixels. Donc maintenant, je vais simplement déplacer ce gars vers le haut les snaps avec l'en-tête et pour la valeur y à nouveau, je vais m'assurer que mon point de référence il se place bien en haut juste ici. Et je vais tout simplement aller aux pieds. Ajoutez 25 comme ça. Mais je vais déplacer ce gars 25 pixels vers la gauche parce que je veux créer ce genre de carrousel affecté ce que les conteneurs sont en fait sortir hors du port de vue. Encore une fois, je vais déplacer ce gars vers le puits, je vais le déplacer vers la gauche de 25 pixels. Donc, pour la valeur X, je vais simplement taper un moins 25 comme ça. Et puis je vais simplement cloner ce type vers la droite jusqu'à ce qu'il s'accroche avec l'original. Et je vais Teoh, ajouter 25 comme ça. Et puis je vais cloner ce gars sur les bons clichés avec l'original que je vais ajouter 25 comme ça. Donc maintenant, nous avons trois conteneurs séparés qui bien, le conteneur gauche et le conteneur droit sont un peu comme sortir de notre port de vue et , bien sûr, eux au milieu. On est arrivés à tout ce conteneur carré. Bien sûr, tous ces types sont des conteneurs carrés, mais ceux-ci peuvent ressembler à un rectangle. Puisque nous pouvons voir cet écart de 25 pixels juste ici. Donc encore une fois, si je m'assure simplement que ces gars sont sur le bon calque sur le calque de héros, je peux maintenant en utiliser un autre. Une autre astuce à faire pour que ces gars se comportent comme ils sont des conteneurs d'image. Donc, si je tourne juste dans mon panneau de calques, vous pouvez voir que j'ai tous ces rectangles juste ici. Ok, Donc j'ai rapidement fait en sorte que mes rectangles soient sur le bon joueur que les bons calques sur la droite s'ennuient, et je pourrais m'assurer qu'ils sont affichés dans la bonne direction. Alors laissez-moi juste vérifier rapidement. Donc je vais déplacer ce type vers le bas. Donc maintenant tous ces rectangles anciens alors que ces carrés peuvent fonctionner comme nos conteneurs d'image et c'est aussi facile que de simplement sélectionner un et puis de s'assurer que l'insertion à l'intérieur option Sélection est cochée comme ça Et puis si nous allons simplement presse-agrumes l' image de lieu à ou aller dans le menu de fichier, puis placer naviguer à l'endroit où nous gardons nos images maintenant affaiblir simplement, il suffit choisir une image Peut-être. Peut-être cette image de café. Pourquoi pas ? Et maintenant, si nous cliquons, cette image va être placée à l'intérieur de ce conteneur rouge. Cet angle en rack sera carré dans notre cas, et maintenant nous pouvons simplement le rendre juste un peu plus petit. On peut. Vous pouvez le déplacer si nous le voulons. Juste comme ça. Donc encore. Sélectionnez le rectangle. Assurez-vous que cette image d'insertion s'insère à l'intérieur. L' option de sélection est cochée. Placez une image. Naviguez simplement vers le dossier où vous conservez vos images. Et peut-être que cette fois je vais choisir, hum, quelque chose de plus contrasté. E. Ou peut-être pas. Peut-être. Laissez-nous rester dans le bar et le thème du bar. Je vais aller avec le gâteau clic comme, alors assurez-vous que c'est juste un peu plus grand. Peut-être que comme ça, ça devrait aller. Et la dernière encore, Selector. Le rectangle recueilli à l'intérieur. Insérer l'option de sélection à l'intérieur et placer l'image Et peut-être cette fois le sandwich. Puisque nous sommes dans un bar, restons dans le bar, le thème du bar , comme ça. Alors, voilà. C' est ainsi que vous pouvez simplement utiliser le plus simple. Le plus simple dit vraiment de créer des conteneurs d'image joliment à la recherche. Donc on a l'en-tête qu'on a. Nous sommes arrivés à cette section héros sera presque terminé. On lui a ajouté les images. Nous avons créé les rectangles, puis nous les avons transformés en porte-images. Mais bien sûr, ce dont nous avons encore besoin, ce n'est pas la navigation qui sera les flèches à gauche et à droite et, bien sûr, le bloc affiche les titres. Mais commençons à faire tout cela dans la prochaine vidéo. 60. 7Voici-ajouter-nous l'ombre aux images: Donc, je vais commencer à créer ah, les morceaux restants de notre curseur de carrousel en vérifiant d'abord la police que j'ai ajoutée au design original. Donc, comme vous pouvez le voir, il est écrit en utilisant la version condensée et gras du fonds Roboto , et il est fixé à 46 points. Et, bien sûr, au milieu. On n'est pas à utiliser dans le blanc plein mais le reconnaissant parce qu'il indique que c'est que c' est être, comme, comme, Mettre en évidence cela, qu' il est dans le lien actif en ce moment. Donc, de retour avec notre design, je vais simplement saisir le textile de cadre comme ça. Bien sûr, je vais m'assurer que je suis sur le bon calque et je vais simplement cliquer et faire glisser comme ça, et je vais mettre l'avant sur Roboto Condensed et je vais choisir. C' est bien sûr, une version audacieuse. Assurez-vous qu'il est réglé sur 46. Je crois que c'était 46. Je vais le rendre blanc, et maintenant je vais simplement choisir le texte d'insertion de texte comme ça, et je vais l'aligner au centre. Je vais rendre ce cadre un peu plus petit, donc nous ne sommes plus qu'avec trois lignes de texte, juste comme si cela suffit de le déplacer un peu vers la droite et je vais le déplacer vers l'été. Ici, ce serait le trouver. Donc maintenant je vais déplacer ce gars vers la droite juste comme ça, et ce gars à droite aussi, juste comme maintenant je vais tourner ce gars vers ce morceau de texte pour réfléchir, et il est déjà un peu plus visible, juste comme ça. Mais comme vous pouvez le voir, puisque nous avons cloné ce premier texte de remplissage une fois et deux fois vers la droite, eh bien, c'est toujours le même texte, non ? Mais nous pouvons rapidement le changer simplement en sélectionnant d'abord un morceau de texte de remplissage, puis en allant dans le menu de texte, insérer le remplissage, le texte. Il suffit de cliquer dessus pour le sélectionner, puis de le sélectionner une fois de plus afin de coller un autre morceau de texte. Donc, encore une fois de sélectionner, insérer du texte de remplissage, puis insérer du texte de remplissage à nouveau. Donc c'est ah, un autre morceau de texte. moment, cependant, il est probable que de temps en temps votre texte ne soit pas trop visible sur un certain fond sur une certaine image. Les banquiers comme dans ce cas, si vous deviez le laisser blanc, vous pouvez voir que nous ne pouvons pas le faire. On ne peut vraiment pas le voir contre maintenant. Ce sera plaque juste ici. J' ai mis Teoh en rose. Alors, oui, c'est visible, mais sans ça, ce n'est pas vraiment visible. Alors, comment pouvons-nous réparer ça maintenant ? Dans des situations comme celle-ci, c'est une bonne idée d'avoir une sorte de sac à glissière. Ajoutez-le à vos conteneurs d'image de volonté ici. Donc, ce que je vais faire, c'est que je vais simplement créer un rectangle qui va être, eh bien, eh bien, le même que notre image d'assauer de l'espace réservé. Mais il va être mis sur l'image, puis nous allons ajouter un int Grady et laisser tomber son opacité. Je sais que ça a l'air beaucoup, mais c'est vraiment, vraiment facile. Faites-moi confiance, faites-moi confiance sur celui-là. Donc je vais aller dans unespace réservé sélectif, espace réservé sélectif, et quand je vais dans mon panneau de couches, vous pouvez voir que j'ai eu ce café juste ici. C' est un rectangle avec une image de café à l'intérieur, donc ce qu'on pourrait faire. Et en fait, ce que nous devons faire est bien, je pense que ce serait tout simplement plus facile. Teoh duplique ce conteneur d'images que nous avons ici. Donc, je vais simplement le trouver dans mon panneau de calques. C' est ce gars juste ici et vous pouvez voir qu'il est écrit rectangle et qu'il y a cette image de café étant mis à l'intérieur de ce rectangle. Donc, ce que nous pourrions faire est que nous pourrions simplement faire un clic droit dessus et choisir en double. Ou vous pouvez toujours utiliser le contrôle plus le raccourci J. Et ce qu'il fait, c'est qu'il crée un duplicata de cette image de ce puits, objet entier au-dessus. Donc nous avons un rectangle et nous avons une image de café juste ici. Donc, ce que nous pourrions faire, c'est que nous pourrions simplement sélectionner cette image de café comme ça. Et si nous venons de supprimer, vous pouvez voir que nous sommes juste à gauche avec un rectangle plan. Et si vous allez à l'outil de terrain comme ça, nous pouvons changer le type de la ligne remplie à partir de deux solides pour créer un int Grady. Et si vous savez, cliquez sur cette icône ici, nous pouvons changer la volonté de la capacité, la position, bien sûr, le type aussi. Mais ce que nous voulons ici, c'est que nous voulons changer cette couleur du gris au blanc simple juste comme ça, et laisser tomber son opacité jusqu'à zéro, comme ça. Et maintenant, nous pouvons simplement toujours utiliser le filtre déplacer le Grady int comme ça. Juste comme ça. Bien sûr, nous pouvons toujours cliquer sur notre Grady int et peut-être changer ce collier en avion en noir comme ça. Et si vous voulez, vous pouvez simplement laisser tomber son opacité. Disons que peut-être 15 comme ça, et il semble déjà beaucoup mieux. Encore une fois, comme la répétition m'a permis d'attraper ce type. Ce, euh, ce rectangle et je vais le reproduire et le dupliquer. Débarrassez-vous de l'image à l'intérieur de ce gars juste ici. Ensuite, en utilisant le filtre va changer le rempli à linéaire changé un Grady int cette Grady en couleur de gris deux blanc uni baisse sa capacité vers le bas à 50 ou peut-être même zéro. Juste comme ça, a changé la couleur de ce gars en noir, changer sa capacité à 50 comme ça et ensuite juste amener ce gars de bas en haut juste comme ça. Alors maintenant nos étaient bien, les titres peuvent être visibles un peu mieux. Donc, si je change ce type de rose en blanc, vous pouvez voir que c'est que c'est bien mieux visible. Donc encore, je vais attraper. C' est un rectangle sandwich. Je vais le dupliquer comme ça. Et encore une fois, je vais me débarrasser de ceci de cette image, juste comme ainsi et encore Aller à l'outil de remplissage, le changer des solides trop linéaires et changer l'int Grady. Allons-y avec une opacité zéro, cette fois, changeons. Changeons cette couleur en noir uni, comme encore une fois, changez l'opacité à 50%. Et déplacons le Grady de bas en haut, comme ça. Et on y va. Nous avons obtenu le curseur créé par le carrousel à l'exception de la navigation que nous allons créer dans la prochaine vidéo 61. 8, ajouterons les boutons de Navifation: Donc, avant de commencer à créer dans la navigation de tandis que pour notre cuir Carrizalez, je pense que nous devrions faire un peu simple, simple ménage. Je veux dire, je veux m'assurer que tous ces éléments, toutes ces pièces sont bien regroupées et étiquetées. Donc ce que je vais faire, c'est que je vais simplement cliquer sur les deux boutons de la souris et je vais simplement sélectionner ces gars et appuyer sur le contrôle. G. Et je suis une célébrité en appuyant à la fois les boutons gauche et droit de la souris pour, afin de sélectionner sur les éléments ajuster par des fragments de leur hors de leurs boîtes de délimitation. Donc encore une fois, je vais simplement cliquer et sélectionner. Mais parfois cela ne fonctionne pas correctement, et vous devez vraiment cliquer à nouveau juste pour vous assurer que Zebina a bien sélectionné. Donc encore une fois, cliquez et collectez et sélectionnez, juste comme ça, Contrôle G. Et voilà que nous allons. Donc maintenant on peut peut-être étiqueter ce type comme, euh, disons image 1. On y va, alors. Ce type comme, euh, image pour et le troisième type comme image image 3. Ok, alors maintenant créons le de la navigation, et ça va être votre assez facile. Ce que je vais faire, c'est que je vais m'assurer que mon puits, pour ce moment où mon coup est réglé. Teoh cette couleur foncée et je vais attraper le crayon et je vais le laisser dans ce mode stylo par défaut. Et je vais simplement maintenir sur Maj et cliquer sur ceux cliquez deux fois, puis rapide une fois de plus. Afin de créer ce genre de ce genre de flèche avait juste comme ça. Laisse-moi zoomer un peu plus près. Alors maintenant, nous allons juste un accroc, l' orteil rectangle et maintenez le décalage enfoncé, la clé pour créer un carré qui va ressembler à quelque chose comme ça. Donc maintenant, ce que nous pouvons faire, c'est que nous pouvons simplement nous assurer que ces gars sont bien alignés . Et si tu veux, tu peux toujours agrandir ce type. Si c'est ça, c'est votre choix bien conçu. Mais je pense que je vais le laisser pour le laisser comme ça. , Bien sûr, nous ne voulons pas que Teoh sélectionne les deux. Ces gars les clonent vers la droite et les reflètent simplement pour créer la deuxième bête hors de notre navigation. Mais comme je l'ai mentionné, et si nous regardons l'original, vous pouvez voir que ce gars est bien, cette flèche est placée sur un fond rose parce que cela indique juste que quand cette flèche est sélectionnée, lorsque l'utilisateur clique ou appuie dessus, il est censé changer. Donc, dans ce cas, je vais simplement Teoh, peut-être appuyer sur un décalage, agit pour échanger pour remplir avec un coup et, bien sûr, changé un coup à cette couleur rose et assurez-vous qu'il est mis sous le flèche comme ça. Maintenant que nous avons ces gars sont créés. Avant de les déplacer, laisse-moi peut-être tourner ce type pour qu'il devienne blanc. La même chose pour ce type. Et bien sûr, comme ils sont un moyen de cuire, nous pouvons rapidement les rendre plus petits. Fais quelque chose comme ça et attrape ces gars. Peut-être que tous les groupes les ont rapidement mis quelque part ici comme ça et ensuite saisir ces gars les mettre quelque part ici et maintenant nous pouvons simplement les regrouper comme ainsi et nous assurer qu'ils sont alignés sur dis entré dans le dissenteur correctement, juste comme ça. Bien sûr, si vous voulez, vous pouvez me laisser juste faire le zoom en très rapide. Si tu veux. Vous pouvez peut-être faire le coup, mais plus grand. Donc, au lieu de Juan, essayons juste de juste comme si la même chose vaut pour cette flèche au lieu d'une. Faisons en sorte qu'il soit juste plus visible. Et bien sûr, nous devons faire la même chose pour cette flèche au lieu d'une. Faisons deux, comme ça. Et si nous faisons maintenant un zoom arrière, c'est ce que notre curseur ressemble à ce que notre cours. Peut-être. Attrapons ces gars et assurez-vous qu'ils sont bien alignés. Bien sûr, verticalement aussi. Mettons-les comme ça. Et maintenant, si nous jetons un coup d'oeil à notre conception du dollar, il commence à regarder. Ayez l'air bien. Nous avons obtenu l'en-tête avec le logo avec la navigation avec les icônes des médias sociaux. Nous avons le curseur du carrousel avec eux, les flèches sur, bien sûr, les diapositives et ce texte. Donc nous sommes arrivés à la bruyère et aux sections de héros créées. Ensuite, ce que nous ferions, c'est de passer aux parties les plus complexes. Donc on a été prévenus. Maintenant, nous pouvons passer à peut-être ce premier grand bloc se vanter d'un extrait d'une section, alors commençons à le créer dans la prochaine vidéo. 62. 9Voici, Allons créer un récipient pour le message de blog: Commençons simplement à créer un conteneur d'images en vedette en faisant d'abord apparaître le grain. Je veux voir la grille parce que je veux savoir comment. Pourquoi as-tu tiré sur le conteneur Post, quelle largeur il devrait être. Parce que quand tu vas Teoh, quand on regarde l'original et on prend, on regarde la grille. Nous pouvons voir qu'il se répand sur une certaine quantité de colonnes, et le cyber-se répand également sur une certaine quantité de colonnes. Et dans ce cas, le poste de bloc se répand sur les neuf colonnes et décider barre à travers trois buts parce que neuf plus à trois égale 12. Donc, dans notre cas, nous devons nous assurer que notre conteneur A block post je veux dire, eh bien, notre conteneur d'images vedette se répand sur neuf colonnes. Donc, comme d'habitude, je vais commencer par créer un nouveau calque comme ça. Et je vais le nommer, euh,le euh, sang se vantent en vedette. Supposons que tu n'aimes pas ça. Je vais l'abaisser, donc je vais simplement saisir le rectangle à, et je vais m'assurer qu'il a une couleur visible attachée à elle. mais peut-être au film, et je vais le répartir sur neuf colonnes comme si je vais l'évoquer pour qu'il corresponde. Donc ça touche mon héros, une section juste ici, juste comme ça. Et laissez-moi juste le ramener un peu. Et ce que je veux faire maintenant, c'est que je veux le déplacer vers le bas de 25 pixels. Donc, je vais ajouter 25 à la valeur de l'axe Y, comme ça. Et ceci est notre conteneur d'image, Bien sûr, en ce qui concerne son Ah, un zits. Ah, quoi ? Peut-être laissez-moi juste le avec aussi, parce que je peux voir que ce n'est pas trop. Ce n'est pas le cas aussi. Ouais, ce gars qui, cette fois, c'est OK. Il se propage sur exactement neuf colonnes, et comme les faras, la hauteur de ce conteneur va dans ce cas, c'est assez arbitraire. Je veux dire, vous pourriez laisser ça moral comme un carré si vous voulez, ou vous pouvez opter pour le ratio standard 16 par 9 si vous voulez, et je pense que je vais aller avec ce quelque chose comme 5 50 pixels. Je pense que c'est cassé ça évidemment, 16 sur 9. Je veux dire, c'est un blawg de photographie. Plutôt Donc il n'a pas besoin d'être tout cela, comme l'aspect vidéo en termes de off en termes de ses images. Donc maintenant que nous avons ce ah, ce conteneur a créé ce que nous pourrions faire est que nous pourrions peut-être simplement le faire descendre pour créer le conteneur pour nos extraits de texte de puits. Et ce sera le contexte de nos extraits de texte. Et je vais changer le collier de remplissage pour, eh bien, cette couleur blanche. Alors je vais aller à des échantillons choisir White, juste comme ça. Alors maintenant nous avons quand nous avons eu Teoh, laissez-moi juste les déplacer juste un peu vers la droite et assurez-vous encore qu'ils sont bien alignés avec notre colonne droite. Comme vous pouvez le voir, parfois il juste Il nécessite juste un peu d'ajustement pour rendre tout pixel parfait, juste comme ça. Mais c'est un je pense que c'est important. C' est pourquoi je fais attention à ces petits détails. Donc encore une fois, maintenant que nous avons ces gars créés, nous pourrions simplement à nouveau et saisir ce rectangle ici et encore choisir l'insertion sélection du site et trouver une image inappropriée Peut-être cela. Voyons voir. Peut-être que ce grand Ben est une photo. Pourquoi pas ? Il suffit de cliquer. Trop fatigué pour placer basé juste comme ça. Répartis-le et on y va. Nous avons obtenu notre et nous avons créé notre image principale. Bien sûr, c'était la partie facile. La partie la plus difficile est d'ajouter toutes ces pièces hors texte. Bien sûr, c'est un Il n'est pas difficile d'ajouter le texte, mais de s'assurer et de les concevoir pour qu'ils interagissent les uns avec les autres comme ils le devraient est parfois tout à fait un défi. Parce que jette un oeil à eux. Ces gars doivent être un peu différents. Je veux dire, non seulement à l'intérieur, mais aussi ils sont italiques et que ces gars complètement, complètement pas italique. C' est un audacieux, il est condensé, il se distingue vraiment. Mais ces gars doivent aussi se démarquer, mais d'une manière différente. Ils doivent être informatifs, visibles, mais pas intrusifs. C' est donc ce genre d'équilibre qui est souvent difficile à atteindre lorsque vous créez ces morceaux élaborés et élaborés à partir de texte. Alors commençons à créer nos morceaux à partir du texte. Notre bloc se vanter de liens, extrait de texte et ce lien lire plus dans la prochaine vidéo 63. 10'Allons ajouter les premières pièces de texte: Donc, avant de commencer à créer le texte, nous devons résoudre un problème. Je veux dire, si nous regardons maintenant notre conteneur d'extraits de bloc et regardons l'arrière-plan, nous pouvons voir qu'il n'y a absolument pas de contras entre ces gars. Ce n'est pas intentionnel, je dois l'admettre, mais en fait nous donnera un bon et la chance d'en découvrir un. Une caractéristique d'affinité. Designer offensé le concepteur, vous pouvez et les couleurs non seulement aux objets, mais aussi à l'ensemble du mot d'art. Donc, dans ce cas, nous n'avons pas besoin de créer un rectangle séparé qui poserait comme un rectangle ainsi qu' un arrière-plan comme nous le ferions dans d'autres logiciels de conception comme Illustrator, nous pouvons simplement sélectionner l'art à bord et affaiblir. Il suffit de cliquer sur cette grande nuance grise pour le faire ressembler. Et juste comme ça, nous avons rempli tout l'art à bord avec une seule couleur, et maintenant nous pouvons voir que nous avons réellement ce qui va faire la différence entre notre arrière-plan et le conteneur juste ici. Donc, nous allons commencer le processus de création du texte pour notre post bloc sauf avec la date Et même si c'est juste une ligne de suite, je vais utiliser leur outil de taxe de cadre pour ce morceau de taxe parce que le cadre Texel la date Et même si c'est juste une ligne de suite, je vais utiliser leur outil de taxe de cadre pour ce morceau de taxe parce que le cadre Texel traiter une boîte englobante qui va nous permettre d'aligner tout bien. Et il va rendre la trame de données réutilisable. Alors laissez-moi simplement saisir le textile de cadre et cliquez et faites glisser pour créer un cadre de texte. Maintenant, le plaisir que nous allons utiliser est, bien sûr, Roboto. C' est une version italique. La taille amusante est de 14 et bien sûr, la couleur est cette couleur noire très, très sombre. Maintenant, si vous voulez, vous pouvez utiliser du texte de remplissage. Mais je vais taper la date 2017 comme ça et maintenant je vais rendre ce cadre plus petit jusqu'à ce qu'il soit bien en accord avec ma date avec la date. Donc, pas ce que nous devons faire, c'est que nous devons prier en elle jusqu'au coin gauche de l'arrêt jusqu'à ce qu'elle s'accroche bien avec elle, juste comme ça et maintenant nous pouvons le déplacer vers la droite de 50 pixels. Rappelez-vous que notre point de transformation d'origine de point d'origine est réglé en haut à gauche et en bas de 50. Tout comme dans ce morceau de texte va être notre genre, comme une ancre pour créer le reste en morceaux hors texte. Donc maintenant, nous pouvons faire est que nous pouvons réutiliser ce morceau de texte pour créer le titre du post de bloc, donc je vais simplement le sélectionner, maintenir le contrôle sur mon clavier et dupliquer comme si maintenant je vais étendre ce cadre de texte tout le chemin vers la droite jusqu'à ce qu'il s'accroche avec l'arrière-plan. Et puisque c'est un texte de bien, il est devenu est un peu comme un objet. Ainsi, nous pouvons simplement soustraire 50 de notre face de la largeur pour nous assurer que la distance entre ce n'est pas comme ça que la distance entre cette partie gauche de l'ami texte est la même que la distance entre la partie droite du cadre de texte et le arrière-plan. Bien sûr, nous devons changer le texte. Est-ce que la taille du texte trouvé et tout le long de cela. Mais d'abord, nous allons le déplacer vers le bas de 25 pixels, juste comme ça et maintenant il peut changer la police de Roberto à Roberto Condensed. C' est une version audacieuse et laissez-moi juste vérifier avec l'original. C' est 54 points. Télécommande de boulon Eso. Oh, condensé 54 Comme ça. Et bien sûr, nous pouvons toujours le remplir avec quelqu'un avec un texte factice. Si vous voulez taper quelque chose de significatif, soyez mon invité, mais allez simplement aller à je vais simplement insérer du texte de remplissage et étendre les cadres de texte afin que nous ayons un peu plus ou du texte. 64. Ajouter les morceaux de texte de rappels de texte: Donc, les morceaux de texte suivants sont le nom de l'auteur, les commentaires. Et bien sûr, nous avons ces icônes de médias sociaux ici. Donc, encore une fois, on peut juste attraper ce gars, Cologne jusqu'à ce qu'il se casse avec l'original, et on peut simplement rendre ce gars plus petit. Comme ça a changé le fonds de la réfutation à distance, oh, condensé à Roboto et cette fois , 14. Juste comme ça. Et au lieu de remplir le texte, je vais juste taper le mot par. Mais avant de le faire, permettez-moi d'ajouter 25 comme ça. Et je vais taper comme ça. Et bien sûr, laissez-moi simplement le rendre beaucoup plus petit, et je vais à Kelowna pour faire le bien. Ça devrait être bien. Quelque chose comme ça peut être un peu à droite, et je vais taper le nom de l'auteur, et je vais étendre ce cadre de texte, et dans ce cas, nous allons changer la couleur de cette note en vert et de régulier à italique. Et puis on doit juste faire de l'eau à ce gars à droite pour créer le lien pour des commentaires comme ça et peut-être qu'on peut juste regrouper ces gars. Et tout ce qu'il reste à faire, c'est d'ajouter les icônes des réseaux sociaux, ces gars juste ici. Mais je ne veux pas que vous regardiez, venez me voir en cliquant et en faisant tout ça tout comme nous avons fait quand nous créions l' en-tête. Parce que encore une fois, ce serait juste, ah, ajouter les documents, les éditer, les remplacer, changer la taille. Je veux dire, je pense que tu connais déjà l'exercice. Tu sais comment le faire. Alors laissez-moi juste prendre un raccourci et juste copier ces gars pour rendre le processus plus rapide et plus agréable pour vous. Donc je vais simplement copier ces gars, et je vais simplement suivre l'été comme ça et les aligner correctement comme ça. Ok, donc ensuite, euh et bien, la prochaine chose que nous devrions faire est simplement d'emprunter ce gars, aligner avec ces gars ici et de me laisser vérifier rapidement. Je pense que c'est encore 25 pixels. Donc encore une fois, je déplaçais ce gars juste Justin vers le bas, appuyez sur Entrée, puis changez l'avant pour Roboto ou normal 16. Vérifiez le plomb et changez de 16 à quelque chose comme 22. Juste comme ça. Laisse-moi le fermer. Et encore une fois, juste je pense que nous avons encore besoin de cela. Ouais, ces Ah, ces morceaux de texte ici, la photographie, le vie et les voyages Eso que je vais simplement attraper, juste zoomer un peu, attraper ce gars et le cloner comme ça à nouveau, faire plus 25 et tapez les balises. Maintenant, nous allons étendre ce cadre de texte comme ça. Et le dernier morceau de texte dont nous avons besoin est juste ce bouton pour lire la suite ici. Donc encore une fois, ce qu'on peut faire, c'est qu'on peut simplement cloner ce type vers la droite et peut-être qu'on le déplace un peu vers le bas. Donc, c'est un peu plus important, comme ça et pour le personnage dans le panneau de caractères. Je vais changer, et je vais m'assurer que ces lettres sont écrites dans toutes les majuscules, juste comme si changer de droite Alec à je pense que c'était moyen, mais laissez-moi juste vérifier rapidement Non, il a été bouclé, certains va changer de moyen trop gras. Et bien sûr, je vais taper, lire plus comme ça. Peut-être que je vais l'aligner à droite et peut-être le changer de vert à cette couleur rose . Donc, nous savons que ce fait facile un lien. Et maintenant, nous pouvons juste l'attraper de l'heure, notre fond et le déplacer vers le haut et puis il suffit d'ajouter 52 il 50 pixels. Mais non, je ne veux pas qu'ils bougent. Je ne veux pas le déplacer. Je veux ajouter à sa hauteur comme ça. Et si nous faisons maintenant un zoom arrière, nous pouvons voir que nous avons créé notre texte. Eh bien, je vais d'abord bloquer la plupart. Sauf qu'on a l'image. On a la taxe, on a les icônes, on a les liens et tout est à la recherche est vraiment sympa. Si vous voulez, vous pouvez simplement aller peut-être attrapé ce morceau de taxe et peut-être le rendre un peu plus petit. Et puis il suffit d'ajouter un autre paragraphe pour le faire ressembler un peu. Et on sera un peu plus différents, je suppose, vivants. Mais rappelez-vous juste que vous devriez vous assurer que ces distances sont à nouveau égales. Et peut-être que nous allons changer rapidement les piles pour quelque chose de différent, juste comme ça. Donc, il semble juste un peu plus dynamique. Mettons-le comme ça. Alors on y va. Nous avons obtenu le premier post de bloc sauf créé. Notre prochaine activité serait de créer les colonnes avec les deux et avec les deux mondes, des mondes, des images plus petites. Certains reviennent avec ces morceaux plus petits morceaux hors texte. Mais nous allons commencer à le faire dans la prochaine vidéo. 65. 12Commençons de créer la grille de blog de grille de messages de blog: dans les prochaines vidéos. Nous allons créer ces extraits de bloc de se vanter. Ces cartes ici. Nous avons déjà le principal post de bloc en vedette juste ici. Alors maintenant, il est temps de les ajouter. Couper comme plus vieux sur le bloc se vante conteneur ici. Et comme vous pouvez le voir, nous avons deux colonnes, la colonne de gauche et la colonne de droite. Et chacun a trois cartes postales de bloc. Eso je suppose que vous pourriez dire qu'il y a trois rangées et chacun des hôtes pour bloquer les chariots de vanter . Maintenant, ce qui est important de comprendre ici, c'est que nous avons besoin Eh bien, nous voulons maintenir les mêmes écarts entre les éléments que nous avons créés orteils ici. Donc, ce qui est aussi important à comprendre, c'est que ces cartes vont être beaucoup, beaucoup plus petites que notre poste principal de bloc. Donc, nous pourrions envisager peut-être de supprimer certains de ces éléments au lieu d'ajouter toutes ces balises, icônes de médias sociaux, tous ces liens que nous pourrions vouloir simplement aimer un commerce les éléments de conception pour plus simplicité et facilité d'utilisation. Alors laissez-moi revenir à notre conception principale ici, et laissez-moi juste faire rapidement apparaître la grille Donc la première chose que je vais faire est que je vais créer une couche séparée pour ma grille de post bloc. Donc, je vais simplement ajouter un nouveau calque et le renommer pour bloquer la note de poste. Maintenant, je vais le déplacer sous le bloc. Post présenté comme ça maintenant. Donc, ce que nous voulons faire maintenant, c'est que nous voulons créer Ah, quelque chose comme des guides visuels qui nous aideraient à créer des conteneurs pour nos chariots. Donc la première chose que je vais faire est que je vais prendre un simple outil de rectangle. Je vais le donner un peu visible, a échoué. Peut-être cette sensation plus sombre, tout comme maintenant je vais créer un rectangle qui va s'étirer sur toutes ces neuf colonnes comme ça. Et laissez-moi juste voir rapidement si gars si j'ai tout aligné correctement et je crois que je l'ai juste aimé donc je veux avoir un écart de 25 pixels entre ce conteneur principal et mon prochain contenant ma prochaine grille. Donc, dans le panneau de transformation, je vais simplement ajouter 25 pixels pour la valeur de l'axe Y juste ici. Mais n'oubliez pas de définir le point d'origine à l'un des meilleurs points ici. Il peut être soit au centre gauche ou à droite. Tant que c'est un point culminant, on ira bien. Donc je vais juste en ajouter 25 maintenant. Afin de maintenir des écarts égaux entre nos éléments, nous devrions créer un écart de 25 entre Will 25 entre les colonnes pour nos cartes, n'est-ce pas ? Donc encore une fois, prenons l'outil rectangle et cette fois créer peut-être comme un rectangle plus vertical, juste comme ça. Et peut-être que je vais changer sa couleur pour quelque chose. Peut-être cette couleur rose afin que vous puissiez tout voir mieux, et je vais m'assurer qu'il a. Que c'est avec exactement 25 pixels, juste comme ça. Et maintenant, nous pouvons juste l'attraper, déplacer et nous assurer que c'est une sonde que ce haricot et nous allons incidents au centre de notre principal comme notre guide visuel principal. Donc je sélectionne à la fois la balle, ces rectangles, et je suis simplement positionné dans ce gars exactement au centre, juste comme ça. Mais bien sûr, nous n'aurons pas besoin de ce rectangle, donc je vais les sélectionner tous. Et ici, je vais choisir soustraire de nos opérations de chemin comme ça. Et maintenant, je peux être sûr que à la distance entre mes conteneurs est exactement 25 25 pixels. Maintenant, si vous ne voulez pas voir ces rectangles, mais vous voulez quand même avoir des guides visuels vous aidant à établir la taille des conteneurs pour les cartes, vous pouvez toujours simplement apporter à leurs guides. Alors d'abord, je vais montrer aux dirigeants que je vais voir les dirigeants. Ou vous pouvez simplement aller avec le contrôle plus notre raccourci qui serait encore plus rapide. Et je vais simplement commencer à imprimer les guides comme ça. Je sais donc où étaient mes conteneurs et où mes conteneurs commencent comme ça. Et on pourrait faire ressortir un horizontal comme ça et un vertical juste comme ça. Donc maintenant, si tu ne veux pas de Teoh, laisse-moi m'assurer que ces gars sont bien positionnés. Donc, si vous ne voulez pas voir ces rectangles, vous pouvez simplement jouer avec les gars. Mais je recommande certainement de commencer avec les rectangles. Donc, vous savez où placer leurs guides. Donc, une fois qu'ils sont faits, vous pouvez Vous pouvez simplement supprimer ces rectangles. Et maintenant tout ce qu'ils auraient à faire est de saisir le principal de cette image principale. Permettez-moi d'éteindre la grille, ce conteneur principal, le cloner et de jouer simplement avec sa taille et le texte. Mais je pense que c'est quelque chose que nous allons faire dans la prochaine vidéo. 66. Créer la première carte de publications de blog: Ok, donc maintenant on peut commencer à créer nos cartes pour la grille. Donc je vais désactiver la visibilité des dirigeants par le Président Contrôle. Plus sont juste comme ça. Et je vais sélectionner tout sur ce calque en vedette de post de bloc et je vais le copier et coller tout mon calque de grille de post de bloc, comme ça et maintenant tout regrouper. Donc en ce moment, tout ce conteneur est juste un, juste un groupe. Laisse-moi juste m'assurer que c'est sur la bonne couche, comme ça. Maintenant, nous pouvons simplement le déplacer à l'aide de nos guides. Déplacez-le dans le coin gauche de l'arrêt, comme ça. Laisse-moi revenir un peu vite. Donc maintenant, si nous commençons à rendre ce gars plus petit comme ça, nous pouvons soit rendre tout petit proportionnellement et laisser le texte bien, intact. Mais nous pouvons aussi attrapés par ce haut Bob coin inférieur droit. Apportez-le. Et comme vous pouvez le voir, puisque nous avons créé notre texte ainsi que le texte de remplissage en direct, les cadres de texte sont en train de changer. Ils essaient de s'adapter à la nouvelle taille hors du cap. Il ne semble pas que ce n'est même pas à distance, mais nous allons le réparer dans une seconde. Mais avant de commencer Krug , , c'est juste dans la taxe. Permettez-moi de changer rapidement cette Big Ben une photo, certains vont double-cliquer dessus pour y naviguer et le révéler dans mon panneau de calques. Donc, je vais m'en débarrasser juste comme ça et puis sélectionner ce rectangle à nouveau. Assurez-vous que je dois incertain option de sélection latérale activée et juste naviguer vers eux un endroit où je garde mes images et peut-être allons-y avec cette photo de gâteau. Comme si je vais cliquer à la taille et on y va. Nous sommes arrivés à l'image créée. Donc, comme je l'ai déjà dit, nous pourrions sacrifier et la quantité d'éléments de conception que nous avons ici pour comme, plus de visibilité, meilleure visibilité, facilité d'utilisation au combat. Et je pense que c'est quelque chose que nous allons faire en ce moment. Donc, tout d' abord, je vais Teoh, tourner bien, cette épine le texte Spink en texte vert. Je ne veux pas que ce soit. Je ne veux plus être un lien, donc je vais juste le laisser comme ça maintenant pour le rendez-vous. Je vais simplement double-cliquer dessus et élargi, tout comme maintenant je ne vais pas utiliser ces icônes de médias sociaux. Je vais me débarrasser d'eux. Je ne vais pas utiliser les commentaires, donc je vais double-cliquer. Parfois, vous devez double-cliquer quelques fois pour naviguer vers un groupe au sein d'un groupe qu'il fonctionne. Mais parfois, il suffit de cliquer. Pourrait enroulé cliquer deux fois en une seule fois de plus. Alors maintenant je vais Teoh, peut-être prendre ces tags et les étendre juste un peu juste un peu. Et je pense que je vais peut-être laisser une étiquette de blessure comme ça, et amener ce gars à gauche toujours si légèrement. Bien sûr, notre était. Notre préoccupation principale est ce titre ici, parce que ce sera la chose la plus visible sur nos cartes, donc nous devons nous assurer qu'il est visible, mais ce n'est pas trop inquiétant en même temps. Certains vont double-cliquer dessus, et je vais changer le fonds d'un 54 à Voyons voir 22. Peut-être que je pense que c'est bien et peut-être que nous allons juste augmenter légèrement la hauteur de la ligne de 22. Alors voyons. 26. Laisse-moi juste faire un zoom arrière pour voir à quoi ça ressemble. Ce serait bien. Je pense qu'on peut le laisser comme ça. On pourra toujours jouer avec ça plus tard. Donc maintenant, nous pouvons simplement saisir notre principal texte choses conteneur principal pour notre extrait de post et laissez-moi juste rapidement peut-être étendu un peu à trois lignes de texte déplacer. C' est juste un peu plus haut, comme maintenant. On pourrait peut-être prendre le titre et le déplacer un peu vers le bas comme ça. Et voyons à quoi ça ressemble maintenant. Je pense que ça a l'air bien. Affaiblie. On peut le laisser comme ça. Bien sûr, nous pourrions jouer tout l'après-midi avec tous ces éléments, essayant de leur trouver l'équilibre parfait, mais généralement juste une question hors jeu. Ajout d'un point Teoh à la taille du téléphone ou deux points. Alors je vais te le laisser. Mais je pense que ça a l'air bien maintenant, alors je vais le laisser comme ça. Donc, tout ce que nous avons vraiment à faire maintenant, c'est que nous devons simplement copier ou dupliquer tout ce groupe, tout ce groupe à droite, puis en bas, changer le texte, changer les images et notre grille sera complète. Mais commençons à le faire dans la prochaine vidéo. 67. 14, ajouterons les cartes Remaining: Maintenant, nous pouvons dupliquer notre première carte vers la droite, puis dupliquer les deux cartes vers le bas deux fois que nous puissions créer notre grille. Donc je vais prendre cette carte en premier, maintenir le contrôle enfoncé et changer pour cloner ce type vers la droite, juste comme ça. Ensuite, je vais changer, affaiblir ces deux cartes et encore, contrôler, déplacer, cliquer et les faire descendre. Et bien sûr, nous voulons ces gars. Je veux dire, on veut que l'écart entre ces gars soit de 25 pixels. Donc encore une fois, je vais simplement ajouter 25 comme ça Et maintenant, nous pouvons juste cliquer sur ces deux cartes, cliquer et faire glisser, bien sûr, en maintenant la touche de contrôle enfoncée. Et puis nous pouvons encore ajouter 20 cinq. Juste comme ça. Tout ce que nous avons à faire maintenant, c'est que nous devons simplement modifier ce texte. Bien sûr, nous devons changer les images et et le grand sera fondamentalement complet. Encore une fois, j'y vais. Teoh, isole ça. Ah, cette image juste ici. Et comme vous pouvez le voir, je l'ai trouvé ici dans le panneau de contrôle dans le panneau des calques. Je peux juste savoir, supprimer cette image et encore une fois assurez-vous que l'insertion à l'intérieur de la sélection est option est activée place l'image et la poignée, peut-être la photo de chat. Pourquoi ne pas faire la même chose avec ce type si isolé dans mon panneau de couches. Prenez l'image, retirez-la et encore une fois juste pour insérer l'intérieur de la sélection juste comme ça et encore. Peut-être ajouter cette image comme ça. Donc, ce que vous pourriez aussi faire, c'est que nous pourrions changer le texte. Rappelez-vous juste que puisque c'est une taxe de remplissage, c'est un filtre appliquant le texte de remplissage affaiblir. Pourtant, nous pouvons aller dans le menu texte sur Chek insérer le texte de remplissage et ensuite faire la même chose. Insérez à nouveau le texte de remplissage. Et cette fois, le concepteur d'affinité nous donne un autre set de texte factice Lauren Gibson. Nous pouvons faire la même chose avec la douche affichera, sauf qu'il peut juste l'isoler décoché la taxe de remplissage d'insertion et puis il suffit de cliquer insérer le texte de remplissage juste pour le faire paraître un peu différent. Donc encore une fois, je vais naviguer vers cette image, trouver dans le panneau des calques, supprimer cette image comme alors assurez-vous que je suis basé dans l'image à l'intérieur de la sélection. Prenez cette image de café. Peut-être cette fois. Et comme vous pouvez le voir, c'est beaucoup trop grand, donc nous devons le rendre plus petit. Donc, je maintiens la touche de contrôle enfoncée en ce moment. Teoh le rend plus petit à partir de son point central. Juste comme ça. Ça devrait être bien. Changeons peut-être au moins le titre. Encore une fois, allez dans le menu texte et insérez à nouveau un autre jeu de texte de remplissage. Cette image, comme si DoubleClick Oona pour le trouver dans le panneau Calques. Retirez-le dans une sélection latérale. Corruption la photo juste comme ça sur juste un peu autour. Donc, il remplit bien notre espace réservé. Faites la même chose avec cette image afin que vous puissiez voir un concepteur de meubles vraiment oriental, flexible quand il s'agit d'ajouter des images, créer des extraits de post bloc, je vais réellement créer dans n'importe quel type d'image d'espaces réservés. Peut-être que nous allons rendre ce gars plus petit parce que, comme vous pouvez le voir, c'est juste un peu trop gros. Et une fois que vous connaissez les techniques simples, vous pouvez vraiment accélérer le processus et créer un blogueur professionnel à la recherche de blogueur avant ,une page d'accueil. , Donc je vais juste changer ce texte comme si peut-être changé cette image. Modifiez ce titre comme ça dans une sorte de texte de remplissage. Et on y va. Si nous revenons en arrière et peut-être que nous allons désactiver la visibilité de nos guides. Tout comme si nous avons maintenant l'image principale faite post bloc. Et puis on a eu cette grille juste ici, air vraiment sympa. Maintenant, rappelez-vous que c'est juste 11 sorte de bien que vous pouvez créer pour montrer d'autres poteaux de blocage plus petits dans votre conception. Vous pouvez toujours juste le créer, peut-être dupliquer cette image principale ce post de bloc effroyable juste dupliqué quelques fois et avoir une liste de gros, gros conteneurs d'image et de texte. Ou vous pouvez simplement créer une liste avec l'image à gauche et le texte à droite. Mais nous allons le créer dans la barre latérale. C' est pour ça que je ne voulais pas, genre, reproduire ce concept ici. Et vous pouvez également créer quelque chose qui est appelé un labyrinthe et le regret, qui ressemble essentiellement à une alimentation d'arrêt pincée. Donc, dans un maçon regret, vous avez juste des images plus grandes peut être un peu plus d'impôt, sorte que les conteneurs ressemblent à des blocs de différentes tailles. Donc maintenant, nous savons comment créer une grille de post bloc que nous avons créé pour d'abord. Nous avons créé quelques guides visuels, rappelez-vous que nous avons créé les rectangles, puis les guides. Et puis nous avons juste copié ce conteneur principal à partir du haut. Nous avons prétendu que nous avons concouru à notre couche qui va changer sa taille. Et puis nous avons juste changé le texte en images et nous sommes débarrassés de certains des éléments de, comme les cycles de médias sociaux et quelques liens. Bien sûr, si vous voulez, vous pouvez en ajouter un peu plus. Un peu plus d'escroquerie, d'autres conteneurs ici. Mais je pense que pour l'instant je vais partir. C' est ça. Mais je suis, cependant, va ajouter les anciens messages Bataille ici, et nous allons ajouter un étroit parce que nous voulons que les utilisateurs de leur avoir la possibilité cliquer et sur ce bouton pour voir les bateaux plus anciens dans notre conception. Mais faisons cela dans la prochaine vidéo 68. Ajouter le lien des postes de anciens: donc je veux rendre les choses simples pour vous. Donc, lorsque vous recréez ce design, vous pouvez simplement votre recréé plus rapidement et ah, et voir et obtenir un meilleur aperçu de ce qui se passe ici. Donc j'ai décidé de nommer un, eh bien, ces cartes, tous ces groupes. En conséquence, j'ai décidé de leur donner des chiffres. Donc, quand vous regardez ce fichier, vous pouvez simplement travailler avec un peu plus facilement. Donc maintenant, il est en fait créer ces messages plus anciens. Ah, lien en bas. Donc, je vais juste lui attraper les images de tabouret texte artistique zoomer rapidement et je vais cliquer et glisser et taper dans les messages plus anciens. Comme vous pouvez le voir, j'utilise la police condensée Roboto. Laisse-moi juste le faire. Ce sera la couleur vert foncé et je ne pense pas que je veux que ce soit aussi grand. Rendons-le un peu plus petit. Essayons 20 20 devrait aller bien. Et bien sûr, nous voulions être mis exactement au centre entre ces gars et nous voulions être mis comme nous voulons créer un espace de 25 pixels entre dans ce morceau de texte et ce conteneur donc encore une fois. Ce que je vais faire, c'est que je vais ajouter 25 comme ça pour le faire tomber comme ça. Bien sûr, je ne voulais pas être sur la couche principale, donc je vais à je vais le mettre sur ce bloc, arcs, cred, couche juste comme ça. Et peut-être qu'on le déplaçait quelque part ici. Maintenant, si nous regardons l'original, nous pouvons voir qu'il y a cette petite flèche ici. Donc, pour le créer, nous pouvons l'utiliser. Les formes personnalisées à l'intérieur d'un concepteur de fader. Donc, je vais simplement saisir l'orteil flèche et rapidement créer un étroit qui va ressembler à quelque chose comme ça. Donc, à partir du menu contextuel, je vais choisir connu pour la gauche et juste comme ça et prénup, leur apporter l'épaisseur vers le bas. Voyons voir, peut-être 10%. Ça devrait être bien. Permettez-moi de le rendre rapidement plus petit à l'été ici. Et en ce qui concerne la droite et le fantôme, passons de flèche à barbelé comme ça, et changeons sa couleur. Et maintenant, si nous changeons sa taille, vous pouvez voir que nous pouvons toujours manipuler cette flèche comme ça. Et bien sûr, si vous maintenez la touche Maj, nous pouvons proportionner pour la rendre plus petite jusqu'à ce que ce soit quelque chose comme ça. Non, laisse-moi juste l'amener quelque part ici. Et peut-être que je l'étendrai encore si légèrement. Je ne veux pas être trop grand. Et bien sûr, nous pouvons toujours changer l'épaisseur. Si on veut Thio, bien sûr, on peut changer les bouts. Nous pouvons changer l'épaisseur de notre flèche. Allons-y, peut-être avec 20%. Changons donc l'épaisseur de ceci à 20% pour se rappeler qu'il va être vraiment, vraiment petit. Donc peut-être que c'est une bonne idée de le rendre juste un peu plus visible, juste comme ça et peut-être juste avoir été plus petit, non ? Maintenant, nous pouvons le déplacer un peu vers la droite, les regrouper et s'assurer qu'ils sont positionnés quelque part dans le centre, comme alors ajoutons 25 et voilà. On a créé la grille. Notre prochain ordre serait de créer des travailleurs de ce côté. ce moment, nous sommes arrivés à l'en-tête. Nous avons eu ce curseur, nous avons obtenu à l'image principale. Eh bien, bloc principal, conteneur de poste. Et nous avons obtenu la grille de postes de bloc, ainsi que l'ancien dispose d'un lien ici sur le fond. Donc maintenant passons à la création du curseur. Et nous allons explorer ce genre de design plus en détail à partir de la prochaine vidéo. 69. 16, Explorons le projet Sidebar: dans les prochaines vidéos. Nous allons créer cette barre latérale, alors jetons un coup d'oeil à tout de suite. Tout d'abord, vous pouvez voir que c'est un étirement sur trois colonnes juste ici, et il est divisé en séparé. Appelons les idées, et chaque idée est, ah, tag est étiqueté juste ici. Donc d'abord, nous avons une simple boîte de recherche. Donc, il est juste un rectangle simple avec du texte à l'intérieur et ils l'icône de la loupe juste ici. Nous avons aussi cette première idée, ce premier conteneur qui est ceci à propos de moi conteneur. Donc on est arrivés à cette étiquette. Nous sommes arrivés à l'image, et comme vous pouvez le voir, c'est une image carrée, un conteneur de texte et un conteneur et les médias sociaux. Je viens ici. Ensuite, nous avons obtenu un simple, simple, comme un conteneur de texte avec une autre étiquette. Et puis nous avons eu le conteneur le plus populaire. C' est une sorte de comme un flux de post blogueur, mais il montre sur Lee le plus populaire, le bloc le plus populaire vante, et ceux-ci et ces bateaux de bloc peuvent être ceux qui ont le plus grand nombre de commentaires aime ou qui ont été partagées. La plupart des fois. Et comme vous pouvez le voir, ce petit conteneur rectangulaire est divisé en deux parties. Donc, à gauche, nous avons une image carrée, et puis nous avons un conteneur de texte juste ici avec une date avec bien sûr, euh, avec le titre du post et le tag. Et il y a une petite ligne qui sépare ces gars ici. Et bien sûr, le dernier conteneur n'a pas cette ligne de division, parce qu'en dessous, nous avons cette étiquette qui commence une prochaine section contiendra les annonces, qui, bien sûr, dans ce cas sont des images simples juste pour représenter les annonces à l'intérieur de notre conception. Commençons donc à créer notre barre latérale dès maintenant, et commençons à la créer avec un nouveau calque. Donc, laissez-moi ramener ces panneaux et laissez-moi créer un nouveau calque, et je vais l'appeler barre latérale. Et maintenant, nous sommes prêts à créer notre première section a dans notre barre latérale. Quel est bien sûr eux que l'élément de la boîte de recherche juste ici en haut ? Alors commençons à le faire dans la prochaine vidéo 70. Créer la boîte de recherche: Donc, je vais commencer à créer cette boîte en utilisant l'outil rectangle. Et je vais m'assurer qu'il a le Phil blanc et qu'ils ont un coup plus sombre et que le coup n'est pas trop grand. Un point devrait suffire. Laissez-moi maintenant juste zoomer rapidement comme ça et maintenant nous pouvons créer une boîte de recherche qui va être quelque chose comme Donc il n'a pas à être, ne doit pas être trop grand. Nous pouvons peut-être même faire plus petit pour comme 50 pixels, juste comme si maintenant je vais me débarrasser de la grille. Je n'en ai plus besoin. Ce dont j'ai besoin, cependant, c'est l'aperçu du texte. Donc, avec l'outil de texte artistique, je vais cliquer et faire glisser et taper quelque chose comme Rechercher ici. Et bien sûr, nous voulons changer la police de Roboto condensé à simple roboto. Peut-être pas mince mais italique. Juste comme ça. Changez la taille à quelque chose comme 16. Changeons la couleur pour cette couleur gris foncé comme ça. Et bien sûr, allons nous assurer que c'est en fait, euh, la sensation qui affectait, pas l'accident vasculaire cérébral, et maintenant peut-être la capacité jusqu'à, disons, 50,50 %. Et ce que nous devons faire maintenant, c'est, bien sûr, nous devons créer la loupe, ce qui ne devrait pas être un problème solide. Attrapez l'Ellipse Tal, créez une ellipse. Et maintenant, attrapons l'outil rectangle et créons un rectangle qui va avoir un rempli, plus sombre, rempli et je ne veux pas qu'il ait un trait, juste comme ça Et rendons le plus petit. Allons-y avec peut-être même un pixel. Pourquoi pas ? Et faisons pivoter l'un de ses points inférieurs de 45 degrés, juste comme ça et rendons juste un peu plus petit. Allons vers le bas à 10 pixels quelque chose comme ça. Et maintenant, on pourrait peut-être faire tomber un peu le finaliste. Et si vous voulez, bien sûr, vous pouvez le rendre plus petit, donc je vais juste les regrouper et les rendre plus petits à quelque chose comme ça. Et bien sûr, nous pouvons également baisser sa capacité. Voyons 50 % comme avec notre texte, et bien sûr, nous devons ennuyer votre passage vers le bas de tous les éléments pour cent à nouveau, je me laisse juste zoomer arrière. C' est à ça que ça ressemble. Goutton. Déplacez peut-être un peu ce type vers la droite. Comme vous pouvez le voir, ce n'est pas vraiment difficile, mais il faut juste beaucoup de peaufinage. Permettez-moi de ramener ce type à 12 points, comme si bien, mais un peu à gauche. Et maintenant, voyons à quoi ça ressemble. C' est peut-être trop petit pour toi. C' est peut-être trop grand pour toi. C' est déjà le savoir, vraiment une question de préférence personnelle des oiseaux. OK, laissons ça comme ça. passons pas trop de temps à le faire paraître. Look parfait va de mon expérience. Je peux vous dire que ça a rarement l'air parfait, et je passe beaucoup trop de temps à faire juste, genre, vraiment, vraiment, de minuscules ajustements. Pourtant, cela semble OK, mais comme nous le savons fait est mieux que parfait. Laissons-le comme ça. Donc, notre prochaine partie serait de créer ce premier conteneur, qui était la section à propos de moi. Nous devons donc créer l'étiquette, l'image, puis du texte avec des icônes de médias sociaux. Alors commençons à le faire dans la prochaine vidéo 71. 18l'équde en créant la section About Me: J' ai donc décidé de regrouper les éléments créant notre boîte de recherche. Et j'ai bien nommé le groupe, boîte de recherche ici. Donc maintenant, nous pouvons passer à créer dans notre premier à propos de bien, premier badge, première étiquette et ensuite tout autour de moi partie de la barre latérale. Donc ce que je vais faire d'abord c'est que je vais attraper l'outil rectangle, changer la couleur pour cette couleur rouge ou rose. Et, bien sûr, assurez-vous que l'opacité est en arrière à Beckett 100%. Et je vais commencer à créer mon rectangle à partir de ce coin inférieur gauche du rectangle précédent . Ça devrait être bien. Je vais le laisser pour l'instant, juste comme ça. Et maintenant, je vais créer un autre rectangle s'étirant de droite deux à gauche, juste comme ça et encore. Je ne veux pas que ce soit trop grand. Ce que nous devons faire en ce moment, c'est bien sûr, nous devons ajouter du texte ici. Donc je vais attraper le textile artistique, cliquer et glisser à droite sur moi, juste comme pour que je vais le changer de métallique trop audacieux, juste comme ça. Et bien sûr, on va changer la couleur en blanc et on va peut-être ramener ça à, genre, 14. 14 devrait aller bien, et je vais en parler. Et comme vous pouvez le voir, nous pourrions avoir besoin d'ajuster un peu ce rectangle. Donc tout a l'air sympa. Peut-être même juste un peu à droite, juste comme ça. Maintenant, nous pouvons saisir tous ces éléments, les regrouper et simplement les faire tomber. À partir du resent à partir du centre, le point supérieur les fera descendre de 50 pixels. Donc maintenant, nous pouvons commencer à créer ces images. Est-ce que cette image et ce conteneur de texte Donc, je vais juste à nouveau enveloppé l'orteil rectangle trouver ce bas à gauche, coin gauche décalage, cliquez et faites glisser. Rendez-le un peu plus grand pour le rendre réellement carré écrit par 25 pixels. Bien sûr, la couleur de ce conteneur n'a pas vraiment d'importance à ce stade, mais je vais le cloner, le rendre un peu plus petit, juste comme ça et bien sûr, a transformé ceci dans ce rectangle en faire conteneur d'image. Certains vont cliquer sur cette insertion dans l'option de sélection et trouver l'image appropriée. Peut-être que cette image parce que bien sûr, Ce n'est pas à propos de moi section, donc il serait préférable de montrer certains. Montrez la photo de la personne qui est l'auteur hors du blogueur. Centrez-le comme ça. Allons aussi sur la couleur de ce fond, aussi sur la couleur de ce fond, non ? Prenez le cadre de texte, textile de cadre d' orteil et créez un simple morceau de texte qui va ressembler à quelque chose comme ça . Je pense que ça devrait être bien. Nous allons aligner est correctement juste une seconde. Je vais le remplir avec le avec un peu de texte de remplissage. Et, bien sûr, assurez-vous que j'ai la réfutation régulière, mais 16. Et bien sûr, je veux changer, et je veux changer la couleur aussi. Assurez-vous juste que j'ai tout sélectionné correctement. 16. Changez la couleur à cette couleur gris foncé, comme ça. Et, euh, peut-être allons l'aligner au centre et regardons la hauteur de la ligne. Laissons-le un peu. 2 22 Peut-être que je vais imprimer juste de ça, et maintenant nous pouvons nous assurer que tout est aligné sur le centre par rapport à notre histoire, et je vais juste emprunter rapidement ces médias sociaux. Je viens. Je vais les copier ici et encore. Je vais m'assurer qu'ils sont bien alignés au centre, par rapport à ce conteneur. Et maintenant, nous pouvons simplement saisir le texte et les icônes les regroupent. Et maintenant une ligne tout joliment au centre, juste comme ça. Nous avons donc créé notre conteneur. Maintenant, je viens de remarquer que je pense que je devrais juste créer un espace de 25 pixels bien ajouté au lieu d'un écart de 50 pixels. Mais vous savez, parfois ces erreurs bien, que je fais en fait nous donnera un, eh bien, une belle incitation à apprendre de nouvelles choses sur différent de designer. Notre genre de résolution des défis de conception que vous avez certainement le principal à venir lorsque vous concevez des sites Web, parce que les chances sont que vous allez faire des erreurs, et c'est tout droit et c'est même bon. Eh bien, c'est bon tant que vous apprenez de ces erreurs. Donc je vais attraper tous ces éléments. Laisse-moi juste m'assurer que j'attrape tous ces éléments. Je vais les regrouper et maintenant ce que nous pouvons faire, c'est que nous pouvons simplement nous assurer que ce type a mis ce point original en haut et simplement pour le faire monter de 25 pixels. Je vais faire des maths ici, donc je vais y aller avec moins 25. Et on y va. Puisque nous avions cet écart ici réglé sur 50 pixels, n'importe qui pour l'avoir réglé sur 25. Donc toujours vraiment à faire est de simplement soustraire 25 pixels de cet écart ici. Donc c'est ce qu'il a l'air en ce moment. Donc on a notre boîte de recherche. On a notre section sur moi. On a eu l'image, , ce conteneur de texte, et on est arrivés à la direction. Donc on a eu le premier. Eh bien, 1ère 2 parties de notre barre latérale créée La prochaine partie de la barre latérale serait de créer ceci. Laissez-moi revenir à l'original, ce petit texte ici et cette petite étiquette. Alors faisons ça dans la prochaine vidéo 72. Créons la section de texte de la barre de texte: Donc maintenant, nous pouvons les créer Ma section blawg hors de notre barre latérale. Et encore une fois, nous allons réutiliser les éléments que nous avons déjà ici. Donc d'abord, je vais prendre l'étiquette comme ça et la copier jusqu'à ce qu'elle s'accroche avec ce, euh , ce conteneur, laissez-moi ramener les panneaux et je vais la poser de 50 pixels comme ça et laisser change tout rouge, puis le texte à propos de moi, Changeons-le à mon bloc. Donc, avec le texte dit le textile artistique, je vais sélectionner ce texte et juste taper mon blawg comme ça. Et bien sûr, en fonction de la taille ou de la largeur de ce texte pour notre étiquette, nous pourrions être amenés à le faire. C' est juste que c'est de l'arrière-plan. Donc, dans ce cas, je vais attraper ce rectangle de chardon et juste faire ce rectangle juste un peu plus petit, juste comme ça. Donc maintenant, je peux juste emprunter ce morceau de texte ici et ce CO de fond p et le baser et le ramener comme si bien sûr, je vais sur le groupe tout. Je n'aurai pas besoin de ces icônes de médias sociaux. Je vais m'en débarrasser. J' y vais. Teoh, change l'alignement du centre 2 à gauche comme ça. Et nous pouvons peut-être simplement faire baisser ce paragraphe. S' ils changent du texte de remplissage à l'intérieur. Pourquoi pas ? C' est comme ça et maintenant étaler ce type. Créer sur cette pièce hors comme simple merci peut nous donner une autre occasion orteil, apprendre un aspect de plus de travailler avec différentes fonctions et dit, Monsieur, En affinité designer, rappelez-vous que nous avons en général qui sont de 25 pixels ou de 50 pixels. Donc, si vous voulez, vous pouvez le maintenir. Eh bien, cette idée dans vos zones de texte. Donc, par exemple, ici, si nous voulons nous assurer que réellement que les lacunes, le remplissage à l'intérieur de cette boîte est réglé sur 25 pixels sur l'utilisation de ce que nous avons déjà Eh bien, c'est vraiment, vraiment simple . Tout ce que nous avons à faire est de nous assurer que notre boîte de texte se répand dans notre puits, notre contexte dans ce cas. Donc, maintenant, ce que nous pouvons faire, c'est simplement le rendre plus petit. Donc, d'abord, je vais le rendre plus petit à partir du haut pour créer l'écart de 25 pixels. Donc, je vais mettre le point d'origine en bas et je vais soustraire 25 de sa hauteur, juste comme ça. Et je vais faire en sorte que le point central soit assis au centre. Et maintenant, je vais soustraire 50 de l'avec parce que je veux, et je veux créer l'écart à droite et à gauche. Et ils sont tous les deux censés être 25 25 plus 25 est généralement 50 certains vont ajouter 50. Je vais en soustraire 50 comme ça, et on y va. Maintenant, nous pouvons être sûrs que la distance entre le haut et la gauche et les parties droite seront bords de notre conteneur ou exactement 25. Donc maintenant je peux juste me débarrasser de ce gars et je peux le faire tomber. Et si vous voulez, vous pouvez également vous assurer que la distance entre ces gars est de 25. Mais je ne vais pas aller si bien. Je ne vais pas y aller. Je ne vais pas créer ce gros écart. Je vais peut-être ajouter 12 pixels comme ça et encore avec ce genre affaiblir faire exactement la même chose. On peut juste le faire tomber comme ça. Et assurez-vous que c'est en fait 20. Que l'écart est de 25. Pour que nous puissions eso affaiblir simplement. Attrapez quoi ? Peut-être que cette fois-ci de nous allons faire la transformation du haut. Et du plomb de hauteur, soustrayez 25 comme ça. Et ah, bien sûr, on peut changer le prochain texte de remplissage comme ça. Ok, donc nous sommes arrivés à ce morceau juste ici, créé pour que la prochaine section soit de créer ce gros, plus populaire Blawg feed block post feed juste ici. Alors commençons à le faire dans la prochaine vidéo. 73. 20'Allons en créer le premier conteneur pour les postes les plus populaires: Donc, commençons à créer à nouveau la section suivante en dupliquant simplement certains éléments. Je vais prendre cette étiquette ici et la ramener jusqu'à ce qu'elle s'accroche avec ce conteneur supérieur et je vais y ajouter 50 pixels, comme ensuite, je vais juste Gramp l'outil rectangle. Comme vous pouvez le voir, nous utilisons principalement les outils les plus simples. Et je vais créer un conteneur juste comme si apporter en bas peut-être. Et je vais simplement y ajouter 2025 pixels. Et si nous regardons l'original, nous pouvons voir qu'il est divisé en deux sections. Mais honnêtement, il a d'abord été divisé en trois sections parce que je voulais créer un peu comme un 1/3 2 3ème division juste ici. Alors, comment pouvons-nous faire ça ? La façon la plus simple de le faire est simplement de copier d'abord ce rectangle un peu copier-coller comme ça , et laissez-moi juste peut-être changer rapidement sa couleur afin que vous puissiez voir le mieux. Donc, en ce moment, nous obtenons deux conteneurs différents à différents rectangles. Alors, comment créer deux conteneurs à partir de ce conteneur que et l'un de ces conteneurs seront 1/3 sur le total avec et l'autre sera 2/3 sur le total avec. Donc d'abord, je vais t diviser ce premier conteneur ce premier rectangle par trois. Juste comme ça pour créer une version 1/3 de l'ensemble de ce conteneur entier. Donc maintenant, nous avons ce rectangle plus petit et ce plus grand rectangle juste ici. Donc je vais attraper ces deux gars et de l'opération chemins je vais choisir diviser comme ça. Donc nous avons juste ce rectangle et ce rectangle. Mais comme vous pouvez le voir si bien, c'est un rectangle et nous voulions être une cause carrée si nous allons à l'original, ce gars est un carré. Donc, puisque c'est ah, avec 90 pixels, la hauteur doit être la même. Certains vont simplement taper 19. Juste comme ça, Adam a eu la même chose avec ce gars. Il suffit de taper 90 et c'est notre premier conteneur. Maintenant, la dernière chose à dio, bien sûr. Eh bien, conteneur sage. Je sais. Je suis, je suis le saké. Conteneur. Beaucoup est de créer une ligne. Cela dit cette division ici. Donc, je vais simplement saisir la direction vers l'outil rectangle à nouveau et créer un rectangle s'étirant sur nos trois colonnes et le rendre difficile. Faites-le juste un pixel de haut comme ça. Et je vais Teoh le faire descendre de 12 pixels. Je ne veux pas diviser les pixels en deux, et je sais que nous avons généralement 25 pixels et nous aurons bientôt 25 pixels entre ces conteneurs. Mais je veux que cette ligne soit placée exactement au milieu de cette lacune ici. Donc, puisque 25 divisé par 2 à 12,5 et qu'on peut diviser les pixels pour aller avec 12 ou 13, je vais aller avec les 12. Et comme ça, notre premier conteneur est créé. Donc il a eu l'espace réservé à l'image sur la gauche. Espace réservé suivant sur la droite. Et cette ligne c'est une frontière en bas. Donc, dans la prochaine vidéo, nous allons commencer à ajouter le contenu. Nous allons ajouter l'image que nous allons ajouter le texte, puis dupliquer cet extrait de post bloc . Eh bien, nous allons le dupliquer trois ou quatre fois, alors restez à l'écoute 74. 21Voirons la liste des publications de blog les plus populaires: maintenant, avant que nous Kelowna ce conteneur et rempli de contenu. Changeons bien le texte que mon bloc en texte le plus populaire. Bien sûr, vous pouvez taper quelque chose d'autre, comme d'autres utilisateurs lisent ou comme la plupart des lectures. Non, le plus partagé, le plus comme vous voulez. Je vais juste aller avec Standard, le plus populaire et je vais changer la taille. Je vais rendre la taille de ce fond un peu plus grande. Alors maintenant, je vais descendre. Je vais faire un zoom arrière un peu. Donc maintenant, nous pouvons simplement saisir ce rectangle et le transformer en un conteneur d'image en les utilisant que c'est ce que ce système que nous connaissons déjà. Je vais juste basé sur l'image dans juste comme ça. Et maintenant, nous pouvons commencer à ajouter du texte. Donc, laissez-moi juste rapidement emprunter peut-être cette date ou peut-être de notre grille la plus. Donc, je vais saisir la date où les explosions le post intitulé et cette balise les copier et basé sur eux ici. Et, bien sûr, amenez-les comme ça. Et peut-être que je vais faire ce rendez-vous juste un peu plus petit orteil comme 10 points. Espérons que cela soit encore visible pour vous et mettez-le quelque part ici. Juste un peu comme maintenant je vais rendre ce gars plus petit. Essayons 18 et changeons la hauteur de la ligne pour frapper 22 ou peut-être même 20. Et faisons le conteneur entier beaucoup, beaucoup plus petit et voyons à quoi il ressemblera ici. C' est peut-être encore un peu trop grand. C' est peut-être le rendre un peu plus petit. Et peut-être rendons la taxe encore plus petite. En fait, descendons comme un 16 plus lent. Peut-être que nous pouvons maintenant étendre juste un peu, trop quelque part ici et maintenant nous pouvons juste saisir ce style de vie Décembre cette étiquette. Et puisque c'était 10, allons-y avec 10 aussi bien ici et rendons-le juste un peu plus petit. Et nous allons taper le bon mot, comme maintenant il peut simplement attraper tous ces gars et les distribuer, comme pour que nous puissions maintenant les regrouper. Et on y va. On a créé notre premier conteneur. Si vous faites juste un zoom arrière. C' est à ça que ça ressemble, et je pense qu'il a l'air. Je pense que ça a l'air plutôt sympa. Donc maintenant ce qu'on peut faire, c'est qu'on peut juste attraper ce conteneur Kelowna jusqu'à ce qu'il s'accroche avec notre ligne. Ça devrait être bien. Ajoutons maintenant à nouveau. 12 ou même 13. Donc il en a eu 25 comme ça et encore. On peut juste changer Changer cette, euh, cette image juste ici. C' est ce type juste là. Et bien sûr, vous connaissez déjà l'exercice. Tu sais comment le faire. Donc, c'est juste vite. Changons rapidement à la photo. Peut-être que cette fois ces roches rendent l'image entière plus petite. Juste comme ça. Et encore une fois, nous pouvons changer. On peut changer le texte comme ça. Et encore une fois, Cologne est en panne. Ajoutons 12. Et encore une fois, changeons l'insertion d'image à l'intérieur. La sélection a peut-être disparu cette fois. Apportons l'image plus petite. Comme vous pouvez le voir, c'est bien trop grand, juste comme ça. Et encore une fois, nous pouvons changer. Nous pouvons changer ce texte ici Cours. Nous pourrions aussi changer la balise, mais ne le faisons pas maintenant. Et faisons toute la routine une fois de plus, donc je vais faire tomber ce type. Je vais ajouter 13 pixels parce que vous voulez en avoir 25 au total, comme ça. Et cette fois, je vais me débarrasser de cette ligne juste comme ça, et je vais changer. Je vais changer ça. Cette image, autre chose. Je vais à la base des orteils. Peut-être ce Noël, cette photo de Noël en, comme ça et encore. Modifiez ce texte comme ça. Et on y va. Nous avons créé notre chargeur de sang le plus populaire et le plus populaire. Donc, la dernière chose à faire serait de créer l'endroit pour ces annonces ici. Donc, tout ce que nous avons vraiment à faire est de créer cette étiquette, puis il suffit d'ajouter les photos, les conteneurs, photos Porta et les photos pour eux-mêmes. Donc ils ont tous l'air que c'est bien sûr, si vous voulez, vous pouvez concevoir certains ajoute vraiment quelque chose comme 20% de rabais sur des choses comme ça. Mais je vais juste aller avec les images simples juste pour vous montrer le processus. Et je ne veux pas que tu passes du temps à me regarder, à emplacements de vente funky et funky sur des zones funky. Publicités de vente, des choses comme ça. Commençons donc à créer notre dernière pièce hors de la barre latérale dans la vidéo suivante. 75. 222Allons en fonction de la section Ads: Commençons donc à créer à nouveau dans la section des annonces en empruntant simplement l'étiquette. Donc, je vais l'abaisser et je vais y ajouter 50 pixels. Et au lieu de la plus populaire, je vais taper, nous allons taper la tête des annonces. Bien sûr, nous devons rendre ce gars plus petit, et nous devrons faire de ce gars cause beaucoup plus grande. Comme vous pouvez le voir, il est trop petit. Alors commençons simplement à ajouter, Et en passant, vous pouvez les maintenir shift pour ajouter des valeurs dans par incréments de 10 pixels ici dans le panneau de transformation . Donc, je maintiens le quart de travail et vous pouvez voir que je change la valeur par tension. Ok, donc maintenant tout ce que nous avons à faire est de créer des carrés simples et simples qui accueilleront nos images. Donc encore une fois, je vais saisir l'outil rectangle tenant le décalage pour créer ce carré, juste comme ça. Et bien sûr, je vais le déplacer de 25 pixels comme ça, et je vais l'eau de Cologne vers le bas, et je vais appuyer sur le contrôle J pour le cloner une fois de plus. Mais bien sûr, ces gars doivent aussi descendre de 25 pixels. Donc une et deux fois en une seconde comme ça. Et maintenant, nous pouvons transformer ces conteneurs en conteneurs d'images. Donc encore une fois, insérer décide sélection, saisi l'image, le mettre à l'intérieur, rendre plus petit afin que nous puissions voir quelque chose juste un peu plus petit. Comme ça encore avec ce type basé, peut-être, peut-être, peut-être cette image à l'intérieur, comme ça. Et le dernier a basé quelque chose à l'intérieur. Peut-être ce sandwich comme ça. Alors on y va. Nous avons la barre latérale Said ont été créés. Bien sûr que non. Juste une barre latérale, parce que nous avons déjà. Ensuite, cet en-tête, en-tête, on a le curseur, et on est arrivés au poste principal juste ici, et on a la barre latérale. Nous avons ces bien en vedette qui présentaient des vantations de sang aussi, et nous avons eu les publicités. Et la seule chose qui nous manque ici, c'est le pied de page. Et nous allons aussi commencer à créer le pied de page dans la prochaine vidéo 76. 23'Allons en sorte de créer le pied du pied: Je vais m'assurer que j'ai pour cet art à bord sélectionné ici, et je vais attraper l'art à bord. Pourtant, je vais étendre mon tableau d'art à quelque part ici, donc je vais faire la même chose avec les gruaux. Je vais rallumer sa visibilité et je vais, Teoh, Teoh, déverrouiller. Et puis je vais l'étendre comme ça. Donc, si nous regardons l'original, nous pouvons voir que pour entendre la nourriture er est divisé en deux parties. abord, nous avons ces colonnes avec des liens, mais aussi maintenant le Chapelier qui est répété ici dans le pied de page. Je veux dire, c'est le concept de l'en-tête est répété ici dans le pied de page. Donc, ce que nous pouvons faire, c'est que nous pouvons simplement saisir l'en-tête. Je veux dire, tous ses éléments, juste comme ça et assurez-vous que nous avons le bon calque créé certains vont simplement créer rapidement un pied de page plus tard. Et je vais le déplacer comme ça. Et dès que j'ai rythmé Ah, ces éléments copiés en vous peuvent voir qu'ils se basent exactement à leur place précédente . Mais ce que nous pouvons faire, c'est que nous pouvons simplement définir ce 0.20 original comme ça, et nous pouvons laisser Stipe dans quelque chose comme 2600 et affaiblir rapidement l'imprimer vers le bas. Comme vous pouvez le voir, c'est en bas. Alors ajoutons peut-être comme, 2000 pixels, et ça ira ici comme ça. Et bien sûr, ce gars doit être plus petit, alors rendons vite le plus petit. Donc je vais changer ce fonds de 42 Je vais définir le point original en raison de ce point du milieu gauche de 42. Voyons voir 20 pour être en mesure de petit 26 devrait être bien. Et maintenant, puisque ce type est en 2026, laissez-moi verrouiller rapidement la grille et peut-être même éteindre sa visibilité. Maintenant qu'on a créé ce gars, on doit donner rendre ces gars plus petits aussi, donc je vais les attraper avec cet orteil électoral, et je vais les rendre plus petits, donc je vais verrouiller le rapport d'aspect et apporter abaissez leur hauteur ou disons 2 12 pixels. Peut-être que ça devrait être bien. Et on y va. Ce que ce serait notre que ce serait notre bien si elle avait répété dans le pied de page . On pourrait même vouloir rendre ce type plus petit, juste comme ça. Et nous allons nous assurer que tout est bien aligné au centre comme ça. Et laissez-moi juste zoomer rapidement, éteindre la visibilité des panneaux, et ce serait le premier élément de notre pied de page. L' élément suivant serait le suivant. Il suffit de revenir à l'original, cette grande partie du pied de page avec ces colonnes et liens et d'ailleurs, remarquez que ces arrière-plans la couleur des couleurs de ces arrière-plans sont différents. Celui-ci est plus sombre, et celui-ci est plus léger, et en fait, et en fait, c'est juste un moyen de s'en sortir, créant comme des pieds de page combinés. Appelons-les comme ça. Bien sûr, ce gars pourrait être plus sombre et ce gars pourrait être plus léger si vous voulez, ou ces deux gars pourraient avoir la même couleur, et ils pourraient être simplement divisés par une ligne. Par exemple, si ce serait votre choix de conception. Il existe donc différentes façons de créer, comme les pieds de page combinés. Eso Jetons rapidement un coup d' oeil aux deux. Eh bien, en fait, trois concepteurs scénarios comment nous pouvons créer un comme un pied de page combiné, en couches, pied de page en couches. Mais commençons à le faire dans la prochaine vidéo. 77. 24, allons explorer les concepts de pied de pied de différents: Donc une façon de créer un aliment combiné serait de donner à ces gars la même couleur que ça . Plus la première partie de la deuxième partie est grande. La même couleur d'arrière-plan. Alors faisons-le rapidement dès maintenant afin que nous puissions créer le même rectangle de puits avec le même fond. Juste comme ça. Cependant, nous pourrions diviser ces gars avec certains avec quelques lignes, donc nous pouvons simplement emprunter ce rectangle et le rendre beaucoup, beaucoup, beaucoup, beaucoup plus petit et le faire dire un rouge comme ça. Mais ne le faisons pas si épais. Soyons simples. Allons peut-être à deux pixels. Mais bien sûr, nous voulions être. Vous vouliez être bien dépensé dans tout le tableau d'art. Décochons donc le rapport d'aspect du verrou. Et maintenant, c'est juste ah, tapez deux. Alors maintenant laissez-moi juste rapidement emprunter ces gars. Juste pour que vous puissiez voir de quoi je parle, nous allons les créer dans une seconde. Donc si nous sommes maintenant juste basés ces gars dans quelque chose comme pour que vous puissiez voir qu'en ce moment nous avons ces gars, ces gars vont mettre dans le même contexte. Mais ces parties étaient bien séparées avec cette ligne. Donc celui-ci loin de créer ce genre de pied de page, nous pourrions aussi juste saisir, euh, ce fond et le rendre plus sombre. Allons avec peut-être pas avec le noir, mais quelque chose de vraiment, vraiment sombre. Quelque chose comme ça. Et débarrassons-nous de cela hors cours. Si tu veux, tu peux laisser ça comme ça, mais je vais m'en débarrasser. C' est donc notre design original. Et bien sûr, si tu veux, tu peux peut-être faire que ce type donne à cet appelant cette couleur plus claire, et on peut peut-être le rendre plus sombre, comme ça. Donc, il est vraiment, vraiment à vous jusqu'à votre choix de conception avec le quel ah, quel schéma de couleurs que vous optez pour ou si vous avez décidé d'aller simplement avec une couleur. Mais pour diviser ces éléments avec une ligne simple fonctionne de toute façon. Je voulais juste vous montrer différentes idées sur la façon de créer ce genre hors. Nous allons concevoir un site web, un élément de site web. Donc, dans la prochaine vidéo, nous allons mettre fin à ces éléments. Ne vous inquiétez pas, je ne partirai pas. Je ne le laisserai pas comme ça. Nous allons jeter un oeil sur la façon de créer ces gars, et donc il est en fait commencer à les créer dans la prochaine vidéo. 78. 25de terminons le projet et explorons le prochain projet: Donc je vais commencer avec le retour de la grille juste comme ça et je vais emprunter 11 étiquette. Donc je vais peut-être prendre mon étiquette de sang comme ça. Et bien sûr, je vais m'assurer que je suis sur le bon joueur. Ceci pour le lot de couche ici que je vais le coller, versé contre ma grille. Je vais ajouter 50 pour créer l'écart, comme maintenant je peux zoomer arrière, et maintenant nous pouvons créer des liens, des impôts. Donc, je vais prendre l'outil de cadre suivant, et je vais rapidement créer un ami de texte qui va se répandre sur seulement ces trois colonnes, et je vais insérer du texte de remplissage et je vais changer sa couleur Deux blanc uni. Et bien sûr, nous allons le rendre plus grand 16 22 pour la hauteur de la ligne. Et si vous voulez, vous pouvez juste le laisser comme ça ou nous pourrions juste faire juste un peu plus petit et remarquer que si nous revenons juste à l'original, ces lignes sont beaucoup, beaucoup bien, pourquoi elles sont que seulement trois colonnes. En fait, ils se répartissent sur quatre colonnes, mais la taxe ne dépasse jamais ces quatre colonnes. En fait, je voulais garder ces gars un petit étang court parce que, tu sais, puisque ça dit des liens ici que je voulais que ça ressemble à des liens. Mais ça n'a pas besoin d'être comme ça. Je veux dire, comme, à gauche, vous pouvez avoir une colonne avec plus de texte, ce qui serait, disons, comme, je ne sais pas, peut-être un mawr important les informations qu'elle aimerait partager avec les utilisateurs. Donc, il n'a pas besoin d'être des liens vers juste pour le bien de cela de ce design, j'ai juste décidé de le faire pour le faire des liens. Mais encore une fois, nous pouvons simplement faire un peu de texte clair, juste comme ça. Cependant, ce que j'aimerais vraiment faire, c'est que je voudrais étaler cette ligne sur quatre colonnes , donc elle doit aller jusqu'à droite. Eh bien, juste ici. Laissez-moi donc l'étendre rapidement. Je vais tenir le quart de travail et appuyer sur la flèche vers le haut pour qu'il envoie à ce quatrième appel. Maintenant, je vais changer le texte. Voyons, nous allons peut-être taper quelque chose comme, eh bien, plus de texte, juste comme ça. Et étendons ce, euh, ce contexte, peut-être pas beaucoup. Cela devrait être bien et pas ce que nous pourrions simplement dio est que nous pourrions juste saisir cette, euh, cette étiquette, ce texte et ce texte ainsi et simplement l'eau de Cologne à droite juste comme ça et puis appuyez sur le contrôle J pour le cloner clone une fois de plus. Je vais me débarrasser de la grille. Je vais éteindre sa visibilité. Et maintenant, bien sûr, nous pouvons simplement peut-être, comme, changer ce texte plus en liens et, bien sûr, changer la taille un peu comme ça. Et comme vous pouvez le voir, nous devons encore une fois. C' est juste la taille de ce bar, donc je vais le rendre plus grand. Et bien sûr, nous pourrions simplement peut-être se débarrasser de ce texte de fond sur peut-être juste pour étendre ce gars, couper, se débarrasser de celui-ci de base en avant et peut-être juste faire ça plus petit. Donc, il ressemble en fait à une sorte de liens juste comme ça. Et laissons-le comme plus de texte ici. Je suis presque sûr que vous savez déjà quel genre d'effet nous allons réellement chercher ici. Donc, puisque cet écart est de 50 pixels, nous voulons que cet écart soit aussi de 50 pixels, non ? Nous voulons avoir un design cohérent et cohérent. Donc, je vais faire ça et rendre ce fond plus petit, juste comme ça. Peut-être encore plus. Et maintenant, je vais, de son stop ad 50 pixels à sa hauteur, juste comme ça. Et maintenant, nous félicitons tous ces éléments et les avons déplacés comme ça. Et maintenant, nous pouvons sélectionner ce pied de page entier, calquer ce calque entier, déplacer vers le texte des messages plus anciens, et maintenant le déplacer de nouveau vers le bas de 50 comme ça. Et bien sûr, la dernière chose à faire serait de saisir l'article 2 et de le rendre beaucoup plus petit comme ça. Et on y va. On n'a pas ça. Eh bien, cette page web d'arme créée par cette première page web. C' est ainsi que vous pouvez créer une première page pour un blawg moderne. Nous avons donc commencé par créer un logo et une navigation avec quelques icônes de médias sociaux. Nous avons créé l'en-tête, puis nous avons créé le que tandis que la section héros avec le curseur de carrousel, les conteneurs d'image, navigation et les titres de post sanguin. Et en dessous de cela, nous avons ajouté au puits la caractéristique principale de bloquer vante eso avec l'image et le conteneur de texte en dessous. Et puis nous avons ajouté à la grille de publication de bloc et sur la droite, nous avons ajouté, Ah, un côté assez complexe où je pense avec la boîte de recherche sur moi section de texte, vantures de sang les plus populaires et sur la section des annonces. Et bien sûr, nous avons fini avec le pied de page, une section qui serait divisée en deux parties. Maintenant, dans les prochaines vidéos, nous allons créer le seul message à l'intérieur de la page de publication unique du concepteur d'affinité parce que nous voulons montrer à l'utilisateur et au développeur ce que nous pensons que le site devrait ressembler lorsqu'un veut lire un message de bloc. Donc, nous allons à un conteneur d'images. Nous allons ajouter beaucoup de texte. Nous allons ajouter une navigation simple, permettant à l'utilisateur d'aller au post suivant et au post précédent, puis nous allons ajouter la section Commons. Mais nous allons aussi réutiliser beaucoup des autres éléments que nous avons déjà créés tels que l'en-tête, le pied de page et la barre latérale. Donc, si c'est quelque chose qui vous intéresse, continuez à regarder. 79. 26, Explorons le design d'un simple post design: dans les prochaines vidéos, nous allons créer une page de publication unique pour notre conception de bloc et que nous allons faire des choses différentes. Nous allons ajouter des éléments différents, et nous allons également laisser quelques éléments qui sont déjà conçus et qui font déjà partie de notre conception. Donc quelque chose est généralement dans un seul bloc de changement de post, mais un seul changement de post de bloc. Et certaines choses restent les mêmes. Par exemple, l'en-tête comme celui-ci, la guerre latérale, parce que c'était mon choix de conception. Donc décidé le site de nos états le même et la nourriture er reste le même. Mais toutes les autres choses sont différentes, à commencer par la section héros. Comme vous pouvez le voir, nous n'avons pas le curseur juste ici. J' ai décidé de mettre l'image en vedette ici au lieu du curseur. Et puis, bien sûr, on a un numéro. Eh bien, tout le poteau de bloc sur la gauche. Donc, notre conception principale est divisée en deux colonnes à nouveau. Donc, ce bloc se vanter s'étend sur neuf colonnes. Et bien sûr, la barre latérale s'étend sur trois colonnes. Et ici, nous avons obtenu les données le titre du bloc post, quelques liens le texte. Et puis nous montrons, Ah, le développeur ou l'utilisateur à quoi ressemblera l'image. Et puis nous avons montré comment un bloc cite le morceau de texte va ressembler à nous, bien sûr, eu. Obtenez des liens ici, des tags, des médias sociaux. Je viens ici et puis nous sommes arrivés à une navigation simple pour le post précédent et la prochaine se vanter, avec une image et un titre de post bloc. Ensuite, nous avons obtenu quelques cartes pour bloc lié, les deux de sorte que ceux-ci peuvent être bloqués vantent que l'avant dans la même catégorie qui ont les mêmes balises et des choses comme ça. Et puis nous avons eu la section des commentaires ici avec ce bien mannequin Commons avatars mannequin et certains Post commentera est des boîtes comme le nom du commentaire, email post bouton commun ici, Cependant, avec la section commune or, il y a une chose que vous devez enterrer l'esprit, parce que lorsque vous créez un blawg, les chances sont que le développeur va assez souvent utiliser un peu prêt à partir des plug-ins pour la section commune. Par exemple, discuter ou Facebook commentaires brancher, et ces deux sont les plug-ins les plus courants utilisés pour créer un bloc se vanter Commons sous les messages de bloc sur cette section ist. Mais dans cette vidéo, je voulais juste vous montrer comment vous pouvez créer complètement, complètement personnalisé, l'aspect d'une section de commentaires dans un post blogué. Alors commençons par la création de notre image de héros. Et puis nous allons créer des gars visuels qui vont nous aider à créer toutes ces pièces hors. Eh bien, des morceaux de texte, titres d' image, toutes les choses qui sont nécessaires là-bas dans un bloc post. Ah, un seul bloc de conteneurs. 80. 27, allons créer l'image vedette et le conteneur de poste: Comme vous pouvez le voir, je n'ai pas ici. Je n'ai pas d'image. Et le curseur ? Je n'ai pas de Bête ici. Je n'ai que la barre latérale, l'en-tête. Et bien sûr, le pied de page. Laisse-moi descendre rapidement le pied ou descendre ici. Nous allons donc commencer par ajouter cette image en vedette à la place de notre curseur. J' ai déjà un rectangle ici. C' est ce type là. Et je l'ai simplement créé rapidement parce que je pense que vous connaissez déjà l'exercice. Tu sais ce qui va se passer dans une seconde ? Euh, c'est ce type juste là. Je viens de le créer vraiment, vraiment rapidement pour en faire le conteneur pour notre image vedette. Donc encore une fois, je vais m'assurer que cette option de sélection d'insertion à l'intérieur est activée et je vais naviguer jusqu' à l'endroit où je garde mes images. Laisse-moi voir. Je pense que c'était la grosse mauvaise invention, ce gars ici et je vais simplement la coller comme ça. Et bien sûr, le rendre significativement plus grand. Déplacez-le quelque part ici. Je pense que cela devrait être bien comme vous pouvez le voir ici Il y a un écart de 50 pixels entre mon image et cette boîte de recherche juste ici. Donc, afin de créer un conteneur de post bloc, je pense qu'il serait bon d'avoir quelques guides visuels pour nous-mêmes. Donc je pense que nous pourrions commencer par créer l'arrière-plan principal, ce fond, ce gars juste ici pour notre post de bloc. Donc d'abord, je vais Teoh, je pense qu'on peut juste regarder cette couche. On ne travaillera plus dessus. Donc, créons un nouveau calque et appelons-le Ah, simple post, comme ça. Et je vais le faire et il peut être au-dessus de la barre latérale juste comme ça. Donc ce que je vais faire maintenant, c'est que je vais créer un rectangle qui s'étend sur toutes ces neuf colonnes, comme ça. Donc maintenant que j'ai ce conteneur créé, je ne peux tout simplement pas le faire un peu. Donc, duchesse, notre image. Et nous pouvons peut-être rapidement lui donner une couleur différente afin que nous puissions voir juste un peu mieux . Donc maintenant, nous pouvons juste ajouter 50 à la valeur de l'axe Y pour le faire baisser comme ça. Donc maintenant, il correspond à notre puits, la hauteur de notre barre latérale. Mais bien sûr, il doit être blanc, juste comme ça. Et maintenant, nous pouvons simplement prier quelque part ici. Pas trop loin. Je pense que ça devrait être un combat. Peut-être un peu plus, juste comme ça. Donc maintenant, nous aimerions simplement savoir comment boulanger, cette tapotement intérieur cette extrémité intérieure et devrait être et combien de place nous avons obtenu pour travailler avec. Je veux dire, nous voulons savoir quelle largeur le texte à ce texte ce titre de bloc doit être. Comment est-ce que ce texte et dans le fond doit être Donc tout semble bien et il est pour de suivre notre idée au large dans 50 ou 25 pixels, lacunes dans notre conception. Alors, comment pouvons-nous faire ça ? Eh bien, le premier week-end, prenez simplement notre rectangle. Ce type ici, copiez-le. Et je pense qu'on peut le verrouiller maintenant pour ne pas le gâcher accidentellement. Alors, allons le verrouiller rapidement. Et maintenant, on peut le refonder. Donc maintenant, nous avons deux d'entre eux et changeons rapidement sa couleur. Alors maintenant, établissons le point d'origine de transformation vers le centre et soustrayons rapidement 100 de la fouettée de notre rectangle, comme ça Et maintenant c'est la même chose pour la hauteur. Maintenant, je soustraire 100 parce que 50 plus 50 est 100. Et puisque nous voulons avoir un écart de 50 grande âme sur le haut 50 pixel écart sur le bas et 50 pixel écart sur la gauche et la droite, Quand j'ajoute 50 plus 50 des deux côtés, je reçois 100. Donc maintenant, je peux juste utiliser ce guide comme ma référence Donc nous pourrions peut-être baisser son opacité pour dire 25% et peut-être le verrouiller et ensuite juste travailler sur le puits ce fond. Mais je veux voir à quoi mon ce que ma volonté d'imposer le contenu pour le post de bloc va ressembler dans ce large contexte. Je veux savoir ce que je fais ici. Nous ne savons pas ce que je conçois, donc je vais rapidement sortir quelques guides. Donc je vais aller voir pour montrer les dirigeants et je vais rapidement prendre un guide, un guide horizontal et un guide vertical. Ça va être là. Laisse-moi juste voir si je oui, maintenant c'est non, Il est assis là où il doit s'asseoir. Je vais juste cacher les règles par le contrôle actuel sont. Et maintenant je peux me débarrasser réellement de ce conteneur je n'ai pas besoin de ce rectangle Alors maintenant j'ai maintenant je sais à quel point mes conteneurs fiscaux peuvent être et nous pouvons commencer dans le premier conteneur de texte dans la vidéo suivante. 81. 28, ajouterons le titre du billet de blog de blog: Donc, dans cette vidéo, nous allons commencer à ajouter le texte et nous allons commencer par le post de bloc intitulé. Donc, si on jette un coup d'oeil à ce gars juste ici, on peut voir qu'on a la date de la publication du bloc. Eh bien, titre. Et nous avons obtenu le nom de l'auteur et le nombre de commentaires qui sont, qui sont des liens simples. Donc maintenant, je vais m'assurer que je suis sur la bonne couche la couche de poteau unique juste ici. Je vais attraper l'outil de texte artistique, cliquer et faire glisser et taper le type sûr dans la date. Dites ceci, que peut-être 15 Juillet 2017. Juste comme ça. Et je vais, bien sûr, changer sa couleur et sa taille pour économiser peut-être 14 ans. Et je ne veux pas qu'il soit écrit dans toutes les majuscules, juste comme si changer la couleur comme ça. Permettez-moi de consulter rapidement l'original. Je pense que c'est pour ce soir, Alec. Oui, c'est vrai, je talic. Donc, je vais le changer de normal à italique. Pourquoi pas ? Et nous allons juste taper en Juillet comme ça et maintenant je peux simplement déplacer ce gars Déplacer ce conteneur de texte à. Bien sûr, il doit être sur le calque droit et je peux le déplacer ici en haut à gauche pour le faire correspondre avec ces guides juste ici. Donc maintenant, nous pouvons créer le titre de la publication de bloc. Donc je vais Gramp l'orteil du cadre de texte cette fois et je vais créer je vais créer la zone de texte. Peut-être que ça serait plus facile. Laissez-moi juste faire un zoom arrière et je vais le répartir sur toutes les colonnes, comme ça. Et maintenant, on peut juste l'imprimer. Pourtant, il touche le 15 sur le Juillet 2017 et maintenant nous pouvons le faire tomber. Et dans l'original, je pense que c'est je pense que c'est 25, mais vérifions rapidement la distance. Donc, avec l'outil rectangle, je vais à Oui, ce sera 25. Donc maintenant on peut juste attraper ça, euh, ce disque va texter l'orteil, et on peut juste le déposer par le haut. Déposez-le de 25 comme ça. Et bien sûr, ce sera roboto condensé audacieux. Mais le front va être beaucoup plus grand. Nous allons voir dans une seconde à quel point il est grand, quel point il est censé être grand. Si nous insérons juste du texte de remplissage, l' alignons vers la gauche, le agrandissons, disons que nous allons voir 46 bien sûr, faisons la ligne cachée beaucoup plus grande. Vérifions 46 et rendons ce cadre juste un peu plus petit, comme alors voyons à quoi il ressemble. Laisse-moi le déplacer vers la droite comme ça et cachons vite les gars. Mais le président contrôlait la demi-colonne et cachons peut-être rapidement la grille pour qu'il puisse tout voir plus clair. Je pense que ça a l'air bien, je pense, laissons ça encore comme ça. Si vous voulez changer le texte pour masquer la hauteur de la ligne ou peut-être la famille de fonds, vous pouvez bien sûr le faire. Mais je veux juste vous montrer les techniques et la façon de penser lors de la création de ce genre de design. Donc maintenant, ce que nous pouvons faire, c'est que nous pouvons juste saisir ce texte du 15 juillet, le mettre ici et changer ce texte pour acheter et ensuite taper le nom de l'auteur. Et maintenant on peut juste amener ce gars à droite et ensuite peut-être le déplacer de 25 pixels, comme ça. Et nous allons changer ce texte pour le nombre de commentaires off. Je vais me débarrasser de cela par mot, mais je vais taper et le nombre de commentaires comme ça. Donc maintenant, nous pouvons simplement faire baisser ces gars de 25 pixels comme ça. Et bien sûr, si vous voulez, vous pouvez peut-être cerner ce gars juste un peu plus près de 15 pixels. C' est vraiment à vous de décider. Jetons donc un coup d'oeil à l'original. Il a donc obtenu le nom de l'auteur, le nombre de commentaires, la date et le titre de la publication de bloc. Bien sûr, si vous le souhaitez, vous pouvez peut-être faire ces lacunes un peu plus petites, aussi, comme 12 pixels ou 15 pixels. Je vais vous laisser le soin. Je veux garder le design incohérent donc peu importe, j'ai 50 pixels, et si je veux le rendre comme beaucoup plus petit, un écart différent, je vais juste aller avec la moitié de cette valeur, qui est 25 comme Eh bien, comme ici, comme dans ce cas, parce que je dois vous dire que je suis un peu comme une symétrie et des nombres égaux buff. Ce Z est juste que c'était juste mon jean, vous savez, bien sûr. Ah, nous créateur. Vous pouvez devenir un peu fou si vous voulez, et nous allons prendre un faire les choses un peu différemment. Donc je vais ramener mes guides comme pour que nous puissions voir que tout se touche bien. Et si vous le souhaitez, vous pouvez modifier la taxe pour voir comment elle va remplir le cadre. Si vous voulez jouer avec ce cours différents, des mots différents, nous allons remplir ce cadre un peu différemment. Donc la prochaine pièce que nous allons créer ici est Eh bien, en fait, sont tous ces paragraphes, y compris cette citation de bloc Et bien sûr, nous allons ajouter à l'image et ces balises ici. Mais faisons cela dans la prochaine vidéo 82. 299, ajouterons les paragraphes et les images et: Alors maintenant que nous sommes arrivés au titre couvert, créons le texte principal pour notre blogué, et je vais rapidement emprunter ce morceau de texte. Ce titre ici parce que c'est un textile de cadre va être juste plus rapide pour nous de changer certaines choses à ce sujet. Au lieu de créer un nouveau cadre de texte, je vais le rendre juste un peu plus grand à quelque part ici. Et, bien sûr, changeons le fonds de Roberto come Dentist à Roboto. Ah, régulier, juste comme ça Et changeons la taille de la police 16 et la ligne cachée de 46 à quelque chose de moins impressionnant. Essayons 26 peut-être pas six mois, 26. Juste comme ça. Bien sûr, vous pouvez jouer avec cela avec le leader avec la hauteur de la ligne si vous le souhaitez. En fait, dans de nombreux blocs modernes, vous pouvez voir que la peau de ligne est en fait assez grande. Assez vaste, je dois dire. Je suppose qu'il peut être un peu plus facile à lire, surtout dans un plus petit appareil, Donc, si vous voulez aller avec quelque chose de plus grand, vous pouvez le faire. Vous pouvez aussi peut-être faire. Bien sûr, cela dépend de l'avant, mais les fonds comme Roboto ou les sables ouverts sont spéciaux, spécialement conçus pour être affichés sur des écrans plus petits ou, vous savez, pour être bien visibles sur les écrans dans quand ils sont affichés, le numériquement de sorte que vous pouvez peut-être le rendre encore plus petit si vous le souhaitez, et toujours jouer avec cela avec la plus grande hauteur de ligne pour le faire paraître encore plus. Ou disons visible, si c'est si c'est ce que vous voulez aller avec. Mais je vais rester avec les 16 habituels et je vais aller avec une hauteur de ligne plus petite, peut-être 28. Laissons-le comme ça. Alors maintenant, nous allons le déplacer à nouveau par 50 big source, Tout comme si et remarqué que quelque chose d'intéressant se passe avec les paragraphes dans mon cadre de texte. Je veux dire, si vous voulez, vous pouvez juste peut-être rendre le cadre plus petit et ensuite le faire descendre pour créer un paragraphe différent , et alors vous devrez ajouter les 50 pixels standard si vous vouliez faire 50 pixels. Mais il y a un moyen plus simple de créer des paragraphes dans des blocs de texte, alors amenons ce type vers le bas. Peut-être, comme ça Et maintenant, n'allons pas au panneau de caractères, mais le panneau de paragraphe juste ici et ici vous obtenez différentes options d'espacement afin que vous puissiez terminer à la première ligne. Vous pouvez en effet et allez traiter cet espace avant le paragraphe. Mais ce que nous voulons, c'est que nous voulons créer un espace après ce paragraphe. Donc, si je vais juste avec zéro ici, vous pouvez voir que les paragraphes Eh bien, en fait, en fait, il n'y a pas de distinction entre les paragraphes. Mais si je vais avec quelque chose de fou comme 100, vous pouvez voir que l'écart devient extrêmement, extrêmement grand. Et, bien sûr, il va regarder différemment si cela vient de changer le texte de remplissage. Vous pouvez voir que les paragraphes conservent encore cet espace de 100 pixels après paragraphe, n'est-ce pas ? Mais bien sûr, nous ne voulons pas que ce soit aussi grand. Allons-y avec 25 comme ça et encore. Nous pouvons peut-être changer certains du texte de remplissage pour créer un look complètement, complètement différent, et nous pourrions jouer avec lui tout l'après-midi pour le rendre différent. Pensez que je ne vais pas passer trop de temps là-dessus, je voulais juste vous montrer comment utiliser les options de paragraphe pour créer ce genre de Ah, ce genre d'effet. Maintenant, je suppose qu'on peut. Donc on peut ajouter l'image, ce gars juste là. Donc peut-être juste laissez-moi rapidement le gars de Brenda juste un peu jusqu'à quelque part ici et je vais attraper le rectangle à, et je vais créer un rectangle qui va être quelque chose comme ça. En fait, je crée un carré parfait. Bien sûr, il peut s'agir d'un angle direct comme celui-ci, c'est simplement votre choix de conception. Je voulais juste aller avec un carré pour le faire paraître un peu différent, car c'est sans danger pour la photographie. Du sang, allons-le. Mais soyons un peu créatifs. Alors allons-y avec peut-être 200 par 200 et déplaçons ce type de 25 pixels comme ça. Donc, ce que nous ne pouvons pas faire, c'est que nous pouvons simplement créer un texte de paragraphe à droite notre image afin que nous puissions simplement emprunter ce cadre de texte, le faire descendre et le déplacer vers la droite. Et maintenant, je veux avoir exactement le même écart que l'écart entre les paragraphes. Alors je le veux. Je veux avoir 25 pixels, non ? Donc, ce que je vais faire, c'est que je vais simplement rendre ce cadre de texte plus petit. Donc, je vais m'assurer que mon point d'origine de transformation est réglé sur la droite. Et je vais soustraire 25 de ces cadres de texte avec Juste comme si encore une fois, je peux faire descendre ce gars jusqu'à ce qu'il corresponde à mon image, juste comme si encore une fois le rendre juste un peu plus grand. Peut-être du pain un peu et encore Ajouter 25 comme ça. Alors maintenant, nous pouvons peut-être juste changer rapidement le texte, le texte de remplissage. Donc on doit l'avoir. Tu sais, on fait croire que c'est vraiment un peu, Tex. Si c'est même si c'est juste une simple Lauren Epsom, juste comme ça et peut-être que c'est juste un peu trop. Donc maintenant, nous pouvons simplement saisir le rectangle et insérer à nouveau une image. Peut-être que cette image de poterie, cette fois, nous allons la rendre plus petite, juste comme ça, et nous y allons. Nous avons eu l'image Eh bien, nous avons inséré à l'image à l'intérieur de notre bloc. Se vanter. Bien sûr, si vous voulez à nouveau, vous pouvez agrandir l'image. Vous pouvez le faire passer à travers tout le puits, notre testament texto dans le conteneur. Eso C'est peut-être faire ça très vite, alors je vais le ramener comme ça à nouveau. Ajoutez 25 comme ça et je pars. Teoh, attrape cette image de poterie et effacée. Je ne vais pas faire passer le rectangle à travers notre conteneur mondial. Et peut-être que nous allons le rendre juste un peu plus grand pour quelque chose comme 400. Eh bien, ça peut être juste un peu trop. Faisons 300 et laissons-le comme ça. Encore une fois, insérons une image, peut-être l'image de la ville. Rendons le plus grand comme ça. Maintenant, nous pouvons à nouveau ramener ce texte à 25 et maintenant nous pouvons réellement ajouter le bloc. Citer ce morceau de texte ici, et la citation de sang morceau de texte est généralement vous savez, quelque chose d'important qui est dans le texte. Si elles vont bien, si l'auteur veut mettre l'accent sur une chose, alors il ou elle utilisera habituellement la citation de bloc pour faire ressortir ce morceau de texte. Alors faisons ça maintenant. Laisse-moi zoomer. Peut-être que nous allons le rendre juste un peu plus petit. Comme si horrible guide vers le bas. Passons 25 et changeons certaines choses à ce sujet. Tout d'abord, rendons ça audacieux comme ça. Allons le faire. Laissons-le au centre et rendons-le un peu plus petit. Rendons peut-être un peu plus grand pour quelque chose comme 24 comme ça. Ajoutons peut-être une hauteur de ligne à 32 Rendons cela juste un peu plus grand et faisons tout le cadre de texte plus petit. Je veux dire un plus étroit parce que généralement ces citations de sang ne sont pas que pour étaler sur les sites. Alors mettons-le comme ça. Ok, donc nous avons créé la citation de bloc, donc les dernières pièces de l'année prochaine seraient de juste Eh bien, peut-être ajoutons juste un morceau de texte ici, et ajoutons ces balises. Peut-être que je vais juste rapidement changer de ce texte de remplissage à une taxe de remplissage différente, juste comme ça et affaiblir simplement, juste emprunter rapidement ces commentaires, texte juste comme ça. Allons vers le bas et nous nous basons à nouveau. Je vais le déplacer jusqu'à ce que ce soit avec notre que nous avons avec nos guides, et je vais en ajouter 25. Et nous allons changer ce texte de commentaires à certains à une taxe ou qui a été coupée. Il suffit de taper quelque chose comme la photographie de style de vie sur les voyages, vous savez, des choses comme ça. Ok, donc le texte est créé, et la dernière pièce de la dernière pièce du puzzle serait d'ajouter ces icônes de médias sociaux ici et ces lignes simples pour que l'utilisateur puisse partager notre contenu. Alors faisons ça dans la prochaine vidéo. 83. 30, ajouterons les icônes de réseaux sociaux: Je vais donc commencer par l'emprunt et les icônes des médias sociaux. Peut-être de la barre latérale. Je vais juste les atteindre rapidement. Je vais les copier. Laisse-moi zoomer et je vais les baser ici. Et bien sûr, je dois m'assurer que je suis sur la bonne couche. Donc laissez-moi juste obtenir sur une seule couche de post et basé sur comme ça Et bien sûr, je veux qu'ils soient beaucoup, beaucoup plus gros. Donc, je vais juste voir 32. 32 devrait être très bien. Et je vais les regrouper parce que pour le moment je veux non seulement changer leur couleur, mais aussi ajouter ce fond elliptique ici. Ce que je vais faire en premier, c'est que je vais créer dans les lèvres comme ça. Je vais mettre bien sûr, l'icône contre cela, ce fond et pour cela, les lèvres. Je veux dire, je veux que cette ellipse indique que chaque fois que quelqu'un passe au-dessus de cette ellipse, ce lien et c'est ellipse, bien, indique en fait qu'elle a été mise en surbrillance pour qu'on puisse juste tourner. C' est une couleur comme ça et maintenant on peut changer la couleur de notre icône. Donc, comme c'est un document incorporé, je vais le modifier. Nous connaissons déjà la perceuse, comme ça, et l'image va bien. Il reçoit un autre appel. Laisse-moi juste rendre l'Ellipse un peu plus grand. Allons y arriver. Nous allons doubler son faire un double de la taille de l'icône. Donc, si l'icône est troisième pour faire l'Ellipse 64 juste comme ça et maintenant nous pouvons simplement déplacer ces gars pour décider. Maintenant, on peut juste emprunter l'Ellipse. Faisons en sorte que tout soit bien aligné. Empruntez l'Ellipse, mettez-la sous l'icône. C' est une lignée de ces gars correctement. Et bien sûr, cette ellipse serait simplement verte. Et je veux que cette icône Facebook soit blanche. Maintenant, je vais Cologne une fois de plus et alignons cette icône instagram correctement et ajoutons le document. Comme vous pouvez le voir chaque fois que nous avons fermé le document intégré, il ne cesse de revenir à notre 1er document ici. Laissez-moi revenir à celui sur lequel nous travaillions et à nouveau à Cologne. Ce gars, mais il sous elle le je viens tout sélectionner à nouveau, a ajouté le document. D' accord. Et nous avons les icônes Creed. Et bien sûr, nous pouvons maintenant simplement regrouper tous ces gars d'abord les icônes et leurs antécédents comme ça en disant avec ces gars. Et maintenant, nous pouvons simplement, monsieur, nous pouvons les distribuer correctement. Je vais donc aller à l'option d'alignement et de distribution et les distribuer. Bien sûr, si vous voulez les distribuer par un numéro spécifique, nous pouvons le faire. Bien sûr, peut être, disons, 16 points. N' oublie pas de frapper. Ok, maintenant on peut juste zoomer et voir à quoi ça ressemble. Et je pense que ça pourrait paraître un peu trop grand, tu ne trouves pas ? C' est peut-être trop grand. Donc on peut tout simplement attraper tous ces types en ce moment. Et au lieu de 64, allons-y avec quelque chose comme peut-être 48 peut-être même plus petit que ça. Peut-être que 36, je pense que ça devrait aller. Allons-y. Ne faisons pas plus petit que ça. Nous pouvons maintenant simplement les regrouper, et maintenant, puisque je veux les aligner par rapport à mon conteneur d'arrière-plan. J' ai besoin de Teoh. Déverrouillez-le. Alors d'abord. Bien sûr que je dois le trouver. C' est ce type juste là. Donc je vais attraper ces deux gars les alignés et maintenant je peux savoir que je peux juste regarder ce fond à nouveau. Donc la dernière chose à faire ici serait de le mettre là où il doit aller. Je veux dire, en termes d'alignement, juste, hum, hum, c'est en place. Et maintenant, il est juste le mettre, Ajoutons juste que nous ayons juste 25 à elle. Et maintenant, nous pouvons simplement ajouter quelques rectangles simples qui vont être vraiment petits. Je veux qu'il soit peut-être aussi bas, aussi petit qu'un pixel. Mais je veux qu'ils soient juste un peu plus larges de, par exemple, 38 ou peut-être 42. Et je veux qu'ils soient noirs ou ça sur ce très, très sombre, grand col. Et je vais les mettre ici. Maintenant on peut juste cloner ce type ici, et je vais les transformer en groupe. Donc maintenant, je peux juste saisir les deux rectangles et sur les icônes des médias sociaux et je peux simplement les aligner au centre par rapport à l'autre. Et bien sûr, si vous voulez que ces rectangles soient plus proches les uns des autres, vous pouvez simplement en sélectionner un, comme si imprimé un peu à gauche, peut-être juste un peu plus. Mais comme ils sont encore un groupe, je peux juste en sélectionner un. Si je pouvais juste en vendre un, comme ça et que je peux sélectionner le groupe, je veux dire les icônes des médias sociaux. Et encore une fois, si je les amène au centre, vous pouvez voir qu'ils sont bien alignés les uns par rapport aux autres. Mais bien sûr, je dois maintenant les regrouper et les aligner par rapport à mon rectangle, comme ça. Donc maintenant, si je fais un zoom arrière et peut-être éteins les panneaux, vous pouvez voir à quoi ça ressemble en ce moment. Bien sûr, la dernière chose à faire ici sera de simplement saisir ce conteneur de chose, ajouter 50 pixels dans son faire sa hauteur. Nous en avons eu 15 comme ça, et nous avons fondamentalement créé notre conteneur principal. Donc, nous avons ajouté à ces morceaux hors texte. Nous avons ajouté que le post de bloc intitulé Ces pièces Off Paragraphes les images, citation de sang et les cycles des médias sociaux. Donc, la prochaine chose à faire ah serait de me laisser juste revenir en arrière serait d'ajouter ces post précédent et prochain élément de navigation se vanter parce que nous voulons l'avec l'utilisateur au lecteur pour être en mesure aller rapidement au post précédent et prochain post pour les garder sur notre site. Alors faisons ça dans la prochaine vidéo. 84. 31, ajouterons la navigation au début du prochain 31Let's: dans cette vidéo, nous allons créer un système de navigation pour les publications précédentes et suivantes. Donc la première chose que je vais faire est que je vais attraper l'outil rectangle et créer un rectangle s'étirant à travers l'étirement de ce quart inférieur et gauche de mon conteneur que je vais faire ses dimensions. Quelqu' un de spécifique. Je voulais être, disons, 300 pixels de large, et je voulais être 75 pixels jusqu'à ce que je voulais être assez large. Parce que rappelez-vous que nous devons avoir une image sur une image à gauche et du texte à droite. Nous devons donc avoir un peu plus de place pour travailler. Donc je vais changer son arrière-plan. Eh bien, c'est rempli, Dwight, et je vais Teoh, ramène-le de 25 pixels. Donc la prochaine chose que je vais faire est que je vais copier ce gars et le coller devant, et je vais m'assurer que c'est vraiment un carré. Je voulais donc avoir 25 pixels avec et 75 pixels dans 75 pixels de hauteur. Donc en ce moment nous obtenons cette image bien ce rectangle et un rectangle en dessous. Donc maintenant, nous pouvons les saisir tous les deux et simplement les diviser. Donc nous sommes restés avec juste ce carré, ce rectangle fin ce carré. Bien sûr, cette place va être notre bien, image un espace réservé. Donc encore une fois, je vais tout simplement orteil rapidement Placer une image. Peut-être cette jetée. J' espère que vous êtes que vous êtes bien que vous n'êtes pas récompensé avec ces images. Je voulais vraiment en avoir beaucoup, mais, vous savez, vous savez, je suppose qu'il est inévitable que certains d'entre eux se répètent simplement. Alors laissez-moi juste faire rapidement cette image est plus petite. Donc, les morceaux de texte Onley dont nous allons avoir besoin vont en fait être les liens pour la fin du post précédent du titre de post de bloc lui-même. Donc, je vais saisir le textile artistique clic et glisser et taper dans le type dans et post précédent . Et, bien sûr, changeons certaines choses à ce sujet. Tout d'abord, je ne veux pas que ce soit italique, et je ne veux pas que ce soit aussi grand, peut-être allons-y avec 12 et nous allons juste nous assurer que ces lettres Elise sont écrites en utilisant toutes les majuscules juste comme ça. Et peut-être rendons-nous encore plus petit de dire 10 comme ça et ensuite je vais amener ce type, mais peut-être pas. Peut-être que je vais juste utiliser le textile de cadre. Permettez-moi de fermer celui-ci et de créer un cadre de texte. On va l'ajuster juste une seconde. Je vais insérer du texte de remplissage, et ce gars doit être condensé roboto, condensé roboto, audacieux. Et nous allons peut-être le rendre juste un peu plus petit, comme 18 ans. Laissons la ligne vers la gauche et changeons la hauteur de la ligne à quelque chose comme 24 peut-être bras de même 20. Et ramenons ce type à terre. Bien sûr, si vous voulez, vous pouvez avoir deux lignes de texte juste ici, ou nous pouvons même aller pour une ligne de texte, juste comme si vous venez de zoomer rapidement. Je pense que la seule ligne de texte sera en fait un peu mieux, alors maintenant nous allons juste nous assurer que nous avons bien eu tout ça. La distance entre le bord est bien, à droite, alors voyons rapidement à quoi il va ressembler 2 25 si ça ne va pas être trop. Je pense que les 25 vont être un peu trop. Allons donc avec 12 pour le mouvement de l'Axe Y et pour le mouvement de l'Axe X. Maintenant, attrapons ce texte de cadre et passons à la glorification précédente comme ça. Et passons maintenant par, disons, 12. Et voyons à quoi ça ressemble. Bien sûr, nous pourrions essayer avec les différentes mesures, différentes façons de positionner ces gars. Peut-être que nous allons vraiment amener ce gars juste un peu vers le bas, juste comme si ça pourrait être encore un peu trop. Eso Essayons, essayons en fait moins 12. Mais ajoutons quelque chose comme quelque chose comme 20 et voyons maintenant à quoi ça ressemble. Je pense que ça devrait aller. On pourrait toujours suggérer plutôt d'essayer de trouver le bon. La direction est la bonne distance entre tous ces types. Allez-y et prenez ces deux gars et assurez-vous juste que ces morceaux de texte sont exactement au centre de ce conteneur bien ici parce que rappelez-vous que peut-être si nous avons ça un peu. Eh bien, le texte est un peu plus long ou un peu plus grand. Si nous changeons juste le texte de remplissage, certaines choses peuvent sembler différentes, mais si nous avons ces deux gars exactement au centre, ils devraient s'adapter au conteneur et rester au centre de notre sur l'endroit où sera conteneur. Donc maintenant, on peut juste pousser rampe ça, euh, ça va naviguer. Eh bien, boîte. Appelons ça comme ça et on peut le déplacer vers la droite. Bien sûr, pas le cloner, mais déplacez-le vers la droite. Je pense que ça devrait être bien. Donc, pour rendre notre travail plus facile, nous pouvons simplement saisir tous ces éléments. Et nous pouvons simplement utiliser la barre d'outils pour retourner tout horizontalement. Mais bien sûr, comme vous pouvez le voir, nous avons également retourné ce texte d'une certaine manière. Eh bien, c'est, vous savez, eh bien, ça rend le texte illisible. Mais avant de m'occuper du texte, je vais prendre cette image et je vais la supprimer. Je vais en ajouter un autre. Donc, nous allons la tête peut-être l'image du gâteau et encore une fois le rendre significativement plus petit. Peut-être un peu à gauche comme ça. Et maintenant, si nous attrapons ces gars à nouveau et les retournons à gauche, nous allons avoir le bon texte. La taxe va être écrite correctement, n' est-ce pas ? Mais il y a encore une chose à faire. Je veux dire, si on a attrapé un textile d'ami et attrapé ce morceau de texte, on peut l'aligner vers la droite et on peut juste saisir ce texte de post précédent comme ça, et on peut le déplacer vers la droite et aussi s'aligner vers la droite, parce qu'à l'heure actuelle, lorsque nous changerons ce texte, cela changera d'aperçu à suivant. J' ai remarqué que le texte s'accommodait à sa droite, ancre droite, pour ainsi dire. Donc on n'a rien à changer pour l'instant. Mais bien sûr, nous pourrions peut-être changer ce texte de remplissage pour le lier à un autre bloc. La plupart comme ça. Et on y va. Nous sommes arrivés à la navigation créée, donc c'est tout simplement que nous allons utiliser les rectangles simples, ajouté quelques photos, photos carrées et ensuite ajouté du texte. Et puis nous avons simplement retourné la boule de Cologne et retourné cette boîte de navigation vers la droite , puis nous avons juste fait quelques astuces pour faire Luca correctement. Donc, la prochaine pièce de design que nous allons créer est cette vanité liée, comme un affichage hors poteaux ici. Alors faisons ça dans la prochaine vidéo. 85. 32, ajouterons la section des publications connexes: la section des messages connexes sur notre page. Donc, d'abord, laissez-moi peut-être emprunter rapidement certains des actifs que nous avons déjà, certains vont saisir cette étiquette et cette première image, puis je vais le faire et ensuite je vais essayer de le coller sur le bon calque, juste comme ça et je vais m'entraîner. Laisse-moi zoomer. Ça devrait se battre. Et bien sûr, je vais l'abaisser de 50 pixels. Et bien sûr, nous ne voulons pas qu'il dise des annonces que nous voulions sauver des atouts liés, certaines vont changer rapidement cette prochaine. Et puis je vais juste saisir ce rectangle et l'amener à droite juste comme ça, vous savez déjà et comment faire cela. Alors peut-être que je vais vérifier d'abord. Si cette distance entre ces gars est de 50 ou 25 devrait être de 25 Donc nous sommes bons à y aller. Alors vérifions avec l'original à quoi ça doit ressembler. Eh bien, comme vous pouvez le voir Ah, cette image ici est plus d'un carré, plus d'un rectangle, alors c'est un carré, mais bien sûr, c'est juste ma préférence de conception. Juste mon choix de design. Si vous voulez, il peut être am Il peut être un puits, un rectangle. Donc, je vais rapidement supprimer cette image juste comme ça afin que je puisse juste ajuster ce rectangle ici. Donc je vais aller avec 2 70 peut-être par 200 juste comme ça et je vais ajouter une image. Voyons voir, peut-être cette image de Noël, pourquoi pas ? Et rendons le plus petit. Ça a rendu l'image plus petite. Rappelez-vous que si vous voulez juste l'image à partir du point central. Maintenez la touche de contrôle comme ça. Donc maintenant, nous pouvons ajouter au titre du message de bloc de texte et la lecture Plus taxi de Pas se tromper ? Oui, exactement. Ce gars juste là. Donc je vais attraper l'outil de rectangle, trouver le bon point en bas à gauche ici et créer un rectangle à 70 par 100. Ça devrait être bien. Bien sûr. Je veux changer la couleur orteil blanc et encore une fois et saisir le tabouret texte cadre. Créer un cadre qui va être rempli avec du texte de remplissage aligné sur la gauche Roboto condensé gras est totalement bien. Allons avec deux lignes de texte et déplacons ce type à gauche et mets-le ici. Et maintenant, vérifions réellement ce qu'il ferait, quoi cela ressemblerait avec le s'il avait 25 pixels, lacunes tout autour d'elle. Donc, d'abord, je vais faire son chemin pour établir le point d'origine de la transformation de l'origine du transfert au centre, et je vais le faire. Je vais le rendre plus petit de 50 pixels, donc moins 15 comme ça, et je vais le pousser vers le bas de 25 aussi. On y va. Donc maintenant, nous pouvons simplement saisir le textile artistique et taper en lire plus juste comme ça. Alors changeons ça de normal trop gras. Et rendons le plus petit. Essayons 14 et allons avec cette couleur verte comme ça, et voyons à quoi ça ressemblerait si nous pouvions le déplacer de 25 pixels du bas et de la bonne école qui a commencé la transformation à partir du bas. Donc, déplacons-le vers la gauche par 25 et passons-le de 25 comme ça pourrait être juste un peu trop grand et pourrait aussi le rendre juste un peu plus petit. Ce C 10 peut en fait l'être. Ça pourrait être tout à fait bien. Mais déplaçons ce type et remontons-le. 25, c'est peut-être un peu trop. Je le pense. Je pense que c'est beaucoup trop. Alors déplacons-le vers le bas. Soustrayons deux, disons 10. Eh bien, c'est ajoute, fait comme ça ça ça devrait être bien. Laissons-le. Laissons-le comme ça. Maintenant, je vais attraper, bien sûr, tout ce fragment ici. Et peut-être allons juste allumer rapidement la grille comme ça. Donc maintenant on peut déplacer ce gars vers la droite une fois et ensuite il suffit d'appuyer sur la touche J pour le déplacer vers la droite ou pour le cloner une fois de plus vers la droite. Maintenant, on peut juste changer cette image comme ça. Peut-être que le voyons, peut-être l'image du chat. Rallons-le plus petit. Changeons ce texte de remplissage comme ça, et changeons cette dernière image de Noël à autre chose, bien sûr. J' ai été certain de la sélection intérieure. Oui, on va avec le sandwich comme ça et on y va. Bien sûr, si vous voulez, vous pouvez peut-être rendre ce conteneur un peu plus grand. Donc, en fait, cette taille cet écart ici est bien est aussi 25. Donc nous avons le même écart ici et le même écart ici. Alors peut-être qu'on va faire ça. Et faisons ça en un seul lot. Donc je vais amener tous ces types, et ensuite juste et juste juste juste juste ici. 52 leur hauteur, 25 pas 50. Ce serait un peu trop. 25. Juste comme ça. C' est ainsi que nous pouvons créer ce genre de vous rapporter section vantée. Laisse-moi éteindre la grille. Allumez les panneaux. Alors on y va. C' est à ça que ça ressemble en ce moment. Donc, nous avons eu l'image en vedette. On a eu le message du bloc. Nous avons eu cette précédente prochaine navigation post. On a les postes correspondants. Et la dernière chose que nous devons encore faire est cette section de commentaires juste ici. Donc, nous allons réellement vérifier comment créer cette section dans la prochaine vidéo 86. 33Inclinons la section des commentaires: Commençons donc à créer la section commune en faisant de cette œuvre un peu plus grande, parce que je pense que bientôt nous allons manquer d'espace ici. Donc, je vais aller à l'art avorter, attraper l'art des planches à et amener ce gars assez significativement à quelque part ici . Alors on peut juste prendre notre nourriture ou me laisser juste le trouver quelque part ici. C' est ce type ici et on peut juste me laisser l'attraper correctement et m' affaiblir. Amenez-le pour entendre, juste comme ça. Maintenant, revenons au bon joueur et empruntons ce label. Cette liée vante étiquettes. Je vais copier des bases à l'avant, faire descendre et ajouter à nouveau à la norme 50 pixels comme ainsi ensuite. Ce que je vais faire, c'est que je vais attraper l'outil rectangle et créer un conteneur pour nos commentaires. Mais je vais tournoi retour la visibilité hors de la grille sur et juste créer un conteneur qui va être assez grand, assez dit, et je vais le déplacer vers le bas de 25 comme ça. Donc, si vous jetez un oeil à l'original. La première chose que nous devons faire est, bien sûr, changer l'étiquette juste ici, puis ajouter sur l'image l'avatar, puis du texte. La date Le nom de la personne qui a commenté le bouton de réponse juste ici et ensuite affaiblir juste va répéter le processus avec ce, euh, eh bien, avec cette réponse et ici. Donc, d'abord, je vais changer cette étiquette de vantures liées à des commentaires. Puis le guide de Brenda à gauche. Ça ira bien. Alors maintenant, créons leur premier avatar. C' est un mendiant. Est-ce que ce rectangle ce carré et cette personne juste ici ? Donc, bien sûr, nous allons commencer par saisir le magasin Ellipse comme ça, et nous allons le rendre rose. Donc, afin de créer le corps de notre avatar, attrapons cet outil rectangle arrondi. C' est ce type juste là. Et créons rapidement un rectangle arrondi qui va ressembler à ça. Je m'enlève les orteils. Cliquez sur l'option de rayon unique ici, et je vais entrer zéro pour le trajet inférieur gauche et inférieur. droite. Les valeurs ici. Zéro pour ce gars à si, comme vous pouvez le voir, nous venons de créer rapidement transformé ce rectangle autour d'elle comme 1/2 rectangle arrondi . Et tout ce que nous avons à faire en ce moment, c'est que nous pouvons avoir à jouer un peu, aussi, avec les autres valeurs, pour le faire ressembler exactement comme nous le voulons. Alors peut-être qu'on l'amène un peu plus haut. Et bien sûr, nous pouvons encore agrandir ce rayon si nous le voulons. Essayons 35. C' est McNish, Allders, même 35 lacs. Donc je pense que ça a l'air, je pense que ça a l'air bien. Bien sûr que nous pouvons toujours nous contenter de regrouper ces gars les rendre plus petits, les rendre plus grands. On peut faire avec ces gars, peu importe ce que tu veux et laisser moi jeter un coup d'oeil à l'original. Il est mis contre ce carré sombre. Certains vont envelopper le carré sombre, et peut-être que je vais juste utiliser l'option de sélection insérée derrière pour créer un carré comme ça et faire un noir et le rendre un peu plus petit, quelque chose comme ça Et disons, une ligne. Tous ces éléments ensemble comme ça. Alors maintenant, nous allons juste vite peut-être dupliquer ce gars pour qu'on n'ait pas à le refaire en une seconde. Et voyons Ah, donnons à ces gars des couleurs appropriées. Allons les rendre sombres. Et faisons ce fond rose comme de la salsa. Et maintenant, nous avons les deux avatars créés. Donc, dans la prochaine vidéo, nous allons réellement commencer à créer ces morceaux de texte et ces morceaux de texte. Aziz. Eh bien, donc nos commentaires qui ont l'air d'être viennent vraiment, alors restez à l'écoute. 87. 34Allons en sorte que les textes pour les commentaires: Si vous jetez un oeil à l'original, vous pouvez remarquer que le rembourrage à l'intérieur ici cette section commune est beaucoup, beaucoup plus grande que les marges que nous créons habituellement. Je pense que c'est, hum , plus de 50 pixels, et ceci est fait pour, vous savez, ne pas rendre tout symétrique. Mais pour ajouter une certaine dynamique dans la conception, vous n'avez pas besoin de bien, dans la section commune comme celle-ci, si vous le créez, vous savez, vous savez, si c'est une coutume faite à la main, fait un vous pouvez obtenir un peu plus fou que le vent avec tous les autres éléments. Donc, dans ce cas, regardons à quoi ressembleront nos commentaires s'ils ont plus de place autour eux. Donc, la première chose que je vais faire qui juste zoom arrière est que je vais utiliser cet avatar comme mon genre d'ancre pour d'autres morceaux de design que je vais créer en seulement une seconde. Mais je pense que je vais le rendre juste un peu plus petit. Vérifions 48 bien sûr, allons nous assurer que nous lions tout ce que c'est un groupe et que nous lions sa taille comme ça. Alors allons-y avec 48. Je pense que 48 ira bien et je vais le mettre ici dans le coin supérieur gauche, juste comme ça. Et maintenant, je vais le déplacer vers la droite de 100 pistes. Cochez 100 Je vais le déplacer vers le bas de 100 aussi. Comme ça. Donc maintenant, je vais simplement créer bien taxé va texter le commentaire. Donc, je vais attraper le textile artistique et créer un rendez-vous. Ça va être la côte Otto. Je pense qu'on va habituellement avec le métal. Allons-y avec 14. Entrez la date et peut-être rendons-nous encore plus petit. 10 devrait être très bien. Tu sais quoi ? Peut-être que je vais verrouiller ce fond ici, pour qu'on ne le gâche pas accidentellement. Donc maintenant, nous pouvons déplacer ce Octobre, Disons par fait, et peut-être juste un peu vers le bas, comme si nous allons juste jeter un coup d'oeil à l'original, quoi il ressemble dans la version originale. C' est quelque chose comme ça. Je suppose qu'on peut. On peut le laisser comme pour qu'on sache, qu' imprime ce type et qu'on le ramène à 10 heures. Et changons ça une date à un nom et ce gars sera vert dans toutes les casquettes et nous allons le rendre juste un peu plus grand. Et maintenant ajoutons le prochain cadre comme ça, et ce que nous pouvons faire, c'est que nous pouvons faire en Grande-Bretagne ce texte de tout le chemin vers la droite, comme nous le faisons habituellement, et nous pouvons le rendre plus petit. Alors suivons 100 comme ça, et remplissons-le avec un peu de texte de remplissage qui va être Roboto normal 16. Bien sûr, comme vous pouvez le voir parfois, vous avez juste à cliquer une fois de plus pour réellement sélectionner la taxe parce que intégrer dans les concepteurs parfois ne veut pas coopérer quand il vient à changer dans le texte pour vous bien, doivent apparemment faire sélectionner le texte spécifique. Vous pouvez simplement manipuler le cadre de texte, ce qui est un peu dommage, donc c'est peut-être juste un peu plus haut. Laissez-moi juste jeter un oeil rapide et nous allons déplacer ce groupe quelque part ici parce que nous avons encore besoin de taper les mots rippled word reply. Déplaçons vers le bas par Voyons voir 15 et désactivez cette ancienne option Caps. Faisons-le mais plus petit à 10. Et nous allons taper en réponse. Et je pense que nous pourrions vouloir le déplacer vers la droite parce que je suppose qu'il serait plus facile pour les gens de cliquer s'il était bien placé sur la droite. Donc c'est juste une légère modification. Donc supposons que quelqu'un a vraiment répondu et mettons ce méchant garçon vers le bas. Voyons 15 et nous pouvons simplement saisir ce morceau de texte, ce morceau de texte, ce morceau de texte et ce morceau de texte le cloner vers le bas et le déplacer vers la droite. Je crois que c'était 10 et non. Et on y va. Peut-être qu'on changera le nom de cette personne aussi, aussi, John. Et bien sûr, rendons ce cadre Texas plus petit, même plus petit comme ça. Et amenons ce texte répondu à gauche, comme ça. Donc, la prochaine chose que nous ferions est de créer ce formulaire pour les commentaires, cette section laisser la réponse ici, Alors faisons ça dans la prochaine vidéo 88. 35, Allons créer les formulaires de commentaire 35Let's: donc avant de créer le formulaire pour les Communes. Alors résolvons rapidement un problème que nous avons ici. Je n'ai pas changé la taille de cet avatar. Ce gars est plus petit est il est 48 pixels avec la large, mais ce gars n'est pas si Il est rapidement réparer celui-ci, Donc c'est le type 48. Et bien sûr, nous devons amener ces gars à droite et faire tout ce cadre plus petit de 10 pixels. Allons-y avec moins 10. Juste comme ça. Donc maintenant, je vais juste créer un les commentaires que le formulaire pour les Communes. Mais laissez-moi juste rapidement faire cette chose ce conteneur juste un peu plus grand. Donc, je vais commencer par l'ajout du texte qui va dire, Laissez une réponse. Certains vont attraper l'outil de texte artistique, commencer quelque part ici et taper le laisser une réponse, Ou peut-être laisser un commentaire et nous allons le rendre rose. Faisons-le. Rendons-le gras, pas italique, et rendons-le plus petit. Peut-être pas si petit. Ça devrait être bien. Allons en parler et bien sûr que nous pourrions. On pourrait peut-être essayer de déplacer ce gars vers la droite pour le faire correspondre avec le texte de réponse ici et maintenant on pourrait le déplacer vers le bas de 50 comme ça a déménagé ce gars vers la gauche et le déplacer vers la droite par 50 comme certains. Donc maintenant, si nous regardons l'original, nous pouvons voir que nous avons cette boîte de commentaire juste ici. C' est là que les gens taperaient le commentaire réel. Nous avons le nom des gens, de la personne qui commente son email et, bien sûr, le bas ici. On pourrait peut-être indiquer deux états quand les gens survolent le bouton. Donc c'est un état régulier. C' est l'état inactif, et bien sûr, c'est Ah, survolez les états. Donc, nous pourrions dans le premier créer un bouton vert, puis créer ce fond rose pour indiquer et ce que ce fond, quoi son arrière-plan devrait ressembler quand les gens planent dessus. Mais commençons par l'arène des boîtes, les éléments de notre forme. Donc, avec l'outil rectangle, je vais créer un rectangle. Je vais l'étendre à travers ce conteneur et ensuite je vais simplement soustraire 50 comme ça, et je vais le déplacer vers le bas. Voyons 50. Je pense que ce serait bien et je vais le rendre blanc. Ou peut-être Grace. On peut le voir. Et puis je vais prendre l'outil fiscal artistique. Il suffit de zoomer et je vais taper un commentaire. Et je voulais être un habitué, peut-être 10. Donnons cette super voiture, je vais la descendre et ensuite je vais la faire monter par, disons, 10 pixels comme ça. On peut simplement me laisser créer ce type, ton lit vers le bas. Et maintenant, nous pouvons juste saisir ces deux éléments, les déplacer vers le bas et ensuite les faire descendre. Vérifions 25. Être 25 devrait être bon. Et changeons le commentaire pour que je crois que c'était le nom et prions ce gars. Faisons 50. Bixel est haut et partageons vers la gauche. Maintenant, amenons ce type à droite. Bien sûr, je maintiens la touche de contrôle enfoncée pour le cloner. Et nous allons changer le nom pour email, Bien sûr, Nous avons besoin d'une certaine place entre ces deux rectangles, donc je vais rapidement créer un rectangle qui va être 25 pixels de large. Changeons sa couleur. Et nous ne pouvions pas simplement unir ces éléments rapidement. gars de Brenda. Mettons-le devant. Assurez-vous qu'ils sont correctement alignés à disenter, et nous pouvons juste maintenant, en utilisant la barre d'outils. On peut le soustraire comme ça, à moins d'amener ce type à droite. Ça ira bien. Donc, la seule chose à adhérer est, comme je l'ai dit, ce post commentaire bout commun Eh bien, bouton. Alors revenons en arrière. Et pour autant que je me souvienne, c'était 50 pixels. Oui, il était de 50 pixels si rapidement juste attrapé l'outil rectangle et créer un rectangle qui va être 50 pixels de haut, tout comme ça. Et je vais le déplacer vers le bas de 25 ans. Donc, je veux que ce soit mes boutons principaux, celui que les gens voient quand ils sont sur le point de poster un commentaire, certains vont le transformer en vert comme ça. Et je vais reprendre le textile artistique et taper le commentaire post. Je vais changer ça de normal trop gras, et je vais le rendre plus petit, peut-être même plus petit, et je vais le rendre blanc. Pain. Allons le ramener à 18 et je vais les aligner correctement. Et maintenant, je vais juste attraper ces deux éléments et les abattre et ensuite les ramener à 25 ans. Alors maintenant je peux juste transformer ce type en bouton rouge. Donc, je peux juste indiquer à ce développeur que quand quelqu'un survole ce bouton, je voulais devenir rouge. Et si vous ne voulez pas, si vous n'avez pas besoin d'un tel écart, vous pouvez simplement le rendre plus petit. Alors peut-être juste au lieu de 25, allons juste avec 10 comme ça et nous allons zoomer . Donc maintenant, nous pouvons amener ce gars juste comme ça et ajouter nos 50 pixels standard à sa hauteur comme ça. Donc vraiment, la dernière chose à faire serait de simplement ramener le pied de page, certains vont le sélectionner, le marquer et ensuite ajouter, Voyons voir, 25 ou 15 peut-être 50. On n'aura plus besoin de ce tableau d'art pour être aussi grand que ça. Et bien sûr, éteignons Big Red. Alors on y va. Nous avons créé une seule page de messages de bloc, donc nous avons ajouté à la vedette beaucoup au lieu du curseur. Et puis nous avons ajouté que bien, le contenu principal de nos arcs de bloc, qui était le texte. Nous avons également ajouté quelques images. Ensuite, nous avons ajouté à leurs icônes de médias sociaux la navigation précédente et suivante post. Ils sont liés à la section post, puis à la section Commons. Et bien sûr, nous avons gardé certaines parties de notre image principale. Eh bien, où notre conception principale, qui était l'en-tête, le Cyber et le Pied de page. J' espère donc que vous aimerez ce design et que vous allez partager vos propres designs. Peut-être inspiré par ce design avec notre communauté et certainement si eux bien, je vous encourage à créer vos propres designs quand vous venez avec eux pas nécessairement inspiré par ce design. Mais peut-être que vous n'utilisez rien au concepteur pour concevoir un site Web d'arme sera pour un client. Ce serait génial si vous le partagiez avec nous, donc je bien, jusqu'à la prochaine fois, avoir un beau design