Introduction à la conception de sites web : conception conviviale pour les startups et les petites entreprises

1. Introduction: Salut les gars. Voici Meg Lewis de Fantomatique Fougères. Bienvenue dans ma classe Skillshare sur l'introduction à la conception de l'interface utilisateur. Je veux d'abord vous parler un peu ce que nous allons apprendre tout au long de ce cours. Je vais d'abord vous apprendre un peu sur les styles et les techniques d'interface utilisateur. Nous allons apprendre des choses comme la conception de différents boutons, cadrans, avatars , conteneurs, et ensuite nous allons mettre tout cela ensemble dans un site de défilement d'une page pour un faux démarrage. Lorsque nous l'avons assemblé, nous allons apprendre à concevoir une grille 960. Nous allons en apprendre davantage sur les en-têtes, la section du corps, les photos, puis nous allons apprendre à diviser le contenu que le client veut en différentes sections pour le site. Nous allons aussi en apprendre un peu sur les roulements et les interactions. Laissez-moi vous parler un peu de Party Starters et du projet sur lequel je vais vous donner pour travailler. Party Starters est une entreprise fictive que j'ai un de mes amis qui veut désespérément lancer cette entreprise, mais il est un grand démarreur de fête lui-même, et si j'espère qu'un jour, cela deviendra dans les travaux. Mais pour l'instant, je ne veux pas vraiment que vous conceviez pour une vraie startup parce que nous ne voulons pas que vos créations soient distribuées gratuitement. Vous êtes plus que bienvenu à concevoir pour votre propre entreprise, si vous êtes un fondateur d'une entreprise et si vous êtes un concepteur, alors vous êtes le bienvenu design pour une autre entreprise comme votre projet, ou si vous êtes simplement curieux, vous pouvez également la conception pour les débutants de fête. Ce sont des chats, désolé. Vous pouvez concevoir votre propre site Party Starters si vous le souhaitez et simplement le soumettre sur l'onglet Projets et me montrer ce que vous avez fait. Laissez-moi vous dire un peu pourquoi j'aime concevoir pour les startups. Tout d'abord, ils sont incroyablement passionnés et enthousiastes et énergiques sur le produit, et ils aiment généralement avoir une main sur le design, et ils aiment vraiment contribuer à ce qui se passe avec la conception et ils sont facilement disponibles par opposition à beaucoup d'entreprises qui sont, peut-être si vous concevez pour une boutique maman et pop, qui pendant la journée, ils dirigent le magasin. Ces startups pensent toujours à leur entreprise, elles sont sur l'horloge tout le temps, souvent elles travaillent les week-ends et les nuits. Donc, ils sont facilement disponibles pour vous, et ils sont toujours tellement excités par leur produit, que c'est vraiment amusant de travailler pour une startups et je ne pouvais pas le recommander plus. En outre, les startups peuvent être incroyablement lucratives pour vous. Selon votre modèle de tarification, je ne veux pas vraiment suggérer quoi que ce soit là-bas, mais beaucoup de fois en fonction de l'entreprise, vous pouvez facturer un peu plus parce que ce design peut être vu par beaucoup plus de gens ou alors certaines petites entreprises qui sont très serrées dans leur budget. startups en démarrage sont souvent très limitées sur leur budget, et je travaille souvent pour ces entreprises, donc je suis vraiment excité par le produit. Parfois, je leur offre un peu de remise de prix. Mais généralement, ils sont très sérieux au sujet du travail de conception et ils ont sûrement un peu d'argent parce qu'ils sont à la recherche d'investisseurs et ils veulent avoir une apparence présentable professionnelle. Donc, ce sont de nombreuses raisons pour lesquelles j'aime concevoir pour les startups, c'est beaucoup de plaisir. La conception de l'interface utilisateur en général est vraiment puissante. Essentiellement, c'est juste faire des formes. Comme vous l'apprendrez dans les tutoriels, vous faites juste beaucoup de carrés et de rectangles arrondis, mais vous assemblez des couleurs, des textes et de la photographie, et vous êtes capable de créer un design vraiment puissant. Plus précisément, j'aime créer un design convivial qui a beaucoup de couleurs et beaucoup d'énergie et de bien-être, propre, facile à digérer pour l'utilisateur et les gens réagissent vraiment bien à un design convivial. entreprises avec un design convivial sont très populaires en ce moment, comme vous le voyez avec des entreprises comme Skillshare, Airbnb, et Zocdoc, et même Warby Parker, vous obtenez ces conceptions modernes propres qui utilisent couleur d'une manière géniale et les gens y réagissent très bien. Je voulais juste vous faire savoir qu'après avoir fait ces tutoriels ensemble, vous devez concevoir votre propre site d'une page pour une startup. Vous pouvez aller au-delà si vous voulez et continuer avec d'autres pages, mais pour cette classe, je veux vraiment que vous fassiez une seule page. Soumettez-le à une date limite ou vous pouvez aller de l'avant et le soumettre avant cela. Je suis toujours disponible par e-mail à meg@ghostlyferns.com. Vous pouvez me poser des questions, me montrer vos dessins tôt si vous le souhaitez, et je suis heureux de vous donner vos commentaires ou de vous donner quelques conseils supplémentaires. Je sais aussi que les vidéos tutorielles sont de voir ce que je fais à certains moments parce que je ne suis pas un enregistreur de screencast de génie. Donc, si vous avez du mal à voir quelque chose ou si vous voulez que je clarifie, je suis heureux de le faire par e-mail. J' ai également tous les fichiers de ressources des vidéos prêts à télécharger ici. Allez-y et téléchargez-les pendant que vous regardez la vidéo et vous pouvez peut-être cliquer sur certains de mes styles de calque et voir ce que je faisais. D' accord, les gars. Si vous avez des questions, s'il vous plaît envoyez-moi un courriel à meg@ghostlyferns.com, et j'espère que vous apprécierez ce cours. Merci les gars. 2. Styles de boutons, avatars, conteneurs: Hé gang, voici Meg Lewis de Ghostly Ferns. Bienvenue dans la classe de partage de compétences sur l'introduction à la conception de l'interface utilisateur. Je veux commencer par dire, merci d'avoir pris ce cours, j'espère que vous apprendrez quelque chose de précieux. Tu n'éteins pas ta vidéo et oublies que c'est arrivé. Donc je veux donner aux disclaimers d'abord. C' est un cours pour quelqu'un qui a une compréhension de base de Photoshop. Si vous n'avez pas une compréhension de base de Photoshop et que vous avez Photoshop, je vais aller assez lentement à l'endroit où vous pouvez le saisir. Mais je vais aller assez vite pour que les gens qui savent déjà ce qu'ils font ne s'ennuient pas complètement. D' accord. Commençons. Ouvrez Photoshop, démarrez un nouveau fichier. Je vais lui donner une taille arbitraire de 1 000 pixels par 1 000 pixels. Toujours 72 DPI pour la conception pour le web. Nous allons faire un RVB aussi parce que nous concevons pour Internet. Alors donnons à cela un titre de PARTYSTARTERS dans tous les casquettes. Pourquoi pas ? Ouvre-le. Voici notre Canvas. Nous sommes en train de concevoir des éléments d'interface utilisateur pour ce tutoriel. Donc nous allons apprendre des choses comme les boutons, les styles, à gogo. On va faire des avatars et on va faire des conteneurs. Ça va être génial. Tu vas passer un bon moment. Commençons. La première chose est d'abord, concevons quelques boutons. On va passer sur huit styles de boutons en ce moment. Les quatre premiers vont être des boutons plus sombres sur un fond clair. On va le garder blanc pour l'arrière-plan. Les quatre autres vont être des boutons plus légers sur un fond plus sombre. Premier bouton, commençons par un rectangle arrondi. Je vais lui donner un rayon de cinq pixels. On va juste en faire une taille de 245 par 50. Quelque chose à savoir est que j'utilise CS6. Donc, je reçois cette petite notification de taille pratique à côté de ma souris. Alors on y va. Voici notre rectangle arrondi pour notre bouton. Je vais prendre ici. J' ai préchargé nos PARTYSTARTERS, nuanciers de couleur. Donc je vais goûter cette couleur rose vif. Ce qui ne dit pas de fête à part le rose chaud. Alors maintenant, c'est rose. Je vais d'abord double-cliquer sur ce calque. Il ouvre la colonne des cellules du calque. Maintenant, la première chose à propos de la conception de l'interface utilisateur est que vous allez certainement utiliser cette couleur tout le temps. Le style de calque est très important. Il donne à tout l'air qu'il a de la profondeur. Nous n'enseignons pas nécessairement le design plat aujourd'hui. Donc, nous allons garder tout arrondi. Nous allons utiliser beaucoup d'ombres portées, de dégradés, d'autres choses, d'une manière de bon goût, bien sûr. Commençons donc par une superposition de dégradé. Comme vous pouvez le voir, ça a l'air absolument horrible. Nous allons donc éditer ce dégradé ici. On va donner aux deux N la même couleur rose que celle qu'on avait avant. Maintenant, je veux que ce gradient ait une sorte de ligne dure au milieu. Donc nous allons rendre cette moitié supérieure du bouton plus claire rose, et cette moitié du bouton va rester la même couleur rose. Donc, pour lui donner cette ligne dure et je vais faire deux points juste au milieu. Vous pouvez voir que c'est au milieu parce que notre position est à 50 pour cent. Je vais juste faire de ces deux points de ce côté un rose plus clair que ce rose est. Ça a l'air génial. Je vais donc copier cette couleur et la coller ici aussi. Notre dégradé est fait et il a l'air super, parfait, tout est merveilleux. La prochaine chose à faire est un accident vasculaire cérébral. Donc on va garder la course à l'extérieur. Je vais en faire environ huit pixels. On va réduire cette opacité à 15 %. Super. Donc, pour le bouton, nous avons fini avec les styles de calque en ce moment. Comme vous pouvez le voir, tout ce qu'on vient de faire est juste ici. Donc, si j'ai besoin d'éditer quelque chose, je peux simplement cliquer sur le trait, modifier pour le contour et ainsi de suite. Mais je vais effondrer ça, juste rendre notre palette de calques un peu plus attrayante. La prochaine chose à faire est d'ajouter du texte. Donc je vais juste taper le texte du bouton et regarder, notre texte est blanc donc nous ne pouvons pas le voir. Je vais aller ici à la fenêtre des personnages et cliquer sur la couleur et je vais le rendre rose chaud juste pour que vous puissiez voir ce qui se passe. Voyons voir notre taille de police est de 18 points et nous avons un espacement des lettres de 100. C' est absolument parfait pour ce que je veux faire. Donc on va le faire glisser sur le dessus du bouton et regarder maintenant on ne peut pas le voir. Je vais donc rendre le texte blanc à nouveau. Parfait. Afin de rendre le texte un peu plus facile à lire, je vais ajouter juste un peu d'ombre portée. Encore une fois, j'ai cliqué sur un calque pour ouvrir les styles de calque. Je vais ajouter une ombre portée maintenant. Donc, nous allons garder cela à une distance d'un , puis propagation de zéro et une taille de zéro aussi. L' angle ici est vraiment important. J' utilise généralement un angle de 120 ou 90 degrés. Pour ce projet, je pense que je veux faire 90. Donc, nous allons nous assurer que la lumière globale est vérifiée et que cela va nous assurer que ces ombres portées sont toutes au même angle de 90 degrés et les ombres intérieures, tout ce que nous faisons à partir de maintenant sera toujours de 90 degrés. Alors baissons cette opacité à 30 pour cent. C' est génial. Donc maintenant, vous pouvez voir le texte est juste un peu plus facile à lire. Laisse-moi l'éteindre, à nouveau. Beaucoup de conception de l'interface utilisateur sont ces petits changements subtils que les utilisateurs ne peuvent pas nécessairement remarquer hors de la main, mais cela rend certainement leur vie un peu plus facile. D' accord. Mettons ce bouton numéro 1 dans un dossier, et passons à autre chose. Bouton numéro 2. Allons-y avec un peu plus d'un bouton dur. Donc, cela va aussi être un peu plus d'un bouton plat. Maintenant, faisons un autre 245 par 50. Faisons-en notre couleur rose préférée. En fait, je n'aime même pas le rose. Je ne sais pas pourquoi j'utilise ça. Donc, je fais un zoom avant juste un peu pour que je puisse obtenir un peu plus de détails orientés ici avec ce bouton. Je vais en faire un bouton Twitter. Donc, tout d'abord, nous allons ajouter une icône Twitter et du texte, juste pour vous montrer à quoi cela pourrait ressembler. Donc, tout d'abord, je vais faire une zone spéciale pour l'icône Twitter. Je vais mettre une forme carrée juste ici. Je maintiens juste la touche Maj enfoncée pendant que je fais glisser ma forme de 50 pixels par 50 pixels. Comme vous pouvez le voir, il se fond parce que c'est le même rose que la forme derrière elle. Donc nous allons rendre ce rose un peu plus sombre, juste un peu plus parfait. Alors maintenant, je vais faire un zoom arrière. Je vais ouvrir Photoshop. Je suis illustrateur, ignorez ça. Donc, j'ouvre illustrateur, j'avais cette forme pratique, forme Twitter, petit oiseau Twitter. Je vais le copier et ensuite je vais retourner à Photoshop, je vais le coller. Maintenant, nous avons quelques options ici. Je vais utiliser un calque de forme juste parce que je veux pouvoir changer la forme de l'oiseau et que je veux pouvoir le redimensionner sans perdre une partie du détail. Nous allons donc ajouter un calque de forme. Le voilà, il est rose. On va le rendre blanc et on va le mettre au sommet de cette zone. Allons zoomer pour que tout soit parfait. Faisons de lui environ 30 pixels. Parfait. Mettez-le juste là. Maintenant, nous allons ajouter un peu plus de texte de bouton. Donc, cette fois, c'est là que les boutons sociaux. Donc, je vais taper le texte du bouton social, toujours blanc, donc je vais le faire glisser ici. Je ne suis pas sûr que j'aime l'espacement sur ça. On dirait que les lettres sont trop éloignées, donc je vais revenir à zéro. C' est génial. Ensuite, nous allons juste le déplacer au centre visuel ici. Parfait. C'est donc un bouton plat, donc nous n'allons pas ajouter d'ombres portées, nous n'allons pas ajouter de dégradés. Ce style de bouton est un peu plus facile pour les développeurs à faire avec les boutons CSS. Donc nous allons garder cela comme un style de bouton plat et je vais étiqueter ce bouton 2. Maintenant, je passe toujours à travers et je nomme toutes ces couches, mais dans l'intérêt du temps, je ne vais pas le faire maintenant. Bouton numéro 3, c'est un style de bouton que j'utilise tout le temps. C' est certainement un bouton commun que vous voyez, j'en suis sûr. Donc, nous allons à nouveau 245 par 50 pour cela. On va le rendre rose à nouveau. Double-cliquez pour ouvrir nos styles de calque. Nous allons ajouter une superposition de dégradé à nouveau. Ça a l'air horrible. Alors remettons-les en rose. Pour celui-ci, je vais juste rendre le niveau de gradient inférieur juste un peu plus sombre. Parfait. Nous voulons un dégradé subtil. Plus le dégradé est dur, le bouton semble moins cher. Donc ce gradient est génial. Maintenant, nous allons ajouter un trait à l'intérieur pour garder la taille et la forme du bouton un peu plus concrète. Ça va être d'un pixel. Pour la couleur, je vais goûter ce rose foncé au bas du bouton. Alors je vais rendre cette attaque encore plus sombre. Nous voulons qu'il soit un peu défini, mais pas trop défini. C'est parfait. La dernière étape pour ce bouton est d'ajouter une légère ombre portée, et nous avons encore notre angle ici de 90. Pour cette ombre portée, je vais faire une distance d'un, propagation de zéro et taille de deux pixels. Allons abaisser cette opacité à 30 pour cent. Super. Ajoutons un peu plus de texte. Donc je vais prendre le texte du premier bouton et je vais le copier. Donc, je vais maintenir l'option enfoncée que je clique sur le texte du bouton et faites-le glisser jusqu'au dessus de notre nouveau bouton. Maintenant, nous pouvons toujours voir qu'il est ici, mais nous l'avons aussi à nouveau. Déplaçons le dessus de notre bouton. Parfait. Cette fois, je ne pense pas que je veux que tout soit en majuscules. Donc, je vais retaper le texte du bouton. C'est génial. Une autre chose est que c'est une édition subtile que la plupart des utilisateurs ne remarqueront pas, mais c'est certainement agréable et cela rend votre bouton un peu plus classique. Nous allons réouvrir nos styles de calque. Je vais ajouter une ombre intérieure cette fois. Ça commence par le haut et on va le rendre blanc. Découvrez comment notre mode de fusion est configuré pour se multiplier. Changons ça à la normale pour que nous puissions voir notre couleur blanche. Faisons une distance de deux pixels de zéro et la taille de zéro. C' est un peu trop dur, alors on va le réduire un peu. Allons-y peut-être 40 pour cent. Parfait. Super. Il y a un bouton de style numéro 3. Style de bouton numéro 4. Même taille, allons avec un rectangle arrondi et faisons ce rayon cette fois 50, 245 par 50 est notre nombre magique. Rendons-le rose à nouveau. Cette fois, nous allons faire le même gradient que le dernier. Ouvrons le bouton 3, et, voyez-vous où il est dit FX ici, sont vos styles de calque, donc vous allez maintenir l'option enfoncée, faites glisser les effets jusqu'à la nouvelle forme et laissez aller, et vous venez de copier tous les styles de calque du bouton précédent à ce bouton. Sauf que je veux quelque chose d'un peu différent, je veux prendre ce coup et je veux le modifier. Au lieu de faire un pixel, passons sur les huit pixels extérieurs, semblable à celui que nous avons fait ici. Parfait. Alors on va le garder à cette couleur rose foncé. Maintenant, je pensais que cette ombre intérieure semble un peu trop intense, alors nous allons prendre ça et nous allons faire juste une distance d'un pixel, et nous allons tonifier un peu l'opacité, allons-y avec 15% . Parfait. Maintenant, je pense que ce n'est pas tout à fait assez d'un contraste que je voulais, alors ouvrons le coup et rendons cela juste un peu plus sombre, voilà. Parfait. Prenons le texte du bouton de la dernière fois et copiez-le. Encore une fois, je vais maintenir l'option enfoncée et le déplacer vers le haut, puis je vais déplacer ce texte vers le bas au-dessus de ce nouveau bouton. Super, il y a le bouton numéro 4. Nommons ce dossier ici et passons à autre chose. Maintenant, nous allons faire quelques boutons lumineux sur un fond plus sombre. Quelle couleur devrions-nous choisir pour un fond plus sombre ? Je sais, faisons du rose chaud. Choisir une taille arbitraire pour la forme de ce fond, juste faire un rectangle ici, faisons le rose chaud, tout le monde est heureux, donnons-lui un peu plus d'espace ici pour nos boutons. Parfait. Mais numéro 1, du côté rose, nous allons faire le même type de bouton que nous venons de faire avec un rectangle arrondi de 50 pixels, 245 sur 50. Nous ne pouvons pas le voir parce que c'est la même couleur que le fond rose, donc cette fois nous allons juste le rendre blanc. Ajoutez des styles de calque, nous allons faire une autre conception de style de tri ici, et nous allons simplement faire une ombre portée plutôt que ce style d' ombre portée floue que nous sommes tellement habitués à voir, nous sommes va le faire comme une ombre portée solide. Donc, nous allons changer la distance à trois, étendre à zéro, et la taille à zéro, et maintenant vous voyez comment c'est une ombre très plate. Faisons tomber cette opacité multiplier vers le bas, très gentil, faisons 15 pour cent, non, allons-y 20. Impressionnant. Maintenant, ajoutons un peu plus de texte en plus de cela, je vais taper le texte du bouton, faisons ce texte rose, gardons pas en majuscules cette fois, nous allons taper comme ça. Parfait. Je ne veux pas l'espacement des lettres cette fois, donc je vais ramener ça à zéro. Faites glisser le dessus du bouton et nous sommes dorés. Parfait. Il y a le bouton numéro 5. Bouton numéro 6. Nous allons faire un autre bouton de style plat, cette fois nous allons faire du rectangle plutôt qu' un rectangle arrondi que nous avons fait, 245 par 50, voilà. Nous allons le garder blanc, et nous allons faire la même chose d'une ombre portée, cette fois, ce sera une distance de cinq pixels, zéro propagation, et un autre zéro pour la taille. Nous allons, encore une fois, faire tomber ça à, allons-y 30. Maintenant, nous allons prendre le texte du dernier bouton et le copier à nouveau, le déplacer vers le bas. Impressionnant. Cette fois, je veux vraiment que le texte soit un peu plus sombre, donc je vais prendre le texte et je vais goûter la couleur que nous voyons ici et rendre ce rose foncé. Bouton 6. Impressionnant. Bouton 7. Nous avons un outil rectangulaire arrondi, et nous allons encore faire un rayon de cinq, nous allons revenir à cinq, 245 par 50. Ce style de bouton va être très similaire à celui que vous voyez ici, il va juste être une version plus légère. Nous allons prendre cela, ajouter des styles de calque comme un dégradé. La partie supérieure est blanche, la partie inférieure nous allons échantillonner du blanc, et ensuite nous allons la changer pour juste un peu de gris plus foncé, ce sera très subtil. Parfait. Peut-être un peu plus, génial. Maintenant, nous allons ajouter un trait, alors allons à nouveau frapper à l'intérieur, un pixel, et nous allons juste choisir un gris plus foncé, peut-être un peu plus sombre, allons-y sept. Parfait. Ensuite, ajouter une ombre portée en bas, nous allons faire la même ombre portée que nous avons fait sur l'autre bouton, celui-ci juste ici, nous allons faire une distance d'un, taille de deux, et nous allons les faire descendre à, allons-y 40 pour cent. Voyons ce que nous avons ici. Je pense toujours que le coup est un peu trop sombre, alors on va l'abaisser d'un cran, peut-être. Un peu plus. Parfait. Rendons l'ombre portée juste un peu plus sombre aussi. Changons ça à la normale. Super. L'étape suivante consiste à ajouter le texte du bouton en arrière. Dans l'intérêt du temps, je vais copier ce texte de bouton, le déplacer vers le bas. Cette fois, je vais en faire un gris foncé. On a ici ce gris très foncé de nos échantillons, on va l'utiliser et on y va. Last but not least, est un état de bouton. Pour ce bouton, à quoi il ressemblerait lorsque vous cliquez dessus. Mettons ceci dans un dossier, bouton 7, et copions ce dossier. Donc je vais faire glisser le dossier ici, copier, puis nous avons notre bouton 7 copie. Changons-le au bouton 8. Faites glisser le bouton 8 vers le bas. Pour donner l'impression qu'il est poussé, nous allons faire quelque chose dans les styles de calque, nous allons ajouter une ombre interne. En fait, d'abord, prenons notre superposition de gradient et nous allons juste l'inverser. Au lieu de passer de la lumière à l'obscurité, nous allons aller de l'obscurité à la lumière, et ensuite nous allons ajouter une ombre intérieure. Nous le gardons ici à 90 degrés, et faisons une distance de 4, taille de 3. Parfait. Allons faire tomber ça à 20. Super. Maintenant, notre coup est un peu fou parce que vous pouvez voir ce bord blanc ici. Éditons le trait et nous le rendrons plus sombre. Pas si sombre. Peut-être qu'on en ira neuf. Super. Ok, une autre petite chose que nous pouvons faire, c'est nous pouvons nous débarrasser de cette ombre portée qu'on avait avant et qu'on le change pour autre chose. Changons cela en blanc, et supprimons simplement cette taille de deux pixels et changeons-la en un. Ensuite, nous allons faire tomber ça substantiellement. On y va, donc on a ajouté juste un peu de blanc ici. Parfait. D'accord, on en a fini avec les boutons. Mettons-les dans le dossier des boutons, et appelons-le un jour sur les boutons. Bon, déplacons nos boutons ici. Passons maintenant aux styles d'avatar. On va en faire deux, on va faire un avatar circulaire et un avatar carré. Commençons par un avatar carré. Nous allons commencer par placer un avatar sur notre tableau d'art ici. Attrape notre ami Anthony. Anthony est un peu gros ici, alors faisons-le, sans offenser Anthony, un peu plus petit. Allons 140 pixels carrés. Parfait. Maintenant, nous allons juste prendre ce calque, nous allons ajouter des styles de calque au-dessus de celui-ci. Commençons par un accident vasculaire cérébral. Nous irons à l'intérieur parce que si vous ajoutez de plus grands traits à l'extérieur, voyez comment le bord est un peu arrondi. Si vous optez pour des bords arrondis, c'est peut-être une bonne idée, mais nous ne le sommes pas. Mettons-le à l'intérieur et ça va garder la forme à 140 pixels de large plutôt que 140 plus huit. Faisons le blanc. Maintenant, vous ne pouvez pas le voir, donc nous allons ajouter une légère ombre portée en bas. Voir cette ombre portée vraiment intense semble assez fromagée et assez bon marché, donc nous allons la rendre un peu plus subtile. Nous allons ajouter une distance d'un pixel, une taille de deux et nous allons réduire cette distance à 30. Regarde ça, c'est beau et subtil. La bonne chose à propos de ce genre est qu'il semble encore mieux lorsque vous ajoutez une couleur gris clair derrière elle. Regarde ça. Magnifique. Voici notre avatar Anthony numéro 1. Maintenant, nous allons dans quelques avatars arrondis. C' est là que ça devient un peu délicat parce que je fais les choses un peu différemment de beaucoup d'autres personnes. Beaucoup de gens aiment utiliser des masques, j'aime parfois les masques et j'aime les masques pas parfois. Donc, je vais le faire à ma façon et s'il vous plaît juste savoir que tout ce que je fais dans Photoshop, si vous connaissez une meilleure façon de le faire et que c'est la façon dont vous aimez le faire, s'il vous plaît ignorez-moi et faites-le à votre façon. Ma façon n'est pas juste, surtout quand il s'agit de masques. On va recommencer 140 par 140. Je fais juste un cercle. Ici, c'est. Juste pour qu'on puisse le voir, je vais le rendre aussi absurde. Ce n'est pas criard. C'est sympa. Couleur sarcelle. Alors on va reprendre Anthony. On y va. Placons Anthony et on va le positionner au-dessus du cercle quelque part. Je ne vais pas le rendre parfait parce que je vais vite ici. Maintenant, nous avons ces deux couches. Nous avons notre forme ici, une forme de cercle, et ensuite nous avons Anthony. Je vais aller droit entre eux et maintenez la touche « Alt » ou « Option » enfoncée et cliquez sur. Ça vient de couper Anthony sur le dessus. Je sais que beaucoup d'entre vous disent : « Pourquoi ne faites-vous pas un masque sur le cercle et l'appliquer à Anthony ? » Je réponds à cela, je ne sais pas. C' est comme ça que je le fais. Je vais prendre le cercle, je vais y ajouter un style de calque. Si vous faites le masquage, vous pouvez simplement ajouter les styles de calque à Anthony à la place. Je vais ajouter un coup à l'extérieur cette fois, non, allons à l'intérieur. On va faire huit à l'intérieur pour le garder à 140 par 140. Même chose, on va le rendre blanc et ensuite on va ajouter cette fois une lueur extérieure. Pas jaune, changeons-le en noir et changons-le à la normale. Regarde ça, c'est horrible. Ça a l'air horrible. Donc, on va l'abaisser un peu à environ 10 pour cent. Parfait. Ok, il y a Anthony comme un cercle. Avatar 2. Avatar 3, on va faire la même chose. En fait, on va copier ça. Afin de le copier, je l'ai sélectionné. Je vais cliquer autour d'Anthony. Ne cliquez pas maintenant, maintenez la touche Option enfoncée, faites-le glisser dessus. Parfait. Maintenant, Anthony prend 2. Appelons cet avatar 3. Ouvrons ce dossier, revenons ici et pour changer les styles de calque. Avant d'utiliser une lueur extérieure, décochons ça. Cette fois, ajoutons une ombre portée. Ajoutons, plutôt que d'être une ombre portée comme cet avatar, nous allons le rendre vraiment solide. Donc, nous allons réduire la taille à zéro. Parfait. Donc maintenant, nous avons cette ligne dure ici et faisons ce rose chaud. Des moments amusants. Avatars, bam, on l'a fait. Prenons ces deux avatars et mettons-les ici pour l'instant. Parfait. Fais plus de place ici pour nous. La prochaine chose que nous allons apprendre est un style de conteneur. Commençons par un rectangle arrondi. On y va, rayon de cinq, c'est bon. Faisons ici comme 250 par 280. Désolé, c'est ennuyeux. Derrière ça, je vais lui donner un fond de cette couleur gris clair que nous avons en ce moment. Remets-le ici. Rien de parfait en ce moment. Maintenant, nous avons notre rectangle de fond six ici, puis rectangle arrondi, est également gris. Alors faisons ce blanc juste pour qu'on puisse le voir un peu mieux. Parfait. Donc, faisons en sorte qu'il ait les mêmes styles de calque que celui-ci l'a fait. Pas d'AVC. Donc nous allons juste ajouter cette ombre portée à cela. Double-cliquez, accédez à Ombre portée. Change ça à la distance d'un, taille de deux, et puis on va faire tomber ça à, allons-y 30. Parfait. Prochaine étape. Ajoutons une image à cela. Utilisons un autre visage. Comment est ce son ? On a de bons avatars dans notre dossier. Allons avec notre ami David ici. Il est là, il a l'air heureux. Il va être si heureux. Il est dans ce tutoriel. Maintenant, nous allons juste le remettre comme nous l'avons fait avant. Allez entre les deux, maintenez la touche Alt ou Option enfoncée et donnez-lui un clic. David s'est appliqué ici. Tu peux le déplacer de haut en bas, le mettre où on veut, ici pour l'instant. Dans l'intérêt du temps, je vais juste regarder ça et dire qu'il a l'air assez juste ici. Maintenant, ajoutons du texte en plus de cela. Disons que c'est quelque chose comme une carte de membre ou une carte d'espace, si vous avez des espaces. Vous pouvez mettre ici une image d'un appartement que vous aimez ou pour Pinterest, quelque chose d'un peu d'inspiration, une pochette d'album, quelle que soit votre startup, cela pourrait fonctionner pour n'importe quoi vraiment. Donc nous allons ajouter du texte ici, et nous allons mettre Bingo Tuesday Nights. Je ne sais même pas pourquoi j'ai décidé de le faire. Probablement une horrible idée. On peut à peine le lire. Alors changeons la couleur du texte à notre rose préféré, et rendons un peu plus petit. Allons-y avec 13 points. Parfait. Maintenant, nous allons ajouter quelques avatars ici, des avatars circulaires. Peut-être que ce sont les gens qui vont au Bingo le mardi soir, peut-être que ce sont des gens qui aiment Bingo le mardi soir, qui sait ? Alors faisons quelques petits cercles. Allons-y 25. Oui, faisons-le 25. Zoom avant pour voir un peu mieux ici. Alors ajoutons quelques visages. Placons notre ami Daniel ici. Oh, il est si grand. Encore une fois, nous allons le faire à ma façon et nous allons juste les poser rapidement sur le dessus. Cliquez entre les deux. Il est là. Il est un peu recadré, alors je vais juste le rendre un peu plus petit et le mettre sur le dessus. Parfait. Donc voilà Daniel. Mettons-le dans son dossier Daniel. Super. Copions-le, perd plus de cinq pixels, 1, 2, 3, 4, 5. Voici Daniel. On va rajouter Anthony ici. Alors renommez ça, trouvons Daniel et débarrassez-vous de Daniel, et placons Anthony ici à la place parce que mardi soir Bingo a deux fans, et ils sont Daniel et Anthony. Parfait. C'est génial. Donc, nous allons ajouter une zone ici en bas pour mettre quelques mots clés, tags ou peut-être un peu de coeur pour que vous puissiez aussi aimer Bingo le mardi soir. Alors ajoutons d'abord une petite règle de séparation ici avec l'outil de ligne. Nous allons faire ce pixel que vous pouvez voir ici, nous allons juste faire glisser ça à travers. Parfait. Maintenant, il est blanc, donc vous ne pouvez pas vraiment le voir. Non, ce n'est pas le cas. C' est gris. Ce n'est pas assez gris, il y a un peu de lumière. Donc je vais goûter cette couleur grise du côté ici. Parfait. Voilà notre règle. Je vais laisser ça respirer un peu, donc je vais déplacer Bingo le mardi soir jusqu'à cinq pixels, et les avatars jusqu'à deux pixels, allons-y trois pixels. Parfait. Alors commençons par ajouter un peu de coeur. Je vais donc ouvrir Illustrator, saisir le cœur que j'ai prêt ici, et je vais le coller en tant que calque Shape afin de pouvoir redimensionner et changer la couleur. Changons la couleur en rose pour que nous puissions voir un peu mieux et la rendre un peu plus petite. Allons 12 pixels. Parfait. Ça pourrait être un peu trop petit. Alors je vais zoomer et voir ce que je pense. Non, je pense que c'est une grande taille. Et toi ? Je ne t'entends pas. Donc je suppose que vous dites, « Oui, c'est une bonne taille. » Alors ajoutons quelques balises en bas maintenant. Pour obtenir ce style de texte à partir du formulaire, je vais copier ces lettres et cliquer et coller. Changeons nos tags pour hommes célibataires, bingo et fun. Apparemment, le bingo de mardi soir est une soirée célibataire. Disons que notre couleur de lien est rose. Donc, faisons ces virgules pas roses parce qu'elles ne sont pas des liens. Faites-les une couleur grise à la place. De cette façon, si je clique sur Hommes célibataires, je peux être emmené à tous les événements des hommes célibataires. Peut-être, le fer est d'attirer les dames à cette nuit des hommes célibataires. Je ne sais pas. Vous les gars, nous avons complètement fini avec tous les styles d'interface utilisateur. Espérons que ce n'était pas trop atroce. Le prochain tutoriel, je vais vous montrer comment prendre tous ces éléments et les mettre ensemble dans une page d'accueil réelle de l'interface utilisateur, et ça va être épique. 3. Créer un document sur une seule page pour une start-up: Salut les gars. Bienvenue dans le Tutoriel Numéro 2. Dans ce tutoriel, nous allons prendre tout ce que nous avons appris dans le premier tutoriel et l'appliquer à un site, et nous allons probablement apprendre de nouvelles choses en cours de route. Pour ce site, nous allons concevoir un site Squirrly d'une page pour une fausse startup. La startup est appelée partie démarreurs. Ce que fait la fête, c'est si vous avez une fête boiteuse et pathétique que vous lancez, personne ne passe un bon moment, ou que personne ne danse, vous pouvez commander une entrée pour aller à votre fête dès que possible et commencez. J' aime commencer par un document Photoshop qui a une grille 960. J' ai mis le lien 960.js dans votre section de ressources sur la page Skillshare, sorte que vous pouvez y aller et vous pouvez télécharger la grille pour vous-même, ou vous pouvez créer une grille vous-même. C' est une grille standard de 12 colonnes, que j'aime toujours utiliser. Habituellement, je suis super organisé et je fais beaucoup d'attention aux pixels, mais pour l'amour du temps, je ne vais pas faire ça. Je vais essayer d'être très organisé tout en étant rapide, alors nous verrons comment ça se passe. J' aime généralement commencer avec trois dossiers : en-tête, corps et pied de page. Je vais diviser le site en trois sections, puisque c'est un site Squirrly basé sur une section. Pour l'en-tête, nous allons commencer par une petite barre d'en-tête ici. Il va faire environ 70 pixels de haut, 70 et nous allons la rendre juste un peu plus large que les toiles réelles ici, parce que nous allons ajouter une ombre portée en bas, et nous ne voulons pas vraiment qu'elle apparaisse sur les côtés. Pour cela, nous allons ajouter une ombre portée, comme je l'ai déjà dit, distance d'un, taille de deux, et ensuite nous allons faire un petit passage ici de 30%. Ça a l'air génial. De quoi avons-nous besoin ensuite ? Je pense qu'on a besoin d'un logo. Ici, j'ai un petit fichier de ressources prêt à aller. Il a certains des styles de boutons dont nous avons besoin, avatars, et a également notre logo de départ de fête. Maintenant, ce logo que j'ai fait le ballon est séparé du texte réel comme vous pouvez le voir, et je l'ai fait juste pour que nous puissions changer la couleur du ballon et le texte si nous voulons indépendant de l'autre partie. Mais pour l'instant, je vais juste le garder comme rose et gris foncé, et ensuite je vais le faire glisser dans notre nouveau document ici. Il a l'air un peu grand, donc je vais faire environ 180 pixels de large. On y va. Allez. Là. Alors cette ligne juste ici est la ligne centrale, donc je vais l'aligner ici au milieu de la page. Cachons nos guides une seconde et jetons un coup d'oeil à ça. Je pense que c'est parfait. La prochaine chose que je veux faire est d'ajouter un petit lien ici dans le coin qui dit : « Je veux être un débutant de fête pour les gens qui veulent aussi se joindre et devenir eux-mêmes débutants. » Je vais juste en haut de ma tête, dire que nous voulons que ce soit 11 points. Tous les casquettes, « Je veux être un débutant. Montrons nos guides, et mettons ceci ici, et ancrons-le sur ce guide ici. C'est parfait. Super. Mais ça a l'air un peu trop grand. Je veux que ce soit assez subtil, donc je vais le faire tomber un autre point ici, à 10. Je pense que ça a l'air bien. Ça a l'air discret. L'en-tête est en fait fait fait qui était un morceau de gâteau. Nous allons prendre ces calques et les mettre dans le dossier d'en-tête. Maintenant, on va ouvrir le corps et travailler sur la Section 1. Montrons nos guides. Maintenant, la section va être une photo d' une grande largeur de navigateur avec un texte important sur ce que les démarreurs de fête est, juste quelques lignes, puis un gros bouton d'appel à l'action ici. Maintenant, je veux vraiment que tout cela soit au-dessus du pli, ce que je vais dire est au moins, disons 715 pixels en bas de la ligne ici. Je veux le garder bien au-dessus de ça. Peut-être que nous allons d'abord brancher notre image, et ensuite voir ce qui se passe. Je vais placer notre grande photo, qui n'a pas l'air si grande en ce moment, mais je vais la faire grande. Je vais étirer ça, et voir à quel point c'est gros. Il est évident qu'il s'en va a passé cette ligne que je ne veux pas vraiment. Je veux qu'il s'occupe de cette section. Je vais donc centrer un peu ça ici. Déplaçons ça vers le haut. Ça a l'air génial. Ensuite, je vais faire une petite sélection rectangulaire. Cachons ce gâteau parce que nous ne voulons pas que les gens pensent que les entrées de fête arrivent toujours avec un gâteau. On ne veut pas ça. Ce serait horrible. Je vais juste masquer ça dehors de là. Parfait. Voici notre grande image bien au-dessus du pli, juste comme je l'aime. Cachons nos guides et ajoutons du texte. Ici, dans cet autre document, j'aime garder cela à portée de main et avoir ceci prêt à l'emploi, donc je peux le référencer comme je suis en train de concevoir. Nous avons notre texte de titre mémorisé ici. Il est prêt à partir, donc on peut s'en prendre à chaque fois qu'on a besoin de quelque chose de spécifique. Je vais prendre un cap H2, et le faire glisser dessus. C' est à propos de l'endroit où je veux mon texte, donc je vais juste taper un peu sur les démarreurs de la fête. Il va dire, ne faisons pas ces bouchons, voilà, « Est-ce que votre événement ne se déroule pas comme prévu ? Personne ne danse, les invités ne s'amusent pas. » Donc, ce texte ne semble pas très visible sur le dessus de la photo, et cette photo va être dimensionnée dynamiquement à mesure qu' un utilisateur ouvre sa fenêtre et la rend plus petite. Nous voulons qu'il ait quelque chose derrière lui pour combler ce fossé. Je vais ajouter un peu de blanc derrière le texte. On y va. Je vais le globe oculaire en ce moment. Peut-être comme ça. Bien sûr. Copions ceci vers le bas et faites-le glisser. Avec les matchs de deuxième ligne, puis tirez ça ici. Effectuons un zoom arrière pour voir à quoi ça ressemble. Je vais tirer ça un peu là-haut. C'est génial. Maintenant, nous allons ajouter une ligne de texte supplémentaire qui dit simplement, en majuscules, « Nous commençons la fête. » Parfait. Allons avec notre couleur rose préférée. Goûtez ce rose ici. Mettons le texte sur le dessus, et faisons en fait ce texte blanc. Super. Je pense que ça a l'air sacrément bien. La dernière chose, c' est d' ajouter notre bouton d'appel à l'action géant. Donc pour le bouton, je vais zoomer ici. Je vais échantillonner une partie de ce texte H2, et le coller, juste pour que je puisse obtenir le texte ici. Donc, le bouton va dire, « J'ai besoin d'une entrée de fête maintenant. » Point d'exclamation. Ça a l'air un peu grand, ça va rendre le bouton juste un onglet plus grand que je veux, donc je vais faire tomber ça à 16 points. Ouais, c'est génial. Ajoutons l'arrière-plan du bouton. Nous allons faire ce bouton super arrondi que nous avons appris plus tôt, celui qui avait un rayon de 50 pixels. Faisons 335 par 50. Super. Ajustez ceci ici en conséquence. Donc pour celui-ci, nous allons faire un dégradé, et cette fois nous allons faire du sarcelle, parce que je pense que la couleur rose est un peu trop utilisée. Faisons ce dégradé, échantillonnons ici pour notre jeu de couleurs de départ de fête. Laisse-moi mettre cette couleur bleu sarcelle, et rendons cette partie inférieure un peu plus foncée. Parfait. Notre prochaine étape consiste à ajouter ce tracé à l'extérieur de huit pixels, puis à cogner l'opacité vers le bas. Allons à 10 pour cent. Ouais, j'aime ça. Faisons maintenant ce texte blanc, un peu plus perceptible. Pour le rendre encore plus visible, ajoutons une ombre portée sous le texte. L' ombre portée va juste être une distance d'un, propagation de zéro, et taille de zéro. Ensuite, on va faire tomber l'opacité jusqu'à ce que c'est cool, 35 rad. Alors déplacons ce bouton pour qu'il s'adapte à nos guides. Voici notre bouton, déplacez ça, nous voulons que tout s'adapte sur notre grille. Assurez-vous également que ce texte va bien, alors sélectionnons tout notre texte, et conservez-le dans Vérifier ici. Parfait. D'accord. La dernière partie de la section 1 est, nous voulons clairement montrer s'il y a un démarreur de parti prêt à aller droit vous, et qui est ce démarreur de parti. Dessinons quelques guides ici sous la photo. Faisons 70 pixels de haut. Allons-y 75, et on ne veut pas de rose, désolé, on veut du blanc. Faites glisser un autre guide vers le bas ici. Donc, il y a où se trouve cette prochaine section. La première chose que je veux ajouter ici est un avatar circulaire. Là où je vais prendre un cercle, faisons environ 35 pixels. Faisons notre couleur pour que nous puissions voir ça. On va le faire passer à ce guide ici, et maintenant on va juste placer la photo d'Anthony sur ce cercle. Rends-le très petit. C' est génial. [inaudible] sur le dessus du cercle. Maintenant, je vais faire la technique de masquage. Je vais maintenir « Commande » enfoncée, cliquer sur « Cercle », puis passer à Anthony et cliquer ici sur ce « Bouton de masquage ». Parfait. Maintenant, nous pouvons effacer le cercle. Maintenant, je veux attraper une partie du H2 à nouveau. Prenons H2, traînez-le dessus, et nous allons dire, « Anthony est là. » Ensuite, nous voulons vous montrer qu'Anthony est près de vous, et aussi que nous savons où vous êtes. Parce que nous pouvons nous baser sur l'appareil que vous regardez ou sur l'ordinateur que vous utilisez. Eh bien, les services de localisation où vous êtes en ce moment. Nous voulons que vous sachiez qu'il y a une fête qui a commencé près de vous, en particulier. Pour ce faire, je vais faire une petite broche de carte que j'ai eue, et j'en ai une ouverte dans Illustrator ici, je vais juste copier ceci et la coller dans Photoshop. blanc, donc on ne peut pas le voir. Donc je vais le changer en rose. C' est un peu gros, il est en concurrence avec la photo d'Anthony. On ne veut pas que ça ait l'air plus important qu'Anthony, alors faisons-le petit. Parfait. Ensuite, zoomez parce que je vais faire un peu d'effet ici, je vais vous apprendre à faire un effet réfléchissant. Je l'ai copié l'un sur l'autre, celui en bas, la nouvelle forme que je viens de créer, je vais le refléter ici. Je suis désolé, c'est retourné. On va le retourner verticalement. Ensuite, je vais prendre l'opacité, et je vais la ramener à 20. Je vais faire un masque de couche dessus. Faites sélectionner le masque de calque, allez ici et prenez notre ingrédient par défaut, et tracez simplement une ligne juste ici. N' importe où, c'est bien, mais c'est là que je le recommande. On y va, c'est beau et subtil. Je vais mettre ça dans un dossier intitulé « Pin ». Juste. Donc Anthony est là, et nous allons copier un peu plus de texte ici parce que nous voulons que ça indique le nom de votre emplacement. Hatton, New York. Charmant. Alors basons ça juste un peu mieux, pas dans l'espacement. La section 1 est complète, alors prenons tout ce que nous venons de faire à partir de la Section 1 et mettez-le dans le dossier Section 1. Passons maintenant à la section 2. Voici notre guide pour savoir où se termine la Section 1, alors commençons un nouveau contexte. Je vais juste le regarder et dire que cette taille a l'air bien pour l'instant, et je vais le faire sarcelle. Maintenant, cette section sera juste pour un peu plus d' informations sur ce que sont les débutants et ce qu'ils font. Je remarque maintenant qu'ici, j'ai un peu de mon image qui reste d'avant, parce que je l'ai scooté. Je vais m'assurer de me débarrasser de mon image. Revenons dans la Section 1, je vais sélectionner, montrer mes guides à nouveau. Tu le vois ? C'est juste là. Juste un peu. Je vais prendre un rectangle, puis aller dans mon masque de couche ici, je vais peindre dans réinitialiser leur parfait. Réduisons cette section, revenons à la Section 2. Nous avons un fond sarcelle, et maintenant je veux ajouter une section ici. Mon parti est horrible, et ensuite, ici, il y aura une autre section qui dit un peu plus sur les débutants. Pour la première section, montrez nos guides, nous allons dessiner une forme, juste un rectangle, un rectangle blanc, et avoir un peu d'ombre portée. Dessinons un rectangle, et je vais regarder la hauteur parce que je sais c'est la largeur que je veux parce que je le garde dans les guides. Mais pour la hauteur, je suis juste en train de le regarder. Donc il y a notre rectangle blanc, cachons le guide, jetons un coup d'oeil. Ajoutons un peu d'ombre portée subtile. [ inaudible] un, taille de deux, mettons un zéro, puis baissons ça à 30. Parfait. Nous voulons un texte un peu plus grand, donc je vais prendre ce titre, ce titre plus grand, et je vais monter dans le coin et je vais faire descendre 40 pixels du haut, un, deux, trois, quatre. 40 pixels de ce côté, un, deux, trois, quatre. Ensuite, je vais faire un guide ici parce que je vais mettre du corps de texte ici, je veux m'assurer que je l'ai au bon endroit. Voici le corps du texte, ce texte de remplissage Lorem Ipsum. Je vais le faire glisser vers ces guides. Parfait. Je vais cacher les guides, et je vais changer ça en « Aidez ma fête à sauter. » J' aime ce que ça a l'air. C' est, donnez droit à ceci, case 1. Mettez-les dans ce dossier, puis nous allons montrer les guides, le copier en maintenant enfoncés les « Option » et « Shift », en le faisant glisser. Maintenant, je me rends compte que mon corps n'est pas là, donc je vais recommencer. Assurez-vous que ma copie corporelle est dans le dossier Box 1. Je vais maintenir « Option », « Shift » enfoncée pendant que je fais glisser. Déplace-le méticuleusement là. Parfait. Cachez les guides et changeons le haut de ceci en « Qu'est-ce qu'un démarreur de fête ? » Voici nos deux sections. Je n'ai pas perdu de temps en faisant de la copie parce que ce n'est pas une vraie startup, mais dans un cas où c'était une vraie startup, je passais des heures à cultiver la copie parfaite pour cela. Pour l'instant, nous allons utiliser du texte de remplissage. Cette section est un peu ennuyeuse graphiquement, donc je veux ajouter juste une icône au centre ici pour ajouter un peu de poids visuel au milieu. Ce que je vais faire, c'est faire un cercle, disons 55 pixels, je vais m'assurer qu'il est au centre ici, et je vais le faire sarcelle. Étudiez ça. Donc nous avons ce cercle sarcelle au-dessus de nos deux boîtes. Ce que je vais faire, c'est ajouter le ballon du logo dans le cercle. Donc je vais monter à l'en-tête dans le logo, prendre le ballon et le copier. J' ai deux ballons, je vais déplacer le nouveau ballon dans la section du corps, Section 2. Réduisez les dossiers d'en-tête, alors maintenant amenons notre nouvelle bulle vers le bas. Mets-le au centre ici. Le rose sur la sarcelle a l'air un peu trop, donc je vais faire ce gris foncé. Impressionnant. Ensuite, c'est de rétrécir un peu, faisons 410. Faisons un peu plus. La section 2 est complète. Mettons tout dans la Section 2 et passons à la Section 3. section 3 est la plus compliquée parce que nous voulons montrer qui sont les débutants du parti. Cette section sera intitulée «  Rencontrez les débutants de la fête ». Nous allons montrer, en tant que carrousel, un tas d'entrées de fête qui sont près de vous, en particulier. Nous ne voulons pas forcément montrer toutes les entrées de fête, parce que si vous êtes situé à Chicago, vous ne voulez pas vraiment voir les entrées de fête à Austin. Nous allons donner le titre de cette section, Rencontrez les démarreurs de la fête, ce que je ferai en prenant notre titre 1, tapant, Rencontrez les démarreurs de la fête. Je vais montrer mes guides et déplacer cela vers ce guide juste ici. Je vais m'assurer que c'est 70 ; 1, 2, 3, 4, 5, 6, 7 pixels du haut de la section. Je vais me débarrasser de ce guide que j'ai créé plus tôt. Parfait. Maintenant, nous voulons montrer que ceux-ci sont à proximité de vous. On va prendre cette épingle à Manhattan, New York, et on va la ramener à ça. C' était dans la Section 1, Pin Manhattan, New York. Je vais copier ça et le ramener dans la section 3 ici, effondré la section 1. Parfait. On a encore ça, et je veux qu'on le dise cette fois, près de Manhattan, New York. Tous les gars qui vont se montrer, et les filles, vont être près de toi. Dans ce cas, vous êtes à Manhattan, parce que c'est là que je suis. Parfait. L'étape suivante est de montrer les débutants de notre fête. Nous voulons montrer leur photo, leur nom, où ils se trouvent, et combien de fêtes ils ont commencé. Par ici, j'ai préparé Anthony. Il est prêt à partir. Il est parfaitement dimensionné pour la grille. Je vais juste l'attraper et je vais le traîner dans ce document ici, et ensuite je vais l'aligner vraiment gentil. Pixel parfait, juste ici. Alors, pour l'amour du temps, je vais juste prendre celui-ci et je vais le copier. Si je faisais ça pour de vrai, je le ferais de cette façon. J' ai d'abord copié Anthony quatre fois pour être parfait dans la grille, puis je renommerais les dossiers et changerais toutes les informations pour quatre personnes distinctes. Je n'aime pas répéter le contenu pour les mocks parce que j'aime qu'il soit aussi proche que possible de la vraie chose. Je n'aime généralement pas utiliser lorem ipsum ou répéter des images. Mais pour l'intérêt du temps, on doit le faire de cette façon parce que je ne veux pas vous ennuyer. Donc, nous avons nos quatre entrées de fête alignées parfaitement dans la grille, air bien. Tout est génial. Maintenant, nous devons ajouter quelques flèches de chaque côté pour le carrousel. J' avais une flèche dans mon fichier Illustrator ici. Je vais le copier, le coller comme un calque de forme, et je vais le rendre gris foncé parce qu'il est blanc en ce moment. On ne peut pas le voir. C'est là. C' est assez grand. Je vais le rendre un peu plus petit parce que nous sortons de la grille sur celui-ci. On va sortir de la grille, les gars. Nous ne voulons pas que ça aille trop loin en dehors de la grille. C'est parfait. Impressionnant. Je vais le copier et le retourner pour l'autre côté, et le déplacer dessus. Parfait. Reprenons du recul et jetons un coup d'oeil. Joli. Donc nous avons Anthony ici, il a commencé 41 fêtes. Dans le fichier source que je vais vous donner, aura quatre personnes différentes dessus, donc ne vous inquiétez pas pour ça. La prochaine chose que nous devons faire est de montrer à quoi ça ressemble quand vous roulez sur l'un de ceux-ci. Je pense que ce serait vraiment génial si vous pouviez savoir quand quelqu'un est disponible en ce moment parce que ce ne sont que des entrées de fête qui sont disponibles près de chez vous. Ils ne sont pas nécessairement disponibles en ce moment. Peut-être qu'ils sont déjà à une fête et qu'un seul d'entre eux est disponible en ce moment. Donc, nous voulons montrer qu'Anthony est disponible dès maintenant et, quand vous roulez, vous pouvez cliquer et lui demander de commencer votre fête ; commencez. Pour le renversement d'Anthony, nous allons prendre son image ici. Nous allons double-cliquer, faire apparaître le style de calque et faire une superposition de couleur. Nous allons sélectionner notre couleur rose préférée ici et réduire cette opacité à 75 pour cent. Très gentil. Je vais copier ce texte parce que je veux utiliser le même style de texte. Je vais le coller et taper, Sauver ma fête. Amenez-le sur le dessus, puis juste derrière lui, je vais ajouter un arrière-plan. C' est trop arrondi. Allons au rayon de cinq pixels. Parfait. Je veux que ce soit rose, et ensuite je vais rendre mon texte pas gris. Faisons le blanc. Revenez ici et jetez un coup d'oeil. J' aime ça. Qu'est-ce que tu en penses ? Je ne t'entends pas. J'espère que tu me réponds. D' accord. Nous voulons également montrer à nos développeurs qu'il s'agit en fait d'un survol, parce que lorsque vous obtenez ce PSD emballé pour envoyer quelqu'un au code, ils vont être un peu confus si vous n'indiquez pas qu'il s'agit d'un survol, car ils vont je me demande pourquoi c'est comme ça. Pour ce faire, j'aime juste placer une main de curseur sur le dessus. Ici, il est, juste pour montrer qu'il s'agit en fait d'un roulement. La dernière chose que je veux faire ici est d'ajouter quelque chose derrière le conteneur qui dit juste, « Hey, Anthony est disponible maintenant. » Nous allons prendre 41 démarreur de fête et nous allons le copier, le coller ici, et changer ceci en, Disponible maintenant. Un peu plus près ici, puis derrière, je vais faire juste un rectangle derrière le conteneur qui est rose vif, et ensuite nous allons changer le texte en blanc. Aussi, comme je l'ai mentionné, nous voulons qu'il soit derrière le conteneur, donc je vais les traîner derrière. Parfait. Allons-les un peu plus près. Joli. Cette section est presque complète. Rappelez-vous comment, dans le premier tutoriel, je vous ai dit que cela semble parfois agréable quand vous avez ces petits conteneurs ombragés si vous mettez un fond gris très clair derrière eux ? Je pense que nous allons le faire ici. Je pense que ce sera vraiment sympa. Je vais aller derrière toutes ces couches et je vais ajouter un gris clair derrière. Je pense que ça aura l'air très bien. Voici notre gris clair. Ouais, je suis dans ça. La section 3 est donezo. D' accord. Les gars, on est dans la dernière section, qui est le pied de page. Normalement, si ce n'était pas un téléavertisseur, nous aurions probablement beaucoup de choses à mettre ici. Vous pouvez mettre Twitter, Facebook liens, vous pouvez mettre des termes et conditions, vous pouvez faire des liens vers le blog, d'autres sections du site, mais pour l'instant, nous avons juste un copyright. C' est tout ce qu'on a besoin de mettre ici. Je vais copier de là-haut une copie du corps. Minimisons tout cela. Mettez dans le pied de page, et je vais juste taper, Option, G, qui fait un symbole de copyright, 2013 Party Starters. Montrez nos guides et mettez-le au centre. Délicieux. Je pense que nous allons rendre ce pied de page rose chaud juste pour le rendre un peu plus intéressant, parce que ça a l'air un peu fade en ce moment. Rose vif, et cela signifie que nous devons changer le texte en blanc. Rendons cela un peu plus petit parce que le droit d'auteur n'est pas très important. C' est important, mais tu sais ce que je veux dire. Ce n'est pas aussi important que la fête commence elle-même. D' accord. Là, nous l'avons. Vous les gars, vous avez réussi et nous avons fini. Ça a été génial. plaît laissez-moi savoir si vous avez des questions, je suis là pour vous. Je m'appelle Meg Lewis. Mon e-mail est meg@ghostlyferns.com. Sois en contact. Merci, les gars.