Leçons de blogdesign pour les fauchées et les nulles : Comment faire un menu personnalisé pour son blog

Ce que j'aime dans le fait de tenir un blog, c'est que c'est comme la vie, comme une boîte de chocolat, on sait jamais sur quoi on va tomber et on sait jamais à quoi s'attendre... Je ne m'attendais pas DU TOUT à ce que ma première leçon de blogdesign pour les fauchées et les nulles aie autant de succès, et je suis donc très très flattée. Voilà donc comme promis le tuto pour créer un menu personnalisé pour son blog.


Pour créer un menu cliquable à insérer dans blogger, vous aurez besoin de plusieurs choses :

- L'image de votre menu
- Les liens de votre menu (l'adresse des pages vers lesquelles ont est redirigées quand on clique quoi)
- Une connexion internet
- Un  tout petit peu de temps et de bonne volonté (mais pas beaucoup des deux)

Je vais décomposer le tuto en 2 parties :

1ère partie
Comment créer l'image sous Gimp, vu que beaucoup d'entre vous connaissent le logiciel mais ne savent pas trop par quel bout le prendre, ça fera une bonne entrée en matière
2ème partie
Comment faire de cette image un menu cliquable, et comment l'insérer dans Blogger (parce que je suis sous Blogger, donc je maîtrise, pour les autres plateformes, désolée... Va falloir mettre les mains dans le cambouis !)


Première partie : Comment créer votre image de menu sous Gimp

Les explications qui vont suivre vont vous servir à créer un menu des catégories de votre blog (aussi appellées "Labels" ou "Libellés" ou encore "Tags")
Une fois que vous aurez pigé le principe, vous pourrez utiliser le même principe pour créer des icones de réseaux sociaux, un menu des pages...
Par exemple, pour le blog j'ai utilisé cette méthode pour la barre des pages ( Accueil etc...) , les icônes de réseaux sociaux, les catégories et les blogs amis.

Voilà le menu une fois terminé (sans les liens ajoutés) :

Ce tuto vous permettras de comprendre le fonctionnement de plusieurs principes de Gimp : la création d'image, les calques, les motifs, les remplissages, la transparence, les sélections, le texte, l'exportation des images. Dit comme ça, ça fait beaucoup, mais je vous promet ça va aller tout seul ! Et puis j'aime bien l'effet "bout de scotch" transparent.


1. Téléchargez, installez et ouvrez Gimp. (Cliquez ici pour être redirigées vers le site pour le télécharger) jetez un premier coup d'oeil aux principales fenêtres : l'image, la boîtes des outils, la boîtes des calques...

2. Créez une nouvelle image : Fichier > Nouvelle image.
Une fenêtre apparaît, qui vous demande la taille de votre image. J'ai choisi une image de 240px de large sur 400 de haut.

Pour choisir la bonne hauteur, pensez à ou vous allez mettre cet élément sur votre blog. Si vous le mettez dans votre sidebar, voyez quelle est sa largeur, et calquez vous dessus...

Dans cette fenêtre, cliquez sur "Options avancées" et dans la ligne "remplir avec" choisissez "Transparence" puis validez.

J'utilise Linux en système d'exploitation, donc votre Gimp à vous aura peut-être une tête un peu différente (mais pas de panique le fonctionnement reste le même)

3. Remplir l'arrière-plan avec un motif

Cliquez sur l'outil "remplissage" (petit pot de peinture bien connu) et dans la colonne "options des outils" cliquez sur "remplissage avec le motif"


Cliquez sur les images pour le voir en grand !

Vous pourrez également constater que pour retoucher mes captures d'écran j'utilise un bon vieux Paint tout pourri.

Maintenant, choisissez votre motif. Si jamais vous ne trouvez pas la fenêtre des motifs : dans la barre du haut de Gimp (le menu) cliquez sur Fenêtres > Fenêtres ancrables > Motifs. Cliquez sur le motif qui vous intéresse dans la liste.

(Les motifs fournis pas Gimp ne sont, à mon goût, pas terribles. Mais vous pouvez en trouver une foule à télécharger gratuitement sur le net)

Munies de votre pot de peinture et du motif de votre choix, cliquez maintenant sur votre image pour la remplir avec le motif : 



Oui, je suis d'accord, ce serait génial de pouvoir faire pareil avec ses murs...

4. Créer le cadre des catégories

Pour cela, on va créer un calque. L’intérêt d'utiliser des calques dans Gimp est très simple : vous créez les différents motifs de votre image finale sur différents calques, qui, en se superposant, forment l'image finale. Cela permet de pouvoir retoucher les différentes parties de votre image sans interférer avec les autres, comme on le ferait en dessin.

Dans la barre de menu de Gimp (tout en haut) cliquez sur Calques > Nouveau Calque. Une fenêtre s'affiche, pour paramétrer ce calque. Ne changez pas les dimensions (qui sont copiées sur celles de votre image et c'est très bien) ; choisissez "transparence" dans "type de remplissage du calque" puis Validez


Vous constaterez que votre image n'a pas changée, et c'est normal, puisqu'on vient de mettre par dessus un calque transparent ! 
En revanche, dans votre fenêtre des calques, au dessus de "arrière plan" vous pouvez voir votre calque apparaître. On va modifier son nom, pour ne pas être paumées. Clic droit sur l'image du calque > Modifier les attributs du calque
Changer "Calque" par "Cadre catégories" (ou ce que vous voulez) puis validez.



Maintenant, vérifiez que le calque "Cadre catégories" est bien sélectionné (en surbillance) et Cliquez sur la barre du haut : Sélection > Tout (Ou faites un bon vieux Ctrl + A) Puis cliquez sur Sélection > Réduire. Une fenêtre s'ouvre. Renseigner "30" dans le nombre de pixels à enlever, et vérifier que le case "réduire depuis le bord de l'image" est bien cochée, puis validez. Voilà ce que ça donne :


Nous avons donc le futur emplacement du cadre des catégories sélectionné, maintenant nous allons le remplir.

5. Remplir le cadre des catégories

Choisissez maintenant la couleur que vous allez utiliser pour remplir le cadre des catégories, en cliquant sur la case correspondante dans la fenêtre des outils.



Une fenêtre s'affiche, avec en haut des petits onglets. Cliquez sur ces onglets pour choisir le mode de sélection de couleur que vous préférez, puis, quand vous avez choisi votre couleur, cliquez sur "Valider". 
Vous pouvez voir la couleur que vous avez sélectionnée dans la fenêtre des outils : le rectangle n'est plus noir, mais de la couleur que vous avez choisie.


Re-cliquez maintenant sur le petit pot de peinture, et à la place de "remplir avec le motif", choisissez "remplir avec la couleur de PP"



Cliquez maintenant sur le rectangle de sélection pour le remplir avec la couleur choisie.

6. Créer le "Scotch"

Cliquez sur Sélection > aucune.
 
Créez à nouveau un nouveau calque, comme expliqué à l'étape 4, que vous nommerez "Scotch".
Choisissez dans la fenêtre des outils le mode de sélection rectangulaire, et créez, sur le calque "Scotch", un rectangle de la taille que vous souhaitez (vous l'aurez compris, ce rectangle ça sera votre bout de scotch)


Choisissez la couleur de votre scotch et remplissez le rectangle que vous venez de créer comme en étape 5.



7. Rendre le scotch transparent

Vérifiez que votre calque "scotch" est bien sélectionné (en surbrillance).

En haut de la fenêtre des calques se trouve une barre pour définir l'opacité du calque. De base, l'opacité est définie à 100%. C'est cela qu'on va modifier pour rendre le scotch transparent et ainsi laisser apparaître le motif de l'arrière plan.

Pour cela, cliquez sur les flèches à droite de la barre pour baisser l'opacité. Je l'ai réglée à 29%, voyez ce qui va le plus avec votre image. 
Quand vous avez terminé, cliquez sur Sélection > Aucune.


8. Ajouter le texte

Cliquez sur l'outil Texte dans la boîte à outil. Allez sur votre image (en gardant le calque "scotch" sélectionné: utiliser le texte crée automatiquement un nouveau calque de texte) et créez un cadre dans lequel sera inscrit le nom des catégories.

Choisissez votre police, votre taille et votre couleur dans la boîte "options des outils", ainsi que l'alignement de votre texte etc, comme vous le feriez avec un traitement de texte.

Maintenant cliquez sur le cadre de texte que vous avez créé, et écrivez le nom de vos catégories comme vous en avez envie...


9. Exporter l'image

On a presque terminé pour cette partie qui vous aura donné un minuscule aperçu des fonctionnalités de Gimp. 
Vous pouvez cliquer sur les différents calques pour modifier les couleurs, ajouter des rectangles sous le texte etc...
Avant de terminer et de passer à l'ajout des liens, puis à l'insertion dans blogger, il va falloir exporter votre image, car Gimp l'enregistre automatiquement en format .xcf, qui n'est utilisable que par Gimp, mais qui à l'avantage de "retenir" les différents calques, contrairement à l'image exportée en jpeg, png...

Commencez par enregistrer votre image, pour l'avoir quelque part, avec tous les calques, pour que vous ayez la possibilité de la modifier à loisir plus tard.
Cliquez ensuite sur Fichier > Exporter. Choisissez le nom de votre fichier ainsi que le format dans lequel vous l'exporter (je vous conseille le .png, mais vous faites comme bon vous semble hein), cliquez sur "exporter" puis encore "exporter" ou "valider" si on vous le demande.
Et voilà ! Votre image est terminée, maintenant on va passer à ce qui vous intéresse le plus : l'insérer dans votre blog avec des liens cliquables !


Deuxième partie : Créer des zones cliquables sur votre image (aussi appelée map)

Et ben vous savez quoi ? Créer votre image, c'était la partie la plus longue, et la plus difficile... Créer les liens, ça prend 3 minutes et c'est ultra-facile.
Il existe 2 méthodes (en fait, beaucoup plus, mais j'en connaît que deux) : OU on paramètre l'image dans Gimp, grâce à Filtres > Web > Image cliquable, puis Gimp transforme tout ça en code html, OU on utilise le site html-map.com

C'est la deuxième méthode que je vais vous montrer, car elle est beaucoup plus simple. En utilisant le filtre Gimp, pour pourrez avoir accès à plus de personnalisations, mais il faudras ensuite bidouiller un peu le code pour le rendre utilisable (et quelque chose me dit que vous n'avez pas envie de bidouiller du html aujourd'hui)

1. Regrouper les liens
Tout d'abord, copiez et collez quelque part les liens vers lequels vous voulez que vos visiteurs soient redirigés quand ils cliquent sur votre image.
Pour moi, voilà les différents liens :

Catégorie déco :
http://www.craftybitches.fr/search/label/D%C3%A9co
Catégorie photo (aka la catégorie la plus pourrave de mon blog) :
 http://www.craftybitches.fr/search/label/Photos
Catégorie Cuisine :
http://www.craftybitches.fr/search/label/Cuisine
Catégorie Mode (aka inexistante chez moi mais on feras semblant) :
http://www.craftybitches.fr/search/label/Mode

2. Hébergez votre image

C'est primordial. Pour le moment, elle est au chaud sur votre ordinateur, mais personne d'autre ne peut pas la voir, et c'est bien dommage, vous avez passé du temps à la faire.
Il faut donc l'héberger. Il existe pleeeeeeeeein de sites pour ça... Personnellement j'utilise tout bêtement Picasa web, puisque toutes les images insérées dans blogger le sont, ça me permet de les avoir au même endroit.
Une fois que cela est fait, récupérez le lien de votre image (clic droit puis "copier l'adresse de l'image)

3. Configurer l'image 
 
Allez sur le site http://www.html-map.com/. Dans le champ "Enter your image's URL", collez l'adresse de votre image, puis cliquez sur start !

Ce qui donne :

4. Définir les zones à cliquer

Vous constaterez qu'en passant votre souris sur l'image, elle se transforme en petite croix... Qui vous permet de créer des rectangles.

Créez un premier rectangle de la taille de la zone de l'image sur laquelle on pourras cliquer :


Dans le champ "Ener link URL", collez l'adresse de votre premier lien (donc déco dans mon exemple) ; Laissez le lien "Enter link Alt" vide
Dans "Enter link target" choisissez si le lien devras s'ouvrir dans la même fenêtre ou bien dans une nouvelle.

Puis créez votre deuxième rectangle, remplissez les champs avec le deuxième lien ainsi de suite jusqu'à ce que chaque zone aie un lien défini, puis cliquez sur
"Click here to finish" (comment ça vous aviez pas besoin de moi pour comprendre ça?)
Le site vous génère alors 2 codes : le html ("html map code" et "css map code")
PAS DE PANIQUE, je vous ait dit qu'on ne toucherait pas au code, c'est le cas, vous allez simplement copier et collez ces deux codes, séparément, quelque part.

5. Insérer le code dans Blogger

On a presque terminé ! Ne nous reste plus qu'à mettre tout ça dans Blogger histoire d'avoir un joli menu.
Pour cela, allez dans blogger, cliquez sur "Mise en page" , puis cliquez sur "ajouter un gadget" là ou vous voulez qu'apparaisse votre menu. Dans la liste des gadgets, choisissez "HTML/javascript" . Laissez le titre vide, et collez, dans le champ "contenu" le code HTML fourni par html-map ("HTML map Code") puis sur "Enregistrer".
Vous pouvez cliquer sur "aperçu" pour juger de l'effet général. Sachez qu'en mode aperçu, les liens ne sont pas activés donc vous pourrez voir l'image, mais pas les liens,. Une fois satisfaite, n'oublier pas d'enregistrer les modifications du modèle.

ET VOILAAAAAAAAAA, vous avez un beau menu cliquable que même blogger il en fait pas des aussi beaux !

HTML Map

Et le petit bonus : si vous voulez centrer votre image, il vous faudras juste rajoujter cette ligne au tout début tout début du code que l'on a récupéré chez html-map :

<div style="text-align:center;">
et </div> à la fin.

Et beh il ne vous reste plus qu'à tester !






36 commentaires:

  1. Sérieusement tu me sauve la vie en balançant le lien "html-map", crois moi ou pas, mais j'ai fait des études de graphisme et on ne m'a pas appris à me servir d'html et de css, (génial pour des gens amenés à faire des interface web...) je suis en train d'apprendre toute seule... et ce genre de petits trucs m'aident grandement !

    RépondreSupprimer
    Réponses
    1. En effet... surtout qu'apprendre toute seule ça prend un temps fou ! Du coup si le graphisme n'est pas un problème tu peux t'amuser et aller plus loin par exemple en rajoutant une fonction mousover (l'image change quand la souris passe dessus) Tu as un très bon tuto pour gimp ici (si tu est graphiste tu dois utiliser photoshop ou autre, mais une fois qu'on a compris le principe, il suffit de rajouter les lignes de codes là ou il faut avec les bons liens vers les images) : http://etude-gimp.fr/web.php

      Supprimer
  2. Avec Crafty B., "Yes, we can !". C'est tout ce que j'attendais, merci beaucoup ! Et je dis, à quand le prochain tuto ?
    Plus sérieusement, ton tuto est clair, rien qu'à la lecture, je commence à mieux comprendre le fonctionnement de Gimp. En plus, ne pas trifouiller dans mon code HTML m'arrange bien !
    Bon, ben y'a plus qu'à ;-)

    RépondreSupprimer
    Réponses
    1. Et oui, au boulot maintenant !! Pour les prochains tutos, je pensais faire une liste des codes/astuces/gadgets pour blogger pour le personnaliser un max... Comme réduire les espace entre les gadgets, centrer les éléments, tout ça. J'ai bien galéré au début donc je me dis que je suis pas la seule ! Sinon, si il y a des choses que tu aimerais savoir faire, demande, et je verrais si je peut vous trouver une solution !

      Supprimer
  3. C'est un super tuto, très bien expliqué! merci de partager tes petits "trucs" avec nous!

    RépondreSupprimer
    Réponses
    1. De rien ! J'ai moi-même trouvé plein d'astuces sur des blog et ça m'a tellement sauvé la vie que partager à mon tour mes trucs m'a semblé plutot évident !

      Supprimer
  4. miss bergamote,
    oulala, merci merci ! je vais tester et je te montre après, promis, c'est trop chouette, tout ce temps passé pour nous faciliter la vie
    goooooooooo

    RépondreSupprimer
    Réponses
    1. Ouiiii je veux voir les résultats !!

      Supprimer
  5. Merci du temps passé à nous concocter ce tuto : j'utilise Gimp occasionnellement, faute de tout savoir, et là, grâce à ton tuto, je vais pouvoir améliorer mes possibilités.

    Bonnes créations...

    RépondreSupprimer
  6. you saved my life !! merci mille fois, me reste plus qu'à essayer ... ;-)

    RépondreSupprimer
  7. Ca fait des plombes que j'essaie d'ajouter sur mon blog un patch un peu stylisé avec des liens vers HC, twitter, tumblr.....et franchement le chinois css j'y pige rien du tout.

    Je te nomme donc très officiellement : sauveuse des blogs et des pas douées

    Merci !

    RépondreSupprimer
    Réponses
    1. Waouh, ça c'est du titre honorifique !

      Supprimer
  8. Merci beaucoup pour ce tuto, c'est très clair, vraiment bien expliqué... du as du y passer un temps fou !!! Par contre, je n'arrive pas a accéder a Html Map... il n'y a que chez moi que ça ne fonctionne pas?
    Merci encore :-)

    RépondreSupprimer
    Réponses
    1. De rien ! Je viens d'aller sur le site vérifier, à priori ça fonctionne, peut être que c'était temporairement inaccessible ? Sinon essaye avec un autre navigateur, je fais toujours ça quand un site bugge, ça marche une fois sur deux...

      Supprimer
  9. Oh mais c'est génial tout ça! Merci beaucoup. La bise. Agathe (http://libre-exces.blogspot.fr/)

    RépondreSupprimer
  10. Merci pour ce super tutoriel !
    En fait c'est pas si compliqué à faire (et c'est surtout très bien expliqué !)pour un résultat sans commune mesure ! Encore bravo !

    RépondreSupprimer
  11. oMG c'est juste LE tuto que j'attendais :-) pour faire mon menu de réseaux sociaux sur le blog :-). Merci beaucoup :-) bonne soirée!

    RépondreSupprimer
  12. merci de sauver la vie des mégas truffes en info comme moi !

    RépondreSupprimer
    Réponses
    1. Voler au secours des mégas truffes, telle est ma devise !

      Supprimer
  13. Merci beaucoup pour cet article ! Depuis mille ans je me demande comment faire pour avoir un menu sans attribuer chaque lien à une image différente, et du coup avoir plein de coupures entre les images... je vais pouvoir tenter de nouveaux trucs ! :D
    (ps : je ne sais pas si c'est moi qui bug mais quand je clique sur la catégorie "beauté" ça m'affiche le lien vers les posts tagués "look", c'est normal ?)
    Merci encore ! :)

    RépondreSupprimer
    Réponses
    1. Ravie de pouvoir aider :-)
      Et oui c'est normal de tomber sur le tag look quand on clique sur beauté, c'est qu'au moment ou j'ai fait le menu j'avais pas encore bien organisé mes tags. Maintenant ils sont un peu mieux organisés mais j'ai pas encore eu le temps (enfin, la motiv) de changer le lien du menu. Mais maintenant, je me sens un peu coupable.

      Supprimer
  14. Un petit passage pour te remercier de ton super tuto, grâce a toi j'ai réussi a faire mes petit lien facebook/hellocoton!!!!
    Encore merci de nous faire partager tes découvertes:)

    RépondreSupprimer
  15. Yes!!! J'ai réussi! Je confirme, avec ton tuto même les nulles peuvent y arriver! Oh je suis heureuse! Mais j'ai encore du boulot...

    RépondreSupprimer
    Réponses
    1. héhé c'est cool de voir que ça marche aussi pour les autres :-)

      Supprimer
  16. Est ce que ça marche avec Photofiltre ? Super article ! ♥

    RépondreSupprimer
    Réponses
    1. Oh merci ^^
      Pour la partie création d'image, je ne pense pas. J'utilise pas photofiltre mais il me semble que c'est pour de la retouche photo, mais pas de la création d'image non ?
      En revanche, la partie "insérer des liens" marche avec n'importe quelle image tant qu'elle est en jpeg ou png; donc une image bidouillée sous photofiltre, pas de soucis !

      Supprimer
    2. Photofiltre fait pas mal de choses comme GIMP et merci pour ta réponse.
      Ton blog est super !

      Supprimer
  17. Bonjour

    Je suis tomber sur ce blog apré de multiple recherche pour façonner mon blog et j'ai été agréablement suprise.Fini les logiciels trop compliquer d'utilisation ou autre blabla, tes explications sont simples et je suis fier de pouvoir dire que j'ai moi même créée mon menue et autre détail que j'adore sur mon blog et ce grace à toi.Donc grand merci pour ces astuce et bonne continuation.

    RépondreSupprimer
    Réponses
    1. Merci pour ce gentil message, je suis contente de t'avoir aidée !

      Supprimer
  18. Super article c'est exactement ce que je recherchais.
    Je voulais te demander pour mettre le menu des pages tu ajoutes aussi avec un gadget htlm ?(je ne sais pas si c'est clair ^^)

    RépondreSupprimer
  19. Merci beaucoup pour ces tutos clairs et limpides! C'est tellement bien et ça a l'air tellement facile que ça m'a donné envie de lancer mon blog ;)
    Coming soon maybe!

    RépondreSupprimer
  20. Coucou,
    Merci beaucoup pour ce tuto, ça marche nickel !
    Seul bémol, j'ai un cadre vert autour de mon image (menu latérale)... Comment l'enlever ?
    Merci d'avance :)

    RépondreSupprimer
  21. Hello!
    Super ton blog, très joli en plus, j'adore tes images cliquables elles sont trop fun!!
    De plus, c'est quand même le PREMIER TUTO que je trouve sur le sujet en version SIMPLIFIEE alors franchement merci, tu m'as redonné l'espoir de looker un peu mon blog qui pour l'instant est tout pourri graphiquement parlant..

    Bon, mais voilà... J'ai un problème, que je n'arrive pas à résoudre alors je me permets de revenir vers toi:
    Je suis bloquée à l'étape html-map. Je pense avoir tout suivi jusque là (enfin il faut croire que non..) j'ai enregistré mon image en .png, hébergée sur picasa, (galéré pour) trouver le lien de l'image, et en la collant dans html map: le drame.
    J'ai un message d'erreur "image invalide", et je ne comprends pas du tout pourquoi.
    Par acquis de conscience j'ai essayé en modifiant en .jpeg, et aussi essayé sur un autre converter html (online convert), qui me trouve aussi une erreur.
    Que faire?!!! :(
    Je serais vraiment heureuse que tu m'aides, tu me sauverais la vie :)
    Merci d'avance, à bientôt

    RépondreSupprimer
  22. Bonjour,

    Merci beaucoup pour ce magnifique tutoriel, très clair et parfaitement expliqué. Je suis tombé sur votre blog par hasard et j'ai appliqué les conseils que vous prodiguez dans cet article.
    inspirationphoto-nature.blogspot.com J'ai créé moi aussi un menu cliquable.

    Bonne soirée

    RépondreSupprimer