Création de bannière Web avec Adobe Photoshop et Illustrator

1. Introduction: Il est temps de concevoir des bannières Web sympas. Allons-y Martin, j'ai plus de 20 ans d'expérience en tant que graphiste, illustrateur et formateur certifié Adobe. J'ai travaillé avec des entreprises comme BBC, Disney, Google, Ikea, et j'ai hâte de partager mes meilleures pratiques avec vous. Il s'agit d'un cours pratique simplifié axé sur un projet de conception réel. Je vais tout vous expliquer étape par étape, et vous obtiendrez tous les fichiers d'exercices afin que vous puissiez les suivre. Au cas où tu préfèrerais ne pas me copier. Vous pouvez également suivre mon flux de travail en utilisant les ressources alternatives fournies et créer quelque chose de complètement unique que vous pourrez mettre en valeur dans votre portfolio créatif. Je suis sûr que ce cours vous incitera à créer quelque chose d'incroyable. Nous allons commencer par apprendre certains termes importants de la publicité interactive, tels que le CTR, mutations des bannières, les rapports hauteur/largeur courants, les tailles et les formats de fichiers préférés Ensuite, nous allons passer à Photoshop et créer notre première bannière à l'aide d'images, formes vectorielles et de texte. Nous réutiliserons cette première composition pour les variantes de bannières supplémentaires et apprendrons à utiliser les plans de travail et les objets intelligents Enfin, nous allons créer une bannière animée dynamique à l'aide panneau de chronologie de Photoshop et de la fonction d'animation de cadres. Outre toutes les informations techniques, nous aborderons également certaines théories importantes du design graphique que vous pourrez appliquer dans n'importe lequel de vos futurs projets créatifs. Vous pouvez suivre ce cours sans aucune connaissance préalable en matière conception graphique, d'illustration ou d'applications DOB Mais pour terminer le projet, vous devez avoir accès à DOB Creative Cloud et à l'ordinateur de bureau ou portable Mais maintenant, il est temps de commencer à créer Je vous verrai dans la prochaine leçon. 2. Flux de travail des bannières Web: Nous produirons des bannières web sympas. Certaines d'entre elles seront statiques, mais à la fin, nous créerons également une bannière animée. Nous allons commencer par l'image de notre héros, qui est généralement au format paysage. Nous allons ensuite créer des mutations à partir de cela, car il est très courant que vous deviez produire différentes versions ou variations de rapport hauteur/largeur. Le second que nous créerons sera un format carré. Ensuite, nous créerons également un format de portrait. Ensuite, nous préparerons trois images pour la version animée. Il s'agit donc des images 1 à 3, qui se retrouveront dans un document séparé où nous apprendrons à utiliser le panneau de chronologie et à générer des fichiers gif animés. Pour ce projet, nous passerons principalement du temps dans Photoshop. Cependant, à un moment donné, nous passerons à Illustrator uniquement pour créer quelques éléments vectoriels que nous pourrons ensuite utiliser dans nos compositions et pour ajouter de la saveur et du piquant aux bannières. Là encore, vous aurez la possibilité de choisir les images avec lesquelles vous souhaitez travailler. J'ai choisi deux de ces clichés. Mais si vous le souhaitez, vous pouvez même trouver des images complètement différentes avec lesquelles travailler. Encore une fois, vous pouvez soit me suivre étape par étape et recréer exactement le même design, soit être un peu plus créatif et expérimenter et explorer vos propres idées. J'espère donc que vous avez hâte commencer car dans la prochaine vidéo, nous allons d' abord rassembler les images et les textes dont nous aurons besoin pour nos bannières. 3. Préparation d’images: J'ai décidé de travailler avec ces deux images et ces deux baskets, principalement parce que j' adore leurs couleurs. J'ai été particulièrement inspiré par la couleur de la Nike Trainer à droite et cette jolie toile de fond bleue que nous avons sur ce cliché et que je vais utiliser pour mes bannières. Donc, pour commencer, nous devrons faire une sélection de l'inverse parce que nous en avons deux distincts de son arrière-plan original. J'ai sélectionné cette image et je vais dans le menu Sélectionner et je choisis à nouveau un sujet, car nous avons une forte différence de contraste entre le premier plan et l'arrière-plan. Il s'agit d'une sélection très rapide et facile. Et tout ce que nous avons à faire est de transformer ce masque en cliquant sur l'icône du masque en bas du panneau Calques. Ensuite, transformez tout cela en un objet intelligent qui conservera ou conservera la qualité d'image d'origine. Il suffit donc de convertir cela en objet intelligent. Cela est particulièrement utile lorsque vous travaillez sur des bannières, car vous finissez par créer de nombreuses variations différentes de tailles différentes. Et vous ne voulez pas finir par avoir détails pixélisés une fois que vous avez redimensionné vos images. Faisons donc la même chose avec l'autre image ici à droite. Encore une fois, cliquez dessus avec le bouton droit de la souris et convertissez-le en objet intelligent. Ici, nous n'aurons pas à faire de sélection car j'aimerais utiliser cette jolie ombre portée que nous avons sur cette photo ainsi que la couleur d'arrière-plan. Maintenant que nous les avons prêts, créons un nouveau document. Et je vais mettre cela en place pour un projet Web. J'ai donc choisi Web, qui va automatiquement configurer le nouveau document en tant que tableau d'art, et j'utiliserai la taille suivante, 1280 x 600. Notez qu'il y a la petite case pour les tableaux d'art que je recommande de conserver pour ce projet particulier. Et une fois que nous avons cliqué sur Créer, il créera un nouveau document pour nous. Laissez-moi juste zoomer un peu. Et vous pouvez déjà voir que dans le panneau Calques plutôt qu'un calque d'arrière-plan, nous avons maintenant un tableau d'art, le von Lee ou le groupe. Il est en fait légèrement différent d'un groupe de calques, mais vous pouvez le considérer comme tel. Et actuellement, nous n'avons rien dans ce tableau d'art. Apportons donc les images que nous avons préparées. D'abord. Laissez-le ici, et nous pouvons voir que c'est énorme, donc nous devrons le réduire. Mais maintenant, je peux simplement fermer le document original. Et je vais aussi copier cet objet intelligent. Je peux même utiliser Command ou Control C , puis Command ou Control V pour le coller. Fermons encore une fois le document original. Nous n'avons pas à le sauver. Nous pouvons maintenant sélectionner ces deux couches. Et avec l'outil Transformation libre, qui est Command ou Control T, nous pouvons les réduire. Maintenant, j'ai le New York en tête, mais dès que je déplace la couche converse en haut, nous pouvons voir que nous avons une bonne sélection ici. Nous serons donc en mesure de placer ces deux images sur un tableau d'art facilement. Maintenant, pour éviter que le fond blanc ne s'affiche, je vais également ajouter un calque d'arrière-plan solide. Ceci provient de l' option de réglage, couleur unie. Et je cliquerai sur l'arrière-plan du Nike Trainer pour goûter cette couleur bleue. De cette façon, nous aurons une infinité de couleurs d'arrière-plan, sorte que nous ne serons pas limités aux bords de cette autre image. Maintenant, tout d'abord, je vais m'assurer que ces chaussures sont réalistes en termes de taille les unes par rapport aux autres. Et je commencerai déjà à les faire pivoter. Je pense donc que cela peut être sur un angle et l'inverse est déjà sur un angle amusant. Je vais juste le rendre légèrement plus petit. Une fois de plus, nous en apprendrons plus sur les objets intelligents plus tard. Mais pour l'instant, n'oubliez pas que chaque fois que vous travaillez avec des objets intelligents, vous n'avez pas à vous soucier de perdre qualité de l'image lorsque vous redimensionnez des calques. Donc quelque chose comme ça, j'ai l'impression d' être une belle composition, assez dynamique. Nous avons donc deux couleurs contrastées, mais aussi des angles contrastés. Et n'ayez pas peur de recadrer des images dans vos compositions, que ce soit pour l'impression ou le Web, si vous trouvez le bon endroit pour les recadrer, cela peut le rendre excitant et intéressant. N'oubliez pas que nous avons beaucoup parlé de recadrage d'images cette semaine. 4. Préparation d’éléments de texte: Ensuite, apportons les éléments de texte. Pour ça. Je vais utiliser cette police que j'ai incluse dans les fichiers d'exercice et aussi sur le tableau avec les images, vous trouverez un lien vers la police d'origine. C'est donc la police appelée vitesse A4, et je vais juste taper une grosse vente et l'apporter ici. Rendons ça un peu plus petit. Et pour l'instant, je ne vais pas mettre ça sous un angle. Gardez-le droit et dupliquez-le avec Alt ou Option, cliquez et faites glisser et tapez. Sur toutes les baskets. Cela peut être plus petit. Il s'agit de la copie secondaire. Et pour cela, je vais utiliser deux nouvelles couleurs que nous pourrons introduire. Donc, tout d'abord, sélectionnez tout et changez la couleur en bleu foncé ou peut-être quelque chose de l'entraîneur lui-même. Comme cela fonctionnera si vous souhaitez utiliser les mêmes valeurs exactes. Il s'agit des valeurs RVB, 8361. Vous pouvez les saisir si vous le souhaitez. Je vais juste cliquer sur OK. Et puis, pour le jaune, je vais choisir un jaune très intense. Encore une fois, vous pouvez voir les valeurs ici, 55 à 520. Nous allons cliquer sur OK et accepter ces modifications en cliquant sur la bande en haut. Enfin, nous aurons également besoin du petit autocollant indiquant jusqu'à 50 %. Pour cette première fois, je vais dessiner une ellipse. Il y a donc l'outil ellipse. Et je vais juste changer la couleur de remplissage en blanc. Nous n'avons pas besoin de la couleur du trait et nous devons nous assurer que cette couleur est définie sur la forme. Ensuite, nous pouvons simplement commencer à dessiner et nous assurer que vous maintenez la touche Maj enfoncée pendant le dessin. Cela permettra de s'assurer qu'il s'agit d'un cercle parfait. Pour l'instant, je vais juste placer ça quelque part ici. Avant d'ajouter le texte. Je vais juste changer la couleur en noir. Et cette fois, la police ou la police sera doyenne. Italique, 2014, italique. Je vais également réduire la taille, peut-être 200 points, puis cliquer quelque part ici sur la toile. Nous pouvons donc taper jusqu'à ensuite appuyer sur Entrée et 50 %. Maintenant, nous pouvons réellement voir ce texte, mais je vais le déplacer vers le haut. Et je me suis rendu compte que ce n'était pas la police que je voulais utiliser. Donc, au lieu d'Italica, je veux utiliser l'italique extra gras. Cela va avoir plus d'impact, mais il n'est pas nécessaire que ce soit dans toutes les capitales. Je veux donc que ce soit en minuscules, ce que nous pouvons obtenir en accédant aux options supplémentaires de formatage des caractères cliquant sur cette icône ici dans la barre d'options, puis en supprimant toutes les majuscules au cas où vous Je l'ai enfilé. De plus, j'aimerais avoir moins d'espace entre ces lignes, que nous pouvons également trouver ici dans le panneau des personnages. C'est donc ce qu'on appelle le leader. Et je vais juste faire glisser pour les rapprocher l'un de l' autre, les deux lignes. Et puis je réduirai aussi le texte jusqu'au plus petit. C'est la taille du texte à quelque chose comme ça. Et après avoir tous ces éléments sélectionnés, je peux les aligner sur leur centre. Et maintenant, nous pouvons utiliser l'outil Déplacer et simplement avec Free Transform Command ou Control T. Ensuite, en le faisant glisser vers le bas, nous pouvons l'aligner sur cette forme d'autocollant. Je vais également ajouter un peu d' angle ici juste pour le rendre un peu plus intéressant et réduire encore un peu plus l' espace entre les deux lignes. J'ai l'impression que nous pouvons augmenter encore un peu les 50 %. Mais nous devrons également avoir un peu plus d'espace entre les deux lignes, quelque chose comme ça. Je pense que ça a l'air bien. J'utilise simplement les touches fléchées du clavier pour positionner cela. Ensuite, nous pouvons même regrouper ces deux couches ensemble car nous devrons toujours les déplacer ensemble. C'est donc Commande ou Contrôle G. Une fois que vous avez sélectionné les deux calques, et je dirai juste 50 % d'autocollant, juste pour garder les choses bien rangées avant de passer à autre chose, je nommerai également les calques d'image. Cela va donc être conversé, et c'est New York. Et maintenant, nous avons tout prêt à continuer et à créer des éléments vectoriels dans Illustrator. Dans la vidéo suivante. 5. Ajouter des éléments vectoriels: La raison pour laquelle nous avons besoin de certains éléments vectoriels dans cette composition est que sans eux, il se sent un peu vide. Il y a trop d' espace négatif et il ne se passe pas grand-chose. Et pour que les choses restent plus dynamiques, ces formes géométriques que nous allons créer contribueront à ajouter de l'élan et de l'énergie à nos bannières. Nous voici donc dans Illustrator. Et tout d'abord, je vais simplement utiliser l'outil de ligne et dessiner une seule ligne droite en maintenant la touche Maj enfoncée. Et j'augmenterai peut-être l'épaisseur à cinq points. Ensuite, allez dans le menu Effet et faites votre choix parmi déformer et transformer la fonction appelée zigzag. Chaque effet que vous appliquez dans Illustrator devient un effet réel, ce qui signifie que vous pouvez toujours revenir et modifier les paramètres. Ne vous inquiétez donc pas de les régler exactement comme je le fais. Vous pouvez toujours revenir expérimenter et voir ce que vous préférez. Mais augmentons un peu la taille ici. Et ensuite, j' augmenterai aussi les crêtes. Peut-être que la taille peut être légèrement inférieure. Ajoutons simplement quelques crêtes, quelque chose comme ça. Je pense que ça a l'air bien. Nous pouvons donc simplement cliquer sur OK, puis dupliquons cela à l'aide l'outil de sélection alt ou option, cliquez et faites glisser. Et si le panneau d' apparence est ouvert, vous y verrez l'effet zigzag. Et c'est ce que j' entends par effets live. Vous pouvez simplement l' éteindre, puis le lion revient tout droit. Une fois que je l'ai rallumé, il revient dans la configuration en zigzag que nous avons créée. Nous pouvons bien sûr changer la couleur et l' épaisseur du trait si nous le voulions. Mais pour cette deuxième version, ce que je veux faire, c'est revenir à l'effet lui-même, ce que nous pouvons faire en cliquant sur le mot zigzag ici dans le panneau Apparence. Et au lieu du coroner, je vais mettre ça en douceur, qui créera cette belle ligne ondulée. Et pour cela, je vais juste ajuster un peu les choses. Nous aurons besoin de moins de crêtes ici et peut-être augmenter légèrement la taille, quelque chose comme ça. Peut-être un peu moins rigide en acier. Cliquons. Bon, et maintenant nous avons ces deux éléments prêts. Il est temps de créer une petite croix, ce que nous ferons à nouveau en utilisant l'outil de ligne. Cette fois, je vais tracer une ligne verticalement et augmenter l'épaisseur jusqu' à environ 30 points. Et puis en cliquant sur les paramètres de trait, je changerai le capuchon pour l'arrondir. Et puis créons une copie de cela, cliquons et faites-le glisser, puis faites-la pivoter tout en maintenant la touche Maj enfoncée, nous avons maintenant une version horizontale. Ensuite, nous pourrons l' aligner sur ces autres formes. Assurez-vous donc qu'il est parfaitement centré. Je viens d'utiliser et de me fier aux guides intelligents pour y parvenir. Maintenant, allons-y un peu plus petit. Je maintiens la touche Maj enfoncée et je la fais glisser vers le bas. Et peut-être aussi que la taille du trait peut être plus petite et nous reviendrons bientôt à cette forme. Mais je veux aussi créer un élément de type chevron pour lequel je commence à nouveau par l'outil ligne, il suffit de tracer une ligne droite puis de passer à l'outil stylo en appuyant sur P sur le clavier ou cliquez sur cette icône dans la barre d'outils, puis cliquez ici au centre, en ajoutant un point d'ancrage. Ensuite, à l'aide de l'outil de sélection directe, nous pouvons le faire glisser vers l'extérieur, peut-être le faire glisser vers quelque part ici. Maintenant, comme nous avons des bouchons ronds, il serait également bon d'avoir des jointures rondes. Je pense que c'est beaucoup mieux. Nous sommes prêts. Réduisons l'épaisseur sur ce point. Et puis en cliquant sur Alt ou Option et en faisant glisser, je peux créer un doublon, puis appuyer sur Commande ou Contrôle D plusieurs fois, nous pouvons créer des copies supplémentaires. Peut-être qu'un de moins suffit. Très bien, c'est aussi un autre élément avec lequel nous travaillerons. Enfin, je vais utiliser l'outil Ellipse et dessiner un cercle parfait maintenant la touche Maj enfoncée, puis en cliquant sur les paramètres de contour et en activant l'option de ligne pointillée. Ici, nous pouvons définir le tiret sur 0 , puis l'écart peut être de dix points ou plus. Maintenant, je peux voir que nous aurons besoin de plus d'espace. Je peux simplement cliquer dans cette section où nous spécifions la taille de l'écart. Et puis je peux utiliser la flèche vers le haut du clavier pour augmenter et le voir se mettre à jour en direct sur la forme. J'ai l'impression que 20 écarts dans ce cas fonctionneront. Et maintenant, je vais simplement copier cette forme avec commande ou le contrôle C, puis coller en place avec Commande ou Contrôle F. Ces options que vous pouvez trouver ici. Il s'agit donc de coller à l'avant ou de coller en place, selon le choix que vous préférez utiliser. Mais je vais également redimensionner cette nouvelle copie en maintenant les touches Alt ou Option et Maj enfoncées et nous pourrons créer un cercle plus petit comme ça. Mais parce que nous transformons cela, vous devez également vous assurer que l'épaisseur des lignes ne change pas. Il s'agit d'un paramètre que vous pouvez trouver dans le panneau Transformation. Vous y trouverez l'échelle, les traits et les effets. Assurez-vous que c'est éteint. C'est quelque chose que vous pouvez trouver, une fois de plus, à partir du panneau Transformation. Assurez-vous simplement que dans ce cas, vous avez sélectionné les options d'affichage pour pouvoir voir ces paramètres. Maintenant que j'ai cette deuxième version, répétons à nouveau les dernières étapes. Commande C ou Contrôle C pour copier, puis Commande ou Contrôle F à coller en place, puis Alt et Maj pour le faire glisser vers le bas jusqu'à ce que nous ayons déjà le cercle suivant. Et remarquez que les cercles ne sont pas parfaitement alignés ici. Et c'est à cause d'un paramètre dans l'entité linéaire pointillée, nous devons passer à cette option, qui alignera les tirets deux coins et les extrémités du chemin. Donc, une fois que j'ai cliqué dessus, il les répartira bien le long des cercles. Nous pouvons donc répéter ces étapes. Il suffit de créer un autre cercle autour de là. Maintenant, si je veux que ce soit très précis, je pourrais m'assurer que la distance entre ces cercles est égale. Mais pour l'instant, j' essaie juste de le regarder et de le rapprocher à peu près d'un espacement égal. Et nous avons également une idée élémentaire la plus complexe. Mais pour aller de l'avant, je vais créer une copie de chacun d' entre eux car je veux conserver un original qui peut être édité facilement avec des réglages de contour d' acier et les effets. disponible dans le panneau Apparence. Mais ceux-ci dans leur état actuel ne seront pas bien transférés dans Photoshop. 6. Préparation d’éléments vectoriels pour Illustrator: Si je sélectionne les chevrons par exemple, et que je les ai copiés, C'est Commande ou Contrôle C. Puis je saute dans Photoshop et utilise Command ou Control V. Lors du collage, je veux utiliser l'option Calque de forme, qui est le meilleur pour travailler avec ces éléments vectoriels simples. Quand je clique sur OK, ça va gâcher mon joli motif à chevrons. Donc, pour éviter ce problème ici dans Illustrator, je vais dupliquer ce groupe d'éléments. Ensuite, allez dans le menu Objet et choisissez Développer dans cette boîte de dialogue Cliquez simplement sur OK, vous n' avez pas besoin de modifier les paramètres. Cette deuxième version est maintenant prête à être utilisée dans Photoshop. Et la raison pour laquelle j'ai gardé l'original, car ici nous avons toujours les valeurs de trait. Donc, si je le souhaite, je peux toujours augmenter, diminuer l'épaisseur de ces lignes et même modifier les paramètres des traits alors que ces formes sont maintenant remplies. Il est donc beaucoup plus difficile d'y apporter des modifications. Mais l'avantage est que si je copie maintenant cela et que je vais dans Photoshop pour le coller en tant que calque de forme. Maintenant, il apparaît comme nous voulons qu'il l'utilise. Et la meilleure chose à propos de l'avoir comme calque de forme est que je peux facilement changer sa couleur en double-cliquant sur la vignette, sur le calque, puis en sélectionnant n'importe quelle couleur dans le dessin. Et il suffit de le réduire avec l' outil Transformation libre et de le placer quelque part ici sur le côté pour l'instant. Revenons à Illustrator et veillons à ce que tous les autres éléments soient prêts à être déplacés dans Photoshop. Commençons donc par cette ligne ici. Je vais le dupliquer, modifier l'option, faire glisser, puis aller dans le menu Objet pour ce 1, nous devons d'abord utiliser Expand Apparence. Parce que rappelez-vous que l'effet est enregistré dans le panneau d'apparence, mais cela ne fait que développer l'effet, mais il s'agit toujours d'un trait, que nous devons ensuite agrandir à nouveau. Maintenant, c'est prêt à aller sur Photoshop. Nous allons donc le copier et le coller sous forme de calque de forme. Je vais encore le mettre ici en haut. Pour l'instant, répétons la même chose pour cette ligne ondulée. Une fois encore. Object Expand Apparence, puis Object Expand , puis copier-coller en tant que calque de forme, nous pouvons faire la même chose pour ces cercles. Une fois encore. Je le duplique d'abord, puis je vais dans Object, Expand Apparence. Et même s'il n'y avait aucun effet ici, nous avions des lignes pointillées qui devaient d'abord être développées de cette façon, puis l' étendre complètement. En les transformant en un groupe de petits cercles, nous ne pourrons plus ajuster les traits et les choses. Mais encore une fois, l'avantage est que nous pouvons simplement copier cela et le coller dans Photoshop. Et là, nous avons notre charmant élément prêt ? Je vais garder ça ici sur le côté gauche. Et j'aimerais en fait avoir une autre version. Je vais donc simplement créer un peu d'espace et copier ce groupe une fois de plus et appuyer sur Maj X ici dans Illustrator pour changer la couleur de remplissage pour devenir couleur contour et peut-être augmenter l'épaisseur. des traits, qui rend cela légèrement différent alors que nous pouvons à nouveau le déplacer dans Photoshop. Mais n'oubliez pas qu'avant de le déplacer dans Photoshop, développons cela. Une fois de plus, vous ne pouvez pas avoir de paramètres de contour sous forme de calques de forme dans Photoshop. Maintenant que nous avons fait le développement, nous pouvons le coller et cela apparaîtra exactement comme je le voulais. Et enfin, faisons également une copie de cette forme ici, puis allons dans Object, Expand. Et puis créons-en une autre copie. Et à l'aide du panneau Pathfinder, nous pouvons unir ces formes en cliquant sur cette icône ici. Et si vous ne voyez pas le panneau Pathfinder, allez simplement dans le menu Fenêtre, vous pourrez l' ouvrir à partir de là. Et une fois que nous avons cette version dans laquelle nous avons réuni ces formes, nous pouvons maintenant appuyer sur Maj X pour échanger les couleurs à nouveau. Et maintenant, nous avons une taille de trait que nous pouvons ajuster. Et je pense que ça a l'air bien. Encore une fois, nous pouvons simplement étendre cette option pour nous assurer que nous pouvons le déplacer vers Photoshop. Déplacons donc d'abord ce 1, collez-le en tant que calque de forme, puis le dernier, encore une fois, copiez-le et collez en tant que calque de forme. Nous avons donc maintenant tous les éléments et il n'y a qu'un seul élément que je peux créer ici directement dans Photoshop très rapidement et facilement. Et comme pour l'outil ellipse, je vais dessiner une bague simple. Pas de couleur de remplissage, simplement un trait blanc. Et je vais juste augmenter l'épaisseur. Et je vais simplement le dessiner ici, en la touche Maj enfoncée. Et nous pouvons toujours ajuster la taille du trait en le faisant glisser vers le haut et vers le bas. Probablement quelque chose comme ça. Ça va marcher. Donc, si vous le souhaitez vraiment, techniquement, vous pouvez recréer toutes ces formes directement ici dans Photoshop. Mais cela prendra beaucoup plus de temps et ce serait beaucoup plus difficile que de le faire dans Illustrator. N'oubliez pas que c' est ce qui va faire vous un graphiste professionnel, que vous choisissez toujours le moyen le plus efficace créer quelque chose et utiliser chaque application Adobe. Des parties spécifiques du flux de travail. Ne vous inquiétez pas si vous pensez que vous ne serez pas en mesure de décider vous-même de ces décisions et de choisir toujours la bonne application pour la bonne tâche. Parce qu'à la fin de ce camp d'entraînement et après avoir traversé les 12e grands projets, vous aurez une bien meilleure idée et vous serez beaucoup plus confiant dans le choix du moment de passer et de quelle application. Mais maintenant que tous nos éléments sont prêts, dans la vidéo suivante, nous pouvons créer cette première composition pour notre paysage et notre bannière. 7. Concevoir la bannière principale: Il est temps de créer une composition dynamique à haute énergie en utilisant tous ces éléments que nous avons ici. Et une technique qui vous aidera à donner plus d'élan à votre conception consiste à utiliser des diagonales. Pour cela, je vais d'abord sélectionner le texte, les deux couches, la grosse vente et les anciens formateurs. Et en utilisant l'outil de transformation libre, je vais taper l'angle de rotation, qui dans ce cas sera moins 20, et appuyez à nouveau sur Entrée et Entrée pour accepter cette transformation, nous peut également sélectionner nos lignes VV et zigzag et encore une fois utiliser l'outil de transformation libre et taper également moins 20. Au fait, si je viens de taper 20, ce serait une rotation dans le sens des aiguilles d'une montre, tandis que moins 20 crée une rotation dans le sens inverse des aiguilles d'une montre. Et vous pourriez vous demander pourquoi ai-je décidé d'utiliser cet angle ? Eh bien, tout d'abord, si vous avez un texte déjà en angle ou en italique, comme cette police, il va généralement mieux aller vers le haut de votre dessin et ne pas descendre. Mais même avec des textes normaux qui ne sont pas fixés en Italica, il est toujours un peu plus positif de l' orienter dans cette direction que de l'avoir dans l'autre sens. Je vais juste vous montrer, ce qui semble un peu négatif parce que le texte est en baisse au lieu d' aller bien vers le haut. Bien sûr, cela dépend vraiment de la composition, de ce que vous voulez réaliser. Mais dans ce cas, je pense que cela va bien fonctionner. Faisons maintenant un peu de place. En passant, chaque fois que la fonction de plan de travail est active, vous pouvez déplacer des éléments en dehors du tableau d'art tout en y ayant toujours accès. Remarquez comment ils sont placés également à l'extérieur du tableau d'art ici dans le panneau des calques. J'ai beaucoup aimé travailler comme ça quand j'ai beaucoup d'éléments. Nous pouvons donc simplement les traîner et les ramener une fois que nous savons où nous voulons les placer. Il suffit donc de placer cette ligne en zigzag, peut-être quelque part par ici. Et je vais vous montrer un raccourci très pratique en utilisant l'outil pinceau, je peux cliquer sur Alt ou Option sur cette couleur que nous avons sur le texte. Maintenant qu'elle est définie comme couleur de premier plan, je peux utiliser Alt ou Option Backspace pour appliquer cette couleur ou remplir cette couleur sur le calque de forme vectorielle actuellement sélectionné. Nous pouvons également faire le champ v, la couleur d'arrière-plan, qui est actuellement blanche. Il s'agit donc de la commande ou du contrôle du retour arrière. Et avec ces deux raccourcis, il est si rapide et facile de changer rapidement les couleurs de vos calques. Nous allons donc en utiliser un bleu ici, mais ici nous utiliserons une version blanche. Et d'abord, avant d' ajuster les autres formes, il suffit de s'assurer que notre texte est placé au bon endroit. Nous voulons donc nous assurer qu'il est lisible. J'ai l'impression qu'il y a un bon contraste ici. Et j'aime beaucoup la façon dont le lacet entre les deux mots. Et ensuite, nous pourrons avoir les propres entraîneurs en dessous. Mais il n'est pas nécessaire que ce soit aussi grand. Je vais donc utiliser l'outil de transformation gratuite, rendre un peu plus petit, quelque chose comme ça. Mais pour créer un peu plus d'intérêt, puisque nous avons ceci en tant que calque séparé, je vais mettre cela en dessous de l'inverse, qui donnera l' impression qu'il vient de derrière la première ligne de texte, puis il se trouve devant la deuxième ligne de texte. Nous ajoutons donc de la profondeur et l'interaction à nos éléments, ce qui a tous deux contribué à créer une composition plus excitante ou attrayante. Et maintenant, nous pouvons simplement déplacer cette forme ici. Et puis la ligne en zigzag peut descendre quelque part ici. Mais ça peut encore aller derrière la chaussure. Certaines formes peuvent être devant, autres peuvent être derrière. Maintenant, nous allons également le rendre légèrement plus petit. Et puis, à nouveau, comme la ligne en zigzag, j' utiliserai à nouveau, comme la ligne en zigzag, une autre copie du même calque et le réglerai simplement en bleu. Remarquez comment je garde les détails de contraste plus élevés, comme les lignes blanches, plus proches textes réels du titre ou du message principal. Bien que j'utilise des détails à contraste plus bas plus près des bords, cela aide à orienter l'attention des spectateurs et à s'assurer qu'ils se concentrent sur le message central au lieu de les distraire et avoir des détails en concurrence. leur attention partout. 8. Finaliser la bannière principale: Déplacons maintenant ces croix sur la composition. Je vais utiliser l'un d'entre eux ici en haut à gauche, juste pour le rendre plus petit ici, ça ne me dérange pas d'utiliser un peu de blanc parce que c'est un très petit détail. Et puis je vais en ajouter un autre ici. Je vais le mettre en bleu, et j'ajouterai un autre bleu peut-être quelque part ici. Et ensuite, apportons cette autre version de la croix, que nous pourrons peut-être faire quelque part ici. Je peux déplacer cette ligne un peu, peux la rendre légèrement plus petite. Et puis, redoublons ça, le déplacer ici. Et nous pouvons soit définir cela aussi en bleu soit nous pouvons simplement réduire son opacité pour que nous puissions le garder large. Mais en appuyant sur trois ou quatre sur le clavier, nous pouvons réduire rapidement l'opacité à 30 ou 40 %. Encore une fois, c'est une façon de jouer avec le contraste, et nous utilisons simplement cet élément ici davantage pour remplir cet espace vide. Mais nous ne voulons pas trop distraire le spectateur des entraîneurs. Et de même que ce que nous avons fait auparavant, apportons également le détail Chevron. Je vais juste le faire pivoter de 90 degrés vers le bas. Placez-le quelque part ici, encore une fois, en utilisant la version à contraste élevé près du titre et dirigez vraiment l'œil du spectateur vers le message principal plutôt que de le dupliquer, je peux le tourner dans l' autre sens, peut-être augmenter un peu la taille. Ensuite, nous pourrons définir la couleur bleu plus foncé et peut-être déplacer un peu plus loin vers le bord. Et ensuite, nous pourrons juste avoir une autre version de cette version, pivotée, réduite en taille et en remplissant une forme ici. Il peut même arriver devant et se chevaucher légèrement. Ce formateur est comme ça. Maintenant, utilisons ces cercles. Je vais mettre ça ici derrière. L'inverse augmentera la taille de cela et réduira l' opacité à 30%. Ensuite, nous pourrons utiliser l'autre ici en bas à droite. Et je vais en fait changer la couleur de ceci en jaune ou en retour arrière pour le remplir rapidement avec cette couleur. Et enfin, nous avons notre cercle, que je vais placer ici en bas, le remplir de bleu. Mais dans ce cas, nous ne pouvons pas utiliser le raccourci car a été créé ici dans Photoshop et qu'il utilise un attribut de trait, suffit de changer la couleur à partir de la barre de contrôle. Et puis, redoublons ça une fois de plus. Placez-le quelque part là-haut. Il utilise un peu la taille. Et encore une fois, en utilisant l'outil flèche noire, nous verrons les paramètres des couleurs et nous pourrons les changer en jaune, encore une fois, plus près du titre, nous avons la couleur de contraste la plus élevée par le bas, nous avons la version à contraste inférieur. Et ensuite, faisons un autre cercle ici sur la droite aussi. Il peut le rendre légèrement plus petit, peut-être augmenter l' épaisseur du trait, mettre en blanc, mais aussi réduire l' opacité à 30%. C'est tout ce que je voulais utiliser sur cette version de la bannière. Jetons un coup d'œil à cela un peu plus loin. J'ai l'impression que cet entraîneur peut être légèrement plus grand, alors je vais simplement augmenter la taille de celui-ci pour qu'il remplit un peu plus cet espace. Nous pouvons même le déplacer un peu de cette façon. Et maintenant, nous pouvons simplement déplacer le texte, en s'adaptant légèrement à cette nouvelle position. Et je pense que ça a l'air bien maintenant. Donc, juste pour terminer ça, je vais renommer ce tableau d'art, puis l'appeler paysage. Nous pouvons donc maintenant sauver notre travail. Et dans la prochaine vidéo, nous allons créer deux mutations à partir de cela. Nous aurons donc un carré et variation de format portrait avec le même design. 9. Mutations et rapport d’aspect: Le moyen le plus rapide de créer un doublon d'un tableau d' art consiste simplement à utiliser l'outil Déplacer et à maintenir la touche Alt ou Option enfoncée, puis de le faire glisser sur le côté. Notez que cela crée également des tableaux d'art distincts dans le panneau Calques. Et nous pouvons renommer ces deux carrés, mais nous devons également modifier la taille de cette bannière, ce que nous pouvons faire à partir du panneau Propriétés ici pour la largeur, je vais taper 600. Et une fois que j'ai fait cela, remarquez comment les éléments qui ne rentrent plus sur le tableau d'art sont placés à l'extérieur, fois ici dans l'espace de travail mais également dans le panneau des calques. Et un élément que nous ne voulons certainement pas perdre, c'est plus épais ? Je vais donc faire glisser ça tout droit ici dans le coin, peut-être un peu plus haut. Et aussi le texte, nous ne voulons pas perdre. Mais dans ce cas, je ne pense pas que nous ayons besoin des deux couches de texte, sorte que les anciens formateurs puissent être supprimés. Et au lieu de cela, nous allons simplement nous concentrer sur cette grosse vente et en utilisant l'outil de type, je vais diviser cela en deux lignes. J'ai l'impression que ça marche vraiment bien ici. Nous pouvons le rendre légèrement plus petit et l'aligner dans un endroit où il ne chevauche pas trop le produit. Et c'est toujours très bon et lisible. Ces formes, nous pouvons simplement passer au sommet et voir si nous en avons besoin ou non. Peut-on également vérifier dans le panneau des calques ce que nous avons d'autre ici ? Le Nike Trainer ne sera pas visible sur cette version, nous pouvons donc simplement le supprimer du tableau d'art carré. Et il y a cette forme, par exemple, dont nous n'avons probablement pas besoin dans ce cas, je peux également supprimer que ces lignes ondulées peuvent être un peu plus loin ou peut-être même augmenter en taille juste pour qu'elle s'adapte mieux que, déplacons simplement cette forme ici, peut-être augmentons un peu sa taille. Le Chevron peut venir ici en pointant le produit et nous pouvons descendre un peu plus loin ou même centré que la ligne en zigzag, nous pouvons l' éloigner plus loin du produit. L'autre chevron ici peut aussi apparaître. Ce cercle peut descendre un peu. Et peut-être pourrait-on avoir une de ces formes ici. Et juste pour avoir un peu de jaune aussi dans la composition, je vais juste placer ce cercle là-haut sur le dessus. Peut-être le rendre légèrement plus petit. Ok, je suis content de cela, donc nous pouvons simplement supprimer les formes que nous n'avons pas fini par utiliser. Et maintenant, nous pouvons simplement dupliquer cette bannière carrée pour créer notre troisième version, qui sera la taille de la bannière. Et pour que cette configuration soit correcte, je vais à nouveau utiliser le panneau Propriétés. Pour cela. La largeur sera de 400 et la hauteur sera de 800. Il s'agit donc d' un rapport d'aspect deux par un, qui va nous permettre d'avoir, encore une fois les trois nerfs visibles. Donc, tout d'abord, déplacons l' inverse ici vers la gauche, réduisons un peu la taille. Et cette fois, je vais faire passer l'autocollant sous la chaussure converse et le placer quelque part. 10. Versions de rapport d’aspect supplémentaires: Et cela me rappelle une chose que nous avons manquée, et c'est une ombre portée pour l'inverse. Nous avons donc une ombre sur le Nike Trainer. Nous devons également correspondre à cette autre chaussure. Revenons donc à notre composition principale. Et au fait, j'utilise clic de commande ou de contrôle pour basculer entre les couches. C'est parce que je n'utilise pas la fonction de sélection automatique. Je préfère l'utiliser avec ce raccourci. Avec cela, je peux très rapidement basculer entre maintenant et les couches, mais même des couches différentes dans différents tableaux d'art. Mais en sélectionnant cette option, je peux double-cliquer près du nom du calque et appliquer une ombre portée. Vous pouvez copier les paramètres que vous voyez sur mon écran. J'utilise donc une couleur bleu plus foncé, similaire à la couleur d'ombre de cet autre entraîneur. Et avec le reste des paramètres que vous pouvez voir ici, il est bon de savoir que chaque fois que vous configurez votre ombre portée, vous suffit de cliquer et de la faire glisser il vous suffit de cliquer et de la faire glisser sur le canevas. Mais cette fois, je vais juste le garder là où elle était, en m'assurant que c'est le même angle que l'autre chaussure. Nous pouvons être un peu plus à droite. Cliquez sur OK, puis nous pouvons nous assurer que cette ombre portée est également appliquée sur les autres tableaux d' art. moyen le plus rapide consiste à cliquer avec le bouton droit sur le calque et en choisissant Copier le style de calque, puis sur Commande ou Contrôle sur l'autre calque d'image et cliquez avec le bouton droit sur Coller le style de calque. Et une fois de plus sur celui-ci, collez le style de calque. Vous pouvez donc voir pourquoi cette ombre aide à établir ou à créer plus de profondeur et à rendre cette composition de l'autocollant sous la chaussure plus intéressante. Bien sûr, je veux toujours m' assurer qu'il est lisible, alors je le déplace légèrement vers le bas. Mais il suffit de copier cette couche avec le New York. Je l'ai sélectionné, puis j' appuie sur Commande ou Contrôle C. Puis revenez sur ce tableau. Il suffit de sélectionner l'un des calques, puis d'appuyer sur Commande ou Control V que nous, je l'apporte dans cette composition et je le déplacerai tout en bas et peut-être le placer quelque part ici. Et on peut juste ranger les choses. Ce cercle peut être enlevé, ces Chevron que nous pouvons également enlever, et au lieu de cela, je vais simplement augmenter la taille de cette chaussure et peut-être la déplacer légèrement. On peut ralentir légèrement plus gros. ne me dérange pas de se chevaucher un peu plus ici. Et je ne veux pas non plus qu'il touche exactement le bord inférieur du cadre. C'est ce que j'appellerais normalement une tangente ou baiser lorsque les bords se rencontrent exactement. Il est donc toujours préférable d'y recadrer un peu plus ou de s'assurer de ne pas l'aligner sur le bord. Et je voulais aussi me chevaucher sur le dessus. Oui, je pense que ça fonctionne très bien. Ensuite, nous pouvons simplement déplacer ces formes plus loin vers la gauche. Bien sûr, nous avons besoin de notre gros texte de vente qui peut être un peu plus grand dans ce format . Déplacons ensuite ces éléments distrayants comme la ligne en zigzag. Il peut arriver quelque part ici. Peut-être que cette autre ligne en zigzag peut être ici. Cette ligne de chevrons peut être sous l'autocollant pour ne pas rivaliser avec elle. Nous pouvons placer cette croix ici en bas, peut-être la réduire à 30 %. Cette petite croix peut être quelque part là-haut. On peut aussi en avoir un plus sombre, peut-être ici. Et peut-être que nous pourrons placer ce cercle ici dans le coin. Ok, je pense que ça a l'air bien. Mais la meilleure chose à propos de ces trois variantes dans le même document Photoshop est que nous pouvons toujours revenir et faire de petits ajustements, déplacer les choses, emprunter des éléments d'une seule version, déplacez-le rapidement vers l' autre, et vice versa. Travailler avec des tableaux d'art est donc un énorme avantage lorsqu'il s'agit de créer des bannières et des différentes mutations. Mais maintenant, dans la vidéo suivante, nous allons créer une variation du format carré, qui peut être utilisée comme bannière animée. 11. Conception des cadres pour la bannière animée: Pour commencer, je vais dupliquer notre format carré original, qui crée un nouveau tableau d'art. Et nous pouvons simplement renommer celui-ci, en encadrez un. Et l'essentiel que je veux changer ici, c'est que nous n'avons besoin que du premier mot, gros. Et comme nous n'avons qu'un seul mot, nous pouvons le rendre légèrement plus gros et peut-être l'avoir quelque part par là. Maintenant, je ne vais pas passer trop de temps ici à déplacer les choses. Au lieu de cela, je vais juste dupliquer cela et créer le cadre numéro deux, qui aura les autres entraîneurs. Je vais donc retirer le converse et coller à New York. Cette fois, je vais le faire pivoter dans l'autre angle. S'adapte mieux au format carré comme celui-ci. Et le fait de faire passer les textes dans l'autre sens crée une dynamique intéressante. Je vais donc simplement taper cl en utilisant la même taille pour le texte. Et puis je déplace simplement ces autres éléments, m' assure qu'ils ne sont pas au même endroit. Sinon, il serait un peu statique. Nous pouvons même emprunter certaines de ces autres couches comme celle-ci, simplement nous assurer qu'elle descend plus loin dans la structure du calque et peut aussi réduire son opacité. Éloignons ce chevron d'ici aussi. Et comme je l'ai dit, s'assurer que nous n' avons pas les éléments au même endroit. Cela peut probablement être blanc, peut-être juste le placer ici. Et puis nous allons baisser celle-ci et peut-être augmenter la taille. Et puis peut-être pourrons-nous simplement déplacer cet autre cercle ici juste pour remplir cet espace. Et de cette façon, nous pouvons simplement déplacer celui-ci un peu plus haut. Notez maintenant que le seul élément que j'ai gardé au même endroit est l'autocollant. Et c'est intentionnel. Je veux m'assurer que c'est cohérent sur au moins deux images de l'animation, car il y a un message clé et je veux m' assurer qu'il parvient au spectateur. Mais maintenant, nous pouvons créer la troisième image. Une fois de plus, je viens de dupliquer ceci, renommer ceci en trame trois. Ici, nous pouvons déplacer le Nike Trainer vers le bas. Je vais juste le tourner dans l'autre sens, réduire sa taille, le placer quelque part en bas. Ensuite, nous pouvons apporter une version du converse et réduire à nouveau sa taille, placer quelque part ici dans le coin supérieur droit. D'abord. En fait, je vais également déplacer ces formes. Il suffit donc de ranger un peu avant de placer l'image là-dedans. Maintenant, nous pouvons le déplacer en arrière. Je veux littéralement que le talon et le lacet montrent la petite partie du logo qui ne fait qu'indiquer de quelle marque il s'agit. Et puis on peut taper gros ici. Nous avons donc une grosse vente, et cette fois, nous aurons la place pour le reste de l'exemplaire également pour montrer ce que nous pouvons emprunter à cette composition principale. Je vais donc simplement sélectionner ce texte par Commande ou Contrôle, en cliquant dessus, puis Commande ou Contrôle C à copier. Revenez ici et cliquez sur cette toile ou ce tableau d'art, puis sur Commande ou Control V pour coller le texte. Il peut également diviser cela en deux lignes et le placer quelque part ici. Maintenant, l'autocollant peut être retiré. Je vais en fait le supprimer , et au lieu de cela, je vais agrandir ce texte et même la grosse vente peut être plus importante. Cette dernière image concerne vraiment le texte. Encore une fois, je ne veux pas avoir d'éléments exactement dans la même position que sur le tableau d'art précédent. Je vais donc m' assurer que nous bougerons les choses pour rendre l' animation plus intéressante. Cette croix doit également aller ailleurs. Peut-être ici. On peut avoir cette ligne ondulée, peut-être ici. Et au lieu d'avoir le zigzag dans la même position, je vais simplement le déplacer ici et le basculer la couleur bleue en utilisant la commande Alt ou Option Backspace, puis ce cercle peut être supprimé. Je ne pense pas que nous en ayons vraiment besoin dans ce cas. Peut-être ramenez simplement ce cercle de l'autre composition et collez-le quelque part dans le coin ici. Et enfin, peut-être que celui-ci peut venir ici aussi. Maintenant, ces formes excédentaires nous pouvons simplement supprimer du panneau Calques. Et si nous effectuons un zoom arrière, nous pouvons maintenant voir les trois images côte à côte. J'ai l'impression que ça va vraiment bien fonctionner comme animation. Il y aura donc un message clair. Grande voile jusqu'à 50 %. Et ensuite, le dernier cadre réunit la phrase entière. Grande vente sur toutes les baskets. 12. Transformer des cadres en objets intelligents: Chaque fois que je crée des bannières animées, j'aime toujours garder la couleur générale de chaque image assez similaire, car sinon vous risquez de créer trop de transitions charnues entre elles. Imaginez donc si j'avais un cadre avec un fond bleu, le suivant blanc, puis le troisième est jaune. Cela pourrait être une bannière très recherchant l'attention grâce ce qui sera un peu plus subtil mais intéressant à regarder. Bien sûr, il faut toujours en discuter avec le client. Ils voudront peut-être opter pour ce look plus charnu pour leurs bannières. Mais maintenant que nous avons les trois cadres prêts, il y a encore une chose que nous devons faire ici, c'est-à-dire les transformer en objets intelligents. Cela va simplement faciliter leur déplacement vers un document séparé. Parce que même si nous les concevons dans le même document, pour pouvoir les exporter sous forme de bannière animée, il faudra que ce soit dans un autre document. Alors, allons simplement le faire maintenant. Je clique avec le bouton droit sur le cadre 1 et Convertir en objet intelligent. Faites la même chose pour le cadre deux et faites de même pour le cadre trois. Créons maintenant ce nouveau fichier de document. Et je vais régler ça à 600 pixels sur 600. Cette fois, je n'ai pas besoin de l'option de tableaux d'art, donc je l'ai désactivée, puis j'ai créé. En revenant au document précédent, je peux d'abord sélectionner l'image 1, la copier, commande ou le contrôle C sauté sur ce document, puis coller avec la commande ou le contrôle V comme cadre. Maintenant, nous pouvons même supprimer le calque d'arrière-plan, il suffit de le sélectionner et d' appuyer sur Retour arrière. Là encore, revenez ici, copiez le numéro de cadre à coller, puis copiez le cadre numéro trois et collez. Et n'oublions pas de sauvegarder ce document également. Je vais appeler ça une bannière animée. 13. Options d’exportation: Il est maintenant temps de créer notre animation pour laquelle nous allons ouvrir le panneau Montage. Et dans ce cas, choisissez l'option Animation de trame et cliquez sur le bouton. Cela va créer un cadre par défaut, mais nous pouvons aller dans le menu du panneau et choisir créer des cadres à partir de calques. De cette façon, chacun de nos calques sera configuré en images droites d'un. Et nous pouvons utiliser la touche Maj pour les sélectionner tous les trois. Nous pouvons modifier la durée de chacun d'entre eux à 1 seconde. Mais sélectivement, je vais changer le troisième à deux secondes. Maintenant, si l' option de boucle est définie pour toujours, cela signifie qu'elle va continuer à se répéter, ce qui est parfait pour nous. Alors, essayons ça. Je vais y jouer. J'ai l'impression que la 1 seconde pourrait être un peu trop rapide au début pour les deux premières images. Donc, pour ralentir un peu les choses, je peux en choisir un autre et peut-être régler cela sur 1,5 ou un autre 1,5. Maintenant, essayons ça. Oui, je pense que c'est déjà un peu mieux. Oui, je pense que ça marche. Maintenant que nous avons configuré notre chronologie, il suffit d'aller dans le menu Fichier et de choisir Exporter. Enregistrez pour le Web et écoutez les préréglages, assurez-vous de choisir GIF 128, la saleté. Cela vous donnera la meilleure bannière animée de la meilleure qualité, mais elle produira également la taille de fichier la plus élevée. Vous pouvez toujours voir la taille finale ici en bas à gauche. Il s'agit d'un 187 kilo-octets, ce qui est considéré comme assez élevé pour une bannière, idéalement, vous voulez le garder autour de 50 K max, un 100 K. Encore une fois, cela dépend du client et ses spécifications ou des sites partenaires lesquels ils travaillent. Ainsi, la façon dont vous pouvez toujours réduire la taille du fichier consiste à ajuster les paramètres ici, ce qui augmente, comme l'option avec perte , réduira la qualité de vos images. Mais à son tour, cela réduira également la taille du fichier. Et une autre option que vous pouvez utiliser pour réduire taille du fichier est la quantité de couleurs. Donc, si vous réduisez cela à 64, disons que nous sommes déjà à 100 K. Bien sûr, il vaut toujours la peine de vérifier toutes les images juste pour s'assurer qu'elles semblent acceptables. Je pense qu'ils ont l'air bien, mais je vais en fait revenir à un cadre de haute qualité. Je supprime donc la fonction avec perte et j'ai jusqu'à 128 couleurs. Je pourrais même passer à 256 couleurs, mais cela rendra la taille du fichier encore plus grande. Mais juste pour la démonstration maintenant, je vais utiliser cette qualité maximale et je cliquerai sur Enregistrer et l'enregistrer dans mon dossier de projet. Voici la bannière animée. Nous pouvons simplement jeter un coup d'œil au fichier GIF que nous avons enregistré depuis Photoshop. Je pense que c'est génial. Et maintenant, n'oublions pas de sauvegarder également les bannières statiques, pour lesquelles je vais revenir au document d'origine et je vais aller dans le menu Fichier et choisir Exporter, Exporter Comme cette fois-ci, qui me donnera la possibilité d'exporter les trois tableaux d'art individuellement. Notez que les objets intelligents que nous avons en bas, que nous utilisons pour nos cadres pour la bannière animée ne s' affichent même plus ici car ils ne sont pas sur des tableaux d'art. Mais nous pouvons tous les sélectionner et les modifier en même temps en JPEG, qui est le format de fichier recommandé pour les bannières statiques ou éventuellement, vous pouvez également utiliser PNG. Et encore une fois, vous verrez les tailles de fichiers respectives ici sur le côté gauche. Encore une fois, si vous pouvez les garder près 50 à 100 K, c'est plus idéal. Actuellement, ils sont trop grands, donc nous devrons faire quelque chose à ce sujet. Une fonctionnalité utile au cas où vous travaillez avec PNG consiste à activer la fonction de fichier plus petite. Cela n'affectera pas trop la qualité, mais cela a définitivement rendu la taille du fichier plus petite. Je vais donc les exporter comme ça. Et encore une fois, nous pouvons jeter un coup d' œil à ces exportations qu'est le PNG, donc voici la version paysage, il y a la version portrait, et il y a le carré. Il existe maintenant une option supplémentaire à mentionner dans la boîte de dialogue Exporter sous, savoir la fonction d'échelle qui, par défaut exportera la taille actuelle que vous avez définie pour vos tableaux. Mais au cas où vous auriez besoin de créer des versions pour peut-être des écrans Retina, vous devez les exporter deux fois plus gros. Ensuite, vous pouvez facilement le faire en cliquant sur le signe plus ici et en changeant la taille deux fois deux. De cette façon, comme nous avons trois images et deux tailles différentes, il s'agirait d'une exportation par lots de six images. Mais comme nous avons déjà créé les versions de taille d'origine, nous pouvons simplement supprimer cela et conserver les versions doubles qui, une fois que j'ai cliqué sur Exporter et que je choisis la destination, seront également générées avec les noms de fichiers indiquant qu'il s'agit des versions à double taille. Par exemple, avec la taille carrée, nous avons l'original et la version haute résolution plus grande. C'est pourquoi il était si important de travailler avec les formes vectorielles et les couches Smart Object Image haute résolution. Il nous permet donc d'exporter facilement le double ou le triple de la taille d'origine des bannières. Et cela résume à peu près tout ce que vous devez savoir sur production de bannières statiques et animées l'aide de la combinaison de Photoshop et Illustrator. 14. Conclusion: Bravo pour avoir terminé ce cours. J'espère que vous avez eu autant de plaisir à le lire que j'en ai eu à l'enregistrer. Et bien sûr, n' oubliez pas le projet de classe. Parce que n'oubliez pas que la pratique rend parfait. J'ai hâte de voir votre travail, alors assurez-vous de le soumettre. Et si vous aimez ce cours et que vous souhaitez en savoir plus avec moi, vous trouverez de nombreux autres cours ici. Va les découvrir maintenant. J'ai hâte de te rencontrer le prochain.