TUTOS   DIY   COUTURE   WEB   DÉCO   LIFE   LOVE   CONTACT

11 mai 2013

Blogdesign pour les nuls (tuto) : créer un logo vectorisé pour son blog



Après avoir crée un menu personnalisé, ajouté le logo pinterest sur ses images, inséré une signature automatique dans ses messages blogger... Maintenant on passe à la vitesse supérieure et on se crée un beau logo vectorisé pour son blog.

(Je précise encore une fois que je ne suis ni graphiste ni rien du tout dans le genre, je vous donne juste mes trucs que j'ai trouvés en mettant les mains dans le cambouis, avec des logiciels libres, qui fonctionnent sur TOUS les systèmes d'exploitation. Et des astuces qui ne demandent pas un ordinateur surmégapowerful de la mort)

Tout d'abord, avoir un logo, c'est HYPER important, parce que ça crée une identité visuelle au blog, ça permets à vos lecteurs de vous recconnaître en un coup d'oeil sur les différents réseaux sociaux, bref, c'est un peu votre signature numérique. D’où l'importance d'en avoir un potable et de ne pas en changer trop souvent aussi ( vous remarquerez que je suis un excellent exemple des choses à ne pas faire)

Souvent, on crée un logo peu de temps après avoir crée son blog, parce qu'il en "faut" un pour une raison ou une autre. Et puis on le fait dans une taille standard, on l'utilise pour plein de choses et de sites différents, il est redimensionné, retaillé, exporté et compagnie, bref, il prend cher et au bout du compte il ressemble plus à grand-chose, et je trouve ça très très triste.

Mais comme une fois de plus je suis là pour vous sauver la vie (ouais je sais y'à des jours on pourrait un peu m’appeler jésus) on va tout recommencer à zéro et se faire un beau logo propre et qui pourra être utilisé à des fins diverses et variées en restant toujours aussi beau (pas comme vous et moi ahahahahaha) (Je dis ça parce que je viens d'aller courir et que après ma session running j'aurais bien besoin d'une vectorisation) ( Vous comprendez la blague après avoir lu l'article)

Quelques pistes auxquelles réfléchir avant de créer son logo

- Il doit être lisible : si vous mettez du texte (le nom de votre blog par exemple) n'en mettez que très peu pour pouvoir le mettre en grand, pour qu'il soit lisible même en petit. Ou n'en mettez pas du tout : si vous trouver un motif, un dessin qui représente suffisamment votre identité, mettre du texte n'est pas forcément nécessaire.

- Comme pour le design de votre blog, fixez vous à une palette de couleurs restreinte, et évidemment, la même que votre blog : le logo, c'est sa "photo d'identité" et elle doit le représenter. 

- N'en faites pas trop : pas la peine de mettre 807 effets sur une image de la taille d'un timbre poste...

C'est quoi une image vectorielle ?

Pour vectoriser une image il vous faut deux logiciels : Gimp pour créer l'image, et Inkscape pour la vectoriser. Il en existe bien sûr d'autres, mais ceux-là sont gratuits, libres de droits, performants et surtout, je sais les utiliser...

Comme je l'ai précédemment expliqué dans ma première leçon de Blogdesign pour les fauchées (et les nulles), une image vectorisée peut être redimensionnée sans perte de qualité:

image jpeg
Même image vectorisée


même image vectorisée et agrandie beaucoup



Je vais aller un peu plus loin , parce que je me dis que ça vous intéresse de savoir comment ça fontionne... Mais vous n'êtes pas obligées de lire ce passage si vous avez la flemme et vous pouvez passer directement à l'étape bidouillage alias Etape 1 : créer son logo.
Donc : une image vectorisée est une image qui est convertie en chemins et non pas comme une image en un seul bloc; cela permet donc de l'agrandir sans avoir des pixels supers moches de partout.
Cependant, votre image vectorisée ne pourras pas être utilisée "telle quelle" dans votre blog, en photo de profil... Car la plupart des sites n'acceptent que les formats d'images standards.
Une fois convertie en svg (le format des images vectorisées) vous devrez d'abord la ré-ouvrir avec un logiciel tel que Gimp, puis choisir la taille à laquelle vous souhaitez que soit votre image, avant de l'exporter vers un format d'image classique.
Ça peut paraître rébarbatif dit comme ça, mais en fait ça a d'énormes avantages :

-  vous avez votre logo propre, que vous pouvez utiliser comme vous le voulez, dans la taille que vous voulez.
- Vous n'avez pas besoin de stocker sur votre disque dur votre logo en 58 tailles et format différents et si l'envie vous prend de le modifier, c'est possible de le faire sans recommencer à zéro, grâce à Inkscape qui vous permets d'éditer les chemins de votre image.
- Si vous utilisez des images importées dans votre logo, que vous avez elles aussi redimensionné etc, ça permet de "lisser" l'ensemble pour avoir un rendu bien propre. 

Voilà un exemple avec une image de tasse que j'ai dessinée très très à l'arrache sous gimp :
Les traits sont très fins, hypra pixelisés, pas du tout lisses...


Et voilà maintenant la même image, juste vectorisée... Vachement mieux, non ?
Et encore... La j'ai simplement vectorisé, pas de prise de tête ni de retouches. Mais en éditant les chemins par la suite on peut arriver à un résultat beaucoup plus beau et complètement lisse (mais je n'aime pas les choses trop lisses)


Voilà, vous ne savez pas tout, mais en tout cas vous en savez autant que moi, donc on se lance !

1. Créer son logo

Je vous montre un exemple avec un logo assez simple, pas trop de couleurs, sans effets de matière etc, pour que vous puissiez vous familiariser avec la vectorisation et les réglages.

Ouvrez Gimp, et créez une nouvelle image assez grande dès le départ (plus l'image de base est grande, meilleure sera la vectorisation)
Pour l'exemple j'ai fait une image carrée de 500px de côté. Faites des formes, un fond de couleurs, rajoutez du texte... Bref faites comme vous le sentez. Si vous ne maîtrisez pas encore trop bien Gimp, allez voir le tuto pour créer un menu personnalisé, j'explique dedans comment faire ses premiers pas sous Gimp !

(Cliquez sur les images pour les voir en grand, c'est mieux quoi)



2. Exporter le logo

Une fois que votre logo est terminé et qu'il vous plaît, exportez le dans un format d'image comme le jpeg ou le png.
Sous Gimp: Fichier > exporter > choisir le format dans la liste > puis cliquer "ok" ou "exporter" dès qu'on vous le demande.

3. Vectoriser le logo ( où nous passons aux choses sérieuses)

Ouvrez Inkscape, et ouvrez dedans l'image que vous venez de créer. (Fichier > ouvrir) Si on vous pose la question "Lier ou incorporer" choisissez "incorporer".

Pour l'instant, l'image est encore en jpeg (ou autre) et si on zoome on peut voir que l'agrandissement de l'image ne se passe pas super bien :


Mais on va arranger ça !

Réduisez le zoom de votre image, et avec l'outil flèche, cliquez (une seule fois) sur votre image pour la sélectionner. Cette étape est simple comme bonjour mais indisensable ! Si vous ne cliquez pas sur l'image, inkscape vectorisera... du vide. Rien, quoi.



Allez maintenant dans le menu Chemin (en haut, à côté de fichier, édition, calques ETC...) et cliquez sur chemin > Vectoriser le bitmap.
Une fenêtre s'ouvre; c'est là que nous allons faire nos réglages afin de vectoriser notre logo.

- Tout d'abord, dans la partie "Passes multiples : créer un groupe de chemins" Cliquez sur "couleurs" (ET OUI parce que notre image est en couleurs. Pour une image en noir et blanc, restez dans la partie "passes simples"

- Choisissez le nombre de passes : plus le nombre est élevé, plus l'image sera précise, mais plus votre ordi va devoir bosser. De plus, choisir un grand nombre de passes pour une image "simple" n'est pas nécessairement une bonne idée. Bidouillez, cliquez, modifier et voyez ce que ça donne !

- Décochez la case "adoucir les contours"  (personnellement ça ne réussit jamais à mes images) mais libre à vous de la recocher ensuite si vous trouvez ça mieux dans l'aperçu.

- Pour voir ce que ça donne, justement, cliquez sur "mettre à jour" pour avoir un aperçu de votre image vectorisée. Si vous faites des modifs aux réglages, recliquez sur "mettre à jour" pour voir l'effet de ces changements.

Si rien ne s'affiche, c'est que votre image n'est pas sélectionnée (flèche noire > clic sur l'image)



- Quand vous êtes prêtes, cliquez sur "valider" pour vectoriser votre image. Ca peut être immédiat ou prendre un certain temps, tout dépend de votre ordinateur , de votre image de base, de vos réglages...

- Fermez ensuite la boîte de dialogue des chemins (Oui, quand votre image est vectorisée, vous avez l'impression qu'il ne s'est rien passé, c'est normal)

- Cliquez sur votre image maintenant vectorisée et déplacez là. Vous verrez qu'il y a toujours en dessous votre "ancienne" image ; vous pouvez l'enlever (un bon vieux ctrl X fera l'affaire)



- Remettez votre nouvelle image en place, et zoomez pour voir la différence...



3. Retoucher l'image vectorisée

Cette étape est bien sûr facultative mais elle permet d'obtenir un résultat vraiment impeccable (surtout si votre image contient beaucoup de couleurs ou de détails) et puis ça permets de voir comment la vectorisation fonctionne.

On va éditer les chemins de notre image vectorisée pour les modifier. Par exemple, j'ai légèrement agrandi le cercle du logo.

- Cliquez sur la flèche avec les chemins pour sélectionner l'outil chemins, puis cliquez sur votre image pour éditer les chemins :


- Maintenant, déplacez les chemins : 


4. Enregistrer l'image

Une fois que votre logo est tout beau comme vous le voulez, il vous faut l'enregister en .SVG . Pour cela, sous Inkscape, faites Fichier > Enregistrer sous Puis choisissez le format ".SVG" (simple ou svg inkscape, peu importe)

5. Utiliser l'image

Bon, vous avez votre logo vectorisé, et vous voulez le mettre sur votre blog. Pour cela, ouvrez Gimp et ouvrez votre fichier .svg. Une fenêtre s'affiche, vous demendant de choisir la taille de votre image. C'est là qu'on se rend compte que le svg c'est tip-top : vous pouvez ouvrir votre image dans la taille que vous voulez, même super super grande, et elle sera toujours en super qualité !
Une fois votre image ouverte dans Gimp à la bonne taille, il ne vous reste plus qu'à l'exporter en jpeg ou autre, et à la mettre sur votre blog.


Et voilà ... Au boulot maintenant !








16 commentaires:

  1. merci pour tes conseils !

    RépondreSupprimer
  2. Alors ça c'est génial !! ça fait mille ans que j'attends qu'on m'explique clairement ça !!!! MERCI je vais refaire tout mes logos, cette après-midi !!!!

    RépondreSupprimer
  3. Merci! Je vais m'y mettre de ce pas car j'ai justement de sérieuses lacunes avec mes logos!!! Et bravo pour ton blog, je ne le connaissais pas auparavant, c'est juste ce que j'aime.

    RépondreSupprimer
  4. C'est superbe !! Mais je n'ai pas le courage de m'y mettre... j'aurais bien utilisé ce tuto néanmoins pour me faire des images de catégories, mais je n'ai pas assez d'imagination ^^

    en tout cas j'aime vraiment ton blog <3


    lyl

    RépondreSupprimer
  5. Bon c'est décidé je finis mes partiels et je lis l'ensemble de tes tuto pour blog popur que le mien ressemble enfin à quelque chose!

    RépondreSupprimer
  6. merci beaucoup! c'est vrai que ça change tout quand-même!
    en plus, je suis justement en train de créer un nouveau blog pour mon activité pro... c'est sure que ça fait beaucoup plus pro, tout de suite! :)

    RépondreSupprimer
  7. J'ai un petit problème une fois le logo vectorisé enregistrer en svg, quand j’essaye de l'ouvrir dans gimp aucune image ne s'ouvre juste un font transparent que faire ?

    RépondreSupprimer
  8. Merci trop cool tes explications
    je reviens quand j'ai trouver une image
    Abientot

    RépondreSupprimer
  9. Mon dieu j'ai trouvé le graal en tombant sur ton blog ! Je viens de créer mon premier blog sur blogger et j'essaie de lui trouver un "look" un peu identitaire, je suis passé du total violet ou gris et vert et aujourd'hui ou turquoise/rose/blanc/gris 'chais pas quoi donc c'est pas la joie. J'ai crée un logo en trouvant ton article et je vais le vectoriser au plus vite, tout comme mon header qui est juste horrible en l'état actuel ! Je vais aussi suivre ton tuto pour faire un menu en image style ruban <3. Bref, je t'aime.

    RépondreSupprimer
  10. Merci pour tous ces conseil je crois avoir trouvé le blog parfait qui comprend enfin les blogueuses qui ne sont pas expertes en matière de blog ou de design je suis sous wordpress mais c'est pas grave tes conseils me sont tout de même super précieux merci à toi mille fois

    RépondreSupprimer
  11. Tes conseils sont géniaux, vraiment, merci beaucoup !!

    RépondreSupprimer
  12. Super ce post! Merci beaucoup! En revanche, j'ai réussi pour un logo mais pour un autre quand je le vectorise dans inskcape il me change la police! Trop bizarre, pas encore trouvé la solution :(

    RépondreSupprimer
  13. Bravo pour ce Tuto.
    Par contre, à la fin, les contours du logo sont trop net ; il y a un effet de pixellisation ou d'escalier. Comment peut-on adoucir ça avec Gimp pour obtenir un logo vraiment Pro ?

    RépondreSupprimer
  14. Bonjour,

    J'ai un problème avec GIMP et sur la doc je ne trouve rien du tout, mais du coup mon ordinateur marche avec Windows 8.1 et quand je veux mettre du texte dans les photos, ça se voit pas. J'ai beau changer la taille de la police, la couleur, agrandir la zone de texte, il n'y a RIEN. Je sais pas quoi, je re-installe? Merci beaucoup pour ce tutoriel, à bientôt!

    RépondreSupprimer
    Réponses
    1. Est ce que tu écrit ton texte sur le bon calque, ou est ce que le calque sur lequel tu écrit ton texte est bien au dessus des autres ? Si tu galères un peu avec les calques cet article t'aideras : http://docs.gimp.org/fr/gimp-dialogs-structure.html

      Supprimer
  15. Bonjour et grand merci pour ce blog merveilleusement merveilleux ! J'ai une question, pourquoi aller sur Gimp ? Pourquoi ne pas tout créer sur Inkscape ? Merci !

    RépondreSupprimer