Photoshop pour les entrepreneurs : maquette de conception Web

1. Photoshop pour les entrepreneurs : maquette de conception Web: Hé, tout le monde, je m'appelle Jeremy Deegan, et aujourd'hui nous allons construire une maquette de web design. Fondamentalement, c'est un croquis rugueux ou un modèle simple que nous enverrons à un graphiste ou développeur Web pour créer notre site Web pour nous, undéveloppeur Web pour créer notre site Web pour nous,en tant qu'entrepreneur, nous ne devrions pas vraiment passer beaucoup de temps sur des choses que nous devrions faire. Donc, si vous n'avez pas de compétences particulières, de graphisme ou de développement Web, vous voulez probablement laisser quelqu'un d'autre qui a ces compétences gérer cela pour vous. Maintenant, nous voulons créer une maquette de base et Photoshopped pour montrer à ces gens de sorte que quand ils commencent à développer le site, ils ont une compréhension de base de ce que vous essayez d'aller pour. Et plus vous pouvez leur fournir d'informations, plus cela sera facile. Alors allons de l'avant et imaginons une seconde que vous possédez un restaurant de crème glacée, et je suis un client qui vient au comptoir, et je vous dis, j'aimerais un sundae de crème glacée. Après de nombreuses années d'expérience dans le secteur de la crème glacée, vous savez que tout le monde aime ses sundaes de crème glacée différemment. Alors tu m'as demandé : Que veux-tu ? Vanille ou chocolat ? Et je dis, bien, vanille, bien sûr. Et tu dis que tu veux des bananes ? Et je dis, bien sûr qu'il y a des bananes sur un sundae à la crème glacée et vous dites, OK, eh bien, qu'en est-il des noix ? Tu veux des noix sur le dessus de la sundae ? Et j'y vais, non, je ne veux pas de cinglés. Je suis allergique aux noix. Ou simplement en posant des questions simples, vous découvrirez immédiatement ce que cette personne veut et ne veut pas. Et plus vous fournissez d'informations à l'artiste graphiste ou au développeur du site web ,plus il sera facile pour eux de le faire la première 2ème ou troisième fois, , au lieu d'avoir constamment à aller et venir et essayer de devine ce que tu cherches. Donc, dans notre exemple, si je viens à votre restaurant de crème glacée et que je viens au comptoir et je dis, Hey, Hey, je voudrais un sundae de crème glacée, vanille avec des bananes et fouet frais et une cerise sur le dessus. Peut-être du sirop de chocolat, mais pas de noix, parce que je suis allergique à ça. Tu n'avais pas à me poser de questions et tu sais exactement ce que je veux. Vous pouvez y retourner et commencer à le faire immédiatement, et c'est un peu ce que nous faisons ici. Nous allons faire une conception très basique d'un site Web et simplement mettre quelques informations grossières afin que nous puissions les donner aux graphistes ou aux développeurs du site Web et leur faire savoir ce que nous recherchons. Donc, la première chose que nous allons faire dans ce cours est que nous allons écrire quelques idées de ce que nous voulons sur notre site Web. Ensuite, nous ferons un croquis à la main juste pour obtenir quelques mises en page de base. Et il est généralement plus facile de le faire à la main parce que vous pouvez rapidement crayon ou couleur et ou écrire sur une serviette. À quoi vous pensez que cela devrait ressembler, et si ça n'a pas l'air bien, vous pouvez le jeter et recommencer à zéro. Ensuite, une fois que vous avez une bonne idée de cela, nous allons entrer dans la boutique photo et nous allons de l'avant et créer des éléments très basiques et les regrouper ensemble afin que nous puissions les déplacer et voir comment il s'alignerait sur un conception de site Web. Alors allons de l'avant et commençons dans ce cours 2. Recherche de sites Web pour des idées de design: Chaque fois que je commence à faire un travail de conception, la première chose que j'aime faire est de la recherche, et cela me permet d'aller là-bas et de voir ce qui fonctionne pour les gens et ce qui ne fonctionne pas pour les gens et d'aider à obtenir le jus créatif de la façon dont je pourrait dire, je veux exposer certaines de ces informations sur ma propre maquette de conception Web. J' ai donc mis sur pied lesite de revenu intelligent et passif, site de revenu intelligent et passif, et c'est la propriété de Pat Flynn, et il aime être le visage derrière cette entreprise. Donc, vous voyez souvent beaucoup de photos et d'images de lui sur le site. Et si vous allez sur ce site, la première chose que vous allez voir est une image très géante de lui, et cela aide juste à renforcer sa marque personnelle. Mais je suis allé de l'avant et j'ai défilé vers le bas, et nous allons regarder la moitié inférieure de sa vue pour que nous puissions en quelque sorte distinguer ce qu'il a fait ici et vous donner quelques idées de choses différentes que vous pouvez faire à la très haut. La première chose que vous allez voir est une barre de menu et je vais juste faire quelques mises en évidence de base ici. Ça va être un peu grossier, mais ça vous aidera à vous donner une idée de ce qui se passe. Donc, nous avons cette barre de menu en haut que j'ai mis en évidence en rouge, et cette barre de menu est divisée en trois sections. La première chose que nous avons est le logo, puis nous avons les liens pour le site, ce qui est très commun dans tous les sites Web. Excusez-moi, et la prochaine chose que vous allez voir, c'est ses rapports de revenus. C' est quelque chose qui fait depuis longtemps, et ça montre juste combien d'argent il a gagné au fil des ans. Mais fondamentalement, cette barre de menu reste chaque fois que nous faisons défiler vers le haut et vers le bas le site Web. Donc, une chose est que vous voyez toujours ce logo, et cela contribue en quelque sorte à renforcer la marque. Et puis nous avons toujours ces liens pour que vous puissiez aller et cliquer sur l'un de ces liens. Peu importe où vous êtes sur le site Web, vous pouvez toujours vous éloigner de cette page vers une autre page. Maintenant, la prochaine section que vous allez remarquer car nous avons ce grand fond blanc à bleu qui se décolore. Et tout cela ressemble à une sorte de grande section en raison de l'arrière-plan commun qu'il partage. Même si nous avons des choses différentes qui se passent ici maintenant, c'est tout le contenu de sa vue. Donc, nous avons un message en haut de la ressource affiliée est qu'il a et puis ses aimants maigres , et nous allons aller de l'avant et jeter un oeil à tous ces maintenant. Mais en haut de cette image de fond, elle est divisée en deux moitiés. Donc nous avons cette grande moitié en haut, et ensuite c'est divisé en deux moitiés de plus ici. Donc, ce sont ses messages, et ceux-ci peuvent être bloqués messages, YouTube, post ou podcasts qu'il est en fait sorti. Et il a trois belles images, très uniformes, donné à un look très agréable, lisible et très facile à voir avec un peu de rembourrage à gauche. Et maintenant, vous verrez ce rembourrage tout le long de la page parce que vous ne voulez jamais mettre quoi que ce soit complètement dessus parce qu'il pourrait être coupé maintenant. Il a mis le sien dans les rapports de revenus pour que ça puisse être coupé. Peut-être qu'il n'est pas si préoccupé par ça. Et aujourd'hui, avec des conceptions de sites web réactifs, ce n'est pas un facteur si important. Mais il est agréable d'avoir un peu de rembourrage à gauche et à droite. Donc, nous avons ces trois post et belle et même mise en page qui se passe ici et puis ci-dessous que nous avons cette ressource de confiance est section. Donc, cela est à nouveau divisé en trois autres images. Nous avons ce côté gauche dans ce côté droit, et puis nous avons ces trois boutons sur lesquels vous pouvez cliquer. Maintenant, vous remarquerez qu'il n'a pas mis les trois boutons en ligne avec les trois en haut. C' était donc un geste assez intelligent, parce que ce qu'il fait, c'est aider. Ça aide à briser un peu la page. Donc s'il avait juste coincé ces trois boutons sous ces trois petits pains, ça aurait l'air un peu fade et ennuyeux. Donc il a ces trois messages, et puis il décale ces trois avec un titre et un sous-titre, et vous commencez à lire la page si bien, cette façon vous voyez les trois post et ensuite vous lisez ce titre, et puis vous pourrait regarder ces trois boutons sur lesquels il veut que vous cliquiez maintenant, dessous, nous avons la section des aimants de plomb, et ceci est divisé en une section supérieure et inférieure. Et en fait, si vous regardez cette page Web en direct, c'est une image qui fait défiler vers et vers l'extérieur. Donc, cela change. Vous verrez différents aimants en plomb apparaître en fonction de celui qu'il vous montre. Donc sur cette moitié supérieure, nous avons l'image du livre électronique qu'il donne. Et puis nous avons un autre sous-titre de titre avec un bouton pour cliquer sur. Donc, il est cassé que Nice, facile à lire et vous permet de voir ce bouton sympa et audacieux afin que vous puissiez cliquer dessus . Ensuite, nous avons la section inférieure, qui sont les quatre produits qu'il essaie de vous faire inscrire dans les quatre aimants principaux , et, maintenant, il pourrait en utiliser quatre pour deux raisons différentes. C' est parce que c'est le nombre de produits qu'il a. Mais aussi mettre quatre au lieu de trois cette fois aide aussi à briser la page un peu plus . Donc, vous commencez à voir comment cette page est disposée et vous lisez simplement la page de cette façon, et c'est un peu ce que vous voulez faire lorsque vous concevez votre site Web. Vous voulez rendre facile pour les gens de lire ce genre de livre où leurs yeux suivent lentement le long de la page et ne saute pas partout. Alors maintenant, nous avons quatre images et nous aide juste à le briser un peu plus. Et comme je l'ai dit, chacun de ces, hum, il entre et sort de l'image ci-dessus juste ici maintenant ci-dessous. Cela ressemble à une section différente parce qu'il n'utilise pas le même fond blanc et bleu décoloration . Et c'est parce que maintenant il parle de sa communauté, ce qui est un peu différent. Ce n'est pas des produits ou du contenu qu'il vend. Il essaie de construire une communauté, et je crois que c'est un groupe Facebook que vous avez joint. Et sur le côté gauche, nous voyons une photo de lui, donc cela renforce cette marque et sa fiabilité. Et puis sur le côté droit, nous voyons juste un titre très basique et un bouton avec beaucoup d'espace blanc, donc c'est très facile à voir et à cliquer sur. Si c'est quelque chose dont vous voulez faire partie, alors en dessous, nous avons un bouton de menu en bas. Ah, c'est juste pour ajouter quelques boutons en bas de sorte que lorsque vous arrivez à la fin de la page, vous pouvez cliquer sur l'un de ces liens pour continuer avec la page. Si ça n'était pas là, tu pourrais lire tout ça. Vos yeux ont suivi la page. Mais alors vous pouvez simplement quitter la page ou ne pas cliquer sur l'un de ces trucs parce qu'il n'était pas attirant pour vous en ayant ces boutons d'achat en bas ici. Quand tes yeux tombent sur la page, tu pourras dire, OK, qu'est-ce que je fais maintenant ? Oh, je peux cliquer sur son blawg. Je peux en apprendre plus sur lui ou il y a un début ici, mais peut-être que je veux cliquer dessus et voir où ça me mène. Donc très intelligent de mettre des boutons au bas de votre page afin que lorsque les gens arrivent à la fin de l'un de vos contenus, ils peuvent continuer sur votre site et essayer de ne pas quitter votre vue. Ensuite, en bas, nous avons nos informations de base sur le pied de page. Donc, vous allez voir sur le côté gauche conditions de service et différentes informations que vous pouvez trouver sur le site dans le blog de l'entreprise. Et puis sur le côté droit, vous verrez quelques icônes de médias sociaux. Donc, vous voudrez peut-être aller cliquer sur vous savez, que Twitter, hum, page Twitter et aller le suivre là-bas. C' est donc une façon très basique d'entrer et de voir comment une page est disposée. Et comme je l'ai dit, c'est très grossier. Je veux dire, vous savez, je faisais juste une sorte de mettre en évidence rapidement ici, mais je peux facilement voir comment il a mis ce site Web, comment il a obtenu cette belle uniformité et fournit juste un moyen facile pour pour parcourir et voir ces informations et les lire. Et il vous donne également une idée de certaines choses que vous pourriez vouloir faire dans votre propre site Web. Lorsque vous avez commencé à créer votre propre design Web, moquer 3. Rédaction des idées pour votre conception de site Web: la première chose que nous allons vouloir faire avant de commencer à se moquer de notre site Web, c'est nous allons prendre quelques notes sur ce que nous voulons réellement sur ce site Web, sous forme de liens et de mises en page faras , et sur son apparence et ainsi de suite. Maintenant, vous pouvez le faire avec un stylo et du papier. Vous pouvez le faire avec un document Word ou sans document pad. Mais fondamentalement, tout ce que nous allons faire, c' est juste écrire quelques notes de ce que nous pensons vouloir avoir sur ce site. Maintenant, puisque c'est un cours de photo shop, je vais juste aller de l'avant et le faire dans un magasin de photos avec une tablette graphique. Et c'est une tablette en bambou que j'ai. Et fondamentalement, c'est juste une tablette avec un stylo où lorsque je déplace le stylo autour de la surface de la tablette, il déplace le curseur autour, et c'est génial pour moi de faire toutes sortes de choses à l'intérieur d'un magasin de photos. Mais ici, je peux l'utiliser pour faire quelques notes, mettre sur le calque, cacher le calque, puis plus tard, si je veux réellement rappeler cette information. Je peux très facilement, hum maintenant. Donc, si vous suivez, vous avez une tablette. Vous pouvez le faire de cette façon. Sinon, il suffit de suivre avec un morceau de papier et un stylo. Et c'est un processus très simple. Ça ne prendra pas trop de temps, mais je veux juste te montrer comment faire ça. Alors allez-y et assurez-vous que votre brosse est sélectionnée. Montez ici et choisissez un pinceau. Je suis allé avec la ronde dure dans un petit pixel, donc ça ressemble à l'écriture manuscrite par rapport à un tas de bordel de blobby qui se passe ici. Et assurez-vous que vous êtes une passivité est réglé à 100% dans les flux à 100%. Et fondamentalement, je peux juste dessiner ici. Et partout où je dessine, j'ai beaucoup plus de contrôle qu'une souris. Et plus j'appuie dur, il devient sombre dans la lumière ou réprime, plus le briquet devient et ainsi de suite. Donc je vais juste annuler ça. Et nous voulons juste répondre à quelques questions de base que vous trouverez sur un site Web. Et vous pensez à n'importe quel site web que vous avez vu avant, ou même à l'exemple que nous avons regardé plus tôt. n'importe quel site web que vous avez vu avant, Et vous pensez à ce que vous voulez avoir là-dedans. Donc, par exemple, en haut, nous avons généralement une barre de menus, et nous avons besoin de quelques liens. Alors, quel genre de liens allons-nous avoir dans cette barre de menu ? Eh bien, on va avoir Ah, chez moi, Homelink. Je suis peut-être blogueur. Et donc je veux avoir un peu sur ma page, parce que c'est à propos de mon parce que c'est à propos de mon site web sur lequel j'ai blogué et monétisé. Euh, peut-être que nous avons ou des blogs. On a le sang dont on parle. Peut-être que je suis un podcast ou deux. Donc je veux avoir les informations du podcast, et ensuite je veux avoir une section de contact où les gens peuvent me contacter et me poser des questions. Maintenant, je vais aussi avoir des liens sur les réseaux sociaux. Alors, euh, juste mettre des liens sur les réseaux sociaux et juste penser à quoi ? Quelles plateformes de médias sociaux sur lesquelles je suis. J' ai donc une chaîne YouTube. J' ai une chaîne Facebook. J' ai Twitter auquel je suis lié et, ah, ah, disons juste que tu sais, qu'est-ce qu'un autre Google plus OK, alors on va juste dire. OK, donc maintenant nous savons quel genre de liens nous voulons avoir ici. Et puis on a essayé de réfléchir à quoi ? Ce que nous voulons avoir dans cette page d'accueil ? Comment voulons-nous regarder ? Donc je sais que je veux Ah, je veux être la marque derrière cette page d'accueil et derrière ce site. Donc, je veux dire, euh, une photo de profil de moi-même au sommet pour que les gens puissent me voir. Et qu'est-ce qu'on va avoir d'autre ici ? Je veux montrer mes derniers messages blawg parce que j'ai beaucoup blogué, et je fais podcast. Hum, donc je veux m'assurer que j'ai des blawg et des podcasts récents, hum, poster là pour que les gens puissent voir ça sur la page d'accueil. Peut-être que j'ai un de ces aimants en plomb où je donne un livre électronique gratuit et je veux avoir cette information. Je veux m'assurer que j'ai mon aimant principal là-dedans. Peut-être que je fais des publicités Google annonces sur mon site, et je veux avoir une annonce sur la première page. Juste pour peut-être que j'arrive à attraper des gens chaque maintenant et ensuite cliquer sur l'annonce et générer un peu de revenus secondaires pour moi, aussi. Donc, je vais mettre une annonce Google sur cette page, et puis vous pouvez passer par et juste penser à ce que vous voudriez réellement avoir sur cette page et ceci. Comme je l'ai dit, ça peut être plus en profondeur. Vous pouvez en faire un gros document et vous pouvez dire Ok, quand les gens cliquent sur la page de bloc, ça l'amène à cette page et vous pouvez le nommer et dire, Ok, je veux avoir, euh, vous connaissez ce genre d'information sur le blog ou ce type de mise en page ? Vous pouvez faire ces différents modèles de conception Web, mais généralement la première chose que vous voulez faire après avoir fait quelques recherches et vous avez regardé autour de différents sites, c'est pour avoir une idée de ce que vous voulez sur votre page, et la meilleure façon de le faire est d'écrire ceci. Et comme je l'ai dit, vous pouvez le faire sur une feuille de papier très simplement, ou si vous préférez un document Word, vous pouvez le faire là. Mais commencez à écrire des informations sur ce que vous voulez voir sur ce site Web. Alors que nous commençons à concevoir, vous n'avez pas à y penser. Tu as déjà cette information prête à partir. 4. Formatage de votre document Photoshop: Maintenant que nous avons écrit quelques idées que nous voulons dans notre site Web, nous devons parler de la façon dont nous allons configurer notre fichier Photoshopped afin que nous puissions au moins obtenir les bases de notre maquette de design à notre graphiste ou développeur Web. Maintenant, tous les sites Web sont dans des dimensions différentes, et avec les téléphones, les tablettes et les écrans de différentes tailles, il est difficile de choisir la taille parfaite pour un site Web. Et cela est préférable de laisser au graphiste ou au développeur Web lorsque vous commencez à travailler sur le site, car il y a beaucoup de variables qui entrent en jeu dans le choix parfait des dimensions parfaites . Alors allons de l'avant et parlons des dimensions très rapidement. Je vais prendre ma brosse ici, et je vais juste dessiner un moniteur de base, et c'est comme un nouveau moniteur que j'utilise. Et c'est un format assez standard, et la résolution de mon moniteur est 1920 par 10 80. Alors c'est ce que je peux voir à l'écran maintenant. Beaucoup de gens n'utilisent pas de haute définition et de plus gros moniteurs. Beaucoup de gens ont encore des moniteurs plus âgés qu'ils utilisent, et ces moniteurs plus âgés sont généralement trouvés dans une résolution de 10 24 par 7 68. Donc, nous savons que si nous faisons au moins notre site Web à ces spécifications, cela va fonctionner beaucoup mieux pour nous. Au moins les gens qui, sur les moteurs odeurs, peuvent voir nos images. Si on remettait des choses ici en 1920 par 10 84 rencontré, alors quelqu'un sur un vieux moniteur pourrait ne pas le voir, ou il pourrait être recadré. Ou ils peuvent avoir à redimensionner ou à surveiller. Et ça ne va pas avoir l'air bien. Donc, il est généralement préférable que vous construisiez réellement vers une version plus petite. Donc, au moins tout le monde peut voir que maintenant, plus tard, Si votre développeur Web vous dit savoir, allons juste aller de l'avant, faire à la plus grande taille qu'alors aller avec ce qu'ils disent et parler avec eux. Mais pour le bien de ce cours, nous allons utiliser une taille plus petite afin que nous sachions que tout le monde peut au moins voir cette information. Donc nous allons le construire à cette taille, et vous savez que nous aurons notre barre de menus, nos informations et tout ce que nous avons écrit ici. Maintenant, bien sûr, quels sites ne sont pas 7 68 ? Parce qu'ils procèdent réellement à aller plus longtemps que cela, où vous faites défiler vers le bas. Ceci est juste l'image visible, donc nous pouvons toujours ajouter à cela plus tard. Et puis vous auriez une barre de défilement et vous vous promeniez sur le site pour voir tout le reste de cette information ici. Maintenant, cela fonctionne aussi très bien, ces chiffres, parce que leur, euh leurs pouvoirs de deux ou divisibles par deux. Pour qu'on puisse les diviser en morceaux qui fonctionnent vraiment bien pour nous. Donc ils tous ces chiffres vont effectivement entrer dans ces deux dimensions très facilement, donc il est très facile de subdiviser l'information. Alors allons de l'avant et jetons un coup d'oeil maintenant, très vite sur certaines des choses que nous voulons faire dans Photoshopped. Je vais faire un petit cercle juste pour vous donner un exemple d'une chose dont nous voulons être conscients. Laisse-moi juste le mettre juste là et juste le remplir très vite pour qu'on puisse voir ça. Ok, maintenant, la première chose dont nous voulons parler est l'image, taille et la taille de la toile. ce moment, si nous regardons la taille de l'image et que je passe aux pixels, nous en sommes à une résolution 1920 par 10 80. Donc, si je regardais ce plein écran, il couvrirait complètement mon moniteur. Maintenant, si nous changeons cela à une taille de dimension plus petite et que nous travaillons avec la taille de l'image ici , ce que cela va réellement faire, c'est qu'il va mettre à l'échelle l'image et vous pouvez voir qu'elle compresse tout et rend tout écrasé. Alors que nous commençons à travailler, ce n'est pas quelque chose que nous voulons faire. Nous voulons changer la taille de la toile à la place. Donc, si je passe à la taille de la toile et que je change en pixels, puisque c'est ce que nous travaillons. Et j'ai changé la taille de la toile, la même quantité que vous voyez, ce qu'il va faire, c'est qu'il va couper l'image, mais ça ne va pas la réduire et la rendre écrasée. Alors que nous commençons à travailler, si vous avez besoin de plus d'espace, vous voudrez changer la taille de la toile, pas la taille de l'image, parce que nous ne voulons pas l'échelle. Donc, dans notre exemple, nous pouvons faire ce 10 24 et dire généralement que ce serait 7 68 Mais disons simplement que nous voulons plus d'espace parce que nous savons que ce sera un long document site Web. Donc elle a mis 2000 et ce que cela fait, c'est que cela nous ouvre dans un document plus long, peu comme un site Web, et vous pouvez le voir en regardant ce 50% en ce moment. Donc, si j'ai zoomé sur 100%, c'est en fait à quoi ressemblerait le site sur mon moniteur et nous pouvons réellement voir ce, euh, mode écran et mode plein écran. Et c'est à quoi ressemblerait le site dans mon esprit Earner et je ne mettrais aucune information importante sur les côtés ici. Toutes mes informations importantes entreraient dans cet endroit. Donc, je sais que même les gens sur des écrans plus petits peuvent au moins voir mon site Web quand ils commencent à se promener à travers lui. Donc je vais m'échapper de ça. Je vais faire un zoom arrière pour qu'on puisse tout voir. Maintenant, bien sûr, mes informations ont été recadrées ici et nous perdons beaucoup d'informations. Et j'ai encore mes notes dans cette couche. Donc, euh, juste pour voir ça, je veux aller de l'avant et réduire tout ça. Laissez-moi tout sélectionner ici. Non, si de select contrôle. Sois bien. Voilà, tu y vas. Et laisse-moi juste mettre à l'échelle mes notes ici, Sam. Maintenant, j'ai juste ça pour plus tard. Si jamais je veux y retourner et le regarder, je peux le faire. Les dimensions que je ne me soucie pas vraiment, c'est très bien. Je vais juste divulguer ça parce que je pense que vous comprenez le point que j'essaie de faire valoir ici que nous voulons simplement utiliser cette résolution. Mais je veux garder ces notes afin que je puisse toujours activer ce calque et le regarder plus tard, et je vais juste ajouter un nouvel arrière-plan plus tard, calque et juste le rendre blanc juste pour que je n'aie pas cette transparence. Ok, donc maintenant nous avons juste ah, j'ai mes notes terminales. C' est éteint maintenant. Je viens d'obtenir une mise en page de base blanche que je peux utiliser ici. D' accord, donc la prochaine chose que nous allons vouloir faire c'est que je suis allé de l'avant et que je change la taille de ma toile à 10 10 10 24. Donc nous savons que nous avons un bon avec et je l'ai fait 2000. Donc c'est extra long, donc je peux juste travailler de cette façon et puis je peux toujours venir ici et couper cela ou le rendre plus long en fonction de la façon dont ce site commence à tourner. Maintenant, prochaine chose que nous allons vouloir utiliser est une grille, parce que nous voulons nous assurer que tout est accroché à une grille. , Encore une fois, ça n'a pas besoin d'être une science parfaite parce qu'on fait une maquette. Mais plus nous pouvons faire les choses, euh, comme nous voulons qu' euh, elles soient vraiment aussi loin que les hauteurs et les esprits et ce que vous avez, mieux ce sera. Donc, au lieu de simplement gifler arbitrairement des choses dedans, mieux vaut utiliser une grille, donc au moins cela a un peu plus de sens, surtout quand nous la remettons à quelqu'un d'autre. Et la chose géniale à ce sujet est, si vous travaillez avec un graphiste qui a photoshoppé, vous pouvez leur donner ce fichier PSD, et au moins ils peuvent le tirer et dire, OK, vous fait ce tant de pixels et qu'est-ce que vous avez et peut en quelque sorte aller à partir de là ? Donc, je vais juste aller voir et je vais aller montrer et puis sélectionner la grille, et cela va créer une grande force. Maintenant, je veux ajuster cette grille parce que vous pouvez voir que ce n'est pas vraiment aligné vraiment bien ici. C' est en quelque sorte aller sur les côtés et ne pas frapper parfaitement là où nous voulons qu'il soit. Allez-y et zoomez ici pour qu'on puisse voir ça. Voyez comment ce genre a été coupé ici et ça. Ce n'est pas une belle grille uniforme. C' est parce qu'il utilise des dimensions différentes de celles que nous utilisons ici. Cliquez donc sur Modifier chèvre, descendez aux préférences, puis sélectionnez des guides, des grilles et des tranches. Et cela va nous permettre de changer la grille, comme nous le jugeons bon. Donc, si nous descendons à l'endroit où il est dit grille, nous avons une ligne de grille par pouce avec huit subdivisions. Ce que nous n'utilisons même pas de blessures était l'utilisation de pixels, donc c'est fier du problème et nous avons huit subdivisions. Allons-y. Fais juste cette subdivision maintenant pour que tu puisses voir que je ne voulais pas appuyer sur Entrée, mais tu vois ce que ça fait. Maintenant, nous avons une ligne de grille tous les centimètres et aucune subdivision. Donc, ce sont juste des lignes régulières sans subdivisions. Alors retournez ici, donc je ne veux pas fermer ça. Donc on va changer deux pixels et maintenant on a une ligne de grille. Chaque pixel. Eh bien, c'est un peu trop. On n'a pas besoin de ça. Et comme je l'ai déjà dit, tout est divisible par deux. Donc on peut utiliser n'importe lequel de ces chiffres que je t'ai montrés avant. 24 8 16 32 64 Essayons donc 64. Donc 64 a l'air bien. Il a quelques belles boîtes de bonne taille et nous divise. Vraiment bien. Maintenant, je pourrais faire, disons, huit. Hum, c'est un peu beaucoup. 16 16 est assez bon, mais si nous faisons 64 un plus grand nombre pour obtenir ces plus grandes boîtes et ensuite nous utilisons des subdivisions. Donc, disons quatre subdivisions maintenant que nous pouvons voir que nous avons de belleslignes épaisses, lignes épaisses, tous les 64 pixels, et ensuite elle est divisée par quatre. Donc, si vous prenez quatre en 64, c'est 16. Donc, chacune de ces lignes lumineuses a 16 et chacune de ces lignes sombres est 64 vous pourriez mettre en place ce qui vous semble le mieux, mais je pense que c'est plutôt bon. Cela nous donnera une bonne taille de dimension. Et maintenant, quand nous allons voir, assurez-vous que nous avons snap on snap to grid. Donc, chaque fois qu'on fait quelque chose comme, disons , si je prends cette boîte ici, ça va l'accrocher aux points de grille, et ça va juste rendre ça agréable et même force. Et comme je l'ai dit, ce n'est pas une science parfaite, mais au moins cela nous montrera des choses agréables et faciles avec lesquelles les orteils ont travaillé. Donc, si je fais apparaître ma barre de menu et que je l'ai bien sélectionné, maintenant nous savons que ma barre de menu est exactement 64 pixels hauteur de loi sage et 10 24 avec sage. Donc c'est un excellent outil. Et puis une autre chose que vous pourriez vouloir allumer, c'est les dirigeants. Donc, si vous avez une vue et vous cliquez sur les règles ici, vous allez voir ces règles en haut et ces air grand pour une aligner les choses à nouveau. Elle est fixée à 2 pouces et on ne veut pas de pouces. Donc, double-cliquez sur ça. Et quand vous double-cliquez sur, ça va aussi faire apparaître les mêmes préférences. Vous pouvez voir des guides grands et des tranches ici et au-dessus que les unités et les règles. Donc maintenant, nous pouvons ajuster la propriété des règles. Alors allons voir les dirigeants. Changez ces deux pixels et maintenant vous pouvez voir qu'il montre nos pixels de notre document. Nous pouvons frapper OK, et c'est génial parce que maintenant nous pouvons voir où nous voulons diviser cette information si nous voulons utiliser les règles comme guides. Et une autre grande chose à propos des règles est que si vous allez à l'endroit où se trouve la règle et que vous cliquez et faites glisser, vous obtenez ces lignes et ces excellents outils de mesure de l'air. Donc, il est très facile de déposer une ligne ici et de voir Ok, c'est le centre de mon document, et je peux aligner les choses de cette façon, et je peux couper ceci comme je veux, donc nous allons les utiliser pour juste poser quelques choses de base avant de commencer à laisser tomber choses là-dedans afin que nous puissions au moins commencer à briser cela et voir à quoi nous voulons que ce site Web ressemble. C' est ainsi que nous avons reconfiguré notre document. Nous sommes 10 24 de large, donc au moins nous savons que les gens sur les moniteurs plus âgés peuvent le voir. Et comme je l'ai dit, comme vous avez commencé à travailler avec le graphiste, le développeur Web ou quiconque conçoit votre site pour vous quand vous lui cette maquette à eux, au moins ils ont un bon point de référence général . Et puis vous pouvez tous travailler ensemble à ce moment-là et changer tout ce que vous voulez. Mais au moins on a une idée générale de quelque chose qui a l'air un peu plus, euh , tu sais, cohésif et ah va marcher un peu plus gentil que quelques chiffres aléatoires frappés. 5. Concevoir votre maquette de site Web: Ok, donc nous avons nos documents configurés sur la façon dont nous voulons aller de l'avant et créer cette maquette de design web . Et je vais vous montrer deux façons différentes de faire ça. Maintenant, gardez à l'esprit que tout ce que vous essayez de faire est juste de montrer les bases de ce que vous voulez rechercher dans votre site Web et ce que vous allez faire lorsque vous remettez ceci à un graphiste ou un développeur Web. Donc la première chose que nous faisons est que nous pouvons regarder notre grille ici et nous pouvons commencer à diviser cette grille. Ah, et notre document dans ce que nous croyons être bon d'une façon de le faire est d'utiliser ces guides avec les règles pour que je puisse cliquer et faire glisser ceci vers le bas. Et je peux dire, euh de ces airs d'avant Laisse-moi sortir ça. Tu as raison. Le centre. Donc nous pouvons dire que nous savons que nous voulons notre barre de menu en haut, et nous savons que nous voulons ah, section pied de page en bas et nous allons vouloir un lynx en bas aussi. Alors peut-être que nous avons un haut au-dessus de la section pli d'une photo de moi ou d'une photo de vous ou votre marque ou tout ce que vous faites ci-dessous. C' est peut-être ce que nous voulons avoir des postes bloqués. Alors nous voulons avoir nos aimants de plomb et ainsi de suite, et vous pouvez descendre la coupe et diviser ceci et ensuite l'une des premières choses que vous pouvez faire à partir de ça est de créer une nouvelle couche et ensuite vous pouvez aller ici, Alors nous voulons avoir nos aimants de plomb et ainsi de suite, et vous pouvez descendre la coupe et diviser ceci et ensuite l'une des premières choses que vous pouvez faire à partir de ça est de créer une nouvelle couche et ensuite vous pouvez aller ici, prenez la boîte à outils rectangle. Ah, puis choisissez une couleur. J' utilise habituellement du gris quand je fais des simulations, mais si vous avez une couleur de brandy, vous pouvez le faire et j'irai ici et je vais juste commencer à créer des images brutes très basiques de ce que je vais faire. Donc, un pool dans le texte ou et je sais que c'est la section de lien. Donc je vais entrer ici, et je vais écrire à la maison sur le contact des podcasts et ce que vous avez, puis , vous savez, changer ces changements de taille ici, et c'est une façon de procéder. C' est assez simple. Et tout ce que tu fais c'est que tu es en train de recréer ce à quoi tu penses que ça ressemblerait  ? Donc vous, vous savez, ou vos liens ici, voulez-vous qu'il soit au centre ? Et tu n'as pas besoin d'être un expert. Et quand vous avez conçu le site, vous allez le réaliser. Les choses allaient changer et tu vas vouloir, euh je voulais être différent. Peut-être que quelque chose n'a pas l'air bien. Vous n'êtes pas un artiste, mais vous pouvez au moins faire connaître votre point de vue à l'artiste graphiste ou au développeur web pour vous aider à créer cela pour vous. C' est donc une façon de le faire. Et puis ce que vous pouvez faire avec cela aussi est que vous pouvez sélectionner ces couches, appuyer sur le contrôle G et les regrouper ensemble, puis vous pouvez les déplacer. Donc si c'était, disons, ah, ah, bloquez le poste et vous ne l'avez pas fait, vous n'étiez pas sûr d'où vous le vouliez. Ah, tu ne sais pas. Si tu voulais en haut, tu pourrais le vouloir à mi-chemin en bas. C' est un excellent moyen pour vous de regrouper ces choses ensemble et de les déplacer et de voir ce qui fonctionne et ne fonctionne pas pour vous. Maintenant, laissez-moi vous montrer une autre façon de faire ça et ça me semble plus facile et ah, ça a l'air mieux. Donc c'est un peu plus attrayant visuellement. Donc, tout de suite, vous commencez à avoir une très bonne idée de ce que vous voulez. Et ce que je dis aux gens, c'est qu'Adobe Creative Cloud Suite vous permet d'accéder à une tonne de ressources que vous pouvez utiliser dans vos projets et tout au long des cours que vous me voyez faire. Vous me verrez utiliser cela souvent parce que c'est un outil si puissant. Je pense que c'est un peu sous-utilisé et vous pouvez sortir et vous pouvez trouver ces choses sur le Web. Vous pouvez trouver des gratuits que vous pouvez trouver ceux que vous payez et des choses qui répondront mieux à vos besoins . Mais vous n'avez pas à chercher plus loin que le logiciel lui-même. Donc, si vous ouvrez l'application Creative Suite et que vous cliquez dessus, il va tirer cette boîte ici. Et si nous utilisons des actifs de pointe et que nous vous tapons, pourquoi vous allez trouver un tas d'actifs d'interface utilisateur que vous pouvez utiliser ? Certains d'entre eux sont des actifs simples comme vous voyez ici la calculatrice dans le calendrier et vous pouvez dessiner glisser ceux dans Certains d'entre eux sont des formats pleine page comme le tonnerre. Vous je kits ces air à peu près déjà aménagé. Et vous aimeriez peut-être certains d'entre eux. Tu pourrais juste faire glisser un de ces trucs. Et si vous en avez trouvé un que vous aimez et que vous n'avez même pas à faire plus que, disons, ici, c'est ce que je veux. Certains d'entre eux sont des kits d'actifs, donc ce sont des regroupements. Et laissez-moi trouver certains de ceux comme celui-ci ici, cette combinaison que vous AIPAC, c'est un groupe ensemble que vous pouvez utiliser, et il y a un tas de choses différentes. Si je clique dessus, vous pouvez voir qu'il a une photo de profil. Il y a un graphique. Il y a des boutons de calendrier, des barres de recherche. Et donc vous avez glissé cela et vous venez de retirer les éléments que vous voulez utiliser, sorte que cela fonctionne vraiment bien. Et j'ai tiré quelques uns de ces actifs et déjà que je vais les utiliser dans ce cours. Ceci juste pour vous donner un aperçu rapide de la façon dont vous pourriez utiliser certains de ces actifs et, hum, je vais aller de l'avant et les fournir dans la section des ressources est de ce cours. Donc, si vous regardez ici à ma bibliothèque, vous pouvez voir les trois que j'utilise. L' Avia, vous, vous je kit démarreur, les éléments de briques. Vous je gamin et une vue je kit pour la navigation. Et je vais juste ouvrir ces individuellement, sont un clic droit et appuyez dessus et que va faire ? Ça va ouvrir un nouveau fichier PSD Photoshopped avec ceux avec ce fichier, et ensuite vous pouvez voir toutes les différentes mises en page que nous avons dans ceux-ci. Laisse-moi aller de l'avant, ouvre tout ça. Cela casse l'élément un est un peu plus grand. Il a beaucoup de choses dedans, mais vraiment de haute qualité semble vraiment bonne. Maintenant, cela veut juste dire qu'il utilise des polices que je n'ai pas installées sur mon ordinateur. Je peux toujours aller et installer ces polices. Je ne vais pas m'inquiéter à ce sujet maintenant parce que tout ce que nous essayons de faire est juste de vous donner une idée de la façon dont vous pourriez créer votre propre maquette et même vous n'avez même pas à travailler trop sur le texte parce que vous essayez juste d'obtenir ce que la mise en page On dirait. Nous ne nous soucions pas du texte ou les images essayaient juste de faire passer notre point au graphiste ou développeur Web. Donc, euh, je vais juste annuler et ne pas résoudre ça, et ensuite je vais ouvrir ce dernier ici, et ça ne résout pas sur le souci de résoudre ça. Donc je vais aller au 1er 1 ici, et je vais zoomer. Et ce sont des mises en page pré faites pour les sites Web que vous pouvez juste aller de l'avant et vous pourriez trouver un de ceux-ci que vous aimez, et ensuite vous pouvez juste dire, Hey, c'est ce que je vais faire à la place de ce mettre ceci dans et ainsi suite. Mais ce que nous allons faire, c'est nous allons arracher certains des éléments de ces choses et les utiliser dans notre maquette de conception. Donc le 1er 1 que je vais utiliser est celui-ci juste ici. Et la seule chose à propos de ces pauses Photoshopped, ils ont parfois beaucoup d'éléments, et la partie la plus difficile est de trouver ce qui est quoi ? Donc, ce que je fais c'est que je commence juste à éteindre les couches jusqu'à ce que je trouve celui que je veux. Ok, donc ça s'appelle deux blocs. Je vais double-cliquer sur cela parce que c'est une couche intelligente. Comme vous pouvez le voir, il n'y a pas de dossier d'informations. Il y a cette icône ici dans le calque. Je double-clique sur le fait qu'il va orteil, ouvre un calque intelligent avec tous les calques là-dedans, et il parle de calques de texte à nouveau. Je ne veux pas mettre à jour ça. Donc, quand j'ai ouvert la couche intelligente, vous pouvez maintenant voir ici tous mes dossiers et informations que nous pouvons faire glisser et tirer autour. Donc c'est ce que je cherche. Alors je vais y retourner. Je vais juste fermer ce document. Je n'en ai plus besoin, donc on n'utilisera pas ça. Ok, alors on va dans ces deux rues et ce qui se passe ici, c'est que j'aime ce haut. J' aime la façon dont ils ont fait ce titre. Le sous-titre. Peut-être quelques boutons où je peux mettre commencer ici ou quelque chose que je veux que la personne clique sur, avoir une image de moi ou de ma marque et ah, peut-être ces liens de navigation. J' aimerais peut-être ces liens de navigation, alors allons-y et traînons ça à nouveau. Je vais juste commencer à cliquer à travers les globes oculaires et les couches jusqu'à ce que je trouve ce cherche, qui est juste là et qu'ils appellent ce héros. Donc je vais faire un clic gauche et le glisser dans mon document et juste le déposer juste là dedans. Maintenant, une chose que je vous recommande certainement de faire lorsque vous commencez à étiqueter des choses qui auront sens pour vous ou qui auront du sens pour le graphiste ou le développeur Web plus tard. Parce que si vous leur donnez le fichier PSD et qu'ils regardent ça et qu'ils voient ici, ils ne sauront pas ce que c'est. Donc on pourrait appeler ça haut, hum, hum, section supérieure ou quelque chose comme ça. Au moins, nous savons que c'est la section supérieure, et c'est le dossier sur lequel nous travaillons. Donc, je vais cliquer, et je vais faire glisser ceci et j'ai besoin de mettre à l'échelle cela et encore. Nous voulons être proches avec les dimensions et les tailles. Mais encore une fois, on va avoir quelqu'un d'autre qui travaille sur ça pour nous. Donc nous n'avons pas besoin d'être parfaits. Euh, mais, tu sais, on veut avoir l'air de près. Donc, nous aimons à quoi ça ressemble. Ça a l'air génial. Sauf qu'il y a une photo de cette fille qui regarde en bas. Je m'en fous vraiment de ça. Je préfère avoir une photo de moi et de ma marque ici, du moins pour que je puisse avoir une certaine cohésion. Je pourrais l'enlever et juste déposer un bloc de texte là-dedans et dire l'image de moi ou l'image de la marque ou de l'image de notre camion ou quelque chose que vous voudriez utiliser. Hum, donc je vais juste ouvrir ce dossier à nouveau. Je peux cliquer sur ce truc et voir ce qui se passe ici. On a le titre qu'on a, Knave. On avait une rangée. La flèche. Je m'en fous même de ça. Je vais juste le laisser. Donc c'est une chose de moins que tu dois regarder. On a la base. Ok, donc c'est dans la base. Donc, et puis certains de ces trucs pourraient ne pas avoir beaucoup de sens, donc vous pouvez voir quand on allume ça et éteint, il y a des effets de coloration et des choses différentes qui se passent pendant que nous ne nous en soucions pas encore. Nous n'essayons pas d'être parfaits ici. Nous essayons juste d'obtenir une mise en page de base, donc je vais désactiver celui-ci rectangle. Je pourrais même le supprimer si je le voulais. En fait, il semble qu'il ne peut pas le supprimer. Je vais juste l'éteindre et le cacher. Et puis je suis juste Ah, peut-être que j'apporte une photo de moi-même. Je vais ouvrir le dossier. C' est un projet sur lequel j'ai travaillé auparavant. Image de moi tous montrant un peu avant et après image d'une certaine couleur retouchant, en corrigeant que je l'ai fait. Mais je vais choisir celui qui dit des ajustements. C' est la photo de moi ici. Ça a l'air bien. Et je vais faire glisser ça dans mon document. Pose ça là-dedans et vois, parfois tu dois déplacer ça jusqu'à ce que tu le vois. Il était donc caché par certaines de ces couches. Je continuais à le déplacer jusqu'à ce qu'il apparaisse. Donc maintenant, je vais juste réduire ça sur cette ligne là-bas, redimensionner et le déplacer. D' accord, donc ça a l'air bien. Je veux dire, j'aime ça. J' ai déjà des liens. J' ai cette petite section de titre. Peut-être que je voudrais déplacer cette section de titre. Donc j'aime que ça vienne avec moi, et on y va. Nous commençons déjà à voir les bases de ce design se moquer. C' est donc les bases de la façon dont ce processus fonctionne. Nous allons aller de l'avant et faire une pause ici, et nous reviendrons voir comment nous pouvons ajouter d'autres choses dans la section suivante . 6. Ajouter des graphiques de UI à votre maquette de conception: Ok, on va aller de l'avant et finir cette maquette de design Web. Vous avez vu qu'il y a deux façons de faire ça. Nous pouvons utiliser les règles, les grilles et les guides pour entrer et simplement bloquer certaines façons très basiques de faire les choses. Ou nous pouvons utiliser les actifs de Photoshopped eux-mêmes pour les jeter rapidement dans notre site Web et les déplacer pour avoir une idée de ce que nous voulons que notre site ressemble très rapidement. Donc je vais juste ajouter quelques choses ici juste pour que vous puissiez voir le processus au fur et à mesure que nous avançons. Et ce sera le même processus tout au long de la conception Web. Muck up, vous venez juste de déposer des choses et de les ajuster, de les déplacer et de voir ce qui fonctionne le mieux pour vous. Alors laissez-moi aller de l'avant et minimiser. On a sa section supérieure. Nous avons cette couche d'ajustements que nous avons ici. Voyez si je laisse tomber ça derrière cette ligne. J' ai toujours ma couche de notes, donc je peux toujours aller lire ce que je voulais ajouter. Donc je voulais ma barre de menu et je peux aller dans le haut ici et d'autres dans la barre de menu ici, mais cela nous donnera une idée de base. Et puis j'ai ma photo de profil. Donc, je voulais quelques messages récents de Blawg et des podcasts et un aimant principal dans une annonce Google. Alors allons de l'avant et ajoutons quelques autres choses. Je vais y aller. C' est l'élément brics. Et si je zoome ici, c'est un document cool. C' est long, et il y a beaucoup de choses dedans. Et encore une fois, une partie du problème avec ce document est juste d'essayer de comprendre ce qui est ici. Donc nous avons un tas de choses différentes à choisir, et je vais faire défiler ici, et je suis à la recherche de quelque chose qui fonctionnerait pour nos posts bloqués et notre post podcast. Quelque chose comme ça pourrait être bon. Ça pourrait être quelque chose de cool. Cela pourrait être une image de post bloc que nous pourrions utiliser. Et c'est tout ce que je fais, c'est que je vais passer par ici et essayer de comprendre ce qui refléterait quelque chose qui ressemble réellement à un poste de bloc ah. J' aime bien celui-là. On dirait un post où j'aurais une image là-dedans. Le nom, le titre des messages, l' information que je commence à parler du post quand je l'ai posté et tous les commentaires ont été laissés. Et peut-être que je pourrais avoir ce coeur préféré ici. Ou peut-être que je pourrais l'enlever pour que, comme je l'ai dit, on trouve lequel. C' est parce que ces noms ne signifient rien pour nous. Donc je passe juste par ici et je commence juste à cliquer sur ces couches. Oh, d' accord. Ici, c'est. Galerie d'images trois. Donc je vais laisser un clic sur ça. Je vais le faire glisser dans mon document. Je vais le déposer, d' accord ? Et c'est donc Ah, spot. Où maintenant, quand je concevais un site, vous pouvez faire quelques choses différentes. Je pourrais en fait mettre une sorte de titre ou d'en-tête ici, et je pourrais le remplir plus tard, ou je pourrais aller directement dans la section post de tourbière. Hum, pour l'instant, on va juste aller dans la section post des tourbières et tu auras l'idée. Mais bien sûr, je veux que ça paraisse bien. Je pourrais en fait avoir un petit dicton ici, une petite citation ou des titres qui dit récent blawg post et ensuite les déposer dans. Mais en gros, je peux prendre cette couche et voir ce qu'on a ici. D' accord ? On a son image. Ok, débarrassons l'icône. On n'y va pas. Utilisez cette icône et je peux laisser l'image. Je pourrais prendre l'image que je pourrais aussi, si je le voulais. Je pourrais prendre l'outil rectangle et, euh, juste passer sur l'image sur un nouveau calque. Donc, selon ce que je voulais montrer au graphiste, ils pourraient probablement comprendre que ce n'est pas une image, Vous savez que c'est juste une image d'espace réservé pour ce que nous voulons, mais je pourrais juste le remplir, et je pourrait même écrire un bloc de texte dessus qui dit image. Ou même si je le voulais, je pourrais lui apporter une image, juste une photo rapide ou quelque chose et en avoir trois différentes ici. Mais fondamentalement, c'est juste un moyen rapide pour moi de voir ça. Ok, c'est un post de bloc, et on sait ce qu'il se passe ici. Ah, et ensuite je vais appeler ce blawg post un. Je vais laisser Click. Faites glisser cela sur le nouveau calque. Faites-en une copie. Blawg Post aussi. Et attrape mon mouvement. Outil. Cliquez dessus. Déplacez-le et copiez-le. Beaucoup de post 3. Cliquez dessus. D' accord ? Et vous pouvez voir que ça ne s'alignent pas vraiment pour que je puisse les mettre à l'échelle, juste pour l'amour. Par souci de temps. Ici. Je vais juste le déplacer et les centrer. Ok, alors maintenant, on fait une certaine marge de manœuvre. Hum, maintenant je veux diviser ça et peut-être que j'ai besoin de mon post podcast. Donc, euh, je dois diviser ça. J' aime cette ligne bleue. Peut-être que je veux continuer à utiliser cette ligne bleue sur le bas. C' était dans la section supérieure, alors allons le trouver. Je crois que c'est cette année. Oui. Donc c'est ce petit marqueur ici. Je vais cliquer dessus, pas double-cliquer. Je vais cliquer et le faire glisser sur le, hum, sous la nouvelle bande de calque pour en faire une copie. Je vais le faire sortir de ce dossier pour qu'il soit éteint tout seul. Je vais renommer les sauts de ligne. Je sais ce que c'est. Bouge, outil. Cliquez dessus. Alors d'accord, on y va. Ok, donc on a ce saut de ligne là-bas. C' est sympa. Et maintenant je veux juste dupliquer cela, parce que peut-être je fais la même chose pour le poste de tourbière. Peut-être que j'ai décidé de les compenser comme on l'a vu avec le site de revenu intelligent et passif. Cependant, vous voulez le faire. Mais, vous savez, c'est encore une fois juste pour vous montrer le processus. Donc je vais faire ça à un autre saut de ligne et très vite, juste en utilisant des choses qu'on a déjà, euh, des actifs qu'on a déjà dans la boutique photo. Vous pouvez voir que c'est un processus très facile. Et vous pouvez simplement couper ces choses en morceaux et utiliser seulement les sections. Vous voulez avoir une idée de ce à quoi vous voulez que votre site Web ressemble. Et encore une fois, je serais probablement mis dans certains titres et choses ici et dire que c'est Ah, c'est un récent post de bloc. Laisse-moi faire ça. Et bien sûr, je passerais du temps et je rendrais ça beau, uniforme et joli, mais pour l'instant, on va juste te montrer la base pour que ça ne soit pas trop joli. Essayons de faire comprendre ce que j'essaie de faire. Podcasts. Podcast. Qu' est-ce qu'ils sont ? Épisodes, OK. Et puis Ah, alors qu'est-ce qu'on voulait d'autre ici ? Revenons à nos notes. Jetez un oeil. Des notes que nous voulions. On a notre photo de profil. On a notre poste de tourbière. On voulait diriger l'aimant dans une annonce. Voyons comment on peut faire ça. Je vais le dire très vite. D' accord ? Je vais y retourner. J' ai besoin de quelque chose. On dirait un aimant de plomb. Je regardais cela plus tôt, et ce serait une bonne image de l'aimant principal sur le côté gauche. Titre parle de l'aimant principal, et peut-être que j'ai un bouton d'inscription et je vais probablement nous changer orteil ce qui ressemble à une zone de texte en utilisant certains de ces actifs, mais nous devons savoir ce que c'est. C' est les deux pâtés de maisons. Alors saisissons ce Drag ça dans notre document ici, euh, nous pouvons aussi changer les couleurs de ces choses. Donc, hum, si vous avez une couleur de marque avec laquelle vous travaillez et que vous savez ce que vous voulez que la couleur soit. Vous pouvez le faire très facilement. Um, amusant. Ils utilisent ce bleu assez typiquement, et c'est une bonne chose parce que tout le monde utilise toujours le même bleu, ce qui fonctionne bien. Voyons donc quelles sont nos boîtes en un seul. Celle-là. Ok, supprimons ça. Je ne veux pas de ça. On va appeler cet aimant de plomb. Ok, donc c'est cool. On a son aimant de plomb. Ah, nous voulons dans les publicités. Retournons ici. Voyez si on peut trouver quelque chose qui ressemble à une publicité. Oh, ça dit de la publicité. Parfait. Ok, on doit trouver ce que c'est. Il y en a beaucoup, donc je commence à me cacher jusqu'à ce que ça disparaisse. Et puis je sais ce qui est quoi. Ok, on va aux images. Frappez ça. Lâchez-le. On n'en a pas besoin. Donc nous ne voulons pas de boîte aussi. Cachez que c'est fini. Ok, Cool. Et puis on appellera cette publicité que tu ne pourras jamais épeler. Les cravates signifiaient et déplaçons ce plomb. Homme-le vers le bas. Donc c'était juste un peu centré. D' accord, ça a l'air bien. Et, ah, regardons tes notes. Donc on a presque tout ce qu'on voulait avoir. Et nous avons fait ça et, vous savez, environ 20 minutes très rapidement, nous pouvons juste commencer à regrouper à quoi ça ressemble. Euh, bien sûr, on voudrait le pied de page dans la navigation en bas. Allez-y et faites glisser ça en très vite. Hum, on va utiliser Ouais, celui-là. On a donc ce pied de page et ce sous-pied en bas. Alors faites glisser les liens de pied de page pour obtenir et, euh, adapter notre document. On se fiche des textes. Juste eu d'accord à travers ça encore. C' est juste le design. Magnifique. Et pied de page étendu. Ouais, j'aime bien ça aussi. Et on va avoir ces touches. Ce serait tous ces liens et informations divers que nous pourrions vouloir mettre ici . Je fais probablement le lien. Celui au-dessus, euh, un peu plus sombre. vois, tu sais, et je pourrais m'embêter avec tout ça. Retirez le logo. Je me fiche de ce logo. Peut-être que je centre et re à l'échelle afin qu'il semble un peu mieux ici. Très bien. D' accord. Et voyons, tu sais, si on voulait la couleur de Teoh dans ce pied de page qui est au-dessus. Comment ferons-nous ça ? On pourrait tomber dessus, trouver cette couleur de fond, et sur celui-ci je peux en fait double-cliquer dessus. Et il va en fait soulever ah, sélecteur de couleurs pour moi parce que c'est une couche intelligente et je pourrais assombrir ça, donc c'est cool. Um, je pourrais aussi faire en superposition de couleur d'effets sur cette section et le changer en n'importe quelle couleur que je veux. Tant que j'ai la normale sélectionnée en opacité à 100%, je pourrais aller ici et changer la couleur, mais parce que c'est un calque intelligent me donne la possibilité d'utiliser simplement un sélecteur de couleurs. Donc on va y aller. Ça a l'air bien. Ok, jetons un coup d'oeil. Alors on y va. Nous avons un site web très rapidement et facilement mis en page. Peut-être que je n'aime pas ce lien en haut. Et je suis comme, euh, comme ce lien un peu mieux. Soyons donc ce lien ici, c'est le menu de navigation. Pose ça, euh oh. On dirait que je l'ai laissé dans le dossier par accident, alors assurez-vous que vous ne le faites pas. Je vais bouger ça du chemin. Apportez-le au sommet. J' aime garder les choses dans la pile des couches. En fait, comment ils sont affichés sur la page. C' est juste un peu plus logique. Alors on y va. Mettez à l'échelle ceci. Et je n'ai pas besoin de voir tout ça. Menu déroulant des informations de Mlle Alina et résultats de recherche. Et maintenant tout le reste touche en quelque sorte le sommet. Ça me plairait peut-être. Je n'aime pas ça, alors je vais cliquer sur tout, assurer que j'ai mon déménagement. Outil sélectionné. Et je pourrais bouger tout ça ensemble. Et puis maintenant, l'autre problème est que nous avons deux liens. Nous avons eu ces garnitures et ensuite des liens saignant dans la partie supérieure. Alors je vais aller au haut de la section et je vais éteindre le talent pour que je ne le voie pas. Et puis on a juste eu un peu d'espace blanc parce qu'on n'a pas rempli tout le document. Nous avons déjà vu comment le faire avec la taille de la toile. Alors découvrons où on est à ce regard sur ce que ça dit ? 17 10 17 20. Donc la taille de la toile faire ce 17 20 écrêtage Wilker. Continuez. Okay, maintenant nous devons tout attraper parce qu'il le clipse du centre, pas de l'endroit où nous voulions filtrer. Alors prenez tout et déplacez-le vers le bas. Quoi ? L' outil de déplacement. Et on y va. Nous avons une présentation de base de notre site Web, et nous avons tout ce que nous voulions. Nous avons notre logo ah ici. On dirait que ce logo de navigation est revenu en difficulté. Si je n'utilise pas de trucs à vouloir, hum, navigation. La section supérieure naff. Si je ne veux pas de choses, je le supprimerai habituellement. Donc on va prendre ce clave et s'en débarrasser. Ok, alors on y va. Maintenant, nous avons bouger cela un peu plus. OK, on a nos liens. J' ai eu ma photo de profil, peut-être quelques boutons et je parle du site. J' ai mes messages de bloc récents et certains espaces réservés grands carrés ici pour les montrer . J' ai mes récents épisodes de podcasts. J' ai mon aimant de plomb. Je mettrais probablement une photo différente ou couvrirais ça avec un carré gris. J' ai ma publicité, mes fuites de fond. Donc tout ce que nous voulions sous les notes, sauf pour les icônes des médias sociaux, mais vous pouvez voir à quel point il est facile de corriger cela et de les amener. Et ce sont les deux façons de concevoir ceci. Vous pouvez soit le faire avec les grilles et les règles et créer ces carrés et des choses vous-même comme je pourrais réellement faire ces carrés dans ce texte, mais c'est un processus un peu plus long. Pourquoi ne pas simplement utiliser les ressources déjà disponibles auprès d'adobe et créer ce site Web ? Comment voyez-vous bon ? Donc, là, vous allez un marché de conception de site Web très rapide, simple et facile. 7. Utilisez Photoshop pour créer une maquette de design Web: Maintenant, vous savez comment faire une simple conception Web se moquer, et c'est une information précieuse pour un graphiste ou un développeur Web, car elle leur donne des informations à l'avance qu'ils peuvent utiliser pour commencer à créer votre site Web immédiatement. Et ils n'ont pas à faire un tas de devinettes en essayant de comprendre exactement ce que vous cherchez. Dans ce cours, vous apprenez à faire un peu de recherche, à regarder d'autres sites Web et à les distinguer et à comprendre ce qui fonctionne bien pour eux. Vous apprenez à écrire quelques idées à l'avance sur ce que vous voulez dans la conception de votre site Web , sorte que vous n'avez pas à faire ce devis pendant que vous le concevez. Ensuite, vous apprenez à faire un croquis rugueux pour en quelque sorte exposer quelques idées de base. Et puis nous sommes allés dans la boutique photo et utilisons des grilles et des couches et divers outils afin que vous puissiez vous déplacer autour des différents éléments et voir comment ils s'intègrent dans votre propre conception de site Web . Espérons que vous avez trouvé cette information très précieuse, et maintenant vous pouvez l'utiliser pour accélérer le processus chaque fois que vous avez un site Web créé pour votre entreprise ou votre marque. Maintenant, ce que je veux que vous fassiez, c'est d'aller de l'avant et de sauvegarder une image de cette maquette de conception que vous avez créée et photo shop et de la télécharger dans la zone de discussion ou de projets de ce cours. J' adorerais voir sur quoi vous travaillez. Ça m'intéresse toujours de voir ce que les élèves créent. Et si vous avez des questions ou voulez des commentaires sur votre design, je peux certainement vous le fournir, même si vous voulez juste prendre une photo ou, vous savez, vous savez, utiliser votre téléphone et prendre un instantané de ce que vous avez dessiné par main et téléchargez que ce serait génial parce que je veux juste voir ce que c'est que vous créez maintenant. Si vous avez des questions, vous pouvez toujours me contacter. Vous pouvez poser la question dans la zone de discussion, ou vous pouvez m'envoyer un message directement, et je reviendrai avec vous dès que possible. En général, je suis toujours disponible pour les étudiants, et je veux juste vous fournir toutes les informations que je peux. Si vous voulez en savoir plus sur moi, vous pouvez aller à www dot jeremy deegan dot com et savoir ce que c'est que je travaille et me contacter à travers ce site aussi. J' ai donc hâte de voir votre projet. Allez-y et téléchargez-le maintenant et je vous verrai dans quelques leçons à venir.