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 ?
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.
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.
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 ?
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 » ?
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.
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.
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.
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 :
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 :
- https://www.vecteezy.com/
browse - http://all-silhouettes.com/category/floral-ornaments/
- http://fr.freepik.com/
- https://picjumbo.com/
- http://startupstockphotos.com/
- http://www.lifeofpix.com/
- https://pixabay.com/fr/
editors_choice/ 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.
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 🙂
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 :
- Choisir le logiciel pour faire votre bannière
- Choisir le graphisme de la bannière
- Choisir le nom du blog
- Choisir les polices
- Choisir les couleurs
- Choisir les éléments de décoration
- Assembler votre bannière
- 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 🙂 ?
Epinglez l’article sur Pinterest pour le relire plus tard
Béranger Blaudez
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)
- Comment créer une bannière personnalisée soi-même ? - 27 juin 2017
Bonjour,
Vous avez sur quel logiciel le GIF ?
Merci et la bannière est super chouette !
Félicitations vraiment pour ce grand boulot.
y a plus qu’à… mais je ne suis vraiment pas douée… je verrai tout ça à tête reposée. 🙂
Hello
Pour ma part j’avais fait ma bannière toute seule via Picmonkeys (site gratuit) en appliquant pas mal de tes conseils, je suis donc assez contente de voir que j’étais partie dans la bonne direction ! Elle me sert pour mon blog mais aussi ma boutique ALM et mes comptes de réseaux sociaux. Je garde l’article sous le coude, les nombreux sites que tu références sont vraiment un gain de temps quand on n’a pas à les chercher sur internet !
Bonjour Mia,
merci pour ces bonnes informations sur les bannières même si, c’est plutôt technique pour moi. J’ai améloiré la vitrine de mon blogretouchespourlesnovices.com et je suis entrain justement de me former en ligne sur l’affiliation; c’est pour cela, que j’étais en mode silence pendant un moment. Je suis également entrain de configurer ma boutique Shopify que j’envisage d’ouvrir au mois de juillet grace à une formation que je fais également. Voilà.
Cordialement.
Carole.
Bonjour,
Sans trop de notions de graphisme, j’ai créé une bannière pour mon site qui reprend bon nombre des éléments que tu mentionnes. L’image de fond demeure toutefois le «trade mark» des services que j’offre. Un pont bleuté et orangé (le pont de San-Francisco) qui entre dans les nuages. Le nom du site «Le soin par cœur» est écrit en script rouge ombré et surplombe en lettre capitale arial blanc gras «GUIDE ADAPTÉ AU DOMICILE». Il se complète par des mains qui offrent un cœur rouge sur lequel apparaît une croix blanche.
Le «baseline» est «avec les bons outils, l’Amour suffit». Le baseline apparaît sur chaque bas de page en script rouge.
Le «Haut du pont» ennuagé est repris comme fond d’écran lorsque les thèmes abordés sont plus spiritualistes. Il y beaucoup de mystérieux dans l’accompagnement…Et l’intangible est important. Au niveau du graphisme…
Le problème premier est la présence ou non d’effets visuels disponibles pour l’apparition des images et des services. Au visuel, ça fait fouillis. Je préfère la netteté et je comprend le lecteur de rechercher la simplicité. Déjà que mes textes sont parfois difficiles. Un GUIDE DE SOIN n’a pas à être un roman. Ma structure respecte les critères des livres numériques: paragraphes trois-quatre lignes avec une seule idée; liste de trois ou parfois quatre sujets par chapitre.
J’ai entrepris un site avec «Hostpappa». La difficulté est de déposer mon livre et le vendre sur cette plateforme.
Par ailleurs, J’ai conçu un site 3 pages qui rencontre tous mes critères d’édition avec Xsite professional. Comme Hostpappa m’a déjà couté 130.00$ canadiens, j’hésite à investir encore pour acquérir la version payante de Xsite. Acquérir cette version me permettrait de la mettre en ligne sur Hostpappa et de vendre mon livre. 23 Chapitres complets+ neuf outils de soins accessibles à domicile. Le tout sur Word et possiblement sur PDF. Le cadeau de bienvenue est constitué du premier outil: Les cartes de parcours. Une technique de psychoéducation.
Aujourd’hui,
Je contacterai des maisons d’édition pour obtenir de l’assistance dans la poursuite de mon projet. J’ai reçu le contrat de «Amazone». Je préfèrerais éditer moi-même mon travail et profiter du programme de publicité de cette entreprise. Par ailleurs; 1PT1 m’a offert une participation. Je recherche leur coordonnées. Je trouvais intéressant…
Retraité du milieu de la santé, il s’agit pour moi d’une source non négligeable de revenus. Et j’adore transmettre ce que j’ai acquis. Donner aux suivants…
Tu pourras constater le cul de sac de mon site en le visitant à l’adresse indiquée plus bas.
Belle journée.
Merçi pour les tuyaux…. un site trés trés bien en mode gratuit pour faire vos designs facilement (pas forcément les bannieres) c’est le site canva.com
Bonjour, je suis graphiste. Il vous manque beaucoup de notion à apprendre, mais ça s’apprend et on ne finit jamais de se ressourcer.
Evitez de dire comme les blogueurs concernant Gimp, par pitié, évitez. Gimp n’a pas beaucoup de similitudes à Photoshop, loin de là. Je maîtrise Photoshop depuis des années. Le logiciel a beaucoup évoluer et possède des options très puissants et poussés que vous pourrez être surprise. Il est loin d’être comme Photoshop.
A la base c’est 3 couleurs maxis (4 un peu oui) et 3 polices de caractères maxis, pas plus. Pour la création d’un logotype, il est conseillé de choisir une typographie en fonction de son activité (il faut apprendre le code de la typographie pour cela, apprendre le corps des polices de caractère par exemple).
Une bannière doit être lisible, simple, efficace. Ca peut être chargé (sans en faire trop) à partir du moment où vous avez une idée, une inspiration basé sur votre personnalité, votre activité; il faut une certaine maîtrise, des connaissances graphiques, les codes des couleurs, le symbolisme des formes et ses effets…
Le graphisme n’est pas un simple fait de créer une forme, ajouter un texte et c’est fini. C’est plus complexe que beaucoup le pense et ça s’apprend.
Bonjour et merci pour ce super post, comme toujours 🙂 !
Je rajouterai l’option Youzign pour ceux qui comme moi n’ont pas le temps ni l’envie d’apprendre à utilise Photoshop ou Gimp.
Alors Youzign est payant, c’est genre 150 euros l’année (si ça n’a pas augmenté depuis), mais on peut faire quasiment tout avec (bannière youtube, fb, blog, cartes de visites,Flyers…) en peu de temps.
Bon, en fonction de vos compétences graphiques et de votre sens du design, ça ne remplace pas un vrai pro. Mais si vous avez peu de budget et que vous devez dans un premier temps tout faire tout seul, ça peut faire économiser des frais.
Je précise que je ne suis pas un commercial pour Youzign :), mais je l’utilise depuis septembre et ça m’a bien aidé.
Bonne journée à tous.
Merci ! Je ne connaissais pas Youzign, ça à l’air rapide et assez facile effectivement. En revanche je ne suis pas fan de dépendre d’un connexion internet pour mes retouches 🙂
Samy, je vous conseille fortement Photoshop et je le recommande à beaucoup de personne, cela vous coûtera moins de 150 €. Pour un logiciel professionnel et la prise en main n’est pas si difficile que cela, malgré les nombreuses et superbes fonctionnalités qu’offre Photoshop, vous serez capable de concevoir des éléments qui vous ressemble.
Bonjour,
Article très intéressant mais connaissez-vous un site où l’on peut justement trouver des éléments de décoration libres de droit ?
Merci d’avance !
Bonne remarque, j’ai ajouté une liste de sites où l’on trouve des images libres de droit.
Merci beaucoup ! 🙂
Je vous conseille de le faire vous même, il y a des astuces selon votre goût ou par des banques d’image et vous pourrez les modifier par la suite en ajoutant votre touche personnel , votre patte graphique.
Hu hu, la bannière ? ce truc que j’ai carrément zappé par grosse flemme.
Je l’ajoute à la liste « sijavaisletempsjeferais » ^^
« pasdexcuseonfaitsabannière » 🙂
Excellents, ces exemples, très didactiques et fun !!!
Merci beaucoup !
Merci ! je suis content que ça te plaise 🙂