Téléchargez mon guide sur le référencement

Et recevez les derniers articles par mail
trucs-de-blogueuse-guide-referencement

J’ai le plaisir d’inviter Béranger Blaudez, graphiste et photographe, qui va vous expliquer comment faire pour créer soi-même sa bannière de blog.

Vous pouvez le retrouver sur son blog Shoot et Retouche si vous souhaitez apprendre à mieux utiliser votre appareil photo et faire vous-même vos retouches sur Photoshop.

Il peut également vous aider dans vos projets de création de logo et de bannière sur son site pro BloDesign.


Vous êtes nombreux à vouloir un logo ou une bannière personnalisée pour votre blog et vous avez raison.

Dans cet article, nous allons voir ensemble ce qu’est une bannière, pourquoi il est important d’en avoir une et comment la réaliser.

Cela peut paraître difficile pour certains, mais avec quelques petites techniques, il vous sera possible de créer votre propre bannière vous-mêmes.

 

Qu’est-ce qu’une bannière ?

En voilà « une question qu’elle est bien » ! On utilise souvent le terme bannière, mais savez-vous vraiment ce que c’est ?

 

Sur le web, on appelle bannière (ou bandeau) un encart publicitaire qui est le plus souvent illustré. Sa taille, exprimée en pixels, est originellement de 468 x 60 pixels.

C’est donc ça une bannière ?

 

creer-banniere-blog-trucs-de-blogueuse

 

Par déformation, on a fini par appeler bannière la partie haute d’un site ou d’un blog. Encore plus généralement, on a tendance à employer le mot bannière à la place de logo.

 

C’est un élément particulièrement important, car ce sera la première image que vos lecteurs verront lorsqu’ils arriveront sur votre blog.

 

La bannière est composée le plus souvent de trois éléments principaux :

  • une image de fond en rapport ou non avec la thématique du site/blog. Par exemple, un blog de cuisine pourrait avoir une photo d’ingrédient en image de fond.
  • un logo : identité visuelle du site qui est une représentation graphique ou textuelle de votre marque/site.
  • une baseline : slogan ou signature texte qui permet de reconnaitre la marque ou de comprendre le sujet du site. Par exemple ici : « la cuisine pour tous ». Pour en savoir plus sur la baseline, lisez cet article.

 

faire-banniere-blog-trucs-de-blogueuse

 

creer-banniere-blog-trucs-de-blogueuse

 

Pourquoi faire une bannière sur son blog ?

Votre bannière vous permet de définir l’identité visuelle de votre blog et vous donne la possibilité de vous démarquer des autres.

C’est la première image que vos lecteurs auront de votre site et probablement ce qu’ils retiendront visuellement de votre blog.

 

A l’image d’une marque, la bannière vous permet d’être reconnue facilement, c’est pourquoi il faut qu’elle soit personnalisée. En effet, si vous arrivez sur trois blogs différents et que la bannière est identique, vous aurez du mal à vous rappeler où vous avez lu un article.

 

faire-banniere-blog-trucs-de-blogueuse

 

L’inconvénient du personnalisable, c’est que vous ne saurez peut-être pas par où commencer ni comment vous y prendre, vous pouvez également passer beaucoup de temps à chercher votre style.

 

En tant que débutant, vous pouvez avoir plein d’idées pour votre bannière, mais être totalement perdu lorsqu’il s’agit de passer à sa réalisation. Si vous ne savez pas par quoi commencer, suivez ces quelques indications et vous pourrez commencer à réaliser votre première bannière tout/e seul/e.

 

Comment faire sa bannière ?

C’est généralement dès le début que ça se complique, vous avez plein de belles idées en tête, vous vous lancez dans la réalisation et finalement après des heures passées devant votre écran, votre bannière ne ressemble pas du tout à ce que vous vouliez.

 

Pas de panique, il faut procéder par étapes.

 

La première consiste à chercher de l’inspiration en fouillant un peu sur le web. Rechercher par mot clef  sur la thématique de votre blog vous permettra de savoir dans quelle direction partir pour la réalisation de votre bannière.

Bien entendu, vous devez vous inspirer et non pas copier.

Gardez en tête que les conseils que je vous donne ne sont que des suggestions et que vous êtes libre de faire ce que vous voulez avec votre bannière 🙂

 

Il n’y a pas de design de bannière universelle, mais il existe des règles à suivre si vous voulez quelque chose de clair et lisible. On note une forte tendance pour les fonds blancs avec une police type manuscrite agrémentée d’illustrations. Cela donne un effet épuré à votre design.

 

1. Choisissez le logiciel

Avant de commencer à créer votre bannière, vous aurez besoin d’un logiciel pour assembler et modifier tous les éléments. Il en existe plusieurs pour des utilisations et utilisateurs différents, ils ont tous leur défauts et qualités, voici une liste succincte de ce que j’ai déjà utilisé :

  • Photoshop CC : Super puissant, des fonctionnalités à en tomber par terre, mais pas forcement intuitif ni facile d’accès de prime abord. Il existe des formules d’abonnement au mois, donc finis les 3000€ à sortir de sa poche. Vous pouvez parfaitement télécharger la version d’essai pour vous faire une idée. Allez faire un tour sur mon blog pour apprendre à utiliser Photoshop.
  • The GIMP : Totalement gratuit, fonctionne sur Mac et PC. Il a beaucoup de similitudes avec Photoshop, et la réalisation de bannière est tout à fait possible avec ce logiciel. Il reprend les mêmes codes que Photoshop en terme de gestion de fichier, de calque et de barre d’outil.
  • Pixlr Editor est un logiciel gratuit en ligne, beaucoup moins de fonctionnalités que les deux premiers et dépend de votre connexion internet. Il permet néanmoins de faire un assemblage de texte et d’images correct. Il sera parfait si l’on ne veut pas télécharger et installer de logiciel sur son ordinateur.

 

2. Choisissez le nom du blog

Vous trouverez dans ce lien un article intéressant pour vous aider à trouver le nom de votre blog.

 

3. Choisissez le graphisme de la bannière

Vous devez définir la direction graphique que vous voulez suivre afin qu’elle soit en harmonie avec votre design de blog. En effet si vous avez un blog ultra moderne avec une bannière rétro, cela peut créer un décalage qui ne fonctionne pas graphiquement.

 

Le design de votre bannière découle de votre personnalité et de vos goûts, mais vous devez néanmoins prendre en considération votre cible lors de sa création, attention tout de même à ne pas tomber dans les clichés.

Voici un même texte mis en scène différemment. A gauche, un design sombre et typique des sites de poker en ligne ; à droite, un design épuré monochromatique rose. Lequel de ces choix graphiques choisiriez-vous si vous aviez une cible masculine ?

 

creer-banniere-cest-pas-gagne-masculin-feminin-trucs-de-blogueuse

 

Vous devez également déterminer la dimension, en pixels, de votre bannière. Elle dépendra principalement de votre blog : effectivement, si l’affichage maximum d’une image sur votre blog est de 1250px de large, nul besoin de créer une image de 2000px.

Cela semble évident mais il est bien de le rappeler : plus une image est grande en résolution, plus son poids en octets augmente et donc plus son temps de chargement sera long.

La hauteur dépendra ensuite du nombre d’éléments incorporés dedans.

 

4. Choisissez la typographie / police de caractère (ou font)

C’est un choix important, car on peut changer la perception d’un mot avec une police, cela permet même de renforcer le sens du texte.

Dans cet exemple très cliché, quel police symbolise le mieux pour vous « Clint Eastwood » ?

 

creer-banniere-blog-trucs-de-blogueuse

 

Dans exemple ci-dessous, on peut guider le lecteur en restant sur les codes du cinéma : à gauche on a une typographie Gothique en haut et une police Basic en bas, la connexion avec le monde du cinéma ne se fait pas.

A droite en revanche, on à une police manuscrite qui fait penser à un autographe, et en bas à une police que l’on trouve sur le bas des affiches de films.

 

faire-banniere-blog-trucs-de-blogueuse

 

Evitez de faire coexister 4 polices fantaisies en même temps, le résultat risquerait de ne pas être lisible. Sur l’exemple ci-dessous, le mélange est tel, qu’on ne lit pas clairement le texte, on passe à côté du sens des mots.

 

creer-banniere-blog-trucs-de-blogueuse

 

Le bon choix à faire (s’il en existe un) est de ne choisir qu’une police « Spéciale / Fantaisie » et de la marier avec une police dite classique.

Deux polices manuscrites peuvent néanmoins fonctionner ensemble, si elles sont dans un style graphique similaire (voir plus bas : Juliette, Un blog voyage).

Vous trouverez plein de ressources gratuites de typographie sur Dafont et FontSquirrel.

 

5. Choisissez les couleurs

En simplifiant au maximum, on pourrait distinguer trois catégories de couleurs :

  • Les couleurs vives sont dynamiques et ont le mérite d’attirer le regard et de faire ressortir les éléments, il faut tout de même les utiliser avec parcimonie. Si elles ont souvent été associées aux sites discount, on les trouve maintenant un peu partout. Le site de Sosh en est l’exemple parfait.
  • Les couleurs pastels sont, quand à elles, bien plus relaxantes pour les yeux et ont le vent en poupe depuis quelques années.
  • Si cela à du sens pour votre bannière, des nuances de gris (50 maximum) peuvent aussi, très bien fonctionner.

 

creer-banniere-blog-trucs-de-blogueuse

 

Essayez de choisir des couleurs qui se rapportent avec le thème de votre blog.

Par exemple, pour un blog qui parle de voyage, on pourrait imaginer des couleurs bleu et jaune clair rappelant le ciel et le sable.

Si toutefois, vous avez des difficultés à choisir, prenez une photo dont les couleurs vous plaisent et allez sur le site Pictaculous, vous pourrez ainsi faire des palettes de couleurs à partir de cette image.

Vous pouvez également parcourir le site Design Seeds pour faire le plein d’inspiration. Préférez 2 à 3 couleurs, maximum 4, afin de déterminer une palette de couleurs.

Essayez d’abord de partir d’une palette de 5 à 6 couleurs, et d’en choisir 2 ou 3. Elles seront la base du design de votre bannière, vous pourrez ensuite les reprendre pour le design de votre site.

 

Voici un exemple de palette que vous pouvez trouver sur le site Design Seeds :

faire-banniere-blog-trucs-de-blogueuse

 

6. Choisissez les éléments de décoration

Pour avoir une bannière qui soit plus graphique, vous pouvez choisir d’y intégrer des éléments de décoration (images, dessins, icônes, etc.), tout autour de votre logo afin de mettre en avant le thème de votre blog.

Evitez néanmoins de surcharger votre bannière de trop d’éléments graphiques, ou vous risqueriez de perdre vos lecteurs.

Edit : Suite à vos demandes dans les commentaires, voici une liste de sites pour faire le plein d’illustrations ou de photos. Attention à respecter les licences (en savoir plus sur les images libres de droit).

 

Gratuits :

 

Payants :

 

Dans cet exemple fictif, le nom et la baseline sont complétés par deux petites illustrations (un nuage et un avion en papier), le concept est très simple mais efficace, on comprend tout de suite de quoi parle le blog.

 

creer-banniere-blog-trucs-de-blogueuse

 

7. Assemblez votre bannière

Prenons un cas fictif de bannière à réaliser pour un blog de cuisine.

  • En terme de police, je n’en n’ai mis qu’une seule :  Adrift Bold. Le choix est basé sur le fait qu’elle me faisait penser aux étiquettes de boites de conserve vintage. Le texte est volontairement blanc uni car la couleur sera amené par le fond et les illustrations sur les côtés.
  • J’ai donc créé un document de 1250px de large (en fonction de la largeur de votre blog) sur 600px de haut. J’ai ensuite colorié mon calque de fond avec une couleur vert clair pastel (couleur hexa #88c5a5) qui donne une ambiance fraiche et naturelle.
  • Sur un calque au-dessus, j’ai rajouté un effet de grain (bruit numérique) pour que mon fond ne soit pas trop lisse. Puis j’ai rajouté un effet légèrement orangé en peignant dessus avec un pinceau large, cela donne un fond un peu moins uniforme et plus intéressant au niveau des textures.
  • Le texte « BEB’s KITCHEN »est en police »Adrift Bold », je l’ai écrit sur deux calques séparés pour pouvoir, par la suite, changer la taille et l’emplacement de chaque mot indépendamment.
  • J’ai rajouté en bas un bandeau blanc afin d’avoir un support pour la baseline (« la cuisine pour tous »), en effet je ne voulais pas qu’elle flotte sous le titre principal. J’ai rajouté une fourchette et couteau de part et d’autre du bandeau pour illustrer la cuisine, avec un rappel de la lettre « K » de Kitchen dans le rond central symbolisant une assiette.
  • J’aurais pu laisser la bannière telle quelle, mais j’ai fini par rajouter des illustrations colorées de chaque côté du texte : une magnifique pizza ainsi que des couverts en bois.
  • Au final je n’avais besoin que de 455px de haut pour faire tenir mes illustrations, j’ai donc recadré la bannière pour avoir mon format définitif (1250px X 455px).
  • Faire un magnifique GIF qui résume toutes ces étapes en image 🙂

 

creer-banniere-blog-trucs-de-blogueuse

 

C’est déjà fini 🙁 ?

 

Pas de panique, vous avez maintenant en main des astuces pour faire votre bannière à votre image, voici un petit résumé qui ne fait pas de mal :

  1. Choisir le logiciel pour faire votre bannière
  2. Choisir le graphisme de la bannière
  3. Choisir le nom du blog
  4. Choisir les polices
  5. Choisir les couleurs
  6. Choisir les éléments de décoration
  7. Assembler votre bannière
  8. Admirer votre bannière avec fierté et la mettre sur votre blog

 

N’oubliez pas que si elle vous plait, c’est déjà très bien ! Voyez-la comme un atout pour vous différencier des autres, et pensez au fait qu’elle n’est pas figée, en effet rien ne vous empêche de la faire évoluer.

 

Mais si vous n’avez toujours pas d’inspiration, vous pouvez éventuellement la confier à quelqu’un dont c’est le métier et il s’en chargera 😉

Je vous propose de créer pour vous votre bannière, laissez-moi un message sur mon site BloDesign.

 

Alors on se retrousse les manches, on lance son logiciel de retouche préféré et on passe à l’action ! Qu’en dites vous 🙂 ?

 

Béranger Blaudez

Béranger Blaudez, 31 ans, est graphiste-photographe depuis plus de 10 ans et véritable touche-à-tout multimédia. Il a effectué des projets divers et variés dans de nombreux domaines.
Aujourd’hui, il met toutes ses connaissances et son savoir-faire à votre service.
Vous pouvez le trouver sur son site pro ou son blog.

Les derniers articles par Béranger Blaudez (tout voir)

Réinitialiser le mot de passe
Veuillez entrer votre email. Vous allez recevoir votre nouveau mot de passe par email.