Accueil > Tutoriels pour les webdesigners > Photoshop > En faisant du webdesign > Créer une bannière 468 x 60 pour son site internet avec Photoshop

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

mercredi 19 décembre 2007, par Wonka

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,6 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.

JPEG - 19,6 ko

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é.

JPEG - 20 ko

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.

JPEG - 22,1 ko

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.

JPEG - 28,7 ko

ETAPE 5

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

JPEG - 29,4 ko

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 !

Messages

Un message, un commentaire ?

Forum sur abonnement

Pour participer à ce forum, vous devez vous enregistrer au préalable. Merci d’indiquer ci-dessous l’identifiant personnel qui vous a été fourni. Si vous n’êtes pas enregistré, vous devez vous inscrire.

Connexions’inscriremot de passe oublié ?