Créer une bannière 468 x 60 pour son site internet avec Photoshop

Vous verrez dans ce tutoriel Photoshop comment créer une bannière de publicité pour votre site Internet.

Nous allons voir ici comment créer une bannière de publicité pour son site internet. En premier lieu il faut se rendre compte qu’une bannière sera une sorte de pré entrée pour un site internet, si un internaute n’aime pas votre publicité il n’aimera pas votre site, pire encore il n’y rentrera tout simplement pas !

Pour éviter cela il faut créer une bannière : esthétique, percutante, et efficace.

Esthétique : par son design et son graphisme. Percutante : par sa mise en page, son dynamisme et son contenu. Efficace : par son concept, son originalité et son message.

Autre chose : Sur internet plusieurs formats sont devenus des standards, c’est sur ces formats qui faudra vous baser pour créer vos bannières. Trois grands formats sont disponibles :

La bannière standard : 468 pixels sur 60. Le carré : 250 pixels sur 250. Et le bouton : 88 pixels sur 31.

Dans notre exemple nous allons créer un bandeau de 468 x 60 pixels.

Photoshop - 344.5 ko
Fichier source Photoshop
clic pour télécharger le fichier source photoshop utilisé dans ce tutorial

ETAPE 1

Je crée un nouveau document de 468 pixels de largeur sur 60 pixels de hauteur. Et la première chose que je vais ajouter à mon bandeau, c’est mon logo, en effet une bonne pub est une pub identifiée. L’internaute doit reconnaitre d’un seul coup d’œil à qui il a affaire.

Vous pourrez retrouver des tutoriaux pour créer votre logo sur cette page : http://www.wks.fr/-Logo-et-identite-visuelle-.html, si vous n’en avez pas encore, sinon vous pouvez vous contenter de créer un simple titre avec l’outil texte de Photoshop.

ETAPE 2

Pour donner un peu de volume, je vais créer un dégradé dans le fond de ma bannière. Je crée un nouveau calque et avec l’outil dégradé couleur 100% d’opacité vers 0% je crée le dégradé.

ETAPE 3

Je vais ajouter un nouveau calque avec un motif ainsi qu’un effet de biseautage, je rappelle que pour retrouver les styles de calques vous pouvez télécharger le fichier source disponible en haut de cette page !

Je change le mode d’opacité du calque en lumière tamisée. J’ajoute un masque de fusion pour camoufler légèrement la partie qui se trouve au dessus du logo.

ETAPE 4

J’ajoute maintenant un slogan et une courte description de mon site, soyons précis et légèrement commercial. Votre texte doit rester clair, éviter donc les polices de caractères compliqués, et les modes d’opacités trop réduits.

ETAPE 5

J’ajuste le tout, en réhaussant l’opacité, la bordure du calque etc...

Voila votre bannière est terminée, maintenant vous devez l’uploader sur votre serveur (via votre logiciel FTP) et donner l’adresse à tous pour que les visiteurs puissent créer un lien vers votre site !

Mot-clés : Dèbutant Photoshop

Partager cet article avec vos amis

Ajouter un nouveau commentaire

Article publié par Julien DEBOVE

Voir le profil Google+ de

Images Réalisées à partir de ce tutoriel Photoshop

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publié par rega

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

publiée par Inconnu

Vous avez terminé ce tuto ? Partager votre création graphique.

Il y a 17 commentaires publiés sur cet article
  • maxime

    Simple,tres simple même,mais le rendez-vous du graphiste est là !

    Merci.

    Répondre
  • milo13

    très réussi comme d’habitude ;) sympathique tutoriel. merci Wonka.

    voici ma bannière, je sais, je suis à des années lumière de ton talent mais bon, je me lance, qu’en penses-tu ?

    cordialement.

    Répondre
    • Wonka

      Je pense que ce n’est pas dans cette partie du formulaire qu’il faut insérer le code !

      C’est directement dans ton message !

      Car la on voit rien, juste une erreur !

      Répondre
      • milo13

        Oops !!! désolé, là ça devrait fonctionner :)

        Free Image Hosting at www.ImageShack.us

        Répondre
        • Wonka

          Pas mal du tout, cependant j’aurais choisie une police de caractère plus large pour le titre !

          Répondre
          • milo13

            merci pour ta réponse, ça fait plaisir ;) je vais fouiller dans mes polices ;)

            Répondre
  • alex

    bonjour,

    je decouvre ce site : tres bien fait et tres instructif ! :) serait il possible d’avoir le psd de ce tuto en haut comme mentionne durant le tuto svp ??

    bon noel ! :)

    Répondre
  • Toinousp

    en parcourant le site j’ai découvert ce tuto qui m’a fort intéressé car je suis en pleine création de site !!

    j’ai donc fait ma conpo :

    c’est un super tuto comme tous les autres !!!

    Répondre
  • stotos

    merci pour cette fiche très bien expliquée.

    Venez visiter mon site ici : http://lepanneauphotovoltaique.doomby.com

    Répondre
  • pitch

    bonjour, je débute totalement et je suis un peu nulle. Je ne trouve pas la fonction« l’outil dégradé couleur 100% d’opacité vers 0% » pour créer le dégradé...

    Répondre
  • pierre

    merci pour votre aide

    Répondre
  • shentell

    Coucou !! Je chercherais donc un « bon » site pour faire une bannière classe, gratuitement, ou sur l’image nous ne voyons pas le site etc... Bref impossible pour moi d’en trouver 1 ! Alors aider absolument s’il vous plait ;) !!

    Répondre
    • Wonka

      Je suis pas sur qu’il existe des sites pour créer des bannières gratuitement ? Quel genre de bannière recherche tu ?

      Répondre
Ajouter un nouveau commentaire