Comment concevoir un site Web dans Photoshop

1. Intro: Salut, je m'appelle Dan. Je vais vous guider à travers ce cours sur la façon de construire maquettes de site Web professionnel en utilisant Photoshop. Ce sont les compétences recherchées par les employeurs, et les compétences en conception de UX/UC sont là où se trouvent les emplois bien rémunérés. J' ai commencé ma vie en tant que graphiste et j'ai vite découvert que c'était très compétitif et que le salaire n'était pas super excitant. Ce n'est que lorsque je suis entré dans le monde du web design avant que ma carrière n'ait vraiment décollé. J' ai conçu ce cours pour les débutants, pour les personnes nerveuses de changer leur carrière en design web, pour les personnes nouvelles dans le monde web, ainsi que pour les développeurs qui n'ont pas de formation préalable en design. Nous couvrons tout ce dont vous avez besoin pour concevoir vos premières maquettes Web sans être trop techniques. Pendant le cours, nous allons créer un site Web pour une agence créative fictive développant ses vues mobiles, tablettes et ordinateurs de bureau. Avec les fichiers d'exercice, vous pouvez télécharger et travailler avec moi. Avec un PDF principal, vous pouvez suivre et créer vos propres notes personnelles. Je vais vous apprendre à configurer de nouveaux documents et à utiliser des vues mobiles, tablettes et bureau. Vous pouvez facilement choisir les couleurs et les polices de site Web et les prévisualiser sur votre iPhone ou iPad. Vous apprendrez à recadrer des images et à créer des arrière-plans complets jusqu' à exporter tous les bons fichiers dont vous avez besoin pour un site Web. Mais je serai là pour vous aider. Quand vous serez prêt, vous pouvez m'envoyer vos fichiers et je vais jeter un coup d'oeil et vous faire des suggestions. Maintenant, il est temps d'améliorer vos compétences, obtenir cette offre d'emploi et d'impressionner vos clients. 2. Les livrables à fournir à la fin de notre projet: Pour être un concepteur web commercial, il y a plus à faire qu'un simple balisage de site Web réfléchi. Il y a des livrables finaux, des fichiers tangibles et des informations que vous devrez transférer avant que le codage de votre site Web ne puisse commencer. Notre objectif avant la fin de ce cours est d'avoir un dossier rempli images prêtes pour le Web qui suivent les conventions de nommage Crickweb. Vous produirez également ce qu'on appelle une feuille CSS utilisée par un développeur pour connaître les polices que vous utilisiez, hauteurs et les largeurs de votre boîte de navigation ou de votre boîte photo. Vous apprendrez comment transmettre les codes de couleur corrects, la hauteur de ligne, espacement pour votre site Web afin que la personne charmante qui construit votre site Web puisse se rendre au travail rapidement, et ne pas avoir à faire d'énormes suppositions à partir de votre balisage. 3. Quel est le rôle de Photoshop dans la conception d'un site Web: Photoshop est incroyable à beaucoup de choses. En termes de conception de sites Web, c'est l'outil le plus couramment utilisé et si vous cherchez un emploi dans le monde du web design, c'est essentiel. Maintenant, le site Web construit avec des maquettes. Ce sont des visuels de ce à quoi vous pensez qu'un site Web devrait ressembler. Vous le faites avant de coder réellement le site Web. Pourquoi ? Parce que c'est beaucoup plus rapide. Pour effectuer des modifications dans Photoshop, il suffit de sélectionner le calque approprié et de faire glisser les éléments de la page. Dans le code, il peut y avoir beaucoup plus de implications pour simplement déplacer les choses. Photoshop effectue tout le travail de planification et de conception. Ensuite, votre maquette est construite et codée en tant que site web. Si vous êtes intéressé à faire le travail de développement vous-même et que vous n'êtes pas sûr de savoir où commencer, laissez-moi une ligne dans la discussion ou le forum, je suis vraiment heureux de vous aider à vous orienter dans la bonne direction là-bas. 4. Que sont les vidéos de production: Quelles sont les vidéos de production qui sont dans ce cours ? Ce sont les sessions où je suis occupé à construire le site conceptuel à l'aide des outils que nous avons déjà appris. Ceux-ci peuvent contenir des petites pépites de flux de travail, or et d'autres peuvent être moi juste faire le travail et peuvent devenir un peu ennuyeux. Je ne serai pas offensé si tu ne les regardes pas tous, tout au long du chemin. 5. Préparer votre espace de travail pour le travail d'UI: Dans cette vidéo, nous allons examiner la réinitialisation de votre espace de travail. Maintenant, vous réinitialiseriez votre espace de travail, si vous ouvrez Photoshop et qu'il était différent de ma version et que vous voulez le faire ressembler de façon à pouvoir le suivre. Maintenant, j'utilise Photoshop CC 2015. Si vous utilisez d'autres versions, cela peut sembler légèrement différent. Mais disons que vous l'avez utilisé pour d'autres choses et que vous avez déplacé ces palettes, que vous faites glisser ou que vous l'avez fait accidentellement. Vous l'avez fait pendant le tutoriel. Vous pouvez revenir à cette vidéo. Tout ce que vous avez à faire est de revenir à la normale pour le faire paraître correctement, c'est ici, c'est écrit Essentials. Assurez-vous d'abord qu'il est défini sur Essentials, puis cliquez sur l'endroit où il est écrit « Réinitialiser les Essentials ». Ensuite, je remets tout à sa place et ressemble à la mienne pour ce tutoriel. 6. Ajuster les préférences de Photoshop: Salut. Dans cette vidéo, nous allons examiner la modification de vos préférences pour travailler avec le Web. Maintenant, par défaut, Photoshop sort de la boîte prêt à faire beaucoup plus de travail orienté impression. Ce que nous devons faire est d'aller dans nos Préférences et de les modifier pour le Web. Maintenant, la première chose que nous allons faire est de tourner nos dirigeants. On va aller à View, et à Rulers. Ce que ça va faire, c'est que ça me montrera à quel point ce document est large. Le mien est réglé à centimètres, parce que je suis en Europe et le tien sera réglé à pouces si vous êtes en Amérique. Maintenant, ce qui se passe ici, c'est que vous pouvez voir qu'il pend environ 16 centimètres. Maintenant, quand nous avons affaire au web, nous ne voulons pas savoir quelle est la valeur du centimètre, nous voulons savoir ce que sont les pixels. Nous devons changer cette unité de mesure en pixels. Pour ce faire, nous allons accéder à, sur un Mac, à Photoshop CC, à Préférences, et à celle qui indique Unités & Rulers. Maintenant, si vous êtes sur un PC, c'est dans un endroit légèrement différent. Vous allez à Modifier, puis à droite en bas ici, il y en aurait un qui dit Préférences, puis vous allez à Unités & Rulers. qu'il en soit, passons aux unités et aux dirigeants. Ce que nous voulons faire, c'est mienne est réglée en centimètres, la tienne pourrait être réglée en pouces ou en millimètres. Changeons les règles en pixels. L' autre chose que nous devons changer, c'est le type. Type utilise généralement des points lorsque nous avons affaire à l'impression. Mais ce que nous voulons faire, c'est que nous voulons maintenant passer aux pixels parce que c'est la mesure que nous utilisons pour traiter du web. Lorsque je clique sur « OK », vous remarquerez qu'il fait maintenant environ 1 200 pixels de large. Quand je vais à l'outil Type, qui est ce T ici, vous remarquerez que je traite des pixels au lieu de points. Une chose à noter, c'est que si vous êtes une personne qui passe de l'impression au Web, vous devrez revenir en arrière et changer ces provinces chaque fois que vous voulez travailler sur un autre type de document. Pour le faire sur un Mac, nous allons aller dans Photoshop jusqu'à Préférences, et descendre à Unités et règles, rappelez-vous que si vous êtes un PC, c'est sous Modifier, Préférences, Unités et Règles, et vous allez le remettre à soit pouces ou centimètres, et le type remonte à des points. Mais d'une douleur, mais c'est ce que nous devons faire. Je vais cliquer sur « Annuler » parce que je veux le laisser, comme c'était, réglé sur pixels. 7. Télécharger les fichiers d'exercice: Salut, dans cette vidéo, nous allons regarder comment télécharger les fichiers d'exercice qui accompagnent ce cours. Maintenant, vous n'avez pas besoin d'avoir ces fichiers, mais c'est vraiment utile si vous voulez suivre étape par étape. Dans les fichiers, déposez votre adresse e-mail ici au milieu, et je vous enverrai par e-mail les images qui accompagnent le cours, ainsi que des choses comme les polices et les couleurs que nous utilisons. Ce que j'ai également fait, c'est qu'à la fin de chaque vidéo, j'ai enregistré un document Photoshop qui représente l'endroit où nous en sommes. Donc, si vous vous perdez ou que votre fichier ne fonctionne pas comme il le fait à travers les vidéos, vous pouvez comparer votre fichier au fichier téléchargé, sorte que vous pouvez voir où vous avez mal tourné. Tout au long du cours, j'ai fait référence à beaucoup de références et de ressources différentes, des choses comme la syntaxe et les sites Web, ils feront tous partie de ces fichiers d'exercice ici. Bon, continuons. 8. Comprendre la conception réactive pour mobiles et tablettes: La conception web réactive est un moyen de changer un site Web en fonction de la taille du navigateur. Maintenant, je lui montre Smashing Magazine. Smashing Magazine est un site Web que j'ai lu beaucoup et j'aime vraiment l'effort qu'ils ont fait pour redessiner les différentes pages en fonction de la taille du navigateur. Pour le moment, nous le regardons comme vous le feriez, un grand écran comme un iMac ou un moniteur 4K ou quelque chose de vraiment grand et haute définition. Vous pouvez voir qu'il y a un nav sur la gauche, un sub nav, le contenu principal et quelques annonces. Mais une fois que je deviens plus petit, disons vers le bas à une vue de bureau régulière, pouvez-vous voir qu'il change, il descend à cette navigation ici, notre contenu principal et les annonces, mais comme il devient plus petit, dire vers le bas, pour dire, vue tablette. Changements un peu, fossés est les annonces, la navigation devient vient un peu plus petit, c'est le long du haut ici, maintenant. Si je descend dans plus petit, jusqu'à la vue mobile, les choses changent encore un peu. Maintenant, ce que vous devez en tirer, c'est que lorsque vous concevez dans Photoshop, Photoshop est un support esthétique. Ce n'est pas extensible, extensible, comme vous pouvez l'obtenir quand il est finalement sorti comme un site Web. Donc, l'astuce pour les concepteurs quand ils se moquent d'un prototype dans Photoshop est que vous devrez concevoir les différentes vues de sorte que lorsque vous le remettez au développeur, ils sachent ce que fait le site lorsqu'il passe au mobile. Que se passe-t-il lorsque le menu est en mode Tablette ? Et toutes ces questions doivent être répondues dans votre maquette. Ce que vous ne voulez pas, c'est plein de questions entre vous et le développeur essayant de répondre à des questions qui auraient dû être étoffées dans la phase de conception. Et c'est une introduction rapide à la conception web réactive. 9. Comprendre les systèmes de grille et Bootstrap: Maintenant, la solution la plus populaire pour gérer différentes tailles de navigateur en ce moment est le système de grille. Parmi les systèmes de grille, quelque chose appelé Bootstrap est de loin le plus commun. Maintenant, que vous utilisiez Bootstrap ou tout autre moyen de construire votre site Web, vous allez probablement utiliser le système de grille. C' est ce que nous allons utiliser dans notre document Photoshop. Le système de grille permet aux concepteurs de travailler à partir d'une grille de 12 colonnes de base. Les concepteurs peuvent dépenser n'importe quelle quantité de ces colonnes en fonction de leur site Web. Jetons un coup d'oeil à cet exemple de système de grille ici sur le site Edward Robertson. Vous pouvez le voir ici, il s'appelle responsivegridsystem.com. Maintenant, ce que vous verrez vers le bas si je fais défiler tout le chemin vers le bas ici, ça commence par une colonne de base de 12. Maintenant, je dois encore voir quelqu'un utiliser exactement tous les 12 d' entre eux à moins qu'il y ait peut-être des points à puces ou des listes ou quelque chose de similaire. Ce qui a tendance à se produire, c'est que les concepteurs finissent par dépenser quelques-unes de ces colonnes. En bas, vous verrez qu'il commence à un niveau de base de 12 colonnes. En haut, vous pouvez voir que nous pouvons facilement couvrir ces 12 colonnes, disons six d'entre elles et six à nouveau, pour courber notre site en deux. C' est une façon vraiment sympa. Douze est un très bon nombre parce que nous pouvons le couper en tiers, et en quarts, et six, tout très facilement en utilisant la grille à 12 colonnes. C' est un autre exemple ici sur le site Edward. Vous pouvez voir quelques exemples de mise en page pour responsive. Maintenant, cette page d'introduction ici, oublie les hauteurs parce que les hauteurs sont vraiment courtes. Mais voyez les différentes découpes en termes de navigation. Vous pouvez voir ici c'est là que va mon logo et cet autre morceau ici, deux autres tiers seraient là où ma navigation va. C' est la travée du tout et cela pourrait être dire un carrousel rotatif comme ils ont écrit ici. Ce sont des boîtes de fonctionnalités toutes incurvées en tiers. Quatre colonnes, quatre colonnes, quatre colonnes, et puis mon pied de page couvrirait les trois. Vous pouvez voir ici quelques exemples différents de façons de découper des sites Web. Je suis passé ici au fichier Photoshop que vous pouvez télécharger dans le cadre des fichiers d'exercice et si vous ne l'avez pas fait, faites-le à partir du lien ci-dessous. Sinon, vous pouvez créer vos propres pages. Maintenant, ce que j'ai fait est, si je vais à « View » et que je vais à « Show », et je vais à « Guides », vous verrez qu'il a été découpé en colonnes de 12 avec un peu de rembourrage et entre eux tous. Je l'ai fait pour ordinateur de bureau, tablette et mobile. Maintenant, vous remarquerez ici sur mobile, le mobile n'a pas réellement 12 colonnes comme la tablette et le bureau. Nous le faisons parce que 12 colonnes sur une si petite taille devient cette masse dense de colonnes et personne ne coupe réellement un site mobile en 12 colonnes distinctes. Maintenant, lorsque vous décidez quelles pages et quelles tailles elles devraient être, vous pouvez voir que le bureau a une largeur de 960 pixels. Lorsque vous décidez de la taille du bureau, tablette à être, et du mobile à être, ne soyez pas trop pris par les dimensions réelles des pixels car il y a tellement de tailles d'écran différentes, il est impossible de les regrouper tous ensemble en une taille de pixel exacte. Vous choisissez une taille générique qui s'adapte aux mobiles, aux ordinateurs de bureau et aux tablettes qui sont courantes en ce moment, et cela va changer au fur et à mesure que le temps passe. Soyez prêt pour quelques années lorsque les résolutions d'écran sont toutes modifiées, ou il y a une nouvelle version mobile fébrile, bureautique, que vous devrez peut-être parcourir et concevoir un style distinct pour s'adapter à cette taille d'écran. Si vous cherchez des dimensions exactes pour commencer, vous pouvez télécharger le modèle Photoshop que j'ai dans les ressources. Ou si vous utilisez dire Bootstrap, vous pouvez aller vérifier Bootstrap pour voir ce que les médias partagent les étoiles. Ce qu'ils considèrent mobile est, ce qu'ils considèrent tablette est. Si on peut jeter un coup d'oeil. Maintenant, je suis sur Bootstrap, sur getbootstrap.com. Je suis sur la version légèrement en avant-première dans la version quatre. Pour le moment, nous en sommes à la version 3, mais la version 4 sortira très bientôt, donc nous allons l'utiliser pour ce cours. Cliquez sur « Documentation », puis je descends à « Mise en page » et choisissez « Grille ». Maintenant, si je fais défiler ici, celui-ci dit les options de grille. Vous pouvez voir ici, voici mon petit étui qui serait mobile en portrait. Ensuite, j'ai petit qui est considéré comme téléphone au paysage, tablette moyenne, grand est dire un écran d'ordinateur portable et extra grand est un très grand écran IMAX dire. Vous voyez les tailles ici sont écrites dans cette mesure appelée REM, qui est un EM racine. Si vous n'avez jamais utilisé cette mesure auparavant, ne vous inquiétez pas. Essentiellement, vous prenez le 45 et vous le multipliez par 16. Seize est considéré comme la taille par défaut dans un navigateur. Donc 45 fois 16 nous donne 720 pixels. Si nous revenons à Photoshop, vous verrez que j'ai utilisé 720 pixels pour cette tablette. Maintenant, quand nous atteindrons Bootstrap 5 et Bootstrap 6, ça ira et ajustera ces choses en fonction des tailles les plus courantes. Ils pourraient devenir plus gros, ils pourraient devenir plus petits, ce qui est vraiment populaire à l'époque. C' est un bon endroit pour commencer pour notre maquette Photoshop. Maintenant, ce que j'ai fait pour vous ici aussi, c'est que ces guides peuvent être un peu difficiles à travailler aussi parce qu'ils dépassent les pages. Ce que j'ai fait ici, c'est, disons que vous travaillez sur votre vue de bureau, vous pouvez basculer ces couches vers le bas, et vous remarquerez ici, j'ai celui-ci appelé guides de colonnes utiles. Si je bascule ça vers le bas, j'ai mis en place quelques grilles de colonnes de base. Regarde ça. Je vais désactiver ma vue, mon spectacle, mes guides et je préfère travailler de cette façon. Si je fais quelque chose qui est censé être trois colonnes, je vais cliquer dessus sur mes trois colonnes et c'est juste l'arrière-plan transparent, afin que je sache quand je travaille avec mon document. Je le traîne et je sais que je travaille dans ces trois colonnes ici. Lorsque vous avez fini d'utiliser la colonne, vous pouvez activer le globe oculaire et en désactiver un autre pour travailler sur une disposition légèrement différente ou un système de grille différent. Maintenant, vous remarquerez dans ce tutoriel que nous n'utilisons que trois des tailles. Nous utilisons le petit, le moins de 34ems pour le portrait mobile, la tablette et le bureau. Maintenant, nous n'avons pas fait celle-là qui est entre les deux, qui est notre téléphone paysager. Nous n'avons pas fait le très grand ou très grand bureau aussi. Il est principalement juste pour garder le temps à court de ce tutoriel, et cela dépend de je suppose du niveau de complexité de votre site Web. Si c'est un site Web à jet rapide, vous pourriez ne pas passer autant de temps avec l'Excel ou la petite version, qui est la version de petit téléphone paysage, et jusqu'à ce que peut-être le site soit un peu plus mature. Si vous travaillez sur un projet plus grand, alors vous allez certainement regarder les cinq requêtes média et les cinq tailles ici dans Photoshop. 10. Conseils pour zoomer et naviguer dans votre document: Salut. Dans cette vidéo, nous allons regarder le zoom et le déplacement dans un document. Maintenant, il existe plusieurs façons de zoomer avant et arrière d'un document. Je vais vous montrer le moyen le plus rapide et le plus facile. Sur un Mac, vous maintenez la touche Commande enfoncée et appuyez sur le « Plus » de votre clavier. Maintenant, si vous êtes sur un PC, maintenez la touche Ctrl enfoncée et appuyez sur « Plus » pour effectuer un zoom avant. Maintenant, maintenez cette même touche et appuyez sur le « Moins » fera un zoom arrière. Ce que nous voulons faire, c'est que nous voulons nous assurer que nous regardons notre maquette Photoshop à la même taille que celle qui sera rendue dans un navigateur Web. Parce qu'un navigateur Web, évidemment, nous ne pouvons pas zoomer et arrière comme nous pouvons le faire dans Photoshop, donc ce que nous voulons faire est de le voir à la taille réelle. Pour ce faire, si vous êtes sur un ordinateur autre qu'un nouveau MacBook Pro, le moyen le plus simple est d'aller à Afficher et de choisir un 100 pour cent. Cela le montrera à sa taille réelle. Maintenant, vous pouvez voir sur le mien ici, il est environ la moitié de la taille qu'il devrait être parce que j'utilise un MacBook Pro avec un écran de rétine dans. Longue histoire courte, il vous montre essentiellement tout à environ la moitié de la taille. Maintenant, ce que nous devons faire, avec n'importe qui avec un MacBook Pro, c'est que vous devez réinitialiser à ce 200 pour cent, élevé deux fois plus grand. Photoshop affichera à la même taille qu'elle vous montrera sur un site Web afin que vous puissiez être un peu plus clair sur les tailles de police que vous souhaitez choisir. Donc, pour être clair, si vous êtes sur n'importe quel ordinateur à l'exception d'un écran de rétine MacBook Pro, utilisez ce 100%. Si vous êtes sur un écran de rétine, utilisez 200 pour cent. Maintenant que nous sommes dans ce niveau de zoom plus proche, nous voulons nous déplacer. Le long chemin est que je pourrais faire glisser ces petits curseurs autour et cela fonctionne. Une meilleure façon de travailler est que si je maintiens ma touche de barre d'espace sur mon clavier, vous verrez que mon curseur change de l'outil de déplacement à cette petite main et cette main me permettra de cliquer, maintenir et de faire glisser ma souris et de me déplacer autour de mon document. Je maintiens ma touche de barre d'espace enfoncée tout le temps et je clique et je fais glisser et puis je laisse aller avec ma souris. C' est un moyen agréable et facile de se déplacer dans le document. Il s'agit de zoomer et de naviguer dans votre document. 11. Outils de mesure et d'espacement: Salut, dans cette vidéo, nous allons regarder les règles dans la mesure des choses. Nous le faisons pour deux raisons. L' un est que nous voulons même espacement entre les boîtes et aussi nous pourrions le faire parce que la personne qui construit le site, si ce n'est pas nous, pourrait vouloir que les mesures sachent à quel point choses devraient être éloignées ou le rembourrage entre les objets. Pour ce faire, il y a deux façons, il y a la façon officielle et puis il y a la façon que j'utilise. Maintenant, la façon officielle de le faire est d'utiliser l'outil Règle. Maintenant, l'outil Règle se cache sous l'outil Pipette ici. Si je clique sur Hold, maintenez, maintenez, voilà, attrapez l'outil Règle. Dites que je veux mesurer la distance entre ce bouton Plus et la boîte en dessous. Ce que je fais, c'est que je clique et maintiens et que je fais glisser. Ce que vous verrez est dans la main supérieure gauche vers le haut dans la barre de l'application, que les mesures changent au fur et à mesure que je fais glisser cela autour. Maintenant, par défaut, son étirement va n'importe où. Ce que je veux faire est de maintenir la touche Maj enfoncée pour le verrouiller dans cette position verticale, afin que je puisse le faire défiler vers le bas. Vous verrez là qu'il est réglé à 77 pixels entre celui-ci et celui-ci. Maintenant, ce que vous devez faire est de zoomer un peu juste pour assurer que c'est vraiment très proche. Vous pouvez voir parce que j'étais si loin, ça n'a pas été parfait. Je peux cliquer sur Hold et le faire glisser juste pour le nettoyer et dire en fait que je veux qu'il soit là. Maintenant, c'est plus comme 81 pixels. Maintenant, c'est la façon officielle. Je vais effacer mes règles, pour m'en débarrasser, je vais zoomer en maintenant Commande ou Contrôle moins. Maintenant, c'est l'outil de mesure officiel et c'est génial. Ce qui est mieux, c'est d'utiliser l'outil Rectangle, l'outil Rectangle ici a un grand avantage dans le fait qu'il s'accroche aux bords des choses sur la page. Alors que nous avons dû faire quelques ajustements avec l'outil Règle par la suite pour nous assurer que tout était bien mesuré. Regarde ça, je vais mesurer la distance entre ici et ici. Je vais cliquer sur Hold and drag et voir qu'il y a comme des lignes roses qui apparaissent partout. C' est parce qu'il essaie de s'aligner avec beaucoup de choses différentes sur les pages. La mienne est une page assez complexe, donc il y a beaucoup de choses qui essaient de s'aligner avec, mais c'est assez bon pour juste accrocher, regarder ça. Si je le fais glisser ici, c'est plutôt bien qu'il soit sorti 81 pixels. Je vais zoomer et vérifier. Allons frapper, c'est parfait. Maintenant, l'outil Rectangle est vraiment bon pour espacer les objets aussi. Je vais supprimer cette couche ici. Je vais zoomer un peu et descendre en maintenant ma barre d'espace, cliquer et faire glisser vers le bas. Je vais zoomer ici sur ma liste de portefeuille. Maintenant, j'ai même un espacement entre ces deux objets. J' utilise les largeurs de colonnes, alors voyons, Afficher, et je vais activer les guides. Vous pouvez voir là que j'ai utilisé l'espacement entre ces colonnes. Maintenant, ce que je veux faire est de m'assurer que l'espacement est exactement le même entre ici et ce n'est évidemment pas le cas. Pour le rendre parfait ce que je peux faire est d'utiliser mon outil Rectangle, je peux cliquer sur maintenir et faire glisser le rectangle entre ces deux et vous remarquerez que, vous le voyez accrocher sur le bord est parfait. Mais vous remarquerez que je veux que ce soit parfaitement carré. Je vais annuler cela en allant dans Modifier, pas en arrière. Ce que je vais faire, c'est que je maintiens la touche Maj enfoncée pendant que je fais glisser mon rectangle, si je maintiens la touche Maj, cela verrouillera les contraintes. Vous pouvez voir que c'est 30 pixels par 30 pixels maintenant. Maintenant, si j'utilise mon outil Déplacer, cliquez, maintenez et faites-les glisser vers le bas et nous les utilisons comme un espaceur. Je vais piquer dans le fond de ça, maintenant c'est là. Maintenant, je vais déplacer cette image vers le haut. Parfois, il ne coupe pas, donc dans ce cas ce n'est pas le cas. Ce que vous pouvez faire, c'est que vous pouvez utiliser les touches fléchées du clavier. Je vais juste utiliser les touches fléchées qui le renversent. utilisation de rectangles est un bon moyen de s'assurer que le rembourrage est le même entre ces images et le même ci-dessous. Le seul problème avec eux est qu'ils sont physiques, ce qui signifie que cette chose ici va imprimer ou sortir sur votre maquette. Lorsque vous en avez terminé, vous devez vous assurer que vous le sélectionnez dans le panneau Calques et que vous le supprimez. Très bien, et c'est comme ça que vous mesurez les choses dans Photoshop. 12. Raccourcis de calques à connaître: Dans cette vidéo, nous allons examiner certains des raccourcis essentiels dont vous avez besoin en termes de traitement des couches. Maintenant, avec le panneau des calques que vous voyez ici, je travaille sur une image finale ici. Vous pouvez voir que les couches sont en cours d'élaboration au fil du temps, et il y en a maintenant des centaines. Donc, il n'est pas vraiment pratique de passer en revue et d'essayer de se souvenir des noms de tous, afin que vous sachiez sur quelle couche vous travaillez. Donc tu as besoin d'un truc. Le meilleur et celui que j'utilise constamment est de vous assurer que vous êtes dans votre outil de déplacement et de vous assurer que votre outil de déplacement est défini sur couche. Maintenant, ce qui va se passer, c'est que tu vas apprendre un petit raccourci. On est sur une couche aléatoire en ce moment. Je veux cliquer sur ce mot. C' est More. Maintenant, je vais zoomer un peu, sélectionnez Plus. Ce que je dois faire est de maintenir enfoncée la touche de commande sur un Mac ou la touche de contrôle sur le PC. Ce que vous remarquerez, c'est que, pouvez-vous voir dans le top EPA ? Il change cette chose appelée auto-sélection. Il le met juste en marche pendant que vous en avez besoin. Si je maintiens la touche de commande enfoncée et je clique sur le mot plus, pouvez-vous voir dans mon panneau de calques, il a sauté à la Plus. Je peux bouger ça. Alors dis que je veux déplacer la boîte verte aussi. Je maintiens ma touche de commande enfoncée et le petit outil de sélection automatique s'allume, je clique dessus. Même s'il a un nom aléatoire appelé Rectangle 2, je peux toujours le déplacer. Ok, donc je peux cliquer sur Plus et le déplacer à travers, cliquer sur le rectangle, le déplacer à travers. Maintenez enfoncée Faisons impressionnant. C' est juste un moyen vraiment facile de choisir les calques et de les déplacer et vraiment essentiel lorsque vous travaillez sur un document aussi lourd de calque. Je vais aller éditer. Reculer, et un pas en arrière, et un pas en arrière. Un autre raccourci utile est que si vous avez un ensemble de calques vraiment complexe les uns sur les autres, il est vraiment difficile de sélectionner celui que vous voulez. Ce que vous pouvez faire est de faire semblant une seconde que nous voyons cette image en arrière-plan ici ? Je veux sélectionner en utilisant cette petite zone ici, mais je ne peux pas parce qu'il y a une boîte noire devant elle. Si j'utilise mon astuce de clic de commande, il va choisir ce rectangulaire à chaque fois. Bien sûr, je peux venir ici, mais ça ruine mon exemple. Ce que je peux faire, c'est si je avec le bouton droit de la souris et si vous êtes sur un Mac et que vous n'avez pas de clic droit, vous cliquez sur la touche Ctrl. Si vous êtes sur un PC, il est facile de cliquer avec le bouton droit de la souris et vous remarquerez qu'il sélectionne tout dans mon petit ordre de calque ici. C' est le rectangle noir. En dessous, il y a quelque chose qui s'appelle le calque 2 et c'est ma petite image. Un autre raccourci utile dont vous aurez besoin est si vous utilisez mon modèle et que vous utilisez les grilles de colonnes. Vous devez être en mesure d'aller voir les guides des spectacles. Ceux-ci peuvent être vraiment génial quand vous alignez les choses, mais une vraie douleur quand vous essayez de regarder les choses visuellement parce que cela ruine l'apparence de tout avec les lignes partout. Donc, le raccourci pour cela, si vous êtes sur un Mac, c'est la commande et utilisez la touche deux-points de votre clavier. Si vous êtes sur un PC, c'est le contrôle et les deux-points et vous les activez et les désactivez. Je le fais un peu quand je travaille avec ces grilles quand je veux aligner les choses puis je l'éteins à nouveau quand j'essaie de regarder les choses et de voir comment elles s'alignent. 13. L'outil compte-gouttes: Maintenant, le prochain outil dans votre boîte à outils de concepteur Web va être l'outil compte-gouttes. C' est un outil facile pour savoir avec quelle couleur vous travaillez. Il se cache sous l'outil de règle et il devrait être réglé sur l'outil pipette par défaut, mais nous l'utilisions plus tôt, rappelez-vous ? Je vais utiliser l'outil pipette et c'est juste vraiment bon pour choisir la couleur. Je veux savoir de quelle couleur ce vert est. Je vais cliquer dessus et vous remarquerez que là-haut, mes nuances de couleur qui pointent vers elle et ici ma couleur de premier plan il la sélectionne. Double-cliquez sur la couleur de premier plan ici et vous remarquerez que nous obtenons notre nombre hexadécimal, et c'est le nombre qui est généralement utilisé dans la conception Web pour établir la couleur. Il existe d'autres façons de traiter avec RGBA que nous examinerons plus tard, mais vous pouvez également utiliser ces couleurs RVB si vous en avez besoin. Cliquez sur « OK ». C' est l'outil pipette pour choisir la couleur. Disons que nous voulons utiliser cette couleur encore et encore dans notre document. Ce que vous pouvez faire, c'est créer ce qu'on appelle une nuance. Maintenant, pour faire une nuance, disons que je veux cette couleur pêche ici. Si je le sélectionne, je peux le déplacer dans mes panneaux de nuance et je peux utiliser ce petit drapeau ici qui dit « New Swatch » et il utilise ma couleur de premier plan qui a été choisie avec l'outil d'algèbre et je peux appeler ce BYOL Peach. Cliquez sur « OK ». Maintenant, ce que tu vas faire, c'est que tu le verras juste apparaître à la fin de ma petite nuance ici. Cela signifie que je peux réutiliser ça quand j'en ai besoin. Disons que je veux le revenir en noir et blanc, je vais utiliser mon outil rectangle et je vais dessiner un rectangle et il va être noir. Mais ce que je peux faire, c'est que je peux utiliser ce petit menu déroulant et vous verrez qu'il y a ma couleur pêche à la fin de mes échantillons, et je peux réutiliser cette couleur encore et encore. 14. L'outil transformer: L' un des outils les plus utiles est votre 'Transforme'. Maintenant, je l'utilise beaucoup dans ce cours, et beaucoup sur mon propre travail. Il est souvent utilisé comme un raccourci. Le long chemin est en cours d'édition, et c'est celui-ci appelé outil de transformation libre ici. Maintenant, je vais utiliser le raccourci tout au long de ce cours, et c'est vraiment bon pour vous d'apprendre aussi. Vous pouvez voir sur un Mac c'est Command T, et sur un PC c'est Control T. Donc, je vais appuyer sur Command T sur mon clavier. Regarde ça, parce que j'ai vu ma grille ici, ok ? Si vous n'avez pas, vous êtes la grille montrant, a une vue, montrer et aller à des guides. Regardez ceci, parce que mes guides sont dehors, il va s'accrocher à elle et dire que je veux qu'il devienne un peu plus grand et je veux l'arracher afin qu'il développe quatre colonnes ici pour ce bouton. Super, donc il va s'accrocher aux guides s'il en a besoin. Tu pourrais éteindre les guides et ça ne le fera pas. Maintenant, quelques autres outils modificateurs pratiques sont disons l'évasion. L' évasion se débarrasse de notre transformation et allons à Command T ou Control T sur un PC et regardons ceci. Si je maintiens la touche Maj enfoncée pendant que je fais glisser l'un de ces coins, pouvez-vous voir que la hauteur et la largeur sont exactement les mêmes ? Donc, si je l'annule, si je ne maintiens pas la touche Maj enfoncée, je peux bouger à tous les anciens côtés que j'aime, ce qui est pratique, mais aussi très bon si vous maintenez la touche Maj enfoncée. Maintenant, j'ai frappé à nouveau escape, regardons l'une des touches de modificateur, donc Commande T et c'est la touche ALT. Donc si nous maintenons la touche ALT enfoncée, et disons que je veux faire ces quatre colonnes pour maintenir la touche ALT de ce côté. Regardez ce qui se passe ? Peut voir le côté opposé vient le long pour le tour. C' est la touche ALT, si je la maintiens enfoncée pendant que je l'étire. Lorsque vous avez terminé et que vous avez terminé la transformation et que vous aimez qu'elle touche 'Entrée' sur votre clavier ou 'Retour' et cela va valider cela. Ça finira la transformation, tu es prêt à partir. 15. La touche « f »: Maintenant, cet outil est vraiment pratique lorsque vous voulez avoir une idée de la façon dont le site va regarder sans que tous les déchets soient à l'extérieur, tous les outils et onglets Photoshop et barres d'outils. Maintenant, pour ce faire, vous allez dans « Affichage », il y en a un qui s'appelle Mode écran et vous utilisez celui-ci ici. Maintenant, pour une raison quelconque, je sais que c'est la touche de raccourci de F mais raison sur cette marque ici je ne suis pas sûr si sur un PC, mais il n'a pas le raccourci, donc nous allons ignorer ce petit peu et utiliser le petit raccourci rapide clé. Si j'appuie une fois sur la touche F, elle en cache la moitié. Tapez à nouveau la touche F sur mon clavier, elle se débarrasse de toutes les barres d'outils à l'exception des règles. Maintenant ce que je veux faire, c'est que je vais revenir et éteindre les règles, les dirigeants les éteignent. Alors rappelez-vous, une fois pour la touche F, deux fois pour la touche F et je peux voir mon document et je peux le déplacer et je peux maintenir ma barre d'espace. Je peux le déplacer et cela me donne juste un peu de sens de ce à quoi ressemble mon site Web en ce moment. Une clé F une troisième fois, vous ramènera à la case 1. Il s'agit donc de trois séances. Il y a celui-là, puis le suivant, et puis le plein écran. Ils circulent en utilisant la touche F. Maintenant, une autre chose agréable que j'aime faire est que j'obtiens la touche F deux fois pour entrer en mode plein écran est que je n'aime pas ce fond blanc, surtout quand je fais face à un site si sombre. Je veux que ce fond ici ne soit pas blanc. Donc, ce que vous pouvez faire, vous pouvez cliquer dessus avec le bouton droit et choisir soit gris foncé, cliquez dessus avec le bouton droit et choisir noir, et cela change simplement la couleur d'arrière-plan. Si je fais un zoom arrière, vous remarquerez qu'il change pour toujours ma petite couleur de fond. Si j'ai la clé F, c'est à vous de choisir comment vous préférez travailler. J' aime travailler sur un écran sombre ou gris foncé juste pour que je puisse obtenir des scènes plus belles de mon site Web. 16. Tailles d'écran pour ordinateur de bureau, tablette et mobile: Salut. Dans cette vidéo, nous allons regarder la résolution de l'écran par rapport à notre taille réelle de pixels. Cela peut être un peu déroutant quand vous commencez, vous pensez, « Super, je vais faire une maquette pour un iPhone 6. » Vous allez dans Photoshop et voici les dimensions. Vous le Google, et il dit que c'est cette largeur de pixel par cette hauteur de pixel, et vous décidez, « Je vais faire ça. Je vais aller dans Photoshop, je vais faire un nouveau document qui va être 750 par ce 1.334. » Tu le fais et tu finis avec cette taille ici. Ce n'est pas la vraie taille, ça va l'être. Regardons ce site ici et nous verrons que c'est la largeur CSS que nous devons vraiment observer lorsque nous concevons pour mobile, parce que nous savons tous que les téléphones mobiles, à part quelques d'entre eux, tous sont très similaire dans la taille. Mais ce qui va se passer est ce ratio de pixels ici, vous pouvez voir quand il est un à un, que quelle que soit la taille physique qui est, est la taille réelle de l'écran ici. n'y a pas de densité réelle, et si vous avez vu un vieux iPhone 3, vous remarquerez que les graphismes ne sont pas géniaux, mais c'est la même taille physique qu'un iPhone 6. Mais ce qui se passe est quand vous obtenez ce ratio de pixels plus dense, la même taille physique, nous voyons est doublé ici. Les pixels réels deviennent beaucoup plus grands, mais la taille réelle du téléphone est exactement la même. Vous remarquerez dire que ce LG G4, celui-ci ici a un rapport d'image de quatre, donc c'est un tout petit téléphone, donc la taille est comme l'iPhone 6, mais vous pouvez voir qu'il est extrêmement grand en termes de sa largeur physique. Mais nous avons un regard ici en comparaison les uns avec les autres, ils ne sont pas si différents. Légèrement plus grand, l'iPhone 6 est légèrement plus grand, mais pas un grand saut comme dans cette indication ici. Donc, ils peuvent être assez déroutants quand vous êtes nouveau. Les bases sont que lorsque vous concevez un Photoshop, conception pour cette taille physique vous donnera la meilleure représentation du téléphone réel plutôt que de suivre ces largeurs de pixels physiques sur la diapositive ici. 17. Test sur iPhone et iPad à l'aide d'Adobe Device Preview: Adobe Preview ou Device Preview permet d' afficher les éléments sur lesquels vous travaillez sur Photoshop directement sur un appareil mobile, un iPhone ou un iPad pendant que vous travaillez. Cela signifie que vous pourriez faire une maquette sur votre ordinateur, mais en fait voir à quoi il ressemble sur un appareil mobile. Maintenant, cette application ne fonctionne que pour iPhone et iPad pour le moment, il n'y a pas d'équivalent Android encore et probablement ne sera pas, mais continuez à vérifier si Adobe ne libérer quoi que ce soit pour Android. La prochaine chose que vous devez faire est que vous devez télécharger l'application pour votre iPhone et iPad. Maintenant, j'ai sur l'iPhone ici, ignore le fond d'écran de mon très beau fils. Une fois que vous l'avez fait, vous l'ouvrez et vous devrez vous connecter à l'aide de ce qu'on appelle votre Adobe ID. Maintenant, si vous n'avez pas d'Adobe ID, vous le savez probablement, vous ne savez pas ce que c'est, la façon de le savoir est d'aller jusqu'ici, aller à Aide. Je suis dans Photoshop, allez à l'aide et vous pouvez voir ici le mien est DANIEL @BRINGYOUROWNLAPTOP. Maintenant, ne cliquez pas sur « Se déconnecter », ce n'est qu'un guide ici pour savoir quelle est votre adresse e-mail pour votre Adobe ID. Si vous ne vous souvenez pas de votre mot de passe, essayez d'utiliser cette adresse e-mail dans Adobe.com et essayez de vous connecter. Si vous ne vous souvenez pas de votre mot de passe, cliquez sur le bouton « Envoyez-moi un nouveau mot de passe ». Une fois que vous avez obtenu cela, connectez-vous à votre application. De là, une ou deux choses doivent se produire, vous devez soit l'avoir connecté comme je l'ai à votre prise, c'est juste une prise qui vient par chargeur, branchez-la dans votre ordinateur et l'utiliser pour le connecter ; ou vous peut utiliser le Wi-Fi sans la prise. Maintenant, l'utilisation du Wi-Fi signifie simplement que ce téléphone doit être connecté au même routeur que votre ordinateur est, ils doivent être connectés au même réseau, puis cela fonctionnera sans fil. Maintenant, ce que nous devons faire, c'est que nous devons ouvrir notre aperçu de l'appareil. Vous pouvez le voir ici, cette petite icône. Si vous ne pouvez pas le voir, c'est sous Fenêtre et il s'appelle Device Preview. Maintenant, s'ils sont tous les deux connectés, vous verrez sur votre écran, il aura le nom de votre téléphone et sur votre application il y aura ici que vous êtes connecté. La prochaine chose à faire, est de vous assurer que vous avez notre fichier ouvert sur Photoshop. Je vais ouvrir le fichier que nous allons utiliser ou créer pendant ce cours, c'est la version finale. Vous pouvez voir ici sur mon téléphone, tout est affiché. Maintenant, la chose vraiment sympa ici, c'est qu'il est utilisable, je peux faire défiler et voir à quoi ressemble tout le design sur ce téléphone. C' est indépendant de Photoshop. Vous pouvez voir qu'il ne fait rien, mais il s'affiche ici. Maintenant, une chose vraiment agréable est que c'est dynamique, ce qui signifie que lorsque je mets à jour quelque chose dans Photoshop, il va instantanément se mettre à jour sur mon téléphone sans que je fasse quoi que ce soit, alors regardez ça. J' ai remarqué sur mon téléphone que BYOL et la barre de navigation sont assez grandes, donc ce que je vais faire, c'est que je vais le rendre plus petit. Je vais zoomer sur cette partie supérieure ici. Vous remarquerez que si je trouve ma navigation et que je le fais bien et petit, vous verrez si je prends ma navigation et je la fais un peu plus petit, cliquez sur « Entrée », vous remarquerez très rapidement qu'il est mis à jour sur le téléphone, prend environ une seconde ou deux, mais totalement utilisable. Même chose avec ce Bring Your Laptop ici, la police est trop grande. Prenez la police, la rendre plus petite, abaissons-la à quelque chose comme 45, bougez-vous, bougez et vous remarquerez qu'elle met à jour lorsque je bouge avec environ une seconde ou deux délais. Disons la même chose pour ce texte ici. Ce texte blanc ici semble un peu petit sur mon appareil mobile, donc je vais attraper l'outil de type, je vais tout sélectionner et je vais le déplacer de 16, bosser jusqu'à dire 18 et vous remarquerez dans mon téléphone qu'il sera mis à jour automatiquement. Quelques choses que vous pouvez faire avec l'aperçu de l'appareil, c' est que si vous cliquez dessus une fois, en haut il y a une liste déroulante et cela signifie que vous pouvez mélanger les différents tableaux d'art que vous avez. Pour moi, ce n'est pas si utile parce que j'ai les différents plans sont tablette et bureau et il est intéressant de le voir vers le bas sur les diapositives, mais pas vraiment va m'aider mon flux de travail. Ce qui était vraiment bon pour, c'est dire que vous développez une application ou dites que vous êtes à ce stade de conception pour mobile et que vous avez quelques versions différentes. Cela signifie que vous pouvez basculer et cliquer sur les différents plans de travail pour les voir les uns par rapport aux autres. Une chose à noter aussi, est que vous n'avez pas réellement besoin d'avoir Artboard configuré dans Photoshop pour que cela fonctionne, vous pouvez ouvrir n'importe quel ancien fichier et il se chargera dans l'application. Maintenant, je suis le premier à être quand il y a une technologie qui relie mon téléphone et mon ordinateur et fait des rétrogradations et des trucs et souvent ils ne fonctionnent pas très bien et je vais me battre avec eux pendant un peu de temps, mais ce en particulier, Adobe Preview est brillant. Cela fonctionne, c'est rapide, et ça aide vraiment mon flux de travail. Maintenant, si vous concevez pour mobile et tablette, maintenant vous devriez utiliser quelque chose comme ça tout au long votre construction parce que tant de concepteurs attendent jusqu'à la fin, donc le site Web est réellement construit avant qu'ils ne tombent vraiment et tester ce qu'il va faire sur mobile et tablette, et c'est beaucoup trop loin dans le processus de conception pour faire quelque chose comme ça. Soyez testé, faites-le ouvrir, faites-le tout le temps afin que vous puissiez voir et examiner au fur et à mesure que vous allez. Maintenant, probablement la chose la plus importante à retenir lors de l'utilisation Adobe Preview est de vous assurer que vous connectez quelques téléphones, quelques iPad, vous les épinglez tout autour de votre écran ici pour faire croire que vous êtes super important et aussi il semblera que vous travaillez sur le rapport minoritaire, comme Tom Cruise, bouger les choses, les balayer et cela impressionnera totalement vos collègues. C' est tout pour Adobe Preview. 18. Ce qui est techniquement possible dans la conception de sites web: Dans cette vidéo, nous allons voir comment nous pouvons nous aider nous-mêmes lorsque nous construisons notre site après Photoshop. Dans Photoshop, nous avons une quantité infinie de choses que nous pourrions faire. Nous pourrions avoir un grand thème avec une ombre portée avec des licornes qui volent hors de lui et le feu et toutes choses. Nous pouvons le faire dans Photoshop, c'est ce genre de programme, mais quand il s'agit de Web design, nous sommes assez limités en termes de types de choses que nous pouvons mettre sur un site Web à son code, et se résume principalement aux navigateurs et à quel âge les navigateurs dépendent de ce qu'ils peuvent et ne peuvent pas supporter. Licornes volantes, non, il n'y a pas de fonction CSS pour cela mais il y a des fonctionnalités pour les dégradés et les ombres portées. Ce que nous pouvons faire, c'est que nous pouvons utiliser ce site appelé caniuse.com. Maintenant, il y a d'autres sites comme celui-ci. J' aime vraiment ce site, et disons que nous voulons travailler avec des gradients. Si je tape en gradient ici, il me dit que le gradient CSS fonctionne sur tout sauf Opera Mini. Maintenant, si vous avez besoin de prendre en charge Opera Mini, vous allez devoir réfléchir à deux fois à l'utilisation de dégradés CSS, heureusement, les dégradés sont sortis pour le moment et tout est une question de design plat. Mais disons que vous devez avoir un dégradé que si vous devez supporter cet Opera Mini, alors vous devrez ne pas utiliser de dégradés CSS. Une autre chose que vous pourriez avoir besoin de savoir si vous devez prendre en charge certains navigateurs plus anciens. Si vous construisez un site Web et que la règle est que nous devons prendre charge au moins un minimum d'Internet Explorer 9, vous n'aurez pas de dégradés CSS. Ça ne veut pas dire que tu ne peux pas l'utiliser, ça veut juste dire qu'ils n'apparaîtront pas. Vous pouvez le concevoir de sorte que si le dégradé n'est pas appliqué, qu'il y ait juste une couleur d'arrière-plan plate et que cela pourrait être bien parce que c'est en arrière-plan, ce n'est pas une grande partie importante de celui-ci. Disons quelque chose comme, regardons les ombres. Il y a deux ombres différentes, box-shadow. Box-Shadows, ce sont des ombres qui pendent sur les côtés des balises div qui fonctionnent assez régulièrement. Regardons les ombres du texte. Il n'est pas pris en charge dans IE9 à nouveau. Maintenant, cela pourrait être plus important parce que vous pourriez décider que je vais avoir ce texte bleu très clair sur ce fond blanc, mais ce n'est totalement pas lisible à moins qu'il n'y ait une ombre portée derrière lui. Vous comptez sur cette ombre portée pour que le texte soit lu. Ce que cela va faire est que Internet Explorer 9 va être ce texte vraiment fané sur fond blanc donc c'est un peu plus important. Juste pour jeter un oeil à ce site parfois vous pensez, je me demande si je peux le faire sur un site Web ou non. Je peux l'utiliser. Maintenant, un autre joli petit extra pour le site est ici. C' est à supposer que je suis en Irlande, c'est là que je filme en ce moment. Si je clique sur « Importer » ça me donne cette belle chose. En ce moment, par défaut, ça m'a donné le truc global et maintenant ça me donne réellement ce qui se passe en Irlande. Vous pouvez voir dans le monde entier qu'il est supporté à 90 pour cent , mais qu'en Irlande, il est supporté à 97 pour cent. Global prend dans tous les pays tandis que l'Irlande technologiquement assez moderne donc beaucoup plus va être pris en charge, les navigateurs assez modernes et les ordinateurs modernes. Maintenant, si vous faisiez un site qui est spécifiquement pour un pays en développement, vous allez avoir un ratio différent ici. Tu vas avoir beaucoup plus bas. Vous ne serez pas en mesure d'utiliser certaines de ces fonctionnalités autant que de dire que nous sommes venus ici en Irlande. Très bien, et c'est le site Web Can I Use. 19. Utiliser des artboards: Salut. Dans cette vidéo, nous allons regarder les plans de travail. Artboards est une nouvelle fonctionnalité qui est sortie dans Photoshop CC 2015. Maintenant, si vous utilisez une version ultérieure, cela fonctionnera bien. Si vous utilisez une version antérieure, il y avait pas de tableaux d'art en 2014. Ce que vous allez devoir faire, c'est que vous allez devoir utiliser des pages séparées. Mais si vous utilisez ma version ou une version ultérieure, s' agit essentiellement d'un moyen d'avoir plusieurs pages sur un seul document plutôt que de les séparer en documents Photoshop distincts. Pour le faire, allons dans Fichier, allons à Nouveau et choisissons Tableau d'art dans la fenêtre Nouveau document et mettons dans nos largeurs que nous avons discutées plus tôt en termes de taille physique de notre, commençons par notre vue Bureau. Notre bureau va être de 960 pixels, maintenant la hauteur n'a pas vraiment d'importance parce que les sites Web changent de hauteur en fonction du contenu. Je vais mettre, disons 1500 et cliquez sur OK. C' est mon premier plan de travail. Ça s'appelle Artboard 1 et vous pouvez voir mes calques ici. C' est un peu nouveau. Si vous avez l'habitude d'utiliser Photoshop auparavant, il existe un système de regroupement légèrement nouveau avec des tableaux d'art. Donc, je vais double-cliquer sur le tableau d'art un pour le renommer. Celui-ci va s'appeler bureau, et il aura 960 pixels de large. Super. Vous pouvez voir les changements de nom le long de la partie supérieure ici. Pour ajouter une autre vue, nous allons donc tous travailler sur une vue Tablet suivante. Il y a deux façons différentes de le faire. La façon la plus simple que j'ai trouvée est d'utiliser Calque, Nouveau, et d'utiliser celui-ci, qui dit tableau d'art. Celui-ci s'appellera Tablettes, et il sera 720 pixels de large. Je vais m'assurer qu'il dit 720 pixels ici et utiliser la même hauteur. Cliquez sur OK, et il le glisse à côté de lui. La dernière vue que nous allons faire est la vue mobile. On va aller à Layer, New. Nous allons aller au tableau d'art et nous allons choisir mobile et celui-ci sera 360 pixels. C' est juste le nom en haut. J' ai besoin de changer les pixels en bas ici et nous utilisons la même hauteur et nous allons cliquer sur OK. Nous avons donc une vue Tablet View, Desktop View et Mobile View tous à côté de l'autre. Maintenant, où cela devient très utile, c'est quand vous commencez concevoir sur les trois et que vous voulez vous assurer qu'ils sont tous cohérents. Disons que je vais utiliser mon outil rectangle. Je vais choisir une couleur d'échantillon ici, n'importe quelle couleur aléatoire et pas cette couleur. L' un des grands avantages de l'utilisation de tableaux d'art est le fait que je peux dessiner quelque chose qui est en fait assez loin ici. Vous voyez que c'est tout à fait au bord ici et je lâche prise, vous voyez qu'il descend à ma vue de bureau. C' est une belle petite fonctionnalité. La prochaine chose que je vais faire, c'est que je veux la même chose. Disons que c'est ma barre de navigation. Donc, je vais double-cliquer sur ceci comme ma grande barre de navigation le long du haut. J' ai double-cliqué sur le nom en bas et je l'ai renommé. Je veux maintenant le faire traverser. Maintenant, je vais revenir à l'outil Déplacer, il est un peu par défaut à cet outil Plan de travail lorsque vous travaillez avec des plans de travail. J' ai déplacé l'outil Move Tool et ce que je voudrais faire, c'est que je vais dupliquer la barre de navigation. Je vais cliquer avec le bouton droit de la souris et cliquer sur celui qui dit doublon. Je vais l'appeler Nav Bar. J' ai deux d'entre eux maintenant, je vais utiliser l'outil Déplacer et je vais cliquer sur maintenir et faire glisser sur la tablette. Ce qui peut arriver quand vous le faites glisser, je vais annuler ça juste pour vous montrer à nouveau, c'est que je vais faire glisser la barre de navigation croix. Au départ, il ne bouge pas réellement. Parfois, vous devez leur donner un peu de tremblement, juste pour le faire apparaître dans la vue de la tablette, puis je peux lâcher prise et c'est là dedans. Vous pouvez voir maintenant qu'il y a une barre de navigation dans mon affichage de bureau, et je l'ai dans ma vue de tablette. Donc, le dernier, je vais le dupliquer à nouveau. Dupliquer le calque, je vais l'appeler barre de navigation et dans la vue mobile, je vais cliquer sur le maintien et le faire glisser, puis lui donner un tremblement et il apparaîtra sur ma vue mobile. Maintenant, vous pouvez voir les avantages pour cela. Je vais les mettre là-dedans et si vous travaillez sur un document séparé et que vous devez passer de l'un à l'autre, c'est vraiment difficile à savoir, est-ce de la même couleur ? Est-ce que c'est aligné de la même façon ? Est-ce qu'il semble cohérent sur toutes les différentes vues et tableaux d'art est un très joli petit nouvel avantage pour Photoshop. Et c'est Artboards. 20. À propos de la hauteur des pages: Quand nous avons commencé à créer nos plans de travail, nous les avons tous fait une hauteur de 1500 pixels, je pense. Maintenant, regardons ma version finale ici et vous remarquerez que, disons ma vue de bureau ici par rapport à mon mobile. Mon mobile était beaucoup plus long et ma vue de bureau est en fait plus longue que ce que j'ai fait à l'origine maintenant aussi bien. Donc, pendant que vous travaillez, vous allez finir par changer un peu la hauteur de votre site Web pour s'adapter au contenu que vous allez y ajouter. Ce que vous ne savez pas encore, alors ça va changer au fur et à mesure que vous allez. Maintenant, pour changer ces hauteurs au fur et à mesure, vous voulez utiliser l'outil de plan de travail. Pour trouver le plan de travail dit, vous cliquez et maintenez enfoncé l'outil de déplacement et il est là. Voilà mon outil de plan de travail. Maintenant, pour dire que mon bureau pour le rendre plus long en cliquant sur le milieu, cela ne fonctionne pas vraiment, n'est-ce pas ? Je dois cliquer sur ce bord ici et le rendre un peu plus long. Alors cliquez sur le bord, vous obtenez le plan de travail et je peux le faire glisser vers le bas, et c'est tout. Ok, ça a rendu ma vue sur le bureau beaucoup plus longtemps. Vous pouvez évidemment le contracter aussi. Maintenant, ces petites poignées resteront à l'extérieur et jusqu'à ce que vous ayez glissé sur autre chose que ce plan de travail de haut niveau ici, cliquez sur ma barre de navigation et ils disparaîtront. Évidemment, vous pouvez le faire pour n'importe quelle page. Je peux ensuite aller à mon outil de plan de travail, assurez-vous que je clique sur le bord ici de mon appareil mobile et je peux faire dire cela beaucoup plus longtemps que je travaille, je vais finir, cliquez sur n'importe quoi d'autre à l'intérieur mes calques et ceux les petites fenêtres de transformation disparaîtront. Très bien, c'est ainsi que vous redimensionnez votre page Web à l'aide de l'outil de plan de travail. 21. Guides de page, colonnes et règles: Lorsque vous travaillez avec une mise en page réactive dans Photoshop, j'ai beaucoup utilisé les grilles de colonnes et guides de façon interchangeable. Parce que le terme global est appelé une grille, mais vraiment quand vous les regardez, ce ne sont que des colonnes. Pour définir ces colonnes dans Photoshop, nous utilisons des guides. Confuse ? Oui, en quelque sorte. D'accord. Jetons un coup d'oeil à la version finale de celui-ci. Vous pouvez voir ici, ces petites lignes bleues, ces lignes bleu clair sont des guides et ils m' aident à composer mes colonnes dans ma mise en page réactive. Si je retourne à mon document vide, comment faire un guide ? Comment faites-vous votre propre guide ? Allez à View, et vous devez vous assurer que quelque chose appelé les règles est activé. Ce que vous remarquerez, c'est, sur les côtés, le haut et le bas, que ces petites règles sont répétées. Ce que nous pouvons faire est n'importe où dans cette zone, ici nous pouvons cliquer maintenir, glisser, glisser, glisser, glisser, glisser. Ça jetterait un guide sur notre mise en page. Nous sautons une fois du haut aussi. Ce qui se passera lorsque vous travaillez avec le modèle téléchargé que je vous ai donné, c'est que vous pourriez avoir besoin de les déplacer, de les désactiver ou de les verrouiller. Regardons ça. Par défaut, votre modèle est probablement verrouillé. Les guides de votre modèle sont probablement verrouillés. C' est parce que je ne voulais pas que tu ailles détruire les guides. Mais si vous voulez les déplacer, les verrouiller ou les déverrouiller, allez dans Affichage, accédez à Verrouiller les guides. Ce que ça veut dire, c'est que je ne pourrai pas les déplacer. Je ne pourrai pas les déplacer beaucoup. Ils sont tous coincés là. Si je veux les déverrouiller, je décoche ça. Alors parce que ça change un peu, et je peux les déplacer après. Disons qu'il y a un guide dont je n'ai plus besoin. Ce que vous pouvez faire, c'est que vous pouvez le sélectionner. Pour le supprimer, cliquez sur Maintenir et faites-le glisser. Vous le faites glisser dans la règle où vous l'avez eue et elle disparaît pour toujours. Je vais supprimer celui-là et y retourner. Lorsque vous travaillez cependant, vous remarquerez, disons celui-ci ici, ces guides peuvent être assez distrayants. Utile quand vous êtes la première mise en page, mais assez distrayant plus tard. Ce que vous pouvez faire, c'est les allumer et les éteindre. Allez à View, il y en a un sous Show, et c'est celui-là appelé Guides. Maintenant, vous voyez ceci [inaudible] ici, c'est Commande et point-virgule ou Pot-virgule de contrôle sur un PC. [ inaudible] un peu. Quand je travaille, je dirige le point-virgule de commande pour les activer et les désactiver lorsque je travaille, parce que c'est beaucoup plus facile à voir et à obtenir un peu d'aspect visuel sans les guides. Mais structurellement, les guides sortent pleins. Cela sera [inaudible] sur la façon de créer, modifier et supprimer des guides. 22. Choisir les couleurs du site Web: Dans cette vidéo, nous allons regarder l'utilisation de la couleur. Maintenant, vous pouvez attaquer la couleur de quelques façons. Lorsque vous dessinez vos boîtes et coloriez des choses, vous pouvez utiliser ce petit panneau de couleurs ici. Ce que tu fais, c'est que tu fais glisser ça de haut en bas pour obtenir la teinte. Ensuite, nous déplacons ce petit cercle en cliquant et en le faisant glisser pour choisir la couleur. Vous remarquerez qu'à l'avant, il y a ma couleur de premier plan. Il est là aussi en bas. Si j'ai mon outil de type, vous pouvez voir ici ? Il utilisera la même couleur. Si j'utilise mon outil rectangle, il utilisera tout ce qui est dans cette couleur de premier plan, parce que regardez ceci, je peux le changer et toutes ces choses changeraient en même temps et je peux commencer à dessiner des choses et à faire de la couleur. Pour obtenir un peu plus technique, si vous travaillez sur une marque d'une entreprise qui a des couleurs spécifiques, vous devrez entrer ces couleurs, et vous pouvez le faire en créant ce qu'on appelle une nuance. Pour faire une nuance, nous allons d'abord choisir une couleur, et ce que nous allons faire, c'est, au lieu de faire glisser des choses, ce que nous allons faire est de double-cliquer sur la nuance ici et nous allons la taper. Si vous travaillez avec une marque qui possède des couleurs existantes, vous pouvez saisir les détails que vous connaissez. Si vous connaissez la couleur RVB, vous pouvez la taper, disons zéro, disons que c'est 200 , et 220, ça va me donner cette couleur, bleu clair, donc je sais exactement que c'est la bonne couleur. Vous pouvez également obtenir ce nombre ici à côté des hachages, le nombre hexadécimal. Donc, vous pouvez entrer ceci, et cela peut être trois ou six chiffres, selon ce que vous recevez. Maintenant, les deux travaillent. Si vous recevez les détails CMJN, vous pouvez les insérer ici également. Pour choisir cette couleur, disons que nous avons cette nuance magique dont nous avons besoin, nous pouvons cliquer sur celle-ci qui indique « Ajouter aux nuanciers ». Nous lui donnons un nom et appelons celui-ci l'exemple bleu. Ce que vous remarquerez, c'est que je vais cliquer sur « OK », se trouve dans mon panneau nuancier en bas de cette liste ici. Maintenant, il y a cette couleur ici appelée exemple bleu que je peux réutiliser encore et encore. Dites si je passe à une autre couleur parce que je l'utilise et qu'il va à cette couleur rose, violette, si je reçois mon outil de type maintenant et que j'ai besoin de faire un type qui est bleu, je dois juste m'assurer que je clique sur « Bleu » avant de commencer à taper et cela va le changer. Si je dois le changer par la suite, je peux sélectionner le type, puis choisir n'importe quelle nuance ici, et cela changera une fois que je reviendrai à l'outil de déplacement. Super. Pour les gens qui ne suivent pas un vrai grand guide pour les couleurs et que vous êtes capable de choisir vos propres couleurs, vous pouvez évidemment choisir les vôtres, mais parfois vous pouvez vous faire prendre sans savoir quelle couleur choisir, ce qui fonctionne avec quoi. Donc, ce que vous pouvez faire est d'utiliser quelque chose appelé Adobe Color. Maintenant, il est intégré à Photoshop. Allons à Fenêtre, jusqu'aux extensions, et celui-ci appelé thèmes Adobe Color. Ouvrez-le, vous devez être connecté au réseau et vous devez être connecté à votre compte Creative Cloud. Une fois que vous êtes ici, et ceci est un ici pourrait explorer. Pour m'inspirer, j'aime aller à celui qui dit le plus populaire, et c'est celui qui est le plus utilisé par les gens à travers ce petit système ici. Assez souvent vers le haut ici est un joli groupe de cinq couleurs que vous pouvez utiliser pour mettre en page votre site Web. Dans le cadre des thèmes de couleur quotidiens, vous pouvez également télécharger vos propres échantillons. Donc, si vous avez créé un thème d'entreprise et que vous souhaitez le partager avec d'autres concepteurs de l'entreprise, vous pouvez le télécharger dans des thèmes de couleur. Je ne vais pas le couvrir dans ce tutoriel, mais vous pouvez télécharger vos propres échantillons dans ces thèmes Adobe Color. Ce que j'ai fait pour vous, si vous tapez B-Y-O-L, appuyez sur « Entrée », vous trouverez les couleurs que j'utilise dans ce tutoriel que vous pouvez télécharger et utiliser. Maintenant, pour les télécharger et les ajouter à vos nuanciers, nuanciers contre Actions ici, déposez ceci et dit, « Ajouter à mes échantillons », et vous les verrez. Ils apparaissent tous juste du bas de mon panneau de nuanciers. Ce que vous verrez aussi, c'est, pouvez-vous voir qu'ils ont été ajoutés à ma bibliothèque ici ? Si vous utilisez une version antérieure de Photoshop, cette première partie fonctionnera, mais l'option de cette bibliothèque ne sera pas, nous sommes en 2015, cette option de bibliothèque est un excellent moyen de choisir les couleurs. Donc je vais le faire entrer et nous devrions tous travailler sur ces couleurs maintenant. Évidemment, à travers le magasin, vous pouvez choisir vos propres couleurs, mais si vous voulez suivre exactement, c'est la façon de le faire. 23. Structurer votre site grâce aux formes vectorielles: Très bien, dans ce tutoriel, nous allons simuler certains des grands types de zones structurées à l'aide de l'outil rectangle. L' outil rectangle, pour les personnes qui sont des concepteurs web, savent qu'il crée essentiellement des balises div que vous pouvez tirer le style et la taille, les couleurs et les choses à partir de plus tard. Vous devez vous assurer que vous utilisez cet outil rectangle ici. Si vous ne trouvez pas l'outil rectangle, cliquez, maintenez-le enfoncé, faites-le glisser vers le bas et que vous pouvez trouver les deux derniers U à l'aide de l'outil ellipse, vous devrez peut-être le maintenir enfoncé et saisir l'outil Rectangle. Ce que nous allons faire, c'est que si vous suivez le long en utilisant mon modèle, je vais, il y a une option ici, il est dit appelé Delete Me. Je vais vraiment supprimer cela parce qu'il se débarrasse de ces petites boîtes vertes. C' est mes petits morceaux de publicité là-bas. Je vais l'enfoncer et je vais zoomer un peu, commander plus et je vais zoomer afin de voir les bords de ma vue de bureau. Ce que je vais faire, c'est que je vais commencer à créer. D' accord. Donc ma première boîte va être mon grand type d'image de héros principal et je vais utiliser ce violet ici, donc je vais cliquer dessus ou la choisir dans ce panneau d'échantillons, et je vais cliquer sur Hold and Glisser. Ce que vous remarquerez, c'est que je peux glisser sur les bords, c'est mon problème et au repos, les bords là-bas. Si le vôtre est obtenu la mauvaise couleur comme la mienne a, il se souvient de la dernière couleur même si ma couleur de premier plan dit être cette belle nouvelle Bring Your Own Laptop Purple. Ce que vous pouvez faire est, il suffit de cliquer dessus à nouveau et il va dessiner et changer, ou si je vais annuler, je peux cliquer ici et choisir la couleur de mon panneau nuancier. Super. Ça va être mon grand genre d'image graphique de héros. Ce qui va faire maintenant, c'est que je vais ajouter ma barre de navigation. Donc, je vais utiliser à nouveau l'outil rectangle et je vais cliquer sur Hold et glisser sur le haut ici et je devine un peu. Ça va être ma barre de navigation. Ce que je veux faire, c'est le remplir de noir. noir est quelque part dans le haut de vos échantillons ici et vous pouvez l'utiliser d'ici. Je choisirai ça comme couleur de premier plan. Super, donc ça va être mon panneau de navigation. Ce que nous allons faire à la fin, c'est que nous allons avoir une image sous la navigation que nous pouvons encore voir. Ce que nous allons faire, c'est que nous allons faire sélectionner cette barre de navigation. La façon dont je sais qu'il est sélectionné, je peux le voir ici dans ma partie de calques. Ce que je vais faire est de double-cliquer sur le mot rectangle et d'appeler celui-ci, barre de navigation. Je vais l'appeler ici, Hero Graphic. Sur la barre de navigation ici, j'ai celui-là appelé opacité. Si je baisse un peu l'opacité, je suis peut-être descendu à environ 80%. Ce que vous remarquerez, c'est que si je l'abaisse vers le bas, pouvez-vous voir qu'il est en fait assez transparent sur le dessus de l'arrière-plan et c'est à vous de décider et combien voir à travers vous voulez qu'il soit. Nous le changerons probablement plus tard quand nous aurons notre image en dessous, mais pour le moment, c'est ainsi que vous changez l'opacité de n'importe lequel de vos rectangles. La prochaine chose que je vais faire, c'est que je vais mélanger ici. Pour ce tutoriel, nous allons sauter la tablette juste pour que le tutoriel ne dure pas 10 heures. Je vais faire une version mobile. Sur mobile, comment je sais que je suis sur mobile, vous pouvez le voir ici dans mon panneau de calques, est la version extra petite. Je vais aller dans ceci et supprimer où se trouve mon nom et mon site Web, supprimer cela, nous n'avons pas besoin de cela. Mais ce qu'on va faire, c'est qu'on va zoomer. Donc je vais fermer ça, le faire entrer, zoomer un peu. Ce que je veux faire, c'est prendre ces rectangles et les déplacer à travers. Je vais passer à mon outil de déplacement. Je vais utiliser mon truc que nous avons appris en début de vidéo, sur le maintien de la commande vers le bas. Je vais cliquer sur le rectangle qui est ma barre de navigation et je vais le faire glisser en maintenant la touche O et ce que le membre de touche O faisant glisser qui fera, c' est qu' il fera une copie pendant qu'il se déplace à travers. Pour l'obtenir dans la bonne fonction et le bon bit, vous devrez peut-être donner un peu de remuement mais il semble qu'il soit parfaitement aligné. Correct. Je vais déplacer celui-là aussi bien que celui-ci pourpre tenant la touche [inaudible] vers le bas. Il a sélectionné le graphique du héros. Maintenez la touche O et faites-la glisser à travers et je vais la déplacer pour qu'elle s'alignera parfaitement. Super. J'ai un léger problème où le graphique du héros est au-dessus de la barre de navigation. Tout ce que nous devons faire est, de changer l'ordre de ceci comme cliquez sur Hold and Drag le héros sous le Nav. Ok, donc j'ai mon bureau et ma vue mobile avec mes deux rectangles. Ces rectangles vont être utilisés comme la structure ou les balises div pour mon site Web. 24. Vidéo de production - ajouter une structure à votre conception web: Dans cette vidéo, nous avons examiné les bases de notre outil rectangle pour créer les boîtes structurées pour notre site Web. Ce que nous allons faire maintenant est de faire un peu d' une session où je passe par et j'ajoute toutes les cases. Vous pouvez nous regarder à double vitesse ou sauter si vous le voulez. Ce que je vais faire, c'est que j'ai ma première boîte ici. Ce que je vais faire est juste de dupliquer cette boîte encore et encore pour les différents domaines. Je vais utiliser mon truc pour le sélectionner, Hero Graphic. Je vais maintenir Alt et le faire glisser vers le bas. Je vais tenir Shift en même temps, et ça s'enclenche tout en dessous. Avec ce graphique ici, je vais appeler celui-ci. Je vais ouvrir cet outil ici, mon panneau Propriétés. Je vais choisir celui-là. C'est une sorte de couleur pêche. Celle-ci, ça va s'appeler la Boîte - Qui nous sommes. J' ajoute une boîte à l'avant juste pour le rendre clair à distance. Quoi. Je regarde les boîtes structurées. Je vais faire la même chose avec celui-ci. Je vais le traîner en dessous, et il est dans le panneau Propriétés. Voici le violet foncé, et voici la boîte. Voici la boîte de services. Je vais le retenir, le traîner vers le bas, et il sera la boîte de notre portefeuille. Nous n'avons plus le bord de nos pages. Changeons d'abord la couleur de lui. Voilà cette couleur. Maintenant, nous avons couru jusqu'au bord. Ce que nous pouvons faire, rappelez-vous, c'est prendre notre outil de plan de travail, s' assurer que nous sélectionnons sur la version de bureau, et je vais le faire glisser vers le bas. Maintenant, jusqu'où le faire glisser vers le bas. Je vais zoomer un peu. Qui sait au début ? Ce n'est pas tant que vous n'aurez pas tout votre contenu que vous savez à quel point il sera grand. Je vais le surdimensionner pour le moment, le rendre beau et grand. Ensuite, je vais retourner dans mon outil Déplacer, je vais cliquer sur lui, est le portefeuille de boîtes, et je vais maintenir la touche Alt enfoncée, faire glisser le dessous. En fait, ce morceau ici va être une grande zone blanche. Il doit avoir mon équipe ou mon équipe. Ce dernier morceau ici va être le vert. Celui-ci va s'appeler mon formulaire de contact. Puis juste en dessous, faites-le glisser vers le bas, je vais avoir cette dernière est l'une des couleurs non officielles, comme un gris foncé pour mon pied de page. Maintenant, c'est un peu grand, donc ce que je vais utiliser comme outil de transformation, alors Commande T, souvenez-vous. Commandement T. Je vais le rendre un peu plus petit. Ça va être mon pied de page. Maintenant, j'ai une idée approximative de la hauteur de la page. Je vais sucer la sauvegarde en utilisant l'outil Plan de travail, cliquez sur ce haut ici, et il devrait s'accrocher en bas là. Retour à l'outil Déplacer lorsque vous avez terminé. Maintenant que j'ai un bureau fait, je pourrais tout déplacer vers ma version mobile et commencer à installer celle-ci. Ce que je trouve, il est beaucoup plus facile de travailler sur un, puis une fois que vous en avez terminé un et fini et regardé tous les bugs de l'une des vues, est de commencer, disons, la suivante, puis de travailler dans vers mobile. Maintenant, beaucoup de gens qui commencent par mobile en premier, si c'est la priorité pour leur site Web, c'est certainement la voie à suivre. Il y a certainement beaucoup plus de défis à préparer tout pour mobile. Pour moi, mes sites sont principalement utilisés comme bureau, donc je commence par le bureau. 25. Zones de texte à largeur variable et fixe dans Photoshop: Dans cette vidéo, nous allons regarder le type ou le texte. La première chose que nous devons faire est de saisir l'outil Type et ensuite nous allons chercher quelques choses. Il y a certaines formes que le curseur peut changer en que vous voulez connaître. Par défaut, c'est ce carré ici, et c'est génial. Regardez ce qui arrive aux changements de curseur lorsque je suis devant cette boîte parce que j'ai le hiéroglyphique sélectionné ici, il change en cercle autour d'elle. L' autre, qui est la ligne pointillée. Maintenant, c'est vraiment ce que je cherche. Je veux vider un peu de ticks sur un calque par lui-même que je peux déplacer et travailler sur. Si je clique sur ce « Calque », ce qu'il va faire, c'est, il va transformer mon rectangle, mon hiéroglyphique, en une boîte de forme pour qu'il s'intègre à l'intérieur. Regarde ça. Si je clique sur « Inside », il va continuer à taper, et il va utiliser les bords de cette boîte, qui peut être un peu déroutant quand vous êtes nouveau. Pour sortir que je vais frapper « Escape ». Ça va se débarrasser de mon texto. Donc, ce que je veux faire est soit avoir quelque chose d'autre sélectionné, comme la barre de navigation, alors ce n'est rien sélectionné ou simplement taper le type plus bas et le déplacer lorsque vous avez terminé. Donc, ce que je vais faire est juste de faire sélectionner le tableau d'art global et cela me permettra de taper n'importe où en utilisant le curseur carré, et je vais vous montrer deux façons d'appliquer du texte. L' un est une zone de texte extensible et l'autre est une largeur fixe. Donc extensible signifie que je peux taper quelque chose et vous verrez qu'il continue à durer éternellement. Il va continuer à s'étirer à droite là. Maintenant, une autre façon de le faire, je vais appuyer sur « Escape » sur mon clavier, se débarrasser de ce texte et est de cliquer sur « Hold » et de faire glisser ce texte. Ce que cela signifie, c'est que ça va fixer la largeur. Cela signifie que lorsque j'arriverai au bord, il se cassera sur deux lignes ou autant de lignes qui s'adapteront. C' est donc les deux boîtes que nous allons utiliser lorsque nous travaillons avec Photoshop. Donc la première que nous allons faire, c'est que je vais encore frapper « Escape ». Je vais cliquer une fois et je vais taper notre logo. Ça va être le capital B-Y-O-L. Je vais le déplacer en utilisant mon outil de déplacement dans la barre de navigation ici. Si vous trouvez son caché là où vous ne pouvez pas le voir, c' est probablement parce qu'il est sur un calque inférieur. Pour déplacer les calques, cliquez sur « Maintenir » et faites-le glisser au-dessus de l'endroit où vous en avez besoin. Pour changer la police, c'est agréable et facile. Assurez-vous que vous êtes sur l'outil Type. Assurez-vous que vous êtes sur votre Type Layer et jouez avec les polices ici. Maintenant, si le vôtre n'est pas défini sur pixels et défini sur des points, vous devrez peut-être changer cela dans vos préférences, qui se trouve dans une vidéo antérieure. Il y a donc deux façons de le faire. Vous pouvez utiliser la liste déroulante et choisir certaines de ces tailles. Maintenant, je trouve très utile est en fait glisser celui-ci ici, pouvez-vous voir si je passe au-dessus de cette icône ici, cliquez dessus, faites-le glisser à droite ou à gauche, vous pouvez voir les changements de police en fonction de l'endroit où vous faites glisser. Droite pour aller plus haut, gauche pour aller plus bas. Disons que je vais en choisir 40 pour le moment, vous pouvez le taper. Donc, disons, je choisis 40 pixels dans le moment, et je vais utiliser l'outil de déplacement et le déplacer ici. Pour changer la couleur du texte, je vais m'assurer que je suis sur mon outil Type, je m'assure que je suis sur le calque que j'ai sélectionné, voici mon calque de type, et ici est où se trouve la couleur de la police. Je clique sur ce, je vais cliquer sur « Hold » et faire glisser ceci autour pour choisir la couleur que je veux. Je veux du blanc, donc je vais le faire glisser jusqu'au coin supérieur gauche, vous pouvez voir que je l'ai traîné là où il doit aller, vous pouvez voir que je l'ai traîné là où il doit aller, donc il est plus joint dans le coin là-bas. Définitivement réglé sur blanc, fff. Cliquez sur « OK ». Si vous voulez utiliser l'un de vos échantillons spéciaux, ce que vous faites est que vous cliquez dessus et ici vous pouvez voir la pipette apparaît et il choisira la couleur dont vous avez besoin dans les échantillons. Je vais y retourner et choisir le blanc et cliquer sur « OK ». 26. Comment concevoir à l'aide de polices sûres pour le web via Google fonts: La prochaine chose que nous allons faire est de changer nos polices. Maintenant, par défaut, la conception web old-school, vous n'aviez que quelques polices de base à choisir, comme Arial, Georgia et Times. Ce que nous pouvons faire maintenant, c'est que nous pouvons choisir une grande variété de polices maintenant. Il y a quelques méthodes pour le faire. Probablement le plus commun à faire est quelque chose appelé Google Fonts et c'est ce que nous allons faire ici parce que c'est rapide, c'est facile, c'est gratuit. Vous pouvez également utiliser Typekit, Adobe Edge Web Fonts ou Squirrel Polices. Il y a beaucoup de façons différentes de polices [inaudibles] sur votre bureau et sur votre site Web. La grande chose à savoir alors est que toutes les polices que vous avez sur votre machine ne seront pas converties et pourront être utilisées en ligne. Donc, la façon de vérifier est d'utiliser un service comme Google Fonts pour trouver une police que vous souhaitez utiliser. Alors faisons ça. Passons aux polices Google. Donc google.com/fonts. Google a beaucoup de polices d'utilisation commerciale que nous pouvons utiliser. Ce que je vais faire, c'est que je vais chercher une police. Donc, je vais utiliser le texte d'aperçu de BYOL, parce que c'est la police que je cherche. Je vais passer par là et choisir une police. Maintenant, je vais utiliser Roboto comme police de copie corporelle. Il y en a un autre qui s'appelle Roboto Slab que je vais utiliser pour mes titres. Pour pouvoir utiliser ces polices Web sur votre bureau via Photoshop, qu'elles pourront ensuite être utilisées sur votre site Web, ce que vous devez faire est de choisir l'une d'entre elles, cliquez sur « Ajouter à la collection ». Je vais utiliser une autre police. Je vais taper Roboto ici. Il y a une autre police appelée Roboto Slab que je veux utiliser et je vais l'ajouter à la collection. J' ai donc ajouté deux à ma collection, la normale, Roboto normal et cette dalle Roboto. Maintenant, ce que nous allons faire est de cliquer sur « Utiliser ». Maintenant, nous allons juste choisir les bases, la version normale. Ce que je veux, c'est que je veux une version légère et j'aimerais une version audacieuse. J' aimerais bien celui-là, une version légère. Une version légère et une version audacieuse. Maintenant, plus vous ajoutez de polices, vous pouvez les ajouter et les télécharger. C' est très bien pendant que vous travaillez sur votre maquette Photoshop. Mais ce qui se passera, c'est que s'ils doivent tous être utilisés sur votre site, cela va ralentir le chargement de la page. Comme vous pouvez le voir ici exactement ici, Google me donne un petit compteur de vitesse, sachant que celui que j'ai est dans la zone verte, comme dans elle va charger assez vite. Si vous commencez à devenir orange, cela va ralentir tout de suite, et le rouge est beaucoup trop de polices téléchargées pour une page, et cela aura trop d'impact sur votre temps de chargement de page. Une fois que vous les aurez, nous allons les télécharger pour les utiliser sur notre machine. Pour ce faire, il y a cette petite flèche en haut. Voici un petit bouton Télécharger. Je vais télécharger cette collection en tant que fichier Zip, et je vais la coller sur mon bureau. Maintenant, pour vous les gars, si vous voulez suivre, j'ai déjà les polices prêtes pour vous aller et téléchargé déjà dans les fichiers d'exercice. Téléchargez donc les fichiers d'exercice et vous devriez les trouver dans le dossier polices. Maintenant, pour installer les polices sur votre ordinateur, cela dépend si vous êtes sur un Mac ou un PC. Essentiellement, ils sont les mêmes. Si vous avez un PC moderne, ou un Mac moderne, il vous suffit de double-cliquer sur les polices et elles s'installeront. Donc, c'est la police que je viens de télécharger à partir de Google Fonts. Si vous cherchez les mêmes choses, elles sont toutes ici, dans vos exemples de fichiers, si vous ne voulez pas passer par les tracas de les télécharger. Je vais double-cliquer sur le fichier Zip, il l'ouvre. Voici mon petit dossier de polices et voici les deux groupes de polices. Je vais faire basculer ça. Ce que je veux faire, c'est que je vais sélectionner tous ces éléments, et je vais double-cliquer sur eux. Ensuite, je clique sur « Installer ». Mon petit Mac va s' éloigner et installer toutes ces polices ici. Peut-être venu avec une erreur maintenant juste pour dire que le déjà installé, parce que je l'ai déjà fait avant ce tutoriel. Le tien ne les aura pas. Fermez mon dossier de polices. Je vais devoir faire la même chose pour Roboto Slab. Sélectionnez tous ces éléments, double-cliquez dessus et ils seront tous installés. Maintenant, sur un PC, c'est un processus vraiment similaire. Si vous ne savez pas comment les installer sur votre ordinateur, laissez-moi un message ou recevez un peu Google et voyez comment vous pouvez les installer sur votre machine. Maintenant, jetons un coup d'oeil dans Photoshop maintenant. La bonne chose à propos de Photoshop est que vous n'aurez pas à le redémarrer, ni à redémarrer votre ordinateur, ou quoi que ce soit comme ça, Photoshop récupère vos nouvelles polices. Vous pouvez voir ici mes polices Roboto, et elles sont prêtes à être utilisées dans mon design. Sachant que nous utilisons Google Fonts, c'est une police que nous pouvons utiliser en ligne pour notre site Web à la fin. 27. Texte de remplacement avec Lorem Ipsum: Cette vidéo, nous allons regarder quelque chose appelé Lorem Ipsum. Tout le temps, lorsque vous concevez un site Web, peut-être que le texte n'est pas écrit, ou qu'il est écrit en même temps. C' est assez souvent que vous devez mettre dans le texte factice ou placer le texte du détenteur. Ce que les gens ont tendance à faire est d'utiliser quelque chose appelé Lorem Ipsum, et il est intégré dans Photoshop pour que nous puissions l'ajouter. Je vais zoomer sur mon bureau et autour. Ce que je vais faire, c'est que je vais mettre dans une boîte de largeur fixe, et je veux qu'elle corresponde à ma chanson de colonne, et je vais à « View », et allume mon « Show », « Guides ». Zoom arrière un peu. Je voulais m'étendre sur quatre d'entre eux au milieu, peut-être six. Je vais attraper l'outil de type, puis cliquez sur Maintenir et faire glisser. Je vais ajouter une boîte de type qui couvre six de mes colonnes. Je vais choisir une taille de police appropriée et peut-être 16 pixels. Ce que je veux faire, c'est aller à « Type » et je vais aller à « Coller Lorem Ipsum ». Essentiellement, ce qu'il fait est juste de jeter dans un peu mélangé de mots latins. Il y a des mots latins réels, mais ils ne signifient rien dans le flux de textes là-bas. C' est un bon moyen rapide de vider beaucoup de textes supplémentaires. Ce que vous remarquerez cependant, c'est que la boîte est plus de six. Cela signifie qu'il y a plus de textes est un peu gentil, un peu plus que vous ne pouvez pas vraiment voir dans le coin inférieur ici. Mais sachez que si je supprime ça, pouvez-vous voir qu'il y a beaucoup de choses supplémentaires sur les bords. Selon le montant dont vous avez besoin, vous devrez peut-être supprimer certains d'entre eux. Vous ne pouvez pas vraiment vider dans un montant défini, il se contente de vider dans un montant prédéfini. 28. Vidéo de production - ajouter tout notre texte: Ceci est une vidéo de processus, donc je vais passer par et commencer à coiffer mon site Web. Tout d'abord, le calque Apportez votre propre ordinateur portable ici, le logo. Vous avez un logo, évidemment, vous serez en train de s'estomper dans le logo de l'entreprise.. Ce que je vais faire, c'est que je vais avoir ce type assis à côté de cette colonne ici. Maintenant, si vous déplacez les choses autour et il essaie de s'accrocher à trop de choses, il s'est accroché à l'autre guide là ok, vous pouvez utiliser vos touches fléchées gauche et droite sur votre clavier juste un tapotez choses le long et les obtenir au bon endroit. Je vais choisir une police. Lorsque le calque est sélectionné, accédez à l'outil de type. Je vais utiliser mon Roboto. Je vais utiliser la dalle, je vais utiliser la version en gras pour cela. Quelle est la taille de la police ? n'y a pas de taille de police garantie. Je vais l'utiliser ici, taper un peu en utilisant mes touches fléchées. Maintenant, je vais regarder à ajouter mon panneau de navigation, qui est par ici. Je vais prendre l'outil de type, je vais l'obtenir pour qu'il s'étende. Nous avons beaucoup de place pour travailler, donc je vais l'obtenir pour qu'elle couvre cette colonne pendant toute la durée. C'est combien ? Environ neuf colonnes. À l'intérieur, je vais zoomer un peu et je vais taper chez moi. Si, comme moi, vous ne voyez pas votre texte et qu'il a disparu, c'est parce que la police est vraiment grande. Tu te souviens de la police de la dernière chose que nous faisions ? C' est pour ça que je l'élargis ici. Ici, il est là. Mais s'il est petit et que vous ne pouvez pas le voir parce que la zone de texte est trop petite, développez simplement la zone, sélectionnez tout le texte et faites-la une taille appropriée. Je vais mettre le mien à 12, en fait, peut-être 16 pixels pour le moment, et ensuite je peux le déplacer de nouveau pour que je puisse le voir. Pour le texte ici, je vais utiliser des majuscules. Ce premier ici va être SERVICES, puis je vais mettre un espace entre eux. Je vais mettre deux onglets entre les miens. Le prochain sera PORTEFEUILLE, deux onglets. Maintenant, en termes de devrais-je utiliser des onglets ou des espaces ou devraient-ils être dans des boîtes séparées, cela n'a vraiment pas d'importance parce que c'est juste un visuel. Quand il s'agit de web design, ils devront être séparés correctement, mais pour le moment, c'est à vous de décider ce que vous utilisez pour les espacer. Maintenant laisse peut-être aller 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Je vais copier cela, sélectionner à travers le copier afin que je sache que l'espacement ici est exactement 10. Ensuite, je vais utiliser TEAM, mettre le même espacement, et ensuite nous allons avoir un CONTACTUS. Ce que je veux aussi faire, c'est que je vais sélectionner tout ce texte et je vais le faire en haut ici pour être aligné à gauche donc il est toujours aligné à gauche le long de cette grille de colonne là-bas. La taille de la police est bonne, mais le style de police je vais revenir à notre ancien Roboto simple. Je vais sélectionner ce texte ici, taper Roboto, et maintenant je vais juste utiliser le médium pour le moment. Je vais éteindre mes grilles en utilisant Command, point-virgule. Pour en avoir une idée, je vais zoomer un peu. Je n'aime pas le texte. Au lieu de moyen, je vais choisir la version légère. J' aime ça plus gentil. Maintenant, la prochaine chose que nous allons regarder, nous allons mettre un gros titre au-dessus de ce morceau de lorem ipsum ici. Je vais trouver le lorem ipsum dans mon menu, faites-le glisser vers le bas. Je vais utiliser mon outil de type. Je vais dessiner une boîte de largeur fixe parce que je veux qu'elle soit assise à l'intérieur d'ici. Même lorsque vous faites glisser des zones de texte, vous devriez utiliser les grilles pour aligner les choses, en utilisant ces colonnes, juste que cela rend beaucoup plus facile quand il s'agit de temps de développement. C' est quoi, celui-là ? Je vais m'assurer que c'est centré. Celui-ci va être, Rendons ça génial. En sélectionnant le texte, faites-le une belle taille. Quand je dis gentil, approprié pour celui-là, un beau, grand, super graphique. Je vais choisir Roboto, et j'utiliserai la dalle. Je vais utiliser mince pour celui-là. En termes de couleur, je vais utiliser l'un de mes échantillons que j'utilise. En bas, je vais utiliser cette couleur ici. Comment le faire, avec elle sélectionnée, j'ai cliqué sur « Swatch » ici et qui a éteint la couleur. Je vais éteindre mes guides. Je vais déplacer ça vers le bas. Ce texte ici, je voudrais qu'il soit centré aussi. Je vais prendre mon outil de type, cliquer à l'intérieur, et je vais vous rendre centré. Si vous rencontrez des problèmes avec cette césure, vous pouvez cliquer sur cette icône ici, qui fera apparaître votre panneau Caractère, vous pouvez basculer vers Paragraphe et désactiver la césure, si vous rencontrez des problèmes avec césure. Je déteste la césure. Revenons en arrière. Disons que, pour ce texte, ce ne sera en fait que trois lignes. Je vais essayer de faire en sorte que le rédacteur travaille trois lignes pour celui-ci, et je vais le déplacer un peu vers le haut, attrape « Let's Make » vers le bas. En fait, un petit peu que j'ai oublié c'est que je vais ajouter un joli bouton d'appel à l'action ici. Je vais à mon outil de type et je vais cliquer une fois, et celui-ci va s'appeler le Plus, j'ai un plus. Quel texto vais-je choisir ? Je vais le rendre un peu plus petit, peut-être une trentaine. Je vais le rendre beaucoup plus lourd, audacieux. Je vais le rendre blanc, placer le truc ici. Je vais prendre mon outil de rectangle. Ça va être au-dessus de ce type, mais on peut changer les couches dans une seconde. Mais ce que je veux faire, c'est allumer mes guides, Commande, deux-points. Je vais faire claquer celui-ci entre ces deux centres. De quelle couleur est-ce que ça va être ? Je vais choisir mon vert. Je veux m'assurer que More est au-dessus de ce rectangle. Je vais donner un nom à ce rectangle et appeler celui-ci BT, donc je sais que c'est un bouton. Celui-ci va être le bouton Plus. Je vais saisir mon texte Plus, saisir mon outil de déplacement et le déplacer. N' oubliez pas que si vous ne parvenez pas à entrer dans la ligne, utilisez simplement votre curseur pour la déplacer. Tout doit être déplacé un peu vers le haut. Pour ce faire, je peux maintenir ma touche Commande enfoncée et j'en ai déjà plus sélectionné. Maintenez la touche Commande enfoncée, cliquez sur le bouton « Plus ». Faisons de ce Impressionnant et Loren ipsum. Ce sont les quatre parties que je veux déplacer, et je vais cliquer et le faire glisser vers le haut. Rappelez-vous, si vous n'êtes pas sûr de s'il s'agrippe aux mauvais points, peut-être que vous pouvez simplement utiliser votre touche fléchée juste pour taper dessus et taper dessus. Éteignez mes guides. On y est presque. Ce More est un peu gros. Reprenons ma couche More, attrapons mon outil de type, baissons-le à 24. Joli. Déplace-le un peu, on y va. 29. Ajuster les bords de vos pages: Avant d'entrer dans les images, je vais vous montrer, je trouve difficile de travailler à la taille de mesure exacte, les 690 pixels de large. C' est exactement ce que nous devrions travailler aussi, mais j'ai besoin de voir un peu de tampon autour des bords ici, un peu de vieillissement juste pour voir ce que c'est quand il est assis à l'intérieur d'un plus grand écran. Pour ce faire, je vais saisir l'outil de plan de travail qui se cache sous l'outil Déplacer. Je vais cliquer sur celui-ci ici où il est écrit LG Desktop, et je vais faire défiler vers le bas jusqu'à ce que j'arrive au milieu, mais je vais faire glisser ça un peu. Faites glisser ça un peu. Peu importe jusqu'où, parce que ce qui va se passer, c'est que si je rallume mes guides, vous verrez le guide où ils devraient être. Ils sont encore 960 de large, y compris le rembourrage à l'extérieur. La prochaine chose que nous devons faire est que nous avons beaucoup de boîtes ici ne sont pas de la bonne taille. Ce que je vais faire, c'est que je vais faire défiler vers le bas et trouver ma barre de navigation. Je vais maintenir la touche de commande enfoncée sur mon Mac ou la touche de contrôle sur un PC, et sélectionner toutes les cases que j'ai besoin d'aller et de changer. Il y a le pied de page. Je vais zoomer un peu pour que je puisse tout voir, et ce que je vais faire, c'est que je vais utiliser mes outils transformés se souvenir de la commande T sur le Mac et contrôler T sur un PC. Ensuite, je vais les traîner pour correspondre aux côtés de tout fait Alt, ça va traîner les deux côtés avec moi uniformément, ok. Assurez-vous juste qu'ils se chevauchent un peu sur le bord là-bas. Lorsque vous avez terminé, appuyez sur Entrée sur votre clavier, et nous donne juste un peu plus de marge de respiration. Je vais éteindre nos guides, ce qui est toujours parfait. Je vais trop zoomer un peu. Cela va juste me donner une petite place de respiration autour l'extérieur avant que je commence à travailler sur la partie suivante. 30. Où obtenir des images gratuites à usage commercial: Dans cette vidéo, nous allons voir où obtenir des images. Maintenant, quand vous faites des concepts, vous pouvez dire que vous travaillez pour vous-même et que vous n'avez pas budget pour l'imagerie payante ou pour faire travailler un photographe, vous pouvez trouver des images gratuites, des images usage commercial. C' est probablement le meilleur site ici, il s'appelle freeimages.com. Maintenant, si je veux une image dire de briques, est-ce que je l'ai bien orthographié ? Vous trouverez des tas d'images gratuites pour les briques. Maintenant, vous devez faire attention à ce que ceux-ci ici, eh bien, pas prudent, ceux-là sont payés. Donc ceux-ci ont toujours l'air très joli et sexy, mais ceux-ci sont téléchargés depuis iStock. Mais tu dois payer. Les prix sont raisonnables, mais si vous voulez gratuit, nous en avons besoin ici. Ce que j'aime faire n'est pas pertinent, mais probablement le plus téléchargé tend à être ceux qui viennent au sommet sont ceux qui sont mieux tirés, meilleure qualité, peut-être ceux que vous pourriez vouloir utiliser plus. Vous devrez vous connecter pour les télécharger et les acheter. Dites que vous voulez cela avec un look de brique. D' accord. Vous pouvez les télécharger et, en fonction de la taille qu'ils ont initialement été téléchargés, vous pouvez les télécharger. Vous devrez donc vous connecter et le télécharger. Il est gratuit de se connecter et c'est un excellent moyen d'obtenir des images en stock gratuites. Maintenant, si vous voulez des images payantes, iStock est probablement le meilleur endroit où aller. Il y a beaucoup de concurrents à iStock. Adobe a leur propre en ce moment appelé adobe.stock, mais celui-ci est un vrai typique à utiliser pour beaucoup de gens. Jusqu' à présent sur les briques ici, vous trouverez la qualité est beaucoup meilleure, vous trouverez la résolution est assez supérieure à l'image libre. Maintenant, disons que je veux ce travail de brique ici, j'ai décidé que c'est le fond que je veux utiliser. Il viendra avec combien de crédits va prendre. Celui-ci va me coûter trois crédits. Alors que dire si je suis allé à quelque chose comme celui-ci ici, celui-là je suis allé à celui-ci est un mérite. D' accord. Environ C3 crédits est de 24 euros. Maintenant, si vous êtes aux États-Unis, l'euro est à peu près le même pour le moment, pas exactement, mais assez proche pour la comparaison. Il y a un budget pour la plupart des petites entreprises. Donc, pour le rendre facile, j'ai téléchargé un tas d' images gratuites que vous pouvez utiliser pour ce tutoriel particulier. Alors téléchargez-les si vous ne l'avez pas à partir des fichiers d'exercice et nous allons continuer à importer. 31. Intégrer ou lier vos images ?: Dans cette vidéo, nous allons voir comment apporter des images. Maintenant, il y a plusieurs façons d'apporter des images de différents programmes. Les moyens les plus simples sont d'aller dans Fichier et vous avez ces deux : Placer Embedded ou Placer Linked. Maintenant, nous allons utiliser Place Embedded. C' est certainement une meilleure façon de travailler lorsque vous débutez dans le design web ou que vous êtes nouveau dans Photoshop. Les fichiers liés peuvent être très pratiques si la taille de votre fichier devient vraiment élevée. Ils n'ont pas tendance à devenir super élevés lorsque vous avez affaire à la conception Web parce que la résolution n'est pas énorme et il n'y a pas beaucoup de détails à certains des effets que vous faites. Mais jetons un coup d'oeil à la différence. Accédez à vos fichiers d'exercices Web Photoshop. Je vais ouvrir ce qui s'appelle des livres d'images et je vais le placer dans. Il entre, tu peux le redimensionner, je vais le laisser exactement comme il est entré et a frappé « Retour ». Maintenant, vous le verrez dans mon panneau Calques ici, il s'appelle des livres d'images. Mais ce qui s'est passé, c'est qu'il est mis à l'intérieur de ce document et qu'il sera transporté partout. Si j'envoie à quelqu'un mon document Photoshop, il va venir pour le tour. Maintenant, si je le fais dans l'autre sens, si je vais à Placer Lié, si je vais à Placer Lié, ce qui va arriver, c'est que l'image va entrer, ça va ressembler, j'ai frappé « Enter », j'ai deux images de la même façon. Vous verrez les changements d'icône, celui-ci a une petite icône de liaison. Cela signifie simplement que si j'envoie maintenant ceci, disons, à mon concepteur ou à mon développeur web pour construire, ils n'auront pas les images à moins que je les envoie séparément. Je vais avoir besoin de cette image books.JPEG pour envoyer, tandis que celle incorporée est coincée dans le fichier et c'est un peu plus facile à partager. L' autre problème que vous devez surveiller pour ceux liés comme celui-ci est si je vais sur mon bureau maintenant et je vais supprimer des livres d'images, vous pouvez voir ici, il y a un petit point d'interrogation. Ça veut dire que, hé, je flippe parce que j'ai perdu cette image ici. Il arrivera avec l'erreur en disant : « Je ne peux pas le trouver, je ne sais pas où il est. » Il est donc un peu plus facile au début d'utiliser embarqué. La raison pour laquelle vous utiliseriez des images liées est que si vous utilisez cette même image encore et encore dans beaucoup de fichiers. Vous ne voulez pas vraiment avoir beaucoup de copies partout, prenant beaucoup de taille de fichier. Il peut également être que nous travaillons sur un document vraiment complexe avec beaucoup d'images intégrées, il peut commencer à fonctionner très lentement. Si vous avez un vieux ordinateur portable terrible que vous utilisez, c'est quelque chose que vous pourriez vouloir considérer. Pour le moment cependant, je vais supprimer cette couche ici et laisser celle qui a été incorporée. 32. Comment masquer votre image à l'aide d'un masque d'écrêtage ?: Dans cette vidéo, nous allons voir comment utiliser un masque d'écrêtage. Maintenant, un masque d'écrêtage est un excellent moyen de recadrer une image vers le bas pour l'utiliser. Voyons à quoi ressemblera ce produit final. C' est l'image carrée ici. Je vais vous montrer comment faire ça avec ce qu'on appelle un masque de coupe. La première chose est d'éteindre ce globe oculaire sur notre couche de livres d'images, et ce que nous faisons est de commencer par un rectangle. Je vais rallumer mes guides, Commandement Colon. Je veux qu'elle s'étende, disons quatre guides ici. Je veux être un carré parfait, donc ce que je fais est que je maintiens Maj enfoncée pendant que je le fais glisser, et pouvez-vous voir qu'il verrouille la hauteur et la largeur le long. Je vais le traîner pour qu'il s'adapte à ces quatre. Maintenant, peu importe la couleur que nous allons utiliser pour le moment, parce que le masque d'écrêtage n'a pas d'importance. Je vais utiliser mon outil Move et je vais le déplacer un peu vers le bas. C' est au centre de ma boîte, et ce que je veux faire maintenant, c'est que je vais le faire entrer et que je vais retourner mon image. Maintenant, mon image doit être un peu plus d'une taille appropriée pour ce carré. Avec un sélecteur de calque, je vais utiliser mon outil de transformation, commande T. Eh bien, contrôle T sur un PC et je vais maintenir la touche Maj enfoncée sur les coins, pour verrouiller la hauteur et la largeur. Sinon, il finit par l'étirer et le déformer. Je vais utiliser la touche Maj vers le bas. Je ne suis pas trop inquiet que ce soit parfait ici, je vais le recadrer pour effet. Je vais entrer quand sa transformation sera terminée. Ce que je dois faire, c'est que je dois m'assurer que l'image est au-dessus de mon rectangle. Je vais renommer ce rectangle et appelons ça le Who- Image, donc ma page Who Yeah. Ce dessous, maintenant ce que je veux faire, c'est recadrer ce type, qui est l'image sur les livres à la place. Pour ce faire, le moyen le plus simple est avec le calque d'image sélectionné, maintenez la touche Alt. Pouvez-vous voir cette petite icône ici avec la boîte avec la flèche ? Cela va tourner l'image supérieure et l'image inférieure, et les joindre ensemble et faire un masque d'écrêtage. Vous pouvez voir ce qui s'est passé dans la structure ici dans les couches, et vous pouvez voir ce qui s'est passé ici dans mon image réelle. Je vais éteindre mes guides pour le rendre joli. La beauté de ça, c'est que cette boîte de Who en dessous et cette image, ils sont en fait séparés pour que je puisse les déplacer. Ce que je peux faire est, disons que la boîte que je veux recadrer légèrement différemment et que je n'ai pas sélectionné ici. Regarde ça. Avec mon outil Déplacer, je peux le déplacer et vous voyez que je peux le déplacer et l'ajuster. C'est comme une petite fenêtre. De même, l'image ci-dessous peut être déplacée, la boîte autour peut être déplacée pour trouver où nous devons aller. Maintenant, ce que vous voulez faire attention, c'est si vous voulez les déplacer tous les deux ensemble, vous devez maintenir la touche Commande enfoncée et cliquer sur les deux. Avec les deux sélectionnés, je peux les déplacer. Maintenant, si vous voulez les déplacer ensemble de façon permanente, eh bien, maintenant je vais devoir les sélectionner tous les deux. Est-ce que vous pouvez faire un clic droit sur ces deux. Après la sélection et il y en a un ici, c'est Lien Layers. Vous voyez cette icône de liaison apparaît, signifie simplement que si j'ai, dites mon arrière-plan sélectionné, puis revenez en arrière et cliquez sur un de ces deux gars, vous pouvez voir juste un d'entre eux sélectionnés, ils venir pour le tour, parce que les ont été liés. Si vous devez les dissocier, cliquez avec le bouton droit de la souris, et il y en a un ici qui dit : Délier les calques. Je vais laisser mon lien pour le moment. 33. Masquage d'images pour les coins arrondis et les cercles: Cette vidéo est la même technique mais une saveur légèrement différente. Nous allons regarder à l'aide d'un masque de coupe, mais en utilisant des cercles et des coins arrondis. Maintenant, voir en bas ici est mon exemple fini. Je vais le faire en bas dans cette partie blanche, où j'ai les photos de mon équipe. Ce que je vais faire, c'est que je vais faire défiler ici en utilisant ma barre d'espace. Je vais zoomer en utilisant ma commande plus. Lentement descendre le fond. Je vais cliquer sur l'outil rectangle enfoncé. Cliquez et maintenez-le enfoncé jusqu'à ce que j'accède à l'outil Ellipse. Maintenant, l'outil Ellipse, si je clique et fais glisser dessus, ça va me donner une ellipse qui va n'importe où. Maintenant, si je maintiens la touche Maj enfoncée, rappelez-vous, j'ai verrouillé la largeur haut de gamme à la taille dont j'ai besoin. Ce que je vais faire, c'est que je vais allumer mes guides et je vais supprimer cela. Je vais en dessiner un qui s'étend, disons, sur trois colonnes. Je vais tenir le quart, vers le bas et je vais l'obtenir pour qu'il s'accroche à ces trois. Je vais aller à mon outil Move, je vais le déplacer un peu vers le bas. Maintenant, peu importe la couleur que c'est parce que tout comme nous l'avons fait la dernière image, va être couvert par l'image. Allons à Fichier et passons à Place Embedded. On va prendre le bureau, on va prendre des fichiers d'exercices de push-up. Cette équipe 1, qui va être la première. Je vais frapper Place. Maintenant, je vais le déplacer donc il est au-dessus du haut ici, et je vais maintenir Shift, l' échelle vers le bas avant d'appuyer sur Entrée juste pour l'obtenir à la taille appropriée. Je vais l'emménager à peu près là. On peut le redimensionner ensuite. Souviens-toi, voici une ellipse, et celle-ci sera Team Circle1. Je vais, rappelez-vous, maintenir ma touche Alt enfoncée sur un PC ou une touche Option sur un Mac, et il va rejoindre les deux. Si vous n'êtes pas satisfait de la récolte, rappelez-vous, je clique sur celui-ci, c'est l'équipe 1, et je peux utiliser mes touches fléchées juste pour taper dessus pour l'amener là où je veux. Je peux le transformer en utilisant mon Command T. Je peux le mettre à l'échelle. Appuyez sur Entrée. Utilisez mes clés juste pour tapoter à nouveau. C' est comme ça que tu découpes en cercle. Je vais rapidement faire comment vous recadrez à un coins arrondis. Si vous utilisez des coins arrondis, cliquez et maintenez enfoncé l'outil Rectangle ou Ellipse, et il y en a un ici appelé coins arrondis. Maintenant, avant de commencer, choisissez un rayon. Si vous n'êtes pas sûr, ne vous inquiétez pas, vous pourrez le changer par la suite. Je vais cliquer et faire glisser. Cette petite boîte ici me permettra de changer les angles de rayon. Je vais changer les coins de rayon pour dire quelque chose comme 30. Grand désordre des coins arrondis. Ensuite, je peux apporter une autre image. Je peux aller à Fichier, Place Embedded. Je vais amener l'équipe 2. Placez-le sur le dessus, réduisez-le, appuyez sur Entrée. N' oubliez pas que vous maintenez la touche Alt ou Option enfoncée, selon que vous êtes un Mac ou un PC, et qu'elle se recadrera au rectangle des coins arrondis. C' est comment recadrer à un cercle et un rectangle avec des coins arrondis. 34. Comment créer de grandes images d'arrière-plan: Dans cette vidéo, nous allons voir comment créer une image d'arrière-plan. Maintenant, les images d'arrière-plan ont tendance à être assez délavées ou assombries. Pour le moment, c'est assez élégant, et ils semblent remplir l'ensemble de l'arrière-plan en utilisant 100% d'étirement et de couverture CSS. Regardons ça. Je vais désactiver mes guides, je vais aller à Fichier, Place Embedded, sous notre PS Web Exercices Fichiers, trouver celui qui dit, background-brik-building et apporter celui-ci. Maintenant, en termes de taille, il va s'adapter, mais ce n'est pas assez grand. Ce que je vais faire, c'est que je vais l'augmenter. mise à l'échelle dans Photoshop est une chose terrible à faire. Mais je vais vous montrer quelques techniques à cacher si ça ne spécule pas. Celle-ci n'est pas parce que c'est une image raisonnablement bonne et qu'elle augmente plus à environ 120 pour cent, donc ça va se passer. Je vais cliquer sur Entrée. La prochaine chose que je veux faire est que je veux le clipser, qu'il soit coupé à cette boîte violette ici. Je vais superposer celui-là, et je vais trouver que mon fond s'appelle l'image du héros. Ce que je vais devoir faire, c'est le faire glisser pour qu'il soit au-dessus de cette boîte appelée Box-Hero Graphic. Je vais le faire glisser vers le bas, l'échelle, l'échelle. Maintenant, ce que vous trouverez, c'est qu'il peut être un peu pénible de l'amener à la bonne partie. Ce que vous pouvez faire, c'est que vous pouvez les effacer ici, comme cette bibliothèque, je n'ai pas utilisé ça depuis un moment. Je vais double-cliquer sur l'onglet Bibliothèques, je vais double-cliquer sur le type Nuancier, juste que mes calques sont beaux et grands. Je peux travailler dessus et il est plus facile de les traîner. Mon background-brique-building est au-dessus de ma boîte ici sur le graphique, puis je vais maintenir enfoncée la touche Option sur un Mac ou Alt sur un PC pour le recadrer. Ce que j'aimerais faire, c'est, avant que je le fasse, je vais annuler ça, donc c'est un pas en arrière. Je vais éteindre cette couche, et au lieu d'être violet, ce que je vais faire, c'est que je vais la rendre noire. Avec cette sélection, je vais aller à ce panneau s'appelle les Propriétés, et je vais sélectionner le noir dans mes couleurs. Je vais le faire parce que quand j'allume celui-ci, je vais le rendre en fait un peu transparent, donc ça commence à montrer la couleur en dessous. Plus tôt, quand nous avons fait couper des vidéos, j'ai dit que peu importe la couleur des boîtes parce que vous allez utiliser une image sur le dessus pour le clipser. Ça n'a pas vraiment d'importance. Dans ce cas, c'est parce que je vais rendre cela légèrement transparent. Je vais maintenir Alt ou Option enfoncée, et il va recadrer à ce graphique ici. Cette boîte ici, notre labo graphique. Ce que j'aimerais faire, c'est rendre celui-ci légèrement transparent. Abaissez la transparence jusqu'à ce qu'elle arrive à un point où je peux commencer à voir les tics assez clairement au-dessus. C' est à vous de décider, et cela dépendra de l'image que vous avez utilisée et de l'opacité que vous faites, mais assurez-vous que la couleur graphique en dessous est bien noir massif, et cela va le montrer à travers. Évidemment, vous descendez à zéro. L' image est complètement visible et nous voyons la boîte en dessous, donc je vais la découper pour qu'elle soit toujours visible. Ce que je veux aussi faire pour rendre ce fond plus génial, c'est que j'aimerais le rendre un peu floue. Il y a beaucoup de façons différentes de brouiller l'arrière-plan, parce que je ne veux pas, j'aime l'effet de voir l'ancien bâtiment en briques en arrière-plan, mais je ne veux pas vraiment être capable de lire les graines de grains. Ce que je veux faire est d'utiliser Filter. Il y a plein de choses sous Blur. Il y a toute la galerie de flou et il y a une autre galerie de flou. Il y en a beaucoup. Les flous gaussiens sont vraiment populaires. J' aime utiliser celui-ci maintenant appelé Field Blur. J' aime Field Flou principalement parce qu'il me permet de flou. Vous pouvez voir qu'il va s'éteindre et faire son flou, flou par défaut de 15 pixels. C' est probablement un peu trop fort, alors je vais le refuser à quelque chose comme 10. Il va le redessiner. Maintenant vous pouvez voir qu'il est là, je peux voir ce que c'est, mais je ne peux pas commencer à lire les noms très bien. La raison pour laquelle j'aime cela est parce qu'il y a cette petite option ici dit Bruit. Je clique sur Noise, eh bien, je dois le mettre sur ici, et je vais lancer sur Mount, et si je clique tout de suite, ça va devenir un peu fou, mais tu pourras voir ce que je veux dire. Je vais zoomer un peu. Tu vois, ça met ce bruit de fond, donc je vais éteindre, allumer, éteindre, allumer. Cela nous donne un faible bruit de lumière qui cache une partie de l'effet Days of Our Lives qui finit par se produire. montant que vous appliquez est entièrement à vous et à votre image. Je vais postuler peut-être pas tant que ça, baisser un peu, 20 pour cent. Cela peut prendre un peu de temps à redessiner en fonction de la qualité de votre ordinateur. Quand tu auras fini, tu dois cliquer ici qui dit « OK ». La belle chose à propos de l'utilisation de ce type de méthode, c' est que c'est quelque chose qui se transforme en ce qu'on appelle un filtre intelligent. On peut l'allumer et l'éteindre. Disons qu'un client revient et dit : « J'aime ça, mais ce n'est pas assez floue ou trop floue. » Ce que vous pouvez faire, c'est que vous pouvez double-cliquer sur le mot Flou Gallery, revenir en arrière et sanctionner ou le refuser un peu à six. Je vais monter le grain un peu à 40, puis cliquer sur « OK ». Il est totalement réutilisable quand vous avez utilisé la technique que nous avons faite dans ce cours ici. Maintenant, c'est comment créer un arrière-plan impressionnant où nous avons utilisé un peu d'opacité pour montrer à travers la boîte en dessous, nous avons également utilisé un meilleur flou et un meilleur bruit pour le pousser en arrière-plan. 35. Vidéo de production - ajouter nos images: Bienvenue dans la vidéo de production d'images, où je vais passer par quelques choses manuelles ou monotones. J' ai mon premier cercle. Ce que je veux faire, c'est faire deux autres cercles et ensuite je veux me débarrasser de ces coins arrondis. Tout d'abord, je vais utiliser mon truc par Commande ou Contrôle en cliquant sur le calque, c'est mon gars ici. Ce que je veux faire, c'est que je veux plier ce calque, obtenir un calque arrondi, j'ai mon équipe 2. Maintenant, je veux utiliser la même taille de cercle. Si je prends cette équipe cercle1 et je fais un clic droit dessus et je vais dupliquer. Je vais appeler ça le circle2 de l'équipe, ça va le détruire. Pourquoi ? Parce que ce cercle2 de l'équipe est apparu entre ce masque de coupure que j'avais. Il l'a séparé et a tout détruit. Ce que je dois faire est de déplacer ce gars vers le bas et de les rejoindre en arrière en maintenant enfoncée la touche Alt sur un PC ou une touche Option sur le Mac et cliquez à nouveau sur ces deux pour obtenir mon masque de coupure. Maintenant, cette équipe encercle2, et il est là assis juste au-dessus du sommet. Ce que je vais faire est d'utiliser mon outil Déplacer, maintenez la touche Maj enfoncée pour qu'il glisse droit et je vais le faire glisser, donc c'est au centre de mon document. Avec le centre, je vais éteindre ce calque, faire glisser à ce centre. Impressionnant. Super. Maintenant, je vais remettre ce type en marche et je vais faire un masque de coupure. Peut-être en maintenant l'ancienne touche Option enfoncée. Je vais mettre à l'échelle ce top en utilisant Control T. Je vais l'obtenir pour qu'il remplisse autant que possible avec cette image recadrée. La même chose pour dupliquer le cercle. Encore une fois, le même problème. Si je duplique ce type, faites un clic droit, dupliquez, je veux que ce soit Team Circle3. Il est divisé ces deux-là. Je vais le traîner là-haut. Faites glisser ces deux-là, Circle3. Faites glisser les sur le bord. Je vais apporter ma prochaine image. Je vais aller à File, Place Embedded. Dans mes fichiers d'exercice est un appelé team-3. Apportez celui-là. Je vais le réduire en tenant Shift, le mettre aligné. Appuyez sur Entrée, choisissez un masque d'écrêtage, un peu rond, mon clavier. C' est à peu près juste pour moi. Ce que vous remarquerez, c'est que ces gars ne sont pas alignés du tout même si je pensais que je le faisais c'était mettre deux colonnes de ce côté, une colonne de ce côté. Qu' est-ce qui se passe avec, j'essaie de le diviser en trois. Ce que je vais faire, c'est que je vais activer mon service, où est-il ? En bas, en bas, vous trouverez mes guides de colonne utiles. Je vais le diviser en trois colonnes, je vais l'allumer. Vous remarquerez que c'est un moyen plus facile d'aligner les choses plutôt que d'essayer de les compter. Un nouveau, sélectionnez ce calque, donc team-1 et team-1 cercle et team-1 vont aller au centre de ce. Laisse-moi utiliser celui-là. membre de l'équipe 2 et moi allons attraper le membre de l'équipe 3 et les mettre au milieu de la couche. Je vais leur ajouter un type. En fait, je vais vous sélectionner, vous , vous, vous, vous, je vais les déplacer un peu au-dessus. Ajoutez du type, prenez l'outil Type. Je vais cliquer sur Échapper là, je clique une fois par ici. Je vais m'assurer que c'est centré et je vais taper mon nom, Daniel Walter Scott. Je vais sélectionner le texte, le rendre noir, cliquer sur OK, et à l'aide de l'outil Déplacer, le déplacer, en prenant un peu. Déplacez le zoom, puis il est au centre de là, et ça va être noir. C'est vrai. La taille, je vais dupliquer ce calque. Je vais utiliser cette manière délicate en utilisant mon outil Déplacer, maintenez la touche d'option Alt enfoncée, cliquez et faites-la glisser, puis vous verrez qu'il fait un doublon. Je vais changer celui-ci et je suis le fondateur. Je fais des casquettes au FONDATEUR. Je vais le faire Roboto. Mais je vais utiliser juste Regular. concerne la taille, rendons un peu plus petit. Réduisez-le à 17. Un peu en haut. Ensuite, mettez un texte et mettez-les sur l'adresse Twitter. @danlovesadobe. En fait, je vais le faire en majuscules. Celle-là va être l'audacieux. Charmant. Je vais vouloir dupliquer ceux-ci, donc je les utilise encore et encore. Je vais prendre les trois. Je vais maintenir la touche Alt enfoncée sur mon clavier. Je suis sur mon outil Move et je vais le faire glisser. Tenir Shift aussi bien, Shift danlove mais une gymnastique de doigt. Ce que cela signifie que c'est fait en double de tout ce morceau, vous pouvez voir que c'est la copie originale, c'est la nouvelle. Je vais changer celui-ci, passer à mon outil Tag. Celui-ci ici, c'est John Smith, il va être, se déplacer légèrement ici, il va être notre développeur peut-être, et son adresse Twitter sera @johnsmith. Encore une fois, je vais faire la même chose pour cette dame ici. Je vais attraper ces trois gars, maintenir Alt enfoncé, le glisser à travers, centré. Ce n'est certainement pas John Smith. Elle va être Jane, je ne veux pas l'appeler Doe, signifie qu'elle est morte. Appelons-la Jane Smith, Jane même. Elle va être notre designer, @janesmith. Le texte pour ceux, Je vais éteindre mon, nous avons fait le fond ici, Je vais désactiver mes guides de colonne utiles, surtout juste le troisième là-bas. Ensuite, nous allons faire, c'est qu'il y a un peu de portefeuille ici. Ça va ressembler à ça avec beaucoup d'images différentes autour de ce petit rectangle. Avec mes guides allumés, ça va aider. Je vais prendre mon outil Rectangle. Je veux que mes images de portefeuille soient dans des colonnes complètes. Je veux passer seulement trois d'entre eux chacun, peu importe la couleur des rectangles, parce que vous allez être couper en utilisant Clipping Master les images, mais c'est douloureux quand ils sont de la même couleur que l'arrière-plan. Je vais le changer en rouge. Ne déplacez pas vos guides, je veux éditer Annuler. Si vous constatez que vos guides bougent et qu'ils ne devraient pas le faire, il y a un guide de verrouillage qui ne bouge pas. J' ai eu mon premier rectangle. Au lieu de les faire un à la fois comme je l'ai fait les cercles, j'ai eu le problème avec les cercles où je continue à dupliquer les ellipses et il a cassé mon masque de coupe. Je vais le faire un peu différent de cette façon. Je vais dupliquer les rectangles avant de passer par et d'ajouter mes images. J' ai ces deux images. Je vais prendre les deux. J' aimerais qu'ils aillent là-bas. Prends ceux-là. Prenons celui-là. Prenons ce dernier morceau. Fermez-le. Je vais apporter mes images. Appelons ça avant qu'on ne s'en aille trop loin, avec lesquels on a affaire. C' est le numéro 1 là-bas, pas c'était le numéro 1. Celui-ci s'appellera Portfolio 1, copiez. Ce sera Portfolio 2, Portfolio 3, Portfolio 4, Portfolio 5, Portfolio 6, Portfolio 7 et Portfolio 8. Pour être honnête, quand je travaille seul et que je ne fais pas ça avant la fin. Je le fais maintenant pour vous rendre un peu plus facile de suivre. Mais assez souvent, j'ai laissé comme juste un rectangle copie 15 que je vais le long. Je vais apporter des images, je vais aller à File et je vais aller à Place Embedded. Je vais apporter la vignette 1. C' est à peu près la bonne taille. Je vais les réduire. Entrez. Je vais m'assurer qu'il est au-dessus de Portfolio 1 et les couper. Encore la même chose. Placez Embarqué. Vous descendez à la bonne taille, grosso modo. Tout à fait. Je vais les coller au-dessus de Portfolio 2, le couper. Apportons un autre. Si vous trouvez que cela prend une éternité pour faire des choses ou du moins assez monotone et que vous voulez des raccourcis. Donc, Place Embedded est quelque chose que j'utilise un peu. Il va éditer, créer des raccourcis. Vous ne pouvez pas entrer ici et dire, j'aimerais celui qui dit Fichier. Celui-ci ici qui dit Place Embedded et faire un raccourci. Je vais aller Command Shift I. Il est déjà utilisé, I Select Inverse. En fait, j'aime bien celle-là, donc je ne vais pas le faire. Je vais essayer Command Option Shift E. Il est déjà utilisé par Fusionner une copie de tous les calques visibles. Je n'utilise pas ces raccourcis. Je vais l'accepter. Va juste avec le haut de celui-là. Cela signifie que maintenant je peux aller Option de commande Shift E. Nous irons à mon Place Embedded. Résumer à quoi ? À propos de la troisième. Pour que vous ne vous endormiez pas et obtenez un super conseil, c'est essentiellement la même chose encore et plus de huit fois. Je vais sauter jusqu'à ce qu'on arrive à ce dernier ici. Par ici. Maintenant, c'est là. Revenons à la vitesse normale maintenant. C' est la fin de cette vidéo de production où nous avons traversé, nous avons fait quelques clipping souris, ajouté quelques textes et nous avons mis au courant. 36. Où trouver des icônes gratuites à usage commercial pour votre conception de sites Web Photoshop ?: Dans cette vidéo, nous allons regarder les icônes. Maintenant, dans cette vidéo, nous allons avoir besoin de quatre icônes utilisées pour nos services. Lorsque vous cherchez des icônes, disons, dans ce cas, nous recherchons des icônes gratuites. Il y a beaucoup d'icônes gratuites en ligne. Bien souvent, quand on les cherche, il est difficile de trouver de bonnes choses. J' aime vraiment ce site appelé iconfinder.com, et ce site est vraiment bon pour trouver une utilisation commerciale gratuite, ainsi que des icônes commerciales. Donc je vais taper dans ce cas art, ce que nous cherchons à faire c'est que nous cherchons à le changer en libre, et au lieu d'aucune licence, nous allons revenir à aucun lien arrière, ok. Cela signifie simplement que nous pouvons l'utiliser et nous n'avons pas à y ajouter de liens, donc vous pouvez évidemment ajouter un lien de retour, il y a un peu plus à choisir et ce que je vais faire, c'est que je vais utiliser celui-ci ici. La meilleure chose à propos de la recherche d'icônes est souvent lorsque vous en trouvez un qui vous plaît, il fait partie de cet ensemble plus grand qui est également gratuit. Je vais utiliser cette caméra, celle bureau, et quelques autres. Maintenant, si vous le souhaitez, vous pouvez sauter, et dans les fichiers d'exercice, j'ai quatre icônes pour commencer. Si vous voulez jouer avec celui-ci, ce que vous faites, c'est vous, disons que nous choisissons cet appareil photo ici. Avant de le télécharger, ce que vous voulez faire est de choisir la taille que vous voulez. Maintenant, j'aime choisir la plus grande taille que je puisse trouver. Donc, plus tard, si j'ai besoin de l'utiliser pour autre chose, ou un super graphique ou une grande tuile pour quelque chose, j'en ai une grande version autour. Donc, puis pour télécharger, nous allons utiliser la version PNG et la télécharger sur votre bureau, puis l'importer dans Photoshop. Ce que j'ai fait pour vous, c'est d'aller à Photoshop et d'importer les images que j'ai déjà téléchargées. Nous allons donc aller à Fichier, Place Embedded, et il y a les icônes 1, 2, 3 et 4. Donc nous allons apporter tout ça. Donc tout d'abord, je vais placer le premier. Ok, je vais juste le laisser à la taille à laquelle il est arrivé et appuyer sur Entrée. La raison pour laquelle je fais cela est que je vais les mettre à l'échelle tous ensemble, donc je veux tous les voir sur la page, les sélectionner tous et les mettre à l'échelle exactement de la même taille, et plutôt que d'essayer de le faire séparément et d'essayer de les faire correspondre. Alors allons à Fichier, Place Embedded, nous allons mettre sur l'icône 2, appuyez sur Entrée. Fichier, Placer Embedded, icône 3, appuyez sur Retour. Fichier, Place Embedded, et amenons le dernier. Super, donc j'ai quatre icônes ici. Vous pouvez les voir tous dans mes couches. Je vais commander, sélectionner tous ces éléments ou maintenir la touche de contrôle enfoncée, si vous êtes sur un PC il suffit de cliquer chacun individuellement. Maintenant, ils devraient se déplacer ensemble et nous allons utiliser notre raccourci commande T ou contrôle T, et je vais les réduire tous pour avoir le même type de taille. Maintenant, avant de le faire, je vais frapper Escape, et ce que je veux faire, c'est que je veux voir mon guide complet juste pour avoir une idée de la taille qu'ils devraient être. Le guide est allumé. J'ai sélectionné les quatre icônes. Je vais utiliser mon outil de transformation. Je vais les réduire jusqu'à ce que je m'adapte. Ok, ils vont sur 1, 2, 3 colonnes, donc sur 3 colonnes en 4 petits groupes. Bon, donc je vais zoomer un peu. Je vais les distribuer essentiellement juste pour les mettre dans une position difficile pour commencer, puis le dernier. La façon d'obtenir un peu de sens dans les guides, ce que vous allez surveiller est, disons que je sélectionne l'icône 1, c'est que vous remarquerez que lorsque je le fais glisser, pouvez-vous remarquer, voir cette petite ligne bleue qui est apparue ? D' accord. Si je l'ai déplacée encore et en arrière. On les cherche, c'est en train de nous dire que c'est au milieu de quelque chose. Donc, je vais saisir l'icône 2, tourner autour donc c'est au milieu là parce qu'il a tendance à se verrouiller sur des tas de choses différentes dans le document, ce que vous pouvez faire est si elle est loin, utilisez simplement vos touches fléchées pour le toucher jusqu' à ce que vous ayez l'impression qu'il est assez proche de la fin. Maintenant, ce qu'il faut faire, c'est les amener à s'aligner au centre. Donc je vais sélectionner tous ces types, un, en maintenant la touche de commande enfoncée. Il y en a en fait quatre, et j' ai ces options le long du haut ici vous pouvez voir que je peux les aligner le long du haut, les aligner le long du bas ou je peux les aligner le long de leurs centres, et c'est ce que je vais faire, les aligner le long de leurs centres. La prochaine chose que je dois faire est de les colorer. Donc nous allons en colorier un d'abord donc nous allons colorier l'icône un d'abord. Éteignez mon guide, zoomez un peu. Je vais colorer ce type. Je vais utiliser cette option ici appelée un style de calque, ok. Donc, avec l'icône une sélectionnée, cliquez sur FX, puis allez dans et choisissez la superposition de couleur. Maintenant, superposition de couleur, pour le moment, vous pouvez voir qu'il superpose avec du gris. Ce que je peux faire c'est que je vais cliquer sur cette petite couleur et je vais choisir une de mes couleurs dans mes bibliothèques de couleurs. Maintenant, ce petit sélecteur de couleurs n'a pas vos échantillons. Ce que je vais faire, c'est que je vais m'assurer en haut que je peux voir mes échantillons, en particulier les trois que j'ai importés. Donc, les verts et ces gars, sorte que quand je clique sur gris, je peux utiliser mon outil pipette pour choisir la couleur que je veux. Ensuite, je clique sur OK, cliquez à nouveau sur OK, et vous pouvez voir que la couleur a été superposée. Maintenant, je veux appliquer l'effet de couleur à toutes les différentes icônes. Il existe plusieurs façons différentes de cliquer avec le bouton droit de la souris et de dire copier, style de calque, puis de le coller sur les différents. Ou c'est une belle astuce facile, c'est que si vous pouvez voir vos icônes, qui dit que je peux cliquer et le faire glisser, il suffit de le faire glisser sur le téléphone. D' accord. Faites-le glisser sur l'appareil photo, et je clique longuement et je le fais glisser sur le téléviseur là. Super, c'est une façon d'apporter des icônes pour notre design. 37. Vidéo de production - ajouter nos icônes: Ce sera une vidéo de production. Nous allons juste ajouter du texte sous nos icônes. Je vais saisir mon outil de type, cliquer une fois et m'assurer qu'il est au centre. Je vais choisir une couleur de blanc. Je vais choisir la police ou Roboto en gras, et en ce qui concerne la taille, je vais le faire monter jusqu'à, je vais vous montrer, environ 30 peut-être. Le premier service va imprimer, ce sera toutes les majuscules. Le prochain, c'est que je vais prendre mon outil de type. Je vais mettre un peu de copie du corps en dessous. Je vais ouvrir mes guides pour m'assurer d'aller au sommet. Il va être modelé et un peu plus, et je vais ajouter du texte. Rappelez-vous, nous allons aller à taper, Coller Lorem Ipsum. Ça va mettre plein de Lorem Ipsum là-dedans. Maintenant, si je veux sélectionner tous les Lorem Ipsum et changer la taille de celui-ci, si je fais glisser une boîte, malheureusement, si je change la taille de celui-ci à quelque chose comme 12, vous avez seulement sélectionné cette partie. Ce que vous voulez faire est de trois clics, donc 1, 2, 3, 4. Quand j'ai dit triple clic, je veux dire quatre clics, donc 1, 2, 3, 4, il saisit chaque bit de texte et il saisira le texte que vous ne pouvez pas voir bien. Je vais faire tomber ça, disons 14 pixels. On va le déplacer, disons le habitué. Combien de lignes est-ce que je veux dans ce cas ? Je vais le faire tomber parce que j'aime le look de trois lignes. Rappelez-vous aussi si je clique ici avec mon outil de type, je vais désactiver ma césure. Pour le faire, cliquez sur cette petite case ici. Cliquez sur Paragraphe, désactivez Césure, et on se débarrassera de cette césure que je n'aime pas. Ce que j'aime faire, c'est ces deux zones de texte ici,]. Je vais imprimer et Lorem ipsum sélectionné. Je vais maintenir la touche Alt enfoncée, activer mes guides en premier, maintenant ma touche Alt et utiliser l'outil de déplacement pour faire glisser une copie. Je maintiens la touche Maj enfoncée pendant que je la fais glisser, pour m'assurer qu'elle est parfaitement sur le côté ici. Je vais le faire pour tout ça. Je vais les traîner à travers. J' ai quatre sets, et je vais le changer. Celui-ci s'appelle App Dev. Celle-ci va être la photographie, ce sera la vidéo. Je vais quitter l'ipsum de Lorem parce que ça ne veut rien dire de toute façon. Éteignez mes gardes, assurez-vous que tout s'aligne. Les lignes vont bien, les lignes vont bien. Ce que je pourrais faire, c'est que je vais attraper tous les ipsums de Lorem et les faire tomber un peu. Voilà, tu y vas. Il y en a les quatre, et utilisez mes touches fléchées juste pour les taper afin qu'ils rejoignent ce peu. Ce que je pourrais aussi faire, c'est prendre mes icônes, j'ai les icônes 1, 2 et cet autre gars, il est là sous mon texte. J' aime ça le long de la base. Assez heureux. C'est la fin de la vidéo de production. 38. Comment mettre de l'ordre avec le regroupement de calques: Dans cette vidéo, nous allons examiner l'utilisation des calques. Maintenant, je vais documenter lentement ce qui est sûrement en train de devenir un désordre fou de choses partout. Il va être un peu difficile de travailler avec, surtout si nous l'envoyons à quelqu'un qui, disons, nous le concevons et nous l'envoyons à quelqu'un, disons, qui est un développeur et qui n'utilise pas beaucoup Photoshop et doit travailler avec, cela peut être vraiment compliqué pour eux. C' est même devenu un peu trop compliqué pour nous d'utiliser. Ce que nous allons utiliser, c'est quelque chose appelé Groupes de couches. Désormais, les groupes de calques sont un moyen de regrouper tout ensemble, et cela rend nos calques un peu plus rangés. Ce que nous ferons, c'est que nous commencerons avec notre groupe de navigation. Il y a quelques trucs qu'on peut utiliser pour tout trouver. Ce que je voulais faire, c'est utiliser cette boîte de héros ici. Je vais utiliser un petit tour. Activez la « Sélection automatique ». La sélection automatique nous permet de faire est de faire glisser une boîte autour de tout ici, et il sélectionnera tout ce qu'il peut sous cette petite ligne pointillée. Vous remarquerez dans mon panneau Calques ici, juste en bas ici, qu'il a choisi tout ce qu'il a trouvé caché dans ce calque. Désactivez « Auto-select » et donnez-lui un tremblement juste pour vous assurer qu'il a tout ce dont nous avons besoin et rien qu'il ne le fasse pas. Ensuite, je vais aller à Modifier, Annuler ou Modifier, Reculer et le remettre là où il était. Maintenant, je sais que tout est au bon endroit. Tout ce que vous faites est de cliquer sur ce bouton « Groupe ». Photoshop est assez intelligent, et il les colle tous dans un joli petit groupe. Le Groupe s'est retrouvé au-dessus de notre Navigation, mais c'est quelque chose que nous pouvons réparer par la suite. Nous appelons ça un héros de la boîte. C' est celui-là. Je vais l'éteindre pour le moment. La prochaine chose que je vais faire est de sélectionner la Navigation. Je vais activer mon « Auto-select », saisir tout ici, et vous verrez qu'il a choisi ces trois éléments ici, ce qui est parfait. Si je fais « Auto-Select » et que je lui donne un remuement, juste pour m'assurer qu'il a tout ce que je veux et rien que je ne le fais pas. Appuyez sur le bouton « Groupe ». Appelons celui-ci Box Navigation. Je vais le traîner au-dessus de ce type. Je l'ai traîné dedans. Sois prudent quand tu traînes. Je fais glisser ça, tu vois la petite ligne qui tourne autour de l'extérieur ? Ça va le glisser dans ma boîte de héros. Ce que je veux faire est en fait glisser au-dessus, et vous verrez la différence. Vous voyez cette petite ligne qui apparaît entre eux plutôt qu'au-dessus d'eux ? Ça veut dire que c'est juste au-dessus. Je vais éteindre les deux. Maintenant, je vais récupérer mon outil à nouveau, sélectionner ces deux gars. Il a choisi tout ce dont j'ai besoin. Regroupez-les. Celle-ci s'appellera Box, et celle-ci était notre boîte qui nous sommes. Je vais les éteindre maintenant. On va éteindre celui-là. Maintenant, nous sommes à la page Nos services. Je vais attraper le même outil, Sélection automatique sur, sélectionnez-les tous. J' aime les éteindre. Donne-lui un tremblement. Assurez-vous qu'ils sont tous ce que nous avons sélectionné, rien que nous ne le faisons pas. Puis regroupez-les. Celui-ci est notre Box Services. Activez automatiquement, attrapez tous ces types, puis regroupez. Appelons cette boîte, et celle-ci sera Portfolio. Éteignez celui-ci. C' est notre équipe 1. Donc, tout ça sur. Éteignez-le. Un bon tremblement. On va regrouper celui-là ensemble. Celle-ci s'appellera Team Box. Équipe, super. Éteignez celui-là, et nous n'avons rien d'autre. Nous avons notre formulaire de contact et notre pied de page. Ce que nous ferons, c'est que nous pourrions aussi bien les mettre en groupe, celui-là. Si elle ne se retrouve pas dans le Groupe, ce que vous pouvez faire est de cliquer sur Hold et de le faire glisser dans le Groupe, comme je l'ai fait là-bas. Celui-ci s'appellera Box Contact Form. Ce dernier, on va le mettre ici. On va le traîner à l'intérieur. Celle-ci s'appellera Box, et ça va s'appeler, Pied de page. Montez tout ça. À l'aide des calques, désactivez-les. Vous verrez ce type, un petit ranger solitaire ici, qui est un type Layer , mais il s'appelle la couche 1. S' il y a une couche de type et qu'elle est appelée couche 1, cela signifie qu'il y a une couche de type sans type dessus. Donc, en fait, cette chose n'a pas de but au monde. C' est quelque chose que j'ai commencé à taper, et je n'ai pas eu le temps de le faire et je l'ai oublié et laissé là. Ce gars ici est un ranger solitaire, donc il n'apparaît nulle part là-dessus. S' il y a un mot ici, ce sera un mot quelque part caché sur votre document que vous devez trouver. Dans ce cas, je vais le supprimer. Cliquez sur « Supprimer ». Vous pouvez voir maintenant que j'ai tout regroupé, il devient beaucoup plus facile de travailler avec, surtout lorsque nous commençons à faire notre design mobile. Je peux tout activer, et ce que je pourrais avoir à faire est de jouer avec l' ordre des calques en fonction des calques sur lesquels ils sont. Je vais désactiver mes guides de colonne utiles. Mais tout le reste est bien empilé l'un sur l'autre, et nous sommes prêts à partir. 39. Trouvez rapidement ce dont vous avez besoin grâce à la recherche par couches: Dans cette vidéo, nous allons vous montrer comment utiliser un peu plus les calques. Maintenant, il va y avoir des moments où vous travaillez sur un document et vous voulez vraiment trouver quelque chose en particulier sur le document. Plutôt que de parcourir et d'essayer de le trouver à travers les éléments de recherche, ce que vous pouvez faire est que vous pouvez utiliser certains de ces filtres de recherche. Certains de ces filtres de couche le long de la partie supérieure ici. Ce que vous pouvez faire est de dire que vous voulez trouver tout dans ce document qui est tapé, parce que dire que vous avez changé le corps pourrait être la police de Roboto retour à Arial pour une raison quelconque. Ce que vous pouvez faire est de filtrer uniquement les couches, vous voyez qu'elles ont juste le type, et ce que je pourrais faire. Cliquez sur le haut, maintenez la touche Maj enfoncée, cliquez sur le dernier et montez ici dans mon outil de type et changez-les tous en Arial. Je choisirai Arial en gras. Maintenant, vous voyez que tout est maintenant Arial. C' est un bon moyen facile de le faire. Je vais annuler ça parce que je n'aime pas Arial. Donc, vous voulez passer par et commencer à jouer avec les couleurs. Ce que vous pouvez faire, c'est que vous pouvez cliquer sur celui-ci ici, il est juste une forme de couches. Tous nos rectangles apparaissent. Disons que vous avez un groupe de choses qui ont une ombre portée dessus, et que vous voulez aller changer l'ombre portée. Ce que vous pourriez faire est que vous pouvez aller à celui-ci, aller à un correctif, et utiliser ce menu déroulant ici et dire que tout ce qui a une ombre portée est apparu. J' ai un truc en utilisant l'ombre portée dans cette affaire. Je n'ai rien de spectacle dans mon dernier panneau ici. Si vous arrivez à un point où vous ne vous êtes pas rendu compte que vous avez modifié ceci ou que vous avez ouvert un autre document et que cet effet de calque est également appliqué, vous pouvez simplement désactiver l'interrupteur là. Il revient à la normale, et vous pouvez activer et désactiver pour basculer entre la dernière recherche et tout recommencer. 40. Nommer vos calques comme un pro: Une des autres choses intéressantes que vous pouvez faire lorsque vous travaillez avec votre panneau Calques, et que vous essayez de préparer les choses à envoyer à votre concepteur ou développeur, vous pouvez trouver beaucoup de fois où vous avez beaucoup de choses appelées comme rectangle un ou tapez un ou deux et ils ne sont pas vraiment utiles pour le développeur. Mais ce que vous pouvez faire est de descendre à nos icônes qui sont nos services. Je vais ouvrir ça. Disons que vous voulez commencer à les nommer, disons l'icône un, trois et deux. Il s'agit d'une vidéo, de la photographie et de notre application. On va descendre et faire le dernier ici. En fait, on va le traîner pour le moment. Mettons-le avec ses amis. Ce que nous sommes venus faire est une belle petite option pour nommer des choses. Sinon, vous pouvez double-cliquer sur tout pour y entrer et vous pouvez passer des âges à le faire. La façon de le faire est d'onglets entre eux. Je vais double-cliquer sur celui-ci, je vais appeler ce trait d'union d'icône et je vais appeler cette vidéo. Je vais onglet en bas, vous pouvez voir la photographie d'icône. Plutôt que d'avoir à cliquer sur chacun pour le faire fonctionner, vous pouvez juste tabasser entre eux, ok ? Tiret d'icône. Celui-ci s'appellera application, et celui-ci s'appellera l'impression de trait d'union d'icônes. D' accord. Joli petit raccourci pour nommer vos calques. 41. Concevoir un formulaire pour votre site Web: Salut. Dans cette vidéo, nous allons voir comment démarrer un formulaire. Les formes ne sont essentiellement qu'un groupe de rectangles. Dans ce cas, nous allons utiliser un outil rectangle. On va tirer un remplissage de blanc. Maintenant, la grande chose à vérifier avec les traits est que, par défaut, ils sont fixés deux points, ce qui est plus un terme d'impression. Ce que nous voulons faire, c'est que nous voulons faire un pixel, ou deux pixels, ou trois pixels. Vous pouvez simplement le taper dessus tout ce qu'il y a dedans. Je vais dessiner mon rectangle. Maintenant, je vais allumer mes guides pour m'assurer qu'ils sont dans tout et donc je l'ai fait passer de ce guide externe, à travers environ le milieu. Je vais éteindre mes guides, puis jeter un oeil et voir ce que je pense être les bords ici. Donc vous pouvez voir ici, il a un bord gris foncé avec un centre blanc. Est-ce que je l'aime ? Ouais, c'est bon. Je vais y ajouter du texte. Donc je vais prendre l'outil de type. Maintenant, rappelez-vous, je ne vais pas cliquer à l'intérieur de ceci parce que cela va transformer ce rectangle en une boîte, donc ce n'est pas vraiment ce que je veux. Ce que je veux faire, c'est cliquer ici et celui-ci sera mon nom. Je vais tout sélectionner et je vais le faire Roboto. Je vais le rendre clair Roboto et je vais en faire une couleur gris foncé ici. Revenez à mon outil Déplacer, effectuez un zoom avant. [ inaudible] c'est en fait, il est grand, donc je vais le baisser à 20 et je l'ai juste assis là-dedans. Maintenant, les grilles sont de retour, je vais sélectionner à la fois le nom et le rectangle. En fait, ce sera mon nom de formulaire, en minuscules. Je vais sélectionner les deux et je vais maintenir ma touche « Alt, ma touche Option » enfoncée et je la maintiens et je la fais glisser vers le bas. Je vais me donner trois de ceux-là. Celui-ci va être un nom, celui-ci sera un email et celui-ci sera un numéro de téléphone. D' accord. Je vais les amener tous à s'aligner sur le côté gauche. Donc, je vais avoir le téléphone, l'e-mail et le nom sélectionné et je vais revenir à mon outil de déplacement et ensuite je peux utiliser celui-ci ici, qui est aligner les bords gauche, ils devraient aligner. Ok, je vais faire une boîte. Je vais aller à l'outil rectangle, assurez-vous que tout est toujours réglé. Je vais revenir à ma boîte blanche pleine couleur, ça va commencer ici et ça va descendre au bas de mon téléphone. Je vais attraper un de ces gars, peut-être téléphone, en fait le nom parce qu'il est aligné, en fait le nom parce qu'il est aligné, maintenez ma touche Alt enfoncée et faites-les glisser à travers le décalage de maintien. C' est derrière l'endroit où j'en ai besoin, donc je vais le faire glisser vers le haut et le faire glisser un peu à travers. En fait, je vais changer cela d'abord et je vais appeler ce message, outil Déplacer et déplacer le long de sorte qu'il s'alignera là-haut. Essayez de tout nommer. Donc, j'ai cette boîte qui est un email de formulaire, celui-ci est un téléphone de formulaire et celui-ci est ici appelé message de formulaire. Ensuite, je vais ajouter un bouton de soumission. Donc mon bouton de soumission va juste être un autre petit rectangle. Dans ce cas, ça va ici. Il va traverser trois d'entre eux. Je vais lui donner une couleur de remplissage de violet foncé et je vais attraper mon outil d'onglet, cliquez une fois en bas ici. Je vais appeler celui-là soumettre. Je vais le faire roboto, mais je vais rendre cette dalle robotique audacieuse. En fait, qu'est-ce qu'on a utilisé ici ? Ici, je vais attraper mon outil de type et il suffit de cliquer ici et de vérifier. J' ai attrapé mon outil de type, glissé à l'intérieur, celui-ci était la dalle de robot 24. Donc je vais faire la même chose avec celui-ci. Prenez mon outil de type, cliquez à l'intérieur de la dalle roboto bold 24 et je vais en faire une couleur blanche. Déplacez l'outil, faites-le glisser vers le haut s'il est derrière, non, il est dans la bonne position. Éteignez mes guides, fermez ça. Super. Il y a une petite boîte de contact et mettez-les tous dans leur propre groupe. Alors rappelez-vous d'utiliser notre astuce, sélectionnez automatiquement, faites glisser une boîte sur tous les, déplacez-les tous à l'intérieur de la boîte de contact. Montez ça, sur un éteint. Ils sont tous là. Très bien, et c'est comme ça qu'on se moque d'un formulaire dans Photo-shop. 42. Comment créer un pied de page pour votre site Web: Dans cette vidéo, nous allons simuler notre pied de page. C' est assez basique, nous allons apporter un groupe d'icônes, nous allons obtenir notre fichier, « Place Embedded » et j'ai celui-ci appelé « Icons-Social », c'est un fichier illustrateur. Je vais placer celui-là. Super, déplacez-le vers le bas, je vais le placer pour qu'il s'aligne avec un des codes de colonne ici. zoom avant pour vérifier, prenez le dessus, appuyez sur « Entrée » lorsque je suis prêt. Je vais zoomer. Ce que j'aimerais faire, c'est m'assurer qu'il est au bon endroit. Je vais m'assurer que c'est dans ma boîte de pied de page. Tout le reste, je vais faire les mêmes couleurs que mon icône, donc je vais trouver mes icônes. Je vais sélectionner l'icône ici. Ce que je vais faire est un clic droit dessus et aller à copier le style de calque. Descends, trouve mon graphique et mon pied de page. Cliquez avec le bouton droit de la souris et allez à celui qui dit « Coller le style de calque » et ce sera le même. Ajoutez une dernière chose à ma photo, je vais saisir l'outil de type et je vais ajouter mon copyright. Je vais cliquer une fois et je vais coller tous mes droits réservés, choisir une police un peu plus appropriée pour nous. Donc ça va être Roboto, ça va être moyen. Ça va être assez petit, donc ça va descendre à 12 pixels. Super, et ça va être mon pied de page. 43. Vidéo de production - finir notre bureau: Très bien, dans ce dernier petit peu, on va ranger. Un dernier petit peu manquant, c'est qu'ici, je n'ai pas encore mis mon genre pour qui nous sommes, alors je vais le faire. J' ai mon outil de type, et je vais m'assurer que je suis dans la bonne boîte aussi. Pour le moment, je dois être dans celui qui dit « Qui ». Une fois sélectionné, si je clique une fois, vous remarquerez que ma frappe est à l'intérieur de celui-ci, c'est un bon point de départ au moins. Ok, celui-là va être ce qu'on est. Je vais choisir Text. Je vais utiliser mon Roboto, mais je vais utiliser Slab, et utiliser mes Bolds. Il va être blanc, taille, ça va marcher pour moi, mon outil de déplacement, les déplacer à travers, annuler. Je voulais les déplacer à travers un ajouter mon « Lorem ipsum. » Donc, je vais cliquer sur Hold and drag. Celui-ci va sortir, je pense, dans la dernière colonne ici, et allons à Type, et je vais coller « Lorem ipsum ». Les polices évidemment vraiment grandes, quand j'utilise quatre clics et le rabaisse à une taille plus gérable de peut-être 14 pixels. Je vais faire des lignes de gauche, je vais choisir Roboto, je vais utiliser Regular. Choisissez alléger cette coque. Super, et ça va être tout pour celui-là. 44. Concevoir la vue de votre site Web mobile: Dans cette vidéo, nous allons regarder la conception mobile. Probablement la partie la plus importante lorsque vous regardez la construction d'un site mobile est probablement la navigation, comment vous vous déplacer. En raison de l'espace limité, vous ne pouvez pas avoir des menus aussi volumineux que nous avons sur notre vue de bureau. Savoir lequel choisir peut être difficile. Un très bon site ici est ce site exisweb.net. C' est un lien incroyablement long, alors utilisez le lien sur l'écran maintenant pour aller et trouver tous les différents liens utiles partout. Maintenant, nous n'allons pas avoir la chance de les parcourir parce qu'il y a tellement de façons différentes d'envisager les menus mobiles. Mais regardons les principaux groupes. Celle-là, où on a ce truc appelé le burger ou le sandwich. Le sandwich ou les trois lignes horizontales, comme vous voulez l'appeler. Cette chose ici clique et l'ensemble du site se déplace vers la droite, et ce menu apparaît. Il y a une autre option ici où ils empilent. Vous pouvez voir ici, c'est la vue du bureau, mais quand il arrive sur mobile, ils empilent comme de beaux gros boutons les uns sur les autres avec d'autres. Celui-ci ici, j'aime, juste le burger par lui-même quand il clique, y a un menu déroulant à partir de lui. Il y a beaucoup d'options différentes. Jetez un oeil à travers le site, il y a un montant fou à choisir. Ce sont toutes les saveurs d'une chose similaire. La grande chose à décider, c'est si vous allez au burger ou pas de burger. Comme Smashing Magazine, on l'a regardé plus tôt. Regarde ça, si j'écrase ça, ils ont décidé qu'ils n'ont pas de hamburger, ils ont ce mot « menu » et c'est totalement cool. Mais vous pouvez voir même dans mon plug-in Chrome, J'ai utilisé le burger. Faisons un peu de cascades. C' est peut-être une mode. Je pense que c'est probablement là pour rester. C' est une belle nouvelle icône pour les menus mobiles. Allons en construire un. Ce que nous allons faire, c'est que nous allons commencer avec le site mobile. Nous allons donc commencer à construire quelques parties de celui-ci, en faisant glisser des parties du bureau à travers, puis reconstruire le menu. Les choses que je veux commencer par est la navigation ici et la boîte de héros. J' ai sélectionné les deux en maintenant la touche Commande enfoncée et en cliquant sur les deux ou sur Contrôle sur un PC. Ce que je vais faire est de cliquer, maintenir et de faire glisser, mais en maintenant la touche O d'abord, cliquez et maintenez et faites glisser, déplacez-le à travers, obtenez la même chose ici. Aligner. Vous remarquerez qu'ils ont tous passé à ma version mobile. Je vais zoomer. Il y a beaucoup de travail pour le réparer. Donc, je vais zoomer un peu. Ce que je veux faire, c'est que je vais devoir utiliser ça. Donc, je vais aller à ma boîte de navigation et l'apporter votre propre logo d'ordinateur portable. Je vais passer à travers. Je ne peux pas le voir parce que c'est de ce côté ici. Mais je sais que si je maintiens Maj et que je le fais glisser, il se déplacera dans une belle ligne parfaite. Ça va parfait. Ma boîte de héros doit venir un peu. Charmant. Apportez votre ordinateur portable, il sera là. Je vais le déplacer pour être centré. Cette navigation va cependant disparaître, parce que les services ne correspondent tout simplement pas. Donc je vais éteindre ça. Je vais tracer mes trois lignes horizontales. C' est vraiment facile. Utilisez simplement l'outil Rectangle. Assurez-vous que votre remplissage est réglé sur blanc. Je vais avoir ma course à zéro, et je vais dessiner. Vous pouvez le faire avec un outil Ligne aussi bien si vous vouliez le faire, je trouve qu'il est juste assez facile d'utiliser l'outil Rectangle, je les fais sentir comme des lignes. C' est un peu grand, donc je vais zoomer. Vous trouvez que si vous êtes gentil et proche lorsque vous travaillez sur, il devient un peu plus facile de travailler avec. Si je suis loin et que je traîne ces lignes, elles semblent s'enclencher, mais c'est beaucoup facile quand on est proche. Je vais tenir Alt et dessiner mon hamburger. Vous pouvez voir ici mon guide intelligent me dit qu'il correspond à la distance de ce haut, du bas. Super. Maintenant, le burger est assez gros. Je vais donc les sélectionner tous, les transformer, et les réduire un peu, peut-être les rendre un peu plus courts. Donc c'est mon menu de hamburgers mobile. Super. Ce que j'aimerais faire, c'est quand ce bouton est cliqué, j'aimerais superposer toutes les choses ici avec une nouvelle balise div là-haut. Je vais utiliser l'outil Rectangle, et je vais dessiner un joli grand rectangle pour mon menu, et je vais le mettre à l'intérieur. Je vais lui donner une couleur. Je vais utiliser le violet. Maintenant, je vais utiliser un peu de transparence. Il n'y a aucune raison, ça a l'air cool. Donc, je vais le changer à 90 pour cent juste pour que vous puissiez facilement savoir, voir les choses derrière elle, donc quand il glisse vers le bas, vous savez qu'il peut être potentiellement une sauvegarde de diapositives et ce n'est pas une nouvelle page. Regardons à faire un peu de nom. Mettons mon apporter votre ordinateur portable dans le menu de navigation. Celui-ci va être la navigation dans la boîte. Ce que je vais faire, c'est que je vais commencer une seconde. Celui-ci va s'appeler Mobile Dropdown. Je vais tout garder séparé. Je vais prendre l'outil Rectangle. C' est mon rectangle ? C'est fini. Je l'ai mis là-dedans. Je vais attraper ces trois gars. Ces gars ici sont mon menu de hamburgers. Ce que je vais faire, c'est les regrouper ou les relier. La façon la plus simple de le faire est de cliquer avec le bouton droit et de les convertir en ce qu'on appelle un objet intelligent. Alors je vais le renommer, je vais l'appeler Burger Menu. Je vais faire glisser ça dans Mobile Dropdown. Super. Maintenant, j'ai ça, je l'ai. Ce que je vais faire maintenant, c'est que je vais changer mon menu Burger pour en avoir deux. Donc c'est Burger Menu Inactif, et je vais en avoir un second, qui va être mon Burger Menu Active. Parce que ce que je veux faire, c'est faire ce que j'ai fait sur ce site ici. Si je réduis ça. C' est ce que j'ai fait sur mon site de Nouvelle-Zélande, où j'ai eu mon burger, et je clique dessus et il y a une petite croix pour savoir que vous pouvez cliquer dessus et le fermer ensuite. Revenons à ça. Ou pour le créer, je pourrais utiliser quelques trucs différents. Le moyen le plus simple que je trouve pour obtenir une croix parfaite est de cliquer une fois. Avoir un plus. Je n'utilise pas X parce qu'ils ressemblent à Xs, ils n'ont pas l'air d'une croix. Ce que je veux est un plus de son côté, donc je vais utiliser plus. Certaines polices n'ont pas l'air génial en utilisant cette technique parce qu'elles sont des avantages assez stylisés, donc Arial Regular est idéal pour celle-ci. Ce que je veux faire, c'est le transformer. Je vais donc utiliser mon Command-T ou Control-T sur un PC. Je vais faire pivoter, disons, 45 degrés. Cliquez sur « Appliquer ». On dirait une belle croix. Je vais l'augmenter un peu, Control-T, rendre un peu plus grand juste pour correspondre à mon hamburger de navigation. Cool. Je vais copier ça et je vais coller ça ici. Il va être actif. Ce qui va se passer, c'est que ça va s' éteindre et qu'ils vont changer l'un de l'autre. En fait, ce que je pourrais faire pour le web designer, c' est que je vais mettre le Burger Menu dans la navigation elle-même, donc quand les gens allument ça et éteignent ça, c'est derrière et ce gars est à l'avant. La prochaine chose que je dois faire est d'ajouter les tiques. Donc, je vais attraper mon outil Type, et je vais cliquer et faire glisser une boîte, et je vais taper mon bit. Ce sera SERVICES, je vais le faire en majuscules. Je vais faire PORTFEUILLE, je vais faire l'ÉQUIPE, et je vais faire CONTACT. Je vais tous les sélectionner, changer la police, la faire glisser vers le bas. Je vais utiliser mon Roboto. Je vais utiliser Roboto Light. Maintenant, ce que vous voulez faire, c'est vous assurer qu'il y a assez d'espace entre ces mots. Vous ne voulez pas que les gens cliquent sur l'un, puis cliquent par inadvertance sur l'autre. Donc, un bon espacement des lignes est génial. Le mien l'a par défaut parce que j'ai déjà joué avec. Si vous prenez l'outil Type et sélectionnez tout, ce que vous voulez être à la recherche est, cliquez sur cette icône ici, faites ressortir votre panneau Caractère. Cette option ici, la vôtre est probablement définie sur Auto, qui est 28. Il va probablement être d'environ 30 en termes d'espacement des lignes. Je vais faire monter le mien jusqu'à environ 60. Selon la taille de police que vous utilisez, quel type de police, c'est à vous de décider. Maintenant, ça va marcher pour moi. En fait, peut-être même un peu plus grand jusqu'à 70. Juste pour qu'il y ait un grand écart entre eux, sorte que les gros doigts peuvent cliquer sur eux vraiment facilement. Ça va être ma liste déroulante Nav. Charmant. Ça va être ma navigation déroulante. Maintenant, je dois passer par et transférer toutes les choses que j'ai faites sur le bureau et les faire fonctionner sur mobile. Nous le ferons dans la prochaine vidéo. 45. Vidéo de production - compléter notre vue mobile: Dans cette vidéo, nous allons être là pour un petit moment, parce que nous allons tout traduire de notre bureau à notre mobile. Vous pouvez d'abord construire mobile, vous pouvez faire le contraire, déballer, lui donner de l'espace pour travailler et l'utiliser sur un bureau. On le fait dans l'inverse. J' ai déplacé mon premier bloc le long, qui s'appelle la navigation de boîte et le héros de boîte. Je vais me débarrasser de la copie, et je vais commencer à travailler sur celui-ci ici. Il y a beaucoup d'allongement qui va se produire, il y a des tailles de police que je vais devoir jouer avec, et un peu d'alignement à faire. Allons-y. Je vais zoomer, « Control Plus », utiliser ma barre d'espace pour bouger, peut-être que j'ai zoomé un peu trop. Super. La première chose est, je vais utiliser nous allons faire cela arriver, saisir la taille de la police et le faire glisser vers le bas. Tout va bien. Ce que je pourrais faire, c'est le faire briser sur deux lignes en fait, parce qu'il devient assez petit là-bas. Je vais le sélectionner, ramener à notre taille de police, il va se décomposer en cela quand il est sur mobile. Ce morceau de Lorem ipsum doit descendre et a besoin d'en obtenir beaucoup. La boîte doit être beaucoup plus petite pour tenir dans cette entrave sur les côtés ici. Ça va casser à cinq lignes, c'est bon. Taille de la police, je vais laisser tel quel, il est réglé sur 16 pixels, ce qui est une police assez grande. Lorsque vous avez affaire à la taille de police sur mobile, vous devez vraiment tester. Mais à supposer, leur est à peu près aussi petit que je veux aller, et 16 est assez grande police, mais assez lisible. Parce que c'est plus genre de ventes prend, il est heureux d'avoir cette petite taille, donc je vais le rendre juste un petit peu petit. Ma boîte de plus va devoir descendre et tout ce conteneur va devoir grossir. J' ai deux parties à faire. J' ai ma boîte, qui est le sous-jacent sous ma passe de coupure. Je le ferme, pour le rendre plus facile. Je vais d'abord agrandir ça. Vous verrez que c'est en fait loin des côtés des pages. C'est à vous de décider. Cela n'a pas vraiment d'importance pour notre maquette, mais juste pour rendre tout sauf plus utilisable, je vais le traîner et ça va être beaucoup plus grand. Vous devrez peut-être aussi redimensionner l'image de briques ou repositionner en fonction de l'endroit où vous voulez qu'elle soit ou la réduire à l'échelle. J' ai utilisé « Control T » et je vais le réduire pour s'adapter. Vous pouvez en voir un peu plus. Vous remarquerez que le flou a disparu, mais lorsque je clique sur « Entrée », le flou reviendra, éventuellement. Je fais un zoom avant. Je vais déplacer les deux, je maintiens « Maj » pour cliquer sur les deux, et les déplacer. Ça va être la boîte de héros déplacée à travers. La prochaine est à faire avec la boîte à cheveux. Je vais l'attraper, maintenir « Alt » enfoncé pendant que je le traîne à travers, le déplacer à travers. Où vais-je le positionner ? Je vais commencer pour que je puisse le voir du tout. Je vais le faire en bas, la boîte de héros, je vais zoomer. Comment vais-je faire ça ? Ce que vous allez devoir faire, c'est prendre des décisions difficiles quand il s'agit de mobile. Qu' est-ce qui va faire pour une grande expérience ? Pour moi, j'ai décidé que je vais me débarrasser de la copie et je vais décider qu'en fait ces deux sont partis, qui est le rectangle et l'image qui se trouve en haut de celui-ci. Je vais juste utiliser qui nous sommes et l'ipsum Lorem là-bas. Qui nous sommes doit devenir plus petit, saisir mon outil de type cliquez ici, je vais tout sélectionner, et le faire descendre, celui-ci, saisir celui-ci. Déplacez-le dans et je prends le « Lorem Ipsum » déplacer dans, utiliser mon outil de type pour rétrécir les côtés dans. À quel point vous voulez vous rapprocher du bord ? Je fais juste pour moi, qui nous sommes, ce rembourrage. Ça va marcher pour moi. Maintenant, cette boîte va devoir être un peu plus petite ou il est là. Voici mon outil de transformation et ce que je pourrais faire est de faire ce que j'ai fait sur l'autre boîte. Zoom arrière et rétrécir juste pour qu'il soit un peu plus approprié. Ensuite, nous allons faire la boîte de services. Je vais trouver ma boîte de services, elle est là. Je vais zoomer et je vais à « Alt », faites glisser dessus. Mon museau commence. Peu importe où vous commencez. On y va. On a beaucoup à faire ici. Je vais prendre cette boîte violette. C' est donc ce qu'on appelle les services de boîte et une transformation. C'est génial. On va devoir faire des trucs pour ces icônes. Tout d'abord, je veux que les icônes s'empilent les unes au-dessus des autres, puis je travaille sur le texte. Toutes mes icônes, elles sont là. Maintenant, ces petites boîtes ici, je vais m'enfoncer juste pour les ranger. C' est la superposition de couleur, donc je vais juste le remonter encore. Ça veut dire juste, ça a l'air un peu plus jolie toutes mes couches. Je vais tous les sélectionner. Ce que je pourrais d'abord faire est de le réduire un peu. Je vais utiliser mon outil de transformation. Quelle est la taille ? C' est probablement très petit, parce que je veux les empiler les uns sur les autres. Pour être à peu près là. Cliquez sur « Entrée ». Maintenant ce que je vais faire, c'est que vous pouvez voir mes mots circuler partout en termes de document. Où sont-ils tous ? Il y en a un là-bas, il y en a un là-bas. C' est parce que je les traînais, arrondis sur différents plans de travail et c'est l'un des problèmes courants avec ses nouveaux systèmes de plan de travail. La prudence sur ce que vous avez à faire est de les reglisser, juste les ramener au même endroit. Regarde ça. Je vais juste les ramener là où c'était et ils se regrouperont tous. J' ai mon empreinte, j'ai mon application là et ma vidéo minute de photographie. Donc le haut va aller là-bas, puis le dessous, et celui de la photographie, où est-il ? Il est là, là-bas. Reviens, et la vidéo, où est-il ? Il est là. C' est assez bon d'être dehors si loin quand vous faites glisser des icônes que je peux un peu perdre dans le plan de travail parce que vous remarquez avant si je l'annule, quand j'ai commencé à le faire glisser, il est apparu là-haut et si vous avez zoomé de près, vous ne le verrez jamais et vous ne saurez jamais de quelle façon le faire glisser. Juste les aligner, je vais aller imprimer va être là et je vais attraper tous ces gars et il y a une option ici qui dit aligner, tout aligner. Changer les centres de distribution, il y a cette option ici. Maintenant, il ne fonctionne jamais parfaitement distribuer les centres. Vous sentez que si je fais un zoom avant, pour moi, c'est comme si ces lacunes étaient égales, mais celle-ci est beaucoup plus grande. Même si tu l'as fait, je vais les rendre un peu plus gros. Je vais faire une vidéo, le descendre. Je vais aller à la Photographie, le descendre. Je le dépose en utilisant mon clavier et l'application en utilisant le tap-down ainsi. Maintenant vient la tique. Je vais garder les empreintes. J' ai décidé dans ce cas que l'ipsum Lorem ici, le texte va en fait être trop petit pour être utilisable dans ce domaine. Je vais utiliser les bits de texte de haut niveau, donc Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, je vais à la poubelle. Donc je vais juste utiliser ces quatre et essayer de les mettre tous à l'écran, je vais les aligner à gauche. Ce que je vais faire, c'est imprimer , monter, monter, aller là-bas. Photographie, descendre, vidéo descendre, et changer la taille. Ils sont à peu près déterminés par cette photographie, c' est le plus grand de la bande et il est suspendu sur le côté. Je vais faire quelques choses. Je vais tous les sélectionner. Puis à travers un peu, je veux saisir toutes mes icônes. Les pousser un peu à travers. Retour à mon empreinte, ces gars, à travers, et je vais maintenant attraper mon outil de type. Parce que j'ai le plus sélectionné, je vais pouvoir les changer tout de même. Je vais cliquer et « Hold and drag » et je vais m'assurer qu'ils sont tous alignés à gauche. Retournez à mon outil de déplacement, alignez-les à nouveau sur la gauche. Je vais revenir à mon outil de type et choisir une taille de police. En fait, retournez à mon outil Move, déplacez-le à travers. C' est à propos de moi pour les tailles. Je suis content de ça. C' est à quoi ? Vingt-trois points et tout s'aligne. Tout s'adapte, est agréable, distances claires entre eux pour pouvoir les toucher, pour sauter aux pages de services. Ensuite, va être portefeuille. Maintenant, vous remarquerez dans ma vue de bureau, j'ai beaucoup de portefeuilles. On a huit blocs différents. Ce que je vais faire, c'est que je vais cacher la moitié d' entre eux quand il est fait sur mobile pour donner un bon sens de ce que nous faisons, mais pas avoir cette page de défilement apicalement parce que je vais avoir une boîte sur empilée l'une sur l'autre. Tu pourrais essayer de faire deux. Ils peuvent être assez petits, je préfère dans ce cas en faire un. Je vais juste être quatre l'un sur l'autre et exclure les quatre autres. Ce qu'on va faire, c'est les déplacer jusqu'ici. Tout d'abord, ce que je vais faire, c'est, au lieu de traîner tout le tas d'entre eux à travers, je vais en traîner un à la fois pour me rendre un peu plus facile. Celui-ci est, sur mon bureau, c'est sous mon portefeuille. La première chose que je vais faire, c'est que je suis juste en bas. C' est ici, le portefeuille de la boîte qui est cette boîte colorée en arrière-plan en attente « Alt », je le fais glisser à travers, l'aligner, transformer pour l'y mettre. Vous remarquerez que ma vue mobile est trop courte, donc je vais récupérer mon outil de plan de travail, cliquer dessus une fois. Si ça ne marche pas, tu dois avoir le bord. Si cela ne fonctionne pas, il vous suffit de cliquer sur la « liste de haut niveau » ici sur la navigation, faites-la glisser vers le bas, car quelle sera la taille ? Cela va probablement être un peu plus long que ma vue de bureau réelle. Une fois que vous avez terminé, revenez à l'outil Déplacer. Quelle est la taille de cette boîte colorée ? Probablement assez long. Ça va s'adapter à tous mes portefeuilles là-dedans. Allons-y, ce que nous faisons est le portfolio 1, je vais le faire glisser à travers, donc j'ai sélectionné la boîte en dessous et l'image qui y est découpée. Je vais maintenir ma touche « Alt » enfoncée, faire glisser à travers. C'est ce type. Je vais en prendre deux et je vais tenir « Alt », le faire glisser à travers. Je ne les ai pas encore mis à l'échelle, je vais essayer de les faire tous en même temps. Prenez trois, je le traînerai à travers et quatre, je le traînerai à travers. Ils sont tous ici. Maintenant, ce que nous devons faire est de les transformer tous pour qu'ils soient à peu près de la même taille. Je les ai tous sélectionnés ici et je clique sur le « Bottom one » et je maintiens « Shift : et cliquez sur le « Top one » et il empile tout entre les deux. Utilisons l'outil de transformation et maintenez la touche I « Shift » pour vous assurer que tout est parfait. Je vais les mettre à une taille. On dirait que ça va aller, à ce sujet. Autour. D'accord. Joli et grand pour tenir dans la vue mobile. Alors maintenant, j'ai juste besoin de les aligner tous. Donc, je vais prendre le numéro deux, et zoomer, et j'espère entrer pour accrocher ensemble ou au moins centré sur la ligne. Je prends portefeuille 3, sur le point d'être centré, et la même chose avec le portefeuille 4. Super, je vais m'assurer que c'est un peu plus court donc ça s'adapte à tout. Je les ai déplacés mécaniquement. Si vous voulez les rejoindre pour que vous puissiez faire des choses comme des centres de distribution, parce que si je sélectionne tous ces centres et distribue des centres, cela ne fera pas ce que nous voulons. Il déplace les cases séparément des images. Donc, ce que vous devez faire est de sélectionner chacun d'eux, cliquez avec le bouton droit sur eux, ou si vous êtes sur un Mac ou un MacBook Pro sans clic droit, tout le contrôle dans votre clavier, puis cliquez dessus, et allez à Convertir en objet intelligent, et les colle ensemble. C' est comme le regroupement, mais ce que vous pouvez faire plus tard si vous voulez les séparer à nouveau, vous cliquez avec le bouton droit de la souris et il y en a un qui indique Modifier le contenu, et ce qui se passe est de regarder Photoshop, de le modifier. Il ouvre un onglet séparé avec ces petits gars par eux-mêmes. Cela peut être un peu déroutant lorsque vous êtes nouveau, alors seulement vous n'utilisez peut-être que des objets intelligents lorsque vous avez un peu plus d'expérience avec Photoshop. Convertir en objet intelligent et ces gars, Convertir en objet intelligent, et l'étape suivante, génial. Maintenant ils sont bloqués ensemble, je peux maintenant utiliser les centres de distribution. Regardons le prochain morceau, qui est nos équipes. Donc je vais les faire passer. Je vais vraiment amener le tout à travers la boîte des équipes, et je vais le faire glisser à travers, maintenant Alt et l'amener jusqu'à Mobile View. Je vais commencer par ce premier. Dans notre boîte d'équipe, ce que je pourrais faire, c'est regrouper tous ces types. Donc je les sélectionne tous, je vais aller au groupe, et celui-ci est mon portefeuille Box. Ok, copie de l'équipe Box. Débarrassez-vous de l'équipe avec le TOC, et ici nous avons et nous allons attraper le développeur John Smith et son visage. Voilà notre équipe de cercle, Circle 2. Je pense que c'est tout ce type. Super, je ne vais pas redimensionner cela parce qu'il correspond bien dans Mobile et bien que je vais devoir rendre la page encore plus longue, mais rappelez-vous cliquer sur le bord, puis zoomer et je vais le rendre vraiment grand. Je reviens à l'outil Move et ce que je veux faire maintenant c'est trouver Jane, la designer, Jane Smith, et elle était l'équipe trois. Amenez-la à travers, et la voilà, zoomez, et faites-la au milieu. Ok, on dirait que j'ai oublié le texte pour notre homme ici, alors où est-il, c'est John Smith. Où est ce texte, amenez-le. Ce que je pourrais faire, c'est faire le texte un peu, je suppose. Donc nous sommes coincés avec Daniel qui est le plus long. Puis toi, Jane Smith et John Smith, et moi, je prends mon outil Tag et je les fais glisser un peu plus gros. Ça marche, Daniel tient toujours là. Ensuite, allons à Designer, Développeur, Fondateur, nous allons peut-être faire jusqu'à 20, juste le rendre un peu plus lisible dans mobile, et ensuite saisir toutes les poignées Twitter, nous allons l'attraper à partir de 17, nous allons le mettre en place. Pas 204, faisons-le 24. Correct Move Tool, tapotez-le un peu, il suffit de le rendre un peu plus facile pour mobile. Super, tout est dans ses petites boîtes. Jetons un coup d'oeil à notre formulaire de contact. Donc, je vais sélectionner Formulaire de contact dans cette vue supérieure, et zoomer, maintenez Alt, faites glisser dessus. Je vais commencer par tous ces types. Prends la boîte verte. La boîte verte a besoin d'être plus grande et aussi large. Maintenant, tous ces gars, donc il y a Nom du formulaire, Formulaire Email, Formulaire iPhone, Je vais les transformer et les zoomer un peu. Ce que je pourrais faire, c'est les traverser juste pour qu'on utilise autant d'espace que possible. Je les ai tous sélectionnés, je les ai tous transférés en une seule fois, cela signifie que tous vont s'aligner et ensuite s'inquiéter jusqu'à Form Message. Donc je vais devoir saisir Formulaire Message, le traîner vers le bas. Ok, transformez-le, faites-le s'aligner avec ces gars, prenez Message. Il est là quelque part et il est là, fasse la queue avec ces gars. Ceux-ci sont probablement un peu trop loin à gauche maintenant. Donc je vais vous chercher, Email, Nom, Téléphone et vous déposer à travers. Voilà, tu y vas. La dernière chose est ce bouton Soumettre, j'ai oublié de le nommer et cela va être mon bouton, je prends le Soumettre, et ce que je pourrais faire pour celui-ci est juste de le faire toute la largeur. Donc, en sélectionnant juste le bouton, le rendre plus large. Bouton de soumission à travers, rétrécir le bit vert, génial. Ça va être mon formulaire. Le dernier bit est le pied de page. Quand je fais un zoom arrière, j'ai mon pied de page ici. Donc je vais attraper le pied de page, où est-il, il est là. Alt, faites-le glisser. Je vais commencer par ce côté, parce qu'il y a des petites icônes là-bas. Prenez ces icônes, déplacez-les à travers, génial. Rendez le pied de page un peu plus grand, amenez cela pour qu'il ne soit pas si large. Quoi qu'il en soit, nous avons des icônes sociales et il y avait quelque chose d'autre là c'est là la vie privée et les pièces. Alors je fais un zoom avant, super. Je pourrais donc diviser cela en deux lignes, et rendre la police un peu plus lisible sur mobile. C' est probablement trop grand, faisons-le 16, ce n'est pas super important. Allons le ramener à une plus belle taille. Transformez mon pied de page et faites-le dans la bonne taille. Maintenant, mettons-le mon plan de travail, viens sur Artboard, et fais-le s'accrocher au fond. Retournez à l'outil Déplacer, cliquez sur ailleurs. Voyez voir la petite ligne blanche là-bas, je vais taper ça, excellent. C' est ma version mobile. Maintenant, c'est une maquette assez rapide de notre mise en page mobile. Maintenant, cette vidéo est vraiment un comment faire une version mobile. Maintenant, si vous voulez voir pourquoi vous construisez des choses différentes sur mobile par rapport au bureau, vous voulez commencer à regarder dans le monde Dev de l'expérience utilisateur ou la conception UX. Vous devez également commencer à travailler avec le site Web et prototyper afin que vous puissiez voir à quoi il ressemble réellement dans un site Web. C' est une chose à concevoir dans Photoshop, et c'est une autre de le voir fonctionner sur un appareil mobile et les différents types d'appareils mobiles. Que ce soit un très gros Huawei G7 comme je l'ai, ou l'un des petits mini Samsung qui sont autour. Vous devrez jouer avec les deux pour vous assurer que votre site est réellement utilisable. La dernière chose que je vais faire avant de quitter cette version, c'est que je vais ranger mes dossiers. J' ai mon pied de page, il devrait être là-dedans. Mon bouton Envoyer devrait être dans ce, qui devrait tous être à l'intérieur de mon formulaire de contact, et il y a tous mes boutons avec mon menu déroulant mobile qui peuvent être activés et désactivés. C'est tout pour cette vidéo. 46. Exporter vos images Web: Maintenant, dans cette vidéo, nous allons voir comment extraire vos images de Photoshop afin que vous puissiez les remettre à votre développeur pour commencer à construire le site Web. Maintenant, ce qu'ils vont vouloir, ce sont des images prêtes pour le Web, pas seulement le gros fichier Photoshop. Si votre développeur utilise Photoshop alors potentiellement vous pourriez simplement remettre ce PSD et les laisser à lui. Mais souvent, c'est le rôle du concepteur de faire sortir les images pour le web. Il y a à peu près deux formats avec lesquels nous allons travailler. Il va y avoir un JPEG et un PNG. Maintenant, essentiellement les JPEG sont parfaits pour les photos et PNG sont vraiment parfaits pour tout type d'icônes linéaires, logos, tiques, ces types de choses. Il est assez facile de savoir lequel utiliser car il se résume à la taille du fichier par rapport à la qualité. Si cela a l'air génial et qu'il est petit, alors vous devriez utiliser ce format. Vous les vérifiez tous les deux, JPEG versus PNG, voyez ce qui est le plus petit, voyez ce qui est le meilleur, puis utilisez cela. Nous utilisons une nouvelle fonctionnalité dans Photoshop CC 2015. Si vous utilisez une version antérieure, vous devrez utiliser un outil appelé Slice Tool. Mais parce que nous utilisons la nouvelle version, nous allons utiliser cette façon fantastique appelée Exporter sous. Pour le faire, regardons d'abord faire cette image. Donc glissé dans mes calques, il y a cette image assise sur le dessus de la boîte. Peu importe celui que vous exportez, ce soit la boîte ou l'image, cela fonctionnera pour les deux. Ce que nous allons faire est de cliquer avec le bouton droit de la souris et nous allons passer à celui-ci qui dit Exporter sous. Quand nous arrivons au sommet quand nous savons que c'est un PNG, nous pouvons utiliser Quick Export mais pour le moment, je sais que c'est une image, ce sera un JPEG. Donc nous allons obtenir Export As. Donc ça me dit la taille et ça me dit qu'en PNG, celui-ci va être réglé à 76 kilo-octets et c'est assez grand. Donc vous avez une échelle relative. Une fois que vous commencez à approcher de 100, c'est beaucoup trop grand pour une image de cette taille. Donc, quand vous êtes à 100 kilo-octets, vous êtes bien au-dessus de ce qu'il devrait être. Donc, ce que nous pouvons faire est de le changer en JPEG. Ensuite, vous avez ce curseur de qualité. Très rarement, il sort sur un 100 pour cent. Vous voulez le faire glisser jusqu'à ce que vous ayez cet équilibre soit très petit en termes de taille de fichier, mais il n'y a presque pas de dégradation notable de l'image. Donc ce que tu fais, c'est que tu le fais glisser jusqu'à quelque chose d'idiot. Donc on est en baisse à 15 pour cent et c'est difficile à savoir, c' est bon ? C'est mauvais ? Ce que j'aime faire est de cliquer ici et de cliquer en arrière et de décider à quel niveau pouvez-vous aller. Maintenant, dans ce cas, il peut devenir assez bas parce que l'image elle-même est assez bruyante et c'est noir et blanc. Nous pouvons nous en sortir avec beaucoup de mauvaise qualité, mais vous pouvez voir la taille devenir assez faible. Donc quand c'est à 100, c'est à 38 kilo-octets, mais je peux l'obtenir beaucoup plus bas. Maintenant mes règles, j'y traîne entre 30 et 60 selon l'image. Celui-ci peut aller assez bas parce qu'il est assez bruyant, donc à 30 pour cent de sa qualité d'origine, nous sommes à 12 kilo-octets et c'est une belle taille pour moi. Je vais frapper Export. La dernière chose que vous devez faire est quand vous exportez ceci, je vais frapper cette petite option ici pour que je puisse voir, je vais le mettre sur mon bureau. Je vais le mettre dans un dossier spécial appelé Images Web Ready que j'ai fait. L' autre chose que vous devez savoir que lorsque vous nommez vos images, c'est que vous devez vous assurer qu'il n'y a pas d'espace, et vous devez vous assurer que vous n'utilisez aucun des personnages fous qui se trouvent en haut de votre clavier. Il suffit de le garder aux chiffres et aux lettres, et assurez-vous qu'il n'y a pas d'espace. Je vais frapper Export, et c'est mon JPEG sorti. Maintenant, on peut se déplacer, disons que c'est mon portefeuille ici. Peu importe laquelle de ces deux cases que je sélectionne, mais je peux cliquer avec le bouton droit de la souris et dire Exporter sous et j'espère qu'elle se souviendra de ce que j'ai fait pour la dernière fois, donc 30 pour cent. Vous pouvez voir dans ce cas 30 pour cent n'est pas génial pour moi. Si je fais glisser jusqu'à 100, il peut être difficile de voir sur la vidéo que vous regardez sauf si vous êtes en HD. Mais à 30 pour cent, ce n'est pas génial. Donc différentes images vous permettront d'aller de plus en plus haut en plus bas en fonction de la qualité d'eux et de ce que les choses en eux. Donc, je vous ai dit que je monte à environ 60, dans ce cas, je pourrais aller juste un peu plus haut parce que le compromis est, pouvez-vous voir ici [inaudible] à 5 kilo-octets est quelque chose qui est assez petit. Donc je vais frapper Export, et ça va être Portfolio 1. Il a pris le nom de la couche. Donc, lorsque vous nommez vos couches et que vous voulez gagner du temps plus tard c'est d'utiliser des traits d'union au lieu d'espaces. J' aime utiliser des minuscules. Peu importe quand il s'agit de web design, mais j'aime être cohérent. Appuyez sur Exporter. Donc c'est celui-là et vous pouvez passer à travers, exporter celui-ci. Maintenant, vous pouvez exporter des lots en même temps. Je vais donc cliquer sur Portfolio 2, 3 et 4, cliquer avec le bouton droit de la souris, aller à Exporter sous et ce qui va se passer est qu'il va le mosaïque sur ce côté gauche ici. Donc vous avez sélectionné celui-ci, 70 pour cent, c'est bien, c'est petit, celui-là, celui-ci finit à 7 kilo-octets. Tu vois la différence ? Ils ont la même taille, mais il y a beaucoup de contenu différent dans cette image. Beaucoup plus de couleurs et de variations de couleurs différentes. Donc, celui-ci est beaucoup plus élevé et vous pourriez être en mesure d'aller un peu plus bas en termes de qualité. Ça dépendra de votre image, pour que nous puissions les attendre. Celui-ci a l'air génial. Celui-ci a l'air bien. Celle-ci a l'air bien à 40, peut-être pas, 60. Nous allons cliquer sur Exporter, et le seul problème avec cela est que les nommer, il va les vider tous dans ce dossier sans mettre nos petits traits d'union et donc nous pouvons le faire plus tard. Donc il les a exportés. Je vais aller le trouver sur mon bureau et des images web prêtes, il y a Portfolio 1, 2 et 3. Vous économiserez beaucoup de temps plus tard en utilisant des minuscules si vous le souhaitez et assurez-vous qu'il y a des traits d'union au lieu d'espaces, ou vous pouvez utiliser des traits de soulignement, cela n'a pas vraiment d'importance. Maintenant, le prochain format que nous allons regarder est PNG. Donc le format PNG est utilisé quand il y a une des deux choses qui se produisent, qu'il y a vraiment des graphismes plats comme ces icônes, belles choses comme des icônes et des polices et des logos, tout ce qui a vraiment esthétique, design plat à elle sort vraiment bon en PNG. PNG ont un très bon moyen de garder des bords agréables et nets à de très petites tailles de fichiers. L' autre avantage d'un PNG est qu'il utilise la transparence alors qu'un JPEG ne le fait pas. Donc, je veux que ces icônes soient visibles pour que je puisse changer la couleur de fond comme ça et c'est toujours visible. Donc je peux passer par, changer la couleur de fond et il y a des trous au milieu d'ici pour le montrer à travers. Si j'utilise un JPEG, cela ne me permet pas de le faire, il doit avoir une copie d'arrière-plan solide modifiée. C' est la même chose ici pour ces graphiques. Même s'il y avait une image et que j'ai dit, « les JPEG sont parfaits pour les images », dans ce cas, je vais devoir prendre le coup sur la taille du fichier pour être un peu plus grand parce que je veux un fond transparent et je vais vous montrer pourquoi. C' est un très bon exemple à vous montrer. Donc, je vais trouver l'équipe 1, je vais cliquer dessus avec le bouton droit de la souris et il y a Quick Export en PNG. Maintenant, quand vous êtes nouveau, vous n'êtes pas trop sûr si ce devrait être un PNG ou non, vous pouvez utiliser l'Export As qui est le chemin légèrement long. J' ai donc le format JPEG et vous pouvez voir en JPEG que la qualité, changer jusqu'à quelque chose comme 70, la qualité est quoi, 10 kilo-octets, joli et petit, mais il a ce fond blanc. Le JPEG ne permettra pas la transparence, il n'est pas dans son maquillage. On va devoir faire un PNG et on a deux sortes. Il y a PNG 8, qui est très bien et cette taille de fichier est assez petite, mais la palette de couleurs réelle qu'il peut utiliser est en fait assez petite, ce n'est que 256 couleurs. Donc, si vous voulez utiliser un PNG couleur, vous devez utiliser celui-ci ici, qui s'appelle un PNG 24. Même alors, je l'écris là. Donc PNG 8 contre PNG 4. Vous verrez que la taille du fichier est sensiblement différente. Celle-ci ici, jusqu'à PNG 24. C' est vraiment grand. Mais c'est le compromis d'avoir la transparence, JPEG sont vraiment petits mais les graphiques ils doivent avoir arrière-plans transparents et doivent utiliser la couleur, doivent utiliser ce PNG ici. Donc, je vais utiliser PNG couleur, appuyez sur Exporter, et Team 1, cliquez sur OK. Donc, je devrais maintenant travailler à travers et faire la même chose pour les deux autres têtes et le reste des images ici, regardons le faire pour cette icône le long du haut, et ce serait exactement le même processus d'exportation de cette image le long du bas ici. J' ai mon icône, et je sais que ça doit être un PNG. Pourquoi ? Parce qu'il a besoin d'un fond transparent qui par défaut en fait un PNG, et c'est un beau graphique plat qui signifie qu'il va être joli et petit. Cliquez droit. Je pourrais utiliser mon Quick Export comme P&G maintenant parce que je sais ce sera un PNG parce que ce sont des graphismes plats qui ont besoin de transparence, c'est certainement un PNG. Donc, je vais frapper Exporter en PNG et je vais aller directement ici et je vais mettre sur mon bureau sous mes graphismes prêts pour le Web et je vais le mettre là-dedans. Maintenant, je vais juste travailler à travers les différentes icônes et pour dire Exporter en PNG, regardons rapidement la taille PNG. Donc vous pouvez voir celui-ci ici, 90 kilo-octets vraiment gros parce que c'est PNG qui essaie de faire ce que les JPEG font. Mais vous pouvez voir PNG avec transparence faire ce qu'il fait bien, voir qu'il est à 2 kilo-octets gentil et petit. Ce sont les types de graphiques que vous allez devoir remettre à votre développeur Web pour la construction de votre site Web. 47. Exporter CSS à partir de Photoshop: Dans cette vidéo, nous allons voir comment extraire quelque chose appelé CSS de votre document. Le développeur web va dire, « De quelle couleur est-ce ? Quelle taille est cette ? Quelle police s'agit-il ? Quel est l'espacement entre les lignes ? Vous pouvez passer par l'outil Type et les écrire tous et expliquer ce qu'ils sont tous. Une belle petite chose utile que vous pouvez faire pour le rendre un peu plus facile pour eux est d'exporter le CSS. Maintenant, disons qu'ils veulent savoir quelle police il s'agit et quelle taille de police il s'agit. Ce que nous pouvons faire avec mon curseur, voilà, nous voilà. Ce que j'ai sélectionné est celui ici qui dit Copier CSS. Si je copie CSS, rien ne semble se passer. Ce qu'il a fait, c'est qu'il l'a copié et dans votre presse-papiers comme vous l'avez fait à la copie. Maintenant, vous pouvez ouvrir, et [inaudible] à un mot ou vérifier à un e-mail et appuyer sur coller. Ce qu'il a fait, c'est qu'il a créé cette classe le long du sommet là-bas, dont nous n'avons probablement pas besoin. Il y a toutes les choses importantes comme la taille de la police, la famille de polices, couleur de la police, le poids de la police, les hauteurs de ligne avec le centré. Ce type de chose, position, gauche, haut, envoyer pour développer de toute façon. Ils vont probablement ignorer tout ça. Si vous êtes concepteur web, vous saurez juste ce qu' il faut choisir et ce dont vous n'avez pas besoin. Maintenant, je peux expliquer à mon développeur web que le texte de titre de héros est le suivant. Ils seront en mesure d'utiliser leurs compétences de conception web magique pour styliser le texte pour le faire correspondre exactement à votre maquette Photoshop. Regardons le faire plein certaines des parties structurées. J' aime cette boîte de navigation en haut, parce que ce dont nous avons besoin est peut-être la hauteur et nous avons besoin de quelle couleur il est et ce qu'est la transparence Alpha, ou l'opacité est. Je vais les sélectionner comme ma barre de navigation. Je vais aller à la couche, je vais aller à Copy CSS, et je vais sauter dans le Bloc-notes. Ça va être ma barre de navigation. Je vais frapper Paste. Il y a des bits qu'ils vont pouvoir utiliser et des bits qui ne l'est pas. Si vous n'êtes pas un concepteur web et que vous n'avez aucune idée de ce qu'est cette ordure, il suffit d'envoyer tout le lot et ils peuvent y passer. Je sais que nous n'avons pas besoin de la classe, et nous allons utiliser la couleur de fond, nous allons utiliser l'opacité, mais nous n'avons pas besoin de tout cela, mais nous avons besoin de la hauteur. Ce sont les choses que je cherche probablement en tant que concepteur web que j'ai besoin d'aller et de style pour m'assurer que c'est la même chose, et puis il faut beaucoup de conjectures de moi en tant que développeur web pour dire, « C'est à peu près aussi élevé et c'est à propos de cette transparence », et de vous le renvoyer en tant que modèle pour que vous reveniez et vous disiez : « Hé, ce n'est pas le bon, et qu'est-ce que c'est qu'il fait et qu'est-ce que c'est ? » Cela aidera à supprimer beaucoup de cela. C' est l'une des belles nouvelles fonctionnalités et Photoshop CC. Si vous utilisez CS6 ou CS5, malheureusement, ce n'est pas une fonctionnalité pour vous. Vous allez devoir faire beaucoup plus de la mise au point et taper et d'expliquer la police, la taille de la police, couleur, l'opacité, et l'étiqueter pour eux, ou s'ils ont eux-mêmes des compétences Photoshop, ils peuvent y aller et le faire. C' est l'exploitation de CSS de Photoshop. 48. Utiliser Adobe Generate pour obtenir des exportations d'images étonnantes: Maintenant, cette vidéo est une technique très similaire à celle que nous avons faite lorsque nous faisions la fonctionnalité Exporter en tant que. Donc, nous avons cliqué avec le bouton droit sur la couche et nous avons dit exporter sous ou utiliser l'exportation rapide. Celui-ci fait un travail similaire, mais c'est beaucoup plus automatisé et c'est vraiment génial quand vous travaillez, surtout avec vous-même, vous développez des trucs de Photoshop comme une maquette et ensuite vous obtenez des essais prêts et le développer en tant que site Web et vous pouvez revenir et revenir assez rapidement à l'aide de ce logiciel Adobe Générer. La première chose que vous devez faire, est d'activer Adobe régénérer. Si vous n'avez pas Adobe Générer ici, cela signifie que vous utilisez une vision précoce, CS6 et antérieure, et que vous n'aurez pas cette fonctionnalité. Mais si vous êtes dans l'une des versions ultérieures, nous pouvons obtenir un fichier et nous pouvons tourner celui-ci qui dit images assets. Tu l'allumes et rien ne se passe, ok. Donc fichier générer et il voit un peu de techniques à elle. Donc je sais que c'est allumé, ça fait quelque chose. Ce que je vais faire est de sauvegarder mon document dans un endroit spécial juste pour que je sache où il est et que je sauve sur mon bureau, je vais faire un nouveau dossier pour vous les gars juste pour que vous puissiez le voir. Ce sera mon dossier d'exportation de génération. Je suis juste en train d'enregistrer le PSD dans ce dossier ici version de celui-ci. Cliquez sur « OK ». Donc je vais vous montrer ici sur le bureau. Sur mon bureau, il s'appelle Générer le dossier d'exportation et c'est le PSD sur lequel je travaille, juste assis seul. Assurez-vous que Générer est activé, pour moi, il est désactivé lui-même à cause de l'Enregistrer sous, assurez-vous qu'il est coché. Maintenant, ce que je veux faire est, disons que cette image ici je voudrais la sauver. Avec un peu d'expérience, vous savez que ce sera un JPG parce qu'il n'a pas besoin de transparence et c'est une image. Donc ce que je vais faire, c'est que je vais nommer celui-ci ici, point JPG. J' ai des livres de tiret d'image point JPG. Ce que vous remarquerez est, de retour dans ce même dossier, voyez-vous comme par magie, il a créé ce dossier appelé export générer essence. Voici mon image, mon exportation de calque en JPG. Ok, c'est fait, tout automatiquement. La même chose est, disons que si je voulais que ce soit un PNG. Je peux juste, dans mon menu de calques ici, le nommer un PNG. Ceux d'ici, il est en fait retiré le JPG et l'a changé pour un PNG. Ok, donc c'est un moyen très rapide et facile d'exporter des fichiers, mais c'est aussi un très bon moyen si vous faites des ajustements, parce que c'est un lien dynamique, il s'adapte toujours. Donc, il supprime le JPG et ajoute un PNG. J' ai donc cette image bookings point PNG sélectionné et ce que je vais faire est, je vais ajouter un effet de calque et je vais ajouter une superposition de couleur et je vais jouer avec, au lieu de normal qui est [inaudible] Je vais le changer pour se multiplier, choisir une couleur, et je vais le faire comme un vieux style CPS. Vous remarquerez, dès que je clique sur « Ok », si je passe à mes Images, pouvez-vous voir qu'il était refait comme je suis apparu et c'est un nouveau PNG avec le nouveau schéma de couleurs là-dedans. Si je passe à travers et le changer à nouveau, va changer en quelque chose d'un peu plus, un peu plus fort. Ok, c'est vert. Regardez-le ici, il est en train de le refaire dans le vert, donc c'est un lien dynamique. Vous pouvez continuer à bouger, il continue à faire les images. Donc je sais qu'il faut être un JPG. Ok, quand il s'agit de JPG, je sais que c'est JPG, regarde ça, il est là. Maintenant JPG c'est assez grand, c'est 56. Donc, ce que je peux faire est là, c'est un peu de syntaxe que je peux ajouter à ce gars pour en faire une résolution différente. À la fin, pouvez-vous voir ici dans mon dernier panneau, je pourrais rendre cela un peu plus grand pour que vous puissiez voir sur l'écran, c'est qu'à la fin ici, je peux taper. Si je tape un et qu'il va en faire un JPG à 10 pour cent et le refaire. Regardez ceci, il le refait 10 pour cent, il est vraiment petite taille de fichier, mais c'est probablement de mauvaise qualité. Donc, si vous savez, après un peu d'expérience, vous commencez à le savoir. Je sais que si je vais probablement à environ 40 ans, juste avant la fin, ça va le refaire, c' est une taille raisonnable, la qualité est bonne. La même chose se passe si je veux que ce soit un PNG. Si je veux que ce soit un PNG et je sais que je veux être un PNG huit, ou si vous savez que vous voulez que ce soit un 24, vous pouvez taper les deux et ça fera le PNG huit contre 24, tout ce dont vous avez besoin. Maintenant, il y a un tas de syntaxe différente que vous pouvez ajouter à la fin et au début pour la qualité, soulignez, je n'ai pas le temps de passer par chacun d'entre eux ici. Donc, si vous voulez une feuille imprimable pour toutes les différentes syntaxe, téléchargez-les à partir de ce lien ici. Une dernière chose avant de partir, c'est que vous pouvez commencer à faire des groupes. Disons que vous avez un logo ici, mais qu'il y a un cercle, ok, il y a une autre partie à votre logo et que vous voulez l'exporter comme un gros morceau, ok. Donc c'est une tache blanche avec le mot, apportez votre ordinateur portable. Maintenant ce que tu peux faire, c'est regarder ça, c'est mon ellipse et il y a mon amène ton ordinateur portable, ils sont là. Parce que si je donne ces noms séparés, il va les exporter séparément. Donc, ce que je veux faire, c'est avec eux sélectionnés, les grouper, et dans ce groupe ici, je peux nommer ce groupe. Donc celui-ci va s'appeler le logo BYOL et ça va être un point PNG et ça va être un huit. Super, si je saute ici, je devrais avoir un logo, PNG et c'est un huit, [inaudible], transparence, taille impressionnante, minuscule. C' est une autre astuce intéressante à utiliser avec Adobe Generate. 49. Je ne veux pas que ça se termine. Et maintenant, Dan ?: Où allons-nous d'ici ? Une fois votre maquette terminée, s'il vous plaît envoyez-moi une capture d'écran, ou une version JPEG via le forum ou la discussion sur cette page. J' adorerais voir ce que tu as fait. La formation vidéo peut être vraiment un trafic à sens unique. Je reçois mes sensations fortes en voyant ce que les élèves ont fait. Pour que ce cours soit aussi bon que possible, veuillez transmettre toutes suggestions et poser des questions. Pour toute question persistante, j'ajouterai de nouvelles vidéos au cours pour le rendre encore plus grand. Placez rester connecté via votre canal de médias sociaux préféré. Il y a beaucoup de choses géniales à venir dans les futures versions de Photoshop et j'aimerais les partager avec vous. C' est tout pour moi. Au revoir pour l'instant.