Comment créer une bannière Web efficace

Bannières de site Web: nous les voyons tous les jours, et elles sont un excellent ajout à votre campagne de marketing. Dans ce tutoriel, je vais vous montrer comment créer une bannière. Dessins de bannières et modèles de bannière sont composés de quelques éléments clés: un offre et un appel à l’action. Vous pouvez ajouter votre logo si vous le souhaitez, et une image pour améliorer le message.

le offre doit être concis et précis. Vous devez faire savoir à vos lecteurs ce que vous faites la promotion. le appel à l’action est un texte / bouton qui invitera votre consommateur à visiter votre site Web. Des phrases courtes comme «Achetez maintenant» ou «Abonnez-vous» sont d’excellents points d’ancrage.

Dans ce didacticiel, nous allons concevoir une bannière verticale d’une demi-page qui comprend tous les éléments essentiels. Nous appliquerons cette conception à une taille de bannière contextuelle, ce qui est un excellent exemple pour vous permettre de voir si vous prévoyez de concevoir des modèles de bannière à l’avenir.

Vous n’êtes pas prêt à créer une bannière dans Photoshop? Placeit est un excellent créateur de publicités en ligne, facile à utiliser et rapide à personnaliser. Avec des centaines d’options parmi lesquelles choisir, vous êtes sûr de trouver un modèle de bannière qui répond à vos besoins. Éléments Envato offre également incroyable et efficace modèles de bannières Web et Stock photos qui peut vous aider à créer une superbe campagne. Allez les voir!

Ce dont tu auras besoin

Vous aurez besoin d’accéder à Adobe Photoshop. Si vous ne disposez pas du logiciel, vous pouvez télécharger une version d’évaluation à partir du Site Web d’Adobe. Vous aurez également besoin de ces ressources:

Téléchargez les ressources et assurez-vous que la police est installée sur votre système avant de commencer. Lorsque vous serez prêt, nous commencerons à créer la bannière de votre site Web!

1. Configuration d’un fichier de conception de bannière Web

Étape 1

Dans Photoshop, aller à Fichier> Nouveau. Nommez le document Bannière Web. Définissez le fichier sur les dimensions suivantes:

  • Largeur à 300 px
  • la taille à 600 px
  • Orientation à Portrait
  • Résolution à 72 pixels
  • Mode de couleur à RVB

Cliquez sur Créer.

créer un nouveau fichier Photoshop

Étape 2

Créez des marges autour du document en accédant à Afficher> Nouveau guide. dans le Nouveau guide fenêtre d’options, sélectionnez Horizontal et définissez le Position à 20 px. Cliquez sur D’ACCORD.

Aller à Afficher> Nouveau guide, cette fois, le Position à 580 px.

créer des guides de marge

Pour créer des lignes verticales, accédez à Afficher> Nouveau guide. Dans la fenêtre d’options, sélectionnez Verticale et définissez le Position à 20 px. Cliquez sur D’ACCORD.

Aller à Afficher> Nouveau guide, cette fois, le Position à 280 px.

guides de marge autour du document

2. Conception de votre bannière Web

Étape 1

Jeter le Style rétro blonde l’image sur le document. La largeur de l’image doit correspondre à la largeur de la bannière. Si tu as besoin de redimensionner, presse Commande-T à Transformer.

ajouter une image

Étape 2

presse je pour sélectionner le Pipette outil. Échantillonnez la couleur jaune sur l’image.

Dirigez-vous vers le Couches panneau, et allez à Créez un nouveau calque de remplissage ou de réglage> Couleur unie. L’échantillon de premier plan doit être défini automatiquement. Sinon, utilisez le code suivant: #fcf1d3. Cliquez sur D’ACCORD.

Bouge le couche de couleur unie sous le couche d’image.

créer un calque de couleur unie

Étape 3

Créez un nouveau calque sur le Couches panneau en appuyant sur Maj-Commande-N.

En utilisant le Outil Brosse (B) et le #fcf1d3 au premier plan, passez le pinceau sur le coin supérieur droit de l’image. Cela créera un look homogène.

En relation :  6 règles Twitter non écrites que vous enfreignez probablement
ajoutez un nouveau calque et créez un look transparent avec l'outil Pinceau

Étape 4

Sélectionnez tous les calques en maintenant Décalage et sélectionner les toutes premières et toutes dernières couches. Clique sur le Créer un nouveau groupe bouton. Double-cliquez sur le dossier et renommez-le Contexte.

combiner des couches dans un dossier

Étape 5

Sélectionnez le Outil de texte (T) depuis la barre d’outils. Ajouter le offre ou ce que vous faites de la publicité. Dans ce cas, j’ajouterai ‘Spring’ dans une police différente de celle du reste de la bannière pour souligner la saison.

Dirigez-vous vers le Personnage panneau (Tapez> Panneaux> Panneau de caractères). Met le Police de caractère à Awosem et le Taille à 175 pt. Clique sur le Couleur swatch et réglez-le sur noir.

Utilisez les guides pour placer le texte au centre de la bannière.

ajouter un calque de texte

Étape 6

En utilisant le Outil de texte (T), ajoutez le reste de votre copie. Dans ce cas, ajoutez le reste du offre: «Vente, jusqu’à 50% de réduction sur les articles sélectionnés. En ligne seulement.’ Vous pouvez le faire sur un seul calque ou sur plusieurs calques.

Dirigez-vous vers le Personnage panneau et utilisez les paramètres suivants:

  • VENTE: Police Morton Bold, taille 110 pt. Met le Couleur swatch et réglez-le sur #d82a2e.
  • JUSQU’À 50%: Police Morton Bold, taille 110 pt, interligne 40 pt. Met le Couleur swatch vers noir.
  • DES ARTICLES SÉLECTIONNÉS: Police Morton Bold, taille 25 pt, interligne 25 pt.
  • EN LIGNE SEULEMENT: Police Morton Bold, taille 40 pt, interligne 35 pt.

Placez cette couche sous le Printemps couche. Sélectionnez les deux calques et créez un nouveau dossier nommé Copie.

ajouter le reste de l'offre

Étape 7

Il est maintenant temps de créer le ctout à l’action bouton. Dans ce cas, nous l’appellerons «Acheter maintenant>».

En utilisant le Outil de texte (T), ajouter le appel à l’action et utilisez les paramètres suivants: Police Morton Bold, taille 110 pt, suivi 100 pt. Met le Couleur swatch vers noir.

En utilisant le Outil Rectangle (U), créer un rectangle. Dirigez-vous vers le Contrôle barre et définissez la couleur sur blanc, le Largeur à 145 px, et le la taille à 35 px.

ajouter un bouton d'appel à l'action

Étape 8

Pour faire le appel à l’action démarquez-vous, nous ajouterons une ombre. Sur le Couches panneau, cliquez avec le bouton droit sur le Rectangle calque et sélectionnez Options de fusion.

dans le Style de calque fenêtre d’options, vérifiez et sélectionnez Ombre portée option. dans le Ombre portée paramètres, définissez le Opacité à 35%, angle à 130, distance à 10 px, et Taille à 20px. Cliquez sur D’ACCORD.

Sélectionnez le texte et rectangle couches et combinez-les dans un dossier appelé ‘Appel à l’action».

ajouter une ombre portée au bouton

3. Application de la conception de votre bannière Web à d’autres tailles

Il n’y a pas de bonne ou de mauvaise façon d’appliquer la conception de votre bannière Web à d’autres tailles. Ci-dessous, je vais vous montrer un exemple d’application facile d’une bannière d’une demi-page à une taille de pop-up. Utilisez ceci comme une inspiration et essayez d’ajouter votre propre spin. Alors montrez-nous votre design dans la section commentaires ci-dessous!

Étape 1

Dans Photoshop, aller à Fichier> Nouveau. Nommez le document Bannière Web 2. Définissez le fichier sur les dimensions suivantes:

  • Largeur à 500 px
  • la taille à 350 px
  • Orientation à Portrait
  • Résolution à 72 pixels
  • Mode de couleur à RVB

Cliquez sur Créer.

créer un nouveau fichier

Étape 2

Créez des marges autour du document. Aller à Afficher> Nouveau guide. dans le Nouveau guide fenêtre d’options, sélectionnez Horizontal et définissez le Position à 20 px. Cliquez sur D’ACCORD.

En relation :  Comment rester fort et extrêmement résilient dans le chaos

Aller à Afficher> Nouveau guide, cette fois, le Position à 580 px.

Pour créer des lignes verticales, accédez à Afficher> Nouveau guide. Dans la fenêtre d’options, sélectionnez Verticale et définissez le Position à 20 px. Cliquez sur D’ACCORD.

Aller à Afficher> Nouveau guide, cette fois, le Position à 280 px.

ajouter des guides de marge

Étape 3

Jeter le Style rétro blonde image et presse Commande-T à Transformer. Dirigez-vous vers le Contrôle bar et réglez le Largeur et la taille à 75%.

Placez l’image à gauche de la bannière. Un bon guide est d’avoir le coude du sujet touchant la marge.

ajouter l'image

Étape 4

Dirigez-vous vers le Couches panneau, et allez à Créez un nouveau calque de remplissage ou de réglage> Couleur unie. Définissez la couleur unie sur le code suivant: #ff634b. Cliquez sur D’ACCORD.

créer un calque de couleur unie

Étape 5

Créez un nouveau calque sur le Couches panneau en appuyant sur Maj-Commande-N.

En utilisant le Outil Brosse (B) et #ff634b comme couleur de premier plan, appliquez sur le bord de l’image et la couleur unie pour créer un aspect homogène.

en utilisant l'outil Pinceau, créez un look homogène

Étape 6

Sélectionnez tous les calques en maintenant Décalage et sélectionner les toutes premières et toutes dernières couches. Clique sur le Créer un nouveau groupe bouton. Double-cliquez sur le dossier et renommez-le Contexte.

combiner les couches dans un dossier

Étape 7

Revenez au Bannière Web 1 fichier. Aller au Couches panneau, et sélectionnez le ctout à l’action et Copie Dossiers. Clic-droit et sélectionnez Dupliquer les calques.

dans le Dupliquer les calques fenêtre d’options, définissez la Document à Bannière Web 2. Cliquez sur D’ACCORD.

dupliquer l'offre et les dossiers d'appel à l'action

Étape 8

Revenez au Bannière Web 2 fichier.

Sélectionnez le Copie dossier et appuyez sur Commande-T à Transformer, déplacer le texte vers le coin supérieur gauche.

Ouvrez le dossier et changez la couleur du texte «Vente» en #fceece.

déplacer le texte sur la bannière et changer la couleur du mot Vente

Étape 9

Placer le appel à l’action bouton au-dessus de la marge inférieure.

déplacer le bouton d'appel à l'action

4. Comment exporter votre conception de bannière pour le Web

Dirigez-vous vers Fichier> Enregistrer et enregistrez le fichier comme vous le feriez normalement.

Pour enregistrer un JPEG pour le Web fichier, dirigez-vous vers Fichier> Enregistrer pour le Web ou Shift-Option-Commande-S. Sélectionnez le type de fichier dans lequel vous souhaitez enregistrer le document. Je choisis JPEG-Et mettre 100 pour Qualité. En dessous de Taille de l’image, vous pouvez modifier la taille en pixels de l’image si vous avez des contraintes de taille.

En bas à gauche, vous pouvez voir un aperçu de la taille du fichier. Ceci est utile lorsqu’il y a des contraintes de taille sur un site Web et que vous devez réduire la qualité ou la taille de l’image.

Cliquer sur Sauvegarder… pour choisir l’emplacement dans la nouvelle fenêtre, et cliquez sur sauvegarder encore.

exporter votre design

Bon travail! Vous avez terminé votre modèle de bannière Web!

Dans ce didacticiel, nous avons appris à créer un design de bannière. Nous avons couvert les outils qui vous aideront à concevoir des bannières Web pour votre prochaine campagne marketing. Aujourd’hui, nous avons appris à:

  • configurer un fichier de bannière de site Web
  • utiliser des masques de calque
  • organiser les couches dans des dossiers
  • exporter un fichier JPEG prêt pour le Web

Si vous êtes nouveau dans Photoshop et avez besoin d’un modèle de bannière ou modèles de marketing promotionnel tout de suite, dirigez-vous vers Éléments Envato et GraphiqueRiver. Si vous êtes pressé, n’oubliez pas de vérifier Placeit. Nous avons de nombreuses options à explorer!

Si vous avez aimé ce didacticiel, vous pourriez aimer ceux-ci:

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.