7 projets de conception web GIMP - Apprenez la conception web GIMP par la pratique

1. Gimpwebdesign: Bonjour. Je suis Chris Parker et je suis graphiste professionnel depuis 30 ans, et je me souviens de mon premier design de site web en 2002. C' était horrible. Je n'avais aucune idée de ce que je faisais. Et après 16 ans et des centaines de conceptions de sites Web plus tard, j'ai appris ce qu'il faut faire et ce qu'il ne faut pas faire. Donc, dans ce cours, il est plus qu'une simple question de web design. Il s'agit de concevoir un site Web avec l'utilisateur final et l'esprit, et c'est encore mieux que cela. C' est à propos de faire parce que tu ne vas pas juste me regarder dessiner. Je vous encourage à prendre ce que vous apprenez et à concevoir exactement ce que j'ai créé. Ensuite, il est temps de prendre ce que j'ai conçu et de le faire mieux pour en faire le vôtre. Lorsque vous aurez terminé ce cours de conception Web, vous aurez sept conceptions Web uniques pour votre portefeuille. Maintenant, en plus de concevoir sept sites Web uniques, je vais partager avec vous mes 16 années d'expérience et fournir des conseils riel monde sur la création meilleurs sites Web que les conseils de concepteur moyens sur la vente de services supplémentaires à votre clients et bien plus encore. Ce cours a été conçu pour les débutants et les utilisateurs avancés. Au début du cours, nous allons passer en revue tous les outils de base et vous avez besoin en tant que concepteur Web. Maintenant, si vous êtes déjà familier avec, vous pouvez sauter cette section et plonger directement dans l'anatomie d'un site Web. Donc cette section, nous allons disséquer chaque section d'un site Web pour vous aider à garder vos fichiers PSD organisés. Vous découvrirez ensuite les styles de conception Web les plus populaires, le système de grille, puis vous pourrez commencer sur les sept projets de conception Web. Je vais vous montrer étape par étape, comment créer un site Web de l'en-tête à la section héros, les différents éléments qui composent le corps et enfin, le pied de page. Maintenant, dans chaque projet, vous apprendrez quelque chose de nouveau, et chaque projet s'appuie sur le dernier. Voici donc quelques-unes des choses que vous allez apprendre dans ce cours de conception Web. Vous allez apprendre à créer des conceptions Web qui offrent une excellente expérience utilisateur et pourquoi vous devez créer une excellente expérience utilisateur. Vous apprendrez également comment créer une excellente expérience utilisateur aidera votre client à développer son entreprise et, à son tour, vous aidera à obtenir plus d'affaires vous-même. Vous allez également apprendre ajouter supplémentaire sur les services que vous pouvez vendre vos clients en plus juste Web design. Ensuite, vous allez apprendre les outils pour créer des arrière-plans créatifs qui vous aideront à attirer attention des gens en utilisant l'éclat, masques de couches et plus encore. Vous allez également apprendre ce qu'il faut pour réussir en tant que concepteur Web et vous démarquer parmi les dizaines de milliers d'autres concepteurs Web là-bas. Et cela vous aidera à vous assurer que vous réussissez dans votre carrière de design Web. Vous allez apprendre l'importance de choisir les bonnes polices et autres topographies. Conseils pro. Vous allez également apprendre d'autres conseils professionnels non seulement sur la conception, mais aussi sur la fin commerciale du design et bien plus encore. 2. Introduction à l'anatomie d'un site Web: Bonjour et bienvenue. Très bien, donc dans cette section, nous allons tout apprendre sur l'anatomie d'un site web parce qu'en tant que concepteur web, vous devez connaître la terminologie qui décrit les différentes parties qui composent un site web . De cette façon, nous pouvons communiquer avec d'autres personnes travaillant sur le projet, en particulier avec le développeur web qui est responsable du codage du site Web. Et vous devez être en mesure de montrer et de concevoir les différentes sections, puis de ne nommer aucune section en fonction de la terminologie qui est une norme de l'industrie. Donc nous avons six sections principales qui composent un site web, leur bras ou mais nous allons juste couvrir les six principales, qui couvrent l'en-tête, la navigation, la section héros, le corps, le pied de page et la barre latérale. Donc on va couvrir tous les six d'entre eux allaient regarder quelques exemples, et je vais vous donner quelques conseils professionnels sur chacun de ceux des différentes sections aussi bien. Donc, si vous êtes prêt à tout apprendre sur l'anatomie d'un site Web, faisons-le 3. En-tête: La première section du site est connue sous le nom d'en-tête, qui se trouve ici en haut d'un site Web, de sorte que les en-têtes qui vont orteils ont quelques informations sur le site Web. En général, les types de contenu les plus courants dans cette section sont un logo, un menu et peut-être certains liens de médias sociaux. Vous pourriez aussi faire une recherche Berg comme j'ai ici. J' ai aussi un lien vers des articles tendance ici en haut. Vous pouvez également faire quelques informations de contact de base, comme peut-être une adresse e-mail ou peut-être un numéro de téléphone. Vous pouvez avoir des liens vers des pages de compte de membre, nous avons donc une option de connexion ici. Vous pouvez également faire des choses comme les boutons d'action. Peut-être que vous avez une société de logiciels, et que vous voulez proposer votre logiciel pour un essai gratuit pendant 30 jours. Vous pourriez avoir un bouton d'action froide pour ça. Ou peut-être que vous concevez un site Web pour une organisation à but non lucratif. Tu pourrais faire un don ici. Les possibilités sont infinies pour les boutons d'appel à l'action que vous pouvez inclure là-dedans , et ce ne sont que quelques exemples Maintenant, tout ce que j'ai mentionné jusqu'à présent ne sont que des suggestions pour ce que vous pourriez mettre dans l'en-tête et vous pouvez également mettre les informations Mawr dans l'en-tête. Le problème, c'est vous ne voulez pas mettre trop d'informations. Sinon, il devient trop occupé. Et puis le point focal de cet en-tête est dilué parce que le spectateur traite trop d'informations parce qu'il y a trop de choses à regarder. Mon en-tête est probablement trop occupé, mais c'est pourquoi je l'ai divisé en deux couleurs différentes. Donc, cette zone bleue ici nous avons juste le logo dans le menu, puis le gris foncé. J' ai mes icônes de médias sociaux, recherche et mes articles de tendance ici, et il est séparé de cette partie ici, mais ça fait toujours partie de l'en-tête. C' est donc une façon de concevoir vos en-têtes et loin si vous avez beaucoup d'éléments que vous voulez mettre dans l'en-tête. Mais il est généralement préférable de faire quelque chose de simple, comme un logo, un menu de navigation, puis quelques icônes de médias sociaux. Cela ne signifie pas que vous ne pouvez rien faire de créatif, mais vous pouvez toujours garder la simplicité en faisant quelque chose avec un type de design créatif. Il suffit donc de garder à l'esprit que le but de l'en-tête est de donner à vos téléspectateurs l'occasion de confirmer qu'ils sont sur la bonne page s'ils s'identifient à votre logo et à votre identité de marque, et de leur donner l'occasion de trouver ce qu'ils recherchent via votre menu ou s' ils sont un client existant pour accéder facilement à leur compte existant. Donc, si c'est trop occupé et qu'il y a trop d'informations, vous allez juste rendre les choses difficiles pour vos spectateurs à accéder aux orteils dont ils ont besoin. Donc, dans la plupart des cas, je recommande de limiter votre en-tête à votre logo, votre menu, puis 1 à 2 autres éléments au plus maintenant, d'autres aspects de votre conception d'en-tête peuvent inclure ce qui est connu comme un en-tête collant. Donc, si je commence à faire défiler sur ce site, nous pouvons voir que le menu a disparu. Donc, sur un en-tête collant, lorsque vous commencez à faire défiler, l'en-tête colle en haut de la page du navigateur. C' est donc quelque chose d'autre que vous pouvez créer dans le cadre de votre conception afin d'aider vos internautes à accéder facilement à d'autres parties du site Web. Donc, au lieu d'avoir à faire défiler tout le chemin vers le haut. Un en-tête collant permet aux utilisateurs d'accéder facilement à des pages supplémentaires s'ils ne trouvent pas ce dont ils ont besoin dans la partie interne de cette page Web. Ok, donc dans la leçon suivante, je veux parler un peu plus de notre menu parce que nous avons des options de conception différentes pour cette navigation ou ce menu basé sur le placement ainsi que différents styles de conception pour le lui-même. Donc on va aller de l'avant et jeter un coup d'oeil à ça dans la prochaine leçon. 4. Navigation: Bonjour et bienvenue. Bon, donc dans cette leçon, on va juste passer en revue les différents aspects de votre navigation ou de votre menu. Et en soi, je crois que c'est une section complète de votre site Web qui est séparée de tout le reste. Même si la plupart du temps vous allez le trouver dans l'en-tête, il n'a pas nécessairement besoin d'aller dans l'en-tête. Et je vais te montrer quelques exemples de ça dans une seconde. Donc, pour ce site, nous avons un menu très simple et classique où nous avons trois liens vers trois pages différentes. Un autre type de menu est celui qui a des menus déroulants. Donc, lorsque vous survolez un lien spécifique, vous allez obtenir ce brouillon pour des options supplémentaires. Ceci est donc considéré comme la navigation principale pour ce site particulier. Mais nous avons également une navigation secondaire, qui est cet élément ici. Ces quatre liens sont considérés comme un type secondaire de menu et puis, en cliquant dessus, vous obtiendrez des résultats différents en fonction des catégories pour ces liens particuliers, moins pour ce site Web. Maintenant, tous les sites Web ne vont pas pieds ont un menu secondaire. Tout dépend du site Web et de la quantité d'informations qu'ils peuvent trouver sur leur site Web particulier C'est pourquoi j'ai séparé certains de mes contenus dans un menu secondaire, accessible uniquement aux membres existants. est une autre raison pour laquelle je ne voulais pas mettre ces liens à l'intérieur de la navigation principale à nouveau. C' est un type classique de menu, et il existe un autre type d'option de menu appelé un méga menu qui peut développer la quantité d'informations dans le menu déroulant. Et cela peut être vu à partir de ce site ici. Et quand vous survolez différents types de longueurs, vous aurez différentes options. Donc, ce ici est considéré comme un méga menu parce qu'il a des images incluses avec des liens vers cette page ou article particulier. Et cela est également considéré comme un méga menu parce qu'il a plusieurs colonnes sous un seul titre de menu , et il est divisé en différentes catégories. Basé sur ce contenu de sites Web particuliers à tout moment. Vous avez beaucoup d'informations comme celle-ci, ou des images qui sont considérées comme un méga menu. Maintenant, comme je l'ai déjà mentionné, vous n'avez pas à placer votre menu à l'intérieur de l'en-tête. Vous pouvez le placer dans une barre latérale à gauche ou à droite du site Web. J' ai même vu des menus placés en bas avec des liens pour naviguer vers différentes parties du site Web. Maintenant, neuf fois sur 10, vous allez voir les menus placés dans l'en-tête vs dans une barre latérale ou vers le bas. Ce type de mise en page, où la navigation est dans l'en-tête, c'est la pratique courante. C' est ce à quoi les gens sont habitués. Vous ne voyez pas beaucoup de sites Web avec un menu dans une barre latérale ou même en bas. C' est encore plus rare qu'une barre latérale. Vous voulez donc faciliter l'accès à votre site Web et aux différentes pages de votre site Web afin qu'ils puissent trouver l'information qu'ils veulent. Et si une personne vient sur votre site Web et qu'elle ne connaît pas un menu dans la barre latérale ou que la mise en page est différente parce qu'elle est habituée à ce que le menu soit ici et non pas ici en bas ou sur le côté, alors elle peut deviennent un peu frustrés s'ils ne sont pas en mesure de trouver ce qu'ils recherchent, et ils peuvent devenir frustrés ou désactivés à cause de cette mise en page de conception, parce qu'il avait l'habitude d'avoir quelque chose apparaissant en haut. Ça ne va pas dire que ça va être pareil pour tout le monde. Mais certaines personnes pourraient être éteintes en ayant en cela dans le côté ou le fond. Vous devez donc être au courant de votre audience ou de votre audience de clients et déterminer si c'est quelque chose qui va améliorer la conception du site Web et la fonctionnalité du site Web. Si c'est une foule plus jeune que ce n'est probablement pas grave. Mais si c'est une foule plus âgée, alors vous voudrez peut-être rester avec quelque chose de plus conventionnel avec votre navigation dans l' en-tête. L' autre type d'option que nous avons pour notre menu est de le cacher complètement. Nous ne voyons pas de liens dans l'en-tête, la barre latérale ou le bas ici encore, ce type de conception va dépendre de l'audience attendue pour ce site Web. Maintenant, vous êtes peut-être familier avec l'endroit où se trouve le menu, mais si vous ne l'avez jamais vu auparavant et que vous ne savez pas où chercher le menu, alors vous allez quitter le site Web afin de rendre les choses plus faciles. pour que les internautes trouvent ce qu'ils veulent lorsqu'ils accèdent au site Web. Mais comme vous le savez probablement, cette petite chose ici avec ces trois lignes ressemble à un hamburger, et parfois c'est un hamburger, une icône de hamburger. Vous savez que si vous cliquez dessus, vous obtenez alors vos liens vers les différentes pages du site. Encore une fois, nous avons ici un menu très simple, avec trois liens vers trois options différentes, plus quelques icônes de médias sociaux. Donc en le cachant, oui, ça rend tout plus propre. Et l'accent est plus sur ce qui est dans ce domaine ici que sur ce qui est ici. Donc, le principal avantage de cacher votre menu comme celui-ci serait parce que vous savez que le public de ce site particulier va venir d'utilisateurs qui utilisent une tablette intelligente ou un smartphone. Et c'est beaucoup plus propre lorsque vous n'avez pas beaucoup d'éléments à afficher sur des appareils plus petits et pour ne pas mentionner en fonction de la façon dont le site est couché, vous pouvez réellement charger la page plus rapidement en masquant certains éléments comme le menu ou même ces éléments graphiques ici au taux, ce qui va améliorer l'expérience utilisateur quand quelqu'un va visiter un site Web particulier . Donc, c'est à peu près la seule raison pour laquelle je voudrais utiliser cette option particulière est de le rendre plus propre, concentrer sur quelque chose de spécifique ou parce que les utilisateurs vont utiliser un appareil plus petit par rapport à un moniteur de bureau. L' autre chose que je veux mentionner est à nouveau sur le méga menu, cela va dépendre du public. Si votre client s'attend à ce que la majorité de ses clients ou visiteurs proviennent d'un smartphone ou d'une tablette, il se peut que vous ne vouliez pas faire un méga menu car il sera trop grand sur un petit appareil comme celui-ci. Mais si la plupart de leurs clients et clients utilisent un bout de bureau, accédez à leur site Web, alors vous pouvez être d'accord avec une conception de type méga menu, et vous pouvez obtenir cette information de vos clients. S' ils n'ont pas de site Web existant et qu'ils ont installé Google Analytics sur leur site, ils peuvent entrer et obtenir des informations sur le pourcentage de visiteurs provenant d'un ordinateur ou d'une tablette smartphone et d'autres choses du genre. Donc, vous pouvez savoir que des informations supplémentaires sur les visiteurs existants qui visitent leur site à ce moment. Ok, donc on en a fini avec la navigation. Dans la leçon suivante, nous allons jeter un oeil à cette partie du site, qui s'appelle la section Héros. Donc on va s'attaquer à ça dans la prochaine leçon. 5. Héros,: Ensuite, nous avons notre section de héros, qui est situé en dessous de l'en-tête et ce qui est connu sous le nom ci-dessus le pli, qui est en bas. Donc, tout ce qui est ci-dessous est connu sous le pli. Cela remonte essentiellement à l'époque des journaux. Ils pliaient leurs journaux et la moitié et quand ils l'exposaient sur un nouveau stand, on ne voyait que cette partie du journal au-dessus de ce pli. Donc, pour vous inciter à acheter ce journal, ils mettraient les informations les plus importantes au-dessus du pli. Alors tout ce qui se trouve sous le pli ne serait visible que si vous deviez ouvrir ou dérouler ce journal. Le même concept s'applique donc à votre site web. Vous voulez placer toutes les informations importantes au-dessus du pli, puis si quelqu'un veut voir le contenu sous le pli, il doit faire défiler vers le bas pour le voir. Donc, vous voulez les informations les plus importantes dans une page Web au-dessus du pli, qui inclura votre en-tête. Vous devez leur donner un moyen facile d'accéder à différentes parties de votre site Web pour vous connecter à votre site Web ou à toute autre information disponible dans votre en-tête, puis la section héros va les inciter à continuer à explorer votre site Web ou à les amener à faire quelque chose. Donc, au lieu d'acheter un journal, vous allez leur faire faire quelque chose avec une action appelée orteil. Que veux-tu qu'ils fassent à ce stade dans la section des héros ? Voulez-vous obtenir leur adresse e-mail en échange d'informations pour lesquelles ils sont venus sur votre site Web ? Tu veux qu'ils achètent quelque chose ? Voulez-vous qu'ils en apprennent plus sur un produit afin que vous puissiez ensuite les vendre en achetant ce produit ou ce service ? Donc, la section héros va inclure des informations basées sur l'objectif de votre site Web ou cette page spécifique. Dans ce cas, la page d'accueil va avoir une section de héros qui est définie ou conçue de manière à amener ce spectateur à faire quelque chose. Qu' est-ce que votre client veut que ce visiteur fasse une fois qu'il a atterri sur sa page d'accueil. Cela va déterminer comment vous concevez cette partie du site Web, sorte que la section héros peut être définie comme une grande image en vedette ou une série d'images ou même une légère montre qui affiche en évidence sur votre page d'accueil. Et encore une fois, il doit être au-dessus du pli parce que vous voulez que cette information ou cette image ou images ou diaporama attire l'attention des spectateurs pour attirer leur attention, les intéresser à ce que ce site Web est à propos, puis les amener à faire quelque chose. Ainsi, des études de recherche ont montré que les gens prendront une décision sur un site Web particulier à moins qu'une seconde basée sur cette section de héros. C' est donc l'un des aspects les plus importants de la conception Web parce que vous devez attirer leur attention et le tenir. Sinon, s'ils n'ont aucun intérêt basé sur cette section héros, alors ils vont aller sur le site Web de quelqu'un d'autre et vous allez les perdre en tant que client ou vos clients vont les perdre en tant que client. C' est pourquoi vous allez utiliser une image pour attirer leur attention parce qu'ils cherchent quelque chose de spécifique. Ils ont un problème et ils vont sur un site Web spécifique à la recherche d'une solution. Ainsi, une image peut représenter cette solution ou le contenu ou le texte peut représenter une solution à leur problème, et vous allez leur demander de faire quelque chose en fonction de la façon dont vous allez résoudre leur problème spécifique en ajoutant une action appelée. Donc, une autre chose que vous voulez vous assurer que vous faites lors de la conception d'une section de héros est de le rendre facile à lire, il doit être clair et compréhensible dès le get go. Ils doivent savoir exactement ce que fait cette entreprise ou ce qu'elle offre, parce que si ce n'est pas clair ou facile à lire et qu'ils ne sont pas tout à fait sûrs de ce que fait cette entreprise, alors vous allez perdre ce spectateur. Ils vont aller sur un autre site pour que vous puissiez y parvenir avec plusieurs méthodes différentes . Vous pouvez ajouter des mots clés en fonction de l'objectif de ce site Web, ou en utilisant des mots clés qui expliquent ce que le produit ou le service est qui va résoudre leurs problèmes. Donc, le contenu ou le texte est une méthode pour obtenir la clarté pour ce visiteur particulier du site Web. Ou vous pouvez utiliser une image, ou vous pouvez même utiliser une vidéo qui attirera leur attention parce que si vous le configurez de sorte que la vidéo joue automatiquement, alors cela va automatiquement attirer leur attention parce que la vidéo commence comme dès qu'ils arrivent sur le site Web. Alors allons de l'avant et jetons un coup d'oeil à quelques exemples de différents types de sections de héros que vous pouvez concevoir pour résoudre les problèmes des gens. Donc, Apple utilise son produit principal dans le cadre de l'image du héros, et ils ont du contenu pour l'accompagner. Donc, nous savons exactement ce que ce produit est basé sur l'image ou le texte ou les deux, et nous savons qu'il s'agit d'un smartphone iPhone 10 en particulier. Ensuite, ils doivent appeler les actions. Vous voulez en savoir plus à ce sujet, ou êtes-vous prêt à acheter maintenant ? Donc, selon l'endroit où se trouve ce visiteur, le cycle d'achat déterminera l'action appelée qu'il va prendre afin l'étape suivante pour terminer la solution à son problème. Ils n'ont pas de portable, donc ils veulent acheter. En ce moment, ils ne sont pas sûrs si le tennis iPhone pour eux, donc ils vont cliquer sur en savoir plus. Donc, vous leur demandez de faire quelque chose pour passer à l'étape suivante de ce processus d'achat. Donc, ce design, il est clair que c'est concis. C' est facile à comprendre, et il est facile pour les visiteurs du côté de choisir ce qu'il faut faire ensuite. Maintenant, ce site web a également une image, mais ce n'est pas une image sur un produit ou un service spécifique. Il s'agit plutôt d'un type générique d'image, et cette image remplit toute la section du héros de gauche à droite. Donc, dans ce cas, l'image représente ce que vous pouvez avoir ou réaliser en fonction des produits ou services que cette société vend. Où voulez-vous aller ? C' est ce qu'on appelle l'action. Où voulez-vous aller Selon ce que vous choisissez, vous pouvez atteindre l'objectif de camping dans un terrain de camping ou à une plage ou aller être et regarder les couchers de soleil. C' est le résultat. C' est ce que les gens veulent. Ils veulent s'éloigner de la grande ville, et ils veulent trouver un endroit où ils peuvent faire du camping ou être. Et c'est ce que cette image dépeint et leur donne ce qu'ils peuvent attendre une fois qu'ils trouvent un endroit pour camper ou camping-car ou quoi que ce soit. Un autre type de section de héros serait connu comme la section de héros fondateur, donc ici nous avons une photo du fondateur de cette entreprise particulière, ce qui ajoute de la crédibilité et de l'autorité. Et cette personne est un commerçant bien connu dans l'industrie S E o. Donc, vous pouvez reconnaître cette personne si vous avez atterri sur cette page Web, et vous savez peut-être déjà ce qu'il offre juste en fonction de son image. Encore une fois, il offre quelque chose de gratuit. Conseils de trafic exclusifs pour votre site Web. Donc, l'appel que l'action est Si vous voulez recevoir ces conseils de trafic exclusifs gratuits, puis entrez votre adresse e-mail, inscrivez-vous et puis vous allez obtenir ces conseils gratuits dans votre boîte e-mail. Encore une fois, la section héros est de transmettre ce que vous faites et de donner une solution à un problème que le visiteur peut avoir. Et il a aussi ajouté une certaine crédibilité pour sa compagnie. Basé sur ces bas descend ici. Tout le monde ne peut pas dire qu'ils ont été présentés dans le magazine Entrepreneur , le magazine Forbes , Huffington Post, etc. Encore une fois, la crédibilité comme une autre façon de garder l'intérêt des gens pour votre produit ou service d'entreprise particulier ou vos clients, produits et services. Ce site Web suivant est une autre société qui se spécialise dans le marketing ou le trafic S CEO. Mais cette fois, au lieu d'utiliser une image, c'est juste une section de héros de type contextuel. Mais ça fait la même chose. L' autre est sans images ? Voulez-vous plus de trafic ? Bien sûr. Je veux plus de trafic vers mon site et je suis sûr que vous le faites. Et je suis sûr que vos clients veulent plus de trafic vers leur site Web. Donc, ce que vous allez faire est que vous allez taper l'adresse de votre site Web ici, puis cette société va analyser votre site Web gratuitement et vous donner des suggestions sur la façon d'obtenir plus de trafic sur votre site Web. Donc c'est trop froid. Donc, lors de la conception d'une section héros, vous devez connaître les objectifs du client qui vous a embauché afin de déterminer comment vous allez concevoir la section héros ainsi que l'action froide pour cette section héros. Ensuite, vous devez décider, Allez-vous le rendre basé sur le contexte ? Allez-vous ajouter une image de produit ou une dette d'image fournit un résultat et image fondateur ou une vidéo ou autre chose. Donc, une fois que vous connaissez ces informations que vous avez recueillies auprès de votre client, vous voulez vous assurer que la section héros est heureux au-dessus du pli est clair et concis sur ce que l'entreprise offre ou ce qu'ils font et avoir une action claire de bout froid. Notre haine. Donc c'est tout pour mes conseils sur la section héros. Dans la leçon suivante, nous allons commencer à travailler sur les éléments sous le pli. 6. Corps: la partie suivante de notre site Web est le contenu sous le pli et commence par contenu secondaire qui complète la section héros ou un nouveau contenu supplémentaire. Par exemple, le site Web d'Apple contient du contenu supplémentaire pour des produits supplémentaires qu'il offre ensuite avec le site Web du camping. Il offre un contenu secondaire à la section héros en offrant des endroits populaires pour rechercher des terrains de camping plutôt qu'une recherche générique. Donc, la section corps d'un site Web va être déterminée sur l'entreprise elle-même, ce qu'ils offrent et s'ils ont plusieurs produits qu'ils peuvent offrir. Le concept de conception de cette section est donc à peu près illimité, mais limité à ce que l'entreprise offre maintenant. En plus d'offrir du contenu secondaire ou supplémentaire, vous pouvez réellement faire ce qu'on appelle une conception d'une page, qui va inclure du contenu supplémentaire sur l'entreprise, mais pas nécessairement des produits individuels. Mais au lieu de cela, il pourrait s'agir d'un site Web plus petit qui a une quantité limitée d'informations. Donc, au lieu de les mettre sur des pages individuelles, vous pourriez mettre cette information sur une page. Par exemple, ce site ici. Si nous naviguons vers la page à propos, elle fait défiler vers le bas jusqu'à cette section pour la page d'accueil. Donc, les questions fréquemment posées sont toutes sur la page d'accueil et c'est connu comme une conception d' une page. Et vous pouvez également ajouter d'autres sections à la conception d'une page, comme peut-être une section de contact ou peut-être une section de témoignage. Ainsi, le corps de votre site Web va contenir des informations secondaires, des informations supplémentaires ou toutes les pages de la page d'accueil. Ok, donc ce sont mes conseils pour la section du corps. Il y a beaucoup plus d'informations que nous pouvons consulter pour le corps, car il y a tellement d'informations que vous pouvez mettre dans ce domaine. Et les concepts de conception que vous pouvez trouver sont à peu près illimités, basés sur le contenu de cette section. Donc nous ne pouvons pas vraiment couvrir tout ce que vous vous conduisez dans le corps, mais ce sont les bases de la section du corps. Droit ? Dans la leçon suivante, nous allons jeter un oeil à la section suivante, qui est le pied de page 7. Footer: la section juste en dessous du corps, qui est tout en bas d'un site Web, qui est cette zone ici est connu sous le nom de pied de page. Maintenant, tout comme l'en-tête, il va rester le même d'une page à l'autre. Et le but du pied de page est de donner à vos spectateurs l'occasion de localiser ce dont ils ont besoin et de pouvoir naviguer vers une autre partie du site sans avoir à aller au menu. Parce que tous les sites Web n'ont pas un menu collant et s'ils n'ont pas un accès facile au menu ils peuvent réellement accéder à cette information à partir d'ici maintenant. En plus des liens vers différentes parties du site Web, il y a des informations supplémentaires qui sont généralement placées dans le pied de page comme les politiques de confidentialité , les conditions d'utilisation, ventes et remboursements, plan légal du site et des informations supplémentaires. Nous avons des informations sur les droits d'auteur dans le pied de page ainsi un accès facile à contacter Apple et bien plus encore ce qui se passe dans le pied de page dépend de l'entreprise ce qu'ils veulent atteindre et les objectifs de leur site Web. Maintenant, pour mon site Web en particulier, je n'ai pas beaucoup de liens en bas de mon pied de page. J' ai juste mes longueurs de prise en charge de la politique de confidentialité et des icônes de médias sociaux, qui est très différent de ce que nous avons ici. Une pomme. Donc, le design est entièrement à vous de décider si vous voulez ou non faire simplement des liens, ou si vous voulez le rendre plus créatif ou plus basé sur l'image, vous pouvez ajouter des images ici aussi pour aider les gens à trouver ce dont ils ont besoin. Vous pouvez également mettre une autre barre de recherche ici. Si vous en avez un dans l'en-tête, vous pouvez en mettre un ici est bien, donc il y a beaucoup d'informations que vous pouvez mettre dans le pied de page, et juste parce qu'il est en bas ne signifie pas que vous voulez lésiner sur le design. Oui, c'est OK si c'est juste contextuel, mais vous pouvez ajouter des images dans le pied de page aussi, en fonction du site Web, bien sûr, sûr, pour ajouter un peu d'intérêt à cette zone, à attirer l'attention des gens pour les aider à trouver ce dont ils ont besoin afin qu'ils puissent continuer naviguer vers différentes parties du site Web. Ok, donc c'est le pied de page. Nous avons une autre section à parcourir, donc nous allons le faire dans la prochaine leçon. 8. Sidebar: la dernière section qui crée le banana me d'un site Web est connue sous le nom de la barre latérale. Lorsque vous créez un menu vertical comme cette société a ici, cela est considéré comme une barre latérale. C' est sur le côté, et c'est dans un bar. Donc c'est la barre latérale. Mais un type plus typique de barre latérale est celui que vous verrez sur les sites de type blog ou magazine ou commerce électronique . Et cela va énumérer des informations supplémentaires auxquelles les téléspectateurs pourront accéder, s'ils veulent s'inscrire à un bulletin d'information, des liens vers les médias sociaux, accès à des publications récentes, publications populaires et bien plus encore maintenant. Typiquement, vous ne voulez pas mettre une barre latérale sur votre page d'accueil comme je l'ai fait ici. Et si vous jetez un oeil à Apple, vous pouvez voir qu'ils n'ont pas de barre latérale sur leur page d'accueil du tout parce qu'ils veulent que l'accent soit mis sur les produits et pas nécessairement sur les informations qui pourraient être incluses dans la barre latérale . L' autre endroit où vous ne souhaitez pas ajouter de barre latérale est la page de destination réelle d'un produit spécifique . Donc, ici, nous avons une page produit pour l'iPad pro, et ils n'ont pas nécessairement une barre latérale typique avec les informations que j'ai ici dans ma barre latérale. Donc, lors de la conception d'une barre latérale, vous pouvez et beaucoup d'informations, mais vous voulez vous concentrer sur le style de conception global de cette barre latérale particulière. Par exemple, ici, j'ai une couleur foncée pour l'arrière-plan du titre, j'ai choisi une police spécifique pour les titres, et le design global est assez propre. De cette façon, l'accent est davantage mis sur le contenu et pas nécessairement sur le design. Donc, vous pouvez ou non avoir besoin de concevoir une barre latérale pour aller avec le site Web, et encore une fois cela dépend du site Web. Les objectifs de ce site Web et de votre client. Très bien, donc ce sont les objets Thesixties qui composent l'anatomie d'un site web. Dans les prochaines leçons, je veux juste passer en revue quelques meilleures pratiques de conception avant de nous lancer dans la conception des différentes parties de notre site Web. 9. Introduction à la section styles de conception: Bonjour et bienvenue une fois de plus. Bon, donc dans cette section, nous allons tout apprendre sur les styles de web design, et la première chose que nous allons faire est de prendre un pas vers la mémoire et jeter un oeil à quelques conceptions Web créées de 15 à 20 ans Il y a. Ainsi, nous pouvons apprendre ce qu'il ne faut pas faire lors de la conception de sites Web, mais aussi vous donner quelques conseils professionnels supplémentaires en cours de route. Après cela, je vais partager avec vous les sept styles de design Web les plus populaires en 2019. Si vous regardez cela dans une année différente de ces styles de design Web populaires, peut-être différent. Vous voulez donc vous assurer d'être à jour chaque année sur les styles de design les plus populaires . Très bien, donc après avoir traversé cela, allaient alors jeter un oeil à certains endroits qui affaiblissent aller chercher de l'inspiration afin que nous puissions avoir quelques idées sur la façon de concevoir un projet spécifique sur lequel nous travaillons. Donc, si vous êtes prêt, orteil, apprenez tout sur ce que les styles de design ont conduit à le faire 10. Mes réflexions sur les styles de conception: bonjour et bienvenue à un tarif. Donc, dans cette leçon, je veux juste passer brièvement en revue quelques informations sur les tendances du design Web. Les tendances sont comme l'industrie de la mode. Ils sont à la mode jusqu'à ce qu'ils ne le soient pas. Il y a des choses qui ont été faites dans les années 90, comme ce site Web particulier qui est pur mal ou des choses que je ne ferais plus jamais. C' est juste horrible. Et la conception Web a fait beaucoup de chemin depuis l'introduction du World Wide Web et des sites Web que nous avions l' habitude de visiter à l'époque à travers tant de choses qui ne sont pas dans cette conception Web particulière . Je ne sais pas par où commencer, sauf pour dire, si jamais vous avez une chance, suffit de faire une recherche Google pour les conceptions Web des années 90 et vous trouverez des sites qui sont toujours vivants et actifs qui ont été conçus dans le Fin des années 90, et vous allez voir beaucoup de choses que vous ne devriez pas faire de nos jours. Mais cela étant dit, si nous avançons rapidement jusqu'en 2004, nous avions encore des sites Web qui étaient en cours de conception commettaient beaucoup trop d'erreurs, et c'est tellement occupé, je ne sais pas où chercher. Ils vendent beaucoup de choses, apparemment, et je ne suis pas sûr de ce qu'ils essaient de réaliser. Mais c'est tellement occupé et c'est quelque chose que je recommande de faire. Quand il s'agit d'un design Web, il y a beaucoup de styles différents. Il y a beaucoup de tendances différentes. Différents types de tendances vont et viennent. Ils deviennent obsolètes parce que tout le monde commence à le faire. Et les propriétaires d'entreprises qui gèrent ces sites Web veulent se démarquer de leur concurrence. Ils vont donc refaire leur site Web en fonction de la dernière tendance. Et il continue de changer encore et encore parce que les tendances changent constamment. Mais les sites Web qui continuent d'utiliser le même type de conception de base comme Media Temple. Il s'agit d'un site plus moderne et classique propre et même s'ils changent parfois les choses autour d'un peu, la marque globale pour leur entreprise particulière reste la même. Ils utilisent les mêmes schémas de couleurs. Ils utilisent un style de conception très similaire, qui est moderne et propre. Ce type de style résistera à l'épreuve du temps. Il ne deviendra pas obsolète car il n'utilise pas beaucoup d'éléments graphiques et c'est propre. Mais en même temps, si vous jetez un oeil à ce site, vous pouvez voir qu'ils utilisent beaucoup de graphiques et comme vous pouvez le voir, il est semi-occupé. Ils utilisent des éléments graphiques de la fin des années 90 avec le bouton Grady, euh, ici et d'autres éléments aussi. Mais cette entreprise est une énorme entreprise et ils sont très populaires dans le monde du marketing pour les experts des médias sociaux et ceux qui veulent devenir des experts et des médias sociaux et développer leur activité via les médias sociaux. Ainsi, vous pouvez toujours concevoir quelque chose comme ça et avoir un site Web réussi. Ce site web a donc un thème, et le design de ce thème ou de leur marque est conçu en conséquence pour ce que leur message tente de dépeindre. Il s'agit donc de savoir ce que votre client essaie de réaliser, ce que son site Web, puis vous devez décider quelle est sa marque. Ont-ils déjà une marque spécifique en place ? Alors c'est ce que vous allez concevoir le site web autour de ça. Si vous avez été contacté par un temple des médias pour mettre à jour leur site Web existant et que vous avez proposé ce type de style de conception, ils vont probablement le rejeter parce qu'il ne correspond pas à leur marque particulière qu' ils ont déjà établie Mais si vous avez un client qui n'a pas marque en place, alors c'est ce qu'il faut d'abord développer et savoir ce qu'il essaie de dire. Quel est leur message et comment veulent-ils le dépeindre avec leur marque ? Parfois, le web design vient après le développement d'une marque et d'un logo. Mais souvent, les clients obtiennent un logo d'abord basé sur ce qu'ils aiment, puis cela devient leur marque, puis leur site Web est conçu autour d'elle. Mais cela ne signifie pas que ce design particulier coexiste avec leur message particulier. Par exemple, un médecin obtiendra probablement d'abord un logo, puis nous allons vouloir un design Web. Mais ils pourraient aimer ce type de style. C' est ce qu'ils aiment personnellement, mais cela ne correspond pas à ce qu'ils essaient de faire sur le marché. Ils essaient de construire un cabinet avec plus de clients. Ce type de style ne représentera pas ce qu'ils tentent de réaliser ni le type d' entreprise dans lequel ils se trouvent. C' est au moins mon point de vue personnel sur ce design particulier par rapport à une industrie professionnelle . Je ne soumettrais pas ce type de style de design à un médecin professionnel ou à quelqu'un d'autre dans d'autres types d'industries professionnelles. Donc, la conception doit correspondre à l'industrie dans laquelle se trouve cette personne en particulier. Cette entreprise particulière est basée sur les médias sociaux et leurs messages médias sociaux, jungle et qui coexiste ce que leur industrie particulière. Parce que si vous savez quoi que ce soit sur le marketing et les médias sociaux, c'est une jungle. Il y a beaucoup de choses qui se passent, et ils sont de marque, et leur conception de ce site Web particulier fonctionne pour ce message particulier. Donc, quand il s'agit de concevoir des sites Web, vous devez décider quel genre de designer êtes-vous ? Êtes-vous celui qui va être plus créatif et fournir des graphismes comme celui-ci ? C' est le style que tu aimes ? Ensuite, vous devez construire votre portefeuille en fonction de cela, puis vous devez localiser les clients qui vont apprécier votre style. Mais si tu veux essayer de concevoir pour tout le monde, tu auras plus de mal à essayer d'apaiser tout le monde. Parce que maintenant vous allez devoir avoir un portfolio avec ce style moderne, classique et propre et d'autres styles aussi bien que ce style particulier. Donc, si vous vous concentrez sur un style particulier. Ensuite, vous serez en mesure d'attirer les clients qui, comme ce style moi personnellement. Je préfère les modèles de type plus propres, classiques et modernes par rapport à ce type de design. Donc je n'ai jamais rien conçu comme ça. Je fais des designs plus modernes et propres par rapport aux sites Web qui ont beaucoup de graphismes, et l'autre chose que je n'aime pas faire est d'appliquer Grady INT aux menus. J' aime mes boutons, et mes hommes étaient plats. Je ne veux pas que les distractions des graphiques, d'autres types d'éléments, d' ingrédients distraient ce que je veux que mes lecteurs fassent. Et c'est de naviguer facilement sans aucune distraction. Encore une fois, c'est ma préférence personnelle. Dans mon style personnel, vous pouvez aimer quelque chose de complètement différent, et basé sur ce que vous apprenez dans les projets de ce cours, n' est qu'un point de départ. Vous devez faire des recherches sur les tendances du design numérique. Faites une recherche Google pour les tendances de conception Web, et vous verrez chaque année il y a de nouvelles tendances de conception en cours d'introduction ici. Nous avons 13 tendances de conception Web à surveiller en 2017, vous devez être à jour sur ce qui va probablement être en tendance pour cette année parce que vos clients verront ces types d'éléments de conception être utilisés sur leurs sites concurrents et ils sont va vouloir la même chose pour leur propre. Et vous devez savoir si c'est quelque chose que vous voulez offrir ou non. Et encore une fois, vous devez communiquer avec le client et lui faire savoir qu'une tendance de conception ne signifie pas nécessairement qu'il va réussir avec ce site Web. Qu' est-ce qu'ils essaient de faire de leur site web ? Est-ce qu'il essaie de gagner des clients ou est-ce juste un site web personnel avec un pistolet ? Si ces tendances de conception détournent les visiteurs et les visiteurs qui ne parviennent pas à naviguer pour obtenir l'information qu' ils veulent, ils vont quitter le site Web et ne pas acheter ou fournir une adresse e-mail. Et votre client perd sur ce client particulier parce que vous avez conçu le site Web avec des éléments qui ne vont pas aider ce propriétaire d'entreprise à atteindre ce qu'il veut. Donc, avant la conception Web vient la communication avec votre client pour savoir exactement ce qu' ils veulent réaliser avec leur site Web, puis découvrir leur marque et puis concevoir le site Web autour de cette marque. S' ils n'ont pas de marque ou de logo, alors vous avez la possibilité de vendre vos services de conception pour leur fournir un logo et une marque, puis sur le site Web correspondant à cette marque. 11. 7 styles de conception populaires: Bonjour et bienvenue. Bon, donc pour ça, j'ai dit qu'on allait passer en revue différents types de styles de design. Il y a beaucoup de différents types de styles de design et nous allons seulement passer en revue environ sept styles de design différents. Dans cette leçon. Il y a certainement Mawr et ces air, les plus populaires à partir d'aujourd'hui. Maintenant, 15 ans, il y avait des styles de design qui étaient très populaires alors qui ne sont pas vraiment utilisés beaucoup aujourd'hui. Mais cela ne signifie pas que ces styles de design ne reviendront pas à la mode et ne deviendront pas plus populaires que ce qui est populaire aujourd'hui. Donc nous ne allons pas vraiment couvrir ce qui était populaire il y a 15 ans. Espérons que certains de ces styles de design ne reviendront pas parce qu'ils sont hideux. Et je ne les utiliserais jamais dans mes conceptions de sites Web de toute façon, donc nous le limiterons à ces types de designs les plus populaires. À partir de maintenant. Maintenant, en ce qui concerne votre portefeuille, vous devez représenter votre style ou votre style de design avec des designs que vous préférez créer . Vous devriez avoir un type spécifique de style de conception, et vous pouvez prendre les sept principaux types de styles de conception et créer votre propre design à partir de ceux-ci. Ou vous pouvez coller avec les bases de chaque style de conception serré et en se concentrant sur les conceptions que vous préférez créer. Ensuite, il sera plus facile de trouver des clients qui apprécient votre style particulier si vous essayez de représenter les sept styles de design différents que vous essayez d'accommoder tous les types de clients, types de clients, et il sera beaucoup plus difficile de grandir votre entreprise ou obtenir plus d'emplois parce que vous n'êtes pas concentré sur un type spécifique de style. Et c'est parce que lorsque vous vous spécialisez dans un style spécifique, il est plus facile de se concentrer sur la recherche de clients qui, comme ce style spécifique, plutôt que d'essayer de tout faire pour tout le monde. Ok, avec cela à l'esprit, allons de l'avant et jetons un coup d'oeil aux sept différents types de styles de design. Donc, les premiers à concevoir des styles que nous allons regarder sont connus comme le design plat et le réalisme , ou aussi connu sous le nom de brochette morph ism. Au début, dans l'histoire de la conception Web, réalisme était le design populaire de choix non seulement dans la conception Web mais aussi l'interface utilisateur conçue . Par exemple, ici, nous pouvons voir les deux styles de conception qu'Apple avait appliqué à son système d'exploitation pour ses smartphones, et ce sont des tablettes à différents moments dans l'histoire. Donc, ici à droite, nous avons le design réaliste et plus à gauche. Nous avons un design plat, donc dans le réalisme, nous avons beaucoup plus de détails dans les icônes. Nous avons des textures , des navettes, même des photos réalistes pour certaines icônes, puis sur la gauche. La plupart de ces détails ont été dépouillés, ce qui nous donne notre style de design plat. Ainsi, vous pouvez penser à ces styles de conception comme l'esthétique visuelle des éléments de ces icônes ou de la page Web ou de l'interface, ou quoi que ce soit que vous concevez. Voici un autre exemple. Donc, à gauche, nous avons le réalisme à droite. Nous avons un design plat. Voici un autre design plat, donc il n'y a pas beaucoup de détails. n'y a pas d'ombres portées, de textures ou de détails dans les graphiques eux-mêmes. La même chose avec celle-là. Il a un peu d'ombre portée ici sur cette icône et cette icône ici, mais dans l'ensemble, c'est un type assez plat de design, et plus à 99 dessins, c'est oui, ils ont un post sanguin sur l'école, plus de conceptions FIC, et vous pouvez voir une tonne d'exemples pour ce style de conception particulier. Et vous pouvez voir qu'il y a certainement plus de détails dans les icônes et les abdos et tout le reste . Pour ces designs particuliers, il y a une texture détaillée. Il y a des ombres portées, des reflets et bien plus encore pour lui donner ce type de look réaliste. Donc, quand il s'agit de choisir l'un de ces styles de design plutôt que l'autre, je préfère le design plat et je m'appelle paresseux. Mais les conceptions fuyées sont plus faciles à créer et moins de temps à créer. Cependant, le plus grand avantage de la conception plate est le faible temps. Il faut moins de temps pour charger une page Web dans votre navigateur ou votre smartphone ou tablette à l'intérieur de ce navigateur, par rapport à un design réaliste avec toutes ses textures et ombres et photos et Grady INT, etcetera. Par conséquent, un design plat a une meilleure chance de classement et de recherche, par rapport à un design réaliste basé sur la vitesse de chargement de ce site. Maintenant, il y a d'autres facteurs, bien sûr, qui entrent dans le classement d'un site Web aussi, mais la vitesse est l'un d'entre eux, donc plus votre site Web se charge rapidement, plus vous obtenez de Google ou d'autres recherches en fonction de la vitesse à laquelle ce site Web se charge. En fin de compte, cependant, il s'agit d'une question de préférence personnelle, identité de marque de votre client et de l'objectif du site. Bon, maintenant, jetons un coup d'oeil à un autre style de design sur celui que nous allons regarder est appelé minimaliste. Souvent minimaliste peut être confondu avec le style de design plat. Cependant, il y a une différence nette. Un style de design plat et le style de réalisme, d'ailleurs fait référence à l'esthétique visuelle des éléments d'une page Web les menus, boutons, arrière-plans et tout autre graphique qui composent la page. minimalisme, d'autre part, fait référence à une philosophie de design. Moins est plus en tant que concepteur, votre objectif est seulement orteil. Ajoutez les éléments les plus essentiels et nécessaires pour atteindre l'objectif de cette page Web, c'est pourquoi elle est parfois confondue avec le design plat, car elle aussi est bien, minime dans sa conception. Cependant, la différence n'est pas dans les éléments graphiques eux-mêmes ou l'esthétique visuelle, mais combien d'éléments sont utilisés dans un design à nouveau, Less est plus. Jetons un coup d'oeil à quelques exemples, donc Apple nous fournit un parfait exemple de minimalisme. Nous avons un en-tête en haut avec quelques éléments de menu. Nous avons un contenu qui est très direct au point. Nous avons quelques boutons d'action appelés et puis nous avons un produit très, très simple. n'y a vraiment pas besoin d'ajouter quoi que ce soit d'autre à cela parce que vous savez exactement ce qu' est cette page particulière. L' iPhone 10. Soit vous voulez en savoir plus, soit vous voulez acheter. Maintenant, c'est très minime. Même chose avec ce site ici, bien qu'ils utilisent une image pour l'arrière-plan. Mais c'est encore très simple et au point que vous savez exactement ce qu'ils font en fonction de l' image et du contenu ici. Et puis vous avez des options pour naviguer vers d'autres parties du site très minime, puis le site suivant est minime aussi. Il est décomposé avec le contenu sur le produit de côté au milieu, puis quelques informations supplémentaires sur la droite, donc c'est très minime et au point. Notre prochain style de design est un peu plus à l'opposé du minimalisme et peut-être même du design plat , parce que l'esthétique des éléments graphiques a beaucoup plus d'informations ou de détails, donc nous allons jeter un oeil à un design rétro style. Donc, ce style englobe le verset Mawr moins. Et comme je l'ai mentionné, il a un peu de réalisme en elle aussi de dépeindre les éléments qui composent la page pour, eh bien, eh bien, lui donner un look de type rétro. Et ce style de design est un goût acquis, et il sera limité en fonction de l'identité de la marque de votre client, ses objectifs pour son site Web et de ce qu'ils tentent de représenter avec leur style de design particulier ou leur look. Bon, alors allons de l'avant et jetons un coup d'oeil à quelques designs rétro juste pour avoir une idée de ce que nous pouvons faire avec ce style particulier et comment le créer. Donc, un design rétro est composé de différents éléments pour lui donner cette sensation rétro, et qui peut inclure des bannières et des rubans, le type de texte et, bien sûr, d'autres éléments typographiques, comme celui-ci peu de bord autour du contenu qui est effiloché et ressemble en quelque sorte à un type de papier old school et puis, bien sûr, d'autres éléments et polices ainsi. Ce site particulier a une sensation de réalisme à lui ainsi qu'une sensation rétro, et c'est basé sur les images qui sont utilisées pour lui donner. Ce look rétro a un processus de 1/2 ton. Appliquer aux images, ce qui s'est produit dans la journée lors de l'impression sur une presse. Et puis, bien sûr, l'utilisation de polices particulières et d'autres éléments graphiques ajoute également à l'ambiance rétro, sorte que vous pouvez mélanger et assortir différents styles pour trouver votre propre style. Donc celui-ci, bien sûr, le rétro et le réalisme ont été mélangés pour ce design particulier. Celui-ci a essentiellement fait la même chose en ajoutant du réalisme avec une vraie photo et ensuite des types spécifiques de polices pour lui donner une sensation rétro. Celui-ci utilise une combinaison de polices, de couleurs et d'éléments graphiques pour lui donner cette sensation rétro. Ces couleurs particulières ici, les gris et les oranges, sont représentatives de ce qui a été utilisé dans les années cinquante et soixante. Bien sûr, il y a d'autres couleurs ainsi, en fonction de la période de temps, Mais ces air quelques couleurs populaires de ces périodes de temps. Celui-ci utilise une combinaison d'éléments graphiques, de texte et de différents types de couleurs rétro pour compléter le design rétro, ainsi que quelques éléments graphiques qui sont presque réalistes dans la nature en fonction de la quantité de texture et détail dans les oiseaux et les chiens et des choses comme ça. Donc, ce sont tous différents types de façons que vous pouvez créer un design rétro. Mais encore une fois, c'est un goût acquis, et ce sera peut-être quelque chose que votre client va vouloir et demandé spécifiquement. Vous pouvez également recommander quelque chose en fonction de leur clientèle et de leur identité de marque particulière. Très bien, donc le prochain style de conception que je veux partager avec vous est connu comme un style de conception d'illustration . Donc, il va se composer principalement d'illustrations par rapport à des photos. Ainsi, ce style de conception peut être composé d'illustrations qui sont soit plates, soit ont un aspect plus réaliste. Ou, si vous vous sentez vraiment créatif, vous pouvez faire un hybride à la fois plat et réaliste avec votre design Web illustré. Donc, ces types de conceptions donnent le sentiment d'un type d' environnement amusant et décontracté et tout comme certains autres styles de design, choix de ce type spécifique de style de design dépendra de votre client particulier et leur identité de marque. Alors allons de l'avant et jetons un coup d'oeil à quelques exemples. Maintenant, comme tous nos différents styles de design, les illustrations elles-mêmes peuvent également venir dans différents types de styles. Donc, pour ce site particulier, nous avons une illustration avec quelques textures sur les éléments qui ont été dessinés pour ce site particulier. Cette suivante a également des éléments graphiques qui ont des textures dans les illustrations ou Grady INT. Mais certains des éléments sont aussi plats et design, sorte que vous pouvez mélanger et assortir cela aussi bien avec vos illustrations. Et puis un autre style d'illustration est de créer un effet de type trois D. Ou, si vous êtes à la vieille école et que votre client est à la vieille école et que vous voulez faire plus d'un dessin au crayon de type illustratif de vos personnages, vous pouvez le faire. Et ce site Web intègre ce type d'illustration ainsi que des photos réalistes pour plus de réalisme pour vendre leur produit particulier. Mais tout au long du site, vous remarquerez qu'il y a beaucoup d'autres types d'illustrations qui sont incorporés dans la conception du site Web. Et bien sûr, il y a d'autres types de médiums aussi. Celle-ci, en particulier, utilise une illustration aquarelle comme image dominante pour son site web. Ainsi, vous pouvez considérer le design illustratif comme un autre concept que vous pouvez promouvoir pour différents types de sites Web en fonction de l'orteil client et de l'identité de marque de cette entreprise particulière. Et puis, bien sûr, vous devez décider du style de cette illustration. Une fois que vous décidez que vous voulez aller avec ce style de conception particulier pour un site Web, donc ce n'est pas seulement une question d'accord. Je veux faire des dessins de type illustratifs. Eh bien, quel genre d'illustrations voulez-vous dio dessins au crayon à l'aquarelle au charbon de bois, trois dessins D plats ? Il y a donc beaucoup plus de décisions qui vont dans la création d'un design Web de type illustratif . Très bien, donc le prochain design, donc I Want to Share with You, est connu comme un style grunge, qui, peu comme le design rétro est l'opposé du minimalisme. Runge est tout sauf minime, voire symétrique ou équilibré. Grunge a un look sale avec vos éléments visuels réguliers, parfois pas si jolis. C' est un autre de ces styles de design qui se limitera au goût de votre client ou à son identité de marque, ou même au public qu'ils recherchent. Ainsi, vous pouvez penser à grunts style pour peut-être rock ou même pendant grunge musiciens ou même d'autres types d'entreprises qui répondent à ces musiciens ou artistes. Donc, ils peuvent être plus enclins à utiliser ce type particulier de style de conception plutôt , disons que, disons, un médecin ou un dentiste. Jetons un coup d'oeil à quelques designs de style run, tout comme avec le style rétro. Les éléments qui composent la page, les textures et les images utilisées créeront cet effet grunge. Ainsi, les polices utilisées sont plus d'un type grunge d'une police et la texture globale et superposant cette texture sur les images ainsi que sur les autres éléments de conception. Donnez-lui ce look grunge ou cette sensation grunge dans ce site particulier. Celui-ci est bien, utilise quelques éléments graphiques pour créer ce look grunge, et cela est basé sur le graphique de fond ici, où il ressemble au papier ou le site Web est tor ou déchiré, et il a une sensation grunge, ainsi que les polices qui sont utilisées dans le cadre du logo, crée une sensation grunge. Notre style de conception Web final est connu sous le nom de style géo métrique, qui consiste à utiliser des formes ou d'autres éléments graphiques d'une manière qui soit visuellement agréable à l'œil. Et il peut même fournir une composition avec ces formes géométriques qui conduit un visiteur dans la direction que vous voulez prendre. Avec ce site Web particulier, ils utilisent différentes formes géométriques qui ne sont pas compatibles avec ce que nous avons vu dans le passé d'autres sites Web sous la forme de carrés, de rectangles ou même de cercles. Cette forme géométrique particulière n'est pas utilisée autant que ces autres formes, et elle fait un design intéressant et organise toutes ces photos, textes et contenus différents en eux pour aider à organiser et à trouver facilement ce que nous voulons trouver. Ce site Web suivant utilise également des formes géométriques pour mettre du contenu à l'intérieur, pour le séparer des autres contenus, et visuellement il le rend beaucoup plus facile à visualiser plutôt que de tout simplement le disperser sur quelques rectangles. Et c'est essentiellement ce que vous voyez sur beaucoup de sites Web est juste contenu dans des carrés, des rectangles ou des cercles, et celui-ci utilise différentes formes géométriques dans le cadre de la conception. Ce qui est beaucoup plus intéressant, je pense, que le type de formes conventionnelles que nous avons utilisées dans le passé. Celui-ci utilise des formes géométriques pour contenir du contenu, mais il le fait d'une manière plus unique et simplifiée par rapport aux deux autres sites. Mais il limite encore ce contenu dans les formes géométriques. Et il le fait d'une manière qui nous donne envie de suivre cette flèche ici, défiler vers le bas et de continuer notre voyage basé sur cette forme géométrique où il crée ce pointeur pointant vers le bas, qui est un bon moyen visuel d'obtenir votre pour continuer à faire défiler le reste de la page. C' est donc juste une autre façon d'utiliser des formes géométriques dans vos conceptions. D' accord, donc nous avons couvert sept types différents de styles de design et les designs. La façon dont vous choisissez pour un projet spécifique dépendra du client, de l' identité de la marque et de son public. Vous devez prendre tout cela en considération avant de décider d'un style de conception. Mais si vous vous spécialisez dans un style de conception spécifique, alors vous savez que les clients qui viennent à vous vont s'attendre à ce style de conception particulier . Et vous n'avez pas trop à vous soucier de vous concentrer sur le style de design à choisir, car ils vous choisissent pour votre spécialité. Ok, donc c'est tout pour nos styles de design Web dans la section suivante ou la leçon suivante que nous allons commencer à prendre. Regardez l'anatomie d'un site Web, toutes les différentes sections et parties qui composent une page Web. Nous allons entrer dans chacune de ces sections en détail, et je vais vous donner quelques conseils professionnels et quelques bonnes pratiques pour concevoir chacune de ces sections. Donc, si vous êtes prêt à y arriver, faisons-le. 12. Inspirez-vous: Parlons de s'inspirer, en tant que concepteur Web, des meilleures pratiques et des choses à éviter . Donc, probablement la chose la plus simple à faire est juste de faire une recherche Google pour des idées de conception Web. Meilleures conceptions Web. Ou peut-être que si vous êtes coincé sur une partie spécifique du site Web, vous pouvez faire du design Web, idées d'en-tête, Web design, idées de pied de page, choses comme ça pour obtenir une certaine inspiration pour votre projet actuel. C' est donc une façon de s'inspirer par Google. L' autre est à travers 99 designs, et c'est un lieu de sourcing de foule où vous pouvez aller en tant que graphiste et enchérir sur des emplois. Alors, quel est votre concepteur A et vous êtes membre de cette communauté. Vous pouvez y aller et parcourir les concours, et vous pouvez filtrer jusqu'à ce que vous avez besoin d'inspiration. Donc ici, j'ai des projets de conception Web et APP, et il y a plus de 14 000 projets en ce moment qui sont fermés que je peux filtrer et rechercher aide pour les orteils, me donner de l'inspiration pour mon projet actuel et avoir également sélectionné des projets finis par rapport à ouvert parce que open ne va pas toujours vous montrer des conceptions pour ce projet particulier parce que beaucoup d'entre eux sont des projets aveugles, il est donc préférable d'entrer dans le statut fini et ensuite vous pouvez naviguer à différents concours pour voir ces différents types de modèles pour s'inspirer à partir de maintenant. La seule chose que vous ne voulez pas faire est que vous ne voulez pas copier un dessin. Exactement. Donc ici, nous pouvons voir pour ce concours particulier. C' est la conception gagnante que le client a choisie. Et si vous décidez de créer un site Web, ce soit par vous-même ou par le biais d'un service comme 99 designs, surtout si vous allez être concepteur sur cette plateforme de crowdsourcing, vous allez être démarré à partir de la plateforme parce que vous trouverez dans le code de conduite du concepteur que faire des œuvres d'art originales est un must. Si vous copiez cette conception particulière et essayez de la vendre à un autre client, vous serez suspendu de cette communauté et vous ne serez plus en mesure de remorquer les travaux par l'intermédiaire cette société, donc ils ont une politique de suspension qui lie à ce code de conduite du concepteur . Cela explique que vous devez faire un travail original car tous les dessins sont par défaut par le copyright de l'artiste original. Et en copiant cet artiste, vous enfreignez son droit d'auteur, et vous serez banni de ces sites de crowdsourcing. Non seulement cela, si, par exemple, vous travaillez pour une entreprise technologique et que vous allez sur le site d'Apple et vous dites, Vous savez quoi ? J' adore leur mise en page et vous copiez leur mise en page exactement. Eh bien, devine quoi ? En fin de compte, Apple va le découvrir parce que votre entreprise est en pleine croissance et que la conception de votre site Web est exactement comme la leur. Ils vont vous contacter, et ils vont vous poursuivre pour avoir volé leur design Web. Quelqu' un a conçu ce site, qu'il s'agisse d'une entreprise distincte ou d'une personne au sein de l'entreprise. Apple possède ce design particulier, et vous ne pouvez pas le copier exactement. Sinon, vous allez enfreindre leurs droits d'auteur, et ils vont vous poursuivre en justice pour ce vol. Alors quoi que vous fassiez, ne volez pas les conceptions de sites Web d'autres personnes. L' autre chose que vous devez considérer est l'imagerie et tout type d'image clipart que vous utilisez dans votre conception Web. Les deux sont protégés par le droit d'auteur, selon la licence accordée pour cette œuvre d'art particulière. La plupart des images de stock lorsque vous allez à stock photos dot com, par exemple, toutes ces images ont un droit d'auteur, et vous devez payer une licence pour l'utiliser. Mais vous pouvez utiliser ces images avec un filigrane de droit d'auteur sur elles dans le cadre de votre conception. Mais vous devez faire savoir à votre client que ces images particulières sont protégées par le droit d'auteur et s'ils veulent utiliser exactement la même image qu'ils doivent payer les droits pour l'utiliser de la même manière avec clipart. Si vous utilisez un clippard protégé par le droit d'auteur, vous devez payer des frais de licence. Ou parfois quand il s'agit de clipart art, le créateur de ce Clipper demandera une attribution qui dit, Ce site particulier a été créé avec clipart art, puis vous fournissez un lien vers cet artiste. Donc c'est quelque chose que tu mettrais dans le pied de page. Vous voulez donc connaître le contrat de licence pour cette œuvre d'art particulière que vous souhaitez utiliser pour un site Web avant de l'utiliser sur un site de vie. Donc, par exemple, cette petite icône de recherche ici a été créée par quelqu'un un un designer a créé cela, et si vous deviez trouver cette loupe particulière en ligne et que vous avez volé image particulière sans donner un attribution ou payer pour une licence que ce graphiste peut fondamentalement revenir. Et donc vous comme Apple l'a fait. N' utilisez donc aucun type d'imagerie ou d'image clipart sans savoir au préalable quelle est l' utilisation des droits d'auteur et la licence pour cette œuvre particulière avant de l'utiliser. Ce sont des pratiques exemplaires. Alors quoi que tu fasses, ne voles pas le travail des autres. Assurez-vous que tout est sous licence correctement. Avant de commencer à l'utiliser sur des sites de vie ou même dans des concours comme à travers 99 designs. Vous ne souhaitez pas utiliser les œuvres protégées par le droit d'auteur. Sinon, vous allez être démarré de leur communauté. Donc, quand vous regardez différents sites Web pour vous inspirer, vous devez vous poser la question. Ok, j'aime la mise en page. J' aime les couleurs. J' aime les polices, mais que puis-je faire pour les améliorer ? Eh bien, la société pour laquelle vous travaillez, ils vont avoir une identité de marque différente de cette société ici. Ils vont avoir des couleurs différentes et peut-être des polices différentes qui font partie de leur identité de marque , donc ça va être différent. Mais l'autre chose que vous pouvez faire différemment est de réorganiser certains éléments utilisés images différentes . Vous ne voulez pas utiliser cette image ici. Vous voulez faire de votre section héros peut-être une taille différente. Peut-être qu'au lieu d'un fond perdu sur l'image, vous le limitez à la taille de ce contenu, qui est cette information ici. Donc peut-être que c'est 960 pixels de large. Donc, vous feriez cette image de cette taille de sorte qu'elle s'alignera vers la gauche et la droite du contenu, ce qui fait une différence. Je pourrais peut-être déplacer le menu ici en haut, peut-être placer cette information de contenu ici avec les éléments de recherche apparaissent. Si leurs éléments de recherche, peut-être que vous voulez ajouter une naissance de recherche, donc cela va faire une différence. Vous ne voulez pas faire exactement la même chose. Mais peut-être que vous aimez l'ombrage dans l'ombre portée de cette zone de menu ici. Donc, vous pourriez vraiment retourner ça et déplacer ça vers le haut. Vous pouvez déplacer le logo à l'intérieur vers la gauche du menu. Vous réutilisez simplement l'ombrage pour ce menu particulier. Mais vous réorganisez les éléments de sorte que vous obtenez vos propres designs uniques de la même manière que les icônes. Vous ne voulez pas utiliser exactement la même icône. Voulez-vous trouver différentes icônes ou créer vos propres icônes pour rendre le design global différent ? Donc, c'est comme ça que je vais trouver l'inspiration pour un projet particulier sur lequel je travaille est de trouver l'identité de marque de mon client , de trouver les couleurs et les polices que je veux utiliser d'abord, puis de commencer construire les différentes sections de leur page Web en fonction de ce dont ils ont besoin. Ont-ils besoin d'une barre latérale ? Si non ? Tu n'as pas à t'inquiéter pour la barre latérale. Ils vont avoir besoin d'un en-tête. Ils vont avoir besoin de navigation. Et puis c'est juste une question de décider comment vous allez tout étaler. Plus l'esthétique visuelle de l'en-tête, qui serait l'ombre portée pour l'arrière-plan du menu et tout autre chose comme faras. Le style va du texte et de tous les autres types d'éléments graphiques pour cette section particulière 13. Introduction au système de grille: d' accord. Je sais que vous êtes probablement impatient de commencer à concevoir nos projets, mais il y a une autre chose que nous devons savoir et apprendre avant de commencer à concevoir des sites Web et Gimp et c'est le système de grille. Donc, dans cette section, nous allons apprendre ce qu'est un système de grille et pourquoi nous voulons l'utiliser avec nos conceptions Web. Et je vais vous montrer où vous pouvez obtenir différents types de systèmes de grille gratuitement. Donc, si vous êtes prêt à tout apprendre sur le système de grille, faisons-le. 14. Système de grille: bonjour et bienvenue. Avant de nous lancer dans nos projets de conception Web, je veux d'abord partager avec vous le système de grille que nous allons utiliser pour ces projets de conception Web . Et je veux aussi expliquer ce qu'est un système de grille, au cas où vous n'êtes pas sûr de ce que c'est. Donc, dans cette leçon, je vais juste partager cette information avec vous. Et puis je vais vous montrer où vous pouvez télécharger le système de grille afin que vous puissiez l'utiliser avec les projets de conception Web tout au long de ce cours. Donc, fondamentalement, un système de grille vous permet de rationaliser vos conceptions Web car il fournit des dimensions couramment utilisées basées sur un spécifique avec. Maintenant, la norme de l'industrie était de 960 pixels de large, et il y a deux variantes différentes de ce système de grille, qui est soit de 12 ou 16 colonnes. Alors pourquoi allons-nous utiliser un système de grille comme celui-ci ? Eh bien, il nous aide en pré-définissant les tailles de colonnes et nous permet d'espacer uniformément, sont différents éléments graphiques et de fournir un espacement égal entre eux pour nous aider à aligner tous les éléments et donner une symétrie à nos conceptions Web. Par exemple, si nous avons trois colonnes de contenu. Ensuite, nous savons qu'une grille de 12 colonnes fonctionnera le mieux pour cette configuration particulière. Et la raison en est que 12 colonnes divisées en trois égal à quatre. Et puis, si nous avons quatre colonnes de contenu, il serait préférable de passer à un système de 16 colonnes puisque 16 divisé par quatre est quatre, et dans l'ensemble, cela va mieux espacer notre contenu à cet égard. Maintenant, le système de grille que j'utilise vient de ce site Web ici, qui est 9 60 points gs. Alors allez-y, naviguez sur ce site, et si vous faites défiler ici et cliquez sur Afficher la grille, vous allez voir ces différentes colonnes, n'importe quelle superposition rouge, et vous allez remarquer comment tous les différents de la conception de la page, et nous pouvons voir que l'espacement entre ce contenu est même dans toute la page Web . Donc, en utilisant ce système de grille, vous vous assurez que tous les éléments sont alignés uniformément, et cela, à la fin, vous donnera un bien meilleur design que si vous étiez juste pour l'ailier et avoir des éléments espacés sur tout l'endroit. Il n'y aura pas de symétrie. Ça va être difficile de naviguer sur toute la page, et ça va être très chaotique si vous n'utilisez pas un système de grille. Non seulement cela, mais l'utilisation d'un système de grille aide certainement à rationaliser votre flux de travail et vous rend plus facile et plus rapide pour vous de tout concevoir et de mettre tout dans une bonne position. Maintenant, le seul problème avec le système de grille 9 60 est qu'il est un peu obsolète. Vous pouvez toujours l'utiliser, mais il n'a pas été vraiment conçu pour les sites réactifs pour les smartphones iPads, des choses comme ça. Donc, à la veille des smartphones que nous avons aujourd'hui et des tablettes, ce système était tout ce dont vous aviez vraiment besoin. Mais maintenant, avec toutes les différentes tailles d'appareils mobiles et la taille des moniteurs, nous avons besoin d'un système de grille plus grand, et celui que je recommande est un système de grille 1200 ou 1200 pixels de large. Donc, cela va accueillir plus d'appareils et plus de tailles de moniteur par rapport à 9 60, il sera également parfait. Les premiers sites qui doivent être réactifs. L' autre avantage est que si un client a une exigence de taille spécifique, vous pouvez facilement réduire la taille au système de grille nécessaire pour ce projet. Maintenant, nous allons télécharger le système de grille à partir d'ici. Mais le problème est qu'ils n'ont pas de système de grille 1200, donc nous pouvons facilement résoudre cela en téléchargeant le système de grille 9 60 à partir d'ici. Il suffit de cliquer sur ce gros vieux bouton de téléchargement juste ici pour télécharger le système de grille 9 60. Allons de l'avant et ouvrons ce fichier et convertissez-le en un système de grille 1200. Alors allons à l'intérieur des modèles. Tu allais choisir Photoshopped ? Faisons juste la colonne 12 Grid pour l'instant. Ouvre-le. Aller à l'image, aller à la taille de l'image et maintenant il devrait dire 10 20 par 10 20. Nous avons donc 40 pixels supplémentaires, donc nous avons un peu d'espace de respiration de chaque côté du système de grille. Donc, pour la taille de l'image, ajoutons 200 pixels. Donc maintenant, nous avons 1220 d'ici 1220 qui va nous donner notre système de grille 1200. Bon, maintenant que vous avez ce système de grille redimensionné, enregistrez-le en tant que fichier maître et ensuite nous allons l'utiliser pour tous les projets de conception ce cours et ce que vous voulez faire est, une fois que vous commencez sur un projet, vont vouloir enregistrer, afin que vous puissiez enregistrer ce fichier pour ce projet de conception Web particulier et le garder séparé de vos fichiers maîtres afin que vous puissiez toujours revenir à votre fichier maître pour le prochain projet sont Hey, maintenant que nous avons finalement toutes ces informations hors du chemin, il est temps de commencer à concevoir des sites Web. J' espère que vous êtes prêt. Je suis excité et j'ai hâte de partager avec vous tous mes conseils et secrets pour la conception sites Web et Photoshopped. Donc si tu es prêt, faisons-le. 15. Pixel parfait: pour cette leçon. Je veux juste vous donner quelques conseils supplémentaires lors de la conception d'un site web, et le 1er 1 est de rester organisé. Lorsque vous concevez votre site Web, vous allez construire différentes parties de ce site en fonction de l'anatomie du site, ce soit l'en-tête, le héros, le corps, le pied de page , peu importe ce que vous voulez être organisé. Et ce que je veux dire par là, c'est que vous voulez organiser vos couches et loin pour qu'il soit facile d' accéder et de trouver ce dont vous avez besoin. Par exemple, cette page Web particulière comporte plusieurs sections. Comme vous pouvez le voir, j'ai un joueur de groupe pour l'en-tête, le héros, le corps et le pied de page. Donc, je peux facilement accéder à ce dont j'ai besoin pour cette section particulière à l'intérieur d'ici. Nous avons le corps et j'ai quelques parties différentes du corps, ainsi qu'une section sur et une section de révision, et tout est organisé à l'intérieur de ces couches groupées maintenant à l'intérieur de la couche de groupe. J' ai également des joueurs de groupe supplémentaires avec du contenu supplémentaire, sorte que je peux facilement accéder à cette partie du site Web. Il aide également avec le développeur Web. Lorsque vous remettez ce fichier au développeur Web, il doit savoir ce qui se passe où et en organisant tout en couches groupées. Cela leur permet de trouver facilement un accès à cette information afin qu'ils sachent quelle étape ils doivent ensuite travailler. L' autre chose que vous voulez faire est que vous voulez concevoir vos conceptions Web pixel parfait. Et ce que je veux dire par là, c'est que tu veux que tout soit parfaitement aligné. Donc si ce titre et cette section de contenu étaient éteints de quelques pixels par ici à gauche , eh bien, devinez quoi ? Les développeurs Web vont penser que vous avez fait ça exprès et ça ne va pas s'aligner avec cette boîte ici, et ça va être sur la gauche. Mais si vous le faites pixel parfait que le développeur Web devrait aligner ces éléments à gauche comme conçu. Donc, si vous faites des erreurs dans votre conception, le développeur Web ne saura pas que ce sont des erreurs et codera réellement le site Web en fonction de ce que vous leur donnez réellement. Donc, vous voulez créer un design web parfait pixel et parfaitement aligner tout comme votre conception et avant de le remettre au développeur Web. L' autre chose va faire, c'est que ça va vous mettre dans l'habitude de créer des designs de pixels parfaits dès le début, et cela va aussi être symétrique. Nous n'avons même pas d'espacement entre ces trois colonnes. Et si cette colonne était plus loin à gauche et que l'écart entre les deux colonnes était plus grand que celle-ci, alors elle ne sera pas symétrique. Et ça ne va pas être équilibré. Ça va regarder dehors. Il ne va pas être un bon design va être un mauvais design. Vous voulez être en mesure de créer un design qui est agréable à l'œil, attrape l'intérêt de la personne, détient son intérêt, puis, sur la base des actions appelées, vous les amener à faire ce que vous voulez qu'ils pour cette conception particulière. Si vous ne concevez pas avec une intention parfaite de pixel dès le début, alors vos conceptions vont avoir l'air bâclée. Vous ne serez pas en mesure de commander un prix élevé pour vos designs, et vous aurez moins d'affaires, alors assurez-vous que vous concevez avec la mentalité parfaite du pixel. Ayez tout aligné correctement symétrique et n'avez pas d'erreurs et vos conceptions avant d'aller vers le développeur Web ou même votre portfolio, d'ailleurs, parce que quelqu'un peut remarquer une erreur et décider de ne pas vous embaucher parce que vous n'avez pas pris le temps de prêter attention aux détails de ce design particulier. Et ils vont vouloir embaucher quelqu'un qui prend ce temps pour prêter attention à ces petits détails, et ils sont plus susceptibles de payer un prix plus élevé pour cette attention aux détails. Alors que vous commencez à concevoir et à créer des designs pour votre portefeuille et que vous commencez promouvoir vos services, vous voulez garder cela à l'esprit, organiser tout et concevoir avec cette mentalité parfaite de pixel. Donc, vous condamnez et un prix plus élevé et obtenir plus d'emplois dans le processus. 16. Introduction aux 7 projets: D' accord. Alors devine quelle heure il est. C' est vrai. C' est le moment où vous attendiez toute votre vie. Ok, eh bien, peut-être pas si longtemps, mais il est temps de commencer à concevoir des sites Web et Gipp. Oui. D' accord. Nous avons donc sept projets de conception sur lesquels nous allons travailler, et nous allons utiliser beaucoup d'outils et de gimp pour réaliser ces conceptions. Et nous allons utiliser beaucoup d'outils encore et encore et encore, ce qui est génial, ce qui est génial, parce que lorsque vous avez terminé de faire les sept projets, vous auriez dû maîtriser ou au moins avoir une très bonne idée sur la façon d'utiliser les outils Gimp que nous besoin d'utiliser pour concevoir nos sites Web et gimp. Ok, donc non seulement tu vas prendre le projet et créer mon design que j'ai présenté en pratique. Mais une fois que vous aurez fini avec ça, je veux que vous recréiez ce site web dans votre propre vision créative. Je veux que vous trouviez quelque chose de mieux pour que vous puissiez ensuite avoir ce design à votre portefeuille. Donc, si vous êtes prêt à commencer à concevoir des sites Web et Gib bien, faisons-le 17. Projet 1 : Briefing Nike: Bon, allons-y et jetons un oeil à la page d'accueil actuelle de Nike, et comme vous pouvez le voir, il a un design agréable, propre et moderne. La navigation est centrée, et lorsque vous passez le curseur sur chacun des éléments, vous pouvez voir qu'un méga menu se présentera et affichera tous les différents produits disponibles. Nous avons également un accès facile à des marques et des options spécifiques pour accéder facilement à un compte. Si vous avez déjà un accès à un Kurt shopping, quelques options d'aide et un bouton de recherche pour trouver quelque chose de spécifique. Ce site Web a donc été conçu avec les clients et l'esprit nouveaux et existants en permettant à leurs visiteurs de trouver facilement ce dont ils ont besoin. Cette page n'a vraiment pas besoin d'une refonte, mais je voulais vous montrer comment mettre tous ces différents éléments ensemble dans un nouveau design et vous montrer comment être créatif peut ajouter un intérêt supplémentaire à un orteil de page ou saisir attention et les amener à faire ce que vous voulez qu'ils fassent dans ce cas par des chaussures ou d'autres produits. Donc, tous les sites ne vont pas avoir tous ces éléments différents. Pas toutes les entreprises, ils vont avoir plusieurs marques, et ils peuvent ne pas avoir de compte parce qu'ils ne vendent peut-être pas quelque chose directement sur leur site Web. Comme ce site, qui est plus d'un type de site de commerce électronique par rapport à un type traditionnel de site Web d'entreprise ou d'entreprise. Vous pouvez toujours vendre des produits, mais peut-être ne pas l'avoir mis en place dans un style traditionnel de commerce électronique. Cette page initiale n'est pas un style de commerce électronique. Il s'agit plutôt d'un type d'information de page Web, mais lorsque vous accédez à leurs produits spécifiques, il s'agit plutôt d'une mise en page de type commerce électronique. Donc, pour la refonte, nous ne voulons vraiment pas rebaptiser le site Web parce que Nike a déjà une image de marque solide en place sur son site existant. Nous pouvons simplement ajouter à cela en ajoutant différents éléments pour amener les visiteurs à faire quel que soit leur objectif spécifique. Et je pense que pour eux, leur but est de vendre plus de leurs produits. Donc, pour la refonte, je n'ai pas fait de remarque du site. Je voulais juste me concentrer davantage sur leurs trois meilleures marques, soit la Air Jordan, la Hurley et les Covers, et je voulais prendre leurs plus récentes créations de chaussures. Mettez en évidence ces produits pour attirer l'attention des gens sur ce produit spécifique et faciliter l'achat par le biais d'un bouton d'action appelé. Mais il voulait aussi placer ces produits d'une manière différente de tout ce que vous verrez là-bas. Et c'est là que la créativité entre en jeu lorsque vous essayez de différencier votre design des autres sites. Mais en même temps, cependant, cependant, je ne voulais pas trop de design, et je l'ai gardé simple en ajoutant simplement trois éléments principaux. Nous avons le contenu de l'action appelée, la chaussure principale, puis d'une personne, ou d'une image d'une personne interagissant avec cette chaussure. Donc, les trois principales chaussures, ils ont tous un public spécifique cette décennie ou deux dans la plupart des cas. Donc l'air d'Air Jordans va répondre à ceux qui, comme le basket ou les chaussures hautes en général, alors Hurley va avoir une combinaison de chaussures et de sandales. Alors peut-être les amateurs de plage ou les surfeurs ou des choses comme ça, et ensuite converser, ou peut-être plus populaire auprès des skateboarders ou d'autres types de personnes dans cette foule. Ou peut-être juste ou peut-être qu'ils aiment juste l'apparence de la conversation en général et c'est là communiquer avec votre client au sujet de ces produits spécifiques pour déterminer comment votre pièce, aussi, présente ces produits d'une manière différente, créatif, mais assez simple que ce n'est pas trop déroutant et que vous êtes toujours en mesure d' attirer l'attention d'une personne et de les amener à faire ce que vous voulez qu'elle fasse, c' est-à-dire d'acheter plus. La communication est donc primordiale pour tout type de conception Web. J' ai donc choisi un type spécifique de personne pour chacun de ces produits pour les mettre en valeur en action avec les chaussures réelles. Donc, bien sûr, nous avons une photo de Michael Jordan pour cette chaussure particulière parce qu'ils sont les Air Jordans , et je voulais montrer non seulement le design de cette nouvelle chaussure, mais aussi l'inspiration pour cette chaussure. On a Michael Jordan volant à travers le ciel, et on dirait qu'il va plonger à l'intérieur du tournage. C' est différent, et ça va attirer l'attention d'un spectateur parce qu'il n'a pas vu ça avant. Ensuite, j'ai un surfeur surfer sur le dessus d'une sandale et ensuite échapper à la frontière, faisant son truc sur le devant de la chaussure. Donc chacune de ces idées. remplacement de l'image des personnes sur les chaussures contribue à créer un intérêt visuel pour cette chaussure particulière ou cette marque particulière. Donc pour ce projet, tu vas apprendre comment il a pris tous ces éléments et les a placés ensemble. Comment retoucher l'image est comment organiser les calques, comment créer le méga menu et l'organiser d'une manière que le développeur va comprendre que ce n'est pas seulement un menu de navigation typique, et vous allez apprendre plus de conseils professionnels le long du chemin également. Donc, la première chose que nous allons devoir faire est de prendre quelques images pour ce design particulier . Si vous êtes prêt à commencer, je vais vous montrer où j'ai eu ces images dans la prochaine leçon. Alors faisons-le. 18. Images: En ce qui concerne les images, soit vous allez obtenir les images directement de votre client, soit vous allez devoir utiliser des images stock dans votre conception. y a des chances que le déclin vous donne des images qu'il n'a déjà acheté la licence d' utilisation de ces images sur le site Web. Si vous allez trouver des images provenant d'agences boursières ou d'images Google ou où que vous trouviez l'image, vous devez informer les clients que cette image particulière est protégée par des droits d'auteur et qu'ils ne peuvent pas l'utiliser sur leur site Web tant qu'ils n'ont pas acheter une licence pour l'utiliser sur leur site Web. Sinon, leurs clients vont avoir des ennuis et ils peuvent finir par venir après vous pour des dommages et intérêts pour l'utilisation d'une image protégée par le droit d'auteur. Il vous suffit donc de leur faire savoir que toutes les images que vous avez incluses dans vos dessins, nos droits d'auteur sont protégés et qu'ils devront acheter cette image particulière pour l' utiliser . Donc, pour compléter le projet, nous devons télécharger quelques images afin de pouvoir les utiliser dans le projet. J' ai donc trouvé toutes les images sur Google images, et j'ai également créé un fichier texte avec un lien vers toutes les images que j'utilise afin que vous puissiez télécharger ce fichier à partir de cette conférence et naviguer jusqu'à chacune des images, puis les ajouter à votre gimp document. Maintenant, je tiens à souligner que même si j'ai fourni des liens directs vers les images que j'utilise , elles peuvent ou non être disponibles au moment où vous regardez ce tutoriel vidéo. Parce que les images sont parfois supprimées des images Google, ce qui est très bien, il suffit d'aller de l'avant et de trouver une autre image qui est similaire à celle que nous utilisons dans le projet. Parce que les outils et les techniques que vous allez utiliser pour retoucher ces images peuvent être appliqués à n'importe quelle image. Donc, je veux juste vous donner quelques conseils rapides sur l'ajout de ces images à votre document cadeau ainsi que des images Google avant de passer au prochain tutoriel où nous allons retoucher ces images. Alors d'abord, allons dans les images Google. Et quand je recherche des images via Google images, j'aime trouver les images de la plus haute qualité disponibles, et si nous allons à des outils, nous avons quelques options de tri, donc si nous allons sous-taille affaiblir, sélectionnez et cela nous donnera beaucoup plus gros fichiers orteil travailler avec, et ils ont tendance à être d'une meilleure qualité. C' est ainsi que j'ai trouvé cette première image de Michael Jordan, et nous allons utiliser cette image dans le projet. Donc, pour l'ajouter au projet, nous allons faire un clic droit et sélectionner copier l'image. Ensuite, nous allons aller à Gimp et ouvrir le fichier de grille que nous avons téléchargé à partir d'une leçon précédente, puis avec leur raccourci clavier, nous pouvons utiliser Commander control dans la lettre V pour coller ce fichier, ou vous pouvez monter pour éditer et sélectionnez Coller à partir d'ici. Maintenant, si nous allons à une autre image maintenant, quand c'est comme cette bordure de surf et que nous avons copié cette image dans le presse-papiers, allez à nouveau dans notre document, nous pouvons voir que ce calque ici a été ajouté, et c'est actuellement sélectionné. Maintenant, quand je vais de l'avant et que je colle cela dans, nous obtenons un calque qui dit sélection flottante donc avant devient un réel plus tard, nous devons faire un clic droit sur ce calque et sélectionner un nouveau calque, puis il ajoutera ce fichier à un nouveau calque, ou je vais aller de l'avant et annuler cela avec la commande ou le contrôle et la lettre Z. Si nous allons à notre outil de sélection de rectangle ou un outil de sélection de rectangle, sélectionnez-le et puis cliquez n'importe où sur son document. Il ajoutera automatiquement cela à la couche. Le seul problème est qu'il l'ajoute à la couche où nous avions Michael Jordan, donc nous ne voulons pas faire ça non plus. Donc dans ce cas, ce que je vais faire, c'est créer une nouvelle couche. Allons-y et appelons-le surfeur. Je vais en faire la transparence. Cliquez sur OK, puis je vais le coller dans, puis cliquez sur. Et puis il est ajouté à cette couche par lui-même. Donc, ce sont quelques façons différentes de copier et coller des images dans votre document Gimp. L' autre chose que vous voulez faire une fois que vous avez ajouté toutes vos différentes couches de nouvelles images est que vous voulez entrer et double-cliquer pour renommer les calques en fonction de l'image elle-même, donc nous voulons lui donner une description de ce que ce calque est. C' est pour nous et pour le développeur Web de nous aider à mieux organiser nos images. Donc, nous savons lequel est lequel Donc si vous allez à nouveau, allez-y et ajoutez le nom de la couche ici. Si vous ne le faites pas de cette façon, il suffit de double-cliquer, puis de donner le nom de ce calque en fonction de la description de cette image. L' autre chose que nous voulons faire est que nous voulons utiliser les fichiers P et G pour les logos. Donc, sous les outils, nous pouvons aller à la couleur et sélectionner transparent. Et cela va nous donner une liste de tous les fichiers PNG pour ce logo particulier. Et cela le rend beaucoup plus facile au lieu d'essayer de comprendre lequel d'entre eux est PNG de tous ces fichiers, parce que la plupart d'entre eux vont être un fichier J peg, et vous allez devoir cliquer sur eux pour savoir lesquels sont transparent et lesquels sont ceux que vous voulez utiliser. Comme celui-là. Voici un fichier J Peg, et ce n'est pas quelque chose que nous pouvons utiliser pour ce projet particulier de toute façon. Donc, ces air quelques conseils sur l'utilisation des images Google et l'ajout de ces images à votre fichier gim. Alors allez-y et toutes les images, puis dans le prochain tutoriel va aller de l'avant et retoucher . L' image est 19. Retoucher les images: Bonjour et bienvenue. Ok, donc vous devriez avoir toutes vos couches d'image placées dans vos documents de grille, et vous devriez avoir tous les calques nommés de manière appropriée. Nous avons juste maintenant besoin d'organiser leurs couches un peu de sorte que le contenu similaire soit regroupé ensemble. Donc j'ai tous mes logos ensemble ici en haut, puis mes chaussures et ensuite toutes les images avec les gens. Vous pouvez réorganiser les calques en cliquant et en les faisant glisser vers un nouvel emplacement. La guerre. Vous pouvez utiliser les touches fléchées haut ou bas pour les déplacer de cette façon. Allons de l'avant et éteignons toutes les couches sauf deux. Et ce serait le logo Nike et notre fond blanc. Donc nous allons d'abord voir les logos de Reese Ice et le mettre en position, apparaître en haut. Ensuite, nous allons supprimer l'arrière-plan de nos produits et les images avec les gens. Donc pour redimensionner. La première chose que nous devons faire est de changer la limite de la couche. Si vous montez pour afficher et sélectionnez Afficher la limite de la couche, nous pouvons voir que la limite de cette couche est la taille réelle du document. Ce n'est pas ce que nous voulons. Nous voulons que cette limite de couche s'accroche à la taille du contenu réel de la couche, qui serait dans cette zone juste ici. Donc, nous devons le faire d'abord avant de remonter à l'échelle. Sinon, la mise à l'échelle sera beaucoup plus importante que nous le voulons car elle sera mise à l'échelle en fonction de la taille du document et non de la taille du logo réel. Donc, nous allons aller jusqu'à recadrer le contenu, et maintenant la limite du calque est redimensionnée à la taille du logo lui-même et non au document. Ok, pour rendre ce logo plus petit, parce qu'il est beaucoup trop grand, nous devons utiliser notre outil de balance, qui se trouve juste ici. Et le raccourci clavier est Shift Plus s. Maintenant, nous avons juste besoin de cliquer sur notre logo, assurez-vous qu'il est sélectionné dans le panneau des calques, puis vous allez obtenir cette zone de limite autour de ce logo avec quelques carrés. Pourriez-vous cliquer sur pour cliquer et faire glisser vers ou vers le bas pour redimensionner. L' autre chose que nous pouvons faire est que nous pouvons réellement taper le réel avec ou la hauteur, et nous pouvons le lier de sorte que si vous tapez en un, la hauteur ou le avec changera automatiquement afin de les garder en proportion. Donc, si vous avez ce désactivé ici, cela signifie que la largeur et la hauteur ne sont pas liées. Donc, si je redimensionne le avec 2 50 la hauteur ne change pas et il reste à 418 pixels de haut et il déforme le logo. Ce n'est pas ce qu'on veut. Donc on va allumer ça, et on va aller de l'avant et taper 75 pour l'onglet de clic de largeur. Et maintenant la hauteur est de 27, ce qui maintient ce logo en proportion. Nous allons cliquer sur l'échelle, saisir votre outil de déplacement avec la lettre V. Assurez-vous que vous avez choisi plus tôt ou le guide sélectionné de sorte que lorsque vous cliquez dessus, vous sélectionnez réellement ce calque, puis déplacez-le vers le haut. Très bien, faisons la même chose pour le logo Converse cette fois. Nous devons supprimer le texte du logo parce que je ne veux pas que cela fasse partie du logo. Donc, nous allons attraper notre outil rectangle ici ou avec la lettre m. Dessinez une boîte autour d'elle, puis cliquez sur votre touche de suppression ou votre touche de retour arrière, et puis nous avons besoin de sélectionner avec commande ou contrôle et la lettre D. Ok, n' oublions pas de changer les limites de Delayer. Nous allons passer à la couche, sélectionnez recadrer le contenu. Prenez votre outil de balance avec shift plus s. Et cette fois, nous allons faire 50 pour l'échelle avec clic. Retour à l'outil de déplacement. Bougez-le vers le haut. Je vais en faire la dernière. Donc je vais mettre ça là-bas, et je vais déplacer celui-ci dans un air Jordan va être deuxième. Donc, prenons cet outil Lear recadrage à l'échelle du contenu. Et on va faire 54 celle-là dans la dernière aussi. Ok, prenons notre outil rectangle à nouveau avec la lettre M. Et nous allons supprimer la commande ou le contrôle texte et la lettre D à de Select Crop, l'outil d'échelle de contenu et encore 50. Très bien, les logos sont faits. Allons-y et éteignons-les. Pour l'instant. C' est probablement le bon moment pour enregistrer vos fichiers. Alors appuyez sur commande ou contrôle et la lettre s et je vais travailler sur mes chaussures Nike d'abord, donc je vais aller de l'avant et je vais déplacer cette couche et Converse sera troisième. Bon, continuons comme la chaussure Nike et allumons. Kayla, zoomez avec l'outil de zoom maintenant. Ce que nous voulons faire, c'est que nous voulons un fond blanc pur. En ce moment, c'est une nuance plus foncée de blanc ou de gris. Donc, ce que nous devons faire est de sélectionner l'arrière-plan ainsi que l'ombre, parce que je veux me débarrasser de l'ombre et nous allons devoir utiliser l'un de nos outils de sélection pour le faire. Ensuite, nous allons utiliser un masque de calque pour supprimer cet arrière-plan. Donc, pour cette édition, je vais attraper mon outil de sélection floue, et je vais définir mon seuil pour faire 20 pour le seuil, puis cliquer sur l' arrière-plan pour faire votre sélection. Donc en ce moment, il est à peu près tout sélectionné en arrière-plan et rien d'autre. Si j'appuie sur ma touche de suppression, l'arrière-plan est supprimé, mais ce n'est pas ce que nous voulons faire. Nous devons donc ajouter à notre sélection car il ne s'agit pas d'ajouter l'ombre dans le cadre de la sélection afin que nous puissions utiliser un autre de nos outils de sélection pour le faire. Mais ma méthode préférée est d'utiliser le mode de masque rapide, qui est situé juste ici via cette icône, puis le raccourci clavier pour basculer le mode de masque rapide. honneur est la lettre Q. Donc une fois que vous l' allumerez, vous aurez un masque rouge sur la chaussure dans l'ombre. instant, c'est la zone qui n'est pas sélectionnée. Allons-y et zoomons sur la chaussure ici pour voir l'ombre un peu mieux . Et puis ce qu'on va faire, c'est prendre notre outil de pinceau pour ajouter ou supprimer de la sélection. Nous voulons donc que nos couleurs de premier plan et d'arrière-plan soient blanches et noires. Je vais juste ajouter une couleur a écrit rapidement, parce que je veux vous montrer combien il est facile de changer les couleurs pour le premier plan et l' arrière-plan. Et c'est simplement en appuyant sur la lettre D de votre clavier, et cela le changera en noir et blanc. Ok, alors rappelez-vous, nous avons un masque de calque rouge sur la zone qui n'est pas sélectionnée. Donc, l'arrière-plan est sélectionné et nous voulons supprimer de la sélection. Donc, dans ce cas, blanc va supprimer de la sélection ou il va supprimer le masque rouge. Et puis, lorsque vous sortez de ce mode de masque rapide, vous n'aurez que l'arrière-plan sélectionné et non l'ombre ou les chaussures. Donc on va prendre cette brosse, et on va la dimensionner en conséquence. Et puis vous pouvez ajuster la dureté entre 25 75 en fonction de l'image. Et maintenant, je vais juste laisser la dureté réglée à 75 parce que encore une fois, je ne vais pas m'asseoir ici et essayer de rendre ça parfait, parce que le client peut me donner une image différente plus tard. Donc je vais juste aller ici et enlever le masque rouge des zones que je ne veux pas comme ça . Ça ne fait pas partie de la sélection. Ensuite, je peux utiliser mon espace Barkey pour naviguer vers d'autres parties de l'image aussi, juste pour voir si j'ai besoin de trouver Tune ma sélection. Ça a l'air plutôt bien. Donc je vais appuyer sur la lettre Q et ensuite je vais utiliser mon outil de zoom et maintenir la touche de contrôle où la touche de commande pour que je puisse zoomer. Vous pouvez également faire cette sélection ici. Zoom avant, zoom arrière et vous pouvez voir que le raccourci clavier est juste ici. C' est contrôlé parce que je suis sur un PC, et si vous êtes sur un Mac, ça va être la commande, d'accord, donc maintenant nous avons tout sélectionné que nous voulons supprimer les ombres et l' arrière-plan. Mais ce que nous devons faire, c'est que nous devons inverser la sélection ou inverser la sélection pour que la chaussure soit sélectionnée. Et puis lorsque nous entrons dans le calque, masquez l'arrière-plan et l'ombre sera supprimée. Alors montons à sélectionner inverser Et maintenant juste la chaussure est sélectionnée, et si je la découpe, vous pouvez voir que les chaussures sont maintenant disparues. Passons donc à notre panneau Calque et sélectionnez masque de calque. Vous voulez vous assurer que vous avez sélectionné la sélection et cliquez sur Ajouter, et maintenant l'ombre et l'arrière-plan ont disparu. Ok, laissons de choisir avec Commander Control et la lettre D. Et si vous regardez votre masque de calque juste ici, vous pouvez voir qu'il est noir et blanc. Donc, le noir supprime les fourmis blanches et vous pouvez voir le contour de la chaussure juste là en blanc. Et si nous n'avons pas inversé notre sélection, ça aurait fait exactement le contraire, maintenant que nous avons fait cette chaussure, nous devons maintenant faire le même montage pour les deux autres chaussures. Ok, donc ce qu'on va faire, c'est exactement les mêmes pas qu'on a fait pour la chaussure Nike. Donc, au lieu que je sois assis ici à retoucher ces images et que tu me regardes faire la même chose , je vais te laisser aller de l'avant et faire ça tout seul. Alors allez-y et éditez vos deux autres chaussures, et je vais vous laisser entrer un petit secret. Nous allons suivre exactement les mêmes étapes. Quatre sont aussi des images, à l'exception peut-être de l'outil de sélection. Parce que bien que l'outil de sélection floue fonctionnerait probablement, nous devrions simplement continuer à travailler sur l'augmentation du seuil afin de sélectionner plus de l'image. Donc, à la place, ce que je vais faire est que je vais utiliser un autre outil de sélection pour commencer, et ce sera mon outil de sélection gratuit, donc je vais juste cliquer et faire glisser et tracer autour du sujet principal ici, qui est Michael Jordan. Ensuite, une fois que nous avons notre sélection, nous pouvons passer en mode masque rapide pour affiner notre sélection. Donc, pour compléter la sélection avec la sélection libre, nous avons dû revenir au point exact où nous avons commencé et passer la souris sur cette zone jusqu'à ce que nous obtenions ce petit cercle. Une fois que vous faites cela, vous pouvez relâcher le bouton de la souris, puis appuyer sur la touche Entrée, puis vous obtiendrez votre sélection à partir de cet outil. Maintenant, nous pouvons passer en mode masque rapide en appuyant sur la lettre Q puis en utilisant notre pinceau pour ajouter ou supprimer à la sélection si nécessaire. Alors je vais y aller et faire ça. Mais je vais avancer rapidement cette partie de la vidéo pour ne pas avoir à regarder ça au ralenti parce qu'il n'y a pas beaucoup plus que je peux ajouter que je ne vous ai pas déjà dit . La seule chose que je recommanderais est de garder votre main près de la Lettre X, et la raison pour laquelle c'est que si vous appuyez sur la touche X, il changera les couleurs de premier plan et d'arrière-plan en conséquence. Et puis vous pouvez facilement sélectionner cette clé si vous sortez de la ligne où vous devez aller . Donc si je vais juste ici, peut-être que je suis dans son visage et son bras ici, je comprime la lettre X et ensuite je peux enlever rapidement le masque là où il ne devrait pas être. Et ils appuient à nouveau sur X pour continuer à ajouter ce masque de calque si nécessaire. D' accord, donc je vais aller de l'avant et je finis ça. Maintenant que j'ai ma sélection raffinée, je vais appuyer sur la lettre Q pour sortir du mode masque rapide. Maintenant que j'ai ma sélection raffinée, Maintenant, cette fois, je n'ai pas besoin d'inverser la sélection car le sujet est sélectionné. Donc, j'ai juste besoin de venir et sélectionner mon masque de calque, faire votre sélection est sélectionnée et cliquez sur Ajouter ici et qui supprime l'arrière-plan. C' est cool ? J' adore ça maintenant. J' ai passé assez rapidement à travers cette édition particulière, et je devrais peut-être passer par et trouver l'accord plus tard. Si le client approuve cette image particulière, vous pouvez voir que je n'ai pas très bien suivi le long des bords. Et j'ai laissé une partie de l'arrière-plan ici aussi. Et c'est pourquoi nous utilisons des masques de calques car cela nous permet de travailler de manière non destructive. Ensuite, je peux simplement sélectionner mon masque de calque pour entrer et affiner cette modification. Ok, donc je vais juste le laisser comme ça pour l'instant. Maintenant, votre mission est d'aller de l'avant et de finir les deux autres images aussi, en utilisant les mêmes techniques. Utilisez l'outil de sélection qui, selon vous, fonctionnera le mieux pour cette image particulière. Utilisez le mode masque rapide pour affiner votre sélection au niveau de votre masque de calque. Et puis vous serez tout le travail des orteils sur le prochain tutoriel qui travaillera sur la première partie de notre en-tête. 20. Entête partie 1: Bonjour et bienvenue. Bon, donc pour ce tutoriel, nous allons commencer à travailler sur notre en-tête de notre site Web, et nous allons organiser et mettre en place nos logos et les placer exactement là où ils doivent être. Donc, nous avons un placement parfait de pixel. On va utiliser notre outil d'alignement et quelques formes de coups, etc. Et puis dans le prochain tutoriel, nous allons aller de l'avant et terminer la partie en-tête de la conception et la raison pour laquelle je rompt parce que ça va prendre un peu de temps parce que je veux expliquer beaucoup de choses sur le chemin pour donner vous quelques conseils pro pour la conception de l'en-tête de vos sites Web. Alors allons-y et commençons. Je vais aller de l'avant et zoomer, et je peux voir que mon logo est un peu meilleur. Et maintenant, j'ai les grilles éteintes, donc je vais aller de l'avant et les rallumer. Mais je veux aussi activer mes guides qui sont inclus dans ce modèle de grille. Donc, pour les voir, vous pouvez aller jusqu'à afficher et sélectionner Afficher les guides. Voici le raccourci clavier pour ce qui est Commander Control et la touche point-virgule. Une fois que vous activez cela, vous verrez tous vos guides, et ils sont alignés sur les colonnes. Donc, cette première ligne directrice ici est à gauche de la colonne. Et puis nous avons une autre ligne directrice à droite de la colonne, qui est une quantité égale d'espace entre ici et ici. Et cette ligne directrice divise essentiellement l'espace entre la première et la deuxième colonne uniformément et même chose avec la deuxième et 1/3. Nous avons une autre ligne directrice qui divise cette etcetera. Donc, cela sépare également toutes les colonnes afin que nous puissions utiliser les lignes directrices comme un guide pour aligner nos éléments de manière à ce que tout soit parfaitement aligné et ait une symétrie. Ce que nous voulons faire, c'est que nous voulons placer nos logos directement au centre des colonnes de gauche à droite. Mais je veux aussi définir la hauteur de l'espace d'en-tête. Et puis nous allons aligner ces logos entre le haut et le bas de la hauteur de l'en-tête aussi bien. Donc, cela va avoir beaucoup plus de sens que nous allons tout au long de ce tutoriel et nous commençons aligner tout correctement. Donc, continuons et définissons d'abord la hauteur de l'en-tête. Donc, ce que je veux faire, c'est que je veux le rendre plus grand que la largeur de cette colonne ici. Nous avons donc un peu d'espace entre le haut et le bas des logos aussi. Donc, nous devons d'abord déterminer ce que le avec est pour cette colonne particulière. Eh bien, nous pouvons nous asseoir ici et nous pouvons compter les pixels, mais nous avons en fait un outil de mesure, qui est situé juste ici, qui nous donnera la mesure ou la distance entre le côté gauche et le côté droit de la colonne. Donc, si nous attrapons cet outil, puis cliquez sur ce deuxième guide juste ici, puis faites glisser vers le deuxième guide, une fois que nous relâchons le bouton de la souris, il va ajouter le point de cet outil de mesure juste là. Et puis si nous regardons ici, nous pouvons voir le nombre de pixels ou la largeur de cette colonne, qui est de 90 pixels. Donc, la hauteur doit être supérieure à 90 pixels, donc nous devons décider combien de pixels d'espace souhaitons-nous en haut et en bas des logos ? Donc, disons 20 pixels pour le haut et 20 pixels pour le bas, donc c'est 40 pixels au total. Nous devons ajouter ça à l'avec. Donc c'est 130 pixels pour la hauteur de notre en-tête. Donc nous pouvons aller de l'avant et appuyer sur la touche d'échappement du clavier pour se débarrasser de cette mesure. Et puis nous pouvons aller de l'avant et prendre notre outil de déplacement avec la lettre V. Et puis nous avons juste besoin d'ajouter un guide ici à 130 pixels. Mais c'est un peu difficile à voir à moins que vous ne zoomez ou essayez de compter le nombre de barres ici pour trouver 1 30 Mais nous avons un petit outil ici à nouveau qui nous montrera exactement où est le placement de ce guide comme nous le faisons glisser, dit Toe, ajouter un guide. Nous devons cliquer sur la règle ici en haut et traîner vers le bas et en bas là-bas. Si vous jetez un oeil là-bas, il dit ajouter le guide 1 11 Donc, nous ajoutons ce guide à ah 111 pixels vers le bas. On veut 30 Donc on continue à descendre jusqu'à ce qu'on atteigne 30 Ok, donc c'est la hauteur de notre en-tête. Et maintenant, nous pouvons aller de l'avant et faire la queue. Sont le logo Nike de gauche à droite et de haut en bas. Donc, afin d'aligner notre logo dans cet espace, nous devons créer une sélection, puis utiliser notre outil d'alignement pour l'aligner dans cette sélection. Alors saisissons notre outil de sélection de rectangle et dessinons une sélection dans l'espace. Ensuite, nous pouvons saisir notre outil d'alignement, qui est situé juste ici, puis dans les options de l'outil. Nous devons nous assurer que nous avons par rapport à et avons sélectionné la sélection. Nous voulons également nous assurer que notre logo a été sélectionné, et maintenant nous devons définir l'objet qui doit être aligné. Et nous pouvons le faire en cliquant sur notre logo. Une fois que nous le faisons, vous allez voir ces quatre petits carrés dans chaque coin et cela permet de donner Non, c'est l'objet ou l'élément qui doit être aligné dans la sélection. Donc nous revenons à nos deux options et nous sélectionnons un centre de ligne de cible et maintenant il a été parfaitement aligné du côté gauche et du côté droit. Donc, il est centré au milieu de la colonne, et ensuite nous devons faire la même chose pour la hauteur. Donc, un milieu allongé de la cible et maintenant il est parfaitement aligné au centre de la sélection. Allons de l'avant et de choisir avec Commander Control et la lettre D. Ok, nous devons faire la même chose pour nos trois autres logos aussi. Mais avant de le faire, je veux aller de l'avant et ajouter un cercle pour chacun des logos. Donc, la première chose que nous devons faire avant de créer notre forme est que nous devons créer un nouveau calque. Alors cliquez sur cette icône ici. Nommez-le, Cercle un, et nous allons nous assurer que nous avons la transparence sélectionnée et cliquez sur OK, maintenant nous pouvons saisir notre outil Ellipse, assurez-vous que vous avez fixé et le rapport d'aspect sélectionné, puis juste cliquez et faites glisser une forme. Et puis nous devons le faire 90 pixels de large par 90 pixels, plus haut comme si c'était votre collant et maintenant que vous avez votre forme, nous pouvons le remplir avec une couleur blanche alors changé le premier plan un blanc, attrapez votre seau, outil de remplissage, puis cliquez sur l'intérieur. Je veux également ajouter un trait autour de cette forme, nous allons donc monter pour éditer et sélectionner la sélection de contour. Assurez-vous que vous avez la couleur unie sélectionné anti alias ing, puis pour la ligne avec Nous voulons un. Nous voulons changer le noir à la couleur de premier plan, puis cliquer sur le contour. OK, donc nous avons maintenant un trait autour de notre forme, et nous devons choisir avec Commandant Control et la lettre D. Allons de l'avant et prenons cette forme avec notre outil de déplacement et la déplacer ici jusqu'à la deuxième colonne. Nous voulons également modifier la limite de la couche pour ce cercle parce que pour l'instant, c'est la taille de notre document lui-même. Donc si je viens ici, j'ai besoin d'un zoom jusqu'au bout. Nous pouvons voir la limite de la couche, qui est cette ligne pointillée jaune et noire, et nous devons l'effondrer à la taille de notre cercle. Allons donc à la couche recadrer le contenu et maintenant la limite de la couche a changé. Je vais aller de l'avant et cacher que maintenant nous devons aligner cette forme particulière directement au centre de cette colonne afin que je puisse utiliser mes touches fléchées pour la déplacer vers la gauche, haut ou vers le bas un pixel à la fois pour l'aligner directement à gauche, droite. Mais maintenant, nous devons utiliser notre autre technique d'alignement en créant une sélection dans cette zone avec notre outil de sélection. Et ensuite, nous pouvons prendre notre outil d'alignement. Cliquez sur cette forme, assurez-vous que relative à la sélection est toujours sélectionnée et que votre calque est sélectionné, puis une ligne au milieu de la cible. Ok, ces commandes de commandant dans la lettre D. Maintenant, nous devons déplacer cette couche en dessous du logo d'Air Jordan, et maintenant nous devons prendre ce logo et le placer directement au centre de notre cercle. Alors allons de l'avant et saisir notre sélection de rectangle à nouveau et faire une sélection. Puis, avec leur outil d'alignement, vous voulez cliquer sur le logo, puis aligner la zone centrale et centrale. Allons de l'avant et ajoutons un cercle pour nos deux autres logos ainsi qu'une ligne chacun des éléments dans leur espace. Alors attrapons notre couche de cercle. Et au lieu de le faire à partir de zéro, nous pouvons réellement dupliquer le calque en cliquant sur cette icône ici. Appelons ça encerclé, et on va le déplacer sous le logo Hurley. Attrapons-le avec notre outil de déplacement et déplacons-le. Stupide de Kate, celui-là. D' accord, commençons par aligner le logo Hurley, et ensuite nous ferons chaque couche après ça. Donc, la sélection, outil, l'alignement , l' outil, Cliquez sur le logo, puis l'aligner. Ok, donc puisque nous avons déjà cette zone sélectionnée, tout ce que nous avons à faire est de saisir notre cercle à couche, puis avec notre outil de limitation, cliquez sur le cercle et puis nous pouvons aligner celui-ci. Kayla fait l'alignement pour les dernières couches de select. Allons de l'avant et utilisez notre outil de zoom pour effectuer un zoom arrière juste pour mieux voir la façon dont tout est aligné. Et ça a l'air plutôt bien. Allez-y, éteignez la couche de grille et la première partie de notre en-tête est terminée. Bon, donc nous allons aller de l'avant et passer au prochain tutoriel, qui va inclure l'ajout de la deuxième partie de notre en-tête, qui est la deuxième navigation Dairy ici à droite. Et je vais aussi vous donner quelques conseils professionnels supplémentaires pour trouver la topographie ou des types spécifiques de polices utilisées sur les sites Web. Parce que votre client a peut-être acheté ou utilisé un type spécifique de police sur son site Web et parce que vous la redessinez, il souhaite utiliser la même police, mais il ne connaît pas le nom du fonds. Je vais vous montrer où trouver le nom de cette police. Donc, si vous êtes prêt, allons-y et commençons à le faire. 21. Soyez Soyez organisé: bonjour et bienvenue avant de commencer sur le méga menu. Comme je l'ai mentionné dans la dernière leçon, je veux d'abord vous aider à vous organiser avec vos fichiers de conception Web, et il y a quelques raisons pour lesquelles vous voulez vous organiser. La première est pour votre propre bénéfice. Au fur et à mesure que nous travaillons sur ce projet, nous allons ajouter beaucoup plus de couches aux couches que nous avons déjà. Et si vous avez besoin de revenir en arrière et de faire des ajustements à quelque chose, vous allez passer beaucoup de temps à faire défiler à travers essayer de trouver cela spécifiquement er ainsi. Ce que vous pouvez faire, c'est organiser les couches en groupes de couches pour faciliter la recherche de ce dont vous avez besoin. L' autre raison pour laquelle vous voulez vous organiser est que ce fichier sera probablement envoyé à un développeur Web pour être recouvert si vous ne le faites pas vous-même, donc soit vous allez l'envoyer directement à un développeur Web. Ou peut-être que vous avez été embauché par une agence qui va l'externaliser à un développeur Web. Dans les deux cas, ils vont vous renvoyer ce fichier et vous dire qu'il doit être organisé et regroupé des couches. Et si ça t'arrive parce qu'ils n'étaient pas organisés, tu n'auras pas l'air professionnel. Et il y a des chances que vous ne travailliez plus avec ce groupe particulier de personnes. Laissez-moi donc aller de l'avant et vous montrer comment organiser toutes ces couches en groupes de couches afin que vous puissiez les rendre beaucoup plus faciles pour vous-même et pour les orteils. Soyez plus professionnel lorsque vous travaillez avec d'autres personnes de votre équipe ou si vous êtes embauché par une agence. Donc, l'une des choses que nous devons faire, comme nous l'avons fait avec certaines de nos couches précédemment, c'est que nous devons nommer les couches de manière appropriée fonction de ce que cette couche contient. Donc, ici, nous avons la boîte primaire pour notre boîte de navigation, ce qui est très bien, mais notre panier d'achat. Bien qu'il ait un panier d'achat en elle, il est plus simple de faire deux mots. Panier par rapport à ce qui était là avant. Et puis ici, nous pouvons renommer ce menu de navigation primaire de couche, et puis celui-ci serait notre menu de navigation secondaire. Et ce que je recommande de faire est d'avoir l'habitude de renommer et de regrouper vos couches pendant que vous travaillez, pas à la fin du projet parce que si vous attendez la fin du projet, cela vous prendra beaucoup plus de temps pour passer par et trouver toutes les différentes couches qui sont censées être ensemble et se regrouper ensemble. Encore une fois, c'est beaucoup mieux et plus rapide de le faire comme vous travaillez plutôt que de le faire à la fin. donc sur notre couche supérieure, cliquez avec le bouton droit et sélectionnez un nouveau groupe de calques. Voici donc notre joueur de groupe et nous allons nommer cette navigation principale. Ensuite, nous allons faire glisser toutes les couches qui font partie de la navigation principale afin qu' elles soient regroupées. Nous allons cliquer et faire glisser vers le haut une fois que nous relâchons ce calque sera indenté orteil à droite, et cela vous permet de savoir que ce calque particulier est dans ce calque de groupe. Donc, si nous fermons ce joueur de groupe particulier, ce calque disparaîtra. Nous avons donc aussi notre menu de navigation principal. Je vais mettre ce taux au sommet. Ok, donc c'est tout pour la navigation primaire. Allons de l'avant et fermons cela, et nous allons créer un nouveau groupe de couches au-dessus de notre panier d'achat. Il a été appelé la navigation secondaire, et on va mettre là, bien sûr, le panier et le menu de navigation secondaire. Bon, maintenant nous avons un tas de logo, alors allons de l'avant et ajoutons un nouveau groupe de calques pour les logos, et mettons-les chacun à l'intérieur. Maintenant, l'autre chose que vous pouvez faire pour mieux organiser vos couches est que vous pouvez placer des couches de groupe dans d'autres couches groupées. Donc, si nous sélectionnons notre couche Air Jordan clic droit et créez un nouveau groupe de calques, il sera ajouté au-dessus de cela. Et puis on peut mettre le logo Air Jordan et encercler un à l'intérieur de là. Et puis nous pouvons renommer ce groupe ici logo Jordan. Alors faisons ça pour les deux autres logos aussi. Et encore une fois, cela maintient tout ce qui est similaire aux autres couches. Maintenant que nous avons tous ces calques regroupés en trois groupes de couches, il n'est pas aussi difficile de naviguer et de trouver ce dont nous avons besoin. Nous devons aussi faire la même chose avec les chaussures, mais nous les regrouperons au fur et à mesure que nous arrivons à ces parties du projet. Pour l'instant, nous allons juste aller de l'avant et commencer sur le méga menu dans le prochain tutoriel. Donc, si vous êtes prêt pour ça, eh bien, faisons-le 22. Entête partie 2: Bonjour et bienvenue. Très bien, donc dans cette leçon, nous allons travailler sur notre navigation primaire et secondaire. Mais d'abord, je veux partager rapidement avec vous un outil que vous pouvez utiliser pour trouver des polices spécifiques sur des sites web en direct . Cela est utile si votre client a une police spécifique qu'il souhaite utiliser soit depuis son site Web existant ou le site Web de quelqu'un d'autre, mais qu'il ne connaît pas le nom du fonds. Donc, cet outil, c'est un outil de développeurs Web et c'est gratuit. Et il est déjà installé sur la plupart des navigateurs modernes, comme chrome et Firefox. Je préfère utiliser le chrome. Donc on va aller de l'avant et aller au chrome. Et puis si nous faisons un clic droit sur moi morceau de texte, nous sélectionnons ensuite inspecter. Et puis nous obtenons ces deux colonnes ici au bas du navigateur, et puis nous avons juste besoin de naviguer et de trouver une famille amusante, ce qui est juste ici. Et puis vous allez voir une liste de toutes les polices utilisées pour ce seul morceau de texte . Maintenant, pourquoi y en a-t-il autant ? Eh bien, la 1ère famille 5 ici, une monnaie Nike est la police principale, et celle qui devrait charger dans votre navigateur si elle n'est pas disponible dans votre navigateur, parce que peut-être vous utilisez un navigateur plus ancien et ce n'est pas pris en charge. Ensuite, il va charger la deuxième police, qui est Trade Gothic. Si celui-ci n'est pas disponible, il va charger Helvetica, puis il va essayer Aereo, et c'est pourquoi il y en a plus d'un. Donc, celui que nous voulons utiliser et notre conception Web si le client veut toujours l'utiliser, est une monnaie Nike. Malheureusement, nous n'avons pas accès à ce funt, puis Trade. Gothic est une ferme premium, qui nécessite un achat, puis les deux derniers sont des polices gratuites. Mais ils sont complètement différents de ces deux fonds ici, donc nous pouvons essayer d'accéder à cette trouvaille de notre client s'ils l'ont toujours disponible. Ou nous pouvons essayer de trouver un Funt similaire, et nous pouvons aller aux polices dot google dot com pour essayer de trouver un fonds qui est similaire à ceux utilisés sur le site existant. Maintenant, tous ces fonds sont gratuits. Il y a d'autres endroits où vous pouvez télécharger des polices gratuites, donc il s'agit juste de faire quelques recherches et d'essayer de trouver un funt qui est similaire à celui qu'ils veulent utiliser si vous ne pouvez pas obtenir la police réelle qu'ils veulent utiliser. À moins, bien sûr, qu'ils soient prêts à acheter ce fonds particulier. Donc, pour ce design Web particulier, je vais utiliser une police complètement différente. Et je vais utiliser une police appelée Oswald pour la navigation primaire et pour les titres , puis le chemin de fer pour la navigation secondaire et d'autres choses aussi bien. Vous pouvez donc télécharger ces fonds à partir d'ici. Si vous voulez utiliser exactement les mêmes polices, peu importe. Vous pouvez utiliser n'importe quelle police que vous souhaitez utiliser, alors continuons et commençons par la navigation secondaire en tapant, connectez-vous. Ensuite, nous allons ajouter cinq espaces pour ajouter la séparation, taper de l'aide, puis cinq autres espaces. Et c'est parce que nous allons ajouter une icône de panier à droite de cela également. J' ai également besoin de changer par la police et la taille, donc je double-clique à l'intérieur pour sélectionner le texte, et puis j'ai juste besoin de taper le nom de la police que je veux utiliser ici, qui est en fait ferroviaire. Et puis je vais taper 16 pour la taille de la police. Une fois que j'ai cliqué sur Tab, il va redimensionner ce contenu pour moi. Allons de l'avant et passons ce haut vers le haut. Pour l'instant, attrapons notre outil de déplacement. J' ai besoin d'un zoom avant juste un peu ici. Allons aussi sur nos guides avec le Commandant Control et le fils Michael et Key pour que nous puissions voir où le placer. Donc je vais juste le déplacer ici sur le côté droit de cette dernière colonne. Si nous allumons la grille, nous pouvons la voir un peu mieux. Maintenant, nous avons juste besoin de trouver une icône de panier, et nous allons faire une recherche rapide sur Google pour une icône de panier gratuit. Maintenant, comme avec les images, celles-ci peuvent ou non être libres, et elles peuvent ou non être protégées par des droits d'auteur. S' ils ont un filigrane comme celui-ci ici, eh bien, nous savons à peu près que ce sera un Icahn protégé par le droit d'auteur. Donc, soit nous avons besoin d'acheter l'icône et ensuite construire nos clients pour ces frais, soit nous pouvons créer le nôtre dans Gimp ou nous pouvons essayer de trouver une icône gratuite. Cette icône ici est gratuite, mais elle a ce qu'on appelle une ATTRIBUTION nécessaire pour l'utiliser. Alors qu'est-ce qu'une attribution et l'attribution est un ensemble de code qu'il a dû mettre sur votre site Web ? C' est un lien vers ce site Web en particulier, Donc, il est dit ici, licence gratuite avec attribution. Donc, si vous voulez l'utiliser, vous devez ajouter un lien vers le site Web. Ce n'est généralement pas quelque chose que je veux faire. Je veux trouver une icône 100% gratuite, mais pour l'instant, nous allons juste télécharger cette icône particulière. N' a pas vraiment d'importance pour les icônes que vous voulez utiliser. C' est juste pour l'entraînement. Alors allons de l'avant et naviguons vers la page de téléchargement. Nous allons sélectionner PNG 16 pour la taille, puis vous pouvez voir ici le code que vous devez ajouter au site Web pour une attribution à nouveau. Ce n'est pas quelque chose que je recommande de faire. C' est pourquoi vous voulez trouver une icône 100% gratuite. Allons de l'avant et téléchargeons celui-ci pour maintenant et puis pour l'ajouter à notre conception de site web ici, je vais juste cliquer et faire glisser dessus mon document. Une fois que je libère, il va être ajouté dans un nouveau calque. C' est donc juste une autre façon cool d'ajouter des fichiers supplémentaires à votre document. vais juste zoomer un peu pour que je puisse saisir cette icône et la mettre en place. Bon, allons de l'avant et attrapons nos outils de rectangle. Nous pouvons aligner tout exactement là où ils devraient être. Je vais passer sur la zone de gouttière et cette colonne ici pour aligner ce calque directement au centre,de haut en au centre, bas, à droite, à gauche pour m'assurer que le calque est sélectionné. Une houle. Prenez votre outil d'alignement. Maintenant, nous allons nous assurer que nous cliquons sur notre calque ici aussi, pour que Gimp sache que c'est la couche que nous voulons ah, ligne dans l'espace. Assurez-vous que vous avez sélectionné la sélection, puis un centre de ligne de la cible et aligner le milieu de la cible. Allons de l'avant et de sélectionner et faire la même chose pour notre panier d'achat. Bon, donc la dernière partie est d'ajouter notre navigation principale. Allons-y et zoomons un peu ici. Je vais aller de l'avant et cacher mes gars avec le Commandant Control et le Semi deux-points, puis retourner à l'outil de texte. On va taper tout dans toutes les casquettes pour faire des hommes, et ensuite on va faire cinq places. Et encore une fois, cela nous donne une certaine séparation entre chaque élément de ligne. Nous allons maintenir la touche Maj enfoncée, puis utiliser notre touche fléchée gauche et nous déplacer sur cinq espaces afin que nous puissions sélectionner les cinq espaces pour que nous puissions copier et le coller à la fin de chaque élément. Donc, le clavier pour couper est commande ou contrôle et voir. Et puis, si j'appuie sur ma touche fléchée droite, je vais à la fin, et je peux continuer à taper, puis commander ou contrôler et V pour coller ces cinq espaces. Ok, je vais aller de l'avant et finir le reste du menu. Je vais sélectionner tout avec Commander Control et la lettre A Je vais changer la police orteil Oswald et 24 pour la taille. Dépêche-toi. Prenons notre mouvement, outil, et passons simplement en haut, puis nous allons utiliser à nouveau nos outils d'alignement pour l'aligner directement au centre de notre document. Donc, commençons par ici sur le côté gauche jusqu'à droite. Blâmez-le, outil, cliquez dessus, puis un centre de ligne et le milieu de la cible. Maintenant, la dernière chose que je veux faire est que je veux vraiment déplacer ça un peu plus haut parce que c'est trop loin. Et si nous allumons nos guides avec Commander Control et le point-virgule, nous pouvons voir qu'il y a trop d'espace en haut et les icônes dont nous avons besoin pour le rapprocher un peu . Donc, ce premier guide est à 1 30 Je pense que je vais faire un deuxième guide à 1 80 Alors n'oubliez pas regarder le bas de votre interface tout de suite afin d'obtenir le guide à 1 80 Très bien, allons de l'avant et éteignons notre grille. Cela va rendre plus facile de sélectionner ce calque particulier et de le déplacer vers le haut. Donc ce qu'on va faire, c'est refaire l'alignement que nous venons de faire pour pouvoir le placer directement au centre, parler de lui et à gauche à droite de cette nouvelle taille que nous avons créée pour le menu. Bon, allons de l'avant et attrapons nos outils de rectangle afin que nous puissions réaligner notre navigation principale, l'outil de limite, cliquez sur le menu et puis réaligner un taux de sélection. Maintenant, avant de passer à la prochaine partie de ce projet, je pense qu'il y a quelques choses que nous pouvons faire pour améliorer cette conception d'en-tête. Ce que je veux faire, c'est que je veux saisir ces logos ici et que je veux réduire l'opacité afin qu' ils ne soient pas aussi sombres qu'ils le sont en ce moment. Parce que c'est le logo principal. Ces air secondaires et je ne veux pas que ces logos rivalisent avec celui-ci. Et nous pouvons simplement le faire en abaissant l'opacité de ces trois couches. Et je vais les déposer aussi. 30 pour l'opacité sur les trois. Maintenant, la dernière chose que je veux faire est que je veux ajouter une ligne au-dessus et au-dessous de la navigation principale . Ça va aider à lui donner une certaine séparation de la blessure supérieure de l'en-tête. Donc, pour ce faire, on va monter au sommet, et on va créer une nouvelle couche. Appelons ça la boîte primaire. On va le garder à la transparence pour le clic de remplissage. OK, alors nous allons prendre notre outil rectangle et nous devons allumer nos guides aussi. Donc, faisons une sélection ici, montons pour éditer la sélection de trait, puis tous les paramètres que nous avons créés pour les cercles devraient être les mêmes. Et on va les utiliser à nouveau. Il suffit de cliquer sur le coup. Sélectionnez Commandant Control dans les guides de la lettre D et Haider et maintenant nous avons cette ligne au-dessus et au-dessous. Ok, je pense que nous sommes prêts à passer à la prochaine partie du projet, qui sera le méga menu de ce web design. 23. Menu: Bonjour et bienvenue. Très bien, donc la prochaine étape de notre en-tête est de créer un méga menu pour que notre développeur Web sache que ces liens pour la navigation ne sont pas seulement des liens standard mais des liens vers un méga menu. Donc, si nous revenons à ce site Nike et que je survole l'un des éléments de menu, nous pouvons voir l'énorme méga menu de liens supplémentaires qui montrent tous les différents produits dans les différentes catégories. L' autre chose que nous avons est cette petite ligne noire juste en dessous de cette catégorie particulière , et nous ne la voyons nulle part ailleurs tant que nous n'avons pas accédé à ces autres catégories. Donc, c'est connu comme un état de vol stationnaire, et l'autre chose que vous remarquerez est qu'il y a une main là, et quand je m'en éloigne, ça change en flèche, sorte que cette main fait également partie de l'état de vol stationnaire. Donc, quand il s'agit de votre état de vol stationnaire, il y a beaucoup de choses différentes que vous pouvez faire. En plus d'ajouter simplement une ligne en bas, vous pouvez l'ajouter en haut. Vous pouvez ajouter une boîte. Vous pouvez modifier la couleur du texte ou de l'arrière-plan ou les deux. Il y a beaucoup de choses différentes que vous pouvez faire, indépendamment de ce que vous décidez pour votre conception Web. Vous devez le montrer dans cette conception Web afin que le développeur Web sache ce qui va se passer lorsque vous survolez une certaine zone. Donc, dans ce tutoriel, nous allons créer nos états de vol stationnaire et créer notre méga menu. Allons de l'avant et zoomons sur notre navigation principale, et la première chose sur laquelle je veux travailler est cette ligne sous la catégorie qui planait dessus. Je vais sortir de mes guides avec le Commandant Contrôle et le Semi Colon, et traînons un guide jusqu'à la fin et au début de ce mot ici. Nous allons ensuite saisir notre outil de sélection avec la lettre M. Dessinons une sélection entre ces deux guides et nous allons aimer notre boîte primaire. Très bien, utilisez vos claviers ont été coupés pour copier cette zone particulière avec le contrôle du commandant dans la lettre C, puis le rythme avec commande ou contrôle et la lettre V revient à vos couches parce que nous avons une sélection flottante, nous devons le déplacer vers sa propre couche afin que nous puissions le faire en cliquant avec le bouton droit de la souris et en sélectionnant une nouvelle couche. Kate. Renommons cette ligne de vol stationnaire, et ça doit sortir de ce groupe de joueurs, ou on va tirer ça jusqu'au bout. Et créons un nouveau groupe de couches appelé Hover State et mettons sa ligne de vol stationnaire à l'intérieur. Ce que je veux faire, c'est que je veux rendre cette ligne un peu plus sombre. Je vais cacher mes guides ici avec le Commandant Contrôle et le Semi Colon. Prenons notre outil de remplissage de seau. Assurez-vous que vous avez sélectionné le noir pour le premier plan, puis cliquez sur cette ligne pour le rendre noir pur. Bon, faisons une recherche sur Google pour notre icône de main. Permet de taper librement les icônes de la main de vol stationnaire. Cliquez sur ce bouton PNG pour agenouiller vos recherches. Celle-là, on dirait que ça va marcher. Nous allons cliquer avec le bouton droit de la souris sur Sélectionner copier l'image, puis Commander Control et V pour le coller . Et allons-y. Cliquez sur le calque et sélectionnez un nouveau calque. Très bien, définitivement trop grand. Bon, allons de l'avant et zoom arrière avec commande ou contrôle et la touche zéro et Prenons notre outil d' échelle était Shift plus s et passons cela un peu vers le bas pour que nous puissions le voir un peu mieux. Et allons prendre un coin et le déposer à, disons, 91. Pour l'instant, nous devrons peut-être être plus petits. Jetons un coup d'oeil en zoomant. En fait, c'est un peu trop grand encore. Alors réduisons à nouveau la taille. Si vous prenez le centre de cette boîte de balance juste ici, vous pouvez la déplacer en position. Donc je vais le déplacer juste là. Cliquez sur Échelle. Et l'autre chose que je veux faire, c'est que je veux enlever cette flèche parce que nous n'avons pas besoin de ça . Va saisir l'outil rectangle avec la lettre m sélectionnez-le et puis appuyez sur votre retour arrière ou supprimer la touche. Ce n'est pas une icône de très haute qualité, mais cela fonctionnera pour l'instant. Si nous allons utiliser une icône personnalisée comme celle-ci, je passerais un peu plus de temps à trouver une icône de meilleure qualité. Donc, pour rendre cela un peu plus facile, nous allons revenir sur le site Web Nike et nous allons copier le contenu de chaque colonne et créer une nouvelle couche pour chaque colonne de notre projet de conception Web. Alors allons à la première colonne, sélectionnez tous Commandant Control et voir à copier et puis quoi ? Leur outil de texte que nous pouvons coller avec Commander Control dans la lettre V. Nous allons sélectionner tout et nous allons le redimensionnons à 16 pixels pour la taille de la police, et nous allons utiliser le chemin de fer pour le Funt. Allons en fait audacieux. Puisque cette première colonne est en gras sur leur site va aller de l'avant et correspondre à cela pour l'instant. Je vais sélectionner mon outil de déplacement pour pouvoir sortir de là et zoomer un peu. D' accord, revenons et faisons d'autres ajustements à notre texte. ce moment. Le texte est trop proche ensemble, et il est plus difficile à lire, donc je veux ajouter un peu d'espace entre chacune des lignes. L' autre chose que je veux faire est d'augmenter la taille, et je pense que je veux changer le style de la police ainsi pour quelque chose avec un poids plus lourd . Je vais aller avec ultra gras et puis orteil ajouter l'espace supplémentaire entre chaque ligne. Nous allons augmenter la ligne de base du texte sélectionné, donc je pense que 14 fonctionnera assez bien. Ça a l'air beaucoup plus facile à lire, alors allons-y. Allez-y et zoomez ici et mettons cette première colonne à droite. En fait, sortons de l'état du vol stationnaire parce qu'il ne fait pas partie de l'état du vol stationnaire. Et allons de l'avant et avançons que nous sommes ici à gauche. Copions la colonne suivante et fondamentalement la même chose cette fois. Je n'irai pas avec Ultra Bold. Je vais aller avec le moyen de la même taille, ces 16 pixels et puis 16 à nouveau pour la ligne de base. Maintenant, le titre des chaussures devrait être un peu plus sombre puisqu'il s'agit d'un titre. Alors passons ça à Ultra Bold. On avait juste besoin de le faire trois fois de plus. Je vais aller de l'avant et accélérer ce tutoriel vidéo pour ne pas avoir à regarder ça au ralenti puisque je l'ai déjà fait deux fois. Et puis vous pouvez aller de l'avant et le faire vous-même aussi. D' accord. Quoi ? Ce sont des grilles allumées. Je vais aller de l'avant et déplacer ça sur la colonne de droite ici et ensuite celui-là par ici . Je vais passer à la colonne de gauche, la soude s'aligner avec notre logo Nike ici. Mais je dois le changer pour choisir un calque ou une option de guide. Sinon, je vais continuer à déplacer cette couche ici. On va créer un nouveau groupe de couches. Appelons ça le texte méga Menu, et on va mettre chacune de ces colonnes à l'intérieur. Je vais également organiser mon calque de sorte qu'ils soient dans le bon ordre et nous allons les renommer . Nous avons donc de nouvelles versions, des chaussures et des vêtements. Ok, éteignons les guides. Très bien, alignons toutes nos colonnes pour qu'elles soient toutes alignées sur le haut afin que nous puissions saisir notre outil rectangle pour créer une sélection pour nous donner un point de départ. Ensuite, nous avons juste besoin de saisir chacune des colonnes individuellement avec notre outil d'alignement , et nous devons nous assurer que nous la sélectionnons maintenant. Le problème est que nous sélectionnons la couche de groupe entière et non la couche sur laquelle nous avons cliqué. Nous allons donc devoir les déplacer en dehors de la couche de groupe afin de pouvoir les aligner et ensuite les replacer. Ensuite, nous allons sélectionner une ligne au bord supérieur de la cible. Et puis nous allons faire cela pour les autres colonnes est alors que nous devons nous assurer que nous sélectionnons également cette couche avec l'outil d'alignement. Ok, permet de sélectionner et de replacer tout. D' accord, je vais prendre tout le groupe de textos, et je vais le déplacer vers le bas. Avant d'essayer de le déplacer, assurez-vous d'avoir déplacé le calque actif sélectionné, puis cliquez dessus, puis utilisez vos touches fléchées pour le déplacer vers le bas. Ok, donc la dernière chose que nous devons faire est d'ajouter un peu d'espace entre les colonnes. On en a trop ici et pas assez ici, alors on va allumer notre grille et Spacey s'en sort un peu mieux. Maintenant, avant de faire cela, allons de l'avant et zoomons et ajoutons un guide en haut de nos colonnes ici. Donc, nous savons exactement où il doit aller pour aligner et nous allons choisir la boutique par couche de tendances . Mais ils sont déplacés outil et encore une fois, nous devons nous assurer que déplacer le calque actif est sélectionné afin que nous puissions sélectionner ce calque et pas autre chose. Je vais le déplacer juste ici sur cette colonne de grille juste ici et ensuite je vais juste utiliser mes touches fléchées pour le déplacer en place. Ok, allons de l'avant et alignons le méga menu directement au centre. Bon, donc tout va bien mieux maintenant. Donc la dernière chose que je veux faire est d'ajouter une autre ligne ici pour montrer que c'est la fin du méga menu. Allons dans notre navigation principale et sélectionnez notre boîte primaire et dupliqué sans fin Renommer il méga menu. En bout de ligne, déplacez ça ici. Prenons notre outil de déplacement, et nous allons déplacer cette ligne vers le bas vers le bas à droite à propos de ce qui devrait être bon . Ce que je veux faire, c'est me débarrasser de cette ligne de mire. Nous n'avons pas besoin de le faire, alors revenons à l'outil rectangle avec la lettre M, sélectionnez-le, puis appuyez sur votre touche de suppression ou de retour arrière. D' accord, assurons que nous avons une quantité égale d'espace entre le bas de cette ligne et le haut de cette ligne pour notre texte de méga menu. Sélectionnons-la et utilisez à nouveau notre outil de sélection pour faire une sélection pour la hauteur. Parfait. Très bien, créons un nouveau groupe, calque. En fait, pas à l'intérieur de celui-là. Ce nom, ce méga menu. Et nous allons mettre cette couche de groupe à l'intérieur et la ligne de fond ainsi que notre état de vol stationnaire . Nous devons également mettre ces couches de groupe particulières dans le bon ordre. Nous devrions avoir les logos en haut, suivi du secondaire primaire, puis faire un menu. Maintenant que nous avons fini avec notre méga menu, nous pouvons commencer à travailler sur la prochaine partie de notre site Web. Maintenant que nous avons fini avec notre méga menu, Mais avant de le faire dans le prochain tutoriel, je veux passer en revue quelques ajustements mineurs que nous devrions faire pour notre en-tête avant de commencer sur la section héros. Donc on va couvrir ça dans le prochain tutoriel. 24. Ajustements mineurs: Bonjour et bienvenue. D' accord, on en a presque fini avec notre en-tête. Mais avant de passer à la section héros, je veux juste parler un peu plus de l'en-tête et de la conception actuelle que nous avons, parce que je pense que cela peut être fait beaucoup mieux que ce que nous avons actuellement. Alors que je conçois, je peux me rendre compte que le design actuel que j'ai n'est pas très bon et je peux le rendre meilleur . Par exemple, je crois que la navigation principale devrait être la partie la plus importante de notre en-tête parmi ces trois éléments ici. Mais en ce moment, nous avons les logos beaucoup plus grands que la navigation primaire, et nos yeux rebondissent en quelque sorte entre ces deux. Et puis nous avons quelque chose ici et gardez juste à l'esprit que le méga menu ne serait pas visible jusqu'à ce que nous survolions la navigation primaire. Donc c'est vraiment occupé en ce moment, et je pense qu'on doit le réparer pour qu'il ne soit pas aussi occupé et que l'on reprenne l'importance à l' école primaire. Navigation et affaiblir simplement le faire en saisissant nos logos et en les rendant plus petits. Alors allons-y et faisons ça Prenons notre échelle avec Shift Plus s et prenons juste un coin pour le rendre plus petit. Donc, juste là, nous pouvons voir que met définitivement l'accent sur la navigation primaire. Donc c'est la première chose que nous voyons que ses yeux gravitent ici, et ensuite nous pouvons voir qu'il y a quelque chose ici, donc ce n'est pas aussi occupé qu'avant. L' autre chose que nous devons faire très rapidement est que nous devons réaligner les logos. Alors attrapons les logos et remettez-les en place le long du côté gauche de la grille. Et nous allons saisir notre outil rectangle avec la lettre M et une ligne de haut en bas. Ok, donc ça répare cette partie du design. Maintenant, l'autre chose que je pense que nous devons faire est que nous devons agrandir les polices un peu , et nous devons ajouter un peu d'espace supplémentaire maintenant. La prochaine chose que je pense que nous pouvons faire pour améliorer la conception globale de notre en-tête est d'augmenter la quantité d'espace entre les mots et augmenter la taille de la police et peut-être le style des polices ainsi que pour les rendre un peu plus audacieuses qu'elles ne le sont actuellement sont, et cela va l'aider à devenir beaucoup plus important. Et nos yeux vont graviter vers cette section d'abord, plus qu'il ne l'est maintenant. Donc la première chose que nous allons faire est de saisir notre outil de texte, et nous allons sélectionner les cinq espaces entre les deux. Les mots allaient les copier, puis nous allons les coller à la fin de chacun des mots afin que nous puissions augmenter l'espace entre chaque mot. Bon, allons de l'avant et réalignons au centre. Donc, prenons notre outil rectangle avec la lettre M. Nous allons faire notre sélection, et nous devons vraiment sortir cette couche de menu de navigation primaire du lecteur de groupe pour que nous puissions la sélectionner avec notre outil d'alignement, puis nous pouvons aligner le centre de la cible. Allons-y et remettons-le. En fait, je pense qu'on aurait dû augmenter la taille de la police d'abord, mais c'est bon. Allons de l'avant et sélectionnez tout et augmentez la taille de la police à 28. Et sélectionnons également Oswald bold pour augmenter le style ou la densité de cette police. Bon, donc on va devoir aller de l'avant et réaligner à nouveau. Allons de l'avant et augmentons l'espace entre ces deux lignes ici, on va prendre notre boîte primaire. Nous devons aller jusqu'à la couche et sélectionner recadrer au contenu de sorte que la limite de la couche s'accroche aux lignes elles-mêmes et non au document entier. Maintenant, nous allons saisir notre outil de balance avec Shift Plus s, et puis nous pouvons simplement saisir soit le haut du bas et simplement le tirer vers le bas ou l'amener vers le haut pour augmenter la quantité d'espace quelque chose aller de l'avant et sélectionner 78 pour la hauteur. Et maintenant, nous avons juste besoin de nous aligner au centre du haut et du bas de notre boîte. Donc on va encore sortir le menu de navigation principal. Prenez votre outil rectangle, faites une sélection, assurez-vous que vous cliquez dessus avec l'outil d'alignement, puis une ligne au milieu de la cible. Commandant parfait contrôle Andy de sélectionner. Rendons ça dedans. Et je pense que c'est 10 fois mieux qu'avant. Notre navigation principale est maintenant la plus importante. Il se distingue le plus. Nos yeux gravitent à cela. abord, l'en-tête n'est pas aussi occupé qu'avant. Nous reconnaissons toujours qu'il y a un logo ici et que ces liens peuvent nous emmener ailleurs. Et nous avons ici une navigation secondaire qui est beaucoup plus petite que la navigation principale et les logos. Donc, nous avons essentiellement nos yeux allant d'ici à ici, puis de retour à notre navigation principale , qui est là où nous voulons qu'ils aillent, parce que c'est là qu'ils vont trouver les produits qu'ils recherchent. Maintenant, nous allons avoir un autre problème maintenant que nous avons ajusté la taille de la navigation primaire et de la boîte primaire, et c'est là que nous allumons notre méga menu. Tout s'est déplacé. Nous avons besoin d'un espace supplémentaire pour nos colonnes ici parce qu'il est trop serré et nos états de vol stationnaire doivent maintenant être déplacés ici dans cette catégorie également. Alors allons de l'avant et faisons ces ajustements et nous serons tous prêts à passer à notre section héros. Donc la première chose que je veux faire est de travailler sur l'état de vol stationnaire. Trouvons l'état stationnaire et nous avons notre main ici. J' ai également besoin de changer le nom de cette icône trop survolée, et allons de l'avant et passons cela. J' ai aussi la ligne de vol stationnaire que j'ai besoin de déplacer, et je dois en fait la rendre un peu plus grande. Donc, je vais attraper mon outil de balance avec Shift Plus s. Et je vais juste glisser ça vers la droite pour correspondre au avec de notre parole. Bon, maintenant que nous avons ça, allons faire un zoom arrière et nous allons déplacer cette ligne de fond juste un peu plus de place pour que nos colonnes puissent s'intégrer. Donc, prenons notre méga menu outil de déplacement de grammaire et déplacez-le un peu vers le bas . Prenons notre couche de texte méga menu groupé la lettre M pour notre outil rectangle afin que nous puissions aligner de haut en bas, et nous avons également dû extraire ce calque de groupe hors de l'autre calque de groupe afin que nous puissions le sélectionner avec notre outil d'alignement alliant milieu de la cible et Mettons-le à l'intérieur du méga menu de Select. Et maintenant, allons de l'avant et ajoutons notre arrière-plan au méga menu. Donc on va reprendre notre outil de rectangle et dessiner une sélection. Changons le premier plan en blanc, et nous allons prendre notre outil de remplissage de seau. Nous devons également créer un nouveau calque pour le mettre dans, Appelons l'arrière-plan, faisons un menu, puis nous pouvons le remplir avec du blanc. C' est de select. Et maintenant, allons de l'avant et déplacons cela dans la couche de groupe appropriée, qui sera dans notre méga menu en bas. Parfait. Maintenant, l'autre chose est, quand vous soumettez ce design Web fini au développeur Web, vous ne voulez pas que le méga menu soit activé. Au lieu de cela, tu veux l'éteindre. Alors qu'ils travaillent à travers tous les différents groupes, couches et couches, ils rencontreront les méga hommes. Vous remarquerez qu'il est désactivé, ils l'activeront, puis ils sauront qu'ils doivent coder cela pour la navigation principale aussi. L' autre chose est, si vous jetez un oeil sur le site de Nike, vous voyez toutes ces différentes catégories, et chacune a son propre méga menu unique, donc vous devriez créer un méga menu pour chaque catégorie pour représenter tous les liens différents pour cette catégorie particulière. Sinon, le développeur Web va seulement coder le méga menu quatre hommes. Donc nous ne le ferons pas puisque vous savez déjà comment le faire. Si vous voulez pratiquer, vous pouvez aller de l'avant et faire cela pour chaque catégorie, et ensuite je leur donnerais des noms différents aussi. Donc nous avons des hommes méga menu, et ensuite j'en ferais un pour les femmes, les garçons , les filles, etc. Et puis je désactiverais ça pour le développeur Web , bien sûr, mais pour vous-même aussi, parce que vous ne voulez pas avoir ça quand vous travaillez sur votre section héros, qui est dans cette zone juste ici. Ok, maintenant que nous avons mis à jour notre en-tête, il semble beaucoup mieux qu'avant. Encore une fois, comme je travaille sur différentes sections de mon site Web, je n'ai pas de problème à revenir en arrière et à faire des ajustements pour améliorer la conception. Si je vois quelque chose qui ne fonctionne pas avec le design global Ok, alors ensuite, nous allons travailler sur notre session de héros. Donc, si vous êtes prêt à travailler là-dessus, faisons-le. 25. Héros,: Bonjour et bienvenue. Bon, maintenant on va travailler sur notre section héros. Et comme vous le savez, à partir des leçons précédentes, la section héros est l'une des parties les plus importantes de la page dont nous avons besoin pour saisir l' intérêt d'une personne et, espérons-le, les amener à faire quelque chose avant qu'ils ne naviguent vers une autre page ou avant qu'ils ne décident de quitter le site entièrement. Donc, quand une personne atterrit sur une page Web, elle doit d'abord décider. Suis-je au bon endroit ? Et si oui, est-ce que ce site va me donner ce dont j'ai besoin ? Dans ce cas, nous allons utiliser l'imagerie de manière créative afin de s'assurer que cette personne sait exactement où elle se trouve et de capter son intérêt parce qu'elle pourrait être intéressée par la nouvelle Air Jordan 9. Alors allons de l'avant et créons notre section héros, et ce sera vraiment facile à faire parce que nous avons trois parties principales de la section héros . Nous avons notre titre qui comprend le bouton Acheter maintenant sont Shoe et Michael Jordan plonger dans la chaussure. Donc, nous devons d'abord définir la hauteur de la section héros et cette section héros va changer en fonction de l'appareil ou de la taille du moniteur d'ordinateur que cette personne utilise. Donc, ce que les développeurs Web ont à faire de nos jours pour s'assurer que cette section de héros est visible dans le plus grand nombre d'appareils est de créer ce qui est connu sous le nom de réponse du code. Mais pour nous, nous devons définir la section héros, la hauteur de celui-ci qui conviendra le plus grand nombre de tailles d'écran. Et en fonction de qui vous parlez, il pourrait être n'importe où de 700 jours 100 pixels. Donc j'aime garder ma section de héros et cette zone. Et puis je laisse le développeur unique Non, que le site doit être réactif, et la section héros doit être disponible ou visible et autant d'appareils et de tailles d'écran que possible. Allons-y et allumons nos guides avec commande ou contrôle et la touche semi-deux-points, et nous allons traîner un guide vers le bas jusqu'à 750 ce sera la zone de confinement de notre section héros. Alors allons de l'avant et attrapons notre premier jeu de chaussures, qui sont les chaussures Nike. Ce n'est pas forcément exactement les mêmes chaussures que j'ai sélectionnées. C' est juste pour la pratique. Alors allez-y, prenez la chaussure, prenez votre outil de déplacement et déplacez-le en position. Nous avons aussi besoin d'une capture Michael Jordan. Alors, allons le trouver. Et amenons-le dans cette partie de la page Web aussi. Prenons notre outil de texte et désactivons nos guides. Et créons notre contenu pour le côté gauche de notre section héros. Et dans toutes les capitales, on va corriger la nouvelle entrée pour mettre un J 9 sur la deuxième ligne et rendre notre texte noir. Je veux également changer la police à Oswald Bold et augmentons la taille de la police à 100. Prenons notre outil de déplacement et revenons à notre chaussure Nike pour que nous puissions la faire pivoter afin que notre nouveau texte s'adapte un peu mieux à cette zone. Je vais allumer mes guides et faire tourner les chaussures. Nous allons attraper notre outil de rotation, qui est juste ici, et j'ai le raccourci clavier configuré pour contrôler ou commander plus T. Donc votre raccourci clavier, peut-être différent, selon que vous ou non mis à jour au début du cours. Une fois que vous avez cela, allez-y et cliquez sur les chaussures, puis vous pouvez soit taper l'angle que vous voulez, soit vous pouvez le faire pivoter manuellement en cliquant n'importe où à l'extérieur, puis en déplaçant votre souris vers la gauche ou la droite. Donc je vais juste le déplacer vers quelque chose comme ça autour de 32 ou 34 pour l'angle. Lorsque je clique, fais pivoter, puis avec l'outil de déplacement, je peux le déplacer en position juste là. J' aurai peut-être besoin de changer ça une fois que j'aurai tout mis en place. Alors prenons notre textile avec la lettre T. Choisissons tout parce que ce que je veux faire, c'est que je veux réduire l'espace entre ces deux lignes. Il y a trop d'espace. Donc, pour réduire la quantité d'espace entre les deux lignes, nous pouvons utiliser cette deuxième option ici, et nous voulons ajouter un nombre négatif pour réduire cette quantité d'espace. Donc je vais taper moins 40 et ça a l'air beaucoup mieux maintenant, ok ? Et prenons nos outils rectangulaires pour que nous puissions créer notre bouton d'achat en premier. Allons de l'avant et créons un nouveau plus tôt. Appelons-le par bouton et allons de l'avant et allumons nos grilles parce que ce que je veux faire est de créer un bouton d'achat de trois colonnes de large. Et puis prenons notre seau. Outil de remplissage, choisissez une couleur pour votre bouton d'achat, puis allez-y et remplissez-le et de sélectionner. Ok, je vais prendre mon outil de zoom ici pour pouvoir zoomer un peu. Allons sur notre guide pour que nous puissions tout aligner. Allons de l'avant et déplacons notre contenu d'abord, et nous devons en fait le mettre un peu en place. C' est Graham sont par bouton et déplacez ça en position juste là. Maintenant, nous allons créer le texte pour notre bouton d'achat. Revenons à White pour la couleur du texte. Et maintenant 75 pour la taille du texte, et je vais aller à Let's use chemin de fer pour le bouton. Je vais utiliser le chemin de fer ultra gras. C' est un peu trop grand, donc nous pouvons utiliser notre outil de pesage pour le condenser pour le tenir à l'intérieur de la boîte. Donc, avec shift et s, nous obtiendrons notre outil d'échelle. Désactivons le lien pour que nous puissions juste ajuster le avec de notre contenu. Donc je vais juste le faire dans, genre, genre, alors cliquez sur l'échelle. Bon, allons-y et zoomons et réparons Michael Jordan pour qu'il ne soit pas aussi grand qu'il l'est maintenant , alors allons-y et attrapons la couche de dette. Ok, alors attrapons notre outil de balance et réduisons-les. Donc il n'est pas aussi grand, probablement trop petit. Donc je vais aller un peu plus grand ici. Je vais allumer mes guides parce que je veux m'assurer que son pied est au bord de la grille. Allons le mettre à l'échelle. Prenons notre outil de déplacement et bougeons la chaussure un peu, et je vais en fait saisir ce contenu ici et le rendre un peu plus grand. Mais avant de le faire, allons de l'avant et créons un nouveau groupe de calques. Appelons ça du contenu. Je vais mettre nos informations sur le bouton de l'ongle là-dedans ainsi que notre contenu, et ensuite nous devons changer la limite de la couche pour ce calque de groupe particulier en allant jusqu' à la couche et en sélectionnant le rognage. Le contenu peut. Revenons à l'outil de balance. Et augmentons cela pour remplir l'espace ici. Cliquez sur Échelle. Éteignons nos guides et ses grilles. D' accord, ça a l'air plutôt bien. Allons-y et finissons par nous organiser ici. Créons un nouveau groupe de calques. Je vais le nommer des images. On va les mettre à l'intérieur, trouver la chaussure. Mettons ça là aussi. Et puis un autre groupe de couches pour la section héros. Appelons ça héros. Sortez-le. On va mettre notre contenu et notre image à l'intérieur de là. Et allons de l'avant et déplacons ça ici aussi. Donc, l'autre chose que nous devons faire est que nous n'avons pas encore fait est de mettre toutes ces couches de groupe dans sa propre couche de groupe appelée En-tête. Donc, continuons et faisons cela aussi bien pour que vous puissiez le voir en plaçant tout dans leurs propres couches de groupe. Nous avons aidé à organiser le panneau des calques, il est donc plus facile de trouver exactement ce dont nous avons besoin. Donc maintenant, nous avons notre en-tête dans notre héros dans des groupes séparés, des couches et notre section héros est maintenant terminée. Donc, dans le prochain tutoriel, nous allons commencer à travailler sur la section corps de notre site 26. Corps: Bonjour et bienvenue. Bon, donc pour cette partie de notre projet, nous allons commencer à travailler sur la section corps de la page Web, et nous allons prendre ce contenu existant et dupliquer afin que nous puissions être cohérents tout au long de notre conception, et cela le rend plus facile par rapport au redémarrage à partir de zéro. Mais nous avons un petit problème, et c'est quand nous avons redimensionné ce texte plus grand. Dans la dernière leçon, il a reformaté le texte d'un calque vectoriel en calque graphique, et vous pouvez voir que le texte est flou et pas aussi net qu'avant. Et si nous prenons notre outil de texte et que nous cliquons dessus, nous recevrons un petit message ici vous demandant si nous voulons continuer à éditer notre texte. Si je clique sur Modifier, il va revenir à la taille originale qu'il était avant qu'il ne soit mis à l'échelle. Ensuite, nous devons sélectionner tout et redimensionner ce texte pour qu'il corresponde à la taille que nous voulons. Et faisons 130 pour les pixels. Et allons de l'avant et remonter ce texte. Donc à droite il devrait être bon et allons de l'avant et faire la même chose pour ce contenu ici pour le bouton par ongle. Cliquez dessus. Et puis cette fois, nous allons réellement sélectionner Créer un nouveau calque et il va prendre ces informations et nous allons les mettre sur un nouveau calque pour nous. Donc je vais mettre ça ici. Maintenant tu démissionnes. Jetons un coup d'oeil à nos couches ici et nous pouvons voir que nous avons deux types de couches différents. Et nous avons parlé de tous les différents types de couches au début du cours dans la conférence des couches, et nous avons parlé de tous ces différents types de couches. Donc, ce calque ici est un calque de texte, et nous savons que parce qu'il a cette icône ici comme faisant partie de ce calque, le calque le soufflage, même s'il contient les mêmes informations. À l'heure actuelle, ce n'est pas vraiment un calque de texte. Il s'agit maintenant d'un calque de pixels d'inquiétude de couche graphique, et il a été converti en calque de pixels lorsque nous l'avons redimensionné. Vous devez donc être prudent lorsque vous redimensionnez votre texte car il va le changer d'un vecteur à un calque de pixels, et vous pouvez simplement le modifier à l'aide de votre outil de texte. Donc je vais aller de l'avant et supprimer ça maintenant. Calque ici, le calque de pixels parce que nous n'avons pas besoin de cela. McGahan a renommé cet article retiré numéro un, et nous avons juste besoin de le remettre en position. Bon, allons de l'avant et une ligne de notre texte directement au centre du bouton le long des quatre côtés. Et pour ce faire, nous devons d'abord prendre cela maintenant, couche et le déplacer vers le haut. Donc c'est hors de cette couche de groupe. Sinon, nous ne serons pas en mesure de le sélectionner avec notre outil d'alignement. Maintenant, nous pouvons saisir cet outil rectangle pour faire la sélection et l'outil d'alignement. On va cliquer dessus et ensuite on va aligner le centre et le milieu de la cible. Très bien, écoutez le texte par ongle à l'intérieur du calque de groupe. Clôtons ça. Sélectionnez le lecteur de groupe de contacts et dupliquez. ça Allons-y et sortonsçaparce que ça va être dans une autre section, et maintenant on peut saisir ça avec notre outil de déplacement et le déplacer en position. Allons sur nos guides pour que nous puissions les aligner sur le côté droit ici. Trouve tes sandales Hurley. Allez-y et allumez ce calque. Et nous allons trouver notre surfeur aussi. Ok, mettons-nous nos sandales en place ici. La sandale a l'air un peu trop petite de moi. Donc, je vais aller de l'avant et re l'échelle avec mon outil d'échelle, rendre un peu plus grand et l'aligner sur le côté gauche de notre grille. Tiens, attrapons notre surfeur aussi. Je vais le mettre dans un endroit et re échelle aussi. Faisons croire que ce surfeur surfe sur le côté de la sandale juste ici . Ça va le bouger un peu douloureux à cause de la bonne chose. Et je veux aussi prendre ce contenu et le déplacer vers le haut. En fait, voyons un peu d'espace entre la section héros et notre contenu. Je veux juste changer ce contenu en contenu et cette copie de contenu. Bon, Graham, notre outil de mesure. Et mesurons 75 pixels du bas de la section héros afin que nous puissions placer ce contenu au bas de ces 75 pixels. Donc nous allons cliquer sur notre guide ici, faire glisser jusqu'à ce que nous voyons 75 pixels en bas, en bas à gauche de notre interface. Donc juste là, il est écrit 75 quand je lâche, et puis je félicite un guide et je le traîne jusqu'à l'endroit où se trouvent ces réticules. Et puis je sais qu'il est à 75 pixels du bas de la section héros. Allons de l'avant et attrapons l'outil de déplacement. Et nous allons déplacer notre contenu de sorte que la première ligne soit juste là à la ligne directrice particulière que nous venons de créer. Ok, nous allons zoomer. Et je pense qu'on peut monter notre Sando et notre surfeur aussi. Je pense que notre surfeur est encore un peu trop grand. Donc je vais prendre la balance à nouveau et juste le rendre un peu plus petit. Très bien, créons un nouveau groupe de calques pour nos images. Et puis allons de l'avant et les déplacer vers le haut avec notre outil de déplacement. D' accord. Je vais réduire un peu plus le surfeur parce que je veux m'assurer que le coude n'est pas au-dessus de cette ligne particulière juste là. D' accord, ça a l'air plutôt bien. Je vais aller de l'avant et mettre un autre guide au bas des sandales, et ensuite je vais mesurer 75 pixels de plus. Nous avons donc un espace égal entre cette chaussure et le prochain produit. Alors prenez votre outil de mesure à nouveau et mesurez 75 pixels, puis placez votre gars là . Et puis il s'agit juste de répéter les étapes que nous venons de prendre pour ces sandales et de faire la même chose pour les chaussures Converse aussi. Alors allons de l'avant et allumons notre prochaine image et créons un nouveau groupe Lear pour eux appelé Images numéro deux. Je vais tout déplacer ici un peu et encore nos patineurs un peu trop gros. Donc on va utiliser notre balance pour à nouveau. On dirait qu'il est en train de patiner sur le dessus de ces chaussures. Donc juste à ce sujet il devrait être bon. En fait, je veux prendre les deux images et les déplacer vers la droite afin qu'elles soient alignées sur le côté droit des grilles. Très bien, prenons notre contenu ici et dupliquons-le à nouveau, et continuons-y et mettons-le en position jusqu'au côté gauche de cette grille. Ensuite, nous devons déplacer le texte pour qu'il s'aligne sur le nouveau guide que nous venons créer. D' accord, allons-y et remontons nos images un peu. Ok, donc nous avons maintenant un espace égal entre chacun des produits, mais personnellement, mais personnellement, je pense que c'est encore trop serré. Allons-y et revenons en arrière et ajoutons encore 25 pixels d'espace entre notre contenu. Donc nous allons utiliser cet outil de mesure à nouveau et mesurer 25 pixels, puis mettons notre nouveau guide là. Ensuite, nous avons juste besoin de tout déplacer pour s'aligner sur ce guide, et nous devons faire la même chose pour celui-ci. Mais cette fois, nous allons déplacer ce type vers le bas des chaussures. Nous devons donc nous assurer que dans deux options, nous sélectionnons un calque ou un guide afin que nous puissions sélectionner ce guide pour le déplacer. Et puis quoi ? L' outil de mesure. Je vais mesurer 100 pixels, et je vais en fait me débarrasser de ce guide ici nous n'avons plus besoin de celui-là. Et puis nous avons juste besoin de tout déplacer en position et de faire en sorte que vous retourniez pour déplacer l'acte des couches. Il pouvait déplacer tout le contenu de la couche de groupe. Ok, permet de les regrouper dans leur propre couche agrippée. Donc nouveau groupe de couches à nouveau. Appelons ça Hayley Sando. Donc, le contenu que l'on va à l'intérieur d'ici ainsi que ces images, puis un nouveau groupe de calques pour celui-ci appelé Converse. Ok, je vais zoomer avec commande ou contrôle NZ et cacher les guides. Maintenant, je pense que l'ajout de 25 pixels supplémentaires aide définitivement la conception globale. Donc ce n'est pas aussi serré qu'avant. Une dernière chose avant de passer à autre chose, allons de l'avant et prenons nos sandales et nos chaussures converses et les regrouper dans leur propre couche de groupe appelée corps. Ok, déplaçons ça, puis mettons les sandales et les chaussures et là et c'est tout. Nous en avons tous fini avec le corps. Impressionnant ! D' accord. J' espère que vous apprécierez ça. Jusqu' à présent, nous avons une section supplémentaire pour ce projet de conception Web, et c'est le pied de page. Donc, si vous êtes prêt à commencer là-dessus, eh bien, faisons-le 27. Footer partie 1: Alors allons de l'avant et copie de ces colonnes et Adam à notre document décrit l' outil de texte collé dans la sélection All W're Gonna Do 14 points pour la taille de la police. Changeons en chemin de fer qui sélectionnent le chemin de fer Bold. Il est tôt exactement là où j'en ai besoin, donc je vais juste le laisser là maintenant pour les autres bombes allaient laisser une colonne d'espace entre elles. Alors allons de l'avant et copions le reste de l'information. - La seule chose que je veux faire, c'est que je veux les prendre. La seule chose qui devrait vraiment être en gras ID dans ces deux colonnes est les titres. Alors allons de l'avant et attrapons ces trois lignes et il suffit de sélectionner le chemin de fer régulier et ensuite la même chose avec ces cinq lignes. On va aller de l'avant et changer ça juste pour le chemin de fer. Très bien, nous avons encore une ligne de contenu que nous devons copier, et c'est l'information sur les droits d'auteur. Faisons le moyen de chemin de fer italique juste pour le mélanger un peu, et ensuite nous allons aligner ça ici sur le côté gauche. Zoom arrière parce que nous avons besoin de créer une ligne horizontale deux colonnes et ce contenu ici, nous allons saisir notre outil rectangle. Et puis en ce qui concerne la couleur, je suis juste un peu plus brillant que l'arrière-plan. Donc 34 34 34 a l'air bien pour l'instant. Et puis allons bien maintenant nous pouvons aller de l'avant et remplir ça. Ok, ils sélectionnent. Il y a des mensonges. Je pense qu'il pourrait être un peu trop épais avec le donc je vais le faire. Donc, je vais attraper mon outil d'échelle avec Shift Plus s. Le seul problème est que la limite de couche doit être corrigée. Alors sortons de cet outil avec la clé d'échappement. Assurez-vous que le contenu du calque est maintenant. La seule chose est, je pense que cette ligne est un peu trop épaisse, alors assurez-vous que nous sélectionnons notre couche appropriée ici. Je veux aussi désactiver mes guides et ma grille. Prenez votre outil d'alignement. Cliquez sur ce contenu ici il fonctionne. Donc, déplacons ce calque jusqu'au sommet comme ça et une ligne au milieu de la cible un jour. Parfois, Gimp nous fait déplacer Lee, donc parfois nous pouvons sélectionner ces éléments avec notre outil d'alignement où se trouvent les couches. Mais parfois, Gimp ne reconnaît pas où nous cliquons Nous devons donc déplacer le calque dans une nouvelle position comme dans le panneau de calque au-dessus de tous les autres calques afin que vous puissiez réellement sélectionner. C' est un peu difficile à lire. Donc, commençons par à propos de Nike Graver Textual Select tous avec contrôle Commander et un et puis rappelez-vous dans deux options. Nous pouvons venir ici et augmenter le montant de avec cette option ici. Et cette fois, nous allons augmenter l'espacement. Donc ça va être positif. La dernière fois qu'on a dû dire pour ça aussi, Ok, je vais jeter un coup d'oeil à mes guides, et c'est et laissons choisir un calque ou un guide parce que je veux me débarrasser de ce guide ici . Allons de l'avant et mettons ces colonnes là, alors allons de l'avant et copions ces colonnes et Adam dans notre document que l'outil de texte coller dans, sélectionnez tout ce que nous allons faire 14 points pour la taille de la police. Changons-le en chemin de fer. C' est sélectionner le chemin de fer gras et changeons la couleur du noir au blanc. Et allons de l'avant et allumons notre guide pour que nous puissions aller de l'avant et aligner cela correctement. On dirait que c'est déjà là où j'en ai besoin, donc je vais juste la laisser là maintenant, les deux autres colonnes allaient laisser une colonne d'espace entre elles, alors continuons et copions le reste de l'information. Maintenant, la seule chose qui devrait vraiment être en gras ID dans ces deux colonnes est les titres. Alors allons de l'avant et attrapons ces trois lignes et il suffit de sélectionner le chemin de fer régulier et ensuite la même chose avec ces cinq lignes. On va aller de l'avant et changer ça juste pour le chemin de fer. Très bien, nous avons encore une ligne de contenu que nous devons copier, et c'est l'information sur les droits d'auteur. Faisons le moyen de chemin de fer italique juste pour le mélanger un peu, et ensuite nous allons aligner ça ici sur le côté gauche. Ok, allons faire un zoom arrière parce que nous devons créer une ligne horizontale pour créer un séparateur ou séparation entre les trois colonnes et ce contenu ici. Prenons notre outil de rectangle pour qu'on puisse créer une forme et puis en ce qui concerne la couleur, je vais juste aller un peu plus lumineux que l'arrière-plan. Donc 34 34 34 a l'air bien pour l'instant. Et puis remplissons ça avec notre filtre à seau sera. Mais d'abord, Avant de le faire, créons un nouveau calque. Appelons ça le diviseur. Bon, maintenant on peut aller de l'avant et remplir ça. Ok, ils choisissent. Très bien, je pense que cette ligne est un peu trop épaisse, alors nous allons zoomer ici et prendre nos outils de balance pour qu'on puisse la rendre un peu plus petit . Disons de ça. Et changeons la hauteur, aussi. Faisons trois pour la hauteur, et je veux juste la déplacer un peu vers le bas. Donc juste à ce sujet il devrait être bon. Maintenant, nous avons juste besoin de faire notre alignement de toutes nos colonnes et de notre contenu ici. Alors prenons notre outil rectangle avec la lettre M, et nous allons espacer ce contenu entre le séparateur et le bas du pied de page, et nous allons nous assurer de sélectionner notre calque approprié ici. Je veux aussi désactiver mes guides et ma grille. Prenez votre outil d'alignement Cliquez sur ce contenu ici ne semble pas fonctionner, alors déplacons ce calque jusqu'au sommet. D' accord. Maintenant, nous pouvons le sélectionner et une ligne au milieu de la cible. Parfois, nous pouvons sélectionner ces éléments avec notre outil d'alignement où se trouvent les calques. Mais parfois, Gimp ne reconnaît pas où nous cliquons Nous devons donc déplacer le calque dans une nouvelle position en haut du panneau calque au-dessus tous les autres calques, afin que vous puissiez réellement le sélectionner avec l'outil d'alignement. Ok, laissons de sélectionner. Et puis nous allons prendre nos trois colonnes ici et les aligner au sommet. Ajoutons donc nos lignes directrices, et ensuite nous avons juste besoin de déplacer chaque colonne vers cette ligne directrice. Peu importe où se trouve cette ligne directrice, parce que nous allons les aligner à partir du haut du pied de page et du séparateur en seulement une seconde. Maintenant, avant de faire notre alignement, je veux juste ajouter un peu d'espace supplémentaire entre les lignes parce que c'est trop serré en ce moment et c'est un peu difficile à lire. Donc, commençons par à propos de Nike graver texte Sélectionner tout avec Commander Control et un et puis rappelez-vous dans deux options, nous pouvons venir ici et augmenter la quantité d'espacement entre les lignes avec cette option ici. Et cette fois, nous allons augmenter l'espacement. Donc ça va être positif. La dernière fois, nous avons dû le réduire et c'était négatif. Alors faisons-le sept. Et puis on va faire la même chose pour ça aussi. Ok, je vais encore jeter un oeil à mes guides. Et laissons choisir un calque ou un guide parce que je veux me débarrasser de ce guide ici. Allons de l'avant et mettons ces colonnes dans leur propre groupe de couches, clic droit et sélectionnez Nouveau groupe de calques. Je vais le nommer. Trois colonnes. D' accord. Maintenant, nous pouvons saisir ce calque de groupe et une ligne vers le centre du haut et le bas juste ici. Alors quoi ? Ce sont des outils rectangulaires. Nous pourrions aller de l'avant et faire notre outil d'alignement de sélection, cliquer sur l'une des colonnes, et encore une fois, cela ne nous permet pas de le sélectionner. Donc on va déplacer ce joueur de groupe jusqu'au sommet, et on va essayer de cliquer dessus à nouveau. Cette fois, il nous permet de le sélectionner et ensuite nous pouvons aligner milieu de la cible. Donc maintenant, nous avons un espace égal entre ici et ici. Que de select avec Commandant Control et D et nous allons de l'avant et déplacer ce retour vers le bas. Nous devons donc créer un nouveau groupe plus tard pour le pied de page pour toutes ces informations. Mais nous avons du contenu supplémentaire que nous devons ajouter à notre autre côté de son pied page ici à droite, qui va inclure nos icônes de médias sociaux. Mais on va le couvrir dans le prochain tutoriel. Donc, si tu es prêt à tout faire, faisons-le. 28. Partie 2: notre dernière chose pour ce projet particulier est d'ajouter des icônes de médias sociaux. Mais avant de le faire, je veux partager avec vous quelque chose dont vous n'avez peut-être jamais entendu parler auparavant parce que personne ne parle de cela, et c'est une violation des droits d'auteur sur les logos des médias sociaux. De quoi est-ce que je parle exactement ? Eh bien, jetons un coup d'oeil sur le site Nike à nouveau et jetons un coup d'oeil à leur pied ou ici, et vous pouvez voir les icônes sociales qu'ils ont ici pour Twitter, Facebook, YouTube et Instagram. Et chacun de ces logos est placé à l'intérieur d'un cercle, et lorsque vous passez le curseur sur eux, vous verrez l'état de vol stationnaire, qui s'avère blanc. Eh bien, devine quoi ? Il s'agit d'une violation du droit d'auteur sur ces logos particuliers. Encore une fois, tu es genre, quoi je parle ? Voyons comment utiliser correctement les Logos des médias sociaux pour ne pas empiéter sur ces entreprises. Voyons comment utiliser correctement les Logos des médias sociaux pour ne pas empiéter sur ces Droit d'auteur. Alors faisons une recherche pour les logos Facebook. Nous ne allons pas faire d'images parce que ces vols toutes les infractions, sauf peut-être quelques d'entre eux, faisons défiler vers le bas et sélectionnons des actifs. Donc, Facebook, Twitter, instagram et toutes les autres plateformes de médias sociaux ont une ressource sur leur site Web qui ressemble à ceci qui explique comment vous êtes censé utiliser leur logo sur votre site Web. Donc, si nous faisons défiler ici, nous pouvons voir les logos et les badges qu'ils vous fournissent directement à partir de Facebook que vous pouvez utiliser sur votre site Web. Et si vous faites défiler vers le bas, vous verrez également d'autres éléments, expliquant comment vous pouvez utiliser leur logo sans enfreindre leurs droits d'auteur. Maintenant, si vous voulez utiliser cette icône de logo particulier, si vous cliquez dessus, vous finirez par aller à une autre page. Et puis vous pouvez télécharger ce logo particulier pour l'utiliser sur votre site Web afin que vous devez choisir bien de votre média. Il existe différentes exigences pour l'impression et l'emballage en ligne, télévision et le film. Maintenant, vous ne pouvez même pas les utiliser à la télévision et au cinéma sans obtenir d'abord l'autorisation écrite de Facebook. Mais puisque nous travaillons en ligne, jetons un coup d'oeil aux directives et allons-y et faisons défiler vers le bas et regardons ceux-ci afin que vous ne puissiez pas styler les yeux leur logo. Vous ne pouvez pas la déformer ou modifier leur couleur ou la forme. Tout cela n'est pas autorisé, et il est dit si vous ne pouvez pas utiliser la bonne couleur en raison de limitations techniques. Eh bien, alors vous pouvez le convertir en noir et blanc, et il dit juste ici ne pas utiliser d'icônes ou d'images pour représenter Facebook autre que ce qui se trouve sur ce site. Donc ici, sur la gauche, pas autorisé sur la droite autorisé. Donc, si vous ne faites pas ce que Facebook dit que vous pouvez faire avec le logo, alors vous enfreignez la loi. Vous enfreignez leur copie, n'est-ce pas ? Et ils peuvent légalement s'en prendre à vous ou à la société pour laquelle vous travaillez pour avoir enfreint ce droit d'auteur. Maintenant, est-ce que ça veut dire qu'ils vont aller chercher des dommages pour les millions et des millions de sites Web qui utilisent leurs logos et correctement ? J' en doute, mais ça ne veut pas dire qu'ils n'ont pas le droit de le faire. Et je pense qu'à ce stade, il est devenu acceptable de réutiliser ces logos avec des couleurs différentes et des formes différentes et ce que vous avez. Mais encore une fois, il y a toujours une chance que Facebook peut venir après le propriétaire du site, que ce soit Nike ou petite maman et pop shop et dire que vous enfreignez mon droit d'auteur, soit le changer ou nous viendrons après vous pour des dommages. Encore une fois, je ne pense pas qu'ils vont s'en prendre à la petite maman et à la pop shops, mais peut-être une marque comme Nike. Ils peuvent s'en prendre à une compagnie comme ça. C' est une entreprise de 1 000 000 000 000$, et je suis sûr que Nike ne serait pas heureux si vous avez pris leur logo et commencé le changer et changer les couleurs et le déformer et le coiffer de différentes manières pour promouvoir quelque chose sur votre site de sorte que ce serait encore une fois une infraction sur le logo Nikes. Mais pour une raison quelconque, c'est OK pour les icônes des médias sociaux et les logos des médias sociaux, donc ce n'est que quelques informations que je pensais partager avec vous. Mais ce que nous allons faire pour ce projet de conception Web, c'est que nous allons aller de l'avant et enfreindre leurs droits d'auteur parce que nous allons prendre leurs logos et nous allons les mettre dans un cercle, et nous allons les changer juste un peu peu. Pas beaucoup, mais il est juste pour la pratique afin que vous puissiez apprendre à créer ces différentes formes et gimp et orteil apprendre quelques-uns des autres outils que nous avons un gimp pour faire des choses différentes. Donc ce qu'on va faire, c'est qu'on va aller de l'avant et télécharger. La ressource provient directement de Facebook et Instagram et Twitter et Pinterest ou de toutes les plateformes de médias sociaux que vous voulez. Il suffit de télécharger quatre logos de chacun de leurs sites. Il suffit de faire une recherche Google pour les actifs Facebook. Twitter atouts choses comme ça, et vous trouverez que chacune de ces entreprises aura un endroit où vous pouvez télécharger leurs logos pour les utiliser sur les sites Web. Donc, ils vont vous donner des couleurs différentes, la couleur d'origine, et ensuite ils devraient avoir des couleurs pour le noir et le blanc aussi. Alors allons de l'avant et téléchargeons tout en blanc, donc tout est cohérent. Et puis nous irons de là jusqu'à la taille. Trouver quelque chose autour de 50 à 60 pixels parce que nous allons aller de l'avant et en réduire la taille de toute façon. Mais commençons par une icône de logo assez haute qualité, parce que si nous allons avec quelque chose de plus petit comme un 15 ou 20 pixels et que nous devons le rendre plus grand, il va devenir pixélisé. Commençons par quelque chose autour de 50 à 60 ans. D' accord ? Donc, une fois que vous avez tous ceux téléchargés, allez de l'avant et ajoutez-les à votre document. Vous pouvez simplement les faire glisser et les déposer dans le document, puis un nouveau calque sera créé pour chacun d'eux. Ok, j'ai tous mes logos dans mon document maintenant, et je l'ai mis dans cet ordre Facebook, Instagram, Pinterest et Twitter. Vous pouvez faire la même chose ou une autre commande. C' est entièrement à vous de décider. Ça n'a pas vraiment d'importance. L' autre chose que j'ai fait est que j'ai activé ma limite de couche d'affichage parce que je veux vous montrer certaines choses avec notre outil d'alignement. Quand on va à une ligne, chacun des logos. Et s'il a fait l'exercice d'alignement au début du cours, alors vous êtes déjà familier avec ce que nous allons couvrir lorsque nous arriverons au point où nous devons aligner nos logos et être des éléments. Mais pour l'instant, ce que nous devons faire est que nous devons tout redimensionner pour qu'ils soient tous de la même hauteur maintenant , selon le logo que vous avez téléchargé, ils peuvent être plus petits que ce que j'ai, qui est très bien. Nous allons redimensionner tous les logos à une hauteur de 30. Donc, nous allons Graham, notre outil de balance, et je vais commencer avec ma première couche ici, et j'ai un nouveau 30 pour la hauteur, et ensuite je vais continuer avec les autres aussi. Maintenant, avant que je ne fasse le logo Twitter, il y a une chose que nous devons faire, et papa est retiré cet arrière-plan grisâtre que nous avons dans le logo en ce moment parce que nous pouvons voir que la limite de la couche est autour de et non le logo lui-même. Je veux la limite du calque autour du logo afin que nous puissions le redimensionner pour qu'il soit à la même hauteur que tous les autres logos. Sinon, l'oiseau Twitter va être beaucoup plus petit. Alors attrapons notre outil de sélection floue. Et puis dans les options de l'outil il suffit de définir le seuil à environ 2018 à 20 est très bien. Sélectionnez l'arrière-plan, puis appuyez sur Supprimer ou sur la touche Retour arrière pour vous débarrasser de cet arrière-plan. Ensuite, nous allons de sélectionner, et puis nous pouvons aller de l'avant et aller jusqu'à la couche et sélectionner le contenu recadré, et maintenant sont calque. La limite est là où elle devrait être, alors allons-y et redimensionnons-la à 30 pour la hauteur et allons-y et bougeons tout le petit descend en place ici. Maintenant, je ne peux pas les voir parce qu'ils sont blancs. En fait, voici le Facebook ici, mais c'est OK, parce que c' est OK, parce que depuis que j'ai déplacé le leader actif sur, je peux juste cliquer n'importe où sur mon document et il va déplacer ce couche pour moi. Donc je vais juste faire de celui-là le 1er 1 Prenons Instagram. Ça va être le deuxième. On a Pinterest ici quelque part, et je vais faire ce troisième. Ok, prenons notre Instagram parce que si le tien est noir comme le mien, il faut le changer en blanc. Et nous pouvons le faire en allant jusqu'à la couleur en sélectionnant l'augmentation de la couleur, puis cliquez sur cette barre de couleur ici et sélectionnez blanc. Donc ça va changer les orteils blancs pour nous. Ok, Ensuite, nous devons créer des cercles pour que les logos entrent dans, donc nous allons saisir notre outil Ellipse dans le panneau Outils. Nous voulons avoir un rapport d'aspect fixe sélectionné, et ils allaient simplement cliquer et faire glisser une forme et faire 50 pour la largeur et la hauteur. On va aussi créer un nouveau calque appelé Circle. Appelons ça logo Cercle avec un remplissage avec transparence Encore une fois, cliquez sur. D' accord. Et puis changeons notre couleur à ce numéro. Juste ici. 333333 Cliquez. Ok, et puis on va prendre notre outil de remplissage de seau pour remplir cette couleur dans de select, et ensuite on a notre première forme. D' accord ? Avec mon outil de déplacement. Je vais bouger ça. Et l'autre chose que je dois faire est que je dois changer la limite de la couche pour cela parce qu'elle est trop grande. Et c'est important parce que nous allons à un mensonge tous nos cercles uniformément, haut en bas et répartir et même quantité d'espace entre eux. Et nous devons passer à la couche de recadrage au contenu afin de faciliter ce processus. Ok, je vais mettre ces cercles juste en dessous du logo Facebook, et ensuite je vais dupliquer ce cercle. Déplaçons le sur Instagram, puis déplacez-le sous ce logo. Alors répétons ça pour chacun d'eux. D' accord. Je vais bouger avec ce cercle ici et loin. Je peux donc vous montrer à quel point il est facile d'aligner ces cercles vers le haut et de répartir une quantité égale d'espace entre eux. Maintenant, comme vous le savez peut-être ou non, nous ne pouvons pas sélectionner plus d'un calque dans le panneau Calques. Mais heureusement, avec notre outil d'alignement, nous pouvons sélectionner plusieurs couches, puis utiliser les options des options de l'outil pour aligner rapidement tout. Donc je vais cliquer sur le premier cercle, et nous pouvons voir ces quatre carrés montrant que ce calque particulier a été sélectionné pour être aligné. Maintenant, si je veux sélectionner les autres cercles, si je clique dessus, ça se débarrasse des autres sélections. Donc, ce que nous devons faire pour les sélectionner tous, c'est tenir sur notre touche show puis cliquer sur le cercle suivant. Maintenant, pendant que je maintiens ma touche Maj enfoncée, je peux cliquer sur le cercle suivant pour le sélectionner, et puis je maintiens toujours ma touche Maj enfoncée, ce qui me permet toujours de sélectionner le 4ème 1 Le problème est, les trois autres ont été sélectionnés, donc c'est un bug. Je pense que si vous maintenez cette touche Maj enfoncée pendant que vous sélectionnez différents calques, cela fonctionnera parfois et vous permettra de sélectionner tous les calques. Mais parfois ce n'est pas le cas, et il les sélectionne. Alors voici la solution. On va sélectionner le 1er 1 tenant sur votre touche. Cliquez dessus. Relâchez la touche Maj. Maintenez la touche Maj enfoncée à nouveau. Cliquez dessus. Relâchez à nouveau la touche Maj et vous l'avez deviné. Maintenez la touche Maj enfoncée à nouveau, puis cliquez sur le dernier calque. Cela vous permettra donc de sélectionner en permanence autant de couches que vous le souhaitez. Peut-être que vous avez 67 10 12 couches. C' est donc une façon de vous permettre de sélectionner toutes les couches. Maintenant que nous avons tous les calques sélectionnés avec notre outil d'alignement, je veux les aligner pour qu'ils soient tous égaux en haut. Maintenant que nous avons tous les calques sélectionnés avec notre outil d'alignement, Nous allons donc aller aux options de l'outil et sélectionner par rapport au premier élément. Donc, ce serait le premier point. Nous voulons donc les aligner sur le bord de la cible. Et nous n'avons pas de clé de vêtements, donc ce sera au sommet. Maintenant, je veux ajouter une quantité égale d'espace entre tous les cercles ici. Nous avons un énorme espace. Alors comment on fait ça ? Donc, nous avons toujours relatif au premier élément sélectionné. Nous allons descendre aux autres options ici qui disent distribuer afin que nous puissions cliquer sur cet élément ici, Distribuer les centres horizontaux de cible et nous obtenons une quantité égale d'espace. Vous pouvez également changer le décalage à n'importe quel nombre que vous voulez. Donc, si je change cela à cinq au lieu de 90 et puis cliquez dessus, il commence à se chevaucher des cercles. Vous devez donc trouver un médium heureux et trouver la quantité d'espace que vous voulez entre les cercles en tapant un nombre pour le décalage X, qui est horizontal. Si vous avez un ensemble vertical de calques, alors vous allez faire le décalage. Pourquoi ? Donc maintenant je vais faire 75 puis ajoute une quantité égale de 75 pixels entre chaque couche afin que je puisse continuer à ajouter des nombres différents pour obtenir des résultats différents. Donc en ce moment nous en avons 200 qui ne fonctionnent pas parce que ça va en dehors du document ici à droite. Donc je vais annuler ça avec Commandant Control dans la lettre Z et faisons 75 pour les ongles. Et nous avons tout parfaitement aligné. Bon, maintenant on va mettre nos logos à l'intérieur des cercles en ligne, et on en aura fini. Je vais donc sélectionner un calque ou un guide dans mes deux options afin que je puisse simplement saisir ce logo et le mettre en place plutôt que de venir ici et de sélectionner le calque dans le panneau Calques. Allons à notre premier cercle de logo. Élu sont flous, Sélectionner l'outil, et nous allons cliquer sur l'intérieur de celui-ci. Et puis on va prendre notre logo Facebook, notre outil d'alignement. On va cliquer sur ce logo, et ensuite on va l'aligner au centre au milieu de la cible. Mais d'abord, nous devons changer par rapport à deux sélection, puisque nous alignons B de la sélection. Ok, donc on va faire la même chose pour les autres. On va attraper le cercle, l'outil de sélection floue . Vous pouvez utiliser le raccourci clavier. J' ai w pour le raccourci clavier pour moi. Je vais faire ma sélection. Donc, comme l'outil d'alignement. Sélectionnez le logo, puis un mensonge à cette sélection. Alors allons de l'avant et finissons ça pour les autres aussi. Allons de l'avant et organisons tout. Nous allons créer une nouvelle couche en cliquant avec le bouton droit de la souris sur le groupe nucléaire. Je vais donner un nom à ce Facebook. On y va, et je vais créer un nouveau groupe de calques pour chacun des logos. - D' accord, allons de l'avant et créons une couche de groupe pour notre pied de page aussi. Mettez tout ce qui appartient à l'intérieur de là. Et encore. Nous organisons tout simplement pour qu'il soit plus facile de trouver ce dont nous avons besoin. On dirait que j'ai une couche supplémentaire ici, donc je vais aller de l'avant et supprimer ça. Je vais juste ranger certaines de mes couches ici. Je pense que nous devons nous aligner. Sont des icônes sociales aussi bien. Je vais aller de l'avant et allumer mes guides et déplacer ça. Je veux le mettre ici. Ok, éteignons les guides et ce qu'on va faire est d'aligner nos logos sur le haut de ses colonnes aussi. Alors attrapons notre outil d'alignement. Sélectionnez le premier élément. Ok, essayons de sélectionner cette couche de groupe. Il ne le sélectionne pas. Alors bougeons. Les trois colonnes et les icônes sociales de cette couche de groupe. Voyons si nous pouvons le sélectionner maintenant. Toujours pas de travail. Allons au sommet. On y va. Donc je l'ai sélectionné. Maintenant, vous voulez maintenir ma touche Maj enfoncée et cliquez sur les logos, puis utiliser par rapport au premier élément et une ligne vers le haut retourné les guides. Tout semble aligné. Tout est aligné sur le reste de la page Web, et je pense que nous avons tous terminé. Allons-y et remettons-les à l'intérieur du pied de page. Félicitations sont de la haine Je pense que nous avons enfin fini avec notre premier projet de conception Web, et si vous avez suivi et créé ce site Web pendant que vous regardiez les tutoriels, alors vous avez tout terminé. Sinon, il est maintenant temps de passer par ce projet et de refaire ce projet vous-même afin que vous puissiez vous habituer à utiliser les outils et gimp et prendre l'habitude d'aligner les choses et renforcer correctement tout ce que vous avez appris Maintenant. Une fois que vous avez terminé avec cela, pour des crédits bonus supplémentaires, vous pouvez prendre ce que vous avez appris et l'appliquer à votre vision créative pour créer votre propre refonte de cette page Web. Alors, que pouvez-vous faire pour faire ça ? Quelle page ? Mieux pour l'utilisateur et la conception globale du site lui-même. Tu es probablement un meilleur designer que moi, et tu pourrais trouver quelque chose. Ah, beaucoup mieux et peut-être plus créatif que ce que j'ai trouvé moi-même. Donc, peu importe ce que vous créez, vous pouvez l'utiliser pour votre portefeuille et commencer à promouvoir vos services. En tant que concepteur Web, vous devez avoir un portfolio pour montrer aux gens ce que vous pouvez faire. Je vous recommande donc fortement de prendre ce que vous avez appris en créant votre propre design. Tu ne peux pas l'utiliser parce que c'est mon design. Je possède les droits d'auteur, alors créez votre propre design et commencez à créer votre portfolio. Et si vous le souhaitez, j'aimerais voir votre vision créative finale et voir votre page Web. Donc, si vous voulez partager cela avec la communauté, allez de l'avant et publiez cela dans la section Q et A et faites-le moi savoir si vous voulez des commentaires, et je serai heureux de vous faire part de vos commentaires sur ce que je pense que vous pouvez faire pour l'améliorer. Ou peut-être que c'est parfait comme ça. Donc c'est tout à vous de décider. Si vous avez déjà bien fait les deux, alors vous êtes prêt à travailler sur le deuxième projet. Donc, dans le deuxième projet, nous allons apprendre Ah, beaucoup plus sur les concepts et les idées de design. Et nous allons continuer à renforcer ce que nous avons appris sur les outils et gimp et peut-être apprendre de nouveaux outils dans le processus. Donc, si vous êtes prêt à commencer, le prochain projet l'a conduit à le faire. 29. Projet 2 : Briefing de capitales Manhatten Bridge: Bonjour et bienvenue. On va travailler sur notre deuxième projet de design Web, cette fois pour cette société appelée Manhattan Bridge Capital. On va travailler sur notre deuxième projet de design Web, Maintenant, contrairement à Nike qui a déjà un style bien défini, propre et minimaliste, ce site ou entreprise en particulier, il n'a pas vraiment une marque forte. La conception générale ou la mise en page du site Web n'est pas propre. C' est désuet. Il a des graphiques et des images de mauvaise qualité et a besoin de beaucoup d'aide. Bien que ce site ait un copyright de 2018, il ne semble pas que ce site ait été mis à jour avec un nouveau design en 20 ans. Ce fond Grady int derrière la navigation et le long des bords et dans le pied de page rappelle les sites Web qui sont arrivés sur la scène il y a 20 ans. Et c'est extrêmement désuet. Non seulement cela, il est très difficile de lire ce qui est placé sur cette page particulière, et la mise en page du contenu est dispersée partout, et nous ne savons pas exactement par où commencer. Nos yeux rebondissent d'un élément à l'autre, et globalement le site n'a pas l'air très professionnel. Cette société particulière accorde des prêts aux investisseurs dans la région de New York et en raison du manque de professionnalisme de leur site Web. Je pense que dans l'ensemble, cela va nuire à leur efficacité et à l'obtention de nouveaux clients, pas seulement à cause des éléments obsolètes et du non-professionnalisme. Il est très difficile de lire ce contenu. Nous avons un rouge vif pour notre titre, puis le style et le texte choisi pour ce contenu sont très petits et difficiles à lire. Donc, l'une des premières choses que je voudrais faire pour cette entreprise particulière est de mettre à jour leur logo. C' est obsolète et dans l'ensemble, il ressemble à un graphique de faible qualité et du texte a été utilisé, donc je voudrais utiliser quelque chose avec un rez plus élevé, graphique et un meilleur texte. Donc, il n'a pas l'air aussi pixélisé qu'il le fait maintenant. Et cet arrière-plan dans l'en-tête ici n'est pas nécessaire et n'ajoute aucune valeur à l'ensemble du site Web. imagerie ainsi tout au long du site Web n'est pas très bonne et je voudrais mettre à jour les images ainsi pour raconter une meilleure histoire de ce que fait cette entreprise et pourquoi vous voudriez faire affaire avec eux ou vraiment obtenir seul à travers eux. Il y a d'autres choses que nous pouvons faire pour accroître la possibilité que les investisseurs veuillent faire affaire avec eux pour obtenir leur prêt par l'intermédiaire de cette société en particulier plutôt que par d'autres sources, comme une coopérative de crédit ou une banque de style traditionnel. n'y a pas non plus d'incitation pour quelqu'un à contacter cette entreprise. Oui, nous avons leurs coordonnées, mais pourquoi devrions-nous les contacter ? Ce qu'il y a pour moi quand je conçois un site Web, je veux me mettre à la place des visiteurs, et la première chose qu'un visiteur veut savoir quand ils vont sur un site Web est pourquoi, ce que je veux faire des affaires avec vous. Qu' est-ce qu'il y a dedans pour moi ? Qu' est-ce que je vais avoir si je décide de faire affaire avec toi ? C' est là que l'action appelée dans la section des héros entre en jeu. Qu' est-ce que tu vas leur offrir qu'ils ne peuvent pas refuser ? Parce que c'est génial. Ils doivent avoir ça maintenant, et ils vont vous donner des informations, leur nom, leur numéro de téléphone, leur email ou tout ce que vous voulez en échange de quelque chose que vous êtes va leur donner. Vous devez commencer cette relation avec ce client en leur donnant quelque chose. Cela ne doit pas toujours fonctionner de cette façon, mais je pense que dans la plupart des cas, vous devez commencer à construire cette relation dès le départ. cas contraire, ils vont revenir en arrière et chercher une autre entreprise à traiter, parce qu'ils sont probablement désactivés en raison de la mise en page de la conception. Peut-être qu'ils ne pensent pas que toute cette mise en page de conception est horrible. Je ne fais pas affaire avec eux. Au lieu de cela, ils pensent, alors que cette société n'a pas l'air qu'ils se soucient de leur image et que cet endroit semble non professionnel et que je traite avec un usurier, ou est-ce que je fais affaire avec un financier professionnel parce qu'ils veulent savoir qu' ils ont affaire à quelqu'un qui ne va pas venir après eux et se casser la jambe ou prendre la vie parce qu'ils ont manqué au prêt ? Oui, ils vont probablement prendre votre propriété, mais cela ressemble plus à un type d'entreprise de requin de prêt, du moins pour moi, parce que dans l'ensemble, il n'a tout simplement pas l'air professionnel. Rien contre les usuriers. Donc si tu écoutes, je ne veux rien dire de mal. Vous avez juste besoin de trouver quelque chose d'un peu plus professionnel afin que vous puissiez vous assurer que vous obtenez des prospects MAWR pour vous contacter pour vos services particuliers. Il y a donc des choses que nous pouvons faire pour nous assurer que nous pouvons obtenir leurs informations avant qu'ils quittent le site Web, et aussi nous voulons rendre un peu plus facile pour eux de nous contacter et de trouver plus d' informations à notre sujet. Peut-être qu'ils veulent visiter notre institution avant de décider de rester seul par votre intermédiaire. Ce qui, bien sûr, c'est probablement les étapes. Vous devez avoir une consultation. Découvrez quel type de propriété cet investisseur potentiel veut, et vous devez passer par différentes étapes. Eh bien, pourquoi ne pas leur fournir un moyen de visiter vos bureaux, même si vous prenez seulement rendez-vous ? Onley Si une personne est prête à prendre le temps de venir à votre bureau, devisiter, visiter, trouver plus d'information et de prendre rendez-vous, c'est en soi un client beaucoup plus fort par rapport à quelqu'un qui vient d'appeler. Il y a donc beaucoup de petites choses que nous pouvons faire pour la conception de ce site Web particulier pour assurer que nous donnons à nos prospects toutes les occasions de prendre rendez-vous avec nous ou de nous rencontrer en personne afin d'obtenir leur entreprise. Donc le design que j'ai trouvé est ici, et j'ai mon action appelée et j'ai de meilleures images qui relient Mawr à leur potentiel . Les investisseurs par opposition à une simple poignée de main ont également inclus quelques éléments supplémentaires et certains contenus supplémentaires que l'entreprise peut utiliser pour vendre leurs services. Pourquoi Manhattan Bridge Capital ? Pourquoi faire affaire avec nous ? Voilà toutes les raisons pour lesquelles vous devriez faire affaire avec nous. J' ai également inclus des renseignements supplémentaires, comme la foire aux questions qu'ils pourraient vouloir poser au moment de la consultation. Donnons-leur certaines de ces informations maintenant avant qu'ils ne nous contactent. Et puis j'ai conçu une section de connexion avec plusieurs façons de contacter l'entreprise ainsi qu'une carte intégrée où vous pouvez obtenir les directions directement à leur bureau. Peut-être que vous êtes dans les environs, et que vous vouliez vous arrêter et dire bonjour. Présentez-vous, etc. Donc je veux faire. Il est aussi facile que possible pour les clients potentiels de faire affaire avec Manhattan Bridge Capital sur leur site Web particulier. Tout est regroupé ici à gauche. Ils n'ont même pas d'adresse e-mail. Oui, ils ont leur adresse ici pour que je puisse prendre ces informations et les déposer dans Google Maps ou quelque chose comme ça, ou je peux le faire directement à partir d'ici. Nous facilitons donc le plus facilement possible pour les clients d'obtenir les informations qu'ils veulent plutôt que d'essayer de les faire en dehors du site Web, puis dans la zone Pied de page. J' ai nos liens sociaux, des liens supplémentaires ici au bas de l'information sur les droits d'auteur. Mais j'ai aussi nettoyé la conception globale. Donc c'est plus propre. C' est plus amore, style minimaliste, plus propre moderne. Et tous ces différents éléments rendent un site beaucoup plus propre et plus facile à naviguer et à lire. C' est donc notre briefing sur notre prochain projet de conception Web. On va aller de l'avant et commencer à redessiner notre logo dans la prochaine leçon. 30. Re-conception de logo: Bonjour et bienvenue. Très bien, alors quand vous citez et travaillez pour un projet de design Web, vous avez une opportunité en or. Vendez vos services pour inclure d'autres services de conception graphique, et je pense que dans ce cas, ils pourraient utiliser une nouvelle marque et un logo. Vous aurez donc juste besoin de communiquer les raisons pour lesquelles vous pensez qu'ils peuvent bénéficier d'un nouveau logo. Et puis vous pouvez également inclure cela dans votre prix, mais gardez-le séparé du projet de conception Web lui-même. Cela étant dit, ce cours particulier n'est pas une question de faible qualité de conception en soi. Nous n'allons pas entrer dans beaucoup de détails sur la façon de concevoir des logos. Nous allons juste créer quelque chose de vraiment simple et basique comme j'ai créé ici. Et même alors, je trouve toujours que c'est 10 fois mieux que ce qu'ils ont actuellement. Alors allons de l'avant et travailler sur le logo d'abord, puis nous allons travailler sur l'en-tête de la conception Web. Alors d'abord, allez chercher votre fichier maître de conception de grille, puis nous allons aller de l'avant et créer un nouveau document pour le logo. Faisons 3 25 par 1 25, puis dans les options avancées. Nous voulons remplir de transparence. Allez-y et cliquez. OK, maintenant, allons de l'avant et attrapons notre outil de texte. Et dans toutes les capitales, je vais faire Manhattan pour la couleur verte. Je vais juste choisir une belle couleur vert foncé. Toute couleur est fine et de la taille fera 60. Et puis Oswald, audacieux et encore une fois, vous pouvez utiliser n'importe quel plaisir que vous voulez. Je vais déplacer mon logo, apparaître en haut avec l'outil de déplacement, puis, avec le rectangle sélectionnable, je vais faire une sélection. Je vais sélectionner mon outil d'alignement, Cliquez dessus, puis une ligne au centre. Allons de l'avant et faisons la sélection. Bon, maintenant qu'il est au centre, allons de l'avant et de sélectionner et récupérer notre outil de texte à nouveau. Cette fois-ci était due. Bridge Capital Sélectionnez tout. Et puis faisons 30 pour la taille. On va faire la même police. Ne faisons pas de bol. Faisons juste normal. Et je pense que je veux aussi baisser l'opacité pour ce calque aussi. Je vais faire environ 50. Très bien, attrapons notre outil de déménagement. Donc on peut le déplacer ici maintenant. Ce que je veux faire, c'est que je veux étirer la capitale du pont, donc c'est la même longueur que Manhattan . Maintenant, nous pourrions utiliser l'outil d'échelle pour le faire, mais il va déformer un peu les lettres, et il va les convertir en un calque de pixels. Et je ne veux pas faire ça parce que je voudrai peut-être changer quelque chose plus tard. Donc, au lieu de cela, nous allons revenir à notre outil de texte avec la lettre T sélectionner tout, puis dans les options de l' outil. Nous avons une option ici pour augmenter l'espace entre chaque lettre. Allons-y et augmentons-la jusqu'à ce qu'elle soit la même longueur que Man Han. Donc plus huit semble assez proche. Allons de l'avant et attrapons notre outil de sélection de rectangle à nouveau et l'alignons au centre. Ok, de select. Prenons notre calque d'arrière-plan, appuyez sur la lettre D, puis assurez-vous que le blanc est réglé sur les quatre grammes, puis nous allons ajouter cette couleur au calque d'arrière-plan et c'est tout. Notre logo est maintenant terminé, alors allons de l'avant et organisons nos couches en les ajoutant dans un nouveau groupe précédent. Je vais l'appeler logo et allons de l'avant et sauvegardons cela avec Commander Control et la lettre s. Je vais juste l'appeler logo et assurez-vous que vous avez X CF pour l'extension afin que toutes les couches soient sauvegardées. Et cela nous permettra d'apporter plus facilement des modifications à l'avenir si notre client aime le logo, mais il peut vouloir apporter un ou deux changements. Vous pouvez facilement accéder aux calques individuellement maintenant parce que vous l'avez enregistré en tant que fichier ex CF. Bon, allons de l'avant et Graham notre couche de logo ici, cliquez et faites-le glisser sur votre grille et relâchez. C' est donc un excellent moyen d'ajouter un autre document ou des couches de fichiers à un nouveau document. Je vais juste le placer ici en haut, et notre logo est fait plus de haine. Donc, dans la prochaine leçon, nous allons aller de l'avant et ajouter l'en-tête à notre page Web. 31. En-tête: OK, on va aller de l'avant et finir la partie en-tête de notre conception de page Web parce que techniquement, notre logo fait partie de l'en-tête. Donc, la première chose que je veux faire est un signe, une certaine quantité d'espace entre le haut de la page et le haut du logo. Allons-y et allumons nos guides. Et selon le design et les éléments graphiques, je vais ajouter entre 20 et 50 pixels d'espace entre le logo et le haut de la page Web. Mais là encore, cela pourrait changer en fonction de la conception. Donc, si vous cliquez et faites glisser comme vous vous en souvenez, nous pouvons voir combien de pixels ajoutaient cette ligne directrice à Basé sur les informations qui sont affichées ici, cela va dire Ajouter un guide, et je vais tirer cela vers le bas à 25. Ok, allons de l'avant et déplacons notre logo, mais avant vous voulez vous assurer que vous avez bougé activement ou sélectionné Sinon, si vous cliquez sur le logo, il va sélectionner le calque sur lequel vous avez cliqué à l'intérieur de ce couche de groupe. Donc une fois que ça sera activé, on pourra tout bouger ensemble et je vais le mettre en place. Allons-y et zoomons. Désactivons nos guides et ajoutons notre navigation. Apparaissent à droite. Alors prenez votre outil de texte et puis allons de l'avant et tapons la navigation pour que je fasse la maison, puis six espaces. Ok, sélectionnons. Les six espaces allaient copier afin que nous puissions l'ajouter à la fin de chaque élément de menu. Et allons de l'avant et finissons de taper tout. Allons faire à propos de. Je vais coller deux commentaires Coller Team et Connect. Très bien, sélectionnez tout avec Commander Control et un Changer la police à 18 et c'est un peu difficile à voir en ce moment, alors allons de l'avant et changez la police blanche en Noir. On va changer l'orteil arrière blanc plus tard, mais je veux juste être capable de le voir facilement au lieu de le voir en dehors. Contexte. Allons de l'avant et changeons la police en chemin de fer. Choisissons le chemin de fer en gras, puis nous pouvons aller de l'avant et le déplacer ici vers la droite puis avec nos guides allumés, je veux juste le connecter sur le côté droit de cette colonne ici et maintenant je dois l' aligner sur le haut de ce logo donc je peux soit faire glisser cela, qui serait l'option la plus facile, soit utiliser mes outils d'alignement. Maintenant, nous avons un bel alignement parfait en haut entre les deux éléments. Ok, je vais y aller et éteindre mes guides. Allons zoomer. Ensuite, nous avons juste besoin d'organiser nos couches en ajoutant un nouveau groupe calque clic droit et en sélectionnant un nouveau groupe Couche. Appelons ça Header il et mettons les deux à l'intérieur. Je vais aussi renommer cette navigation, accord. Notre en-tête est maintenant terminé, et dans la prochaine de Tora, nous allons commencer sur la section héros de la page Web, et nous allons probablement diviser cela en deux parties différentes parce qu'il va y avoir beaucoup d'informations que je vais partager avec vous sur la façon dont je suis venu avec ce design particulier et pourquoi j'ai choisi cette image en particulier. Et je vais vous donner des conseils professionnels supplémentaires aussi. Donc, si vous êtes prêt à commencer, faisons-le 32. Héros, partie 1: Bonjour et bienvenue. Bon, donc nous allons maintenant travailler sur la section héros de ce site, et nous avons beaucoup de choses cool que nous allons apprendre dans cette leçon particulière. Nous avons une forme personnalisée ici dans deux nuances différentes, puis nous avons une image limitée à cette forme. Nous avons aussi un Grady Int que j'ai appliqué pour ajouter un peu de mort. Et nous, bien sûr, sommes appelés action. Donc, l'action appelée est quelque chose qui devrait être un avantage pour le visiteur du site, et il devrait être quelque chose qui est difficile à refuser. Donc, vous devez savoir de votre client ce que ses clients ont besoin ou veulent et quels types de problèmes leurs clients ont-ils ? Et comment votre client peut-il résoudre ces problèmes ? Donc, disons, par exemple, les approbations de prêt peuvent parfois prendre 23 ou cinq jours ouvrables pour être approuvées. Mais disons qu'un investisseur a besoin de l'argent beaucoup plus tôt parce qu'il va à une vente aux enchères pour un immeuble, un entrepôt, une maison ou quoi qu'il investisse. Et ils ont besoin de cet argent ce jour-là. Mais si Manhattan Bridge Capital pouvait approuver un prêt en 60 minutes ? Eh bien, cette offre qui a appelé l'action enroulée autour de cette approbation de prêt de 16 minutes va capturer les intérêts des investisseurs. Et ils vont vouloir faire une demande pour savoir s'ils peuvent être admissibles à l'achat de cet immeuble par le biais de la vente aux enchères qui se déroule ce jour-là plutôt que d'attendre trois 45 jours ouvrables ou peu importe le temps que cela prend, parce que cette maison ou la construction pourrait déjà disparaître parce que quelqu'un d'autre avait l' argent ce jour-là. Cette action va donc permettre à cette entreprise, Manhattan, générer plus d'affaires parce qu'elle offre quelque chose que sa concurrence n' offre pas . Il s'agit donc d'un autre type de service que vous pouvez offrir en plus de votre service de conception Web en aidant vos clients à trouver une action appelée qui les aidera à générer plus d'affaires. Alors allons de l'avant et commençons à assembler les morceaux de notre section héros, et je vais vous fournir quelques conseils professionnels supplémentaires au fur et à mesure que nous continuons. Donc la première chose que nous devons faire est de définir la hauteur de notre section de héros. Alors allons de l'avant et allumons nos guides avec commande ou contrôle dans le point-virgule. Et puis nous allons cliquer et faire glisser un guide jusqu'à ce que nous arrivions à 700 nous savons que nous sommes à 700 fonction des informations en bas et de l'interface. On va aller de l'avant et ajouter une couleur de fond pour la section héros. Alors allons de l'avant et créons un nouveau calque appelé Arrière-plan. Nous allons remplir avec transparence, puis cliquez sur. OK, on va retirer ça de cette couche de groupe particulière parce qu'elle doit être dans sa propre couche de groupe. Et puis nous allons saisir notre rectangle sélectionnable avec la lettre M, puis nous allons cliquer et faire glisser une sélection en fonction de l'emplacement de la section héros . Nous allons alors choisir une belle couleur bleue. C' est la couleur que j'ai utilisée. Vous pouvez utiliser n'importe quel bleu que vous voulez, puis, avec notre outil de remplissage de seau, nous pouvons remplir cette couleur. Allons de l'avant et déplacons le calque d'arrière-plan en dessous de la tête plus tôt afin que nous puissions voir tout le reste. Très bien, nous allons désélectionner et désactiver les guides et la prochaine chose que je veux faire est de retourner dans le groupe d'en-tête et de sélectionner ma navigation. Et puis avec mon outil de texte, je vais cliquer sur l'un des mots et sélectionner tout. Et on va changer cet orteil blanc. D' accord, je pense que nous sommes prêts à ajouter notre image ensuite. Mais d'abord, jetons un coup d'oeil à cette image parce que je veux expliquer pourquoi j'ai choisi cette image en particulier plutôt qu'une autre que j'avais choisie à l'origine, qui était cette image ici. Notre société, Manhattan Bridge Capital, accorde des prêts aux investisseurs immobiliers. Et ma première pensée était une photo du centre-ville de Manhattan montrant la ligne d'horizon, des gratte-ciels, des bâtiments et des choses comme ça. Et j'ai choisi cette image parce qu'elle a une belle couleur bleue ciel nuageux, et je voulais avoir quelque chose qui avait un contraste par rapport au vert du logo et du bouton. De plus, ce n'est pas très autoritaire parce qu'il se fond en quelque sorte avec les autres couleurs de la section héros aussi. Mais j'ai commencé à penser, OK, cause de cette couleur bleue. C' est un peu froid, et ce n'est que des bâtiments. Et avec qui Manhattan travaille réellement à qui donnent-ils des prêts ? Eh bien, en fin de compte, même s'ils travaillent avec des investisseurs immobiliers ou des prêts immobiliers, ils ne prêtent pas vraiment de l'argent aux immeubles eux-mêmes. Ils prêtent de l'argent aux gens. C' est pourquoi j'ai décidé de trouver une image de quelqu'un qui représenterait mieux qui ils sont et avec qui ils traitent plutôt qu'un bâtiment lui-même. Donc, parce que les bâtiments peuvent obtenir des prêts et les gens le font. C' est pourquoi j'ai décidé de choisir une image avec une personne dedans, et j'ai fini par trouver cette image ici. Et la raison pour laquelle j'ai choisi cette image plutôt que quelques-unes des autres que j'ai trouvées auprès des gens était basée sur le type d'investisseurs avec lequel ce client traite ou cette société traite. Ils traitent avec les investisseurs, mais quel genre d'investisseurs ? Il y a donc beaucoup d'options quand il s'agit de sélectionner une image avec les investisseurs. Tu veux quelqu'un en costume et cravate, ou tu veux quelqu'un en short et ça les montre travailler à la maison près de leur piscine ? Ou voulez-vous quelqu'un habillé en tenue d'affaires décontractée dans un environnement décontracté, environnement d'affaires ou peut-être quelque chose d'autre complètement différent. Tout dépend de ce que l'entreprise pour laquelle vous travaillez vend dans son type d' orteil client. Alors, qui était leur clientèle principale ? Eh bien, pour cette entreprise particulière, les investisseurs en costume et cravate ne sont pas leur principal orteil client. C' est l'investisseur individuel qui travaille pour lui-même contre une société. J' ai donc senti que quelqu'un en tenue d'affaires décontractée dans un environnement décontracté et semi-commercial était plus approprié que quelqu'un en costume et cravate ou dans un cadre d'affaires plus formel. C' pour ça que je me suis installé sur cette image. Mais il y a une autre raison pour laquelle j'ai choisi cette image, et c'est à cause de la direction dans laquelle elle regarde. Ainsi, des études ont montré que soit vous voulez que les gens regardent directement les visiteurs créent un contact visuel. Ou, plus important encore, vous voulez qu'ils regardent quelque chose, parce que quand vous regardez cette personne, vous voulez voir ce qu'ils regardent, et vos yeux auront tendance à suivre dans la direction qu'ils 're regarder, qui est dans ce cas et c'est correct sont appelés l'action. Donc elle regarde ce domaine, ce qui nous amène à cet appel à l'action et nous voulons que nos visiteurs remarquent cela appelé action et parce que nous avons pris le temps de découvrir notre client ce qu'ils vendent et les problèmes de leurs clients, nous avons créé une action froide irrésistible. Ça résout un problème. Ils ont besoin d'argent aujourd'hui. Nous allons vous faire approuver en 60 minutes ou moins, et cela va être un excellent moyen de saisir l'intérêt de quelqu'un parce que personne d'autre dans leur région n'offre ce type de service d'approbation de prêt. Donc, cela va générer plus d'affaires pour le client parce qu'ils résolvent un vrai problème que leurs clients ont l'air d'avoir. Encore une fois, je veux juste renforcer le fait qu'il s'agit d'un type de service marketing que vous pouvez hors vos clients que d'autres concepteurs Web n'offrent pas, et vous pouvez aller au-delà de ce que les autres concepteurs Web air faire et aider votre client gagne plus d'affaires. Et qui pensez-vous qu'ils vont contacter lorsqu'ils auront besoin de mettre à jour leur site Web ? Ils vont te contacter, alors allons chercher cette image ici. Et la chose cool à propos de ce site ici choisit obey dot com est toutes leurs images ne sont pas seulement libres, mais leur droit d'auteur libre de sorte que vous pouvez les utiliser sur vos clients site Web en direct sans aucune attribution ou payer des frais pour utiliser cette image. Donc, si vous voulez télécharger exactement la même photo, allez choisir Subait dot com, créer un compte et ensuite vous pouvez télécharger cette image particulière dans différentes tailles de résolution . Donc, pour télécharger cette image, il suffit de taper ce numéro ici et ramasser un testament, trouver l'image, puis vous pouvez la télécharger, puis nous allons continuer à travailler sur notre section héros. Allons de l'avant et faisons nos formes qui seront sur le côté gauche de notre image. En fait, n'avez pas encore mon image ici, alors je vais aller de l'avant et prendre mon image et la faire glisser dans mon document. Je vais aller de l'avant, éteindre pour ongles, et on va Graham est l'outil Ellipse. Cette fois, nous voulons nous assurer que dans nos options d'outils, nous avons corrigé éteint et nous allons faire une taille de Let's do 5 40 par Let's do 7 40 Pour la hauteur. Nous devons en fait réduire un peu cela pour pouvoir le remplir avec une couleur de notre choix. On va aller de l'avant et créer une nouvelle couche. D' abord, appelons ça la forme. Sentir quoi ? Transparence Cliquez sur OK, Et puis pour notre couleur, choisissons un bleu plus foncé par rapport à l'arrière-plan. Donc je pense que je vais aller avec quelque chose comme ça juste un peu plus sombre. Vous pouvez faire ce que vous voulez n'importe quelle couleur de votre choix. Je vais juste faire ça. Cliquez, OK. Et puis je vais saisir par l'outil de remplissage de seau avec la lettre G pour remplir ça. Je vais aller de l'avant et de sélectionner, et je vais juste le déplacer un peu. Je veux également aller au calque et sélectionner recadrer au contenu pour changer la limite du calque. Et allons de l'avant et créons un nouveau plus tôt. On va l'appeler forme aussi, et ensuite avec notre outil Ellipse, on va créer une nouvelle forme de la même taille. Donc, faisons 5 40 par 7 40 Allons faire ça vers le bas. Et je veux choisir une couleur plus claire cette fois. Donc je vais juste choisir quelque chose de plus léger, lui et aller de l'avant et remplir ça. Ok, nous allons choisir. D' accord, je vais déplacer cette couche pour qu'elle chevauche la première forme et y aille. Allons à la couche et recadrer au contenu pour changer la limite ultérieure aussi, en fait allons aligner ceux-ci un peu mieux. Donc je vais allumer mon guide pour que je puisse créer un nouveau guide pour mettre la deuxième forme en ligne avec l'autre. Ok, déménageons ce type. Et hors de là, on n'a plus besoin de ça. Bon, donc on a presque fini. Ce qu'on va faire maintenant, c'est qu'on va prendre la deuxième forme et la dupliquer. Parce que ce qu'on va faire c'est qu'on va l'utiliser pour découper les deux formes. Donc on a ce joli bord d'ellipse le long du côté gauche, et puis ça va être transparent de ce côté, donc je vais te montrer à quel point c'est cool et facile. Donc on va juste bouger ça un peu, puis on va passer à nos modes de fusion et choisir la couleur ou la course et le boom. Nous avons maintenant nos deux formes avec notre transparence ici à droite. Maintenant, il y a un problème : effacer toutes les couleurs en dessous. Donc, si je retourne à mon image ici, il va enlever la couleur ou les pixels de ce calque aussi. Donc, tout pixel sous ce calque qui a ce mode de fusion, il va effacer les couleurs et les pixels et vous donner de la transparence pour le résultat final . Donc on va arranger ça, et c'est vraiment facile à réparer. Ce qu'on va faire, c'est faire un clic droit pour sélectionner un nouveau groupe de couches. Appelons ça des formes. Ensuite, une fois que nous avons placé ce calque de forme dans le calque de groupe, il supprime ce mode de fusion de tous les calques en dessous, car il est contenu à l'intérieur du groupe. Maintenant, une fois que nous apportons les deux autres formes et qu'il efface les pixels en dessous dans le groupe, cela n'affecte rien à l'extérieur du groupe. Donc c'est plutôt cool. J' aime ça plutôt génial. D' accord, allons-y et remontons ça. Nous devons nous assurer que nous avons déplacé le calque actif sélectionné, et continuons à le déplacer en position. Donc juste là, je vais monter mon image juste une seconde, pour voir où je place ça. Donc je voulais en dehors du haut de la page, et ça va aller à l'extérieur du bas de la section héros aussi. Ensuite, nous allons créer un masque de calque pour le retirer du bas de la section héros . D' accord, une image plus sévère, parce qu'on doit mettre ça en position. Nous devons aussi le retourner parce que, comme vous pouvez le voir, elle regarde dans la mauvaise direction. Nous voulons qu'elle regarde l'action appelée, alors allons-y et faisons cela d'abord en allant jusqu'au calque, sélectionnez, transformez, puis sélectionnez retourner horizontalement. Malheureusement, j'ai eu le mauvais calque sélectionné, donc je vais en dessous avec Commander Control et les lettres. A Choisissons notre investisseur ici. Je vais en fait renommer cet investisseur de couche, et ensuite nous allons revenir à la couche transformée flip horizontalement. Maintenant, elle va regarder l'action appelée Prenons notre échelle pour souhaiter Shift plus S, et puis, pour la hauteur, je vais taper 700 qui est la hauteur de notre section héros, puis avec la touche Tab , il va le redimensionner. Et puis je peux l'attraper au milieu et le déplacer sur le côté droit. Et je veux tout faire jusqu'au bout. Donc à droite il devrait y avoir une bonne, puis cliquez sur compétence. J' ai un peu de bleu ici, donc je vais prendre mon outil de déménagement et le déplacer un peu avec mes touches fléchées, donc ça devrait marcher. Maintenant, nous avons juste besoin de se débarrasser de l'image en haut à gauche et en bas à gauche ici. Et nous pouvons simplement le faire en ajoutant un masque de calque et en sélectionnant blanc parce que, comme vous le savez, publicités blanches et les suppressions noires. Donc, nous allons commencer par garder l'image entière intacte avec un masque de calque blanc. Maintenant, on va prendre notre pinceau avec la lettre B. On va passer ça en noir et blanc avec la lettre D, et ensuite on peut peindre avec du noir pour enlever. C' est cool ? Ah, j'adore ça. Allons de l'avant et faisons la même chose pour notre groupe Shapes plus tard. Nous pouvons en fait, et un masque de calque à un joueur de groupe. Donc même chose. Masque de calque. Publicité blanche. Maintenant, cette fois, au lieu d'utiliser notre brosse pour l'enlever, nous allons prendre notre angle droit sélectionnable avec la lettre M. Nous allons faire une sélection où nous voulons enlever, et ensuite nous sommes va appuyer sur notre touche de suppression ou de retour arrière. Mais malheureusement, rien ne s'est passé. Et c'est parce qu'il prend les informations de la couleur d'arrière-plan pour la remplacer par . Donc, nous devons changer l'arrière-plan et la couleur de premier plan avec la Lettre X. Et puis quand nous appuyons sur la touche Supprimer ou le retour arrière Kate, il le supprime. D' accord. Je pense que c'est un bon point pour arrêter et continuer avec notre section héros dans le prochain tutoriel. Donc si tu es prêt pour ça, fais-le toujours. 33. Héros, partie 2: D' accord. Donc, ce qu'il nous reste pour notre section héros, c'est l'action appelée et peut-être apporter quelques modifications mineures à la disposition générale de la section héros aussi. Alors allons de l'avant et commençons avec notre texte afin que nous puissions ajouter un titre pour notre action appelée. Je vais juste taper l'approbation de prêt dans 60 minutes. Sélectionnez tout le contenu afin que nous puissions changer la couleur de la police en blanc. Je veux aussi faire 50 pour la taille des pixels, et je vais utiliser Railway bold pour la famille amusante. Et puis on a juste besoin de déplacer ça sur l'orteil gauche ici. Donc, les alignements avec notre logo et il a l'air assez bon juste là. Le seul problème, c'est que nous tapons sur les formes. Allons de l'avant et retirons cette couche parce qu'elle ne devrait pas être là-dedans. Amenez cela en dessous du groupe d'en-tête, et je pense que nous devons déplacer la forme et peut-être l'image aussi bien. Alors prenons ce calque de forme et déplacez-le vers la droite. Juste il devrait y avoir du bon, et nous allons aussi déplacer l'image aussi bien. Maintenant, si vous prenez le masque de calque pouce maintenant et pas le calque lui-même. Ensuite, vous allez simplement déplacer le masque de calque, alors assurez-vous de sélectionner la vignette de l'image afin que vous puissiez déplacer les deux ensemble. Donc je vais jouer au set juste là. Ensuite, nous devons supprimer cette partie de l'image. Donc, nous allons prendre le masque de calque, vigner notre pinceau, et puis nous assurer que vous avez le noir au premier plan pour que vous puissiez supprimer cette partie de l' image. D' accord, allons de l'avant et renommons ce titre de calque et nous allons le déplacer un peu vers le haut. Bon, allons de l'avant et tapons un petit paragraphe d'information. Prenez votre outil de texte. Je vais aller de l'avant et juste coller dans un paragraphe qu'une jolie a écrit donc peu importe ce que vous écrivez. Il suffit de faire environ trois lignes d'informations, puis changeons la taille de la police à 14 White, et je pense que je veux aller avec un fot différent. Maintenant, quand il s'agit d'un corps de contenu de trois lignes ou plus, je vais utiliser une police comme Georgia ou Helvetica, et ces types de polices sont beaucoup mieux sur les yeux, il est plus facile de les lire par rapport à une police comme chemin de fer ou Oswald. Alors pour l'instant, allons de l'avant et allons avec la Géorgie. Je pense que je dois rendre ce texte un peu plus grand, donc je vais monter ici et le changer à 18 et ensuite on doit juste le mettre en position maintenant. En ce moment, je constate que le paragraphe est toujours en concurrence avec le titre. Il a la même intensité de poids. Même si c'est une famille de fonds différente, ça rend encore difficile la lecture. Donc, attrapons ce calque et réduisons l'opacité à 50% et cela aide certainement à créer une certaine séparation des deux et rend cela plus facile à lire. Je pense que nous pouvons aller de l'avant et créer notre bouton d'application des ongles. Allons de l'avant et créons un nouveau calque appelé Appliquer maintenant la transparence du bouton , bien sûr , Et puis avec notre rectangle sélectionnable, nous allons créer une forme avec la taille suivante. On va faire 3 75 pour le avec et 10 pour la hauteur. Maintenant, ce que je veux faire, c'est que je veux créer des coins arrondis maintenant nous n'avons pas d'outil de sélection pour le faire. Mais si nous passons sous l'option de menu de sélection, nous n'avons pas l'option ici appelée rectangle arrondi. Donc, une fois que vous sélectionnez que vous condamnez. Définissez le rayon de ces coins arrondis afin que vous puissiez le définir entre ce que vous voulez. 0 à 100. Donc je vais aller de l'avant et faire 35 clics, OK, et maintenant vous pouvez voir les coins arrondis. C' est cool ? Impressionnant. Ok, j'espère que vous apprenez de nouvelles choses pendant que nous continuons avec de nouvelles leçons. Allons de l'avant et choisissez l'une des couleurs vertes que nous avons utilisées précédemment et cliquez sur. OK, allons de l'avant et remplissez-le avec leur remplissage de seau pour euh et D Select ont raison. Allons de l'avant et prenons ce calque et dupliquez-le pour que nous puissions créer une sorte d'ombre portée . vais descendre celui-là et je vais le nommer. Appliquez maintenant, l' ombre du bouton. Maintenant, avant de placer ces calques en position, continuons et montons au calque et sélectionnez recadrer au contenu pour ajuster la limite du calque. Et faisons la même chose pour la première couche ici contenu et ensuite quoi ? Ils sont déplacés vers un on peut cliquer sur la gauche et vers le haut. Ok, on peut maintenant aller de l'avant et coloriser l'ombre du bouton. Sélectionnez ce calque. Montez deux couleurs et sélectionnez coloriser. Cliquez sur la barre de couleurs, puis cliquez sur la même couleur de vert que vous avez sélectionnée pour le bouton supérieur, puis cliquez sur OK et la rend automatiquement plus foncée. Et je veux juste déplacer le mien un peu. Et je vais juste utiliser mes touches fléchées pour le déplacer vers la gauche, finir par un pixel à la fois. Donc juste là a l'air assez bien. Allons-y et mettons-les dans une couche de groupe. Appelez ça. Appliquer maintenant bouton et allons de l'avant et le aligner sur les deux autres éléments ainsi. Il y a un taux à peu près. Ok, je vais aller de l'avant et sélectionner mon paragraphe et allons de l'avant et utiliser nos touches fléchées pour sélectionner cela aussi. Et pour utiliser vos touches fléchées, vous devrez d'abord cliquer dessus avec votre outil de déplacement. Sinon, vous allez simplement utiliser vos touches fléchées pour naviguer dans le panneau Calques. Allons de l'avant et renommons ce paragraphe, nous allons mettre le titre en haut sont applicables . Maintenant bouton en dessous de ceux-ci et nous pouvons ensuite créer un nouveau groupe de couches pour ceux appelés appel à l'action. Ok, il nous reste une chose qu'on a oublié de faire, et c'est ajouter notre texte pour notre bouton. Alors quoi ? Ils sont textuels. Nous allons taper, Appliquer maintenant et sélectionnons blanc aussi ancien et faisons 70 pixels pour la taille de la police. Mais c'est là et allons de l'avant et une ligne qui, directement au centre de notre bouton, je vais déplacer ça ici avec notre bouton d'application des ongles, et ensuite nous allons faire une sélection avec notre outil de sélection floue. Assurez-vous que votre couche de bouton Appliquer maintenant est sélectionnée, puis nous pouvons utiliser notre outil d'alignement pour l'aligner directement au centre, et nous devons tirer ceci. Appliquer maintenant, calquer dans le haut afin que nous puissions le sélectionner avec leur outil de limite, puis assurez-vous que vous avez relatif à la sélection et une ligne milieu et centre du bouton. Le seul problème, c'est qu'on a plus d'espace en haut qu'en bas, alors laissez-moi vous montrer pourquoi c'est arrivé. Prenez votre textile et cliquez dessus et nous pouvons voir à l'intérieur de cette zone de texte. Ici, nous avons plus d'espace apparaissent qu'ici, et c'est là que l'outil d'alignement fait ses alignements en fonction de la taille de cette boîte . Donc, si nous cliquons ici en haut, nous pouvons voir une petite boîte jaune, et nous pouvons cliquer et faire glisser cela vers le bas pour qu'il arrive en haut du texte. Le seul problème est qu'il pousse ce texte vers le bas et au-dessous de la zone de texte, donc il est coupé. Mais c'est correct aux fins de l'alignement. C' est très bien. Revenons à notre application de bouton et de sélection de l'ongle avec notre outil de sélection floue. Et puis avec leur outil d'alignement, nous pouvons re centrer cela directement dans le centre. Maintenant, nous devons désélectionner et revenir en arrière avec notre outil de texte et déplacer cette zone jusqu'à ce que nous obtenions tout le texte visible à l'intérieur de cette zone de texte. Et maintenant, il devrait être parfaitement aligné. Magnifique. D' accord, allons-y et zoomons. Bon, alors jetons un coup d'oeil à notre section de héros ici pour voir s'il y a quelque chose que nous pouvons faire pour améliorer ça. Nous avons donc deux côtés, et l'image de notre investisseur est en arrière de cette façon, ce que nous voulons. Mais je pense qu'il y a trop d'éléments concurrents ici, et ça a l'air trop occupé. Alors, quelles sont les parties les plus importantes de cette partie de la section des héros ? Je dirais que le bouton Appliquer maintenant est le plus important parce que c'est l'appel à l'action. C' est l'offre, mais le bouton d'application de l'ongle vous emmène à l'étape suivante, ce qui devrait être le plus grand. Ce qui est très bien. Il l'est. Mais il est toujours en concurrence avec le logo ici parce que le logo est assez grand. Donc, le logo est en concurrence avec le bouton d'application de l'ongle, et c'est en quelque sorte éloigner nos yeux de cette section. Donc je pense que nous devons prendre ce logo et le rendre plus petit. Allons de l'avant et bougeons. Appliquez maintenant, redescendez dans le bon joueur de groupe. Trouvons notre logo, qui devrait être dans notre en-tête et avec notre outil de balance, nous allons aller de l'avant et mettre à l'échelle jusqu'à une hauteur de Allons-y avec 98 pour la hauteur. Maintenant, comme vous le savez, cela a été converti en calque de pixels. Et si nous voulons mettre à jour ce contenu, nous devons sélectionner notre outil de texte et sélectionner l'option appropriée afin de le modifier. Mais c'est bien, parce que nous avons conçu le logo dans un document distinct et nous disons que nous pouvons toujours revenir à ce document particulier et le mettre à jour en fonction des commentaires de nos clients. S' ils aiment le logo tel quel, c'est bon. Mais s'ils ont des modifications, vous pouvez revenir au document d'origine, puis faire glisser ce calque dans plutôt que d'essayer de le corriger à partir d'ici. Donc, comme vous pouvez le voir en rendant ce local plus petit, il n'est pas en compétition comme avant. Et maintenant nos yeux gravitent dans cette zone. Nous avons lu les gros titres. Peut-être voulons-nous lire ce paragraphe ici pour plus d'informations, mais nous savons ce que nous devons faire ensuite, et cela s'applique maintenant. Et ce sont des petites choses que vous allez devoir penser lorsque vous concevez quels sont les éléments les plus importants ? Quel devrait être le plus grand dans ce qui devrait être le plus petit. Cela dit, je pense que notre texte ici et notre navigation sont un peu trop petits. Donc je vais attraper mon outil de texte et tout sélectionner. Le seul problème est que je peux accéder aux options de l'outil au-dessus car il est caché par le haut du document. Alors sortons de ça. Et puis avec leur outil de déplacement, nous pouvons simplement le faire tomber et ensuite aller à l'intérieur et faire des changements. Je vais faire 22 points pour la taille et on doit juste s'assurer qu'il est réaligné vers le haut et vers la droite. D' accord, j'aime la taille de la navigation. Maintenant, c'est juste un peu trop proche de ces formes ici. Donc je vais aller de l'avant et fermer tous ces joueurs de groupe et déplacer mes joueurs de forme sur et à gauche juste un peu. Donc juste à ce sujet il devrait être bon. Et maintenant, je dois attraper le masque de calque de l'image pour pouvoir peindre avec du blanc afin que je puisse ramener l'image dans cette partie et cette partie de la section héros, parce que nous avons effacé une partie de cela plus tôt, et maintenant nous avons juste besoin de l'ajouter dans cette zone. K donc blanc et noir supprime. Bon, donc notre section de héros est maintenant terminée. Ou c'est ça ? Il y a en fait une chose que nous pouvons faire pour améliorer la section héros pour augmenter les chances qu'un investisseur applique un clou plutôt que de faire défiler une autre partie de la page ou naviguer hors de la page, ou peut-être même de quitter le site. Et je vais en expliquer plus à ce sujet dans le prochain tutoriel. 34. Héros, partie 3: On va aller de l'avant et finir notre section de héros. Maintenant, nous avons besoin d'un ingrédient ajouté, ce que nous n'avons pas fait dans le tutoriel précédent, et nous avons également besoin d'organiser nos couches pour la section héros aussi. Et puis je veux juste parler d'une autre chose à laquelle nous conduisons à améliorer la section des héros pour augmenter les chances qu'un investisseur profite de cet appel à l'action et postuler maintenant. Et nous allons couvrir ça dans une minute parce que nous pouvons ou pas vouloir l'ajouter à la section héros , et je vais vous en expliquer plus à ce sujet. Une fois que nous aurons franchi ces autres étapes, continuons et travaillons sur l'ajout d'un int Grady à notre arrière-plan. Et pour commencer, on va aller de l'avant et créer une nouvelle couche. On va nommer l'ingrédient avec un peu de transparence. Allez-y et cliquez. Ok, sortons de ce calque de groupe. Donc, allons de l'avant et allumons la limite de la couche sous vue, puis cliquez simplement sur Afficher limite de la couche et nous pouvons voir que cette couche particulière couvre l'ensemble du document. Et si nous ajoutons notre ingrédient sont ingrédient va être ajouté dans cette zone aussi, et nous devrions utiliser un masque de couche pour l'enlever de cette zone. Mais il y a un moyen plus facile de le faire. Nous pouvons réellement mettre à l'échelle ce calque particulier à la hauteur de la section héros, donc nous n'avons pas à nous soucier d'ajouter le masque de calque pour ici. Pour ce faire, nous allons faire un clic droit sur l'échelle de sélection des ingrédients ici. Nous voulons le déverrouiller et régler la hauteur à la hauteur de la section héros, qui est 700. Ensuite, lorsque vous cliquez sur l'échelle, vous remarquerez que la limite de la couche a changé. Nous pouvons effectivement cliquer et faire glisser vers le haut cette partie du calque vers la section héros et maintenant sont calque. La limite est autour de la section du héros et l'ingrédient sera appliqué juste à cette zone. Alors allons de l'avant et ajoutons de l'ingrédient avec notre outil de salutation, qui se trouve juste ici. Je n'ai pas de raccourci clavier pour cela, mais si vous l'utilisez beaucoup, vous pouvez le vouloir et un pour vous-même. Ok, dans les options de l'outil, nous avons quelques options ici que nous devons mettre en place pour notre ingrédient en forme. Nous voulons nous assurer que nous avons sélectionné la radio afin que nous ayons un ingrédient de type circulaire, donc c'est un peu comme un projecteur. Nous voulons également l'espace de couleur de mélange, set toe linéaire rgb, et ensuite nous devons changer les couleurs de notre ingrédient. ce moment, le mien montre un orteil noir blanc. Le vôtre peut être différent selon si vous utilisez cet outil avant ou non. Donc je vais aller de l'avant et cliquer dessus, et je vais obtenir une liste de tous les différents INT gourmands qui sont à nouveau disponibles. Le vôtre peut être différent du mien parce que j'ai déjà créé des ingrédients personnalisés, puis les enregistre automatiquement dans ce panneau. Donc, pour changer les couleurs, nous devons cliquer sur cette petite icône ici pour éditer le Grady int. Et puis on nous présente un nouveau panneau appelé Degrading and Editor, et ensuite on peut faire des ajustements à cette couleur particulière. Donc nous avons quelques triangles ici et le centre. Nous pouvons réellement déplacer les extrémités que nous ne pouvons pas, donc je peux ajuster combien de noir et blanc est ajouté à l'int Grady. J' aimerais garder le mien au milieu pour qu'il soit 50. Et puis, afin de changer les couleurs, nous devons faire nos sélections de couleurs au premier plan et aux couleurs d'arrière-plan. Donc la couleur que Grady et moi voulons est blanc orteil bleu, et je veux une couleur spécifique de bleu, qui est cette couleur ici, l'arrière-plan de notre section héros. Donc ont déjà mis en place blanc. Alors allez-y et définissez que si c'est différent pour vous et ensuite pour la couleur de fond, nous allons sélectionner cette couleur avec notre outil pipette, qui se trouve juste ici. Donc, une fois que vous cliquez dessus, vous obtenez une petite pipette et ensuite vous pouvez cliquer sur cette couleur, et il va ajouter cette couleur ici. Ok, donc nous avons maintenant cette couleur. Nous pouvons voir que mon gourmand et éditeur a également changé de bleu orteil blanc automatiquement. Donc je vais vous montrer comment changer ça un peu parce que nous voulons blanc orteil bleu et nous pouvons aussi faire des sélections de couleur à partir d'ici une houle. Alors faisons ça. Je vais cliquer. OK, donc si nous venons au Grady and Editor et qu'on fait un clic droit, nous obtenons un menu contextuel, et nous pouvons voir ici pour le type de couleur gauche. J' ai la couleur d'arrière-plan sélectionnée, et c'est pourquoi elle a automatiquement changé dans le Grady, un éditeur quand j'ai sélectionné ici. Le tien peut être différent. Les années peuvent être corrigées, et cela n'a probablement pas changé de couleur. Donc, faites un clic droit sur l'éditeur de grille, puis dites à gimp quelle couleur vous voulez utiliser pour le côté gauche. Et dans ce cas, je veux du blanc. Je vais donc sélectionner la couleur de premier plan, puis un clic droit et sélectionner le bon type de couleur et la couleur d'arrière-plan cette fois. Alors maintenant j'ai mon orteil blanc bleu. Alors allez-y et configurez vos couleurs, puis revenez à votre panneau de calques. Assurez-vous que le râpage est sélectionné, puis cliquez et faites glisser votre ingrédient. Voyez donc comment il est confiné à cette limite de couche. Si nous n'avions pas fait ça, alors ça aurait été dissimulé. Ici, c'est bien, on aurait passé plus de temps à éditer ce Grady Int, donc il n'apparaît pas ici parce qu'on veut juste qu'il se limite à la section héros. Donc, plus cette ligne est longue, plus le cercle est blanc ou plus grand pour ce Grady int particulier. Je viens ici très serré, c'est plus un projecteur et c'est beaucoup plus petit. Ce n'est pas ce que je veux. Donc je vais traîner, moi aussi. Oh, je ne sais pas. Je suppose qu'il devrait y avoir du bon. Maintenant, nous pouvons aller de l'avant et cliquer, entrer ou revenir pour créer cet int gourmand. Donc notre ingrédient a été appliqué, et maintenant nous devons y apporter des ajustements parce que nous ne pouvons pas voir notre image. Donc la première chose que je veux faire est de réduire mon opacité à environ 5 à 10 pour l' opacité. Je ne veux pas qu'elle soit trop brillante ou trop intense. Et si je jette un coup d'oeil à l'avant et à l'après, cela me donnera une meilleure idée de l'endroit où je veux placer cette opacité particulière. Et je vais aller à six pour moi. Tu peux faire ce que tu décideras. Maintenant, l'autre chose que nous devons faire est que nous devons supprimer l'int Grady de l'image. Je ne veux pas l'int gourmand ici sur le côté, donc nous avons besoin de faire un masque de couche pour le faire. Alors allons de l'avant et ajouter un masque de calque avec du blanc et cliquez et puis avec mon outil de sélection de rectangle , je vais faire une sélection juste ici. Et puis je veux m'assurer que j'ai le noir défini sur l'arrière-plan, puis appuyez sur supprimer ou la touche Retour arrière, et cela supprime l'ingrédient de cette sélection. Maintenant, je dois faire une sélection ici pour enlever le reste afin que nous puissions entrer dans nos formes. Regroupez ce calque, et je veux sélectionner le calque supérieur, qui est celui-ci juste ici, puis avec mon outil de sélection floue, je peux cliquer dans cette zone pour faire ma sélection. Je vais aller de l'avant et fermer ce joueur de groupe et revenir en arrière et sélectionner mon masque de calque pour ce calque Grady Int, puis à nouveau, supprimer ou reculer la touche pour se débarrasser du reste de l'ingrédient. Maintenant, jetons un coup d'oeil à l'avant et à l'après. C' est juste en train d'être appliqué dans cette zone là-bas. C' est cool ? Très bien, donc cela ajoute un peu de profondeur à notre arrière-plan, rend un peu plus intéressant et non pas à plat. D' accord, allons de l'avant et créons un nouveau groupe de couches et appelons ça la section héros ou juste Héros. Et mettons toutes nos couches de groupe ici dans n'importe quel air individuel. Ok, donc nous avons notre section d'en-tête ou de héros, et tout est beau et soigné et organisé. Bon, allons-y et travaillons un peu plus sur la section héros parce que nous avons peut-être ou non une section que nous voulons ajouter dans la section héros. Et dans la conception originale, j'ai ajouté quelques preuves sociales pour augmenter la probabilité qu'un investisseur profite de cette offre et profite de l'action appelée en postant maintenant. Donc, la raison pour laquelle je voudrais ajouter des preuves sociales est parce que cela ajoute de la crédibilité et la crédibilité. Pour une entreprise comme celle-ci, c'est énorme quand on parle d'argent en général. Donc, en montrant aux investisseurs potentiels que cette société a été présentée dans ces publications et médias particuliers montre que cette entreprise est digne de confiance et que beaucoup d'investisseurs veulent s'assurer qu'ils ont affaire à quelqu'un c'est digne de confiance et non pas un usurier. Cela pourrait donc contribuer à accroître la possibilité que quelqu'un veuille faire affaire avec cette entreprise plutôt que de ne pas avoir cette information. Le seul problème, c'est, où le mettons-nous ? On le met à l'intérieur de la section des héros en ce moment ? La section des héros est ici, mais la preuve sociale est en dessous. Déplaçons ça dans la section des héros et regardons ce qui se passe. Alors maintenant, la section des héros est beaucoup plus occupée. Nous avons beaucoup plus de choses à faire. Ce que nous pouvons faire, c'est que nous pouvons abaisser la taille du logo et le bouton Appliquer maintenant et déplacer tout pour que cette information corresponde. Ou nous pouvons prendre cette preuve sociale et nous pouvons ajuster l'opacité des logos pour en réduire l' intensité. Ils sont toujours visibles et ils font toujours preuve de crédibilité, mais ce n'est pas aussi occupé qu'avant. L' autre chose que nous pouvons faire est que nous pouvons prendre ces logos et les affaiblir à l'échelle afin qu' ils ne soient pas aussi grands qu'ils le sont maintenant, et alors ils ne rivalisent pas avec le reste du contenu. Donc je vais vous laisser cette décision créative. Si vous voulez le placer dans la section héros, n'oubliez pas de réaligner vos éléments et de les redimensionner en conséquence afin que la section héros ne soit pas aussi occupée qu'elle l'est actuellement. Tu vas devoir aussi déplacer l'image et le déplacer vers le haut. Ou tu peux faire ce que j'ai fait et les placer juste en dessous de la section des héros comme ça. Ok, donc c'est tout pour notre section héros. Sauf si, bien sûr, vous mettez votre preuve sur les réseaux sociaux. Quoi qu'il en soit, nous allons commencer à créer la section de preuve sociale et ces trois colonnes dans le prochain tutoriel, qui est le début de la création de la section corps de notre page Web. Donc si tu es prêt à le faire, faisons-le. 35. Preuve sociale: Bonjour et bienvenue. Bon, donc dans ce tutoriel, on va aller de l'avant et créer notre section de preuve sociale, et on va aussi créer trois colonnes d'informations. Et dans leur page Web originale, ils avaient un lien juste ici, services qui allaient vers une autre page qui expliquait les trois principaux types d'investisseurs pour lesquels ils accordaient des prêts. Donc, j'ai pensé que ce serait bien de placer des extraits de cette information sur la page d'accueil de cette façon s'ils décidaient qu'ils voulaient plus d'informations sur l'un de ces types spécifiques de prêts qu'ils peuvent facilement naviguer vers cette page via le lien qui est créé à travers le titre. Donc nous allons aller de l'avant et créer ces trois colonnes aussi. Alors, allons de l'avant et commençons avec notre section de preuve sociale d'abord. Ce dont nous avons besoin, c'est de 4 à 5 logos. Ce sont ceux que j'ai choisis les formulaires Street Money Inc et CNBC, et nous allons les ajouter à notre document. Donc, je viens juste de faire une recherche Google pour chacun de ces logos et j'ai sélectionné transparent ou PNG quelles que soient les options, car vous voulez vous assurer que ce fichier particulier que vous allez ajouter à votre document est transparent. Donc, nous allons faire un clic droit sélectionner l'image de copie, puis de retour dans notre document, nous pouvons coller avec Commander Control et la lettre V. Si vous n'obtenez pas cette option, où l'ajoute automatiquement à un nouveau calque pour vous, vous pouvez obtenir cette option à la place. Cela dit, la sélection flottante. Dans ce cas, juste à droite, cliquez sur et sélectionnez un nouveau calque, puis il ajoutera cela à un nouveau calque pour vous. Ok, je n'ai pas besoin des deux, donc je vais aller de l'avant et en retirer un, et ensuite on a juste besoin d'éliminer, se lever et de redimensionner chacun des logos, et on doit aussi renommer les logos aussi. Alors faisons Forbes. J' en ai d'autres. Voilà bien, j'ai de l'argent de CNN au lieu de l'argent. Ça n'a pas vraiment d'importance. C' est juste pour la pratique de toute façon. Et je ne vais y aller qu'avec trois en ce moment. Alors passons aux couleurs et sélectionnons coloriser. Et puis nous voulons sélectionner blanc pour changer tout orteil blanc. Allons-y et faisons-le pour chacun des logos. D' accord ? Avec nos guides allumés avec le contrôle Commandant dans le demi-côlon. Je vais aller de l'avant et un guide pour le 785. Prenons notre outil de chapiteau pour que nous puissions le remplir avec une couleur. Faisons un nouveau calque aussi. Appelons ça fond et choisissons une couleur bleu foncé, puis avec votre outil de remplissage de seau , vous pouvez aller de l'avant et remplir cela. Ok, je vais sélectionner et éteindre mes guides. Déplaçons le calque d'arrière-plan sous les logos, et nous devons également redimensionner nos logos et modifier la limite du calque. Allons donc au calque et sélectionnez Recadrer le contenu et continuons et faisons les deux autres . Maintenant, si la limite de la couche est déjà recadrée au contenu, vous allez obtenir ce petit message ici, donc il ressemble à la même chose pour Forbes, donc nous sommes bons d'y aller. Allons de l'avant et saisissons notre outil de balance et assurez-vous que la hauteur et la largeur sont liées. Et puis, pour la hauteur, nous allons faire 50 pixels. Je devrais aller un peu plus bas. Faisons-le 35, puis continuons-le et mets-le à l'échelle et mets-le en position. Ok, on va faire la même chose avec les deux autres logos aussi. Nous sommes, quel que soit le logo que vous avez. Ils vont tous avoir 35 ans. Allons sur nos grilles parce que je veux m'assurer que tout est bien aligné. Ils ont également besoin de déplacer ma grille lier au-dessus de toutes les autres couches. On peut vraiment le voir. Allons de l'avant et placez ce logo ici directement au centre de ces deux. Alors saisissons notre outil de sélection de rectangle et faisons une sélection. Ensuite, avec notre outil d'alignement, nous voulons cliquer sur ce calque et le déplacer plus haut si nécessaire. Et puis nous allons nous aligner sur le centre de la cible. Ok, allons de l'avant et mettons tous ces logos dans un calque de groupe. Donc, faites un clic droit et sélectionnez un nouveau groupe appelé Logos. Maintenant, allons de l'avant et allions nos logos directement au centre de notre arrière-plan. Allons d'abord au calque d'arrière-plan et sélectionnons le calque et créons un contenu pour modifier la limite du calque , puis avec l'outil d'alignement, nous allons cliquer dessus. Mais il semble que j'ai besoin de déplacer ça jusqu'au sommet. Donc on va cliquer dessus. Ensuite, nous allons déplacer les logos vers le haut, en maintenant votre touche Maj et en cliquant sur les logos. Cette fois, nous allons nous aligner sur le premier élément, qui est l'arrière-plan. Ensuite, nous allons aligner le centre et le milieu de la cible pour aligner ces logos directement au milieu de la forme. Très bien, pour que cette partie de la page de quelle est faite, nous allons créer un nouveau groupe de calques appelé Social Proof. Ok, nous avons tout organisé. Allons de l'avant et déplaçons ça en dessous de la section des héros. Et maintenant, nous allons travailler sur nos trois colonnes. Maintenant, avant de faire ça, je veux vraiment revenir en arrière et sélectionner les logos et laisser tomber l'opacité vers le bas à environ 50 juste une sorte de tonifier juste un peu. Très bien, donc ça le rend moins occupé qu'avant. Alors allons de l'avant et travaillons sur nos colonnes maintenant. Donc, la première colonne, nous allons définir le titre à Propriétaires. Changeons ça pour Oswald Bold. Faisons 30 pour la taille et puis pour la couleur, nous allons choisir la couleur verte de son bouton. Décrivez donc votre outil de pipette ici et cliquez sur le bouton pour obtenir ce clic de couleur. OK, et nous devons en fait déplacer cette couche particulière en dehors de ce groupe. Cette couche. Bon, allons de l'avant et posons ça ici en bas, et puis nous allons juste créer un nouveau paragraphe avec de nouvelles informations. Peu importe ce qu'il dit. Il suffit de taper quelque chose. 567 lignes, c'est bien. Et nous allons faire ce texte 12 pour la taille, puis pour la couleur que nous allons taper dans 333 333 Cliquez sur votre touche de tabulation Cliquez sur OK, et nous allons changer la police pour Georgia semble un peu petite. Donc peut-être un peu plus grand. Je vais aller de l'avant et sélectionner tout et changer à 14 et ensuite on va le mettre en position ici, accord ? Je pense qu'on doit allumer notre grille. Allons-y et allumons ça, et je vais aller de l'avant et créer un nouveau groupe pour ce contenu. Ça va l'appeler propriétaire et jetons un coup d'oeil à nos cheveux espacés. Je pense que quand je veux faire, c'est que je veux prendre ce paragraphe et le condenser pour qu'il remplisse deux largeurs de colonnes. Revenons donc à notre textile avec la lettre T. Et puis nous devons aller à l'intérieur de notre couche de groupe ici pour sélectionner notre paragraphe, puis nous pouvons cliquer dessus pour activer la zone de texte afin que nous puissions le redimensionner. Donc je vais juste prendre ce coin ici et le faire glisser vers la gauche et vers le bas jusqu'à ce qu'il remplisse ces deux colonnes juste pour réajuster mon texte ici un peu. J' ai donc deux paragraphes. C' est très bien. Et maintenant il est condensé à ces deux colonnes, qui est ce que je veux. Et puis nous allons ajouter quelques colonnes d'espace entre les colonnes au fur et à mesure que nous créons les autres colonnes aussi. Et on va rendre ça très facile à dio. Ce qu'on doit faire, c'est attraper notre couche groupée, et on va la dupliquer deux fois pour mettre le propriétaire un en haut qui s'appelle celui-ci nageoires, et on l'appellera nouveau. Prenons cette couche et ensuite quoi ? Ils sont déplacés vers un testament. Il suffit de le déplacer pour écrire sur leur. Alors assurez-vous que vous avez deux colonnes d'espace et entre elles, car elle je pense que c'est trop. Je vais aller de l'avant et le déplacer vers la gauche, donc nous avons une colonne d'espace entre eux et revenir à nos outils de texte. Nous pouvons changer le titre, sélectionner tout, le changer à 30, puis changer la police aussi. Comment Oswald Old et nous devons nous assurer que nous avions la couleur, et ensuite nous allons déplacer l'autre couche aussi. Nous avons donc besoin d'une colonne d'espace. Tout est bien là et changeons le titre. Maintenant, nous avons juste besoin de les aligner vers le haut afin qu'ils soient parfaitement alignés le long de ce bord. Allons de l'avant et désactivez ces trois meilleurs joueurs, et nous devrions pouvoir les sélectionner maintenant avec notre outil d'alignement. Allons de l'avant et cliquez sur Locateur, maintenez votre touche Maj enfoncée, cliquez sur les palmes, puis relâchez la touche Maj, maintenant l'on à nouveau et puis cliquez sur Nouveau tout droit, nous allons passer à relative au premier élément et puis sélectionnez un bord supérieur de la ligne des cibles, Tout droit là. Maintenant parfaitement aligné le long du haut. Nous avons juste besoin de les centrer au milieu de notre document ici. Bon, Donc, avant d'allier ces trois colonnes directement au centre, créons une section pour ces colonnes et spécifions une hauteur spécifique pour elles. Allons donc sur nos guides avec Commandant Control dans le demi-côlon. Prenons notre outil de mesure et mesurons 300 pixels de haut. Kate, attrape ton gars et tire le vers le bas et jusqu'au réticule juste là. Maintenant, avant de les sélectionner avec leur outil d'alignement, allons de l'avant et créons un nouveau groupe de couches appelé trois colonnes afin que nous puissions y placer chacune de ces colonnes. Ensuite, nous pouvons simplement sélectionner ce groupe de calques particulier avec l'outil d'alignement par rapport à chaque colonne individuellement, puis il sera plus facile et plus rapide de l'aligner directement au centre. Donc, avec notre outil Lehman, nous avons juste besoin de cliquer dessus une fois, puis ah, couché au centre de la cible et aligner le milieu de la cible. Ok, de, sélectionnez et éteignez les guides, et ensuite nous pouvons aller de l'avant et allumer les autres couches aussi. On va aller de l'avant et garder la grille éteinte pour l'instant. Maintenant, il y a une dernière chose que je veux faire avant de passer , c'est-à-dire que je veux aligner les titres directement au centre des paragraphes. Maintenant, quand vous faites quelque chose comme ça et que vous avez déjà tout regroupé, ça va être beaucoup plus difficile que de le faire depuis le début. Mais parfois cela arrive parce que peut-être le client voudra faire un changement et voudra centrer cela. Mais vous ne l'avez pas fait au début comme nous l'avons fait, et vous devrez parcourir chacune d'entre elles, regrouper les couches et extraire toutes les couches afin de les sélectionner avec votre outil d'alignement . Nous devons également désactiver ces couches à nouveau afin de pouvoir les sélectionner, puis nous pouvons sélectionner ces couches avec notre outil d'alignement afin de pouvoir ensuite une ligne par rapport au premier élément et un centre de ligne de cible. Maintenant, dans ce cas, le paragraphe s'est déplacé vers la gauche parce que nous l'alignons sur le premier élément. Donc, au lieu de choisir le propriétaire d'abord, nous pouvons sélectionner le paragraphe parce que je veux que le propriétaire se déplace vers la droite. Sinon, nous perdons cette même quantité d'espacement entre chaque colonne et puis je peux sélectionner propriétaire, et cela va bouger ou Ok, allons de l'avant et remettons-les et ensuite faire cela pour les deux autres colonnes aussi bien. Je vais renommer ces titres avec le nom du titre juste pour lui donner une meilleure description. Et puis comme faras le nom du paragraphe pour le calque. Je vais aller de l'avant et le renommer paragraphe de sorte que parfois le client n'aura pas le contenu disponible. Donc, vous allez juste utiliser du texte comme celui-ci, ou du texte fictif, dont nous parlerons dans un tutoriel à venir. Ou vous pouvez réellement naviguer vers leur site Web et récupérer une partie du contenu qu'ils ont déjà la place à l'intérieur d'ici. Mais pour l'instant, on va juste le laisser comme ça. Ok, nous avons trois colonnes. Mettons ce coup le héros de la preuve sociale et l'en-tête se sont retournés et tout va bien. Bon, maintenant que nous avons fait ça, nous allons aller de l'avant et travailler sur la prochaine partie de notre corps dans le prochain tutoriel 36. Corps Partie 1: pour notre prochaine section de notre site Web. Je voulais créer quelque chose qui explique pourquoi vous devriez faire affaire avec cette entreprise en particulier . Donc c'est un peu comme la page à propos de nous. Qu' est-ce qu'il y a de nous ? Qu' est-ce qu'on dio ? Ce sont les choses que nous dions. Donc je pense que quelque chose est beaucoup plus puissant que nous. Page énumère les avantages de la raison pour laquelle vous devriez faire affaire avec une certaine entreprise que vous pouvez toujours faire à propos de nous page. Mais je préférerais essayer de vendre les services de mes clients aux visiteurs potentiels du site Web sur les raisons pour lesquelles ils devraient faire affaire avec eux. Et c'est ce que représente cette section particulière. Pourquoi Manhattan ? Et ensuite, nous énumérons 4 à 7 avantages de la raison pour laquelle vous devriez faire affaire avec Manhattan Bridge Capital Now. Ce contenu n'est pas disponible sur leur site Web, donc c'est quelque chose que je devrais leur parler et ordonné de savoir quels sont les avantages de l' utilisation de leur entreprise particulière par rapport à d'autres services de prêt dans la région. Donc, c'est quelque chose sur lequel je vendrais à la clientèle parce que je leur aiderais le bon contenu pour cette section, ou je leur permettrai de fournir ces informations pour moi. Si je devais l'écrire moi-même en leur nom en fonction des avantages qu'ils procurent, alors bien sûr, je facturerais des frais supplémentaires pour cela. S' ils fournissent l'information, je ne le suis pas. Ce n'est donc qu'une autre occasion d'aller au-delà. Être juste un autre concepteur Web. Vous n'avez pas à faire le copyright vous-même. Si vous n'êtes pas doué pour écrire comme moi, vous pouvez toujours l'externaliser, mais augmenter le coût de l'écriture de ce contenu particulier , et vous gagnez un revenu supplémentaire. Mais en même temps, vous faites un service à votre genre en leur fournissant votre expérience professionnelle pour leur savoir qu'ils peuvent augmenter le nombre de clients ou prospects qui vont les contacter en les vendant sur les raisons pour lesquelles ils devrait faire affaire avec vous. Si vous n'avez pas cette information, n'est que des informations générales. Oui, nous fournissons ce genre de prêts. Nous pouvons faire une approbation de prêt en 60 minutes, mais ce n'est pas vraiment dire pourquoi vous devriez faire affaire avec nous. Oui, vous pouvez obtenir une approbation en 60 minutes, mais il doit y avoir d'autres avantages au-delà de nous qui inciteront les gens à faire affaire avec eux. Ils pourraient offrir des taux d'intérêt plus bas que leur concurrence. Et ils peuvent expliquer que nous allons vous épargner des centaines de milliers de dollars parce que nos taux d'intérêt sont plus bas que n'importe qui dans la région. Ce serait un avantage. Un autre serait votre à une vente aux enchères. Toi par l'immobilier. Vous savez déjà que vous êtes approuvé pour ce prêt. Mais Manhattan Bridge Capital pourrait aller plus loin et transférer automatiquement cet argent au commissaire-priseur après approbation ou acceptation de votre offre afin qu'il n'y ait pas de retard dans l' acheminement des fonds à cette maison de vente aux enchères. Donc, vous pouvez prendre possession de ce bien immobilier aujourd'hui plutôt que d'attendre que le capital relais leur envoie un chèque ou quoi que ce soit pour cette entreprise en particulier, vous devez communiquer avec votre client pour savoir quels sont les avantages de faire affaires avec vous. Pourquoi les prospects qui ne savent rien de vous ? Pourquoi devraient-ils faire affaire avec vous ? Si vous ne leur donnez pas une raison pour laquelle ils devraient faire affaire avec vous par rapport à la concurrence  ? Il y a des chances que tu n'auras pas leur affaire parce que peut-être ta concurrence le fait en ce moment. Et ça fait partie de vos recherches. Tu vas aller voir la compétition dans leur région. Vous allez choisir les 4 à 5 concurrents et leur région et découvrir ce qu'ils font sur leurs sites Web. Et s'ils offrent des avantages sur leur page d'accueil, eh bien, c'est une autre raison pour votre client de le faire aussi, afin qu'il puisse augmenter ses chances d'obtenir de nouveaux clients. Je ne veux pas que ce soit juste un autre cours de design Web. N' importe qui peut concevoir un site web. Je veux partager avec vous des conseils et des idées sur la façon dont vous pouvez augmenter vos résultats financiers, mais en même temps aider vos clients à obtenir un rendement plus élevé sur leur investissement ainsi qu'à obtenir un nouveau site Web. Donc, la partie facile de cette conception Web est de rassembler ces trois éléments. Ce que nous avons, nous avons un texte, nous avons un titre, et nous avons une photo. C' est si facile de concevoir quelque chose comme ça. Il est plus difficile de communiquer avec votre client sur les raisons pour lesquelles vous faites la page Web spécifique et pourquoi ils devraient l'avoir et l'essentiel est, demandez simplement à votre client. Souhaitez-vous que l'orteil potentiel gagne plus de revenus en ayant plus de clients ? Bien sûr, ils vont dire oui, ils veulent plus d'affaires. C' est pour ça qu'ils font un site web. Ils veulent générer plus de revenus. Eh bien, après mon expérience professionnelle, c'est une façon de vous aider à vendre vos services afin que vous puissiez obtenir un meilleur retour sur investissement et sécuriser plus de clients en expliquant aux gens pourquoi ils devraient faire des affaires avec vous. Bon, maintenant que nous avons passé cela, allons de l'avant et concevons cette section particulière. J' ai choisi une image du centre-ville de New York ou de Manhattan, et j'ai choisi une ligne d'horizon qui m'a permis d'y placer du contenu qui s'équilibrait également avec le reste de l'image, avec un grand bâtiment à droite et des bâtiments supplémentaires. C' est là que Manhattan Bridge Capital fait ses affaires, Manhattan ou le centre-ville de New York. Donc je voulais prendre une image de leur jardin, pour ainsi dire. Donc, pour cette image particulière, je suis allé choisir sbeih dot com. J' ai tapé dans l'immeuble de New York. J' ai choisi la verticale pour l'orientation parce que je voulais quelque chose qui fournirait un bâtiment très haut et pas tant une orientation paysagère. Donc, une fois que j'ai tapé ceci et sélectionné vertical, la deuxième image ici a saisi mon intention. J' aime la couleur de l'image. Il fournit beaucoup d'horizon pour notre taxe. Nous avons juste besoin de le recadrer de manière à ce que notre grand bâtiment principal soit à droite et que le contenu soit à gauche de celui-ci. Donc, si vous voulez télécharger cette image, allez-y et créez un compte gratuit et ensuite nous allons télécharger la taille 12 80 par 1920 . Et vous pouvez également accéder à ce lien particulier en tapant ce numéro. Et cela vous mènera directement à l'URL de cette image particulière. Une fois qu'il est téléchargé, vous pouvez ensuite faire glisser et déposer cela dans votre document, donc c'est un fichier assez volumineux, mais il ne couvre pas le plein de notre page Web en ce moment, et ce que je veux est une image pleine, en d'autres termes, bordé le bord. Nous allons donc redimensionner cette image, mais nous devons aussi agrandir notre toile parce que nous n'avons pas assez d'espace ici en bas. Allons-y et faisons-le d'abord. En allant à l'image et en sélectionnant la taille du campus, assurez-vous que l'intérieur de la hauteur est déverrouillé et nous allons faire 5000 pour la hauteur. Une fois que vous cliquez sur votre onglet Clé, vous allez voir l'aperçu ici. Et ça va montrer tout l'espace supplémentaire qui va être ajouté à votre toile. Allez-y et cliquez sur redimensionner. L' autre chose que nous devons faire est que nous devons saisir notre couche d'arrière-plan et blanc sur le reste de cette toile aussi. Donc je vais frapper la lettre D et X pour obtenir du blanc au premier plan, puis avec l'outil rempli de seau avec la lettre G, je peux aller de l'avant et remplir ça. Le seul problème est que notre limite de couche est limitée à la hauteur précédente de notre campus, donc nous allons aller jusqu'au calque et sélectionner le calque à la taille de l'image, ce qui augmente la limite de ce calque particulier, puis nous pouvons le remplir dans. Bon, donc notre image est à l'intérieur sont trois colonnes au moins pour moi. Je ne veux pas qu'il soit là-dedans, donc je vais sortir ça et on va le descendre en dessous de ça aussi. Allons de l'avant et redimensionnons notre image avec notre outil de compétences. Et la toile est actuellement 1400 pixels blancs. C' est ce que nous allons faire pour l'image aussi. Et s'il est verrouillé, il fera automatiquement la hauteur, qui est 2100. Allez-y et mettez à l'échelle, puis nous devons activer notre guide pour que nous puissions le mettre en place et l'aligner ligne directrice que nous avons créée plus tôt dans une leçon précédente. Très bien, donc c'est le top de tout maintenant. Le seul problème, c'est que je n'ai pas d'espace pour mon contenu ici à gauche. Donc, je veux vraiment agrandir ce bâtiment pour que le bâtiment se déplace vers la droite et nous donne plus de ciel ouvert. Alors attrapons notre outil de balance à nouveau. Cette fois, je vais utiliser le coin supérieur droit ici pour cliquer et faire glisser pour l'agrandir. Alors, allez de l'avant et mettez à l'échelle, et la leçon que nous devons faire est de créer un arrière-plan pour nos trois colonnes afin que l'image ne saigne pas dans cette section. Alors allons dans nos trois colonnes ici. Créons un nouveau calque appelé arrière-plan Click, OK, et j'ai besoin de le sortir de ce calque de groupe et de le mettre en dessous. Et puis je vais remplir avec mon outil de seau. Et enfin, je vais aller de l'avant et prendre mon rectangle sélectionnable afin que je puisse sélectionner cette partie de la page Web et faire défiler tout le chemin vers le bas afin que nous puissions supprimer l'arrière-plan de cette zone , puis aller de l'avant et juste cliquer sur votre supprimer ou votre clé de retour arrière pour supprimer cette partie de l'arrière-plan. Pouvons-nous désélectionner et désactiver nos guides ? Et maintenant, nous avons notre image en place. D' accord, allons de l'avant et créons notre boîte de texte et notre numéro. Nous avons besoin de nos guides contre Nous savons exactement où l'aligner sur le côté gauche parce que nous voulions aligner avec tous les autres contenus, apparaître dans la section héros ainsi. Donc on va le placer directement sur ce deuxième guide, cliquer et faire glisser donc juste là. Et c'est la taille de mon texte actuel, Box 600 par 9 78 Ce n'est pas forcément la même taille que Justus, tant que c'est dans cet espace vide de notre image ici, ça ira. Il est peut-être un peu trop grand. J' ai besoin d'un peu plus de place pour mon titre. Donc je vais faire tomber ça juste un peu. Le crabe de Kayla, notre calque d'image et de créer un nouveau calque appelé zone de texte. Cliquez sur. Ok, et puis remplissons-le de White. Je pense que je veux tonifier la boîte de texte juste un petit bout. Laissez une partie de cette image passer derrière elle. Alors laissons tomber l'opacité un peu. Je vais faire à 80 ans, donc c'est plutôt bon. Je ne veux pas trop faire. Sinon, ça va rendre plus difficile la lecture du texte. Allons de l'avant et attrapons notre outil de texte et tapons le titre et faisons Oswald gras. Faisons 75 pour la taille donc juste il devrait y avoir bon et désactivons tous nos autres calques afin que nous puissions utiliser notre outil d'alignement pour aligner le titre directement au centre de la zone de texte. Et avant de le faire, nous devons passer à la couche et sélectionner le contenu recadré, puis maintenir la touche Maj enfoncée pour sélectionner le titre. Et puis nous pouvons aligner le Centre de Cible. D' accord, Ensuite, nous allons ajouter nos avantages à notre boîte de texte. Nous allons ajouter 56 ou peut-être sept paragraphes, et ce que nous allons faire est d'utiliser ce qu'on appelle un texte fictif. Le texte fictif est donc un texte qui est utilisé par les concepteurs Web pour remplir un espace qui nécessite ou devrait avoir du contenu. Et il est utilisé pour remplir cet espace car le contenu final n'est pas fourni par le client. Alors peut-être qu'ils sont une toute nouvelle entreprise. Ils n'ont pas encore le contenu, donc au lieu d'essayer de trouver quelque chose qui devrait aller là-bas pour eux, nous allons utiliser du texte fictif à la place. Donc, ce n'est pas lisible, et il n'est pas destiné à être lu. Il est juste utilisé comme remplisseur. Un autre nom pour le texte fictif est Laura um, Ipsum. C' est la norme de l'industrie pour les maquettes de conception et les prototypes comme les conceptions Web et, comme je l'ai mentionné, il vous permet de montrer aux clients le but ou la version complète de votre conception sans réellement avoir à investir du temps et la rédaction de Riel copie. Mais malgré tous les avantages de Warm ipsum, c'est juste du texte latin aléatoire, et il peut devenir un peu ennuyeux au fil du temps parce que ce n'est pas vraiment lisible. Et d'une certaine façon, c'est OK, parce que vous ne voulez vraiment pas que les clients se concentrent sur le contenu. Vous voulez qu'ils se concentrent sur le design. Mais si vous avez un client qui a un bon sens de l'humour, vous conduisez à une recherche Google pour les générateurs de texte factice, et vous trouverez beaucoup de sites différents qui offrent différents types de contenu par rapport contenu latin aléatoire. Et voici une liste de quelques-unes des options qui sont disponibles. Tu vas avoir un texto factice dans du bacon. Si votre client aime les chats, vous pouvez faire ne peut pas ipsum cupcakes et beaucoup plus. Il y en a un pour Bob Ross. Si vous ne le connaissez pas, il vient des années 80. Ah, il y en a un pour Harry Lips, euh, et bien d'autres. Donc il suffit de faire une recherche Google pour quatre générateurs de texte factice, et vous pouvez obtenir certains de ces types de Laura Um em quelques générateurs à utiliser comme remplissage pour votre contenu. Donc je vais aller de l'avant et faire une recherche sur Google pour Laura. Hum, hanche un peu. Et ce 1er 1 ici est juste un vieux texte latin ennuyeux. Alors allons de l'avant et prenons quatre ou cinq paragraphes de ce texte fictif. On va le copier, et ensuite on va prendre notre outil de texte et le coller. Maintenant, l'autre chose que nous pouvons faire très rapidement est que nous pouvons apporter des ajustements à nos options d'outils ici . Donc, nous avons la taille correcte du texte plutôt que d'avoir à le refaire ici. Donc je vais aller de l'avant et changer ma taille ici à 16. Je vais changer la police en Georgia, et je vais changer la couleur en gris foncé que nous avons utilisé précédemment. qui est tous ces trois chiffres ici ne peuvent pas maintenant, une fois que je colle, il finira par ajouter dans les styles de police que nous avons tapés ici. Maintenant, l'autre chose que nous devons faire est que nous devons saisir l'un de ces coins et continuer à redimensionner ce texte jusqu'à ce qu'il s'insère dans cette zone de texte. Appuyons sur la commande ou le contrôle fin zéro pour zoomer tout le chemin, ce qui rendra plus facile et plus rapide le redimensionnement de cette zone de texte. Donc je vais juste le mettre juste à l'intérieur d'ici et allons de l'avant et zoomer en arrière. Maintenant, allons de l'avant et un mensonge ce texte directement au centre de notre zone de texte, nous allons d'abord saisir cette zone de texte avec notre outil d'alignement, maintenez votre clé de vaisseau enfoncée et cliquez sur le texte, puis un centre couché et le milieu de la cible . L' autre chose que je veux faire, c'est que je vais revenir dans notre texte ici et redimensionner les titres de chaque paragraphe. Donc, je vais faire 20 pour la taille et je vais aussi faire un gras je vais aussi ajouter un espace entre le paragraphe et le titre aussi bien. Donc, faisons cela pour chaque titre rend juste un peu plus facile à lire. Et je ne suis pas tellement inquiet que le texte ne remplisse pas toute la zone. Nous avons ici du texte supplémentaire qui est au-delà du bas de notre zone de texte, mais c'est très bien. Si c'était du texte réel du client, alors je passerais un peu plus de temps à obtenir la zone de texte de la taille appropriée dans les polices, l'orteil de taille appropriée a tout ajustement. Mais pour l'instant, cela fonctionnera très bien. Ok, allons-y et remettons-nous nos autres couches. Il y a une dernière chose que je pense que nous devrions faire, et je pense que nous devrions réduire la couleur de cette image particulière, afin qu'elle corresponde mieux au reste du site. C' est un peu trop chaud, donc je veux le tonifier en y ajoutant une superposition de couleur. Alors allons de l'avant et attrapons ce calque d'image. Renommons le Trade Center, qui est le nom du bâtiment lui-même, ce grand ici. Et puis nous allons créer un nouveau calque appelé Color Overlay. Choisissons une belle couleur bleue. importe quelle couleur bleue fera l'affaire, puis remplissons-la avec cette couleur, puis laissons tomber l'opacité vers le bas à environ 15 à 20 . Et je pense que ça aide vraiment à refroidir un peu l'image. Donc, ce n'est pas aussi chaud, et il correspond mieux au reste du site. Donc encore une fois, la conception de cette partie du site Web Super simple. Il s'agit simplement de communiquer avec nos clients pourquoi ils ont besoin de cette section particulière sur leur site Web et comment cela leur sera non seulement bénéfique à long terme, mais cela facilitera la décision des prospects s'ils doivent faire affaire avec contre quelqu'un d'autre. Et si ces avantages qu'ils ont à offrir ne sont pas offerts par la compétition, alors les chances sont bonnes. Ils vont sécuriser leurs affaires maintenant. Dans la prochaine leçon, nous allons aller de l'avant et créer une autre section pour cette page Web particulière qui aidera les visiteurs à déterminer s'ils veulent faire affaire avec cette entreprise ou non. Et d'une certaine façon, ça va aider Manhattan Bridge Capital aussi. Parce que ce que nous allons faire est d'ajouter une section F A Q, et nous allons prendre leurs questions les plus posées et y répondre maintenant pour ces prospects afin que ces questions soient répondues avant qu'ils ne contactent Manhattan Capital, qui dans tour leur fait gagner du temps de ne pas avoir à répondre à ces questions au téléphone ou en personne. Donc, si vous êtes prêt à commencer là-dessus, faisons-le 37. Corps Partie 2: Bonjour et bienvenue. Très bien, donc dans cette leçon, nous allons créer notre section Foire aux questions, ce qui fournira quelques avantages pour les visiteurs du site Web et des avantages pour votre client aussi. Pour les visiteurs, cela leur donnera un accès facile aux réponses aux questions qu'ils vont avoir avant de passer cette étape d'achat auprès de cette entreprise particulière. Ensuite, ils peuvent décider s'ils veulent passer à la prochaine étape du processus de décision d'achat en fonction des réponses qu'ils obtiennent d'ici. En ce qui concerne votre client, cela les aide parce qu'une ils n'ont pas à répondre à ces questions en personne, au téléphone ou un e-mail, et à une sorte de, d'une manière pré-qualifie un prospect. Parce que si un prospect obtient ces réponses à ces questions spécifiques et décide de continuer pendant qu'il est très intéressé par ce que vous avez à offrir, ce que votre client a à offrir parce qu'il n'a pas décidé, vous savez quoi, Je n'aime pas ces réponses. Je vais faire quelques résultats. Ils aiment la réponse, donc ils veulent poursuivre le processus de décision d'achat afin de faire affaire avec votre client. Donc, pour ce design, c'est vraiment simple. Nous avons un SMS. On a un titre. Nous avons un bouton, nous avons une zone de texte qui contient la question, puis nous allons également créer un état de survol qui montre ce qui se passe lorsque vous cliquez sur cette petite icône juste ici. Il va en fait s'étendre pour révéler la réponse en dessous, et nous allons le concevoir et le mettre en place d'une manière. Donc le développeur sait que c'est un état de vol stationnaire et ce qui va se passer quand on clique sur le bouton avant de commencer sur la section FAA, nous allons aller de l'avant et faire quelques ajustements à notre grille. Lier et organisé sont des couches de la section précédente, donc nous devons étendre notre grille au bas de la page, et nous allons le faire avec notre outil d'échelle. Je vais taper 5000 pour la hauteur, et nous devons aussi organiser ces couches. Mettons-les dans un nouveau groupe de couches appelé Why Manhattan ? Bon, allons de l'avant et commençons à utiliser la section FAA avec notre outil de texte. Nous allons créer notre titre, et nous allons utiliser Oswald Bowled 72 pour la couleur, je vais choisir notre couleur verte que nous avons utilisée tout au long de ce projet, puis dans toutes les capitales d'un Q et minuscules alignons ceci sur le côté gauche ici pour l'aligner avec tous les autres contenus de la section héros . Bon, allons de l'avant et créons notre première boîte de questions, et nous allons en faire six colonnes de large, c' est pourquoi nous avons étendu la grille pour le rendre un peu plus facile pour nous. Alors allons de l'avant et attrapons notre outil de sélection de rectangle et éteindre fixe, puis il suffit de créer six colonnes de large, et je veux aussi changer la hauteur de sorte qu'il soit 67 pixels et nous avons besoin de créer un nouveau calque. Appelons ça la zone de texte de question et continuons et remplissons cela avec White, et je veux aussi ajouter un trait à la sélection aussi. Nous allons donc monter pour éditer et sélectionner la sélection de trait. Je vais faire une ligne avec d'un, et je dois aussi m'assurer que j'ai le noir au premier plan et que nous avons maintenant notre coup. Allons de l'avant et zoomons et assurez-vous que cela est correctement aligné avec tout le reste . On dirait qu'il est un peu éteint, donc je vais attraper mon outil de déplacement et cliquer dessus, puis utiliser ma touche fléchée droite pour le déplacer . Et voyons si le côté droit est à l'intérieur de cette colonne. Ce n'est pas le cas. Nous voulons un alignement parfait des pixels, et nous allons aller de l'avant et redimensionner cela avec notre outil de mise à l'échelle. Mais nous devons d'abord aller à la couche et sélectionner recadrer le contenu, puis nous pouvons saisir notre outil d'échelle sur le côté pour le tirer dans. Bon, allons de l'avant et créons notre bouton pour cette zone de texte particulière. Donc, revenez à l'outil de sélection de rectangle. Cette fois, je vais revenir en arrière et sélectionner le rapport d'aspect fixe et allons de l'avant et taper. Faisons 42 pour la taille. Je veux aussi ajouter des coins arrondis et on va aller au rectangle arrondi, et je vais faire 20 pour le rayon pour mes coins arrondis, puis je vais prendre une couleur bleu clair pour le remplir avec. Et avant de le faire très rapidement, nous devons créer une nouvelle couche. Appelons le bouton de question la sélection et allons de l'avant et attrapons à nouveau notre outil de sélection afin que nous puissions l'aligner directement au centre de cette colonne. Allons éteindre fixe pour que nous puissions corriger ça directement dans l'emplacement. On en a besoin. Ok, éteignons ces couches. Voici, nous pouvons le sélectionner avec notre outil d'alignement. Et avant de le faire à nouveau, nous devons aller jusqu'à la couche et le recadrage sélectionné au contenu. Et puis nous devons nous assurer que nous avons sélectionné la sélection, puis un centre de ligne et le milieu de la cible. Revenons à notre outil de texte pour qu'on puisse ajouter un petit symbole à l'intérieur. Je vais juste taper un signe plus, et je vais aussi le changer orteil blanc. Donc encore une fois, j'utilise Oswald bowled 72 et maintenant nous avons juste besoin de le déplacer en position. Donc cette fois, je vais juste utiliser mes touches fléchées pour le mettre au centre. Allons de l'avant et créons un nouveau groupe antérieur pour ces deux couches. Appelez le bouton question. Et maintenant, on va aller de l'avant et taper notre question. Je vais changer la police en Georgia. Faisons 18 pour la taille, puis sont couleur gris foncé. Et puis tapez une question que je vais faire. Quel est votre taux d'intérêt à 90 jours ? En fait, tu veux agrandir ça ? Je vais faire 24 points. Ok, nous allons juste mettre ça en position juste à propos qu'il devrait y avoir du bon. Jetons un coup d'oeil à nos conseils. Donc c'est juste le long du bord de cette colonne. C' est parfait. J' ai juste besoin de m'assurer qu'il est parfaitement centré, de haut en bas aussi. Alors allons de l'avant et faisons notre sélection pour que nous puissions le faire. Et si nécessaire, tirez ce calque à l'extérieur, vous pouvez le sélectionner, puis un milieu allongé de la cible. Ok, donc c'est aligné. Allez-y et remettez-la. D' accord. L' étape suivante consiste à créer nos zones de texte de questions supplémentaires, mais nous devons d'abord les placer dans un nouveau groupe de calques. Et appelons ça la question que l'on peut. On va mettre toutes ces couches et signer, sauf pour le F un Q. On ne veut pas ça là-dedans, parce que c'est séparé. Donc on va mettre celui-là en haut et je suis un aller de l'avant et l'éteindre juste pour le moment. Et allons de l'avant et saisissons notre question une couche groupée et dupliquée trois fois. Ok, quoi ? Ils sont déplacés vers quoi ? Nous allons juste sélectionner chaque couche et vers le bas. Je pense que je veux les rapprocher un peu plus, et ensuite nous allons utiliser notre outil d'alignement pour répartir la quantité d'espace entre eux uniformément. Mais je pense que nous avons un petit problème parce que je peux dire par la limite de la couche en ce moment qu'il est en dehors de notre zone de texte. Ça devrait être le long du haut et du bas ici. Et je pense que c'est à cause de notre petit signe plus que nous avons créé. Nous pouvons voir qu'il est beaucoup plus grand que le reste de la boîte, donc nous allons entrer et saisir chacun de ces calques et recadrer le contenu du calque à la taille réelle de cet élément particulier. Alors passons à l'intérieur de chacune de ces questions et continuons et faisons-le. Bon, maintenant, maintenant, que nous avons fait ça, nous pouvons voir que la limite de la couche est maintenant placée exactement où nous le voulons. Allons de l'avant et faisons nos sélections avec notre outil d'alignement. Maintenez votre touche Maj enfoncée et relâchez et appuyez à nouveau sur la touche Maj pour chaque élément. Et puis nous allons passer à relatif au premier élément, puis nous allons sélectionner cette option ici pour distribuer les centres verticaux. Le seul problème est qu'ils se chevauchent tous et sont au même endroit maintenant. Donc annulons ça avec Commander Control et les lettres A Et ce que nous devons faire, c'est dire à Gimp combien de pixels nous voulons décaler l'espace vertical. Essayons donc 100, puis sélectionnons cette option ici à nouveau. Et maintenant, il est parfaitement ajouté une quantité égale d'espace entre chaque question. Si on change ce nombre pour autre chose qui va augmenter la quantité d'espace, alors on va rester avec 100 pour l'instant parce que je pense que ça va marcher très bien. L' autre chose que je veux faire est de m'assurer que chacune de ces couches de groupe est au bon emplacement, puis je vais renommer chacune de ces couches. Question deux à quatre. Maintenant, prenons ces quatre couches et mettons-les dans un nouveau groupe précédent. Je ne vais pas le renommer maintenant parce que tout ce qu'on va faire est de prendre ce groupe et dupliquer orteil. Ajoutez quatre autres questions de l'autre côté. Case va prendre ce groupe de calques, le dupliquer et ensuite nous pouvons le déplacer vers la droite. également allumé ma grille pour que je puisse voir où ça va. Alors, là, on y va. Je vais mettre ce groupe de couches de haut et en fait, allons de l'avant et changer le nom de celui-ci aussi. Des questions. Donc nous avons notre un à quatre, et ensuite nous allons prendre ces groupes de couches ici et les mettre à l'intérieur d'ici, puis les renommer cinq à huit. Et on n'a plus besoin de celui-là. Quelque chose va de l'avant et supprime celui-là aussi. Peut-on juste avoir besoin d'organiser nos couches juste un peu ici ? Je vais aller de l'avant et allumer certaines de mes autres couches ici aussi. Allons-les tous pour les ongles. Probablement un bon moment pour le sauver. Donc je vais aller de l'avant et économiser avec le Commandant Control et la lettre s. Maintenant, nous avons juste besoin de tout faire parce que nous avons trop de place ici. Donc je vais prendre une mesure de l'espace juste ici, Toe Ajouter ça au bas de la page de Manhattan aussi. Alors prenons notre outil de mesure. Et faisons une mesure d'ici à ici, et ça ressemble à 75 pixels. Donc je vais ajouter la même quantité d'espace ici. 75 pixels. J' étais chez un guide là-bas, et puis on va aller de l'avant et tout remonter. Bon, allons-y et faisons une autre mesure. Je veux savoir combien d'espace il y a ici. Alors mesurons ça. J' ai donc 32 pixels. Le tien peut être différent. C' est très bien. Il suffit de le mesurer, le comprendre. Et puis à partir du bas de la Q. Mesurez combien d'espace vous avez besoin. J' en avais 32 et on va poser nos questions le long de ce guide. Ok, tout comme les faux. Votre section est terminée. Nous n'avons pas besoin de créer un état de survol afin que nos clients et notre développeur Web sachent quel code. Quand une personne clique sur ce petit bouton, ce qui va se passer, c'est qu'elle va ouvrir une zone de texte avec la réponse à la question. Et puisque ce tutoriel est assez long, nous allons aller de l'avant et le diviser en deuxième partie lors des deux prochaines tournées. Tu vas bien ? Donc, si vous êtes prêt à le faire, continuons à la leçon suivante. 38. Corps Partie 3: Bonjour et bienvenue. Bon, donc on va aller de l'avant et finir notre section F A Q avec notre état de vol stationnaire qui affichera la réponse à nos questions. Donc, la première chose que nous devons faire est de créer un nouveau groupe Lear pour la partie actuelle de la section R. F. F. A Q. Appelons-le F A. Q. Mettons ces deux-là à l'intérieur, et passons à notre première question et dupliquez-la. Renommons ça Answer, et on va tout arracher. Main au-dessus de la couche F A Q. groupée. Très bien, alors faisons quelques modifications à cette ou ces couches particulières. Nous voulons sélectionner le symbole plus que nous avons créé précédemment. Allons de l'avant et zoomer ici afin que nous puissions voir saisir votre outil de texte et cliquer dessus. Donc, nous obtenons un petit message de Gimp demandant si nous voulons éditer notre texte. Nous le faisons en cliquant dessus et nous rappelons la raison pour laquelle nous avons obtenu cela était parce que nous avons redimensionné la limite de la couche et l'avons recadrée au symbole lui-même. Alors allons de l'avant et sélectionnons tout avec le contrôle Commander et un signe moins et passons à blanc, puis nous allons aller de l'avant et prendre notre outil de déplacement et mettre en position. Donc, je vais juste utiliser mes touches fléchées pour le placer visuellement directement au milieu. Juste il devrait y avoir du bon. Et maintenant, nous avons juste besoin d'ajouter notre petite icône de la main stationnaire dans cette zone juste ici. Alors allons à Google et faisons une recherche d'icône de la main de l'état de vol stationnaire. Et puis nous voulons légèrement PNG et Pointer. Et je pense que celui que j'ai trouvé est celui-là. C' est un fichier PNG, donc je vais aller de l'avant et le copier et le coller. Donc, nous avons une sélection flottante, donc nous avons besoin orteil et il à un nouveau calque en cliquant avec le bouton droit et en sélectionnant deux nouveaux calques. Renommons cette icône de survol. Il est également beaucoup trop grand, donc nous allons le réduire à l'échelle avec notre outil d'échelle et pour les hauteurs. Allez-y et liez ceci pour la hauteur. Je vais en faire 40. Je vais sélectionner un calque pour recadrer le contenu. Cliquez sur l'échelle. Bon, maintenant qu'il a disparu Allons de l'avant et zoomons tout le chemin avec Commandant Control et zéro là c'est. Donc, tant que vous avez déplacé activement ou sélectionné et survolez l'icône Lear sélectionnée, vous pouvez le trouver. Mettez-le en position ici et nous avons presque fini. Allons de l'avant et créons notre boîte de texte de réponse. On va créer une boîte, remplir avec du texte et on en aura fini. Alors allons de l'avant et allons en dehors de notre couche groupée de réponses juste pour un instant, et nous allons créer une nouvelle zone de texte plus tôt et appelons-la réponse, puis dessinez simplement un rectangle qui couvrira les trois autres questions ci-dessous. Et puis avec White va le remplir, et nous voulons aussi ajouter un trait autour d'elle aussi. Nous allons donc monter pour éditer et sélectionner la sélection de trait. Je vais changer le premier plan en noir et ajouter mon trait. Kate. Sélectionnez et j'ai besoin de sélectionner mon outil de déplacement et cliquez dessus, puis utilisez mes touches fléchées juste pour le déplacer un peu. À ce sujet, il a l'air bien. Et maintenant, je suis un peu trop loin du côté droit. Allons donc de l'avant et recadrons pour contenir la limite de la couche. Et puis avec notre outil de compétences, nous allons juste le faire tomber juste un peu entre aller de l'avant et taper 305 et essayer cela pour essayer trois, 43 ou quatre œuvres. l'échelle. Parfait. Ok, allons-y et zoomons ici et allons de l'avant et mettons ça à l'intérieur maintenant. D' accord. Quatre. Notre réponse. On va commencer par une grosse lettre, majuscules entières, et on va changer ça en vert. Mettez un peu de règles à la fin, et je vais juste mettre ça en position. D' accord ? Allons-y et trouvons un texte factice. Je veux ajouter du bacon. C' est, euh donc je vais faire deux paragraphes. Tout va être de la viande et cliquez sur, donnez-moi un peu de départ. Très bien, donc c'est probablement trop de contenu. Donc je vais aller de l'avant et décrire le premier paragraphe. Copie ça, et je vais aller de l'avant et ajouter ça. Donc, au lieu de simplement cliquer et de tracer, créons une zone de texte où nous voulons que ce texte soit, donc je vais cliquer et faire glisser une zone de texte ici et maintenant je peux accélérer cela et nous n'avons pas à nous soucier de redimensionner la zone de texte. Tellement petites choses. Je vais vous présenter de nouveaux conseils et techniques pour travailler avec Gimp. Allons de l'avant et changeons les panneaux à 16. Allons un peu plus gros. 17. Je veux le remplir pour essayer 18. Parfait. Donc 18 fonctionne, mais c'est la mauvaise police. Allons en Géorgie et je vais juste aller ici et coller un peu ou du contenu ce qui remplit tout ça. Et elle, je veux faire cette boîte un peu plus petite. Il pleut cet ipsum commencé, et maintenant nous avons juste besoin de l'aligner. Il est donc directement au centre à partir du haut et du bas de la zone de texte de réponse. Dis ça 10 fois très vite. Allons de l'avant et dessinons une sélection. Donc juste il devrait y avoir du bien. Prenons notre outil d'alignement et changeons-le en sélection. Maintenant, je ne suis pas sûr de pouvoir choisir ça, donc je vais aller de l'avant et essayer. Ça ne ressemble pas à ça. Alors sortons tout ça. Essaie encore. Non, nous devons désactiver toutes nos couches dans le processus de sélection d'alignement. Et maintenant, nous pouvons aller de l'avant et une ligne au milieu de la cible. Nous sélectionnons et retournons tout le reste. Et puis allons de l'avant et remettons-les à l'intérieur. Maintenant, j'ai un peu d'une caste de couleur bleue au lieu de blanc pur. Et c'est à cause de la couche de couleur que nous avons créée à l'intérieur de la section Manhattan. Et ce que nous devons faire, c'est que nous devons ajouter un masque de calque afin de pouvoir supprimer cette couleur du reste du document ici. Ou on peut chier la limite de la couche à cette section. Alors allons-y et faisons-le. À la place. Allons de l'avant et créons une sélection autour d'elle, puis passons à la couche et sélectionnez le rognage à sélection de sélection, et maintenant notre limite de calque de rognage est définie sur cette taille, et il a supprimé cette superposition de couleur du reste du document. Maintenant, je veux juste nettoyer cela un peu parce que j'ai un peu de texte montrant ici. Revenons donc à l'intérieur de ce calque de texte et supprimez tout ce contenu. D' accord ? Notre section est maintenant terminée. Nous avons notre état de vol stationnaire. Nous avons toutes nos questions. Et quand je présenterai ça à mes clients, je laisserai cet état de vol stationnaire visible pour qu'ils sachent à quoi ça ressemble quand quelqu'un clique sur de l'air stationnaire au-dessus de cette zone particulière. Et puis quand nous l'envoyons au développeur web, ils rencontreront ces couches groupées et réaliseront qu'il s'agit d'un état de vol stationnaire et coderont chacune des questions en conséquence, en fonction des informations que nous leur avons données dans notre design. Bon, donc dans le prochain tutoriel, on va aller de l'avant et commencer à travailler sur la section Connect. 39. Corps partie 4: Bonjour et bienvenue. Bon, donc dans cette leçon, nous allons couvrir la conception de la section Contact US. Maintenant. Ils avaient une page de contact aux États-Unis à laquelle vous pouviez accéder pour remplir un formulaire, puis ils vous rappellaient ou vous envoyaient un courriel puis sur leur page d'accueil. Ils avaient l'adresse de leur bureau ainsi que leur numéro de téléphone, mais c'est un peu bourré ici, à gauche. C' est un peu difficile à lire, et dans l'ensemble, je trouve qu'il est très difficile pour les clients potentiels de contacter cette entreprise. Donc, nous voulons le rendre aussi facile que possible et leur donner un Zeman E. Donc j'ai tout mis au même endroit plutôt que de tout diviser, donc nous avons un moyen de leur envoyer un e-mail. On a leur adresse. Nous avons leur numéro de téléphone et le meilleur moment pour appeler parce que leurs bureaux ouvrent entre ces heures. J' ai également inclus une carte Google de leur bureau afin qu'ils puissent obtenir des directions directement à partir de cette section du site Web. Donc toutes ces choses, y compris cette petite ancienne ici, s'ils veulent simplement envoyer un courriel et soumettre une question ou deux. Ou peut-être qu'ils veulent juste les contacter. De cette façon, s'il vous plaît. Appelez-moi à ce moment-là. Quoi qu'il en soit, je veux juste rendre le contact aussi facile pour les prospects ou les clients existants au lieu de le diviser en pages séparées comme ils l'ont fait ici, où ils ont une page de contact avec nous. Et puis par ici, vous avez un peu la recherche des orteils pour les coordonnées. Ce n'est pas vraiment un bon endroit pour le dire, parce que vous n'attendez pas vraiment les coordonnées ici à gauche. Tu veux en savoir plus sur la société d'abord, puis OK, ouais. J' aime bien cette compagnie. Je veux les contacter. Eh bien, oui, c'est bien là. Mais encore une fois, c'est juste un très, très mauvais design et une mauvaise mise en page. Et je trouve cela beaucoup plus invitant pour les prospects ou les clients à obtenir l' information dont ils ont besoin, parce qu'ils veulent peut-être visiter le bureau directement au lieu d'appeler ou d'envoyer un courriel. Peut-être qu'ils sont dans la région, et ils peuvent juste obtenir rapidement des instructions sur le site Web ici. Alors allons de l'avant et mettons ce design ensemble. Il est composé principalement de formes, donc ça va être très facile à concevoir et à assembler. Nous avons juste besoin de trouver quelques icônes, puis une image de Google Maps. Allons-y et faisons-le d'abord. Allez-y et allez sur Google. Tapez des icônes professionnelles gratuites et allez de l'avant et téléchargez quelques icônes pour e-mail. Trouvez-nous et appelez-nous afin d'utiliser tous ceux que vous voulez. Je recommande d'utiliser des fichiers PNG parce que nous allons ajouter une superposition de couleur plutôt que d'utiliser des icônes qui air pré coloré ou noir et blanc icônes. Ensuite, vous pouvez aller sur Google Maps et taper 60 fraises numéro de route 205 Et voici le code postal juste ici. Alors allez-y et tapez ça. Tu devrais avoir quelque chose comme ça. Et puis ce que j'ai fait c'est que je l'ai condensé un peu pour que je puisse avoir quelque chose dans un format plus horizontal. Et puis j'ai juste utilisé une prise de capture d'écran ici pour capturer, puis je l'ai copié et ajouté à mon document. Alors allez-y, téléchargez ces images et nous allons commencer. Maintenant que nous avons nos icônes et notre carte Google, allons de l'avant et finissons notre section contact. Maintenant que nous avons nos icônes et notre carte Google, La première chose que je veux faire est que je veux prendre ces icônes et une superposition de couleur pour changer la couleur du noir à une couleur spécifique. Le problème est, et gimp, nous n'avons pas d'outil de superposition de couleur. Mais c'est bon, parce que je vais vous montrer comment ajouter une superposition de couleur à vos icônes. Donc la première chose que je vais faire est de saisir mon icône de carte ou mon icône d'adresse et je les ai également placés dans l'ordre en fonction de l'endroit où ils vont être positionnés, et je les ai renommés en conséquence aussi. Donc si vous ne l'avez pas fait, allez-y et faites-le ensuite. On va aller de l'avant et créer une nouvelle couche. Je vais appeler ça la superposition de couleur. Et puis je vais utiliser mon sélecteur de couleurs ici pour sélectionner le bleu à partir de ce bouton, puis nous allons le remplir avec notre outil de remplissage de seau. Très bien, étape suivante consiste à passer à notre mode de fusion et à sélectionner l'un des modes et nous allons choisir addition et bam. Regarde ça. Nous avons maintenant une superposition de couleur sur chaque icône. C' est cool ? Le seul problème est qu'il est d'ajouter cette superposition de couleur à tous les calques en dessous. Donc, notre Google Maps a également cette superposition de couleur. Il y a donc une solution facile pour ça. Et nous avons parlé de la façon de le faire Précédemment sur la façon de limiter une couleur spécifique à des couches spécifiques. Donc, vous vous souvenez probablement déjà comment faire ça. Ce qui est, c'est exact. On va monter et créer un nouveau groupe de couches. Appelons ça la superposition de couleur. Et puis une fois que nous avons placé tous les calques à l'intérieur de celui-ci, cette superposition de couleur sera appliquée uniquement aux calques à l'intérieur de ce joueur de groupe. C' est cool ? D' accord, j'adore ça. Ok, donc la prochaine chose que je veux faire est de prendre ces couches et de les déplacer un peu vers le bas . Je veux ajouter notre titre pour cette section, donc nous allons aller dans F. A. Q. Nous allons sélectionner le calque de texte F A Q, et nous allons le dupliquer. Allons de l'avant et retirez-le de ce joueur de groupe et mettez-le au-dessus des superpositions de couleur. Fermons F un Q et renommons ce contact. Et maintenant, nous avons juste besoin de saisir notre couche avec notre outil de déplacement et de la déplacer vers le bas. D' accord. Maintenant, avec leur textile va aller de l'avant et renommer ce contact. Faisons toutes les capitales, et je pense que nous devons travailler un peu sur notre espacement. Je veux m'assurer que nous avons un espacement égal ici et ici pour assurer la cohérence. Mais je veux aussi aller à notre titre de Manhattan semblent trouver la mesure ici parce que je pense que nous avons moins d'espace ici par rapport à cette zone ici. Et nous avons déjà fait une mesure, mais je veux resserrer un peu les choses, et je veux utiliser la même quantité d'espace que nous avons ici. Alors prenons notre outil de mesure et mesurez du haut de cette section jusqu'au haut de cette lettre et j'ai 57 pixels d'espace. Le tien peut être différent. C' est très bien. Il suffit de le mesurer parce que nous allons aller de l'avant et le mesurer ici et ajouter une nouvelle ligne directrice. Je vais retourner à mon outil de déplacement, et je dois choisir un calque ou un guide pour pouvoir me débarrasser de ce type qu'on avait auparavant. Donc je vais juste déplacer ça. Je peux me débarrasser de celui-là aussi, parce qu'on va tout passer à cette ligne directrice maintenant. Donc, revenez au mouvement, l'outil et sélectionnez. Déplacez le calque actif et assurez-vous que le lecteur du groupe F A Q est sélectionné. Donc, une fois que vous prenez ça, vous pouvez aller de l'avant et le déplacer en position. Et si nécessaire, vous pouvez également utiliser vos touches fléchées pour que tout soit aligné là où il devrait être. Bon, nous allons aller de l'avant et retourner à notre outil de mesure et faire une autre mesure à partir du bas de cette section avec la même quantité de pixels qu'avant pour placer notre raid de section de contact le long de cette ligne. Alors allons de l'avant et prenons une autre ligne directrice. Placez-le juste là, et ensuite nous pouvons déplacer notre couche de contact en position. On va aller de l'avant et travailler sur nos formes maintenant et on va travailler sur l'espacement. Une fois que tout sera mis en place, je vais aller de l'avant et allumer ma grille juste un instant. Donc parce que nous utilisions un système de grille à 12 colonnes. Nous pouvons diviser chacune de ces sections en quatre colonnes et avec. Nous allons donc utiliser notre outil de mesure pour comprendre l'avec de ces quatre colonnes dans ses 375 pixels. Maintenant, avec notre rectangle sélectionnable, nous allons nous assurer que nous avons réglé activé avec le ratio d'aspect, et nous allons dessiner une forme puis taper 3 75 Nous devons créer un nouveau calque avant de le remplir avec la couleur. Alors faisons ça. Appelons cette adresse. Choisissons une couleur gris clair. N' importe quelle couleur est bien. Allez-y et choisissez un, puis remplissez-le avec votre outil de remplissage de seau. Ajoutons également un trait en allant jusqu'à éditer la sélection de trait, et nous devons nous assurer que nous avons du noir pour les quatre grammes, puis ajouter ce trait. Ok, je vais juste prendre mon outil de déménagement. Je dois d'abord sélectionner avec Commandant Control et D et déplacer ça. L' autre chose que je dois faire est que j'ai besoin de recadrer la limite de la couche, alors allons-y et faisons-le. Va jusqu'à calquer le contenu corrompu, et ensuite on va le placer en position. Puisque nous sommes ici, allons de l'avant et mesurons notre espacement, et je veux un espace égal que nous avons d'ici. Donc, avec notre outil de mesure, allons de l'avant et mesurons à partir du bas du Q Teoh ici, et j'ai 34 pixels, certains pour aller de l'avant et mesurer cela. Allez-y et zoomez afin que je puisse obtenir une meilleure mesure. Ajoutons son guide, et ensuite on pourra aller de l'avant et mettre cette boîte en position. Allons de l'avant et bougeons cette couche particulière. Ci-dessous sont également des icônes. Ok, allons de l'avant et prenons notre adresse et dupliquée deux fois, puis allez-y et mettez-la en position. Je veux également réorganiser les couches afin qu'elles soient en ordre. Et puis renommons plus tôt c'est que je vais faire un email et un téléphone. Très bien, prenons notre outil d'alignement avec la lettre A et allons de l'avant et éteignons toutes nos couches pour qu'il soit plus facile pour nous de sélectionner ces calques et ensuite, avec leur touche Maj, sélectionnera l'autre deux et Changeons de par rapport au premier élément et un mensonge vers le haut. Ok, remettons-nous tout le reste. En plus de notre grille. Maintenant, nous avons juste besoin de remplir nos formes avec les coordonnées de chaque section. Et je pense que je veux juste déplacer ces icônes parce que je veux mettre la partie adresse ici. Donc c'est juste au-dessus de Google Maps parce que nous allons rendre cette carte Google plus petite en une minute. Alors allons de l'avant et déplacons ces icônes autour. On va aller dans la superposition des couleurs, puis le déplacer et je vais prendre mon icône e-mail. Il a emménagé ici et a téléphoné au milieu. Déplaçons également l'adresse vers le bas juste pour leur garder une commande. Et maintenant, nous pouvons saisir notre outil de texte pour ajouter cette information. Donc le 1er 1 va être email. Je vais changer la police de chemin de fer, puis pour la taille fera 36. Et je veux aussi changer la couleur en une couleur gris foncé. Donc je vais faire 333333 Maintenant le problème est parce que nous avons notre calque de texte à l'intérieur de ce calque de groupe. Cela ne va pas nous permettre de changer de couleur parce que la superposition de couleur y est appliquée . Donc c'est comme ça qu'on va arranger ça. On va prendre cette couche, et on va la déplacer au-dessus de la couleur ou du Relais. Et maintenant, parce qu'il est au-dessus, il va ajouter la couleur que nous avons sélectionnée avec l'outil de texte. Ok, dupliquons ça, appelons-le et dupliquerons celui-là, et on appellera l'adresse et on les mettra dans la position appropriée. Allons de l'avant et attrapons notre outil de texte et renommé chacun. Ok, allons de l'avant et ajoutons quelques informations supplémentaires. Maintenant, ce que le textile a sélectionné ? Je veux passer aux options de mes outils pour faire mes sélections à partir d'ici, donc je n'ai pas à le faire à partir de H Layer individuellement. Donc on va faire la Géorgie pour la police. On va en faire 16 pour la taille, et ensuite on utilisera le même clic de couleur gris foncé, OK, et on va juste taper une fausse adresse e-mail. Je veux sélectionner tout ce texte ici et l'aligner au centre. Ok, allons de l'avant et travaillons sur le dimensionnement de nos cartes Google et l'ajout de notre formulaire ici sur la gauche. Et puis dans le prochain tutoriel, nous allons de l'avant et travailler à réaligner tout et à obtenir tout exactement là où ils doivent être. Donc, pour les Google Maps, ce que je veux faire, c'est que je veux le limiter à huit colonnes, donc on va faire une forme de cette taille et ensuite on mettra la carte à l'intérieur. Alors prenons notre outil de mesure et déterminons la taille dont nous avons besoin, et il ressemble à 775 pixels de large. Ok, sortons de cette couche de groupe particulière et descendons ici sur Google Maps et créons une nouvelle couche. Appelons cela Google Maps et puis, avec notre rectangle sélectionnable, va de l'avant et créera une taille de 7 75 par 500. Assurez-vous donc que vous avez corrigé désactivé. Et nous allons taper cela dans la touche d'onglet 775 Oops est allé trop loin. 500. Donc je pense que c'est un peu trop grand. Allons de l'avant et redimensionnons cela jusqu'à 3 75 pour qu'il s'agisse d'une forme rectangulaire afin que cette carte s'adapte un peu mieux à l'intérieur de là. Je vais appuyer sur la touche X pour changer ma couleur de premier plan, blanc orteil, et ensuite je vais aller de l'avant et le remplir avec mon filtre à seau, et je veux ajouter ce coup à nouveau. Donc, je vais aller à éditer la sélection de course, puis noir sur le premier plan et coup de sélectionner Commander Control et D et nous allons mettre ce calque en dessous de Google Maps. J' ai besoin de changer ce nom pour Google Maps box. Ok, la prochaine chose que nous devons faire est de recadrer la limite de la couche pour notre boîte Google Maps . La couche a donc recadré un contenu et nous allons saisir notre carte et redimensionner. Ça changerait plus s. et je vais taper 3 75 pour la hauteur qui correspondra à notre boîte et puis ça. Allez-y et mettez-le en position ici. Ok, maintenant nous devons limiter notre carte à cette boîte. Donc on va prendre notre boîte Google Maps et ensuite on est flous. Sélectionnez l'outil pour ramener notre sélection à la couche Google maps, puis passez à la couche et sélectionnez recadrer à la sélection. Ok, allons de l'avant et de choisir avec le Commandant Control et D. D'accord, allons-y et travaillons sur notre formulaire. Maintenant, ce sera le formulaire de soumission par e-mail. On va faire de la rose quatre colonnes de large, comme on l'a fait avant. Allons de l'avant et sélectionnez l'arrière-plan et créez un nouveau calque appelé nom du formulaire. Et puis, avec notre rectangle sélectionnable, nous allons dessiner une forme et faire 3 75 de large par 50 pixels de haut. Et puis choisissons la même couleur grise que nous avons utilisée avant et puis remplissez-la. Ajoutons ce coup aussi. Le sélectionner et nous allons de l'avant et dupliquer celui-ci. Déplaçons ça vers le bas. Appelons le, formons un e-mail et continuons et recadrons au contenu pour chaque couche également. Maintenant, en ce qui concerne un espacement, je veux ajouter la même quantité d'espace que nous avons entre les colonnes du bas de ce formulaire et le haut de ce formulaire. Alors allons de l'avant et mesurons ça. J' ai donc 25 pixels. Je vais aller de l'avant et mesurer ça. 25. Allons-y et éteignons nos guides. Donc, la forme suivante, je veux avoir la même quantité d'espace, et je veux que la hauteur de cette zone juste ici afin que le fond s'aligne avec le bas de Google maps. Alors allons de l'avant et mesurons à nouveau 25 pixels. Et puis nous devons mesurer d'ici au bas de Google Maps. J' ai donc 224 pixels à péage. Nous allons donc saisir l'arrière-plan et créer un nouveau calque appelé message. Et puis avec notre outil de sélection de rectangle, nous pouvons aller de l'avant et dessiner ça. Faisons en sorte que nous ayons la bonne taille. Ici. On a 3 75 par 2 24 Ok. Encore la même chose, on va remplir avec cette belle couleur, et ensuite on va ajouter notre coup. Ok, donc la dernière chose à faire est de donner un titre pour chaque section. Allez-y et sélectionnez mon nom de formulaire ici afin que je puisse m'assurer que cette couche est configurée en haut. Je souhaite également modifier mes informations et deux options. D' abord, faisons le chemin de fer. Faisons 30 pour la taille, puis sont couleur gris foncé. Donc celui-ci sera un nom. Je vais changer cela trop audacieux, et ensuite nous allons faire des e-mails pour le prochain. Donc, cela permet simplement au visiteur de savoir quelles informations mettre dans chaque rangée. Et puis nous avons un message. Ok, donc c'était la partie facile. Nous avons toutes nos informations. Nous avons toutes nos formes. La seule chose que nous devons faire maintenant est que nous devons tout aligner directement au centre de nos formes. Assurez-vous que tout est parfaitement allié pour vous assurer que nous n'avons même pas d'espace entre toutes les différentes formes. Et on va le couvrir dans le prochain tutoriel. 40. Corps partie 5: Ok, donc dans cette leçon, on va aller de l'avant et finir notre section contact, et on doit aussi organiser nos couches. Et en ce moment, j'ai un énorme gâchis de différentes couches à différents endroits. Donc, je vais aller de l'avant et commencer à organiser mes couches et à les renommer aussi pour qu'il soit plus facile de trouver ce dont j'ai besoin et aussi de les regrouper pour nous aider en ligne. Donc, une fois cela fait, nous allons de l'avant et alignons tous les éléments dans les formes, ajustons l'espacement, puis nous serons prêts à passer à la section pied de page. - Ok , Maintenant que j'ai tout groupe ensemble, on peut aller de l'avant et commencer à aligner tous les différents éléments. Ok, donc pour l'espacement, j'en ai 29 entre l'icône et le haut de l'e-mail. Et puis j'ai mis l'adresse e-mail plus près de l'e-mail. Donc nous savons que ces deux-là sont ensemble. Et puis j'alignerai le reste des icônes en fonction de cette quantité d'espacement. Alors maintenant, je me félicite. Mon outil d'alignement avec la lettre A. Je peux cliquer sur ma première case ici, puis je vais cliquer sur mes icônes d'e-mail en fonction de ce groupe de couches, je vais définir le premier élément pour le relatif à, puis je vais aligner centre au milieu des cibles. Enfants, allez et tournez nos guides sur le choix, la couche ou le guide. Et nous allons déplacer ça en haut de l'email pour que je puisse aligner tout le reste. Et nous allons également placer un guide ici au-dessus de l'e-mail. Maintenant, nous avons juste besoin de saisir ces couches et de les mettre en position. Maintenant, très vite. Je vais revenir à l'email parce que je veux m'assurer que chacun de ces éléments est aligné au centre des autres éléments aussi bien. Donc pour ce faire, nous allons tout sortir du groupe, ce calque, calque, puis nous sélectionnerons chacun avec notre touche Maj enfoncée, puis un centre de ligne de cible. Ok, nous devons tout remettre en place et réaligner au milieu du centre parce que je pense que ça va affecter la façon dont il est centré dans cette forme. Faisons la même chose pour les informations du téléphone. On va extraire toutes ces informations. Nous devons également faire notre mesure ici de 29 pixels, puis nous allons aligner tout au centre. D' accord ? Tout retour dans le groupe, puis un mensonge à l'arrière-plan. Maintenant, il va le déplacer un peu plus haut parce que nous avons une deuxième ligne ici par rapport à notre adresse e-mail, ce qui est très bien. Donc on va aller de l'avant et juste laisser ça comme ça parce que je veux qu'il soit directement centré au milieu de la boîte. Ok, on va aller de l'avant et faire la même chose pour cette information aussi. Allons de l'avant et alignons nos trois lignes de texte ici. Je veux aussi m'assurer qu'il y a couché parfaitement de haut en bas aussi bien. Donc nous allons prendre notre rectangle sélectionnable pour faire une sélection et les aligner au milieu de la cible. Ensuite, nous devons nous assurer que nous avons sélectionné la sélection, puis une ligne au milieu des cibles . Ok, faisons la même chose pour les deux autres. Et puis pour le dernier va juste mesurer la quantité d'espace que nous avons ici en haut , qui est de 14 pixels. - Ok , nous devons maintenant remettre nos icônes dans le groupe de superposition de couleur pour nous assurer qu'elles ont la bonne couleur. Ok, jetons un coup d'oeil ici. Tout a l'air assez bien. La dernière chose que nous devons faire est de créer un nouveau groupe de couches pour la section Contact. Ok, donc c'était très ennuyeux et très répétitif. Mais il est important que tout soit bien organisé, de sorte que nous sachions où se trouve l'information si nous avons besoin d'y accéder à nouveau. Et cela aide également le développeur Web et de trouver les détails de la page Web comme ils citent le site Web et ont tout, tout ordre spécifique rend plus facile pour eux d'accéder à cette information et appelé le site Web. Si tout est partout, alors ça lui prendra beaucoup plus de temps pour coder le site et la fin. Cela va finir par coûter plus d'argent à votre client pour avoir ce site Web codé parce qu'il n'est pas correctement organisé et il est probable que vous n'allez probablement pas obtenir de répétition de cette entreprise en particulier ou de cette agence si vous travaillez à travers un parce que vos couches ne sont pas correctement organisées, oui, c'est ennuyeux et répétitif, mais il est impératif d'être organisé en tant que concepteur Web. Cela facilitera certainement les choses pour vous et tous ceux qui seront impliqués dans le projet, et cela va vous rendre beaucoup plus professionnel à long terme. Maintenant que la section Contacts est terminée dans le prochain tutoriel, nous allons terminer ce projet de conception Web en ajoutant un pied de page à la page Web. Donc, si vous êtes prêt à commencer, faisons-le. 41. Footer: bonjour et bienvenue à la conception de pied de page de ce site. C' est très simple. Nous avons juste quelques icônes sociales, quelques liens et quelques informations sur les droits d'auteur. Maintenant, généralement, un pied de page aura beaucoup de liens vers d'autres parties du site Web. Mais ce que nous avons fait, c'est que nous avons créé un site Web d'une page, bien que ce ne soit pas complètement une page, parce que nous avons quelques liens qui navigueront vers d'autres pages dans les sites Web ainsi que quelques options pour les commentaires d'équipe dans une section à propos si nous faisons une section à propos parce que rappelez-vous, nous avons fait cette section ici, mais nous pourrions créer une page différente pour la section à propos qui explique peut-être un peu plus sur l'entreprise par rapport aux avantages de l'utilisation de la société. Donc, dans l'ensemble, il est principalement une conception Web d'une page parce que nous avons combiné ah beaucoup de ces pages individuelles dans la page d'accueil elle-même. Bon, allons de l'avant et finissons la section pied de page et sera presque terminé avec ce projet de conception Web . Alors allons de l'avant et créons un nouveau calque pour notre fond de pied de page nommé Eh bien, faisons un clic de pied ou d'arrière-plan. OK, puis avec votre rectangle sélectionnable. On va dessiner une sélection de 1400 pixels de large et 200 pour la hauteur. Ensuite, avec notre filtre à seau, Will va de l'avant et le remplir avec une couleur bleue que nous avons utilisé précédemment et D select. Très bien, allons saisir notre outil de déplacement afin que nous puissions déplacer cela vers le bas dans la position était également sélectionner le rognage de la couche au contenu pour recadrer la limite de la couche. Je vais juste utiliser mes touches fléchées pour le déplacer vers le bas. Donc juste là, donc ça a l'air plutôt bien. Alors voici la partie facile. En fait, nous allons tricher un peu, et nous allons attraper nos icônes de médias sociaux du dernier projet. n'y a aucune raison de refaire ces icônes de médias sociaux, car nous les avons déjà fait une fois auparavant. Ok, dépose-les là-dedans, mais je ne sais pas où ils sont. D' accord. On dirait qu'ils sont en bas, alors allons de l'avant et recadrer le contenu Lear. D' accord ? Maintenant que nous avons ces couches là-bas, nous devons aller de l'avant et désactiver ces couches afin de pouvoir les aligner avec notre outil d'alignement . Je vais d'abord sélectionner l'arrière-plan. puis avec la touche Maj, sélectionnez-les, puis par rapport au premier élément et au centre de ligne de la cible. D' accord, allons de l'avant et ajoutons nos liens ici en bas. Allez-y et changez la couleur de la police, orteil blanc, et puis je vais faire cinq espaces et le copier afin que nous puissions le coller à la fin des autres liens. D' accord, allons de l'avant et alignons le centre de la cible aussi. En fait, j'ai besoin de déplacer cela un peu plus haut, juste à propos il devrait y avoir du bon et puis un de plus. Nous allons ensuite faire nos droits d'auteur, puis je vais choisir la couleur gris foncé pour la couleur du fonds et ensuite taper une information sur les droits d'auteur. Et puis, comme avant, nous allons aligner ces deux centres de cible et nous devons le déplacer vers le haut. Allons-y et mettons-les dans un nouveau groupe de calques. Appelons ça le contenu du pied de page, et nous allons l'aligner encore une fois. En fait, je pense que mes droits d'auteur sont trop bas. Je veux soulever cela un peu plus haut parce que je veux répondre plus d'espace au fond de celui-ci. Bon, revenons au groupe de contenu de pied de page et alignons-le à la hauteur de notre boîte de pied de page . Donc ligne milieu de la cible. Et puis enfin, nous allons faire une sélection entre les icônes des médias sociaux et les informations sur le droit d'auteur parce que je veux un mensonge les liens ici directement au milieu de ces deux éléments. Donc je l'ai sorti du groupe. Je vais le sélectionner, puis le changer en sélection, puis une ligne au milieu de la cible. Ok, de Select. Remettons-le à l'intérieur et allons de l'avant, zoomer et réactiver notre contenu. Ok, donc la conception Web est terminée. Mais ce que j'aime toujours faire avant de remettre à mon client pour examen, c'est de parcourir la page Web et de voir s'il y a quelque chose que j'ai oublié de faire. Ou s'il y a quelque chose que je peux faire pour améliorer la page Web. Maintenant, il y a quelques choses que nous n'avons pas faites, et je l'ai fait exprès juste pour que nous puissions revenir en arrière et jeter un oeil à la page Web et faire quelques modifications finales et renforcer le fait que vous avez besoin de parcourir votre page Web un de plus avant de le remettre parce que vous ne voulez pas remettre une page Web pour examen de vos clients . S' il y a des erreurs dedans, parce que s'ils voient les erreurs, alors ça va vous faire regarder sur la même chose professionnelle. Si vous passez par une agence, s'ils voient des erreurs, ça ne reflétera pas bien sur vous. Il y a donc quelques choses que nous devons faire pour améliorer cette page et pour mieux l' organiser pour notre développeur Web aussi. Donc nous allons en parler dans le prochain tutoriel, et nous allons modifier cette page juste un peu pour la rendre juste un peu mieux et pour s'assurer que tout est bien aligné. 42. Derniers ajustements: Donc nous en avons presque fini avec ce projet. Nous avons juste quelques derniers ajustements que nous devons faire pour rendre le site un peu meilleur et quelques choses que nous avons oubliées. Alors qu'est-ce qu'on a oublié de faire ? Eh bien, nous avons un formulaire ici, mais nous n'avons pas de bouton de soumission. On va aller de l'avant et ça dedans. Nous devons renforcer notre espacement ici et nous assurer que l'espacement entre ici et ici est égal à l'espacement ici. Il regarde un peu en ce moment, donc nous voulons nous assurer que nos alignements sont cohérents sur toute la page Web. Ainsi, par exemple, espacement entre ici et ici est égal ici et ici. Donc on va faire quelques mesures pour s'assurer que tout s'aligne en conséquence, et ensuite on fera des ajustements au fur et à mesure. Allons-y et commençons par faire nos ajustements ici. Donc on va aller de l'avant et Graham est un outil d'alignement et faire quelques mesures. J' ai 25 pixels ici, qui est ce que nous avions ici est Eh bien, donc je vais aller de l'avant et mesurer 25 pixels ici et je vais ajouter mon guide juste là. Maintenant, j'ai juste besoin de tout déplacer. Trouvons donc cette couche de groupe. Donc c'est en contact. Nous avons notre formulaire de soumission par e-mail et notre contenu Google ici, et nous pouvons aller de l'avant et simplement les déplacer individuellement. Et donc je vais juste cliquer et faire glisser ça vers le haut. La même chose avec celui-ci aussi. Assurez-vous que tout est une ligne qui a l'air bien. On dirait que notre email ici est un peu trop long. Quelque chose pour revenir à l'intérieur de cela et le redimensionner avec mon outil d'échelle. Ça va faire 3 66 pour le avec ça devrait s'en occuper. Et puis avec mon outil de déplacement, je vais aller de l'avant et le sélectionner et utiliser ma touche fléchée droite pour le déplacer sur un pixel. D' accord, donc ça a l'air plutôt bien. Maintenant, allons-y et zoomons, accord ? Maintenant que nous avons la bonne quantité d'espace entre tous ces différents éléments, cette partie est fixée. Maintenant, je veux passer par et m'assurer que j'ai la bonne quantité d'espace entre chacune des sections. ce moment, je vois que j'ai plus d'espace ici par rapport à ici. Allons donc en haut de sa page et jetons un oeil à l'espacement que nous avons utilisé dans cette section. Donc, ici, nous l'avons. Il semble qu'il y ait beaucoup plus d'espace entre ces éléments et le haut de cette section par rapport à ce que nous avons fait en bas. Donc, pour la cohérence allaient mesurer et ajouter la même quantité d'espace et il ressemble 75 pixels. Donc je vais aller de l'avant et faire cet ajustement à cette section aussi, pour lui donner plus de place pour respirer et lui donner cette cohérence. Alors allons de l'avant et mesurons 75 pixels. Et si le vôtre est différent dans cette section de trois colonnes, c'est bon. Il suffit de comprendre la mesure et de l'utiliser pour le reste du site Web. L' autre chose que je peux faire est que Aiken organise mieux ces couches. Ici, nous avons deux éléments qui doivent être regroupés dans un nouveau groupe de couches appelé Avantages. Et nous pourrions aussi y mettre le titre. Et cela va rendre plus facile pour nous de tout déplacer. Ok, donc ici, on a moins d'espace entre ce bâtiment et ce contenu par rapport à ce qu'on avait avant, mais c'est bon. C' est l'information importante ici, et elle est très lisible et facile à lire. Donc je ne suis pas vraiment inquiet pour cet espace juste là. On va aller de l'avant et continuer à mesurer 75 pixels d'espace et à ajuster chacune dessections. On va aller de l'avant et continuer à mesurer 75 pixels d'espace et à ajuster chacune des - D' accord, donc nous avons ajouté la bonne quantité d'espace entre chaque section et nous avons un peu espace vide au bas de la toile. Vous pouvez avoir plus ou moins que moi en fonction de la quantité d'espace que vous avez ajouté entre chaque section. C' est très bien. Ce qu'on va faire, c'est réduire la taille de la toile, et si je place mon curseur ici, ça me montre en bas de l'interface que la hauteur est 49 42. J' ai donc besoin d'aller à l'image et de sélectionner la taille de la toile et de taper ce nouveau numéro, 49 42. Vous devez également jeter un oeil. Répondez à un aperçu ici pour vous assurer qu'il prend cette information au bon endroit. C' est un peu difficile à voir avec cette longueur d'un document, mais je peux voir ici qu'il recadre cette zone que j'ai besoin de recadrer. Je vais cliquer sur redimensionner, et nous sommes maintenant en affaires. Ok, donc on a presque fini. Allons de l'avant et créons notre bouton de soumission. Allons de l'avant et créons une nouvelle couche appelée bouton soumettre. Nous allons attraper notre outil de sélection de rectangle corrigé est désactivé. Et puis, pour la taille, on va faire 100 pour la longueur et 50 pour la hauteur. Cette fois, je vais sélectionner une couleur verte que nous avons utilisée précédemment. Et je veux aussi faire le tour des coins. Donc, sous sélectionnez, sélectionnez rectangle arrondi, faisons 20, puis remplissez-le avec votre outil de remplissage de seau. Je vais aller de l'avant et éteindre ce fond pour voir mon bouton. Bon, allons de l'avant et plaçons notre bouton de soumission en position. Je veux l'aligner sur le bas ici, donc je vais traîner un guide juste pour m'assurer qu'il est là où j'en ai besoin. Et j'ai aussi besoin de le déplacer un peu vers la gauche pour qu'il s'aligne avec ce guide et ces soumissions se sont levées ici et maintenant je vais aller de l'avant et activer cette couche de message, et je vais aller de l'avant et déplacer un de ces guides jusqu'au sommet de la car ce que je veux faire est de mesurer 25 pixels supplémentaires du haut de ce bouton. Et je vais juste dessiner un nouveau contexte pour cela contre re le dimensionnement parce que parfois il est déformé un peu. Donc je vais faire 25 pixels là-bas. Nouveau guide. Supprimons ce message et créons une nouvelle couche appelée arrière-plan du message. Et puis quoi ? Ils sont au choix du rectangle. On va aller de l'avant et faire cette sélection. Et puis nous devons saisir notre couleur avec notre outil de sélection de couleur compte-gouttes, cliquez sur OK, et remplissez-le avec votre outil de remplissage de seau et allons de l'avant et ajouter un trait à la sélection. Noir au premier plan et cliquez sur le trait. Ok, la dernière chose que nous devons faire ici est de taper soumettre dans toutes les capitales. Je vais faire Oswald audacieux pour le Funt, et je vais ramener ça à 24 pour la taille. Et changeons-le, orteil blanc. Ok, Allons-y et déplacons-le vers le haut, tirez ceci vers le bas et ensuite nous avons juste besoin d'utiliser notre outil d'alignement pour aligner ça directement au centre de notre bouton. Mais d'abord, allons à notre bouton de soumission et sélectionnez le calque. Recadrez le contenu, puis allez de l'avant et faites nos sélections. On dirait que nous devons tout désactiver à nouveau, puis nous assurer que vous changez par rapport au premier élément, puis à un centre de ligne de cibles. Ok, remettons-nous tout ça. Un nouveau groupe de calques peut-il être à nouveau ? Et cette fois, c'est pour le bouton de soumission, et ensuite nous pouvons placer cela à l'intérieur de notre couche de groupe de contacts également. Ok, allons-y et zoomons. Je pense que nous avons presque fini. L' autre chose que je veux faire, je pense que cela va beaucoup mieux est que je veux tonifier les icônes pour qu'elles ne soient pas aussi intenses, et je veux aussi tonifier les icônes sociales dans le pied de page. Alors allons-y et attrapons-les d'abord. Je vais baisser l'opacité à 50. De cette façon, nos yeux ne sautent pas partout parce que nous avons tellement de choses en compétition pour notre attention. Nous voulons donner à certains éléments plus d'importance que d'autres. Alors allons de l'avant et attrapons nos icônes ici aussi. Vous prenez effectivement ce groupe ce calque et descendez à 50 aussi bien, sorte que certainement cela le rend beaucoup plus facile sur ses yeux et ajoute une certaine importance à d'autres éléments par rapport aux icônes. Très bien, allons faire un défilement et jeter un oeil au reste du site pour voir si nous avons besoin d'ajouter autre chose. Ok, je pense que ça a l'air assez bien, et nous avons fait nos ajustements. Tout est correctement aligné. Nous tweetons la zone de contact pour la faire paraître un peu mieux qu'avant, ainsi que les icônes sociales. Et je crois que nous avons fini. Félicitations pour avoir terminé ce deuxième projet de conception Web. Si vous ne l'avez pas déjà fait, passez en revue et terminez ce projet pour la pratique, puis allez-y et essayez de comprendre ce que vous pouvez faire pour rendre cette conception de page Web plus unique dans la vôtre afin que vous puissiez l'ajouter à votre portefeuille. Donc c'est votre prochaine mission. Allez-y et venez avec quelque chose qui, selon vous, est beaucoup mieux que ça. Et si vous le souhaitez, allez-y et soumettez-le dans la section Q et A pour obtenir des commentaires. Une fois tout cela terminé, vous serez prêt à passer à notre troisième projet de conception Web dans la section suivante. Merci d'avoir écouté et passer une journée géniale. 43. Projet 3 : briefing maré: Bonjour et bienvenue à notre projet de conception Web numéro trois pour l'audio et la vidéo Seaside. Donc nous allons juste faire un bref aperçu du site existant Ce que vous pouvez voir en ce moment, puis je vais vous montrer le design que j'ai trouvé, et je vais vous donner quelques conseils sur la raison pour laquelle je l'ai conçu comme je l'ai fait. C' est le premier. Jetez un oeil au site original afin que nous puissions comprendre ce que nous devons faire pour améliorer ce site Web. Donc, au départ, la première chose que je vois est leur logo, audio et vidéo en bord de mer. Et il semble qu'ils ont pris un Clippard au fromage gratuit de Google images et ont giflé ensemble un logo. Ça n'a pas l'air très professionnel. Il a l'air désuet, dans l'ensemble, je pense juste qu'il a un sentiment bon marché pour elle. Donc, je pense qu'un nouveau design, amélioré , plus moderne , plus moderneet simple serait meilleur pour leur logo que ce qu'ils ont actuellement. Encore une fois, cela vous donne l'occasion de vendre vos services pour inclure la conception du logo. Donc, si vous avez un client qui vient à vous pour la conception Web et qu'ils n'ont pas de site Web existant ou même juste logo sting non examiné, vous pouvez jeter un oeil à cela et voir si vous pouvez trouver quelque chose d'encore mieux. Ensuite, vous pouvez essayer de les vendre sur votre logo. Service de conception. Peut-être que vous avez des idées de camp à l'avance avant de leur donner un devis. Peut-être leur montrer quelque chose de simple juste pour leur donner une idée de pourquoi votre logo est meilleur que ce qu'ils ont actuellement. C' est une autre option que vous devez considérer lorsque la conception Web est de vendre des services supplémentaires . Ainsi, comme vous pouvez le voir dans leur navigation, c'est un site très simple. Ils n'ont pas beaucoup de contenu. Ils ont l'audio, vidéo et nous contacter, et tous les trois vont sur une page séparée, même si toutes ces informations sont également sur la page d'accueil. Donc, il n'était pas tout à fait sûr pourquoi ils avaient ces pages supplémentaires quand tout est sur la page d'accueil , donc nous allons le voir dans une seconde. Donc, je pense que si nous allons faire des pages supplémentaires, je voudrais ajouter des informations supplémentaires par rapport à ce que nous avons sur la page d'accueil. ne me dérange pas de mettre des informations de base sur la page d'accueil. Vous pouvez voir ici qu'ils ont des échantillons pour leur audio et pour leurs vidéos, ce qui est très bien. Mais s'ils veulent des informations supplémentaires, alors nous pouvons les mettre sur ces pages supplémentaires. Donc nous allons garder la navigation à peu près la même chose. D' accord, alors après ça, nous avons les médias sociaux avant et au centre. Et si vous n'avez jamais entendu parler de cette entreprise auparavant et que vous visitez leur site Web pour la première fois, vous n'êtes probablement pas prêt à commencer à les suivre sur Facebook et Twitter. Pourquoi voudrais-tu suivre quelqu'un dont tu ne connais rien ? Donc je ne rendrais pas ça important pour cette raison. C' est pourquoi vous feriez mieux de concevoir cela dans l'en-tête et de le rendre plus petit, donc ce n'est pas aussi important, mais les gens peuvent toujours y accéder facilement lorsqu'ils sont prêts à vous suivre sur ces plateformes de médias sociaux , et Je n'aime pas l'idée de la mettre en avant et au centre. Alors commençons. Commencer sur quoi ? Ce n'est pas vraiment un gros titre. Nous avons également une très mauvaise image pour l'arrière-plan, et ensuite nous avons leurs coordonnées à nouveau. Je ne suis pas prêt à te contacter. Je ne sais rien de votre entreprise ? Pourquoi voudrais-je t'appeler ? Vous ne m'avez pas encore donné de raison de vous appeler, donc les coordonnées de nouveau. Si vous voulez mettre votre numéro de téléphone là-dedans, je le mettrais dans l'en-tête et je le rendrais petit. Donc, ce n'est pas dominant, mais toujours facile d'accès. Donc, toutes ces informations ici peuvent être combinées dans l'en-tête. Alors maintenant, nous allons comprendre pourquoi je devrais faire affaire avec vous, audio et vidéo pour votre marque. Et puis ça explique ce qu'ils font. Et ils ont une action appelée, ce qui est bon. Apprenez-en plus alors. Nous avons ici deux liens qui sont exactement les mêmes liens qui naviguent vers les pages audio et vidéo qui sont disponibles ici dans l'en-tête. Donc ils répètent cette information à nouveau. On n'a pas besoin de mettre ces informations ici deux fois. C' est déjà dans la navigation, mais j'aime l'idée de mettre des échantillons sur la page d'accueil car à partir d'ici, vous pouvez échantillonner le type de travail qu'ils ont déjà fait et voir le type de travail qu'ils ont déjà fait. Et puis vous allez naviguer vers les autres pages. Si vous voulez en savoir plus, Donc, dans ce cas, avoir ce qui est connu comme un en-tête collant serait bénéfique de sorte que quand une personne fait défiler cette navigation est toujours disponible. Donc, ce serait quelque chose que je recommanderais pour ce site en particulier. L' autre chose que je ferais est maintenant qu'ils n'ont qu'un seul échantillon vidéo, et l'image de cette vidéo est assez brillante. Cela attire votre attention parce que c'est très, très vif, mais je ne pense pas que ce soit une image de très bonne qualité dans l'ensemble, et je changerais probablement cela. Mais plus important encore, si nous ne changeons pas l'image, ce que je recommanderais c'est d'avoir une playlist de vidéos. Ici, nous avons plusieurs échantillons audio. J' aimerais voir plusieurs échantillons vidéo ainsi que quatre, peut-être cinq, peut-être sept ou huit vidéos, échantillons à inclure dans cette zone aussi, afin que vous puissiez répondre à différents publics en fonction de la personne que vous ciblez, qu' il s'agisse d'une entreprise professionnelle que vous ciblez, ou que vous fassiez des mariages aussi, vous voudrez avoir des échantillons vidéo de cette entreprise ou d'autres types d' événements de la vie . Vous voudrez avoir des échantillons vidéo de chaque type de service ou d'événements auxquels vous traitez , et les types d'entreprises auxquelles vous répondez, que ce soit d'affaires à entreprise ou d'une combinaison d'affaires à entreprise et mariages et autres types d'événements de la vie. Donc c'est une autre chose que je recommanderais pour cette entreprise en particulier. Et puis ici, on a une section de contact US, Laissez-nous une ligne, appelez-nous, Harry. Ils permettent aux gens de les contacter facilement en appelant ou en descendant un message . Et puis dans le pied de page, nous avons une énorme section sur les droits d'auteur avec des informations supplémentaires non liées au droit d'auteur. Encore une fois, je recommande d'inclure des informations sur les droits d'auteur, puis des liens vers des politiques de confidentialité et des choses comme ça. Parce que si vous jetez un oeil ici, ils ont une politique de cookies, donc je ne mettrais pas nécessairement ce lien de politique de cookies dans cette zone ici. Je recommande de le mettre dans la boîte de pied de page. Ensuite, nous avons encore quelques liens vers les médias sociaux, ce qui est très bien, et puis nous avons propulsé par le constructeur de site Web Go Daddy. Donc, cela dit à May cette entreprise particulière a construit leur site Web eux-mêmes, et il montre qu'il est mal conçu, a une mauvaise mise en page, un logo bon marché. n'y a pas de style du texte, et dans l'ensemble, l'expérience utilisateur peut être améliorée en ayant un site Web conçu professionnellement. Donc on va revoir mon design particulier maintenant et pourquoi. Je pense que les options et le design que j'ai créé sont meilleurs que cela et comment cela va fournir une meilleure expérience utilisateur. Alors allons-y et jetons un coup d'oeil. Ce que j'ai décidé de faire était de créer un nouveau logo moderne et simple. Ce n'est rien de fantaisie. Cela ne va pas m'aider à gagner des prix, mais c'est beaucoup plus professionnel que ce logo particulier ici. J' ai ajouté quelques autres éléments à la navigation ainsi qu'un hamburger Icahn, qui affichera ou masquera la navigation lorsque vous cliquez sur. Je ne pensais pas qu'il était nécessaire d'avoir cette navigation visible, car beaucoup de ce contenu et des liens vers ce contenu sont disponibles sur la page d'accueil maintenant, cadre de leur logo et de leur image, ils essayaient d'intégrer le bord de mer palmiers, vue sur l'océan choses comme ça, et je sentais que dans l'ensemble leur logo et leur image de marque serait mieux servi avec les couleurs du côté de la mer. C' est pourquoi j'ai choisi un bleu foncé pour l'eau, puis une belle orange à une couleur Grady int rosâtre rougeâtre pour représenter le soleil. C' est pourquoi j'ai choisi ces couleurs et non pas les images ou les images clipart comme elles l'ont fait à l'origine. Et puis dans la section des héros. J' ai juste une énorme déclaration de texte qui fait de votre vision une réalité. Cela ne dit pas grand-chose, mais peut-être qu'il attire votre intérêt parce que vous avez une vision vous-même, et c'est pourquoi vous allez dans cette entreprise en particulier et vous n'êtes pas une vidéo AGA pour ou vous ne savez pas comment capturer correctement l'audio professionnellement. Donc, cette déclaration seule ne va pas vraiment donner à quelqu'un envie d'acheter ses services, mais elle peut attirer leur intérêt maintenant. La seule chose que j'ai ajoutée pour la section héros sont ces logos d'entreprises pour lesquelles cette entreprise a travaillé ou travaillé pour des événements en direct. Cela ajoute donc une preuve sociale ou une crédibilité. Cela augmente la crédibilité de cette entreprise et la rend beaucoup plus professionnelle ici . Fromage, fromagé . n'y a pas de véritable crédibilité. Ouais, donc tu es sur les réseaux sociaux, ce n'est pas la crédibilité ou la preuve sociale. n'y a aucune preuve que vous pouvez aller sur leur page Facebook et ils peuvent avoir seulement 100 fans. Grande affaire. C' est une affaire plus importante. Vous avez travaillé avec ces entreprises. Cette vidéo AGA pour a travaillé avec ces entreprises. C' est beaucoup plus impressionnant que ça. Donc, j'ai inclus cela dans la section héros afin qu'il soit au-dessus du pli et les visiteurs de ce site verront cette information et si vous le pouvez, qui serait encore mieux. Est avoir des liens qui vont à une page de chacun de ces sites Web qui met en valeur votre client et le travail qu'ils ont fait. Ensuite, la première chose que nous allons voir après que nous commençons à faire défiler vers le bas sont les services qu'ils offrent. Et puis chacun d'entre eux peut lier orteil une autre page pour plus d'informations. Encore une fois, vous devez vendre vos services. Pourquoi devrais-je faire affaire avec vous ? Eh bien, si vous cherchez quelqu'un pour faire de la vidéo ou de l'audio pour un événement en direct pendant que vous allez être intéressé par les événements de la vie ou le son de la vie, ou peut-être vous avez juste besoin de services de consultation pour que chacun d'entre eux puisse aller sur une autre page qui les vendront sur les raisons pour lesquelles ils devraient faire affaire avec l'audio et la vidéo en bord de mer. Ensuite, nous pouvons voir des échantillons audio et vidéo. Je n'ai pas vraiment changé beaucoup pour la conception de cette partie particulière du site Web. Cela ressemble beaucoup à ce qu'ils ont actuellement, et c'est parce qu'ils ont leurs échantillons audio hébergés sur le cloud sonore. Et ce que vous pouvez faire avec Sound Child, c'est que vous pouvez prendre du code ou un plug in et le mettre sur votre site Web, et il mettra ensuite en valeur une playlist de toute votre musique ou audio pour que les gens puissent goûter. Donc, il n'y a pas vraiment beaucoup que je voudrais changer avec ce design particulier. J' ai juste nettoyé un peu. J' ai fait agrandir les images et les boutons de lecture, mais toutes ces mises à jour de conception dépendent de savoir si vous êtes autorisé ou non, ou si vous pouvez même modifier le code fourni par Sound Cloud. Je préférerais voir ces images, et le bouton de lecture est plus grand. Mais encore une fois, cela dépend de savoir si cela peut être fait ou non. Et si c'est possible le budget du client, car alors le codeur devrait aller et personnaliser cela en fonction de ce qui est disponible à partir de Soundcloud. Ensuite, nous avons nos échantillons vidéo. Et pour ce design, j'ai inclus un grand bouton de lecture rouge parce qu'ils hébergent leurs vidéos sur YouTube et vous pouvez le voir avec ce petit bouton de lecture juste ici. C' est un logo de bouton de lecture YouTube, donc j'ai pensé qu'il serait préférable de le rendre plus grand. Mais ce que je recommande à ce client est de l'héberger sur autre chose que YouTube pour le simple fait qu'une fois la vidéo terminée, vous allez commencer à voir une playlist d'autres vidéastes et d'autres types d'événements. Et cela peut distraire le visiteur car alors ils vont commencer à naviguer vers d'autres vidéos. Ils vont se faire détourner, et ensuite ils vont quitter le site. Donc, nous voulons garder les visiteurs sur notre site le plus longtemps possible, donc je recommande d'héberger les vidéos ailleurs si vous pouvez le faire sur Soundcloud que je le recommande ou de choisir un autre service comme la vidéo. L' autre chose que j'ai fait pour ce design particulier est que j'ai ajouté une playlist ou un curseur en ajoutant quelques boutons ici à gauche et à droite, et nous sommes actuellement sur quatre des cinq échantillons vidéo, puis j'ai mis à jour la connexion et j'ai inclus un texte supplémentaire pour une consultation gratuite. Alors pourquoi devrais-je me connecter avec vous ? Qu' est-ce qu'il y a pour moi pendant que je vais te donner une consultation gratuite qui va augmenter la probabilité que quelqu'un t'envoie un message, alors qu'ici, on a juste contacté. Eh bien, laisse-nous une ligne. Pourquoi devrais-je te laisser une ligne ? Qu' est-ce qu'il y a dedans pour moi ? Donc, vous voulez vous assurer que vous donnez au visiteur une raison de vous envoyer un message, et vous pouvez le faire en leur donnant simplement quelque chose en retour pour vous envoyer un message. Et puis j'ai simplifié le pied de page avec une simple ligne de copyright et quelques icônes de médias sociaux. La seule autre chose qui pourrait probablement ajouter est une politique de confidentialité et une politique de cookies qui renvoie à ces pages pour ce contenu. Et puis j'ai également pris l'arrière-plan que j'ai créé pour l'en-tête et la section héros et ai ajouté au pied de page pour équilibrer la conception globale et connecter tout ensemble. Donc, dans l'ensemble, c'est plus propre. C' est plus moderne. C' est plus à jour. Il est plus convivial, et il semble beaucoup plus professionnel que ce qu'ils ont actuellement. Donc, pour ce projet, nous allons recréer ce design particulier. Je vais te montrer comment j'ai fait ça. Grady int a appliqué certains de ces effets spéciaux comment faire face à des situations où vous avez du contenu provenant d'un autre site Web. Comment obtenir ces images parce qu'il n'était pas facile ou simple d'obtenir ces images particulières . Alors je vais vous montrer comment j'ai eu ces images, puis nous allons de l'avant et créer un simple curseur moderne pour notre section vidéo, et ensuite nous allons terminer avec notre connexion et le pied de page. Donc, si vous êtes prêt à commencer sur ce nouveau projet, faisons-le 44. logo: Bonjour et bienvenue au premier tutoriel pour notre projet de bord de mer. La première chose que nous allons faire est que nous allons créer notre logo design simple, donc cela ne va pas prendre beaucoup de temps pour concevoir. Alors allons-y et commençons. Donc, nous allons créer un nouveau document avec commande ou contrôle et la lettre, et nous allons le dimensionner 200 par 100. Nous voulons également définir la couleur d'arrière-plan en blanc clic, OK, et nous allons utiliser pour de nouvelles polices que nous n'avons pas encore utilisées. Et vous devrez peut-être les télécharger et les installer si vous voulez utiliser exactement les mêmes fonds. Sinon, c'est bon. Utilisez simplement la police que vous voulez. C' est juste pour l'entraînement. Donc, le 1er 1 est sur les polices Google. Il est polices dot google dot com, et c'est le plaisir que nous allons utiliser. Je ne sais pas comment le prononcer, mais il suffit d'aller de l'avant et de faire une recherche pour cette police à Google Fonts et l'autre est appelé une plaque de cuivre, et il peut être trouvé à polices geek dot com, et vous pouvez télécharger cette police pour gratuit une fois que vous avez téléchargé et installé. On va aller de l'avant et taper Seaside pour la première partie du logo. Mais d'abord, allons dans les options d'outil et tapez nos informations pour ce Funt. Donc je veux choisir la plaque de cuivre. Nous allons en faire 36 pour la taille et ensuite pour la couleur, nous allons utiliser cette couleur bleu foncé. Il suffit de taper ce numéro ici. Cliquez sur OK, puis allez-y et tapez Seaside. J' ai donc fait la première lettre dans une capitale. Les autres sont en minuscules. Même s'ils ressemblent à des capitales, ils sont un peu plus petits. Donc je vais aller de l'avant et sélectionner tout, et je vais en gras cette police aussi. Allons-y et mettons-le en place, puis nous allons reprendre notre textile, et ensuite nous allons taper le nom du prochain fonds que nous voulons utiliser. Faisons 20 pour la taille et nous allons utiliser la même couleur, donc il suffit de taper audio et vidéo dans tous les camps. Soyons audacieux aussi, et allons de l'avant et saisissons ce texte et déplacez-le sur des lignes avec le côté gauche et le côté droit du bord de mer. Allons-y et attrapons-le et déplaçons-le juste un peu parce que nous allons mettre une ligne qui divise à juste ici au milieu. Alors allons de l'avant et allumons nos GyNs, puis il suffit de placer un guide de chaque côté du texte, puis, avec votre sélection de rectangle, va de l'avant et dessiner une sélection. Et faisons la taille ou la hauteur deux pixels, attrapez votre seau. Outil de remplissage, même couleur bleue. Nous devons le remplir. Mais avant de pouvoir le faire, nous devons créer une nouvelle couche. Appelons cela diviseur de Select, puis utilisez votre outil de déplacement juste pour le déplacer vers le bas en position. Allons de l'avant et actionnons notre limite de couche d'affichage sous vue, puis allons recadrer le contenu de la couche , puis nous allons aller de l'avant et l'alignons avec notre outil de sélection de rectangle et notre outil d'alignement . Placons également le relatif à deux sélection, puis un milieu allongé de la cible. Allons de l'avant et attrapons notre couche audio et vidéo,et laissons tomber l'opacité un peu. Allons de l'avant et attrapons notre couche audio et vidéo, Descendez à environ 80 pour l'opacité. Cachons le gyn et allons de l'avant et placer cela à l'intérieur d'un nouveau groupe de calques aussi bien appelé logo. Et assurons également que nous sauvegardons ce fichier au cas où nous aurions besoin d'y apporter des modifications plus tard. Ensuite, nous voulons nous assurer que notre document de grille principale est ouvert afin que nous puissions commencer à partir d'une ardoise vierge pour notre nouveau design. Une fois que vous avez ouvert, vous allez saisir votre calque de groupe de logos et le faire glisser dans le document, puis le déplacer vers haut dans la section d'en-tête. C' est donc le début de l'en-tête. Notre logo est conçu, et nous allons compléter la partie de conception de l'en-tête dans le prochain tutoriel. 45. En-tête: Bonjour et bienvenue. D' accord, on va aller de l'avant et travailler sur notre en-tête ainsi que sur notre section héros parce qu'on doit créer un ingrédient qui soit transparent de l'en-tête jusqu'au héros. Donc on va aller de l'avant et créer l'arrière-plan du héros aussi. Donc, avant de créer ces arrière-plans, allons de l'avant et définissons la hauteur de l'en-tête et de la section héros, ainsi que les logos qui sont la preuve sociale qui ajoutent de la crédibilité à l'entreprise dans cette section héros également. Et nous allons ajouter des guides pour chacun d'eux. Donc, le 1er 1 nous allons cliquer et faire glisser un guide vers le bas jusqu'à 150 puis créer un autre guide et 550 et ensuite le dernier sera à 700. Alors allez-y et ajoutez ces trois guides et nous allons de l'avant et créer notre ingrédient. Allons de l'avant et créons un nouveau calque. Appelons ça l'ingrédient. D' accord. abord, nous devons définir notre couleur, donc je vais juste récupérer les couleurs du document que j'ai créé précédemment. Alors allez-y et tapez ce numéro pour l'orange vif, et vous devez définir cela à votre premier plan. Et puis pour la couleur de fond, ce sera cette couleur rose vif. Alors allez-y et tapez ce numéro ici. D' accord ? Une fois que vous avez eu ces couleurs réglées sur votre couleur de premier plan et d'arrière-plan, nous condamnons. Allez-y. Et Graham sont des outils d'ingrédients. Nous devons aller à l'éditeur de grille, qui est accessible en cliquant sur cette icône ici et puis ici et l' éditeur d'ingrédients , vous devez définir vos couleurs si elles ne sont pas automatiquement définies, et vous pouvez faire que par la droite, en cliquant et en sélectionnant le type de couleur gauche, en sélectionnant le premier plan, puis en cliquant à nouveau avec le bouton droit. Et pour le bon type de couleur, vous allez sélectionner la couleur de fond, puis pour notre triangle blanc juste ici. Nous voulons nous assurer que c'est au milieu, juste autour de 0,50 Donc approchez-vous de ce que vous pouvez, et ensuite nous pouvons créer notre ingrédient. On va commencer Argh ! Rayonnant en haut à gauche de l'en-tête. Et nous allons traîner jusqu'ici, en bas à droite de la section héros. Donc il suffit de cliquer, faites glisser relâcher et puis appuyez sur votre touche Entrée ou retour pour créer cet int gourmand. Et maintenant, c'est un identifiant de notre couche. Alors allons de l'avant et créons une séparation entre l'en-tête et la section héros en ajoutant une ombre portée. Pour ce faire, nous allons d'abord créer une sélection avec notre rectangle sélectionnable juste autour de l' en-tête. Nous allons copier cela avec commande ou contrôle et la lettre C, puis coller avec commande ou contrôle et la lettre V et vos calques piano. Vous allez obtenir une sélection flottante, clic droit et sélectionnez un nouveau calque. Ok, donc nous avons maintenant notre Grady int pour notre en-tête. Appelons ça un arrière-plan d'en-tête et changeons celui-ci en arrière-plan de héros. Assurez-vous que l'arrière-plan de l'en-tête est sélectionné car nous devons augmenter la limite de la couche de cette couche actuelle. moment, il est coupé ici, ce qui est très bien, si c'est tout ce dont nous avions besoin. Mais parce que nous avons besoin d'une ombre portée anti, elle ne va pas réellement apparaître parce que ces ombres portées vont descendre ici en dessous cette limite de couche, nous devons donc augmenter la limite de couche pour afficher l'ombre portée. Et nous pouvons le faire en allant jusqu'à plus tard et en sélectionnant le calque à la taille de l'image. Ok, maintenant on va filtrer la lumière et l'ombre et sélectionner l'ombre portée. Donc, à partir d'ici, vous pouvez déjà voir que l'ombre portée est appliquée. Ensuite, nous pouvons utiliser ces options ici pour personnaliser l'ombre portée. Si vous ne voyez pas l'ombre portée, assurez-vous que l'aperçu est activé afin que nous puissions augmenter la quantité d'ombre portée affichée via les curseurs X et Y. Et si vous avez les deux liés ensemble, vous pouvez les ajuster tous les deux en même temps. Donc, plus ou moins, je vais y aller moins. Je vais faire le tour de deux. Je vais aussi augmenter l'opacité pour le rendre plus sombre. Et je vais le faire juste autour d'un. Vous pouvez faire le vôtre comme vous le souhaitez. Je vais aller de l'avant et utiliser ces options ici et cliquer. D' accord. Et maintenant, nous avons notre séparation entre l'en-tête dans la section héros. Ok, donc la prochaine chose que nous devons faire est de définir l'int Grady. Donc, il n'apparaît que dans la section héros et pas dans le reste du document. allons donc nous assurer que notre histoire de héros est sélectionnée. Et puis on va faire une sélection autour de cette sélection de héros. Et puis nous allons monter pour sélectionner et sélectionner Inverser et Net inverser la sélection afin qu'il sélectionne tout sauf la section héros. Nous avons donc l'en-tête sélectionné et nous avons le reste du document sélectionné. Donc maintenant, nous allons créer un masque de calque, remplir avec du blanc, puis nous devons nous assurer que nous avons le noir défini sur la couleur d'arrière-plan, puis appuyez sur votre touche de suppression ou de retour arrière pour supprimer cet int Grady du reste du document. Maintenant, bien sûr, cela n'a pas vraiment fait de différence ici parce que nous avons notre fond d'en-tête là-bas aussi . Allons de l'avant dans de select avec commande ou contrôle et la lettre D Let's Haider guide un instant. Notre en-tête et une partie de notre section héros sont maintenant définis avec ce radiant, et il est transparent. part cette ombre portée qui les sépare. Les couleurs sont transparentes. Allons de l'avant et déplacons notre logo vers le haut et allons de l'avant et alignons directement au centre dans cet en-tête de haut en bas. Assurez-vous également qu'il est aligné à gauche de la colonne. Si ce n'est pas le cas, prenez votre outil de déplacement. Assurez-vous que vous avez déplacé le calque actif sélectionné. Cliquez dessus, puis déplacez-le dans des positions sur la ligne vers la première colonne de la grille. Allez-y et éteignez la grille. Je vais garder ça au sommet pour l'instant, donc j'ai un accès facile. Ok, prenons notre calque local maintenant et notre outil de sélection de rectangle et faisons une sélection. Je vais prendre mon outil d'illumination avec la lettre A et je vais cliquer sur mon logo. Je vais définir par rapport à la sélection, puis une ligne au milieu de la cible. Donc maintenant, il est uniformément espacé entre le haut et le bas. D' accord, allons de l'avant et travaillons sur notre navigation ensuite. Nous l'avons déjà fait plusieurs fois, et nous allons essentiellement utiliser le même concept que nous avons utilisé dans les conceptions précédentes en ajoutant cinq espaces après chaque élément de menu, le copiant et en le collant à la fin des autres. Donc, avec votre outil de texte, permet d'aller dans deux options et de définir la police de chemin de fer de la taille à 24 la couleur orteil blanc. Et vous voulez également vous assurer que l'espacement est réinitialisé à zéro car nous ne voulons pas d'espacement supplémentaire entre les lettres pour notre navigation. Et allons-y et tapons-le. Kate. Ensuite, nous devons créer notre icône de hamburger, donc nous allons le faire avec notre outil de sélection de rectangle. Nous allons également créer un nouveau calque appelé Hamburger, puis pour la taille que nous allons faire 30 par huit. Et puis nous allons utiliser notre outil seau pour remplir cela avec un appareil photo blanc et zoomer juste un peu et de sélectionner. Et avant d'oublier, passons au calque et sélectionnons recadrer au contenu et dupliquons ce calque deux fois avec votre outil de déplacement. On va juste les mettre en position. Ok, prenons notre outil d'alignement avec la lettre. Une prise sur votre touche de changement. Sélectionnez tous les ensembles relatifs au premier élément par rapport au premier élément et à une ligne à gauche. L' autre chose que nous voulons faire est de distribuer et même la quantité d'espace entre chacun d' eux aussi. Alors faisons défiler vers le bas et définissez le décalage. Pourquoi ? À 12, puis sélectionnez cette option ici pour répartir l'espace entre eux. Allons de l'avant et sélectionnons la couche supérieure, non ? Cliquez sur et sélectionnez. Fusionner vers le bas, puis le faire une fois de plus et cela prend les trois de ces couches et combine en remorquage. Un. D' accord, allons de l'avant et prenons nos nouveaux éléments ici et les aligner sur le côté droit de notre colonne ici. Ensuite, nous allons l'aligner vers le haut en bas avec leur outil de sélection de rectangle et notre outil d'alignement. Nous avons aussi besoin d'un gramme, notre navigation le retirera si nécessaire. Et puis on va juste déplacer ça à côté de notre icône de hamburger juste là. Et parce que j'ai ajouté ces cinq espaces à la fin du contact, je peux voir la limite de la couche juste ici. Et cela me donne un espace égal entre chacun des mots et le hamburger. Je viens. D' accord. Je vais aller de l'avant et saisir à nouveau mon outil de sélection de rectangle afin que je puisse aligner la navigation directement au centre de haut en bas. Ok, tout est à sa place. La dernière chose que nous devons faire est et une icône d'état de survol pour représenter ce qui se passe lorsque vous cliquez sur l'icône de hamburger parce que la navigation elle-même sera masquée jusqu'à ce que vous cliquiez dessus. Donc ce qu'on va faire, c'est qu'on va aller au fichier précédent sur lequel on a travaillé, et on va récupérer l'icône de ce document plutôt qu'essayer de le retrouver en ligne. Donc je vais juste le localiser. Il va à la section F A Q, puis cliquez et faites glisser ce calque vers notre document actuel, déplacez-le en position et c'est qu'elle a déplacé cette icône au-dessus du calque hamburger doit renommer ceci. Je vais enlever la copie, et ensuite on doit juste organiser nos couches. Donc, continuons et créons un nouveau groupe de couches pour l'en-tête et c'est tout. Notre section d'en-tête est maintenant terminée. Bon, donc dans le prochain tutoriel, nous allons de l'avant et créer notre section héros et les logos pour la preuve sociale 46. Héros,: Bonjour et bienvenue. On va aller de l'avant et travailler sur notre section héros et finir la conception de cette partie duprojet. On va aller de l'avant et travailler sur notre section héros et finir la conception de cette partie du Ça va être très simple. Nous allons ajouter du texte et des logos pour notre preuve sociale et ajouter une certaine crédibilité à l'audio et à la vidéo en bord de mer. Donc, la première chose que nous devons faire est de trouver des logos, logos ou bien bien. Je viens de choisir cinq logos aléatoires qui pourraient avoir besoin des services d'un professionnel de l'audio et de la vidéo . Ça n'a pas à être le même logo. Faites simplement une recherche d'images Google pour certains logos, téléchargez-les, puis ajoutez-les à votre document. Parce que tout ce que nous allons faire est de les aligner sur notre outil d'alignement et de continuer pratiquer avec certains des outils que nous allons devoir utiliser en tant que concepteur Web. Donc, une fois que vous les avez téléchargés et ajoutés à votre document, nous pouvons aller de l'avant et commencer. Je vais allumer mes guides et prendre mon outil de déplacement, et je vais sélectionner le premier logo et l'aligner sur la colonne de gauche. Ensuite, je vais prendre mon dernier logo et l'aligner sur le côté droit et ça s'aligne avec icône du hamburger ici et celui-ci avec le logo ici. Ensuite, déplacons simplement les trois autres en position. Maintenant, l'autre chose que vous devrez peut-être faire est de redimensionner vos logos. Donc, mes logos, je suis qualifié avec le décalage de l'outil d'échelle plus s, et je redimensionne la hauteur à 75 pixels. Maintenant, si vous avez un logo comme celui-ci ici, il n'est pas nécessaire de le redimensionner à 75 pour la hauteur car la largeur va être beaucoup, beaucoup plus large qu'elle ne l'est maintenant. Donc je vais juste laisser celui-ci comme il est, et je vais juste l'aligner au centre de la colonne de toute façon et puis répartir uniformément la quantité d'espace entre eux. Tellement simple. Alors allons de l'avant et faisons cet alignement d'abord, où il est aligné dans cette zone ici de haut en bas. Donc nous allons faire notre sélection avec notre outil de sélection de rectangle. On va prendre notre outil d'alignement avec la lettre A et je vais cliquer sur ce premier logo. ne semble pas que cela va me permettre de le sélectionner, donc je dois peut-être désactiver l'en-tête. Alors essayons ça. On y va. Maintenant que j'ai que j'ai sélectionné quatre par rapport à, et puis je peux sélectionner une ligne au milieu de la cible. Ok, je vais aller de l'avant et faire ça pour chacun des autres logos aussi. Ok, je vais revenir au premier élément, puis je vais sélectionner mon premier logo avec mon outil d'alignement, puis je vais maintenir ma touche Maj enfoncée pour sélectionner les autres logos. Ok, tu sais probablement ce qui se passe ensuite. C' est vrai. Nous allons distribuer, et ensuite nous devons nous assurer que nous avons nos paramètres pour l'ensemble X et y correctement. Je vais revenir à zéro. Je ne suis pas tout à fait sûr de ce dont j'ai besoin pour l'ex, donc je vais essayer 250 et puis je vais sélectionner cette option ici. Maintenant. Le problème est que cela ne nous a pas donné une quantité égale d'espace entre le logo h. Parfois, ça va arriver. En fonction du calque, de la taille de ces calques et du nombre de calques que vous avez sélectionnés , il ne vous donnera pas toujours exactement ce que vous voulez. Je vais annuler ça avec Commandant Control et la lettre Z. Alors, que pouvons-nous faire pour aligner ces logos de manière égale entre eux ? Eh bien, au lieu d'utiliser la distribution, nous pouvons aligner ce logo au centre et ensuite utiliser notre outil de sélection pour aligner ce logo entre ces deux et ensuite ce logo entre ces deux et cela va toujours nous donner un montant égal de distribution. Ce ne sera pas exactement la même quantité, mais ils seront plus symétriques et plus proches d'être uniformément répartis de cette façon. Et c'est parce que ce logo ici est plus long que celui-ci, et il aura plus ou moins de base que l'autre. Alors allons de l'avant et saisissons notre logo du milieu avec notre outil d'alignement. Nous allons monter et sélectionner l'image et ensuite un centre de cible couché pour l'aligner directement au centre de notre document, la largeur de notre document. Donc maintenant, nous pouvons aller à notre outil de sélection et faire une sélection entre les deux, puis nous pouvons saisir ce logo, changer à la sélection puis l'aligner au centre de cette sélection. Maintenant, nous pouvons faire la même chose avec ce logo ici avec notre outil de sélection de select avec Commander Control nd et désactiver les guides. Et maintenant tout est parfaitement aligné. Ok, la prochaine chose que nous devons faire est et une ombre portée qui correspond à l'ombre portée que nous avons placée dans son en-tête. Alors allons-y et faisons-le. Retournons nos guides. Faisons notre sélection autour de cette section. Je vais sélectionner mon calque d'arrière-plan car je veux que l'arrière-plan reste blanc. Nous allons le copier avec le Commandant Contrôle et voir et payer avec le Commandant Contrôle. L' envie. Peut-on avoir une sélection flottante ? Nous allons donc ajouter cela à un nouveau calque. Déplaçons ça vers le haut. C' est ce qu'on appelle la preuve sociale. Allons au calque et sélectionnons le calque à la taille de l'image, et maintenant nous pouvons aller vers le haut et sélectionner les filtres, lumière et l'ombre portée et l'ombre portée pour créer cette ombre portée pour correspondre à celle précédemment. Maintenant, nous aurions dû écrire les nombres exacts que nous avons utilisés précédemment parce que cela va par défaut aux paramètres par défaut, et je ne me souviens pas du nombre exact que j'ai utilisé pour le X et le Y, Et l'opacité que je connais est assez proche à un pour l'opacité. Mais je ne suis pas sûr de ça, mais c'est assez proche pour l'instant. Rappelez-vous donc qu'à l'avenir, si vous allez utiliser une ombre portée plusieurs fois dans un document, il est préférable d'avoir exactement les mêmes chiffres. Donc, vous avez exactement la même ombre dans tout le document. Ok, je vais y aller et cliquer. OK, donc nous avons notre clou d'ombre portée, et nous avons la séparation entre cette section et cette section ici. Le seul problème est que nous avons une ombre portée au-dessus. Donc, ce que je vais faire est que je vais faire une sélection avec le rectangle sélectionnable qui exclut cette navette de dépôt. Mais nous voulons nous assurer que nous sélectionnons l'ombre déroulante ici. Ensuite, lorsque nous montons au rognage de couche à la sélection, cela va recadrer cette limite de couche et supprimer l'ombre portée au-dessus de cette barre. On ne veut pas que ce bar soit au-dessus parce que ça va être trop de séparation. Donc nous avons notre section héros et notre séparation d'ici et d'ici et maintenant nous avons juste besoin d' ajouter notre texte. Alors attrapons notre outil de texte et changeons la police en plaque de cuivre. On va faire 15 pour la taille et ensuite pour la couleur, on va choisir ce clic de couleur bleu foncé. OK, allons nous assurer que tout est réglé à zéro ici, et ensuite nous pouvons aller de l'avant et taper la première ligne, sélectionner tout et faire gras. Donc c'est un peu trop grand. Je veux m'assurer que je reste dans le côté gauche de la première colonne et le côté droit de la dernière colonne, donc je vais prendre mon textile à nouveau, sélectionner à la main tout et changer la taille jusqu'à ce qu'il corresponde à ces limites. Alors essayons 107 assez près. Donc, le texte pour sélectionner à nouveau tout et il semble que 105 va être parfait. Et puis sur une deuxième ligne avec notre outil de texte va taper une réalité. Faisons en sorte qu'il soit audacieux à ce sujet. Allons-y et mettons-les dans un nouveau groupe de calques. C' est ce qu'on appelle du contenu de héros, et ensuite on va faire notre sélection dans ce domaine. Donc, ici et puis avec notre outil d'alignement va aller de l'avant et le sélectionner. Mais allons-y et éteignons tout le reste. C' est au-dessus. On peut vraiment l'attraper. Et puis une ligne vers le centre de sélection et le milieu de Target est venu dans un de select retourné tous ces derniers et cela organisé sont des couches juste un peu ici. Je vais créer un nouveau groupe de couches appelé Social Proof, et nous allons mettre tous nos logos à l'intérieur d'ici. Et puis un nouveau groupe de couches appelé Hero et c'est tout. Notre section de héros est maintenant terminée. Le prochain tutoriel commencera à travailler sur la première partie du corps, Donc, si vous êtes prêt à commencer là-dessus, eh bien, faisons-le. 47. Services corporatifs Partie 1: Bonjour et bienvenue. Donc la prochaine partie de notre projet de conception est de créer quatre colonnes d'informations pour aider à vendre les services de ses clients à leurs prospects. Donc la prochaine partie de notre projet de conception est de créer quatre colonnes d'informations pour aider à Donc nous allons diviser quatre sections différentes uniformément sur trois colonnes de notre grille. Nous allons ajouter un titre et quelques informations qui seront un extrait de ce que ce service est tout au sujet. Et puis, si cela attire le prospect, ils peuvent cliquer sur le titre ou l'image pour accéder à la page Événements en direct ou à la page Productions vidéo pour en savoir plus sur les types de services particuliers qu'ils sont intéressé par. Et quand les images vont, on va les placer dans un cercle et une ombre portée, créer un trait, créer un trait, et en ce qui concerne les images réelles que j'ai utilisées, j'utilise juste quelques images de stock d'obturateur. Nous pouvons voir le filigrane sur les images, signifie simplement que les images sont protégées par le droit d'auteur. Et comme vous le savez, pour les utiliser sur un site de vie, vous devez acheter la licence complète de ces images et ensuite obtenir le remboursement de vos clients. Donc, si vous voulez télécharger exactement les mêmes images. Allez à obturateur stock dot com et tapez ce numéro dans la recherche du premier article. Ce numéro pour la deuxième image, puis cette photo I d pour cette image. Et puis enfin, cette photo que j'ai pour cette image. Donc on va aller de l'avant et cliquer sur cette petite loupe, clic droit, sélectionner copier l'image et la coller dans nos documents. Ok, allons-y et faisons-le pour chacune des images. J' ai une sélection flottante pour celle-ci, donc je vais faire un clic droit et sélectionner Nouveau calque. Ok, renommons ça. Je vais appeler celle-là Consultations, productions audio vidéo en direct et événements en direct. Je vais aussi réorganiser l'ordre qu'ils sont dans veulent des événements en direct d'abord celui-ci ensuite , puis ce 1/3. Ok, maintenant nous avons nos images. Nous devons aller de l'avant et commencer à les redimensionner en fonction du nombre de colonnes que nous avons et du nombre d'images. Donc nous avons 12 colonnes avec quatre images, donc nous allons les faire trois colonnes de large. Prenons donc nos outils de mesure afin que nous puissions savoir combien de pixels de large. Nous devons faire nos images, et il ressemble à 275 pixels de large. Je vais donc redimensionner mes images pour qu'elles soient un peu plus grandes que ça. Donc, faisons en fait 300 pixels de haut. Prenons donc notre outil de balance avec Shift Plus s. Assurez-vous qu'ils sont reliés ensemble et sélectionnons 300 pour la hauteur. Et faisons ça pour chacune des images. Ok, avec enlevé dit juste les déplacer en position ici. En fait, que l'on devrait être d'abord cette seconde main, ce 1/3. D' accord. C' était la partie facile. Maintenant vient le truc amusant. Donc, notre prochaine étape est de créer des cercles pour placer nos images dans et remorquer. Ajoutez des ombres portées à eux aussi. Allons de l'avant et désactivez d'abord nos sections héros et en-tête, puis attrapez votre outil Ellipse dans les options de l'outil. Assurez-vous que vous avez un rapport d'aspect fixe sélectionné, et nous voulons faire notre cercle trois colonnes de large, alors il suffit de dessiner un cercle et nous savons que la taille est à 75. Donc, tapez cela et puis créez un nouveau calque appelé cercle, puis avec notre outil de remplissage de seau , nous allons le remplir avec du blanc, puis de sélectionner. Modifions également la limite du calque en allant jusqu'au calque et en sélectionnant rogner le contenu. Et maintenant, nous allons créer un deuxième cercle qui tiendra notre image. Nous allons également rendre ce cercle plus petit afin que, lorsqu'il s'insère à l'intérieur de ce cercle, le cercle inférieur crée notre coup de poids pour nous. Alors allons de l'avant et tapons à 65. Pour la taille, nous allons créer un nouveau calque appelé Image Circle, et ensuite nous allons le remplir avec du blanc. Nous devons également recadrer le contenu hors de la limite du calque, puis avec notre outil « boiteux », nous allons cliquer sur le premier calque. Holden, votre touche Maj et cliquez sur la deuxième couche. Ensuite, nous voulons définir par rapport au premier élément et aligner le centre et le milieu de la cible . Et maintenant notre cercle d'image est au centre du cercle inférieur. Ok, éteignons le cercle M. On va attraper cette couche de cercle. Nous allons revenir au calque et sélectionner le calque à la taille de l'image parce que je veux ajouter une ombre portée à ce calque. Et si nous n'augmentons pas la limite de la couche que cela, ombres portées ne s'afficheront pas comme nous l'avions dit dans les sections précédentes. Allons donc aux filtres de la lumière et de l'ombre portée, puis ajustons pour correspondre à vos autres sections. Ou au moins, obtenez-le proche parce qu'il ne se souvient toujours pas de ce que j'ai utilisé. Je pense que c'était quelque chose comme ça et puis, pour mon opacité était 1.6 Maintenant, nous pouvons revenir à la couche et recadrer au contenu à nouveau et activer votre cercle d'image. Ok, mettons-nous notre image à l'intérieur de ce cercle. Maintenant, nous allons capturer des événements en direct et les déplacer vers le haut, et aussi utiliser votre outil de déplacement pour le déplacer sur ce cercle. Maintenant, je veux composer cette image d'une certaine manière afin que le premier plan soit au centre du cercle. C' est difficile de déterminer comment faire ça quand on ne voit pas notre cercle. Mais si nous cliquons sur le cercle, nous voyons la limite du calque, puis avec choisir un calque ou un guide sélectionné avec notre outil de déplacement, nous pouvons cliquer sur l'image puis la positionner à l'intérieur de la limite du calque que nous pouvons voir. Une fois qu'on a lâché. Il disparaîtra, et nous ne pouvons plus déterminer la composition à moins que nous cliquions sur ce cercle d'image et recommençons. Je vais aller avec ça. C' est bien avec moi. Maintenant, je vais prendre ma sélection floue. Vous allez vous assurer que votre cercle d'image est sélectionné et cliquez au centre pour effectuer une sélection pour cette forme. Allons de l'avant et inverser la sélection aux événements en direct. Ajoutez un masque de calque avec du blanc, assurez-vous que le noir est réglé sur l'arrière-plan, puis appuyez sur Supprimer ou sur votre touche de retour arrière et boom  ! Votre image est maintenant confinée à cette forme. C' est cool ? J' adore ça. D' accord. C' est plutôt génial. D' accord, allons de l'avant et allons dans Image Circle et créons un nouveau groupe de calques appelé Cercles. Mettons les deux à l'intérieur, et maintenant tout ce que nous avons à faire est de dupliquer trois fois pour les autres images. Je vais saisir mon outil de déplacement, déplacer le lier actif, et je vais le déplacer vers l'extrême droite, et je dois aussi déplacer ce calque de groupe vers le bas pour que j'aie tout dans le bon ordre. Faisons ce 3ème 1 et puis celui-ci sera le 2ème 1 Et renommons ces cercles un à quatre. Maintenant, nous allons de l'avant et créons un nouveau groupe de calques pour les événements en direct et les cercles. Appelons cela Image 1, et allons de l'avant et allumons nos guides, puis nous allons déplacer ce calque de groupe pour qu'il s'aligne à gauche de la première colonne . Donc juste il devrait y avoir du bon pour l'instant. Et puis on va prendre nos autres cercles et les placer là où ils devraient être. Et celui-ci devrait être dans la quatrième colonne le long du côté gauche. Et allons de l'avant et mettons-les en position aussi. Maintenant, déplacons nos images en position selon l'endroit où se trouve leur cercle. Je vais désactiver tous les cercles qui n'ont pas encore été travaillés, et nous allons limiter notre image à cette forme. Maintenant, nous allons sélectionner un cercle, choisir un calque notre guide, puis déplacer votre image en place. Maintenant, nous avons juste besoin de saisir notreoutil de sélection floue, outil de sélection floue, faire une sélection en verdoyant, puis ajouter un masque de calque à la touche de suppression de l'image ou de retour arrière, puis la sélection. Ok, donc on doit juste répéter ça deux fois de plus. Ok, allons de l'avant et ajoutons de nouveaux groupes de calques pour chacun de ces cercles. Maintenant, avec notre outil Lehman, nous allons tous les aligner au sommet. Sélectionnez donc votre 1ère touche Maj et cliquez sur les autres. Premier élément fixe et une ligne vers le haut. Bon, donc nous avons encore beaucoup à faire. Nous devons ajouter nos titres dans nos paragraphes, mais les tutoriels deviennent un peu long. Alors allons de l'avant et continuons le reste de cette section dans le prochain tutoriel. 48. Services corporatifs partie 2: Bonjour et bienvenue. D' accord, on va aller de l'avant et finir cette partie de notre section de corps. Nous allons ajouter du contenu, un alignement d'arrière-plan, tout organisé, sont des couches et sera bon à aller. Alors allons de l'avant et commençons avec notre outil de texte. Et changeons le funt. Je vais le rendre audacieux et en faire 24 pour la taille. Et je veux la couleur bleu foncé pour ces gros titres. Alors allons-y et tapons-les. Maintenant, si j'appuie sur ma touche d'échappement, cela me sortira de cette zone de texte et ensuite je peux aller de l'avant et prendre un autre outil sans ajouter ce raccourci particulier à la zone de texte. Ok, laissons Paul toutes ces couches dehors. Organisons-les également pour qu'ils soient dans le bon ordre. Ensuite, nous allons aller de l'avant et retourner notre grille et utiliser notre outil de sélection de rectangle et notre outil d'alignement pour l'aligner au centre de ces trois colonnes. Allons de l'avant et éteignons également notre section héros et en-tête, afin que nous puissions aller de l'avant et aligner cela et nous devons le remettre à la sélection puis un centre de ligne de cible. Allons de l'avant et faisons la même chose pour les trois autres titres. Bon, allons de l'avant et attrapons chacune des couches. Nous ferons dans votre vaisseau, K sélectionner les quatre, puis une ligne vers le haut. Allons-y et mettons-les dans un nouveau groupe de calques aussi bien appelé les titres. Je vais aller de l'avant et l'attraper aussi, pour que je puisse juste le déplacer un peu, juste pour zoomer. Donc ce que je veux faire, c'est que je veux juste déplacer ça sans l'éloigner de là où c'est censé être. Il est donc toujours centré entre les colonnes. Je vais juste ajouter un guide ici. De cette façon, je peux juste le placer le long de ce guide. D' accord ? Je peux aller de l'avant et enlever ce gars maintenant parce que je n'en ai plus besoin, moins pour le moment. Donc, pour notre paragraphe, nous allons juste prendre un texte factice. On n'a pas besoin de beaucoup. Je vais juste prendre quelques lignes ici, copier, et puis avec mon outil de texte, je vais créer une zone de texte et ensuite la coller. Nous devons également changer la police elle-même. Donc je vais tout sélectionner et changer pour Georgia 12 pour la taille, et ensuite nous allons utiliser la couleur gris foncé que nous avons utilisée précédemment. Je vais juste apporter ça un peu pour qu'il s'harmonise avec notre texte ici et ici. Et puis dans nos options d'outils, nous pouvons sélectionner justifié à gauche et à droite pour le remplir. Je vais juste l'augmenter des deux côtés juste un peu. Et maintenant tout est la ligne juste là. D' accord, sortons de là en appuyant sur notre clé d'échappement, et nous allons aller de l'avant et zoomer et dupliquer ce paragraphe trois fois. Sortons le groupe des titres et continuons de le dupliquer, puis déplace-les . Allons-y et remettons-nous notre grille. Et la ligne est des paragraphes au centre de ces trois colonnes, comme nous l'avons fait avant. Bon, maintenons la touche Maj enfoncée et sélectionnons tous les calques pour que nous puissions les aligner vers le haut. Allons-y et mettons-les en ordre, puis renommez-les paragraphes un à quatre. Très bien, nous devons ajouter un peu d'espace entre les paragraphes et nos images ici. Alors allons de l'avant et mesurons la distance entre ici et ici. J' ai donc 21 pixels. Je vais ajouter la même quantité d'espace ici, allons-y et son guide. Et puis on peut prendre nos images ici. Mettons-les tous les quatre dans un nouveau groupe de couches, accord ? Il nous reste juste quelques choses à faire, et c'est pour organiser nos couches un peu. Et puis nous devons prendre tout ce contenu et l'aligner directement au centre de nos services arrière-plan de haut en bas. Allons de l'avant et attraper notre couche de repos de paire et créer un nouveau groupe précédent pour mettre tout à l'intérieur de celui-ci a été appelé Body Services et ensuite nous allons mettre tout ce contenu à l'intérieur, sauf pour l'arrière-plan des services. Laissons ça dehors pour un instant. Maintenant, afin d'aligner cela, si nous sélectionnons cette couche de services de corps, vous remarquerez la limite de la couche et nous pouvons voir qu'il y a beaucoup d'espace blanc ou espace vide ici, et il y a aucun en haut. Donc, quand nous allons aligner cela avec notre outil d'alignement, il ne va pas le centrer parfaitement au milieu de notre cible. En raison de cet espace supplémentaire, il y aura plus d'espace dans les cheveux qu'ici. Donc, comme vous le savez, ce que nous pouvons faire est que nous pouvons recadrer la limite du calque pour s'adapter juste sous nos images juste ici. Le seul problème est, comme vous le savez, qu'il va découper cette ombre portée, puis quand vous allez augmenter la limite du calque, les ombres portées ne reviendront pas. Donc, en effet, quand vous le recadrez, cela va effacer le fond des ombres portées. Et nous ne voulons pas ça parce que ça va supprimer cet effet visuel. Alors voici comment on va contourner ça. Nous allons aller de l'avant et dupliquer ce joueur de groupe et éteindre l'original. Maintenant, nous pouvons aller dans ce calque de groupe et trouver toutes les couches trop hautes, puis recadrer le contenu au bas des cercles, et ensuite nous pouvons utiliser notre outil d'alignement d'orteils, haut en bas. Ensuite, nous pouvons saisir notre couche d'autres groupes, le retourner et le déplacer manuellement en position et il sera parfaitement aligné. Donc vous avez juste un peu de travail à faire. On va aller à l'intérieur d'ici. On va trouver nos images. Allons au 1er 1 et choisissons notre cercle inférieur et nous pourrions voir que la limite de la couche est en dessous du cercle. Maintenant, si on passe à la couche et sélectionne du contenu recadré, on va recevoir un message. Mais en disant qu'il est déjà recadré à son contenu. Et c'est à cause de cette ombre portée, les ombres portées sont en fait mises en plumes jusqu'au bord juste ici. Donc, ce que nous devons faire est que nous devons définir manuellement la limite de la couche sur le bord du cercle lui-même. Et nous pouvons le faire avec notre outil de sélection de rectangle. Et je ne suis pas vraiment inquiet pour les côtés. Donc, je vais juste commencer ici et ramener la sélection au bas de ce cercle, puis nous pouvons aller à la couche et sélectionner rogner à la sélection de select et maintenant nous l'avons exactement là où nous le voulons. Nous devons donc le faire pour chacun des cercles. Allons donc aux trois autres groupes de calques et faisons la même chose. Allons de l'avant et éteignons notre section héros si vous l'avez allumée et qu'on dirait qu'on a réduit la quantité d'espace. Allons de l'avant et éteignons notre section héros si vous l'avez allumée et qu'on dirait qu' Mais nous avons encore de l'espace là-bas, et c'est probablement à cause des images ou des autres cercles. Donc, revenons à l'intérieur d'eux et cliquez sur chaque calque, de sorte qu'il semble que le calque d'image soit un peu plus bas là. Ce cercle va bien, alors on va aller de l'avant et faire la même chose pour chacune des images aussi. Bon, allons de l'avant et attrapons nos outils de sélection de rectangle afin que nous puissions faire une sélection à la hauteur de notre arrière-plan. N' oubliez nous ne pouvons pas sélectionner l'arrière-plan des services car la limite de la couche est trop grande, et si nous la rognons à nouveau, nous allons supprimer cette ombre portée. Il est donc plus facile de faire une sélection, puis d'utiliser notre outil boiteux. Attrapez-le par rapport à la sélection, puis une ligne au milieu de la cible K. Allez-y et sélectionnez Activer votre autre calque de groupe, puis avec votre outil de déplacement. Allez-y et cliquez dessus, puis utilisez vos touches fléchées pour le déplacer vers le bas. Allons de l'avant et supprimons les services du corps. Copie et boom. Il est maintenant parfaitement aligné de haut en bas. C' est cool ? Bon, donc c'est ton travail pour des situations comme ça. Et nous avons juste besoin de mettre notre couche d'arrière-plan de services à l'intérieur de cette couche de groupe, et nous avons tous fini avec cette section de son corps. Félicitations. D' accord. Dans le prochain tutoriel, on va aller de l'avant et commencer à travailler sur la partie des échantillons audio du corps. 49. Partie audio: bonjour et bienvenue. Donc, la prochaine partie de notre projet est de créer la section des échantillons audio et vidéo, et nous avons beaucoup de travail à faire. Donc nous allons probablement diviser ça en trois, peut-être quatre conférences différentes. Et dans ce tutoriel, nous allons aller de l'avant et commencer à saisir nos images, peut-être faire quelques boutons sur un texte et puis dans le prochain tutoriel, commencerons à tout mettre ensemble. Alors allons de l'avant et commençons par créer notre titre initial pour cette section. Changons la police en plaque de cuivre et la taille à 48 puis la couleur bleu foncé est bien pour cela aussi. Et puis allez-y et tapez ce qui suit. Je vais tout sélectionner et le rendre audacieux aussi. Je ne m'inquiète pas de m'aligner en ce moment. On va aller de l'avant et le faire dans le prochain tutoriel, donc je vais juste le déplacer ici pour l'instant. L' autre chose que nous devons faire est d'augmenter la taille de la toile parce que nous manquons de place. Alors passons à la taille de la toile de l'image et faisons 5000 pour la hauteur assurez-vous qu'il est déverrouillé, puis cliquez sur redimensionner. Donc l'autre chose que je dois faire est que je dois saisir mon calque d'arrière-plan ici, appuyer sur la lettre D que la lettre X qui nous donne du blanc pour le premier plan, puis avec notre outil de remplissage de seau, nous pouvons le remplir. Mais nous devons d'abord aller au calque et sélectionner le calque à la taille de l'image pour changer la limite du délai. Et maintenant, nous pouvons aller de l'avant et remplir ça avec du poids. Allons de l'avant et créons notre arrière-plan pour notre section audio. Donc, dans la section audio, nous avons réellement des arrière-plans parce que nous avons une ombre portée séparant la liste de lecture supérieure de la liste de lecture inférieure. Nous allons donc créer deux formes pour l'arrière-plan. Alors prenez votre rectangle sélectionnable et assurez-vous que vous avez corrigé désactivé, puis cliquez sur et dessinez une forme parce que nous allons faire une taille personnalisée de 11 76 par 830 puis avec commande ou contrôle et la lettre C. Nous allons assurez-vous que votre calque d'arrière-plan est toujours sélectionné, puis commande ou contrôle, et la lettre V pour le coller correctement. Cliquez sur votre sélection flottante ici et sélectionnez un nouveau calque. Ok, je vais juste utiliser mon outil de déplacement pour le déplacer un peu. Et je veux également changer la limite du calque pour s'adapter à l'image car nous devons ajouter une ombre portée. Allons donc au calque deux, taille de l'image. Allons de l'avant et faisons nos filtres d'ombre de drogue, Layton Shadow et ombre portée. On va faire une autre boîte pour la partie supérieure de la playlist. Donc, revenez au rectangle sélectionnable. Et cette fois, nous allons en faire 11. 76 pour le avec et 360 pour la hauteur. Assurez-vous que nous avons notre sélection à l'intérieur de notre document. Revenez à votre calque d'arrière-plan copiez et collez à nouveau, puis faites un clic droit sur le nouveau calque. Augmentez à nouveau la taille des limites du calque, puis ajoutez une ombre portée à ce calque. Déplaçons également ce calque au-dessus de l'autre calque et renommons l'arrière-plan de la playlist supérieure en arrière-plan d'échantillon audio. On peut aller de l'avant et prendre ce haut et le déplacer. Maintenant, vous pouvez remarquer que l'ombre portée est beaucoup plus sombre ici, ici et ici par rapport à ici dans ces zones. Et c'est parce qu'on met une autre ombre portée sur une autre ombre portée, donc ça la rend plus sombre. Allons-y et réparons ça. On va prendre notre outil de sélection de rectangle et faire une sélection. Je dois m'assurer que je reçois le plus grand mal de cette ombre portée. Donc c'est juste au-dessus. Ensuite, nous allons créer un masque de calque blanc, assurez-vous que le noir est défini sur l'arrière-plan, puis supprimer ou revenir à la touche. Ainsi, cela supprime l'ombre portée des côtés. Nous avons encore un peu plus ici, donc nous allons aller de l'avant et Graham est juste outil de sélection de picotements ici à nouveau pour aller le long des panneaux et ensuite nous allons le supprimer de là aussi. Et puis la même chose sur le côté. Ok, nous avons nos ombres portées dans notre jeu d'arrière-plan. Allons de l'avant et prenons quelques images. Donc, la première chose que nous allons faire est de faire une recherche Google pour un logo de nuage sonore. Je vais sélectionner celui-ci ici est 300 par 300 c'est un fichier PNG, alors assurez-vous que vous avez un fichier PNG, puis faites un clic droit sur l'image, copiez l'image, puis allez-y et collez-le avec Commander Control et la lettre V , puis sur le sélection flottante, sélectionnez un nouveau calque. Et puis nous obtenons un petit message d'air disant qu'il appartient à la couche Mass parce que c'est ce que j'avais sélectionné avant de coller. Donc on ne veut pas faire ça. Et je voulais juste vous montrer qu'au cas où vous auriez ce problème maintenant ou à l'avenir, je vais aller de l'avant et annuler ça avec le Commandant Contrôle et les lettres. R. Ainsi, lorsque vous collez à partir de votre Presse-papiers, vous ne souhaitez pas avoir de masque de calque ou de calque plus petit que l'élément que vous collez. Donc, la meilleure chose à faire est de saisir votre calque d'arrière-plan car il a une limite de couche beaucoup plus grande que notre image. Ensuite, nous pouvons accélérer cela et l'ajouter à un nouveau calque, puis nous avons juste besoin de déplacer ce calque au-dessus de tout le reste pour que nous puissions le voir. Renommons ce logo et allons de l'avant et déplacons-le en haut, non ? On va prendre toutes nos images, et on les mettra à l'échelle dans une minute. Ou peut-être dans le prochain tutoriel, nous verrons combien de temps ce tutoriel va durer. Bon, on va aller de l'avant et prendre six images. Nous allons aller à soundcloud dot com forward slash bord de mer Dash audio, puis nous allons faire défiler un peu vers le bas. Et pour la première image, nous allons sélectionner celle-ci. Le seul problème est que lorsque nous faisons un clic droit, il n'y a pas d'option pour copier cette image. Laissez-moi vous montrer comment vous pouvez toujours obtenir cette image même si elle n'est pas disponible dans ce menu . Donc ici, nous avons un article qui dit « Inspecter ». Je crois qu'on en a déjà parlé. Dans la plupart des navigateurs modernes auront cette option. Et si vous ne le faites pas, vous devez soit dater votre navigateur, soit utiliser un autre navigateur. Donc, cette option est disponible dans Firefox chrome et safari, et j'utilise actuellement chrome. Une fois que vous sélectionnez cela, il va mettre en évidence le code de cet élément sur lequel vous avez cliqué avec le bouton droit de la souris. Et là, dans la colonne de droite. Vous allez voir une option pour l'image d'arrière-plan, qui est cette image juste ici. Donc, si je l'éteins, nous pouvons voir que l'image disparaît. Et puis nous avons une URL juste ici qui nous mènera à cette image. Il suffit donc de copier l'URL, puis de la coller dans un nouvel onglet, puis vous aurez accès à cette image. Alors allez-y et copiez l'image. Nous allons retourner au calque d'arrière-plan et le coller, puis ajouter deux nouveaux calques. Maintenant, nous avons juste besoin de prendre cinq images de plus, et peu importe les images que vous obtenez. N' importe lequel d'entre eux fonctionnera. Nous allons juste faire un clic droit, inspecter. Et puis nous avons juste besoin d'obtenir l'URL. Et vous pouvez également simplement cliquer avec le bouton droit de la souris et sélectionner copier l'adresse du lien et le coller dans. Alors allez-y, téléchargez cinq autres images, Adam dans votre document, et ensuite nous continuerons à ajouter des informations supplémentaires. Et je vais aller de l'avant et accélérer cette partie du tutoriel pour que tu n'aies pas à me regarder faire ça et au ralenti. - D'accord . Je suis allé de l'avant et j'ai renommé chacune des images aussi. 01 image à 06 image. Donc, si vous ne l'avez pas déjà fait, allez-y et faites ça. Et puis je vais juste les déplacer sur le côté gauche ici. Et puis je veux récupérer mon outil de texte afin que nous puissions commencer à ajouter du contenu pour chacune des images. Et on va changer le fonds pour la Géorgie. En fait, utilisons cette police à la place. Et pour la taille que nous allons faire 18 et puis sont de couleur gris foncé. Revenons à notre site Web ici, et nous allons juste copier certaines de ces lignes ici. Copiez donc ces informations, puis collez-les avec votre texte, puis copiez simplement cinq lignes de contenu supplémentaires et collez-les dans. Allons de l'avant et mettons-les dans le bon ordre, et ensuite nous allons les renommer un contenu à partir du contenu 05. Allons de l'avant et créez du contenu apparaissent et prenez notre image de forme d'onde, puis nous allons de l'avant et continuer avec cette leçon dans le prochain tutoriel. Je pense que pour celui-ci va le rendre un peu plus grand Faisons 24. Et je veux aussi prendre notre deuxième ligne et sélectionner juste cela et la changer pour notre couleur bleu foncé . Ok, donc la dernière chose est de prendre un formulaire, retournons au sommet ici. Et puis ce que nous voulons faire, c'est que nous voulons commencer à jouer cette playlist afin que nous puissions voir la minuterie et la couleur orange arriver. Donc je vais faire cinq secondes, et puis je vais attraper mon logiciel de capture d'écran, qui est intégré dans le Mac, et puis je vais juste faire une sélection autour de lui, capturer, et alors je vais l'apporter dans mon document. Alors allez-y et utilisez n'importe quel logiciel de capture d'écran que vous utilisez capture de cette façon, forme image, puis amenez-la et renommons la forme de façon. Bon, donc on a encore beaucoup à faire. Nous devons organiser nos couches. Nous devons créer des boutons, et nous allons aller de l'avant et commencer à travailler sur une partie de ça dans le prochain tutoriel. 50. Partie partie 2 corporative de l'audio: Maintenant que nous avons toutes nos images et notre contenu, redimensionnons les images et déplacons tout en position. Allons de l'avant et éteignons ces trois groupes couches, puis nous allons sélectionner le document entier avec commande ou contrôle et la lettre A afin que nous puissions aligner notre titre au centre de notre document Can d select. Maintenant, prenons notre logo et le rendre plus petit. Alors prends ta balance, décale-outil plus s et faisons 100 pour la hauteur et replaçons-la ici en haut, non ? Ça va bouger celui-ci, et je veux aussi augmenter la taille de notre formulaire. Donc, changer plus s à nouveau, et je vais juste remplir autant de la zone ici est que je peux tellement juste qu'il devrait y avoir bon. Je vais aller de l'avant et faire une sélection autour de ma forme de chemin afin que je puisse rendre cette limite de couche plus étroite à l'image réelle. Donc je suis plus préoccupé par le bas et le côté droit par rapport à la gauche en haut. Donc je vais juste y aller et ensuite sous couche. Nous allons sélectionner recadrer à la sélection De Select et je veux aligner ceci au bas de notre image et je vais mettre les deux dans un nouveau calque de groupe. Allons de l'avant et sélectionnons tous de nouveau afin que nous puissions aligner cela au centre de notre document. Maintenant, nous pouvons voir qu'il y a un peu plus d'espace de ce côté par rapport à ce côté, et c'est parce que nos images d'arrière-plan doivent être alignées au centre aussi. Alors allons de l'avant et de sélectionner, et nous le ferons ensuite. Donc, je ne veux pas que Teoh allie le calque avec un masque de calque parce que nous ne serons pas en mesure déposer la limite du calque vers ce fond. Donc, nous allons d'abord récupérer notre arrière-plan d'échantillon audio le plus grand, puis nous allons aller jusqu'à recadrer le contenu et maintenant nous pouvons utiliser notre outil d'alignement pour l'aligner au centre du document. Et puis nous allons déplacer l'autre manuellement. Alors allons de l'avant et éteignons ce calque afin que nous puissions sélectionner celui-ci tout à nouveau et puis de select peut aller de l'avant et saisir celui-ci. Je vais zoomer ici pour que je puisse y jeter un coup d'oeil. Et puis je vais juste utiliser ma touche fléchée droite pour le déplacer vers la commande que droite ou le contrôle dans zéro pour zoomer sur l'interface. Donc, nous avons besoin de faire un bouton ici ainsi que quelques boutons propres ici. Mais allons de l'avant et réparons d'abord ces images et le contenu. Donc nous allons prendre chacune de ces images et les réduire à une hauteur d'environ 60. Allons de l'avant et mettons son image supérieure à l'intérieur ainsi que notre image inférieure, puis nous allons les aligner tous vers la gauche et répartir l'espace uniformément. Je dois aller de l'avant et éteindre mon masque de couche ici est bien, donc je peux les sélectionner. Eh bien, Daniel, touche Maj et sélectionnez chaque image. Ok, on va à une ligne à gauche. Maintenant, allons de l'avant et distribuons l'espace entre eux dans le décalage. Pourquoi ? Nous allons taper 90 et sélectionner cette option ici pour distribuer les centres verticaux. Et maintenant, nous avons un espace égal entre eux maintenant. Vous vous souvenez peut-être qu'auparavant, lorsque nous travaillions sur nos logos, nous n'étions pas en mesure de le faire parce que la taille de ces couches était différente l'une de l'autre . Mais lorsque les couches sont toutes de la même taille, il répartit ensuite uniformément la quantité d'espace. Allons de l'avant et prenons notre contenu et mettez-les en position, avec l'une des images auxquelles il correspond. Allons de l'avant et prenons notre contenu et mettez-les en position, Mettons également notre logo à l'intérieur des images les plus importantes. Ok, maintenant on va prendre notre contenu et l'aligner au centre de nos images. Prenez votre outil de sélection de rectangle, faites une sélection, puis nous allons aligner le milieu de la cible. Alors faisons-le pour toutes les différentes couches. - Ok , Ensuite, on va allier tout ce contenu à gauche, donc outil d'alignement, clé de merde. Et puis cliquez sur chacune des lignes. Il est en train de revenir au premier élément et à une ligne à gauche. Très bien, prenons tout ce contenu sur lequel nous venons de travailler et créons un nouveau groupe de calques appelé contenu inférieur. Allez-y, attrapez ça et déplacez-le un peu vers la droite. Donc nous avons de la place pour nos boutons. Et je veux aussi faire une sélection pour aligner tout ce contenu directement au milieu de cette sélection. Assurez-vous de désactiver à nouveau cette liste de lecture supérieure afin que vous puissiez sélectionner ce contenu, modifier à nouveau en sélection, puis aligner le milieu des cibles. Alors de select, rallumez celui-ci. Jetons un coup d'oeil ici. Ok, donc on a presque fini. Nous avons juste besoin de créer nos boutons, d'aligner quelques éléments supplémentaires et d'organiser nos calques un peu plus, mais nous allons le faire dans la prochaine leçon. 51. Partie audio 3: Ok, on a presque fini. Nous allons aller de l'avant et créer des couches d'organisateur de boutons, et ensuite nous verrons s'il nous reste quelque chose à faire. Alors allons de l'avant et créons notre premier bouton, apparaissons en haut et prenons notre outil Ellipse, et nous allons créer un bouton qui mesure 60 par 60. Prenons notre couleur bleu foncé, puis remplissez-la avec notre seau de laine filtrante. Mais d'abord, nous devons créer une nouvelle couche. Appelons ça le bouton supérieur. Remplissez-le dans la sélection. D' accord, allons de l'avant et créons notre icône de pattes. Prenons notre outil de sélection de rectangle Et à l'intérieur d'ici je vais juste dessiner un rectangle, et nous avons également besoin de créer un nouveau calque appelé Pause Icône. On va prendre notre seau, remplir l'outil et le remplir de blanc. Allez-y et de sélectionner. Allons de l'avant et prenons cette icône et dupliquez-la. Et puis, avec le mouvement dit, nous allons juste le déplacer ici vers la droite, juste pour lui donner un peu d'espace et entre et puis à droite, cliquez sur l'icône Pause en haut et sélectionnez fusion vers le bas. Ok, il y a Pause Icône. Allons de l'avant et recadrons le contenu de ce calque et du bouton supérieur. Et puis allons de l'avant et mettons-les dans un nouveau groupe de calques appelé bouton supérieur. Bon, allons-y et attrapons ça pour qu'on puisse aller de l'avant et le mettre en place. Allons de l'avant et l'alignons à gauche de notre forme de chemin, qui est juste là. Donc, ça a l'air bien, puis le haut de l'image. Donc je vais juste utiliser mon outil de déplacement et le déplacer vers le haut pour qu'il s'aligne vers le haut. J' ai également besoin de saisir mon contenu ici, puis de le déplacer vers le bas afin qu'il s'aligne vers le haut aussi . Allons de l'avant et créons un nouveau groupe de calques pour ce contenu ici. Appelons ça Top playlist. Je vais également prendre mon logo et le retirer de ce calque de groupe afin que nous puissions sélectionner ce contenu et l'aligner sur le haut et le bas de l'arrière-plan. Donc nous allons le faire en faisant notre sélection et ensuite, avec leur outil d'alignement, nous allons aligner le milieu de la cible. Je vais aussi prendre mon logo et je veux juste le déplacer un peu. Je vais juste utiliser mes touches fléchées. Donc juste là. Et puis on pourrait remettre ça à l'intérieur de ce groupe plus tôt. Andy Select. Allons de l'avant et créons un nouveau groupe de calques pour cette section. Et appelons ça des échantillons audio. Ok, nous allons finir le reste de notre contenu ici, et ensuite nous mettrons ces couches à l'intérieur. Très bien, nous allons aller de l'avant et créer nos boutons pour notre liste de lecture inférieure maintenant et comme avant, nous allons commencer avec notre outil Ellipse et faire la même taille, qui était 60 par 60. Nous allons créer un nouveau calque appelé le bouton, puis saisir votre couleur bleu foncé et le remplir dans de select afin que nous puissions le voir dès maintenant. Et c'est parce que c'est en dessous d'autres couches ici aussi. Ok, nous allons juste zoomer un peu. Allons de l'avant et alignons le vers le haut de cette image, sorte que cela semble assez bon juste là. Allons-y. Éteignez les guides. Maintenant, faisons une petite flèche à l'intérieur. C' est pointant vers la droite. Donc, nous allons changer notre couleur de premier plan arrière blanc, puis avec notre outil de sélection de rectangle , nous pouvons faire une forme carrée. Alors faisons-le 30 par 30. Et nous allons créer un nouveau calque appelé Arrow ne ressemble pas encore à un, mais il le fera et ensuite remplir ce calque avec blanc et de sélection. Maintenant, passons à la couche et au recadrage du contenu, et maintenant nous sommes prêts à faire pivoter. Donc nous allons prendre notre outil de rotation d'ici, et une fois que nous cliquerons dessus, nous pouvons ensuite cliquer et faire glisser pour faire pivoter à partir d'ici. Nous pouvons utiliser ce briquet ici ou affaiblir le type dans un angle spécifique, et je veux 45 pour les angles si serrés qu'en clic tourner Maintenant, nous avons juste besoin de découper une partie de notre forme de diamant pour le faire ressembler plus à une flèche. Donc nous allons Graham être un outil d'ellipse et créer une forme ovale et ensuite juste la placer sur cette forme de diamant. Donc tu as une idée de ce à quoi ça va ressembler. Créons un nouveau calque appelé découper, puis remplissez-le avec n'importe quelle couleur. Allez-y et sélectionnez et créez un nouveau groupe antérieur appelé Arrow. Et puis on va prendre la découpe et l'air plus tôt et le mettre à l'intérieur. Et maintenant, nous pouvons prendre cette couche découpée pour, eh bien, découper cette forme en utilisant nos modes de mélange et en sélectionnant une course. Ok, allons de l'avant et attrapons notre flèche et juste le centrer manuellement si bien sur leur apparence . Et maintenant, nous allons créer un nouveau groupe de couches pour ça appelé bouton de survol. Et c'est parce que les autres boutons qui ne sont pas survolés seront une nuance de bleu différente . Maintenant, nous avons juste besoin de dupliquer ce bouton de survol quatre fois. Mais d'abord, allons de l'avant et organisons quelques-unes de ces autres couches avant de commencer à ajouter Mawr à notre panneau de calques parce qu'il est un peu bondé en ce moment. Je vais déplacer ce calque vers le haut, qui est ensuite suivi de nos échantillons audio. On a une liste de jeu et une liste de lecture de fond d'aide, donc je vais juste mettre ça à l'intérieur de temps en temps. Nous avons également quelques arrière-plans ici que nous pouvons mettre à l'intérieur de chaque groupe de calques. Alors allons de l'avant et ceux qui sont dedans. D' accord. Cela a aidé à nettoyer notre panneau de couches juste un peu. Allez-y et déplacez mon bouton de survol au-dessus de tout le reste pour l'instant, afin que nous puissions réellement le voir. Et allons de l'avant et dupliquons cette couche une fois. Faites glisser le calque vers le bas, puis, avec notre outil de déplacement, nous allons faire glisser ce calque vers le bas. Nous allons nous assurer que c'est une ligne vers le haut ici, et allons de l'avant et changer la couleur de ce bouton aussi. Et nous allons le faire simplement en ramenant l'opacité à environ 80. Maintenant, avant que j'oublie. Allons de l'avant et attrapons notre bouton de vol stationnaire et recadrons le contenu. Et faisons ça pour ce bouton aussi. Et nous allons le renommer le bouton un. allons le dupliquer, puis nous allons aller de l'avant et nous allons le mettre en place, et ensuite nous allons répéter ça deux fois de plus. D' accord, nous allons nous assurer que tout est bien aligné. Allez-y et ajoutez ici un guide qui s'aligne avec cette image, apparaissent en haut, puis nous allons saisir nos boutons et les déplacer en position. Ok, je pense qu'on a presque fini. Allons de l'avant et prenons tous nos boutons et mettez-les dans un nouveau groupe de calques appelé Boutons. Et c'est tout. Notre section des échantillons audio est maintenant terminée, et nous sommes prêts à passer à la section des échantillons vidéo, et nous allons commencer cela dans la prochaine leçon. Donc, si vous êtes prêt à le faire, eh bien, faisons-le. 52. Vidéo corporelle: Bonjour et bienvenue. D' accord, on va aller de l'avant et travailler sur la section des échantillons vidéo, et il nous faut quelques images pour commencer. Alors passons à choisir sabei dot com et faire une recherche d'images de concert en direct. N' importe quelle image fera l'affaire. Alors allez-y et choisissez-en un. Je vais sélectionner celui-ci, et je vais télécharger 12 80 par 8 53 Allez-y et téléchargez-le, puis ajoutez-le à vos documents. Nous devons également aller à Google images et faire une recherche pour YouTube, icônes de plaque vidéo, puis sous outils. J' ai sélectionné moyen pour la taille et transparent ce 1 800 par 800. C' est un peu trop grand, celui-là encore trop grand. Mais je pense que nous allons aller de l'avant et commencer avec celui-ci, et je vais aller de l'avant et copier celui-ci et le coller dans mon document. Et maintenant, allons de l'avant et renommons ces couches et continuons aussi et éteignons momentanément, car ce que nous devons faire d'abord est de créer un arrière-plan pour cette section. Donc, je vais en fait aller à notre section audio et sélectionner ce fond ici. Si vous avez choisi un calque ou un guide, il sélectionnera ce calque d'arrière-plan lorsque vous cliquez dessus, puis il ouvrira tous les groupes de couches qu'il se trouve à l'intérieur, puis vous le félicitez et dupliquez. Et maintenant, nous pouvons simplement cliquer et faire glisser ceci et renommer son Retour en arrière ici et fermer cette couche de groupe. Et maintenant, je dois revenir en arrière pour déplacer le calque actif afin que je puisse cliquer et le faire glisser vers le bas en position. Donc juste à propos, il devrait être bon, donc cela le rend beaucoup plus facile au lieu d'essayer d'en créer un à partir de zéro. Ok, redimensionnons notre décalage d'image YouTube plus s pour l'outil de mise à l'échelle. Et puis en ce qui concerne la taille, on va aller 680 pour la hauteur, et ensuite j'ai une largeur de 10 20. Si vous avez choisi une image différente, elle peut être différente sur le avec, donc vous devrez peut-être la recadrer ou revenir en arrière et télécharger cette image. Donc je vais mettre ça à l'échelle et le mettre en position juste ici. Allons-y et centrons-le à l'intérieur de ce fond. Donc, avec notre outil d'alignement, nous allons aller de l'avant et sélectionner l'arrière-plan, en fait besoin d'éteindre les échantillons audio d'abord. Maintenant, je peux sélectionner cette touche Maj, cliquer sur l'image, puis un centre de ligne au milieu de la cible. Ok, allons de l'avant et ajoutons quelques boutons à gauche et à droite de l'image, ce qui représentera un moyen de naviguer dans deux vidéos différentes qui font partie de la playlist. Donc nous allons revenir à notre groupe d'échantillons audio en couche, et nous allons sélectionner un de ces boutons. Revenons donc à notre outil de déplacement, choisissez un guide de calque et cliquez sur celui du bas. Donc, je vais aller de l'avant et prendre le bouton pour et dupliqué et le tirer vers le bas, et en fait je veux mettre cela sous l'image YouTube afin qu'une partie de celui-ci soit cachée derrière elle. Donc je vais renommer ce bouton, non ? Je vais le dupliquer et ensuite l'appeler Bouton gauche. Ok, de retour pour déplacer le calque actif. Mettons notre bouton gauche ici et ensuite notre bouton droit ici. Clôtons ça. Bon, donc nous devons aller de l'avant et redimensionner les boutons et les agrandir. Alors prenez votre bouton gauche shift plus s et faisons 90 pour la hauteur et la largeur , puis la même chose pour le bouton droit. Ok, allons-y et mettons-le en position. Je veux vraiment centrer ces boutons de haut en bas avec l'arrière-plan, donc je vais récupérer mon outil d'alignement à nouveau et éteindre les échantillons audio. Donc, comme le décalage d'arrière-plan plus le bouton et ensuite une ligne au milieu de la cible, faisons la même chose pour notre autre bouton ici. Et l'autre chose que nous devons faire est de prendre ce bouton ici, le bouton gauche, et de le retourner horizontalement, donc il pointe dans l'autre direction. Alors quoi ? Ils sont la couche de bouton gauche sélectionnée. On va aller au calque, transformer et sélectionner flip horizontal. Je vais aller de l'avant et cliquer sur ce calque aussi, pour que je puisse déplacer un peu la flèche et le bouton vers la gauche. allons zoomer et saisir notre outil de mesure afin que nous puissions mesurer le bord de la partie extérieure du bouton jusqu'au bord. de l'image afin que nous puissions ajouter la même quantité d'espace de l'autre côté également. Donc, il ressemble à 67 pixels. Prenons également cette image et diminuons l'opacité, donc ce n'est pas aussi intense. Le seul problème est que nous avons une partie de nos boutons qui s'affichent à travers maintenant, ce qui est une solution facile avec notre outil de sélection. Je vais prendre mon outil de sélection de rectangle et faire une sélection. Allons sur nos guides parce que nous avons un guide ici que mon outil de sélection de rectangle est également accroché . Donc je vais juste déplacer ce gars vers la droite, juste un peu pour correspondre à l'endroit où le bord des images et vérifions de l'autre côté aussi . Donc ça a l'air bien. Maintenant, je peux aller de l'avant et faire ma sélection. Prenons notre bouton gauche et et un masque de calque et blanc noir dit à l'arrière-plan, puis supprimer ou la touche retour arrière. Ok, gardons cette sélection. Le poids est de saisir le bouton droit et même chose masque de calque, puis supprimer ou retour à l'espace . Ok, donc ça s'est occupé de cette partie du lecteur vidéo. Allons de l'avant et trouver notre bouton de lecture YouTube et allons de l'avant et l'échelle vers le bas juste un peu à droite sur il devrait être bon, et puis nous allons de l'avant et l'alignons à l'arrière-plan. Ok, maintenant allons de l'avant et créons nos cercles qui représentent le nombre de vidéos dans la playlist. Nous allons en créer quelques-uns avec un cercle blanc et un trait orange, puis un autre avec une couleur bleu uni représentant la vidéo en cours de lecture en ce moment . Alors attrapons notre outil Ellipse et dessinons un cercle et faisons-le 26 par 26. On va créer une nouvelle couche que je vais appeler un cercle de playlist. Je veux également sélectionner la couleur orange dans notre en-tête. Prenons notre outil pipette et faisons une sélection, donc je vais l'utiliser pour remplir ce cercle particulier. Nous allons choisir et nous allons de l'avant et créer un nouveau calque, et puis nous allons dessiner un cercle plus petit cette fois de 20 par 20. Allez-y et remplissez-le de select. Nous voulons également prendre ces deux couches et recadrer le contenu. Très bien, allons utiliser notre outil d'alignement, nouveau pour sélectionner les deux et un centre de ligne et le milieu de la cible. Et puis, bien sûr, un nouveau groupe de couches. Allons de l'avant et dupliquons ça quatre fois. Mettons-les dans le bon ordre. Allons-y, attrapons-les et écartez-les. Donc je nomme ça un cercle cinq, parce que ce sera la fin. Je vais mettre le 4ème 1 ici, qui va être d'une couleur bleue unie. Donc, comme avant, lecture de Graham est Ellipse Tool. On va tailler à 26 sur 26. Je vais créer un nouveau calque. Ensuite, nous allons sélectionner notre couleur bleu foncé et la remplir avec cette couleur. Ok, allons de l'avant et prenons cette couche. Noulez et recadrez le contenu, puis utilisez votre outil d'alignement pour les sélectionner tous afin que nous puissions les aligner. Choisissons un orteil couché, en bas ou en haut. L' un ou l'autre va bien, puis nous voulons distribuer et ensuite pour le décalage que nous allons définir. Pourquoi ? À zéro et x orteil 100. Essayons ça. Je pense que c'est un peu trop, donc je vais descendre à 65 ans. Ok, j'aime ça. Allons de l'avant et mettons tous ces éléments dans un nouveau groupe de calques. On dirait que c'est un peu déplacé. Alors allons de l'avant et attrapons ce calque de groupe. Sélectionnez tout. Et puis un centre couché de la cible peut. Allons de l'avant et de sélectionner. Et jetons un coup d'oeil ici. Nous devons nettoyer un peu nos couches ici. Alors allons de l'avant et créons un nouveau groupe de calques pour le lecteur vidéo et les boutons. Ok, on va en sortir une seconde parce que nous devons aligner tout ce contenu au centre de notre arrière-plan. En ce moment, nous avons beaucoup plus d'espace ici par rapport à ici. Donc, nous allons saisir ce calque de groupe ici, puis utiliser à nouveau votre outil d'alignement pour cliquer sur l'arrière-plan, puis sur une ligne au milieu de la cible. Et puis allez-y et mettez vos antécédents là aussi. D' accord. Je vais aller de l'avant et allumer nos échantillons audio aussi. D' accord ? Je pense que nous en avons tous fini avec les échantillons audio et vidéo en bord de mer. Dans le prochain tutoriel, nous allons aller de l'avant et aborder les sections de contact, donc si vous êtes prêt pour ça, faisons-le 53. Contact corporel: Bonjour et bienvenue. Ok, on va travailler sur notre section contact, et ce qu'on veut faire, c'est ajouter un pot-de-vin. Nous voulons inciter les visiteurs à nous donner leur adresse e-mail. Maintenant, s'ils veulent vraiment trouver des informations sur notre entreprise ou sur l'entreprise de votre client, alors ils vont donner ces informations librement. Mais certaines personnes peuvent avoir besoin d'une poussée supplémentaire ou d'une incitation pour donner cette information parce qu'elles ne sont pas vraiment sûres si elles sont prêtes à passer à l'étape suivante ou elles ont peur d' être portées parce qu'elles ont été spamées une fois de trop. Je sais ce que ça fait. Je suis sûr que tu sais ce que ça ressent aussi. Donc si je savais épeler, nous aurions un pot-de-vin qui les inciterait à nous donner cette information. Nous voulons donc rendre le plus facile possible de nous contacter, mais aussi leur donner quelque chose en retour. Ce n'était pas le cas dans le site d'origine. La seule chose qu'ils avaient vraiment était de nous contacter et de nous laisser une ligne. Mais pourquoi ? Qu' est-ce qu'il y a dedans pour moi ? Donc, je pense toujours en termes de ce qu'il y a dedans pour la personne qui visite le site Web. Quels sont les avantages qu'ils obtiendront pour faire quelque chose ? Donc, la raison pour laquelle je souligne cela est parce que nous voulons non seulement offrir à nos visiteurs site Web de nos clients une bonne expérience utilisateur. Nous voulons également aider nos clients à obtenir plus d'adresses e-mail commerciales ou plus afin qu'ils puissent leur commercialiser plus tard. Alors allons de l'avant et créons notre section contact. Ce n'est rien de fantaisie ou d'extravagant. Ça ne va pas nous gagner des récompenses, mais c'est tout droit. Connectez-vous avec nous pour une consultation gratuite ou quelque chose gratuitement. Alors allons-y et faisons-le. En fait, avant de commencer à faire la section de contact, nous devons créer notre arrière-plan pour la section précédente et mettre tout ce contenu dans sa propre couche de groupe. allons donc saisir notre calque d'arrière-plan et notre outil de sélection de rectangle et faire une sélection afin que nous puissions créer notre copie d'arrière-plan et le coller, puis mettre la sélection flottante dans un nouvel arrière-plan appelé audio plus vidéo. Prenons également la limite du calque et augmentons la taille en sélectionnant la taille de l'image, puis accédez aux filtres, ombre portée et à l'ombre portée pour créer l'ombre portée pour cet arrière-plan particulier. Maintenant, nous allons de l'avant et créons un nouveau groupe de couches appelé Audio Plus Video. Maintenant que nous avons fait ça, nous pouvons aller de l'avant et créer notre section contact. Maintenant que nous avons fait ça, Alors allons de l'avant et commençons par nos antécédents. abord, allons de l'avant et allumons nos guides et prenons notre outil de mesure et dessinons 800 pixels de haut, puis avec notre outil de sélection de rectangle, nous pouvons aller de l'avant et faire une sélection en fonction de cette taille. Et puis, comme avant, copier-coller le définir sur un nouveau calque. On va monter à la couche et augmenter la limite de la couche, et ensuite on va ajouter notre ombre portée à nouveau. Je vais le renommer Contact Background. Très bien, nous sommes prêts à ajouter notre contenu. Maintenant, allons-y et Graham sont un outil de texte pour le front. Je vais faire des plaques de cuivre. Faisons 60 pour la taille et sont de couleur bleu foncé. Je vais aussi le mettre trop en gras et puis pour un pot-de-vin, nous allons changer la police. Rendons aussi ça audacieux. Je vais aussi baisser l'opacité à environ 90 pour lui donner un peu de séparation de notre titre. Et je veux aussi faire le texte sur la même largeur que notre titre. Donc on va utiliser l'option d'espacement. Je vais juste aller de l'avant et une ligne, puis avec notre week-end textile, sélectionner tout et ensuite augmenter l'espacement. Donc, cela semble assez proche d'aller de l'avant et de faire 1.2, peut-être un peu plus. Essayez 1.4 et 1.6. Ok, ça a l'air bien. Allons de l'avant et mettons ces informations dans un nouveau groupe de couches. Ok, allons de l'avant et alignons ces informations avec leur outil Lehman. Nous allons tout sélectionner en premier, et nous devons désactiver nos autres couches ici. Assurez-vous que vous avez sélectionné la sélection, puis un centre couché de la cible. Bon, allons de l'avant et créons le formulaire. Nail était le premier tour sur notre grille. On dirait que nous avons besoin d'augmenter la taille pour pouvoir réellement le voir avec notre outil de balance et s'assurer qu'il est déverrouillé. Et faisons 5100 pour la hauteur et nos formes vont avoir cinq colonnes de grille de largeur. On va devoir en haut, et ensuite on aura une colonne disponible de chaque côté, ce qui nous donnera une forme symétrique directement au centre. Alors allons de l'avant et Graham sont sélectionnables par rectangle afin que nous puissions créer notre première ligne de formulaire. Créons un nouveau calque appelé nom, et en ce qui concerne la taille, nous allons faire les cinq colonnes, et nous allons faire 50 pixels péage. Donc, 4 75 par 50. Choisissons une belle couleur grise, puis allez-y et remplissez-le dans K d Select. Dupliquons et renommons son e-mail. Prenons également ces deux couches et recadrons au contenu. Déplaçons le courrier électronique vers la droite, allons juste nous assurer que tout est aligné vers le haut, sorte que ça semble bien. Et puis nous allons créer le formulaire de message à nouveau avec notre outil rectangle, et nous allons faire 10 colonnes de large, et ensuite en ce qui concerne la hauteur, faisons 360. Créez un nouveau calque appelé message et remplissez-le. D' accord, en ce qui concerne l'espacement. On va faire un peu d'espace entre ces deux colonnes ici et ensuite cette ligne et la corde de message. Et il semble que j'ai aussi besoin de déplacer les deux de ma rose ici ou vers la droite d'un pixel. Je vais donc sélectionner un calque ou un guide afin que je puisse sélectionner chacun individuellement et ensuite utiliser ma touche fléchée droite pour le déplacer. Maintenant, on va prendre notre outil de mesure pour y avoir 25 pixels. Allons de l'avant et dessinons 25 pixels ici. Allons de l'avant et guide, et ensuite nous pourrons avancer sur cette route. Je vais juste utiliser mes touches fléchées. Une boîte parfaite. On n'a plus besoin de la grille. Allons de l'avant et éteignons cela, puis organisons ces couches ici. N' importe quel groupe nucléaire, on l'appellera la forme. Ajoutons ses étiquettes pour chaque partie du formulaire, puis pour les fonds allaient faire cette police ici et faisons 24 pour la taille, puis nous allons choisir la couleur gris foncé que nous avons utilisé dans les parties précédentes de la projet. Allez-y et bougez. Nom jusqu'au sommet et on va taper le nom ici. Rendons les choses audacieuses. Ensuite, nous avons un e-mail, et en sélectionnant le calque qui ajoutait le texte à créer ce nouveau calque au-dessus , ce qui le rend plus facile, donc nous n'avons pas à nous soucier de le déplacer après. D' accord. On va juste aller de l'avant et aligner tout maintenant. Ok, prenons une mesure ici pour qu'on puisse ajouter la même quantité d'espace de l'autre côté. J' ai donc 18 pixels. Donc encore 18 ici. Ok, on va les aligner au centre du haut et du bas de la rangée. Alors quoi ? L' outil de sélection de rectangle permet le crabe. On dirait qu'on va devoir les déplacer hors de cette couche de groupe pour qu'on puisse la sélectionner , puis la sélection et une ligne médiane de la cible. Remettons-le, faisons-le la même chose pour le nom. Prenons une mesure pour le haut de cette partie. J' ai donc 17 pixels. Donc 17 pixels ici pour les bougies de message. Remettez le nom à l'intérieur, et on va prendre le formulaire, et je vais juste le déplacer un peu. Ok, allez-y et prenez votre rectangle sélectionnable. Et pour ce bouton, je veux des coins arrondis comme on l'a fait avant. Et vous vous souvenez peut-être si nous allons vers le haut pour sélectionner affaiblir, sélectionnez rectangle arrondi à partir d'ici. Mais il y a aussi une option à l'intérieur de nos deux options ici dit coins arrondis. Et vous devez nous sélectionner. Ajoutez votre rayon avant de faire votre sélection. Alors allons de l'avant et tapez 20 pour le rayon. Et puis pour la taille, on va faire 200 par 85. Je vais utiliser la même couleur orange que j'ai utilisée précédemment, et je vais le remplir dans de select. Je veux juste zoomer, m' assurer que tout est bien aligné ici. Ça a l'air bien. Et puis quoi ? Leur outil de texte va de l'avant et changer la police en chemin de fer. Je vais utiliser audacieux Essayons 24 blancs pour rendre ça plus grand. Essayons 36 quand j'essaie 44. Voyons si ça tient à l'intérieur. Je voulais juste le plus grand possible sans aller trop près des bords. D' accord, donc ça a l'air plutôt bien. Allons de l'avant et attrapons notre outil d'alignement pour que nous puissions nous aligner. Soumettez directement au centre du bouton. Mais nous devons d'abord saisir notre couche de bouton et recadrer le contenu. Ensuite, nous pouvons faire nos sélections à l'aide de notre outil d'alignement lorsque nous revenons au premier élément , puis au centre de ligne des cibles et au milieu de la cible. Ok, donc on va aller de l'avant et créer un nouveau groupe de couches appelé Button. Allons de l'avant et nettoyons le reste de ces couches ici. Donc, un autre nouveau groupe de couches appelé Contact et c'est tout. Nous avons maintenant terminé avec la section contact. Donc une section de plus gauche et c'est le pied de page. On va aller de l'avant et finir ça dans le prochain tutoriel. 54. Footer: Bonjour et bienvenue. Bon, donc la dernière étape pour ce projet est de faire le pied de page. On va le garder réel. Simple, Riel propre. Nous allons juste ajouter un avis de copyright. Certaines icônes de médias sociaux et les ingrédients de fond pour les icônes de médias sociaux J'utilise ceux que nous avons téléchargés d'une leçon précédente. Alors allez-y, trouvez ces fichiers et amenez-les dans votre document. Je suis allé de l'avant et je les ai mis dans un ordre spécifique, et j'ai également renommé chacune des couches représentant cette icône particulière des médias sociaux. Maintenant que vous avez cette configuration, continuons et faisons l'arrière-plan Grady int, et nous allons réellement aller à notre en-tête et faire une copie de cet arrière-plan d'en-tête afin que nous puissions l'utiliser pour l'arrière-plan du pied de page. Allons de l'avant et renommons cet arrière-plan de pied de page, puis faites simplement glisser ce calque vers le bas, puis avec votre outil de déplacement, vous allez cliquer sur l'arrière-plan afin de pouvoir le faire glisser vers le bas de la canevas . Maintenant, maintenant, à ce stade, ça va prendre une éternité. Donc, si vous avez un bouton écureuil sur votre souris. Vous pouvez réellement l'utiliser pour naviguer vers le bas de la page beaucoup plus rapidement. Donc, c'est quelque chose que vous devez configurer dans les préférences si vous avez un bouton de défilement. Allons-y et mettons-le en position. Et nous avons beaucoup d'espace vide maintenant, alors allons de l'avant dans la culture sont canevas au bas du pied de page, moins l'ombre portée. Donc, je suis à 42 ans. 21 et je sais que parce que j'ai placé mon curseur de souris juste en bas et en bas, cela nous indique la hauteur de notre campus à ce moment-là. Donc, une fois que vous avez déterminé la hauteur, vous devez recadrer pour aller à l'image et sélectionner la taille du canevas et le taper. D' accord, je vais aller de l'avant et recadrer la limite de la couche pour cette couche particulière aussi. Maintenant, il montre qu'il est sur ce point juste ici, et c'est à cause de l'ombre portée, et c'est bon. On n'a vraiment pas besoin de faire autre chose avec l'arrière-plan, alors on va juste le laisser juste là. Allons de l'avant et faisons notre avis de copyright, et puis pour le plaisir, je vais faire le chemin de fer gras et je vais le mettre à 12 et blanc pour la couleur. Allons allumer nos guides et nous allons les aligner à l'extrême gauche de la grille. Allons-y et allumons nos grilles ici, et on dirait que c'est cette ligne ici. C' est là que je veux l'aligner. Et puis allons de l'avant et alignons. En haut de la partie inférieure de l'arrière-plan du pied de page. Et maintenant, vous devriez savoir comment le faire. Nous allons Graham sont l'outil d'alignement de l'outil de sélection de rectangle, puis une ligne au milieu de la sélection de la cible. Ok, laissons de sélectionner et allons de l'avant et plus sur les icônes des médias sociaux. Et je vais placer le logo YouTube sur le côté droit. Et puis je vais prendre les autres aussi. Allez-y et éteignez les gars. Je n'en ai pas besoin maintenant. Très bien, prenez votre outil d'alignement pour que vous puissiez les aligner vers le haut. Je vais changer le décalage à 100 et on dirait qu'on a plus d'espace ici qu'ici et encore. C' est parce que ce logo est plus grand. Nous devons décaler l'espace ici encore plus. Mais au lieu d'essayer de comprendre cela manuellement avec ces options ici en tapant nombres encore et encore jusqu'à ce que nous le trouvions, il est juste plus facile de saisir votre outil de mesure et de faire une mesure entre ces icônes ici, qui est 46. Pour moi, le tien pourrait être un peu différent. C' est très bien. Et puis d'ici à là, on va aller 46, donc on doit tout déplacer vers la gauche. Mais nous le ferons dans une seconde. Je veux aller de l'avant et une superposition blanche pour cette icône. Alors saisissons Instagram et créons un nouveau calque appelé Overlay. Remplissons-le avec du blanc, puis nous devons changer le mode de fusion de l'addition normale de deux. Et puis nous avons dû placer ces deux-là dans un nouveau groupe de couches. Une fois que nous faisons cela, sera alors en mesure de voir notre icône en poids. Allons de l'avant et attrapons ces quatre couches et mettons-les dans un nouveau groupe de calques appelé « Social Icônes ». Allons de l'avant et attrapons ces quatre couches et mettons-les dans un nouveau groupe de calques appelé « Social D' accord, on a presque fini. Allons de l'avant et passons tout à droite. Nous devons également recadrer le contenu, et maintenant nous pouvons aller de l'avant et l'aligner avec notre outil d'alignement via notre sélection. De select. Allons de l'avant et créons un nouveau groupe de calques pour le pied de page et c'est tout. Notre conception Web est maintenant terminée, comme nous l'avons fait dans le projet précédent. Nous devons examiner notre conception Web et voir s'il y a quelque chose que nous pouvons faire pour améliorer la conception globale. Ou peut-être qu'on a fait des erreurs et qu'on doit les corriger avant de les envoyer au client. Nous allons donc travailler sur les derniers réglages de ce projet de conception Web dans le prochain tutoriel. 55. Tweaks: dans l'ensemble, je pense que nous avons grandement amélioré le site Web existant. Avec notre nouveau design. C' est beaucoup plus convivial. C' est beaucoup plus professionnel. Le contenu est plus facile à lire. La mise en page globale est beaucoup meilleure que ce qu'ils ont sur leur site d'origine. De plus, nous avons ajouté quelques informations pour aider les personnes mariées à soumettre des informations supplémentaires et à fournir leur adresse e-mail. Et avec l'en-tête collant, nous leur aiderions alors à trouver plus facilement la page suivante d'informations dont ils ont besoin s'ils n'y naviguaient pas depuis cette zone ici. Et bien sûr, nous avons ajouté une certaine crédibilité avec notre bannière de preuve sociale juste ici dans la section des héros. Donc, je pense que dans l'ensemble, le design est beaucoup mieux. Mais il y a des erreurs et des choses que nous devons faire pour le modifier, pour le rendre encore meilleur. Et fondamentalement, c'est l'espacement des différentes sections ne sont pas cohérentes. Nous avons ici cet élément qui n'est pas correctement centré sur l'arrière-plan. Nous avons une énorme quantité d'espace blanc ici. Je n'aime pas ça du tout. Cette zone est déséquilibrée et ce n'est tout simplement pas bon design. On pourrait faire des choses différentes pour le rendre meilleur. Un. Nous pourrions créer deux colonnes d'échantillons audio, ou nous pourrions déplacer ce contenu et présenter une grande image ici. Dans ce cas, cette image que nous jouons peut apparaître ici pour que vous puissiez la configurer, peut-être pour lire automatiquement la première vidéo une fois qu'ils naviguent vers cette section, puis cette image, quelle que soit l'image correspondant à cet audio s'affichera ici . Mais s'ils ont assez d'échantillons audio, vous pourriez faire plusieurs colonnes contre une, et cela remplit juste cet espace vide et équilibre tout. L' autre chose que nous n'avons pas fait est d'ajouter notre icône d'état de vol stationnaire que nous avons utilisée apparaît dans l' en-tête. Nous devons le mettre ici et créer des couches groupées, indiquant qu'il s'agit en fait d' un état de survol. Et quand vous survolez quelque chose, il va passer à ce type de bouton ou ce bouton de couleur par rapport à ces autres boutons ici. Donc je pense que toutes ces petites choses sont des choses que vous devez garder à l'esprit. N' oubliez pas de le faire pour que la conception et la mise en page Web soient cohérentes, ce qui rendra vos pages Web beaucoup mieux parce que vous prêtez attention à ces petits détails. Nous voulons un pixel parfait. Nous voulons un espace égal entre toutes les sections et je vois ici qu'il y a plus d'espace ici qu'ici. Et nous devons aller et mesurer l'espacement entre chaque section et ajuster tout le contenu qu'elle contient en conséquence. Donc, soit un. Vous pouvez me regarder faire ceci ou B. Si vous avez déjà parcouru et conçu tout à ce stade, vous savez probablement déjà comment le faire afin que vous puissiez aller de l'avant et modifier le centre d' espacement tout correctement si vous ne l'avez pas déjà fait et vous pouvez entrer et créer une deuxième colonne ou trouver votre propre concept de conception. Dans l'ensemble, ce projet est juste pour la pratique et encore une fois, comme les autres projets, vous ne pouvez pas utiliser ce design particulier dans votre portefeuille. Donc, la meilleure chose à faire est de passer par tout cela et de penser à vous-même, Comment pouvez-vous rendre cette conception de page Web encore meilleure ? Ce n'est probablement pas le meilleur design Web. Vous pourriez probablement trouver quelque chose de mieux que ce que j'ai créé. et c'est tout l'objectif à créer. Les sites Web conviviaux vont générer plus d'affaires pour vos clients et fournir la meilleure conception Web globale possible en fonction de votre vision créative. Pas ma vision créative, votre vision créative. Tu vas t'inspirer de mon travail et d'autres sites web. Et puis vous allez prendre cette inspiration et créer quelque chose de nouveau basé sur votre vision et votre créativité. Donc, je suis assez confiant que les 2 premières sections sont parfaites. Tout devrait être parfaitement aligné au centre parce que je me souviens spécifiquement de l'utilisation de l'outil d'alignement sur chacun des différents éléments. Alors allons de l'avant et jetons un coup d'oeil à notre prochaine section, qui est la première partie de notre corps. Et je pense que nous pouvons améliorer un peu la conception de cette section en augmentant la longueur de nos paragraphes. Je pense qu'ils sont trop courts en ce moment, et le texte est trop serré et ça rend difficile à lire. Nous devons donc augmenter l'espacement entre chaque ligne. Alors continuons et faisons cela pour ce premier paragraphe ici, et nous allons juste l'étendre à gauche et à droite de notre image ici. Donc à travers trois colonnes de grille. Et allons de l'avant et copions ces informations et collez-les en quelques fois pour les remplir. Revenons également à nos options d'outils ici et augmentons la base des lignes. Et je vais faire deux, peut-être trois, pour l'espacement. L' un d'entre eux a touché ma clé d'évacuation pour que je puisse jeter un coup d'oeil à tout ici. Et je pense que c'est certainement ah, beaucoup plus facile à lire que ça ici. Nous voulons donc rendre la lecture de notre contenu aussi facile que possible pour les visiteurs. Sinon, ils vont juste sauter dessus, passer à autre chose, peut-être même quitter le site. Donc, continuons et changeons les trois autres colonnes pour correspondre à celle-ci aussi. Je vais juste prendre la boîte de texte ici et la déplacer un peu vers le haut parce que je peux voir un peu le sommet de la prochaine ligne. Donc je veux juste me débarrasser de ça. Donc je vais supprimer ces trois paragraphes. Ensuite, je vais prendre ce paragraphe et dupliqué trois fois. Allons-y et mettons-les dans le bon ordre, puis déplaçons-les. Quelle traînée et une ligne directrice ici est bien, donc je peux m'assurer qu'ils sont tous alignés vers le haut. Allons de l'avant et renommons aussi les paragraphes. Ok, je pense que dans l'ensemble, cela rend ce contenu beaucoup plus facile à lire. Et nous avons certainement augmenté la qualité conçue juste en faisant cela seul. Bon, allons-y et jetons un coup d'oeil et notre prochaine section, et nous pouvons voir que l'espacement ici est moins important qu'ici. Je veux également augmenter la quantité d'espace ici égale à la quantité d'espace apparaissant . Alors attrapons notre outil de mesure et mesurons cela pour qu'il ressemble à 80 pixels. Alors allons de l'avant et dessinons 80 pixels ici ou quel que soit le nombre que vous aviez en fonction de votre design. Lee dehors. J' ai également besoin d'augmenter l'espace entre le titre et notre première section ici aussi. Donc je vais faire 80 pixels de plus, et je parie qu'on a besoin d'un espace Anson ici aussi, et on dirait que tout est un peu centré. Je vais ajouter un guide ici. Faisons en sorte qu'ils soient alignés exactement où ils devraient être. Celui-ci est un peu trop loin à droite. Donc je vais revenir en arrière et sélectionner celui-là et le déplacer pour qu'il s'aligne avec l'autre section en dessous. Ça va déplacer le guide juste pour s'en assurer. Et je pense que nous sommes bons pour l'espacement là-bas. Je pense que l'espacement entre ces deux est correct, mais je veux ajouter 80 pixels d'espace ici, donc on dirait que c'est plus de 80 pixels. Donc on va aller de l'avant et recadrer juste un peu. En fait, nous n'avons même pas à récolter. Nous avons juste besoin d'aller à l'intérieur et de sélectionner le calque d'arrière-plan. Et puis je vais utiliser mes touches fléchées pour le déplacer vers le haut. Allons en haut de la section, assurez-vous que tout a l'air bien. On peut encore avoir une ombre portée ? Et tout a l'air bien mieux qu'avant. Non, si tu jettes un coup d'oeil à mon design ici, si je fais un zoom avant, je pourrais voir un peu couché en haut, et je ne suis pas tout à fait sûr de ce que c'est. Je vais aller de l'avant et naviguer dans cette section les échantillons audio, et allons-y et allumons et éteins. Ok, donc ça disparaît quand j'ai éteint ce groupe. Donc ça doit être quelque chose à l'intérieur, et je pense que c'est en fait l'arrière-plan lui-même. Je vais aller de l'avant et naviguer et trouver ce contexte. Donc c'est définitivement là. Une fois que je l'éteins, cette ligne blanche disparaît. Donc je vais attraper mon icône de masque de calque juste ici, faire une sélection, et ensuite je vais la supprimer. D' accord ? Je dois mettre le noir à l'arrière-plan. Donc d puis agit puis supprimez sur la touche d'espace arrière pour supprimer cette ligne car elle ajoute du noir à cette zone et l'ombre portée reste en place. Ok, donc on a nettoyé ça. Ça a l'air beaucoup mieux. Cette section semble mieux maintenant. Nous devons déplacer tout le reste depuis que j'ai supprimé l'espacement de la dernière section. Donc encore une fois, nous allons mesurer 80 pixels, donc je dois déplacer les informations de contact vers le haut, donc je vais aller à l'intérieur de là, trouver, et ensuite je vais utiliser mes touches fléchées pour les déplacer en haut. D' accord, allons de l'avant et saisissons nos antécédents aussi. Allons de l'avant et déplacons ça pour remplir l'espace ici pour l'espacement entre ces deux éléments ici. Je vais prendre la quantité d'espace que j'ai ici et l'ajouter ici. Donc, cela ajoute juste de la cohérence à la conception globale. Alors allons de l'avant et mesurons cela. Donc, je suis à 69 Que saisir votre couche de forme et allez-y et déplacez-le vers le bas. Catalyseurs et un peu d'espace. Maintenant entre notre bouton de soumission et nous allons utiliser 25 pixels, qui est la distance entre ici et ici, ici et ici. Donc, encore une fois, nous voulons juste ajouter de la cohérence à notre conçu en ajoutant des quantités égales d'espacement entre différents éléments. Et puis enfin, nous avons besoin de 80 pixels d'espace sous le bouton. Ok, je veux déplacer l'arrière-plan vers le bas. Maintenant. Je sais qu'on vient de le déplacer, donc on va devoir y retourner et le remplir avec du blanc avec notre outil de sélection de rectangle . Alors allons-y et faisons-le. Elle, j'étais très proche d'être finie. Nous devons aller de l'avant et augmenter la taille du pied de page afin qu'il corresponde à notre en-tête. Alors allons de l'avant et faisons une mesure de son pied de page. Je suis à 1 48 et puis mon en-tête lui-même est 150 donc je n'ai pas à finir trop. Je vais aller de l'avant et aller à la taille de la toile de l'image et l'augmenter de deux pixels. Bon, maintenant que notre pied de page correspond à notre en-tête, je pense qu'il reste encore une chose, et c'est la minuterie de jeu en haut à droite ici qu'ils seraient bien d'avoir une minuterie de plaque qui a une barre de couleur qui passe par le haut ici. Ça correspond à notre forme. Alors allons de l'avant et créons ça. On va le mettre dans l'audio et la vidéo et aussi dans les échantillons audio. Alors allons à l'intérieur de là. Créons un nouveau calque. Choisissons une couleur orange que nous utilisons précédemment, puis dessinons avec notre outil de sélection de rectangles. Donc je vais y aller car il n'a pas besoin d'avoir une taille exacte. Je vais juste y aller et ensuite je vais aller de l'avant et remplir ça. Je pense que c'est un peu trop grand ou au moins un peu trop grand. Quelqu' un va de l'avant et de sélectionner, puis avec mon décalage d'outil de balance plus s, je peux aller de l'avant et en rendre la hauteur plus petite. Mais nous avons besoin de recadrer le contenu de celui-ci d'abord, donc je vais faire cinq re à l'échelle et allons de l'avant et jeter un oeil. Bon, donc je pense que ça ajoute juste un peu. Le design supplémentaire à cette section particulière le rend un peu plus attrayant qu' auparavant. Allons de l'avant et fermons tous ces groupes couches. Ok, je pense qu'il reste une chose que je veux faire, et c'est ajouter notre icône de la main survolée sur ce bouton. Allons donc à notre en-tête et trouvons cette icône de survol, qui est cette couche juste ici et dupliquez-la et continuons et déplacons ce calque vers cette section. Je vais aller de l'avant et cliquer sur choisir un leader ou un guide, puis quand je clique sur ce bouton, il va ouvrir automatiquement toutes les couches de groupe et me montrer le calque sur lequel j'ai cliqué, donc c'est la zone à laquelle je veux le faire glisser. Nous avons donc déjà le nom de la couche correctement étiqueté comme un bouton de survol, et nous avons juste besoin de déplacer l'icône de survol en position. Maintenant. La dernière chose que je recommande de faire pour en faire un meilleur design est de remplir cet espace vide. En ce moment, c'est déséquilibré, et ce n'est pas très bon design. Donc, ce que je recommanderais est de créer une deuxième playlist et de la placer ici sur le côté droit , ce qui donnera simplement aux visiteurs plus d'occasion de goûter le type de travail qu'ils dio . Donc, si nous allons ici jeter un oeil à notre liste de lecture, qui est en bas du contenu, nous pourrions prendre toutes ces informations et les dupliquer, déplacer vers la droite. Mais j'ai le sentiment que lorsque nous le faisons, il sera trop large et que le contenu sera trop proche du bord. Essayons vite. Je vais aller de l'avant et récupérer mon arrière-plan d'échantillon audio et le sortir de la couche de groupe, puis je vais dupliquer ce contenu. Je vais aller de l'avant et le déplacer vers la droite et c'est trop grand puis nous avons du contenu qui se chevauche et c'est trop serré ici. Donc, ce que je ferais alors, dans ce cas, c'est que j'utiliserais réellement mon outil de compétences et le réduirais. Faisons en sorte qu'il soit verrouillé ensemble. Essayons-le avec 500 faisons la même chose pour l'autre colonne aussi. Et je pense que ça va nous donner l'espace de respiration supplémentaire dont nous avons besoin maintenant. Nous devons aller de l'avant et retirer les deux colonnes de ces groupes afin que nous puissions les aligner au centre de l'arrière-plan. Pour ce faire, nous devons également les placer dans un nouveau groupe de calques temporaire pour faciliter leur alignement. Allons éteindre tout le reste. Ok, maintenant avec votre outil Lima, voyons si nous pouvons sélectionner l'arrière-plan ne semble pas qu'il va travailler sur les pieds, donc nous allons prendre ces deux couches et les déplacer vers le haut. D' accord, essayons maintenant. OK, donc cela fonctionne maintenez votre touche Maj enfoncée et cliquez sur les colonnes, puis modifiez-le en premier élément, puis un centre de ligne de cible. Allons de l'avant et prenons l'arrière-plan échantillonné et replacez-le dans son calque groupé. Et maintenant, nous pouvons prendre notre outil de sélection de rectangle dans la ligne de haut en bas d'ici. Ok, on va remettre celui-là là maintenant. Ensuite, nous avons juste besoin de prendre ce contenu et de le supprimer de cette couche groupée temporaire. Supprimons celui-là. Ferme-le. En fait, une dernière chose. Nous devons revenir en arrière et nommer à nouveau cette colonne de gauche colonne de droite, et nous devons également supprimer l'état de survol du premier bouton. Donc, je vais supprimer cela, et je vais aussi changer l'opacité de celui-ci car il n'est pas joué et nous devons le changer à 80%. Parfait. D' accord, allons-y et fermons tout ça et jetons un coup d'oeil à notre design de site web. Je veux revenir sur la commande ou le contrôle et zéro pour zoomer tout le chemin. Faisons en sorte que tout soit allumé ici. On dirait que je vois ma section vidéo. On y va. Parfait. Félicitations. Nous avons maintenant terminé d'améliorer notre projet de conception de site Web. Et comme je l'ai déjà mentionné, je vous recommande fortement de passer par ce projet et de créer votre propre design créatif afin que vous puissiez l'ajouter à votre portefeuille. Une fois cela terminé, vous serez prêt à passer à la conception Web. Projet numéro quatre. Merci d'avoir écouté et passer une journée géniale. 56. Projet 4 : Briefing immobilier: bonjour et bienvenue à notre projet de conception Web numéro quatre. Donc, pour ce projet de conception, nous allons prendre un autre site Web existant et le reconcevoir pour le rendre convivial et aider le client à gagner plus d'affaires. Et une fois que je vous montrerai le design original, vous remarquerez beaucoup de similitudes avec certains des projets que nous avons déjà réalisés. Il y a beaucoup de mauvais sites Web conçus là-bas qui ne sont pas conviviaux. Mais ne désespérez pas. Nous allons apprendre de nouvelles choses dans ce projet. Je vais te montrer comment enlever quoi que ce soit d'une image. Donc, nous allons vraiment faire quelques retouches sur l'image principale. Et je vais aussi vous montrer comment créer des icônes à partir de formes. Et bien sûr, je vais partager quelques conseils supplémentaires sur la conception de Web pro tout au long du chemin. Donc, sans plus tarder, laissez-moi vous montrer le design original du site Web que nous allons refaire le rouleau de batterie, s'il vous plaît. Ici, il est dans toute sa gloire. C' est le site immobilier locatif et c'est horrible. Nous avons un énorme logo et un numéro de téléphone avec leur emplacement de bureau juste ici. Je ne sais absolument rien de cette entreprise quand j'ai visité pour la première fois parce que je n'en ai jamais entendu parler avant. Et je ne suis pas prêt à t'appeler parce que je ne sais pas pourquoi je t'appelle. Je viens sur votre site parce que j'ai besoin d'un endroit à louer ou je veux inscrire une maison ou un condo que je veux louer. Mais je ne suis pas sûr de vouloir faire affaire avec toi, alors pourquoi je vais t'appeler ? Nous devons donner à nos prospects une raison de nous appeler. Et en plaçant le numéro de téléphone avant centre. Ce grand n'ajoute vraiment aucun avantage pour ce prospect à moins qu'ils ne visitent le site en raison d'une recommandation. Et ils ont juste besoin du numéro de téléphone. Eh bien, bien, dans ce cas, c'est facile pour eux de trouver. Dans l'ensemble, je pense juste que la zone d'en-tête est trop grande, surtout pour le logo. Nous avons quelques boutons qui ont été conçus à partir des années 90. Ce style Grady int est obsolète. Différents éléments de la page de quelle ne pas s'allier avec d'autres éléments. Nous pouvons voir que le logo n'est pas aligné avec la navigation. L' image ci-dessous n'est pas alignée avec la navigation etcetera, donc globalement, la conception est bâclée. Nous avons un titre ici expliquant essentiellement ce qu'est cette entreprise et ce qu'elle fait. Ils offrent des offres immobilières locatives dans la région de la Nouvelle-Angleterre plus précisément, la région de Lincoln New England. Alors que vous faites défiler vers le bas, vous remarquerez ici une image très pixélisée. Ils ont utilisé des images de mauvaise qualité, puis il semble qu'ils les dimensionnent à la mauvaise taille, ce qui crée des pixels izés et rend l'image floue. Donc, dans l'ensemble, la qualité de l'image est horrible. Il s'agit d'un curseur, sorte que vous pouvez faire glisser deux propriétés différentes, mais elles sont toutes de la même qualité. Et je crois que les images de qualité supérieure, bien photographiées sont meilleures que les images de faible qualité. Et laissez-moi vous donner un exemple. Pourquoi la dernière fois que tu as vu une pub pour , McDonald's,Burger King ou Wendy's ? Et ils font un gros plan de leur nourriture. Peu importe ce qu'ils font la promotion et que vous le voyez et que la nourriture est belle. Les petits pains sont de la bonne consistance. Vous pouvez voir la texture. C' est pointu. Vous pouvez voir les condiments, les tomates et la laitue. Tout est frais et croustillant et le hamburger a l'air dodu et juteux, et tu es comme, Oh mon Dieu, j'ai envie de ce repas en ce moment. Je dois l'avoir maintenant Imaginons s'ils ont utilisé à quoi ressemble leur nourriture. Quand vous allez au lecteur à commander quelque chose et que vous l'ouvrez et vous êtes comme, OK, le pain est écrasé. La viande a l'air séchée. La laitue est un peu brune. La tomate n'a pas l'air fraîche, ressemble presque à de la pâte de tomate. C' est vraiment une mauvaise tomate, mais vous avez l'idée. S' ils ont montré le véritable hamburger que vous traversez dans leurs publicités, vous ne serez pas aussi excité d'aller prendre ce repas à ce moment-là. Les images de qualité sont donc importantes afin de générer de l'intérêt, garder leur intérêt et de rendre cette personne excitée par cette propriété spécifique. Si l'image était nette, a été tourné professionnellement et peut-être été tourné plus tard dans la journée afin qu'il y ait comme un coucher de soleil en arrière-plan, ça va sembler beaucoup plus invitant. Puis cette image mal éclairée ici, donc l'imagerie est très, très importante. Vous pouvez mettre les meilleures images et votre design Web, mais en fin de compte, si votre client vous donne de mauvaises images comme celle-ci à mettre sur leur site Web, peut-être que vous codez le site aussi. n'y a pas grand-chose que vous pouvez faire ou vous pouvez vendre vos services et prendre de meilleures photos que ce qu'ils vous donnent et lui facturer pour ce service. Peut-être que tu n'es pas photographe. Vous n'avez pas l'équipement. Vous ne savez pas comment prendre des images professionnelles, externaliser et ensuite facturer des frais pour la coordination de ce service. Vous ne voulez pas le séparer sur votre facture. Vous allez simplement prendre ce que le photographe va vous facturer et ensuite augmenter le prix de 10 ou 20 % ou ce que vous voulez facturer pour ce service supplémentaire parce que vous prenez le temps d'embaucher quelqu'un et de coordonner et de gérer le projet. Vous avez donc besoin d'une indemnisation en échange de ce fait. C' est donc un autre type de service que vous pouvez vendre à vos clients. Très bien, faisons défiler et regardons un peu plus ce site et je vais vous montrer le design que j'ai trouvé. Donc nous avons cet énorme bloc gris de rien. Ceci avec leur logo et un paragraphe, donc ils sont dans la région depuis près de quatre ans. Mais leur site Web ne reflète pas cela parce qu'il est mal conçu, il semble non professionnel. On dirait qu'ils sont un débutant, et ils ne dépeignent pas quelle que soit leur marque. Donc je pense qu'ils se font un mauvais service et affaiblissent certainement augmenter leur entreprise, ce qui est notre objectif final, parce que leur objectif est de louer plus de biens immobiliers pour gagner plus de revenus parce qu'ils sont un pour société à but lucratif, et nous pouvons les aider à le faire en créant un site Web bien conçu qui est convivial et professionnel, et qui seul devrait augmenter leur activité. Maintenant, ils essaient d'ajouter une preuve sociale en plus de dire qu'ils sont dans la région depuis près de 40 ans, et c'est via cette boîte ici, qui est un code Facebook que vous pouvez ajouter à vos barres latérales qui liste votre plus que vous avez publiées ainsi que le nombre de goûts que vous avez pendant qu'ils sont dans la région depuis plus de 40 ans. Et je sais que Facebook n'est là que depuis quoi, 10 ans ? Ils n'ont que 99 lumières. Ce n'est pas une source de crédibilité pour cette entreprise en particulier. Je préférerais voir ce que nous avons fait dans les projets précédents, et c'est ajouter des logos d'entreprises avec lesquelles ils ont travaillé auparavant. Et ça va ajouter plus de crédibilité que 99 lumières. Je voudrais certainement enlever cela, au moins sur la page d'accueil. Maintenant, si tu as un blawg, tu peux mettre ça là-dedans, et c'est bon. Ok, donc maintenant on a un bouton qui dit appeler R E. Pourquoi je t'appelle ? Je ne sais pas pourquoi je t'appelle. J' ai besoin d'une propriété. Mais je n'ai toujours pas vu d'autres propriétés que ces images mal éclairées sur des images immobilières floues et pixélisées . Nous devons donc rendre plus facile pour les prospects de trouver des propriétés à louer et rendre plus facile pour les propriétaires qui ont des propriétés à louer liste de leurs propriétés. Maintenant, toutes ces informations sont sur ici. Maintenant, nous avons une autre section ici pour être amis des animaux de compagnie. Donc, c'est quelque chose que nous pouvons souligner comme un avantage pour aller avec cette société immobilière de location par rapport aux autres parce que tout le monde n'est pas acceptable pour les animaux de compagnie. Mais revenons à ce que je disais Juste une seconde, il y a des façons pour les gens de naviguer vers différentes parties du site Web pour obtenir l'information dont ils ont besoin. Mais je pense que nous pouvons réellement placer certaines de ces informations sur la page d'accueil pour remplacer certaines des informations qu'ils ont déjà sur ici et améliorer la conception du site Web avec une meilleure mise en page pour faciliter les prospects de trouver ce dont ils ont besoin, ainsi que pour faciliter la liste de leur maison particulière qu'ils souhaitent louer. Laissez-moi vous montrer le design que j'ai trouvé, et la première chose que vous allez remarquer est que j'ai redessiné le logo. Le logo est un peu obsolète, et j'ai également réduit la taille du logo ainsi que les coordonnées, que les coordonnées, juste pour donner de l'importance à des éléments spécifiques. Ok, donc ils veulent s'assurer qu'il y a le logo à l'avant et au centre. Je l'ai toujours fait sans l'avoir aussi grand juste en créant un fond bleu que j'ai pris à partir des couleurs de leur logo existant. J' ai donc gardé leurs couleurs de marque. J' ai juste changé les polices et le logo lui-même pour le rendre plus à jour et un peu plus professionnel ou beaucoup plus professionnel que ça. Donc la première chose que nous allons voir, c'est le logo que nos yeux. Ils vont naviguer vers la navigation, et puis si nous savons déjà ce que nous voulons ou à qui nous voulons parler affaiblir, Voir que nous avons le numéro de téléphone ici, et nous pouvons également postuler maintenant. Donc, si nous avons été renvoyés à cette société et que nous savons ce que nous voulons, nous pouvons postuler maintenant plutôt que d'essayer de la trouver ailleurs. L' autre chose que vous remarquerez, est une image de haute qualité pour la section héros, qui représente ce que cette société fait l'immobilier. Nous voulons également faciliter pour les prospects de trouver des endroits à louer avant et centre. Dans la section héros. Nous avons une option pour filtrer le type de propriété qu'ils veulent et où, afin que nous puissions mettre dans un budget avec une liste déroulante de la ville. Nous voulons rechercher des chambres et des bains, puis nous pouvons filtrer en fonction de ces sélections, et cela nous mènera à une page avec toutes les annonces basées sur ce filtre à nouveau, nous voulons le rendre convivial. Nous voulons aider les prospects à trouver facilement ce qu'ils veulent. Ils ne sont pas prêts à filtrer, donc ils vont faire défiler vers le bas, et ils vont trouver quatre avantages de la raison pour laquelle ils devraient travailler dans ce lieu de location immobilier particulier par rapport à d'autres. S' ils créent un compte, ils recevront un e-mail. Lorsque de nouvelles propriétés sont répertoriées, les gens sont occupés et peuvent ne pas vouloir revenir continuellement tous les jours pour rechercher des propriétés . Donc, si nous pouvons rendre facile pour les gens de trouver ce dont ils ont besoin et de les ramener à nos clients, sites Web et non à nos concurrents, parce qu'ils peuvent ne pas se souvenir du site qu'ils ont visité il y a 20 minutes et demain ou la semaine prochaine, ils ne se souviennent peut-être pas de l'entreprise qu'ils ont visitée en premier, et ils trouveront simplement quelqu'un d'autre à louer. Nous allons donc faciliter la création d'un compte et fournir des e-mails de nouvelles propriétés. Et encore une fois, ces moyens aériens que vous pouvez monter. Donc, vos clients de conception Web me permettent de vous aider à générer plus de revenus, et voici mon idée sur la façon dont je peux le faire. Donc, ici, vous pouvez ajouter ceci comme une vente up. Je veux vous aider à générer plus d'affaires, et c'est ainsi que nous allons le faire. Voici un autre service que je recommande à votre entreprise pour vous aider à augmenter votre activité. Créer loin. Ou quelqu'un dans l'entreprise peut aider les locataires à organiser leurs services publics. Vous allez les aider à installer leurs nouveaux résidents avec de l'électricité, du gaz Internet et plus encore. Ainsi, vous pouvez les aider à comprendre comment faire cela. Et vous allez les facturer pour les aider à faire ça ? Pourquoi ne pas aider les prospects pour les locataires ? Trouve un colocataire. Vous pouvez créer un forum ou une autre méthode dont les gens peuvent se trouver sur votre site, M. Client, pour trouver un colocataire. Et, bien sûr, vous offrez déjà un environnement accueillant les animaux de compagnie. Et les animaux de compagnie sont les bienvenus dans certains endroits. Filtrez facilement votre recherche que nous allons et à comme un autre avantage, je vais vous montrer comment créer ces icônes particulières ainsi en utilisant notre outil de forme. Ok, donc peut-être qu'ils ne sont pas locataires. Peut-être qu'ils sont propriétaires. Alors qu'ils défilent vers le bas, les propriétaires vont voir ça parce que c'est avant et au centre. Il est divisé entre tout le reste avec un fond bleu vif basé sur les couleurs de marque de cette entreprise . Êtes-vous un propriétaire posé votre annonce pour la liste gratuite. Maintenant, si nous avons une action appelée pour que les propriétaires listent leurs propriétés maintenant et puis en bas, nous pouvons alors commencer à filtrer les propriétés en fonction des quatre ou cinq principaux types de filtres que les gens utilisent. Ensuite, nous pouvons automatiquement placer de nouvelles annonces dans cette section ici. Si vous voulez trouver plus de locations acceptant les animaux de compagnie, vous pouvez y accéder en cliquant sur ce lien à nouveau Seymour, nous facilitons pour les gens de trouver ce dont ils ont besoin, Nous avons donc différents types de catégories pour les gens de trouver ce que ils veulent. Ensuite, une autre chose que je recommande à cette société de s'assurer que les gens continuent revenir sur leur site ou simplement de les découvrir via les moteurs de recherche est de créer un bloc afin que vous puissiez les aider à mettre en place un blawg et commencer à créer du contenu pour qui blawg et fournir vos services professionnels à des frais supplémentaires au-delà de la conception initiale . Donc un autre type de service que vous pouvez vendre à vos clients, donc j'ai mis en place une petite section pour leur nouveau blawg et ensuite sur la droite, nous pouvons mettre en place une barre latérale de contenu supplémentaire ou vous pouvez leur fournir un autre idée pour générer plus de revenus. Et c'est d'offrir cet espace comme espace publicitaire afin qu'ils puissent vendre de l'espace publicitaire ici aux entreprises de leur région. Par rapport à cela ici, il n'y a aucune information, aucune valeur, aucune crédibilité ici. C' est toujours cet espace. Ils sont mieux d'offrir un blawg avec des liens vers les articles les plus récents, ainsi que de vendre de l'espace publicitaire pour générer des revenus supplémentaires afin qu'ils se plient dans la région pendant près de 40 ans. Je vous garantis qu'ils connaissent des gens dans la région qui seraient heureux de jamais liens dans cette partie de leur site Web. Voilà donc toutes les suggestions que vous pouvez donner à votre client pour l'aider à gagner un revenu supplémentaire et à développer son entreprise. Et c'est ce que nous voulons faire en tant que concepteurs Web. Nous ne voulons pas être juste un autre concepteur Web. Bonjour, M. Client. Qu' est-ce que tu veux ? Quel genre de style de design aimez-vous ? Bla, bla , bla. OK, voici le design. Merci. Au revoir. Non, faisons quelque chose de différent. Soyons meilleurs que votre concepteur Web moyen. Aidez-nous ces entreprises à développer leur activité parce qu'en fin de compte, c'est pourquoi elles vous embauchent pour concevoir leur site Web. Ils veulent un site Web où ils peuvent vendre leurs produits et services, et si vous pouvez leur montrer des moyens d'accroître leur activité, alors devinez quoi. Ils vont vous diriger vers d'autres personnes qui ont besoin de sites Web pour générer plus d'affaires. Et une fois que tu auras une recommandation, tu en auras une autre et une autre, et avant que tu le saches, tu auras plus de travail. Ensuite, vous pouvez gérer, et ensuite vous pouvez commencer à augmenter votre prix en conséquence parce que vous aidez les gens à gagner plus d'argent et vous devriez être indemnisé pour cela. Et puis, en augmentant vos prix, vous contrôlez également le volume ou la quantité de travail que vous effectuez. Voulez-vous faire 2025 conceptions de sites Web par mois à 200$ un site Web C'est 5000$ par mois, Ou préféreriez-vous faire cinq conceptions de sites Web par mois à 1000$ par site Web ? Je préférerais faire cinq contre 25 parce que je gagne la même somme d'argent pour moins de travail . Maintenant. Je ne dis pas que c'est ce que je charge ou ce que vous devriez facturer. Je veux juste que vous réfléchissiez à la façon dont vous pouvez être différent de toutes les autres dizaines de milliers de concepteurs Web là-bas. Vous devez vous séparer d'eux mawr que simplement basé sur votre style de conception. Vous devez fournir des services qui vous séparent de la concurrence. Enfin, nous avons aussi un pied de page simple, avec quelques liens vers des icônes de médias sociaux, puis quelques liens vers d'autres parties du site Web. Nous avons notre politique de confidentialité. Nous avons des informations légales. Nous avons une carte du site qui fournira des liens vers toutes les différentes pages du site Web. Nous avons également un moyen pour les gens de faire de la publicité avec eux si vous n'avez pas de lien vers une page sur la publicité, et alors les gens ne vont pas savoir comment faire de la publicité avec cette entreprise. Donc, si vous pouvez vendre votre client sur le service, vous allez vouloir mettre un lien quelque part pour que les gens sachent qu'ils peuvent faire de la publicité sur le site. Nous avons également besoin d'un droit d'auteur. Nous avons également besoin d'informations sur les droits d'auteur ici est bien, je ne l'ai pas inclus dans cette conception, mais ce n'est pas pertinent. Donc ce que nous allons faire, c'est que nous allons créer ce design de site en commençant par retoucher cette image principale ici parce que l'image avait à l'origine une ou deux voitures, je pense dans ce domaine. Et j'ai senti que ça n'aidait pas l'image globale. Et j'aime mieux l'image avec la voiture qu'avec la voiture. Donc je vais vous montrer comment enlever la voiture de cette image particulière, puis nous allons travailler sur le logo et ensuite nous allons continuer à construire le site à partir de là. J' ai hâte de partager cette information avec vous. Si tu es prêt, faisons-le. 57. Retouch: Bonjour et bienvenue. Très bien, donc j'adore cette photo pour ce projet de design Web particulier parce que je pense que c'est une image très forte. Cela reflète ce que fait notre client, et c'est la location de biens immobiliers. Cela étant dit, cet emplacement particulier ne fonctionnera probablement pas pour le client, car ils n'ont probablement pas cette liste sur leur site. Et deux, cause de l'emplacement maintenant basé sur les palmiers. Nous pouvons deviner que c'est probablement quelque part dans le Sud, et notre client est au Moyen-Orient parce qu'ils s'adressent à la région de Lincoln Nouvelle-Angleterre. Mais je pense toujours qu'il est correct de montrer cette image dans la conception initiale parce que c'est une image forte , et vous voulez dépeindre à vos clients une image forte afin qu'ils puissent voir la différence entre une grande image comme celle-ci par rapport à première image que je vous ai montré dans la leçon précédente où le ciel est lavé, son pixélisé. Il a des ordures à l'avant de l'image, et il ne reflète pas vraiment bien le type de propriétés qu'ils peuvent vouloir louer ou il ne décrit pas vraiment cet emplacement particulier ainsi que cette image Douzaine comme j'avais mentionné précédemment pour cette image que nous avions à partir de leur site Web. Cela ferait une énorme différence de photographier cette image plus tard dans l'après-midi ou en début de soirée . Donc, vous avez un coucher de soleil qui se passe en arrière-plan avec quelques nuages et un peu de couleur dans le ciel . Cela va rendre cette propriété beaucoup plus attrayante, comme cette image le fait ici avec le coucher du soleil, l'éclairage et la composition et tout reste de cette image est beaucoup plus professionnel que cette autre image. Cela ne veut pas dire que toutes leurs propriétés vont avoir des images comme ça. Mais tu veux avoir une image forte dans la section des héros pour attirer l'attention des gens. Si vous montrez une image avec des ordures dans la pelouse avant et que vous pouvez vraiment la voir parce qu' elle est pixellisée ou floue ou les deux, alors elle ne ressemble pas vraiment au type de site à partir duquel vous pouvez louer car ils affichent bas de gamme propriétés. Rien de mal à ça. Peut-être qu'ils ont beaucoup de ces types de listes, mais vous pouvez toujours représenter n'importe quel type d'emplacement beaucoup mieux en prêtant attention aux détails de l'image pour rendre cette image dans cet endroit beaucoup plus attrayante que peut-être vraiment est. Maintenant. La seule chose que je n'aime pas dans cette image, ce sont ces deux voitures. Donc je pense qu'en enlevant ces deux voitures comme je l'ai fait ici, cela va rendre cette image beaucoup plus forte et beaucoup plus attrayante. Alors allons de l'avant et téléchargeons cette image en allant choisir sabei dot com, puis tapez simplement ce nombre ici. 690086 et pour rechercher et vous serez directement redirigé vers cette page où vous pouvez télécharger cette image. Donc, je vais télécharger l'image 1920 par 10 82, puis je vais saisir ce fichier et l'apporter dans mon modèle de grille. Donc, vous voulez aller de l'avant et ouvrir ce modèle de grille d'une leçon précédente pour commencer à partir de zéro sur ce projet particulier, aller de l'avant et fermer les grilles, puis nous allons redimensionner l'image pour qu'elle soit complète ou, en d'autres termes, bord des orteils. Donc, en ce moment, l'image est de 1900 pixels de large, allons-y et redimensionnons-la avec notre décalage d'outil plus s. Et puis nous allons taper le avec, qui est 1400. Et puis la hauteur devrait être 7 89 Une fois qu'il chose squelette, il suffit de le déplacer en position ici, et puis nous allons aller de l'avant et retoucher cette image et enlever ces deux voitures. Maintenant, au début du cours, nous avons parlé de deux types d'outils que vous pouvez utiliser pour la retouche, savoir l'outil de clone et l'outil de guérison pour ce type d'édition. Je pense que l'outil de clone serait la meilleure option pour enlever ces voitures. Alors allons de l'avant et attrapons cet outil, qui se trouve juste ici. Ou si vous avez mis à jour vos raccourcis clavier comme mentionné au début du cours. J' ai l'esprit à la lettre s pour le raccourci clavier. Maintenant, une fois qu'on a cliqué dessus, on ne peut rien faire encore. Si nous jetons un coup d'oeil ici, il est dit, définissez d'abord une image source. Donc, ce que nous devons faire est de dire à Gimp, où voulons-nous cloner à partir de l'image afin de retoucher la zone qui doit être retouchée. Donc, avec cet outil, si je maintiens ma touche de commande ou de contrôle enfoncée et que je clique dans cette zone ici, puis une fois que je bouge, le contour de l'outil est appliqué à cette zone, donc nous savons que cette zone va être appliquée n'importe où. Je clique et fais glisser ma souris. Maintenant, fur et à mesure que je monte, vous pouvez voir le contour de l'outil vers la droite. Il suit mon mouvement de pinceau, et il va continuer à ajouter de droite à gauche. Et c'est comme ça que nous touchons avec cet outil. Maintenant, la clé pour utiliser cet outil avec des images comme celle-ci qui ont une perspective spécifique. Vous voulez vous assurer que cette perspective n'est pas brisée, parce que si vous cliquez dans la mauvaise zone, le début, alors cette ligne est que va se rencontrer ici à l'autre extrémité. Donc, ce que je recommande de faire pour cela est de commencer de cette façon, puis de glisser vers la droite Maintenant , vous avez peut-être remarqué que la bordure a changé en autre chose à ce stade, et c'est parce que lorsque vous faites glisser vers le bas, c'est va continuer à tirer les données ou les pixels de cette zone et quand vous allez assez loin. Il prendra ensuite les pixels de la voiture. Ici est bien, donc nous allons cliquer et faire glisser relâcher, puis cliquer et faire glisser sur les pixels que nous ne voulons pas dans cette zone. Donc je vais commencer dans ce domaine ici, et ensuite je vais juste suivre cette ligne vers le bas pour essayer de trouver où j'ai commencé avec cet outil. Alors maintenant, j'ai cette voiture appliquée dans ce domaine. Donc, je vais juste cliquer ici et recommencer, et maintenant j'ai un trait différent en cours d'application à cette zone. Ok, nous pouvons également redimensionner ou brosser avec nos clés de support. ce moment, j'ai mes seins, je me mets à environ 14. Vous voulez donc l'augmenter ou la diminuer en fonction de la zone dans laquelle vous travaillez, car vous ne voulez pas ajouter de pixels là où ils ne sont pas nécessaires s'ils n'ont pas besoin d'y être ajoutés. Donc si j'appuie sur ma clé de support gauche, ça va rendre cette taille de poitrine plus petite. Alors maintenant, c'est plus près de quatre. La clé du support droit va le rendre plus grand, donc maintenant elle est plus proche de 30, ce qui le rend juste plus facile et plus rapide que de venir ici et d' ajuster la taille de votre brosse au fur et à mesure que vous travaillez. Ainsi, vous pouvez littéralement redimensionner votre pinceau au fur et à mesure que vous travaillez. Donc, juste ici, j'ai un peu plus de la bordure que je ne veux pas, donc je vais rendre ma naissance plus petite avec la clé du support gauche. Je vais maintenir ma touche de contrôle ou de commande enfoncée si vous êtes sur un Mac ou un PC et puis je vais réinitialiser où je veux cloner à partir d'ici. Et puis il couvrira cette zone là où je ne veux pas que la courbe soit dans cette zone. Donc je vais aller de l'avant et faire les pneus et le fond de la voiture ici maintenant, donc encore une fois, contrôle ou commande de dire à Gimp d'où cloner et puis juste peindre sur cette zone. L' autre chose que nous voulons faire en tant que concepteur Web est que nous ne voulons pas retoucher les images gratuitement . Si des clients vous demandent de retoucher une image, dites oui, je peux le faire. Je peux fournir ce service. Mais c'est combien cela va coûter à faire. Donc vous devez déterminer combien vous allez facturer pour retoucher vos images. Et bien sûr, certains sont plus faciles que d'autres. Donc, vous devez être en mesure de savoir combien vous voulez facturer pour ce service particulier. Si vous allez le faire vous-même ou si vous allez aux pieds, externalisez-le. Vous devez ensuite élaborer un plan de tarification pour augmenter ces frais particuliers de la part de la personne effectuant la retouche afin que vous puissiez être rémunéré pour la gestion de ce projet particulier . Je vais venir chercher l'herbe. Je vais cacher l'ombre ici parce que cette ombre vient de la voiture. Et puis je vais aller de l'avant et continuer à ajouter de l'herbe dans cette zone ici, peut-être ajouter un peu de trottoir ici et l'autre chose que je vais faire en tant que concepteur Web quand je retouche une image pour la conception initiale du Web, je Je ne m'inquiète pas d'être parfait à 100%. Les clients ne vont probablement pas remarquer de petites choses. Et puis une fois qu'ils approuvent les images retouchées, vous condamnez, revenez en arrière et expliquez que l'image originale a été retouchée. C' est combien va coûter pour le retoucher que vous allez vous assurer que l'image sera Vous voulez vous assurer que c'est une image de haute qualité, une qui va sur un site Web en direct. Donc, vous allez expliquer que les prix basés sur ce service particulier, cette qualité et pourquoi il va coûter X montant. Ensuite, vous pouvez simplement facturer des frais fixes pour faire quelque chose comme ça. Parce qu'une fois que vous apprenez à le faire vous-même et que vous savez comment le faire, cela ne devrait pas prendre autant de temps pour faire 10 15 20 minutes, peut-être un demi-Knauer, pour faire une retouche complète comme celle-ci avec une attention totale aux détails. Donc je vais juste entrer et cliquer sur ma touche de contrôle ou de commande pour remplir la zone de défense maintenant. Super. Donc je pense que cette voiture est terminée. Allons-y et zoomons, et on pourrait voir qu'il y a quelques restes de l'ombre du fond, la voiture juste dans cette zone, et c'est ce que je veux dire par une retouche de qualité supérieure. Je passais un peu plus de temps à mélanger cela avec mon clone et mon outil de talon ainsi que pour rendre ce look beaucoup plus naturel. et beaucoup plus professionnel. Et parce que c'est la conception initiale et les chances sont que ce client particulier ne va pas utiliser cette image parce qu'elle est du Sud et ce n'est pas dans leur région où ils louent. y a vraiment pas besoin d'aller à la perfection avec cette image particulière. Ok, donc fondamentalement la même chose. Nous allons dire à Gimp où nous voulons cloner pour cette image particulière, et je pense que je veux vraiment commencer par ici. Bon, pour que le trottoir soit fait, allons de l'avant et travaillons sur la partie inférieure ici. Donc, pour cette partie particulière de l'édition, j'ai commencé ici comme le point où j'ai dit à Gim de cloner, et ça ne correspond pas vraiment au reste de la scène dans cette zone ici. Donc, dans ce cas, je ferais mieux de commencer mon clonage d'ici ou d'ici. Je vais essayer ici, et je vais probablement obtenir un meilleur résultat. Et c'est tout simplement dû à la texture et à l'éclairage dans cette zone par rapport à l'endroit où j'étais auparavant. Je vais aller de l'avant, zoomer pour voir un peu mieux. Et maintenant, j'ai un reflet dans la rue de cette voiture aussi. Donc je vais déplacer mon point de départ ou ma source de clone d'ici. Donc si on entre avec notre outil de guérison et qu'on ajoute un travail d'orteil source, je vais juste cliquer ici et ensuite peindre sur cette zone sur laquelle on vient de travailler avec le clone. Il va fusionner tous ces pixels beaucoup mieux que l'outil de clone seul. Ok, je vais retourner à mon outil de clone avec les lettres et je suis un aller de l'avant et je travaille sur cette zone herbeuse ici. Donc, au lieu de faire de longs coups, je fais juste de courts coups en cliquant et en faisant glisser parce que je veux rester dans cette zone ici. Sinon, je vais monter dans cette zone et commencer à ajouter du trottoir. Et je ne veux pas finir un trottoir, donc je vais juste cliquer sur de courtes rafales très courtes et continuer à traîner sur d'autres parties de la voiture jusqu'à ce que j'aie la zone couverte. Ok, voyons s'il y a un morceau de trottoir par ici. Je pense qu'on peut travailler avec ça ici. Encore une fois, il suffit de cliquer et de faire glisser de courtes rafales. Et je vais ajouter de l'herbe ici encore parce que je perds la perspective de ce trottoir maintenant parce que je fais le trottoir en grand. Je vais aussi faire la taille du sein juste un peu plus petite avec mes clés de support. Ok, maintenant, dans cette zone, nous avons la voiture qui couvre une partie de nos arbres. Donc, pour cela, je vais ajouter ma source de clone juste ici au milieu de l'arbre parce que nous avons une longue partie en bas étant couverte. Et je veux juste cliquer et être capable de glisser vers le haut et de suivre cette courbe le long de ce chemin. Juste besoin et un peu d'herbe par ici. Maintenant, on peut travailler sur l'escrime. Je vais vraiment commencer par ici avec ma source de clone. Donc, encore une fois, nous devons faire attention à l'endroit où sont les sources de clone. Plan Il est à droite par rapport à l'endroit où nous jouons réellement les pixels ici sur la gauche. Parce que maintenant j'ai une colonne à gauche de ce pinceau. Et de l'autre côté, où le clone sources cette colonne est beaucoup plus loin. Donc je vais juste peindre dans certains de ces buissons, cheveux devant, remplir le trottoir juste un peu, et ensuite je vais aller de l'avant et travailler de ce côté de la clôture et travailler comme ça maintenant , Donc je vais aller de l'avant et juste cliquer sur la colonne ici pour ma source de clone, et puis je vais juste peindre sur ce chemin à gauche, puis à droite, donc je dois aller de l'avant et choisir une autre partie de la clôture au centre. Donc, je vais revenir sur celui-ci et commencer sur ce petit post juste ici au milieu, puis ajouter ma première brasse juste ici, qui correspond au milieu de cette clôture où un petit poteau devrait être aussi. Ok, je vais et ma source proche sur cette colonne maintenant et travailler sur cette colonne. Donc encore une fois, des coups courts et juste glisser vers le haut pour remplir cette zone. Je veux juste voir à quoi ressemblent ces messages ici. D' accord. Je vais aller de l'avant et prendre ce poste maintenant et on a presque fini. L' autre chose que je fais est que j'ai ma main gauche sur le côté gauche de mon clavier où se trouve ma touche de commande ou de contrôle. Donc, je peux rapidement cliquer et sélectionner une nouvelle zone à cloner à partir de Cam. Je vais juste nettoyer le trottoir ici à l'avant. Donc le trottoir est un peu loin ici. Donc, si je retouchais cette image pour le produit fini, cela passerait probablement un peu plus de temps sur le trottoir. Mais je pense que pour ce projet particulier et la conception initiale est bien parce qu'ils ne vont vraiment pas zoomer à 769% et être comme, OK, OK, ce trottoir est éteint. Ça n'a pas l'air bien. Je pense que dans la conception initiale, ils ne vont même pas le remarquer, surtout quand nous avons du contenu dans ce domaine aussi. Ils vont se concentrer davantage sur ça et qui réalisent que le trottoir n'est pas parfait à 100% . Mais encore une fois, s'ils payent pour mes services pour retoucher cette image, je vais passer plus de temps pour en faire un parfait pour elle plutôt qu'une édition pour le premier brouillon. Ok, donc c'est tout pour retoucher cette image particulière dans le prochain tutoriel, nous allons commencer sur le logo et la zone d'en-tête de la page Web, donc si vous êtes prêt pour ça, faisons-le. 58. En-tête: Bonjour et bienvenue. Bon, donc pour cette leçon, nous allons travailler sur la section d'en-tête de notre projet de conception Web. Nous allons ajouter une navigation primaire et secondaire. Nous allons créer un nouveau logo, ce qui sera très simple à faire. Il va être propre et plus professionnel que le logo qu'ils ont actuellement. Et l'autre chose que je veux mentionner vraiment rapide est, comme vous avez conçu de plus en plus de sites Web, vous pouvez vous retrouver en utilisant le même type de formes ou d'éléments encore et encore dans de nouveaux projets. Par exemple, dans notre projet précédent, nous avons créé cette navigation principale avec une icône de hamburger pour montrer ou représenter que la navigation sera affichée ou masquée. Lorsque vous cliquez sur cette icône particulière. Maintenant, j'aime cette police. J' aime la taille que j'aime l'icône du hamburger, donc il n'y a vraiment aucune raison pour moi de le refaire à partir de zéro quand je l'ai déjà fait précédemment dans un projet différent, donc nous pouvons réellement prendre cette navigation et l'ajouter à notre projet, que j'ai fait dans la conception initiale. Nous avons juste besoin de changer quelques longueurs parce que ce sont des propriétaires immobiliers ou des personnes qui cherchent à louer par rapport à des vidéographes ou un spécialiste de l'audio. Alors, allons ici et retirez le logo. Alors allez-y et ouvrez ce fichier, puis supprimez également l'arrière-plan de l'en-tête. Et puis nous pouvons cliquer et faire glisser ce groupe cette couche vers notre projet actuel et ajouté dans. Alors allons-y et mettons-le en position ici. Ce ne sera pas encore exact. On va juste le faire, et je peux aller de l' avant et renommer cette navigation primaire. Allons de l'avant et définissons notre espace d'en-tête. Donc, tirons une ligne directrice vers le bas 2 20 pixels. Donc ça va nous donner notre espacement en haut. Et puis nous allons descendre 1 à 1 20 qui sera la base de notre navigation primaire, le bas de notre texte ici, ou l'icône du hamburger et notre logo. Donc, nous pouvons réellement Graham notre navigation primaire maintenant et la mettre en place. Donc, juste comme ça, nous avons presque fini avec la section d'en-tête. Allons de l'avant et faisons la navigation principale que je vais utiliser le chemin de fer pour la police. Je vais en faire 14 pour la taille. Et puis, bien sûr, nous avons besoin de White. Donc je vais juste taper un numéro de téléphone, puis cinq espaces pour avancer des barres obliques, puis cinq espaces à nouveau et ensuite appliquer maintenant. Donc, je vais sélectionner ceci parce que je veux rendre ce contenu en gras. Alors allez-y et rendez ça audacieux. Et cela aide juste à se démarquer un peu plus par rapport au numéro de téléphone, parce que je pense que postuler maintenant est plus important que le numéro de téléphone parce que beaucoup de fois je pense que les gens voudront faire une demande pour que leur immeuble soit inscrit sur le site Web. Ou peut-être qu'ils veulent louer un condo spécifique, un permis ou une maison ou quoi que ce soit le cas plutôt que d'appeler. Parfois, ils sont occupés, et il est juste plus facile de remplir un formulaire pour dire que je suis intéressé par cette propriété ou j'ai cette propriété à louer et voici mes coordonnées. Faites-moi savoir quelle est la prochaine étape. C' est pourquoi je mettrais en évidence l'application maintenant par rapport au numéro de téléphone et encore une fois que tout revient à la recherche et en savoir plus sur les perspectives spécifiques de votre client. C' est peut-être le contraire pour leur région du pays. Peut-être que les gens préfèrent appeler plutôt que postuler en ligne, et ils préfèrent postuler par téléphone ou prendre rendez-vous pour entrer. Et dans ce cas, après les renseignements que je reçois de mon client, je ferais alors le numéro de téléphone en caractères gras et ne s'appliquerais pas. Maintenant, je veux dire pas même mettre appliquer maintenant. Si leur clientèle est là, les prospects n'aiment pas postuler en ligne. Bon, allons-y et mettons-le en position. Allons sur nos guides, Commandant Contrôle et Semi Colon, et je vais le placer en haut de cette ligne directrice. Cela va donc être en ligne avec notre logo parce que notre logo va couvrir la hauteur entre ces deux lignes. Alors allons de l'avant et commençons sur ça. J' ai aussi besoin de retirer cela et de l'appeler navigation secondaire. Ok, créons un nouveau calque appelé fond de logo, puis, avec notre outil de sélection de rectangle, faisons un rectangle. Disons 1 90 par je crois que c'est 100 pour la hauteur. OK, donc avant qu'on puisse demander, remplissez cette couleur de fond, nous devons trouver leur couleur exacte de marque. Laisse-moi te montrer comment tu peux faire ça. Si vous êtes sur le site Web d'un client et qu'il ne connaît pas la couleur exacte à vous donner, vous pouvez effectivement trouver un sélecteur de couleur plug in. Et je pense que nous en avons parlé dans une leçon précédente. Et quand vous avez ce plug in installé, j'en ai un qui s'appelle le Color Sélecteur. Je peux cliquer dessus, puis passer la souris sur une couleur que je veux, et cela vous montre juste en bas, l' hexadécimal. Un nombre décimal. Maintenant, quand je passe sur le logo, ça change parce qu'ils utilisent un logo de faible qualité qui est pixélisé, et il y a différents bleus là-dedans. Donc je vais juste choisir cette couleur bleue ici, et ensuite je vais la copier. Il suffit de prendre note de ce nombre parce que vous pouvez taper cela dans la zone de notation HTML juste ici. Une fois que vous tapez cela, frappez votre collant et puis vous obtenez cette couleur exacte, nous pouvons maintenant aller de l'avant et remplir cette case dans et d sélectionner. Allez-y et éteignez mes guides. Je n'en ai pas besoin, et jusqu'à la famille des fonds. J' ai choisi une police qui est un type de police plus moderne et mis à jour par rapport à ce qu'ils ont actuellement. Et il s'appelle Arrow, sorte que vous pouvez aller à w polices dot com avant la barre oblique pour télécharger cette police. Une fois que vous n'avez pas téléchargé et installé, vous devrez redémarrer gimp afin de finaliser l'installation de ce fonds. Donc, une fois que vous avez cette configuration, allez-y et configurez le fonds et les options de l'outil ici et pour la taille de la police, faisons 80 et la couleur blanche. Ok, allons de l'avant et tapons notre E dans toutes les capitales, puis mettons-le en position. Je pense que je veux y aller un peu plus petit. C' est un peu trop près du bord, alors je vais aller de l'avant et taper 75. Essaie ça. Ok, j'aime beaucoup mieux ça, et ensuite on va taper leur nom d'entreprise ici en bas. Changons la police en chemin de fer, et je ne suis pas sûr de la taille. Je vais commencer par 16 et nous devrons peut-être augmenter ça. Donc la location, les biens immobiliers. Allons-y et faisons-en 18. Ça a l'air plutôt bien. Je pense que c'est juste un peu éteint. Donc, ce que nous pouvons faire est d'augmenter la quantité d'espacement entre H. Funt et la raison pour laquelle c'est parce que je voulais faire correspondre le avec de R E. Donc, dans deux options, faisons 0.2. En fait, c'est trop. Je vais en descendre un, alors ça va faire 10.1. Allons de l'avant et créons un nouveau logo froid groupe de couches. Nous allons seulement mettre notre texte ici parce que je veux prendre ce logo le contenu et aligner sur l'arrière-plan. Alors allons de l'avant et prenons notre contexte local et recadrez au contenu. Ensuite, avec notre outil d'alignement, nous pouvons aller de l'avant et sélectionner les deux. Maintenez la touche Maj enfoncée, cliquez sur le logo, puis définissez-le sur le premier élément, puis alignez le centre et le milieu de la cible . Maintenant, le problème est nous avons une zone de texte plus grande que nous avons réellement besoin, donc nous devons retourner dans notre texte ici avec leur outil de texte et cliquer sur cette zone de texte haut, puis la faire glisser jusqu'à ce qu'elle atteigne le haut des lettres. Maintenant, après ça, ça pousse ces lettres vers le bas. Mais nous avons maintenant la bonne taille dont nous avons besoin pour l'aligner parfaitement au milieu. Revenons à nos hommes de ligne. Les outils se réalignent, puis nous devons revenir dans notre zone de texte à nouveau et remonter à l'endroit où il était auparavant. Donc je pense que c'était un peu plus haut que ça. Ok, on peut aller de l'avant et mettre nos antécédents à l'intérieur maintenant. Donc, la dernière chose que nous devons faire est de mettre à jour notre navigation principale avec le contenu correct pour aller de l'avant et double-cliquer avec mon textile sur l'audio pour le sélectionner, puis taper les propriétaires immobiliers. Et puis nous pouvons supprimer ce dernier. Le leader de ces cinq espaces supplémentaires ainsi. Appuyez sur votre clé d'échappement, et je pense que nous avons fini avec l'en-tête. Impressionnant ! Bon, maintenant que nous avons la tête ou que nous avons fini dans la leçon suivante, nous allons travailler sur notre section héros. Donc, si vous êtes prêt à obtenir la star sur ça, eh bien, faisons-le 59. Héros,: finissons maintenant notre section sur les héros pour qu'il soit plus facile pour les prospects de trouver ce dont ils ont besoin . Et dans ce cas, ils ont besoin d'une propriété locative à louer. Et ce que nous allons faire est de créer un filtre afin qu'ils puissent affiner leur recherche en fonction emplacement, du budget et d'autres options de filtre. Ensuite, ils peuvent filtrer et naviguer vers cette page avec ces filtres pour les propriétés immobilières qui répondent à leurs exigences. Donc, en substance, c'est une action froide, et nous facilitons les choses pour ces prospects. Teoh trouve facilement ce dont ils ont besoin en le fournissant directement dans la section héros. C' est vraiment simple à concevoir est juste basé sur les formes et le texte, alors continuons et faisons cela. Commençons donc par créer notre arrière-plan pour l'appel à l'action et ceci. Allez-y et créez un nouveau calque et montrons notre guide afin que nous sachions où placer tout. Je vais prendre mon rectangle sélectionnable avec la lettre M, et je vais le faire 1230 pixels de large et 200 pixels de haut. Allons de l'avant et choisissons une couleur de saleté. Commençons par le noir pour l'instant. Prenez votre seau, remplir l'outil et aller de l'avant et remplissez cela dans de select. L' autre chose que je veux faire est que je veux baisser l'opacité juste un peu pour qu' partie de l'image derrière elle passe à travers. Alors je vais faire le tour. Essayons 75 et nous devons également aligner cela au milieu, donc je pense qu'il serait préférable de l'aligner de haut en bas à gauche et à droite. Et nous pouvons le faire comme vous le savez, avec notre outil de sélection de rectangle. Alors allons de l'avant et attrapons cela et dessinez une sélection pour le centrer à l'intérieur de. Et bien sûr, nous devons aussi le recadrer au contenu. Et puis quoi ? Leur outil d'alignement. Nous pouvons l'aligner sur le centre de sélection et le milieu des cibles. Parfait. Ensuite, créons nos boîtes de filtre. Je vais aller de l'avant et créer une nouvelle ligne intitulée Budget Row et faisons trois colonnes de large. Et puis, pour la hauteur, nous allons faire 65. Choisissons notre couleur bleue que nous avons utilisée pour la marque, puis remplissons ça ok, allez-y et de Select Commander Control et la lettre D. Très bien, faisons le reste des boîtes et puis nous allons tout aligner après parce que nous avons également besoin d'un texte en haut de la page. Celle-là. On va faire quatre colonnes de large et faire la même hauteur de 65 ans puis les mêmes couleurs, et je vais juste aller de l'avant et terminer le reste. On va faire une colonne, une autre à une colonne, puis les 13 dernières colonnes, et elles seront toutes 65 pour la hauteur. Ok, allons de l'avant et attrapons tout ça et alignons-les au sommet. Nous devons également aller jusqu'à la couche et recadrer le contenu de chacune des différentes Rose. Mon Dieu, tu es Lyman Tool. Eh bien, Daniel, touche Maj et sélectionnez toutes les rangées. Changez-le. Le premier élément et une ligne vers le haut. Ok, on commence à avoir beaucoup de couches ici, et ça va organiser ça dans un peu chaotique ici. Alors allons de l'avant et organisons nos couches, et nous avons certainement besoin de tout mettre dans une couche de groupe pour l'en-tête aussi. Alors allons de l' avant et faisons ce groupe nucléaire appelé Header. - Allons de l'avant et ajoutons nos étiquettes en haut. Maintenant, nous allons utiliser le chemin de fer 14 points et blanc et vous pensez que je veux faire de l'italique au lieu de juste ordinaire. Alors le chemin de fer, je le dis, est venu éteindre tout le reste en ce moment, y compris l'arrière-plan, que nous puissions aligner ce texte vers le haut. Et nous devons également extraire ce texte de ce calque de groupe. Encore une fois, avec notre outil d'alignement, nous allons sélectionner chacun de ces éléments avec notre touche Maj puis un mensonge vers le haut. Ok, ajoutons nos étiquettes de formulaire qui vont à l'intérieur ici. Nous allons changer la police 2 24 pour les panneaux et les chemins de fer réguliers. Ok, allons de l'avant et prenons celui-ci et rendons ça vraiment audacieux. Donc je vais bien utiliser, tremblé. Ok, donc la dernière chose qu'on a à faire est d'aligner tout. Donc, pour les titres des étiquettes, allons les aligner sur le bord de leurs lignes et nous pouvons simplement entrer et saisir chaque calque. Je veux aussi les mettre en ordre, et ensuite je vais juste utiliser mon outil de déplacement pour le déplacer. Alors faites ça pour chacun d'eux. Et puis nous devons aligner nos étiquettes à l'intérieur de la Rose directement au centre. Et je veux donner un peu d'espace sur le côté gauche de chaque rangée aussi. Aussi, on dirait que ma ligne est éteinte d'un pixel. Donc je vais aller et déplacer ça, et on devrait aussi les organiser dans l'ordre dans lequel ils devraient être aussi. Je vais juste l'aligner sur le haut et le bas nouveau. Alors quoi ? Ce sont des rectangles électoraux. Nous pouvons faire une sélection, puis nous essaierons de la sélectionner avec notre outil d'alignement. Cela nous permet de le faire, de le changer en sélection, puis une ligne au milieu de la cible. Donc, je vais juste aller de l'avant et prendre chacune de ces autres couches et l'aligner au milieu de la cible aussi bien. Ok, allons de l'avant et bougeons tout ça. Mais d'abord, nous devons faire une mesure pour trouver la distance entre le bord gauche et notre texte afin que nous puissions le rendre tous égaux sur toutes les différentes roses. Maisla seule chose que je veux faire, Mais c' est que je veux prendre ce contenu et le déplacer vers la droite juste un peu pour lui donner plus de place à respirer ici, à gauche. J' ai donc 14 pixels. Je vais en fait sélectionner cela et en faire un beau même 15 pixels. Ensuite, nous avons juste besoin de mesurer chacune d'entre elles aussi pour les mettre en place. Alors allez-y, faites vos mesures et déplacez tout en conséquence. Maintenant, pour ces deux-là, on va l'envoyer directement au milieu de leurs boîtes car elles sont carrées . Alors allons de l'avant et attrapons le rectangle sélectionnable à nouveau afin que nous puissions aligner au centre de sorte que centre et le milieu de la cible et ensuite la même chose pour ce dernier ici. Ok, laisse organisés sont des couches un peu. Je vais créer un nouveau groupe de calques pour nos titres, un autre groupe de calques pour nos étiquettes, puis un autre groupe de calques pour la section héros. Allons de l'avant et zoomons. Je pense que nous avons juste besoin de centre sont appelés action. En fait, nous n'avons pas encore défini la hauteur de notre section héros, alors allons-y et faisons ça et faisons 700 pixels de hauteur. Allons de l'avant et faisons une sélection autour de ça, puis nous allons retirer notre image de condo afin que nous puissions aligner tout le reste dans la section héros dans cette zone. Et la dernière chose que nous devons faire est de recadrer notre image ici pour qu'elle ne soit pas affichée sous la section héros. Alors allons de l'avant et attrapons cette image. Faisons une sélection juste autour de cette partie que nous voulons nous débarrasser et un masque de calque et une pression blanche, la lettre D puis la lettre X puis votre touche de suppression ou de retour arrière, et cela supprimera cette partie de l'image. Et notre section de héros est maintenant terminée. Félicitations. Maintenant, nous sommes prêts à passer à la partie suivante, qui crée les services ou la section avantages avec ces quatre colonnes. Mais d'abord, nous allons travailler sur la création de nos icônes pour ces avantages 60. Corps Partie 1: Bonjour et bienvenue. Bon, donc nous allons maintenant commencer à travailler sur cette partie de notre corps, qui comprend quatre avantages principaux. Et d'abord, nous allons créer nos icônes pour chacun de ces avantages. Maintenant, quand il s'agit d'icônes, vous avez deux options. Vous pouvez les trouver gratuitement en ligne ou les acheter en ligne auprès de quelqu'un d'autre, ou vous pouvez concevoir le vôtre afin qu'il ne soit pas trop difficile de trouver des icônes qui sont liées à ces avantages. Mais quel est le plaisir là-dedans ? Donc ce que nous allons faire, c'est que nous allons créer ces 2 icônes à partir de zéro, et ensuite nous allons faire ces deux à partir de zéro dans la prochaine leçon. Alors allons de l'avant et commençons par créer un nouveau document, Commandant Control et la lettre dans. Tailles à 75 par 80. Et remplissons le blanc pour que nos icônes soient simplement faites de différentes formes. Alors allons de l'avant et créer dans le nouveau plus tôt pour la première forme. Et pour la taille, nous allons faire 70 par 75 et nous allons juste ajouter un trait autour de la sélection pour aller jusqu'à modifier, puis sélectionner la sélection de trait. Faisons deux pixels de couleur unie et faisons le contrôle Black Que de Select Commander et la lettre D. Je vais juste mettre ça en position ici. Nous devons également recadrer les limites de la couche. Nous allons calquer, recadrer le contenu, et montrons également nos limites de lier. Alors allons de l'avant et faisons notre prochaine forme. Nous avons également besoin de créer une nouvelle couche Ford aussi. Ça ne s'appelle pas ça 101 et pour la taille on va faire huit par huit, et ensuite on va finir un coup autour de lui. Même taille et D Select a également recadrer le contenu et nous allons le dupliquer trois fois. Ensuite, réarrangez les couches, puis prenons chacune d'elles et tirez-les vers le bas. Donc juste à ce sujet il devrait être bon. Nous allons saisir notre outil d'alignement et les sélectionner tous avec la touche Maj enfoncée. Et puis nous allons le changer en premier élément, puis nous allons le compenser à zéro pour X et 25 pour pourquoi c'est un peu trop. Essayons 10. Pas assez. Essayons 18. Allons-y un peu moins. On y va. Ça marchera. Je vais aller de l'avant et les mettre dans un nouveau groupe de couches, ok ? On a juste besoin de faire quelques lignes maintenant. Encore une fois, nous allons simplement utiliser notre rectangle sélectionnable pour créer une ligne. Et je vais faire le mien 40 par deux. On va créer une nouvelle couche appelée « mensonge ». Remplissez-le avec du noir, la sélection et le recadrer au contenu. Allez-y et déplacez ça vers le bas. Donc c'est au bas de cette boîte ici, et je vais le dupliquer trois fois et les mettre en position humaine et simplement renommer ces 01 à 04 et les mettre dans leur propre couche de groupe. Allons de l'avant et prenons ces deux et mettez-les dans un autre groupe de couches. De cette façon, nous pouvons tous les déplacer vers le bas. Allons de l'avant et faisons une sélection juste ici pour que nous puissions le placer directement au centre du contour lui-même. D' accord, créons un nouveau calque pour notre cercle en haut. On va prendre notre outil pour les lèvres et faire un cercle. Faisons 15 par 15. En fait, ça va le rendre un peu plus petit 13 par 13 et on va ajouter un coup. Faisons un pixel cette fois à partir de la ligne avec De Select. Et puis je vais prendre mon outil de texte pour mettre la lettre X et je vais le rendre un peu plus petit. Faisons 12 deux gros. Essayons 10 et 8. Alors je vais faire le mien à huit heures. Placez cela au centre, puis enfin, un nouveau groupe de calques pour ce contenu. Ok, une dernière étape. Nous allons créer un nouveau groupe de couches appelé Compte, ce qui est notre premier avantage, et ensuite nous allons le prendre et l'ajouter à notre document. Il y a donc notre première icône. Allons de l'avant et travaillons sur notre deuxième icône. Je vais aller de l'avant et supprimer ça, accord, donc ce 1er a été assez facile. La prochaine que nous allons faire est plug et nous allons utiliser des rectangles, des rectangles arrondis coins et quelques lignes pour créer la fiche. Alors continuons et créons notre première partie de notre fiche avec un nouveau calque, et nous allons sélectionner notre rectangle sélectionnable. Nous voulons nous assurer que nous avons sélectionné des coins arrondis et une taille de 50 pour le Rayon. Maintenant, en ce qui concerne la taille de notre première partie de notre fiche, nous allons faire 80 par 35. Nous allons aller aux modifications et y ajouter un trait également. Deux pixels pour la ligne avec Aller de l'avant et faire cela de Select maintenant parce que la sélection était à l'extérieur de mon document ici. Il a créé le bord de notre forme juste ici au bord du document. Mais c'est bon, parce que je vais recadrer ça pour que je puisse avoir de la place pour les parties du bal de promo de la fiche . Alors allons de l'avant et attrapons à nouveau l'outil de sélection de rectangle parce que je veux créer une ligne et je vais la mettre sur un nouveau calque au cas où j'aurais besoin d'un mouvement. Plus tard, je vais éteindre les coins arrondis et ensuite je vais le remplir avec du noir. Ok, je vais retourner à ma prise pour que je puisse couper cette partie. Donc je vais juste faire une sélection, puis passer sous contrôle et la lettre X pour la couper . Je pense que je veux bouger cette partie juste un peu et ensuite la couper à nouveau. Ok, j'aime cette taille. Donc, je vais aller de l'avant et aller à brancher à la couche, clic droit et sélectionnez fusion vers le bas. Et maintenant ça devient une seule pièce, et je vais aussi aller de l'avant et recadrer au contenu aussi. C' est peut-être un peu trop grand, mais nous allons le comprendre après avoir fait un peu plus de la prise elle-même. Allons de l'avant et créons les griffes avec notre nouveau calque rectangulaire sélectionnable, puis remplissez-le avec du noir. C' est également dupliquer ce calque et le déplacer vers le bas. Nous allons également recadrer au contenu pour les deux couches, clic droit et sélectionner émergé à nouveau, puis nous allons le mettre directement au centre de la fiche elle-même. Ok, je vais aller de l'avant et faire un clic droit et assassiner ça aussi. Je vais le dupliquer et l'éteindre et re taille. Il est plus petit, donc je peux travailler avec une tête de prise plus petite pour le moment. Et la raison pour laquelle je l'ai dupliqué est parce que si je décide que je dois revenir à cette taille, je n'ai pas à le refaire à partir de zéro et j'aurai l'original là si nécessaire. Une fois que j'ai fini. Si j'aime mieux cette taille que je supprimerai celle dont je n'ai pas besoin. D' accord. Retour au rectangle coins arrondis sélectionnables Et faisons 25 pour le rayon. Et j'allais créer une petite forme ici pour commencer le cordon. En ce qui concerne la taille, vais faire un peu plus court, je vais faire 12 par 4. Et nous allons créer un nouveau calque et le remplir de noir. Et puis je vais juste déplacer ça vers la droite, et ensuite je vais recadrer au contenu aussi. Je pense que c'est un peu trop gros. Donc je vais aller de l'avant et prendre mon outil de balance avec Shift Plus s et le rendre plus petit. Donc neuf sur trois devrait être bon. On doit créer le reste du maïs. Maintenant, créons un nouveau calque appelé cordon pour saisir votre rectangle sélectionnable Réglez le rayon à 25 . Ensuite, pour la taille, je vais faire 40 par 18 et nous allons ajouter un coup à nouveau. Noir aussi. Parfait. Ok, laissons de sélectionner. Allons de l'avant et coupons la fin de ça. Assurez-vous que les coins arrondis sont désactivés, puis allez-y et découpez-le. Allons de l'avant et déplacons cela en position et recadrez également au contenu. Donc, cette première partie de la corde que je veux rendre plus épais. Donc je vais retourner à changer plus s et augmenter la hauteur. Donc il nous reste un morceau de cet accord. Donc, créons un nouveau calque appelé Cord 3 et nous allons refaire les coins arrondis. Avec un rayon de 25 Kayla et un coup. Nous allons recadrer le contenu et ensuite couper la fin avec notre outil de sélection, outil de sélection, Commander Control et X. Et notre fiche est maintenant terminée. Nous avons juste besoin de nettoyer un peu nos couches. Allons de l'avant et fusionnons certaines de ces couches vers le bas. En fait, je ne le suis pas. Allez-y et faites-le pour tous. Appelons les utilitaires de couche, puis amenons cela dans votre document. Ok, donc ça, je suis un peu petit. Dans l'ensemble, je vais aller de l'avant et ramener mes guides vers l'autre icône, puis je vais le faire pivoter avec notre outil de rotation et juste le tourner pour qu'il soit un peu à un angle , et cela aidera à remplir une partie de cet espace vide. Et maintenant notre deuxième icône est terminée. L' autre chose que je veux faire est de réduire l'opacité de nos icônes parce que je pense que le noir est un peu trop sombre. Alors laissons tomber l'opacité à rien à faire. 50 pour les deux. Et on y va. Nous avons deux icônes faites, et nous allons aller de l'avant et finir les deux autres dans le prochain tutoriel. 61. Corps Partie 2: Nous avons donc deux autres icônes à concevoir, et nous allons utiliser à nouveau nos formes ainsi qu'un autre outil, qui est cet outil ici, l'outil chemins. Alors allons de l'avant et créons notre icône d'accueil d'abord. Et allons de l'avant et commençons avec une nouvelle ardoise. Allons de l'avant et créez notre première couche pour la porte et attrapez votre outil de sélection de rectangle . Assurez-vous que les coins arrondis sont désactivés. Et puis pour la taille, faisons-le 18 par 30. Ajoutons un trait avec le noir va faire pour la ligne avec. Et nous allons nous assurer que nous recadrons également le contenu. Et je vais aussi sélectionner tout avec le contrôle Commander et un, puis aligner int au centre. Ok, créons un autre calque. Appelons ça maison, et nous allons faire de ce 1 54 par 54 un autre coup de sélection et recadrer le contenu et le déplacer en position. Même chose que nous allons sélectionner tous et utiliser notre outil d'alignement à une ligne vers le centre , puis de sélectionner. Ok, maintenant nous allons créer le toit de la maison et nous allons sélectionner cet outil ici, qui est l'outil chemins. Je vais également faire glisser un guide 2 37 pixels, puis allumer votre guide afin que vous puissiez le voir . Ok, on va commencer notre chemin ici, en haut à gauche de la maison. Cliquez juste là, puis passez sur le côté gauche du document, cliquez à nouveau, puis vous allez obtenir le petit chemin entre les deux. Ces deux points d'ancrage allaient venir à notre guide ici en haut du document et cliquer sur le guide juste là, puis revenir à droite. Et puis on va aller de l'avant et cliquer ici pour finir ce chemin. Maintenant, avant d'ajouter le trait au chemin, allons de l'avant et créons une nouvelle couche appelée Roof. Ensuite, nous allons ajouter le trait en allant jusqu'à éditer et en sélectionnant le tracé. Ok, on a fini le toit. Revenons à la couche de la maison afin que nous puissions supprimer cette partie de la forme. Décrivez vos rectangles. Sélectionnez l'outil à nouveau, puis supprimé avec le contrôle Commander et X. OK, allons de l'avant et créer une cheminée a été mis coins arrondis sur et le mettre à 10 pour le rayon. Et puis pour la taille, faisons-le neuf par 17, puis ajoutez-y un coup. Très bien, je veux effacer cette partie de la cheminée, donc je vais attraper mon gomme avec la lettre e. De là, je peux aller de l'avant et effacer cette partie de la cheminée pour qu'elle ne s'affiche pas à l'intérieur. Je veux aussi enlever cette partie du toit. Alors attrapons notre couche de toit, puis supprimez à l'intérieur d'ici. Allons de l'avant et mettons tous ces éléments dans un nouveau groupe de calques. C' est pris colocataire. D' accord, allons de l'avant et ajoutons ceci à notre projet de conception Web. Déposez-le et réduisons également l'opacité à 50%. D' accord, une icône de plus à gauche. Allons de l'avant et supprimons ce calque et éteignons les guides. Prenons notre outil Ellipse, et ensuite, pour la taille, nous allons le tailler 18 par 28. Kate. Ajoutons un nouveau calque, puis et votre contour de select. Assurez-vous que nous n'oublions pas de recadrer, la limite de la couche, puis dupliqué quatre fois. Je vais aller de l'avant et les mettre en place, donc quelque chose comme ça. Bon, revenons à l'outil Ellipse et je veux faire le mien et 42 par 29 Nouveau calque. Et puis ajoutez le coup de select Commander Control et D. Je vais retourner à mon outil gomme parce que je veux effacer une partie de ça juste ici. Et puis je vais prendre mon pinceau avec la lettre B, puis en ce qui concerne la taille, je vais aller quatre pour la taille du pinceau et ensuite je vais peindre dans une petite arche juste ici. Donc ça a l'air plutôt bien. Je vais mettre ça dans le nouveau groupe de couches. Et la raison pour laquelle je mets tout cela dans un nouveau groupe de calques plutôt que de les fusionner tous, c'est parce que peut-être plus tard, je voudrai redimensionner une partie de l'icône. Et je peux simplement le faire en sélectionnant les calques individuels que je veux redimensionner plutôt d'avoir à le faire à partir de zéro. D' accord. Assurez-vous que vous abaissez l'opacité à 50 aussi bien, ça va nettoyer mes couches ici, les renommer un peu. Mettez-les en ordre, et nous serons prêts à passer au prochain tutoriel. Ok, on en a tous fini avec nos icônes. Dans le prochain tutoriel. Nous allons aller de l'avant et terminer cette section en ajoutant du contenu, centrant tout et en organisant les couches. Donc si tu es prêt pour ça, faisons-le. 62. Corps partie 3 Avantages: Bonjour et bienvenue. Bon, donc nous avons quatre avantages, 12 colonnes. Donc nous allons diviser chacune les deux colonnes en trois colonnes. Allons de l'avant et définissons d'abord la hauteur de la section, qui va être de 430 pixels. Donc je vais aller de l'avant et prendre une mesure en bas de ma section de héros et descendre à 4 30 Let's et une ligne directrice. Et cela nous aidera à centrer tout de haut en bas une fois que nous arriverons à ce point. Allons de l'avant et tapons du contenu pour les titres que je vais faire. Ferroviaire semi-gras 24 pour la taille et une couleur gris foncé pour la couleur. Allez-y et mettez cette couche en haut. Je vais tout taper pour l'instant. Et puis nous organiserons et centrerons tout en conséquence. Donc, pour un paragraphe, je vais juste retourner à la ligne régulière pour le contenu que je vais faire 16 et de la même couleur. Je vais juste cliquer et faire glisser une zone de texte. ai déjà quelques informations que je vais juste coller dans. Vous pouvez taper les mêmes informations ou vous pouvez simplement utiliser du texte fictif. Je pense que cela fait de cette zone de texte la pleine largeur des trois colonnes va également faire apparaître cela aussi bien. Et puis nous avons juste besoin de créer un lien texte ici en bas. Je vais le rendre audacieux, et je vais choisir la couleur bleue de la marque de l'entreprise. Ok, mettons-le ça en position. Je vais éteindre mes grilles pour l'instant. Maintenant, nous allons travailler sur un peu d'espacement. Donc l'espacement entre notre icône et notre titre, je veux qu'il soit de 20 pixels. Donc je vais aller de l'avant et mesurer ça. Allons de l'avant et alignons ces deux-là. Créons un nouveau groupe de couches appelé Compte, et je vais mettre mon titre et mon icône à l'intérieur. Et puis je vais aller de l'avant et prendre mon outil de sélection de rectangle pour que je puisse l'aligner entre ces trois colonnes, revenir sur mes notes et m'assurer que toutes les grilles sont sélectionnées. Ok, éteignons la grille et ensuite quoi ? L' alignement va aller de l'avant et saisir ce contenu et une ligne vers le centre ou le paragraphe devrait déjà être centrée. Depuis que nous l'avons appliqué sur trois colonnes. Nous avons juste besoin de Graham sont créer un lien de profil et aligner cela au centre. Ok, Ensuite, nous devons sélectionner et continuer avec notre espacement entre le titre du paragraphe et le lien ci-dessous. Reprenons donc notre outil de mesure à nouveau et faisons 30 pixels du bas du titre au paragraphe, puis 20 pixels à nouveau pour le bas du paragraphe et notre lien. Ok, mettons toutes ces informations dans cette couche de groupe appelée compte. Ok, on doit juste le faire trois fois de plus. On va y aller et éteindre mes armes. Et pour rendre cela plus facile, nous pouvons simplement dupliquer ce groupe ce calque, déplacer sur, puis ajuster le contenu et l'icône avec l'icône appropriée. Au lieu de simplement taper tout à partir de zéro, nous pourrions utiliser le même contenu. On peut utiliser un nouveau texte factice. Ou si vous voulez prendre le temps d'écrire quelque chose de nouveau, vous pouvez le faire aussi. Alors je vais aller de l'avant et finir ça. Vous pouvez regarder le long, ou vous pouvez aller de l'avant et sauter cette partie et la finir vous-même. Et n'oubliez pas d'aligner tout ce contenu une fois qu'il est dans un nouveau groupe de calques appelé Avantages en ligne, à partir de la section héros en bas de la section en haut en bas. Donc je vais aller de l'avant et allumer mes grilles et commencer à aligner tout mon nouveau contenu. - D' accord, donc on a presque fini. Je vais aller de l'avant et aligner tout. Maintenant, je dois le mettre dans une nouvelle couche de groupe, et c'est tout. Notre section des avantages sociaux est maintenant terminée. 63. Consigné corporatif: étant donné que notre client a deux personnes principales qu'il doit cibler, nous devons créer une section pour ce deuxième groupe, de sorte que son principal service consiste à fournir des listes à louer. Mais ils ont besoin que ces inscriptions proviennent de propriétaires immobiliers ou de propriétaires, donc ils doivent s'assurer qu'ils peuvent continuellement ajouter de nouvelles annonces, nous l'espérons sur une base quotidienne. Nous voulons donc créer une section pour que les propriétaires puissent facilement lister leur propriété. Donc, il apparaît sur ce site. Donc, la première chose que nous allons faire est de définir la hauteur de cette section, qui va atteindre 150 pixels de hauteur. Prenons donc notre outil de mesure et mesurons 150 pixels. Mais un gars là-bas et nous allons créer un arrière-plan pour saisir votre outil de sélection de rectangle, faites votre sélection. Créons un nouveau calque appelé arrière-plan. Allons de l'avant et choisissez cette couleur bleue que nous avons utilisé à partir de leur marque , puis allez-y et remplissez-le avec votre outil de remplissage de seau de select. Renommons l'arrière-plan du propriétaire de la propriété. Ensuite, on va aller de l'avant et prendre notre textile. Changeons le dos orteil blanc. On va faire des chemins de fer audacieux. Faisons 24 pour la taille, puis disco avant et tapez une ligne de texte. Je vais juste le placer là. Je ne sais pas encore où je le veux. Ok, allons de l'avant et créons notre Mais maintenant, allez-y et prenez votre droite. Outil de sélection de Kingo. Nous voulons des coins arrondis dans 25 pour le Radius, puis pour la taille, faisons à 75 100. Nous allons créer une nouvelle couche appelée liste de boutons maintenant et ensuite aller de l'avant et le remplir avec blanc. Très bien, prenons notre outil de texte et nous allons utiliser la taille de la flèche 50 et nous allons utiliser même liste de Tapout de couleur bleue maintenant. Ensuite, nous avons juste besoin de le centrer à l'intérieur du bouton. Prenons maintenant notre liste de boutons et recadrons la limite de la couche. Allez-y et sélectionnez-le avec votre boiteux un outil et une ligne au centre et au milieu. Ok, je vais mettre ça dans un nouveau groupe de couches appelé Les Nail Button et allons de l'avant et alignons ça de haut en bas de Select. Allons de l'avant et passons un peu notre texte. Je vais aller de l'avant et zoomer. Allons de l'avant et ajoutons 50 pixels d'espace entre l'outil, alors prenez votre outil de mesure et mesurez 50 pixels. D' accord ? J' ai également besoin d'aligner cela en arrière-plan de haut en bas. Allons de l'avant et mettons ces deux-là dans un nouveau groupe de calques. Appelons ça les propriétaires. Donc, le bouton et le contenu vont aller là-bas. L' arrière-plan. Nous allons laisser de côté juste une seconde parce que nous devons aligner cela au centre des documents. Donc, sélectionnez tout avec le contrôle Commander et puis sélectionnez le contenu et aligner le centre de contenu de Select, puis mettez la propriété sur son arrière-plan à l'intérieur de cette couche de groupe. En fait, nous devons déplacer ça vers le bas. Fermez ça. J' ai aussi mon image de condo entendre de la section héros, pas dans les couches de groupe. Donc je vais aller de l'avant et placer ça à l'intérieur et le déplacer vers le bas et c'est tout. Notre section propriétaire de la propriété est maintenant terminée. C' était facile. D' accord. Dans le prochain tutoriel. Nous allons aller de l'avant et commencer à travailler sur les quatre ou cinq catégories principales de propriétés , donc si vous êtes prêt pour ça, faisons-le. 64. Annonces: selon l'étape où un prospect est dans le cycle d'achat ou au moment où il est prêt à louer. Quelque chose peut déterminer combien et jusqu'où ils naviguent sur un site Web spécifique. Ainsi, par exemple, ils atterrissent sur la page d'accueil, et on leur donne la possibilité de filtrer les propriétés en fonction de leur budget, de leur emplacement et de quelques autres facteurs. Mais ils ne sont peut-être pas prêts à chercher quatre propriétés de cette société en particulier le moment. Ils voudront peut-être en savoir un peu plus sur l'entreprise d'abord. Pourquoi devrais-je faire affaire avec cette entreprise ? Donc, dans ce cas, ils peuvent commencer à défiler vers le bas ou à naviguer vers l'une des options de navigation apparaissent de sorte qu' ils défilent sacrément, ils sont présentés avec quatre avantages pour la location de propriétés à travers cette société particulière . Nous vendons donc les services de cette société avec cette section de service. Ils peuvent être amenés à fournir leur adresse e-mail afin qu'ils puissent être informés lorsqu'une nouvelle offre est fournie. Ils aiment l'idée que cette entreprise les aidera à organiser leurs services publics parce qu'ils sont très occupés, et ils n'ont pas vraiment le temps de le faire. Oui, ils pourraient probablement trouver du temps, mais ils sont tellement occupés, ce serait bien d'avoir quelqu'un d'autre le faire pour moi. Alors qu'est-ce qu'il y a dedans pour moi ? Ce sont les choses qui sont dedans pour ce locataire. Alors maintenant ils commencent à penser, OK, OK, cette société a mes arrières. Je suis prêt à commencer à chercher afin qu'ils puissent soit revenir ici et commencer à filtrer. Ou s'ils défilent assez loin, ils verront alors des listes de propriétés basées sur les quatre ou cinq catégories les plus populaires, ce que j'ai conçu ici. Donc, l'idée est que nous voulons mettre les demandes les plus populaires au sommet, suivies de chacun des types moins populaires de catégories. Donc peut-être pour cette entreprise en particulier, leur point de vente le plus important est qu'ils ont des locations acceptant les animaux de compagnie, et c'est leur type de filtre le plus populaire que les gens demandent. Donc, vous voulez mettre cela en haut, et chaque fois qu'une nouvelle annonce est ajoutée, elle est ajoutée ici à gauche et ensuite celle de droite est cognée de sorte que vous avez toujours de nouvelles annonces en ligne sur la page d'accueil. Mais vous allez toujours cliquer sur Seymour trop bien, Seymour Propriétés dans cette catégorie particulière, Peut-être que ce n'est pas une catégorie dont vous vous souciez vraiment parce que vous n'avez pas d'animaux de compagnie, alors que peut-être lofts sont le type de propriété que vous veulent et ces air les types les plus populaires suivants hors demandes de location. Et encore une fois, nous rendons facile pour les prospects orteils trouver ce dont ils ont besoin, et ils peuvent faire défiler vers le bas et trouver une liste particulière qui fonctionne pour eux. Donc on va aller de l'avant et concevoir cette partie des sites Web et la mettre en place. C' est vraiment super simple. On a un gros titre. Nous avons deux formes, une pour un espace réservé à l'image, une pour le contenu. Et puis nous plaçons notre contenu à l'intérieur de là. Et puis tout ce que nous avons à faire est une fois que nous créons ce 1er 1 est dupliqué trois fois et la mer plus lien. Et puis nous pouvons prendre tout ce contenu dupliqué 34 fois de plus. Changez les titres et bien sûr, nous voulons y ajouter des images différentes. Ce n'est pas nécessaire de le faire. Techniquement, vous pouvez diriger la même image pour chaque annonce, car c'est juste pour un avis pour votre client. Et, bien sûr, laissez le contenu le même pour chaque annonce. Mais j'aime aller plus loin et non seulement prêter attention aux petits détails, mais je veux donner à mon client une représentation visuelle de ce qu'il peut s'attendre à ce que son site soit une fois qu' il sera mis en service. Oui, ils peuvent visualiser cela avec cette maison dans chaque catégorie d'enrôlement. Mais je pense que cela aide à le diviser et à mieux visualiser ce qui se passe pour leur nouveau site Web, quand ils peuvent réellement voir différentes images et différentes annonces à des prix différents. C' est donc très simple à faire, et cela ne prend que 10 15 minutes pour entrer et changer certaines de ces informations et pour changer les images. Donc, cela va juste faire un peu plus pour aider nos clients à voir visuellement à quoi leur site Web va ressembler une fois qu'ils auront approuvé la conception finale. Donc, la première chose que vous devez faire est de télécharger des images. Donc je suis juste allé choisir Sabei dot com et j'ai fait une recherche de maisons immobilières. Vous pouvez télécharger une image, ou vous pouvez télécharger 16 images différentes en fonction des quatre catégories différentes, puis une fois que vous les avez toutes téléchargées. Allez-y et ajoutez-les à votre projet et placez ces images dans les catégories appropriées . Et j'ai des loyers de loft, des locations avec piscines et maisons individuelles, puis renommé ces groupes couches en conséquence. Ensuite, vous voudrez peut-être renommer chacune de ces couches, en fonction de la catégorie, afin que fonction de la catégorie, nous puissions avoir des animaux de compagnie de 1 à 4, puis faire la même chose pour les autres aussi . Mais avant de faire ça, je veux juste te donner un autre conseil. Maintenant, même si j'aime renommer mes calques en conséquence en fonction du contenu de ce calque, je veux partager une raison pour laquelle vous ne voulez peut-être pas renommer ces calques. Lorsque vous téléchargez ces images à partir de sélections obéissent, elles ont un nom de fichier spécifique qui leur est attaché. Donc si nous regardons ce 1er 1 ici et tous les autres, nous avons une maison, puis un numéro à sept chiffres, et enfin numéro à trois chiffres. Si nous entrons et que nous sélectionnons ce numéro à trois chiffres, puis nous copions et collons dans des sélections, obéissons à la recherche, cela nous mènera à l'image exacte que nous avons téléchargée. Et c'est 6 40 nous dit la résolution que nous avons téléchargé donc 6 46 40 Maintenant, il est facile de trouver l'image exacte que vous avez téléchargé parce que disons que vous avez renommé ceci et puis votre client dit que j'aime cette image. Utilisons-le sur le site en direct. Eh bien, cette résolution que vous avez téléchargée peut-être deux petites, surtout si vous allez faire une grande image comme celle-ci. Donc maintenant, vous devez revenir en arrière, et vous devez trouver cette image particulière afin que vous puissiez la télécharger et une résolution plus élevée. Le problème est que vous avez renommé la couche, et vous n'avez pas gardé la trace de l'URL de cette image. C' est donc une raison pour laquelle vous ne voudrez peut-être pas renommer le calque, car cela facilite recherche de cette image spécifique ultérieurement, si nécessaire. Maintenant, pour ce projet particulier, je sais que ce client n'utilisera pas ces images parce qu'il n'écoute pas ces maisons réelles sur son site. Donc, dans ce cas, je suis d'accord avec renommer ces couches pour animaux de compagnie de 1 à 4. Et bien sûr, je devrais le faire pour les autres couches aussi et je le ferai plus tard . Maintenant, je vais aller de l'avant et faire ces quatre, ok ? Maintenant que nous avons les images en place, nous devons les redimensionner. Nous devons créer un arrière-plan afin que nous puissions anti ombre portée pour l'image et pour le contenu aussi bien. Mais d'abord, j'ai besoin d'augmenter la taille de ma toile parce que je manque de place. Donc je vais aller à l'image et sélectionner la taille cama, assurer qu'elle est déverrouillée, et puis, pour la hauteur, je vais juste faire 5000 et le redimensionner. J' ai également besoin d'ajouter du blanc à cette couche d'arrière-plan. Je vais donc sélectionner un calque d'arrière-plan et augmenter la taille de la limite à la taille de l'image. Et puis avec mon outil de remplissage de seau, je peux le remplir avec du blanc. Ok, maintenant nous pouvons commencer à travailler sur notre titre et l'ombre portée pour les images et un espace réservé pour le contenu. Allons de l'avant et faisons notre titre d'abord, prenez votre outil de texte avec la lettre T Let's do Railway Bold 36 pour la taille, puis gris foncé pour la couleur. Ok, sélectionnons. En outre, nous pouvons aligner ce titre directement au centre du document. Je vais également déplacer cela vers le haut, et je dois également désactiver les autres groupes de calques. Ok, Maintenant, avec mon outil d'alignement, je peux le sélectionner et le centre de ligne de la cible. Maintenant que c'est fait, on peut commencer à travailler sur nos images. Maintenant que c'est fait, Donc je veux entrer dans ma première couche de groupe ici. Je vais créer un nouvel arrière-plan appelé arrière-plan. Assurez-vous de sélectionner également avec Commander Control en D pour vous débarrasser de cette dernière sélection. Ok, nous pouvons maintenant aller de l'avant et créer notre arrière-plan pour les images et le contenu, et nous allons en faire trois colonnes de large, soit 275 pixels de large. Et cela nous donnera quatre images uniformément espacées et dimensionnées sur ces trois colonnes. Donc, nous allons taper à 75 pour le avec. Et puis pour la hauteur, on va faire 270. Allons-y et remplissons ça avec du blanc avec notre outil seau. Et si j'appuie sur la lettre D et puis la lettre X, Je deviens blanc sur mon premier plan Et puis je peux remplir que dans que de select avec Commandant Control et la lettre D et juste aller de l'avant et déplacer ici en haut à gauche, et puis nous peut aller de l'avant et ajouter notre ombre portée. Ainsi filtre la lumière et l'ombre et l'ombre portée. Maintenant, dans le projet précédent, nous avions beaucoup d'ombres portées tout au long de la conception, et je veux vous donner un autre conseil rapide pour utiliser votre ombre portée ainsi que d'autres filtres, car nous ont quelque chose dans ces filtres qui nous permettra de nous souvenir facilement des paramètres exacts que nous avons utilisés précédemment. Et vous vous souvenez peut-être que j'ai dit, je ne me souviens pas des paramètres exacts que j'ai utilisés, et je l'ai fait exprès afin que je puisse ensuite vous montrer dans ce projet comment se rappeler facilement les paramètres exacts que vous utilisez si nous faisons des ajustements et nous comme ces ajustements, nous pouvons réellement enregistrer ces paramètres pour une utilisation future en créant ce que l'on appelle un préréglage est un outil ou une fonction qui enregistrera toutes les options que vous sélectionnez afin que vous puissiez l'utiliser plus tard, et nous pouvons simplement le faire en cliquant sur cette icône plus. Donne-lui une dame. Je vais juste l'appeler Ombre portée Cliquez sur OK, et puis si vous allez à l'intérieur de ce menu déroulant prédéfini, faites défiler vers le bas, vous verrez ce nom ici. J' en ai aussi un autre ici appelé Drop Shuttle. Donc, en ce moment, j'ai 11.795 pour le X et le Y. Mais si je sélectionne mon ombre portée préférée, ces paramètres changent en fonction de ce que j'ai enregistré à l'époque, non seulement cela, mais enregistre également vos dernières ombres portées utilisées. Donc, dans le projet précédent, j'aurais simplement pu entrer et sélectionner cette date particulière, et ce serait, et les paramètres que j'ai sélectionnés à ce moment-là et rendre beaucoup plus facile d'appliquer la dernière goutte utilisée ombre. Il n'est donc pas nécessaire d'écrire ces paramètres ou d'essayer de les mémoriser. Lorsque vous pouvez créer un préréglage, vous pouvez également appliquer des préréglages à certains autres filtres. Alors gardez cela à l'esprit lorsque vous créez un filtre spécifique et que vous aimez ce filtre, assurez-vous de créer un préréglage afin que vous puissiez facilement y accéder à nouveau à l'avenir. Donc je vais aller à mon ombre portée préférée. Je vais en fait changer les paramètres et augmenter l'opacité. Je vais aller de l'avant et le sauver. Et parce que j'ai déjà utilisé ce nom, il va juste ajouter un numéro après. qui rend facile de garder une trace des différentes ombres portées préférées que je crée maintenant que je jette un coup d'oeil à cette ombre portée. Je pense que c'est trop intense pour ce design particulier. En fait, je vais ramener ça à 50. Je ne vais pas l'enregistrer parce que je peux accéder à la dernière ombre portée utilisée à partir d'ici. Et il y a aussi un autre endroit où on peut y accéder. Laisse-moi te montrer que je vais aller de l'avant et appliquer ça et qu'on va annuler ça avec le Commandant Control et la Lettre Z pour s'en débarrasser. Et disons que je veux utiliser cette ombre portée exacte à nouveau sans avoir à entrer dans ce panneau de filtre. Eh bien, si on monte aux filtres, on peut voir une option ici. Il est dit Répéter l'ombre portée et il s'agit du raccourci clavier. Donc commande ou contrôle, ça va être commande Si vous êtes sur un contrôle Mac plus F pour que je puisse travailler sur ce projet, je pourrais sélectionner ma couche d'arrière-plan et ensuite appliquer ce raccourci clavier, Commander Contrôle et F. Et puis il l'applique directement à cette couche sans avoir à aller au menu pour le sélectionner . C' est cool ? Il est donc beaucoup plus facile de continuer à utiliser cette même ombre portée tout au long de votre projet par rapport à la façon dont nous l'avons fait dans le projet précédent, où nous sommes allés dans ce menu de filtres à plusieurs reprises pour configurer ces options particulières. Allons de l'avant et déplacons notre calque d'arrière-plan derrière notre première image ici, et nous allons limiter cette image à l'avec de cet arrière-plan particulier. Allons de l'avant et déplacons notre calque d'arrière-plan derrière notre première image ici, Je vais juste zoomer un peu ici et m'assurer que mon image est parfaitement alignée avec l'arrière-plan. Alors, quel est mon outil de déplacement et mes touches fléchées ? Je vais juste le mettre en place. Maintenant, je vais saisir mon outil de sélection de rectangle et nous allons créer une sélection qui mesure 275 pixels de large, qui est les trois grandes colonnes de large. Et puis pour la hauteur, on va faire 100 et 80. Ensuite, nous pouvons aller de l'avant et prendre cette sélection et la déplacer directement à l'endroit où nous en avons besoin, juste en cliquant sur l'intérieur de cette sélection puis en la déplaçant avec notre souris. Nous pouvons également utiliser nos touches fléchées pour le mettre exactement là où nous le voulons maintenant. Parce que mon image est toujours sélectionnée. Je peux y aller et ajouter un masque de calque. Assurez-vous que vous avez sélectionné et cliquez sur Ajouter. Et puis il applique ce masque de lires à l'image et le limite à cette forme. Ok, Maintenant, nous pouvons aller de l'avant et prendre ce calque d'arrière-plan et dupliqué trois fois pour les autres images. Et puis je vais aller de l'avant et les réorganiser pour qu'ils soient dans le bon ordre. Et puis nous avons juste besoin de déplacer chacun d'entre eux dans la position dans laquelle ils doivent être, nous allons également activer nos grilles afin que nous puissions nous assurer que tout est parfaitement aligné là où ils doivent être. Ok, je vais regrouper ces deux couches ici pour pouvoir les déplacer. Appelez ça l'image un. Je vais aussi allumer mon guide pour que nous puissions anti lignes directrices vers le haut pour que je puisse aligner toutes les autres couches sur le dessus. Donc, la dernière chose que nous devons faire est de créer ces sélections de rectangles afin que nous puissions limiter les images aux arrière-plans. Allons de l'avant et éteignons nos guides et notre grille et allons de l'avant et déplacons nos autres images en position afin qu'elles soient au-dessus de leurs arrière-plans respectifs. Cette image doit être redimensionnée, donc je vais aller de l'avant et prendre ça. Et mon outil de compétence était Shift Plus s. Allons de l'avant et faisons à 75 pour le avec. Nous avons une hauteur de 1 84, ce qui est très bien, parce que nous allons utiliser notre masque de calque pour le limiter à 180 pixels de hauteur. Nous avons juste besoin de le déplacer en position, et je vais aussi déplacer mes autres images en position. Ok, je peux aller de l'avant et créer ma sélection maintenant avec mon outil de sélection de rectangle. Et nous allons faire à 75 par 1 80 Assurez-vous que vous avez sélectionné le calque correct. J' ai besoin de ma deuxième image, puis j'ai besoin d'ajouter mon masque de calque. Alors allez-y et faites cela pour les autres images aussi. Ok, tout a l'air très bien. Maintenant, continuons et ajoutons notre contenu pour nos annonces. Alors quoi ? Leur texto à nouveau ? Nous allons utiliser le chemin de fer régulier et faisons 18 pour la taille et sont de couleur gris foncé à nouveau. Et puis tapez juste l'adresse de la rue, la superficie et le prix de cette maison. On dirait que j'ai tout centré. Donc, je vais sélectionner tout avec le contrôle Commander et un et puis dans deux options, je vais changer la justification pour qu'elle soit alignée à gauche. Je veux aussi prendre ce prix et le rendre audacieux et le rendre un peu plus grand. Donc je vais faire 20 pour ça. Et puis j'ai juste besoin de saisir ce contenu et de le placer en position. Maintenant, je peux aller de l'avant et dupliquer ce calque trois fois et déplacer chacun en position. D' accord. Je vais aller de l'avant et tirer chacun de ces éléments pour que je puisse les aligner tous au sommet pour assurer qu'ils sont tous bien alignés. Alors, qu'est-ce que l'outil Lehman et votre touche de changement maintiennent ? Nous allons aller de l'avant et cliquer sur chaque couche, le changer en premier élément, et une ligne vers le haut peut aller de l'avant et les mettre en position maintenant, puis les organiser sorte qu'ils soient tous dans la bonne position en fonction de leur liste. Je vais également prendre chacune de ces couches, puis les regrouper en conséquence en fonction leur position. Donc groupe nucléaire Image 4 et ensuite on va mettre chacune de ces couches à l'intérieur. Alors allons de l'avant et organisons toutes nos couches de la même manière. - Ok , donc on en a presque fini avec notre première catégorie. La leçon que nous devons faire est d'ajouter un lien Seymour en bas. Alors, à quoi ils sont encore textos ? Nous allons le dimensionner à 18 pixels. Je vais faire le chemin de fer gras et puis pour la couleur, nous allons utiliser notre couleur bleue que nous avons utilisée précédemment. Et puis je vais juste taper Seymour. Allons-y et sortons ça. Sélectionnez tout pour que nous puissions utiliser notre outil d'alignement pour l'aligner au centre et nous allons également déplacer cela vers le haut. Je vais utiliser ma flèche vers le haut pour l'instant. Juste pour mettre cela en position juste, il devrait y avoir du bien. Et puis je peux mettre ça en bas de ce joueur de groupe. Maintenant que notre première catégorie est terminée, les trois sections suivantes sont vraiment faciles. Tout ce que nous avons à faire est de prendre ce calque de groupe et de le dupliquer trois fois, puis de remplacer nos images et de modifier le contenu pour rendre tout le contenu différent. Je vais aller de l'avant et déplacer ce groupe s'est penché vers le bas, puis je peux prendre les images de ce joueur de groupe pour les mettre dans celui-ci, et ensuite je peux entrer et changer toutes les images en conséquence. Canada, supprimez ce joueur de groupe, puisque je n'en ai plus besoin. Et puis tout ce que j'ai à faire est d'entrer et de supprimer ces images, puis de les remplacer par les nouvelles. Donc, je vais aller de l'avant et finir cette catégorie et la suivante, mais je vais accélérer le reste du tutoriel parce que vous devriez déjà savoir comment appliquer ces images à cette taille spécifique. Alors allez-y et terminez les trois prochaines sections, puis dans le prochain tutoriel va aller l' avant et travailler sur la section suivante de notre projet de conception, qui va ajouter une section blawg ainsi que des placements pour certaines publicités. Alors allez-y, finissez les trois prochaines sections et je vous verrai dans le prochain tutoriel. 65. Blog Sidebar: après ma première consultation avec mon client et après quelques réflexions et recherches sur leur projet particulier. En examinant leur concours, je peux décider qu'ils pourraient bénéficier d'un blawg et peut-être même d'un espace publicitaire sur ce blawg ainsi que sur leur page d'accueil. Alors je ne vais pas nécessairement les contacter et leur demander à ce sujet avant de le concevoir, parce que cette section particulière ici ne prend pas autant de temps pour faire 10 15 20 minutes juste pour le mettre ensemble. Et puis, lorsque je fournirai le concept de conception pour que mon client puisse examiner, je leur parlerai de cette section particulière du site Web et de la façon dont cela leur sera bénéfique et de générer plus de trafic vers son site Web ou d'ajouter des revenus supplémentaires via le espace publicitaire pour cette entreprise en particulier. Et en fin de compte, s'ils ne font pas l'espace publicitaire, mais ils sont d'accord pour faire un blawg que le trafic supplémentaire finira par générer plus de revenus parce qu'ils génèrent plus de trafic vers leur site Web. Ce sont donc des services supplémentaires sur lesquels vous pouvez vendre vos clients en les aidant à mettre en place un blawg et à le démarrer en demandant à quelqu'un d'écrire pour eux, ce soit vous ou peut-être que vous l'externalisez. Ou peut-être qu'ils ont quelqu'un au sein de l'entreprise qui peut écrire pour eux. Mais ce que vous pouvez faire, c'est que vous pouvez les éduquer sur la façon d'écrire pour les moteurs de recherche. Donc encore une fois, c'est un autre service que vous pouvez fournir est l'optimisation des moteurs de recherche si vous n' allez pas être le rédacteur, ou peut-être en plus de sorte que vous pouvez vous assurer que ces articles vont être trouvés pour leur des mots-clés spécifiques pour sécher le trafic vers leur site Web. Donc, il y a plusieurs types de services que nous concevons dans ce site Web particulier que nous allons essayer et Upsell notre client après qu'ils voient sont conçus concept et pas nécessairement essayer de les vendre sur elle avant. Il est toujours plus facile de montrer à quelqu'un votre concept visuellement, puis d'expliquer comment et pourquoi cette partie particulière du site Web aidera son entreprise à se développer. Cela dit, allons de l'avant et assemblons cette partie du site, Donc, pour cette section, vous allez devoir trouver cinq images différentes et les ajouter à votre projet. Ces deux images à droite. Je viens de choisir au hasard à partir d'une recherche en ligne rapide et puis pour ces trois images, je les ai téléchargées directement à partir de picks. Obéissez. Et si vous voulez utiliser exactement les mêmes images, suffit de prendre note de ces chiffres à sept chiffres, puis de faire une recherche et de choisir un appât pour trouver ces images exactes. Une fois que vous avez téléchargé et ajouté à votre projet, nous créerons ce séparateur pour séparer ces deux sections. Allons-y et zoomons, allumez vos guides, attrapez votre outil de mesure et mesurez 40 pixels d'espace. Donc c'est là que nous allons placer notre diviseur. Mais avant de créer ce séparateur, continuons et créons encore 40 pixels d'espace entre le haut de la section suivante et le diviseur. Ok, nous pouvons créer notre séparateur avec notre rectangle sélectionnable avec la lettre M, et nous allons faire 1200 pixels de large, ce qui est la taille de notre système de grille. Allez-y et créez un nouveau séparateur appelé plus tôt, puis prenez une couleur gris foncé et remplissez-le avec votre filtre à seau. Tout cela sélectionne avec le contrôle du commandant et la lettre D, et je pense que c'est un peu trop épais. Donc je vais aller de l'avant et recadrer la limite de la couche, puis je peux attraper mon outil d'échelle avec Shift Plus s et je vais en faire trois pour la hauteur. Assurez-vous que c'est une échelle de clic non liée, et que c'est mieux, mais c'est un peu trop intense, donc je vais baisser l'opacité à environ 20 et c'est certainement beaucoup mieux maintenant. Allons de l'avant et allumons nos guides et ajoutons notre premier titre. Donc je vais prendre mon outil de texte avec la lettre T. Je vais faire le chemin de fer ultra gras et 24 pour la taille, puis gris foncé à nouveau pour la couleur du texte. Appuyez sur votre clé d'échappement pour sortir de cet outil. Ensuite, prenez votre outil de déplacement pour le déplacer en position. Donc, nous voulons le garder sur le côté gauche de cette colonne et pas sur le bord extérieur ici. Ok, nous pouvons maintenant commencer à redimensionner les images d'art en les plaçant là où elles doivent aller, alors revenons à notre outil de mesure afin que nous puissions placer 40 pixels d'espace entre le titre et la première image, nous pouvons ensuite saisir notre image et la mettre en position. Donc encore une fois, pour celui-ci, je vais m'assurer que l'image est sur le côté droit de cette troisième colonne parce que nous voulons en faire trois colonnes de large. Et si je vais trop loin à droite, alors une partie de son visage va être découpé. Donc, avec mon rectangle sélectionnable, je vais aller de l'avant et faire 275 pixels de large et 180 pixels de haut. Assurez-vous que votre calque d'image est sélectionné et créez un masque de calque avec une sélection pour le recadrer à la taille K d Sélectionner avec Commander Control et la lettre D. Allons de l'avant et faisons un autre espace de 40 pixels entre les images, et alors on va aller de l'avant et répéter la même chose pour cette image. Donc à 75 par 1 80 et puis créer un masque de couche que même chose que nous allons mesurer, déplacer et recadrer. Ok, vas-y et de select. Prenez votre outil de mesure, et nous le ferons encore une fois pour l'image suivante. 40 pixels de Space Commander Control et D pour sélectionner. Ensuite, nous allons créer notre contenu pour chacun de nos cercles. Je vais prendre mon outil de texte. Je vais changer la taille de la police à 18 et juste chemin de fer ordinaire Bold. Je vais également cliquer et faire glisser une zone de texte de quatre colonnes de large. Allez-y et tapez votre titre. Assurez-vous qu'il est aligné vers la gauche. Je vais aller de l'avant et rendre cette boîte de texte plus petite donc c'est au bas du texte. Appuyez à nouveau sur votre outil de texte de touche d'échappement. Cliquez et faites glisser, et je veux que le bas du texte ne soit pas plus long que le bas de cette image ici. Ensuite, je vais prendre un texte factice à coller à l'intérieur d'ici. Je vais tout sélectionner parce que c'est trop grand. Je vais le faire 14 et le chemin de fer régulier, pas audacieux. Et puis en bas, je vais taper, lire plus, lire plus, puis vous pouvez le sélectionner et changer la couleur pour représenter un lien. Je pense que je veux faire cela aussi audacieux pour l'aider à se démarquer un peu plus je vais aller de l'avant et mettre ce contenu dans un nouveau groupe Lear appelé Article One. Ensuite, je vais le dupliquer deux fois, et ensuite je vais juste le déplacer en position. Et maintenant que nos articles sont faits, nous avons presque fini. Donc nos images vont aller par ici à droite, et nous allons les faire quatre colonnes de large. Allons de l'avant et déplacons la première image vers le haut de la première image et vers le côté droit de la colonne de droite. Je vais aussi bouger ça. Alors Aiken, centrez-le un peu mieux sur quatre colonnes. Donc juste là, et puis je vais attraper mon outil de sélection de rectangle pour que je puisse recadrer cette image à cette position. Je veux aussi et une ligne directrice juste ici au bas de la première image. Et puis je vais placer mon image dans cette zone ici, et je vais l'attraper une fois de plus et la déplacer juste un peu pour que je puisse le centrer un peu mieux. Et puis je peux utiliser mon outil de sélection de rectangle pour faire ma sélection, puis et un masque de calque . Ok, donc c'est la première annonce. On va faire la même chose pour la deuxième annonce, et pour celle-ci, je vais la recadrer au bas de notre dernier article, puis je vais juste le recomposer, donc c'est un peu centré et on peut en voir plus de l'information. Ok, revenez au rectangle, sélectionnable à nouveau pour faire notre sélection, puis ajoutez votre masque de calque la sélection Commander Control et le bon, nous allons éteindre la grille. Allons éteindre les GyN maintenant La section est terminée, mais il nous reste un pas de plus, et c'est que les orteils organisent nos couches. Nous avons donc beaucoup de couches ici pour notre nouvelle section et notre section précédente, qui était nos listes. Alors allons de l'avant et organisons nos listes d'abord, puis nous ferons l'autre section. Très bien, la section de notre blog est maintenant terminée, et nous sommes prêts à terminer notre conception en ajoutant notre pied de page, et nous le ferons dans la prochaine leçon. 66. Footer: suivant le pied de page que j'ai déjà pris la liberté de concevoir parce qu'il n'y a pas beaucoup à faire pour ce pied de page particulier parce qu'il n'y a pas beaucoup de liens. J' en ai inclus quelques-uns ici. J' ai ajouté des icônes de médias sociaux et j'ai créé la hauteur du pied de page 1400 par 150 pixels hauteur. Et dans ce cas, j'ai utilisé un bleu plus foncé pour ajouter un peu de contraste à la section générale en bas du site Web. Et dans l'ensemble, il est toujours conforme à la conception globale du site, qui est propre, moderne, professionnel et il n'y a vraiment pas beaucoup plus affaibli faire pour ce pied de page. Et si nous l'avons fait, si nous avons fait quelque chose de plus créatif, cela pourrait ne pas être cohérent avec le reste du site Web. Donc, dans ce cas et dans la plupart des cas, je suis d'accord avec un pied de page professionnel moderne simple, ennuyeux parce que je préférerais avoir le reste du contenu se démarquer et pas tant le pied de page. Oui, le pied de page est seul et reçoit très peu d'amour au bas de la page, mais le but du pied de page est sur Lee pour permettre aux spectateurs d'accéder facilement à d'autres parties du site, que nous avons ici avec nos médias et deux liens vers d'autres pages qui sont nécessairement disponibles dans la navigation primaire ou secondaire, comme être en mesure de faire de la publicité avec cette entreprise particulière. Si vous deviez convaincre l'entreprise de vendre de l'espace publicitaire, vous voulez avoir un lien vers cette page particulière. Nous avons également besoin de pages légales et de confidentialité, surtout si l'entreprise prévoit de faire de la publicité sur Google ou Facebook ou d'autres types de plateformes. Ces plateformes de médias sociaux exigent des politiques de confidentialité et des politiques légales et parfois des politiques de cookies accessibles aux téléspectateurs. Ils savent donc quel type d'information est recueillie lors de la consultation du site Web et à quoi elle sert. C' est votre pied de page typique. Nous pourrions faire quelque chose d'un peu plus créatif, mais encore une fois, il ne va probablement pas correspondre au reste des sites Web. Donc, avant de passer au tutoriel final de ce projet, allez-y et finissez ici. Pied de page. Rendez-le complet avec la couleur bleu foncé fin vos icônes de médias sociaux et vos liens supplémentaires ici aussi. Et puis nous allons de l'avant et faire nos derniers réglages dans le prochain tutoriel 67. Tweaks: Bonjour et bienvenue maintenant, comme je l'ai mentionné précédemment dans d'autres projets. Une fois que j'ai terminé un design, il ne va pas au client tout de suite. Je veux modifier le design et voir s'il y a quelque chose que je peux faire pour le rendre meilleur. Ou peut-être que je peux trouver certains éléments qui ne sont pas correctement alignés qui devraient être corrigés avant d' aller au client. Mais une autre chose que je fais en plus de peaufiner la conception est que je m'éloigne du projet et , si possible, j'essaie de m'en éloigner jusqu'à 24 heures. Maintenant, si je suis sur un délai serré et que j'ai besoin de l'envoyer au client plus tôt que tard, j'aimerais au moins me donner quelques heures de ce projet particulier parce que j'ai peut-être travaillé sur ce projet pour un heure, deux heures, trois heures, peu importe le cas. Et puis je trouve que si je m'éloigne du projet et que je reviens, cela me donne une nouvelle vue sur le design, et il est plus facile de voir les choses que j'ai manquées pendant que je concevais, par exemple, espacement et l'alignement de différents éléments, ou peut-être qu'il pourrait être quelque chose de simple, comme oublier orteil. Ajoutez un état de survol comme ici dans cette section. J' ai oublié d'ajouter un état de survol pour ce lien particulier. Maintenant, on les dit. L' autre chose sur laquelle je dois décider est ce qui va se passer lorsqu'un utilisateur ou un visiteur clique sur ce lien. Est-ce que ça va aller sur une autre page et ouvrir une autre page avec toutes ces informations ? Ou est-ce que quelque chose d'autre va se produire lorsque je clique sur ce lien Maintenant, je vais vous montrer exactement ce qui va se passer quand vous cliquez sur ce lien dans un instant . Mais d'abord, je vais retourner à la section des héros une minute maintenant. Dans l'ensemble, je suis satisfait de l'en-tête et de la section héros, mais je pense que nous pouvons rendre cette section de filtre beaucoup plus conviviale en ce moment. Je pense que ce bouton de filtre est trop grand. Ça a l'air déséquilibré. Je n'ai vraiment pas besoin d'un bouton aussi grand pour filtrer ces différentes options. Alors, que pouvons-nous faire pour améliorer les choses ? Eh bien, je pense que si nous rendons ce bouton plus petit et au lieu d'utiliser trois grilles de colonnes, nous pouvons utiliser deux ou même une colonne pour ce bouton de filtre. Ensuite, dans les deux autres colonnes, nous pouvons ajouter des options de filtre supplémentaires pour permettre au spectateur d'affiner encore plus leurs sélections en fonction de ces autres options. Mais l'autre chose qui manque vraiment, c'est un état de vol stationnaire, parce que ce qui se passera quand ils survoleront ces options ? Vont-ils être autorisés à taper manuellement leur budget dans leur ville et ces autres options ? Ou voulez-vous leur fournir des options pré faites ? Disponible n'importe quelle liste déroulante afin que vous puissiez avoir quatre ou cinq options budgétaires différentes, et vous pouvez également avoir une douzaine ou plus de types d'emplacements différents. Même chose avec vos autres options. Ici, vous pouvez avoir trois ou quatre options différentes pour les chambres et les bains, puis vous avez la possibilité d'ajouter des options de filtre supplémentaires ici aussi. Laissez-moi vous montrer le design que j'ai trouvé pour améliorer notre filtre d'action appelé. Donc, c'est l'original, et c'est le nouveau design. J' ai donc rendu le bouton de filtre plus petit et j'ai ajouté deux autres options. Mais même si j'ai gardé le bouton de filtre 22 colonnes de grille. J' ai pris la ville, et je l'ai rendue plus petite aussi. Avant, il était quatre colonnes de large, et je l'ai fait trois colonnes blanches à la place, donc je pouvais ajouter cette option de filtre supplémentaire. Nous pourrions faire la même chose avec le budget. Nous pouvons faire que deux colonnes larges, puis ajouter une autre option. Tout dépend des prospects de votre client et de ce que vous pouvez faire pour qu'il soit plus facile pour lui de trouver ce qu'il veut. Et puis, bien sûr, j'ai cet état de vol stationnaire juste ici montrant que si vous cliquez dessus, quelque chose va se passer. Alors, qu'est-ce qui va se passer ? Est-ce que cela va vous donner une option de pré-sélection à partir d'autres endroits ? Ou vous allez leur permettre de le taper automatiquement ? Ou est-ce que ça va aller sur une autre page ? Qu' est-ce qui va se passer exactement ? Eh bien, afin de faciliter les choses sur nos prospects, je veux les garder sur la même page dans la même section. Donc, ce que j'ai créé était une liste déroulante pour montrer d'autres villes parmi lesquelles choisir. Cela montre donc à notre client et au développeur Web ce qui se passe lorsque vous cliquez sur cette zone. Et s'il y a plus de quatre ou cinq options, vous devrez soit montrer cette partie de la liste déroulante, soit descendre et couvrir plus cette page ici, soit vous allez créer un défilement sur l'orteil droit. Faites savoir au développeur que cette personne peut alors faire défiler l'arrière-plan du menu plutôt que avoir à faire défiler le navigateur vers le bas, ce qui le rend encore plus facile sur le prospect. Maintenant, la question est, qu'en est-il de ces autres options ? Eh bien, les chambres et la salle de bain. Vous pourriez probablement laisser cela, tel quel et juste permettre au visiteur de taper leur réponse pour ceux-ci. Mais qu'en est-il des animaux de compagnie acceptés ? Voulez-vous qu'ils tapent ça, ou voulez-vous leur donner une option ? Oui ou non ? Si vous le faites de cette façon, vous devez créer une liste déroulante pour cette option. Même chose avec la piscine, oui ou non ? Et puis pour le budget. Vous voulez probablement créer une liste déroulante pour cette partie du filtre, car vous ne voulez pas qu' ils tapent orteil dans un nombre spécifique. Peut-être que votre client a quatre ou cinq fourchettes budgétaires qu'il loue habituellement. Donc, dans ce cas, vous créeriez un autre état de vol stationnaire ou un autre menu déroulant pour cette partie du filtre également. Et vous devez faire tout cela dans le cadre de votre conception avant de le donner aux développeurs Web afin qu'ils sachent comment coder correctement chacune de ces différentes sections. Alors, que pouvons-nous faire d'autre pour rendre cette conception Web encore meilleure ? Eh bien, si nous faisons défiler vers le bas jusqu'à la section de liste, vous pouvez voir que l'espacement entre les titres pour en voir plus et les arrière-plans de l'image sont tous différents. Je n'ai pas pris le temps d'espacer correctement tous les différents éléments les uns des autres, et je l'ai juste fait aléatoirement et par I. Et il semble professionnel maintenant, même si certaines personnes peuvent ne pas remarquer que vous voulez toujours le remarquer vous-même avant donner au client et au développeur Web. Parce que tous ces petits détails sur lesquels vous travaillez va rendre votre conception de site Web meilleur que les autres concepteurs Web qui ne prennent pas le temps d'aligner tout pixel parfait. Et vous pourriez obtenir un développeur Web qui va coder cela exactement en fonction des pixels que vous avez disposés dans votre conception parce qu'ils pensent que c'est ce que vous voulez. Donc, vous pourriez vous retrouver avec un site web en direct qui semble non professionnel parce qu'il n'y a symétrie entre l'espacement de tous les différents éléments. Maintenant, une autre chose que nous pouvons faire pour améliorer cette section de liste pour l'utilisateur est de créer un état de survol qui, lorsqu'il est cliqué dessus, fournira plus d'informations sur ce qu'il essaie de trouver. Alors rappelez-vous, j'ai dit que nous devrions avoir un état de vol stationnaire pour nos liens Seymour. Donc si je l'allume bien, nous avons maintenant notre état de vol stationnaire. Mais encore une fois, qu'est-ce qui va se passer, c'est que notre visiteur va être amené à une autre page pour leur montrer plus de listes ? Ou, mieux encore, ce que nous pouvons faire est de les garder sur la page d'accueil et de charger ces annonces supplémentaires sous cette ligne de contenu. Maintenant, vous pensez peut-être, Quelle est la différence entre aller à une nouvelle page avec l'information et avoir cette information apparaissant sur la page d'accueil ? Eh bien, s'ils regardent cette page Web particulière sur un appareil mobile. Les chances sont que leur vitesse Internet ne sera pas aussi rapide que, disons, disons, sur un ordinateur de bureau ou un ordinateur portable. Donc, lorsque vous naviguez vers une autre page, beaucoup d'informations qui se trouvent déjà sur cette page, comme l'en-tête et un pied de page et d'autres choses vont devoir recharger sur cette nouvelle page. De plus, toutes les annonces supplémentaires doivent également être chargées sur cette nouvelle page. Donc ça va prendre beaucoup plus de temps à charger plutôt que de les voir apparaître sur la page d'accueil. Parce que vous pouvez faire coder le site de sorte que ces images, même si vous ne pouvez pas les voir, elles seront pré-chargées en arrière-plan de sorte que lorsqu'elles cliquent sur ce lien, ces annonces apparaîtront instantanément au lieu d'attendre 5 10 20 secondes pour qu'ils soient chargés sur une nouvelle page. Parce que plus ces images sont grandes et plus il y a de liste, plus la charge sera longue. Et plus cela prend de temps, plus il y a de chances que cette personne quitte ce site Web et essaie de trouver ce qu'elle cherche de quelqu'un d'autre. Donc, en fin de compte, nous voulons rendre le plus facile possible pour les prospects de trouver ce qu'ils veulent. Et en le faisant de cette façon, cela aide à les garder sur cette page, parce que s'ils doivent attendre 20 secondes ou 10 secondes ou quoi que ce soit , ils vont probablement quitter le site et aller sur un autre site pour trouver ce qu'ils besoin. Ils n'ont pas la patience d'attendre cette information, la charge. Donc, en le faisant de cette façon, nous augmentons la probabilité qu'ils restent sur la page et fassent affaire avec notre client, ce qui fait partie de notre objectif en tant que concepteur Web est d'aider nos clients à gagner plus d'affaires grâce à une meilleure conception. Alors, à quoi ça ressemblerait ? Comment définiriez-vous cela en tant que designer pour le montrer à vos clients ? Et donc le développeur Web sait comment le coder. Tout comme on l'a fait dans la section des héros. Nous devons créer tout ce contenu et une autre couche de groupe pour montrer à tout le monde ce qui va se passer lorsque vous cliquez sur ce lien, qui ajoutera deux lignes de listes supplémentaires pour cette catégorie, et toutes les autres catégories seront alors poussé vers le bas. C' est donc l'état du survol, et c'est ce qui se passe lorsque vous cliquez sur ce lien. Maintenant, l'autre chose que nous pouvons faire pour améliorer encore le site est d'améliorer la lisibilité du contenu de la liste. Donc, en ce moment, nous utilisons une police. Ils sont tous de la même taille, et c'est un peu bondé et occupé, donc ça rend un peu plus difficile à lire. Que pouvons-nous donc faire pour augmenter la lisibilité de notre contenu ? Eh bien, je pense que nous pouvons utiliser différentes polices, différentes tailles, et peut-être changer la mise en page de ce contenu aussi, pour ajouter l'accent sur certains éléments ou certains textes par rapport à d'autres pour qu'il le fasse plus facile à lire. C' était donc la première option que nous avons trouvée. Mais c'est ce que j'ai trouvé comme deuxième option pour faciliter la lecture de ce contenu . J' ai donc changé la police de la rue, et j'ai également changé la taille de 22 16 et je l'ai également fait en gras, et j'ai utilisé la flèche de police contre chemin de fer. L' autre chose que j'ai fait, c'est que j'ai pris la superficie et que j'en ai fait 14 pour la taille contre 20 ici. Et puis j'ai pris le prix et je l'ai déplacé en bas à droite, et j'ai également enlevé le style audacieux, et j'ai réduit l'opacité de la couche de 100 à 75 pour accentuer le prix. Donc maintenant, la rue est soulignée plus que toute autre chose, basée sur le style et le funt. Donc, dans l'ensemble, il est beaucoup plus facile de lire cela qu'il ne le fait parce qu'il est moins bondé et nos yeux gravitent vers le nom de la rue d'abord contre ici à droite. Nos yeux ne sont pas tout à fait sûrs de ce qu'il faut regarder d'abord, même si nous avons fait gras le texte pour le prix, c'est encore beaucoup plus occupé que ce contenu ici. Donc, c'est toujours une bonne idée de s'éloigner de votre conception pour quelques heures de forme ou si possible, puis quand vous revenez, repensez Comment puis-je rendre ce design encore plus convivial ? Et puis toutes ces petites choses que vous faites pour améliorer le design le rendront beaucoup mieux . Votre prochaine mission consiste donc en deux choses. On passe par et fait tous ces petits ajustements à la conception pour le rendre mieux s'assurer que tout est bien aligné et s'assurer que vous avez une quantité appropriée d'espacement entre tous les éléments et assurez-vous que vous n'avez rien laissé dehors. Nous avons également besoin de recadrer sont des canevas pour se débarrasser de tout ce contenu ici. Et l'autre chose que vous devez faire est que vous devez passer par tous les différents états de vol stationnaire que nous avons abordés dans cette conférence et les créer vous-même. À ce stade du cours, vous devez savoir comment créer toutes les différentes formes, redimensionner et tous les autres éléments, les regrouper et comment recadrer votre toile. Je vous encourage donc à prendre le temps de faire cette tâche, et cela aidera à renforcer ce que vous avez appris précédemment en le faisant vous-même. Si vous êtes coincé, il suffit de revenir aux conférences précédentes pour obtenir une mise à jour sur la façon de faire certaines choses. Et en faisant cela par vous-même, vous apprendrez exactement comment le faire pour vos propres projets à l'avenir. En fait, vous avez une mission 1/3, et c'est de refaire ce site avec votre propre vision créative afin que vous puissiez l'utiliser pour votre portfolio. Merci d'avoir écouté et passer une journée géniale 68. Projet 5 : Briefing Watkins Glen: Bonjour et bienvenue au projet de conception Web numéro cinq pour ce site Web. Nous allons redessiner cette page Web à partir de l'état de New York, et celle-ci en particulier, est pour Watkins Glen State Park. Comme beaucoup d'autres sites Web que nous avons redessinés, celui-ci aussi est obsolète. Et bien qu'il ait beaucoup d'informations, il est difficile de naviguer et d'essayer de trouver exactement ce que nous voulons. Oui, nous avons quelques boutons ici pour nous donner l'information, mais je pense que la mise en page globale est mal conçue. C' est difficile à lire car les sélections de polices et le style pourraient être faites beaucoup mieux qu'il ne l'est actuellement. L' autre chose que je trouve sur ce site, du moins pour ce site particulier, c'est même s'ils décrivent exactement les choses que vous pouvez voir dans ce parc. Il y a beaucoup de texte décrivant cette information, et je pense qu'il serait préférable de montrer une image de toutes les différentes choses que vous pouvez faire dans Watkins Glen versus Reading What you can do. Il y a un vieux dicton qu'une image vaut 1000 mots, et je pense qu'une image décrirait mieux ce que vous allez voir parce que, eh bien, vous allez vraiment voir une partie de ce que vous pouvez faire au parc ou à Watkins Glen général, la ville ou la ville de Watkins Glen. Oui, ils ont quelques images, mais cette image ici n'est pas représentative de ce parc. C' est une mauvaise image. Ça a l'air déformé. On dirait qu'il a été écrasé de haut en bas. L' éclairage n'est pas très bon, et dans l'ensemble, je ne trouve pas cette image très invitante. Je préférerais voir une photo professionnelle et non quelque chose qui semblait avoir été prise par un touriste. Cette image ici est meilleure, mais elle est si minuscule. C' est vraiment difficile de comprendre ce que c'est. Et si vous êtes sur un appareil mobile, ce sera encore plus petit à moins qu'il ne soit codé pour être plus grand. Mais il semble que leur conception Web globale est plus basée sur le texte que sur l'image. Alors laissez-moi vous montrer ce que j'ai trouvé pour la conception de Watkins Glen State Park, et c'est essentiellement un design Web plus riche en photos par rapport au texte. Donc, je commence la section des héros avec une grande image du parc d'état lui-même. Lorsque vous entrez dans le parc, c'est l'une des premières choses que vous rencontrez. Nous avons une petite cascade, un pont en pierre, et ça a l'air très accueillant. Nous avons un grand bouton appelé action ici en haut pour découvrir Watkins Glen, qui naviguera vers une autre partie du site Web pour vous montrer les choses que vous vous conduisez dans ce parc. J' ai également consolidé tous les éléments de menu à l'intérieur d'un menu caché pour aider à consolider toutes ces informations et à nettoyer le site. Lorsque vous faites défiler vers le bas, vous recevez des images professionnelles qui montrent toutes les choses que vous pouvez faire chez Watkins Glen. Donc, au lieu de décrire chacun de ces éléments, nous pouvons réellement voir les choses que nous pouvons faire. Et nous sommes peut-être motivés à visiter le parc en fonction de ces images et de la lecture. Oui, j'ai mis cette information ici aussi pour donner une description de chacun de ces types de choses que vous pouvez faire. Mais chacune de ces images sera également liée à une autre page Web donnant plus de détails sur ce que vous pouvez faire, plus une galerie de photos de chacune d'entre elles. Cela ferait donc partie de ma conversation que j'ai avec le client au moment de révéler le concept de conception initiale. Je ne vais pas aller dans et concevoir chacune de ces pages séparément si le client n' approuve pas ce type particulier de concept toe, les avoir tous sur des pages différentes, même si elles ont déjà toutes ces pages. Je veux toujours obtenir leur confirmation qu'ils aiment ce concept de conception, parce que je vais correspondre à chacune de ces pages individuelles pour correspondre à cette page principale aussi , qui est orteil ont de grandes images que Philip le navigateur de bord à bord. Ensuite, lorsque vous faites défiler vers le bas, il y a une liste de nombreuses informations que vous pouvez avoir besoin de connaître sur la pièce. Par exemple, les heures de fonctionnement. J' ai un état de survol ici de sorte que lorsque vous cliquez sur le bouton, une petite fenêtre apparaîtra avec cette information à l'intérieur, et j'ai également inclus deux options pour fermer cette fenêtre. Un accès facile à toutes les informations dont vous avez besoin ici. En fait, il en manque un. On dirait qu'on y va. Et puis nous avons aussi un moyen facile de réserver un camping. Il y a des endroits où vous pouvez camper dans le parc, et vous pouvez rapidement et facilement réserver un camping via cette option ici. Si vous n'êtes pas familier avec le parc, vous pouvez cliquer sur ce lien pour obtenir une carte du camping, et il naviguera vers une autre page pour vous fournir plus d'informations. Mais encore une fois, nous voulons rendre le plus facile possible pour les campeurs de réserver leur séjour, surtout si vous avez déjà campé ici et que vous savez ce que vous faites. Vous pouvez le faire ici à partir de cette partie de la page Web sans avoir à naviguer vers d'autres parties du site. Et puis en dessous, nous avons un pied de page nettoyé et mis à jour avec tout leur contenu lié à toutes les différentes pages. Tout est régulièrement espacé maintenant, bien qu'il y ait pied de page maintenant n'est pas si mal ? Je viens de le mettre à jour un peu avec de nouvelles polices et différentes couleurs pour aider à le rendre plus facile à lire. Donc, ce sera un design Web assez facile à créer. Mais comme avant. Je vais partager quelques conseils professionnels supplémentaires tout au long du chemin que nous avons conçu ce site Web, donc si vous êtes prêt à commencer sur ce projet, faisons-le. 69. Header et héros: bonjour et bienvenue sont dans ce US, et nous allons concevoir à la fois l'en-tête et la section héros. Alors allez-y, prenez votre modèle de grille afin que vous puissiez commencer à partir de zéro. Et nous devons également ajouter des fichiers image à notre document, qui sont tous les deux joints à cette leçon. Donc le 1er 1 est notre logo de l'État de New York. Alors allez-y, saisissez-le et amenez-le dans le document, puis déplacez simplement le logo en haut à gauche , puis prenez l'image du héros et apportez cela aussi. Donc, cette image est un fichier de basse résolution, et nous devons l'agrandir pour la rendre pleine avec de gauche à droite ou plein fond perdu. Et quand on le fera, ça va devenir pixélisé ou floue. qui est bien, parce que c'est juste pour la pratique et pas pour notre portefeuille. Allons de l'avant et re à l'échelle cette image avec Shift Plus s et permet de taper 1400 pour l'avec , puis la hauteur devient 9 38 une chanson. Il l'a verrouillée ? Allez-y et mettez à l'échelle, puis déplacez-le simplement dans les côtés gauche et droit du document . On va recadrer, composer cette image dans une minute une fois qu'on arrivera à la section des héros, mais on va finir la section des en-têtes d'abord. Ok, allons de l'avant et créer une nouvelle couche appelée clic d'arrière-plan d'en-tête. D' accord. Et puis pour la largeur, je voulais être plein fond perdu aussi bien à gauche, Droite, Alors allons de l'avant et créer une sélection avec notre outil de sélection de rectangle. C' est OK si elle dépasse, car elle va limiter cette sélection aux limites de votre document. Donc le avec je ne suis pas inquiet au sujet d'un serré. Je veux être 100 et puis pour la couleur, je veux utiliser cette couleur crème, qui est ce nombre hexi décimal ici. Alors allez-y et tapez cela, puis allez-y et prenez votre filtre à seau avec la lettre G et remplissez-le. Et n'oubliez pas de sélectionner avec Commander Control et la lettre D. Très bien, allons de l'avant et recadrer la limite de la couche. Maintenant, allez dans le calque, recadrez le contenu, puis déplacez-le simplement vers le haut en position. Ok, je vais aller de l'avant et déplacer ça sous les deux images Allons de l'avant et alignons notre logo. Allons de l'avant et mesurons 30 pixels d'espace entre le bord gauche et le côté gauche du logo. Ok, allons de l'avant et repositionnons notre logo. D' accord. Ensuite, l'aligner sur le haut et le bas de notre arrière-plan. Donc, avec mon outil d'alignement, allez-y et cliquez d'abord sur mon arrière-plan d'en-tête, puis sur la touche Maj. Cliquez sur le logo, puis sur un milieu allongé de la cible. Maintenant, nous allons travailler sur la navigation. Je vais juste ajouter une icône de hamburger représentant la navigation. abord, nous devons créer un nouveau fond pour cela appelé hamburger Background. Et nous allons faire une sélection 100 par 100. Et puis pour la couleur, je vais utiliser ces couleurs vert foncé pour aller de l'avant et taper ce numéro. Et puis remplissons-le, assure-toi de sélectionner sous contrôle et D et je vais juste le déplacer ici en haut, non ? Ok, je vais prendre mon icône de hamburger que nous avons créée dans le dernier projet, donc j'ai juste besoin de l'icône de vol stationnaire et de l'icône de hamburger, donc je vais prendre ces deux-là et les amener dans ce document. Ok, mettons ça en place et encore maintenant. L' icône du hamburger est un peu petite, donc je veux juste faire que plus grand et pas le vol stationnaire que je aime lui-même. Donc je vais juste attraper mon icône de hamburger que Shift Plus et je vais l'agrandir. Donc juste là, 50 pour le avec 53 pour la hauteur. Et puis je vais aller de l'avant et le mettre en place ici. En fait, allons-y et allions l'icône directement au centre du fond du hamburger. Assurez-vous que les couches d'arrière-plan de hamburger sont sélectionnées et recadrées au contenu pour la limite de couche . Je vais aller de l'avant et tirer l'icône du hamburger ainsi je peux aller de l'avant et saisir les deux avec mon outil d'alignement et ensuite je peux aligner le milieu et le centre de la cible. Remettons l'icône du hamburger. Je vais juste déplacer l'icône du vol stationnaire vers la droite juste un peu. Donc juste là. Allons-y et zoomons. Désactivons nos guides et notre grille afin que nous puissions jeter un oeil à la section d'en-tête, sorte que la section d'en-tête est terminée. Je vais juste aller de l'avant et nettoyer mes couches ici et créer une nouvelle couche de groupe appelée En-tête. Allons de l'avant et attrapons notre image de héros et déplace-la vers le bas de la section d'en-tête. Il suffit de zoomer et de s'assurer qu'il est parfait en pixel. On dirait que j'ai juste besoin de le déplacer vers le haut de quelques pixels de plus, donc juste là a l'air bien. Donc il nous reste quelques choses, et c'est en tête de notre titre et appelez le bouton d'action pour la section héros. Donc, quand il s'agit des familles de polices que je choisis pour un projet de conception Web, je le fais généralement avant la conception. Et je vais choisir mes polices en fonction de l'une des deux choses que soit les polices populaires au moment où je conçois le site Web. Ainsi, par exemple, nous avons beaucoup utilisé le chemin de fer tout au long de ces projets et son populaire à ce moment dans le futur. Ce n'est peut-être pas aussi populaire, donc je ne l'utiliserai probablement pas autant de guerre. Selon l'entreprise, j'utiliserai une famille de polices de leur marque. Donc si on tape Watkins Glen et qu'on change ça en chemin de fer. Ils utilisent ultra gras. C' est un bon fonds, mais il ne correspond pas vraiment à l'image de marque de leur entreprise. Donc, à la place, j'utiliserais une police comme flèche qui correspond mieux à leur image de marque. Et nous pouvons le voir dans la lettre W ici. C' est très similaire au W dans leur logo. Donc je vais soit utiliser exactement le même front qu'ils ont utilisé dans leur logo ou tout autre type de marque, je vais utiliser une police. Similaire. Maintenant, les lettres minuscules ne correspondent pas vraiment. Mais si nous faisions ça dans toutes les capitales, ils feraient mieux de correspondre à leur image de marque. C' est pourquoi je choisirais une police comme une flèche pour ce design particulier. Donc je vais aller de l'avant et mettre ça au centre et sélectionner tout. Et puis avec mon outil d'alignement, je peux aller de l'avant et l'aligner sur cette sélection. Alors allez-y et faites ça. La sélection Venez dans notre contrôle et la lettre D, et nous allons aller de l'avant et créer notre Mais maintenant appelons-le bouton C T A et C T. A. est abrégé pour appelé l'Action. Prenons notre outil de sélection de rectangle, et nous allons ajouter quelques coins arrondis. Faisons 15 pour le Radius et ensuite jusqu'à la taille que nous allons faire à 35 par 75, nous allons le remplir avec cette même couleur vert foncé que nous avons utilisée ici. Allez-y et remplissez votre bouton et de sélectionner, puis je veux aligner le bouton sur le bord droit de notre titre. Donc, allons de l'avant et recadrons également la limite de la couche, puis déplacez-la en position. Allons-y et attrapons notre textile. Je vais aller de l'avant et le changer en chemin de fer, mais je veux choisir un style italique. Allons de l'avant et rechangez-le en blanc, puis tapez simplement découvrir et puis pour la taille. Allons-y et ramenons ça à 48. Bon, allons de l'avant et la ligne à l'intérieur de notre mais nouveau Ok, nous avons presque fini. La dernière chose que je veux faire est que je veux recomposer un peu l'image en la déplaçant vers le haut. Alors à quoi le déménagement ? Je vais aller de l'avant et prendre l'image et la déplacer. Je ne veux pas aller en haut parce que je ne veux pas découvrir Button pour être ici dans cette zone. Je veux qu'il reste là où il fait actuellement sombre dans cette partie de l'image. Donc je vais y aller, et vous allez aussi remarquer que la vieille ligne de voleur pour cette section de héros est juste autour 700 à 800. Mais l'image réelle va au-dessous de cette ligne de pliage, et c'est bien pour ce site particulier, car quand ils cliquent sur le bouton Découvrir, il va automatiquement défiler vers la section suivante. Donc je ne suis pas inquiet pour l'image qui saigne au-dessus ou au-delà de cette section de héros. de Allonsdel'avant et prenons nos couches nouvelles et regroupez-les dans de nouveaux groupes précédents. Allons de l'avant et faisons notre bouton d'abord pour faire C T un bouton, puis un nouveau groupe de calques pour la section héros, et c'est tout. Notre section en-tête et héros sont faits à ongles 70. Choses du corps partie 1: lorsqu' un visiteur de ce site Web clique sur notre action appelée, qui est notre bouton de découverte, le site naviguera automatiquement vers la section suivante, qui est les choses à faire. Donc c'est quelque chose que nous devons expliquer à notre client. Lorsque nous présentons le concept de conception réel, cela ne va pas naviguer vers une autre page. Au lieu de cela, il va faire défiler automatiquement vers la section suivante. Et une fois approuvé, nous devons aussi le faire savoir au développeur afin qu'il ne pense pas que cela va à une autre page ou qu'il y a un pop-up. Au lieu de cela, ils doivent le coder pour faire défiler vers le bas, puis quand le visiteur clique dessus et il fait défiler vers le bas jusqu'à cette partie, ils vont être présentés avec toutes les choses que vous pouvez faire à Watkins Glen. Ils peuvent soit lire une brève introduction de chaque élément, soit cliquer sur chacune de ces images ou titres de texte pour naviguer sur la tombe ou information. Donc, avant de commencer à concevoir le site, je veux juste parler un peu d'images parce que nous avons besoin de trouver des images pour chacune de ces choses pour faire leurs sept et total l'un de mes endroits préférés pour aller pour des images gratuites sans se soucier sur l'achat d'une licence et la possibilité de les utiliser pour des projets commerciaux. Et des choses comme ça, c'est des choix obéissent. On en a déjà parlé, donc si on entre ici et qu' on commence à chercher Watkins Glen, on peut voir qu'il n'y a pas beaucoup d'images. n'y a que six images au total, donc nous devons commencer à faire des recherches plus approfondies. Watkins Glen Hunting Watkins Glen navigation de plaisance. Mais il y a encore moins d'images pour ces catégories. Donc maintenant, nous devons faire des recherches générales pour, disons, disons cascades parce qu'il n'y a qu'une seule cascade et nous ne voulons pas d'image verticale. Nous avons besoin d'une image horizontale pour chacun de ces liens, donc cette image ne fonctionnera pas. Oui, vous pouvez le recadrer et le rendre horizontal, mais je ne pense pas que ce sera une très bonne image recadrée horizontalement parce que vous craquez beaucoup de l'image. Nous voulons donc trouver des images horizontales. Le seul problème est qu'aucune de ces images, ou même cette image, est une cascade située dans Watkins Glen Park. Cette cascade est en fait à environ trois heures de distance tout avantage complètement différent. Donc, lorsque vous développez un site Web avec beaucoup d'images ou juste quelques images en général, quel que soit le cas, vous voulez vous assurer que ces images sont représentatives de l'emplacement de cette entreprise , ou que ou peu importe le cas, parce que si vous mettez cette image dans le parc Watkins Glen, alors que les gens vont être déçus, s'ils veulent voir cette cascade et qu'ils ne peuvent pas la trouver, et ensuite ils ont finalement découvrir qu'il est en fait à trois heures. Donc, la morale de l'histoire est de choisir vos images en conséquence. Donc, si nous ne pouvons pas utiliser les choix, obéir, nous devons trouver un autre site à utiliser. Et il y a des agences de photos avec plus d'images de Watkins Glen que vous pouvez réellement utiliser par rapport aux images de picks, obéir ou même des images Google. Cette image ici, j'ai trouvé sur les images Google, mais il n'est pas facilement disponible pour un usage commercial. Le client devra payer une licence pour l'utiliser. Il est correct de l'utiliser dans votre conception, mais vous ne pouvez pas les utiliser sur un site Web en direct tant qu'une licence n'a pas été achetée pour un usage commercial. Donc, avant de commencer ce projet, vous devez trouver sept images. Que ce soit à travers des choix, obéir ou peut-être une entreprise comme le stock d'obturateur ou des images Google. De toute façon, trouvez sept images pour chaque catégorie. Téléchargez-les et nous allons de l'avant et regrouperons cette section du site dans la prochaine leçon. 71. Choses du corps partie 2: Bonjour et bienvenue. Bon, Maintenant que vous avez vos images téléchargées, allez-y et ajoutez-les à votre document. Si vous n'avez pas encore renommé les couches en conséquence, puis continuez et positionnez-les dans un ordre similaire à celui-ci. Et vous devrez peut-être également augmenter la taille de votre toile, ce que j'ai déjà fait en allant à l'image en sélectionnant la taille de la toile, puis en ajustant la hauteur en conséquence. Alors allez-y, faites ça. Ensuite, nous pouvons aller de l'avant et commencer à dimensionner nos images en les plaçant exactement là où elles doivent être. Maintenant, en ce qui concerne la taille, on va faire 400 en 67 pixels de large par, 310 pixels de haut. Pour les 6 premières images, la dernière image sera de 1400 pixels blancs. Ce qui remplit l'orteil gauche droit du document. Et puis je vais dimensionner le mien et 450 pixels de haut. Maintenant, l'image que vous avez téléchargée peut être différente de celle-ci. Donc, dans ce cas, vous devrez peut-être le rendre plus grand ou plus court, fonction de la composition de cette image. Donc, vous allez dimensionner votre image en bas ici. Selon ce que vous avez téléchargé. D' accord, remontons en haut et redimensionnons notre première image ici. Maintenant, très vite. Vous vous demandez peut-être pourquoi j'ai choisi 467 pixels de large. Eh bien, comme je l'ai mentionné, sur la base du style de conception que j'ai choisi pour ce projet de conception Web, je veux que les images remplissent le document de l'extrême gauche à l'extrême droite. Nous avons donc trois images, et les signes de notre document sont 1400 pixels de large. Donc, quand on divise ça, on obtient 4 66,6 et je viens d'arrondir pour m'assurer que tout va bien sur la page. Et l'autre chose que vous allez remarquer est que nous ne comptons pas vraiment sur le système de grille ou les colonnes pour aligner. Nos images sont du texte et d'autres éléments en raison du style de conception que j'ai choisi. Et lorsque nous passons à et que nous sommes contenus dans cette section, nous n'utilisons pas du tout les colonnes. Nous allons simplement faire une sélection pour aligner ce texte directement au centre plutôt que d'utiliser les colonnes de la grille. Allons de l'avant et commençons à recadrer nos images à la taille que nous voulons. Donc, si nécessaire, vous devrez peut-être re échelle. Votre image est en fonction de la taille que nous allons utiliser pour chaque image. Je recommande donc de mettre à l'échelle vos images aussi près que possible de la hauteur ou de l' avec pour cette image particulière. Donc maintenant, j'ai 3 11 pour la hauteur, et on va faire 3 10 pour la hauteur, donc je ne peux plus vraiment l'échelle. Donc je vais aller de l'avant et prendre ce calque particulier, qui est cette image de piste, et je vais faire une sélection. Et puis je vais ajouter un masque de calque pour le recadrer à cette taille particulière, qui est encore une fois pour 67 par 3 10 Et puis si je veux, je peux réellement saisir mon outil de déplacement avec la lettre V. Et puis je peux soit utiliser mes touches fléchées après avoir cliqué sur ce calque et déplacez cette image en position pour recomposer l'image en fonction de la façon dont je veux la composer. Donc, une fois que je fais cela, je peux ensuite aller et ajouter mon masque de calque, assurez-vous que vous avez sélectionné la sélection et cliquez sur ajouter et l'image est rognée. Donc, cette image ici est beaucoup plus grande que la dernière. Nous devons également désélectionner avec le contrôle Commander et D. Donc, je vais sélectionner cette couche particulière, puis je vais utiliser mon outil d'échelle pour la réduire. Je dois aussi m'assurer que j'ai tout enfermé ici afin qu'il reste et proportion. Et je vais faire attention à ces chiffres ici parce que je ne veux pas qu'un de ces nombres soit inférieur à 4 67 ou 3 10 Je pense que c'est bien là. Donc je vais aller de l'avant et le redimensionner, et ensuite je vais utiliser mon outil rectangle pour faire une autre sélection. Mais ce que je dois faire, c'est m'assurer d'aligner cette image particulière sur le côté droit de cette image afin que nous puissions activer nos guides et ajouter quelques guides le long de ces images pour nous aider à faire une meilleure sélection avant de faire cette sélection. Sinon, si on le découpe et qu'il est hors de place et qu'on doit le refaire, Ok, je vais aller de l'avant et prendre mon outil de déplacement à nouveau pour que je puisse déplacer un peu cette image et recomposer parce que je ne veux vraiment pas recadrer sur cette partie de l'image à nouveau. Ces airs, les petits détails sur lesquels vous devez travailler lors de la conception de vos sites Web pour rendre vos designs meilleurs que le graphiste moyen. Bon, allons-y et un masque à nouveau. Et puis nous avons juste besoin de répéter cela pour toutes les autres images. Donc je vais aller de l'avant et faire ça très vite, et je vais probablement accélérer cette partie du tutoriel pour ne pas avoir à me regarder faire ça et ralentir. - Allons de l'avant et ajoutons notre contenu corporel dans cette section. Nouveau. Allons de l'avant et créons un fond de couleur pour cela d'abord. Et nous allons de l'avant et créons un nouveau calque d'arrière-plan appelé fond de texte. Allons de l'avant et créons une sélection ici, et ensuite nous allons la remplir avec cette couleur crème que nous avons utilisée dans notre section d'en-tête ici. Je vais prendre mon compte-gouttes et le sélectionner, et ensuite je pourrai aller de l'avant et remplir ça. Bon, allons-y et notre clou de contenu. Prenez votre outil de texte. Changons la police en chemin de fer Ultra Bold. Faisons 72 pour la taille, puis notre couleur vert foncé. Et nous allons taper des choses à faire. peux juste bouger ça maintenant, avant que nous et notre contenu corporel, je veux que la taille de ce contenu soit une taille spécifique. Donc, si je récupère mon outil de texte et clique sur une zone de texte, je ne peux pas vraiment définir la taille de cette zone de texte. Donc, un moyen de contourner cela est de créer un nouveau calque. Ce sera temporaire plus tard parce que nous allons seulement l'utiliser pour créer une forme pour la taille que nous voulons et ensuite nous la supprimerons quand nous aurons terminé. Alors allons de l'avant et faisons la forme. Faisons 600 vin par 4 50, et puis on va juste prendre un gris clair et le remplir avec ça, et c'est la taille de la zone de texte que je veux utiliser. Allez-y et sélectionnez et prenez votre outil de texte, et avant de le faire, nous allons nous assurer que nous avons la bonne Funt maintenant, quand il s'agit de la famille de polices pour le contenu du corps, j'aime utiliser une police comme Georgia, qui est beaucoup plus facile à lire à une taille plus petite de 14, 16 ou 12 par rapport à une police comme celle-ci, ce qui est beaucoup plus facile à lire à une taille beaucoup plus grande. On va faire la Géorgie à 16 ans pour la taille, et ensuite pour la couleur, on va faire une couleur gris foncé. Maintenant, nous pouvons prendre cet outil de texte et cliquer et faire glisser une forme autour d'elle. Mais d'abord, nous allons de l'avant et le recadrage, le contenu de cette limite Lear pour qu'il soit plus facile de voir où placer cette zone de texte. Donc maintenant notre boîte de texte est la taille exacte que je veux. Alors maintenant, je vais prendre un texte factice, celui qui a déjà été sélectionné sur un autre moniteur, et je vais aller de l'avant et coller ça. Ok, donc j'ai un texte supplémentaire ici qui est coupé. Donc je vais juste rendre cette zone de texte un peu plus courte et ensuite appuyer sur la touche d'échappement en sortir. Maintenant, je veux faire de l'ensemble suivant de paragraphes une taille spécifique aussi, ou au moins être confiné à une taille spécifique. Donc nous allons prendre notre couche d'arrière-plan ici, et nous allons le redimensionner avec notre outil d'échelle. Et cette fois, ça va être 1 50 pour la hauteur et c'est 600 pour le avec. Assurez-vous de le déverrouiller d'abord, le redimensionner, puis nous pouvons prendre cette boîte et descendre ici afin que nous puissions créer une nouvelle zone de texte basée sur cette nouvelle taille. J' ai besoin de revenir à mon texte et juste un peu parce que je peux encore y voir un petit texte. OK, maintenant que je l'ai fait, ce que je veux faire c'est jeter un coup d'oeil rapide et l'ancien design. Ils ont une section ici qui a une mise à jour qui donne des informations sur l'état du parc, et en ce moment il est fermé en fonction de l'état. Il s'agit donc d'une information importante que nous devrions inclure sur les choses à faire, parce que si quelqu'un examine les choses à faire, il serait bon de savoir si le parc est ouvert ou non. Donc on va aller de l'avant et cette information ici. J' ai donc cette information d'un document précédent et d'un autre moniteur ici à gauche que vous ne pouvez pas voir. Il suffit donc de saisir du texte factice, puis il suffit de saisir votre outil de texte et de créer une nouvelle zone de texte fonction de la nouvelle taille de notre forme. Allez-y et collez-le en frappant votre clé d'échappement. Et maintenant, nous pouvons supprimer ce fond de texte parce que nous n'en avons plus besoin. Et puis je pense que nous devrions ajouter un titre pour cette section aussi. Je vais l'appeler mises à jour du parc, et je veux aussi changer la police en gras ferroviaire. Rendons également la taille de la police plus grande. Faisons 20, puis choisissez juste une couleur rouge foncé. Bon, je vais aller de l'avant et allumer mes guides maintenant pour pouvoir aller de l'avant et aligner tout sur la gauche. En ce qui concerne l'espacement ici, allons de l'avant et mesurons 25 pixels d'espace. Faisons 50 pixels d'espace entre ce paragraphe et le titre suivant, et il n'y a vraiment aucune raison pour laquelle j'utilise ces nombres exacts. Je trouve juste que ces chiffres fonctionnent bien pour cette conception. Donc, quand vous concevez, vous devrez décider et choisir la quantité d'espacement en fonction de ce qui vous semble mieux. Ok, je peux aller de l'avant et mettre celui-ci en position, et ensuite nous devons faire 25 pixels d'espace pour le paragraphe suivant. Allons de l'avant et commençons à organiser nos couches ici. Donc maintenant, nous devons prendre ce contenu et l'aligner parfaitement au centre de cette zone ici . Donc, je vais aller de l'avant et créer un nouveau groupe de calques pour tout ce contenu appelé contenu corporel . Et cela rendra plus facile d'aligner tout directement au centre. Je vais aller de l'avant et faire une sélection pour cette zone ici. Maintenant, nous aurions pu le faire avec l'arrière-plan du texte, mais je crois que l'arrière-plan du texte est en fait plus grand que cette zone ici. Et c'est pourquoi j'utilise une sélection au lieu de m'aligner sur l'arrière-plan. Alors ligne ce centre et le milieu de la cible, de sélectionner Commandant, Contrôle et D, et tout est fait. Il nous reste encore une chose à faire et c'est l'annonce. Sont des titres pour chaque image. Je vais aller de l'avant et faire défiler ici parce que je veux cliquer sur mes pistes Image pour le premier titre et je vais vous dire pourquoi je le fais de cette façon dans un instant. Allons de l'avant et attrapons notre textile avec la lettre T. Changeons la police, Teoh Arrow Pour la taille, nous allons faire 60 et changeons le bout blanc. Ok, je vais cliquer sur l'image ici, et je vais taper le premier titre dans toutes les capitales. Et voici pourquoi j'ai sélectionné mon calque d'image avant d'ajouter le titre. Lorsque vous faites cela, il va ajouter ce calque de texte directement au-dessus du calque que vous avez sélectionné. Donc, si je viens à l'image de camping et tapez camping, cette couche de camping est maintenant au-dessus de l'image de camping. Cela rend les choses plus faciles au lieu de tout faire ici ou ailleurs et d'avoir à revenir en arrière et à déplacer tous ces titres en position. Une autre astuce rapide pour vous aider à vous organiser plus rapidement en sélectionnant d'abord le calque avant d'ajouter votre titre. Maintenant que nous avons notre texte blanc sur nos images, nous avons un petit problème Certaines des images ont des couleurs claires et attendent en arrière-plan, et cela rend difficile la lecture de ces titres. Nous voulons faciliter la lecture du contenu pour les gens, donc nous devons faire quelque chose avec notre texte ici. Pour faciliter la lecture, affaiblir l'opacité des images ou rendre l'image plus sombre. Ou nous pourrions créer une zone de texte derrière le contenu et utiliser une couleur foncée derrière celui-ci. Ou nous pouvons ajouter une ombre portée au texte pour le rendre plus facile à lire, car cela va aider à séparer le texte de l'image. Et dans ce cas, pour ce design particulier, j'aime l'idée de l'ombre portée par rapport aux autres options parce que je ne veux pas et quoi que ce soit d'autre pour les images, parce que les images devraient se démarquer de leur propre chef. Et si j'ajoute un arrière-plan pour le texte lui-même, cela enlève en quelque sorte l'image. Donc, parce que c'est un style de conception intensif d'image, je veux que ces images se démarquent autant que possible. Alors allons de l'avant et sélectionnons notre premier titre ici. On va filtrer la lumière et l'ombre portée. Alors continuons et jouons avec nos paramètres ici pour trouver une option qui convient le mieux à nos titres et aux images. Je vais aller de l'avant et déposer X et Y vers le bas. Je vais aussi laisser tomber le rayon de flou, ce qui aiguise cette ombre portée, et cela l'aide à se séparer beaucoup plus de l'image derrière elle lorsque vous abaissez ce rayon en conséquence, en fonction de votre propre préférence. J' aime donc ces paramètres ici, et je peux soit créer un nouveau préréglage basé sur cela, puis revenir dans cette boîte de dialogue d' ombre portée de filtre chaque fois que je veux ajouter cette ombre portée à tous les autres titres. Ce n'est vraiment pas nécessaire à moins que je veuille utiliser cette ombre de travail particulière dans un projet différent . Je n'ai pas l'intention d'utiliser ces paramètres spécifiques pour un autre projet, donc je suis d'accord avec cliquer sur OK, car si vous vous souvenez, si vous sélectionnez une autre couche de texte, puis utilisez votre raccourci clavier, qui est une commande ou et F, il va automatiquement appliquer ce paramètre de filtre directement à la couche. C' est cool ? Donc, il est beaucoup plus facile et plus rapide d'utiliser ces claviers pour couper plutôt que de revenir dans le menu pour le faire manuellement. Alors allez-y et appliquez votre ombre portée à tous vos titres. Maintenant que nous avons nos ombres portées ajoutées à tous nos titres, nous devons alors prendre tous nos titres et la ligne, puis parfaitement au centre de nos images. Alors allons de l'avant et commençons par notre première image ici. Je vais saisir l'outil de sélection de rectangle afin que je puisse faire une sélection autour de l'image et ensuite je peux utiliser mon outil d'alignement pour l'aligner sur cette sélection. Donc je vais aller de l'avant et faire ça pour chacun des titres et des images. Ok, on a presque fini. La dernière chose que nous devons faire est d'organiser tous nos calques et je vais prendre tous les titres et images et les placer dans des groupes de calques individuels appelés Image One à Image 7 et c'est tout ce qu'il faut faire. La section est maintenant faite dans. Le prochain tutoriel va aller de l'avant et commencer à travailler sur la section info de notre corps. Donc si tu es prêt à le faire, faisons-le. D' accord ? 72. Infos corporatives: Bonjour et bienvenue. Très bien, donc nous avons une autre section pour notre page Web qui va fournir des informations supplémentaires à tous ceux qui veulent visiter le parc. Nous allons beau contenu en haut et quelques boutons en bas qui fourniront des informations supplémentaires lorsque vous cliquez sur. Et puis nous allons aussi ajouter une petite section ici pour ceux qui veulent réserver un camping au parc. La première chose que nous devons faire est d'ajouter une grande image pour l'arrière-plan de la section. Toute image fera l'affaire. Alors allez-y et allez choisir Sabei, trouver une image, puis aller de l'avant et mettre à l'échelle. Donc, il fait au moins 1950 pixels de hauteur, et il couvre le plein avec du document ne doit pas avoir exactement la même taille. Assurez-vous juste qu'il remplit au moins autant. Bon, allons-y et attrapons notre textile avec la lettre. T fun famille va être flèche. La taille va être très grande à 95 et nous allons utiliser du blanc et ce sera pour notre titre. D' accord, je vais aller de l'avant et éteindre ces autres couches. De cette façon, je peux sélectionner les calques dont j'ai besoin avec mon outil d'alignement car nous allons aligner notre titre. Donc, le contrôle du premier commandant et un pour sélectionner tous. Ensuite, vous êtes boiteux, il outil, puis un centre de ligne de cible. Je veux aussi ajouter une ombre portée à ce titre parce que c'est un peu difficile à lire en ce moment . Donc, avec Commander Control et F, nous pouvons ajouter l'ombre portée que nous avons utilisée dans les parties précédentes du projet. Donc, cela rend certainement beaucoup plus facile à lire plutôt que de ne pas avoir l'ombre portée. D' accord. Ensuite, je veux créer deux zones de texte pour contenir le contenu de la partie supérieure. Nous allons donc créer un nouvel arrière-plan de calque appelé zone de texte un. Donc la prochaine chose que je veux faire est que je veux ajouter deux zones de texte pour contenir nos informations. Nous allons donc créer un nouveau calque appelé zone de texte un. D' accord, pour la taille, nous allons faire 700 par 3 50 Ensuite, nous allons remplir ça avec du blanc, aller de l'avant et de sélectionner avec Commander Control et D Allons jusqu'à calquer et recadrer le contenu. Je vais juste le déplacer vers le haut, sélectionnez tout, puis une ligne au centre du document à nouveau de select. Et nous allons créer une autre boîte de texte cette fois, appelée boîte de texte, aussi. Pour celui-ci, nous allons tailler 700 par 700 et nous allons le remplir de blanc à nouveau. vais juste zoomer ici pour que je puisse saisir ce calque et le déplacer en position. Nous devons également recadrer la limite de la couche, alors n'oublions pas de le faire. Et je pense que je veux aussi abaisser l'opacité à 30 et cela permettra à une partie de cette image en dessous de passer. D' accord, allez-y et prenez un texto factice. Ensuite, prenez votre outil de texte et changez votre famille de polices en Géorgie. Laissons tomber à 16 pour la taille et une couleur gris foncé. Je vais juste dessiner une boîte de texte aléatoire. N' importe quelle taille est bien. Allez-y et collez le texte factice et, si nécessaire, calque de film au-dessus de la zone de texte. D' accord. Je vais aller de l'avant et ajouter un autre paragraphe ici pour remplir l'espace un peu plus, puis je vais ajuster ma zone de texte en conséquence si ce Texas est coupé. Donc, je vais aller de l'avant et de saisir mon outil d'alignement maintenant avec la lettre une capture que la zone de texte décalage d' arrière-plan et cliquez sur le paragraphe, puis une ligne vers le premier élément. Bon, donc ça a l'air plutôt bien. Allons-y et ajoutons nos boutons. Maintenant, nous allons aller de l'avant et créer un nouveau calque appelé Button. Ajoutons des coins arrondis avec le rayon de 15, puis, pour les signes allaient faire 3 75 par 75. Prenez votre seau, remplissez l'outil et puis assurez-vous de saisir votre couleur vert foncé et remplissez-le. Allez-y et deselect et passons à la couche de recadrage au contenu et déplacez-le en position. Et puis nous avons juste besoin de les aligner bouton au centre du document à nouveau. Alors sélectionnez tout. Prenez votre outil d'alignement cliquez dessus et une ligne à la sélection. Ok, laissons choisir le Commandant Contrôle et la lettre D. Hey, on va revenir à notre textile, et cette fois on va changer la police pour le chemin de fer Bold. Faisons 34 pour la taille et on va faire du blanc pour la couleur. Et je parie que tu sais ce qu'on doit faire ensuite. C' est vrai. Nous devons aligner notre contenu au milieu de notre bouton, accord ? Et allons de l'avant et organisons certaines de ces couches. Allons de l'avant et prenons notre bouton et dupliquez-le cinq fois, cinq fois, d' accord  ? accord Et nous allons utiliser notre outil d'alignement et sélectionner tous les boutons sont maintenus sur votre touche Maj et cliquez sur chacun d'eux, puis une ligne à gauche. Ensuite, je veux répartir la quantité d'espace uniformément entre tous les boutons. Donc, nous allons fille vers le bas pour distribuer et puis pour offset. Pourquoi ? Je veux changer ça à 100. Cliquez ensuite sur cette icône pour distribuer les centres verticaux. Ok, je veux renommer tous ces calques maintenant bouton un à six, puis je vais les mettre tous dans leur propre groupe de calques. Ok, allons de l'avant et une ligne vers la zone de texte, puis un nouveau groupe précédent pour cette section. Ok, donc la première section est à peu près terminée. Je pense qu'on a juste besoin de prendre ce titre ici dans la ligne d'ici à ici. Alors faites votre sélection et allez-y et alignez-la donc la dernière partie de cette section sera une action appelée, qui sera un endroit où les visiteurs pourront réserver un camping. Donc nous allons construire un filtre comme nous l'avons fait dans le projet précédent, et nous allons commencer par une boîte de contenu d'abord. Et je veux que cette boîte soit pleine de la page. Alors allons de l'avant et créons un nouveau calque d'abord. Bon, allons-y et faisons notre sélection. Et faisons cette sélection 525 pixels de haut. Maintenant. Le seul problème est que ma sélection va au-dessous de l'image. Je veux qu'il soit contenu dans l'image dans cette zone ici afin que je puisse simplement cliquer et le faire glisser vers le haut en position. Une fois que nous avons fini de faire, cette section va de l'avant et l'alignera au centre du bas de cette partie dans le bas de notre image. Pour l'instant, allons de l'avant et remplissez-le de blanc. Désélectionnons et abaissons l'opacité à 75%. D' accord, ajoutons le titre de cette section. Prenez votre texte avec la lettre T. Nous allons utiliser la flèche de la police 95 de la taille à nouveau, puis sont de couleur gris foncé. Allons de l'avant et alignons. Donc je vais créer un autre arrière-plan pour le filtre lui-même. Cette fois, je veux faire le plein avec basé sur notre système de grille. J' ai donc une directive supplémentaire ici. Je vais aller de l'avant et bouger ça pour que mon côté gauche soit là. Alors allons de l'avant et dessinons une sélection jusqu'à la fin, et puis nous allons changer la hauteur. 2175. On va utiliser cette couleur vert foncé à nouveau. Nous avons également besoin de créer un nouveau calque va d'abord l'appeler fond de filtre, puis nous pouvons aller de l'avant et le remplir dans de select. Et je vais laisser tomber l'opacité de ce calque d'arrière-plan à 10. Je pense que c'est un peu trop. Essayons 20 et je vais y aller. Et maintenant, nous pouvons créer nos formulaires pour ce filtre. Commençons par les titres de chaque colonne que nous allons créer. Donc on va changer notre texto en Géorgie. Mais je veux choisir l'italique pour le style. La taille sera 14 puis gris foncé à nouveau, et la première colonne sera la date d'arrivée. Ensuite, nous allons avoir la durée du séjour et puis moins de colonne sera flexible à nouveau. Nous pourrions faire beaucoup plus de colonnes en fonction de la façon dont ce visiteur peut affiner sa sélection. Mais on va rester avec trois colonnes pour l'instant. Ok, allons travailler sur la Rose maintenant. Je vais juste l'appeler Rangée 1. Et pour la taille, ça va être semblable à nos boutons ici. Peut-être un peu plus petit. Faisons 300 par 75 et remplissons-le avec le vert foncé. Ok, dupliquons ça deux fois. Allons de l'avant et recadrons la limite de la couche pour chaque couche. Alignons tous au sommet, puis nous allons définir le décalage. Pourquoi ? Retour à zéro et tout Set X 23 50. Cliquez ensuite sur cette icône pour distribuer les centres horizontaux. Allons de l'avant et attrapons nos titres, clouons et mettez-les en position. Ok, Retour à l'outil d'alignement afin que nous puissions sélectionner tous ces éléments et les aligner vers le haut. Kate, organisons nos couches. Bon, allons de l'avant et une ligne sont contenus à l'arrière-plan du filtre. Accédez d'abord à votre calque d'arrière-plan de filtre et recadrez au contenu, puis utilisez votre outil d'alignement pour sélectionner les deux à aligner. Ok, je veux juste ajouter quelques informations dans ces rangées pour que les visiteurs sachent quelles informations doivent être saisies dans chaque rangée pour la famille amusante. On va retourner au chemin de fer, on va choisir Bold 24 et blanc. Maintenant, comme nous l'avons fait précédemment dans le dernier projet, nous pouvons vouloir créer des états de survol pour certaines boîtes déroulantes. Donc, je vais laisser cela à vous si vous voulez ajouter ceux lorsque vous faites votre propre design pour votre portfolio, la dernière chose que je veux faire est d'ajouter un autre lien ici, et ce lien particulier sera utilisé s'ils ne sont pas familiers avec le différentes options ou le parc lui-même et pas familier avec les différents campings. S' ils cliquent sur ce lien, il les mènera à une autre page qui pourra leur fournir des informations supplémentaires sur les différents types de campings. Donc la dernière chose que nous avons à faire est d'organiser nos couches. - Félicitations . Nous avons maintenant terminé avec notre section info de la conception de notre page Web. Donc, dans la leçon suivante, nous allons travailler sur le pied de page de cette page Web. Donc, si vous êtes prêt à commencer là-dessus, eh bien, est-ce que eh bien, ça le fait ? 73. Footer: Bonjour et bienvenue. Bon, donc on va finir notre projet de web design avec notre pied de page. Maintenant, il ne semble pas trop différent du pied de page d'origine, et ils ont actuellement un total de cinq colonnes avec leurs icônes de médias sociaux ici et une ligne séparée. Et j'ai pensé que ce serait bien d'avoir tout dans les colonnes plutôt que de l'étaler. Nous avons aussi cinq colonnes ici. De plus, cela ferait une colonne de six, qui est agréable, car alors nous pouvons mettre une colonne à travers les colonnes de la grille chacune et cela espacera uniformément tout. Et puis j'ai changé les couleurs un peu pour le rendre un peu plus facile à lire. Alors allons de l'avant et commençons par créer notre arrière-plan pour la première section du pied de page. Allons de l'avant et créons un nouveau calque appelé Pied ou un pour la hauteur. Mettons-le à 4 25 J'ai aussi besoin de déplacer cela vers le haut. On dirait que je manque de place sur ma toile, donc on va devoir augmenter ça fera ça en une seconde. Allons de l'avant et choisissez notre couleur gris foncé. Allez-y et remplissez le contenu, puis recadrez le contenu et déplacez-le vers le bas. Allons de l'avant et augmentons notre taille de toile. Je vais juste ajouter 800 pixels à la hauteur, et puis on le réajustera une fois qu'on aura fini. Très bien, créons un nouvel arrière-plan appelé Pied de page à cette fois. Nous allons le dimensionner plus petit, Alors faisons 1 25, puis sélectionnez votre couleur vert foncé pour la remplir avec De Select et recadrer le contenu. Maintenant que nous connaissons la hauteur des deux pieds de page, nous pouvons aller de l'avant et recadrer ou de la toile. Maintenant que nous connaissons la hauteur des deux pieds de page, nous pouvons aller de l' Je suis encore au 51 81. Vous pouvez être différent selon les images que vous avez sélectionnées, alors allez-y, déterminez la hauteur de votre toile, puis continuez et recadrez la pour le premier titre. On va le mettre à Railway Bold 24 et le rendre blanc. Alors allez-y. Il suffit de taper du texte fictif pour votre titre et nous allons de l'avant et de l'aligner sur la première colonne sur le côté gauche. Je vais aller de l'avant et créer mon titre secondaire, puis pour notre prochain titre. On va utiliser le chemin de fer régulier, et on va le tailler à 18. Ensuite, nous avons un peu plus de texte à placer en dessous. Je vais créer une zone de texte qui traverse deux colonnes, puis coller quelques informations pour la remplir. Redimensionnons le à 14 et je veux aussi augmenter l'espacement entre chaque ligne pour la rendre plus facile à lire. Allons donc vers le bas et augmentons l'espacement. Et je pense que 15 pour cet espacement des lignes fonctionnera très bien. Bon, sortons de là. Et l'autre chose que je veux faire est que Want créer une ligne de deux colonnes de large, donc je vais aller de l'avant et créer une nouvelle ligne appelée plus tôt. Dessinons une sélection sur deux colonnes et allons de l'avant et remplissons-la de blanc . Je veux aussi rendre cette ligne un peu plus mince. Allons au calque, recadrer le contenu, puis saisir votre échelle. Outil était Shift plus s et faisons la hauteur, aussi. Allez-y et déplacez cette ligne juste un peu. Allons de l'avant et arrangeons certaines de nos couches ici Ok , maintenant que nous avons tous ces éléments entrés et alignés, continuons et dupliquons ce calque quelques fois pour que nous puissions remplir le reste du colonnes. Allons de l'avant et trouvons notre couche de grille ici. Assurez-vous qu'il est allumé et continuons à l'échelle pour que nous puissions réellement le voir au bas de notre campus ici. Donc ça va nous rendre plus facile de placer nos colonnes là où elles doivent être, peuvent. Travaillons sur la deuxième partie de notre pied de page. On va garder le chemin de fer, mais je vais en faire 14 pour la taille. Allons de l'avant et ajoutons notre logo ici. Je vais aller de l'avant et le prendre dans la section d'en-tête et dupliqué et le ramener tout le chemin vers le bas. Maintenant, nous devons l'attraper d'ici aussi. Kayla organisé sont un peu des couches. La seule chose que je veux faire est que je veux prendre ce logo et le rendre tout blanc, alors allons de l'avant et créer un nouveau calque appelé overlay. Remplissons le blanc, et allons de l'avant et mettons ces deux couches et un groupe nucléaire appelé Logo Overlay. Ensuite, nous devons changer le mode de fusion pour superposition et nous allons sélectionner Edition Perfect. Donc la seule chose à faire est d'ajouter les icônes des médias sociaux, et je vais vous laisser faire ça par vous-même. C' est très simple. Créez simplement votre titre, puis ajoutez vos icônes de médias sociaux comme je l'ai fait ici. L' autre chose que je ferais est de mettre à jour le pied de page pour représenter différents titres et différents liens. Je ne pense pas que tu veuilles rester ici et me regarder taper toutes ces informations. Si vous voulez vous entraîner à le faire vous-même, vous pouvez aller de l'avant et le faire. Et c'est certainement quelque chose que je ferais avant de le donner à mon client pour examen. Je changerais aussi. Les liens ici sont bien d'être différents par rapport à avoir tout exactement la même chose. Bon, donc c'est tout pour notre pied de page. Et comme vous le savez, nous devons parcourir toute la page Web avant de donner à nos clients pour la mettre à jour et améliorer si possible, et pour modifier tout ce que nous avons oublié de faire. comme l'espacement et les alignements. Donc, nous allons aller de l'avant et jeter un oeil à la page globale dans le prochain tutoriel. Et il y a une autre chose à faire que nous n'avons pas encore faite. Et c'est ajouter nos états de survol à notre section info pour ces boutons ici. On va changer les noms de ceux-ci et ensuite créer une petite fenêtre pop-up pour l' état du vol stationnaire . Et que se passe-t-il après avoir cliqué sur ce lien particulier ? Donc on va couvrir ça dans le prochain tutoriel, donc si tu es prêt pour ça, faisons-le. 74. Tweaks: bonjour et bienvenue aux dernières modifications du projet numéro cinq. Dans l'ensemble, je pense qu'on a fait du bon travail. n'y a pas beaucoup à changer ou à réparer. Je pense que nous avons tout aligné correctement tout centré correctement. J' aime les fonds qu'on a utilisés. La seule chose que nous n'avons pas fait était et un état de vol stationnaire pour ce bouton particulier ici. Et nous n'avons pas changé le nom des titres pour chacun de ces boutons. Ce sont donc deux choses que nous devons absolument faire avant d'envoyer le concept de design à nos clients. Donc je vais aller de l'avant et mettre à jour ces boutons très rapidement. L' autre chose que je veux mentionner est qu'il y a certainement plus d'informations sur leur site Web global que ces cinq boutons. Donc, ma recommandation serait d'élargir cette section pour inclure des boutons pour toutes les informations. On ne va pas faire ça parce que c'est juste répétitif des choses qu'on a déjà faites. Vous savez déjà comment créer un bouton et un centre de texte, il etcetera. Mais c'est quelque chose que je garderais à l'esprit avant de soumettre une conception pour examen ou approbation est de m'assurer que vous avez toutes les informations incluses dans votre conception. Vous ne voulez pas lésiner et laisser quoi que ce soit de côté parce que le client peut être confus et rejeter le design non pas nécessairement basé sur votre conception, mais parce qu'il manque des informations. Assurez-vous donc d'avoir toutes les informations incluses. Allons de l'avant et conçu l'état de vol stationnaire, qui va être une fenêtre pop-up lorsque vous cliquez sur l'un des boutons. En fait, avant de le faire, allons-y et un mensonge est contenu dans les boutons. Maintenant, comme vous le savez, à partir des leçons précédentes, nous ne pouvons pas sélectionner ces calques de texte individuels parce qu'ils sont enterrés à l'intérieur de calques de groupe , moins dans la version actuelle de Gamper, qui est 2.10 point sur Peut-être que dans une future mise à jour de gimp, ils nous permettront de sélectionner ces couches avec leur outil d'alignement, même si elles sont imbriquées dans des couches groupées, et la seule option est de désactiver les couches ou le groupes de couches au-dessus. Mais même dans ce cas, je ne peux toujours pas sélectionner mon texte, et ensuite nous pouvons sélectionner ce calque particulier avec notre outil d'alignement, sélectionner tout et une ligne à cette sélection. Ensuite, nous devons saisir ce calque et le déplacer jusqu'à l'intérieur des calques de groupe. Pas très productif. C' est pourquoi vous pouvez mettre à jour des choses comme celle-ci au moment où vous les créez et non au cours du processus d'ajustement, car cela va ajouter beaucoup de temps à la production de vos conceptions Web. Je vais aller de l'avant et finir le reste de ces titres et les aligner sur leurs boutons . Bon, allons de l'avant et attrapons notre icône d'état HOVER de notre en-tête et dupliqué et ajoutez-le au premier bouton. Très bien, nous sommes maintenant prêts à créer notre pop up état de vol stationnaire, qui est l'état après avoir cliqué sur un bouton. Alors allons de l'avant et créer un nouveau calque au-dessus du bouton un appelé Hover Pop up. Nous allons créer un arrière-plan qui couvre tous nos boutons actuels pour afficher toutes ces informations. Donc pour la taille, on va faire 5 25 par 600. Je vais juste le déplacer ici à gauche et le centrer un peu, puis je vais aller de l'avant et le remplir de blanc. Je veux aussi ajouter un trait. Alors allons pour modifier la sélection de trait, je vais changer ma couleur de premier plan en vert foncé, une ligne de trois et cliquez sur le trait Que de select avec Commander Control et la lettre D. Allons de l'avant et attrapons nos outils de texte. On peut mettre un titre ici des heures d'opération. Je vais changer la couleur et la taille, puis aller de l'avant et prendre du texte fictif, cliquer et créer une zone de texte et coller du contenu. Certainement trop grand. Donc je vais en faire 14 pour la taille. On va le changer en Géorgie et on est de couleur gris foncé à nouveau. J' ai beaucoup de contenu, donc je vais aller de l'avant et rendre ce contenu un peu plus petit. Faisons une taille 12 et cela devrait fonctionner. Allons de l'avant et remontons un peu. Et maintenant, nous devons créer une option pour fermer cette fenêtre. Je vais entrer dans ma zone de texte très rapidement et redimensionner la zone de texte à une ligne en bas juste ici. Bon, allons-y et sortons ces couches du groupe de boutons et créons un nouveau groupe de calques survol à froid. Je pense que je vais vraiment sortir celui-ci du groupe de boutons car c'est un état de vol stationnaire et pas en fait un bouton. Ok, prenons ce survol, pop up et rognons le contenu, puis faisons une sélection de l'arrière-plan, puis sélectionnons à nouveau le calque groupé pop-up survolant. Ça ne va pas me laisser choisir qui est à la maison et aller de l'avant et sortir tout ça, et nous allons juste le sélectionner pour que nous puissions l'aligner au centre du document. Ok, remettons-le à l'intérieur de Select. Et nous allons aller de l'avant et ajouter un lien ici qui va permettre à nos visiteurs fermer cette fenêtre pop-up quand ils auront fini de la lire. Et puis choisissons notre belle couleur bleue pour la couleur. Et je vais sélectionner sous-jacent pour ajouter un sous-jacent en dessous, et je vais le mettre à 16 pour la taille et le chemin de fer. Bold, c'est bien. Ok, je vais juste remettre ça ici encore. Je vais retirer ceci pour que je puisse l'aligner au centre et faire une sélection à partir du bas de ce texte et faire la sélection autour du reste du bas de cette section afin que nous puissions l'aligner directement au centre de cette sélection. Donc quand je remettrai ça à mon client, je le ferai éteindre, et ensuite je pourrai leur montrer ce qui va se passer. Une fois qu'ils cliquent sur l'une de ces options de boutons pour plus d'informations, ils vont voir que l'état Hover va apparaître avec une nouvelle fenêtre avec les informations basées sur le bouton qui est cliqué. Et, bien sûr, notre développeur Web va le remarquer aussi. Donc, la seule chose que nous avons à faire est de réparer votre pied de page et d'organiser les couches qui doivent être correctement organisées. Et puis vous aurez fini avec le projet numéro cinq. Alors allez-y et finissez ce projet de conception Web, puis, comme toujours, allez de l'avant et redessinez cette page Web avec votre propre vision créative afin que vous puissiez éditer portefeuille et ensuite vous serez prêt à passer au projet numéro six. En fait, ce prochain projet est mon design préféré de tout ce cours. C' est mon préféré. Alors j'ai hâte de partager avec vous comment on a fait. Le prochain design a un peu d'une sensation de commerce avec un style rétro à elle. Donc c'est très amusant, et on va apprendre de nouvelles choses dans ces projets de design. Donc quand tu seras prêt, je te verrai dans ce projet. Jusque-là, merci d'écouter et passer une journée géniale. 75. Projet 6 : Briefing rétro: Bonjour et bienvenue à notre projet de conception Web numéro six. Je suis tellement excité que vous avez finalement réussi à ce projet particulier. C' est mon web design préféré. Le projet. Dans ce cours, allons de l'avant et jeter un coup d'oeil sur leur site web existant. n'y a pas beaucoup de choses qui se passent ici, à part beaucoup de mauvais choix de design. Leur logo est pixélisé, et c'est un logo de très faible qualité, pas le design lui-même. Mais le fichier réel qui a été utilisé est de mauvaise qualité, et il n'a pas l'air très professionnel. Nous avons un fond sombre avec du texte sombre pour le menu, ce qui n'est pas facile à lire, donc nous allons le corriger afin que le menu soit beaucoup plus facile à lire. Et si vous vous demandez ce que cette entreprise fait bien, ce qu'elle fait, c'est qu'elle vend de vieilles affiches de film, et une de ces affiches est présentée ici dans la section du corps des héros slash de leur site Web. Et puis nous avons quelques informations de contact ici, donc si vous passez à cette partie de leur site Web, vous remarquerez qu'ils vendent sur rendez-vous en personne ou à divers spectacles d'art et d'antiquités , sorte que vous pouvez communiquez avec eux pour savoir où ils seront pour acheter leurs affiches. Mais ma pensée est, ne serait-ce pas mieux étaient plus faciles ou les deux d'offrir les affiches à la vente directement sur leur site Web. Ils ont déjà une section de connexion pour les clients, mais ils ne vendent pas directement en ligne, donc je ne sais pas très bien pourquoi ils ont une connexion. Ils ont un livre d'or, ne savent pas quel est le bénéfice de cela. Et puis ils ont quelques informations sur leur entreprise et ce qu'ils dio, puis une page de contact, qui est fondamentalement cette information ici. Donc, dans l'ensemble, ce site et ce client peuvent facilement développer leur activité en affichant leurs affiches en ligne et en les vendant directement en ligne, plutôt que de se limiter aux ventes en personne. Laissez-moi vous montrer la page d'accueil du commerce électronique que j'ai créée pour l'os de la galerie rétro. Il a un style rétro au design. Nous avons mis à jour le logo. Le menu est plus facile à lire. La connexion a maintenant un sens de but. Les clients ou les clients peuvent consulter leurs commandes dans leur historique via un compte. Il y a un Kurt shopping pour les amener directement à leur courant pour consulter la section The Hero présente leurs affiches de films les plus populaires que les clients peuvent parcourir jusqu'à cinq affiches de films différentes dans la section héros seule. On peut toujours en ajouter plus si nécessaire, mais j'ai pensé qu'on commencerait par cinq. Nous avons une description de l'affiche du film. S' ils veulent en savoir plus, ils peuvent cliquer sur ce lien Mawr, et un pop-up affichera plus d'informations sur cette affiche particulière. Et s'ils sont prêts à acheter pris en ce moment, alors s'ils veulent explorer plus d'options, ils peuvent faire défiler vers le bas. Et nous avons un type de commerce électronique mis en place que les clients peuvent filtrer en fonction de la qualité du genre de l'année de prix . Teoh trouve facilement les types d'affiches qu'ils aiment collectionner, et, bien sûr, ils peuvent acheter maintenant ou obtenir plus d'informations en premier. Ensuite, bien sûr, nous finissons la page d'accueil avec un pied de page. Donc, dans l'ensemble, nous prenons ce concept de conception Web à partir de leur logo existant et de ce qu'ils vendent. Et c'est pourquoi j'ai choisi un style rétro pour cette entreprise particulière. Et j'adore le style de design que j'ai créé, donc je vais vous montrer comment mettre à jour ce logo. Mais vous pensez peut-être que tout droit sait déjà comment faire ça ? J' ai juste besoin de choisir la police et de la refaire. Si c'était aussi simple, oui, c'est tout ce que tu as à faire. Mais que se passe-t-il si la personne qui a conçu ce logo n'a pas dit à votre client quelle police il utilisait  ? Tout ce qu'ils ont est un fichier J peg aplati, et ils n'ont aucune idée du nom de cette police. Vous allez devoir faire défiler des milliers de polices pour essayer de trouver ça. Ou êtes-vous Ah, lui tellement excité de partager avec vous combien il est facile de comprendre quelle police c'est parmi des milliers. Et vous pouvez le faire littéralement en une minute ou deux au plus. Donc je vais partager ce secret avec vous dans la prochaine leçon. Ensuite, nous allons créer ce curseur rétro. Je vais vous donner un pourboire et la ressource que j'utilise pour les arrière-plans et les textures. Donc nous avons une texture de type lin pour l'arrière-plan, et je peux l'ajouter en un clic et je vais vous montrer comment je fais ça. Et puis, bien sûr, nous allons aller de l'avant et créer la section commerce électronique et je vais vous donner quelques conseils sur la façon dont j' ai créé certains des effets de ces annonces Nous avons déjà parlé des ombres portées, mais nous avons aussi une goutte ombre à l'intérieur du bouton cette fois au lieu de l'extérieur . Alors je vais te montrer comment j'ai fait ça. Et bien sûr, je vais fournir des conseils supplémentaires en cours de route. Donc si vous êtes excité comme je suis à propos de ce projet, faisons-le. Commençons par déterminer la police utilisée dans ce logo. 76. logo: avant que nous puissions réellement refaire notre logo pour ce client. Nous devons déterminer quelle police a été utilisée pour le logo. Le problème est que le client ne sait pas quelle police a été utilisée ou le nom de cette police. Tout ce qu'ils ont est un fichier J peg aplati. Et, comme vous pouvez le voir, c'est très pixélisé. avez effectivement inclus ce logo dans cette leçon, de sorte que vous pouvez le télécharger et l'utiliser vous-même pour déterminer quels fonds. Laisse-moi te montrer comment faire ça. Allez-y et téléchargez-le. Ensuite, nous devons aller sur ce site. Mes polices point com avant slash w t f, et ce que ce site Web va faire, c'est qu'il va enlever le fichier de ce logo, et après l'avoir téléchargé via ce navigateur, il va scanner ce fichier, et il va comparer c'est des milliers et des milliers. En fait, il y a 130 000 polices et compte. Il va comparer ce fichier avec toutes les polices de sa base de données pour affiner la police utilisée dans ce logo. C' est si simple que ça souffle. Comme c'est facile, ça dit. Donc je vais prendre mon dossier ici, et je vais le glisser et le déposer dans cette zone. Ensuite, nous devons cliquer sur ce petit bouton bleu ici pour identifier les Funt et Boom sélectionnés . On y va. Il y a l'extrême droite, Plaza. Il y a d'autres versions de ce fonds aussi, celui-ci ici. Il existe d'autres styles de cette police, sorte que vous pouvez identifier la police utilisée pour ce logo sans avoir à passer au crible 130 000 fonds. C' est cool ? Maintenant, vous regardez ça, et vous pouvez voir par ici à droite. Nous devons acheter ces fonds. Ou nous ? Il existe en fait des versions gratuites de ce funt que vous pouvez utiliser dans votre conception Web, puis vous pouvez décider si vous voulez que votre client utilise cette police gratuite. Ou peut-être qu'ils seraient mieux avec une version de haute qualité de la police d'origine. Et le prix de la police n'est pas tellement. Ceci est en fait en dollars canadiens, donc il est probablement plus proche de comme 25 à 30$ US . . Donc, si nous faisons une recherche Google pour Plaza Fonds gratuit, notre première option ici à partir de polices geek dot com Vous pouvez télécharger le gratuite. Alors, qu'est-ce qu'il a eu le bon esprit local Allez-y et installez-le dans le camp Gimp Restart pour finaliser l'installation, puis revenez dans Gimp et nous allons recréer le logo afin que nous puissions l'ajouter à notre projet. Alors allons-y et commençons. Nous allons créer un nouveau document avec commande ou contrôle et la fin de la lettre. C' est la taille que nous voulons 80 par 68 puis nous allons sélectionner la couleur de premier plan, et nous allons choisir cette couleur gris foncé. Alors allez-y et tapez le numéro de la dette, puis cliquez sur. OK, donc on va aller de l'avant et créer quelques arrière-plans avant d'entrer du texte. Alors allons de l'avant et créons un nouveau calque appelé fond rétro rempli de transparence , puis, avec leur outil de sélection de rectangle, créera la taille de ces boîtes, et le 1er 1 va être de 1 35 par 58 et puis allez de l'avant et déplacez-le vers le haut et dans le document, puis prenez votre blanc et remplissez-le avec votre seau, remplissez l'outil et puis de select. Allons de l'avant et dupliquons ce fond et appelons-le fond de la galerie. Je veux également recadrer la couche bhandari pour les deux couches, puis pour l'arrière-plan de la galerie . Nous allons le remplir avec du noir, alors appuyez sur la lettre D, puis prenez votre outil de remplissage de seau avec la lettre G et allez-y et remplissez-le. Nous voulons également ajouter un guide qui se trouve à mi-chemin sur le logo, donc nous en sommes à 80. Alors faisons glisser une ligne directrice à 1 40, puis nous allons déplacer l'arrière-plan de la galerie vers la droite. Excellent le long de ce guide, puis assurez-vous que votre fond blanc est aligné sur cette ligne directrice également. Ok, on peut aller de l'avant et cacher le guide maintenant, et on va chercher notre outil de texte. Nous allons choisir la police que nous avons téléchargée et installée Plaza de Wreg, puis pour la taille, nous allons faire 60 et nous allons faire noir pour rétro. Alors allez-y et tapez rétro dans toutes les majuscules, puis déplacez-le simplement en position maintenant parce que la limite du calque est à l'extérieur du texte rétro ci-dessus et soufflez-le. Soit on doit aller et ajuster la taille de cette zone de texte jusqu'à ce qu'elle couvre tout pour que nous puissions le faire, puis une ligne qui directement dans la zone de texte je vais aller de l'avant et faire ça. Maintenez la touche Maj enfoncée, cliquez sur le logo, puis sur une ligne vers le premier élément. Ok, nous devons retourner dans la zone de texte maintenant et redimensionner la zone de texte en conséquence. Allons de l'avant et ajouter la galerie sur le côté, mais changeons le bout blanc afin que je puisse aller de l'avant et la ligne ce contenu avec le logo rétro maintenant avec sans utiliser l'outil d'alignement simplement en ajoutant une ligne directrice ici et en s' assurant qu'il s'aligne en haut. Je peux voir visuellement que c'est égal des deux côtés aussi. Donc je vais aller de l'avant et laisser le texte de la galerie juste là, et c'est tout. Notre logo est maintenant terminé. Allons de l'avant et mettons ceci dans un nouveau groupe de calques appelé Logo. Nous pouvons maintenant ajouter ceci à notre projet, et je dois aller de l'avant et ouvrir mon modèle maître de grille et je ne le vois pas vraiment ici en ce moment. Donc ce que je peux faire, c'est que je peux venir ici pour documenter l'histoire, et cela va me montrer beaucoup plus de fichiers que j'ai ouverts dans le passé. Et je peux naviguer à travers cela pour trouver ce modèle maître de grille, puis l'ouvrir directement à partir d'ici plutôt que d'essayer de le rechercher sur mon disque dur. Donc je le vois ici. En fait, c'est mon fichier PST. Donc, voici, point de grille Exe CF. Donc, si je double-clique sur cela, il ouvrira ce modèle. Et maintenant, je peux saisir mon logo d'ici et le faire dans les documents. Je vais juste le traîner juste là et le déplacer jusqu'au sommet. D' accord ? Maintenant que nous avons fini avec notre logo, nous allons aller de l'avant et travailler sur la section en-tête dans le prochain tutoriel. Donc, si vous êtes prêt à le faire, faisons-le 77. En-tête: Bonjour et bienvenue. D' accord, on va aller de l'avant et travailler sur notre section d'en-tête. Maintenant, nous allons ajouter notre navigation principale ainsi qu'une navigation secondaire. Je vais donc vous donner de nouveaux conseils en cours de route, ainsi que de créer un nouveau raccourci clavier pour une fonctionnalité spécifique que nous avons utilisée dans chaque projet. Et nous l'avons utilisé encore et encore et encore. Donc on va aller de l'avant et créer un nouveau raccourci clavier pour ça. Mais d'abord, allons de l'avant et créons notre arrière-plan d'en-tête. Créez donc un nouveau calque avec l'arrière-plan de l'en-tête de nom. Allons de l'avant et faisons notre sélection. Nous voulons qu'il soit plein avec. Et puis pour la hauteur, nous allons faire 1 50 Allez-y et saisir, sont de couleur gris foncé et le remplir. Ok, allons-y dans de select avant de mettre ça en position. Allons de l'avant et créons un raccourci clavier pour cette visite cette fonctionnalité que nous avons utilisée encore et encore. Et il s'agit de la couche à recadrer en fonction de contenu. Donc, nous avons utilisé cela sur chaque projet sans arrêt. Donc, si nous montons pour éditer et sélectionner les raccourcis clavier. Nous pouvons assigner un raccourci clavier pour cette fonctionnalité spécifique. Donc, à la recherche, on va recadrer au contenu. Donc, de ceux-ci à celui auquel nous voulons assigner le raccourci clavier est l'option des calques. Nous devons donc cliquer ici pour être en mesure d'attribuer une touche à cet outil ou fonctionnalité spécifique . Donc, à l'origine, je pensais peut-être la lettre C, mais c'est utilisé pour l'outil de recadrage. Donc, ce que nous pouvons faire est que nous pouvons utiliser la touche Maj en conjonction avec la lettre C. Donc en maintenant votre touche Maj et puis appuyez sur la lettre C. Et maintenant c'est le raccourci clavier pour cet outil particulier. Assurez-vous que vous avez enregistré les raccourcis clavier à la sortie et appuyez sur Fermer. Maintenant, nous pouvons simplement utiliser Shift plus C pour recadrer la limite du calque au contenu. Bon, allons-y et mettons-le en position. Allez-y et éteignez mes grilles pour l'instant, et continuons et ajoutons notre navigation principale. Maintenant, en ce qui concerne le fonds, essayons la Plaza de Wreg que nous avons utilisée pour le logo. Mais nous allons le tailler 24 et nous allons utiliser White pour la couleur. Alors nous allons taper à la maison et ensuite combattre les espaces boutique et jetons un coup d'oeil à cela. Donc pour l'instant, c'est un peu difficile à lire, alors peut-être qu'il faut augmenter la taille de la police. Alors allons de l'avant et essayons 30 et voyons si cela aide maintenant, bien que cela aide un peu, c'est encore un peu difficile à lire, et le texte est en quelque sorte en concurrence avec notre logo, puisque nous utilisons déjà fonds particulier dans le logo. Donc, je veux utiliser une police de type rétro pour la navigation, et dans ce cas, je ne pense pas que l'utilisation de la famille de fonds de logo fonctionne pour la navigation ou même pour les titres de la page Web. Maintenant, dans le projet précédent, nous avons utilisé une police similaire à leur image de marque, mais elle n'a pas autant rivalisé avec elle puisque le logo était sur la gauche et beaucoup plus petit que les titres réels. Mais dans ce cas, ils sont trop proches ensemble, et même avec une grande taille, c'est encore difficile à lire. Nous voulons donc nous assurer que nous facilitons la navigation et les titres ainsi que le corps du texte. Donc on va changer ça à Oswald et on va le changer en 24 parce que je pense que 30 c'est trop gros. C' est donc beaucoup plus facile à lire par rapport à ce que nous avions auparavant. Maintenant, continuons et ajoutons nos autres éléments de menu de navigation ici sur la droite. Mais avant de le faire, allons juste descendre ici et taper Oswald afin qu'il soit par défaut à cette police que nous ajoutons plus texte. Alors allons de l'avant et tapons environ cinq espaces et en contact. Maintenant, la question est savoir comment aligner toutes ces informations ? Voulons-nous l'aligner sur les colonnes de la grille, ou devons-nous faire autre chose ? Alors allons de l'avant et une ligne à la troisième colonne et la troisième à partir de la dernière colonne ici. Et regardons ce qui se passe quand on fait ça. Je vais aller de l'avant et mettre celui-là, et ensuite celui-ci doit aller à droite un peu. Je vais sélectionner les deux avec mon outil d'alignement afin de pouvoir les aligner vers le bas. Maintenant, j'ai besoin de tout sélectionner. Prenez mon orteil d'alignement à nouveau pour que je puisse mettre en ligne mon logo au centre de cette sélection. Bon, revenons à notre outil Lima et cliquez sur l'un des éléments de navigation. Maj. Cliquez sur votre logo pour l'aligner au bas des éléments de menu. Bon, maintenant que nous avons tout aligné correctement, je ne suis pas sûr si vous pouvez le remarquer, mais la mise en page est déséquilibrée en ce moment. Si nous zoomons ici et regardons de plus près, je peux voir qu'il y a plus d'espace de ce côté par rapport au côté. Même si nous avons tout aligné au centre et à travers les colonnes appropriées. Il y a encore de l'espace supplémentaire ici, et si nous prenons notre outil de mesure ici et mesurons, j'ai 125 pixels là-bas et puis de ce côté j'ai 97 donc il y a 28 pixels supplémentaires d'espace sur le site. Alors, comment on répare ça ? Eh bien, le problème est que nos éléments de menu de navigation ont une quantité différente de caractères en eux et différents caractères en général qui sont de différentes tailles, ce qui crée le déséquilibre. Donc, la question est, est-ce que nous déplacons la navigation principale ici à droite, plus loin vers l'orteil droit, ajouterons plus d'espace, ou supprimerons celle-ci ou vers la droite ? Si nous faisons cela, alors tout ne sera pas correctement centré dans le navigateur lui-même. Donc ça va encore être déséquilibré. Et je pense que cela va être beaucoup plus perceptible que le dilemme actuel d'espacement que nous avons en ce moment. Donc c'est ce que je ferais. Je voudrais prendre notre logo et le centrer directement entre les deux côtés de notre navigation principale , et cela va l'équilibrer. Mais quand vous zoomez sur l'ensemble, vous allez voir en quelque sorte que le logo n'est pas centré dans le navigateur, mais parce que l'espacement est tellement plus éloigné ici à gauche et à droite, il ne sera pas aussi visible qu'il est maintenant, donc c'est le moindre mal des trois options. Donc je vais aller de l'avant et faire une sélection entre ma navigation et ensuite quoi ? L' outil d'alignement. Je peux le sélectionner et l'aligner au centre de notre sélection, ce qui le rend beaucoup plus équilibré ici. Et même si ce n'est pas équilibré dans le navigateur, ce n'est pas aussi perceptible qu'avant. Au moins, c'est mon opinion. Donc ces choses d'air sur lesquelles vous allez devoir décider en fonction de ce que vous voyez et de votre vision créative. L' autre solution est de mettre toute notre navigation principale sur une ligne, puis avec ci-dessous , sur la gauche ou la droite afin que vous ayez également cette option. Bon, allons de l'avant et créons notre navigation secondaire. On va se connecter. Faisons trois espaces pour avancer les barres obliques trois espaces. Je vais changer ça en cinq places des deux côtés ici et ensuite appuyer sur votre clé d'évacuation . Et remontons ça maintenant parce que c'est notre deuxième navigation laitière. Il ne devrait pas être aussi grand que notre navigation principale, donc nous devons revenir en arrière et le rendre plus petit. Dans ce cas, je vais faire 14 pour la taille si nous zoomons et jetons un coup d'oeil, le problème est, c' est difficile à lire, Donc, cette police de caractères Oswald n'est pas une bonne police à utiliser à des tailles plus petites, il est beaucoup plus facile de à une plus grande taille. Donc ce qu'on va faire, c'est qu'on va aller à l'intérieur, double-cliquer sur la connexion, et ensuite ici, on peut le changer en chemin de fer, et maintenant on voit que c'est beaucoup plus facile à lire qu'avant. Maintenant, nous avons besoin et un Kurt shopping à la fin de cela. Et je vais juste prendre un de ceux qu'on a utilisés n'importe quel projet précédent, qui est le premier projet. Et je vais aller chercher ce Kurt shopping et le ramener pour que tu puisses faire la même chose . Ou vous pouvez simplement en trouver un nouveau à travers Google images. Maintenant, très vite. Avant de mettre ça ici et de l'aligner. J' ai un autre conseil rapide pour vous en ce moment. Mon outil de déplacement est sélectionné, et je l'ai choisi plus tôt ou le guide sélectionné. Parfois, quand le contenu de cette couche Israël petit ou peut-être il ya un écart entre les différents éléments. Parfois, il est difficile de choisir le contenu de ce calque et de le déplacer, et au lieu de cela , vous finirez par déplacer quelque chose d'autre, car lorsque vous choisissez un calque ou un guide, il va choisir le calque sur lequel vous cliquez. Donc, par exemple, si nous venons ici et que j'ai essayé de sélectionner cette partie de notre navigation et que je clique au milieu, c'est Ashley qui sélectionne le calque d'arrière-plan et le déplace à la place. Donc si je viens ici et essaie de cliquer dessus, je vais déplacer l'arrière-plan. Parfois, il est difficile d'utiliser cet outil de déplacement avec cette option pour faire une sélection dans certains cas. Mais voici comment vous pouvez contourner ça. Si je prends ce calque d'arrière-plan et que je viens ici et que je clique sur cette option de verrouillage, il va verrouiller le calque en position pour que je ne puisse plus le déplacer. Donc, je pourrais faire la même chose avec mon arrière-plan d'en-tête aussi, et comme ça en position. Et puis je ne peux pas le sélectionner. Mais je peux sélectionner autre chose sur laquelle je clique maintenant. Une autre chose que vous pouvez faire est que vous pouvez toujours prendre votre calque d'arrière-plan ici et une couleur à elle, même si c'est beaucoup. Mais si vous voulez protéger encore plus votre calque, vous pouvez sélectionner cette option ici, qui verrouillera les pixels de ce calque. Donc maintenant, je peux ajouter n'importe quelle couleur à ce calque. Et il dit même ici que les pixels des calques actifs sont verrouillés. Donc quand j'essaierai de le déplacer, tu auras un autre message. La position des calques actifs est verrouillée C'est donc un excellent moyen de vous assurer que vous ne déplacez pas accidentellement un ou plusieurs calques spécifiques ou ne leur ajoutez accidentellement des pixels supplémentaires. Parce que comme vous travaillez avec beaucoup de couches comme nous avons dans les projets précédents, parfois vous essayez de déplacer quelque chose, et peut-être que vous avez la mauvaise option sélectionnée et que vous finissez par déplacer un calque que vous ne voulez pas déplacer, et vous ne le découvrirez pas vraiment avant d'arriver à l'étape finale, où vous êtes en train de peaufiner le design final et ensuite vous devez revenir en arrière et le réparer. Donc, je voulais juste partager ceci avec vous afin que vous sachiez comment protéger vos couches et minimiser le travail supplémentaire que vous pourriez avoir à faire à la fin de votre projet. Bon, allons-y et revenons à notre icône de shopping Kurt et mettons-la en position. Allons de l'avant et une ligne ceci avec nos guides et sa colonne afin que tout soit parfait. Je dois également saisir ma navigation secondaire ici et m'assurer qu'elle est correctement espacée entre les barres obliques avant et le début de son icône. Comme ce n'est pas le cas, je dois aller de l'avant et le déplacer. Et c'est pourquoi nous avons ajouté les cinq espaces à la fin afin que nous puissions voir que la limite de la couche est ici et pas ici. Allons de l'avant et commençons à organiser nos couches. Nous avons également besoin de prendre notre panier ici et de le changer d'orteil blanc, sorte que vous pouvez vous rappeler comment le faire. Ce que nous allons faire est de créer un nouvel arrière-plan de superposition. Nous allons ensuite le remplir avec un clic blanc. OK, créons un nouveau groupe de calques appelé Overlay, puis saisissons cet arrière-plan excessivement et modifions le mode de fusion en addition. Ok, nous avons maintenant notre panier blanc. Jetons un coup d'oeil à notre en-tête jusqu'à présent. On dirait qu'il nous reste une chose à faire, et c'est de séparer un peu plus notre navigation secondaire et primaire parce que c'est toujours en concurrence, et c'est un peu déséquilibré parce que nous avons plus contenu ici sur la droite, sorte que ce côté de la conception est plus lourd. C' est un peu penché vers la droite parce qu'il y a plus d'éléments ou plus de contenu ici. Donc, une façon de corriger cela est de créer un autre arrière-plan pour la navigation secondaire pour aider à contenir ce contenu à l'intérieur, et cela devrait aider à l'équilibrer un peu plus. Donc, créons un nouveau calque appelé arrière-plan secondaire et revenons à la transparence . Cliquez sur OK, et allons de l'avant et remplissez-le avec la même couleur foncée. Allons de l'avant et faisons la hauteur de 40 et nous allons utiliser cette couleur gris foncé. D' accord. Maintenant, nous pouvons utiliser nos nouveaux raccourcis clavier, alors shift plus C aller de l'avant et déplacer cela vers le haut. Nous devons déplacer ceci sous cette couche de groupe. Allons de l'avant et zoomons ici pour que nous puissions aligner notre navigation secondaire entre le haut et le bas. Ici, prenez votre outil d'alignement et allez-y et cliquez sur la navigation secondaire. Le seul problème est que nous avons créé cette nouvelle superposition. Nous devons recadrer le contenu pour s'allier avec le contenu lui-même. Prenez donc votre couche de navigation secondaire groupée. Utilisez votre nouveau raccourci clavier shift plus C. Maintenant, nous pouvons le sélectionner, et la ligne milieu de la cible peut aller de l'avant et de sélectionner. Maintenant, ce que nous devons faire est et une ombre portée pour aider à créer cette séparation. Le seul problème était nous avions un peu d'avance sur nous-mêmes en recadrant le contenu à ce contenu. Donc, j'étais vraiment excité d'utiliser le nouveau raccourci clavier. Donc, allons de l'avant et annulons cela avec la taille de l'image de calque deux calque. Allons à nos filtres sont ombre portée et ajouter une ombre portée. Donc c'est un peu trop gros pour moi. Je vais aller de l'avant et laisser tomber les accès X et Y, et ça a l'air assez bien juste là. C' est une sorte de zoom ici et de voir comment cela affecte le reste du design, donc tout est assez beau. Donc, je vais laisser tout le reste à la valeur par défaut et cliquer sur OK maintenant, si vous le souhaitez, vous pouvez aller de l'avant et utiliser votre raccourci clavier pour recadrer le contenu. Mais comme vous le savez, il recadre le bas vers le bord ou le bas de cette ombre portée, sorte que cela a certainement aidé à équilibrer un peu. C' est encore un peu déséquilibré. C' est encore un peu lourd ici, mais pas autant qu'avant. Et il y a définitivement la séparation entre la navigation secondaire et la navigation primaire. La seule chose que je n'aime pas vraiment, c'est l'espacement du logo parce que nous avons plus d'espace ici qu'ici. Alors allons de l'avant et la ligne du logo au centre du haut et du bas ici. Bon, donc ça a l'air beaucoup mieux maintenant, et je pense que nous avons tous fini. Tout ce que nous avons à faire est d'organiser nos calques ici et de les placer dans un nouveau groupe de calques appelé En-tête. Félicitations. Nous avons maintenant terminé avec la partie en-tête de ce projet de conception. Dans le prochain projet, nous allons commencer à travailler sur le curseur de la section héros, et cela va prendre beaucoup de temps pour le faire. On va probablement diviser ça en deux, peut-être trois tutoriels différents. Donc, si vous êtes prêt à commencer là-dessus, faisons-le 78. Héros, partie 1: Bonjour et bienvenue. Bon, donc on va aller de l'avant et commencer à travailler sur la section héros, qui comprend notre curseur de différents produits. Mais avant de commencer sur curseur, je veux d'abord parler de l'arrière-plan parce que j'ai un fond texturé sur le dos, et je veux vous montrer comment et ces différents types de textures ou de motifs dans Gimp en installant des modèles préfabriqués dans le gimp que vous pouvez ensuite utiliser avec votre outil de remplissage de seau . Vous pouvez même l'utiliser avec vos outils de pinceau, votre chemin, outil et bien plus encore. Donc je vais vous montrer la ressource que j'aimerais utiliser pour obtenir ces types de modèles gratuitement . Alors allons-y et vérifions ça. Et voici le site ici. Top queue point com avant les concepteurs de barre oblique avant slash motifs subtils. Maintenant, j'ai fait une recherche de lin, qui a réduit le nombre de motifs pour ce type de texture ou ce motif, et au total. Actuellement, le site a 491 modèles, et ils continuent d'ajouter de plus en plus de modèles sur une base régulière. a quelques mois, il n'y avait qu'environ 470 modèles. C' est donc une excellente ressource pour trouver des modèles libres que vous pouvez utiliser pour vos projets de conception Web , en particulier pour les modèles de type d'arrière-plan, car ils vont vous fournir un fichier de taille assez petite, environ 50 pixels par 50 pixels ou 100 pixels par 100 pixels. Mais la façon dont ce modèle est conçu ou ce fichier a été conçu, il devient transparent lorsque vous l'agrandissez de 100 pixels à 1400 pixels, et il est fait automatiquement pour vous en fonction de la façon dont le fichier est créé. Alors allons de l'avant et téléchargeons l'un de ces modèles. Je vais vous montrer comment l'installer et gim, et ensuite nous allons commencer à travailler sur la couleur de ce motif particulier parce que, comme vous pouvez le voir, ils sont principalement gris foncé, noir et blanc et n'ont pas vraiment de couleur. Mais je vais te montrer comment ajouter de la couleur à ce motif. Alors allons de l'avant et téléchargez du linge à faible contraste. Donc, soit faire une recherche pour cela ici ou juste Lénine ou juste linge et général. Allez-y et téléchargez-le, puis nous devons décompresser le fichier. Donc à l'intérieur d'ici, vous allez trouver trois fichiers, me lire du texte et ensuite deux fichiers pour ce modèle. Donc, ce fichier ici à X le motif réel est deux fois plus grand. Ce n'est pas celui qu'on veut. Celui qu'on veut, c'est celle-là. Donc je vais aller de l'avant et faire glisser ça dans mon document pour voir quelle taille il est. Et il semble qu'il mesure environ 250 x 250 pixels de haut. Et pour l'instant, ce ne sera pas facile de le faire avec et de remplir toute la section héros avec ce seul fichier. Et c'est pourquoi nous voulons aller dans nos modèles et les appliquer de cette façon. Donc, si vous allez dans votre outil rempli de seau, vous verrez différentes options ci-dessous pour remplir avec le premier plan, l'arrière-plan, puis un remplissage de motif. Donc, j'ai déjà celui-ci installé. Alors laissez-moi vous montrer comment installer ceci afin que vous puissiez ensuite l'appliquer avec votre outil de remplissage de seau . Nous avons donc un dossier spécifique dans lequel nous devons mettre nos modèles, et c'est le répertoire que vous devez suivre pour installer le modèle dans gimp. Donc, vous voulez aller à vos utilisateurs de disque locaux ? Votre nom d'utilisateur ? AP données itinérantes gimp 2.10, puis modèles. Donc, vous allez prendre ce fichier que vous avez téléchargé, vous allez à droite, cliquez et copiez, puis allez à ce support de motifs et collez-le dans. C' est ainsi que vous l'installez pour les utilisateurs de PC. Maintenant, si vous êtes sur un Mac, vous allez aller vers les utilisateurs. Nom d'utilisateur, applications de bibliothèque, support gimp 2.10, puis modèles. Ensuite, vous pouvez coller ce fichier directement dans ce dossier. Et puis une fois que vous avez cela dans le dossier correct, vous devez revenir à gimp et aller dans votre panneau de motifs, qui peut être consulté par les dialogues Windows Doc Kable, puis sélectionner des modèles. Vous allez obtenir une fenêtre comme celle-ci, puis vous voulez cliquer sur ce bouton de régénération des modèles, qui mettra à jour tous les modèles que vous avez ajoutés à ce dossier, puis vous avez juste besoin de localiser ce modèle particulier ici juste pour vous assurer que vous l'avez dans le dossier correct. Donc le mien arrive ici, et je peux voir le nom de ce fichier juste ici. Il a donc été installé avec succès. Ok, donc maintenant que vous avez fait ça, tout ce que vous avez à faire est de créer un nouveau calque. Je vais l'appeler le fond de héros, le remplir de transparence, puis prendre votre seau. Outil de remplissage. Accédez aux options de vos outils. Sélectionnez le motif Phil. Cliquez sur cette icône. Localisez le motif, sélectionnez-le, puis remplissez cet arrière-plan avec ce motif. C' est donc la première étape pour intégrer votre modèle dans votre projet de conception. Maintenant, nous devons coloriser ce motif afin que ce ne soit pas ces gris ennuyeux, et c'est plus de cette couleur orange ici, et nous allons le faire avec une série de différentes superpositions. Alors allons de l'avant et créons un nouveau calque appelé overlay one. Nous allons remplir avec ce type de couleur orange vif dans ce numéro HTML juste ici, puis aller de l'avant et le remplir avec cette couleur de premier plan. Vous souhaitez revenir aux options de vos outils et vous assurer que le remplissage de couleur de premier plan sélectionné. Maintenant, nous devons changer le mode de fusion de ce calque trop doux, léger et Nous voulons également changer l'opacité du calque d'arrière-plan afin que nous puissions le rendre beaucoup plus léger. Je ne veux pas qu'il soit aussi sombre. Donc dans ce cas, je vais faire 90 et je vais créer une autre superposition appelée overlay pour que je le remplisse avec la même couleur. Et cela va me permettre de rendre cette couleur orange beaucoup plus brillante qu'elle ne l'est en ce moment . Donc nous allons faire le même mode de fusion, une lumière douce, et cette fois nous allons baisser l'opacité à 30. Donc, juste en ajoutant la deuxième superposition, nous pouvons rendre cette couleur beaucoup plus brillante qu'elle ne l'était avec une seule superposition. Ainsi, lorsque vous mélangez vos couleurs avec vos motifs, vous pouvez expérimenter et essayer différents paramètres de capacité ainsi que différents modes de fusion pour trouver différents schémas de couleurs et différents effets en choisissant différents modes de mélange et différentes capacités. Donc, c'est quelque chose que vous allez devoir expérimenter seul, pour voir comment vous pouvez trouver différents types de couleurs et d'intensités de ces couleurs. Mais c'est le schéma de couleurs que nous allons utiliser pour notre arrière-plan de héros pour l'instant. Donc, une fois que vous aurez fait cela, nous allons de l'avant et commencerons à créer le curseur dans le prochain tutoriel. Si tu es prêt pour ça, faisons-le. 79. Héros, partie 2: Bonjour et bienvenue. Ok, donc c'est le moment où vous attendiez toute votre vie. Eh bien, peut-être pas si longtemps, mais nous allons enfin commencer à travailler sur la création de notre curseur rétro. Alors allons-y et commençons. Nous allons probablement diviser cela en deux parties parce que cela va prendre un certain temps pour créer tous les différents éléments dont nous avons besoin pour le curseur. Alors allons de l'avant et commençons par créer notre arrière-plan pour le curseur. Alors créons un nouveau S e plus tôt. Je vais prendre ces couches et les regrouper pour les sortir du chemin. Appelons ça le fond de héros. Maintenant, vous avez peut-être remarqué une fois que nous avons mis ces trois calques, n'importe quel groupe de calques, la couleur et la capacité de l'arrière-plan global a changé. Et c'est parce que les modes de fusion ne fonctionnent pas nécessairement comme avant, parce que nous n'avons pas cette couche d'arrière-plan là aussi. Donc, une fois que nous avons mis cela là-dedans, nous obtenons le résultat que nous voulons. Mais nous ne voulons pas nécessairement mettre le calque d'arrière-plan dans ce groupe le calque parce qu' il y aura d'autres sections en dessous de cela, et elles vont être cachées. Donc, nous allons annuler cela avec Commander Control et la lettre Z. Donc, la solution à cela est d'attraper votre retard de groupe d'arrière-plan de héros allant jusqu'au mode de fusion , puis sélectionnez passé à travers. Donc ça va passer tous les éléments à l'intérieur de ce groupe. Calque à travers elle afin que le calque d'arrière-plan soit appliqué comme nous le voulons avec les autres calques. Définissons également la hauteur de notre section de héros en faisant glisser une ligne directrice à 700 et nous devons également contenir notre arrière-plan ici à cette hauteur aussi. Alors saisissons notre outil de sélection de rectangle et créons une sélection dans cette zone. Ensuite, nous allons ajouter un masque de calque à la couche groupée d'arrière-plan du héros. Assurez-vous que vous avez sélectionné la sélection en cliquant sur Ajouter Que de Select with Commander Control Andy et désactivez vos guides. Ok, maintenant nous pouvons aller de l'avant et commencer sur le curseur, donc la première chose que je veux faire est de créer un nouvel arrière-plan appelé fond plus léger. Et faisons la taille de cet arrière-plan huit colonnes de large. Donc, en fait, allons juste de l'avant et taper les dimensions, qui est 775 par 4 75 Il va déplacer ça ici, donc c'est dans la section héros, et ensuite on va prendre une couleur crème claire ici. C' est l'hexadécimal, un nombre décimal que j'ai sélectionné. Alors allez-y, tapez ça, puis allez-y et remplissez-le. Bon, maintenant nous devons recadrer la limite du calque pour que nous puissions le faire avec Shift Plus C. Faisons une sélection autour de notre section héros et sélectionnons notre calque d'arrière-plan avec notre outil It boiteux, puis nous pouvons aligner sur le centre et le milieu de la cible. Ensuite, je veux créer un espace réservé d'image qui servira de guide pour dimensionner les images de nos produits afin que nous puissions créer un nouveau calque appelé espace réservé Image. Et puis, pour celui-ci, nous allons le tailler 7 20 par 3 60 et allons de l'avant et le remplir avec noir, et n'oublions pas de recadrer le contenu aussi. Maj plus C. Alors allons de l'avant et mesurons une quantité spécifique d'espacement pour le haut, puis nous allons l'aligner au centre. Donc, je vais faire 20 pixels pour l'espacement en haut. Et puis quoi ? Leur outil d'alignement. Allons de l'avant et sélectionnez notre arrière-plan, puis cliquez sur l'espace réservé de l'image, modifiez-le en premier élément, puis en un centre de ligne de la cible. On va ajouter notre image dans une minute. Je veux juste ajouter d'autres éléments d'abord. Ok, nous allons maintenant créer notre bouton d'achat. Prenons notre outil d'ellipse, faisons une sélection. Taillons 1 25 par 1 25 Créons également un nouveau calque pour cela, puis nous allons le remplir avec une couleur gris foncé. Donc je vais utiliser cette couleur ici. Allez-y et remplissez-le maintenant, avant de sélectionner. Ce que je veux faire, c'est que je veux ajouter un trait autour de lui, qui sera de la même couleur que leur arrière-plan, et cela va nous donner un effet où il va ressembler à découper une partie de l'image. Donc on va monter pour éditer la sélection de trait. Essayons quatre, et nous devons également nous assurer que nous avons cette couleur sélectionnée. Donc, utilisez votre outil pipette pour cliquer sur l'arrière-plan pour obtenir cette couleur, puis allez-y et cliquez sur Stroke de Select avec Commander Control et la lettre D. Donc, il ya notre par chignon qui semble assez cool. Et comme je l'ai dit, on dirait qu'il découpe cette partie de l'image, donc c'est plutôt cool. Allons de l'avant et frappons Shift plus C pour découper la limite de Lear. Ajoutons du texte ici sur le côté gauche, et cela représentera l'état de l'affiche. Donc, je vais utiliser une grande police, et nous allons utiliser Oswald bold et nous allons le définir à 60 pour la taille, puis sont de couleur gris foncé . Donc, dans toutes les majuscules, je vais faire signifiant, et ensuite nous pouvons juste aller de l'avant et déplacer cela, et je veux m'assurer qu'il est aligné sur le côté gauche de notre image Placeholder. Donc la limite de la couche est une ligne, mais je veux que la lettre soit alignée sur elle, donc je vais la placer juste là. Je vais aussi l'aligner en haut du bas aussi. Encore une fois, nous avons plus d'espace dans la limite de la couche par rapport à ici. Mais si nous appuyons sur Maj plus C, cela va recadrer la limite du calque au texte. C' est donc un moyen plus efficace et plus rapide, par rapport à la façon dont je vous ai enseigné précédemment. Bien que cela fonctionne, c'est moins efficace. Essayez donc toujours d'utiliser le recadrage au contenu pour recadrer la limite du calque aux pixels de ce calque . Maintenant, nous pouvons utiliser notre outil de sélection de rectangle, faire notre sélection et ensuite sélectionner la menthe avec votre outil Lima. Nous devons revenir à la sélection et à une ligne médiane des cibles. Ok, laissons de sélectionner et allons de l'avant et zoomer à nouveau. Je vais aller de l'avant et sauvegarder ceci avec Commander Control et la lettre s. Allons-y et allumons nos grilles parce que ce que je veux faire c'est que je veux créer un paragraphe ici qui sera la description de ce produit particulier. Donc, je veux en faire une taille spécifique quatre colonnes de large par 56 pixels de haut. Nous allons donc créer une nouvelle forme pour définir la taille de cette zone de texte. Je vais appeler une boîte de description, et ensuite on va taper 56. Pour la hauteur, je vais aller de l'avant et le remplir avec Dark Grey. Ça n'a pas vraiment d'importance, parce que nous allons supprimer cela plus tard. Alors allez-y et de Select Commander Control et la lettre D. Et allons de l'avant et une ligne ce haut en bas de notre curseur. Alors, juste ici. Assurez-vous également de rogner la limite du calque avec le décalage plus C, puis vous pouvez sélectionner ce calque et l'aligner au milieu de la cible. Ok, Commandant Contrôle et de sélectionner. Nous allons ajouter l'information ou la description dans une seconde, et nous le ferons après avoir obtenu notre image. Je veux d'abord travailler sur quelques autres éléments d'abord. Alors ajoutons notre texte pour notre achat maintenant, bouton. Donc, pour celui-ci, je vais utiliser une police appelée plaque de cuivre, et c'est un type rétro de combat, et vous pouvez télécharger ceci gratuitement juste en faisant une recherche Google pour les polices de plaque de cuivre, les polices gratuites. Et si vous ne l'avez pas déjà installé, vous pouvez aller de l'avant et trouver cela, le télécharger , l' installer, redémarrer le camp et ensuite revenir et nous allons de l'avant et ajouter dans notre texte maintenant pour la taille que je vais faire 30 et le poids de la couleur. Donc, la première lettre est une majuscule, puis minuscule pour les deux suivantes. La même chose avec maintenant. Même s'il semble qu'elles soient toutes capitales, il y a encore un peu plus petites par rapport aux premières lettres qui sont définies comme une majuscule . Ok, je vais aller de l'avant et rendre ça audacieux, donc je vais les sélectionner tous et cliquer sur Bold juste ici. Allons aussi de l'avant et une ligne ceci au centre, et je pense que je veux augmenter la quantité d'espacement des lignes. Donc, je vais essayer 0,5. Cliquez sur le technicien. Ce n'est pas suffisant. Donc 1.5 2.5 Essayons quatre. Et je pense que c'est bien là. Donc quatre pour l'espacement des lignes. Allons de l'avant et plaçons ça directement au centre de notre bouton, donc je vais déplacer cette position pour qu'elle soit au-dessus du bouton Acheter maintenant, puis sélectionnez votre cercle avec l'outil d'alignement, puis le texte et un orteil de ligne. Premier article. Allons de l'avant et créons un nouveau groupe plus tôt pour notre achat. Maintenant, bouton. D' accord, allons de l'avant et créons nos boutons de navigation de chaque côté de son plus léger. Ok, je vais aller de l'avant et faire défiler ici et sélectionner le calque groupé d'arrière-plan du héros parce que je veux que ces calques soient derrière notre curseur. Donc je vais appeler ça navigation gauche, et ensuite on va utiliser notre outil ellipse pour créer un bouton 65 par 65. Nous allons aussi le remplir avec une couleur crème, mais je veux qu'il soit plus sombre que le curseur en ce moment. Donc, il se distingue un peu plus Donc pour la couleur. Je vais faire ce qui suit : 6 e d. 9. Allez-y et prenez cela, puis allez-y et remplissez cette couleur, puis nous pouvons choisir, donc c'est très similaire. Mais si on zoome ici, on peut voir qu'il fait un peu plus sombre. Nous allons aussi ajouter une ombre portée dans le deuxième orteil, l' aider à se démarquer un peu plus. Alors allons de l'avant et placez ceci pour que la moitié du cercle soit cachée derrière le curseur. Donc, la façon la plus simple de le comprendre est d'allumer nos guides et de faire une mesure de la moitié de ce cercle. Donc nous avons fait 65 donc 32 pixels devraient être environ la moitié. On dirait que je veux un peu trop loin. Je vais mettre ce guide ici. Je vais aussi recadrer la limite de la couche avec Shift plus C et ensuite nous allons juste la déplacer vers cette zone que nous venons de mesurer. Ok, laisse les guides Haider. Et maintenant, nous devons créer une flèche pointant vers la gauche. Donc, pour ce faire, nous allons utiliser notre rectangle sélectionnable. Créons un rectangle qui est 19 par 19. Je vais sélectionner cette couleur orange que nous avons utilisée précédemment pour l'arrière-plan. Créons un nouveau calque appelé Errol gauche, puis continuons et remplissez-le. Allez-y et de Select Commander Control et D et nous allons recadrer. La limite ultérieure a été expédiée plus C. Je ne peux pas voir la couleur en ce moment, et c'est parce que le calque est derrière le curseur. Donc je dois aller de l'avant et déplacer ça ici de toute façon, donc je vais juste attraper ça avec mon mouvement et le calque actif sélectionné, et maintenant on peut voir l'orange. Bon, allons de l'avant et dupliquons cette couche. Allons de l'avant et zoomons de très près. Bon, Maintenant, nous allons prendre une mesure à nouveau parce que je veux déplacer ce calque actuel vers le bas dans les trois pixels droit. Prenons donc notre outil de mesure et mesurons trois pixels. Ajoutons un guide ici, puis vers le bas trois pixels et un autre guide. Et maintenant, avec notre outil de déplacement, nous voulons le déplacer directement dans cette zone. Allons de l'avant et créons un nouveau groupe de calques. Appelons ça Arrow gauche. On va les placer tous les deux à l'intérieur. Je vais appeler ça une flèche gauche, découper, et ensuite on doit changer le mode de fusion pour découper ce carré. Alors passons au mode de fusion et sélectionnons la couleur ou la race. Ok, maintenant on peut prendre cette flèche gauche et la faire pivoter à 45 degrés, donc ça pointe vers la gauche. Donc, prenons notre outil de rotation, qui est juste ici et mon raccourci clavier pour cela est Commander Control et la lettre T , puis pour l'angle que nous devons taper 45. Malheureusement, ça va le faire pointer vers le haut. Essayons donc moins 45 Cliquez sur l'onglet. Et voilà, nos flèches pointent maintenant dans la bonne direction. Allez-y et cliquez, Rotate et puis je vais juste déplacer manuellement ceci en position afin que je puisse l' obtenir directement au centre. Voyons si nous pouvons utiliser nos outils d'alignement pour l'aligner de haut en bas. Je vais attraper mon outil d'illumination et je vais cliquer sur le bouton shift, cliquer sur la flèche, puis un orteil couché premier élément, qui serait au milieu de la cible. Donc ça l'aligne. Je vais aller de l'avant et prendre mon outil de déménagement maintenant et je vais juste passer à gauche quelques clics et je pense que ça a l'air bien juste là. Allez-y et faites un zoom arrière pour que je puisse jeter un coup d'œil sur ce que nous avons jusqu'à présent. Donc ça a l'air plutôt bien. Je veux peut-être agrandir cette flèche. Donc ce que je peux faire, c'est que je peux zoomer en arrière. Et maintenant avec votre outil de déplacement. Cliquez simplement sur ce calque et utilisez votre flèche droite pour le déplacer sur un pixel à la fois jusqu'à ce que vous soyez satisfait de l'épaisseur de cette flèche. Donc je vais aller aux pixels plus à droite. Allons de l'avant et zoomons et jetons un coup d'oeil, et je pense que c'est beaucoup mieux. Donc je vais aller de l'avant et laisser le mien comme ça. Vous pouvez faire ce que vous pensez être le mieux. Maintenant, nous devons prendre cette navigation et la mettre dans un nouveau groupe de couches appelé Left Errol. Dupliquons et renommez-le. Et c'est vrai. On va le renommer flèche droite. Allons de l'avant et un guide vers le haut de ce bouton ici pour que nous puissions l'aligner ici sur le côté droit aussi. Ok, je vais juste attraper le mien. Déplacer, Outil, Assurez-vous que vous avez sélectionné les calques actifs, et je vais les déplacer ici sur le côté droit. D' accord. D' accord. Allons de l'avant et mesurons 36 pixels pour nous assurer que nous avons assez du bouton montrant ne ressemble pas à moi. Je vais aller de l'avant et placer un guide juste là, puis le mettre en position. Le seul problème, c'est qu'on ne voit pas la flèche. Donc, pour corriger cela, nous avons juste besoin de retourner le calque horizontalement. Alors, allez au calque, sélectionnez, transformez, puis choisissez retourner horizontalement. Sa haine. Maintenant que notre navigation est terminée, allons de l'avant et mettons ces deux boutons et un nouveau groupe de calques appelé Slider Navigation. Allons de l'avant et sauvegardons à nouveau, Commandant Control et la lettre s Donc nous avons la majorité des éléments pour notre curseur. Nous avons juste quelques éléments graphiques à ajouter ici. Un paragraphe, notre image et ensuite il sera fait. Alors allons de l'avant et finissons le reste du curseur dans le prochain tutoriel. 80. Héros, partie 3: Bonjour et bienvenue. Bon, on va aller de l'avant et finir notre curseur et on va ajouter notre image de produit . Nous allons faire une recherche d'images Google pour le dernier monstre A sonne, et nous allons sélectionner celui-ci ici. C' est 7 40 par 5 60 Allons de l'avant et copions cette image et collez-la dans. Assurez-vous de prendre ce calque et de le mettre à nouveau plus tôt, puis de faire défiler vers le haut avec ce calque. Donc, c'est au-dessus de tout le reste, et puis nous allons juste utiliser notre outil de déplacement pour la mettre en position, mais aussi baisser l'opacité pour que nous puissions voir l'espace réservé derrière l'image, ce qui nous permettra de recadrer l'image ou de composer le image exactement comme nous le voulons. Je vais juste déplacer ça vers le bas et vers la droite un peu, peut-être vers le bas un peu plus juste là et puis revenons à 100% sur l'opacité et puis je vais prendre mon image placeholder. Allons-y et mettons-le sous le calque d'image et je vais te montrer une façon un peu différente de recadrer ton image à une taille spécifique. Donc, puisque nous avons déjà créé un espace réservé d'image avec la taille exacte que nous voulons, nous devons maintenant faire une sélection avec lui. Nous pouvons donc faire un clic droit sur ce calque et sélectionner Alfa à la sélection, et cela va automatiquement appliquer une sélection autour de cette forme. Maintenant, nous pouvons aller à notre calque d'image et ajouter un masque de calque basé sur la sélection, et il va recadrer l'image de cette façon. Donc c'est juste une autre façon de le faire par rapport à la façon dont nous l'avons fait dans le passé. Je vais aller de l'avant et créer un nouveau groupe de calques pour ces deux calques appelé Image, et allons de l'avant et le déplacer vers le bas afin qu'il soit ci-dessous soit par bouton ici. Bon, prenons notre description pour notre boîte de texte. Revenons aux images Google et cliquez sur la visite, donc nous allons juste voir s'il y a une description ici que nous pouvons utiliser en fonction de cette affiche particulière. Maintenant, on pourrait juste utiliser n'importe quoi ou utiliser la taxe factice, mais je veux juste aller ici et voir si je peux trouver une description de cette affiche pour que marche, je vais juste prendre ce texte ici dans ce premier paragraphe. Copiez-le. Allons dans notre document ici, et je vais zoomer, prendre votre outil de texte, et allumons aussi nos grilles juste pour nous guider un peu. Ok, allons de l'avant et créons notre boîte de texte Nail. Mais d'abord, avec notre textile sélectionné, assurez-vous de taper la famille de polices, qui est ferroviaire. La taille est de 14, puis la couleur est gris foncé. Nous pouvons maintenant aller de l'avant et créer notre zone de texte et la rendre à la taille de cette forme, puis aller avant et coller les informations que vous avez copiées précédemment. Ok, allons de l'avant et éteignons notre boîte de texte ici pour que nous puissions réellement voir notre texte. Et je pense que je dois aligner ça sur la gauche. Donc je vais aller de l'avant et sélectionner tous les aligner. Et je pense que notre espacement des lignes est toujours activé. Je le fais. J' en ai quatre et je pense que c'est trop. Je vais en fait ramener ça à un et ensuite appuyer sur votre clé d'évacuation pour en sortir . Et maintenant, nous avons notre paragraphe ou notre description. Allons ici et modifions un peu ou un paragraphe. Je vais aller de l'avant et ajouter trois points parce que ce que je veux faire est de créer un objectif ou un lien juste ici. Donc, dans toutes les capitales, je vais juste taper Mawr, et ensuite on peut double-cliquer sur ce mot, et on peut changer la couleur de ce mot. Je vais choisir cette couleur orange, et je veux aussi ajouter un sous-jacent pour représenter un lien. Je veux aussi ajouter quelques graphiques ici juste pour lui donner une sensation de type plus rétro en ajoutant trois lignes. Alors allons de l'avant et commençons à organiser certaines de ces couches ici, et je vais aller de l'avant et prendre ma boîte de description et la supprimer parce que je n'en ai plus besoin . Et puis je vais créer une nouvelle couche de groupe pour mon contenu. D' accord. Je pense que tout le reste est assez bon. Les mettra tous dans un nouveau calque de groupe appelé Hero à la fin. Alors allons de l'avant et ajoutons nos éléments graphiques ici. Maintenant, je vais créer une nouvelle ligne froide et ensuite, pour la taille que nous allons faire pour le avec et 50 pour la hauteur. Prenons notre couleur bleue et allons de l'avant et le remplir dans que de select. Allons de l'avant et bougeons celui-ci juste un peu et recadrez le contenu avec shift plus c. Ok, nous allons créer deux lignes de plus, mais un peu plus petites de chaque côté. Donc, le prochain sera le même avec ainsi aussi. Et puis la hauteur sera de 35. Alors allez-y et créez deux lignes de plus. En fait, on pourrait juste dupliquer celui-ci, et ensuite on a juste besoin de tout aligner. Je vais juste déplacer celui-ci un peu, et je vais aller de l'avant et traîner une ligne directrice pour que je puisse les aligner au sommet. Faisons une sélection ici, et je veux sélectionner le calque intermédiaire avec mon outil d'alignement afin que je puisse l'aligner au centre de cette sélection. Je dois aussi faire la même chose pour notre ligne médiane ici. On dirait qu'il est éteint d'un pixel. Donc je vais juste le déplacer vers le haut avec ma touche fléchée gauche et puis je vais faire un clic droit sur le calque supérieur ici et fusionner pour combiner tous ces calques et 21. Je n'en ai plus besoin individuellement. Allons-y et remettons-nous tout le reste, et puis nous avons juste besoin de l'aligner dans cet espace ici. Alors allons de l'avant et faisons notre sélection. Je veux donc le centrer directement au centre, mais je dois peut-être désactiver à nouveau ces autres couches. Prenons notre outil de limite. Cliquez sur le graphique avec votre outil d'alignement. Assurez-vous que la sélection est sélectionnée, puis alignez le centre et le milieu de la cible. Allez-y et diesel I, puis allons-y et remettons-nous les autres couches. Allons-y et zoomons. Donc, la dernière chose que je veux faire est et un peu de profondeur au curseur général, et nous allons le faire en ajoutant une ombre portée. Je veux ajouter une ombre portée pour les boutons de navigation séparément du curseur d'arrière-plan lui-même, parce que je veux faire glisser l'ombre en passant sur ces boutons aussi bien. Allons de l'avant et commençons avec nos boutons de navigation, et si nous sélectionnons ceux-ci et montons aux filtres, la lumière et aux ombres. On peut y ajouter une ombre portée. Et la raison en est que nous pouvons ajouter une ombre portée à des calques groupés. Nous devons donc aller à l'intérieur et trouver les boutons eux-mêmes, puis leur appliquer une ombre portée . Et, bien sûr, nous devons modifier la limite du calque pour qu'elle corresponde à la taille de l'image afin de pouvoir ajouter cette ombre portée. Maintenant, je peux aller vers les filtres, la lumière et l'ombre, ombre portée et créer mon ombre portée. Alors allons de l'avant et jouons avec quelques réglages ici jusqu'à ce que nous trouvions une ombre portée qui nous satisfait. J' aime ça juste là. Donc je vais y aller et cliquer, OK, et puis prenons ce bouton ici. Même chose calque couche deux taille d'image, puis commande ou contrôle plus F pour appliquer à nouveau cette ombre portée. Bon, maintenant nous avons juste besoin d'aller de l'avant et de trouver la couche d'arrière-plan de notre curseur et d'appliquer l' ombre portée à elle aussi. Mais nous devons d'abord aller jusqu'au calque et le calque sélectionné à la taille de l'image, puis commander ou contrôler et f pour appliquer l'ombre portée. Allons de l'avant et mettons tout dans un nouveau groupe de couches froid. C' est vrai, héros. Donc, notre couleur d'arrière-plan change à nouveau parce que nous avons mis ce calque de groupe à l'intérieur d'un nouveau joueur de groupe. Donc, nous allons juste sélectionner notre groupe de héros Layer et Select passé pour le mode de fusion, et cela va corriger l'arrière-plan pour nous et félicitations. Nous avons maintenant notre curseur rétro terminé. Maintenant, nous devons travailler sur la section commerce électronique de notre site Web, et nous allons aller de l'avant et commencer à le faire dans le prochain tutoriel. 81. Corps Partie 1: Bonjour et bienvenue. Très bien, nous allons maintenant travailler sur notre section commerce électronique pour cette page Web, et nous allons créer notre arrière-plan et certains de nos boutons de filtre, puis nous allons finir dans le prochain tutoriel. Allons-y et travaillons d'abord sur nos antécédents. Mais en fait, nous devons augmenter la taille du campus. Allons à l'image des yeux du campus et augmentons-le à 3000. Nous allons également saisir notre calque d'arrière-plan ici et aller au calque et sélectionner calque à la taille de l'image. Maintenant, maintenant, je ne peux pas le sélectionner. Et c'est parce que mon calque d'arrière-plan est beaucoup. Donc, si le vôtre est également verrouillé, allez-y et déverrouillez-le, puis augmentez la taille de la limite. Prenez votre couleur blanche pour remplir le reste de l'arrière-plan. Bon, maintenant nous devons y aller et ajouter notre motif ainsi que nos nouvelles couleurs. Donc je vais aller de l'avant et juste aller dans notre couche de groupe d'arrière-plan de héros et sélectionner ce calque pour le dupliquer. Et puis allons-y et sortons cette caméra. Allez-y et déplacez le mien ici, donc la première chose que nous devons faire est de supprimer ce masque de calque, et nous pouvons le faire en cliquant avec le bouton droit de la souris et en sélectionnant Supprimer le masque de calque. Ok, vous pouvez aller de l'avant et déplacer ceci en position maintenant, et nous devons également augmenter la taille de limite de couche pour chaque couche. Donc, faisons cela pour chacune des superpositions et pour le motif aussi. Donc, calque taille de l'image en couches. Prenons notre outil de remplissage de seau. Choisissons notre modèle et continuons et remplissez-le. Et maintenant, nous devons sélectionner les superpositions de couleur afin que nous puissions ajouter une nouvelle couleur à chaque calque, et nous allons utiliser cette couleur bleue ici. Alors allez-y et attrapez ça, puis allez-y et remplissez ça avec la nouvelle couleur. Maintenant que notre arrière-plan est terminé, nous pouvons aller de l'avant et travailler sur nos boutons de filtre. Commençons par notre outil de texte. Définissons la police sur Oswald et 24 puis blanc pour la couleur. Ok, laisse entrer le filtre maintenant, on va aller de l'avant et créer quatre nouveaux boutons. Le 1er 1 va être le bouton 1, puis pour la taille, nous allons faire 95 par 45. Mais ajoutons d'abord un coin arrondi de 10, puis la taille à nouveau est de 95 par 45. Et puis nous allons remplir ça avec notre couleur gris foncé. Allez-y et de sélectionner et nous allons de l'avant et dupliquons trois fois. Maintenant, allons de l'avant et recadrer sont satisfaits de décalage plus C pour chaque couche. Allons de l'avant et un lion et distribuons les couches. Donc outil d'alignement. Éteignons notre section des héros ici, puis décalons. Cliquez sur les autres boutons. Alignons au premier élément vers le haut, puis nous devons répartir l'espace entre eux. Donc en ce moment, j'ai 3 50 ce qui est trop. Je vais essayer 50 ans. Je veux faire moins que ça. Essayons 100. Pas assez faire 1 40 et 1 25 Ressemble à la meilleure option. Maintenant, nous avons juste besoin d'ajouter quelques titres pour nos boutons. Donc, revenez à l'outil de texte, même police, même taille, juste besoin de le changer à l'orteil arrière. Cas blanc de la dernière chose que nous devons faire est d'aligner tout sur les boutons et ensuite nous avons juste besoin d'organiser nos couches. Donc, pour le contenu, je vais recadrer le contenu avec shift plus C pour chaque couche. Maintenant, vous avez peut-être remarqué que lorsque vous faites cela, il change le texte d'un calque de texte à un calque de pixels. Donc, si je veux y aller et changer l'orthographe ou la police ou la taille et que je clique dessus , je dois alors confirmer que je veux revenir à l'édition de texte, et je peux le faire sur un nouveau calque ou directement sur ce calque. C' est donc une bonne idée de recadrer votre contenu pour votre texte de cette manière, car vous pouvez toujours revenir à ce calque de texte pour être mis à jour si nécessaire. Il est simplement plus facile de recadrer le contenu de cette façon afin que vous puissiez facilement l'aligner selon vos besoins. Donc, revenez à l'outil d'alignement et aligné sur le premier élément. Nous devons également prendre une mesure de la quantité d'espace entre ici et les cheveux afin de pouvoir l'ajouter ici aussi . Alors allez-y et mesurez. J' ai 40 pixels. Maintenant que nos boutons sont faits, nous avons juste besoin d'ajouter nos produits pour cette partie de notre conception de page, et nous allons aller de l'avant et télécharger ces images dans la prochaine leçon et les mettre en place pour qu' elles ressemblent plus à ceci. 82. Corps Partie 2: Bonjour et bienvenue. On va aller de l'avant et finir la section commerce électronique et on a besoin de huit images pour remplircette section. On va aller de l'avant et finir la section commerce électronique et on a besoin de huit images pour remplir Alors allez-y et faites une recherche d'images Google pour les vieilles affiches de film. Vertical est préféré. Ajoutez-les à votre document, puis vous pouvez aller de l'avant et les redimensionner en une minute. Une fois que nous avons ajouté l'espace réservé de l'image, puis vous saurez quelle taille pour les réduire, aussi. Alors continuons à travailler sur notre 1ère 1 et nous allons commencer par créer un arrière-plan pour l'offre de produits. Nous allons donc créer une nouvelle couche appelée Product one. Et puis pour la taille que nous allons faire à 76 par 450 et ensuite nous allons le remplir avec notre couleur crème claire. Allez-y et cliquez, OK et remplissez-le. Ok, laissons de sélectionner et allumons aussi notre grille pour le moment. Et si on bouge ça, vous remarquerez que c'est exactement trois colonnes de large, ce qui nous permettra d'ajouter quatre produits différents. Bon, allons de l'avant et recadrer le décalage de contenu, plus C. Maintenant, nous allons aller de l'avant et créer un espace réservé d'image comme nous l'avons fait pour le curseur précédemment. Et puis pour la taille, nous allons faire 2 30 par 3 20 et nous allons le remplir avec Black. Donc, j'ai frappé D et puis attraper votre outil de remplissage de seau avec G Phil Iden et de Select Que Shift plus C pour recadrer le contenu, puis le déplacer en position. Ça va bouger un peu le mien, et je vais prendre une mesure ici. Donc je suis à 18 pixels, alors allez-y et déplacez le tien. Vous avez donc un espace de 18 places en haut, puis nous allons utiliser notre outil d'alignement pour aligner au centre, à gauche et à droite de notre image d'arrière-plan. Alors allez-y et faites ça. Ok, allons de l'avant et faisons notre bouton par ongle. Prenez votre outil de sélection, puis, pour la taille, nous allons faire 95 par 95 et nous devons également créer un nouveau calque pour cela. Prenons notre couleur gris foncé et continuons et remplissez-la. Maintenant, avant de sélectionner, nous devons monter et ajouter un trait. Donc, à la sélection des traits, on va faire quatre pixels, et je dois aussi choisir ma couleur. Alors prenez votre outil de sélection des yeux ici, assurez-vous que vous sélectionnez la couleur d'arrière-plan cliquez sur OK et votre contour, puis nous pouvons aller de l'avant et déplacer cela vers la droite de sélection, puis déplacer. Plus C. Ajoutons notre texte pour cet achat. Bouton maintenant. Nous allons utiliser Copper Plate 26 pour la taille et blanc. Centrez également le texte, puis utilisez votre outil d'alignement pour aligner ce texte. Allons-y et mettons-le dans le nouveau groupe de calques. Créons notre titre pour cette affiche en particulier, et je veux changer la police pour Oswald, puis nous allons en faire 18 pour la taille et nous allons revenir à notre couleur gris foncé. Donc pour le titre, je vais juste taper un titre qui correspond à l'affiche du film pour ce produit particulier. Donc, le vôtre peut être différent, selon l'affiche que vous avez téléchargée, alors allez-y et tapez un titre pour elle. Ok, faisons Railway Bold et 12 pour la taille et maintenant je vais juste taper les dimensions de cette affiche de film ainsi que le prix. Je crois que je vais changer cette police. Je veux le rendre beaucoup plus sombre, donc je vais choisir Ultra Bold. Et puis je vais retourner au titre et voir si je peux trouver une police différente ou une police plus légère . Essayons la lumière d'Oswald. Ok, je l'aime beaucoup mieux parce que cela ajoute de l'importance aux dimensions dans le prix plus que le titre lui-même. Rappelez-vous donc nous voulons nous assurer que les éléments spécifiques du texte sont correctement style, sorte qu'un titre ou un sous-titre était plus important que l'autre. De cette façon, il est plus facile à lire. Cela peut-il aller de l'avant et économiser avec Commandant Control et la lettre s ? Nous allons maintenant créer un bouton ici aussi. Cela leur donnera l'occasion d'en apprendre davantage sur cette affiche de film spécifique. Donc nous allons taper plus d'informations et faisons à nouveau plaque de cuivre pour la police et 18 pour la taille. D' accord, allons de l'avant et créons un nouveau calque pour le bouton Plus d'infos, puis nous allons ajouter des coins arrondis. Faisons 10 pour le rayon et puis dans la mesure où les signes allaient faire 1 15 par 30 et nous allons le remplir avec une couleur gris clair, donc je vais utiliser F un F un F un clic OK, puis allez-y et remplissez cela dans De Select Commandant Control et la lettre D. Faisons en fait ce texte un peu plus petit, parce que ce que je veux faire, c'est que je veux créer une ombre intérieure. Donc je vous ai montré avant. Comment orteil ajouter une ombre portée. Mais créer une ombre intérieure n'est pas une option à travers les outils eux-mêmes, nous devons donc faire preuve de créativité sur la façon dont nous le faisons. Donc, je veux juste m'assurer que l'ombre intérieure ne va pas sur notre texte lui-même. Donc je veux en faire 14 à partir de la taille, et je vais aller de l'avant et l'aligner aussi bien. Revenons donc à notre bouton plus d'info shift plus C pour mettre à l'échelle la limite du calque, puis nous utiliserons notre outil d'alignement pour aligner le texte. Ok, allons de l'avant et créons notre ombre intérieure maintenant. Donc, fondamentalement, tout ce que nous allons faire est de créer un autre bouton de la même taille et une couleur plus foncée , puis nous allons le découper et ensuite brouiller les bords. Alors allons de l'avant et créer un nouveau calque était Appelez dans son ombre et puis nous allons utiliser la même taille et le même rayon 1 15 par 30. Et puis nous allons frapper D. Prenez votre outil de seau avec G et remplissez-le avec du noir et de select. Allons de l'avant et déplacons ça derrière l'autre bouton. Donc c'est à peu près la taille que je veux pour mon ombre intérieure. Donc maintenant, ce que nous devons faire est de faire une sélection. Alors allons à notre bouton plus d'informations, clic droit et sélectionnez Alfa à la sélection. arrière et sélectionnez votre ombre intérieure, puis vous allez faire une coupe afin commande ou contrôle et X, ou vous pouvez aller jusqu'à modifier et sélectionner Couper à partir d'ici, que de sélectionner Commander Control et D. Maintenant, nous allons déplacer notre ombre intérieure en arrière au-dessus de plus d'info shift plus C pour le rogner, puis prenez votre outil de déplacement et placez-le au-dessus de cet autre bouton. Ok, maintenant on va aller aux filtres, flouter et sélectionner ghazi dans Flou. Donc, à partir d'ici, vous pouvez ajuster les paramètres de toute façon, vous le souhaitez. Et je vais juste utiliser ces paramètres ici, qui, je pense, sont les paramètres par défaut. 1.5 et 1.5 cliquez. Ok, maintenant, c'est un peu trop sombre pour moi. Donc je vais attraper mon opacité et laisser tomber ça. Donc maintenant, il semble que j'ai besoin de le déplacer d'un pixel. Donc je vais attraper mon outil de déplacement, sélectionner le calque, puis le déplacer d'un pixel. Et maintenant, j'ai juste besoin de nettoyer un peu les bords pour qu'il ait un coin plus arrondi ici et ici aussi. Donc je vais juste zoomer ici, saisir l'ombre interne, pourrait effacer l'outil avec la lettre E. Et puis je vais juste effacer certains de ces pixels. Ça aurait pu être trop. Donc je vais annuler ça avec le Commandant Control et les lettres e et ensuite le refaire. J' ai aussi besoin de faire ce site aussi, et je pense que je veux laisser tomber l'opacité juste un peu plus. Donc, juste là. Allons de l'avant et attrapons notre outil de zoom. Maintenez votre touche de commande ou de contrôle enfoncée pour que vous puissiez zoomer, puis allez-y et sélectionnez n'importe quel autre calque et leur ego. Vous avez maintenant un château intérieur. Donc, la dernière chose que nous devons faire est d'ajouter notre image à l'espace réservé. Alors trouvez votre image. Placez-le au-dessus de l'espace réservé de l'image. Déplacez-le en position. Sélectionnez l'espace réservé de l'image. Droit. Cliquez dessus. Sélectionnez Alfa pour revenir au calque d'image. Et puis nous devons recomposer l'affiche si nécessaire en saisissant notre outil de déplacement avec la lettre V et en cliquant dessus. Ensuite, nous pouvons utiliser nos touches fléchées pour le déplacer en position. Donc juste là a l'air bon pour moi. Je vais y aller et ajouter un masque de couche et un boom ! J' ai maintenant l'image rognée exactement comme je le veux. Allons de l'avant et nettoyons ces couches ici. - Donc la dernière chose que je veux faire est que je veux ajouter une ombre portée au dos de notre image ici. Alors allons à l'intérieur et trouvons l'espace réservé de l'image, et allons de l'avant et ajoutons une ombre portée. Mais d'abord, bien sûr, nous devons augmenter la taille des limites ultérieures, puis nous pouvons aller jusqu'à des filtres, lumière et de l'ombre et ajouter une ombre portée. Notre première affiche de film est terminée, et la seule chose qui reste est de répéter ça sept fois de plus. Notre première affiche de film est terminée, Donc, au lieu de me regarder faire ça encore et encore, j'aimerais que vous preniez le temps de pratiquer ce que vous avez appris en ajoutant les sept autres affiches. Et en fait, vous pouvez en fait tricher un peu en prenant votre première affiche, en la dupliquant, puis en la déplaçant dans les colonnes appropriées, puis en mettant à jour le contenu. Alors allez-y et complétez cela dans le cadre de votre mission. Et quand vous aurez terminé, vous serez prêt à terminer ce projet de conception Web, qui complétera le pied de page et fera tout type de modifications que nous pourrions rencontrer 83. Footer: Bonjour et bienvenue. D' accord. Maintenant que vous avez toutes vos offres de produits en place, nous allons maintenant faire nos derniers ajustements et terminer notre espacement de pied de page soas faras va. J' ai pris l'espacement entre les deux colonnes ici et ajouté cela au bas des affiches aussi. J' ai aussi pris l'espacement d'ici et l'ai appliqué ici. Donc, j'espère que votre section commerce électronique ressemble à ceci. Vous avez probablement des affiches différentes, et c'est bon. J' ai aussi pris toutes mes affiches et je les ai placées dans une nouvelle couche de groupe appelée affiches. Et maintenant, j'ai besoin de créer une nouvelle couche de groupe pour la section. Alors allons-y et faisons-le si vous ne l'avez pas déjà fait. Maintenant, nous allons avoir la même situation avec notre arrière-plan que dans la section précédente , c'est-à-dire, une fois que vous l'avez placé dans le groupe de calques, la couleur de celui-ci va changer. Donc, je vais sélectionner la couche du groupe de commerce électronique et sélectionner passé à travers. Allons de l'avant et finissons notre pied de page et ensuite nous ferons quelques ajustements finaux. Donc, pour les icônes sociales, vraiment simple, j'ai juste utilisé quelques icônes sociales simples en noir et blanc, et vous pourriez probablement les attraper d'un projet précédent et ensuite simplement les apporter. Allons de l'avant et créons le pied ou l'arrière-plan, puis pour la taille, nous allons faire pas de coins arrondis pleins avec et 210 pour la hauteur . Ensuite, nous allons remplir cela avec notre couleur gris foncé de select et shift plus C pour recadrer le contenu. Ensuite, nous allons aller de l'avant et nous allons ajouter 40 pixels d'espace ici. Maintenant, nous pouvons aller de l'avant et recadrer notre toile globale, donc je vais aller à la taille de la toile de l'image et re ajuster la hauteur en conséquence. Ensuite, je vais juste ajouter quelques informations ici qui a une notice de copyright ainsi que quelques liens. Et je vais le mettre à Oswald, 20 ans et White. Alors allez-y et tapez quelque chose pour cette partie de la page, puis allez-y et déplacez-le en position. Allons de l'avant et attrapons notre outil de sélection de rectangle afin que nous puissions l'aligner sur l'arrière-plan. Ok, j'ai juste besoin de trouver mes icônes de médias sociaux maintenant et de les aligner aussi. Ok, pied de page est maintenant terminé, et on va juste passer par ici très vite et faire quelques ajustements mineurs. Je n'aime pas la façon dont notre navigation est assise sur les mots en bas. Ce n'est pas le bas exact, car au début nous avons aligné le logo de haut en bas. Alors mettons notre navigation au centre aussi pour aider à l'équilibrer. L' autre chose que nous devons faire pour cette page est d'ajouter des boutons radio sur notre curseur. On a oublié de le faire. Donc je vais juste retourner à ce projet vidéo en bord de mer et prendre les boutons radio que nous avons créés précédemment. Donc, si vous sélectionnez votre outil de déplacement avec la lettre V, puis cliquez sur Choisir un guide de calque. Une fois que vous cliquez dessus, il va naviguer vers tous ces cercles de playlist ou boutons radio, et que nous pouvons simplement faire glisser cela dans notre projet actuel. Je vais retourner déplacer la couche active. Il nous a sortis de ce joueur de groupe et le déplacer vers le bas. Actual l'a mis à l'intérieur de la section héros, qui est là où il appartient, donc je veux faire quelques modifications. Je veux rendre le cercle plus petit et réduire la quantité d'espace entre eux. Donc, nous allons d'abord les mettre à l'échelle avec Shift Plus s quelque chose à faire 1 75 par 16 et je veux changer ce cercle bleu. Deux sont de couleur bleue plus claire, mais nous devons d'abord saisir Ari Lips outil pour créer une nouvelle taille. Et faisons 16 par 16. allons créer un nouveau calque, puis nous allons sélectionner cette couleur bleu clair et la remplir dans Commander Control Indy pour sélectionner Shift Plus C, puis revenir à notre outil de déplacement, et ensuite nous pouvons le déplacer en position ici. Maintenant, nous allons prendre notre outil Lehman, et nous devons en fait enlever tous ces éléments pour pouvoir les sélectionner et ensuite, avec votre outil boiteux, sélectionner le 1er 1 et ensuite nous allons changer l'espace de distribution entre eux. On va mettre le premier élément et le décalage. Essayons 1 25 beaucoup trop. Laissons cela jusqu'à 50 trop bas à 25 et je veux juste faire un peu plus. Je vais en faire 35. Et on y va. Allons-y et remettons-les dans la liste de jeu. Allons de l'avant et sélectionnez tout avec le contrôle Commander et un et nous allons de l'avant et l'alignons au centre de select, puis allez-y et utilisez votre outil de déplacement pour le déplacer un peu vers le bas . Ok, allons-y et zoomons. En fait, je veux les déplacer un peu plus. Donc juste à ce sujet il devrait être bon. Créons un nouveau groupe de calques pour le pied de page et voyons si nous devons effectuer d'autres ajustements. Et je ne suis pas comme dans le filtre. En étant ici en haut, je veux vraiment le placer au centre du bouton réel, alors allons-y et Graham R Selection Tool. Faisons une sélection. Sortons le filtre, vraiment par, sélectionnez-le, puis une ligne au milieu de la cible. On peut remettre ça ? Voyons s'il y a autre chose qu'on a besoin de dio. Je pense que tout le reste est bien aligné. Je vais allumer mes grilles juste pour m'assurer que tout est aligné exactement là où il devrait être. La seule chose que je n'aime pas, c'est que le pied de page prend aussi ce modèle, donc je ne veux pas ça. Je veux une couleur unie là-bas, donc dans ce cas, il est correct de mettre le pied de page au-dessus de l'autre calque de groupe. Vous savez, la seule chose que je voudrais faire est de tonifier cette couleur orange de fond. Alors allons dans la section héros et allons aux superpositions, et je vais juste ajuster l'opacité de trop un à environ 75 juste pour le tonifier un peu. Et je l'aime beaucoup mieux. Félicitations. Nous en avons fini avec le projet numéro six. Comme toujours, terminez les modifications et les mises à jour que vous devez faire pour ce projet particulier, puis redessinez avec votre propre vision créative afin que vous puissiez l'ajouter à votre portefeuille . Une fois que tu auras fini, je te verrai dans le prochain projet, qui est le projet numéro 7. Merci d'avoir écouté et passer une journée géniale 84. Projet 7 : Briefs Trek: bonjour et bienvenue à notre projet final de conception Web. Ne sois pas triste, cependant. On va apprendre beaucoup de trucs cool dans ce projet. Alors passons d'abord sur le site d'origine et ensuite je vais vous montrer mon design Web. Maintenant. La seule chose que vous allez remarquer à propos de ce site par rapport à beaucoup d'autres que nous avons fait est que dans l'ensemble, ce site n'est pas si mauvais. Alors jetons un coup d'oeil. C' est professionnel, c'est propre. Il a beaucoup meilleures images que certains des autres projets sur lesquels nous avons travaillé. Ils ont un peu de style, mais je pense que cela pourrait être amélioré un peu et le rendre plus facile à lire dans l'ensemble. Alors je vais partager avec vous ce que je pense que nous pouvons faire pour améliorer encore cette partie. Les images ne sont pas si mauvaises. Nous avons de l'espace vide par ici. C' est un peu déséquilibré, pas grand chose. On peut juste glisser tout ça ici. Ce n'est plus rien de majeur. Tout est élégant et soigné et propre. Ils ont choisi de bons fonds, donc dans l'ensemble, c'est assez facile à lire. Mais on peut le rendre un peu plus facile à lire. Ils ont des preuves sociales ici pour ajouter un peu de crédibilité à l'entreprise. Je préférerais voir ça près du sommet. Mais encore une fois, s'ils ont déjà une marque forte et qu'il y a une grande entreprise, ils n'ont pas vraiment besoin de beaucoup de preuves sociales comme les entreprises moins connues Maman et pops choses comme ça. Quoi qu'il en soit, la preuve sociale pourrait être en bas ou ça pourrait être en haut, donc nous allons jeter un oeil à ça. Et puis ils sont pieds de page. Rien de majeur. Ils ont des liens vers d'autres parties de leur site Web. Leur navigation principale est en panne. Voici bien, ils ont quelques icônes sociales. Copyright prouver la politique de confidentialité, vos trucs typiques dans le pied de page. Donc rien de majeur sur le pied de page à nouveau. Donc, dans l'ensemble, ce site n'est vraiment pas si mauvais. Oui, on peut faire de petites choses pour le rendre meilleur. Mais la principale chose que je suis tombé sur quand je faisais des recherches sur ce site dans leur compétition était leur compétition à peu près identique. Ils ont un en-tête, ils ont un logo. Ils ont la navigation, ils ont du contenu. Ils ont de jolies images. C' est donc la mise en page de base. Le style d'entreprise propre mise en page. Vous savez, tout le monde a la même apparence. Donc, dans un effort de se démarquer et d'être différent et d'avoir une image différente, une marque différente, un style différent. Je voulais trouver quelque chose que personne d'autre ne faisait pour ce créneau particulier. J' ai donc pensé aux différents styles de conception que nous avons couverts dans la section précédente, les sept types populaires de styles de design. Et je les regardais, et j'essayais de trouver lequel serait le meilleur par rapport à une entreprise propre et moderne. Et je voulais faire quelque chose que personne d'autre ne faisait dans cette niche, et j'ai décidé de faire quelque chose de plus artistique Quand le VTT. C' est plus que de pédaler sur une grande colline ou une grande montagne. Vous devez aller avec le reflux et le flux de ce sentier, et vous devez être conscient des rochers et des bosses parce que vous ne voulez pas frapper un rocher ou une bosse et voler hors de la falaise. Donc, il y a un flux et un reflux à monter sur un sentier sur une montagne, donc c'est un peu comme une forme d'art, donc je voulais incorporer un type d'art plutôt que des images ordinaires et ennuyeuses. Oui, l'image n'est pas si mauvaise, mais ce n'est pas si génial non plus. Alors, comment pouvons-nous créer le flux et le reflux du VTT et de l'art ? J' ai donc eu l'idée de prendre leur image principale et de la transformer en une œuvre d' art, et j'ai choisi la couleur de l'eau comme support. Et maintenant tu penses probablement, Ok, comment vais-je créer une aquarelle que je n'ai jamais peinte avant ? Devine ce que je n'ai jamais peint, et c'est pour ça que nous avons le pouvoir de Photoshopped à portée de main. Devine ce que je n'ai jamais peint, Alors laissez-moi vous montrer quel est le design final que j'ai trouvé, et nous allons expliquer un peu plus sur le style de conception, et voici. Donc, nous avons la même image et ça ressemble à une peinture à l'aquarelle, et cela peut être fait directement. Et Photoshoppé. Vous n'avez pas besoin d'acheter une toile ou un pinceau ou une peinture aquarelle. On peut obtenir cet effet directement et la boutique photo, et je vais te montrer comment faire ça dans la prochaine leçon. Nous avons donc notre navigation principale. Rien de fantaisie, mais il ne l'a pas mis. C' est son propre arrière-plan. Il est sur le dessus de la couleur de l'eau ainsi que leur logo et ensuite une action appelée pour vous inscrire à la réservation. Un temps pour aller avec un guide pour cette piste VTT ou d'autres sentiers de votre choix. Donc, quand une personne atterrit sur ce site, nous voulons qu'elle fasse quelque chose. Nous voulons qu'ils s'inscrivent. Quatre. Le produit ou le service est que l'entreprise vend dans ce cas des visites guidées pour les vététistes. Peut-être qu'ils ne sont pas prêts à s'inscrire. C' est très bien. C' est pourquoi nous avons du contenu supplémentaire sous la section héros pour les aider à les vendre sur les raisons pour lesquelles ils devraient choisir nos sentiers ou la saleté. sentiers des camps de VTT de Siri. Ensuite, nous allons leur donner une autre occasion de s'inscrire une fois qu'ils auront lu des informations. J' ai inclus quelques logos de leur site web qu'ils ont déjà utilisés pour ajouter de la crédibilité au sommet afin que quiconque ne connaît pas cette entreprise ou ce camp puisse le voir. Et cela va ajouter une certaine crédibilité pour eux que nous faisons défiler vers le bas, ont été introduits au contenu qui va nous aider à décider si oui ou non nous voulons registre des orteils pour ce camp. J' ai également inclus quelques images et j'ai pris le concept de l'aquarelle et l'ai appliqué sur les bords des images pour non seulement ajouter de la cohérence avec notre image de couleur d'eau, mais aussi pour la briser et la rendre différente. Tout le monde fait des images avec quatre côtés droits. Personne ne fait cela et il continue également le style de conception du concept d'aquarelle tout au long de la page d'accueil. Nous avons ensuite notre option de registre ici. S' ils sont prêts à réserver maintenant et puis nous avons notre pied de page en dessous de ça. Donc, encore une fois, j'ai pris une image principale en tant que partie de l'arrière-plan et j'ai appliqué un bord aquarelle en bas et le haut ne peut pas la voir en haut parce que les nuages et le ciel ont été lavés. Je vais donc vous montrer comment ajouter cet effet aux images, comment créer cet arrière-plan ici pour l'option de registre, puis dans la leçon suivante, je vais vous montrer comment créer cet effet d'aquarelle. Donc, si vous êtes prêt à commencer, faisons-le 85. Aquarelle Partie 1: Bonjour et bienvenue. D' accord. Avant de commencer à transformer notre image ordinaire en une peinture à l'aquarelle, nous devons d'abord télécharger une ressource est et les installer également. C' est ce que nous allons faire dans cette leçon. Et puis dans la leçon suivante, nous irons pas à pas dans la création de notre œuvre d'aquarelle. Nous devons donc télécharger une image que nous devons télécharger et installer des pinceaux aquarelle. Nous devons télécharger et installer cette fiche, et nous avons également besoin de télécharger un papier texturé aquarelle. J' ai donc mis en place un fichier texte avec l'URL pour chacun d'entre eux. La ressource l'est. Alors allez-y, accédez à ce fichier, téléchargez-le, puis accédez à chacune de ces URL pour télécharger cette ressource spécifique pour l'image. J' ai fait Whistler Trek Dirt, Siry's Mountain comme la recherche dans les images Google, et j'ai trouvé cette image ici de sorte que vous pouvez juste faire un clic droit, copier l'image, puis ouvrir votre modèle de maître de grille et collé à l'intérieur de là. Ensuite, nous avons besoin de pinceaux aquarelle. Donc, une fois que vous accédez à l'URL fournie dans le fichier texte, vous cliquez sur ce bouton ici pour télécharger ces pinceaux et je vais vous montrer comment les installer en un instant. Et puis pour le G m I C Plug in, vous devrez aller à l'URL fournie. Et puis vous pouvez télécharger pour Windows ou pour Mac et Windows. Les utilisateurs veulent l'archive ZIP et les utilisateurs Mac doivent télécharger le fichier d'archive T GZ. Ok, alors allez-y et téléchargez-les. Et puis quand vous allez à ce comte spécifique, vous pouvez simplement faire un clic droit et copier l'image comme vous l'avez fait avec l'autre image. Bon, jetons un coup d'oeil. Tante est des pinceaux ici et on va les décompresser. Ensuite, vous trouverez quelques fichiers à l'intérieur. Et ce que nous voulons, c'est ce dossier ici. Il a une extension de point a b R. Donc, vous allez faire un clic droit et copier ceci et puis à l'intérieur de gimp, nous devons trouver le dossier exact pour le placer dans. Ce sera différent pour les utilisateurs de PC par rapport aux utilisateurs de Mac, et je vais vous montrer comment faire l'un ou l'autre, et nous allons passer en revue Windows d'abord. Donc, si vous allez jusqu'à modifier et sélectionner les préférences, puis cliquez sur les dossiers En bas ici. Vous trouverez tous ces différents dossiers où vous pouvez installer différents types de ressources est dans ce cas, nous avons besoin de trouver le dossier Brosses, et cela montre l'emplacement exact de l'endroit où vous devez l'installer. Tu veux le top ici, pas le bas. Donc, une fois que nous naviguons à cet emplacement spécifique, qui est encore une fois l'application de nom d'utilisateur, données itinérantes gimp 2.10 à l'intérieur du dossier de brosses, vous voulez à droite ? Cliquez et collez le fichier que vous avez copié. Une fois que vous aurez fait ça, vous le trouverez juste ici. Maintenant, pour les utilisateurs Mac, vous voulez aller aux utilisateurs ? Nom d'utilisateur, bibliothèque application support gimp 2.10 pinceaux. Et puis à l'intérieur de là, vous allez coller ce fichier. Donc, c'est là, juste là. Et puis une fois que vous faites ça, vous devez retourner pour donner à nouveau. Sélectionnez le panneau de vos pinceaux, puis cliquez sur Actualiser les pinceaux. Une fois que vous faites cela, vous trouverez ensuite ces pinceaux à l'intérieur de ce panneau. Et tous les pinceaux sont listés par ordre alphabétique. Donc, quand j'ai installé mes pinceaux aquarelle la première fois, j'ai ajouté la lettre z à l'avant de ce nom de fichier afin qu'ils soient ajoutés au bas tous mes autres pinceaux. Donc, le vôtre, si vous ne l'avez pas fait, sera probablement quelque part au milieu de sorte que vous pouvez revenir en arrière et re nommer ce fichier particulier avec la lettre Z. Si vous voulez l'ajouter à la fin ou si vous voulez l'ajouter à l'avant , puis il est plus facile de localiser des pinceaux spécifiques si vous voulez les renommer dans un trimestre spécifique . Si vous renommez ce fichier, vous devez revenir en arrière et actualiser les options de brosses pour qu'elles soient mises à jour dans le panneau. C' est ainsi que vous installez les pinceaux aquarelle, et nous allons les utiliser pour peindre notre image de couleur d'eau. Maintenant. L' autre chose que nous devons installer c'est cette prise juste ici. Donc, ce plug in particulier a plus de 400 types de filtres différents, qui améliore gimp Globalement, même si gimp a beaucoup de filtres intégrés, ce plug particulier a déjà installé vous fournira beaucoup plus d'options par rapport à ce que nous obtenons directement de Gimp Alors laissez-moi vous montrer comment installer ces plug-ins particuliers . Un pour Windows et un pour Mac. Jetons donc un coup d'oeil à Windows d'abord. Donc voici les fenêtres Zip classé, et le voici, dézippé. A l'intérieur, vous trouverez un tas de fichiers. Mais ce que nous devons faire pour Windows est juste. Cliquez et copiez ce dossier, puis nous devons aller à nouveau dans un dossier spécifique pour savoir exactement où l'installer. Donc dans ce cas, nous devons revenir à la 2.10 et ensuite faire défiler jusqu'à ce que vous trouviez des branchements, non ? Cliquez sur et sélectionnez Coller. Vous verrez alors ce dossier comme ça à l'intérieur de là. Et puis vous devez redémarrer gimp pour que l'installation soit terminée, puis vous verrez cette option de branchement juste en bas du menu des filtres . Maintenant, pour les utilisateurs de Mac, il suffit de revenir en arrière une étape, trouver des plug-ins, et ensuite vous devez aller à l'intérieur du dossier que vous avez décompressé et copier le Fuller et ce fichier ici. Copiez donc ces deux et puis collez-les à l'intérieur d'ici et encore. Vous devez redémarrer. Vous trouverez ensuite la fiche au même endroit. Vraiment vite, on a presque fini. Je vais juste te montrer quelque chose d'autre très vite. Quand tu as commencé, c'est ce à quoi ressemble les orteils. Mais ce que je veux faire, c'est que je veux me débarrasser de ces quatre logos ici parce que je n'en ai vraiment pas besoin. Donne là juste les sponsors pour ce plug in particulier. Et ils veulent aussi changer le thème pour un thème plus sombre qui correspondra mieux au thème que j'ai à l'intérieur de gimp. Donc, pour ce faire, nous allons aller dans les paramètres. Nous allons décocher cette option ici, et nous pouvons changer le thème ici de défaut à sombre. Il y a aussi d'autres options, mais je vais juste laisser tout le reste à la valeur par défaut pour l'instant. Cliquez sur OK, puis cliquez sur. Annuler, car nous devons redémarrer le plug in pour que le thème prenne effet. Très bien, alors allez-y et finissez d'installer vos pinceaux, le brancher pour obtenir les deux autres fichiers de ressources, et ensuite nous allons aller de l'avant et finir notre dessin aquarelle dans le prochain tutoriel. 86. WaterColor Partie 2: Bonjour et bienvenue. Maintenant que vous avez tous vos fichiers et tout installé, nous allons aller de l'avant et créer nos illustrations aquarelles. Maintenant que vous avez tous vos fichiers et tout installé, Donc, la première chose que vous devez faire est de redimensionner votre image de sorte qu'elle soit 1400 pixels de large. Et puis, pour la hauteur, cela dépendra de l'image que vous avez sélectionnée si vous avez sélectionné cette image exactement la même qu'elle devrait avoir 931 pixels de hauteur. Si vous avez choisi une photo différente, ne vous inquiétez pas de la hauteur. Tant que c'est autour de 900, ça devrait aller. Ensuite, nous pouvons aller aux filtres et sélectionner notre nouveau plug in pour commencer sur l' aspect aquarelle de l'image. Donc, la première chose que nous allons faire est d'aller à notre option de recherche juste ici et de taper en douceur afin que nous puissions lisser l'image globale et nous allons sélectionner ces air bilatéraux , les paramètres par défaut, et c'est ce que nous allons utiliser. Allez-y et cliquez, appliquez ensuite. Nous allons faire une recherche pour Contour et nous voulons à nouveau les valeurs par défaut de segmentation, mais nous voulons nous assurer que le mode de sortie est défini sur de nouvelles couches. Cliquez sur Appliquer, puis ce sera et un nouveau calque avec ces filtres lui sont appliqués. Allons de l'avant à tour de rôle cette couche sont maintenant branchés. Menu a disparu, mais si vous descendez à votre barre des tâches, vous devriez être en mesure de le trouver. Alors allez-y et cliquez dessus et on va à la pointe. Ajoutez à nouveau le même filtre de segmentation de contour, mais cette fois nous allons ajuster les paramètres pour la douceur. vous allez loin vers la droite, plus l'image est lisse , plus vous allez voir de détails sur l'image. Je veux ramener les détails dans cette couche ici dans certaines zones. Donc, nous allons laisser tomber la douceur à quelque chose comme ça. Ensuite, nous pouvons également augmenter le seuil de bord pour ramener des détails supplémentaires dans l' image. Donc, ces paramètres diffusent les paramètres que je vais utiliser, puis je vais appliquer à un nouveau calque. Je vais renommer cette étape une étape, deux détails supplémentaires. Allons de l'avant et allumons la couche étape un, et maintenant nous pouvons voir que nous avons plus de détails dans cette couche. Maintenant, afin de ramener plus de détails dans ce calque, je vais déplacer ce calque en dessous. Et puis pour ce calque, nous allons ajouter un masque de calque, comme vous le savez, blanc et noir supprime. Alors je vais y aller et ajouter un masque blanc. Maintenant, je peux attraper mon pinceau et un pinceau. Je vais sélectionner celui-ci ici, qui est la dureté 50. Et puis ajustez la taille de votre pinceau en conséquence. Et puis vous pouvez cliquer et peindre une partie de ce détail. Donc je voudrais peut-être venir dans les arbres ici et ajouter un peu de détails et ces arbres parce que le point de mise au point de notre caméra est sur les motards ici. Donc, nous voulons et en arrière détail avec tous les éléments qui sont en ligne avec les gens sur le vélo. Donc je vais annuler cette partie ici en frappant ma clé ex en peinture blanche pour enlever une partie de ça et ensuite peindre avec du noir dans les arbres ici pour ramener une partie de ce détail. Maintenant, si vous voulez, vous pouvez en fait, et détailler partout où vous voulez. Je vais juste me concentrer sur ce domaine pour l'instant. Une fois que vous aurez fini d'ajouter vos détails, nous allons aller de l'avant et prendre ces deux couches et les placer dans un nouveau groupe de calques. Appelons ça l'étape détaillée. Donc techniquement, nous pouvons prendre ces deux couches et les fusionner ensemble en sélectionnant fusionné vers le bas. Cependant, j'aime travailler de manière non destructive, et à un moment ultérieur, je voudrai peut-être revenir dans un ajout de détails supplémentaires à mon œuvre. Donc si je devais aplatir ces couches, je ne serais pas capable de le faire. C' est pourquoi j'aime les regrouper dans un nouveau groupe. Et puis nous pouvons faire un clic droit et sélectionner Nouveau à partir de Visible. Il va ensuite combiner ces deux couches et le mettre sur un nouveau calque afin que je puisse revenir plus tard et recommencer à partir d'ici plutôt que recommencer à zéro. Maintenant, c'est et un nouveau calque que nous allons le remplir avec du blanc a été appelé arrière-plan, et nous allons le mettre sous le calque visible. Maintenant, nous allons mettre fin à un masque de couche sur le calque visible en clic blanc et maintenant le plaisir commence parce que nous pouvons saisir notre outil de brosse avec la lettre B, et ensuite nous pouvons utiliser nos nouveaux pinceaux aquarelle pour lui donner un effet plus pictural afin que vous puissiez sélectionner n'importe lequel de ces pinceaux aquarelle que vous souhaitez utiliser. Je vais aller de l'avant et sélectionner 006 pour me faire démarrer. Donc, une fois que vous sélectionnez ce pinceau, vous pouvez voir qu'il semble assez différent de la brosse précédente. Nous voulons également aller dans nos options d'outils et faire quelques sélections que la taille du sein est trop grande. Je vais descendre à environ 150 et je veux aussi activer la dynamique crayon shader. Donc, si vous cliquez sur cette icône ici, vous pouvez sélectionner différents types de dynamique ou la façon dont le pinceau est appliqué à votre campus par défaut. Vous avez probablement une dynamique de base, et cela va juste appliquer un trait simple qui est compatible avec la taille et la forme de votre pinceau. Lorsque vous sélectionnez d'autres dynamiques, la façon dont votre pinceau interagit avec le calque sur lequel vous travaillez est différente l' une de l'autre Vous devrez donc passer en revue toutes ces dynamiques et jouer avec elles pour voir comment votre pinceau est appliqué avec ces différentes options. Donc, quand vous sélectionnez crayon shader, cela va prendre peut-être une minute ou deux. Oubliez d'activer réellement ce pinceau car il s'agit d'un pinceau très vaste ou intensif qui va appliquer le pinceau différemment lorsque vous peignez autour de votre image. Donc, ce ne sera pas un coup lisse et cohérent. Cela va être plus aléatoire, et cela va ajouter des traits plus réalistes à votre toile par rapport à un trait simple et cohérent. Donc, en ce moment, Gimp essaie toujours d'activer cette brosse, et je ne peux pas l'appliquer n'importe où jusqu'à ce que Gimp rattrape et charge réellement cette brosse. Maintenant que je l'ai, assurez-vous que votre masque de calque est sélectionné. Vous voulez peindre avec du noir, et l'autre chose que vous voulez faire c'est que vous voulez faire deux choses. Vous voulez ajuster l'opacité au fur et à mesure que vous peignez, et vous voulez changer votre pinceau aquarelle, et cela va le briser afin qu'il soit moins cohérent et plus réaliste. Donc je vais juste vous montrer très rapidement ce qui se passe pendant que vous peignez pour que vous puissiez voir que la quantité d'une passe autour du bord de la brosse est différente dans les différentes parties de la zone où j'applique le pinceau. Donc, je vais juste contourner les bords ici, et il applique ce coup au hasard parce que vous pouvez voir le pinceau lui-même changer taille et il tourne. Et il ajoute différents coups aléatoires. Lorsque vous avez ces outils, les options sont configurées comme nous le faisons. Donc la chose que je veux faire maintenant est de laisser tomber mon opacité et de choisir un autre pinceau à nouveau. N' importe quel pinceau est bien parce qu'ils vont tous vous donner différents types de coups, différents résultats et va rendre votre peinture à l'aquarelle plus réaliste. Donc je vais descendre un peu plus petit pour cette brosse en particulier, et je vais faire la même chose. Je vais juste peindre au hasard le long des bords de l'image, et vous pouvez voir que les traits sont différents de ce qu'ils étaient avant. Je vais aller de l'avant et éteindre mon calque d'origine ici, et mes détails pas plus tard parce que nous n'avons pas vraiment besoin de ceux activés en ce moment, donc je vais continuer à faire le tour jusqu'à ce que le bord droit de notre photo disparaisse parce que je ne veux pas d'un bord droit pour cette peinture à l'aquarelle particulière. Ok, je vais aller de l'avant, laisser tomber l'opacité, je vais choisir un autre pinceau, et je vais rendre celui-ci un peu plus petit. Faisons ça aussi. Et puis je vais juste cliquer au hasard en arrière-plan ici juste pour le briser un peu plus. Maintenant, la capacité, je pense, est un peu trop élevée. Donc je vais annuler ça avec Commandant Control et les lettres E. Et je vais tonifier ça juste un peu parce que je veux juste quelques coups aléatoires en arrière-plan ici pour faire croire que des coups de peinture ont été appliqués sur le image elle-même. Et cela aide à le briser et le rend plus réaliste et plus semblable à une peinture à l'aquarelle au lieu de le laisser vide comme il était avant. Allons de l'avant et ajoutons notre papier à texture aquarelle. Nous voulons nous assurer que nous avons un calque sans masque de calque sélectionné. Si vous allez le coller dans votre document, sinon cela ne fonctionnera pas. Je vais juste cliquer sur, Créer un nouveau calque ici, puis il coller le contenu particulier que j'ai copié dans un nouveau calque. Appelons ça du papier aquarelle. Je vais aller de l'avant et le mettre à l'échelle pour qu'il fasse 1400 pixels de large, et ensuite nous avons juste besoin de le déplacer en position. Nous devons également ajouter un mode de fusion afin que nous puissions voir le reste de notre œuvre. Alors passons aux modes de fusion et sélectionnons multiplier. Cela ajoute de la texture à notre œuvre. Et maintenant, je veux me débarrasser de ça couché ici, et j'ai aussi du texte sur ce dossier aussi. Je vais donc aller au calque et sélectionner le calque à la taille de l'image. Je vais ajouter un masque blanc et ensuite avec mes pinceaux aquarelle, je vais aller de l'avant et peindre avec du blanc pour me débarrasser de ce papier aquarelle ici. Je dois d'abord augmenter mon opacité, mais pas comme dans ce pinceau trop. Donc je vais aller de l'avant et en choisir un autre. D' accord ? Celle-ci semble fonctionner un peu mieux. Je ne veux pas me débarrasser de toute la texture du papier. Je vais laisser un peu ici est bien, au moins pour l'instant jusqu'à ce que je décide autrement. Alors allez-y et nettoyez vos bords ici. Et je pense que je veux revenir à ce masque de couche avec un nouveau pinceau à nouveau. Il a essayé celui-là, et je vais juste peindre dans certains coins ici un peu plus, un peu plus là-haut un peu ici. Je n'aime pas ça. Donc je vais passer au noir pour pouvoir me débarrasser de tout ça ici, augmenter l'opacité et c'est juste une question de goût. Donc les années vont certainement être différentes de la mienne parce que vous paramétrez vos pinceaux que vous sélectionnez, ils sont tous différents. Alors allez-y et faites exactement ce que vous aimez en fonction de votre vision créative, et c'est tout. Notre image de couleur d'eau est maintenant terminée. La dernière chose que je recommande de faire est de créer un nouveau calque une fois que vous avez fini d'appliquer tous vos paramètres dans vos pinceaux et vos textures et tout cela, alors continuons et faisons-le si vous avez terminé. Si ce n'est pas le cas, continuez à travailler sur votre peinture à l'aquarelle, puis mettez-les tous à l'intérieur de ce nouveau calque de groupe, et c'est tout. Une fois que vous avez terminé, je vous verrai dans le prochain tutoriel parce que nous devons travailler sur notre en-tête pour notre page Web. Donc, si vous êtes prêt à commencer là-dessus , il faut le faire. 87. Header et héros: Bonjour et bienvenue. Bon, on va aller de l'avant et travailler sur l'en-tête et la section héros dans ce tutoriel parce que l'en-tête va être vraiment simple et super facile à faire. Je suis allé de l'avant et j'ai tapé ma navigation principale. J' ai ajouté cinq espaces entre chacun des éléments de menu. J' ai utilisé le chemin de fer gras et 24 pour la taille et blanc, bien sûr. Maintenant, la seule chose que je dois faire est que je dois rendre ce contenu plus facile à lire. Mais d'abord, je veux juste vous montrer où j'ai placé ma navigation principale, qui était sur le côté gauche de la première colonne, et j'ai utilisé 30 pixels d'espace en haut du navigateur en haut de la navigation principale . J' ai également ajouté une ligne directrice à 700 pixels vers le bas pour représenter la ligne complète de la section héros . Alors allez-y et retirez ces lignes directrices et terminez votre navigation principale et mettez-la à l'endroit. Une fois que vous avez cela, nous devons ajouter une ombre portée pour le contenu. Mais nous devons d'abord aller au calque et sélectionner le calque pour émettre la taille pour augmenter la taille des limites du calque , puis nous allons dans les filtres, lumière et l'ombre portée pour ajouter nos ombres portées. Je vais faire le tour d'une pour l'opacité et ensuite faire d'autres ajustements. Vous voulez que votre texte soit plus facile à lire. Donc je vais aller avec ces réglages ici. Une fois que vous avez terminé, allez-y et cliquez. OK, Une fois votre navigation principale terminée, allons-y et mettons-la dans un nouveau groupe de couches appelé En-tête. Et même s'il n'y a qu'un seul calque, j'aime toujours organiser tous mes calques et les regrouper en fonction de cette section. Maintenant, nous devons télécharger quatre logos orteil ajouter à notre section héros. Donc le 1er sera celui-ci ici, et vous allez faire une recherche pour ça. Vous voulez trouver le fichier PNG, qui va être noir et blanc. Mais une fois que vous cliquez dessus, vous verrez le fichier transparent. Alors allez-y, copiez-le et collez-le dans, puis nous avons juste besoin de redimensionner le calque. Alors prenez votre outil de balance et puis pour le avec, nous allons faire pour 20 et allons de l'avant et placez-le pour aligner avec notre navigation principale , et je veux m'assurer que tout le texte est à l'intérieur de la montagne. Kate. Augmentons la taille de limite de couche et utilisez Commander Control et F pour coller sont ombre portée. Peut-on avoir trois autres logos à télécharger ? Le 2ème 1 est le logo Trek, le logo Fox Shocks, et le dernier est ce que vous entendez ? Alors allez-y et trouvez des fichiers PNG pour chaque copie, collez-les dans et ensuite nous allons aller de l'avant et les redimensionner. En ce qui concerne le dimensionnement, nous allons faire 50 pixels de hauteur pour chacun des calques. Maintenant que nous l'avons fait, nous pouvons aller de l'avant et les mettre en place. Mais la question est, voulons-nous mettre nos logos au-dessus du pli ou au-dessous du pli ? Je pense que dans ce cas, pour cette entreprise particulière, c'est une entreprise bien connue, et je ne pense pas que l'ajout de la preuve sociale au-dessus du pli soit aussi important que nous l'avons fait avec d'autres entreprises qui ne sont pas aussi connues que cette société. Donc, c'est juste quelque chose d'autre que vous devez considérer lorsque vous ajoutez votre preuve sociale dans la section héros ou juste en dessous du pli. Je pense que pour ce cas, c'est bien en dessous du pli. Donc, pour ce premier logo, je vais à une ligne sur le côté gauche de la deuxième colonne, Le dernier logo que je vais aligner sur le côté droit du deuxième orteil. Dernière colonne. Allons de l'avant et attrapons notre outil d'alignement pour que nous puissions saisir chacune de ces couches, donc j'ai du mal à sélectionner mon logo. Donc, si je monte à mon autre local, apparaître en haut. Si je rogne la limite de couche, je devrais pouvoir sélectionner mon local maintenant. OK, allons de l'avant et sélectionnons les deux autres en maintenant la touche Maj enfoncée et en cliquant sur chaque logo, sélectionnez le premier élément et une ligne en haut. Ils doivent aussi centrer mon deuxième logo directement au milieu de ces deux logos, donc nous allons saisir notre outil de sélection, faire une sélection, et ensuite nous devons l'aligner au centre de la sélection. D' accord, allez-y et sélectionnez, et la dernière chose que nous devons faire pour nos logos est d'appliquer une superposition de couleur blanche à ces deux logos, alors allons de l'avant et créons un nouveau calque appelé superposition. Remplissons-le de blanc. Et mettons tous les logos dans un nouveau groupe de calques appelé Logos. Nous voulons nous assurer de ne pas sélectionner le premier logo dans la section héros. Alors prenez les trois autres, placez-les à l'intérieur, puis prenez votre couche de superposition et changez votre mode de fusion en plus Maintenant, nous devons prendre ce calque de groupe de logos et dupliqué parce que nous avons besoin et l' ombre . portée, et nous ne pouvons pas ajouter d'ombres portées aux calques groupés. Donc, ce que nous allons faire avec ce nouveau calque, c'est que nous allons faire avec le bouton droit de la souris Cliquez et sélectionnez Fusionner le groupe de calques. Et de cette façon, si notre client a changé une fois les logos, n'importe quel ordre différent, nous pouvons revenir à la couche de groupe d'origine ici et les réorganiser plutôt que de les fusionner, sans avoir cette option. Ensuite, nous devons tout recommencer à zéro en téléchargeant et en créant une superposition afin que vous puissiez réellement désactiver cette couche parce que nous n'en avons pas besoin de temps en temps. Une fois que votre client a finalement approuvé la conception, vous pouvez aller de l'avant et supprimer complètement cette couche de groupe avant de la remettre au développeur Web . Ok, donc nous pouvons maintenant aller de l'avant et utiliser notre raccourci clavier, Commander Control et F pour ajouter l'ombre portée. Donc, la dernière chose à faire est décrétée sont appelés bouton d'action. Allons-y et Graham sont un outil de texte. Changons les signes de police à 36 blanc pour la couleur. Créons un nouveau calque appelé bouton. Assurez-vous de le remplir avec transparence. Maintenant, avant de créer le bouton, nous devons aller à nos options d'outil et nous assurer que les paramètres dynamiques sont remis à dynamique de base. Ensuite, allez-y et choisissez une couleur de votre choix. Et puis pour faire le bouton. Nous allons simplement cliquer plusieurs fois afin de créer le bouton de la taille que nous voulons. Et plus nous ajoutons, le bouton devient sombre. Donc je vais y aller, et je vais le déplacer en dessous du texte. Allons-y et Graham sont également calque de texte. Augmentons la taille des limites dans. Ajoutons une commande ou un contrôle d'ombre portée et la lettre F peut Allons de l'avant et regrouper ces deux calques. Allons de l'avant et créons également un nouveau groupe antérieur pour la section héros. La dernière chose que je veux faire est que je veux saisir ce bouton ici et le déplacer un peu parce que c'est un peu déséquilibré en ce moment. Donc je vais rentrer et prendre mon bouton d'action appelé. Allons de l'avant et recadrons aussi la limite avec Shift Plus C. Et je vais la placer juste sous notre logo ici. Sa haine. Alors c'est tout. Notre en-tête et la section Héros sont maintenant terminés dans la prochaine leçon. On va aller de l'avant et commencer la première partie de son corps. 88. Contenu corporel: Bonjour et bienvenue. Bon, on va aller de l'avant et commencer à travailler sur la section corps de notre page Web. Nous avons besoin de trois images, et vous allez sur pixel bay dot com ou Google images et trouvez trois images de cyclistes aussi loin que nous allons faire les 2 premières images sur le côté gauche, cinq colonnes de large, et cette image ici aura sept colonnes de large. Alors allez-y, redimensionnez vos images en conséquence. Renommez les calques et assurez-vous d'aller jusqu'au calque et d'augmenter la limite du calque de chaque image. Parce que plus tard, nous allons prendre un pinceau aquarelle et ajuster les bords des images pour créer cet effet aquarelle. D' accord, donc une fois que tu as fait ça, on doit aller augmenter les yeux du campus. Je vais faire 3500 pour l'instant. Et puis une fois que j'allume ma section héros ici, toutes mes images ne sont pas visibles. Et c'est parce qu'à l'intérieur de la section héros dans le groupe d'aquarelle, nous avons ce calque appelé actif. C' est trop grand. Donc ça cache mes images. Donc, je vais attraper mon outil de sélection de rectangle, et je vais redimensionner la limite du calque afin que le reste de la page puisse être vu. Maintenant que mes images sont visibles, j'ai aussi besoin d'aller à mon calque d'arrière-plan. Maintenant que mes images sont visibles, Une fois que je ferme ceci et j'ai besoin d'augmenter la taille de la limite ultérieure, puis nous devons le remplir avec du poids. Très bien, Nous sommes maintenant prêts à commencer à travailler sur nos images et notre contenu avant de travailler sur les images . Allons de l'avant et ajoutons notre titre. On va utiliser Oswald Bold. Faisons 76 et Dark Ray. Je vais juste bouger ça en dehors du chemin pour l'instant. D' accord ? Allons de l'avant et du contenu supplémentaire et nous allons en faire sept colonnes large, et nous allons ajuster la hauteur plus tard une fois que nous aurons toutes nos images en place. Alors utilisons Georgia 16. Prenez du texte factice et collé. D' accord, je vais aller de l'avant et éteindre ces deux couches un instant pour qu'on puisse travailler sur nos images . Prenons un de nos pinceaux à aquarelle arrondie. Je vais choisir le numéro 006 Assurez-vous que dans les options de l'outil que vous avez défini dynamique pour tireur de crayon , puis ajuster votre opacité en conséquence. Je vais commencer ça à 100% et ensuite on doit ajouter un masque blanc. Et puis avec du noir, nous pouvons peindre le long des bords pour enlever ce bord dur. Donc je vais aller de l'avant et faire ça pour les trois images, et ensuite on ira de l'avant et on les mettra en position. Alors allez-y et travaillez sur vos images aussi. Essayez d'enlever autant que possible le bord droit. Ajustez votre A pass it E et votre taille de pinceau comme vous travaillez pour créer plus de coups aléatoires peuvent. Une fois que vous aurez fini avec vos images, nous allons aller de l'avant et réactiver la grille pour que nous puissions les aligner exactement là où elles doivent être. Je vais également recadrer le contenu pour chaque couche ainsi avec shift plus C et cela facilitera l'alignement de tout. Et je vais mettre ce vin de 16 colonnes, et pour le déplacer, nous voulons nous assurer que nous sélectionnons la vignette de l'image et pas le masque de calque. Sinon, nous déplaçons le masque de calque et non l'image. Je veux donc aligner ces deux-là en bas. Ok, donc ça a l'air plutôt bien. Allons de l'avant et alignons notre titre. Donc le contenu un peu trop grand. Donc je vais aller de l'avant et la ligne pour que le texte s'aligne avec le haut de son titre, et c'est un peu trop long ici, donc je vais aller de l'avant et supprimer une partie de ce contenu aussi. Ok, donc ça a l'air plutôt bien. Jamais un rapide. Je veux vous donner un autre conseil sur le contenu. Je vais aller de l'avant et éteindre notre titre à notre image ici. Et je vais dupliquer cette couche juste pour vous montrer cette astuce. Donc, quand il s'agit de contenu, plus ce contenu est large, il est difficile de lire. Et des études ont montré que c'était vrai. Vos yeux ont tendance à se fatiguer plus la ligne est longue de texte. Donc même tante sept colonnes de large. C' est encore un peu difficile à lire parce que les lignes sont encore assez longues. Maintenant, c'est beaucoup plus facile que 12 colonnes. Mais même alors, je n'irais pas plus de sept colonnes de large. Sauf si, bien sûr, vous agrandissez le texte. La même chose est vraie si vous allez trop loin dans l'autre sens et que les lignes trop étroites deviennent maintenant difficiles à lire à nouveau parce que vous n'obtenez que 2 à 3 mots par ligne, ce qui le rend beaucoup plus difficile à lire. Donc, je voudrais aller de 3 à 5 colonnes de large en moyenne, et je vais ajuster cela en fonction de la taille du texte. Allez-y et annulez tout ça. Mettons ceci dans un nouveau groupe de calques appelé contenu. Ensuite, nous avons nos images. Enfin, nous avons notre groupe de corps et devinez ce que son contenu corporel est fait. Donc à partir de là, je n'ai vraiment pas de conseils supplémentaires pour vous dans le prochain tutoriel que nous allons couvrir sont appelés section d'action pour notre corps, qui va consister en un formulaire de registre qui peut être rempli orteil book dates spécifiques . Ce ne sera pas très différent de ce que nous avons fait dans les projets précédents, mais je vais aller de l'avant et passer par le passé avec vous juste pour que nous puissions terminer ce projet et ensuite nous ferons le pied de page après ça. Donc, si vous êtes prêt à commencer sur le registre, une partie de ce projet va aller de l'avant et commencer à le faire dans la prochaine leçon. 89. Registre corporel: Bonjour et bienvenue. Très bien, nous allons aller de l'avant et créer une section de registre dans le contenu du corps, et nous allons utiliser une grande image de fond perdu comme arrière-plan. Alors allez-y et trouvez un téléchargé, redimensionnez la pointe 1400 pixels de large, puis appliquez vos pinceaux aquarelle le long des bords supérieurs et inférieurs de l'image afin que nous puissions garder la cohérence du style de conception tout au long de cette page également. Et n'oubliez pas que vous devez ajouter un masque de calque blanc pour cela et augmenter la taille de votre limite de calque. Et une fois que vous avez terminé, vous pouvez aller de l'avant et recadrer la taille de la limite de couche avec Shift Plus C. Je vais aller dans ma section de héros ici. Je vais saisir mon C t un bouton et dupliqué puis avec mon outil de déplacement. Je vais juste cliquer et continuer à glisser vers le bas jusqu'à ce qu'il descende vers le bas. Je vais également recadrer la limite de la couche manuellement avec mon outil de sélection de rectangle afin pouvoir l'aligner au centre de notre document, puis sélectionner tout. Il doit également faire sortir et descendre cette couche. Sélectionné avec votre outil Lehman puis un centre de ligne de la cible. Basé sur cette sélection de select, Allez-y et fermez ce joueur de groupe, puis nous allons tricher en saisissant notre formulaire de filtre d'un projet précédent. Donc je vais aller de l'avant et juste cliquer et faire glisser ça dessus. Maintenant, plusieurs fois, vous allez utiliser des éléments que vous avez créés auparavant dans de nouveaux projets. Maintenant, bien sûr, vous pouvez toujours revenir en arrière et les refaire à partir de zéro. Si vous voulez utiliser un design légèrement différent, peut-être que vous voulez des coins arrondis au lieu d'un coin parfaitement carré. Donc, dans ce cas, je le referais. Sinon, il n' y a aucune raison pour laquelle vous ne pouvez pas prendre du contenu existant, réutiliser pour un autre projet, puis juste mis à jour en conséquence pour ce projet. Donc je vais attraper mon outil de déménagement ici lavements, et sélectionnons Choisir un gars de couche parce que je veux cliquer sur cette date juste ici. Je veux savoir où il est, puis je peux le mettre à jour en conséquence. Je n'en ai pas besoin pour cette conception, donc je vais aller de l'avant et le supprimer lorsque je supprime ce calque et je vais prendre ce contenu et supprimé aussi. Pouvons-nous zoomer ici pour que je puisse saisir mon outil de texte et mettre à jour ce contenu à la date de début ? Sélectionnez tout Changer la couleur en blanc et je vais aussi faire Oswald gras. Faisons la même chose pour le contenu ici. C' est toujours difficile de lire ce contenu ici. Donc je vais aller à mon calque d'arrière-plan ici et changer l'opacité en l'augmentant de 22 . Disons vers 80 ans. Ok, donc c'est plus facile à lire maintenant. Je vais juste déplacer le texte un peu, donc il n'est pas trop proche des formulaires de filtre. Allons de l'avant et un guide pour que nous puissions également aligner la couche suivante. Je veux aussi changer la couleur de la rose, donc je vais sélectionner chaque ligne et la remplir avec du blanc. Ok, je vais déplacer ce contenu et changer ça en livre. Maintenant, nous allons le rendre plus grand. Faisons 48 et Oswald encore audacieux. Je vais recadrer le contenu avec Shift Plus E, et j'ai également besoin de retirer cette ligne afin de pouvoir la sélectionner avec mon outil d'alignement. La même chose avec son contenu. Puis allez-y et alignez le premier élément au centre et au milieu de la cible. D' accord. Il faut les remettre. Je vais juste réorganiser certaines de ces couches ici. Je veux également déplacer ce filtre juste sous le contenu du registre ici. Donc c'est ensemble. Bon, donc c'est tout pour la section du registre. Dans la leçon suivante, nous allons terminer notre conception en faisant le pied de page et les modifications finales. 90. Footer: Bonjour et bienvenue. Bon, donc pour le pied ou la section, je l'ai fait. Et ce n'est rien de fantaisie, assez ennuyeux. Professionnel. Pas beaucoup plus que je pourrais faire avec la section pied de page. Il est juste là pour fournir des liens supplémentaires pour les informations qu'un visiteur peut chercher . J' ai un état de survol juste ici pour une des icônes afin que nous puissions voir à quoi ça va ressembler quand nous survolons une de ces icônes de médias sociaux. Ça va être un peu plus sombre. J' ai utilisé les couleurs de marque de la société elle-même, et j'ai également utilisé ces couleurs dans les liens ainsi à nouveau. Tu ne veux probablement pas me regarder faire ça à partir de zéro. C' est très simple à faire. En ce moment. Tu devrais savoir comment le faire. Alors allez-y et pratiquez ce que vous avez appris sur la création des différents contenus pour le pied de page et vos icônes de médias sociaux. Addy hover indique à toutes les longueurs différentes informations de copyright, un lien de confidentialité et tout ce que vous voulez ajouter. Ensuite, comme avant, nous devons passer à travers et nous assurer que la conception n'a pas besoin d'ajustements. La seule chose que je vois que nous devons faire est notre espacement entre chacune des sections. Alors allez, assurez-vous que les sections ont le même espacement entre elles. Et puis la dernière chose que je pense que nous devons faire pour améliorer la section des héros est de rendre notre image de couleur d'eau plus sombre. C' est trop brillant , trop blanc. C' est un peu dur. Lisez tout le contenu. Donc, ce que j'ai fait, c'est que je suis entré avec un nouveau calque texturé que j'ai téléchargé à partir de picks. Obey et je l'ai placé au-dessus de mon œuvre d'art et j'ai fait quelques ajustements au papier. Je laisse tomber l'opacité. J' ai changé le mode de fusion pour se multiplier. Et puis j'ai ajouté un masque de calque pour enlever le bord dur le long du fond de celui-ci. Et je trouve qu'il semble beaucoup mieux avec la couleur plus foncée sur elle par rapport au blanc vif , parce que je pense que cela rend encore trop difficile à lire. Cela l'améliore définitivement. La seule autre chose que je peux faire est de venir ici et d'enlever une partie de la couleur de l'eau ici et de la tonifier un peu. part ça, je pense que nous avons tous fini. Donc, félicitations pour avoir terminé les sept projets de conception. Pratiquez ce que vous avez appris. Créez un nouveau design pour cette entreprise particulière pour votre portefeuille. Ensuite, si vous le souhaitez, prenez l'un des designs que vous avez créés pour votre portefeuille et affichez-les dans la section Q et A pour montrer vos nouvelles compétences en design. Ou peut-être que vous voulez juste des commentaires sur les conceptions que vous avez créées, et je serais heureux de jeter un coup d'oeil à ces conceptions et de fournir des commentaires si nécessaire. Vous pourriez finir par faire un meilleur travail que je ne l'ai fait en concevant ces pages. Si oui, je te félicite et tu sauras que tu es en route pour réussir. En tant que concepteur Web, merci d'avoir écouté et passer une journée géniale.