Travailler avec des images dans des projets de conception d'interface utilisateur

1. Introduction du cours: Hey designer et mon nom est Alex et bienvenue dans ce cours Skillshare sur le travail avec des images dans vos projets de conception d'interface utilisateur. Je suis fondateur de web beignet, où j'ai créé ou 500 produits de design. Je suis aussi professeur et jusqu'à présent j'ai créé plus de 20 cours et demi, plus de 40000 étudiants inscrits à ces cours. Dans cette classe, nous allons parler des meilleures façons pour vous, en tant que concepteur d'interface utilisateur, d'utiliser des images dans votre projet. Nous allons vous parler des raisons pour lesquelles les images sont importantes et de ce que vous devez faire attention lorsque vous choisissez les images que vous allez utiliser dans vos projets. Nous allons également discuter des moyens pour vous de trouver des images en tant que concepteur d'interface utilisateur et de la façon dont vous pouvez les intégrer dans vos projets. Nous allons discuter de la façon dont certaines images peuvent être prises par un photographe externe et comment le client peut vous livrer ces images. Ensuite, nous allons comparer d'autres résultats comme des images gratuites et premium. Quelles sont les différences entre eux et quelles sont certaines différences dans la licence de ceux libres dans les images premium. Nous allons également discuter de l'importance des jeux d'images, façon de choisir des jeux d'images et de la façon de les utiliser. Et puis nous allons discuter à quel point il est facile pour vous de trouver des images dans différentes niches. Pourquoi différentes niches sont-elles importantes pour trouver vos images pour vos projets de conception d'interface utilisateur et comment vous pouvez procéder à la recherche ces images et les intégrer dans vos projets de conception ? Ensuite, nous allons parler de l'optimisation des images sur Mac et Windows, pourquoi c'est important et comment vous pouvez aller de l'avant et procéder à ces optimisations d'image. Comment ils vont vous aider dans votre travail et comment ils vont vous aider à travailler avec les développeurs et comment ils vont améliorer votre vitesse de travail avec les développeurs et en particulier avec ces outils de conception comme Adobe XD . Enfin, nous allons discuter de la structure de nommage, pourquoi elle est importante et comment vous pouvez choisir de travailler avec des structures de nommage qui fonctionnent pour vous et vos développeurs. Votre projet de classe pour cette classe est de choisir des images de différentes niches. Je vous laisserai le soin de choisir les images que vous voulez. Ces images peuvent être gratuites ou premium. C' est à vous de décider. Et juste pour mettre ces images combinées en un seul document, et vous pouvez choisir une équipe et expliquer cela plus loin dans la vidéo de projet de classe Skillshare. Et j'aimerais vraiment que vous sauviez cela comme un JPEG et téléchargez dans le projet de classe pour moi et d'autres étudiants à voir. Et je suis vraiment excité de voir ce que vous pouvez trouver. Je suis vraiment excité de partager ces trucs et astuces avec vous. Et j'ai hâte de te voir en classe. 2. Pourquoi les images sont-elles importantes: Tu sais ce qu'ils disent, cette photo dit mille mots. Eh bien, c'est la même histoire dans la peinture que dans le design, en particulier dans le design graphique, mais la même chose peut être dit dans le web design et AB design. Donc, choisir les bonnes images peut vraiment déterminer le rythme que les spectateurs regardent votre projet, qu'il s'agisse d'un projet d'application ou de notre projet de conception de site Web. Il peut également déterminer le ton auquel vous parlez à vos visiteurs. Donc, cela peut être sérieux ou amusant, ludique. Il peut également déterminer le rythme auquel vos spectateurs peuvent regarder votre projet. Donc, ce que cela signifie est, vont utiliser des images plus petites, vont utiliser des images plus grandes. Allez-vous utiliser des images plein écran pour des images en largeur et bien plus encore ? Ils vont également déterminer à quel point le site est ludique ou sérieux. Et il va aussi déterminer les couleurs que vous allez utiliser votre design, parce que le ton de vos images va vraiment déterminer cela. Parce que si vous utilisez, par exemple, des images vraiment sombres, alors vous allez utiliser des couleurs, ce qui va beaucoup mieux contraster avec ces images sombres. Ou si vous utilisez des images très claires et aérées, Dan, vous allez contraster ça en utilisant quelque chose de beaucoup plus sombre. Par exemple, soit un noir foncé ou gris foncé ou vert foncé ou quelque chose comme ça. Donc, les images sont vraiment le facteur clé dans la création de vos designs et choisir les bonnes images pour vos designs va créer ou casser votre design. 3. 3 types d'images de projet de projets: Quand il s'agit d'images de projet, il existe vraiment trois types principaux. Le numéro un est le jalonnement d'images par le photographe. Ce sont donc des images que votre client a déjà prises à notre photographe haut de gamme qui a pris ces images dans des décors et créé vraiment l'histoire entière pour votre client, puis a livré ces images à votre client. Et puis votre client va vous livrer ces images et vous allez les utiliser dans vos designs. Deux, c'est des images gratuites. Ce sont donc les images que vous allez généralement trouver sur des sites comme Unsplash ou Pixabay. Et ces images ici vraiment un énorme défaut et cette variété. Donc, ce que cela signifie, c'est que vous pouvez trouver une grande image d'un grand photographe. Et c'est fondamentalement tout. Ainsi, vous ne pouvez pas trouver une autre image, par exemple, un modèle dans une position différente ou un coucher de soleil d'un point de vue différent, ou une rue de ville d'un point de vue différent. Donc vous ne pouvez pas les trouver. Et généralement, ces images ne sont pas de très grande qualité. Habituellement, il y a quelque chose comme 1920 par 1080, donc full HD ou au moins 2k en taille. Et enfin, numéro 3, nos ensembles premium. Maintenant, ce sont les sites que vous pouvez trouver en ligne. Typiquement, j'aime utiliser les éléments Envato et leur propre site web 2020, ce qui signifie qu'ils ont plus de 50 millions d'images à choisir. Et ce que cela signifie, c'est que ces photographes haut de gamme créent des scènes. Imaginez, par exemple, vu au bureau et ensuite ils mettent la scène. Ils installent ce bureau. Ils paient pour les mannequins. Et ils prennent des centaines d'images différentes tous les angles de différents modèles faisant des choses différentes. Et le principal avantage de ces images est qu'elles sont toutes prises dans un environnement contrôlé par un seul photographe sous une seule source d'éclairage avec les mêmes modèles, avec la même équipe dans la même pièce. Donc, vous avez l'idée. Ces images peuvent facilement être utilisées dans vos projets. Et par exemple, si vous devez faire un léger changement avec, par exemple, la luminosité, alors vous pouvez le faire dans quelque chose comme Adobe Lightroom. Et puis vous pouvez prendre toutes ces images que vous téléchargez le projet de quatre ans, vous pouvez faire un seul tweet, par exemple, à la luminosité ou à l'obésité, ou au vignettage ou tout ce que vous faites avec cette première image. Et vous voulez appliquer la même modification à toutes vos images. Par exemple, vous avez téléchargé l'ensemble de 50 images différentes. Ensuite, vous pouvez simplement appliquer cette première modification à la première image, puis l' appliquer à travers sont beaucoup de vos autres images de la même collection. Vous pouvez simplement synchroniser ces modifications. Par exemple, adobe Lightroom va appliquer ces modifications. Vous n'avez pas besoin d'utiliser Lightroom. J' aime vraiment l'utiliser parce que je suis un utilisateur Adobe. J' utilise Adobe XD, j'utilise Adobe Photoshop, j'utilise Premier et j'utilise bien sûr Lightroom pour toutes mes images. Et j'ai vraiment aimé cette fonction, mais ce n'est pas seulement dans Lightroom. Vous pouvez le trouver dans d'autres outils et logiciels comme ils sont là. Assurez-vous juste de le rechercher, mais ça va vous faire gagner un tas de temps. Donc, que vous utilisiez des images client, vous devrez peut-être modifier quelques choses ici et là. Parce que généralement ces photographes prennent des images fantastiques, mais peut-être si vous créez un design de site Web pour notre ton légèrement plus sombre , disons, alors vous allez appliquer certains de ces changements en plus à ces images. Habituellement, les photographes aiment laisser ces images assez brutes. Par conséquent, les concepteurs vont à leur tour faire ces changements. Ainsi, par exemple, Saturation, Luminosité, contraste et des choses comme la dette à ces images. Encore une fois, si vous utilisez des images gratuites, des morts super, surtout pour les clients à faible budget, parce qu'ils ne se soucient pas vraiment de l'apparence de leur blog. Mais si vous travaillez avec des clients disposant de budgets raisonnables, vous pouvez facilement intégrer ces ensembles d'images haut de dans votre travail à partir de sites comme Envato Elements par exemple. Et je vous recommande vraiment parce que vous pouvez trouver des millions de ces différentes images. Et à leur tour, ils vont rendre votre travail beaucoup plus professionnel, beaucoup plus poli que si vous utilisez simplement ces trois images. 4. Comment choisir des images de niche niche: Il y a beaucoup de façons pour vous de choisir des images de niche, mais je vais juste vous donner quelques conseils et des techniques sur façon dont je le fais et comment je l'ai fait depuis près de 20 ans. Donc, selon le créneau où vous travaillez, il y a un certain ton. Ainsi, par exemple, si vous créez un site Web pour les costumes pour hommes, par exemple, il y a une bonne chance que, qui est un site Web à la recherche premium. Et ils essaient de dépeindre un ton de professionnalisme, d'un design épuré, d'un certain style de vie que ces costumes vont représenter. Donc, évidemment, vous n'allez pas utiliser quelque chose comme un jaune vif ou un rouge vif portes et plaisir que vous allez très certainement utiliser. Ces couleurs gris clair sont des couleurs gris foncé, peut-être un soupçon de bleu, peut-être même d'or quelques endroits si vous travaillez contre la couleur noire. Donc ça va vous permettre de vous démarquer, évidemment des couleurs blanches. Donc, lorsque vous choisissez vos images, assurez-vous d'avoir ces choses à l'esprit car vous n'allez pas choisir vos modèles sur ce fond jaune et sur le fond, qui va ruiner l'apparence de votre costume. Évidemment, vous allez vous adapter au ton. Donc, cela signifie que vous allez chercher des modèles qui sont dans ces positions sur des fonds blancs correctement exposés, par exemple, parce qu'il sera beaucoup plus facile pour vous d'intégrer ces images dans votre travail. Modèles également sur le fond noir parce que vous pouvez utiliser quelque chose comme une obésité de l'écran et ensuite vous pouvez réduire ce fond noir contre votre conception. Ainsi, vous pouvez facilement extraire votre modèle de votre arrière-plan et facilement adapté à votre design. Donc, ce n'est évidemment qu'un des exemples. Assurez-vous de donner le ton et de voir quel ton est votre créneau. Donc, vous allez chercher des images qui se trouvent dans cette niche et dans cette ville, ce qui est vraiment important parce que vos visiteurs vont s' aligner beaucoup plus facilement s'ils voient des choses qu'ils comprennent, plutôt que le des choses qu'ils ne font pas. Donc, par exemple, revenons à cet exemple de costume. Imaginez que vous êtes ce gentleman à la recherche d'un costume pour votre mariage, par exemple, ou pour le mariage de votre ami ou quelque chose comme ça. Et vous êtes à la recherche de vraiment haut de gamme, quelque chose de vraiment haut de gamme, quelque chose de vraiment cher, parce que vous voulez venir pour ce jour-là et vous voulez avoir l'air bien. Ensuite, vous visitez ce site, qui est toutes les couleurs criantes et tout, je ne sais pas, rouge, vert, bleu. Ça ne te donne pas ce sentiment. Il ne vous donne pas cette lingette ou le site Web qui vend ces costumes coûteux. Donc quelque chose ne va pas se sentir bien. Quelque chose va bien paraître ? Peut-être qu'au premier coup d'œil, vous n'allez pas trop y penser. Mais lorsque vous commencez à naviguer, vous allez évidemment remarquer que quelque chose n'est pas bon ici. Cela ne va pas vous donner cette confiance d'acheter ce costume, parce que cela ne vous donne pas l'ambiance que vous attendez habituellement du site Web de costume. Ensuite, vous allez sur le site des concurrents, qui a toutes ces choses dont nous avons parlé pour cet exemple particulier, vous allez vous sentir beaucoup plus chez vous là-bas. Vous allez vous sentir beaucoup plus à l'aise avec votre décision d'achat et vous allez vous sentir beaucoup plus chez vous, pour ainsi dire, parce que vos attentes sont satisfaites par ce site plutôt que par ce site précédent avec tous ceux qui crient couleurs. C' est pourquoi il est vraiment important lorsque vous choisissez des images, assurez-vous que vous choisissez des images de niche, que votre public se connectera facilement. Par conséquent, votre site Web en retour va être beaucoup plus relié à vos utilisateurs et applications mobiles ainsi que d'ailleurs, parce que vos utilisateurs vont reconnaître ces indices, ces images, ces couleurs, ces styles, car ils sont habitués à eux. Alors n'essayez pas d'expérimenter trop et d'aller farouchement avec vos images. Assurez-vous de vous en tenir à ce que vous savez et assurez-vous de vous en tenir à ce qui fonctionne, qui est la chose la plus importante. Après tout, assurez-vous que vos utilisateurs se sentent aise lorsqu'ils visitent votre site Web ou une application mobile. Parce qu'en retour, cela va amener plus de conversions. 5. Premium Gratuit VS Premium: Dans cette vidéo, je vais vous montrer quelques différences principales lorsque vous cherchez des images vous-même. Ce sont donc les exemples où votre client n'a pas d'images. Vous devez donc rechercher des images pour ce projet particulier. Et je vais vous montrer quelques différences clés entre les images gratuites et premium et ce que vous supposez rechercher lorsque vous naviguez à la recherche d'images. Nous avons donc ici notre site Web appelé Unsplash.com, qui est généralement ce que ces designers utilisent aujourd'hui. Et il y a aussi pixabay.com et beaucoup de ces autres sites Web. Mais généralement Unsplash et Pixabay sont les sites Web qui vont généralement chercher. Donc, si nous tapons un costume, par exemple, comme je vous l'ai montré dans des exemples précédents, et comme nous avons parlé dans la vidéo précédente, je vais juste vous montrer et comparer les différences entre le site gratuit et le site premium. Donc, comme je l'ai dit, nous avons un costume juste ici et je vais copier ce texte et je vais venir sur ce site qui est dans des éléments vitaux, qui est un site web premium. Et je vais simplement le coller ici. Recherchez les photos, mais vous pouvez rechercher toutes ces choses différentes. Donc stock vidéo, modèles vidéo, musique, effets sonores, modèles graphiques comme les plaques d'impression et l'interface utilisateur, UX enfants, présentation graphique, dopants, photos, polices et réponses modèles web, 3D et bien plus encore. Donc nous nous adaptons en costume. Et il y a aussi ce site appelé 2020 largeur, 50 millions d'images supplémentaires. Oui, c'est 50 millions d'images supplémentaires. Et toutes ces images sont vraiment de haute qualité téléchargées par tous ces photographes indépendants. Donc, si nous allons sur ce site qui est 2020 stock et tapez en costume juste ici. Donc, nous avons exactement la même requête de recherche sur tous ces sites Web. Et ce que nous avons ici sur Unsplash, c'est quand nous planons, nous avons cette course de chasseurs. Nous avons un autre photographe, ne sont ni photographe, un autre photographe. Donc tous ces photographes sont différents. Allons donc avec, voyons, c' est Benjamin Roscoe ainsi que ce genre. Visitons leur profil. Comme vous pouvez le voir, ils prennent des images ou des toits, des bars, des rivières, des détails. Ici, nous avons quelques images de cette personne en costume. Mais c'est fondamentalement ça l'est. Vous pouvez voir que nous avons seulement trois ou quatre images différentes. Et une fois de plus, ces images de barres tout le long. Encore une fois, si je clique sur cette image, par exemple, ce que j'ai ici est que je peux cliquer, Lire la suite pour voir tous ces différents détails. Et je peux taper les infos et nous pouvons voir que l'appareil photo est Sony, ISO 400. Et ce sont les dimensions. Donc, ils sont en fait assez bons à ce stade. Et vous pouvez voir combien de téléchargements et de vues cette image avait. Mais si nous revenons en arrière et cliquez sur cette image, par exemple, alors allez à info. Vous pouvez voir que c'est 5 K mais encore une fois, nous avons le même problème. Donc, quand je clique sur ce profil, par exemple, vous pouvez voir que nous avons ces nombreuses images différentes, mais il n'y a qu'une image d'un costume. Imaginons donc que vous voulez utiliser cette couleur particulière de costume, par exemple, et que vous voulez l'utiliser dans cet environnement. Donc disons ça à l'intérieur contre ces escaliers et des trucs comme ça. Donc, vous pouvez juste imaginer que votre modèle va être photographié à l'intérieur. Par exemple, disons à l'intérieur du centre commercial, faire un voyage shopping ou dimanche mensonge mort. Il faut donc trouver des images de cette nature. Eh bien, ce n'est qu'une image et vous êtes coincé. Vous n'avez pas d'autres options. Donc, si on y retourne et regarde toutes ces autres images d'un costume. Comme vous pouvez le voir, il n'y a pas beaucoup plus. Il y a peut-être celle-là, mais il y a un arbre de Noël à l'intérieur. Donc ça ne marchera pas pour toutes vos occasions. Et comme vous pouvez le voir, il n'y a pas beaucoup d'options ici pour votre projet particulier. Donc, nous pouvons aller sur certains de ces sites et nous pouvons trouver quelque chose qui va fonctionner pour nous. Disons que c'est le centre commercial et c'est le magasin à l'intérieur du centre commercial. Alors ouvrons ça à l'intérieur d'un nouvel onglet. Remarquons rapidement que c'est huit K de taille, par exemple. Et vous pouvez lire plus loin cette information. Vous pouvez en apprendre plus à ce sujet. Et nous pouvons voir qu'il est quatre, nécessite atelier de concepteur de couture. Mais si je fais défiler ici, vous pouvez voir que tout est de la même série. Vous pouvez donc voir ce même modèle, même genre d'arrière-plans, même éclairage, le même photographe. Donc, vous pouvez voir sur les images est un photographe. Donc, tous, et ce qui est génial à ce sujet est si je clique, Voir plus et ouvrir dans un nouvel onglet, vous pouvez voir combien de ces différentes images nous avons. Ainsi, vous pouvez clairement créer une histoire à partir de toutes ces images. Ainsi, vous pouvez commencer sur votre page, par exemple, en accueillant votre utilisateur dans votre boutique, puis en lui expliquant la qualité de vos costumes et comment ils sont fabriqués, combien de temps il faut pour chaque personne pour voir un bouton particulier, par exemple, et des choses comme ça. Vous pouvez donc vraiment zoomer sur les détails avec ces images car elles sont de qualité 8 K et elles sont vraiment énormes. Vous pouvez ensuite leur dire comment l'ajustement va fonctionner quand ils ont essayé de s'adapter, comment cela les fait sentir. Quand ont été les matériaux pour le costume sont sources et tellement plus. Vous pouvez donc le faire avec ces images haut de gamme. Vous pouvez vraiment raconter une histoire plutôt que de simplement montrer une image singulière. Ce que cela va faire, c'est que votre site Web aura l'air beaucoup plus professionnel, beaucoup plus poli. Parce qu'une fois de plus, vous pouvez plonger votre spectateur dans cette expérience parce que vous avez toutes ces images différentes du même ensemble. Jetons un coup d'oeil à eux une fois de plus. Vous pouvez voir qu'ils boivent du café. On a l'équipement juste ici. Nous avons testé le matériel. On a l'équipement juste ici. Nous avons, par exemple, convenu que nous avons des matériaux différents. On a comment le ti va s'adapter. Donc, vous pouvez clairement voir juste à partir d'un seul exemple pour ces costumes, combien de ces différentes images nous avons. Donc, vous pouvez juste imaginer zoomer sur ces détails et combien vous pouvez réellement faire avec toutes ces différentes images plutôt qu'avec une seule image. Enfin, nous pouvons faire la même chose ici. Donc, si je tape en costume et que je l'ouvre, vous avez ces différentes collections et à l'intérieur de ces collections. Donc si je les ouvre, vous pouvez trouver différents photographes. Donc, par exemple, j'aime vraiment ce costume. Peut-être que je peux y aller et le chercher, ou peut-être que je peux même jeter un coup d'oeil à celui-ci. Donc ce sont les collections. Vous pouvez ouvrir ces collections de ces différents photographes et ensuite vous pouvez explorer d'autres images. Donc, ici, nous avons cette image et ce modèle. Donc, si je clique ici et ouvre leurs collections, nous avons ces différentes photos, nous avons différents lobes, nous avons toutes ces choses ici. Pour que nous puissions explorer et voir toutes les images de ce photographe. Vous pouvez voir clairement que nous avons un tas de ces différentes images. Mais encore une fois, si vous n'avez pas envie de 2020 et toutes ces images différentes, vous pouvez toujours revenir aux éléments Envato parce que ces deux éléments font partie de la même collection. Donc, lorsque vous obtenez cet abonnement à Envato Elements, qui est un abonnement annuel, cela sera inclus. Donc, si vous ne trouvez pas d'image ici, alors peut-être que vous pouvez essayer sur 2020. Vous pouvez le voir dit par Envato. ne sont donc que quelques comparaisons différentes entre les images gratuites et payantes. Assurez-vous juste de comprendre que vous ne pouvez pas faire un travail professionnel hautement poli avec images libres à cause de ces limitations que je viens de mentionner, vous devez utiliser des actifs professionnels comme des images de, pour exemple, Envato Elements. Vous n'avez pas besoin d'utiliser des éléments Envato. Il y a des tas de sites Web différents là-bas. Mais parce que je vous ai montré ce qui est inclus dans votre abonnement, je les aime vraiment et je les utilise tous les jours pour mes projets. Cela en retour va rendre ses projets beaucoup plus polis, beaucoup plus professionnels. Et si vous essayez de vous vendre votre design à votre client, par exemple, si vous essayez de les présenter, sont la conception d'un DEA, un changement de conception, une refonte complète, ou le dimanche sont morts. Faire cela avec ces images professionnelles et polies va être beaucoup plus simple qu'en tapant des images différentes de différents photographes avec des expositions différentes, avec différents modèles sur une page, puis en essayant de les vendre morts. 6. Optimisation des images: Une autre partie clé lorsque vous créez des projets à l'aide de ces images, en particulier ces images gigantesques, est l'optimisation des images. Cela signifie que le logiciel de votre choix va réduire la taille de l'image, qui à son tour va télécharger beaucoup plus rapidement sur le serveur, par exemple. Alors que, à son tour, va charger votre site Web beaucoup plus rapidement et lui donner un meilleur classement Google, ce qui signifie un meilleur référencement. Donc, fondamentalement, cette optimisation SEO est extrêmement important, en particulier sur un projet de conception de site Web, sur les projets de conception mobile Il est vraiment important aussi, surtout si vous tirez de la même base de données. Donc, l'optimisation de vos images va donner à vos utilisateurs une meilleure expérience sans perdre la qualité de ces images originales. Donc si je vous ramène encore une fois ici à Envato Elements. Et puis vous pouvez voir, par exemple, cette image que nous regardions précédemment. Donc, comme vous pouvez le voir, presque 8 K en taille. Donc, quand j'appuie sur le téléchargement, il va tirer tous ces différents projets de classe. Donc, par exemple, je vais l'appeler projet Image, ou notre projet d'image, par exemple. Et je peux simplement créer ce projet. Maintenant, ce que cela signifie sur Envato Elements, c'est que je peux ajouter tous ces différents éléments à ce projet particulier. Donc, vous pouvez juste imaginer que je vais utiliser toutes ces images différentes. Je vais utiliser différentes icônes, peut-être même un thème WordPress. Peut-être que j'ai besoin de la musique de mes vidéos. Donc, tous ces différents éléments que vous avez téléchargés à partir d' Envato Elements, vous pouvez simplement mettre dans ce projet que nous avons créé. Tout à l'heure, cela signifie qu'il sera beaucoup plus simple pour vos clients d'accorder une licence à tous ces articles au cas où une telle chose serait nécessaire. Ainsi, par exemple, vous pouvez utiliser un abonnement pour nombre illimité de clients dans chaque client peuvent avoir leurs propres projets, ce qui signifie que la licence peut être aussi simple que simplement copier une licence, puis les envoyer à vos clients et le danger et vont contenir cette licence et ils vont le garder. Il n'est donc pas nécessaire de mettre à jour ces licences chaque année. Fondamentalement, une fois que vous payez, une fois que vous l'avez téléchargé, c'est tout. Ainsi, vous pouvez facilement mettre sous licence tous ces éléments différents, y compris les images sur Envato Elements pour vos projets. Donc, si nous revenons ici, je peux simplement cliquer sur notre projet d'image pour créer ce projet. Ensuite, je peux simplement ajouter et télécharger. Et il va commencer à télécharger ici. Maintenant, vous pouvez voir que cette image est assez énorme. En fait, il fait presque 18 mégaoctets. Donc, une fois téléchargé, il est temps d'optimiser nos images. Maintenant, l'optimisation de l'image n'est rien de vraiment nouveau. Il est fait par les développeurs depuis des décennies maintenant et par les designers depuis quelques décennies maintenant aussi. Fondamentalement ce que c' est, il va simplement réduire le nombre de pixels à l'intérieur de votre image. Il va contenir la taille de votre image va contenir la netteté, va contenir la qualité. Mais à son tour, cela va vous donner une taille de fichier beaucoup plus petite parce que toutes ces différentes caméras ajoutent simplement la taille du fichier, en particulier en fonction de l'objectif que vous utilisez et du modèle d'appareil photo que vous utilisez. Pour ne pas t'ennuyer avec trop de détails, je vais te le montrer en pratique. Donc parce que je suis sous Windows, j'utilise quelque chose appelé émeute. Et si vous êtes sur un Mac, vous pouvez utiliser quelque chose appelé image optimale d'un vécu un fichier PDF. Et vous pouvez simplement cliquer sur le lien pour télécharger celui que vous avez besoin annuel. Et il existe de nombreux outils différents pour les deux systèmes d'exploitation, la fois Windows et Mac. C' est vraiment à vous de décider lequel vous voulez choisir. Je choisis, non ? Et je l'utilise depuis des années maintenant et ça a bien fonctionné pour moi. Donc si je vous ramène, vous pouvez simplement voir à quoi ressemble l'émeute. Et c'est là. C' est vraiment un outil de base et veulent vraiment que vous pouvez facilement apprendre à utiliser et fondamentalement ce qu'il fait. Il, il a ces deux Windows et si je fais glisser et déposer mon image à l'intérieur, donc c'est l'image que nous avons choisie. Vous pouvez voir que vous pouvez ouvrir l'image, vous pouvez importer des images par lots, ce qui est encore une fois vraiment important, surtout si vous travaillez avec ces collections. Donc, ne pas perdre de temps. Imaginez que vous avez, par exemple, 50 images différentes que vous téléchargez. Et c'est la grande vague. Par exemple, à partir d'Envato Elements. Vous ne pouvez même pas utiliser toutes ces images, mais c'est génial parce qu'elles sont là. Vous pouvez simplement les sélectionner tous, les télécharger tous, les mettre dans la même collection, et maintenant les optimiser tous en utilisant, à droite, par exemple. Donc, ici, je vais simplement utiliser une image. Et ce que je vais faire, c'est que je vais cliquer et le faire glisser jusqu'ici. Puis une fois qu' il sera chargé, ça va me demander ça. Ce fichier contient donc une image haute résolution. Rad peut gérer de telles images, mais le traitement peut être assez lent dans cette situation. Ils veulent le redimensionner pour nous. Il est recommandé que l'image originale ne soit pas modifiée. Donc, remarquez ce qui allait se passer lorsque je clique sur Oui. Ça va nous donner cette taille originale. Donc, il va mettre à l'échelle sa nouvelle taille, 100 par 100. Donc, gardez le rapport d'aspect. Ceci est en pourcentage parce que vous pouvez voir ici et vous pouvez l'abaisser en pixels spécifiques. Mais je vous recommande de garder ce pourcentage identique. Donc n va simplement penser où il descend fondamentalement à 100%. Ce que cela signifie, c'est que lorsque je clique sur OK, vous pouvez voir l'image initiale ici. Donc 17,5 mégaoctets en taille, et la nouvelle image est de 3,4 mégaoctets en taille. Maintenant, il va se charger beaucoup plus lentement. Donc, quand je clique ici et que je survole, vous pouvez voir 17,5 mégaoctets. Et c'est l'image juste ici. Mais quand je l'optimiserai, ce sera 3.4. Donc, quand je frapperai ici, je veux le remplacer. Je veux taper oui. Les extrémités vont essentiellement remplacer cette image. Donc, quand je clique maintenant et que je passe 17,5 mégaoctets, alors laissez-moi le rafraîchir. Et vous pouvez voir que c'est 3,4 mégawatts. Donc, fondamentalement, nous avons commencé avec 17,5 mégaoctets. Nous sommes maintenant à 3,4 mégaoctets. Et ce qui est le plus important de tout, si je survolais ici, vous pouvez voir 79, 52 avec 53, 04. Et si nous le reprenons ici, vous pouvez voir que ce ne sont pas exactement les mêmes dimensions qu'avec l'image originale. Il suffit de réduire la taille de l'image sur tout. Donc, ce que cela signifie pour vous fondamentalement va donner à vos développeurs beaucoup plus de salle de jeu parce que vous réduisez ces tailles de fichiers, vous pouvez aller encore plus loin. Par exemple, j'utilise quotidiennement Adobe XD pour concevoir tous mes projets. Donc, vous pouvez juste imaginer que je vais mettre cette image AK dans quelque chose qui est, Par exemple, disons 1920 par 1080. Et puis je vais l'exporter de l'exil dans cette résolution particulière. Donc 1920 par 1080, ce qui va encore réduire l'espace nécessaire. N va encore réduire la taille de cette image. Donc vous pourriez dire, pourquoi ne pas l'utiliser comme ça tout de suite ? Eh bien, parce que vous tirez toutes ces images énormes dans votre logiciel de choix. Dans mon cas, Adobe XD va traîner massivement parce que ce sont des fichiers énormes comme vous l'avez vu. Donc, juste cette image particulière seule est de 17,5 mégaoctets. La majorité de mes fichiers sont d'environ 20 mégaoctets. Donc, vous pouvez juste imaginer le fichier de conception entier est de 20 mégaoctets, et cette seule image est de 17,5 mégaoctets. Il suffit donc de garder ces choses à l'esprit lorsque vous créez, en particulier pour le Web, parce que vous essayez de faire de Google Optimize ce site Web. Et vous essayez de faire en sorte que le plus grand nombre de personnes trouvent ce site Web que possible. Il est donc très important pour vous d'optimiser ces images. Et quand vous travaillez avec le projet de conception mobile, il est important aussi parce que le système d'exploitation et l'application elle-même, il ne va pas tirer toutes ces images énormes de la base de données va juste tirer une image singulière qui est assez petite en taille. Et il va encore contenir cette énorme dette de qualité à l'origine si elle est allé photographe, a pris cette image. 7. Structure de nominal: Comme avec l'optimisation de vos images, il est vraiment important de nommer votre image est correctement parce que de cette façon ils seront affichés correctement sur votre site Web ou sur votre application mobile. Il va être beaucoup plus simple pour vos développeurs de trouver ces images, les inclure dans le code. Et il va être beaucoup plus simple pour le code de tirer ces images des bases de données. Laissez-moi vous montrer ce que je veux dire sur l'image que nous venons de télécharger. Donc, si nous regardons cette image, je suis allé de l'avant et je l'ai téléchargée à nouveau dans le même projet. Ainsi, vous pouvez voir le nom jusqu'à l'année, tiret PA aux machines virtuelles, C4 ou autre. Et c'est la réduction de l'image. Donc, comme vous pouvez le voir une fois de plus, 17,5 mégaoctets, donc la taille d'origine et vous pouvez voir le titre juste ici. Et si je prends votre droite ici, vous verrez qu'on a un nom comme ça. Donc ce que nous pouvons faire avec cette image parce qu'elle va être prise dans notre logiciel de choix. Dans mon cas, Adobe XD. Dans votre cas, il peut être Sketch figma Photoshop Illustrator n'a pas vraiment d'importance. Donc, ce que vous pouvez faire avec cette image, c'est que vous pouvez faire un clic droit dessus et la renommer de cette façon. De cette façon, quand vous le faites glisser et le déposer dans votre logiciel de votre choix, il va se souvenir de ce nom et ensuite quand vous l'exportez, il va l'exporter comme ça. L' autre chose que vous pouvez faire est que vous pouvez aller à quelque chose comme Lightroom par exemple, et vous pouvez l'ajouter des métadonnées de cette image particulière, qui va vous donner beaucoup plus de détails sur quand cette image est, a été tourné avec quel appareil photo avec quelle lentille, avec quelle exposition et ainsi de suite. Donc, cela pourrait être nécessaire de vous si vous travaillez sur un type de projet de conception graphique, par exemple, pour des éditoriaux et des trucs comme papa, surtout si cette image est en train d'être imprimée sur d'énormes toiles. Donc, d'énormes clients haut de gamme vont avoir besoin de toutes ces informations pour lui, vous. Assurez-vous donc de comprendre que peu importe le type de projet sur lequel vous travaillez, il y a certaines exigences de votre part, mais pour la majorité de ces projets web et projets de conception d'applications, il suffit de renommer votre fichier sera bon assez. Donc, si je vous ramène encore une fois ici à notre image, ce que vous pouvez faire est juste d'imaginer que cette image, par exemple, sera située dans la section de votre héros. Ce que vous pouvez faire est de cliquer avec le bouton droit de la souris Renommer et simplement l'appeler héros, IMG. Ou si vous êtes un développeur veut ajouter des tirets, ajoutez un héros, un tiret, IMG ou un soulignement comme ceci. Donc ici soulignent IMG. Donc, cela dépend vraiment du développeur au développeur. Donc, lorsque vous commencez votre conception, si vous avez accès aux coordonnées de vos développeurs, demandez-leur simplement ou demandez simplement à vos clients afin qu'ils puissent demander à votre développeur. Donc, cela va à son tour être beaucoup plus rapide pour vous lorsque vous commencez à créer de sorte que vous pouvez renommer toutes ces images et éléments, par exemple, comme les icônes dans les illustrations avant de commencer à travailler, puis plus tard lorsque vous commencez à travailler. Et puis vous devez renommer tous ces fichiers une fois que vous les avez réellement inclus dans le logiciel de votre choix. Je sais que dans Adobe XD c'est vraiment une énorme douleur quand vous incluez des images comme avec ce nom vu jusqu'à la flèche, 58 à quoi que ce soit. Et puis, lorsque vous essayez de les exporter sur votre bureau et que vous voulez les envoyer à nos développeurs, vous devez les renommer manuellement tous dans votre dossier d'exportation, par exemple. Et surtout si vous les partagez avec quelque chose comme la gaule , par exemple, avec vos développeurs, alors vous devez les renommer dans Zeplin. Donc c'est vraiment un bondement. Si vous pouvez renommer toutes vos images ou au moins certaines de vos images à l'avance, parce que cette façon va être beaucoup plus simple pour vous de concevoir et aussi assurez-vous de demander à vos développeurs quel genre d'abréviation due jour comme. Aussi, si vous, par exemple, utilisez cette image de héros et imaginez que si je vous emmène ici, peut-être que ce sera à propos de nous. Ce sera le produit 1, ce sera la première section du blog. Ça va être un témoignage ou quoi que ce soit. Assurez-vous de renommer toutes vos images correctement. Ainsi, par exemple, si vous êtes un témoignage a quatre images, puis demandez à votre développeur sur l'abréviation. Ainsi, par exemple, tiret de témoignage un, témoignage, tiret deux, tiret trois, tiret quatre et quoi que ce soit ou soulignement ou sans tirets, traits de soulignement et ainsi de suite. Donc juste témoignage pour tous combinés. Assurez-vous de leur demander, aient-ils les casquettes, Caps Lock activé. Mais la majorité des développeurs ne le font pas. La majorité des développeurs au moins que je connais, aiment utiliser des images avec des petites lettres et des chiffres afin qu'ils n'aiment pas qu'ils soient des majuscules regardent par exemple. Ce ne sont donc que quelques conseils et techniques que j'aime partager avec vous car je pense que cela va améliorer massivement votre temps avec ces projets, et cela va améliorer massivement la qualité de votre livraison à vos clients. 8. Votre projet de cours: Votre projet de classe pour cette classe est de créer une sorte de combinaison d'images afin que vous puissiez utiliser des images gratuites ou premium. C' est vraiment à toi de décider. Ce que je veux juste que vous fassiez, c'est utiliser votre logiciel préféré de votre choix. Vous pouvez donc utiliser Photoshop, Illustrator, XD, sketch, Figma, quel que soit le logiciel que vous utilisez, peut-être même Canva, si c'est votre truc et que vous aimez utiliser Canva. Mais fondamentalement, ce que je veux que vous fassiez est de créer un projet de votre propre, en utilisant vos propres images afin que celles-ci puissent être soit des images gratuites de sites Web comme Unsplash ou Pixabay, des images premium de sites comme Envato Elements et comme je vous a montré, fondamentalement ce que je veux que vous fassiez est de créer des images qui se rapportent les unes aux autres. Donc, cela peut être en couleur ou en classe ou dans le style, ou dans le format de base ou tout ce que vous voulez. Donc, comme par exemple, je vous ai montré avec l'exemple TI, peut-être que vous pouvez utiliser quelque chose avec ces costumes. Peut-être que vous pouvez combiner les couleurs des costumes ensemble juste pour mettre une sorte d'ambiance pour votre projet particulier. Vous pouvez utiliser des images de voiture et vous pouvez utiliser un style de voiture particulier. Donc, par exemple, si vous voulez un luxe, alors vous allez utiliser la limousine. Et généralement ces limousines sont de couleur noire. Mais encore plus loin, cette voiture est-elle sur la route, cette voiture est-elle garée, par exemple, sur un peu rapide en place comme Monaco par exemple ? Ou quelqu'un sort de cette voiture comme une célébrité. Alors assurez-vous de faire attention à ces chars. Choisissez le créneau que vous voulez, quel que soit le format que vous voulez. Mais ce que je veux que tu fasses, c'est de rassembler toutes ces images. Il n'a pas besoin d'être beaucoup. Vous pouvez utiliser 56 images, quelque chose que j'ai fait stupide pour les mettre sur un seul document. Vous pouvez utiliser un format A4 ou lettre si vous êtes originaire des États-Unis. Il suffit de les assembler, l' enregistrer comme un JPEG et de les télécharger vos projets de classe Old Lu comme pour voir ce que vous les gars pouvez trouver. Et je suis vraiment intéressé de voir comment optimiser ces images pour vos projets et comment créer ces looks et sensations pour vos propres projets personnels ? Parce qu'une fois de plus, je suis vraiment intéressé de voir ce que vous pouvez trouver et je peux attendre de les voir dans votre classe, vos projets. 9. Outro: Alors on y va. Nous avons atteint la fin de la classe. J' espère vraiment que vous avez aimé cette classe et j'espère vraiment que vous allez choisir quelques choses ici et là sur l'optimisation de vos images, sur le choix de vos images, les mettre dans ces différentes catégories, dans ces différentes collections et comment vous allez aller plus loin avec vos projets sont vraiment vous encourager à consulter le fichier lisez-moi parce que je vais mettre quelques choses dans ce PDF. Vous pouvez simplement cliquer sur les liens. Il vous mènera à n'importe quel lien vers lequel vous voulez aller. Et j'espère vraiment que vous allez utiliser au moins ces outils d'optimisation d'image parce que je crois vraiment qu'ils vont transformer votre travail. Et il va fondamentalement améliorer votre relation entre vous et vos développeurs parce qu'ils vont vous aimer beaucoup plus. Parce que vous optimisez toutes ces images et que vous leur avez épargné un tas de temps qu'ils perdraient. Sinon, j'espère vraiment que vous allez prendre note. Et la prochaine fois que vous commencerez à sélectionner ces images, placez-les dans des ensembles et assurez-vous qu'elles utilisent la même tonalité, avec les mêmes couleurs, elles utilisent le même modèle, le même éclairage. Parce que tout cela seul va apporter beaucoup plus de professionnalisme à votre design et va le faire ressortir et vos clients vont juste vous aimer pour cela. Merci encore une fois d'avoir regardé ce cours et j'espère vraiment voir votre travail à l'intérieur du projet de classe et jusqu'à la prochaine fois, prenez soin de vous.