32
Créer une bannière 468 x 60 pour son 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.
- 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 !
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 14 messages de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
19 décembre 2007 19:41, par maxime
Simple,tres simple même,mais le rendez-vous du graphiste est là !
Merci.
Répondre -
-
20 décembre 2007 10:37, par 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-
20 décembre 2007 10:38, par 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
-
-
25 décembre 2007 23:11, par 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 -
14 février 2008 20:04, par 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 -
16 juin 2011 20:47, par stotos
merci pour cette fiche très bien expliquée.
Venez visiter mon site ici : http://lepanneauphotovoltaique.doomby.com
Répondre -
16 septembre 2011 13:21, par 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
