Concevoir une UI dans Photoshop - démarrer une carrière dans la conception d'UI

1. De quoi c'est tout ?: Bonjour et bienvenue à mon cours sur Photoshop et la conception de l'interface utilisateur. Depuis huit ans, je travaille en tant que concepteur d'interface utilisateur et j'ai fait face à beaucoup de problèmes. Ensuite, j'ai pensé que je devrais créer quelque chose qui peut amener les débutants et les débutants dans cette carrière de conception d'interface utilisateur. J' ai donc créé ce cours sur la conception de l'interface utilisateur dans Photoshop. Il vous enseignera des bases à toutes les extensions, astuces, astuces, raccourcis, et tous les outils que les concepteurs d'interface utilisateur utilisent dans leur routine quotidienne. Voyons ce qu'il y a à l'intérieur de ce cours. Nous commencerons notre cours en configurant préférences Photoshop pour améliorer les performances et la vitesse. Plus précisément, nous allons configurer Photoshop pour la conception de l'interface utilisateur. Ensuite, nous allons maîtriser les notes et les guides et comment les mettre en page instantanément avec l'utilisation de quelques extensions et plug-ins. Vous maîtriserez ensuite les styles de calque Photoshop tels que les ombres portées, effets de contour, les encarts et les effets enfoncés. Nous allons donc couvrir tous ces styles de calque en profondeur afin que vous compreniez comment créer les effets de lumière et d'ombre et tout cela. Ensuite, il y a une section impressionnante de demandes d'étudiants sur les éléments de conception de tableau de bord. Nous allons concevoir tous ces graphiques linéaires impressionnants, graphiques sombres, graphiques à barres. Nous allons également créer un design d'en-tête vraiment génial à la recherche ou des zones d'en-tête de héros. Cela compte vraiment lorsque vous concevez votre site Web. C' est la première impression sur tout visiteur du site. Vous allez également en apprendre davantage sur la conception d'applications iOS. Nous allons concevoir un écran de l'application iOS 6. Nous allons également créer ce formulaire pop-up de connexion, afin que vous sachiez comment concevoir les champs de saisie et tout. Ensuite, nous avons une grande section sur les filaires, comment créer des filaires, quels sont les outils nécessaires pour créer des filaires ? Je vais vous donner le défi ultime de concevoir un site web basé sur ce filaire. Maintenant, je vais vous montrer en un instant ce que mes étudiants ont créé et conçu jusqu'à présent, afin que vous sachiez quels sont les progrès réalisés par ce cours. Voici le travail de mon élève, Betty. Elle a conçu ce thème Shopify et il est vraiment superbe. Donc elle a créé ça après avoir regardé mon cours. Vous pouvez voir ici, très beau thème, très élégant, très chic. Ensuite, nous avons celui-là. Ceci est basé sur la maquette que j'ai donnée à mes élèves. C' est conçu par mon élève Antonella Spagnoli. Vous pouvez voir ici différentes sections, nos services. C' est un autre travail de mes étudiants. Alors vous pouvez voir ici, c'est un autre de Saqib Ameen, mon élève. Vous pouvez voir comment il a tout arrangé très bien. Il est basé sur le dernier filaire que je leur ai donné pour le défi. Vous pouvez voir ici, voici les quelques en-têtes créés par mes étudiants. Vous pouvez voir ici d'une manière qu'il est temps de collaborer et de faire des idées. Puis celle de Darryl Haynesworth. Ensuite, voici quelques écrans d'application iOS. Les idées que j'ai reçues de mes étudiants, c'est l'un des travaux de l'élève, Darryl Haynesworth. Alors ça vient de Neil. C' est aussi un autre exercice qu'il a fait. Ce sont donc toutes les grandes choses que font mes élèves. Si vous voulez vous joindre en tant qu'étudiant, vous êtes les bienvenus. Ce cours est tout aussi bien pour les débutants que pour les experts. Même si vous concevez depuis huit ans ou six ans, vous aimerez vraiment les astuces et astuces que j'ai partagées dans ce cours. Vous allez adorer les extensions et les scripts populaires que j'ai partagés dans ce cours. Alors ne ratez pas ce cours. Vérifiez son programme d'études et nous allons vous voir dans ce cours. 2. L'installation Photoshop CC2017 pour la conception UI: abord, nous devons configurer nos préférences Photoshop pour une meilleure performance, une meilleure responsabilité et un bon flux de travail. Nous allons configurer les Préférences Photoshop en allant ce menu Edition, puis en allant dans Préférences et Général. Vous pouvez également utiliser la touche de raccourci Contrôle K ou Commande K. Maintenant, la première chose que vous verrez est celle-ci. Nous n'avons pas grand-chose à sauter ici ou à installer ici. Si vous le souhaitez, vous pouvez cliquer sur celui-ci ou décocher celui-ci : Afficher espace de travail « Démarrer » quand aucun document n'est ouvert ou Afficher « Fichiers récents ». C' est ce qu'il va montrer. Chaque fois que vous démarrez votre Photoshop, vous verrez quelque chose comme ceci. Ce sont essentiellement des fichiers récents ici. Maintenant, passer à l'interface. Interface, nous allons sélectionner ce thème de couleur, ce que vous voulez, si vous aimez celui-ci, celui-ci plus sombre, c'est à vous de décider. Maintenant, la chose principale que nous allons installer ici est que ce plein écran et pour les plans de travail, nous n'avons pas besoin de ligne ou d'ombre portée. Donc, je l'ai juste mis à zéro, ces deux. Ensuite, dans cette taille de police d'interface utilisateur, nous avons besoin de la grande taille de police ici. Ne t'embête pas avec d'autres choses ici. Tout le reste est juste par défaut et laissez-le comme ça. Dans ce panneau d'espace de travail, nous allons définir quelques éléments comme les documents ouverts sous forme d'onglets. J' ai vu dans les dernières versions de Photoshop comme 2017 ou 2015, que celui-ci n'est pas coché. Lorsque vous installez Photoshop, vos onglets s'ouvrent dans différentes fenêtres. Assurez-vous de vérifier celui-ci dans Grands onglets. Ces deux options sont cochées. Maintenant, dans ce panneau Outils, nous n'avons pas grand-chose à sélectionner. Si vous voulez décocher, vous devez décocher ce zoom animé. Il va juste mettre de la pression sur votre carte graphique. Ignorez ce journal historique. On n'en a pas besoin. Gestion des fichiers. Maintenant, dans la Gestion des fichiers, nous devons nous assurer que nos fichiers sont enregistrés en arrière-plan et qu'ils sont configurés pour enregistrer toutes les cinq minutes. Alors mettez-le à cinq minutes. Ensuite, dans ce maximiser la compatibilité des fichiers PSD et PSB, choisissez « Toujours ». Dans les fichiers récents, assurez-vous qu'il ne soit pas plus de 10 fichiers ou cinq fichiers, car si vous augmentez ce nombre, il mettra plus d'utilisation de RAM et cela ralentira votre Photoshop. Maintenant, dans ces paramètres d' exportation, l'exportation est essentiellement lorsque vous avez besoin d'exporter rapidement vos fichiers PNG ou vos graphiques, le définir sur PNG et de vous assurer que la transparence est définie ici. Normalement, je ne recommande pas de convertir en sRGB, alors laissez-le. Maintenant, dans cette performance, vous devez définir votre utilisation de RAM à près de 70 pour cent. J' ai presque 16 Go de RAM, donc j'ai réglé comme 9-10 Go à ce Photoshop. Ensuite, à partir de cet historique et du cache, ils ont récemment ajouté cette conception web et interface utilisateur. Vous devez sélectionner celui-ci, laisser ceci tel quel, et à partir de cette zone, Paramètres du processeur graphique, vous devez utiliser ce processeur graphique. Je recommande vraiment que dans les dernières versions de Photoshop, vous ayez une bonne carte graphique installée comme NVIDIA GeForce, j'ai celui-ci NVIDIA GeForce GT 710, et il a deux Go de RAM. Donc tu dois vérifier celui-là. Cela améliorera beaucoup les performances de vos photoshops. Maintenant, passer à ce Scratch Disks, donc c'est essentiellement là que Photoshops enregistre ses fichiers temporaires. Assurez-vous qu'il ne s'agit pas de l'un de vos lecteurs système. Sélectionnez un autre lecteur, puis décochez votre lecteur système comme mon système est sur le lecteur C, donc je vais sélectionner E ou G ou H, ou quelqu'un d'autre. Maintenant en ce qui concerne cette zone Unités, ici, nous devons définir que nos règles sont en pixels parce que nous allons tout concevoir en pixels. Le type doit être des pixels ou des points, les deux sont assez bons. Maintenant, dans la configuration des grilles et des guides, première chose est que vos guides et grilles doivent être colorés séparément comme les guides Canvas sont de couleur cyan, les plans de travail sont bleu clair. Le plan de travail inactif est également bleu clair et les guides intelligents sont essentiellement de couleur verte. Aussi vos tranches sont de couleur magenta. Maintenant, venant vers la grille, votre grille doit toujours être en nombres pairs, et elle devrait être divisible par des nombres pairs. Donc, je l'ai réglé sur 64 pixels et quatre subdivisions. C' est fondamentalement, c'est ma grande boîte d' une grille et il sera divisé en quatre boîtes plus petites. C' est ainsi que j'ai configuré ma grille. Vous pouvez le définir sur 32 pixels ou 16 pixels, comme vous le souhaitez. Voici maintenant nos sections extensions et plug-ins. Assurez-vous que vous avez activé cette option Activer le générateur, Activer la connexion à distance. Choisissez un nom de service ou définissez votre mot de passe ici, et laissez celui-ci comme ça et utilisez un mot de passe ici. Maintenant, vous devez avoir vérifié ces panneaux d' extension de charge et autoriser les extensions à se connecter à Internet. Parfois, beaucoup d'étudiants, ils me demandent que mes extensions ne se chargent pas et qu'elles ne se présentent pas. Vous devez décocher et vérifier ceci une ou deux fois et redémarrer votre Photoshop. Je pense que ça marchera. Assurez-vous donc d'activer le générateur et ces deux options sont cochées. Maintenant, dans la section Type des préférences, nous allons chercher ces deux paramètres. L' un est le nombre de polices présentes à afficher. Assurez-vous qu'ils sont cinq ou sept. Je viens d'augmenter le nombre à sept parce que je ne veux pas rechercher les polices encore et encore, que j'ai récemment utilisées. Ensuite, ce Show Font Names English, assurez-vous que celui-ci est coché. Activez les alternances de glyphe Type Layer, assurez-vous que celui-ci est coché. Fondamentalement, vous devez vérifier tout cela. Ce sont tous les paramètres et préférences pour Photoshop dernière version CC 2017, et je pense que cela fonctionnera pour les anciennes versions aussi, et il n'y a pas beaucoup de différence, mais je pense qu'ils ont ajouté quelques choses dans les dernières versions. Passons donc à la leçon suivante. 3. Réglage de raccourcis clavier personnalisés dans Photoshop: Aujourd'hui, nous allons configurer des raccourcis personnalisés Photoshop. Maintenant, ce que les raccourcis personnalisés font est que, en tant que concepteur d'interface utilisateur qui utilisent certains workflows et certains éléments ou outils de Photoshop de temps en temps, et nous n'avons pas besoin d'autres. Ce que nous allons faire, c'est que nous allons définir des raccourcis personnalisés pour ce que nous devons faire rapidement pendant que nous concevons des applications Web ou mobiles. Maintenant, nous allons aller à une édition. Pour définir ces préférences, nous allons aller à Modifier, puis Raccourcis clavier. Ici, nous avons le menu de raccourcis clavier. Il y a peu de choses que nous devons mettre en place ici. Maintenant, nous allons d'abord aller à cette édition et nous allons descendre à la recherche. Il s'agit d'une toute nouvelle fonctionnalité de Photoshop CC 2017. Par défaut, il n'y a pas de raccourci pour cela. Ce qu'on va faire, c'est appuyer sur Contrôle F ou Commande F, et on va appuyer sur Entrée. Cela va ajouter une touche de raccourci ici. C' est notre première touche de raccourci. Maintenant, la deuxième étape est que nous allons configurer quelques touches de raccourci personnalisées dans ce panneau Calque. Nous allons étendre celui-ci, et vous devez trouver cette couche Renommer. Une fois que vous avez trouvé cela, maintenant F1 est normalement pour l'aide de Photoshop, mais nous n'utilisons pas normalement la touche de fonction 1, donc je l'ai définie sur F1 en tant que couche Renommer. Je peux rapidement renommer mon calque, juste en appuyant sur F1, et cela m'a conduit, renommer mon calque. Ceci est une touche de raccourci et la seconde est dans la section où nous avons des objets intelligents. Allez à ce Convertir en objet intelligent et je l'ai défini sur Alt F5. Vous pouvez utiliser n'importe qui que vous aimez, l'option F5 ou tout ce que vous voulez. Mais assurez-vous de vous en souvenir tout ce que vous savez qu'ils sont faciles à retenir. Si vous les mettez en place et que vous les oubliez, alors ce sera un mal de tête. Maintenant, dans le menu Calques, vous devez trouver ceci, Aligner les calques à la sélection. Nous devons définir deux raccourcis pour ces centres verticaux et horizontaux. Vous pouvez le configurer comme vous voulez, mais j'ai réglé sur Alt Control V ou Option Command V, pour vertical, juste pour se rappeler que ce sont des centres verticaux. Puis pour Alt Control H pour les centres horizontaux. Ce sont quelques paramètres dont nous avons besoin dans ce panneau Calque, touches de raccourci Calques. Maintenant, nous devons passer à cette fenêtre. Développez ce panneau Fenêtre et nous avons besoin de définir la touche de raccourci pour cette tuile tout Verticalement Alt Control F10. On a vraiment besoin de celui-là. Ce sont toutes les touches de raccourci que nous allons configurer dans notre Photoshop. Il y a quelques autres options qui peuvent être utiles et je dois les expliquer dès maintenant. Maintenant, vous pouvez voir ici deux boutons comme vous pouvez voir ici. Ceci est pour enregistrer toutes ces touches de raccourci dans un ensemble. Si vous souhaitez enregistrer les touches de raccourci dans un nouvel ensemble, vous souhaitez créer un jeu de raccourcis séparé. Vous pouvez définir, Sauvez-le ici. Si vous voulez résumer toutes les touches de raccourci, si vous cliquez ici, il va générer un fichier HTML. Si vous essayez de l'enregistrer ici sur le bureau, comme ça. Vous pouvez voir qu'il peut générer toutes les touches de raccourci fichier HTML. Vous pouvez vérifier ces fichiers HTML et apprendre tous les raccourcis que vous avez définis. C' est juste une autre façon d'apprendre ces raccourcis. Il y a peu d'autres choses comme Raccourcis pour : Menus d'application. Vous pouvez aller ici, définir les menus du panneau aussi. Vous pouvez voir ici Couleur, pinceaux, tous les outils dont vous avez besoin pour accéder ici. Si vous voulez définir des touches de raccourci pour eux, vous pouvez définir ici. Vous pouvez également définir les touches de raccourci pour Outils. Donc les outils sont par ici. Sur le côté gauche, vous pouvez voir Lasso Tool, Polygon Lasso, ils ont L, puis nous avons W, W, C, C, C, C, C. Ce sont toutes les touches de raccourci que vous pouvez configurer dans Photoshop. Passons à la leçon suivante. 4. Installation de scripts dans Photoshop: Maintenant, dans cette leçon, je vais parler de la façon d'étendre capacités de Photoshop ou comment ajouter de nouvelles fonctions à Photoshop, qui ne sont pas actuellement présentes dans Photoshop. Il y a deux façons de le faire. L' un est que vous pouvez installer des scripts personnalisés réalisés par différents professionnels et programmeurs. La seconde est que nous pouvons installer Photoshop Extensions créées par des programmeurs. Ils utilisent également les mêmes scripts, mais ils sont accessibles via des panneaux. Dans cette leçon, nous allons installer Photoshop Custom Scripts à l'aide de mon PC. Si vous êtes sur un Mac, vous devez voir la leçon suivante pour trouver le chemin et où vous allez installer Photoshop Scripts sur un Mac. Alors commençons. abord, ce que nous allons faire, c'est que je vais vous montrer le site, One Script, par ici. Donc c'est un script qui développe des objets intelligents par ce type Kamile. Ce qu'il fait, il développe réellement les objets dynamiques créés par Photoshop, qui dans Photoshop il n'est pas possible de revenir à un dossier normal ou à un groupe ou des calques une fois que vous avez créé des objets dynamiques. Si vous ne connaissez pas les objets intelligents, ne vous inquiétez pas. Il y aura une conférence à l'avance dans les prochaines sections sur les objets intelligents. instant, vous devez savoir que cette fonctionnalité n'est pas présente dans Photoshop. Ce que nous allons faire, nous allons télécharger ce script ici. Les scripts sont fondamentalement au format JSX JS. Vous pouvez voir à la fin JSX ou JS format. Ce sont essentiellement des fichiers JavaScript et nous allons le télécharger. Enregistrez le fichier. Maintenant, nous avons téléchargé le script personnalisé Développer les objets intelligents. Nous allons le copier et l' installer dans le dossier Installation de Photoshop. Je vais fermer Photoshop tout de suite. Assurez-vous de fermer Photoshop lorsque vous l'installez car il n'apparaîtra pas. Vous devez redémarrer Photoshop pour mettre à jour le dossier Scripts. Je vais le fermer. Je vais cliquer avec le bouton droit de la souris et aller dans Propriétés et Ouvrir l'emplacement du fichier. Donc, fondamentalement, ce que nous faisons est que nous allons aller dans le dossier Photoshop Presets dans l'installation de Photoshop. Vous pouvez voir ici, il y a différents dossiers, plugins, ressources prédéfinies. Nous devons trouver ces dossiers de presets. Double-cliquez et nous allons trouver le dossier Scripts à l'intérieur, Scripts. Ici, c'est. Vous pouvez voir une fois que j'ai ouvert le dossier de script, il y a beaucoup de scripts, mais ces scripts sont les scripts par défaut qui ont accompagné l'installation de Photoshop. Il s'agit de scripts et automatisés de gestion des tâches qui sont livrés avec Photoshop. Je vais créer un nouveau dossier ici, Mes scripts, quelque chose comme ça, et je vais le coller ici. Maintenant, nous allons redémarrer notre Photoshop pour voir comment nous avons ce script mis à jour ici. Maintenant, allez dans le fichier et allez dans les scripts et vous pouvez voir ici nous avons un nouveau script ici, KAM Expand SmartObjects. Essayons ça. Créons un nouveau document de n'importe quelle taille. J' ai créé un très petit document. Pour l'instant, juste un exemple, je vais créer quelques couches ici. Ok, alors deuxième, rendons ça un peu plus petit que celui-ci. J' ai deux couches. Je vais créer un objet intelligent à partir de ces deux. Maintenant, c'est un objet intelligent et il n'y a aucun moyen que je puisse récupérer mes deux couches. Je vais sélectionner ce calque et je vais aller à Fichier, Scripts, et je vais aller à KAM Développer SmartObjects en utilisant ce script. Une fois que je clique dessus, il va effectuer quelques actions et vous pouvez voir ici, voici le dossier et il m'a donné mes deux couches de retour. C' est donc une façon d'étendre capacités de Photoshop qui ne sont pas présentes dans Photoshop, vous pouvez ajouter de nouvelles fonctions, de nouvelles fonctionnalités, il y a beaucoup de scripts écrits par des programmeurs ou des utilisateurs de Photoshop. Il y a une autre chose que vous pouvez faire avec ces scripts, vous pouvez définir des touches de raccourci personnalisées Photoshop pour cela. Nous allons aller à Modifier, Raccourcis clavier et Fichier. Ensuite, nous devons aller à Scripts. Où sont les scripts ? Nous avons les scripts et vous pouvez voir ceci est notre Expand Smart Object. Je vais lui donner une clé de Control Shift E. Donc, il va me donner qu'il est déjà affecté fusion de couche, donc quelque chose comme ça, Alt Control, Alt F4, Alt commande option F4 sur votre Mac. Mais en ce moment, je vous montre comment configurer des raccourcis clavier. La prochaine fois que nous allons l'utiliser, nous allons simplement appuyer sur Alt Control F4 pour étendre notre Smart Object. Tout cela concerne les scripts personnalisés, comment les installer et comment définir des touches de raccourci pour eux. Passons à la leçon suivante. 5. Installation de scripts Photoshop sur MAC: Dans cette leçon, je vais vous montrer comment aller dossier Preset et installer des scripts à l'aide de Mac OS. Allez à Go, et nous allons aller à Applications, et double-cliquez sur cette icône Photoshop. Vous pouvez voir qu'il existe différents dossiers comme Plug-ins, Preset. Maintenant, nous sommes intéressés par ce dossier Presets. Double-cliquez dessus et vous pouvez voir que vous avez beaucoup de dossiers. Maintenant, si vous voulez aller installer certains scripts, vous pouvez cliquer sur s et vous pouvez accéder aux scripts. Vous pouvez coller vos scripts ici et c'est ainsi que nous installons des scripts sur Mac OS. Maintenant, il y a beaucoup de fichiers prédéfinis Photoshop comme des actions. Nous avons des actions différentes. Vous pouvez installer des actions ici. Si vous pouvez les trouver en ligne, alors vous pouvez avoir différents dégradés ici, installer différents gradients. Ensuite, nous avons des mécènes différents. Vous pouvez avoir des mécènes ici. Dans différentes leçons, j'ai montré différentes choses à installer. C' est essentiellement comment vous allez trouver dossier Preset de Photoshop pour installer différents types de choses comme les styles, les raisins, les motifs et les formes, les formes personnalisées, parfois les icônes, ils viennent avec des formes personnalisées, Photoshop fichier csh. Vous pouvez copier le fichier csh ici et utiliser ces formes personnalisées dans votre flux de travail Photoshop. Maintenant, c'est le problème que beaucoup d'étudiants avaient. Vous pouvez également voir des nuances de couleur ici. Si vous avez vos nuances de couleur personnalisées et que vous l'avez sauvegardées, ce serait ici. Si vous voulez apporter un échantillon personnalisé ici, vous pouvez le copier et le coller ici. C' est ainsi que nous installons différents préréglages dans Photoshop à l'aide de Mac OS. Si vous avez des questions, faites-le moi savoir. Je serai en mesure de créer plus de ces vidéos pour les utilisateurs de Mac OS. Allons de l'avant et passons aux prochaines leçons. 6. Extensions Photoshop pour les concepteurs UI: Aujourd'hui, je vais vous donner le plus grand secret de la conception de Photoshop et de l'interface utilisateur, qui est les extensions Photoshop. Aujourd'hui, beaucoup de concepteurs d'interface utilisateur, ils ne s'appuient pas vraiment sur les fonctionnalités de Photoshop, mais ils étendent leurs capacités Photoshop en utilisant des extensions et des scripts Photoshop. Aujourd'hui, nous allons parler des extensions Photoshop. Maintenant, il y a beaucoup de centaines d'extensions Photoshop, mais je vais vous montrer peu d'entre elles qui aident vraiment à la conception de l'interface utilisateur et accélèrent vraiment notre flux de travail et nous ne pouvons pas vivre sans elles. Il y en a peu qui sont très bons dans les extensions Photoshop gratuites. Ensuite, nous avons des extensions premium. J' ai acheté beaucoup comme peut-être autour de 10 différentes extensions Premium Photoshop et je vais vous montrer les deux. C' est à vous de décider si vous allez l'acheter ou non. Voyons d'abord une partie de l'échange gratuit Photoshop. Le premier que je vais vous montrer est cette extension Photoshop, qui est fondamentalement générateur d'utilisateurs aléatoires qui est basé sur ce moteur de site web randomuser.me. Pour l'instant, dans la dernière version de Photoshop, CC 2017, cela ne fonctionne pas. J' ai posté l'auteur de ce plug-in, le problème que cela ne fonctionne pas, je ne sais pas quand ils vont le mettre à jour. Mais c'est le problème avec les extensions gratuites, sorte qu'elles ne sont pas fondamentalement trop bien gérées. Maintenant, son alternative est celui-ci UberFaces, et j'ai aussi celui-ci aussi. C' est juste $5. Il est essentiellement premium et il est également basé sur le site ou le moteur de générateur d'utilisateurs aléatoires, mais il a quelques capacités plus. Vous pouvez lire à ce sujet ici, uberplugins.cc. Ce qu'il fait, c'est que je vais vous montrer la puissance de ces plug-ins et extensions dans la prochaine leçon. Je vais vous montrer certains des plug-ins que j'utilise et comment ils peuvent être utiles dans la conception de l'interface utilisateur. Ensuite, nous avons cette police impressionnante PS qui peut facilement apporter n'importe quelle icône dans Photoshop. Donc, vous pouvez voir ici, vous devez le télécharger à partir d'ici. Il est disponible pour Mac et Windows, tous les deux. Maintenant, peu de plus. Ça s'appelle Griddify. Ceci est un autre panneau Photoshop et il est vraiment cool extension. Il peut vraiment dessiner différents guides et grilles rapidement et très rapidement. Donc c'est l'un d'eux, c'est aussi gratuit. Ensuite, on a Oven. Il s'agit essentiellement d'exporter des ressources Photoshop dans différentes tailles. C' est aussi l'un d'entre eux que j'utilise parfois, même si la dernière version de Photoshop a son propre moteur d'exportation, donc nous n'avons pas besoin de cela, mais vous pouvez le regarder. Ensuite, nous avons cette encre pour générer des spécifications différentes lorsque nous livrons nos fichiers de conception Web ou nos fichiers de conception d'applications mobiles aux développeurs. Ils ont besoin de connaître les tailles, donc la hauteur et la largeur, quel élément est qui a la taille ou quelle taille cet élément a. Donc, c'est fondamentalement le plug-in. Cela va aider, et c'est fondamentalement plug-in gratuit. Un autre que j'utilise, c'est Markly. C' est très merveilleux, vraiment facile à utiliser, et beaucoup d'entreprises comme Microsoft, Disneyland, ils l'utilisent. Je l'utilise aussi, je suis l'un d'eux. C' est essentiellement un plugin premium et c'est 50$ en ce moment. Donc, ce sont aussi pour générer des spécifications pour le développement web et les remettre aux développeurs. Alors c'est aussi gratuit, Fontea. Il gère toutes les polices Google et il peut avoir beaucoup de fonctionnalités. Je ne l'ai pas encore utilisé, mais je pense que vous pouvez l'essayer. Il a tous les formulaires Google dedans et il peut facilement gérer et vous pouvez appliquer différentes polices sur le texte facilement. Puis celui-ci, Craft, il a beaucoup, vous pouvez dire différentes fonctionnalités. C' est un plugin avec quatre ou cinq sous-sections différentes et c'est vraiment génial, mais cela fonctionne juste sur Mac. Donc, c'est un peu un inconvénient. Cela fonctionne juste pour Mac. Si vous avez Photoshop et Mac alors vous avez de la chance, vous pouvez l'utiliser. Ensuite, nous en avons un autre qui est aussi pour la création de guides. Ceci est un plugin premium. J' adore vraiment si tu peux l'acheter pour 10$, je pense que tu devrais l'acheter. C' est l'un des meilleurs que j'ai vu pour utiliser des guides et créer des grilles. Ensuite, celui-ci est ColorKit et c'est essentiellement vous gérez les couleurs dans Photoshop liées à différentes couches dans les éléments de conception Photoshop. Par exemple, si vous voulez changer la couleur de deux ou trois éléments en même temps, vous pouvez le faire avec ceci. Donc, vous pouvez vérifier. Je vais donner les liens vers tous ces plugins, alors ne vous inquiétez pas à ce sujet. Ensuite, nous passons à un autre grand site qui a beaucoup de plugins premium. J' ai acheté beaucoup d'eux. Donc, l'un est CSS Hat 2, je le recommande vraiment. Si vous êtes un développeur frontal, vous êtes un codeur, vous pouvez coder en HTML, vous avez vraiment besoin de cela. Ensuite, j'ai aussi ce PNG Express. Ensuite, j'ai déjà ce Guide Guide et cette Perspective Mockup. Beaucoup d'entre eux que je n'utilise pas en ce moment. Social Kit Pro est également l'un d'entre eux. Il peut créer des graphismes sociaux comme des avatars Facebook et différentes tailles et modèles de médias sociaux facilement dans Photoshop en quelques clics. Alors c'est ColorKit, j'ai déjà cette Fontea. Modèles subtils. Il peut obtenir beaucoup de motifs subtils, très légers dans Photoshop en un seul clic. Donc, ce sont beaucoup de plugins différents. Vous pouvez tous les essayer si vous êtes un développeur iOS ou si vous concevez beaucoup pour iOS et Apple, vous avez besoin de ce plugin. Ensuite, nous avons UberFaces, UberColumn, UberFrames. Il y a des tonnes de différents plugins Photoshop. Vous pouvez les essayer et vous pouvez les acheter si vous voulez, alors il y a une dernière ressource que je veux partager avec vous est ce pspanels.com. Il a beaucoup de plugins chaque jour, il est mis à jour. Si vous voulez rester à jour, vous pouvez envoyer un e-mail, abonnez-vous ici. Ce n'est pas mon site web. Donc, il montre beaucoup de différents plugins Photoshop, panneaux, même certains d'entre eux ont travaillé avec Adobe Illustrator. Peu d'entre eux sont libres, comme vous pouvez le voir ici. Donc, ils sont vraiment super, vous pouvez les essayer. Je vais partager les liens avec tous ces plugins et extensions dans les sources de cette conférence. Alors, vérifiez les. Maintenant, dans la prochaine conférence, je vais vous montrer la puissance de tous ces plugins en action. Passons donc à la leçon suivante. 7. Puissance des extensions Photoshop: Maintenant, laissez-moi vous montrer certains des superpouvoirs de ces plugins Photoshop. Maintenant, c'est un exemple de fichier. Cette conférence est juste pour démontrer que ces plugins peuvent être utilisés de cette façon. Donc, je vais vous montrer quelques-unes des utilisations des plugins que j'ai. J' ai élargi ce panel ici. J' ai Color Kit, FontAwesome, Ink, PNG Express, QuickGuide, Griddify, GuideGuide, Modèles subtils, UberFaces et Device Preview. Commençons par ce kit de couleurs. Ce qu'il fait, il enregistre fondamentalement les couleurs de ces éléments en groupes, comme ça, vous pouvez voir ici. Si je veux changer la couleur de celui-ci comme celui-ci, et que je choisis une autre couleur, vous pouvez voir qu'il va mettre à jour les deux boutons ou ces ovales en même temps. Vous pouvez voir ici, c'est très pratique. Je peux mettre à jour le schéma de couleurs de plusieurs éléments en même temps avec une très grande vitesse et même je peux changer tout le schéma de couleurs de l'ensemble du site Web ou de la conception web ou d'un document entier. C' est la puissance de ce kit de couleurs. Il a cet exemple de projet. Vous créez un projet et dans le projet vous liez différentes couches avec cela. Si je relie ce calque à cela, vous pouvez voir qu'il change la couleur de ce calque. Si je change la couleur à une couleur sombre comme ça, vous pouvez voir tous ces trois, ces deux ovales et cela a changé. C' est très pratique, très puissant, mais c'est un plugin premium. Tu peux l'acheter. Ensuite, nous avons FontAwesome. Ce qu'il fait, il peut apporter toutes les différentes icônes dans ce. Je peux dire flèche. Vous pouvez voir ici il y a différents types de flèches. Maintenant, c'est la flèche et c'est une forme. Vous pouvez l'agrandir comme ça. Ainsi, vous pouvez l'étendre, vous pouvez changer sa couleur comme ceci. Vous pouvez voir que c'est très puissant, très facile, et il est très bon pour les développeurs aussi. Puis venir à cette encre, à l' encre et à cette Markly. J' ai ce Markly par ici. Allons l'ouvrir. C'est Markly. Ces deux sont essentiellement destinés à développer nos spécifications de conception. Qu' est-ce que ça veut dire ? Si je vais sélectionner ce rectangle et que je vais montrer ses mesures, vous pouvez le voir en un instant. Maintenant, il fait 97 pixels de hauteur et 802 pixels de largeur. Mes développeurs, ils ont besoin de savoir comment ils vont produire cet élément de conception en HTML. Dans la conception web, le développement web, ils ont besoin de tailles exactes. C' est ce qu'il va leur donner. Alors laissez-moi vous montrer comment il va donner les détails de celui-ci. Je vais cliquer sur cette icône ici, bouton. Vous pouvez le voir montre le nom, super puissance, opacité un, et le nom de la police, MuseoSans-300, style est 300. C' est tous les détails des valeurs CSS comme les couleurs RGBA, et beaucoup de choses dont les développeurs ont besoin des concepteurs. ce moment, je vais supprimer ce dossier ici. Alors laissez-moi vous montrer la puissance de l'autre plugin, qui est fondamentalement ce Markly et c'est un plugin premium, donc je vais importer le document dedans. Maintenant, le document a été importé dans ce plugin Markly, et vous pouvez voir ici, si je viens de cliquer ici, vous pouvez voir qu'il me montre les tailles dans celui-ci. Supprimons ceci. Je vais supprimer toutes les choses ici. Supprimons rapidement les informations autour de toutes ces couches. Maintenant, pourquoi celui-ci est premium et l'autre ne l'est pas, parce que vous pouvez simplement double-cliquer sur tout cela et vous pouvez afficher toutes les choses ici. Il suffit de cliquer comme ça. C' est très rapide et très facile. Vous pouvez voir ici je peux juste continuer à cliquer et je peux tout montrer ici, comme c'est la position, x, y position et beaucoup d'autres informations. C' est très facile, très rapide. Même si vous double-cliquez dessus, vous pouvez voir ici il montre toutes les informations de police juste en double-cliquant sur n'importe quel élément. C' est vraiment cool, moyen vraiment rapide de générer des spécifications des développeurs. Ensuite, en venant à ce PNG Express, il ajoute différentes balises à ces boutons et à ces différents éléments ou groupes, et nous en avons besoin pour les exporter en PNG Express. En ce moment, Photoshop a une très bonne exportation comme superposition et il a un très bon outil. Il peut exporter dans plusieurs formats de différentes tailles. Nous n'avons pas beaucoup besoin de ce PNG Express. Puis celui-ci, QuickGuide et Griddify. Maintenant, ce que QuickGuide va faire, c' est qu'il va générer rapidement des guides autour de cette couche. Vous pouvez voir ici, sont tous les guides qui ont été générés autour de ce carré en un seul clic. Donc, si je veux quelque chose comme ça, peut-être au milieu et comme ça, je peux juste cliquer sur ces deux et générer les guides au milieu de cela. Donc, si je veux placer quelque chose au milieu, je sais que c'est le milieu de ce cercle. Il peut également verrouiller ce calque rapidement et masquer ce calque, masquer les guides. Verrouillez les guides, masquez le guide et montrez les guides ici. Maintenant, nous allons utiliser Griddify. Griddify, nous pouvons diviser le document entier en différentes sections en utilisant des guides et des grilles. Il est très bon dans la conception d'une grille autour de notre conception. Je vais sélectionner ça. J' ai fait la sélection, et je vais la diviser en quatre sections, verticalement comme ça, et aussi horizontalement, horizontalement et verticalement. Alors j'ai divisé celui-là comme ça. Si je mets l'espacement zéro et l'enveloppe, vous pouvez voir ici qu'il me donne autour de ça. Il enveloppe cela avec différents guides comme ça. Vous pouvez voir ici, j'ai préparé tout un système de grille ici. C' est vraiment cool. Ensuite, nous avons ce GuideGuide. Ce que ce Guide va faire, c'est qu'il peut générer n'importe quel système de grille en quelques secondes. Je vais générer un système de grille de huit colonnes ici, et il va le générer en quelques secondes comme ça. Vous pouvez voir ici, ce sont les paddings. Vous allez en apprendre davantage sur l'utilisation de cette grille dans les exercices et leçons ultérieurs. Alors ne vous inquiétez pas pour ça. Je vous montre juste l'utilisation de ces plugins et comment ils peuvent aider et accélérer notre flux de travail. Maintenant, je vais vider les guides ici. Maintenant, il y en a un de plus, cela s'appelle Patterns Subtiles. Je vous ai montré comment cela peut apporter beaucoup de grands modèles dans Photoshop en un seul clic. Je vais attacher un motif subtil avec ce fond. Commençons donc avec ce Subtil Patterns. J' ai des papiers, des scribes, murs, des choses différentes par ici. Je vais vérifier celui-ci et vous pouvez voir qu'il a appliqué ceci comme une superposition de motif ici. Je peux avoir un effet de papier ici avec ce fond d'écran. Je vais le supprimer maintenant. Donc c'est une autre façon. Ensuite, nous avons cette UberFaces. C' est vraiment cool. Je vais te montrer comment ça va t'étonner. Un, 2, 3, allez. Vous pouvez voir qu'il a généré quatre avatars dans ces quatre éclipses en un seul clic. Donc ça a économisé 30 ou 40 secondes ou peut-être deux minutes de votre travail. Revenons en arrière et c'est ainsi que nous utilisons ce plugin. Vous pouvez générer des femmes, des hommes, et vous pouvez simplement cliquer dessus et il va le masque dans toutes ces formes. Ensuite, cet aperçu de l'appareil, je ne peux pas le montrer en ce moment, mais il est essentiellement de connecter et de gérer votre zone de conception Photoshop sur votre application iPhone. Donc, comment vous allez faire est que vous allez utiliser ces connexions distantes ici. Vous pouvez voir ici dans ces préférences. Ce nom de service et ce mot de passe et cette adresse IP. Ce sont les trois choses que vous allez utiliser. J' ai montré comment connecter cela dans mon deuxième cours, Typography for UI Designers, qui est un peu avancé. Dans cette leçon, je pense que je ne vais pas vous montrer, mais vous pouvez facilement l'obtenir. Si vous voulez suivre mon autre cours, vous êtes les bienvenus. Ce sont toutes les superpuissances de ces extensions UI Design Photoshop. Je pense que tu as vraiment aimé cette leçon. Passons donc à la leçon suivante. 8. Comment installer des extensions Photoshop: Maintenant, je vais vous montrer les moyens d'installer différentes extensions Photoshop. Il existe deux ou trois types différents d'extensions Photoshop et leurs fichiers fondamentalement que vous devez installer sont dans des formats différents. Donc, je vais vous montrer différents formats. Aussi, Si vous avez Photoshop version qui est comme 2014 CC ou ci-dessous 2014, alors vous devez induire Photoshop Adobe Extension Manager que vous devez télécharger à partir du site Web Adobe. Si vous disposez de la dernière version de Photoshop, CC 2017 ou CC 2015 ou 15.5, vous devez utiliser un logiciel appelé ZxPInstaller. Je vais vous montrer marcher à travers toutes les choses et différents problèmes que vous pouvez rencontrer pendant le style de ces plug-ins ou extensions. Permettez-moi de vous montrer le premier Adobe Extension Manager. C' est à ça que ça ressemble. Si vous voulez installer quelque chose, vous devez installer l'extension, cliquez ici, et vous devez trouver le fichier avec l'extension. Vous pouvez voir ici, ZXP. Il va seulement ouvrir les fichiers ZXP et cela fonctionnera avec Photoshop version CC 2014 ou ci-dessous. Pour CC 2015 et les versions ultérieures, vous n'avez pas besoin de ce logiciel. Vous pouvez même le désinstaller si vous n'en avez pas besoin. Maintenant, laissez-moi vous montrer différents formats de fichiers que vous allez voir lors de l'installation des extensions Photoshop. Le premier type que je vais vous montrer est celui-ci, ZXP. L' icône ressemblera à celle-ci. Il s'agit de l'extension PNG Express.zXP. Vous pouvez voir ici dans le chemin du dossier, c'est pour CC 2014. Maintenant, si vous avez CC 2015 ou le dernier, alors vous allez voir quelque chose de plus proche de cela. Ceci est ColorKit 1.5. Maintenant, ce que vous allez voir c'est que vous allez voir quelque chose comme ça, installer.jsx fichier. Maintenant, ce que vous allez faire est la plupart des plug-ins comme je vais vous en montrer un de plus, guideguide.ps. Donc, cela a à nouveau installer.jsx. Normalement, ce que vous faites est de faire glisser et déposer votre fichier d'installation dans ce Photoshop et il va exécuter et installer le plug-in Photoshop et vous devez redémarrer Photoshop, et c'est tout. Maintenant, j'ai déjà guidé l'installation. Si je clique ici, vous pouvez voir qu'il m'a donné une erreur. Maintenant, la deuxième méthode est que si cela ne fonctionne pas, alors vous devez aller dans « Fichier », et aller dans « Scripts », puis « Parcourir », puis vous devez trouver ce fichier de script, fichier d'installation, et vous devez l'exécuter à partir d'ici. Vous pouvez voir ici, il exécute des fichiers JSX, JS, JSXBIN. Ce que vous allez faire, c'est que vous allez exécuter ce même fichier à partir du menu Fichier de Photoshop. Allez dans ce fichier de script « Fichier », « Scripts » et « Parcourir » à travers ce fichier de script d'installation, sélectionnez ce fichier de script d'installation dans ce fichier et chargez-le. Il va installer cette extension dans Photoshop. Maintenant, je vais vous montrer la troisième méthode d'installation des extensions Photoshop manuellement. Parfois, si vos fichiers de script ou quoi que ce soit, ils gâchent ou vous devez installer des extensions Photoshop manuellement, alors vous devez le faire avec cette méthode. La plupart du temps, vous devez lire le manuel d'instructions de la société de plug-in s'ils ont quelque chose comme ça. Donc, vous pouvez voir ici pour Mac OS, ils ont dit que copier le dossier MarkLyps aux applications et à Photoshop CC 2015 plugins et générateur. Pour CC 2017, ils ont donné le même chemin ici, vous pouvez le voir avec. Un dossier que vous allez accéder à ce chemin. Il y a essentiellement deux chemins ici : un, celui-ci, et le second est celui-ci. Prise en charge des applications de bibliothèque, Adobe, CEP et Extensions. Parfois, si vous ne trouvez pas ce dossier CEP, vous devez le créer vous-même. Ce sont deux chemins pour Mac OS. La plupart des plugins, vous installez manuellement, soit vous devez copier ceci dans ce dossier, ceux-ci ou celui-ci. Ce sont les deux parties que vous devez garder à l'esprit. Je vais partager le lien vers ce guide d'installation afin que vous puissiez vous voir vous-même. Ensuite, pour Windows, vous avez également ces deux chemins. Vous pouvez voir ici, Windows 32, si vous avez 32 bits, et si vous avez Windows 64 bits, alors vous devez aller à ce chemin, Plug-ins et Generator. Ensuite, il y a un autre chemin qui est ce C, Program Files, X86, Common Files, Adobe, CEP et Extensions. Je vais partager ce document donc vous devez connaître ces deux chemins pour installer ces plug-ins et toutes les extensions que vous devez installer dans Photoshop. Si vous avez des questions ou si vous n'avez pas votre extension Photoshop installé, vous avez besoin de mon aide, vous pouvez me poser n'importe quelle question à tout moment. Si vous avez le système d'exploitation Mac, il y a deux autres conférences à venir où je vais vous montrer comment installer à l'aide de ZxPInstaller. Vous devez voir les conférences suivantes pour une autre méthode qui est fondamentalement ZxPInstaller. Il peut installer des fichiers ZXP même dans les dernières versions comme 2015 et 2017 qui ne prennent généralement pas en charge les fichiers ZxPInstaller. Il s'agit d'installer les extensions Photoshop. Passons à la leçon suivante. 9. Installation des extensions à l'aide de ZXP Installer Photoshop CC2017: Bonjour tout le monde. J'ai vu des étudiants qui ont du mal installer leurs extensions Photoshop CC 2015, qui sont essentiellement des extensions ZXP. J' ai donc pensé à faire une autre conférence pour les aider parce que je pense que d'autres étudiants pourraient avoir le même problème. Voici la solution. Numéro 1. Tout d'abord, vous devez télécharger ce ZXPInstaller pour Windows ou si vous êtes sur OS X télécharger cette version. Allez sur ce zxpinstaller.com et téléchargez ce programme d'installation. Le problème est essentiellement la version plus récente de Photoshop, qui est CC 2015, j'ai déjà décrit que cette version ne prend pas en charge l'extension ZXP. Si vous souhaitez installer des extensions ZXP dans Photoshop CC 2015, vous devez suivre ces trois étapes. Numéro 1, téléchargez ce ZXPInstaller depuis zxpinstaller.com, puis je vais vous montrer les extensions que vous allez installer avec l'aide de celui-ci. Téléchargez celui-ci, puis installez-le et vous aurez quelque chose comme ça, ZxPInstaller. Il va ouvrir cette fenêtre. Installez celui-ci et vous obtiendrez cette fenêtre et vous pouvez simplement faire glisser votre fichier ZXP ici et il sera installé. Vous pouvez cliquer ici pour sélectionner le fichier, ce soit sur le bureau ou où qu'il se trouve. Je vais aller dans mon dossier d'extensions et maintenant je vais faire glisser ce fichier Griddify beta 3 ZXP ici et il installe mon extension. Assurez-vous d'éteindre votre Photoshop avant de l'installer car cela peut rencontrer des problèmes. Arrêtez votre Photoshop avant d'installer une extension. En outre, cette extension qui est essentiellement guide rapide, vous pouvez voir ici. quickguide.zxp, je vais l'extraire. C' est un fichier zip, double-cliquez. Je vais aussi traîner celui-ci ici. Toutes vos extensions qui se terminent par ce fichier .zxp, vous devez les installer en utilisant ce Adobe ZXPInstaller. Il n'est pas fondamentalement de la société Adobe, il est fait avec l'aide de ces deux entreprises, Creative DO et GuideGuide. Ils ont créé ce petit outil pour installer l'installation de ZXP dans Photoshop dernière version, CC 2015. Pour installer toutes les extensions ZXP, vous pouvez utiliser ce petit outil et j'inclurai son lien dans un fichier PDF. Certains étudiants qui se plaignent également des liens de fichiers PDF. Fondamentalement, pourquoi je fournis des liens, parce que ces logiciels ou ces plug-ins, ils continuent à se mettre à jour eux-mêmes. Chaque fois que vous devez utiliser la version la plus mise à jour, vous devez aller à l'URL car ma version peut ne pas être mise à jour. Si je le télécharge dans Dropbox ou quelque chose comme ça, vous pourriez avoir des problèmes d'installation car il ne s'agit peut-être pas de la dernière version. Si vous voulez vraiment installer la dernière version comme ce ZxPInstaller, elle a été mise à jour. Laisse-moi te montrer le dernier que j'ai eu. Le dernier était quelque chose comme ça. Vous pouvez voir que l'icône était différente. Maintenant, ils l'ont mis à jour dans ce cinquième numéro, le dernier que j'ai téléchargé était en juillet. En outre, la taille est différente. C' est 45 298 Ko et ce 45 464 Ko. Ils ont vraiment mis à jour celui-là. Cela a du sens. Si je vous donne le lien afin que vous téléchargez la dernière version. Je n'ai pas à m'inquiéter que mes étudiants obtiennent les anciennes versions de n'importe quelle extension ou de n'importe quel outil. Tout est sur la façon d'utiliser ZXPInstaller pour installer les extensions Photoshop. Maintenant, je vais diriger le Photoshop. Assurez-vous que lorsque vous installez cette extension, votre Photoshop n'est pas en mode de fonctionnement, vous devez l'arrêter. Laisse-moi juste laisser un peu de temps pour charger. Tout d'abord, téléchargez cette extension, puis installez-la. Ce sont quelques étapes. Cliquez sur celui-ci et l'installateur continuera à installer ce petit outil. Une fois qu'il est installé, alors vous pouvez aller de l'avant et installer toutes ces trois très bonnes extensions Photoshop. Celui-ci est Font Awesome. Fondamentalement, Creative DO sont ceux qui ont créé ce ZxPInstaller. C' est un outil très utile. Téléchargez le ZXPInstaller et installez-le pour extension Photoshop impressionnante, Quickguide et Griddify. Je vais mettre à jour ou créer une nouvelle vidéo sur la façon d'utiliser Griddify dans ma section de conseils pro, qui est bientôt disponible. Alors restez à l'écoute. J' espère que vous avez apprécié cette conférence et vous pourrez installer les extensions Photoshop ZXP après avoir regardé cette vidéo. Merci et à la prochaine conférence. 10. Installation des extensions Photoshop sur MAC: Beaucoup de mes étudiants m'ont demandé comment installer l' extension dans Photoshop tout en utilisant Mac OS. Donc, cette vidéo est spécifiquement sur demande des étudiants. Je vais vous montrer le dossier, comment vous allez localiser ce dossier, où l'extension sera installée, si vous allez les installer manuellement. Il y a deux façons de les installer manuellement ou vous pouvez utiliser ce ZxPInstaller. Il s'agit d'un programme d'installation d'extension Adobe open source. Vous devez télécharger cette version d'OS X. Je l'ai déjà téléchargé, vous pouvez le voir ici. Allons installer ceci. En attendant, je vais vous montrer où va être le dossier de notre dossier d'installation d'extension Photoshop principal. Allons de l'avant à ce dossier. Maintenant, d'abord nous allons aller à notre ordinateur, puis notre disque principal, c'est mon lecteur. Allez sur ce lecteur principal, puis allez dans cette bibliothèque, puis cette Application Support, puis Adobe et le dossier est celui-ci, CEP, Si vous double-cliquez dessus, vous pouvez voir ici le dossier des extensions. Maintenant, chaque fois que vous essayez d'installer une extension manuellement, vous allez copier son contenu ici, dans ce dossier Extensions. Alors revenons en arrière et répétez une fois de plus, Bibliothèque, Support des applications, Adobe et CEP. Ensuite, nous avons ces extensions. C' est le chemin où toutes les extensions résident, même si vous les installez automatiquement, elles seront toujours là. Trouvons et téléchargeons l'extension Griddify pour Mac. Vous pouvez voir qu'ils ont montré que télécharger et installer ZXPInstaller. Nous allons télécharger ce Griddify. Téléchargeons cette extension Griddify, ici nous avons. Ensuite, nous allons exécuter notre application ZXPInstaller et nous allons faire glisser ce fichier ZXP dans ce fichier. Voyons voir, il va l'installer. En attendant, nous allons fermer l'application Photoshop. Sortons. Quittez Photoshop CC. Je vais entrer mon mot de passe. Maintenant, il m'a montré que votre extension a été installée avec succès. Je ne sais pas pourquoi beaucoup d'utilisateurs et mes étudiants ont du mal à installer cela. Maintenant, nous allons faire fonctionner notre Photoshop. Donc je vais le coller ici et nous allons lancer ce Photoshop CC. Si j'ouvre un nouveau fichier, voyons. Nous allons ouvrir un nouveau fichier, juste n'importe quel fichier en ce moment. moment, je suis hors de cette carte 3D parce que ce sont les fenêtres VMware. Donc, je vais vous montrer les extensions ici nous avons cliqué sur Griddify, et vous pouvez voir qu'il va charger ici. Maintenant, nous avons Griddify ici, essayons-le. Contrôle A, je vais tout sélectionner. Commande A, c'est intéressant. Commandement A, et nous allons diviser ceci en cinq divisions verticalement. Donc diviser, Nous avons notre Griddify fonctionne parfaitement. Donc, je ne sais pas pourquoi beaucoup d'étudiants ont des problèmes à l'installer. Laissez-moi vous montrer où il est en ce moment. Si vous ne parvenez pas à l'installer avec ZXPInstaller, vous pouvez accéder à ce fichier. Copiez ce dossier, Griddify, copiez-le, et nous allons le coller la méthode manuelle, qui est que nous allons aller à nouveau dans ce dossier, extensions et vous pouvez voir ici déjà nous avons Griddify parce qu'il parfaitement installé. Mais si vous n'êtes pas en mesure de l'installer et que vous êtes très frustré, il suffit de coller votre dossier Griddify ici et de redémarrer Photoshop et tout ira bien à nouveau. Voici comment nous installons des extensions sur Photoshop et c'est ainsi que nous localisons le dossier d'extension Photoshop sur un Mac OS. J' espère que vous avez aimé cet exercice parce que j' avais beaucoup d'utilisateurs Mac demandes qu'ils ne sont pas en mesure de trouver cet emplacement de réinitialisations Mac et le dossier d'extension Macs, alors restez à l'écoute et laissez-moi savoir si vous avez des problèmes. 11. Configuration et espace de travail pour la conception UI: Aujourd'hui, nous allons mettre en place des panneaux Photoshop. Nous avons seulement besoin des outils dont nous avons vraiment besoin lors de notre processus de conception de l'interface utilisateur. Nous avons seulement besoin de couches, couleurs et peu de plugins. Les choses supplémentaires que nous allons retirer de nos panneaux Photoshop et de l'interface Photoshop. Commençons. Nous allons ouvrir n'importe quel fichier. Dépassez cette zone, créez n'importe quel fichier. Maintenant, quand vous exécutez Photoshop pour la première fois, vous verrez quelque chose comme ça, qui est fondamentalement essentiel ici. Ainsi, vos panneaux, tous les paramètres du panneau sont enregistrés ici. ce moment, nous sommes dans l'essentiel. Si vous passez à la 3D, les outils seront déplacés vers la configuration 3D, puis les graphiques et le web, comme ça, et le mouvement, la peinture et la photographie, ainsi de suite et ainsi de suite. Maintenant, nous allons d'abord commencer avec ce graphique et web. Ce que nous allons faire, c'est que nous allons créer un nouvel espace de travail ici comme ça. Je vais le nommer nouvelle interface utilisateur. Aussi, nous allons utiliser ce raccourci clavier et tout le reste. Sauvegardez. Ce qu'on va faire, c'est qu'on a besoin de nos échantillons ici, donc on va déplacer ça au-dessus de ça en haut, comme ça. Donc des couches et des échantillons. Nous n'avons pas besoin de couleurs, donc nous allons la fermer, faire clic droit et fermer comme ça. Les échantillons et ici ce sont nos deux choses les plus importantes. Maintenant, dans ce domaine, nous avons besoin de panneaux ou de plugins chargés ici. Nous allons aller à la fenêtre et les extensions et nous allons charger notre extension GuideGuide. Je vais montrer tous ces plugins dans les prochaines leçons, alors ne vous inquiétez pas à ce sujet. Ensuite, nous allons utiliser ce guide rapide. Quel que soit le plug-in que vous allez utiliser, plupart du temps nous allons utiliser des guides plugins liés et ce plugin Font Awesome, c'est gratuit. Ce guide rapide est également gratuit. Ce guide est payé un. instant, nous aurons seulement besoin de Griddify, GuideGuide et Font Awesome. Cliquez sur ce « Griddify ». instant, nous avons besoin de tout ça. Ensuite, nous allons charger quelques autres choses comme des styles de caractères ou des personnages comme ça. Nous allons aussi le déplacer comme ça à l'intérieur de cette zone. Je vais le rattacher comme ça. Nous avons ce personnage ici alors nous avons aussi besoin de panneau Info ici. Nous allons également le déplacer en haut, panneau Info comme ça. Ensuite, nous avons également besoin de ces styles de paragraphe et de paragraphe si vous le souhaitez, alors nous allons déplacer ce paragraphe avec ceci. Peut-être le déplacer à l'intérieur de celui-ci. Les styles de paragraphe et de caractère sont deux onglets liés l'un à l'autre. Ensuite, nous avons aussi besoin peut-être panneau Propriétés, donc nous allons l'utiliser encore et encore, panneau Propriétés peut le déplacer au-dessus de ce plugins, peut-être déplacer ce plug-in en bas, donc les panneaux Propriétés et Info. Ensuite, nous pourrions utiliser ces styles pour les amener ici, comme ça avec des échantillons. Les styles sont essentiellement des styles de calque comme les ombres portées, leur couleur est, dégradés, etc Nous pouvons sauvegarder nos styles de boutons ici et nous allons les utiliser encore et encore aussi avec les couleurs. Je vais aussi utiliser ce Layer Comps ici. Je vais fermer les bibliothèques et je pense que ce sont la plupart des outils que nous allons utiliser, les paramètres de paragraphes, de paragraphes et de caractères. Y a-t-il autre chose que nous avons besoin ici ? Parfois, nous pourrions avoir besoin de ces actions, alors peut-être que nous pouvons les charger ici. Déplacez ces actions sous ce panneau d'informations comme ça. C' est ainsi que nous allons configurer notre interface Photoshop. ce moment, nous avons des nuances, styles puis des calques et une autre chose que nous allons ajouter ici est Chemins, alors cherchons des chemins. Comme ça et nous allons les combiner avec des couches. Presque nous sommes tous installés. Nous avons besoin de quelques choses comme des dirigeants ici. Vous pouvez voir par ici. Si vous allez voir, puis Rulers, Control R. Nous avons besoin de règles ici parce que nous allons glisser et déposer quelques directives comme ça. C' est juste d'ici et placez nos éléments ici. Vous pouvez voir ici en ce moment il est positionné à quelques pixels ici, vous pouvez voir quand je le déplace, il montre 33 pixels, 52, 67, quelque chose comme ça. Nous pourrions placer nos objets selon ces directives comme ça. Nous avons besoin de notre configuration Ruler. Nous devons également voir que cet outil Alignement est coché, Aligner aux guides, Calques, ne pas commenter les tranches et les grilles. Aussi, nous allons aller à ce Show et nous assurer que ces Guides, Guide Canvas, Guides intelligents et grille de pixels, tous ceux-ci sont vérifiés. C' est tout ce dont nous aurons besoin dans notre processus de conception de l'interface utilisateur. Peut-être que nous pourrions avoir besoin de quelques plug-ins supplémentaires que vous pourriez trouver dans les prochaines leçons. Vous pouvez aller de l'avant et les installer. C'est ça. Nous avons enregistré nos panneaux dans ce nouvel espace de travail de panneau d'interface utilisateur. Nous avons actuellement des nuances, des styles, des calques, des chemins, et quelques plug-ins, des propriétés et des styles de caractères, et quelques éléments de paragraphe chargés ici. Si vous voulez poser une question, posez-moi, si vous n'êtes pas en mesure de les déplacer ou quelque chose comme ça, peut-être devriez-vous le pratiquer. Vous pouvez voir ici comment il s'est détaché de son panneau. Tout cela concerne les panneaux, configuration des panneaux Photoshop. ce moment, nous en utilisons un et le second est fondamentalement minimisé. Si vous voulez l'étendre, vous pouvez l'étendre ici comme ça. J' aime que ça minimise parce que nous avons plus d'espace de travail ici. Si vous voulez l'étendre comme ça, vous pouvez l'étendre ici. Vous pouvez voir tous mes plugins et tout est chargé ici et vous pouvez aller de l'avant et accéder aux autres plugins ci-dessous comme ça. Mais je l'aime ici comme ça parce que je n'ai pas besoin d' accéder à plusieurs panneaux de cette zone en même temps. Il s'agit de panneaux, passons à la leçon suivante. 12. Qu'est-ce l'étalonnage des couleurs ?: Aujourd'hui, nous allons parler de l'étalonnage des couleurs. Ceci est, fondamentalement, pour calibrer votre écran ou les couleurs LCD ou LED aux couleurs standard. Lorsque vous achetez n'importe quel appareil, qu'il s'agisse d'une LED ou d'un moniteur, les couleurs ne sont pas standardisées. Ils peuvent montrer une teinte de couleur rouge ou verte ou bleue. En outre, ils pourraient ne pas montrer tous les Blancs et Noirs avec précision. Ensuite, il y a cet étalonnage de couleur. Il existe deux types d'étalonnage. On utilise du matériel, ce qui est comme ça. Ce sont quelques appareils pour calibrer vos couleurs. Celui-ci est ColorMunki Display et ColorMunki Smile. Ensuite, nous avons ceci, une autre société, qui est Spyder5Pro. Ce sont des dispositifs d'étalonnage de couleurs différents. Ce qu'ils font, c'est que vous les attachez à votre moniteur comme celui-ci et installez leur logiciel. Ils testent les couleurs, la luminosité, le contraste et le gamma de votre écran et l'ajustent en conséquence. Il s'agit essentiellement du matériel, du matériel et du logiciel. Maintenant, en venant à la solution facile, nous avons ce site Web qui s'appelle lagom.nl/lcd-test. Il montre beaucoup de variété de test d'étalonnage des couleurs. Quelle est l'étalonnage des couleurs, nous allons ajuster nos blancs, noirs et nos teintes de couleur en mode standardisé. Nous devons vérifier si nos blancs, nos gris, et nos noirs, et même nos autres couleurs s'affichent avec précision. Il y a beaucoup de tests différents, mais, normalement, ce que j'utilise c'est que j'utilise ce contraste. Vous pouvez voir ici il y a différentes bandes de couleurs, jusqu'à 32. Vous devriez être en mesure de les voir tous séparément. Chaque couleur doit être séparée de l'autre couleur. Ils ne devraient pas se mélanger ensemble. C' est un test. Vous pouvez les aligner au milieu de votre écran et les voir droit, ne pas regarder par le haut ou le bas parce que certains écrans n'ont pas un très bon angle de vision. Voici une description que vous pouvez rayonner le long si vous le souhaitez, alors nous avons cet étalonnage gamma. Je ne comprends pas grand-chose, mais ce que vous devez faire est que vous devez vous asseoir à quelques pas de votre écran et vous allez serrer vos yeux, et vous pouvez voir ici ces barres grises et noires à l'intérieur de toutes ces couleurs. Vous devez vérifier avec ces barres sont fondamentalement mélanger. Lorsque vous serrez vos yeux, ils se fondent à un moment donné, comme 1.8, 1.9, 2.0 ou 2.2, quelque chose comme ça. Établissement de normes est 2.2 et 1.8, entre tous ces, je suppose, est exact. Asseyez-vous, quelques pas, et pressez vos yeux et voyez où ces lignes vont se fondre. Un autre test que j'ai utilisé, celui-ci, des niveaux noirs. Vous devriez vérifier les niveaux noirs. Comment vous allez les vérifier, il y a différentes nuances de noir ici, 1, 2, 3, 4. Ceci est noir, donc il se fond avec l'arrière-plan. Il y a différents noir à gris. Ensuite, il y a ce blanc qui est la couleur la plus nette ici. Vous devriez être en mesure de les voir tous séparément. Si vous voyez toute la couleur noire ici, jusqu'à trois ou quatre, alors il y a un problème avec vos noirs. Vous devez aller vérifier les paramètres de votre contraste. Si vous voyez plus de boîtes noires ici, alors vous devriez vérifier votre niveau de luminosité et, peut-être, le contraste aussi. Ensuite, venez le test pour la saturation blanche. C' est différentes nuances de gris à blanc. Vous devriez pouvoir les voir tous. Si vous vous asseyez à quelques pas de votre écran, vous devriez pouvoir les voir tous. C' est un autre test. Ensuite, nous avons des bandes de gradient. Vous devriez être capable de voir ce blanc à noir, et vous pourriez voir quelques bandes entre les deux. Un très bon moniteur couleur ou très bon écran ne devrait pas montrer de bandes entre les deux comme ceci. Ce sont des lignes différentes entre les prochaines. C' est ce qu'on appelle des groupes. Ils devraient être lisses. Ils ne devraient pas montrer des groupes comme ça. Ils ont donné des exemples de mauvais écran et de bon écran. D' autres, je ne sais pas, et je n'utilise pas beaucoup. Celui-ci est important, angle de vision. L' écran que j'utilise en ce moment ne prend pas en charge de très bons angles de vue. Il s'agit d'une LED Samsung 23 pouces, donc il est comme 2-3 ans. Maintenant, ce que vous allez faire, c'est que vous allez voir cette image d'un peu haut et un peu plus bas. Ensuite, du côté gauche de votre écran et du côté droit, et vous voyez les couleurs vont changer beaucoup. Même avec ce violet, il peut sembler une teinte bleue ou rougeâtre quand vous le regardez sous un autre angle. En outre, celui-ci, cela montre un certain temps rosé et parfois rouge couleur. Ceci est très important parce que, si vous concevez quelque chose dans Photoshop ou tout autre logiciel, et si vous allez le regarder d' un autre côté ou si votre client regarde de gauche ou de droite, il peut ne pas voir les bonnes couleurs. Dans la leçon suivante, nous allons voir différents types d'écrans LED, qui sont bons pour les concepteurs. En outre, nous allons utiliser notre outil d'étalonnage de système pour Windows, ou même Mac, pour calibrer votre écran en utilisant uniquement vos yeux et ce logiciel, qui est intégré dans n'importe quel système d'exploitation. Donc juste un résumé de ce que nous avons couvert dans cette leçon, qu'il y a deux façons de normaliser vos couleurs avec votre moniteur. Vous pouvez voir l'image ici, avant et après. Ce que nous utilisons, c'est que nous utilisons nos yeux. Une méthode est notre outil d'étalonnage des yeux et des couleurs donné dans le système d'exploitation pour changer les couleurs. Ne normalisez les couleurs. La deuxième option est d'utiliser ces différents appareils, comme cette solution ColorMunki là, deux ou trois. Ils peuvent calibrer votre écran automatiquement. Je vais acheter ce ColorMunki Smile très bientôt. Il est presque 90$ d'Amazon, je suppose, 89$ ou 90$. Je n'ai jamais utilisé de tout ça avant. Voyons ce qu'ils vont faire. Maintenant, tout est au sujet de l'étalonnage des couleurs et de ce site web Lagom. Dans la leçon suivante, nous allons voir comment le système d'exploitation va vous aider. Les fonctionnalités intégrées au système d'exploitation vous aident à définir votre étalonnage des couleurs en mode standardisé. Passons à la leçon suivante. 13. Meilleurs moniteurs (LED) pour les concepteurs: Dans cette leçon, je vais parler de certains des écrans LED ou moniteurs dont vous avez vraiment besoin pour une conception d'interface utilisateur ou n'importe quel concepteur. Si nous achetons n'importe quelle LED, normalement c'est le panneau TN. Donc, il existe essentiellement trois types de panneaux. Lorsque vous achetez une LED ou un moniteur pour vous, vous devriez rechercher ces fonctionnalités. Il y a des panneaux TN qui étaient essentiellement une vieille technologie, trois ou quatre ans. Il représente un nématome tordu. Ils sont un peu bon marché. Ensuite, il y a des panneaux IPS, In-Plane commutation. Cette technologie montre et affiche de meilleures couleurs que les panneaux TN. Comme IPS et PLS, vous devriez opter pour ceux-ci. PLS est une technologie introduite par Samsung. Donc, la plupart du temps, lorsque vous affichez un écran Samsung comme celui-ci, il pourrait y avoir PLS écrit, c'est presque comme IPS. Donc, tout ce qui est IPS ou PLS, vous devriez l'acheter, plutôt que d'acheter des panneaux TN. Si vous commencez tout juste dans votre carrière, alors vous devriez rester avec les panneaux TN. Mais si vous voulez des couleurs très précises, alors vous devriez opter pour des écrans IPS ou PLS. Un facteur très important, qui est cet angle de vision. Assurez-vous donc toujours que l'écran que vous achetez a un angle de vision maximal comme 178 degrés. La plupart de ces écrans IPS et PLS, ils offrent une grande variété d'angle de vue. Donc, même si vous visualisez de gauche à droite, et en haut et en bas, les couleurs et tout devrait être le même. D' accord. Pour les gars qui utilisent des Mac, je suppose que les écrans Mac sont construits sur la technologie IPS, alors ne vous inquiétez pas à ce sujet. Mais j'ai vu même les utilisateurs de Mac qui utilisent LG ou Dell ou les écrans d'autres entreprises ou des moniteurs très larges. Il s'agit donc de moniteurs ou d'écrans IPS et PLS. Cela dit, passons à la leçon suivante. 14. Calification des couleurs basée sur le système d'exploitation: Dans cette leçon, je vais vous parler de la façon de calibrer votre écran à l'aide de Mac OS ou Windows, en utilisant vos propres outils d'étalonnage de système d'exploitation. Commencez par utiliser OS X ou Mac. Ce que je vais faire, c'est que je n'ai pas de Mac en ce moment, j'enregistre sur Windows. Comment vous allez calibrer votre affichage, vous allez utiliser les Préférences Système. Si vous allez dans Préférences Système, puis cliquez sur « Affichage », vous pouvez voir la couleur sur le côté droit, alors cliquez dessus et vous pouvez voir un bouton de calibrage là-bas. Lorsque vous parcourez ce processus d'étalonnage, vous pouvez voir différent à la fin de cet outil d'étalonnage lorsque vous avez calibré votre profil de couleur. Ensuite, à la fin, il vous montrera les anciens profils de couleur. Si vous voulez passer à n'importe quel ancien, vous pouvez passer à n'importe quel ancien, alors ne vous inquiétez pas à ce sujet. En outre, il existe un mode Expert. Si vous êtes un expert, vous pouvez vérifier cela et voir plus d'options dedans. Il s'agit de calibrer votre écran. Laissez-moi voir si je peux trouver une image sur Google. Mais je suppose que normalement c'est quelque chose comme ça. Si vous ne sélectionnez pas le mode Expert, vous pouvez voir ce point blanc cible. Normalement, j'ai choisi ce natif. C' est ainsi que vous calibrez dans OS X Yosemite ou tout autre système d'exploitation OS X. En utilisant Windows, ce que nous allons faire est que nous allons taper dans la recherche Windows ici, calibrer les couleurs et vous pourriez voir cela juste étalonner l'affichage des couleurs. Il s'agit d'un assistant et si vous cliquez sur Suivant, vous pouvez voir différentes options pour calibrer votre affichage. Si vous cliquez sur Suivant, vous pouvez voir ce Gamma trop bas, Gamma bon, Gamma trop haut. Ce que vous allez faire, c'est que vous allez ajuster votre Gamma pour ne pas voir de points entre les deux, comme ces points blancs ou noirs. Je vais cliquer sur « Suivant » et maintenant il est réglé presque exactement ce dont j'ai besoin, donc je vais passer à la fin. Ensuite, nous avons des réglages de luminosité et de couleur. Assurez-vous que vous devrez peut-être ajuster les couleurs, la luminosité et le contraste à partir de votre menu d'affichage. Si vous avez Samsung ou tout autre écran, vous pouvez avoir différents boutons et boutons sur votre écran. Vous devez les utiliser pour définir votre luminosité et votre contraste, car cela est essentiellement lié à votre écran et à votre matériel. Je vais juste sauter la prochaine. C' est ainsi que vous allez définir votre contraste que votre chemise doit être visible, ces rides doivent être visibles sur votre chemise et aussi ces deux fond noir et gris ici. Ensuite, l'autre chose est que vous allez enlever les entailles de votre couleur grisâtre. Si vous cliquez sur Suivant, vous pouvez voir des taches de rouge ou de vert, ou peut-être de bleu sur certains moniteurs, alors ce que vous allez faire est de déplacer votre curseur en arrière et de déplacer votre vert un peu en arrière. Laisse-moi voir si j'ai besoin d'enlever le bleu. Non, le bleu va bien. Vert et rouge, il n'y avait aucune trace de vert et de rouge dans mon écran, donc je vais cliquer sur suivant. Vous pouvez vérifier votre étalonnage précédent et votre nouvel étalonnage. C' est le précédent, c'est le courant. Je vais passer à la précédente. Si vous l'avez terminé, vous pouvez voir cet assistant de démarrage ClearType. Il va vous montrer différents textes et voir lequel est le mieux à vous. Celui-ci a l'air bien et celui-ci a l'air bien. Alors celui-là a l'air bien. Celle-ci a l'air mieux. Vous terminez cet assistant et votre étalonnage est défini. Maintenant, il y a une autre façon de contrôler ce gamma et d'autres couleurs, qui va à votre logiciel de carte graphique. J' ai des Intel. Si vous allez à l'affichage, cela peut ne pas être le même pour chaque carte graphique, mais vous pouvez accéder aux paramètres et au panneau. Vous pouvez voir ici la luminosité, le contraste et le gamma. Si j'essaie de modéliser avec ce gamma, vous pouvez voir les couleurs changent sur mon écran et vous pouvez également changer cette luminosité et ce contraste. Vous pouvez l'appliquer. En outre, ils sont différents exemples d'images qu'ils sont donnés ici. Si j'essaie de changer la luminosité comme ça, vous pouvez voir ici. ce moment, je vais l'annuler. Je ne veux pas modifier les paramètres de mon écran car il m' a fallu beaucoup de temps pour le rapprocher des couleurs précises. Parce que parfois mes enfants, ils appuient simplement sur n'importe quel bouton sur mon écran Samsung et toutes les couleurs sont partis. Fondamentalement, je vais l'annuler. Vous pouvez également modifier différents paramètres de contraste, de luminosité et de gamma ici. C' est une autre façon. Je vais l'annuler maintenant. Il s'agit de la façon dont vous calibrez votre écran à l'aide de votre système d'exploitation OS X ou Windows. Ce qu'ils vont vous montrer, ils vont vous montrer et marcher à travers un magicien et juste garder les couleurs qui ressemble le mieux à vos yeux. En fin de compte, si vous voulez tester les paramètres, vous pouvez toujours venir sur ce site Web et tester vos paramètres à nouveau. Vous pouvez voir ici maintenant je ne peux pas voir ce 254 presque. Si je vais un peu plus loin de mon écran, je pourrais voir celui-ci. Assurez-vous toujours que votre étalonnage des couleurs est effectué avec précision. Quelque chose à propos des écrans, je vais vous montrer dans la prochaine leçon quel écran vous avez besoin pour la conception graphique ou web design ou la conception de l'interface utilisateur. Allons passer à autre chose. 15. Comment fonctionne l'interface de Photoshop: Permettez-moi de vous présenter l'interface de Photoshop et comment cela fonctionne, comment les différentes options et outils sont accessibles dans Photoshop. Alors commençons. J' ai ouvert un exemple de fichier ici. J' ai un calque et un calque de texte et un calque de forme, donc d'abord, celui-ci sur le côté gauche, nous avons cette barre d'outils, donc nous avons différents outils comme l'outil Déplacer et beaucoup d'outils. Si vous sélectionnez un outil, vous pouvez voir les options en haut liées à cet outil, donc ceci est fondamentalement barre d'options, donc si nous cliquons sur l'un de ces, si nous passons à un autre outil, vous pouvez voir ces sont fondamentalement en train de changer. Ce sont d'autres options liées à cet outil. Si vous gardez votre souris ou survolez cet outil, vous pouvez voir le nom de cet outil, outil Recadrage. Aussi, vous pouvez l'étendre ici comme ça et le rediriger comme ça. C' est ton goût. Vous pouvez personnaliser cette barre d'outils à partir d'ici. Continuez à appuyer sur votre souris et vous pouvez l'éditer ici et vous pouvez le faire glisser comme ça. C' est ainsi que vous pouvez modifier toute votre barre d'outils. C' est votre barre d'outils actuelle, c'est essentiellement une barre d'outils supplémentaire, si vous voulez supprimer quelque chose, vous pouvez supprimer ici. Vous pouvez également enregistrer et charger des préréglages de différentes barres d'outils. Donc, pour plus d'options, vous pouvez voir ici il y a des navigations détaillées ici, menus. Vous pouvez voir qu'ils sont liés à l'image, manipulation d'image puis couche, Outils de type liés aux sélections, il existe différents filtres. Ensuite, nous avons la 3D, nous ne allons pas l'utiliser, mais c' est juste pour l'information. Ensuite, nous avons vue et configuration différente comme nos grilles, guides, règles. Ils sont tous dans ce panneau de vue puis nous avons des fenêtres ou des panneaux, des extensions, tout dans cette fenêtre ici. Alors assurez-vous de les voir juste une fois. N' essayez pas de vous souvenir d'eux, vous savez que ces choses sont ici comme ces extensions espace de travail ici. C' est notre navigation détaillée. Ceci est notre barre d'options pour ces outils, donc nous sélectionnons n'importe quel outil et les options viennent ici. Ensuite, pour plus d'options, vous devez parfois aller à cette barre d'outils ici. C' est essentiellement le panneau, donc la barre du panneau. Si je sélectionne l'un de ces éléments, laissez-moi dessiner une forme dès maintenant pour vous montrer comment cela fonctionne. Donc, si je fais glisser une forme ici, vous pouvez voir que ce panneau de propriétés de forme dynamique a été ouvert. Il a beaucoup d'options liées à cela. Il y a des options ici en haut, mais il y a des options ici aussi. Vous pouvez également voir la largeur, la hauteur, coordonnées x et y et l'emplacement de cet objet selon ce document. Quoi qu'il en soit, il y a peu d'outils. Vous remplissez des panneaux pop auxquels vous pouvez accéder ici liés à n'importe quel objet ou graphique que vous concevez ici. Si j'essaie de sélectionner celui-ci, vous pouvez voir ici, j'ai sélectionné un calque de texte et je peux aller dans cette barre de panneau et je peux sélectionner Caractère, Paragraphe et quelques autres choses ici. Si vous ne voyez pas cela chargé ici, vous devez le charger à partir d'ici, Fenêtre, et vous pouvez le charger à partir d'ici comme Layer, Layer Comps. Paragraphe, Styles de paragraphe. C' est ainsi que vous chargez ces panneaux, mais ils seront activés une fois que vous aurez ce type de calque ou d'objet sélectionné. Fondamentalement, nous les appelons des couches ici, donc c'est la couche un, la couche deux, la couche trois. Donc peu d'options, vous pouvez les récupérer à partir d'ici puis la troisième façon est que vous pouvez cliquer avec le bouton droit sur de ces couches et vous pouvez accéder à plus d'options et plus d'opérations que vous pouvez faire sur ces couches. C' est ainsi que vous accédez aux différentes zones de Photoshop. Il y a une nouvelle fonctionnalité qui vient d'être ajoutée, à savoir la barre d'outils de recherche. Vous pouvez voir ici, si je vais à Recherche et essayer de rechercher quelque chose comme recadrer, vous pouvez voir qu'il me montre outil Recadrer et d'autres choses liées à recadrer comme Trim, Révéler tout. Si je sélectionne ceci, il va sélectionner mon outil Recadrage. C' est très pratique, j'ai défini la touche de raccourci pour cela, Commande F ou Contrôle F. Par défaut, cette touche de raccourci n'est pas là, donc si vous voulez l'essayer, vous devez affecter le raccourci clavier d'ici et tout est sur cette interface Photoshop et son fonctionnement, où vous allez accéder à différentes options, outils et choses et plus d'options liées à n'importe quel calque ou texte que vous dessinez ou concevez. Passons donc à la leçon suivante. 16. Photohsop Nouveau document: Dans cette leçon, je vais parler de la nouvelle configuration de document de Photoshop et de la façon dont nous allons utiliser différents paramètres prédéfinis pour les applications mobiles et la conception Web. Alors commençons. Allez dans « Fichier et nouveau », et vous verrez cette fenêtre Nouveau document et vous pouvez voir, cela a beaucoup changé dans cette dernière version de Photoshop CC 2017. Vous pouvez voir les détails de n'importe quel préréglage se trouve sur le côté droit et les préréglages que vous allez sélectionner ici. Donc, si je sélectionne celui-ci, vous pouvez voir qu'il fait 1440 pixels de large et 880 est sa hauteur. Vous pouvez changer les pouces ou tout. Mais pour la conception web et la conception d'applications mobiles, nous allons utiliser des pixels. Maintenant, vous pouvez voir qu'il y a une résolution. Pour la résolution numérique pour les applications mobiles et la conception Web, nous allons principalement opter pour 72 pixels par pouce. Le mode couleur sera RVB, fond blanc huit bits et dans les options avancées, vous pouvez voir ici, profil de couleur, définissez-le sur Ne pas gérer la couleur et les pixels carrés. Ce seront vos paramètres de document pour presque tous les documents. Maintenant, si vous voyez en haut, vous pouvez voir qu'il y a différentes nouvelles options de document comme enregistré, qui va me montrer certains de mes préréglages enregistrés que j'ai enregistrés. Ensuite, il va passer à cette photographie. Si vous êtes photographe, vous pouvez les utiliser. Ceux-ci sont tous en pouces et 300 PPI, qui est pour l'impression et la photographie. Ensuite, il y a aussi de l'empreinte. Encore une fois, vous pouvez voir ces autres paramètres. Si vous cliquez dessus, il sera en millimètres. Ce sont des documents imprimés, l'art et de l'illustration, ainsi que du web et du mobile. Si vous le souhaitez, vous pouvez voir ici, vous pouvez accéder à plus de paramètres prédéfinis en cliquant sur ce signe plus ici. Vous pouvez voir ici, iPhone 6 Plus, iPad Pro, Microsoft Surface Pro 3, iPhone 5. Il y a beaucoup de modèles différents. Vous pouvez voir qu'il y a une nouvelle fonctionnalité en bas. Vous pouvez voir ce sont des modèles gratuits d'Adobe Stock. Si vous voulez cliquer dessus, vous pouvez voir qu'il vous montrera une partie de la taille, 32 Mo et il va le télécharger à partir d'Adobe Stock. Assurez-vous que vous êtes connecté à Internet et que vous êtes inscrit sur ce compte de votre Photoshop. C' est ainsi que vous utilisez différents modèles. Ils sont pour le cinéma et la vidéo. La plupart du temps pour le web, je n'utilise pas ces tailles de modèles ou support web, web minimum, web large. Normalement, ce que j'utilise c'est que j'utilise celui-ci, que j'ai sauvé ici, qui est un bootstrap de 1280 pixels de large. Maintenant, comment vous pouvez enregistrer un préréglage ? Vous pouvez nommer n'importe quel préréglage ici comme Enregistrer nouveau. Assurez-vous de changer la hauteur comme je vais changer la largeur pour 1200 et la hauteur pour peut-être 2000 pixels. L' orientation sera comme ça. Je ne veux pas de portrait. Il sera toujours en orientation portrait si vous voulez sélectionner des tableaux d'art, c'est une nouvelle fonctionnalité dans les dernières versions de Photoshop. Vous pouvez le vérifier ici. D' autres options que vous devez montrer la même chose, que j'utilise ici, vous devez les utiliser. Vous pouvez sélectionner cette option ici et enregistrer le préréglage. Une fois qu' il est sauvegardé, il va demander le nom. Je vais le nommer 1200 pixels de large. Sauvegardons ce préréglage et vous pouvez voir ici qu'il a enregistré ce préréglage. Ce sont mes modèles téléchargés. Ce sont mes préréglages enregistrés. Donc, si j'essaie de le créer, vous pouvez voir qu'il va me donner un nouveau document avec une option de tableau d'art que vous pouvez voir ici. Maintenant, que sont les tableaux d'art ? Nous allons en apprendre davantage à leur sujet dans la prochaine leçon. Passons à la leçon suivante. 17. Quelles sont les planches d'art ?: Maintenant, dans cette leçon, nous allons parler des plans de travail Photoshop. Alors commençons. Nous allons ouvrir un nouveau fichier et nous assurer que dans ces options, vous devez vérifier ce plan de travail si vous le souhaitez. Sans plans de travail, vous pouvez aller sans eux. Alors vérifiez le plan de travail et je vais créer tout de suite. Vous pouvez donc voir que c'est en fait 1 200 pixels de large et 2 000 pixels de hauteur, et c'est essentiellement mon plan de travail 1. Je vais le renommer en double-cliquant sur ce panneau de calque. Vous pouvez voir que je vais le renommer en WebDesign. C' est WebDesign. Ensuite, nous pouvons ajouter un autre plan de travail. Vous pouvez voir ici il y a un outil de plan de travail, si vous cliquez ici, et vous pouvez voir que nous avons l'outil de plan de travail V, et vous pouvez voir qu'il y a différentes options ici, comme vous pouvez changer le plan de travail sélectionné en n'importe quelle taille de plan de travail que vous aimez. Donc, si je veux passer à six, vous pouvez voir qu'il peut aller à six ou il peut revenir à 1 200 pixels de large. Vous pouvez également créer un nouveau plan de travail. En cliquant ici, pour que je puisse créer un nouveau plan de travail, et je peux sélectionner n'importe lequel de cela, et juste le faire glisser ici. Cliquez ici une fois, et vous pouvez voir qu'il a créé un nouveau plan de travail, qui est modèle iPhone 5. Donc, il est fondamentalement iPhone 5 dimensions. Maintenant, si vous souhaitez créer plus de plans de travail, vous pouvez en créer d'autres. Il est très utile, comme vous êtes en train de concevoir un site Web ou peut-être une application mobile, et il a 10 écrans ou 12 écrans. Vous pouvez ajouter plus d'écrans en cliquant ici, comme ça, et vous pouvez avoir plusieurs écrans et afficher tout sur un Canvas. C' est ainsi que vous utilisez les plans de travail. Maintenant, il y a peu d'autres options. Vous pouvez voir ici, vous pouvez les aligner. Vous pouvez sélectionner différents plans de travail et les aligner si vous le souhaitez. Peut-être, vous pouvez aligner leurs bords supérieurs, si vous les avez déplacés par erreur. Pour les déplacer, vous devez aller dans cet outil de déplacement, et vous devez désactiver cette sélection automatique si vous l'avez sélectionné, et vous pouvez déplacer n'importe quel plan de travail que vous avez sélectionné, comme j'ai sélectionné celui-ci. Je peux me déplacer comme ça, et si je veux le déplacer en bas, je peux le rapprocher, comme ça. C' est ainsi que vous vous déplacez autour de vos plans de travail. Ensuite, vous pouvez également les supprimer. Vous pouvez cliquer avec le bouton droit et supprimer le plan de travail. Vous pouvez les dupliquer ici, si vous avez créé un thème et que vous devez dupliquer l'ensemble du plan de travail avec tous les calques. Donc, chaque plan de travail que vous pouvez voir ici, il est fondamentalement un groupe et il peut avoir beaucoup de calques, calques de texte, tout votre design assis dessus. C' est ainsi que vous utilisez différents plans de travail et c'est ainsi que vous les supprimez. J' ai appuyé sur la touche Supprimer de mon clavier pour supprimer tout plan de travail que j'ai sélectionné. N' importe quel plan de travail, vous pouvez le sélectionner ici. Assurez-vous que l'outil Plan de travail est sélectionné et mis en surbrillance. Vous pouvez donc voir qu'il y a peu d'autres options comme Auto-Nest Layers, Auto-Size Canvas. Il y avait peu de problèmes dans les versions précédentes où taille de Canvas et la taille de votre plan de travail ne correspondaient pas. Alors ils ont créé ça. Maintenant, si vous voulez faire pivoter votre écran mobile comme si vous avez besoin du mode paysage, vous pouvez sélectionner n'importe quel plan de travail comme iPhone, le dernier que j'ai sélectionné et vous pouvez le faire tourner comme ça. C' est ainsi que vous faites pivoter la vue de votre mobile. Donc c'est du portrait, c'est de la vue du paysage. Maintenant, laissez-moi vous montrer la magie de ces plans de travail. Si j'ai, par exemple, un bouton ici, comme ça, c'est un tout intégré et je veux le copier à l'autre, donc je vais juste Alt et faire glisser ici. Vous pouvez voir dans le côté droit, il est copié dans un autre plan de travail. C' est la même chose que je peux faire ici. Donc, ce calque ou ce bouton a été copié sur tous ces autres plans de travail. la même manière, vous pouvez copier des groupes ou faire glisser votre dessin ici ou ici. Maintenant, vous pouvez voir si vous avez une ancienne version de votre taille Canvas, alors vous pouvez voir si vous allez à cette taille Canvas, il va vous montrer que Canvas de toute la zone que vous couvrez, qui est fondamentalement 3,408 pixels. Donc, si j'essaie de faire une sélection ici comme ça, je pense que ça va être 3176. Donc, il va être approximativement égal à la taille de l'ensemble de la toile. Maintenant, le calcul de Canvas est différent. Donc, si vous calculez tout sur Canvas, alors vous ne devriez pas utiliser les sorties, et si vous voulez supprimer, vous pouvez simplement supprimer le plan de travail ici. Donc, je vais supprimer le plan de travail seulement, et vous repartirez avec le contenu ici. C' est ainsi que, si vous voulez utiliser le seul Canvas, vous pouvez aller quelque chose comme ça. Je vais supprimer tous les plans de travail et vous pouvez voir que nous avons notre Canvas de retour. Donc c'est notre toile principale. Donc, si j'essaie de le redimensionner maintenant, je peux le redimensionner. C' est donc l'un des problèmes, l' une des craintes de mes élèves, alors je vais éclaircir ça. Si vous ne voulez pas utiliser de plans de travail, lorsque vous essayez de créer un nouveau fichier, ne les sélectionnez pas, ne cochez pas cette case. Alors vous allez mettre en place cet ancien document, c' est-à-dire que ça me manque vraiment et j'adore ça. Il s'agit donc de plans de travail et de la façon dont vous allez utiliser plusieurs plans de travail pour créer vos applications mobiles ou votre conception Web, ou différentes vues, ou différentes versions de votre conception. Passons à la leçon suivante. 18. Comment fonctionne les calques dans Photoshop: Dans cette leçon, je vais parler des calques et essentiellement du concept de calques et un peu de ce panneau de calques. Laissez-moi d'abord dessiner quelques couches. Je vais prendre cet outil de forme, et je vais dessiner une éclipse ici. Q 1, 2, 3 et 4. Maintenant, j'ai quatre éclipses. Laissez-moi changer leurs couleurs afin que vous puissiez comprendre lequel change ou modifie leurs couleurs. Maintenant, j'ai quatre éclipses. Maintenant, comme vous pouvez le voir que dans le panneau des calques, le noir est au plus bas. Dans cette représentation, il est également en bas. Ils sont essentiellement dans un ordre de pile. En bas, puis ce gris en haut, puis bleu, et celui-ci orange est en haut. Fondamentalement, nous utilisons cet ordre de pile pour créer différents objets et différents éléments graphiques et différents designs. Parfois, nous fusionnons ou fusionnons ces deux couches, haut sur les couches inférieures. Parfois nous les soustrayons, parfois nous les ajoutons. Laissez-moi venir à ce panneau de calques. Ce sont différentes options de mélange. C'est normal. Si je passe à celui-ci obscurci, vous pouvez voir qu'il se fond essentiellement avec le calque en dessous. La couche en dessous est essentiellement bleue. Nous avons différentes options ici comme multiplier. Il se multiplie avec les couches ci-dessous, la gravure de couleur et toutes ces différentes options. Fondamentalement, il est d'ajouter ou de soustraire des couleurs ou de les multiplier, ou de coller des couleurs, et ce sont des multiplications différentes ou vous pouvez dire des options de mélange. Maintenant, ce sont essentiellement des options de mélange. Nous utilisons normalement multiplier, brûler la couleur, peut-être écran, ou superposer la plupart du temps. On n'utilise pas les autres. Peut-être de la couleur un jour. Mais je les utiliserai intensivement dans mon prochain cours. Pour ce cours, seule l'introduction que c'est des options de mélange suffit. Maintenant à cette opacité, l' opacité est fondamentalement la transparence de n'importe quel calque donc si je le fais, le premier transparent, vous pouvez voir qu'il est semi-transparent maintenant. C' est essentiellement de la transparence. Maintenant à ce remplissage, le remplissage est fondamentalement la couleur remplie dans cette éclipse ou calque. Pour mieux le comprendre, je vais lui appliquer un effet de course, de sorte que vous pouvez voir ce qui se passe. Maintenant, vous pouvez voir que cette option de remplissage n'est appliquée qu'à la couleur ou au remplissage à l'intérieur de cette éclipse. Il n'obtient pas ou ne fait aucun effet sur la bordure ou l'effet de course autour d'elle. Si je change l'opacité, cela réduira tout, y compris les styles de calque ou les styles appliqués à ce calque particulier. Vous pouvez voir la différence entre l'opacité, il rend tout l'objet transparent y compris tous les styles. Mais le remplissage rend seulement le contenu intérieur pour être transparent. C' est la différence entre remplissage et opacité. Maintenant à venir à cette option de verrouillage. C' est essentiellement pour verrouiller le mouvement, donc maintenant nous ne pouvons pas changer la position de cette couche. Il restera statique ici. Maintenant, l'avantage de verrouiller cette position est que nous pouvons appliquer différents styles de calque ou différentes options et différents autres éléments à cette éclipse, mais nous ne pouvons pas la déplacer. Maintenant, si nous passons à cet outil de verrouillage, si nous verrouillons ça, alors vous ne pouvez rien faire avec. Vous ne pouvez même pas appliquer de styles de calque. Vous pouvez voir que tous les styles de calque ont été désactivés. Il s'agit de la différence entre cette icône de verrouillage et cette icône de position de verrouillage. Maintenant, il y a peu d'autres options ici. Vous pouvez voir si j'essaie d'allumer ça. C' est fondamentalement le filtrage de ces calques, donc peut-être si nous avons comme 100 calques et que nous avons juste besoin de trouver le, laissez-moi créer un calque de texte, je suis du texte ici, et puis je vais créer un objet intelligent. Rappelez-vous que cet objet intelligent était de couleur orange comme ça. Je vais créer un petit objet. Je l'ai vu, où est-ce qu'il est allé. L' objet intelligent est là, celui-ci. Maintenant, j'ai un calque de texte, quelques calques d'éclipse ou de forme, puis j'ai un calque intelligent ou un objet intelligent. Maintenant, si je veux rechercher rapidement les objets intelligents, je vais cliquer sur celui-ci et vous pouvez voir qu'il me montre l'objet intelligent. Ou si votre document comporte cinq ou six objets intelligents, ils seront répertoriés ici. Fondamentalement, c'est un filtre rapide pour localiser vos couches. Si je clique sur cet outil de forme, il me montrera les calques de forme. Si je clique sur les deux, il me montrera les calques de forme ainsi que les objets intelligents. C' est essentiellement pour filtrer vos couches. C' est un texte et je peux voir tous mes calques de texte, puis j'ai ces autres options. Nous utilisons normalement ces trois. Tout cela concerne le panneau des calques et la façon dont tous ces calques fonctionnent les uns avec les autres, comment leur ordre de pile a lieu et comment nous les utilisons pour afficher ou créer des objets et des effets différents. Si je supprime une partie de celui-ci, je vais nous laisser essayer d'abord. Maintenant vous pouvez voir, je peux voir à travers les autres couches de celui-ci parce qu'il a un trou à l'intérieur. Voici comment fonctionne cette couche. J' espère que vous avez appris quelques étapes de base de la façon dont ces panneaux de couche et de couche fonctionnent essentiellement et j'espère vous voir dans ma prochaine conférence. 19. Panneau de texte dans Photsohop: Dans cette leçon, je vais montrer comment nous allons utiliser notre outil de texte pour concevoir notre conception de l'interface utilisateur, et comment nous allons utiliser différentes options de jeux de paragraphes et de caractères. Commençons et accédez à ce symbole T-icon dans ce panneau d'outils ou vous pouvez appuyer sur T pour la touche de raccourci. Je vais cliquer et faire glisser ici pour dessiner un paragraphe lié et je vais coller du texte Loren Ipsum ici. Maintenant, je vais augmenter sa taille de police pour que vous puissiez la voir un peu mieux. Maintenant, certaines des options de ce panneau de texte sont ici. Nous avons sélectionné cette face de police qui était Open Sans. Je peux passer à n'importe quelle autre police si je veux, comme celle-ci. Ensuite, c'est essentiellement ses paramètres. Par exemple, le poids de la police, nous avons en italique gras et gras en ce moment. Ensuite, c'est la taille de la police. Nous allons l'utiliser en pixels. C' est essentiellement l'option de rendu de la police. Nous utiliserons normalement tranchant, croustillant et lisse. Ou peut-être l'écran LCD Windows. Si vous êtes sur l'écran LED, vous pouvez voir ceci. Même sur un Mac, vous pouvez voir les LED Mac ici ou quelque chose comme ça. Maintenant, ce sont essentiellement des options d'alignement : alignement central, alignement à droite ou alignement à gauche. Ce sont des paramètres de paragraphe. C' est essentiellement la couleur du texte. Si je veux le changer pour quelque chose comme ça, je peux le changer d'ici. Il s'agit essentiellement d'envelopper du texte, mais il se peut que nous ne l'utilisions pas dans notre processus de conception de l'interface utilisateur. Maintenant, cliquez sur ce bouton pour ouvrir plus d'options dans ce panneau de correcteur. C' est pourquoi dans notre conférence précédente, j'ai inclus ce caractère et les paramètres de paragraphe ici. Maintenant, en venant à ce panneau de caractères, c'est essentiellement la taille de la police, et c'est essentiellement la hauteur de la ligne entre ces deux lignes. Si j'essaie de l'augmenter, vous pouvez voir les lignes de texte verticalement, elles se développent. Alors c'est essentiellement l'espace entre deux lettres. Vous pouvez voir que les lettres ont plus d'espace ici et ont plus d'espace dedans, comme ça. Normalement, on utilise la plupart du temps quelque chose, peut-être 25. Maintenant, nous avons ces différentes options ici pour la police et la typographie comme gras, italique, puis toutes les majuscules, et indice, exposant ; ce sont des options différentes. On ne les utilise peut-être pas la plupart du temps ici, mais peut-être qu'ils peuvent être utiles un jour. Maintenant, je vais expliquer quelque chose sur les paramètres de ce paragraphe. Maintenant, dans les paramètres de paragraphe, nous avons ces options plus d'alignement du texte. Ceci est justifié pour les paramètres justifiés et il s'agit de trois paramètres normaux : ligne gauche, ligne médiane et alignement droit. Maintenant, ces trois sont des options d'indentation. Si nous voulons retirer notre paragraphe de gauche, comme 50 pixels, nous pourrions l'utiliser. Vous pouvez voir que ce paragraphe déplace 50 pixels de la gauche. Si je veux juste l'indention de première ligne, alors je peux utiliser celui-ci. Maintenant, vous pouvez voir que la première ligne commence à partir de 100 pixels à partir de la gauche. Maintenant, ce sont essentiellement des rembourrages en haut et en bas de notre paragraphe. Si j'entre 500 ici, vous pouvez voir mon paragraphe déplacé vers le bas. Ils sont tous pour les paramètres de paragraphe, mais la plupart du temps, nous n'utilisons peut-être pas ces options d'indentation ou ces options d'espacement car nous allons déplacer différents paragraphes avec notre clavier, comme shift et à l'aide de nos touches de raccourci. Tout cela concerne les paramètres de paragraphe et de paragraphe. Passez à la prochaine conférence. 20. Outil de forme dans Photohsop: Dans cette leçon, nous allons utiliser notre outil de forme pour créer de nouvelles formes, combiner différentes formes et soustraire quelques formes. Je me concentrerai uniquement sur les choses que nous ferons principalement dans la conception de l'interface utilisateur. Commençons. Cliquez sur cette icône de forme, icône d'outil ou vous pouvez appuyer sur U depuis votre clavier. Cliquez et faites glisser pour créer. Vous pouvez voir cette largeur et cette hauteur arrive, largeur ce 537 et quelque chose comme ça, j'utilise celui-ci. Dès que je dessine celui-ci, vous pouvez voir les propriétés de forme en direct apparaître. Voici notre largeur et celle-ci est la hauteur. Si je veux définir la hauteur en 330 pixels, vous pouvez verrouiller la hauteur si vous voulez presser cette boîte en proportion comme ceci. Ensuite, nous avons sa position de l'axe des x, quelle distance il est du côté gauche et à quelle distance il est du haut, qui est l'axe des y. C' est sa couleur d'arrière-plan et c'est sa couleur de contour ou de contour. Vous pouvez voir ici, si j'augmente cela, vous pouvez voir comment il est décrit. Non, nous ne l'utiliserons pas donc je ne vais pas discuter de ces quelques paramètres du contour, nous l'utiliserons avec nos moins de temps. Une autre chose, ce qui est très important est ce rayon de frontière. Vous pouvez cliquer ou faire glisser ici si vous voulez le définir sur un rayon de la bordure, ou vous pouvez taper votre propre valeur ici. En outre, si vous cliquez sur cette icône de verrouillage, vous pouvez définir des valeurs personnalisées pour chaque coin. Si je le fais glisser ici comme ça, cela va créer ce genre de forme, et ce genre de formes sont possibles dans la conception CSS et les nouvelles spécifications CSS3. Une chose est ceci, nous allons utiliser la plupart du temps ces formes rectangulaires pour nos boutons et beaucoup d'autres choses. Maintenant, créons une nouvelle forme en combinant deux formes. Parfois, vous avez vu ce type de boîte de dialogue d'informations ou pop-up. Je vais utiliser une autre forme personnalisée de notre barre d'outils Formes. Ici, je vais charger toutes les formes ici, les remplacer, et supprimer un autre paramètre, une grande miniature. Je vais le mettre sur une grande vignette. Maintenant, voyons où est ce rectangle. On peut utiliser celui-ci ou peut-être celui-ci, ou celui-ci. Je vais dessiner un rectangle ici. Ce n'est pas fondamentalement un rectangle. Maintenant, vous pouvez voir que j'ai fait un ballon pop-up ou une pointe d'outil style boîte. Maintenant, si vous vous concentrez sur votre panneau de calque, cette forme est distincte de celle-ci. Si je veux changer ses couleurs, l'autre restera tel qu'il est. Maintenant, comment je peux combiner ces deux-là, c'est très simple. Vous pouvez sélectionner les deux en appuyant sur Ctrl et cliquez, puis vous pouvez appuyer sur Contrôle et E. C'est un raccourci pour combiner deux formes, elles sont maintenant fusionnées. Vous pouvez voir qu'ils sont fondamentalement fusionnés maintenant. Si je veux changer sa couleur, je peux la changer et contrôler T Si je veux la mettre à l'échelle, ils vont se mettre à l'échelle proportionnellement. C' est ainsi que vous créez des formes dans votre conception d'interface utilisateur. Parfois, nous devions créer des formes comme celle-ci. Maintenant, si vous voulez en soustraire une forme, la plupart du temps nous n'avons pas besoin de l'utiliser la plupart du temps, mais c'est tout de même quelque chose que vous pouvez apprendre. Vous pouvez voir maintenant, comme j'ai sélectionné cette soustraction de la forme avant, mon curseur est remplacé par ce signe négatif ou moins. Maintenant, si je dessine un cercle ici, j'appuie sur Maj avec, vous pouvez le voir simplement soustraire cette forme. Encore une chose, si j'ai besoin de le déplacer, je ne peux pas le déplacer avec cet outil de déplacement. Vous pouvez voir que je peux déplacer la forme, mais si je veux déplacer ce cercle circulaire à l'intérieur de ma forme, que je viens de soustraire, j'ai besoin d'appuyer sur cet outil de sélection de trajectoire ou de sélection directe. Si je clique dessus, vous pouvez maintenant voir cette forme ovale à l'intérieur de cette autre forme est mise en évidence. Si je veux sélectionner tous ses côtés ou toute la forme, je vais cliquer sur ce curseur noir ici « Outil de sélection de chemin ». Maintenant, je peux le déplacer, maintenant c'est au milieu. Si je veux changer sa taille ou sa forme, je peux la réduire ou la mettre à l'échelle. Ensuite, je vais à nouveau sélectionner l'outil de déplacement, et c'est tout. Nous avons créé une forme en combinant deux formes, puis nous avons soustrait cette zone sur cette forme combinée. C' est ça, et je pense que c'est tout pour notre outil de forme. J' espère que vous avez appris quelque chose et apprécié. Passons à la prochaine conférence. 21. Les bases de l'outil du stylo: Dans cette leçon, je vais vous montrer rapidement comment nous allons utiliser notre outil de stylet dans notre conception d'interface utilisateur. Nous ne créerons pas d'icônes ici. Rendons-le rapide et facile. Vous avez peut-être vu quelque chose comme ça. Laisse-moi juste créer pour l'expliquer. C' est ma zone de héros de mon site web. Comme ça. Je vais changer sa couleur, la couleur fond, de sorte que vous pouvez le voir correctement. Aussi, je vais augmenter sa taille un peu plus. Vous avez peut-être vu une variation de cette forme. La plupart du temps quelques designers, ils n'utilisent pas cette forme totalement carrée. Nous allons ajouter de la variété ici, sélectionner votre outil de stylo et cliquer sur cette ligne de cet outil rectangulaire ici comme ça. Cliquez ici et cliquez ici. Fondamentalement ce que nous faisons, nous ajoutons quelques points d'ancrage supplémentaires pour modifier notre forme. Passez maintenant à cet outil de sélection directe. Sélectionnez-le, puis sélectionnez le milieu et déplacez-le à l'aide de la flèche et de la touche Maj, Maj, flèche, Maj, flèche, Maj, flèche. J' appuie sur Maj et clique sur la flèche. Cette forme a été créée. Si vous voulez que les flèches soient un peu incurvées et un peu pointues, vous pouvez aller à cet outil de conversion et cliquer une fois par ici. Vous pouvez voir que nous avons la forme de base d'une zone d'en-tête de héros de tête de flèche. Vous avez peut-être vu afficher une flèche ou un contenu à côté ici, flèches pointant vers le bas ici. C' est une utilisation. J'ai modifié cette forme à l'aide de mon outil de stylo et l'ai modifiée pour créer une valeur plus esthétique. Il y a aussi d'autres choses que nous pouvons utiliser ici. Vous pouvez voir que c'était notre forme de base. Si vous sélectionnez cet outil de sélection directe, vous pouvez sélectionner ici et déplacer votre forme comme ça. Vous pouvez voir que nous avons créé différentes formes ici. Pour commencer avec notre en-tête comme zone d'en-tête ou zone de héros. Ce sont différentes utilisations de l'outil stylo et nous les utilisons en combinaison avec notre outil de forme. Gardez cela à l'esprit et espérons que vous avez apprécié cette conférence. Passons à la leçon suivante. 22. Plus sur l'utilisation de l'outil du stylo: Aujourd'hui, un de mes élèves m'a demandé de créer une conférence plus détaillée sur les outils de stylo. Aujourd'hui, nous allons explorer plus sur l'outil Pen et à la fin, nous allons créer quelque chose comme cette forme d'oeil. Vous pouvez voir sur l'écran. Je pense que je vais vous montrer quelques-unes des techniques comment créer courbes et comment créer différentes formes à l'aide de votre outil Plume. Commençons. abord, nous allons sélectionner notre outil Stylet appuyez sur « P » sur le clavier, sorte que votre outil Stylet est sélectionné. Vous pouvez voir en haut que vous avez deux options : Forme et Chemin. Si vous sélectionnez la forme, chaque fois que vous essayez de créer un tracé en mode forme, vous pouvez voir qu'il s'agit d'une forme complète comme celle-ci et fermée. Ce que je fais, c'est que je clique juste, puis je clique en arrière au premier point où j'ai commencé et il va être en forme fermée. Il s'agit d'une forme fermée. Si vous voulez quelque chose comme ça, forme fermée, vous allez sélectionner cette première option Forme. Si vous voulez juste un tracé, vous ne devez pas sélectionner cette forme. Si vous voulez juste des lignes ou des flèches, nous n'en avons pas besoin. Je vais appuyer sur l'outil Plume et le chemin et je vais dessiner un chemin ici comme ça. Cliquez et faites glisser la souris dans la direction dans laquelle vous souhaitez que le tracé soit suivi. Dans cette direction, cela signifie que je vais aller dans cette direction. Vous pouvez voir comment il calcule ma courbe en fonction de ma direction. De ce côté-ci, je ne lui ai pas donné de direction, donc ce sera très pointu. Il n'est pas arrondi. Si vous voulez qu'il soit arrondi, vous allez dans cet outil de conversion des points, cliquez ici et faites glisser vers l'extérieur. Vous verrez deux poignées sur les deux côtés et vous pouvez les faire glisser comme ça. Si vous voulez qu'il soit aligné, vous devez appuyer sur la touche Maj, comme ça. J' ai créé ce chemin incurvé. Je ne vois aucun chemin une fois que je clique ailleurs. Ce que je vais faire, c'est que je vais activer mes chemins ici comme ça et vous pouvez voir, est-ce à l'intérieur de cette couche ? Oui. C'est à l'intérieur de cette couche. Supprimons celui-ci. J' ai ce chemin. Créons un nouveau parce qu'il a fusionné avec mon dernier chemin. Je vais en créer un nouveau ici. Juste un chemin rapide comme celui-ci. Juste une vague. Si je veux un tracé comme celui-ci, je vais d' abord créer un nouveau calque, puis appuyez sur A, cliquez avec le bouton droit de la souris et vous pouvez voir que vous avez le chemin de remplissage et le chemin de contour. Cliquez sur le « Stroke Path » et si vous voulez simuler la pression, je dirai plus tard ce que cela signifie. En fait, il simule le fonctionnement de la pression de la brosse. Si nous cliquons dessus, vous pouvez voir ici. C' est un coup de pinceau avec moins de pression au départ et à la fin. Ça te montre vraiment comme un pinceau. Si vous ne voulez pas de tracé de pinceau, vous pouvez cliquer ici, abord sélectionner ce calque et vous pouvez cliquer avec le bouton droit de la souris et le tracé, et vous pouvez désactiver cette option. Vous pouvez voir que j'ai une ligne cohérente ou vous pouvez dire chemin. Il ne me montre aucun angle ou vous pouvez dire que je n'ai pas de pression appliquée, donc c'est juste une ligne cohérente. C' est ainsi que vous créez une vague. Le point principal ici est que lorsque vous utilisez l'outil Plume, c'est le premier clic. Lorsque vous allez faire le deuxième clic, vous devez dire à Photoshop où vous voulez aller. Vous voulez aller dans cette direction ou dans cette direction. Si je clique ici, vous pouvez voir comment il calcule que je vais aller dans cette direction. Si je lui dis que je vais aller dans cette direction, alors il va calculer comme ça. Vous pouvez voir que c'est un peu vers le haut et c'est un peu plus incliné. À ce stade, si je ne lui dis pas que nous allons aller de cette façon ou de cette façon, ce sera très raide. Si vous voulez une courbe très raide comme celle-ci, juste un angle, angle de 90 degrés ou 80 degrés, vous ne devriez pas dire à Photoshop que vous allez aller dans cette direction. Ne donnez pas d'itinéraire et il sera raide. C' est ainsi que nous construisons des formes. L' une est incurvée, l'autre n'est pas courbée. C' est ainsi que nous créons des formes et des chemins. Créons cette iPath. Je pense que c'est plus que suffisant. Laisse-moi t'en expliquer un de plus. Encore un exemple. Je vais créer un exemple de plus ici, comme ça ici, comme ça ici, et comme ça. Vous voyez que je n'ai pas de courbes ici. Si je veux les courbes, je devrais aller à cet outil de conversion de point et cliquer ici et faire glisser. Il aura des poignées ici et il peut créer des courbes. Maintenant, ce que je vais faire, c'est si vous pouvez cliquer sur « A » et vous pouvez cliquer sur cet outil de sélection directe. Vous pouvez sélectionner l'un de ces points d'ancrage et il a deux poignées. Si vous essayez de faire glisser une poignée comme celle-ci, vous pouvez le faire indépendamment. Nous avons choisi celui-ci et nous pouvons avoir ce que nous voulons. Vous pouvez aussi ajuster cet angle ici, comme ça. En outre, vous pouvez déplacer cela vers le haut ou vers le bas. Vous pouvez voir ce point d'ancrage. J' utilise les touches Maj et fléchées pour le déplacer de haut en bas. Vous pouvez également le faire glisser vers le haut et vers le bas où vous le souhaitez. C' est ainsi que vous contrôlez ces points d'ancrage et ce sont leurs poignées. Si vous voulez la poignée, vous pouvez les contrôler comme ça, peut être comme ça. C' est ainsi que vous contrôlez ces formes et tracés d'outils de plume. Il s'agit de l'outil de sélection de chemin. Si vous sélectionnez cela, il sélectionnera tous les points d'ancrage sur ce chemin. Vous pouvez le déplacer peut-être comme ça, ou par ici ou par ici. En outre, vous sélectionnez celui-ci et cliquez avec le bouton droit de la souris et vous verrez ces faire la sélection. Si vous sélectionnez cela, il sélectionnera la forme entière plutôt que la ligne. Assurez-vous que lorsque vous sélectionnez, essayez d'avoir un coup de pinceau sur ce calque, vous devez avoir un calque dans ce tableau d'art. Créez d'abord un nouveau calque, puis cliquez dessus avec le bouton droit de la souris, et vous verrez un sous-chemin de tracé ou quelque soit ce qu'il est. Il va le caresser. Maintenant, si on veut créer quelque chose comme ça, on a juste besoin de la forme des yeux ici comme ça. Je vais créer un nouveau document ici, et créons cette forme d'œil. C' est un exercice très facile. Je vais cliquer ici. Ensuite, je vais cliquer ici, faites glisser. Nous allons dans cette direction. Appuyez sur Maj si vous voulez l'aligner comme ça, alors je vais cliquer ici, puis ici, comme ça, puis ici. Vous pouvez voir ce haut et le bas ne sont pas alignés. Ce que je vais faire, c'est que je vais sélectionner cet outil de sélection, et je vais sélectionner celui-ci et le déplacer comme ça avec mes touches fléchées, et peut-être que j'ai besoin d'un peu plus petit oeil, il est très ouvert ou peut-être grand oeil. J' ai besoin de quelque chose comme ça. Peut-être que j'ai besoin de le convertir aux formes. Je vais appuyer sur Shape. Je ne sais pas ce qui s'est passé. Peut-être devrions-nous aller de l'avant et essayer à nouveau parce que nous avions sélectionné. Il y a une autre façon si vous voulez remplir ce calque, vous pouvez sélectionner A et appuyer sur OK et faire une sélection comme ça, et vous pouvez appuyer sur G, Maj G pour la couleur de fond. Je peux choisir cette couleur, peut-être celle-là. C' est ce qui se passe ici, j'ai inversé la sélection. Ce que je vais faire, c'est que je vais l'inverser. Il suffit de sélectionner cet œil, c'est bon. J' ai appuyé sur Control Shift I pour inverser la sélection et je clique ici. Ma section des yeux est complète. Je vais lui donner un style de calque. Pas l'ombre portée, je vais lui donner une ombre intérieure. Cinquante pour cent multiplient la distance que vous voulez, puis quelque chose comme ça. Ensuite, nous allons créer des éclipses au milieu comme ça. Changez la couleur à ce que vous voulez, peut-être celle-ci, puis vous pouvez contrôler G et dupliquer ce calque. Nous allons le dupliquer comme ça. Faisons juste en créer deux autres comme ça. Je pense que c'est plus que suffisant. Si vous voulez plus de calques, vous pouvez les créer autant que vous le souhaitez, comme ceci. Peut-être que tu peux avoir une autre couleur à l'intérieur de l'œil. C' est ainsi que vous créez des formes, comment vous dites à Photoshop que dans quelle direction vous allez. Vous pouvez sélectionner des poignées personnalisées et des zones personnalisées même si vous souhaitez commencer par une forme. Si vous dessinez une éclipse ici, vous pouvez voir que j'ai dessiné une éclipse. Si vous appuyez sur A, vous pouvez voir tous les points d'ancrage. Si vous voulez supprimer quelqu'un, si vous voulez changer quelqu'un, comme je veux le faire glisser ici comme ça. Je vais cliquer sur « Oui », et si vous le déplacez comme ça, appuyez sur Maj A pour passer à l'outil suivant, je vais aimer ça. Vous pouvez voir que c'est le début de l'icône. Ou vous pouvez voir, l'icône que nous créons d'un profil utilisateur, c'est la tête du profil utilisateur. Si vous voulez plus comme ça, vous pouvez aller de l'avant et appuyer sur A et nous pouvons faire un peu plus comme ça, plutôt que juste un en-tête de forme ovale [inaudible] 100 en haut. Ensuite, nous pouvons dessiner une autre forme à partir d'ici. On a besoin d'une forme, donc je vais cliquer ici comme ça. Je n'utilise aucune grille, c'est pourquoi cela se produit. Je n'ai aucun calcul de la façon dont ça va se passer. Normalement, lorsque vous concevez des icônes, vous activez votre grille comme ça. C' est le contrôle et le signe de citation sur votre tableau. devis simple et le devis double sont juste la clé suivante de votre point-virgule. Vous allumez votre grille, et quand vous dessinez, vous dessinez en fonction de votre grille. Je vais supprimer toute cette forme, et nous allons dessiner selon cette grille. Commençons à partir d'ici. Je vais aller à ce point comme ça, et je vais y aller. Alors ça va être 1, 2, 3, 4, 5, 6, 7, je suppose. 1 ,2, 3, 4, 5, 6, 7. Je pense qu'on doit peut-être aller ici comme ça, et au même endroit ici, comme ça, et revenir ici. Maintenant, vous pouvez voir qu'il est la même forme, mais il a plus de précision. Je dois fermer cette forme comme ça. Vous pouvez voir, je peux aller de l'avant et changer la couleur de la tête comme ça, et la faire au-dessus de cette forme. Vous pouvez voir comment j'ai créé ces deux icônes. Si vous voulez le déplacer au-dessus d'un peu plus comme ça ou comme ça. Tout est sur la façon d'utiliser votre outil de stylet pour créer des icônes. J' ai créé deux icônes. L' un est cet œil, et l'autre est ce profil, ou je l'appelle l'extraterrestre. Je ne sais pas ce que c'est. Allons à la leçon suivante. 23. Alignement dans Photoshop: Dans cette leçon, je vais parler des alignements et de la façon dont nous allons les utiliser dans notre processus de conception de l'interface utilisateur. Commençons. J' ai déjà rempli ma toile de trois formes. Permettez-moi de vous montrer comment nous allons les aligner et comment utiliser l'outil d'alignement. Maintenant, tout d'abord, parfois nous devons les aligner horizontalement et parfois verticalement, ou parfois nous utilisons des groupes pour aligner tous ces objets. Pour que l'outil d'alignement fonctionne, nous avons besoin d'au moins deux objets ou deux couches. Parfois, nous n'avons qu'un seul calque, alors laissez-moi vous montrer comment l'aligner. Si je veux l'aligner au milieu de notre canevas, je vais sélectionner ce calque ici, le panneau de calque, puis je vais appuyer sur Ctrl+A. Vous pouvez voir tout mon canevas est sélectionné. Maintenant, j'ai deux objets. L' un est ma toile et l'autre est cette couche. Maintenant, je vais les aligner en utilisant ma touche de raccourci, que j'ai utilisée dans notre dernière conférence, qui était des raccourcis personnalisés. Nous allons l'aligner horizontalement d'abord, Contrôle, Alt, et H. Maintenant, vous pouvez voir qu'il est positionné horizontalement dans la sélection, cette sélection de canevas. Maintenant, je vais l'aligner verticalement, donc je vais appuyer sur Alt, Control, et V. Maintenant, vous pouvez voir qu'il a aligné verticalement à l'intérieur de cette toile et horizontalement aussi, donc il est au milieu parfait. Maintenant, si j'ai deux objets comme ça. Maintenant, si je veux les aligner tous les deux, je vais les sélectionner les deux et ensuite je vais appuyer sur, donc je dois être sur l'outil de déplacement. Appuyez sur V ou déplacez l'outil à partir d'ici. Maintenant, vous pouvez voir ces options d'alignement en haut, elles sont activées. Vous pouvez les aligner horizontalement comme ceci et verticalement comme ceci. Ils sont positionnés les uns par rapport aux autres. Je vous ai déjà dit qu'il nous fallait deux objets pour les aligner. Ils se positionnent les uns par rapport aux autres. Si je veux les aligner par rapport à la toile, je dois aussi sélectionner la toile. ce moment, je suis juste en train d'expliquer comment fonctionne cet outil. Laisse-moi te montrer. Maintenant, je vais les sélectionner tous les deux et si j'appuie sur cette ligne, ils vont s'aligner à la position supérieure. Aligner le fond fera de même. Maintenant, encore une chose. C' est aligner à gauche et aligner à droite. Aligner à droite. Maintenant, en venant à ces autres options d'alignement qui sont cachées en ce moment, ils ont besoin essentiellement de trois objets. Si je clique sur tous comme ça, j'ai d' abord besoin de les aligner comme ça. Ils devraient être dans une ligne. Par exemple, ils sont comme ça. Maintenant, si je veux que tous ces objets ou calques aient le même espace entre eux, je vais appuyer sur cette distribution centres horizontaux et vous pouvez voir maintenant qu'ils sont parfaitement alignés et qu'ils ont les mêmes espaces entre eux. Que faire si je veux les aligner au milieu, de la même manière par rapport à la toile ? Je vais d'abord créer un groupe de ces trois couches. Laissez-moi le nommer groupe de couches. Je vais sélectionner ce calque d'arrière-plan. Je peux appuyer sur Alt, Control, et H puis V. Maintenant, vous pouvez voir, tous ils sont alignés par rapport à la toile dans le centre parfait. Voici quelques-unes des techniques que nous utilisons normalement dans notre conception d'interface utilisateur, comme la sélection du canevas ou la sélection de ce calque d'arrière-plan pour aligner toutes ces techniques. Parfois, nous avons des lignes directrices ici, par exemple, comme celle-ci et je veux aligner cela au milieu de ces guides. Ce que je vais faire, c'est que je vais sélectionner ce calque, puis je vais appuyer sur M ou Rectangular Marquee Tool et je vais faire glisser ici, puis je vais l'aligner horizontalement. Maintenant, vous pouvez le voir, et c'est la plupart du temps que nous les utilisons dans nos grilles lorsque nous avons différentes grilles d'alignement. Assurez-vous de connaître toutes ces astuces pour aligner avec cette sélection, pour aligner en fonction de ce canevas. Deux méthodes alignent ensuite tous ces trois objets l'un par rapport à l'autre. Ce sont trois alignements que nous faisons normalement. Gardez à l'esprit ces trois alignements et nous les utiliserons de temps en temps dans les prochaines classes et peut-être dans mon prochain cours. Je pense qu'il s'agit d'aligner les couches et de les distribuer. J' espère que vous avez appris quelque chose de nouveau. Passons à la prochaine conférence. 24. Sélection dans Photohsop: Dans cette leçon, nous allons voir comment les sélections participent à notre processus de conception de l'interface utilisateur. Laissez commencer. La première chose que vous pourriez vouloir faire ici est, parfois, nous devons sélectionner l'ensemble de notre canevas ou sélectionner la sélection autour de toute la zone de dessin. Pour cela, je vais appuyer sur Contrôle A. Dès que j'appuie sur Contrôle A, la sélection autour de tout cela notre zone de toile. C' est le premier scénario. Parfois, nous devons faire une sélection autour d'un calque ou autour d'une forme. Pour cela, laissez-moi simplement le désélectionner, appuyez sur M, et cliquez une fois sur la toile, et votre sélection disparaîtra. Maintenant, pour sélectionner cette forme, sélectionnez-la d'abord dans ce panneau de calque, puis Contrôle, puis cliquez sur cette vignette de calque. Dès que vous cliquez sur cette vignette de calque, vous pouvez voir une sélection autour de ce calque. C' est une autre façon où nous avons besoin d'une sélection autour d'un calque ou d'une forme. Maintenant, si je veux ajouter une autre sélection ou ajouter à cette sélection quelques idées, je peux aller ici dans la zone supérieure où je dois sélectionner cette option Ajouter à la sélection. Ensuite, je peux faire glisser ici et sélectionner n'importe quoi dans la section. Vous pouvez voir maintenant que la sélection a augmenté. Si je veux déplacer la sélection, je peux d'abord passer à cette première option et ensuite je peux la déplacer. Maintenant, vous pouvez voir que j'ai déplacé cette sélection. Dans un autre calque, j'ai créé un nouveau calque, et je peux le remplir avec une autre couleur comme celle-ci. Je vais sélectionner une autre couleur. Maintenant, vous pouvez voir que j'ai utilisé cette sélection et créé un nouveau calque, et l'ai rempli avec une autre couleur. C' est ainsi que nous ajoutons aux sélections ou créons des sélections complexes comme ça. Maintenant, si je veux soustraire une sélection ou une zone d'une sélection, laissez-moi vous montrer comment le faire. abord, vous devez faire une sélection comme celle-ci. Maintenant, je veux seulement la zone supérieure 70 pour cent de cette forme. Je vais appuyer sur Soustraire de la forme ici, sélectionner celle-ci, et vous pouvez faire glisser la zone où vous ne voulez pas qu'elle soit sélectionnée, et relâcher. Vous pouvez voir que c'est la façon dont nous faisons ou soustrayons de la sélection. C'est une autre façon. Laissez-moi vous montrer cette dernière option, qui est l'intersection. Laissez-moi vous montrer ce qu'il fera. Il croisera essentiellement les deux sélections et quittera la zone qui était commune entre elles. C' est ainsi que fonctionne cette intersection. La plupart du temps, nous n'avons pas besoin de cette interaction. Interaction, nous utilisons uniquement cette sélection d'ajout ou de soustraction. Il y a aussi quelques touches de raccourci que vous pouvez utiliser pour ajouter ou soustraire une sélection de celui-ci. J' ai cette sélection. Si je veux ajouter, je peux appuyer et maintenir la touche Maj enfoncée sur le clavier, et continuer à ajouter sur cette sélection comme ça. Maintenant, si je veux soustraire, je peux appuyer sur la touche Alt ou Option votre clavier et vous pouvez supprimer des zones de votre sélection. Maj pour ajouter une sélection et touche Alt ou Option pour supprimer une sélection ou supprimer des parties de votre sélection. Parfois, nous avons aussi besoin de certaines des sélections irrégulières, donc nous utilisons cet outil Lasso. Si vous sélectionnez ce polygone ou l'outil Lasso, vous pouvez voir comment cela fonctionne fondamentalement. C' est comme ça. Il vous suffit de cliquer et de combiner les points de départ et de fin, et il fait une sélection. Si je veux supprimer, par exemple, le coin inférieur droit de cette forme, je vais d' abord cliquer avec le bouton droit de la souris et rastériser ce calque. Comme il s'agit d'un calque de forme, il ne peut pas être soustrait comme celui-ci avec la sélection. Ensuite, je vais sélectionner mon outil Lasso polygone. Je vais supprimer cette zone et appuyer sur « Supprimer ». Assurez-vous que vous avez sélectionné le calque approprié, sinon cela ne fonctionnera pas. J' ai supprimé cette partie de ce calque ou cette forme. Vous pouvez voir à quoi il ressemble maintenant. Ce sont différentes façons d'utiliser des sélections et de les utiliser pour soustraire, ajouter ou faire des sélections différentes comme ça. Parfois, nous avons besoin d'une sélection pour dessiner des lignes directrices. Si je fais une sélection comme ceci et que je peux faire glisser une ligne directrice à partir d'ici, elle s'accrochera automatiquement à sa bordure. Je vais le laisser comme ça, comme ça et comme ça. C' est une autre façon dont nos sélections sont très pratiques dans la conception de l'interface utilisateur. Je suppose que c'est tout au sujet des sélections et de son utilisation dans la conception de l'interface utilisateur. Je pense que j'ai presque discuté de tous les scénarios dans lesquels nous avons besoin de ces sélections. Passons à la prochaine conférence. 25. Raccourcis communs dans Photoshop: Dans cette leçon, je vais partager avec vous quelques raccourcis Photoshop que nous allons utiliser beaucoup de temps. J' ai déjà rempli mon canevas essentiellement, car il s'agit d'un calque de texte et ce sont des outils de forme. Un raccourci commun est cet outil V, qui est l'outil de déplacement. Vous pouvez voir par ici. Chaque fois que je veux déplacer une partie du calque, je vais appuyer sur ce V. Le calque qui va se déplacer sera celui que j'ai sélectionné dans ce panneau de calques. Assurez-vous d'avoir sélectionné le calque approprié ici. Pour sélectionner la couche, vous pouvez Contrôle Cliquer dessus, ou vous pouvez configurer cette sélection automatique. Si vous avez cette configuration de sélection automatique, vous pouvez simplement cliquer sur la couche et il sera sélectionné comme ceci. Vous pouvez voir dans le panneau Calques dès que je sélectionne un autre calque, il se déplace simplement vers celui-ci. Vous pouvez utiliser les deux options. Vous pouvez utiliser la sélection automatique ou vous pouvez la désélectionner et utiliser la sélection Control Plus, ce qui est plus précis à mon avis. Maintenant, l'un est que nous voulons les déplacer. Deuxièmement, si je veux dupliquer ou répliquer l'un des calques, donc je vais répliquer ce calque et je vais appuyer sur Contrôle J sur mon clavier. Vous pouvez voir qu'il est converti et répliqué dans un autre calque rectangulaire de la même taille. Deuxièmement, si je veux regrouper tous ces éléments, nous utiliserons beaucoup de temps pour regrouper les éléments. Prenez le contrôle et cliquez sur tous ces éléments, sorte qu'ils seront sélectionnés. Appuyez sur Ctrl G pour les regrouper. Maintenant, ils font partie d'un groupe et si j'essaie de les déplacer, ils se déplaceront ensemble. deuxième problème est que, si vous avez la sélection automatique, sélectionnez-le ici et réinitialisez à la couche. Ensuite, si votre groupe est sélectionné et que vous cliquez ici pour le déplacer, vous pouvez voir quel est le problème. Vous sélectionnez automatiquement cette couche à l'intérieur de ce groupe. C' est un autre problème. Si quelque chose se produit comme ça, vous devez vous assurer que vous avez sélectionné le groupe à partir d'ici. Alors tu peux te déplacer comme ça. Parfois, il est préférable de désactiver cette sélection automatique. De la même manière que nous le dupliquons ou répliquons nos couches, nous pouvons également répliquer un groupe. Vous pouvez voir maintenant le groupe est mis en surbrillance. Je peux appuyer sur Contrôle G, qui est la même commande que la réplication d'une couche. J' ai reproduit le groupe. Il y a deux groupes. C' est l'un des raccourcis très courants que nous allons utiliser beaucoup de temps. Maintenant, si je veux faire une sélection autour de l'un des éléments ou d'un calque. Pour que cela se produise, nous allons appuyer sur Contrôle sur mon clavier et si je passe ma souris sur un des calques, il se tourne vers ce curseur de fourmis en marche. Si je clique dessus, vous pouvez voir que cet outil Eclipse a été sélectionné, cette forme a été sélectionnée. Maintenant, si je veux déplacer la sélection, je dois appuyer sur la touche M du clavier ou c'est essentiellement le raccourci pour l'outil de sélection rectangulaire. Si vous avez sélectionné l'outil de sélection, assurez-vous d'avoir cette première option, les deuxième et troisième options combinent et soustraient la sélection. Première option sélectionnée et vous pouvez le déplacer comme ça. Parfois, nous pourrions avoir besoin de tracer des lignes directrices autour de ça comme ça. J' ai besoin de cette sélection pour dessiner quelques lignes directrices. Ensuite, je vais le désélectionner en cliquant une fois comme ça. Ce sont quelques raccourcis, puis certains des raccourcis qui sont liés à l'alignement de quelques couches, qui sont très nécessaires. Nous devons les utiliser beaucoup. Permettez-moi de déplacer quelques calques et de changer la forme. Maintenant, vous pouvez voir que je l'ai réduit. Ce que j'ai réellement appuyé, c'est j'ai appuyé sur Control T pour le mettre à l'échelle, qui est une touche de raccourci pour mettre à l'échelle ou faire tourner des objets. J' ai appuyé sur Control T et j'ai attrapé une des poignées et je l'ai pressé comme ça. Si vous voulez les mettre à l'échelle en proportion, vous pouvez sélectionner Maj sur votre clavier. Si je sélectionne l'une de ces poignées, vous pouvez voir que j'appuie sur Maj pour qu'il se déplace en proportion. Il s'agit d'une mise à l'échelle proportionnelle. Si vous sélectionnez Alt et Maj, puis que vous le mettez à l'échelle ou le mettez à l'échelle vers le haut ou vers le bas, vous pouvez voir l'effet. Il a changé la mise à l'échelle d'un côté à un emplacement central. En ce moment, il est mis à l'échelle de tout autour de la forme, de tous les côtés également. Appuyez sur Alt et Maj sur le clavier, puis faites-le glisser comme ça. Ce sont les raccourcis pour la mise à l'échelle. Si vous voulez activer plus de raccourcis ou si vous avez besoin de faire quelque chose de plus, vous pouvez cliquer dessus avec le bouton droit de la souris pendant que ces poignées sont actives. Vous pouvez utiliser ces flip horizontal, flip vertical, rotation 180, ou incliner, déformer, et quelque chose comme ces options plus. Mais la plupart du temps, nous ne les utiliserons peut-être pas. Maintenant, j'ai deux calques comme ça et je veux les aligner du haut, je vais les sélectionner les deux. Ce calque, et ce calque, vous pouvez les sélectionner à partir d'ici en appuyant sur la touche Ctrl. Je vais utiliser ce haut pour les aligner. Fondamentalement, nous n'utilisons pas cette ligne supérieure la plupart du temps, mais nous utilisons les touches de raccourci si vous vous souvenez, j'ai mis en place dans mon tutoriel de raccourcis personnalisés, qui est un peu plus tôt dans cette série de leçons. Maintenant tous les deux non sélectionnés, je vais sélectionner l'un d'eux et je vais le déplacer. Maintenant, si je les sélectionne tous les deux et que je veux qu'ils soient au centre ou alignés horizontalement, je vais appuyer sur « Control », « Alt » et « H ». Maintenant, vous pouvez voir qu'ils sont tous les deux alignés au centre de cette toile ou tableau d'art. Maintenant, si je veux déplacer l'un d'eux, je vais sélectionner le calque d'ici, et je peux le déplacer. Si vous voulez qu'ils se déplacent sur une ligne, vous pouvez appuyer sur « Maj » et vous pouvez voir maintenant qu'il garde sa place. Il ne se déplace pas dans une position aléatoire. Appuyez sur « Maj » tout en faisant glisser vers le haut ou vers le bas, afin qu'il conserve son emplacement actuel ou, s' il est au milieu, il restera au milieu de votre toile. C' est une option. Maintenant, vous pouvez voir si je veux qu'ils soient dans les centres verticaux, je vais les regrouper. Maintenant, vous pouvez voir que je n'ai pas de calque d'arrière-plan ici. Tous ces alignements fonctionnent avec deux objets. Je dois avoir un autre objet. Ce que je vais faire, c'est que je vais appuyer sur « Contrôle A » pour sélectionner toute la toile, et maintenant je vais aligner ce groupe. Vous pouvez voir dès que j'ai sélectionné cette option, les options d'alignement supérieur sont activées. Je vais appuyer sur « Contrôle », « Alt » et « V ». Maintenant, vous pouvez voir qu'ils sont alignés verticalement. Je vais les cacher, que vous puissiez les voir clairement. Les deux sont alignés verticalement au milieu de ce tableau d'art. Maintenant, je vais le désélectionner en appuyant sur M et en cliquant une fois ici. Ce sont les raccourcis courants que nous allons utiliser la plupart du temps. Maintenant, certains des raccourcis que vous pouvez les apprendre à partir d'ici, vous pouvez simplement cliquer dessus ici et vous pouvez voir Lasso Tool. Ceci est également utilisé pour la sélection. Vous pouvez voir que nous allons utiliser certains d'entre eux comme cet outil Plume, outil Texte, puis cet outil de sélection de chemin, qui est une touche de raccourci, ces outils de forme que nous allons utiliser beaucoup, outil Rectangulaire pour vous. Ce sont tous les raccourcis. V pour cet outil de déplacement, revenant à ce curseur. Ce sont les raccourcis que nous allons utiliser beaucoup de temps. Maintenant, un raccourci de plus. Nous l'avons configuré dans notre leçon de raccourci Photoshop personnalisée. Maintenant, on va l'utiliser. Par exemple, si je veux convertir ces deux couches en un objet intelligent. Je discuterai de l'objet intelligent plus tard, alors ne soyez pas confus ou inquiets à ce sujet. Ils sont fondamentalement des couleurs un peu opposées et ils vibrent. Maintenant, ils sont bons à y aller. Maintenant ce sont les deux couches que je vais faire un objet intelligent avec les deux d'entre eux. Je vais les sélectionner tous les deux. Je vais appuyer sur « Alt F5" pour l'objet intelligent. C' était notre raccourci. Maintenant, vous pouvez voir son icône a été changé ici, cette icône miniature. Vous pouvez augmenter la taille de la vignette à partir d'ici en accédant à Options du panneau et vous pouvez augmenter la taille comme ceci. Maintenant, vous pouvez voir que j'ai augmenté la taille, mais lorsque nous concevons des conceptions d'interface utilisateur, nous avons beaucoup de couches, peut-être plus de 100 couches. Nous n'utilisons pas trop de taille de vignettes plus grande. On pourrait utiliser celui-là ou peut-être celui-là. Maintenant, certaines des options supplémentaires que vous pouvez obtenir à partir d'ici, cliquez avec le bouton droit sur l'un des calques comme ceux-ci ; Exportation rapide en PNG, Exporter sous, Convertir en objet intelligent. Mais je préfère utiliser certains des raccourcis clavier qui sont très pratiques et nous les utilisons beaucoup. Encore un autre que nous avons mis en place dans nos raccourcis personnalisés, qui était Tile All Vertically. Maintenant, comment on va l'utiliser ? Il faut qu'un ou deux fichiers s'ouvrent pour Photoshop. Je vais ouvrir un nouveau dossier, un nouveau tableau d'art par ici. Fondamentalement, je travaille dans deux tableaux d'art. Si je passe d'ici à ici, je ne vois pas ce que j'avais dans celui-ci. Maintenant, pour les voir clairement ou faire glisser un objet d'un canevas à un autre, je vais utiliser Alt, Control et F10, et vous pouvez voir comment Photoshop les a carrelés verticalement. Maintenant, si je clique sur ce tableau, vous pouvez voir ce calque ou cet objet intelligent a été sélectionné. Si je veux le faire glisser ici, je peux le faire glisser et le coller. Maintenant, vous pouvez voir qu'il a été copié sur le prochain tableau d'art. Mais le problème est qu'il a perdu son emplacement actuel, et ce tableau d'art est là où il était. Cet endroit était un peu au-dessus. Maintenant, si je veux garder le même emplacement, je vais appuyer sur « Maj » tout en le faisant glisser. Appuyez sur « Maj » tout en le faisant glisser et relâchez-le. Maintenant, vous pouvez voir qu'il a atteint sa position actuelle. Maintenant, c'est ainsi que nous travaillons dans plusieurs toiles, et si je veux faire glisser des images ou quelque chose d'une toile ou d'un tableau d'art à une autre. Maintenant, je suppose que j'ai presque fini ces touches de raccourci. Une de plus, appuyez sur Ctrl plus pour effectuer un zoom avant et appuyez sur Ctrl moins pour effectuer un zoom arrière. Par exemple, j'ai zoomé dans mon design et je veux le faire glisser un peu à droite ou à gauche. Si j'essaie de faire glisser avec mon curseur de souris, il va déplacer ce calque ou l'objet intelligent rond. Je ne veux pas ça, je veux venir ici, rendre cette zone visible. Je vais appuyer sur la barre d'espace et continuer appuyer dessus, puis je vais le faire glisser comme ça. Maintenant, vous pouvez voir que j'ai déménagé dans le coin supérieur gauche de mon tableau d'art. C' est parfois ainsi que nous nous déplacons lorsque nous avons zoomé dans notre conception. Ceci est également très commun zoom-in, zoom-out, puis déplacez votre canevas autour. Maintenant, je suppose que la plupart de ces raccourcis ont été discutés. Je suppose que nous sommes prêts à passer à la prochaine conférence. 26. Utiliser des masques de calques dans Photoshop: Dans cette leçon, je vais parler du masque de calque. Le masque de calque est une autre technique pour masquer différentes parties de vos éléments de conception de l'interface utilisateur, ou parfois des zones de héros ou des images utilisées dans les zones de héros des sites Web. Commençons à l'apprendre, d'accord ? J' ai déjà ouvert une image ici dans Photoshop. Maintenant, je vais double-cliquer sur le « Calque d'arrière-plan » pour en faire un calque simple. Je vais cliquer sur cette petite icône ici c'est « Ajouter », si vous passez la souris dessus, il se lit comme Ajouter un masque de calque. Ce qu'il fait, c'est que dès que vous activez ce masque de calque, assurez-vous d'avoir cliqué dessus. Donc celui-ci est actif, pas celui-ci. Vous pouvez voir qu'il y a des barres latérales rectangulaires au-dessus. Donc il devrait être actif ici comme ça. Ensuite, vous pouvez saisir votre outil Pinceau ou tout autre outil et vous pouvez commencer à peindre ici. Vous pouvez voir que ma couleur principale est définie sur « Noir » et ma couleur d'arrière-plan de premier plan est « Noir » et la couleur d'arrière-plan est « Blanc ». ce moment, je peins avec du noir. Quelle que soit la zone que je vais peindre avec du noir, il suffit de garder à l'esprit que le noir va tout cacher. Donc les ténèbres cachent tout et le blanc montre tout. Je vais régler la taille de mon pinceau un peu plus. J' appuie sur « Bracket Keys » sur le clavier. Il s'agit d'un raccourci pour augmenter et diminuer la taille de l'outil de brosse. Ok, maintenant, une autre chose que vous devez voir que cette opacité est réglée sur « 70 pour cent ». Donc, si vous voulez vous cacher totalement, alors vous devez le définir sur un « 100 pour cent ». Donc, chaque fois que je me suis balayé ici, ça va tout cacher. Maintenant une chose de plus, si je veux voir quelle pointe de brosse j'utilise, je dois cliquer ici. Vous pouvez voir que ce n'est pas une brosse dure, c'est une brosse douce aux coins en plumes. Donc, nous allons « sélectionner » l'un de ces durs. Donc, vous pouvez voir maintenant la différence. Ok, effacons toute cette zone ici, chaise aussi. Ok, je ne vais pas aller dans le détail pour obtenir une image totalement prête pour votre zone de héros ou l'édition d'images et nettoyer les arrière-plans. Mais c'est la technique de base. Vous pouvez zoomer avant et voir différentes zones et vous pouvez augmenter ou diminuer la taille de votre brosse pour plus de précision comme celle-ci. Une autre chose est qu'en utilisant le masque de calque, il est non destructif. Par exemple, si je clique accidentellement ici et supprime cette zone et que je veux la récupérer, alors je vais juste changer ces couleurs et je vais la peindre avec du blanc. Donc vous pouvez voir maintenant que ma chaise est de retour. Je peux effacer l'image comme celle-ci. Vous pouvez appuyer sur « X » pour déplacer les couleurs. Vous pouvez voir ici pendant que j'appuie sur « X », ils changent l'un avec l'autre. Je vais donc cliquer à nouveau sur le « Black Color » et le sélectionner et le peindre comme ça. C' est une technique très basique pour nettoyer des images comme ça. C' est ce qu'on appelle essentiellement masque de couche. Vous pouvez voir votre image en désactivant le masque de calque et vous pouvez voir l'image entière comme celle-ci et vous pouvez l'activer de nouveau. Cela nous aide vraiment à certains moments où nous devons nettoyer les images ou cacher quelques parties des images. Nous pouvons aussi faire quelque chose comme ça comme je vais sélectionner cette zone, par exemple, celle-ci jusqu'ici. Je peux sélectionner mon « Paint Socket Tool » et je clique juste ici et cache tout. Donc, en gros, je viens de laisser tomber la couleur noire ici. Donc, parfois, nous pourrions avoir besoin de faire quelque chose comme ça pour cacher la zone rectangulaire ou soustraire une zone d'une image ou quelque chose comme ça. Ensuite, nous utilisons une technique rapide. Nous n'attrapons pas notre pinceau et continuons à peindre et à peindre. Nous faisons une sélection et ramassons notre Paint Seau Tool et déposerons la couleur noire ici. Donc je suppose que c'est tout au sujet du masque de couche et j'espère vous voir dans la prochaine conférence. 27. Utiliser le masque d'écrêtage: Dans cette leçon, je vais parler de Masque de coupure. Voyons ce qu'est le masque d'écrêtage et comment nous l'utilisons dans notre processus de charge de travail de conception de l'interface utilisateur. Donc, fondamentalement, le masque d'écrêtage fonctionne comme un masque de calque. Son but est donc essentiellement de cacher certaines parties de calque ou d'une image. Laissez-moi vous montrer comment cela fonctionne par un exemple. J' ai pris cet outil Eclipse, appuyez sur « U », et j'ai dessiné cette éclipse en appuyant sur Maj pour le maintenir en proportion. Je vais au centre comme ça. Maintenant, je vais apporter une image libre juste pour la démonstration. Par exemple, cette image, je vais simplement la glisser dans Photoshop comme ceci. Fondamentalement, c'est un objet intelligent maintenant, donc je vais le redimensionner, appuyez sur « Entrée ». Maintenant, cette image est en haut de l'éclipse, l'éclipse est derrière ce calque. Donc, ce que fait fondamentalement Clipping Mask, il contiendra cette image dans cette éclipse. Comment on va le faire ? Appuyez sur « Alt » sur votre clavier et déplacez votre curseur ici entre ces deux calques. Donc, le fond est fondamentalement le conteneur et le haut est fondamentalement la partie que nous voulons montrer. Donc, entre le conteneur et la couche de base, nous allons maintenir « Alt » et cliquer une fois. Maintenant, vous pouvez voir qu'il ne montre que la partie de cette image, qui est fondamentalement à l'intérieur de cette éclipse. Donc, je peux facilement déplacer, glisser et déplacer cela, et c'est ainsi que nous créons différentes images d'avatar et différentes images de profil sur nos sites Web dans notre conception d'interface utilisateur. Donc fondamentalement outil Eclipse, nous pouvons utiliser n'importe quelle forme ici. Nous pouvons utiliser cet outil dans cette technique de Clipping Masque de plusieurs façons. J' espère que vous avez apprécié ma leçon et appris quelque chose de nouveau. Passons à la prochaine conférence. 28. Exercice Challange → Masque d'écrêtage: Bonjour à tous et bienvenue à mon nouveau défi. Il est fondamentalement un défi de pratique pour le masque d'écrêtage. Je n'ai utilisé que le masque d'écrêtage dans cet exemple, alors essayez de créer le même effet avec le masque d'écrêtage. Laissez-moi vous donner quelques indices. Il s'agit essentiellement d'une image à l'intérieur d'un masque d'écrêtage, et cette couleur noire que vous pouvez voir, c'est une autre forme derrière elle. Maintenant, c'est Open Sans police et c'est un bouton et cette zone est également coupée. Essayez de produire quelque chose comme ça avec le masque de coupe, et je vais poster la solution dans la prochaine conférence. A bientôt. 29. Utiliser des objets intelligents dans Photoshop: Dans cette conférence, je vais vous montrer l'utilisation des objets intelligents, comment nous allons l'utiliser dans notre conception de l'interface utilisateur, et quels avantages cela peut nous fournir avec la conception de l'interface utilisateur. Laissez-moi commencer par créer le bouton de symbole d'abord. Si je fais un bouton comme celui-ci, laissez-moi changer sa couleur en bleu pour qu'il soit facilement visible. Maintenant, je vais appuyer sur Shift. Maintenant, c'est un simple bouton. Je vais les sélectionner tous les deux pour les aligner. Maintenant, une façon de le regrouper, nous allons appuyer sur la touche G pour le regrouper et le déplacer. Nous pouvons également le dupliquer en appuyant sur la touche Alt et le déplacer. Nous avons deux groupes en double, et ils sont fondamentalement identiques. Et si je veux que les deux changent simultanément ? Si j'ai trois ou quatre boutons et que je veux changer leur couleur, je dois aller à chaque calque et changer sa couleur encore et encore. Pour éviter cela dans notre conception de l'interface utilisateur, où nous pourrions avoir simplement un contrôleur primaire ou un bouton primaire qui sera dupliqué tout autour de notre interface utilisateur, pour le faciliter, nous pouvons convertir ce groupe, cliquez avec le bouton droit sur ici dans le panneau Calques et Convertir en objet intelligent ou utilisez Alt F5, qui était notre touche de raccourci personnalisée. Fondamentalement, maintenant, il a été transformé en un objet intelligent. Maintenant, comment allons-nous l'utiliser dans notre conception de l'interface utilisateur ? Tout d'abord, nous allons le dupliquer trois ou quatre fois. Tu as l'idée quand je change quoi que ce soit. Si je veux changer tous ces quatre boutons, qui sont dans mon, par exemple, web design ou application web à différents endroits, je vais cliquer sur n'importe qui, sélectionner n'importe qui, double-cliquer sur ce panneau de calques, et maintenant vous pouvez voir que j'ai les deux couches ici. Maintenant, si je veux changer quoi que ce soit, par exemple, je change sa couleur en jaune ou orange, ou bleu foncé, bleu terne, je vais appuyer sur « OK », et je vais le fermer et l'enregistrer, « Oui ». Maintenant, tous les objets intelligents copiés ou dupliqués ont la même couleur que le bouton. C' est une façon de gérer nos boutons où nous avons quatre ou cinq, ou peut-être différents niveaux de boutons identiques. Si les boutons sont identiques, nous pouvons utiliser cet objet intelligent pour les gérer facilement. Un autre exemple ou utilisation de ces objets intelligents est, par exemple, nous avons une boîte de contenu comme celle-ci et nous avons du texte écrit dedans, par exemple, « Je suis une boîte de contenu », quelque chose comme ça. Permettez-moi d'y ajouter quelque chose de plus, comme ça. Maintenant, vous pouvez voir qu'il est en train de devenir une boîte de contenu. Je vais les regrouper et je vais créer un objet intelligent en appuyant sur Alt et cinq. Maintenant, c'est un objet intelligent. Maintenant, si je le duplique, peut-être trois fois comme ça, laisse-moi juste supprimer toutes les autres pour ne pas être confus. Maintenant, je l'ai dupliqué dans trois boîtes de contenu différentes. Vous avez peut-être vu ce modèle dans beaucoup de sites Web où nous avons trois boîtes en vedette ou trois caractéristiques de notre produit ou quelque chose comme ça. La plupart du temps, ils ont juste un élément comme l'icône change dans chacun d'eux et le motif est presque le même. Les couleurs et les tailles de police, tout est identique. Juste pour illustrer l'exemple : si je veux changer le contenu de celui-ci ou la couleur de celui-ci, je vais sélectionner ceci et juste changer sa couleur en jaune, ou peut-être gris, ou gris clair. Je vais appuyer sur « OK », et « Oui », sauvez-le. On y va. C'est une autre utilisation des objets intelligents. Normalement, il n'est pas utilisé peut-être à cause du problème que nous ne pouvons pas avoir de contenu différent dans les objets intelligents. Je vous conseille de ne pas utiliser de texte ou autre contenu, qui va être modifié dans les objets intelligents. Si vous avez besoin de créer un objet intelligent, conservez simplement les calques et les styles d'arrière-plan et supprimez le texte pour que le contenu puisse être modifié dans chacun d'entre eux. Maintenant, ils sont bons à y aller. Je suppose que vous comprenez l'idée qui n'utilise aucun élément ou calque qui va être différent dans d'autres objets. Un usage est ceci. Une autre chose est que vous pouvez également créer une copie de cet objet en appuyant sur le bouton droit de la souris et « Nouvel objet intelligent via Copy ». Lorsque vous créez un nouvel objet dynamique via copie, ils ne sont pas attachés les uns aux autres. Ils sont irrelatifs. Si vous changez de couleur ici, comme celui-ci, il ne sera changé que dans celui-ci. Tous les trois, ils sont liés, mais celui-ci est différent parce qu'il a été créé par ce nouvel objet intelligent via Copy. Nous avons créé une autre copie et c'était un nouvel objet intelligent, donc ils ne sont pas liés. Tout cela concerne les objets intelligents et la façon dont nous les utilisons dans notre conception d'interface utilisateur. Jamais, jamais mettre votre contenu qui est modifiable, ou changer, ou va être modifié dans tous les autres objets intelligents. Il suffit de garder les arrière-plans, et les couleurs d'arrière-plan et les styles ou les ombres dans ces objets intelligents. Ils sont utiles et vous pouvez les utiliser dans vos projets de conception d'interface utilisateur. Il s'agit d'objets intelligents. J' espère que vous avez appris quelque chose de nouveau. Passons à la prochaine conférence. 30. Objets intelligents liés dans Photoshop: Dans cette leçon, je vais parler des objets intelligents liés et de leur utilité. Normalement, lorsque nous utilisons des objets intelligents liés, ils sont essentiellement destinés aux applications ou aux sites Web où nous devons concevoir quatre ou cinq pages différentes d'une même application ou d'un même site Web. Ce que nous allons essentiellement les utiliser pour, c'est, par exemple, que j'ai ce site Web et que je conçois la page principale de celui-ci. Par exemple, je crée juste un en-tête rapidement ici. J' ai ce fichier d'en-tête et j'ai des liens différents sur nous. Laisse-moi juste tuer cette couche. Maintenant, je vais utiliser mon outil de texte, appuyez sur Maj pour qu'il ne suit pas ce calque. Il est indépendant de cette couche. Cliquez une fois et ici nous avons, à propos de nous, puis contactez-nous, puis produits. C' est juste un site web factice alors ne vous inquiétez pas de la mise en page ou de toute autre chose. C' est juste pour vous donner le concept de la façon dont nous allons utiliser les objets intelligents liés dans nos projets. Ce sont trois liens. Laisse-moi juste placer un logo factice par ici. C' est notre logo. Maintenant, d'abord ce que nous allons faire est que nous allons enregistrer cet en-tête, tous ces liens, et cet arrière-plan dans un objet intelligent. abord, vous devez le convertir en objet intelligent, puis vous devez le convertir en objets intelligents liés. Vous verrez l'option convertir en lien. Lorsque vous cliquez dessus, il vous donnera une option pour enregistrer ce fichier. Fondamentalement, ce que nous faisons c'est que nous sauvegardons cette partie de notre conception dans un autre fichier afin que nous puissions l'intégrer dans tous les fichiers que nous concevons. Si nous apportons des changements dans l'un d'eux, il sera modifié dans chacun d'eux. Laissez-moi vous montrer juste par un exemple. Je l'ai enregistré avec le nom Ellipse 1. Maintenant, je vais enregistrer ce fichier Photoshop. Par exemple, je vais l'enregistrer sur le bureau en ce moment. Mon bureau est très désordonné, mais tu dois supporter avec moi. On le nomme juste la page principale. La page principale va bien. Donnez-moi juste un titre ici pour qu'on sache que c'est la page principale. Page principale par ici. On va la colorer en noir. Donc la page principale ou la page maing, ça n'a pas d'importance. Maintenant, je vais ouvrir un nouveau fichier de la même dimension et je vais placer lié ici. Je veux placer le même en-tête ici. Maintenant, c'est le fichier que j'ai enregistré Ellipse 1, qui était essentiellement l'en-tête. Maintenant, vous pouvez voir qu'il a été placé ici. Je peux le déplacer en haut parce qu'il était en haut, et je vais appuyer sur « Entrée ». Maintenant, vous pouvez voir qu'il a été importé ici. Si je vais enregistrer ceci comme notre page de produits, ok, maintenant c'est essentiellement la page des produits. Permettez-moi de réparer ce r. Maintenant, voici notre page de produits, et ce sont quelques images de produits. C' est une page un peu laide, mais je pense que c'est correct d'obtenir ce qu'il va faire maintenant. Maintenant, je vais l'enregistrer comme notre page de produits. Pendant mon design, j'ai pensé que j'aurais dû changer cette couleur pour peut-être le vert. Mon logo a été changé. Je vais le sauver, appuyez sur « OK ». Maintenant, vous pouvez voir qu'il a déjà été automatiquement modifié dans l'autre fichier. Mais que se passe-t-il si j'utilise seulement ou si j'ai ouvert un seul fichier ? Je travaille sur la page principale et l'autre fichier n' ouvre pas le Photoshop. Je clique dessus, et je change la couleur de fond en bleu ou peut-être jaune, ou peut-être gris, ou peut-être gris foncé, un peu de gris. Je vais changer la couleur de l'ellipse pour celle-là, peut-être celle-là. Maintenant, je vais l'enregistrer et cliquer sur « Oui ». Vous pouvez voir qu'il a été modifié dans ce fichier qui a déjà été ouvert, c'est le fichier mainpage.psd. Si je le ferme et que j'ouvre la page de mes produits, laissez-moi ouvrir la page de mes produits. Maintenant, vous pouvez voir ici nous avons l'ancien design, il n'a pas été mis à jour. Mais vous pouvez voir une icône jaune ici dans votre objet intelligent lié Ellipse. Cliquez avec le bouton droit dessus, pas sur la vignette, mais sur le calque et vous pouvez voir options : Mettre à jour le contenu modifié ou Mettre à jour tout le contenu modifié. Cliquez dessus et vous êtes prêt à partir. Maintenant, c'est une fonctionnalité très soignée de Photoshop. Vous pouvez l'utiliser dans votre conception d'en-tête ou dans votre conception de pied de page de vos sites Web car ils restent normalement les mêmes sur toutes les pages. Ou même si vous concevez une application, vous avez presque les mêmes arrière-plans d'en-tête ou de pied de page, ou certains des calques de tous. C' est essentiellement l'utilisation d'objets intelligents liés. Passons à la prochaine conférence. 31. Utiliser des globes de calques dans Photoshop: Aujourd'hui, nous allons en apprendre davantage sur les compositions de couches. Dans ce cours, j'ai juste oublié d'inclure cette leçon. Voyons donc ce que sont les composs de couches et comment nous allons les utiliser dans la conception de l'interface utilisateur. Commençons. Ce que les compositions de couches est, fondamentalement, sont des compositions de couches différentes et nous pouvons passer de l'un à l'autre. Si aucune fenêtre Comps de calques ne s'affiche, accédez à Fenêtre et cliquez sur Comps de calques ici. C' est essentiellement le panneau de fenêtre Layer Comps ici. Maintenant, ce que nous allons faire, c'est que nous allons créer un seul bouton avec différents états. Comme lorsque vous survolez un bouton sur un site Web, il change de couleur. Donc, chaque bouton, lorsque vous concevez des données de l'interface utilisateur à différents états comme bouton désactivé, et survol, et bouton pressé, nous allons créer trois états. L' un est simple bouton, puis, survolez, puis désactivez. J' ai utilisé un rectangle arrondi. Utilisez cette couleur, n'importe quelle couleur que vous aimez. Ensuite, nous allons utiliser juste du texte dessus, Button Normal. Comme ça, et ensuite, nous allons les aligner. Alignons-les comme ça. Il suffit de le déplacer au milieu. Vous les regroupez pour qu'ils soient faciles à aligner, comme ça. Maintenant, c'est notre bouton normal, btn-normal. Ensuite, dupliquez ce groupe, Contrôle G. Ensuite, nous avons l'état de vol stationnaire. Maintenant, dans l'état de vol stationnaire, sélectionnez cette couche et nous allons changer sa luminosité un peu plus haut, 100%, comme ceci. Vous pouvez voir ici est la normale, voici le bouton survol. Ensuite, nous allons utiliser le bouton désactivé. Certains utilisent les point-virgules comme ça. Passez l'état du bouton comme ça, et l'état du bouton normal comme ça. Maintenant, nous allons utiliser des compositions de couches. Je pense que j'ai oublié de styliser ce bouton désactivé. Nous allons utiliser cette couleur grise pour le bouton désactivé, et je pense que tout va bien. Ceci est désactivé et c'est survolant et c'est normal. Juste, je suppose que nous devrions rendre le bouton normal un peu plus sombre parce qu' il ne semble pas très différent de notre état de vol stationnaire. Maintenant, nous avons trois boutons. Maintenant, nous allons créer une composition de couche comme celle-ci. Nous pouvons inclure la visibilité, la position et l'apparence, trois propriétés des couches. Si je change la position, il l'affichera dans une autre composition de couche. En ce moment, je pense que pour la visibilité et l'apparence sont plus que suffisantes. Nous allons utiliser cet état normal. Ensuite, nous allons en créer un autre avec l'état de vol stationnaire. Ensuite, nous allons, l' état de vol stationnaire a quelque chose comme ça, donc nous allons le rafraîchir comme ça. C' est notre état de vol stationnaire. Ensuite, nous allons utiliser un désactivé et cela va être désactivé état. Donc, ceci est désactivé, c'est survolant, et c'est normal. Vous pouvez voir chaque fois que je passe d'une composition de couche à une autre, cela change ou cache les deux autres couches. Donc, je n'ai pas besoin de les cacher d'ici, l'un l'autre. C' est ainsi que nous allons utiliser les compositions de couches dans la conception de l'interface utilisateur. On peut avoir un menu déroulant comme ça. Si quelqu'un clique sur notre menu comme ceci, puis nous montrons la liste déroulante. C' est normal, et puis, c'est une liste déroulante, quelque chose comme ça. Maintenant, si vous voulez exporter vos compositions de couches vers différents fichiers, vous pouvez également accéder à ce fichier et exporter. Ensuite, vous pouvez cliquer sur cette couche Comps to Files. Maintenant, vous pouvez sélectionner la destination où vous souhaitez les exporter. Je peux les exporter sur le bureau et appuyer sur « OK ». Ensuite, je vais le nommer boutons et le type de fichier sera PSD, et appuyez sur « Exécuter ». Les trois états ont été convertis en fichiers PSD. Vous pouvez voir ici le bouton 000 normal, bouton 0001 survol, et l'état du bouton 0002 désactivé. Donc, si j'ouvre ceci, vous pouvez voir qu'il a juste l'état désactivé. Une autre chose est que Photoshop enregistre également toutes les autres couches avec elle. Alors assurez-vous juste que ce n'est pas ce que vous voulez. Je pense qu'ils sont inutiles, mais je ne sais pas quelle est la logique derrière elle. Voici donc comment fonctionne cette couche comps et comment vous exportez différentes compositions de couches vers différents fichiers PSD. C' est tout sur les compositions de couches aujourd'hui et j'espère que vous avez apprécié cette conférence. Passons à la leçon suivante. 32. Maîtriser les effets d'ombres à l'aide: Dans cette leçon, je vais vous montrer comment utiliser vos effets de calque Ombre portée et comment créer des boutons avec eux. Je vais donc créer un rectangle arrondi avec un rayon de quatre pixels. Je vais en dessiner un gros pour que vous puissiez facilement voir les effets. Je vais sélectionner cette couleur verte. Maintenant, j'ai sélectionné ce calque. Je vais aller à Calque, puis Effets de Calque, ou vous pouvez cliquer sur ce calque et ensuite vous pouvez voir l'icône Fx ici, cliquez dessus et cliquez sur « Ombre portée ». Maintenant, vous pouvez voir que j'ai mis mon ombre portée comme ça. C' est une ombre portée très subtile. Maintenant, en gros, c'est le mode de fusion de votre ombre portée. On n'utilise pas d'autre chose que la normale. C' est mieux parce que nous devons convertir nos couches en CSS. Ensuite, nous avons Global Light, qui est essentiellement le Photoshop Global Light, où la lumière arrive au plus haut 90 degrés. Donc si je le change ici et que j'ai un autre calque, toutes les ombres seront ajustées à cette lumière globale. Donc, si vous voulez créer un bouton personnalisé, désactivez cette option et vous pouvez déplacer l'ombre là où vous le souhaitez. Je vais mettre en évidence l'ombre pour que vous puissiez voir comment elle se déplace. Maintenant, si je change la distance de l'ombre, vous pouvez voir à quelle distance elle va du haut de ce calque parce que la lumière est par ici. Donc, si je change la direction de la lumière, l'ombre changera aussi. En outre, cela est répandu, qui est fondamentalement combien il va se propager. Donc notre taille est de 25 et la propagation est de 100 pour cent. Donc c'est une ombre opaque. Donc, nous n'utilisons pas normalement cette option de propagation. Nous ajustons uniquement la distance, la taille et l'angle. Plus important encore, cette opacité pour créer différents effets d'ombre. Donc je vais changer la taille. Donc, vous pouvez voir maintenant, il est un peu plus floue. Je vais le déplacer et l'opacité un peu plus, et je vais changer l'angle à 85. Maintenant, vous pouvez voir comment seul cet effet d'ombre portée crée beaucoup de profondeur dans vos boutons et différents éléments de conception graphique. Maintenant, encore une chose dans Photoshop CC 2015, vous pouvez appliquer plus d'ombres portées comme j'en ai appliqué une autre en ce moment. Je vais le rendre un peu plus sombre. Je vais changer l'angle à 90. Quelque chose comme ça. Maintenant, vous pouvez voir que j'ai plusieurs ombres et qu'elles créent un effet très distinct, et la lumière vient du haut. Il s'agit d'ombres portées et je suppose que vous avez appris quelque chose de nouveau. Passons à la prochaine conférence. 33. Utiliser un effet de calque d'ombre d'intérieur: Bonjour les gars. Dans cette leçon, je vais vous dire quelque chose sur les ombres intérieures. Voyons comment ces ombres internes fonctionnent avec nos boutons à différents éléments de l'interface utilisateur. Maintenant, je vais commencer à partir de la dernière conférence. Je vais appliquer un nouvel effet qui est l'ombre intérieure. Maintenant, en gros, c'est de l'ombre intérieure, mais nous l'utilisons de différentes manières. Maintenant, vous pouvez voir ici nous avons le mode de fusion défini à l'écran, mais vous pouvez utiliser normal si vous le souhaitez. Vous pouvez changer l'opacité. Vous pouvez voir que j'ai sélectionné la couleur blanche. Donc, il vient fondamentalement à l'intérieur de 145 angle. Je vais changer l'angle à 90, qui est principalement ce que nous utilisons dans notre conception de l'interface utilisateur, près de 99,99 pour cent. Laissez-moi donc réduire l'opacité et la taille à 2 pixels. Maintenant, vous pouvez voir qu'il a un effet un peu audacieux, il est un peu élevé ici. C' est ainsi que nous utilisons notre ombre intérieure. Je dois réduire la taille à zéro aussi, parce que la taille est fondamentalement le flou, vous pouvez voir le flou dans notre ombre intérieure. Donc, j'utilise essentiellement 1 pixel ou moins que cela, et j'utilise la couleur blanche. C' est ainsi que j'ai appliqué mon ombre intérieure. Toutes les autres choses sont fondamentalement les mêmes que je vous ai dit dans ma conférence précédente, qui est l'ombre portée. Donc angle d'opacité et tout le reste est le même. Les différences que l'ombre intérieure il va venir de l'intérieur de la forme. Il ne va pas tomber de la forme. Ok, c'est tout au sujet de l'ombre intérieure. Passons à la prochaine conférence. 34. Utiliser un effet de calque de série: Bonjour tout le monde. Maintenant, je vais discuter en ce moment de l'effet de calque de tracé. Dans notre conception de l'interface utilisateur, nous utilisons couramment des effets d'ombre interne, d'ombre portée et de contour en combinaison pour créer différents boutons et différents éléments d'interface utilisateur d'effets. Maintenant, nous allons ajouter un autre effet qui est essentiellement accident vasculaire cérébral. Donc AVC ont en fait trois types différents, extérieur et à l'intérieur et ensuite nous avons dans le centre. Normalement, nous utilisons dehors et un peu de temps à l'intérieur Donc, vous pouvez utiliser l'effet que vous voulez. Vous pouvez sélectionner une couleur un peu plus claire ou plus foncée que la couleur de votre bouton d'origine. Donc maintenant, je vais sélectionner une couleur un peu plus foncée ici. J' ai réduit la luminosité de la couleur essentiellement. D' abord, c'était comme 65 pour cent, et maintenant je l'ai réduit à près de 60 pour cent. Si vous le réduisez à 55 pour cent, ce sera une représentation beaucoup plus claire de l'effet de course. Donc, si j'augmente la taille, vous pouvez voir que la taille augmente à l'intérieur du bouton. Ce sont différents modes de mélange et nous n'allons pas utiliser la plupart d'entre eux. Donc, nous pourrions utiliser cette opacité, mais je suppose que vous ne devriez pas gâcher ce mode de fusion et cette opacité. Maintenant, certaines personnes utilisent ce dégradé dans cet effet de course. Je ne le recommande pas parce que je suppose que nous ne pouvons pas représenter cet effet de dégradé dans notre codage CSS ou HTML. Il sera donc très difficile pour les codeurs de développer purement CSS ou un bouton codé comme ça. Donc, évitez d'utiliser des dégradés simplement utiliser la couleur et le mettre à deux ou quatre pixels et je suppose que ce sera très bel effet si je déplace l'ombre intérieure un peu plus à l'intérieur, comme ça. Maintenant, vous pouvez voir comment cela se passe. C' est tout au sujet d'un coup d'effets, maintenant je vais passer à la prochaine conférence. 35. Réutiliser des styles de calques: Parlons de la réutilisation des styles de calque. J' ai donc appliqué certains styles de calque à cette boîte. Donc, si je veux les réutiliser ou appliquer à n'importe quel autre calque ou dans n'importe quel autre projet, je pourrais encore avoir besoin de produire cet effet d'ombre encore et encore. J' ai besoin de sauvegarder ce style de calque. Alors comment je peux faire ça ? Allez dans ce panneau de calque, sélectionnez le calque que j'ai appliqué les styles de calque. Double-cliquez sur ces effets. Maintenant, vous verrez peut-être qu'il y a un bouton ici, « Nouveau style ». Donc, si vous cliquez dessus, je peux le nommer comme Soft Shadow, et je peux juste cliquer dessus « OK », et il est ajouté à mes styles. Alors comment je peux y accéder, je devrais aller dans les Styles. Dans le dernier, si vous passez la souris dessus, vous pouvez voir que c'est la seule ombre douce que je viens de sauver. Donc, si je veux l'appliquer à n'importe quel autre calque, je vais juste dessiner n'importe quel autre calque juste pour vous montrer comment l'appliquer à celui-ci. Je vais cliquer dessus et vous pouvez voir comment cette ombre douce a été appliquée à ce calque. C' est donc très important si vous voulez sauvegarder vos styles que vous allez utiliser encore et encore comme ces ombres et ombres intérieures. Alors utilise-le ça. Un conseil, gardez à l'esprit que toujours utiliser le noir et blanc dans vos styles de couleur pour économiser. Ainsi, ils peuvent être appliqués à n'importe quel calque. Si vous utilisez des couleurs comme le bleu, gris ou l'orange ou quelque chose comme ça, vous ne pouvez pas appliquer à un calque. Maintenant, vous avez appris à réutiliser les styles de calque, passons à la conférence suivante. 36. Quels sont les Gradients? ?: Parlons d'abord de quelques gradients. Alors, quels sont nos gradients ? Les dégradés sont simplement le mélange de deux couleurs ou peut-être plus de deux couleurs. Donc ici, j'ai ouvert un site web juste pour vous expliquer le concept. Maintenant, nous avons la couleur bleue sur le côté gauche et une autre couleur gris foncé sur le côté droit. Laisse-moi les mélanger. Maintenant, c'est le gradient. J' ai créé un dégradé en utilisant ces deux couleurs. Ceci est fondamentalement arrêt de gradient où combien d'utilisation de la couleur du côté gauche ou droit. Donc, si je le fais glisser ici, vous pouvez voir que la bonne couleur grisâtre est dominante et devient dominante. Si j'essaie de le faire glisser ici, alors la couleur plus claire gauche du bleu est un peu dominante. Donc, vous pouvez essayer ce site Web. J' inclurai le lien dans les ressources. Donc, fondamentalement, vous pouvez essayer différents schémas de couleurs comme ceux-ci. Une couleur forte et une couleur terne, je mélange en ce moment. Ne mélangez pas deux couleurs opposées ou deux couleurs très différentes. Comme si j'avais mélangé ces verts les uns avec les autres. Vous pouvez passer du bleu au gris, et même comme cela terne, et l'un est de couleur orange. Vous pouvez voir que c'est une combinaison très étrange. Donc, si je mélange comme les deux couleurs, ils feront une très bonne combinaison comme celle-ci. J' ai donc vu cette utilisation sur beaucoup de sites Web. Discutons donc dans la leçon suivante, où beaucoup de concepteurs Web professionnels et de concepteurs d'interface utilisateur utilisent ce mélange ou dégradés dans leurs conceptions. 37. Utilisation des dégradés dans la conception UI: Maintenant, regardons quelques-uns des exemples d'utilisation de dégradés dans la conception Web et les conceptions de pages d'apprentissage. Donc, c'est essentiellement le site Web Stripe et vous pouvez voir qu'ils ont mélangé ces deux couleurs orange et violet et il semble génial. Donc, c'est une utilisation et laissez-moi vous montrer d'autres exemples. Maintenant, nous avons ce bouton « Commencez gratuitement. » Maintenant, le concepteur a utilisé ce dégradé de cette couleur bleue tranchante à une couleur bleue un peu plus foncée. Donc, ça a l'air très unique. J' ai quelques autres exemples comme celui-ci, QuickBooks Online site. Donc, si vous cliquez sur cet ensemble, ce « Essayer gratuitement », il y a aussi une utilisation de gradient ici dans ces boutons. Ensuite, ce bouton a également dégradé. Même ce bouton blanc a un dégradé du blanc au gris. C' est ainsi que les concepteurs utilisent les dégradés et ils ont l'air très beaux dans les conceptions et ils attirent les yeux des utilisateurs. Donc, ici, nous avons une autre utilisation très unique des gradients. Vous pouvez voir sur ce site Web Sprout Video, ils ont utilisé des gradients d'une manière très créative et cela pénètre vraiment dans le design. Donc, c'est une utilisation sur les boutons. Ensuite, vous pouvez voir dans cette zone de contenu, ils ont utilisé ce dégradé dans cette direction, à partir de cet angle. Donc nous avons des couleurs vives ici et des couleurs un peu ternes ici. C' est la même technique que je vous ai dit dans la leçon précédente. Que si vous voulez mélanger deux couleurs, ne pas aller dans beaucoup de variété de couleurs, il suffit de mélanger les couleurs qui sont déjà plus proches les unes des autres. Dans ce site, ils ont utilisé deux greens. L' un est un peu vert jaunâtre, et l'autre est un peu vert terne. Ainsi, vous pouvez voir à quel point il peut créer un effet dramatique et beau. Donc, pour commencer, gardez à l'esprit que ne mélangez pas beaucoup de couleurs ou n'allez pas sauvage avec vos dégradés. Il suffit de garder à l'esprit conseil simple que vous devez utiliser uniquement les couleurs qui sont corrélées et très proches les unes des autres. Nous avons vu quelques exemples comme celui-ci. Maintenant, quel est le truc par ici ? Ils ont utilisé deux couleurs très pointues, orange très pointu ici et violet très pointu ici. Donc ce n'est pas complètement orange, c'est essentiellement orange rougeâtre. Ils sont donc plus proches les uns des autres. Mais pour commencer, je pense que vous pouvez utiliser ces techniques comme celle-ci. Ils ont utilisé les deux couleurs bleues ici, et dans ceux-ci, ils ont utilisé les deux nuances d'orange puis d'orange plus foncé, d'orange pointu et d'orange plus foncé, bleu violacé vif puis d'un bleu violacé clair, d'un bleu violacé terne. Donc, c'est fondamentalement juste une astuce de démarrage. Alors gardez cela à l'esprit, et dans la leçon suivante, créons, creusons dans les méthodes de création de gradients dans Photoshop. Passons donc à la leçon suivante. 38. 3 façons de créer des Gradients dans Photoshop: Dans Photoshop, vous pouvez créer des dégradés de plusieurs façons. Mais dans la conception de l'interface utilisateur, nous n'utiliserons que les méthodes que nous pouvons facilement contrôler et manipuler. Voyons voir combien de façons il y a. Je vais discuter de la première méthode qui sélectionne cet outil « Gradient », je ne vais pas entrer dans les options du dégradé en ce moment, alors assurez-vous que vous avez sélectionné un dégradé à partir d'ici. Je n'ai qu'une seule couche d'arrière-plan ici, j'ai ouvert juste un nouveau document. Il suffit de le faire glisser de gauche à droite ou n'importe quelle direction, et il va créer un dégradé. Je vais appuyer sur « Control Z ». Si je fais glisser de cette direction comme ça, vous pouvez voir que le gradient vient dans cette direction. Il s'agit essentiellement de contrôler l'angle de gradient. Il s'agissait de la première méthode à créer des dégradés, qui utilisait cet outil Dégradé de ce menu de la barre d'outils. Donc celui-ci est difficile à contrôler, nous ne allons pas l'utiliser pour les gradients dans notre conception de l'interface utilisateur, alors parlons de deux autres méthodes. Laissez-moi simplement créer quelques calques ici, et sous l'outil Rectangle, je vais créer un calque, rectangle arrondi ici, changer sa couleur pour ce bleu. Ok, maintenant, la deuxième méthode qui est la plus populaire et nous allons l'utiliser beaucoup, utilise ce style de calque. Allez donc dans Styles de calque, puis nous allons utiliser cet effet Superposition de dégradé. Vous pouvez voir dès que j'ai sélectionné ceci, j'ai déjà sélectionné un dégradé ici, vous pouvez le changer si vous le souhaitez. Voici comment nous appliquons les dégradés de style de couche, et quel en est l'avantage ? Pourquoi on va passer à cette méthode ou à une autre ? Le problème est cet effet de contrôle. Pour que nous puissions facilement le contrôler, l' éteindre ici, et l'allumer ici. Nous pouvons double-cliquer et le changer facilement à n'importe quel autre dégradé. C' est essentiellement la facilité de contrôle. Dans la conception de l'interface utilisateur, si nous avons des styles de couche ou tout ce qui est facile à contrôler, alors allez-y avec eux. C' est une autre méthode. Maintenant, la troisième méthode est de créer un calque de dégradé de réglage, donc pour cela nous allons aller à cette icône ici dans le panneau des calques, petite icône. Vous pouvez voir « Créer un nouveau calque d'ajustement de champ » cliquez dessus, puis nous allons sélectionner ce dégradé à partir d'ici, et vous pouvez voir le dégradé qui est sélectionné moment est de ce transparent au blanc. Laissez-moi en choisir un autre comme celui-ci. Maintenant, vous pouvez voir ce remplissage dégradé, juste rempli toute la toile avec cette couleur. Maintenant, dans notre conception de l'interface utilisateur, plupart du temps nous n'avons pas besoin de telles choses, donc nous allons découper ce dégradé dans cette forme de modèle R. Pour cela, nous allons cliquer sur « Ajouter » et cliquer entre ces deux calques, et maintenant vous pouvez voir ce remplissage dégradé a été appliqué. Maintenant, le remplissage de dégradé est appliqué à ce calque, donc c'est une autre façon que nous pouvons facilement cliquer ici, double-cliquer sur cette icône « Style de dégradé » ici, et nous pouvons facilement le changer à partir de cela. Ils sont très faciles à contrôler, c'est pourquoi nous pourrions utiliser cette technique de remplissage de dégradé et cette superposition d'effet de dégradé. Gardez simplement à l'esprit que ces deux méthodes seront utilisées encore et encore. Mais je pensais juste que vous devriez connaître toutes les méthodes de création de gradients dans Photoshop. Il s'agit de créer des dégradés dans Photoshop. Dans la prochaine conférence, nous examinerons les options et les différentes options de l'éditeur de dégradé et ce style de couche de superposition de dégradé. Restez en contact et passons à la prochaine conférence. 39. Utiliser un éditeur de dégradés dans Photoshop: Dans cette conférence, nous allons discuter de cet éditeur de dégradés. Si vous voulez changer les couleurs et créer un nouveau dégradé, vous pouvez double-cliquer dessus, et vous pouvez voir ici nous avons la fenêtre Gradient Overlay. Nous avons quelques presets bleus ici, mais maintenant nous allons créer un nouveau gradient personnalisé ici. Permettez-moi maintenant de discuter de quelques-unes des options présentées ici. Nous utiliserons la plupart du temps le dégradé solide et la douceur sera dans le 100 pour cent, alors ne gâchez pas ces paramètres. Maintenant, ce sont essentiellement des arrêts de couleur. Vous pouvez voir que cette couleur est sur l'emplacement est zéro pour cent, qui est en haut à gauche et le côté le plus à gauche. Si je le fais glisser ici, vous pouvez voir que son emplacement est en train de changer. Les deux options du bas sont essentiellement l'emplacement, où les couleurs seront situées. Cela peut changer la direction de notre gradient. Ces deux sont des arrêts, si je clique dessus, vous pouvez voir que l'emplacement est réglé à 100 pour cent pour cette couleur. Si j'essaie de le déplacer ici, c' est le même effet que j'ai mentionné dans ma première conférence de gradients, où je changeais la portée des gradients. Si je le déplace ici, vous pouvez voir que la couleur bleue est nette. La couleur bleue est très moins dominante que celle-ci est dominante. Je vais l'inverser. Vous pouvez voir une très petite flèche en forme de rectangle ici. Il s'agit essentiellement de spécifier où se trouve la portée de cette couleur. Si j'essaie de le déplacer ici, vous pouvez voir la portée de la couleur bleu foncé diminue et vous pouvez voir le décalage de cette couleur augmente dans le dégradé. Vous pouvez également modifier l'emplacement de la plage. Vous pouvez le régler à 50 pour cent en ce moment. Vous pouvez le changer à 70 pour cent ou quelque chose comme ça. Cette icône montre essentiellement la portée, quantité de cette couleur et pendant combien de temps cette couleur sera dans le dégradé. Ce sont toutes les choses que j'ai discutées ici, si vous voulez ajouter plus de couleurs, vous pouvez cliquer dessus et cliquer une fois par ici. Vous pouvez voir que j'ai ajouté la même couleur ici. Je peux changer sa couleur comme ça, peut-être une couleur pourpre grisâtre ou peut-être une couleur plus claire comme ça. Juste pour expliquer les dégradés, nous pouvons ajouter autant de couleurs que nous le voulons ici. Vous pouvez voir que cette couleur a la portée comme ça. Si j'essaie de le faire glisser ici et vous pouvez voir maintenant comment cette couleur s'additionne fondamentalement dans ce dégradé. Maintenant, si nous avons maîtrisé le côté inférieur de cette barre de gradient, parlons de la barre supérieure. Maintenant, nous avons quelques icônes de type d'arrêts ici comme celui-ci et celui-ci. Vous pouvez ajouter cela ici aussi. Ce qui est fondamentalement le haut, ces barres sont en train de faire ici. Ce sont essentiellement l'opacité, comment votre dégradé sera opaque. Si parfois nous pourrions avoir besoin de produire un gradient qui est transparent d'un côté et opaque d'un côté. Si je veux rendre cette couleur blanche transparente, je vais réduire son opacité à zéro pour cent. Maintenant, vous pouvez voir ces coches apparaissent, qui sont fondamentalement la transparence. Ces barres supérieures contrôlent essentiellement la transparence des couleurs ci-dessous. Si je veux changer l'opacité de celui-ci, je peux l'utiliser à 50 %. Vous pouvez voir les couleurs et la transparence a changé. Aussi, vous pouvez voir les icônes ici, ils ont changé aussi. gris clair signifie son opaque, 50 pour cent ou 40 pour cent opaque pas totalement opaque. C' est un peu transparent. blanc signifie qu'il est totalement transparent, noir signifie qu'il est totalement opaque. Ce sont toutes les options ici. Maintenant, pour enregistrer votre dégradé, si je veux l'enregistrer, je peux le nommer ici transparent au bleu, et je peux cliquer sur ce Nouveau ici, et vous pouvez voir que j'ai enregistré ce dégradé ici. C' est ainsi que nous créons des dégradés, mais pour commencer, je ne vais pas utiliser beaucoup de couleurs. Je vais supprimer cette couleur et nous allons utiliser un peu plus de couleur bleu foncé ici et régler l'opacité à 100 pour cent. Supprimez cet arrêt de transparence, Supprimer. Maintenant, nous pouvons peut-être changer un peu sa saturation, faire une couleur bleue plus nette. Je vais changer sa portée aussi et puis je vais créer cette couleur à bouton bleu. Maintenant, créez-le comme ça, Enregistrer, Nouveau. Si vous voulez enregistrer cet ensemble de dégradés, vous pouvez cliquer sur ce bouton Enregistrer, et vous pouvez utiliser ce dégradé enregistrez-le. Vous pouvez voir que je le nomme comme peut-être des dégradés d'interface utilisateur plats, quelque chose comme ça. Si vous créez beaucoup de dégradés et que vous voulez simplement les enregistrer, vous pouvez les enregistrer comme ça. Si vous voulez les charger plus tard, vous pouvez les charger à partir d'ici, donc vous ne perdez pas vos dégradés. Tout cela concerne l'éditeur de dégradés et la création de nouveaux dégradés et la façon de les utiliser. Si vous avez des questions ou quoi que ce soit dans votre esprit, posez-moi au cours de la discussion. Je pensais que cette partie de gradient est très, très importante dans la conception de l'interface utilisateur car elle a une grande utilisation dans les boutons, arrière-plans, même la zone de héros. C' est une question de gradients. Je vais télécharger les prochains exercices d'utilisation de gradients et quelques défis. Restez à l'écoute et à la prochaine conférence. 40. Utiliser le style de calques de calques de dégradés: Je vais d'abord discuter de ces options d'effet de superposition de dégradé. Double-cliquez ici sur cet effet et cette fenêtre de style de calque apparaîtra. Tout d'abord, nous avons ce mode de fusion qui est réglé sur normal en ce moment. Ce qu'il fait fondamentalement, c'est que seuls nous pouvons voir les dégradés, mais nous ne pouvons pas voir la couleur d'arrière-plan de ce calque. J' ai défini la couleur de fond de la forme à ce sombre où vous pouvez le voir dans la vignette qui n'est pas affichée en ce moment. Si j'essaie de le mélanger comme le multiplier avec l'arrière-plan, vous pouvez voir maintenant les couleurs bleues sont multipliées ou ajoutées à ce fond grisâtre. Dans ce mode de fusion de superposition de dégradé, nous ne les utiliserons peut-être pas tous, nous utiliserons seulement ce peut-être assombrir ou ce multiplier, gravure de couleur et peut-être l'écran, et peut-être la superposition. Ce ne sont essentiellement que peu d'effets que nous utiliserons la plupart du temps. Ne vous inquiétez pas pour tous, essayez simplement de passer à quelqu'un que vous aimez ou continuez à basculer jusqu'à ce que vous obtenez le meilleur effet. Ne vous inquiétez pas d'apprendre tous ces effets de mélange, ce sont essentiellement juste un mélange de couleurs. Comment les couleurs de dégradé vont être mélangées avec la couleur d'arrière-plan. Ils vont brûler comme ça ? Vous pouvez changer l'opacité ici, vous pouvez voir. Laisse-moi juste passer à la lumière normale maintenant. Pour la conception Web et CSS, je ne recommande pas d'utiliser ce mode de fusion, donc il suffit de le garder à la normale. C' est une autre astuce. Maintenant, pour cette opacité, vous pouvez la changer si vous le souhaitez, mais assurez-vous que tout est réglé sur 100. Nous n'avons pas besoin de la couleur d'arrière-plan de ce calque. Maintenant, je vais seulement discuter des options ici. Je discuterai de l'éditeur de gradient par la suite. Si je double-clique ici, vous pouvez voir l'éditeur de dégradé est ouvert. ce moment, je vais discuter uniquement de ces options de cette superposition de dégradé de style de calque. Maintenant, c'est essentiellement la direction, je vais inverser la direction. Si nous avons ce dégradé de, vous pouvez voir bleu foncé à une couleur bleu vif, vous pouvez l'inverser comme ça si vous voulez inverser la direction. Ensuite, cela est toujours coché donc ne gâchez pas cela avec l'option aligner avec la couche, c'est essentiellement ainsi que l'alignement de ce dégradé va être. Il va s'aligner avec le calque. Maintenant, ce sont essentiellement des styles, comment le dégradé fonctionnera. Est-ce que ce sera dans le mode linéaire de, vous pouvez voir dans une ligne de haut en bas. moment, nous avons cet angle de 90. moment, ce gradient fonctionne dans cette direction en mode linéaire en alignement. Si nous passons en mode radial, vous pouvez voir comment cela a changé et maintenant c'est en mode radial comme celui-ci dans un mode circulaire. Nous n'utiliserons peut-être pas ces angles et ce reflet ou peut-être le diamant, mais je suppose que nous utiliserons principalement linéaires et radiaux. Gardez juste à l'esprit que ne gâche pas tous. Nous n'utiliserons que linéaires et radiaux parce que dans la conception CSS et Web, nous pourrions ne pas être en mesure de produire ces effets je suppose. Ceux-ci sont plus faciles à produire des effets linéaires et radiaux. Nous pouvons peut-être générer celui-ci, mais c'est à vous de décider si vous voulez l'utiliser. Ensuite, c'est l'angle. Si je change l'angle, vous pouvez voir comment les dégradés vont changer. C' est juste la direction du gradient venant de gauche à droite ou l'angle que je spécifie. Gardez juste à l'esprit, ce n'est que l'angle. Ensuite, l'échelle est fondamentalement la largeur et vous pouvez voir à quel point les couleurs seront étroites. Vous pouvez voir que je passe à moins dans la section d'échelle et que les dégradés deviennent plus étroits. Si je passe à plus de 100 pour cent, vous pouvez voir les dégradés deviennent plus épais et ils ont plus de portée de couleurs. La portée augmente. Il s'agit de toutes les options concernant les styles de calque de superposition de dégradé. Dans la prochaine conférence, nous discuterons de cet éditeur de gradient. Passons à la prochaine conférence. 41. Quels sont les motifs et comment nous les utilisons dans la conception Web ?: Dans cette leçon, nous allons voir comment les modèles sont essentiellement utilisés dans l'interface utilisateur et la conception Web. Alors commençons par ce que sont les modèles. Donc les modèles sont essentiellement des arrière-plans répétés. Vous pouvez voir ici, sont des images simples qui sont répétées encore et encore. Ceci est un site web, subtlepatterns.com. Vous pouvez visiter ce site et voir beaucoup de modèles, vous pouvez aussi les télécharger. Ce sont donc quelques-uns des très bons modèles. Nous pouvons les utiliser dans notre conception de l'interface utilisateur et la conception web. Voyons quelques exemples en ligne pour voir comment les modèles sont utilisés par les concepteurs Web. Laissez-moi vous montrer quelques exemples. Nous avons déjà vu ce site web, sproutvideo.com. Mais si vous regardez les parties latérales gauche et droite ici, vous pouvez voir qu'il y a des polygones stylisés motifs appliqués ici sur l'arrière-plan. Ensuite, nous avons, si nous passons à ce marché créatif, ils ont montré ce paquet, mais en arrière-plan, vous pouvez voir qu'ils utilisent un modèle pour la saison d'automne ou quoi que ce soit. Alors nous l'avons fait, laissez-moi vous montrer un autre exemple. Vous pouvez le regarder. C' est juste un motif sans couture d'un bois. Ce n'est donc pas une très grande image. C' est juste une petite image, peut être de 100 par 100 pixels de large et de 100 pixels de haut. Ils l'ont donc appliqué pour créer ce fond en bois. Vous pouvez donc voir comment ces modèles comptent vraiment dans votre conception Web et votre conception d'interface utilisateur. Le problème est, toujours les utiliser à bon escient, n'utilisez pas un très gros modèle de fichier comme 500 par 500 pixels ou peut-être parfois j'ai vu des gens utiliser des images de 1 000 pixels par 1 000 pixels pour leurs motifs. Il n'est donc pas conseillé. Utilisez toujours des modèles qui sont homogènes et ont une très petite taille de fichier. Donc c'est tout à propos des modèles. Dans la prochaine leçon, nous examinerons comment télécharger et installer de nouveaux modèles dans Photoshop pour être utilisés dans votre conception d'interface utilisateur. Passons donc à la prochaine conférence. 42. 2 méthodes d'application des motifs: Dans cette leçon, je vais discuter de la façon dont nous pouvons appliquer des motifs dans Photoshop. En fait, il existe deux façons d'appliquer des motifs Photoshop. Discutons d'eux un par un. J' ai déjà dessiné ce rectangle ici. La première méthode consiste à appliquer des styles de calque. Accédez à Calque, Styles de calque et Superposition de motif. Dès que vous voyez cette fenêtre, vous verrez qu'il y a déjà des motifs appliqués à votre conception. Tout d'abord, vous devez voir certaines des options. Vous connaissez déjà ces options de mélange et le contrôle de l'opacité. Discutons de cette bibliothèque de modèles. Ce sont les bibliothèques actuellement chargées ici. J' ai beaucoup de modèles personnalisés chargés ici. Donc, si j'essaie de les appliquer comme ça, ils sont appliqués à ma couleur d'arrière-plan, peu importe ce que c'est comme ça. Maintenant, le problème est, si je veux montrer ma couleur d'arrière-plan et le motif devrait être superposé dessus. Vous pouvez le faire en contrôlant ce contrôle d'opacité. Déplacez ça. Vous pouvez voir maintenant notre motif n'est ni opaque ni transparent. Donc, si vous voulez un effet très subtil, vous pouvez utiliser le contrôle d'opacité pour l'utiliser. Si vous voulez simplement utiliser celui-ci et passer à un autre effet comme multiplier, vous pouvez voir comment cela affecte vraiment la couleur de fond. Il ne fait que s'additionner en arrière-plan. Ce sont différentes options que vous pouvez utiliser ici, vous pouvez utiliser la multiplication normale ou même la brûlure colorée, quelque chose comme ça. Même parfois, nous choisissons simplement la couleur ou la teinte. La plupart du temps, nous utilisons normal, multiplier ou peut-être superposer. Ce sont les trois effets que nous utilisons la plupart du temps. Gardez donc à l'esprit que vous utilisez cet effet avec ces options de mélange, superposition, normale, multiplier. C' est tout à propos des styles de calque. Maintenant, discutons de la deuxième méthode. Il est très facile à contrôler, vous pouvez simplement éteindre et allumer comme ça. Maintenant, en arrivant à la méthode suivante, nous allons supprimer cet effet ici. Maintenant, la deuxième méthode consiste à appliquer des motifs à l'aide de vos calques de réglage. Il y a les calques de réglage, ils se trouvent juste dans le coin inférieur de votre panneau Calques. Cliquez sur cette icône et allez à ce modèle. Cliquez dessus, et vous pouvez voir comment cette boîte de dialogue de remplissage de motif est apparue. Ici, nous avons beaucoup moins d'options comme l'opacité et d'autres choses. Nous ne pouvons pas les contrôler ici. On va juste choisir n'importe quel modèle, comme celui-ci, à pois. Je vais appuyer sur « Ok ». Maintenant, le motif est, chaque fois que vous utilisez un calque de réglage, il est appliqué à l'ensemble du canevas. Gardez donc à l'esprit que vous devez le couper si vous voulez que l'effet soit sur une zone spécifique. Nous avions déjà ce rectangle sur le côté droit de notre panneau Calques. Donc nous allons découper ce motif à l'intérieur de ce calque comme ça, et c'est tout. Si vous voulez contrôler son opacité, vous pouvez le contrôler à partir d'ici, l'opacité du panneau Calques comme ça. Si vous souhaitez utiliser un mode de fusion, vous pouvez utiliser ces modes de fusion de calque ici, comme ceci. Maintenant, nous avons une gamme complète. Nous pouvons facilement étendre cette couche et vous pouvez voir que le motif est en expansion avec elle. Ce sont essentiellement les deux façons d'appliquer des motifs dans Photoshop. Juste un résumé. La première consiste à utiliser les styles de calque dans la superposition de calque et de répétition. Le second est que vous allez utiliser un calque de réglage. Donc, les deux méthodes sont bonnes à utiliser. Vous pouvez utiliser n'importe lequel d'entre eux. C' est tout sur la façon d'appliquer des motifs dans Photoshop en utilisant deux méthodes différentes. Passons donc à la prochaine conférence. 43. Créer des motifs à partir d'un fichier d'image: Discutons comment nous pouvons créer des motifs à partir d'images ou comment nous pouvons utiliser des modèles ou les télécharger depuis Internet et les utiliser dans Photoshop. Alors commençons ce tutoriel. Tout d'abord, je vais vous montrer ce site subtlepatterns.com. C' est très populaire. Ils ont un plugin qui est plugin premium, vous devez l'acheter. Donc maintenant, ce que nous allons faire est d'abord télécharger un modèle à partir d'ici, et voyons comment nous allons créer un modèle à partir d'un fichier image. Il suffit de télécharger ce modèle ici. Ok, pink_rice, il est téléchargé, et laisse-moi prendre le fichier. Voici le dossier, je vais l'extraire. Alors voyons ce qu'il y a à l'intérieur. Nous avons un fichier image PNG à l'intérieur de ceci. Faisons-le glisser dans notre Photoshop, comme ça. Maintenant, vous pouvez voir que ce n'est qu'un fichier PNG. Nous allons créer notre modèle dans Photoshop à partir de ce fichier PNG. Donc, nous allons appuyer sur Contrôle A pour sélectionner l'ensemble du Canvas, aller à Modifier et définir le motif. Donc je vais le renommer en pink_rice, appuyer sur OK, et c'est tout. Notre modèle a été créé. Appliquons-le sur quelque chose. Je vais utiliser l'outil Eclipse comme là. Maintenant, je vais l'appliquer avec notre méthode de style de couche, accord, où est-il ? Superposition de motif. Maintenant, allez dans cette bibliothèque de modèles, passez à la fin et vous verrez la dernière ou la dernière que vous avez créée à la fin de cette responsabilité de modèle. Ainsi, chaque fois que vous créez un motif à partir d'un fichier image, il sera en bas et le dernier. Alors cliquez ici et vous pouvez voir que je l'ai déjà appliqué, mais nous allons utiliser le mode normal. Donc, vous pouvez voir comment cela fonctionne. Maintenant, nous avons appliqué notre modèle ici et c'est tout. C' est ainsi, comment créer votre motif à partir d'un fichier image. Passons donc à la prochaine conférence où nous verrons comment installer de nouveaux modèles avec des fichiers .pat pour Photoshop. 44. Installation et utilisation de fichiers .pat: Maintenant, discutons de la deuxième façon d'utiliser des modèles dans Photoshop et de les installer. Nous allons utiliser le fichier .pat dans cette conférence. Donc, le fichier .pat est la collection de différents modèles pour Photoshop. Maintenant, nous allons utiliser ce premiumpixels.com/freebies, qui est un modèle, très beaux modèles. Il suffit de les télécharger à partir d'ici. Je clique sur le « Télécharger » et téléchargeons ceux-ci. Ce ne seront que des fichiers de modèle et nous allons les installer en premier. Nous allons donc d'abord passer au dossier d'installation de Photoshop. Nous l'avons déjà téléchargé. Passons au dossier d'installation de Photoshop. J' ai ouvert beaucoup de dossiers ici. Maintenant, faites un clic droit sur Photoshop et allez dans Propriétés et Ouvrir l'emplacement du fichier, et nous allons utiliser ce dossier Presets. Allez dans ce dossier Presets et ici vous me trouverez pour trouver le dossier Patterns comme ça. Pour les utilisateurs Mac, je suppose que le chemin provient de l'application et d'Adobe Photoshop et Presets. Je vais poster le chemin réel dans les commentaires ou dans la discussion, ou peut-être dans une autre conférence, mais en ce moment c'est pour PC. Vous pouvez Google que quel est le chemin de votre dossier d'installation Photoshop sur Mac. Maintenant, cliquez sur ce dossier Patterns et vous verrez tous les motifs ici. Ce sont les modèles préfabriqués ou par défaut de Photoshop. Maintenant, si je veux installer un modèle ici, j'ai juste besoin de copier et coller le fichier de modèle ici. Ce n'est pas très difficile, alors faisons-le. Nous allons utiliser les mêmes motifs subtils ici, je vais les extraire, donc nous allons utiliser ce fichier Patterns. Copiez et nous allons le coller dans notre dossier Patterns ici, Continuer. Maintenant, pour que cela se produise, vous devez fermer Photoshop et le fermer et l'exécuter à nouveau. Maintenant, laissez-le commencer un peu. Ça prend un certain temps pour être chargé dans ma RAM. Cela prendra donc un certain temps. Allez. Oui, je vais utiliser le fichier Patterns nouvellement installé. Donc nous allons dessiner quelque chose ici comme ça, et nous allons appliquer un modèle ici, Pattern Overlay. Maintenant, nous voyons déjà notre ancienne bibliothèque de motifs, donc pour accéder à la nouvelle, cliquez dessus, et cliquez sur l'un des motifs qui étaient ici. C' est le modèle que nous venons d'installer, cliquez dessus. Il dira, « Remplacer le motif actuel par un motif de motifs. » Donc, si vous souhaitez remplacer toute votre bibliothèque, vous pouvez cliquer sur OK ou cliquer sur Ajouter. Donc, si vous cliquez sur Ajouter, il sera ajouté à la dernière, comme ça. Vous pouvez voir par ici. Pour plus de clarté, remplacons simplement les modèles afin que nous n'ayons rien d'autre. Je ne sais pas ce qui se passe, peut-être que c'était des motifs subtils. Vous pouvez cliquer sur n'importe quel modèle ici. Ce sont les modèles, je cliquais sur le mauvais nom de fichier, alors il suffit de cliquer dessus. Vous pouvez voir ce sont des motifs différents, très beaux motifs subtils, tout comme la texture du papier. Donc, je vais l'étendre afin que vous puissiez voir la texture facilement. C' est essentiellement la méthode que nous utilisons pour télécharger et installer les fichiers de motifs Photoshop. Ils sont très faciles à installer si vous voulez utiliser le même modèle pour Internet ou peut-être, désolé, pour le développement ou le développement de site Web, vous pouvez utiliser ces modèles ici. Ceux-ci sont pour l'utilisation dans le développement web parce que le fichier PNG, vous pouvez facilement les répéter, et pour Photoshop vous pouvez facilement l'appliquer dans Photoshop. C' est tout à propos de l'application et de l'utilisation de fichiers de motifs Photoshop. Passons à la prochaine conférence. 45. Comment fonctionne la lumière et l'ombre dans l'UI Design: Bonjour tout le monde. Dans cette conférence, je vais vous montrer essentiellement le secret derrière ou le concept derrière toutes les conceptions d'interface utilisateur. Vous pouvez créer n'importe quel type d'élément d'interface utilisateur avec ce concept, ou au moins 80 pour cent d'entre eux. Alors, quel est ce concept ? C' est le concept de la lumière et de l'ombre. Maintenant, j'ai vu presque toutes les conceptions d'interface utilisateur où la lumière tombe toujours de cet angle qui est de 90 degrés. Supposons d'abord juste une seconde, que la lumière vient du haut, comme ça. Lorsque la lumière est en haut, l'ombre doit être en bas. La lumière est là et l'ombre est là. Si on déplace la lumière ailleurs, comme ça. Laissez-moi vous montrer un exemple. Celle-là. Maintenant, vous pouvez voir que la lumière est sur le côté gauche et l'ombre est sur le côté droit. Donc l'ombre se déplace avec la lumière pendant que nous bougeons la lumière. C' est le concept de base. Maintenant, quand quelque chose est élevé dans la conception de l'interface utilisateur ou avoir un effet de castor ou quelque chose comme ça. Ils ont de la lumière en haut et vous pouvez voir la lumière, il tombera sur cette zone. Fondamentalement ce que nous faisons les designers, nous créons de la lumière ici et un peu d'obscurité ici, puis de l'ombre ici et voilà. Notre bouton surélevé est là. Google design matériel, il y a beaucoup d'utilisations de ce concept, les ombres. En arrivant à ce meilleur effet, que se passe-t-il ici ? Si nous appuyons sur un bouton ou appuyez sur quelque chose, l'ombre sera sur le côté intérieur. Donc gardez toujours à l'esprit que nous avons besoin d'ombres ici pour le faire presser et encore une chose, il y a un très petit détail, vous n'avez pas besoin de manquer ça. Laissez-moi zoomer pour vous, maintenant, si vous regardez de près, nous avons des ombres ici et si quelque chose est pressé, la lumière tombera sur cette zone. Parce que cette zone est pressée à l'intérieur, donc il va sauter toute la lumière. La lumière tombera d'ici et d'ici. Si je clique sur ce calque, vous pouvez voir que j'ai utilisé une ombre portée très légère. Si j'augmente sa taille, vous pouvez voir ici maintenant. Vous pouvez voir l'ombre portée ici, c'est une ombre blanche, qui est essentiellement un éclat blanc, mais je vais l'appeler une ombre en ce moment. Laissez-moi changer la couleur de fond pour vous afin que vous puissiez le voir clairement. Maintenant, vous pouvez le voir clairement. Il y a une ombre blanche ici ou brille par ici. C' est essentiellement cette lumière qui tombe ici sur cette zone pour la faire briller. Ce sont les deux choses de base dont nous avons besoin dans tout ce que nous devons montrer comme un objet pressé ou pressé à l'intérieur. Laissez-moi vous montrer un autre exemple, ici j'ai utilisé le même concept sur une typographie ou vous pouvez voir sur un texte, vous pouvez voir comment il est pressé ici. C' est l'effet pressé, il était très populaire, les concepteurs d' interface utilisateur l'utilisent toujours dans tous les boutons. Presque tous ces bâtons ont ces deux bâtons, l'un est élevé et l'autre est pressé. Il suffit de garder à l'esprit, concept très basique, que la conception de l'interface utilisateur, tous les éléments de l'interface utilisateur qu'ils tournent autour de cet effet de lumière et d'ombre. 46. Exemples d'utilisations de lumière et d'ombres: Dans cette leçon, je vais vous montrer quelques-uns des exemples de dribbleurs qui utilisent la lumière et l'ombre le mieux. C' est un exemple que vous pouvez voir ici. Ce bouton est surélevé et ils ont utilisé la lumière ici et l'ombre ici, puis ils ont de l'ombre ici et un peu de lumière par ici. C' est pour l'effet pressé et c'est pour l'effet élevé. Maintenant, même dans cet effet d'altitude, ils ont utilisé l'effet pressé pour cette marque de coche. Pourtant, cela est à nouveau pressé puis pressé à l'intérieur de celui pressé. Donc, c'est un effet très unique, mais il semble très bon. Maintenant, un autre exemple. C' est aussi un autre exemple. C' est juste par la lumière et l'obscurité qu'ils ont utilisé deux très grandes interfaces utilisateur et ils ont utilisé la lumière et l'ombre au niveau pressé. Vous pouvez voir de la lumière ici et de l'ombre ici. Ensuite, vous pouvez voir aussi la lumière par ici, l'ombre par ici. Ensuite, dans l'effet pressé, vous pouvez voir la lumière ici en bas. Vous pouvez voir que la couleur de ce bouton varie des deux derniers. Ainsi, la couleur de ce bouton est plus foncée que les boutons gauche et droit. Maintenant, en venir à un autre exemple. Maintenant, cela s'appelle fondamentalement les thèmes de l'interface utilisateur sombre, je ne les aime pas beaucoup. Vous pouvez voir ici le même effet de lumière et d'ombre. Maintenant, la lumière est par ici. Vous pouvez voir une lumière très terne ici. Ensuite, nous avons de l'ombre, qui est une ombre diffuse par ici. Ensuite, nous avons ce bouton pressé et devinez quoi, le bouton pressé est plus sombre. C' est le concept principal. Ainsi, vous pouvez voir que ces boutons ont une nuance de gris un peu plus claire et ce bouton a une nuance de gris plus foncée. Donc, ici, nous avons un gris plus foncé et un gris plus clair. C' est encore une fois le concept de lumière et d'ombre. Dans les prochaines conférences, je vais discuter de la façon de choisir les couleurs de typographie, et quelques autres conseils pour les débutants. Alors restez à l'écoute et à la prochaine conférence. 47. Plans de couleurs pour les débutants: Parlons de schémas de couleurs. Les schémas de couleurs sont une partie essentielle de la conception de l'interface utilisateur, que vous conceviez un site Web ou une application ou autre chose. Alors, comment nous allons concevoir ces schémas de couleurs ou comment les créer pour les débutants, je vais l'expliquer d'une manière simple. Donc, tout d'abord, la règle empirique. N' utilisez jamais plus de deux couleurs autres que ces nuances de gris. Donc, utilisez un maximum de deux couleurs pour les débutants. Sinon, il sera difficile de contrôler ou de manipuler ces couleurs. Il suffit de coller à deux couleurs et d'utiliser autant de nuances de noir ou de gris ici. Vous pouvez voir dans le premier schéma de couleurs, j'ai utilisé seulement deux couleurs plates, vert et orange. Ensuite, j'ai utilisé deux nuances de gris. Dans le second, j'ai utilisé à nouveau deux couleurs principales pour mon schéma de couleurs. Ensuite, tous les trois sont fondamentalement les nuances de gris. C' est essentiellement très populaire. Les nuances de gris deviennent très populaires. La plupart des UIS, ils sont dominants avec ces nuances de gris. Pour attirer l'attention de l'utilisateur votre interface utilisateur et si vous devez concevoir différentes parties, vous devez utiliser ces deux couleurs principales. Ces couleurs seront principalement utilisées pour le texte. Je l'ai vu principalement dans la plupart des interfaces utilisateur, même sur Dribbble, ils utilisent la plupart des nuances de gris pour les textes. N' utilisez pas de couleur noire, cela ruinera votre conception de l'interface utilisateur. Donc gardez juste à l'esprit, obtenez quelques nuances de gris et obtenez deux couleurs et commencez à concevoir votre interface utilisateur. 48. Utiliser la saturation de couleurs et l'éclat pour les schémas de couleurs: Il existe une autre méthode pour obtenir les couleurs, qui provient de vos logos. Si vous avez déjà le logo, vous pouvez voir ce schéma de couleurs, je l'ai obtenu à partir de ce logo ici et comment je l'ai fait, je viens de cliquer sur le calque et d'échantillonner la couleur d'ici. Le sélecteur de couleurs, échantillonnez-le d'ici et puis j'échantillonne cette couleur d'ici. Comment j'ai généré cette couleur rouge, c'est une méthode très facile. Il suffit de cliquer sur n'importe quelle couleur dont vous avez besoin, comme celui-ci et juste déplacer ce curseur de teinte vers le haut, comme je l'ai à cette couleur rouge. Cela reste dans la même saturation et la même luminosité et la teinte est différente. C' est une méthode très facile. Parfois, je l'appliquais comme ça. Vous pouvez voir ces trois couleurs vont très bien ensemble car elles partagent la même luminosité et la même saturation de couleur. C' est une méthode très facile. Je l'utilise la plupart du temps. Si vous voulez l'essayer, vous pouvez l'essayer. C' est comme ça que j'ai eu cette troisième couleur. Je ne recommande pas d'utiliser trop de couleurs, mais parfois dans la conception de tableau de bord, vous avez besoin de beaucoup de couleurs, peut-être plus de cinq couleurs. C' est ainsi que vous obtenez plus de couleurs. 49. Outils en ligne pour créer des plans de couleurs: Maintenant, laissez-moi vous montrer rapidement combien d'outils ou quels outils sont utilisés pour la génération de jeux de couleurs dans la conception de l'interface utilisateur. premier outil est le 0to255.com. C' est un outil très pratique. Il génère différentes nuances de n'importe quelle couleur. Par exemple, si je sélectionne cette couleur grise et que je copie sa valeur hexadécimale, je dois coller sa valeur hexadécimale dans cette Pick Color, coller ici, et appuyez sur cette Pick Color, et vous pouvez voir qu'elle a généré toutes les différentes nuances de cette couleur, du blanc au noir. C' est un outil très pratique pour générer des nuances différentes rapidement. Vous pouvez les utiliser d'ici. Si vous voulez choisir une autre couleur, vous pouvez choisir une autre couleur, et la mettre ici, et générer ses nuances aussi. C' est un outil. Ensuite, si vous voulez utiliser des couleurs plates, vous pouvez aller sur ces deux sites, FlatuiPicker.com et FlatuiColor. Dans ce site, choisissez cette valeur hexidécimale ici, peut-être celle-ci, et cliquez simplement sur l'une des couleurs. C' est un très bon site web, mais nous avons des couleurs très limitées. Dans ce site, nous avons beaucoup de couleurs, comme le rose. Si vous cliquez sur le rose, vous verrez différentes nuances de rose comme nos couleurs de conception de l'interface utilisateur plate. Il a beaucoup de variétés. Si vous allez au gris, vous pouvez voir qu'il y a beaucoup de nuances de gris. C' est un très bon outil. Maintenant, si vous voulez parcourir des jeux de couleurs déjà faits, allez sur ce site web, color.adobe.com, et commencez à partir d'ici. Si vous pouvez rechercher du bleu et de l'orange, je peux aller à des couleurs spécifiques comme ça. C' est très pratique quand je sais que j'ai besoin de choisir parmi ces deux couleurs. Vous pouvez obtenir toutes les différentes nuances et schémas de couleurs pour ces deux couleurs. C' est un outil très basique que j'utilise. Un outil similaire à ce Adobe Color est ce coolors.co, et allez dans ce navigateur, et commencer à parcourir ces. Mais le problème ici, c'est la recherche. Ici, nous avons une très bonne option de recherche, et je pense que vous devriez vous en tenir à cet outil Adobe Color CC. C'est très bon. Ensuite, la troisième partie, si vous voulez générer rapidement des jeux de couleurs sur votre propre, puis allez sur ce paletton.com ou utilisez ce Adobe CC Color Create, cliquez dessus et choisissez une couleur de base ici. Si je sélectionne cette couleur comme couleur de base, cette couleur verte, double-cliquez dessus, copiez sa valeur hexadécimale, et collez-la ici dans le générateur de jeux de couleurs Adobe. Vous pouvez voir comment il a généré un jeu de couleurs. Allez dans cette barre d'options de règle de couleur et cliquez sur Analogous, vous pouvez voir qu'il crée différents jeux de couleurs. Je ne veux pas entrer dans des détails techniques différents, mais vous pouvez obtenir autant de couleurs que vous voulez d'ici ; triade monochromatique, gratuite. Si vous aimez n'importe quelle couleur, il suffit de copier sa valeur hexadécimale et de l'utiliser dans Photoshop. Allez, cliquez ici, collez le jeu de couleurs comme ça, et allez dans les nuanciers, cliquez sur la nouvelle nuance, et voici comment je vais ajouter une couleur verte nette à mes nuanciers. Vous pouvez voir maintenant qu'il est ajouté à la dernière couleur. Tout d'abord, placez votre couleur ici, puis ajoutez-la à partir d'ici. C' est ainsi que vous créez des jeux de couleurs et les apportez dans Photoshop. Un autre bon outil pour créer un jeu de couleurs est celui-ci, Paletton, et il fonctionne de la même manière que l'outil de création Photoshop, jeu de couleurs Adobe. Vous devez coller votre couleur de base ici. C' est une boîte bizarre. Ça me permet juste de sélectionner n'importe quelle couleur ici. Je dois appuyer sur retour arrière. Si je sélectionne cette couleur, celle-ci rouge, copiez son code et collez-le ici, et appuyez sur « OK ». Vous pouvez voir qu'il a généré différentes nuances ici. C' est Tetrad. Ensuite, nous en avons peu d'autres ; trois couleurs, deux couleurs. Vous pouvez sélectionner différents jeux de couleurs à partir d'ici. Ce sont quelques outils que j'utilise beaucoup de temps. Parfois, je continue à collecter différents schémas de couleurs et utilise des couleurs de différents schémas de couleurs qui se réunissent bien. Mais pour les débutants et les débutants, je ne recommande pas cette méthode. Utilisez quelques couleurs, et obtenez de bonnes nuances de gris à partir de ce site, et commencez à concevoir de bonnes interfaces utilisateur. 50. Sélectionner des polices et une typographie: Dans cette conférence, nous allons parler de l'appariement des polices, et comment choisir la topographie et les polices pour la conception de votre application web ou mobile. appariement des polices ou la recherche de la topographie parfaite est fondamentalement une compétence très difficile à apprendre. Il faut des années pour maîtriser la compétence. Pour commencer, ou même pour moi, j'utilise ces sites Web pour jumeler des points. Permettez-moi de vous montrer quelques-uns des sites Web et des ressources en ligne que j'utilise. Le premier est ce typegenius.com. Si vous voulez choisir n'importe quelle police, vous pouvez sélectionner ici. Vous pouvez taper plusieurs polices comme, si je sélectionne cette Open Sans, je sélectionne celle-ci, puis cliquez sur « Afficher les correspondances ». Vous pouvez voir ici quelques matchs avec l'Open Sans, Futura PT Condensed. C' est le lien. Il s'agit d'une police Typekit. Ensuite, nous avons cette Open Sans et Minion Pro. Celle-ci est aussi une police Typekit. Ensuite, nous avons cette Open Sans et Museo. Museo est une très grande police, et il peut être acheté, ou même vous pouvez l'utiliser à partir de Typekit. Ensuite, nous avons cette Open Sans et Source Sans Pro. Ce sont les deux polices Google. C' est un site Web, alors nous devrions passer à cette paire de polices. Il est également très beau site Web, et nous pouvons trouver beaucoup de combinaisons de polices d'ici. Vous pouvez voir comme ça, polices Sans-Serif et Serif. Vous pouvez voir ici nous avons Cabine pour le titre et Ancien TT standard pour le corps du texte. Vous pouvez voir qu'il y a beaucoup d'appariement différent. Vous pouvez voir ce sont les deux polices Google Lato et Merriweather et Montseratt et Cardo. Ici vous pouvez voir Cursive et Serif. Les polices cursives sont fondamentalement comme ça, certaines polices peu élégantes comme celles-ci, et Serif est fondamentalement la police avec un peu de fin ou de lignes à la fin de chaque lettre. Ce sont essentiellement des polices Serif et des moyens Sans-Serif sans fin. Si nous allons à ce sans empattement, vous pouvez voir qu'il y a des polices simples comme celles-ci. Ce sont des polices sans empattement. Vous pouvez utiliser ces guides pour jumeler les polices. Ensuite, nous pouvons aller à ce typ.io/libraries/google, et vous pouvez voir ici beaucoup de grandes combinaisons et d'inspiration pour Google. combinaison de polices pour l'appariement. Vous pouvez voir ici qu'il est utilisé, Raleway. Ensuite, dans l'exemple suivant, c'est Proxima Nova et Libre Baskerville et n'importe quoi. C' est une police Google et c'est une police très populaire de Typekit. Ensuite, nous avons quelques autres combinaisons comme ça. Vous pouvez les voir et obtenir l'inspiration et même vous pouvez utiliser ces combinaisons dans vos conceptions. Ensuite, passez à l'outil suivant. C' est un outil très pratique, Web Font Blender. Maintenant, quel est son but, vous pouvez sélectionner l'un de ces titres, lignes ou quoi que ce soit, et vous pouvez choisir la police pour cela. Comme si je pouvais utiliser Lato ici. Je vais utiliser le Lato 900 pour celui-là. Ensuite, je vais utiliser Lato régulier, peut-être pour celui-ci et 300, et je vais utiliser Open Sans pour cette zone. Ouvrez Sans régulier. Maintenant, vous pouvez voir que c'est très bon outil. Il peut également vous donner un code pour ce mélange, ou des options que vous avez configurées, ainsi que les tailles dans ems et autres choses, ce qui est purement vers le côté de la programmation. Maintenant, vous pouvez voir ici nous avons combiné Lato et Open Sans, et ils sont très beaux ensemble. Il s'agit de la combinaison que vous pouvez utiliser, un titre, puis un sous-titre, puis le paragraphe. La plupart du temps, vous n'avez besoin que de trois styles. Même vous pouvez combiner seulement deux de ces comme, titre et le texte du paragraphe. Maintenant, c'est aussi un outil très pratique qui est typewonder.com. Ce qu'il fait, c'est que vous donnez l'URL de n'importe quel site, comme je vais donner mon propre site Web, learnuxid.com, et cliquez sur « Go ». Ensuite, vous pouvez sélectionner n'importe quelle police que vous souhaitez appliquer sur ce site, Live site. Je veux que mon site soit dans cet Arvo. Je vais l'utiliser. Il va montrer l'aperçu de mon site Web en utilisant cette police. Regardez-le. Regardez et voyez, il est là et il n'a pas l'air très bon. Je peux changer la police si je veux, comme celle-ci. Il y a beaucoup d'autres polices si vous passez en dessous de cette ligne. Je vais choisir ce Vollkorn, et je vais l'utiliser. Voyons ce que ça fait. Je pense qu'il s'est déjà appliqué. Nous avons encore quelques articles, quelques outils d'aide et différentes combinaisons que beaucoup de designers ont déjà fait, pour que vous puissiez les trouver. J' inclurai les liens dans les ressources pour tous ces outils et articles que j'ai montrés. Ce sont quelques combinaisons Google. Si vous passez la souris sur eux, vous pouvez voir le lien vers ce style de police. C' est en gros Raleway. Si vous regardez le coin inférieur gauche de mon écran, vous pouvez voir que le lien est à venir. Ceci est également deux polices, qui est fondamentalement Playfair plus afficher la police Google. C' est aussi une autre police Google, Quando. C' est une autre troisième forme. C'est Signika. Il est très difficile de combiner trois polices différentes, même pour les personnes qui utilisent, et essayer de jumeler typographique même depuis des années. Je dirais qu'on s'en tient à deux. Si vous pouvez trouver une très bonne combinaison, qui convient à votre projet, vous pouvez les trouver à partir d'ici, et vous pouvez les utiliser. Vous pouvez voir ici nous avons un autre Sans Source Pro. Il s'agit d'une police unique sans Source Pro, et avec une grande famille. Ce sont tous les outils d'aide que vous pouvez obtenir en ligne. Il y a 100daysoffonts.com et il montre aussi beaucoup de grandes expériences typographiques. La plupart d'entre eux sont des polices Google. Vous pouvez voir Lora et Roboto, et ils vont très bien ensemble. Ce sont des combinaisons de maîtres topographiques très professionnels. Je pense que c'est une compétence très, très unique et très difficile à apprendre. Il faut des années pour maîtriser cette compétence de combinaison typographique. Ensuite, nous avons un autre article que j'aime beaucoup. Voici l'ultime peering des polices Guide de canva.com. J' inclurai tous ces liens dans les ressources. Vous pouvez télécharger le PDF et voir ces articles, ainsi que ces outils. Vous pouvez voir ici, il a une introduction à la topographie comme Cap Height, X-Height, Terminal, Baseline. Ensuite, ils ont différents types de classes de typographie comme Script Serif, Sans Serif, Slab Serif, Alignement, Hiérarchie. Ensuite, il y avait beaucoup de différentes grandes combinaisons. Vous pouvez voir même qu'il montre les tailles ici, comme ceci, 57 PT majuscules, 27 PT italiques. Vous pouvez utiliser toutes ces combinaisons différentes et continuer à lire cet article. Ceci est très excellent article pour les débutants. C' est tout à propos de l'appariement des polices. J' espère que vous vous améliorerez dans la conception et l'application de ces compétences typographiques à vos créations. 51. Utiliser des grilles dans la conception Web: Parlons des grilles et de la façon dont nous concevons selon les grilles. grilles sont fondamentalement différentes colonnes de largeur spécifique et elles ont un peu d'espace entre elles. Vous pouvez voir dans cet exemple que je vous montre ici, c'est un web design, apprentissage, design que j'ai fait pour une entreprise. Vous pouvez voir comment j'ai tout tracé. Permettez-moi de vous montrer comment les utiliser et les bases du système de grille. Normalement dans la conception web ou lorsque vous concevez une application mobile, vous avez vraiment besoin de connaître le système de grille. Il vous aide à aligner et à disposer votre page très bien et il aide beaucoup dans la conception. Voyons comment nous allons concevoir selon les grilles et comment les créer. La première étape est, que sont les grilles et quels sont les espaces à tout ? Ce sont des colonnes, je les montre en gris. Ce sont 12 colonnes. Les grilles ont des colonnes différentes ; 12, 16, 24. plus populaires sont 12 et 16. Les espaces entre chaque colonne, à partir d'ici, notent ces deux points aux deux coins. Ce sont essentiellement des gouttières. On les appelle des gouttières. Ce sont des espaces. Nous pouvons avoir une certaine séparation entre le contenu et les parties de mise en page. Laissez-moi vous montrer un exemple où j'ai utilisé ceci. Si vous vous concentrez sur cette zone, vous pouvez voir que cette vidéo et cette balle points, ils sont séparés par cette gouttière. Vous pouvez voir ici que j'ai laissé ce caniveau. Cette partie prend une, deux, trois, quatre, cinq, six colonnes. Cette partie prend également six colonnes. Quand un développeur essaie de transformer votre conception en quelque chose de codage, il est très facile pour eux de suivre cette colonne ou système dans le processus de développement et de codage. Ils utiliseront six colonnes pour cette colonne et six colonnes pour celle-ci. Les grilles les plus populaires que vous pourriez avoir connues sous le nom de Bootstrap et Foundation, tout cela. C' est la base des systèmes de grille. Si vous regardez ici, ce logo de cette conception de page web, il est contenu dans une, deux, trois colonnes, mais il touche aussi cette quatrième colonne et il est à l'intérieur de la gouttière de la quatrième colonne. Il faudra quatre colonnes fondamentalement. Nous ne pouvons pas dire qu'il ne s'agit que de trois colonnes. Si un élément de conception prend une partie de gouttière, il inclura la colonne suivante. C' est essentiellement, si vous regardez ce numéro de téléphone, vous pouvez voir qu'il prend deux colonnes, mais il prend en fait trois colonnes. Parce que cette icône se trouve dans la gouttière de la colonne suivante, les codeurs vont la coder comme ils prendront trois colonnes pour ce numéro de téléphone. C' est ainsi que nous utilisons les grilles. Maintenant, ces guides à la fin, ils sont plus petits. Ce sont essentiellement des marges. Ils sont normalement utilisés dans la programmation. Lors de la conception, nous ne nous inquiétons pas des marges, mais nous n'obtiendrons rien dans ces marges. Nous ne toucherons que le côté gauche et droit des colonnes ou entre elles. Maintenant, si je cache ça, vous pouvez voir le design réel. Laisse-moi cacher les guides. C' était la conception réelle. Maintenant, vous pouvez voir qu'il peut vraiment regarder bien avec l'aide de guides. Si je les allume, vous pouvez voir cette partie. J' ai utilisé une, deux, trois, quatre, cinq, six, sept, huit colonnes pour cette zone, et une, deux, trois, quatre colonnes pour cette zone. Ici, j'ai utilisé cette colonne pour obtenir plus d'espace ici. C' est un truc. Ne vous limitez pas si vous voyez la colonne ici, la colonne de grille et n'essayez pas de toujours l'utiliser. Vous pourriez le laisser ici pour plus d'espace. Vous pouvez voir qu'il y a beaucoup d'espace entre cette zone de contenu et cette zone de contenu. C' est les bases du système de grille. Ce sont des gouttières entre eux. Ils sont, je suppose 30 pixels. Vous pouvez voir dans le titre ici, marge de 15 pixels et la gouttière est de 30 pixels. Il s'agit de grilles et de la façon de les utiliser. Quelles sont les bases des grilles que nous avons des colonnes, des gouttières et des marges dans la grille des deux côtés, à droite et à gauche. Passons à la prochaine conférence où je vais vous montrer comment créer ces grilles dans Photoshop et en utilisant quelques extensions. Passons à la prochaine conférence. 52. Créer des grilles dans Photoshop: Dans la dernière conférence, nous avons appris sur les grilles et la façon de concevoir à l'aide de grilles, comme nous avons mis en page différentes choses en utilisant différentes tailles de colonnes. Dans cette leçon, je vais vous montrer comment créer différents types et différentes grilles en utilisant Photoshop, laissez-moi d'abord utiliser le système de grille par défaut Photoshop. Maintenant, ce que nous allons utiliser, c'est que nous allons utiliser un document personnalisé taille 1280, ce qui est commun dans la conception web, et la hauteur est 1000, 72, ne gérez pas la couleur de ce document, appuyez sur « OK ». Maintenant, nous avons notre tableau d'art. Maintenant, nous allons utiliser le système de guide par défaut de Photoshop pour créer la grille. Nouvelle mise en page du Guide, et nous allons utiliser 12 colonnes avec les gouttières de 20 pixels, marges si nous en avons vraiment besoin, vous pouvez utiliser des marges ici ou vous pouvez les laisser dehors. Donc je vais utiliser zéro marge supérieure, zéro marge inférieure, gauche et 10 à droite, appuyez sur « Ok », maintenant votre système de grille est prêt. Si vous voulez vraiment l'améliorer, vous pouvez ajouter différents rectangles ici comme ça et les copier et les dupliquer dans la touche alt car cela peut vraiment aider votre conception. En fin de compte, vous allez effacer ces guides, guides bleus. Ce qui restera à la fin, ce seront ces lignes vertes, ces colonnes. Copiez-les comme celui-ci, je vais les sélectionner tous et les fusionner dans un système de grille, et ici nous avons notre système de grille, vous pouvez maintenant effacer vos guides, « Clear Guides ». C' est ainsi que nous concevons une grille, il est de 12 colonnes et avec une gouttière de 20 pixels et une marge de 10 pixels. Donc maintenant, si nous essayons de concevoir quelque chose, nous allons concevoir comme si le logo allait être là. Permettez-moi de changer la couleur, et pour notre exemple, la navigation sera ici comme ça. Donc, c'est comme ça que nous mettons en page les choses, j'utilise deux colonnes pour ce logo et 10 colonnes pour cette navigation, et de même pour d'autres éléments de votre page Web. C' est une façon de créer des grilles, alors nous avons ce plugin GuideGuide, abord c'était gratuit maintenant je l'ai obtenu pour seulement 5$, et je l'aime vraiment, c' est très agréable. Vous pouvez enregistrer les grilles, différentes grilles, et vous pouvez les créer, et vous pouvez enregistrer leurs ensembles. Donc, c'est l'extension du plugin GuideGuide, et je vais utiliser seulement cette 12 colonnes, sont le nombre de colonnes que vous pouvez voir, ils ont différents champs, marges, haut, bas, marges différentes, puis colonnes, lignes. Je ne vais pas entrer dans les détails du système de grille, je vais entrer en détail dans mon prochain cours, qui est sur la conception web très avancée et différentes techniques de conception web. Dans ce cours, je vais parler plus profondément des grilles et verticale et colonne sont les deux grilles. Donc, en ce moment, nous allons rester avec 12 colonnes, et comme nous n'allons pas utiliser cette largeur, nous ne connaissons pas la largeur, donc nous utilisons seulement 12 colonnes. Faisons 16 colonnes cette fois. Je vais avoir l'espace de 15 pixels ici, et je vais appuyer sur « Ajouter des guides ». Maintenant, nous avons un système de grille de 16 colonnes avec cet écart de 15 pixels, et je suppose que nous pouvons le sauver, « Save Grid ». Nous allons le sauver 16 colonne, 15 gouttière pixel, « Save Grid ». Vous pouvez voir ici dans mon guide Saved vous pouvez voir 16 colonnes, 15 pixels gouttière, donc c'est un outil très pratique que vous pouvez créer et enregistrer beaucoup de différents systèmes de grille. Maintenant, vous pouvez voir que j'ai enregistré beaucoup de guides différents que j'ai créés, sorte que vous pouvez créer n'importe quel type de guide et l'enregistrer ici. Il y a peu d'autres utilisations de ce plugin qui sont bordure gauche, point médian, bordure droite, guides clairs, vous pouvez facilement effacer les guides avec ce bouton ici. Laissez-moi vous montrer les autres choses que nous pouvons faire avec ce plugin, laissez-moi simplement sélectionner ce rectangle et obtenir la sélection autour de lui, alors nous pouvons facilement avoir des guides : milieu, gauche, droite, haut, milieu, bas, donc c'est une autre utilisation de ce plugin, et c'est un très beau plugin, GuideGuide. Ce sont deux façons de créer des guides et grilles dans Photoshop à l'aide de Photoshop par défaut, nouveau guide et d'un nouveau système de mise en page de guide, et vous pouvez également utiliser ce plugin GuideGuide. Tout était sur la façon de créer des guides et des grilles dans Photoshop, et passons à de nouvelles conférences géniales. 53. Challange à fond doux: Bonjour tout le monde. C' est mon premier défi pour tous mes étudiants. Fondamentalement, vous devez créer un bouton similaire à celui-ci et je vais vous donner quelques conseils, ce qui est fondamentalement j'ai utilisé deux ombres portées et un coup. Donc un effet de trait et deux ombres portées. Maintenant, que le défi commence. 54. Solution de conception de boutons d'ombres doubles: C' est la solution pour relever le défi. Je vais refaire ce bouton devant vous pour que vous puissiez apprendre comment j'ai utilisé les ombres portées doubles, et cet effet de trait, et comment j'ai fait ce bouton. Commençons. Tout d'abord, nous allons utiliser un outil de forme arrondi rectangle. On peut utiliser le rayon à quelque chose comme huit peut-être, et juste dessiner un rectangle ici, c'est suffisant. Maintenant, je vais choisir un peu de couleur grisâtre ou quelque chose de plus proche du bleu-gris, comme celui-ci. Maintenant, notre couche de base est terminée. J' ai coupé quelque chose ici, donc c'est fondamentalement un rectangle. Obtenez un rectangle ici, et nous allons créer un rectangle comme celui-ci, et nous allons changer sa couleur pour quelque chose. Il s'agit essentiellement de la teinte, de la saturation et de la luminosité. Je les utilise normalement pour obtenir différentes nuances de couleurs, donc je vais réduire la luminosité qui est la partie lumineuse de notre couleur, ou peut-être que nous pouvons partir de, oui, comme ça. Maintenant, je vais utiliser le masque d'écrêtage, alt et cliquer entre ces deux calques. Maintenant, nous avons notre masque de coupure comme ça. Ce bouton était d'une autre couleur, je crée ça dans un peu obsidienne et médicale. Vous avez peut-être vu cette couleur dans les entreprises médicales et médicales. Maintenant, fondamentalement, notre base est complète, maintenant je vais ajouter quelques styles. C' était notre conteneur, pour la base de conteneurs, nous pouvons le nommer. Vous pouvez cliquer ici sur la petite icône Fx et ajouter goutte, à partir des ombres portées. Cette première ombre portée est essentiellement l'opacité est de 20 pour cent. Si j'essaie d'augmenter l'opacité, vous pouvez voir que notre ombre s'assombrit. Donc nous allons avoir quelque chose comme ça, 24 ou peut-être 20, ça va. Ensuite, la distance est de 21 pixels. Si je réduit la distance, vous pouvez voir que nous avons des ombres sur le dessus de ce calque que nous ne voulons pas vraiment. Nous ne voulons que l'ombre en bas. Je vais augmenter cette distance jusqu'à ce que j' aie le sentiment qu'elle a l'air bien, 15 sera bon. Maintenant, je vais ajouter une autre ombre, cliquez ici. Fondamentalement, ce que j'ai fait ici, c'est que j'ai ajouté une autre ombre qui était un peu plus proche de la couche, et un peu plus opaque que transparente. Je vais augmenter un peu son opacité. On peut aussi augmenter la distance. Si je cache ce calque, vous pouvez voir ce qui arrive à notre ombre. Maintenant, il a disparu, et maintenant il est allumé. C' est essentiellement l'effet que nous recherchons. Nous ajoutons essentiellement deux ombres portées ici. L' un est un peu plus sombre et plus proche du calque, autre est un peu plus léger et il a une bonne portée autour du calque de forme, donc c'est essentiellement une ombre large. Vous pouvez voir la taille est de 25 et la distance est de 15 pour cent. C' est ainsi que nous avons ajouté ces ombres, et réduisons son opacité à 25, réduisons la distance un peu plus. Maintenant, c'est un peu doux. Peut-être cinq parce qu'on a de l'ombre en haut, et on va réduire ça. Faisons le 10. Maintenant, ça ressemble presque à la même chose. Vous pouvez également changer cette couleur ici pour l'ombre. Nous pouvons avoir un gris clair, vous pouvez voir qu'il change juste son effet. Si vous ne voulez pas d'ombre très dure, vous pouvez utiliser une autre couleur comme ça. Fondamentalement, il s'agit de contrôler cette opacité, cette distance et cette taille. Si nous utilisons cette propagation, vous pouvez voir qu'elle rend fondamentalement cette ombre un peu solide, sorte que nous ne voulons vraiment pas. Nous n'allons pas utiliser la propagation maintenant. Appuyez sur « Ok » et maintenant il ne nous reste qu'une seule chose qui est fondamentalement le coup. Je vais cliquer sur ces effets et je vais ajouter un coup. Je vais choisir la couleur du trait de cette couleur, ou je peux obtenir une couleur un peu plus foncée en réduisant la luminosité à 85 pour cent, peut-être 90 pour cent est assez bon. 90 pour cent a l'air bien. Maintenant, j'ai créé cet effet d'ombre douce, maintenant nous allons ajouter du texte ici. Fondamentalement ce que j'ai fait est que j'ai utilisé ce plugin génial de police pour obtenir cette icône ici. Nous pouvons utiliser n'importe quelle icône comme peut-être cette icône d'ambulance fera l'affaire. Maintenant, vous pouvez voir dès que j'ai ajouté ceci entre ces deux couches, notre masque d'écrêtage a disparu, donc c'est pour cela que cela se produit. Je vais faire glisser cette icône en haut, je vais créer à nouveau le masque d'écrêtage. Je vais à « Contrôle D » pour transformer, et je vais appuyer sur « Maj » et « Alt » pour augmenter la taille, je maintiens la touche Maj et Alt. Je suppose que c'est assez bon. Je vais le déplacer au centre. Maintenant, nous pouvons aussi choisir un peu d'une couleur terne parce qu' elle devient très nette à nos yeux, 50 pour cent comme ça. Je choisis juste cette couleur et je réduit la luminosité à 50 pour cent ou peut-être plus, nous pouvons aller à 30 pour cent comme ça ou peut-être 25 pour cent. Je suppose que 30 pour cent était assez bon. Maintenant, la partie icône est terminée, je vais maintenant ajouter du texte ici. J' utilise ce style de police ouvert sans régulier, régulier, et j'utilise cette taille de police de 36 pixels. Vous pouvez appuyer sur « Maj » pour qu'il soit juste à l'intérieur de cette boîte. Appuyez sur « Shift » et cliquez, et nous allons appeler une ambulance, l'ambulance est bonne. Fondamentalement, notre texte est un peu plus long donc nous pouvons augmenter la taille de ce conteneur de base, « Control D » et je vais juste faire glisser ce coin ici comme ça. Je vais cliquer sur celui-ci, « Appelle une ambulance. » Maintenant, notre problème de base est l'alignement. Utilisons quelques guides pour les aligner. Je vais cliquer sur « Contrôle et deux-points » pour faire ressortir mes guides, je vais supprimer ceci. Je vais cliquer sur celui-ci, cliquez sur « Contrôle ». Je n'utilise pas la sélection automatique, donc je contrôle en cliquant sur n'importe quel calque pour les sélectionner. Je vais contrôler le clic sur ce, et je vais faire glisser le calque comme ça. Maintenant, nous allons essentiellement mettre quelques guides pour aligner fondamentalement notre icône et notre texte au milieu de ce bouton. J' en ai mis un ici, et un dont j'ai besoin ici, comme ça. Utilisons notre plug-in ici qui était QuickGuide, et je vais créer les guides tout autour de ce bouton rapidement. Maintenant, il est fondamentalement arriver à l'ombre aussi, alors désactivez ces effets et créez ceux-ci. Maintenant, ils sont bons. Je tourne sur ces effets. Nous avons ces deux parties ici, je vais appuyer sur « M » ou essentiellement sur cet outil de sélection. Je vais sélectionner cet outil de sélection rectangulaire, et nous allons faire une sélection entre cela. Nous avons une sélection et ensuite nous allons cliquer sur ce Appeler une ambulance. Maintenant, nous avons deux objets fondamentalement à aligner. Nous allons aligner cet appel d'ambulance selon cette sélection. Je vais appuyer sur « V » et cliquer sur cette icône du milieu, maintenant il est aligné, aussi celui-ci. Nous allons créer une autre sélection ici, et nous allons sélectionner cette icône de fa-ambulance et nous allons l'aligner au milieu. Je suppose que c'est presque au milieu, je vais voir. Non, ce n'est pas au milieu. Je suppose que nous avons une directive qui n'est pas exacte, celle -ci, je suppose. Maintenant, nous sommes prêts à y aller. Je peux sélectionner comme ça et appuyer sur « V » et aligner au milieu. Parfois, même si vous l'alignez selon vos mathématiques, il ne semble pas centralisé à vos yeux ou à vos yeux humains. Pour le rendre visuellement centré, vous pouvez l'ajuster comme, je suppose que je dois le déplacer d'un pixel ou peut-être deux pixels ici parce que cette forme est fondamentalement différente. Maintenant, je suppose qu'il a l'air au milieu, presque au milieu, et nous avons terminé cet exercice d'ombre douce. J' espère que vous avez appris quelque chose de nouveau d'ici. Passons à la prochaine conférence. 55. Conception de touches 3D Challange: Ok les gars, voici un autre défi pour vous. C' est aussi un bouton mais c'est un bouton 3D. Essayez de créer quelque chose de similaire à ceci. Je vais vous donner quelques conseils ici. Celle-ci est de l'ombre et vous pouvez voir une ombre très légère et subtile ici. J' ai utilisé deux ombres. Il y a aussi une couche très mince de trait à l'intérieur du trait et c'est juste une ligne que vous pouvez utiliser à partir d'ici, Outil de ligne. Juste une ligne avec la couleur, qui est un peu plus sombre que ce fond. Ce sont tous les conseils et j'espère que vous pouvez créer quelque chose de similaire à cela. Je vais nous poster une solution bientôt dans une autre vidéo. Ainsi, vous pouvez facilement créer un tel type de modèles. J' espère que vous avez apprécié ce défi et laissez-moi voir ce que vous pouvez accomplir et me montrer vos liens et votre discussion et je suppose que c'est tout à propos de ce défi. 56. Effet pressé dans Photoshop: Bonjour tout le monde. Aujourd'hui, nous allons créer cet effet pressé. Il est très important dans toutes les conceptions de l'interface utilisateur de montrer qu'il y a des états de boutons pressés, et il est utilisé dans beaucoup d'endroits. Vous devriez toujours maîtriser cette technique. Créons ça rapidement. Ouvrez un nouveau fichier. Je vais ouvrir celui-ci, Alt, supprimer pour remplir la toile avec la couleur de premier plan. Nous allons utiliser cet outil de rectangle arrondi pour dessiner un rectangle arrondi comme ça. Je vais en créer un peu plus grand pour que vous puissiez le voir facilement. J' ai créé celui-ci. Changeons la couleur de fond. J' utilise un champ de couleur unie pour l'arrière-plan. Change-le pour quelque chose comme celui-ci. Maintenant, nous avons créé ce rectangle arrondi. Créons des guides autour de ça comme ça. Maintenant, dessinez un autre rectangle arrondi du milieu à cette section. Cela va être pressé. Dans les propriétés, décochez celle-ci, et nous allons supprimer la gauche à arrondi pour celle-ci. Nous sommes prêts à y aller. Changons ce bouton à quelque chose comme ça, peut-être qu'un look bleu plus net aura l'air bien. Maintenant, notre structure de base est prête. Créons des effets autour de lui et mettons des styles de calque dessus. Mettons d'abord du texte dessus. Le texte devrait être quelque chose. Je vais montrer une autre technique. Je vais, en sélectionnant le texte en gras et en changeant leur taille simultanément comme ça. C' est une autre technique, beaucoup de designers ne le savent pas. Nous allons les aligner à nouveau sur nos guides comme ça. Alt Control H, il y a quelque chose d'étrange. Maintenant, voici celui-là, désolé. Sélectionnez ceci et nous allons à nouveau l'aligner au milieu. C' est ça. Maintenant, nous allons changer ce pressé à la couleur blanche juste pour s'assurer qu'il a l'air bien. Retirez les guides, masquez les guides. Nous allons d'abord appliquer des styles à cette couche interne. C' est le calque à l'intérieur, nous allons appliquer des styles de calque dans une ombre. Maintenant, dans l'ombre interne, assurez-vous que vous avez sélectionné multiplier et que la couleur est noire. N' utilisez pas d'autre couleur. Vous pouvez également utiliser une teinte plus foncée pour ce bleu, mais je suppose que le noir est meilleur. Ensuite, utilisez cette opacité. Si vous voulez plus d'effet sombre, vous pouvez partir d'ici comme ça. On devrait peut-être le fixer à 50 pour cent. La distance, c'est à vous de décider, vous pouvez choisir n'importe quelle distance, mais n'allez pas trop loin car cela changera votre effet. Il ne semblera pas parfois pressé. Gardez-le court comme cinq ou trois pixels est plus que suffisant. La taille floue devrait être un peu plus élevée que cette taille. Rends-le neuf ou dix ou quelque chose comme ça plus près de celui-là. Nous n'avons pas besoin d'autres choses, la lumière devrait être de l'angle de 90 degrés. Appuyez sur « OK », et c'est presque à mi-chemin de notre effet pressé. Maintenant, créons une autre chose. Maintenant, quand la lumière tombe d'ici, elle devrait avoir un peu de brillance sur cette zone. Pour créer cela, nous allons sélectionner cette couche, l'autre qui était le conteneur en fait, et nous allons appliquer quelques styles dessus. D' abord, nous allons appliquer un AVC. Gardez à l'esprit que l'AVC devrait être plus sombre que cet arrière-plan. Je vais sélectionner cet arrière-plan, et je vais réduire la luminosité à 65 pour cent. Maintenant, notre course est terminée. Allons maintenant à l'ombre portée. Maintenant, nous n'avons pas besoin de cette lumière globale parce que nous allons l'utiliser pour de l'autre côté. 90 degrés, oui, nous allons l'utiliser en haut, et nous allons utiliser la couleur blanche, et enlever ce multiplier, nous allons l'utiliser normalement. Maintenant, vous pouvez voir comment ça fait briller ici sur cette zone. Ensuite, nous allons le réduire parce qu'il obtient un très grand éclat. Un pour celui-ci et deux pour celui-ci. Je suppose que c'est assez bon. Un pour la distance et deux pour la taille floue. C' est essentiellement comme ça que nous allons créer cette lumière pressée ici. Ce truc avait l'air vraiment pressé. Maintenant, nous avons presque fini avec cet effet. Laissez-moi vous montrer en zoomant, vous pouvez voir comment cela fonctionne. Nous montrons une ligne de course très mince autour d'elle et ensuite nous montrons de l'éclat ici, et dans une ombre par ici. Si vous souhaitez réduire l'ombre interne, vous pouvez la réduire à trois pixels. Je vais zoomer. Vous pouvez voir comment fonctionne cet effet pressé. Il s'agit de créer ces effets pressés et les boutons pressés et les états pressés pour différents objets. Il a beaucoup d'utilisation de l'interface utilisateur. Rendez-vous à la prochaine conférence. 57. Conception Header moderne Partie 1: Aujourd'hui, nous allons concevoir ces en-têtes modernes. Commençons. Je vais ouvrir un nouveau fichier, ou vous pouvez ouvrir un nouveau tableau d'art. Je vais définir la largeur et la hauteur au maximum, 1920, et définir la hauteur à quelque chose comme 700 pixels. Voici notre tableau d'art. Maintenant, je vais utiliser un fichier gratuit, que j'ai téléchargé à partir de ce site, unsplash.com. Vous pouvez également télécharger beaucoup d'images gratuites à partir d'ici. Maintenant, laissez-moi vous montrer les images que j'ai déjà téléchargées. L' image est celle-ci, 6H. Maintenant, je vais le faire glisser dans ma toile, comme ça. Maintenant, pour contenir cette image, j'ai besoin de quelques conteneurs, donc nous allons utiliser un conteneur ici. Dessinons notre conteneur avec cet outil rectangle. Un seul clic sur cette planche d'art ici, entrez la largeur 1920 et la hauteur 700. Nous allons utiliser le conteneur pleine taille, comme ça. Appuyez sur « V » et déplacez ce conteneur ici comme ça. Nommez le conteneur dans le panneau Calques. Maintenant, déplacez cette image au-dessus ce conteneur parce que nous allons la couper à l'intérieur de ce conteneur. Laisse-moi changer sa couleur pour qu'elle soit visible. Maintenant, sélectionnez les calques ci-dessus, qui est fondamentalement le calque d'image et essayez de le redimensionner comme ça. C' est ça. Maintenant, nous allons couper cette image pour pouvoir la déplacer dans ce conteneur. Cliquez sur la touche « Alt » ou « Option » si vous êtes sur un Mac. Si vous êtes sur un PC, cliquez sur « Alt » et appuyez entre ces deux, cliquez une fois. Maintenant celle-ci est coupée. Je peux le déplacer ici comme ça. Si nous avons vraiment besoin de l'ajuster, nous pourrions le déplacer comme ça, vers le haut ou vers le bas. Maintenant, la deuxième étape est que nous allons utiliser notre superposition dégradée pour créer une zone sombre ou blanche afin que notre texte s'affiche facilement et soit lisible sur notre en-tête moderne. Faisons ça. Cliquez sur le conteneur et cliquez sur l'icône Fx. Nous allons utiliser la superposition dégradée. Gardez à l'esprit que nous allons multiplier le gradient. Donc, il va ajouter certaines de ses couleurs dans l'arrière-plan précédent, qui est déjà ici. Maintenant, définissez le mode de fusion pour multiplier. En arrivant au dégradé, cliquez dessus. Maintenant, ce que j'utilise est essentiellement une couleur grise ou gris foncé proche du noir, et j'utilise son opacité à 100 pour cent. l'autre côté, j'utilise la couleur blanche et l'opacité est nulle. Fondamentalement, c'est un dégradé noir à transparent. C' est ce que j'avais vraiment besoin de te montrer. Maintenant ce que cela fait fondamentalement, il va créer quelques zones ici pour écrire facilement le texte ici. Maintenant, ce sont les paramètres. Gardez l'angle à 90 et le style à linéaire. C' est ça. Nous allons appliquer ce style de calque, qui est la superposition de dégradé. Maintenant, cette superposition de dégradé est très populaire. Beaucoup de designers l'utilisent la plupart du temps. C' est une technique très pratique lorsque vous devez créer des portions ou l'en-tête où vous voulez écrire le texte. Parfois, le texte peut ne pas être visible ou ne peut pas être visible ou lisible en raison de la couleur d'arrière-plan. Nous utilisons donc des superpositions de dégradé pour accomplir cette tâche. Choisissons la typographie. J' utilise la police en gras Montserrat et Source Sans Pro pour cet exercice. Maintenant, nous allons sélectionner le type Mons ici. M-O-N, voyons où il est. Voilà, Montserrat audacieux. Maintenant, je vais traîner ici. C' est un autre problème. Appuyez sur « Maj » et cliquez ici pour sortir de ce problème de Photoshop et taper à l'intérieur des limites du calque. Passons à la voie du succès. Vous ne pouvez pas voir le texte car le calque se trouve derrière l'image. Déplaçons l'image vers le haut et changeons sa couleur pour un noir plus foncé, un peu comme ça. Permettez-moi de voir les textes que j'ai vraiment utilisés sur mon dossier d'exercice, qui était sur la route du succès. C' était voler sur la route du succès. Pardonnez ma mémoire, je suis une personne très courte. J' oublie vraiment beaucoup de choses. Volez sur la route du succès. Maintenant, rendons ça régulier et nous allons utiliser l'alignement du milieu. Maintenant, déplacez-le au centre de l'image. Contrôlez A et Control Alt et H pour horizontal, c'était notre touche de raccourci personnalisée, alors n'oubliez pas. Maintenant, nous allons définir certaines des tailles. C' est une couche factice. Double-cliquez et voir quelle taille va nous aider ici. Je pense que 48 pixels est plus que suffisant. Si on a besoin de changer la hauteur de la ligne, on peut la changer ici comme ça. Je suppose que 78 a l'air parfait. Maintenant, créez un cadre englobant autour d'elle comme nous l'avons dans notre fichier d'exercice, créez quelque chose comme ça. Juste un rectangle par ici. Maintenant, nous allons appliquer quelques styles, ce qui est essentiellement un trait à ce rectangle. Laissez juste le trait à quelque chose comme cinq ou peut-être huit pixels. La position doit être à l'extérieur, pas à l'intérieur, car si nous définissons l'extérieur, il montre un rectangle quelque peu arrondi. Nous n'avons pas besoin de rectangle arrondi pour l'instant, nous avons besoin d'un rectangle parfait avec des bords. Maintenant, nous avons mis en place ça. Maintenant, nous allons aller à ce remplissage et le réduire à zéro. Maintenant, nous avons notre rectangle bordé transparent par ici. 58. Conception Header moderne partie 2: C' est tout, et maintenant nous allons utiliser une couleur de base de plus. Vous pouvez voir notre bouton principal appel à l'action. Laisse-moi dessiner un bouton ici comme ça. On va mettre sa couleur au jaune. Rendons ce jaune un peu plus clair en passant dans cette zone ici. Un peu comme ça. C' est à propos de ça. Maintenant, ajoutons un peu d'ombre à ce modèle, Ombre portée, et utilisons ces paramètres. Multipliez, 35 pour cent d'opacité, distance trois et taille sept pour cent. Notre flou d'ombre est étalé sur sept pixels autour du bas et la distance est de trois pixels. Si vous voulez le réduire, vous pouvez le réduire comme cinq ou quelque chose comme ça. Maintenant que l'ombre est terminée, tapons quelque chose dessus. Obtenez du succès maintenant. Nous allons réduire cette taille de police. Nous allons le réduire en utilisant notre police ici, ce qui est plus facile et plus rapide que d'utiliser la touche de raccourci. J' ai défini sa taille à 24 pixels, et nous sommes prêts à y aller maintenant. Peut-être qu'on peut le rendre plus sombre, noir. Maintenant, sélectionnez ces deux calques et Control G, regroupez-les et créez un bouton. Nous nommons toutes les couches. Renommez-le en bordure, quelque chose comme ça. C' est tout pour cette partie. Maintenant, je vais passer à la partie suivante qui était ici et ici. C' est essentiellement, nous allons utiliser la couleur blanche ici. Peut-être plein blanc ou quelque chose comme ça dans une couleur grisâtre blanc. Je vais utiliser la police qui est Source Sans Pro Regular, je suppose, peut-être Light. Rejoignez le succès de 14 532 autres idiots comme vous. C' est une bonne ligne pour rejoindre la communauté. Maintenant, une chose que nous avons manquée au début, qui est essentiellement d'obtenir nos marges, l'espace autour de notre design. Je vais rapidement dessiner ça. Pour cela, cliquez sur « Contrôle ». Cliquez sur le conteneur et cliquez ici, « QuickGuide », cliquez au milieu, pour créer des guides autour d'elle. Ensuite, nous allons utiliser Griddify et aller à Spacing. Je vais utiliser 60 pixels autour de mon design comme ça. Je vais changer la direction en haut et en bas comme ça. C' est essentiellement pour mettre votre design en ligne. Maintenant, je vais déplacer mon texte en fonction de ceux-ci. Vous pouvez voir comment j'ai utilisé ce Griddify et ces deux plug-ins à mon design, Control J et copiez les mêmes textes ici et déplacez-le ici, comme ça. Maintenant, nous allons ajouter une photo ici qui était quelqu'un comme ça, lire la dernière histoire du succès de John. Reformulons-le d'abord. Lisons l' histoire de John sur notre plateforme. Maintenant, ça a l'air bien. Pour l'image, nous allons utiliser un site Web qui s'appelle UI Faces. Je suppose qu'il y a le nom, uifaces.com. Accédez à ce site Web et utilisez une image d'ici. Utilisons celui-ci. J' ai utilisé celui-ci. Vous pouvez utiliser n'importe quel autre. Pouvez-vous revenir en arrière et faire glisser cette image dans Photoshop comme ça. On va le déplacer ici. Maintenant, pour contenir cette image, nous avons également besoin d'un conteneur Eclipse Tool ou Eclipse. Faites glisser ça comme ça et nous allons garder ça dans cette éclipse. Rien d'autre. Nous avons juste besoin d'ajuster notre éclipse un peu plus grande. Ajustez cette image. Encore un pourboire. Créez un objet intelligent à partir de cette image comme ça. J' ai appuyé sur Control Alt F5 pour convertir cette image en un objet intelligent. Rendons-le un peu plus court ou plus petit. Pas plus court, peut-être que cette personne pourrait se mettre en colère, pour se raccourcir. Peut-être que comme ça, j'appuie sur Shift et Alt avec, comme ça. Maintenant, nous allons l'aligner au milieu, donc regroupez-les ensemble et créez un groupe d'images. Je vais l'aligner au milieu comme ça. Cachons les couches Contrôle des deux-points. Maintenant, nous avons ici le problème que notre image a moins d'espace dans ces domaines. Allons à ce point. Réduisez cela un peu. Déplacez votre bouton un peu vers le haut, comme ça. De plus, réduisez votre contour à cinq pixels et la couleur à un gris plus foncé plutôt qu'à un gris bleuâtre. Réduisez cette hauteur de bouton, ce qui me semble un peu bizarre. Fais-le 85 comme ça. En outre, nous allons voir si les bords doivent être arrondis comme ça. Ouais, quatre pixels ronds dans vos propriétés. Définissez ceci pour le bouton. Je suppose que c'est plus comme ce qu'on a conçu. Si vous avez vraiment besoin de voir à quoi ressemble notre design, vous pouvez voir que j'ai laissé des espaces identiques ou similaires autour de mon design, qui s'appelle marges. Il s'agit de 60 pixels, 60 pixels, 60 pixels et 60 pixels. Déplaçons juste cette bordure et le bouton un peu à l'intérieur de notre zone de 60 pixels comme ça. Je suppose que c'est encore un peu plus large pour moi. Rendons le plus court et déplacons le bouton un peu vers le haut comme ça. Dans la prochaine leçon, nous allons faire la prochaine variation de ce design moderne. Rendez-vous à la prochaine conférence. 59. Variation de conception d'en-tête moderne: Maintenant, nous allons créer une variation de cet en-tête avec bouton arrondi ici. Commençons par enlever cette bordure d'abord. Nous allons le supprimer. Donc, appuyez sur « Supprimer » sur votre clavier en sélectionnant ce calque et sélectionnez celui-ci, et nous allons le faire bouton arrondi. Utilisez un menu comme 30 pixels ici. Maintenant, peut-être plus de 30, traînez-le comme ça. Cinquante pixels suffiront. Il est réglé sur 42,5 et il est arrondi en ce moment. Maintenant, d'abord travailler sur ce bouton. Nous allons appliquer des styles comme celui-ci, ombre intérieure. Nous pouvons accomplir le look de bouton 3D avec l'ombre intérieure et l'ombre portée. Je vais utiliser l'ombre intérieure maintenant. Décochez cette lumière globale. Déplacez la lumière vers le bas moins 90 et la taille à zéro. Vous pouvez voir qu'il est déjà en forme de bouton 3D, sorte que la distance à cinq comme ça. Maintenant, nous allons utiliser un peu de couleur, peut-être dans la nuance orange, peut-être par ici, un peu plus sombre. Je suppose que c'est bien. Déplacez-le à 40 pour cent. Maintenant, vous pouvez voir comment j'ai utilisé l'ombre intérieure pour créer un bouton de recherche 3D. C' est une technique très pratique, gardez à l'esprit. Maintenant, je vais aligner le texte à l'intérieur du milieu. Maintenant, si vous voyez, j'ai aligné le texte au milieu horizontalement et verticalement, mais le problème est nos effets 3D. Nous allons déplacer le texte au-dessus, comme ça, et peut-être changer sa couleur en un peu grisâtre, comme ça. Peut-être que nous pouvons augmenter la taille du bouton, appuyez sur « Maj » et ajouter comme ça. Ça a l'air mieux maintenant. Nous pouvons également changer l'espacement entre les lettres à zéro, rendre un peu moins large. C' est essentiellement l'espacement entre les lettres. Vous pouvez voir si je le fais glisser ici et le ramène à zéro. C' est ça. Maintenant, nous allons déplacer ce calque de texte. Allons à nouveau nos guides. Déplacez ce texte moyen ici en haut, comme ça, ou peut-être un peu plus bas que ça. Changeons ce début ou fondamentalement la hauteur de la ligne. Il a l'air bien, 62 peut être assez bon. Non, 66 c'était mieux. Maintenant, je vais ajouter une ligne de texte ici qui, nous aidons les gens à façonner leurs porteurs. Supprimons ceci pour l'instant et créez un calque de paragraphe de texte en le faisant glisser comme ça. Ce serait plus facile à contrôler. Nous façonnons le destin des gens en modifiant leur ADN et d'autres choses connexes. Maintenant, changez sa taille à 18. Non, 18, c'est un peu plus petit, 24 ira bien, je suppose. Maintenant, nous devons changer sa couleur en gris un peu plus bas, donc il semble un peu plus engageant et un peu moins important. On peut aussi utiliser du texte blanc ici, je suppose que non. Nous ne pouvons pas utiliser de texte blanc qui a l'air horrible. Tout d'abord, nous allons changer la hauteur de la ligne. Nous avons besoin de quelque chose de similaire à ça, 32 pixel est bon. Déplacez-le un peu plus au milieu, comme ça. Changez sa police en Source Sans Pro Regular, comme ça, et nous déplaçons votre carrière vers le haut. C' est une introduction en deux lignes sur votre site. Maintenant, vous pouvez gérer les couleurs d'ici, comme ça, ou peut-être d'ici, ou d'ici. Vous pouvez voir comment j'utilise l'image pour obtenir des tons de couleur à utiliser dans mon design. Ils ont l'air vraiment sympa si vous utilisez quelque chose de ce fond. C' est une autre astuce, peut-être que cette couleur a l'air bien. Centrez-le à l'intérieur de notre Canvas. Appuyez sur « Contrôle A », « Contrôle, Alt, H », et c'est tout. Appuyez sur « Contrôle D. » Maintenant, je vois un peu de problèmes dans mon espacement. Déplaçons un peu vers le haut, 52 et rendons tout cela audacieux. J' ai appuyé sur « Control, Alt, Z » pour reculer. J' ai besoin que ça soit comme ça. Maintenant réduisez-le à 62, et déplacez-le un peu vers le bas. Retirez vos frontières, et nous avons presque accompli notre tâche. Il suffit de déplacer le bouton un peu vers le bas. Déplacez aussi ça un peu vers le bas comme ça. Voyons combien de pixels nous sommes loin de ce sommet, presque 1, 2, 3, 4, 5. Ils sont assez bons, 1, 2, 3, 4 et 5. Nous avons presque de l'espace, et si nous avons vraiment besoin de déplacer cela un peu vers le bas, nous devrions tout déplacer comme ça. Déplacez ce texte un peu vers le bas comme ça. Je pense que ça a l'air bien comme ça. Maintenant, nous avons créé notre deuxième en-tête moderne, et nous avons discuté de nouvelles techniques comme obtenir la couleur de votre image d'arrière-plan et utiliser l'ombre intérieure pour créer ce bouton 3D, je suppose. Je suppose que vous avez vraiment apprécié cette conférence. Beaucoup d'étudiants attendaient celui-là. Je vais faire beaucoup à l'avenir. Passons aux prochaines conférences. 60. Effets de superposition des couleurs pour la zone du héros: Dans cette leçon, nous allons créer cet en-tête moderne impressionnant. Un autre, mais cela va être avec une autre technique qui est essentiellement la superposition de couleur. Nous allons utiliser la couche de réglage de la superposition de couleur pour créer cet effet impressionnant. Commençons à créer cet en-tête. Ouvrez un nouveau fichier. Je vais utiliser ce plan de travail Web le plus commun utilisé. Je vais utiliser la taille de 700 pour ça. Appuyez sur « OK ». Maintenant, nous avons le tableau d'art. Maintenant, nous allons créer un autre calque, la taille de notre plan de travail pour notre conteneur pour l'image et l'arrière-plan de l'en-tête. Nous avons créé celui-ci. Faisons la taille de notre toile comme ça. Maintenant, j'ai utilisé ce site appelé picjumbo.com pour les images gratuites. Vous pouvez l'utiliser et télécharger n'importe quelle image gratuite à partir d'ici pour l'utiliser dans cet exercice. J' ai déjà téléchargé l'un d'entre eux, qui est celui-ci. Donc je vais le traîner ici dans mon Photoshop, comme ça. Je vais l'étendre un peu pour aimer ça. Je vais le glisser vers le bas et nous allons le clipser à l'intérieur de notre conteneur. Voyons voir, nommez-le conteneur et faites sa couleur au blanc. Ce que nous allons faire, c'est que nous allons superposer une autre couleur sur cet arrière-plan pour créer cet effet. Nous allons donc utiliser la superposition de couleur sur ce conteneur. Vous pouvez l'utiliser d'ici. Accédez à ces calques de réglage et sélectionnez Couleur unie. Appuyez sur « OK ». Nous allons utiliser un effet comme peut-être Multiplier, Normal et changer l'opacité à 90 pour cent. C' est votre propre choix. Vous pouvez utiliser n'importe qui, n'importe quelle opacité ici. Cliquez sur n'importe quelle couleur sombre comme ça. C' est ainsi que nous créons cet effet. On peut baisser plus. Quatre-vingt pour cent est assez bon. Nous pouvons également changer la couleur d'ici à une nuance bleue un peu plus foncée. Maintenant, notre expérience est terminée. Nous pouvons maintenant aller chercher un fichier de logo ici et quelques autres choses. J' ai utilisé deux polices typographie. L' un est Work Sans Regular, il y a aussi Google Font, autre est Montserrat Bold. Nous allons écrire notre titre ici. Écrivons le titre ici. Laissez-moi voir ce que j'ai écrit sur le design original, Apprenez à créer des prototypes de papier. Laissez-moi le reformuler, Apprenez à créer, puis dans la prochaine, je vais le dupliquer, Paper Prototypes. Sur les prototypes papier, j'utilise Montserrat Bold. Faisons en taille 64 et peut-être 48. Quarante huit est assez bon et passons simplement cette taille à 32 et 48. Je vais les aligner les uns avec les autres, les sélectionnant les deux, en les déplaçant. Encore une chose que j'ai besoin d'obtenir des marges sur le côté gauche et droit. Donc, je vais utiliser Griddify 130 pixels des deux côtés comme ça. Maintenant, Contrôle D pour désélectionner, et je vais les aligner avec cette ligne. Je vais copier le même texte ici, que j'ai utilisé dans l'image originale. Maintenant, je vais à nouveau sélectionner du texte et je vais le faire glisser comme ça et le coller ici. Donc, c'est Montserrat Regular, police de 16 pixels, juste pour garder à l'esprit, et c'est 32 ou vous pouvez l'augmenter à 36 aussi comme ça. Ce n'était pas régulier mais la police légère. Nous avons créé notre texte. Créons notre bouton d'appel à l'action ici. Donc, nous allons utiliser un bouton fantôme ou juste un bouton blanc ici, juste pour avoir une bonne concentration sur ce domaine. Donc, nous allons utiliser notre, encore une fois, Work Sans Regular 20 pixel et nous allons commencer à apprendre. Il suffit de changer sa couleur à une couleur vive comme cette orange. Je vais l'utiliser, l' aligner, sélectionner les deux couches, l' aligner avec Alt Control H et Alt Control V, il suffit de le déplacer un peu vers le bas, un pas vers le bas. Sélectionnez les deux calques et alignez-les avec cette ligne de marge de gauche. En outre, il semble un peu moins d'espace ici. Laissez juste l'arrière-plan et développez cette largeur comme ça. Maintenant, notre bouton est prêt. Allons faire glisser un logo ici. Je vais utiliser mon Alt Control F10. Alors maintenant, j'utilise les trois écrans. Fermons ça. Je vais faire glisser mon logo de ce fichier ici. Notre logo est par ici. Rallons-le un peu plus court. C' est assez bon. Allons le déplacer ici. Je vais utiliser l'effet de superposition de couleur ici. Vous pouvez aller aux effets et à la superposition de couleur et vous pouvez utiliser une certaine couleur grisâtre ici, parce que nous ne voulons pas plus pour la rendre proéminente. Donc, utilisez la couleur grise par ici. Notre logo est fait. Nous avons besoin d'un bouton de connexion sur le côté droit. Donc, il suffit d'utiliser un login texte ou nous pouvons utiliser ces deux couches. On peut les regrouper en btn, puis contrôler J , le copier, puis le déplacer ici comme ça. Mais nous allons changer le style. Cela va être blanc et l'arrière-plan va avoir un trait de blanc, un pixel et nous allons réduire le remplissage à zéro. Maintenant, si nous avons fait notre bouton de connexion, mais nous devons le rendre court. Vous le nommez pour vous connecter. Connexion, connexion, connexion. Maintenant, il y a un peu de problème. Notre bouton de connexion a également presque la même hauteur et la même largeur. Donc, nous allons le réduire parce que nous ne voulons pas beaucoup d'attention ici comme ça et aussi si nous pouvons réduire la taille de la police à 18 pixels, c'est assez bon. Maintenant, nous allons le renommer en Login btn pour le bouton de connexion, déplacez-le avec cette ligne, notre ligne de marge. Nous allons aligner ce bouton de connexion avec ce logo. Sélectionnez les deux et la ligne centrale comme ça. Je suppose qu'ils sont déjà bordés au centre. Maintenant, nous avons presque créé tout notre en-tête. Il y a encore une chose que vous pouvez ajouter ici. Vous pouvez dessiner un autre rectangle comme ça ici. Vous avez peut-être vu cela sur beaucoup de sites Web. Changez sa couleur à presque noir et changez son opacité à 70 pour cent ou ce que vous voulez, comme 50 pour cent. Pour moi, c'est 50 pour cent. Donc, vous pouvez voir cette technique est utilisée beaucoup de temps sur beaucoup de sites Web. Ainsi, nous pouvons également réduire sa taille et déplacer le bouton de connexion et notre logo un peu vers le haut comme ça. Maintenant, il a l'air plus équilibré. Maintenant, c'est la façon dont nous créons des effets d'en-tête de superposition de couleur. Donc, si nous essayons de le cacher, nous pouvons utiliser n'importe quelle couleur ici, comme si je vais utiliser cette couleur orange ou cette couleur ou peut-être celle-ci ou nous pouvons utiliser une couleur plus foncée comme ça, une couleur grisâtre plus foncée. Vous avez peut-être vu un tel effet sur beaucoup de sites Web, une superposition de couleur grisâtre très terne. Donc, c'est une technique très populaire. Vous pouvez l'utiliser avec n'importe quelle couleur. Vous pouvez sélectionner n'importe quelle couleur à partir d'ici, et il aura l'air vraiment agréable. Donc, c'est tout à propos de l'utilisation de superpositions de couleur et de remplissage de superposition de couleur pour créer des conceptions d'en-tête impressionnantes. Si vous avez des questions ou d'autres demandes, commencez simplement une discussion. Je pense que je crée beaucoup de conférences ces jours-ci, alors restez à l'écoute et tenez-moi au courant. 61. Exercice de l'en: Depuis quelques jours, je vois cette annonce Bluehost sur Facebook, alors j'ai pensé que je devrais partager cet effet avec vous. Quand j'ai commencé à concevoir pendant de nombreuses années, je ne savais pas comment cet effet était possible. Ils ont un dégradé venant d'un côté et il rend votre image de fond un peu opaque et à certains endroits, il est progressivement opaque et transparent en même temps. Permettez-moi de vous montrer dans cette leçon comment nous allons concevoir cela. Dans cette leçon, nous allons réellement concevoir ce design. C' est un peu différent, mais je pense que c'est mieux qu'eux. Commençons et voyons à l'intérieur de cet exercice, si vous avez des questions, posez-moi à tout moment. Commençons. D'abord, nous allons ouvrir un nouveau fichier. Cliquez sur « Nouveau » et la taille que nous allons utiliser est 1280 par 650. Appuyez sur « Ok », et c'est notre taille de toile, et ensuite nous allons mettre des grilles dessus. Allez à View, New Guide Layout et nous allons utiliser 12 colonnes, taille de la gouttière sera de 20 pixels et les marges seront de 20, 20, 20 et 20. Appuyez sur « Ok », pour que notre toile soit prête. Ensuite, je vais vous montrer certaines des ressources que j'ai utilisées. Allons à cette fenêtre. Ce sont les polices que j'utilise ajoutées par TipoType. C' est l'une de mes polices préférées, vous pouvez l'obtenir gratuitement, il suffit d'appuyer sur « Zero » dedans et Ajouter au panier, et acheter ces, juste gratuitement. Ensuite, il y a une police, cette archive, police libre. C' est aussi une police que j'ai utilisée. Ce sont deux polices que j'ai utilisées, toutes les deux sont gratuites. Le troisième est l'image que j'ai utilisée, qui est celle-ci. Je ne me souviens pas où je l'ai trouvé, mais si vous voulez, je pense que c'était gratuit et lieu de travail - 1245776. Si vous essayez de chercher en ligne avec le même nom ici, je pense que vous pouvez le trouver. Vous pouvez utiliser n'importe quelle image que vous aimez, laissez-moi vous montrer un site web. Allez sur cette photo, picjumbo.com et recherchez ici, lieu de travail et vous verrez beaucoup de grandes images comme celles-ci. Celui-ci, vous pouvez l'utiliser aussi. Aussi celle-là, ou peut-être celle-là. Je pense que celui-ci est aussi parfait. Utilisez n'importe quelle image d'ici, ce sont toutes des images gratuites. La première chose que nous allons faire est de faire glisser notre image d'arrière-plan, celle-ci dans Photoshop et de la laisser comme ça. Ensuite, nous allons le dimensionner en conséquence, comme ceci. Maintenant, nous avons notre image de fond. Maintenant à l'effet de cette opacité de dégradé et masque de dégradé. Nous allons appliquer ce masque ici, Ajouter un masque de calque. Maintenant, sélectionnez ce « Masque » sur le côté droit, et nous allons saisir cet outil de dégradé. Appuyez sur « G », l'outil de seau de peinture ou l'outil de dégradé. Assurez-vous que le dégradé est défini sur ce noir à blanc. Qu' est-ce qui va se passer maintenant ? Ce noir va s'effacer, que vous puissiez voir ici. Ce qui se passe ici, c'est que ce gradient est du noir au blanc, donc le masque noir à blanc rend fondamentalement certaines parties de notre image transparentes. Fondamentalement, ce fond blanc montre à l'arrière. Si vous voulez un autre arrière-plan, vous pouvez remplir n'importe quelle couleur que vous voulez, comme je vais vous montrer tout de suite. Maintenant, mon arrière-plan est un peu de couleur cyan, il est rempli avec ceci. Si vous voulez une couleur noire, vous pouvez cliquer sur une couleur noire comme ça. Bleu, noir, quelle que soit la couleur que tu veux, tu peux le mettre ici. ce moment, je vais utiliser ce blanc. En outre, continuez à faire glisser cette ligne de votre dégradé. Vous pouvez voir si j'essaie de le déplacer trop longtemps, cela rendra également transparent une partie de cette partie. Si vous voulez beaucoup de texte ou beaucoup de lisibilité du texte, vous pouvez appliquer cet effet. Maintenant, la première chose est que nous allons utiliser la police « R », celle-ci, Archive Regular, et je vais choisir cette couleur, je pense que c'était cette couleur, 31414D. Assurez-vous que la taille de votre police est 72. Je vais écrire ici, « Empower ». Dans la ligne suivante, je vais utiliser, « Votre démarrage maintenant ». Ne vous inquiétez pas, nous allons changer la police par la suite. Ce sont les mots. C' est mieux si vous les déplacez sur le calque séparé, donc je vais supprimer ce « Empower » dedans, et aussi je vais supprimer le texte inférieur de cette zone. Maintenant, nous avons deux couches différentes avec ce texte et celui-ci. La prochaine sera cette couleur rouge. C' est CA4930. C' est une couleur plate. Fondamentalement, ces deux sont, je pense, couleurs plates, et l'un d'eux est ma couleur de marque aussi, exécutez UXID. Il est utilisé dans My Run UXID Logo. Maintenant, nous allons utiliser Aileron, je vais sélectionner ce « Regular ». Voyons, je pense que votre démarrage, y n'était pas le capital. Maintenant, pour cela, je vais utiliser 48 taille et je vais utiliser la lumière. Comme ça, et pour cela, je vais utiliser semi-gras, italique, et je vais aussi utiliser 48, comme ça. Je pense qu'ici, nous avions aussi 48 semi-gras. Rendons-le plus blanc ici parce qu'on avait plus de blanc dans le dernier exercice. C' est ainsi que nous obtenons cet effet. Vous pouvez voir que je continue à expérimenter aussi. La direction de ce dégradé fonctionne également si vous voulez quelque chose en linéaire plus décalage comme ça, ce sera linéaire sur l'ensemble de l'image. Si vous voulez quelque chose de directionnel comme celui-ci, dans cette direction, vous pouvez utiliser quelque chose comme ceci. Dans l'annonce que je vous ai montrée, Bluehost a utilisé cette direction du haut à gauche vers le bas à droite. Maintenant, nous allons utiliser un bouton ici comme ça. Je pense que cette taille est bonne, et nous allons utiliser seulement deux pixels autour rayon ici dans le panneau des propriétés de cette forme. Changez-le, et nous allons utiliser du blanc, et nous allons ajouter quelques ombres ici. Ombre portée 1. C' est une nouvelle technique. Vous pouvez les appeler ombres luisantes et elles sont très populaires de nos jours. L' un est une ombre noire avec effet multiplicateur, très faible opacité, sorte que vous pouvez le faire 20 ou peut-être 16, quelque chose comme ça, très faible opacité. Ensuite, nous avons une distance de 10, aussi la taille est de 18. C' est la taille de la propagation. Ensuite, nous avons ombre portée, qui est cette couleur rouge, ou vous pouvez choisir cette couleur à partir d'ici. Il a également une opacité très faible, normale, il ne se multiplie pas et la distance est de 10 et 20. Près de 10 à 20 pixels de A. Maintenant, nous avons sélectionné ceci. Ensuite, nous allons utiliser un rectangle ici et le placer ici comme ça. Nous allons le colorer rouge de la même couleur de ce texte, et nous allons le découper, masque de découpe, c'est ainsi que nous utilisons le masque de découpe et ils sont utilisés beaucoup de temps dans la conception de l' expérience utilisateur et la conception de l'interface utilisateur et la conception de tout cela des trucs. Maintenant, je vais utiliser ici appuyez sur « Shift », donc nous sommes faciles à cliquer ici. Je vais utiliser « Rejoignez UXID. LearNuxID. » Je vais utiliser la taille 24 et je vais utiliser Aileron. Je vais utiliser la lumière. Vous pouvez utiliser n'importe quelle police que vous aimez, mais j'utilise la lumière régulière. Utilisons régulièrement, et il y a une autre astuce. Je vais passer à la police Arial juste pour l'instant. « Arial », et maintenant nous allons utiliser la touche Alt ou Option et appuyer sur « 26 ». Donc « R 26" et ça va vous montrer une flèche. J' adore cette flèche, il est très facile d'obtenir cet effet. Assurez-vous de choisir une police qui prend en charge cette valeur. Ce sont essentiellement des valeurs ASCII, A-S-C-I-I valeurs. Ce sont des flèches. Vous pouvez également les faire en HTML. Si vous voulez le rendre un peu plus spacieux, essayez de modifier cette valeur de suivi sur ce panneau de caractères. Peut-être 25 ou 30 comme ça, donc c'est plus ouvert. Voyons à quoi ressemble notre design. Il a l'air superbe. Maintenant, en arrivant à cette grille, j'utilise essentiellement ces quatre colonnes ; 1, 2, 3, 4. Centrer tous ces éléments dans cette colonne. Que se passe-t-il ici ? Désélectionnons-le, Contrôle D ou Commandement D. Nous allons tous les déplacer ensemble, peut-être un peu par ici. Notre bouton et tout est sur la place. Nous allons ajouter un peu de navigation ici, et pour cela nous allons utiliser l'outil de ligne. Je vais utiliser l'outil de ligne. Assurez-vous que le poids de votre outil de ligne est de deux ou trois pixels, car un pixel est très mince, il peut donc ne pas être visible. Alors faites-le deux pixels comme ça. Je vais colorer ça de la même couleur ici et ensuite on va les dupliquer comme ça, 1 et 2. Si tu veux quelque chose comme ça, c'est bon. Il suffit de le déplacer dans cette colonne. Je parle de cette colonne, donc c'est fondamentalement une colonne, c'est scatter. Si vous voulez, vous pouvez l'aligner comme ça, mais j'ai vu certains des modèles où ils ont quelque chose comme ça et ensuite ils ont quelque chose comme ça. Changeons juste la largeur. Allez à cette largeur et nous allons utiliser 32 pixels ici, et nous allons aligner tous ces pixels vers la gauche, comme ça. C' est ainsi que nous avons terminé cette conception. Je vais partager mon fichier de ressources PST pour cette conception. Si vous avez des questions ou si vous n'avez pas compris de raccourci, ou quoi que ce soit pendant cette leçon, posez-moi des questions. J' espère que vous avez apprécié cette leçon. Passons à la leçon suivante. 62. Concevoir des tabs dans Photsohop: Maintenant, dans cette leçon, nous allons créer quelque chose de similaire à cela. Ce sont essentiellement des onglets. Donc, navigation par onglets, vous l'avez vu sur de nombreux sites Web. Un de mes étudiants, il a demandé cette conférence que j'ai besoin de créer des éléments de conception de l'interface utilisateur comme des onglets ou des menus déroutants. C' est ce que nous allons créer dans cette leçon. Il y a une autre version pour celle-ci, qui est la version en boîte. Vous pouvez voir par ici. Ceci est fondamentalement une version de boîte ou une version remplie et c'est fondamentalement une autre est une version nue. Ce sont deux versions que nous allons concevoir dans cette leçon. Vous pouvez voir ici il y a des ombres subtiles sur ces deux zones. Il y a aussi des ombres subtiles derrière ces trois images. Commençons et voyons ce que nous pouvons trouver dans la prochaine leçon. 63. Concevoir un thème d'onglet 1: quelques jours, un de mes élèves m'a demandé qu'il ait besoin de créer ce genre d'onglets. Donc, dans cette leçon, nous allons créer la version nue la plus rapide. Commençons. Je vais ouvrir un nouveau fichier, un nouveau document et je vais utiliser ce support, 1440 par 900, créer. Nous allons d'abord créer la ligne rouge. Nous allons saisir cet outil rectangulaire et nous allons cliquer une fois sur cette toile. Vous pouvez le voir apparaître sur la façon de créer ce rectangle. Nous allons lui donner une largeur de 1065 et la hauteur de 2 pixels. Comme ça. C'est une ligne très mince. Créons une autre couche ici. Donc, calque un, et je vais aller au calque et créer un calque d'arrière-plan pour que je puisse facilement aligner tout en fonction de cet art. Option de commande H. Maintenant, c'est au milieu. Maintenant, nous allons créer nos boutons. Donc, d'abord changer cette couleur pour ce rouge, ca4930 est la couleur que j'utilise ici. Maintenant, nous allons saisir cet outil rectangle arrondi et nous allons cliquer une fois de plus et la largeur sera 165 et la hauteur de ce bouton sera 55. On devrait utiliser le rayon pour être quatre, quatre, quatre, quatre et quatre. Appuyez sur OK. Donc nous avons ce bouton ici. Maintenant, vous pouvez voir que les deux coins arrondis du bas ne doivent pas être arrondis car ils vont s'attacher à cette ligne. Donc, nous allons supprimer cela et utiliser zéro, zéro en bas. Comme ça. Maintenant, vous pouvez voir que nous avons un bouton d'onglet ici. Mettons du texte dessus. Nous allons utiliser Open Sans ou vous pouvez utiliser Clear Sans. Ce sont les deux polices gratuites de Google. Maintenant taille du texte je vais utiliser 20 points ou 20 pixels et Maj et cliquez ici. On va utiliser des films ici. Maintenant couleur blanche, et nous allons les aligner les uns avec les autres comme ça. Maintenant, ajoutons des ombres à celui-ci. Nous allons donc aller aux styles de calque, abord saisir ce calque et aller aux styles de calque et à l'ombre portée. Maintenant, l'ombre portée que nous allons utiliser devrait être sur le côté droit et sur le côté gauche, donc nous n'avons pas besoin que l'ombre portée soit en bas. D' abord, nous allons utiliser un peu de couleur grisâtre par ici. Choisissez n'importe quelle couleur grisâtre le long de ce côté. Ensuite, nous allons utiliser une opacité très faible comme 30 pour cent, et la distance devrait être 9 et cette valeur de pixel sera 12. Nous avons une ombre, mais nous avons besoin qu'elle soit sur le côté droit donc nous allons changer l'angle vers la gauche, donc 180. Si la lumière vient d'ici, l'ombre sera de ce côté. C' est le concept que nous avons étudié lors de la conférence précédente. C' est ainsi que nous avons créé une ombre. Nous allons cliquer sur ce bouton plus et nous allons ajouter une autre ombre. Cette fois, l'ombre sera de l'autre côté, ce qui sera nul. Assurez-vous de décocher cette lumière globale car elle va gâcher vos lumières ici. Nous allons utiliser deux lumières. L' un sera sur zéro et l'autre sera, assurez-vous que celui-ci n'est pas coché, 180. Nous avons donc une ombre subtile des deux côtés. c' est donc fait. Maintenant, créons d'autres onglets. Peut-être que nous pouvons dupliquer ce contrôle G et actif, nommez-le onglet actif. C' est notre séparateur. Nommez-les correctement, onglet actif et nous allons à Contrôle J ou Commande J pour créer une autre couche. Nous allons le faire de ce côté-ci. Assurez-vous que ce calque est en bas de celui-ci car il ne sera pas actif. C' est un état passif ou inactif. Donc l'état inactif est celui-ci. Maintenant, déplacons-le un peu derrière ça. Maintenant, nous allons changer sa couleur en blanc, comme ça et la deuxième chose nous allons enlever toutes les ombres de lui. Nous allons utiliser une partie de l'accident vasculaire cérébral. Donc, nous allons utiliser un trait de deux pixels dessus et sa couleur devrait être un peu grisâtre, comme ça. Il doit être à l'intérieur, réglez le trait à l'intérieur. Appuyez sur OK. Nous allons le déplacer dans cet état. Il faut que le séparateur soit au sommet. C' est pourquoi il va le cacher derrière. Une autre chose que nous devons faire ici, c'est que nous devons en réduire la taille. Je vais réduire sa hauteur à 50 pixels, cinq pixels au-dessous et nous allons le déplacer un peu vers le bas, comme ça. Ok comme ça. Maintenant, c'est presque parfait. Deuxièmement, nous devons le déplacer un peu loin d'ici, comme ça. Tu peux le déplacer comme ça ou comme ça, c'est à toi de décider. Vous pouvez le séparer ou vous pouvez le garder derrière cet onglet actif. Maintenant, nous allons dupliquer ces films. Nous devons donc changer la couleur de ce texte. Ça va être un peu grisâtre sombre comme ça. Nous allons l'appeler Dramas, et nous devons le déplacer un peu vers le bas comme ça. Peut-être que j'ai besoin d'un croustillant ici. Donc Dramas. Ce sont quelques paramètres, les options de rendu de mon écran ont quelques problèmes donc mon texte n'est pas vraiment net. Donc, c'est une option. Ensuite, nous allons déplacer celui-ci, dupliquer celui-ci, et nous allons le déplacer ici. Donc ça va être de l'anime. Maintenant, nous avons un onglet actif et deux onglets passifs ou des onglets inactifs. Vous pouvez voir comment cette ombre subtile tombe sur ces onglets. Il y a beaucoup de variations que vous pouvez faire, comme vous pouvez supprimer l'ombre et vous pouvez utiliser un peu de couleur gris clair pour les colorer. Vous avez peut-être vu ce style dans Google, donc vous pouvez faire quelque chose comme ça, comme ça. Prenez la couleur d'ici. Ils ont l'air vraiment cool, vraiment sympa. Les ombres sont très subtiles et vous pouvez voir ici des deux côtés. Il y a un autre effet que nous pouvons ajouter à cela, qui est la superposition de dégradé et je vais utiliser une superposition de dégradé ici sur ce bouton. Ce que nous allons faire, c'est que nous allons utiliser un gradient très terne, donc il est fondamentalement dégradé transparent noir à blanc. Il devrait être blanc d'un côté. Vous pouvez utiliser quelque chose comme ça, et aussi vous pouvez utiliser multiplier ou d'autres effets comme celui-ci, et vous pouvez l'inverser ou quelque chose comme ça. Utilisons-le comme ça, alors changez l'angle de lumière à 90 degrés, et vous pouvez voir ici comment cela affecte notre conception. Vous pouvez voir peut-être que nous pouvons le déplacer vers une couleur grisâtre et nous pouvons déplacer le curseur un peu juste pour obtenir juste un effet subtil. Vous pouvez voir comment la différence est, c'est vraiment bel effet. Vous pouvez simplement créer une superposition de dégradé très subtile sur celui-ci et c'est ainsi que nous le faisons. Maintenant, nous allons remplir cette zone, c'est à vous de décider. Sinon, je n'aurais pas dû l'inclure dans cet exercice. Tu peux le faire tout seul. Mais si vous voulez que je vous montre quelques zones ici, ce que nous allons faire, c'est que nous allons créer des guides autour de cela. Nous allons envelopper ce séparateur. Ce que j'ai fait, c'est que j'ai créé 50 pixels d'espace des deux côtés, et je vais placer mon contenu à l'intérieur. Maintenant, nous allons créer un autre rectangle 285 largeur et la hauteur sera 350. Nous allons utiliser un coin un peu plus arrondi ici, appuyez sur « Ok », et nous avons cette très belle couche ici et vous pouvez voir que nous pouvons y mettre n'importe quelle image. Maintenant, nous allons d'abord ajouter de l'ombre portée. L' ombre portée va être la première. On peut utiliser une ombre portée à 90 degrés, et elle devrait être très subtile, comme 9, 12, elle a l'air bien. Appuyez sur « OK » et assurez-vous que c'est une couleur de gris. Je vais le colorer en gris ici comme ça. Déplace-le en dehors de cette zone. Nous allons répliquer ceci avec un autre, Control+G, et ce sera notre actif ici, image active ou miniature. Faisons le colorer un peu plus sombre comme ça. Son ombre sera également mise en évidence ou plus intense comme 60 pour cent. Aussi, je vais le déplacer un peu plus large, peut-être 70 pour cent est bon. Nous pouvons également augmenter la distance un peu plus bas. C' est ainsi que nous allons utiliser cet état actif. En outre, nous allons ajouter quelques coups autour d'elle. Ainsi, trois pixels ou deux pixels tracent à l'intérieur de cette forme. La taille des trois formes est similaire. Appuyez sur « Ok », et dupliquons celui-ci à nouveau à la fin ici, comme ça et collez-le avec le côté droit. Maintenant, je vais prendre les trois et je vais les espacer horizontalement. Très gentil, très beau. Maintenant, vous pouvez ajouter n'importe quelle image ici, je vais le faire très rapidement. Je vais faire glisser et déposer des images et je vais les clipser à l'intérieur de ces boîtes. Ce sont essentiellement des conteneurs, nous allons utiliser notre option ou la touche Alt pour couper toute l'image à l'intérieur de ceci. Nous en avons fini avec ces ombres, maintenant nous allons ajouter du texte ici. Je vais utiliser un titre avec l'Open Sans gras. Je vais sélectionner Ouvrir Sans gras et la taille sera de 48 pixels. Ajoutons du texte ici, comme des films ou des films actifs. Je vais utiliser un peu de couleur plus foncée ici comme ça, aligner avec cette ligne ici, comme ça. Aussi, vous pouvez ajouter quelques titres autour de ces images juste pour vous assurer que ce sont de beaux titres, et je vais ajouter quelques titres ici, comme une fenêtre cassée. Je vais utiliser 20 ou 24 pixels, 20 points ici et m'assurer que la police est Semibold Italic, comme ça. Alignez-les tous avec ceux-ci. Je vais le faire très vite. Ne vous inquiétez pas, je pense que vous savez déjà comment faire cela, aligner avec ces formes en bas, donc conteneurs. Je vais attraper ce conteneur et je vais attraper le calque de texte et je vais l'aligner dans l'en-tête comme ça. Fondamentalement, je suis en train d'aligner tous les textes avec ceci, ceci, et ceci. Maintenant, j'ai aligné tous les textes, vous pouvez voir ici il est vraiment cool, vraiment agréable, vraiment ouvert, très ouvert conçu, très bon usage de l'espace blanc. C' est la fin de cette leçon. Nous avons créé une barre d'onglets très agréable, très subtile, et c'est l'information à l'intérieur de cette barre d'onglets. Assurez-vous que vous utilisez certains états actifs et passifs, comme vous pouvez le voir ici, nous avons bouton très inactif. Ils ne devraient pas mélanger. Les boutons actifs doivent être clairement visibles et l'utilisateur doit savoir que cette couleur correspond à celle-ci, que je suis à l'intérieur d'une fenêtre active. Ceci met fin à cette conférence. Dans la leçon suivante, nous allons créer une autre version de ce qui est rempli une, nous allons utiliser une boîte ici. Passons à la leçon suivante. 64. Concevoir un thème des tabs 2: Maintenant, dans cette leçon, nous allons créer cette version boîte de ces onglets. Il y aura peu de différences comme vous pouvez voir une ligne très mince ici, aussi vous pouvez voir qu'il y a un effet élevé ici, effet 3D, et aussi vous pouvez voir quelques icônes ajoutées ici. La seule chose est que nous inversons le schéma de couleurs, maintenant l'arrière-plan est très lumineux avec la correspondance avec ces onglets et je pense que cela montre vraiment clairement que celui-ci est actif. Commençons juste et nous allons commencer à partir de la version précédente où nous sommes partis, donc j'ai ajouté quelques titres de films ici juste pour le rendre plus dramatique et agréable. Maintenant, peu de choses que nous allons faire, numéro un que nous allons éliminer quelques-uns des effets comme vous pouvez voir ici, cette bordure blanche semble très étrange dans cette situation, donc nous allons l'enlever comme ça. En outre, nous allons enlever les ombres, les ombres portées, des deux, donc je vais supprimer les ombres portées. Vous pouvez voir maintenant celui-ci semble clairement qu'il est élevé et il est fondamentalement sélectionné, donc il y a une ombre autour. Ensuite, nous allons supprimer cette ligne ici, donc cacher cette ligne et les quelques autres choses que nous allons faire, numéro un, à ces onglets inactifs, maintenant nous allons ajouter un trait de gris, vous pouvez voir ici, gris coup et nous allons rendre leur couleur blanche, sorte qu'il se mélange avec le fond. Donc, la même couleur que l'arrière-plan, vous pouvez voir ici et nous avons ajouté un trait de, je pense, deux pixels, voyons combien de pixels, oui, deux pixels à l'intérieur de 100 pour cent et c'est une couleur grise cb, cb, cb. Nous avons presque atteint ce que nous voulons. Maintenant, le fait est que nous allons créer un rectangle ici et ça va être comme ça, peut-être comme ça. Maintenant, nous avons ce rectangle arrondi et il va être en haut. Pas au sommet, je pense que ça devrait être devant ça. Maintenant, changeons sa couleur à celle-ci, donc nous avons changé la couleur, donc celle-ci était active, nous allons supprimer la superposition de dégradé que nous avons mise dans le dernier exercice, donc dégradé, nous n'avons pas besoin de dégradé et aussi si vous voulez, vous pouvez également supprimer ces ombres portées, donc il semble vraiment un peu plat et très agréable ici. Maintenant, nous allons changer les couleurs de ces textes, donc je vais sélectionner tout le texte. Il y a une astuce que je vais vous montrer en quelques secondes, allez dans le panneau Caractère et sélectionnez la couleur ici, alors déplacez-le en blanc et ta-da, nous avons toutes les couleurs texte en blanc en ce moment. Donc, au lieu de changer chaque couleur une par une, nous changeons juste la couleur à un endroit et tout est changé. En outre, nous devons le rendre un peu plus grand et déplacer ce contenu. C' est notre titre et c'est notre contenu ici, donc c'est notre contenu de films, alors nommez-le Contenu de films, comme ça. Maintenant, déplacez-le quelques pixels vers le bas, peut-être 10, 20 comme ça. Maintenant, nous allons ajouter quelques icônes ici, mais avant cela nous allons avoir besoin d'une ligne ici, ligne de séparateur, donc cela montre que nous avons un séparateur ici et nous avons quelque chose comme le titre et quelque chose comme ça. Je viens de dessiner une ligne comme ça, faire les mêmes couleurs et ensuite nous allons réduire la luminosité pour le rendre un peu plus sombre, 75 comme ça et réduire son contrôle de taille T ou commande T et nous allons utiliser deux pixels comme ceci et assurez-vous qu'il est de la même taille que votre arrière-plan, donc il était de 1 115 et il va être de la même taille que cette barre ici donc il va être de 1 115. Assurez-vous que vos tailles sont les mêmes, vous devez les faire correspondre comme ça, juste ajuster l'espacement. Je vais sélectionner ce séparateur, maintenant il a l'air bien. Vous pouvez voir l'espace au-dessus de ce titre et au-dessous de ce titre est le même, donc j'essaie de centraliser cette zone. Maintenant, nous avons presque fini avec cela, il y a un changement plus subtil comme ce drames, ses couleurs devraient être un peu plus ternes donc comme ça, gris. Ne le rendez pas trop ennuyeux pour qu'il ne ressemble pas à un inactif, alors faites-le un peu comme ça pour montrer que vous pouvez cliquer ici. Il ne doit pas transmettre le message que vous ne pouvez pas cliquer ici. C'est bien. Maintenant, il y a peu de choses que nous pouvons ajouter, nous pouvons ajouter des icônes ici maintenant. Très simple astuce comment j'ai fait ces icônes, juste un calcul simple, 12 par 12 pixels largeur et hauteur rectangle, mais je pense que c'est un carré, pas rectangle et ce que j'ai fait est juste de le déplacer en haut. Je les ai dupliqués comme ça et ensuite nous allons les dupliquer et les déplacer en bas comme ça. Une icône est prête, je vais sélectionner tout, contrôler ou commander E pour créer une forme, donc maintenant c'est une icône unique. Allons le déplacer ici. Maintenant, la deuxième icône va être la même, juste nous avons besoin d'une plus petite taille rectangles sur le côté gauche, donc il va être six pixels par six pixels carrés comme ceci et puis nous sommes laissés avec six et 26 était total donc nous sommes laissés avec 20 pixels et 20 pixels. Désolé, ce n'était pas 20 par 20, ça devrait être 20 par 6 comme ça. Maintenant, nous allons le déplacer ici et prendre une certaine distance comme celle-ci. Vous pouvez ajuster la distance plus tard. Maintenant, nous allons fusionner ces calques et nous allons les dupliquer un, deux, donc nous avons deux icônes créées en quelques minutes et c'est juste les regrouper en icônes. Maintenant, nous allons les aligner avec cette marge ici, marge ou ligne de ligne directrice ici, donc c'est ainsi que nous l'alignons comme ça. Nous avons complété les deux onglets et ils ont l'air superbe. L' un est l'onglet nu et celui-ci est l'onglet avec l' état très actif et mélangeant le contenu et l'onglet de la même couleur. C' est tout pour cet exercice. J' espère que vous avez apprécié cet exercice. Passons à la leçon suivante. 65. Rassembler des ressources pour la conception d'applications IOS: Maintenant, dans cette leçon de série, nous allons créer cette application iPhone génial à la recherche. C' est une affaire quotidienne pour notre nourriture et surtout pour les aliments. Tout d'abord, dans cette leçon, je vais vous montrer quelles sont les différentes ressources que j'ai utilisées, les images, ces fourchettes, et les couleurs, tout le reste. Laisse-moi te montrer. Pour les images que j'ai abonné à ce très gentil gens qui sont Death to Stock Photos, et ils me livrent des photos très superbes et des images de haute qualité gratuitement presque chaque semaine. Donc c'est très gentil. Si vous pouvez vous abonner à eux, vous obtiendrez beaucoup de créer des images ici. Laisse-moi te montrer certains d'entre eux ici. C' est l'un d'eux, c'est une série. J' ai donc beaucoup d'images de ces gars. Vous pouvez également utiliser d'autres sites gratuits comme, je suppose ici que j'ai quelques-uns des liens. Splash est très populaire, celui-ci sur splash, vous pouvez rechercher en ligne, picjumbo, Pixabay. Donc, vous pouvez utiliser n'importe quel site que vous aimez, puis la police que j'utilise, j'utilise cette police Martina Regular, qui est je suppose libre, fontzone.net. Vous pouvez rechercher en ligne Martina Regular, télécharger cette police et l'installer. Ensuite, j'utilise ce Google Font Lato qui est très populaire. Une autre police Google qui est Maven Pro, que j'ai utilisé dans ce bouton si je mets le texte ici, Maven Pro régulier. Donc, c'est pour le bouton seulement. Ensuite, j'utilise cette police de style marqueur qui est fondamentalement Martina, et Lato est partout ailleurs. Donc c'est Lato, Poulet Biryani, et dans ce prix. Donc, dans l'ensemble, ils ont l'air très bien et agréable ensemble. Ce sont toutes les ressources. Alors commençons. Les couleurs que j'utilise sont essentiellement ces deux couleurs, qui est cette couleur pourpre et verte. Donc c'est 211637 violet. C' est essentiellement vert, qui est 22a372. Je suppose que la plupart du temps je choisis ces couleurs de cette image fondamentalement. Laisse-moi te montrer comment je choisis ces couleurs. Il y a un masque de dégradé sur eux. C' est essentiellement l'image. J' ai choisi les couleurs de l'image comme par exemple, ce vert. Il est plus proche de ce vert. Réduisons la saturation à 70 pour cent. Il est donc presque plus proche de celui-ci. Vous pouvez également essayer d'échantillonner d'autres couleurs d'ici, comme celle-ci ou celle-ci. Donc, en gros, je l'ai choisi d'ici. Celui-ci 030f66. Donc, c'est essentiellement comme ça que vous échantillonnez la couleur de votre image. Puis la couleur pourpre que j'ai choisie ici. C' est pourquoi ils vont très bien avec cette conception globale. Maintenant, commençons. Ici, j'ai l'image qui était celle-ci. 66. Commençons de concevoir l'application IOS: Créons un nouveau fichier et choisissez iPhone 6 ou iPhone 5. abord, vous devez sélectionner Mobile App Design ici, puis aller dans le sous-menu, qui est iPhone 5, 6 ou iPhone 6 Plus. Permet de choisir cet iPhone 6 en ce moment. « Ne pas colorier Gérer ce document », assurez-vous qu'il est sélectionné et appuyez sur « OK ». Maintenant, c'est notre tableau d'art. Créons ceci en tant que couche d'arrière-plan. J' ai sélectionné celui-ci, et calque à partir de l'arrière-plan, j'ai créé un calque d'arrière-plan. Créons une couleur d'arrière-plan, qui sera celle-ci. Un peu grisâtre, couleur f4f4f4. C' est ainsi que j'utilise fondamentalement, les arrière-plans. Importons notre fichier ici, qui était celui-ci. Faisons-le glisser ici dans le Photoshop, comme ça. Il est presque parfaitement en forme ici. Maintenant, c'est essentiellement l'écran de l'iPhone 6, donc nous avons beaucoup d'espace en dessous. Si nous le voulons, nous pouvons augmenter la taille de cette image, si nous en avons vraiment besoin. Nous pouvons sélectionner Control T et essayer d'augmenter la taille comme ça. Faites glisser un peu vers le bas. Augmentons encore la taille. J' appuie et maintiens les touches Maj et Alt tout en augmentant la taille de ceci. Fondamentalement, c'est sortir. Je crois que c'était des insectes Photoshop. Dès que j'ai commencé à le redimensionner, ils essayaient d'ajuster la taille autour d'elle. Créons une superposition sur cette image. Fondamentalement, dans cette conception, vous pouvez voir ici, si je clique ici, j'ai créé ceci et superposition violacée afin que nous puissions voir le texte facilement. Tout d'abord, nous allons créer une superposition de dégradé pour que nous puissions voir le texte ici très facilement. C' est essentiellement ce que j'ai fait ici. Tout d'abord, ce que nous allons faire est, nous allons sélectionner cette zone et nous allons créer une autre couche. Celui-ci, et nous allons appuyer sur G et le remplir avec cette couleur pourpre. G et appuyez comme ça. Maintenant, ce que nous allons faire, c'est que nous allons créer un masque sur cette image et nous allons utiliser la superposition dégradée. Vous savez que le blanc montrera tout et le noir cachera tout. Lorsque nous essayons d'utiliser la superposition dégradée sur cette image comme celle-ci, vous pouvez voir l'image derrière elle sera affichée parce que maintenant, le blanc est en train de supprimer toute cette couleur pourpre ici. Continuez à faire comme ça jusqu'à ce que vous ayez une belle touche comme ça, peut-être comme ça. Ça a l'air un peu sympa. Si vous voulez vraiment l'ajuster, vous pouvez sélectionner ce calque, Control T, et vous pouvez transformer et ajuster selon vos goûts. Maintenant, c'est l'astuce comment j'ai fait cet effet de couleur de superposition. J' ai utilisé un dégradé et un effet de masquage pour celui-ci. Le reste de la conférence, nous le ferons dans la prochaine leçon. Passons à la leçon suivante. 67. Ajouter des éléments de menu à l'application IOS: Ajoutons quelques images supplémentaires ici. C' est essentiellement notre arrière-plan, donc le contrôle G et les regrouper en arrière-plan. Maintenant, ajoutons des images ici. Pour cela, je vais utiliser un rectangle arrondi pour contenir cette image, comme ceci, peut-être un peu carré. Créons une image carrée de 200 pixels par 200 pixels, et un rayon de quatre pixels, comme ça. Nous pouvons nous assurer que nous avons un espace de 1, 2, et 1, 2, 3, 4, 24 pixels de cette zone supérieure. Prenons des images d'aliments. Ce sont toutes les images gratuites que j'ai recueillies. On peut l'utiliser comme celui-ci. C' est toujours bon. Celui-ci a l'air bien. Appuyez sur Entrée. Je vais le clipser dans cette petite boîte. Faisons-le glisser un peu, à l'échelle un peu pour qu'il soit un peu plus agréable. Concentrons-nous sur celui-ci comme celui-ci. Maintenant, contrôlez G et dupliquez ce groupe. Appelons ça les petites copies de pouces. Je vais le traîner ici comme ça. Désolé, j'ai appuyé essentiellement sur l'art avec et il a créé beaucoup de copies. Nous n'avons besoin que de quatre. Peut-être que je suppose que celui-là est en plus. Déplaçons celui-ci aussi ici comme ça, et le premier ici comme ça. Déplaçons ces 100 pixels à l'intérieur de ceci. Nous savons que des deux côtés ils sont également espacés, 1, 2, 3 ,4, 5, 6, 7, 8, 9,10. C' est un peu beaucoup alors passons à cette hauteur. Je vais les espacer comme ça. C' est ainsi que j'ai créé cette partie de sélection de vignettes d'image. Créons un guide au milieu de cela afin que nous sachions où se trouve le centre de cette image. Je vais utiliser un guide rapide comme ça. Maintenant, nous savons où est le centre, donc je vais l'aligner rapidement comme ça. Oui, il est presque au centre. Choisissons le premier et le dernier, et tous et espacons-les à nouveau. Maintenant, il est aligné correctement. Oui, l'alignement est la clé du succès de votre conception. Votre tout et chaque image doivent être alignés correctement. Le visualiseur d'images puis des images comme celle-ci. Nous en avons presque fini avec ce domaine. Maintenant, nous allons regrouper tout cela en miniatures comme ça. On peut avoir un bon espace ici. Celle-ci n'a pas l'air très mauvais, mais l'écart entre ces images ici semble un peu plus spacieux. l'espace ici. Laissez-moi vérifier quelle était la hauteur par ici 1, 2, 3 ,4, 5, 6, 7, 8, 9,10, 11, 12. Maintenant, il est à 32 pixels. Alignons le haut de ces images. Il a l'air bien maintenant. Passons à la prochaine conférence où j'ajouterai le texte sur cette image ou cette planche d'art. Passons à la leçon suivante. 68. Ajouter du texte à l'écran d'application IOS: Ajoutons du texte à cette conception dans cette leçon. Sélectionnons celui-ci et je vais d'abord le sauvegarder parce que je ne l'ai pas encore enregistré. Enregistrez-le sur le bureau en ce moment. Maintenant, nous allons d'abord sélectionner cette police Martina, régulière, et je vais utiliser la taille de 52 points ou 52 pixels et la couleur sera blanche. Cliquez ici quelque part et c'était un café sandwich. Maintenant, je vais vous dire d' envoyer un café ici et de le déplacer un peu vers le bas comme ça. Laissez-nous le déplacer en haut et ajuster la superposition d'arrière-plan parce que je ne peux pas le lire. Celui-ci a l'air bien mieux. Passons à ce panneau collecteur et supprimez ce soulignement. Ensuite, je vais sélectionner notre autre police qui était Lato, régulière. Celui-ci est mauvais. Dupliquons et sélectionnons la police Lato. J' avais sélectionné la police afin qu'elle soit passée à une autre police. Cela arrive parfois avec moi. Maintenant, nous allons utiliser 28 ou peut-être 32 pour l'emplacement de ce café. Pour ça, je vais utiliser Lahore. Comme ça. On les bouge un peu. Comme ça, ça a l'air mieux maintenant. Je suppose que nous allons faire 20, 1, 2, 3, 4 ou 24 pixels et celui-ci sera un et deux. Vingt pixels de là, ça a l'air bien. Allons le rendre un peu plus petit, j'ai déplacé cela à 30 pixels, maintenant cette partie où nous avons eu affaire spéciale pour aujourd'hui. Encore une fois, nous devons sélectionner cette police. Cliquez ici une fois, vous cliquez sur cette police, sélectionnez comme celle-ci, puis sélectionnez ce texte et vous pouvez voir cette taille et tout est déjà sélectionné. Cliquez ici et le texte était spécial pour aujourd'hui. Double-cliquez ici et offre spéciale pour aujourd'hui. Maintenant, je vais sélectionner la couleur de cette police à cette couleur pourpre, qui était notre couleur de base pour ce design. Déplaçons le autour et 1, 2, 3, 4, 5 et 6, 60 pixels de là. La ligne suivante, qui est le poulet biryani et le prix. Ajoutons que la police est Lato. Je vais d'abord sélectionner ce calque, puis appuyez sur « D » et Lato est sélectionné. Je vais écrire biryani poulet et le prix était de 2,99$ seulement. C' est le texte. Tu ne peux pas voir les textes parce que je fais de la magie vaudou noire. Le texte blanc. Faisons en gris pour cette couleur, je suppose. Maintenant, déplacons-le au milieu. Nous traiterons de ces alignements. Neutron, mais si vous voulez aligner rapidement le contrôle A, Contrôle Alt H et il est déjà horizontalement au milieu. Maintenant, pour ce poulet biryani, je pense que c'est un peu sombre. Ce que je vais faire, c'est que je vais sélectionner cette couleur pourpre et je vais bouger dans cette zone ici comme ça. Celle-ci était un peu bonne couleur. Il est un peu grisâtre et un peu violacé. 63, c'est parfois je le fais, donc je combine ces deux couleurs pour obtenir la couleur Grey comme ça et puis je vais sélectionner ceci, et je vais sélectionner cette couleur verte ici. Nous allons augmenter la taille de la police pour cette couleur verte. Faisons en 36, comme ça, et j'ai l'air parfait jusqu'à maintenant. 69. Ajouter des boutons à IOS App Design: Ensuite, nous avons un numéro de téléphone, qui est mon numéro de téléphone. Écrivons ça par ici. abord, nous allons sélectionner rectangle arrondi, et le rayon devrait être 10 ou peut-être 12, je suppose que 12 ira bien. Créons un bouton ici comme ça, et les couleurs devraient être violettes, et la rondeur devrait être de 20 pixels. Ça a l'air bien. Maintenant, pour l'icône de ce téléphone, je vais utiliser mon extension Font Awesome PS ici, alors ajoutons un téléphone icône. Celui-ci a l'air parfait, un peu par ici. Alors couvrons le blanc, rendons-le un peu plus grand. C' est fondamentalement 42 pixels est assez bon. Ici, déplaçons 1, 2 et 330 pixels de la gauche. Alors je vais écrire mon numéro de téléphone ici. Vous pouvez également le rendre un peu vert. Si vous voulez rendre une couleur plus nette, vous pouvez augmenter la saturation ici. Je vais l'augmenter à près de 86, comme ça. Maintenant, je vais utiliser appelons-le le téléphone modèle. Ici, je vais ajouter mon numéro de téléphone ici, qui sera en latéral. Changons de couleur en blanc. Plus proche du blanc, qui est fondamentalement un peu de couleur grisâtre. Déplaçons 1-330 pixels de la droite et 40 pixels. Maintenant, ce que je vais faire, c'est que je vais séparer ces deux par un et 220 pixels et regrouper ce numéro de téléphone et l'aligner au milieu de ce bouton comme ça. Ce que j'ai fait, c'est que j'ai regroupé ce contenu intérieur, puis je l'ai déplacé au milieu de cela. Maintenant, je suppose que nous pouvons aussi colorer cet écran ou peut-être un peu grisâtre. Je pense qu'il ne suffit pas de le souligner trop. J' utilise ce mot assez bien. Maintenant, ce que nous allons faire, nous allons utiliser un très gros bouton de livre maintenant ici, et c'était essentiellement le bouton. Créons un rectangle ici. Cette grande et la couleur celle-là. Si vous aimez le look plat, vous pouvez utiliser ce bouton comme ceci. Mais si vous aimez un regard un peu élevé, vous pouvez utiliser l'ombre intérieure. Ce que nous allons faire, c'est que nous allons sélectionner cette couleur, puis nous allons réduire la luminosité pour obtenir un peu de couleur plus foncée ici comme ça. Vous pouvez déjà voir l'altitude ici. Je vais utiliser l'élévation de 16 pixels ici et zéro taille de pixel. L' angle est de moins 90. Donc, fondamentalement, c'est l'ombre intérieure de cette direction de bas en haut. Cliquez sur « OK ». Si vous le souhaitez vraiment, vous pouvez également ajouter un peu de superposition de dégradé sur ce bouton. Si tu veux vraiment. J' utilise ce blanc transparent à noir. Vous pouvez sélectionner comme ceci et vous pouvez également le multiplier comme ça. Maintenant, je vais utiliser un peu de couleur grise ici parce qu'il avait l'air très pointu, un peu plus sombre. Je suppose que ça a l'air bien sans cette superposition de gradient. Supprimons cette superposition de dégradé. Je vais utiliser à nouveau cette police Awesome PS pour obtenir du calendrier ici. DA est bon pour un calendrier, donc je vais sélectionner celui-ci. Il s'agit de l'icône du calendrier. On doit sortir ça de ce numéro de téléphone. Où est ce calendrier ? Augmentons la taille et déplace-la ici. Couleur blanche. Ensuite, nous allons utiliser notre dernière police, qui était Maven Pro. C' était Maven Pro pas Maven. Je vais utiliser ce Maven Pro Regular et je vais l'utiliser ici et réserver maintenant. Ce que j'ai fait, c'est que j'ai utilisé ce panneau de caractères pour l'espacer. Donc, il est 36 points, donc 36 pixels fondamentalement. Vous pouvez définir le suivi ici. Je l'ai utilisé pour augmenter la taille de 225 pixels. Déplaçons ça ici comme ça. Sélectionnez ce calendrier, je vais réduire sa taille. Il est essentiellement 55 par 59 pixels. Déplaçons le à 50, comme ça, et déplacez-le au milieu de ce livre de zone maintenant. Nous allons également souligner ce texte, réservez maintenant. Donc, les gens savent que c'est essentiellement un bouton. Même si vous voulez le supprimer, vous pouvez le supprimer comme ça. Ne vous inquiétez pas pour ça. Je peux aussi augmenter la taille de ceci, et nous devrions également augmenter la taille à 40, je suppose, parce qu'il devrait sembler un peu plus grand que cette zone. Rendons ce numéro de téléphone un peu plus petit. Faisons 30 pixels et réduisons également. Je suppose que 32 pixels semble assez bon et aussi réduire cette taille de téléphone de cette icône à 36 pixels. Rapprochez-le de celui-ci et deux, et aussi le rendre un peu plus court comme ça. Je vais utiliser ma touche de raccourci pour l'aligner correctement. Ensuite, je vais regrouper tout cela dans le modèle de téléphone et l'aligner au milieu de cette zone d'application, qui est notre tableau d'art. Je pense que ça a l'air presque parfait. Prenons un peu d'espacement avec précision. C' est notre bouton de téléphone. Voyons combien il est plus loin de ce 1, 2, 3, 4, 5. Cinq, c'est assez bon. Ici, nous avons du poulet biryani. Offres spéciales. Faisons-le au milieu de tout ça, un peu en bas comme ça. Il a l'air parfait, et je suppose d'aligner cela avec ce calendrier. Il est presque aligné mais je me sens un peu. Un et deux, 1, 2, 3, 4. Vingt-quatre pixels par ici. Regroupez-le, contenu du livre maintenant bouton. C' est notre histoire de livre maintenant. Regroupez-les en bouton, réservez maintenant bouton. Alignons ce contenu avec cela au milieu, comme ça. Alignons tout au milieu de cette toile. sandwich des offres spéciales du Pakistan, et nous allons l'aligner au milieu. Tout est au milieu. Je pense que nous pouvons augmenter la taille de ce texte, car il se rapproche presque de ces offres spéciales. J' ai augmenté la taille à 64 points, Martina régulière. Je suppose que cela fait la fin de cette série de leçons. Ce que je vais faire n'est qu'un dernier effet. Je vais augmenter la taille de ce signe $. Faisons en 40 pixels ou peut-être 38, un peu plus grand que l'autre texte. C' est parfait et je vais le sauver maintenant. Notre écran d'application iPhone 6 est complet. Dans la leçon suivante, nous allons créer le marqueur pour l'écran, alors passons à la leçon suivante. 70. Utiliser des maquettes d'applications pour montrer vos conceptions: Maintenant, créons une belle maquette de ce design. Ce que nous allons faire, c'est que nous allons appuyer sur « Control A » et « Control C » pour copier ou « Control Shift C » si vous voulez tout copier, et j'utilise cet iPhone 6 maquettes de Pixeden. Si tu veux, tu peux voir ici. iPhone 6 Maquettes Pixeden. Ce sont essentiellement des maquettes de Pixeden pour iPhone 6, et je les utilise. Ce que je vais faire, c'est quand j'ouvrirai ce fichier, il y avait essentiellement trois autres iPhones de plus, donc j'ai sélectionné celui-ci, un blanc. C' est essentiellement la vue de face. Vous devez simplement double-cliquer ici et vous devez coller votre design ici. Laisse-moi cacher celui-là. « Contrôle V » ici et barre d'état, j'utilise essentiellement cet effet Color Overlay. J' ai ajouté cette Color Overlay à ce sujet. Si j'essaie de le cacher, vous pouvez voir qu'il est déjà blanc. Mais si vous voulez une autre couleur, comme si je veux une couleur pourpre dans cette barre, je peux l'utiliser ou même si je veux cette couleur verte, je peux l'utiliser. Je peux utiliser n'importe quelle couleur ici. C' est plus facile à contrôler de cette façon. J' utilise le blanc en ce moment. Maintenant, juste vous avez besoin de « Control S » sauver, et vous pouvez voir ici nous avons notre maquette. Il a l'air très agréable, et puis il y a eu deux autres maquettes qui étaient la vue de ce trimestre. Il est un peu de vue de côté. J' ai sélectionné ce noir et c'est là que notre design est très soigné dans cette vue latérale. J' ai choisi ce noir et j'ai caché les deux autres, qui étaient ces deux. Sélectionnons simplement celui-ci double-cliquez, cliquez sur « Okay », « Control B ». Déplacez la barre d'état au-dessus de ce calque. Je suppose que c'est déjà de couleur blanche. Si vous le souhaitez, vous pouvez utiliser les styles de calque et appliquer la superposition de couleur, qui est blanche. C' est essentiellement, nous pouvons facilement contrôler la couleur. « Control S », sauvez-le, et vous pouvez voir ici, voici comment nous utilisons ces maquettes. Ceux-ci aident vraiment nos clients et d'autres personnes à montrer votre design et c'est une bonne pratique à montrer, toujours montrer vos designs comme ça. C' est la version finale où je voulais vous montrer comment utiliser ces maquettes. Ajoutons ici aussi. Déplacez cette barre d'état vers le haut. Ou laisse-le juste ici. Voyez à quoi ça va ressembler. Je vais fermer ces fichiers PSP. C' est à quoi ressemble notre design, et ici je suppose que nous avons aussi besoin d'une barre d'état. Pourquoi c'est noir, nous avons besoin d'une barre d'état blanche ici. Faisons en blanc Color Overlay blanc et c'est tout. Maintenant, il est beau, et cela termine la finale de ce design iPhone. Je vais créer plus d'application iPhone pour l'Android je suppose. Restez à l'écoute et prenez soin, et à bientôt dans d'autres conférences. 71. Astuce simple pour supprimer les arrière-plans blancs: Bonjour, tout le monde. Nous allons faire quelques choses d'édition d'images dans cette section. La première conférence est sur la suppression du fond blanc avec une simple astuce. C' est le résultat final que j'ai obtenu. Beaucoup d'entre vous, lorsque vous concevez dans Photoshop, vous pouvez avoir quelques images. Ils ont un fond blanc comme celui-ci. Il y a une astuce très simple pour supprimer cet arrière-plan, et je vais vous dire le secret. Maintenant, commençons. Ce que nous allons faire, c'est que nous allons supprimer rapidement ce fond blanc avec des options de fusion. Je vais cliquer sur Nouveau, 1440 par 900 Transparent, OK. Alt Supprimer pour remplir le calque. Je vais ramasser cet outil Rectangle et dessiner un rectangle ici comme ça. Changeons sa couleur en bleu très terne comme celui-ci. Cette astuce ne fonctionne qu'avec des arrière-plans très clairs. Si vous essayez d'utiliser un fond plus sombre alors nous allons voir la prochaine conférence à ce sujet, nous allons supprimer ce fond blanc. Glissons mon image ici, j'ai téléchargé à partir de Dreamstime. C' était une image quand je l'ai utilisée pour un de mes clients. Déplaçons ça par ici. Rendons ce rectangle d'arrière-plan un peu plus grand car il a moins d'espace autour d'elle. Déplacez-le vers le bas, et nous allons l'aligner au milieu, je vais Alt Control H. Ce que je vais faire, c'est maintenant que je vais supprimer rapidement le fond blanc, alors passons à ce calque. Dans le panneau Calques, vérifiez que vous avez sélectionné ce calque d'image, puis accédez à Options de fusion et choisissez cette option d'assombrir. C' est un tour de magie très soigné. Vous pouvez voir ce fond blanc juste disparu, et vous pouvez également utiliser cette couleur plus foncée, les deux fonctionne très bien dans la suppression des fonds blancs sur des couleurs plus claires. Si j'essaie de changer la couleur de quelque chose comme ça, fond clair, cela fonctionnera très bien. C' est un truc très soigné. Vous pouvez facilement supprimer des arrière-plans comme celui-ci et vous pouvez fusionner arrière-plans blancs dans n'importe quel fond blanc ou très clair. Si vous concevez, essayez de trouver des images qui ont des fonds blancs. Ils sont très faciles à régler et très faciles à enlever. C' est le truc que je voulais partager avec vous. Passons à la leçon suivante, où nous allons supprimer le fond blanc rapidement avec une autre méthode. Alors restez à l'écoute et posez-moi des questions. Passons à la leçon suivante. 72. Suppression des objets de l'image avec guérissions ponctuelles: Bonjour tout le monde. Dans cette leçon, nous allons faire un peu plus de travail Photoshop avec quelques images. Dans cette leçon, ce que je vais faire, c'est que je vais nettoyer cette image. Vous pouvez voir l'image ci-dessous, c'est l'image d'un de mes clients. Vous pouvez voir les fils autour ici, par ici, un par ici, et puis il y a une branche d'arbre par ici. Donc, ce que nous allons faire dans cette leçon, c'est la première étape, nous allons supprimer tous ces détails, et dans la leçon suivante, nous allons lui donner un effet dramatique comme ce nuage et quelques ajustements de couleur. Je ne suis pas un maître des ajustements de couleur, mais je vais vous donner quelques bits d'un guide pour que vous puissiez facilement manipuler certaines de vos images car lorsque vous concevez des UIS, il y a beaucoup de fois où vous devez éditer des images. abord, je vais commencer par cette image, alors passons à Consolider tout dans les onglets. C' est notre image finale, c'est l'image avec laquelle nous allons travailler. Maintenant, ce que nous allons faire est que nous allons utiliser cet outil de brosse de guérison des taches. La touche de raccourci est J. Si vous ne voyez pas l'outil Pinceau de guérison ponctuelle ici, vous pouvez aller à cette barre de trois points et vous pouvez modifier votre barre d'outils. Il s'agit de la nouvelle fonctionnalité de la dernière version de Photoshop. Essayez de cliquer sur cette édition et faites glisser les outils que vous voulez ici. C' est ainsi que fonctionne cette barre d'outils personnalisée. Je vais sélectionner l'outil Pinceau de guérison des taches. Dès que j'aime ça, vous pouvez voir qu'on a un pinceau ici, c'est la taille de la brosse, dureté, assurez-vous qu'il est 100 pour cent. On ne veut pas une brosse très douce. Ensuite, nous avons le mode Normal, que ce soit comme ça. Maintenant, l'essentiel est ce type. Vous devez sélectionner l'option Content Aware. Ne sélectionnez pas cette correspondance de proximité ou Créer une texture. Sélectionnez cette fonction Content-Aware et commencez à brosser les objets que vous voulez disparaître. abord, ce que nous allons faire est que nous allons dupliquer ce calque pour ne pas perdre notre image principale. Je vais juste le brosser comme ça. Comme ça. Si vous voulez beaucoup de perfection, vous devriez zoomer. Donc c'est comme ça que nous travaillons ici. Comme ça. Un fil a été enlevé par magie et il suffit de brosser dessus comme ça. Je vais aussi brosser cette branche d'arbre, et enfin nous allons brosser ces deux fils ici comme ça. Vous pouvez voir que tous les fils ont disparu. Il y a encore une chose que vous pouvez voir ici, c' est une lumière ou un arroseur ? Une sorte de chose comme ça. Augmentez la taille de votre brosse en appuyant sur les touches de support de votre clavier et appuyez simplement une fois. Sur ce clic une fois, et vous pouvez voir toutes les choses supplémentaires que nous voulions supprimer ici nous les avons supprimés. Même si vous voulez aller plus loin, vous pouvez enlever ce petit bâtiment ici, mais je pense que cela nous pose quelques problèmes, alors réduisons notre brosse. Vous pouvez voir que j'ai enlevé ce bâtiment ici aussi. C' est ainsi que fonctionne cet outil de brosse de guérison ponctuelle sensible au contenu. Dans la prochaine conférence, nous allons ajuster certaines des couleurs et de la luminosité et de la vibrance de cette image. Passons donc à la prochaine conférence. 73. Faire ressortir les couleurs dans des images: Dans cette leçon, nous allons convertir cette image en plus proche de celle-ci, un peu de nuages dramatiques, différentes couleurs, et un peu plus d'ajustements ici. Alors commençons. Ce qu'on va faire, c'est utiliser nos courbes ici. Donc, ces courbes vont essentiellement compresser ou décompresser vos tons de votre image. Donc, ce que nous allons faire, c'est que nous allons utiliser un point ici, juste cliquer sur cette ligne, un point par ici et un point par ici. Maintenant ce que je vais faire, c'est que je vais faire glisser ce point un peu vers le haut, celui-ci un peu vers le bas, comme ça, comme ça. Et celui-là aussi. Rapprochons celui-ci un peu plus de ça, comme ça. Déplacez le haut un peu sur la gauche, et vous pouvez voir que nous avons obtenu presque le même effet que nous voulions sur ces nuages. Maintenant, ce que je vais faire, c'est que je vais convertir cette image dupliquée. Dupliquons et je vais le convertir en noir et blanc, allez à Réglages et désaturation. Je vais le désaturer et je vais utiliser une lumière douce linéaire comme ça. Vous pouvez également réduire l'opacité de la lumière douce à 50 %. Même sans courbes, cette lumière douce fonctionne très bien. Vous pouvez voir la différence ici. Vous pouvez le faire avec n'importe quelle image, il suffit de la dupliquer et de la désaturer avec cet ajustement et de déplacer ces options de mélange vers lumière douce et d'utiliser l'opacité pour contrôler la lumière douce. C' est l'effet que nous pouvons facilement obtenir dans n'importe quelle image. Si vous voulez changer des tons différents, vous pouvez utiliser ces Courbes, et en plus, nous pouvons également utiliser ces Vibrance. Ce sont essentiellement les couleurs. Vous pouvez voir parfois nous disons que j'ai besoin d'un peu de pop dans cette image, les couleurs devraient être sautées, donc si vous déplacez ce curseur à la bonne valeur maximale, vous pouvez voir les couleurs apparaissent vraiment. Donc, ce que je fais est de diminuer habituellement cette saturation à 5 moins 5. La saturation est aussi l'intensité de la couleur et la vibrance est également liée à cela. C' est comme ça que je change l'image ici. Maintenant, vous pourriez voir une nuance bleuâtre dans le ciel. C' est très simple, il suffit de cliquer sur ce calque d'arrière-plan, et j'ai utilisé un calque d'ajustement, qui est fondamentalement nous pouvons utiliser une couleur unie, sorte de couleur bleue ici comme ça, et nous allons pour réduire son opacité à 20 pour cent et le garder à cela, comme ça. Vous pouvez voir l'effet de ce remplissage de couleur bleue. Si je veux le changer, je peux le changer ici comme ça. Maintenant, il donne un peu d'effet bleuâtre sur toute l'image. Donc, c'est Color Fill, même si je supprime les Courbes, vous pouvez toujours voir ce Color Fill et même cet effet de lumière douce avec ce calque désaturé, nous avons un très bon effet ici. Si j'active ces courbes, d'accord maintenant, si vous voulez réduire l'opacité, vous pouvez également réduire l'opacité de ce canal de courbes, ou couche de courbes. Je vais donc le réduire à 40 pour cent et Vibrance, je vais sélectionner cette Vibrance et aussi la réduire à 80 pour cent. Ok, maintenant c'est l'effet final de cette conférence, donc juste pour résumer, ce que nous avons fait est que nous avons dupliqué cette même image sur un autre calque et nous utilisons cette Image, Réglages et Désaturation. Commande est Control Shift et U, et option commande U pour max. Donc, j'ai utilisé ceci, et puis juste oublier tout cela, puis j'ai sélectionné cette couche supérieure en noir et blanc et utilisé cette option de mélange de lumière douce et réduit l'opacité à 50 pour cent. Ensuite, j'ai utilisé le calque d'ajustement d'ici, qui est de couleur unie. Vous pouvez également utiliser le dégradé si vous voulez deux couleurs dans cette image, différentes couleurs de haut en bas. Maintenant, j'ai utilisé ce remplissage de couleur, assurez-vous que je l'écrête avec ce calque, donc Alt, cliquez entre ces deux calques pour les découper, et ce bleu n'est appliqué qu'à ce calque, puis j'ai utilisé quelques courbes. J' ai ajusté ces courbes, juste joué autour d'eux pour que je puisse obtenir l'effet désiré. Puis avec le Vibrance, j'ai juste utilisé Vibrance pour rendre les images plus apparentes ou tout ce que tu as dit. Maintenant, c'est la fin. Je vous ai dit deux ou trois techniques pour modifier vos images. Vous pouvez les utiliser sur des images portrait, votre visage ou n'importe quelle image que vous possédez. Je suppose que cela couvre les bases de l'édition d'images pour tous les concepteurs de l'interface utilisateur, et si je viens avec autre chose, je vais créer de nouvelles conférences, alors restez à l'écoute et prenez soin de passer à la prochaine conférence. 74. Édition de fond avec l'outil Lasso magnétique: Aujourd'hui, nous allons enlever l'arrière-plan de ce gars. En fait, les antécédents qu'il avait étaient quelque chose comme ça et nous l'avons enlevée en très peu de temps. Ces techniques impliquent essentiellement l'utilisation de l'outil Lasso, qui est cet outil magnétique Lasso, outil Photoshop. Commençons et supprimons l'arrière-plan de ce gars et utilisons n'importe quel autre arrière-plan que nous aimons. Cette sélection fondamentalement, nous avons aussi une partie de cheveux et quelques autres domaines comme ça, ceci , ceci, donc nous allons utiliser cet outil Lasso pour supprimer tout cela. Commençons. Je vais importer l'image que j'ai. C' est une image libre. Je ne me souviens pas d'où j'ai eu cette image, mais je vais sûrement la chercher et elle est déjà ouverte. Je vais recommencer. Je vais supprimer ces couches. C' est essentiellement l'image que nous avions. Maintenant, d'abord, je vais faire est de dupliquer cette couche, puis nous allons sélectionner cet outil Lasso, outil Lasso magnétique à partir des outils de Photoshop outils. Dès que vous sélectionnez cet outil Lasso, et vous pouvez voir qu'il y a différentes options ici, donc ce sont des options d'alimentation. chargeur signifie qu'il va brouiller un peu les coins, donc je pense qu'on n'en a pas besoin maintenant, alors gardez-le à zéro. Assurez-vous que l'anti-alias est coché. Cette largeur est essentiellement la largeur de l'outil de sélection, donc si la largeur est très petite, vous pouvez deviner qu'il s'agit essentiellement de la précision de cet outil Lasso magnétique. Fondamentalement, c'est s'écraser sur le contraste du sol nu et de ce type ici. Vous pouvez voir comment cela fonctionne comme ça. Je suis en ce moment en utilisant une sélection très rugueuse juste pour m'assurer que vous savez comment cela va fonctionner. Supprimons cette sélection. La largeur est essentiellement la précision que vous voulez dans la sélection. Si vous voulez une sélection très précise, alors vous pouvez la réduire, puis le contraste. C' est le contraste entre ce sol nu et le bras de ce type, vous pouvez voir ici. Ici aussi, nous avons beaucoup de contraste, mais ici nous avons beaucoup moins de contraste. Ces couleurs sont presque similaires, donc je vais réduire le contraste à cinq ou dix pour cent, cinq pour cent. La fréquence est essentiellement le nombre de points que Photoshop va mettre pour votre outil Lasso Magnétique. Comme vous pouvez le voir ici, nous avons 10 ou 15 points, donc la fréquence, si vous voulez le mettre haut, vous pouvez le mettre haut. Si votre objet est très audacieux et a beaucoup de [inaudible] d'arêtes, alors je pense que la fréquence devrait être réglée à haute. part ça, je pense que tous les réglages sont assez bons. Maintenant, c'est pour la pression du stylo. Nous n'utilisons pas de tablette ou tout autre appareil, donc j'utilise ma petite souris, donc nous n'allons pas l'utiliser juste pour simuler. Maintenant, nous allons utiliser cet outil Lasso Magnétique pour faire réellement la sélection. Je vais cliquer ici et laisser le Photoshop faire son truc. Chaque fois que je sens qu'il y a quelque chose que je dois rendre précis, je peux ajouter manuellement un autre point d'ancrage en cliquant ici comme ça, donc c'est plus précis comme ça. Ici, nous avons la main de ce gars, puis l'oreille et vous pouvez voir comment je clique et comment j'utilise ce point d'ancrage manuel pour mon propre usage ou avantage. Ne vous inquiétez pas des zones qui sortent de cette sélection. Nous allons l'ajuster avec une autre technique qui est Refine Edge. Notre sélection est presque terminée. Maintenant, nous avons la sélection. Quand nous en viendrons au premier point, il va montrer cette forme ovale. suffit de cliquer dessus et vous pouvez voir la sélection est faite. Maintenant, la deuxième partie, nous devons soustraire ces zones de la sélection, donc nous allons sélectionner cette soustraction de sélection et nous allons sélectionner ces zones ici, dont nous n'avons pas besoin dans notre sélection. Comme ça. Et celui-là aussi. Si vous avez une erreur et que vous voulez revenir en arrière, appuyez simplement sur retour arrière deux ou trois fois et c'est ainsi que cela remonte. Maintenant, la sélection est faite aussi, alors nous avons ces sélections internes dans cette main. Je pense que nous devons augmenter un peu le contraste et aussi cette largeur parce qu'il a beaucoup de contraste dans ces domaines. J' augmente le contraste. Vous pouvez effectuer un zoom avant si vous le souhaitez. Vous pouvez appuyer sur Ctrl plus et zoomer avant. Si vous voulez plus de zoom, vous pouvez aller comme ça. Si vous souhaitez déplacer votre image pendant que vous avez sélectionné cet outil Lasso, vous pouvez appuyer sur la barre d'espace et vous pouvez vous déplacer comme ceci et relâcher la barre d'espace. Vous pouvez voir de près comment ces sélections fonctionnent par magie. Ce sont quelques-unes de nos dernières sélections et ensuite nous allons laisser ceci. Il y a encore une très petite sélection ici. Il est préférable de zoomer si vous avez de très petites zones que vous devez sélectionner. Maintenant, je vais zoomer et nous allons utiliser cette affine et vous pouvez voir ici, appuyez sur ceci. Maintenant, il y a différents modes. Des fourmis assorties. Ok, superposition. Je l'aime mieux parce que je peux le voir sur un fond rouge et je peux voir où sont les bords et les choses que je veux rendre précis. Certaines personnes aiment quelque chose comme ça, quelque chose comme sur blanc, mais j'aime celui-là. C' est ainsi que vous voyez ou présentez pendant que vous utilisez la technique de ce raffineur. Maintenant, ce que vous allez faire, la prochaine étape que vous allez sélectionner le rayon intelligent et vous pouvez voir ici, j'ai quelque chose avec un style pinceau plus signe ici. Si vous voulez réduire sa taille, vous pouvez appuyer sur ces crochets sur votre clavier comme ça. Rendez-le un peu plus petit pour des résultats plus précis. Ce que je vais faire, je vais donner à Photoshop mon contour ou le bord de cette image que je suis en train d'éditer, donc je vais simplement appuyer et glisser et peindre sur le bord de cette image comme ceci et nous allons juste donner Photoshop le bord de cette image. Ne vous inquiétez pas, nous pouvons le réparer par la suite avec nos techniques de masquage. Vous pouvez déjà voir qu'il a rendu notre image beaucoup mieux. Maintenant, ces zones, nous devons les réparer aussi, un et ensuite celui-ci, deux. Ici, nous avons un petit problème. Cela a effacé notre problème. Nous allons faire face à ce petit point blanc avec une autre technique, alors ne vous inquiétez pas pour le moment. Donc maintenant, nous avons un peu de problème avec ces cheveux. Faisons notre sélection un peu à l'intérieur de ces cheveux. Maintenant, ce blanc derrière ces cheveux ici a été enlevé. Maintenant, venir à ces options. Nous avons terminé avec ce rayon intelligent de détection de bord, donc l'étape suivante est de savoir comment ajuster le bord. Nous pouvons l'assouplir si nous le voulons, s'il se sent très déformé. Nous ne l'utiliserons pas. Plume, si j'allume cette plume, vous pouvez voir qu'il y a un champ flou tout autour de cette sélection. Parfois, nous n'avons pas une sélection très précise, et nous voulons une plume pour pouvoir l'ajuster facilement. instant, nous n'allons pas utiliser la plume. Peut-être que deux pixels sont assez bons. Maintenant, si vous essayez d'augmenter le contraste, vous pouvez voir que ce contraste de bord s'améliore fondamentalement. Vous pouvez voir ici, la main et tout, alors passons à cinq pixels. Je pense qu'on n'a pas besoin de trop de contraste, peut-être 10. Shift edge signifie que si je vous montre le rayon, c'est le rayon que nous dessinons pour notre rayon intelligent pour donner à Photoshop les bords de cette photo. Maintenant, si j'essaie de déplacer le bord, il va en fait déplacer le bord de ce rayon intelligent que nous dessinons ici. Donc, si j'essaie de le changer vers l'extérieur, vous pouvez voir qu'il sélectionne des pixels externes. Donc peut-être, nous pouvons choisir quelque chose comme ça plus cinq parce que notre main bougeait à l'intérieur de ça. Maintenant, la dernière sortie. Donc, ce que nous allons faire est que nous allons utiliser un nouveau calque avec masque de calque pour afficher cette sélection. Donc, en gros, ce que nous faisons, c'est que nous affinions notre sélection. Maintenant, nous allons appuyer sur « Ok », et ici, nous avons notre nouvelle image avec cette sélection et ce masque. Maintenant, je vais créer un nouveau calque et le remplir avec n'importe quelle couleur que j' aime, comme celle-ci sombre. Vous pouvez voir, nous avons encore quelques problèmes ici. C' est essentiellement le problème avec notre dernier masquage où nous avons déplacé le bord à l'extérieur de ses cheveux. Maintenant, nous avons ces masques de calque, alors allez à ce masque de calque et sélectionnez la couleur noire x. vous pouvez voir ici, nous avons noir. Appuyez sur le « B », pinceau. Appuyez sur le blanc. Fondamentalement, nous devons sélectionner le blanc comme couleur de premier plan et nous voulons que cela montre sa main parce qu'il est caché dans l'original comme celui-ci. Ici, nous avons aussi quelques problèmes ici. La main, nous en avons besoin pour être visible. Si vous voulez rendre la brosse plus petite, vous pouvez appuyer sur les touches dont je vous ai parlé, les touches de support. Maintenant, nous pouvons également sélectionner ce pinceau. Inverser la sélection. Si vous voulez cacher quelque chose, sélectionnez noir comme ceci. Vous pouvez voir que j'utilise le noir en ce moment. On peut enlever les cheveux si tu veux, alors ne t'inquiète pas pour la coiffure de ce type. Retirer quelques poils ne nuira pas à cette personne wow. Nous avons presque fini. Nous devons enlever cette zone floue extérieure, ceci ici, et certains ici. Ce que j'utilise, c'est que j'utilise juste un outil de pinceau pour affiner un peu plus ce masque, et je pense que nous en avons presque fini. Sélectionnez une autre couleur pour cet arrière-plan. Choisissons le jaune parce que ce gars était un peu sur le fond de l'ombre jaunâtre, donc cela fonctionne très bien. C' est donc le résultat final que nous avons obtenu avec cette image, et j'espère que vous avez compris le fonctionnement de cet outil de lasso magnétique. C' est ainsi que je supprime normalement l'arrière-plan de la plupart des images. Vous pouvez également utiliser cet outil de stylo, mais je pense qu'il est très long de tout sélectionner manuellement et chaque courbe et tout ici comme ça. Donc, la plupart des gars experts ou les gars qui font beaucoup de retouche d'image et de retouche d'image, ils sont très experts avec cet outil de stylo, et je pense qu'ils l'utilisent normalement. C' est très précis. Mais pour la partie cheveux, je suppose que cet outil de lasso magnétique et affine bord fonctionne très bien. C' est tout au sujet de la conférence d'aujourd'hui. Si vous ne comprenez rien, posez-moi des questions, et je suppose, passons à de nouvelles conférences. 75. Utiliser l'outil Select et Mask pour nettoyer l'arrière-plan: Aujourd'hui, nous allons explorer une nouvelle fonctionnalité de Photoshop CC 2015.5, qui est ce Select and Mask. Il a beaucoup de nouvelles fonctionnalités. Je pense qu'ils ont fondamentalement converti ce Refine Edge en ce nouvel outil. Donc, aujourd'hui, nous allons discuter de celui-ci. Maintenant, l'arrière-plan que nous allons supprimer est cet arrière-plan de cet enfant. Vous pouvez voir ici ce fond. Vous pouvez voir cet enfant a beaucoup de cheveux et il est difficile d'extraire tous les détails dans les cheveux facilement. Commençons. Maintenant, je vais supprimer cette sélection précédente. Tout d'abord, ce que nous allons faire est que nous allons aller à cet outil Lasso, donc j'ai vu que cela fonctionne très bien avec cet outil Lasso normal. Ce que nous allons faire, c'est que nous allons continuer à appuyer sur notre touche gauche de la souris et continuer à glisser comme ça. Je vais obtenir une sélection et m'assurer que la sélection n'est pas trop large des cheveux. Tu vois que je laisse des cheveux dehors comme ça. Gardez votre sélection à l'intérieur. Ne prenez pas trop de zone extérieure dans ça. C' est une sélection très rugueuse. Vous pouvez voir ici, appuyez sur Maj pour faire une ligne droite. Je vais le combiner avec celui-ci. Encore une chose, si votre image est trop grande, il y a un truc que vous devriez continuer à appuyer sur la touche Lasso et appuyer sur la barre d'espace et déplacer l'image vers le haut ou vers le bas. Pendant ce temps, continuez à appuyer sur la touche de votre souris. Si vous relâchez la touche de la souris, elle va fermer le chemin. Pendant que vous êtes dans cet outil Lasso, ne relâchez pas votre touche de souris, quoi que vous fassiez. Maintenant, nous allons appuyer sur cette sélection et masque. Ici, nous avons, il y a différents modes de prévisualisation. Vous pouvez voir ici il y en a un nouveau qui s'appelle Onion Skin. Il montre essentiellement l'arrière-plan avec une certaine transparence si vous pouvez voir. C' est ce que nous avons en ce moment, vous pouvez voir par ici. D' autres options sont également presque les mêmes que l'option Affiner le bord. Vous pouvez voir ici Shift, Edge, Contraste Feeder, Lisse. Assurez-vous de cliquer sur cette profondeur contaminer les couleurs. Assurez-vous qu'il est coché et que la sortie doit toujours être un nouveau calque avec masque de calque. Maintenant, je n'aime pas cette peau d'oignon. J' aime normalement ce fond rouge donc je peux facilement voir ce que j'ai sur cette sélection. Voici quelques outils. Vous pouvez voir ici, le haut est essentiellement l'outil de sélection rapide, c'est le même que nous avons utilisé précédemment. Ensuite, nous avons ce Refine Edge. C' est le même pinceau Refine Edge que nous avons utilisé auparavant. Ensuite, il s'agit de l'outil Pinceau. Donc, ce qu'il fait est que vous pouvez voir si je clique ici, il est fondamentalement en train de changer mon masque de calque. J' ai déjà masqué cette zone, mais si je veux montrer une zone, je peux toujours l'utiliser. Comme ça. Vous pouvez voir ici, il nous reste quelque chose et je vais utiliser cet outil pour récupérer les vêtements comme ça. Si vous voulez supprimer une partie, vous allez appuyer sur la touche Alt ou Option et il va supprimer cette partie de votre sélection. Vous pouvez voir ici, si je veux supprimer cela et aussi cette zone, et aussi cette zone, J'appuie en ce moment, Alt Option touche avec cet outil Pinceau. Vous pouvez voir ici, voici la taille et la dureté de la brosse, assurez-vous toujours qu'il est 100 pour cent dur. La deuxième chose est que nous allons maintenant aller à cet outil de pinceau Refiner Edge. Nous avons aussi l'outil Lasso par ici. C' est essentiellement l'outil Sélection rapide et Lasso. Ce sont les mêmes outils que Photoshop, mais ils sont inclus dans cette vue Sélection et Masque. On n'a pas besoin de revenir en arrière. Il s'agit de notre outil à main et il s'agit de l'outil de zoom Loupe. Vous pouvez utiliser Contrôle ou Commande plus pour effectuer un zoom avant et un zoom arrière. Commande plus et moins ou Contrôle plus moins. Maintenant, nous allons aller à cet outil Pinceau Refine Edge, qui est notre outil principal. Je vais augmenter la taille de la brosse comme ça. Maintenant, je vais brosser les bords de cet enfant. Maintenant, assurez-vous que vous pouvez voir comment je me brossais en ce moment. Le signe plus est presque au bord de ce gamin. Ici, je me brossais à l'intérieur des cheveux. Vous pouvez voir comment il est comme par magie enlever tous les cheveux et tout le fond derrière ces poils fins. Je pense que j'aime presque vraiment ce nouvel outil et cette nouvelle technique. Vous pouvez voir par magie, il a enlevé la partie la plus difficile qui est les cheveux, et le fond derrière ces cheveux. Il les a tous enlevés en un instant. Maintenant, si vous voulez augmenter le contraste, vous pouvez augmenter ici comme ça. Vous pouvez aussi voir ici, maintenant, je vais passer à l'outil de brosse. Je vais me brosser ici. Je vais zoomer un peu. Je peux voir un peu de fond rouge dans cette veste, donc je vais me brosser ici comme ça. Également dans ce domaine. Je vais me brosser ici, juste pour réparer deux choses ici. Si vous voyez quelque chose d'autre qui fuit ou qui a un problème, vous pouvez brosser cela aussi. Vous pouvez voir ici, je me brossais en ce moment sur les bords. Je pense qu'ils sont presque réparés. Maintenant, vous pouvez voir comment il est si facile avec ce nouvel outil Sélectionner et Masquer de remplacer l'arrière-plan ou d'effacer l'arrière-plan. Assurez-vous que vous savez ce que tous ces outils aussi, c'est Sélection rapide, c'est l'outil Lasso. Ce sont essentiellement des outils pour les sélections et celui-ci est Affiner Edge. Vous allez toujours le déplacer le long des bords de votre image. C' est essentiellement l'outil de brosse pour cacher et montrer vos zones masquées, les zones masquées ou ici maintenant. Laissez-moi sortir vers le nouveau calque avec Masque de calque et appuyez sur « OK ». Maintenant, vous pouvez voir ici, il est très clair et propre arrière-plan. J' ai tous facilement enlevé les cheveux et le fond, les séparer facilement. Voici quelques autres utilisations. Vous pouvez voir ici, j'ai extrait cette fille de l'arrière-plan. Laisse-moi te montrer. C'était le contexte réel. J' utilise la même technique et je l'ai extraite. Vous pouvez voir ici, j'ai aussi produit cette fausse ombre ici. Vous pouvez voir aussi cette fille, l'image réelle est celle-ci. Ce que j'ai fait, c'est que j'ai enlevé l'arrière-plan et ajouté le paysage urbain à l'arrière-plan. Maintenant, cet outil est vraiment cool. Vous pouvez facilement contrôler et enlever les zones facilement. Une chose est que si votre zone d'image est très floue, comme vous pouvez le voir ici, il y a quelques problèmes ici. Assurez-vous que votre image est un peu nette et que vous pouvez voir ici, tout est net, il n'y a rien de brouillé beaucoup. Il peut facilement l'enlever. Maintenant, si vous voulez apprendre cette fausse technique d'ombre, c'est très simple. Je viens d'ajouter une ombre, ombre portée avec un calque ici. J' ai ajouté cette ombre, vous pouvez voir ici, distance 20,111 taille et multiplier 13. Il va fondamentalement ajouter une ombre, une ombre portée. Je vais cacher celui-là pour que vous puissiez voir ce que c'est. Comme ça. Déplaçons la distance et la propagation un peu plus. Maintenant, ce que je vais faire, c'est pendant que ce calque est sélectionné, je vais aller à Calque et je vais à Styles de calque. Je vais aller à ce Create Layer. Fondamentalement, il s'agissait de créer un calque à partir de styles de calque, mais je ne sais pas pourquoi ils l'ont renommé Créer une couche. Vous pouvez voir ici cette presse « Ok ». Vous pouvez voir que cette ombre portée est séparée de mon calque. C' est ainsi que vous séparez l'ombre portée. Maintenant, je vais à Commande+D ou Ctrl+D mon ombre portée. Je vais cliquer avec le bouton droit de la souris et le déformer. Je vais le déplacer comme ça. Maintenant, mon ombre est par ici. Si vous voulez le déformer davantage, vous pouvez le déformer à votre gré. Vous pouvez déplacer les jambes plus près du sujet, la fille, et aussi de cette zone comme ça. Vous pouvez voir que c'est une fausse ombre très parfaite. C' était juste une technique très pratique. J' ai pensé que je devrais le partager avec vous. Tout cela concerne l'utilisation de ce nouvel outil Sélectionner et Masquer. Il est vraiment beau et il est vraiment rapide de supprimer arrière-plans très difficiles et séparer les images lourdes ou très difficiles de leur arrière-plan. Si vous avez des questions, faites-le moi savoir. Passons à la leçon suivante. 76. Quels sont les cadres de wireframes ?: Aujourd'hui, nous allons parler des filaires, de ce que nos filaires, et du rôle qu'ils jouent dans la conception de l'interface utilisateur. Chaque conception d'interface utilisateur commence par un filaire. Qu' est-ce que filaire ? Wireframe est essentiellement le modèle de votre design numérique. Si vous avez une application, une page Web ou une page d'apprentissage, vous devez d' abord créer un filaire, donc la première étape est un filaire. Wireframe peut être créé par votre client. Donnez-leur un stylo et du papier et laissez-les esquisser leurs idées sur ce papier. En outre, vous pouvez utiliser Photoshop pour concevoir des trames filaires. Vous pouvez également utiliser beaucoup d'autres outils. Je vais te montrer dans quelques minutes. Permettez-moi tout d'abord de vous montrer quelques exemples de filaires. Vous pouvez voir que c'est le filaire d'un jeu et c'était un jeu de paris. Je l'ai conçu en utilisant Photoshop. Vous pouvez voir que c'est à quoi ça ressemble. Il a beaucoup d'écrans, mais c'est l'un de l'écran. C' est un autre filaire et je l'ai conçu avec un autre logiciel, qui s'appelle XOR BR. C' est très coûteux. Quoi qu'il en soit, je l' ai conçu, il y a quelques années. Ceci est un autre exemple de site Web de panier d'achat. Ceci est un autre exemple d'une application filaire mobile. Elle m'est donnée par un client. C' est à ça que ça ressemble. C' est l'un de l'écran. Ensuite, c'est un autre qui m'a été donné par un client. Je pense qu'il a également été conçu dans Photoshop. Tout est en gris. La plupart du temps, ces filaires sont en échelle de gris, ils n'ont que du noir et du gris et du blanc. Le concepteur a la pleine autorité à la fin et la pleine puissance créatrice qu'il peut utiliser n'importe quelle couleur ici. Si j'essaie de spécifier n'importe quelle couleur dans le filaire, alors le concepteur pourrait penser que c'est les couleurs primaires et il devrait l'utiliser dans ses conceptions. C' est l'un des filaires que j'ai reçu du client. C' est un autre filaire que j'ai conçu pour mon propre site Web. Vous pouvez voir ici, ce sont les quelques sections. Je pense que vous avez vu mon site web. C' est un peu différent maintenant, mais c'est le premier filaire que j'ai fait pour mon site web, il est conçu dans un autre logiciel appelé Balsamiq Mockups. Il s'agit de filaires. Les choses que vous devez garder à l'esprit sont de ne pas utiliser trop de couleurs, seulement souligner, ce qui est comme si c'est un bouton. J' ai utilisé du vert ici. Aussi, vous pouvez commenter sur le côté, comme je l'ai commenté, laissez-moi vous montrer. C' est la seule image filaire que j'ai faite pour un client. Vous pouvez voir ici, j'ai commenté pourquoi j'utilise cette technique ou pourquoi cet élément d'interface utilisateur est ici. Vous pouvez voir ici aussi ces sections, toutes les sections, ils ont des commentaires comme celui-ci. Vous pouvez également utiliser des commentaires même dans Photoshop et dessiner une boîte ici avec un fond rouge ou un fond jaune et y mettre un peu de coing. Il s'agit de filaires. Dans la prochaine leçon, nous allons passer en revue quelques-uns des outils que nous utilisons pour les trames filaires. Quels sont les outils en ligne et quels sont les autres logiciels et applications. Passons à la leçon suivante. 77. Outils utilisés pour créer des fichiers de wireframes: Maintenant, nous allons parler de certains des outils que nous utilisons pour le filage. Vous savez déjà ce que sont les filaires. Allons à la page Web où j'ai tous les liens. C' est l'un des outils que j'ai utilisés, Axure RP et c'est un outil un peu très avancé. Il crée également des prototypes. prototypes sont des filaires de travail où vous cliquez sur les liens et ils vont à la page suivante. Il peut également exporter vos prototypes en HTML, donc c'est bon pour les grands projets comme le commerce électronique un projet, ou quelque chose de très grand. Donc vous pouvez utiliser celui-ci. C' est un peu cher. Je pense que, peut-être 3, 400, je ne me souviens pas. Je pense que c'est 495 par utilisateur et l'équipe a 895. Je pense que c'est bon pour les grandes entreprises de logiciels. Je voulais vous montrer que vous savez que c'est l'un d'eux Axure RP 8. Ensuite, nous avons un autre outil qui est très célèbre parmi les différents concepteurs d'interface utilisateur. J' ai vraiment aimé celui-là, Balsamiq Mockups. C' est très facile. Ses fils sont très esquissés, donc n'ont pas de coins très spécifiques ou quelque chose comme ça. Permettez-moi de vous montrer quelques exemples. Où en sont les exemples ? C'est un. Vous pouvez voir comment ce site a été aménagé et cette maquette a été construite. J' ai vraiment aimé ce logiciel, Balsamiq Mockups. Je pense que ça coûte environ 90$. Je pense que c'est un peu dans la gamme. Mais si vous avez déjà Photoshop, c'est la meilleure option. Vous pouvez utiliser Photoshop pour créer vos trames filaires, et c'est le prochain sujet que je vais aborder. Si vous avez Photoshop, vous pouvez télécharger beaucoup de kits de maquette gratuits. Alors tapez ici, « Maquettes gratuites », et vous serez surpris de trouver beaucoup de kits filaires. Vous pouvez voir ceci est l'un d'eux Maquettes de matériel et 15 écrans de commerce électronique. Bien qu'ils soient pour les écrans mobiles, je pense que vous pouvez utiliser ces composants dans vos pages Web aussi. C' est très gentil. Vous pouvez voir ici il y a ces autres composants. Vous pouvez également les utiliser dans la conception de votre page Web. C' est l'un d'eux, c'est dans Photoshop, Sketch, et tout. Un autre kit filaire que j'aime vraiment est par ce gars Rafal Tomal, je pense que vous devez vous abonner à son site pour télécharger cela, mais c'est un très bon filaire pour les sites Web. Ces boîtes, beaucoup de grands éléments ; titre, sous-titre, paragraphes, listes. Il y a beaucoup de choses. Vous pouvez voir ici vous obtenez un accès gratuit. Vous devez vous abonner pour le télécharger. Un autre kit filaire est par ce Pixeden, gratuit par site web. Je vais inclure le lien, donc ne vous inquiétez pas. Vous pouvez voir qu'il a beaucoup d'éléments, de contrôles vidéo, d'info-bulles, d'icônes, calendriers et de nombreux éléments d'interface utilisateur. L' outil en ligne que j'aime vraiment est celui-ci Moqups. Je vais partager cette maquette avec vous dans la prochaine leçon parce que ce sera votre ultime défi de conception web afin que vous sachiez quelles compétences vous avez acquises dans ce cours. Si vous êtes un concepteur d'interface utilisateur, un concepteur Web, vous obtiendrez un filaire de votre client ou de votre client que j'ai besoin de cette conception de site Web. S' il s'agit d'une très bonne entreprise, ils ont fait des recherches sur l'expérience utilisateur. Le produit final de chaque recherche sur l'expérience utilisateur sera ce filaire. Défi ultime de la conception Web. J' utilise cet outil Moqups, moqups.com. Créez un compte gratuit ici. Vous pouvez voir que vous avez beaucoup de pochoirs ici comme ceci, bouton, liens, cases à cocher, lien unique, étiquette, nœuds, et avatars, grilles, icônes. C' est celui que j'ai utilisé ici. Vous pouvez voir cette icône. Si je clique ici, vous pouvez voir. Si je clique une fois, il le sélectionne et si je clique deux fois, il me montre les options. C' est un très bon outil. Vous pouvez voir certaines des options ici, comme faire avancer, porter à l'avant, à l'arrière. Il s'agit d'options de superposition. Ensuite, nous avons ces options d'alignement. Vous pouvez sélectionner deux éléments et les aligner. C' est l'un des éléments que j'ai utilisés d'ici. Vous pouvez changer les couleurs de remplissage ici si vous voulez, peut-être comme ça. C' est un très bon outil. Première étape dans toutes les conceptions d'interface utilisateur dans chaque projet de conception Web , dans chaque projet d'application mobile, vous devez d'abord comprendre ce que vous allez concevoir, donc la première étape est votre filaire. C' est un filaire que j'ai conçu pour vous les gars. Je vais partager le lien avec vous, et je devrais dire ce mot de défi dans la prochaine leçon, ou devrais-je le dire maintenant ? D' accord. Voici le défi ultime pour vous. Vous devez concevoir un très beau site web en utilisant ce filaire. Je vais vous donner quelques conseils sur la façon dont vous allez aborder cette conception. Numéro 1 est, choisissez d'abord un jeu de couleurs. Utilisez n'importe quel logo ou placez simplement quelques textes ici comme logo. Gardez à l'esprit qu'une couleur que vous allez utiliser pour les liens et ces boutons. Peut-être que vous avez besoin de changer quelques couleurs ici comme les tailles de différents textes. Gardez à l'esprit que si nous avons cette section, c'est la première section, l'espace entre deux sections comme celle-ci et celle-ci devrait être bon, et devrait être égal. Si vous avez la section 1, la section 2, la section 3, celle-ci est la section 3, l'espace entre toutes ces sections devrait être le même. La marge supérieure et la marge inférieure devraient donc être les mêmes. Une autre chose est, chaque fois que vous obtenez une maquette d'un client. Wireframe ou maquette fondamentalement c'est une maquette lo-fi. On appelle ça une maquette de faible fidélité. maquette de faible fidélité est lorsque vous obtenez une image filaire de votre client comme celui-ci, ce que vous allez faire la première étape est que vous devriez avoir le contenu. S' ils n'ont pas le contenu, ça va être un peu douloureux. La deuxième chose est que ne suivez pas toujours tout ce que vous voyez dans la maquette. Vous êtes un designer, vous pouvez penser d'autres façons comme vous pourriez avoir besoin de déplacer cela ici. Même la maquette dit qu'elle devrait être ici. Vous pouvez les utiliser ici ou peut-être sur le côté droit et ensuite déplacer cet appel ici. En outre, vous pouvez les déplacer si vous voulez la vidéo sur la droite, vous pouvez l'utiliser. Ou même si vous voulez la vidéo au centre, vous pouvez la placer. Ce filaire n'est pas fondamentalement la ligne directrice de conception ultime pour vous, cela ne fait que vous montrer que ces éléments devraient être présents dans cette section. Ça devrait être par ici. Ces services devraient être comme ça, et nous avons besoin d'un bouton en dessous d'eux. Nos projets récents comprendront ces trois catégories. Si nous cliquons ici ou cliquez sur celui-ci, il va passer à la suivante et la troisième. Changeons la couleur du texte. Ça va être gris et ça va être blanc. C' est le même modèle que j'ai utilisé dans cette barre de navigation supérieure. Il s'agit essentiellement d'une barre d'onglets. Donc, changer crée de nouveaux onglets ici ou il réorganise ces images. Aussi, assurez-vous que si vous utilisez des images dans votre profil ou votre portfolio ou ce design, mentionnez leur nom et leurs titres ici afin que l'utilisateur puisse savoir de quoi il s'agit. Maintenant en bas, vous pouvez voir que vous êtes libre les déplacer ou d'utiliser n'importe quel style que vous aimez. C' est ainsi que nous utilisons les filaires dans différentes situations. Si vous aviez un très grand site Web ou si vous avez besoin d'un prototype interactif, vous pouvez utiliser celui-ci. En outre, vous pouvez utiliser des pochoirs filaires de page Web, je vous ai montré les gars. C' est le logiciel Balsamiq Mockups. Si vous concevez beaucoup de maquettes ou de filaires, vous devriez acheter celui-ci. part ça, je pense que vous êtes bon avec ces options gratuites. Vous ne pouvez pas exporter ceci. En outre, vous pouvez voir dans ces paramètres, nous avons 960 grille. Je t'ai montré la grille. Si vous êtes un codeur ou un concepteur, vous pouvez concevoir votre filaire à l'aide d'une grille dès le début. Vous pouvez basculer vers celle-ci ou pas de grille. Aussi, vous pouvez voir la largeur est 960, vous pouvez augmenter sa hauteur aussi. Voici le titre du projet. Continuez à explorer. C'est ainsi que vous annulez et refaites les choses. Ce sont tous les éléments, pochoirs que vous pouvez utiliser. Vous pouvez également importer des images ici et les faire glisser ici. Ces autres pages, si vous voulez plusieurs pages du même site, peut-être la page d'apprentissage, contactez-nous page, page de blog. Vous pouvez ajouter une nouvelle page ici comme ça et continuer à concevoir ici. Vous pouvez également regrouper des éléments ici si vous le souhaitez. Ceci est un groupe de contrôle G ou verrouiller leur position. Continuez à explorer cet outil. Je pense que tu vas vraiment adorer ce truc de filature. C' est toujours la première étape dans toutes les conceptions de l'interface utilisateur. Gardez à l'esprit que c'est le défi ; je veux que vous conceviez ce site Web pour moi afin que je puisse juger ce que vous avez appris dans mon cours. Partager avec moi un lien posté dans les questions ou le message signifie séparément. Je vais essayer de vous donner des conseils sur la façon d'améliorer si vous me montrez le design, sinon, je ne sais pas comment vous pouvez améliorer. Montrez toujours votre travail à vos instructeurs ou enseignants ou vos collègues designers qui pensez-vous que cela est superbe ? Ou ai-je besoin d'améliorer quelque chose ? Commençons. Essayez de concevoir ce filaire. J' ai besoin d'un très bon site web. Vous êtes ouvert à utiliser toutes les images libres ou icônes de n'importe quelle source, n'importe quelle source libre. Voyons ce que tu peux trouver. Passons à la leçon suivante. 78. Exercice →Redesign la photo de divinité partie 1: Aujourd'hui, j'ai reçu une question très intéressante de la part d'un de mes élèves, et ce qu'il m'a demandé, c'est comment créer ces portions lumineuses sur ces boutons et comment obtenir ces lumières brillantes ici. Il y a beaucoup de techniques pour le faire. Fondamentalement, c'est un dribble court. Laissez-moi vous montrer ce qu'il a partagé avec moi. En fait, il a partagé ce document avec moi. C' est le design de notre dribbler, et c'est un très joli état de boutons pressés et élevés. Depuis la nuit dernière, j'essayais de créer et de répliquer cet effet, et j'ai créé ces deux fichiers que vous pouvez voir ici. Celui-ci est une version légère et celui-ci est une version sombre. Je vais partager les deux PST avec vous, alors n'oubliez pas de télécharger. Maintenant, dans cette série, je vais créer seulement cette version sombre. Ce sera un défi pour vous. Vous devez créer quelque chose comme ça. Donc je vais créer une justice sombre. Commençons. Maintenant, au cours de cette conférence, mon but ultime n'est pas de créer cet effet génial, mais de vous faire comprendre comment le concepteur atteint cet effet et comment il a utilisé différents effets pour obtenir cet ensemble impressionnant meilleur et élevé états. Maintenant, d'abord, je vais ouvrir un fichier avec le 1440 par 900 pixels. Maintenant, la première étape sera votre couleur unie. Nous avons besoin d'une couleur de fond, qui va être notre 3-2, 3-2, 3-2, qui est fondamentalement la luminosité est de 20 pour cent, et zéro saturation, zéro teinte. C' est une couleur gris foncé. Ensuite, nous allons créer un rectangle arrondi. Sélectionnez un rectangle arrondi, cliquez une fois ici, et nous allons le créer pour être 620 pixels de largeur et 100 pixels de hauteur, et le rayon pourrait être huit, 10 ou cinq, c'est à vous de décider. Donc je vais le mettre tout de suite, comme ça. Maintenant, la couleur pour celui-ci va être 18, quelque chose comme ça. Ou peut-être 16. C'est à vous de décider. Je pense que 18, c'est bon. Chaque fois que vous essayez de répliquer quelque chose, vous devez regarder très attentivement ce qui est à l'intérieur de cette conception. Zoom avant et nous allons disséquer ce design. abord, vous pouvez voir qu'il y a une couche externe, vous pouvez voir que c'est un conteneur qui ressemble au meilleur effet ici. Maintenant, ce que nous avons ici est un dégradé sombre à blanc ici en arrière-plan. Vous pouvez voir ici dans ce, puis il y a une couche de plus en haut. Vous pouvez voir ici, c'est essentiellement la couche à l'intérieur de ce conteneur d'arrière-plan. Donc, il y a essentiellement deux conteneurs, et au-dessus de ces deux conteneurs, ce sont les trois boutons. Donc, en gros, nous avons cinq couches l'une sur l'autre. Laisse-moi en créer un autre. Nous allons en créer un autre à l'intérieur de ceci, et cette fois, il sera 604 pixels de large et il sera 84 pixels de hauteur. Assurez-vous que vous pouvez utiliser huit pixels ou quoi que ce soit. Cela va être à l'intérieur et sa couleur va être un peu plus sombre. Donc je vais appuyer sur 14 ici, et nous allons aligner ces deux là l'un à l'autre. Maintenant, pour obtenir le meilleur effet, cette couche externe, le VG externe de fond, je vais le nommer, et ce sera VG interne pour l'arrière-plan interne. Maintenant, dans l'arrière-plan externe, nous allons utiliser la superposition de dégradé. C' est le dégradé que je vais utiliser, et c'est essentiellement de couleur noire foncée, qui va être cette couleur noire à ce blanc. Il est à l'envers et assurez-vous qu'il est sur multiplier, ou vous pouvez le régler à la normale, je suppose. Ce que nous faisons, c'est nous créons cet effet de courbe noir à blanc en utilisant ceci. Alors peut-être qu'on peut l'ajuster plus comme ça. Donc vous pouvez voir ici nous avons des zones blanches et ici nous avons des zones sombres. Nous avons créé nos deux couches de base. Maintenant, nous allons créer nos boutons. Alors cliquez à nouveau, et nous avons besoin que notre bouton soit 200 pixels de large avec une hauteur de 80 pixels. Maintenant, c'est notre bouton principal. C' est notre bouton, btn, et passons-le ici en haut d'ici. suffit de l'aligner dans ça comme ça. Vous pouvez voir comment j'ai créé ces trois couches. Celui-ci a essentiellement deux pixels de largeur de chaque côté. Voici les boutons. Nous n'utilisons aucun effet de course pour couvrir cela. C' est notre couche de base qui couvre ces boutons pour créer cet effet arrondi tout autour de ces boutons. Maintenant, nous allons obtenir une certaine élévation et quelques effets supplémentaires à ce bouton. Maintenant, l'astuce est que nous pouvons y parvenir avec beaucoup de faits. On peut utiliser ce biseau intérieur, et on peut utiliser une profondeur de 100 pour cent ou peut-être moins que ça, peut-être 20 pour cent, et on peut réduire la taille, et peut-être ça, comme ça. Nous pouvons réduire cette taille ici, et aussi nous pouvons augmenter cette taille. Il y a une technique qui implique ce gaufrage bivalent. La même chose que nous pouvons réaliser avec cette superposition de gradient. Maintenant, dans la superposition de dégradé, je vais utiliser ceci, qui est notre mode de fusion. Normal et opacité est de 15 pour cent. Maintenant, ce que je fais ici, c'est qu'on utilise trois arrêts de couleurs. Vous pouvez donc voir comment cet effet incurvé est passé ici, ce qui est ces deux couleurs. Donc, chaque fois que vous cliquez sur certaines couleurs, vous pouvez voir que c'est essentiellement l'arrêt qui contrôle la largeur de cela va s'étendre. Rapprochez-le de l'autre couleur et vous verrez cette bosse dans vos boutons ou tout ce que vous concevez. Si vous le faites loin d'ici, il est de moins en moins visible. C' est ainsi que nous créons cet effet surélevé ou poussoir en utilisant des dégradés. C' est une partie très délicate. Si vous pouvez l'apprendre, je pense que cela va vous apporter beaucoup d'avantages. Je vais réduire cet effet à 23 ou 20 pour cent. Comme ça. Maintenant, vous pouvez voir comment cet effet a disparu. Vous pouvez utiliser le biseau et le gaufrage. Vous pouvez le réduire peut-être comme ça. J' ai utilisé 40 degrés ici et vous pouvez réduire la profondeur à 15 ou peut-être quelque chose comme ça, ou vous pouvez utiliser cette superposition de dégradé. Il existe plusieurs façons de créer ces effets. Maintenant, avec la superposition de dégradé, je vais donner une ombre intérieure parce que vous pouvez voir ici nous n'avons pas de lumière élevée ici. C' est notre ombre intérieure et je vais utiliser la couleur blanchâtre ici pour l'ombre intérieure. Il devrait être en haut, donc la distance sera deux ou un. Nous allons réduire cette taille. Nous ne allons pas le multiplier, donc nous allons utiliser la normale. Nous allons réduire l'opacité pour obtenir un tel effet. C' est un effet très minime. Vous pouvez augmenter la taille si vous le souhaitez. C' est à toi de décider de ce que tu aimes. Vous pouvez également réduire la taille et la douceur. On peut changer la douceur comme celle-ci. Peut-être que trois, c'est bien. Vous pouvez voir que nous avons un bouton surélevé ici. Peut-être qu'on peut ajouter de l'ombre portée avec. Nous pouvons ajouter une ombre portée, 90 degrés, multiplier la distance devrait être deux et la taille devrait être quatre, cinq, ou peut-être huit est bon. Voyons comment cette ombre vient d'ici. Augmentons la distance et aussi cela. Je vais utiliser 20 ici. Ça a l'air bien. On a de l'ombre. Si vous voulez ajouter plusieurs ombres, c'est à vous de décider. Vous pouvez ajouter plusieurs ombres ici. Peut-être que nous pouvons ajouter une ombre gris clair et l'étendre ou plus. Peut-être comme ça. Nous pouvons le définir pour se multiplier, pour avoir plusieurs ombres et il aura l'air plus cool et mieux. On a ce bouton. On peut utiliser la couleur ici comme ça. Dégradé superposition, peut-être que nous pouvons utiliser multiplier. Cela devient génial, semble bien et peut-être que nous pouvons augmenter l'effet multiplicateur ici. Nous allons ajouter du texte ici. Ajoutons du texte, un. Je vais en utiliser un. Faisons le colorer blanc ou peut-être blanc grisâtre comme ça. Peut-être le déplacer au milieu comme ça. Maintenant, nous avons presque terminé l'effet élevé normal. Maintenant passons à l'effet où nous avons besoin d'une lueur ici. Il y a plusieurs façons de créer cette lueur, mais je vais créer une méthode non destructive. Dupliquer ce bouton, bouton Calque. Dupliquez-le, Control J. Ce que je vais faire, c'est que je vais supprimer tous les effets. Ensuite, nous allons supprimer le champ, donc nous n'avons pas besoin de sa couleur. On n'a pas besoin de la couleur moyenne. Nous allons mélanger deux couleurs, deux méthodes ou deux styles de calque. Le haut, le bouton du haut, je vais donner un coup. Je vais nous donner un coup de couleur de cette couleur grisâtre CACA, deux pixels de large. Nous avons cet effet. Fondamentalement notre bouton de base et en haut nous avons juste le coup avec un bouton vide. C' est essentiellement un bouton vide avec juste un coup. Maintenant, l'étape suivante est un clic droit et nous allons le convertir objet intelligent via objet intelligent parce que nous devons supprimer certaines parties de celui-ci. Après la conversion en cet objet intelligent, nous allons utiliser notre outil de masquage. Créez un masque sur ce calque et obtenez cet outil Pinceau. Appuyez sur « B » sur votre clavier et « Cliquer avec le bouton droit » et assurez-vous que vous avez cette astuce, cette astuce floue. N' utilisez pas de brosse dure. Définissez l'opacité sur 50 ou 60 % et commencez à supprimer ces zones. Nous allons supprimer cette zone. Vous pouvez voir comment nous allons créer cet effet. Fondamentalement, nous allons brosser certaines parties comme ça. Pour cette lumière ici, brossez dans cette direction. Donnez quelques coups de pinceau comme ça. Touches très légères et douces. Maintenant, vous pouvez voir que nous avons cette lumière ici. Une très belle lumière. Vous pouvez toujours revenir en arrière ou vous pouvez peindre avec couleur blanche si vous voulez obtenir plus de lumière ici comme ça. C' est une façon très cool, très facile et non destructive de créer cette lumière. Maintenant, nous avons créé la lumière. Vous pouvez l'ajuster avec les touches fléchées si vous voulez qu'il soit en bas, peut-être un peu en dessous, ou en haut, c'est à vous de décider. Je vais le déplacer ici et je vais utiliser un peu moins d' opacité comme 50 pour cent ou peut-être 75 pour cent. Cette lumière est belle et c'est très bel effet que nous avons ici, et si vous voulez ajouter un peu plus d'ombre ou plus de profondeur, nous pouvons utiliser cet effet de couleur biseau et gaufrer. Peut-être que nous pouvons utiliser multiplier ici, augmenter cette obscurité ici et, peut-être, réduire cette zone blanche ou opacité. Il est très beau, très beau bouton surélevé. Ce bouton et le troisième, ils sont les mêmes. Je vais les mettre en une seule couche. C' est notre groupe de couches, c'est essentiellement notre lumière, et c'est un bouton. Je vais au contrôle J et je vais le déplacer ici à la fin. Nous avons terminé deux boutons. L' un est le premier bouton et le dernier bouton est trois. Dans la leçon suivante, nous allons créer ce bouton pressé. Le bouton Insérer qui est enfoncé et c'est des effets lumineux. Sinon, cette conférence sera trop longue. Passons à la leçon suivante. 79. Exercice →Redesign coupe de barbecue partie 2: Maintenant, nous allons créer l'effet lumineux et le meilleur bouton de cette leçon. Commençons. Ce que nous allons faire, c'est que nous allons copier ce même bouton et nous allons le déplacer entre ces boutons. C' est dans ces boutons et ce que nous allons faire est d'abord, nous allons enlever cette lueur, ici en haut. On n'a pas besoin de cette lueur. Ensuite, la prochaine étape sera notre gradient. Nous devons inverser le gradient, donc il est essentiellement pressé. Nous allons également changer un peu ce gradient parce qu'il est très pointu en haut. Peut-être qu'on peut le déplacer comme ça ou peut-être comme ça. Il devrait être plus sombre car il est pressé. Ensuite, nous allons enlever cette ombre intérieure et nous allons la convertir en une ombre intérieure sombre comme ça. Comme ça. Ou vous pouvez aussi complètement l'enlever, ou peut-être nous déplacer la distance à zéro et l'utiliser à quatre, et nous allons augmenter la taille à 100. Fondamentalement, nous donnons une ombre sombre tout autour d'elle, tout autour de ce bouton. Je pense que nous avons des problèmes d'espace, alors réparons-les d'abord. C' est notre deuxième bouton. Déplaçons un peu le troisième bouton ici, peut-être un pixel de plus. Alors celui-là aussi, on va le déplacer ici, comme ça. Nous allons ajuster l'arrière-plan et les choses après un certain temps. moment, nous sommes plus préoccupés par ce bouton pressé ici. Peut-être que nous pouvons supprimer cet effet biseau, et aussi nous allons le déplacer. Changons son texte à deux. Maintenant, vous pouvez voir qu'il est déjà un peu pressé. Maintenant, il doit y avoir une chose que nous devons changer et nous allons ajouter une ombre intérieure de plus. Cette ombre intérieure, où vous donnez un peu plus de profondeur. Nous allons prendre une certaine distance ici, sa taille devrait être nulle. Nous créons deux ombres intérieures. Changons la couleur à un peu plus foncée, peut-être comme ça. Comme ça, et rendons ça un peu plus doux. Maintenant, nous sommes bons. Maintenant, au bas, nous avons besoin d'une ombre portée. Il va être enlever toutes les ombres portées, et nous avons besoin d'une ombre portée blanche ici. C' est essentiellement pressé, donc sa lumière devrait être réfléchie ici. Il sera plus sombre du haut, cette zone supérieure, et il sera plus léger de cette zone. Nous allons ajouter une ombre portée qui sera un peu blanchâtre, et nous allons réduire sa taille. Nous allons changer son mode de fusion pour superposer. Vous pouvez voir un peu d'ombre ici. Réduisons la taille à 12, et la distance devrait être de huit pixels, je suppose que c'est bon. Nous pouvons augmenter l'effet en déplaçant ce curseur vers le haut et vers le bas. C' est à votre goût, quelle que soit la lumière que vous voulez ici. Je pense que j'aime que ce soit à 75 %, c'est bon. Peut-être que j'ai besoin de changer un peu plus l'ombre intérieure. En ce moment, ça me semble un peu ennuyeux. Peut-être que j'ai besoin de plus d'ombre intérieure, ce qui va être comme ça. Je vais donner une ombre plus sombre ici, et peut-être que je peux augmenter la taille. Déplaçons un peu vers le haut comme ça. Il a l'air très agréable effet pressé. Si vous le souhaitez, vous pouvez également réduire cette zone sombre supérieure ici. Ce sont de beaux ajustements, vous pouvez les faire toute la nuit. Je vais rapidement créer ce bouton pour vous. Changeons la couleur à ce bleu, puis nous allons lui donner l'effet Lueur Extérieur. Effet Lueur externe, assurez-vous que la couleur que vous utilisez est très nette. Vous pouvez voir ici la saturation est de 100 pour cent, la luminosité est de 100 pour cent. Assurez-vous que ces deux sont à 100 pour cent et utilisez la couleur que vous aimez. Il va vraiment briller et ajuster ces valeurs. C' est essentiellement répandu. Je pense que deux ou trois pour cent est bon. Ensuite, nous avons la taille, 10 pixels. La lueur extérieure est comme ça. C' est ainsi que nous allons utiliser, assurez-vous également qu'il est un peu opaque et un peu transparent. Ce sera au milieu. C' est ainsi que nous allons donner cet effet de lueur. Maintenant pour les autres effets de lueur, par ici et par ici. Ce sont des techniques très anciennes, mais je vais vous montrer ici. Il existe plusieurs façons de créer ces effets lumineux. Nous allons sélectionner cette zone ici, et nous pouvons utiliser le pinceau. C' est la technique la plus ancienne, la brosse légère. Maintenant, ce que nous allons faire, c'est que nous allons sélectionner notre outil de brosse, et augmenter un peu sa taille. Sélectionnez la couleur avec laquelle nous aimons brosser, comme celle-ci. Assurez-vous qu'il est une couleur un peu nette. Tenez votre pinceau à nouveau, et nous allons utiliser un pinceau comme ça. Vous pouvez voir ici qu'il nous donne une lumière luisante et nous allons utiliser la superposition, ou peut-être que nous pouvons utiliser la lumière comme ça. Maintenant, ce qu'on va faire, c'est enlever le reste de la lumière. On a juste besoin qu'il soit ici dans cette zone. Nous allons cliquer sur Contrôle ou Commande cliquez sur ce bouton, et nous devons tout supprimer de ce bouton. Maintenez votre gomme, ou peut-être sélectionnez cette brosse légère et appuyez sur « Supprimer ». Que se passe-t-il ? Peut-être que j'ai besoin d'utiliser la gomme ici. Oups. Maintenant, j'ai ma gomme. Supprimons ceci comme ça et appuyez sur M et nous avons fait ce travail ici. Maintenant, nous allons sélectionner cette zone et contrôler le décalage I ou le décalage de commande i pour inverser la sélection, puis encore une fois nous allons attraper notre outil de gomme et nous allons effacer cette lumière supplémentaire ici. Appuyez sur M ou sur Control ou sur D pour désélectionner. Vous pouvez voir ici que nous avons une lumière très forte. Si vous voulez réduire la lumière, vous pouvez utiliser l'opacité ou peut-être à nouveau, vous pouvez utiliser ce masquage et nous pouvons à nouveau brosser les zones dont nous n'avons pas besoin ici. C' est tout le jeu de cacher et d'enlever nos effets ici. Vous pouvez voir comment nous pouvons le faire facilement comme ça, peut-être que nous pouvons réduire l'effet ici comme ça, et nous pouvons le multiplier contrôler JS pour améliorer l'effet. Si vous voulez réduire l'effet, vous pouvez utiliser quelque chose comme ça. La même technique va être utilisée en bas ici, ou la deuxième technique que je vais vous montrer est la suivante. Nous allons utiliser une barre arrondie ici peut-être quelques pixels de large. Contrôle D assurez-vous qu'il est dans la hauteur qu'il va être 2-4 pixels ne le rend pas trop grand, comme ça. Nous avons cette barre de ligne ici et nous allons utiliser une très belle technique qui va être flou, flou gaussien. Avant cela, nous allons convertir ceci en objet intelligent comme ça, donc je vais utiliser le flou comme ça. Vous pouvez voir qu'il y a trop de techniques pour créer le même effet, alors peut-être que je peux utiliser un autre flou qui est le flou de mouvement. Je veux que ce soit dans cette direction, pour que je puisse utiliser quelque chose comme ça. Vous pouvez voir à quel point cet effet va être cool. C' est comme la lumière qui émet de ce bas de ce bouton. Vous pouvez régler la lumière où vous voulez qu'elle soit, et vous pouvez utiliser l'opacité comme 50 pour cent ou 20 pour cent ou 30 pour cent ou peut-être je pense que 450 pour cent était bon sinon il semble très terne. Vous pouvez utiliser l'effet de superposition ou peut-être vous pouvez utiliser la gravure de couleur , c'est à vous ou peut-être normal. Je pense que la normale a l'air bien et j'ai besoin d'augmenter l'effet à 75 pour cent comme ça, ça a l'air bien. Si vous voulez réduire la taille, vous pouvez également transformer cela et utiliser la hauteur et réduire la hauteur à trois pixels. Vous pouvez voir maintenant qu'il est un peu mince et plus élégant. De la même manière, nous allons donner la lueur de ces deux côtés, donc si vous regardez cela ici, vous pouvez voir qu'il y a des lumières ici sur cette zone et cette zone. C' est de la même façon que nous allons l'utiliser. Peut-être que nous pouvons à nouveau utiliser le même rectangle ou peut-être nous pouvons dupliquer cela, contrôler T et nous pouvons le faire tourner comme ça, réduire sa taille comme ça et nous zoomons, utiliser les poignées ici, réduire sa taille à quelque chose comme ça peut-être plus. Maintenant, nous devons changer la direction du flou de mouvement, donc il va être dans cette direction. Il devrait être 90 comme ça, donc peut-être que nous devons réduire la taille plus ou peut-être que nous pouvons réduire la taille du flou de mouvement comme ceci. Maintenant tu peux le déplacer ici. Vous pouvez voir à quel point la diapositive est superbe. Si vous voulez cacher les portions, vous pouvez le clipser à l'intérieur ou vous pouvez utiliser à nouveau le masquage et le brosser comme ça. Je vais le brosser tout de suite. Vous pouvez voir comment cet effet est génial et cool et très geeky. Je le duplique et je le mets sur le côté gauche. Maintenant, je pense que notre meilleur effet est presque fini. Peut-être que nous pouvons l'assombrir un peu plus de cette zone et aussi de cette zone. C' est ainsi que vous créez différents effets de lumière ou des effets de croissance autour des boutons ou sur les bords des boutons, ou vous pouvez créer des lumières lumineuses avec des pinceaux et masquer les parties de ces pinceaux. Le masquage est notre technique clé et nous avons surtout utilisé les objets intelligents. Vous devez savoir que comment j'ai créé tout cela, nous avons utilisé des gradients, puis nous utilisons des biseaux et des gaufres, nous utilisons ces lumières. J' ai créé ces lumières avec trois techniques. L' un était pinceau, l'autre était avec effet de contour de calques, et l'autre était juste en utilisant un calque d'objet intelligent avec, donc un effet était ce flou de mouvement. J' oublie beaucoup de choses. C' est ainsi que nous créons cet effet cool. Maintenant, votre défi est que vous allez me donner quelque chose comme ça. Maintenant, le conseil est que chaque fois que vous essayez de créer ou de répliquer quelque chose, vous devez zoomer et voir tous les pixels et les petits détails ici comme vous pouvez le voir ici, il y a une bordure de noir, une ligne sur ici, nous avons cette ombre intérieure et au sommet, nous avons la lueur. La même chose est ici, la même chose a fait ici. La seule différence est qu'ils ont des ombres douces ici et que les couleurs sont un peu plus lumineuses et claires. C' est la fin de cette leçon impressionnante pour créer cet effet dribble. Je vais créer beaucoup de nouvelles conférences bientôt, alors restez à l'écoute et si vous avez des questions, posez-moi. Passons à la leçon suivante. 80. Convertir PSD en conseils de code: Beaucoup d'entre vous se demandent peut-être comment convertir une couche ou comment copier ses propriétés CSS si vous voulez le convertir en un élément HTML ou un élément de page Web. Laissez-moi vous montrer un truc très simple. C' est juste une commande Photoshop et CSS copy par défaut que j'ai appliquée au contour de pixel à ce calque, ce rectangle arrondi et ensuite une ombre portée. Il suffit donc de cliquer avec le bouton droit sur cette couche et de cliquer sur cette copie CSS. J' ai fait un exemple de fichier ici, alors essayons-le. Nous allons coller ceci comme une classe de test. Alors, testez. Si vous n'êtes pas d'un fond de programmation, ne vous inquiétez pas, juste je vais vous montrer comment nous allons utiliser ces valeurs CSS. Fondamentalement, ce sont les valeurs CSS. La plupart du temps, nous pourrions ne pas avoir besoin cette position absolue de haut à gauche ici, aussi cet index z. Je vais le commenter. Ouvrons notre fichier dans un navigateur et voyons, accord, où sont nos styles ? D' accord. Le problème était ce paramètre d'affichage. J' ai commencé à afficher le bloc. Voici notre bloc. Voyons à quoi ça va ressembler quand je vais utiliser absolu. Il se déplace en raison de cette page HTML et par rapport à cette page HTML. Voici comment nous allons convertir nos fichiers CSS et PST en CSS. Il suffit de copier ça ici comme ça. Maintenant, je vais copier ce texte ici. Je vais cliquer avec le bouton droit de la souris Copier CSS et je vais coller les styles à mon style de titre 2, h2. Ne vous inquiétez pas si vous n'êtes pas un codeur, si votre codeur ou vos développeurs veulent du HTML, donnez-leur juste ce code et ce sera assez bon pour eux. Alors ne vous inquiétez pas si vous ne connaissez pas beaucoup le codage. Assurez-vous de supprimer ces index z et ce positionnement absolu d'ici. Position absolue à gauche et en haut, toujours les enlever parce que nous n'avons pas besoin d'eux. C' est comme ça que je vais te montrer. Voici notre texte, « Bonjour, je suis un texte ici. » Même police, même couleur, tout. Fondamentalement, ce dont nous avons vraiment besoin de notre CSS, c'est cette taille de police, la famille de polices, la couleur, la hauteur de ligne et la largeur et la hauteur, nous n'avons pas besoin de tailles de police, alors nous allons le supprimer. Qu' est-ce que c'est ? D'accord. C'est une façon et la deuxième façon est ce plugin qui est appelé CSS Hat. J' ai acheté. C'est un plug-in premium. Il convertit vos styles en CSS Less et Sass et Stylus. Le béton a un problème à montrer mon ombre portée ici. Vous pouvez voir si je passe à ce calque, il ne montre aucune ombre portée. Mais pour la partie CSS, il montre très bien comme bordure deux pixels, solide et couleur, couleur de fond en valeurs hexadécimales. On peut définir ses options ici. C' est un très bon plug-in et si vous êtes un développeur, je pense que c'est un plug-in incontournable. Maintenant, il y a un outil de plus qui est très récent et c'est cet Avocode. J' utilise juste sa version d'essai et je suppose que c'est très bonne application. Mais le problème est que c'est un peu cher à mon goût. Vous pouvez voir ici si je sélectionne cette mise à niveau ici. Maintenant, il a une intégration en ligne avec ces applications de bureau. Si vous téléchargez un fichier d'ici comme Open Design et chargez votre fichier PST ici, il vous montrera les tailles. Vous pouvez sélectionner des outils ici comme mesurer et cliquer sur n'importe quel calque. Il vous montrera la taille de cette boîte. Maintenant, il montre qu'il s'agit d'un fichier texte et ce sont les paramètres. En outre, il montre les distances de tous les coins. C' est très génial. Parallèlement à cela, il montre tout le code sur le côté droit, certaines options d'exportation. Ensuite, j'ai la police que j'utilise, qui est Oblik Bold ici et si je vais dans ce panneau Calques, je peux voir tous les calques utilisés comme ceux-ci. C' est très génial. Je l'aime vraiment, mais je l'achèterais vraiment s'ils avaient un plan comme je peux l'acheter pour un an. Ils l'ont pour un mois, comme un mois d'utilisation comme Garage, vous avez des conceptions illimitées entreprise d'affaires. Si vous travaillez dans une très grande équipe ou dans une équipe, je suppose que c'est une très bonne option. Vous pouvez aller de l'avant et acheter ce Avocode et je pense que c'est vraiment bon dans la conversion de vos fichiers PST en CSS. Mais pour l'instant, je vais m'en tenir à cette commande Copier CSS par défaut de Photoshop. C' est le conseil que je voulais vous montrer aujourd'hui. Un de mes étudiants a posé la question de convertir quelque chose en CSS et c'est la réponse. Ceci est une vidéo de demande. Restez à l'écoute et je vous mettrai à jour très bientôt. Passons à quelques nouvelles conférences. 81. Exporter des images pour des conseils de conception Web: Parlons de l'enregistrement d'images pour une conception Web et d'interface utilisateur. Donc, lorsque vous essayez d'exporter ou d'enregistrer votre image pour la conception Web, ou vous pouvez rencontrer beaucoup de problèmes, comme vous pouvez voir différentes couleurs à l'exportation. Il y a une solution de contournement très simple. Laissez-moi vous montrer le processus et les choses que vous devez garder à l'esprit lors de l'exportation de vos images pour la conception Web et la conception de l'interface utilisateur. C' est une image. Si vous voulez l'exporter, tout d' abord, vous allez utiliser cette commande d'exportation. N' utilisez pas Enregistrer sous ou Enregistrer en tant que fichier JPEG. Nous allons utiliser Exporter et Enregistrer pour le Web Legacy. Cliquez dessus et le raccourci est Alt Control Shift et S. Maintenant sur ce panneau, assurez-vous que vous avez PNG sélectionné ou même JPEG sélectionné. Tous les deux sont bons. Vous pouvez réduire la qualité du fichier JPEG pour obtenir la taille que vous voulez. Vous pouvez voir la taille de fichier JPEG de très petite taille venir ici. C' est 151,5 kilo-octets. Donc, si vous voulez une très petite image, vous pouvez la réduire comme 70 pour cent. Maintenant, il est 124,8 Ko. Pendant que vous concevez des sites Web, vous êtes très préoccupé par la taille des images pour accélérer votre site Web et réduire le temps de chargement. Maintenant, voici comment nous enregistrons une image JPEG. Vous pouvez également cliquer sur ce progressif. Ce qu'il fera, c'est qu'il chargera votre image dans différentes sessions. Comme d'abord, ce sera une image floue, puis il commencera à apparaître lentement et lentement si vous voulez cette option. Assurez-vous que l'option Optimiser est cliquée. Le très, très important est ce convertir en sRGB. Assurez-vous toujours que cela n'est pas coché. La plupart du temps Il va créer beaucoup de problèmes de profil de couleur. Assurez-vous donc qu'il n'est pas coché et que l'aperçu est défini pour surveiller la couleur. Vous pouvez également utiliser cette norme Internet RVB. Pas de gestion des couleurs. Je vais définir celui-ci, puis appuyer sur « Enregistrer ». Si vous voulez changer cette taille d'image, vous pouvez la changer ici, comme je voulais 1024. Donc, la hauteur sera ceci, et la largeur sera ceci. Ce verrou signifie qu'ils sont nivelés les uns par rapport aux autres. Donc, il va augmenter et diminuer en proportion. La plupart du temps, nous n'avons pas besoin de décocher ça. Donc, par exemple, si j'essaie d'utiliser la hauteur 900 et vous pouvez voir qu'elle est déformée. C' est ainsi que nous utilisons ce panneau. La plupart du temps pour le Web, je recommande ce PNG 8 ou PNG 24, image transparente. La plupart du temps, nous utilisons PNG 24. Donc, si vous avez un très faible niveau de couleurs, ce n'est pas une image très colorée, alors vous pouvez aller à ce fichier PNG 8. Vous pouvez voir l'aperçu ici. Rendons cela à nouveau proportionnel. Maintenant, vous pouvez voir ici nous avons une table de couleurs. Il montre 256 couleurs et je pense qu'elles sont suffisantes pour montrer mon image et tout avec précision. Donc, j'utilise ceci, assurez-vous que cette transparence. Si votre image a une certaine transparence, cochez celle-ci. Parfois, le format PNG 8 peut ne pas afficher de transparence très agréable. Vous devez donc passer à PNG 24. C' est la meilleure option pour montrer la transparence. Donc, si nous allons au fichier PNG 8, ne vous inquiétez pas de ces paramètres, assurez-vous juste que celui-ci est perpétuel et ceci est réglé sur la diffusion. La diffusion obtient de meilleurs résultats. Vous pouvez réduire les couleurs si vous voulez réduire la taille du fichier. Vous pouvez voir ici c'est 31 K. Si j'essaie réduire les couleurs à 64 la taille du fichier est de 24 K, mais vous pouvez voir mon image est un peu déformée. Laisse-moi zoomer. Cliquez ici. Vous pouvez voir que j'ai un visage pixélisé par ici. Donc, si je passe à 128 et puis de retour à 256, il est très agréable. Donc, ce sont des paramètres différents ici. Vous pouvez également enregistrer vos préréglages ici. Si vous avez sélectionné certaines options, vous pouvez enregistrer les paramètres et les nommer comme la conception de l'interface utilisateur, PNG 8, conception de l'interface utilisateur, PNG 24 quelque chose comme ça. Il s'agit donc de sauvegarder vos images et de s'assurer que leurs couleurs sont les mêmes que celles que vous avez conçues. L' autre chose est de vous assurer que votre couleur est définie sur ce RGB 8. À votre avis, votre configuration d'épreuve est configurée pour surveiller le RVB et vos couleurs d'épreuve sont désactivées. Donc c'est une autre chose que vous devez garder à l'esprit. Donc, si votre couleur d'épreuve est définie sur, par exemple, CMJN, cela peut causer beaucoup de problèmes lorsque vous essayez de l'exporter. En outre, il ne devrait pas être sur le démarrage Internet et standard RVB ou sRGB. Assurez-vous qu'il est Monitor RVB, Preuve color est décochée, puis vous utilisez toujours cette Exporter Enregistrer pour le Web. Vous pouvez également utiliser cette Exportation rapide, mais assurez-vous que vos préférences d'exportation sont définies sur l'emplacement où vous avez décoché. Ici, nous avons l'exportation. Assurez-vous qu'il est défini sur Transparence PNG et que Convertir en sRGB est décoché. Donc ce sont les choses que j'avais vraiment besoin de vous dire , les gars et la plupart des développeurs Web et concepteurs Web, quand ils ont tendance à exporter leurs images et leurs tranches, ils doivent garder à l'esprit toutes ces choses. C' était une vidéo de demande et un de mes élèves avait des problèmes à ce sujet. Je vais télécharger beaucoup de nouveaux trucs et astuces. Alors restez à l'écoute et passons à un design génial. 82. Conseils d'utiliser les grilles dans Photoshop: Je vais vous montrer une astuce très simple sur la façon d'utiliser vos grilles lors de la conception, donc c'est un conseil, laissez-moi vous montrer. Si vous avez une grille comme ça, comme je vous l'ai montré dans mes conférences précédentes. Pendant que vous concevez, parfois vous avez besoin de le cacher et de le montrer à nouveau si vous l'avez en pleine opacité comme ceci. Donc, cela semble vraiment mauvais quand vous concevez. Ce que je fais, c'est que je les colore ou les superpose de couleur, comme cette nuance gris foncé, et je réduit l'opacité à 10 pour cent comme ça. Alors j'essaie de l'enfermer ici. Vous pouvez voir ce petit verrou dans le panneau Calques. Je le verrouille pour ne pas le déplacer accidentellement. Pendant que vous concevez, vous pouvez facilement montrer vos grilles et aligner les choses mieux et le faire très bien. L' autre chose que je fais, c'est que je déplace cette grille en haut. Déplacez le tout au-dessus de toutes vos couches et gardez-le là et gardez-le dans une opacité très faible comme cinq pour cent ou dix pour cent et continuez à concevoir. C' est donc une astuce très soignée et simple. Alors restez à l'écoute pour de telles astuces. Je les partagerai beaucoup. Passons à de nouvelles conférences géniales. 83. Corresponde de polices → Nouvelles dans Photoshop CC2017: Il y a une autre nouvelle fonctionnalité dans Photoshop CC 2015.5, et qui est essentiellement correspondre à la police. Où allez-vous le trouver ? Ici, dans le type, vous pouvez voir Match Font. C' est une fonctionnalité très nouvelle et très cool. Vous pouvez facilement faire correspondre les polices. C' est une prise de vue Dribbble de quelqu'un d'autre concepteur d'interface utilisateur. C' est le travail de quelqu'un d'autre donc je ne sais pas qui est responsable de ce genre de travail de toute façon. Maintenant ce que je vais faire, c'est juste que j'ouvre un tir aléatoire Dribbble de Dribbble. Je vais faire correspondre les polices si je peux voir que j'ai les mêmes polices comme celle-ci. abord, je vais faire est que je vais sélectionner une partie, assurez-vous qu'il est très petit, n'utilisez pas trop ou trop large. Peut-être que vous pouvez aller à ces quatre lettres, et aller à taper et faire correspondre les polices. Maintenant, il va chercher quelques polices. En outre, il va synchroniser les polices de Typekit. Si vous êtes abonné à Typekit, il va obtenir des polices à partir de là. Il a trouvé 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 polices, qui sont presque similaires. Maintenant, le meilleur téléphone que j'aime ici est ce Tw Cen MT Regular. Si je clique dessus et appuyez sur « OK », maintenant il est sélectionné. Maintenant, je vais aller à mon outil Type. Si j'essaie de taper ici, les mêmes mots, paiement, vous pouvez voir à quel point il a correspondu à ma police. Je pense qu'ils sont identiques. Ce concepteur a utilisé la même police que j'utilise en ce moment, c'est Tw Cen MT. Il s'agit essentiellement d'une police géométrique. Vous pouvez en savoir plus sur les polices dans mon autre cours typographique. C' est une autre caractéristique qui est très cool. Vous pouvez facilement faire correspondre le type, les faces et les polices. Vous pouvez trouver si vous avez déjà installé une police qui est proche ou proche de la police utilisée dans cette image n'importe quelle. Donc, plutôt que d'aller sur des sites Web, quelle police ou quoi que ce soit pour trouver la police utilisée, quelle police ou quoi que ce soit pour trouver la police utilisée, vous pouvez utiliser cet outil Photoshop et ajouter très agréable, vous pouvez l'utiliser et trouver les polices plus proches que vous voulez utiliser. Il s'agit d'une nouvelle fonctionnalité de Photoshop CC 2015.5. Si vous avez des questions, faites-le moi savoir. Peu de mes étudiants ont demandé ces nouvelles fonctionnalités dans Photoshop dans la dernière version, donc je crée cette conférence et une autre. Passons à la leçon suivante.