Vous pensez peut-être devoir externaliser la conception de vos publicités, mais en réalité, n’importe qui peut apprendre à créer une bannière publicitaire dans Photoshop. Dans ce guide, je vais expliquer exactement comment vous pouvez le faire en quelques étapes simples.

A l’aide de Photoshop, vous pouvez créer votre propre annonce de haute qualité de n’importe quelle taille et inclure des images, du texte, des boutons , et tout autre élément que vous souhaitez. En utilisant Artboards, vous pouvez même voir et travailler avec plusieurs canevas en même temps, ce qui est utile si vous essayez de créer le même design pour des bannières publicitaires de différentes tailles.

Plongeons donc dans la façon dont c’est fait.

Quelle taille de bannière devriez-vous créer dans Photoshop ?

Vous aurez probablement besoin ou souhaiterez utiliser plusieurs tailles de bannière standard lors de la création de votre annonce. Les tailles vont du petit au grand et couvrent différentes formes, des rectangles aux carrés.

468 × 60 (une bannière Web standard) 240 × 400 (une bonne taille pour une bannière verticale) 728 × 90 (un « leaderboard » standard ” bannière) 120×600 (une bannière “gratte-ciel”) 300×600 (une autre bonne bannière verticale pour une annonce plus grande) 750×750 (une grande bannière de forme carrée) 250×250 (une plus petite bannière de forme carrée) 320× 50 (la taille de bannière la plus performante pour mobile)

Comme vous pouvez le constater, vous pouvez utiliser de nombreuses tailles différentes pour créer votre bannière publicitaire, et il existe encore plus d’options que celles répertoriées ci-dessus. Trouvez la taille qui convient le mieux à vos besoins car elle sera importante pour l’étape 1 du processus suivant,

Comment créer une bannière dans Photoshop

Dans cet exemple, je’Je vais créer un exemple de bannière publicitaire avec une image de base et du texte. Cependant, votre annonce aura évidemment besoin de quelque chose de totalement différent pour s’adapter à votre marque. C’est pourquoi ces étapes ne doivent être utilisées qu’à titre indicatif, et vous pouvez personnaliser le style au fur et à mesure en fonction de vos besoins.

Étape 1 : Créer un nouveau plan de travail

Comme mentionné, il est préférable d’utiliser des plans de travail pour créer la bannière publicitaire, car cela vous permettra de travailler avec plusieurs tableaux à la fois et de déplacer les éléments pour les adapter à toutes les tailles.

Pour ouvrir un nouveau plan de travail, dirigez-vous vers Fichier > Nouveau.

La fenêtre Nouveau document s’ouvrira. Tout d’abord, vous pouvez cliquer sur l’onglet Web et sélectionner Web le plus courant, car cela garantit que vous travaillez avec le bon PPI (pixels par pouce ), 72 PPI.

Ensuite, définissez la taille de la toile en utilisant les tailles recommandées ci-dessus. Pour mon exemple, j’utiliserai une bannière carrée de 750 × 750 pixels. Cochez la case Plans de travail pour vous assurer que vous travaillez avec des plans de travail plutôt qu’un seul document ordinaire.

Étape 2 : Ajoutez des images

Que vous fassiez la publicité d’un produit ou d’un service, vous aurez probablement une image ou deux que vous aimeriez ajouter à votre bannière. Il peut s’agir d’une image du produit que vous vendez ou même d’un logo d’entreprise. Quoi qu’il en soit, vous devriez essayer d’avoir une image sur votre annonce, car les annonces avec des images s’en sortent généralement mieux que les annonces avec rien d’autre que du texte.

Pour ajouter une image à votre projet, vous pouvez faire glisser et déposer la photo de vos fichiers au projet, et il y apparaîtra directement. Vous pouvez également accéder à Fichier > Ouvrir et sélectionner l’image dans vos fichiers afin qu’elle s’ouvre dans un nouvel onglet à côté du projet de bannière publicitaire.

Ceci est utile si vous souhaitez modifier l’image avant de l’ajouter à votre projet. Une fois que vous êtes prêt à ajouter l’image à votre projet, cliquez sur le calque d’image dans le panneau de calques et faites-le glisser vers l’autre onglet. Survolez-le un instant et l’onglet s’ouvrira. Vous pouvez ensuite faire glisser l’image sur le canevas et la déposer là-bas.

N’oubliez pas que vous ne pouvez pas relâcher le curseur tant que vous n’avez pas déposé l’image directement sur le plan de travail !

Il est conseillé d’utiliser des images avec un arrière-plan transparent, comme un fichier.png, afin que l’arrière-plan de l’annonce soit visible. Sinon, vous pouvez toujours modifier l’arrière-plan de l’annonce pour qu’il corresponde à l’arrière-plan de l’image, ce que je ferai pour mon annonce, car la couleur d’arrière-plan de l’image est la même que celle que j’aimerais utiliser pour mon annonce (plus d’informations sur la façon de procéder plus tard !)

Étape 3 : Redimensionner les images pour les adapter à la bannière

Une fois que vous avez placé une image sur votre plan de travail, vous pouvez la redimensionner à tout moment en vous rendant sur Modifier > Transformation gratuite.

Les bascules apparaîtront autour de l’image, et vous pouvez cliquer et faire glisser pour changer la taille et déplacez l’image autour de la toile jusqu’à ce que vous soyez satisfait. Cliquez en dehors des bascules et faites glisser vers la gauche et la droite pour faire pivoter l’image.

Étape 4 : Modifier le Couleur d’arrière-plan (facultatif)

Pour une apparence plus professionnelle, vous souhaitez que l’arrière-plan de votre annonce corresponde à la couleur d’arrière-plan de votre image. Si vous avez une image transparente, vous pouvez définir une couleur d’arrière-plan autre que le blanc en vous dirigeant vers les échantillons de couleurs dans le coin inférieur gauche sous la barre d’outils.

Cliquez sur celui devant les deux carrés et sélectionnez la couleur que vous souhaitez utiliser dans la fenêtre du sélecteur de couleurs.

Une fois que vous avez sélectionné une couleur, cliquez sur Calque 1dans le Panneau Calques, afin que le calque soit sélectionné plutôt que le plan de travail.

Ensuite, cliquez sur l’outil Pot de peinture, qui peut être masqué dans l’outil Dégradé, alors cliquez et maintenez l’outil Dégradé pour trouver le pot de peinture.

Cliquez sur le canevas et l’arrière-plan deviendra la couleur que vous avez sélectionnée.

Sinon, si vous souhaitez faire correspondre l’arrière-plan de votre annonce à la couleur d’arrière-plan d’une image que vous avez ajoutée, vous pouvez cliquer sur le Outil Pipette puis l’arrière-plan de l’image pour prendre la couleur.

Ensuite, cliquez sur l’outil Pot de peintureet cliquez sur l’arrière-plan de la toile pour faire correspondre les couleurs.

Votre image se fond maintenant avec l’arrière-plan de l’annonce. Ceci n’est possible que si l’arrière-plan de votre image est principalement d’une couleur ; sinon, il peut être préférable de transformer l’image en PNG transparent avant de l’ajouter à votre projet.

Étape 5 : Ajoutez du texte à la bannière

Pour ajouter du texte à votre annonce, cliquez sur l’outil Texte dans la barre d’outils.

Votre curseur se transformera en une icône de texte et vous pourrez cliquer n’importe où sur votre canevas pour ajouter une zone de texte.

Dans la barre d’options, vous pouvez modifier la police, le style, la couleur et la taille du texte.

Pour ajouter une nouvelle zone de texte, cliquez sur une autre zone du canevas. Ajoutez-en autant que vous le souhaitez !

Étape 6 : Ajouter un bouton

La dernière chose que vous voudrez ajouter est un bouton sur lequel les clients potentiels peuvent cliquer lorsqu’ils voient l’annonce. Cela peut être aussi simple ou aussi complexe que vous le souhaitez. Pour créer un bouton, vous devez utiliser l’outil Forme. Choisissez la forme que vous souhaitez. Pour mon annonce, je vais créer un bouton rectangle.

Cliquez et faites glisser pour créer la forme rectangulaire.

Vous pouvez maintenant modifier l’apparence du bouton. Sélectionnez une couleur de remplissage en cliquant sur le échantillon de remplissage dans la barre d’options pour ouvrir la fenêtre de remplissage.

Vous pouvez sélectionner le style de remplissage à partir des icônes en haut. La première icône à partir de la gauche rendra l’intérieur de la forme transparent, la seconde remplira la forme d’une couleur unie, la troisième remplira la forme d’un dégradé et la quatrième la remplira d’un motif.

Cliquez sur les dossiers pour voir les différents types de remplissages colorés, de motifs et de dégradés disponibles.

Vous pouvez également modifier l’apparence du trait ou le contour du bouton. Pour modifier l’épaisseur, entrez la largeur souhaitée en pixels dans la case. Modifiez le style en cliquant sur le menu déroulant et en sélectionnant parmi les options: solide, pointillé ou tireté.

Enfin, cliquez sur l’icône à côté de Trait pour modifier le remplissage de la bordure de la même manière que vous avez modifié le remplissage de la forme. Choisissez le type de remplissage parmi les quatre icônes en haut, puis cliquez sur les dossiers pour voir plus de couleurs, de dégradés et de motifs.

Pour les besoins de mon annonce, je garderai le remplissage du bouton transparent avec une bordure blanche unie.

Étape 7 : Ajoutez du texte à votre bouton

Enfin, vous souhaiterez probablement ajouter du texte à votre bouton. Cliquez sur l’outil de saisie dans la barre d’outils.

Cliquez à l’intérieur du bouton pour ajouter une zone de texte.

Tapez ce que vous voulez, puis vous pourrez modifier l’apparence du texte dans la barre d’options.

Une fois le texte ajouté, vous aurez un bouton sur votre annonce prêt à être utilisé par les clients.

Votre bannière est maintenant terminé.

Comment redimensionner une bannière publicitaire dans Photoshop

Une fois que vous avez une bannière qui vous convient, vous pouvez redimensionner le projet si vous souhaitez utiliser le même design pour une taille différente bannière. La fonction Taille d’image de Photoshop vous permet de redimensionner facilement, mais vous risquez de perdre en qualité si vous redimensionnez trop le projet.

En général, il est préférable de réduire la taille plutôt que d’augmenter-augmenter la taille d’un projet plus qu’un peu peut réduire la qualité et créer une pixellisation. Par exemple, si j’ai créé une annonce de 750 × 750, je peux la réduire à 250 × 250 sans réduire la qualité et conserver le même ratio.

Pour redimensionner une bannière, rendez-vous sur Image > Taille de l’image.

Entrez les nouvelles Largeur et Hauteur dans les cases et assurez-vous que la Résolution est définie sur 72 PPI. Cliquez sur OK.

La toile changera pour refléter la nouvelle taille que vous avez définie. Tant que vous avez réduit la taille, vous ne remarquerez pas beaucoup de changement de résolution.

Vous pouvez également redimensionner votre image lors de l’exportation, ce qui Je vais vous expliquer dans la section suivante.

Comment exporter votre bannière publicitaire

Une fois que vous avez terminé, vous pouvez exporter votre bannière sous un type de fichier spécifique en vous rendant sur Fichier > Exporter > Exporter sous.

La fenêtre Exporter sous apparaît. Tout d’abord, vous devez vous assurer que le format de fichier est défini sur PNG ou JPG. En règle générale, il est préférable d’exporter au format PNG car il s’agit de la norme pour les graphiques Web et garantit que la qualité reste nette et que toute transparence est préservée si nécessaire. À ce stade, vous pouvez également redimensionner l’image si nécessaire en saisissant une valeur différente de Largeur et de Hauteur dans les cases sous Taille de l’image.

Une fois que vous avez défini vos paramètres d’exportation, cliquez sur Exporter pour enregistrer le projet dans vos fichiers.

Vous pouvez ensuite rincer et répéter ce processus avec d’autres designs de bannières publicitaires ou avec le même design mais dans une autre taille. Avec une idée de base de ce que vous recherchez, créer une bannière publicitaire dans Photoshop est étonnamment facile !

By Kaitlynn Clay

Je travaille en tant qu'expert UX. Je m'intéresse à la conception de sites Web et à l'analyse du comportement des utilisateurs. Pendant mes jours de congé, je visite toujours le musée d'art.