Crée seul le logo de ton entreprise
  • Post author:

L Le logo est l’élément le plus visible de la marque. Certains sont tellement connus qu’il n’est plus nécessaire de préciser le nom de la marque.

logos mc donalds nike lacoste apple

Tu vas réaliser seul ton logo à l’aide de ce tutoriel. C’est intimidant mais nous allons rester dans des projets réalistes et je te détaille toutes les étapes.

Si tu souhaites un résultat immédiat, je te propose de créer ton logo en 25 minutes. Ce sera très simple pour faire face à l’urgence.

Des exemples de ce que tu vas pouvoir réaliser :

ombre
logo texte en arrière plan
détaché
coloré

Si tu n’as pas une idée précise de ce que tu souhaites réaliser, je te propose de commencer par ce travail préparatoire qui va t’aider à matérialiser ton idée.

Cet article prend environ 16 minutes à lire. Si tu n’as pas le temps, tu peux l’épingler sur Pinterest pour le lire plus tard.

Inkscape est un logiciel gratuit qui t'assure un logo impeccable quelle que soit sa taille.
picto articles intermediaires
Intermédiaire

La présentation d’Inkscape

Nous allons utiliser Inkscape pour réaliser ton logo. Ce logiciel gratuit permet de réaliser un logo abouti qui pourra ensuite être décliné en fonction de tes besoins.

Inkscape est un logiciel de dessin vectoriel. Pour faire simple, voici deux dessins jumeaux :

Au format PNG

dessin au format PNG

Au format SVG (vectoriel)

dessin au format SVG

La différence est flagrante lors d’un zoom à 500 %

Au format PNG

zoom PNG

Au format SVG utilisé par Inkscape (vectoriel)

zoom SVG

Ton logo sera toujours nickel quelle que soit sa taille.

Les avantages et inconvénients d’InkScape

avantages inkscape
  • Résultat impeccable et professionnel
  • Logo dimensionnable
  • Aucune restriction graphique
  • La possibilité d’importer des polices
inconvénients inkscape
  • Une phase d’apprentissage au démarrage
  • Logiciel et polices à installer sur son ordinateur

L’installation

  • Se rendre sur le site d’Inkscape
  • Onglet Télécharger
  • Cliquer sur Télécharger
inkscape télécharger
  • Sélectionner Windows (fonctionne sous Linux et Mac)
inkscape télécharger windows
  • Cliquer sur la version souhaitée (si tu ne sais pas : prends la 64)
inkscape télécharger windows version 64
  • Bouton Enregistrer le fichier
inkcape télécharger suite
  • Cliquer sur l’icône dans Mes téléchargements
inkscape icone
  • Bouton Oui pour autoriser l’installation
  • Bouton OK pour valider le Français
inkscape langue
  • Bouton Suivant
inkscape installation
  • Bouton Suivant
inkscape-installation
  • Bouton Suivant
inkscape-installation
  • Bouton Installer
inkscape installation
  • Bouton Fermer
inkscape installation
  • Fermer Inkscape

Maintenant, nous allons installer les polices du logo sur ton ordinateur.

Installer les polices

Si tu n’as pas défini de polices pour ton logo, l’article sur la sélection des polices de ta marque est fait pour toi.

  • Dézipper le fichier de ta police
google fonts installer
  • Clic droit sur le fichier (tu peux en sélectionner plusieurs)
  • Choisir Installer pour tous les utilisateurs
inkscape installer police

Si tu as déjà installé tes polices et qu’elles n’apparaissent pas dans Inkscape. Tu les désinstalles et les installes à nouveau avec la procédure ci-dessus. Je me suis arraché les cheveux sur ce problème.

Si tu en as besoin, voici un point pour récupérer les fichiers des Google fonts.

Le processus pour télécharger les polices Google Fonts

  • Aller sur Google Fonts
  • Chercher la police du titre
  • Cliquer sur le plus
google fonts police recherche
  • Recommencer pour les polices du titre et celles du texte pendant que tu y es
  • Cliquer sur le bloc en bas au centre
google fonts police panier
  • Ouvrir un fichier texte et copier le code + les CSS et le sauvegarder sous personnalisation des polices du site (cela t’évitera de refaire la manipulation)
google fonts police code
  • Télécharger les polices
google fonts telecharger
google fonts telecharger suite
google fonts telecharger suite

La préparation est finalisée. Voyons ce que ce logiciel a dans le ventre.

  • Lancer Inkscape
Inkscape interface
  • L’outil Texte et les options
    La lettre A sur le menu à gauche
Inkscape outil typo
  • Tracer un cadre bien au milieu de l’espace (tu peux viser grand)
Inkscape outil typo cadre
  • Compléter son nom de marque
Inkscape outil typo saisie
  • Sélectionner le texte
Inkscape outil typo selection
  • Déterminer la police de titre et la variante (black, italique, narrow… si la police en possède)
Inkscape police
  • Ajuster la taille de la police (viser gros pour simplifier le travail)
Inkscape police taille
  • Régler l’espacement entre les mots (1)
  • Ajuster l’interlettrage (2)
Inkscape police reglages

Espacement entre les mots :

Standard

espacement standard

– 6

espacement moins 6

+ 6

espacement plus 6

Interlettrage :

Standard

interlettrage standard

– 8

interlettrage moins 8

+ 8

interlettrage plus 8

Modifier la couleur du texte

  • Cliquer sur le rectangle de couleur à droite de fond pour définir la couleur du texte (en bas à gauche)
inkscape couleur
  • Remplir les 6 chiffres de l’HEX dans RVBA suivi de FF (pas de transparence)
couleur fond

Positionner les éléments

  • Retour dans l’espace de dessin
  • Ajouter si besoin les autres textes et les paramétrer
    Je suggère de créer un espace de texte séparé pour chacun pour disposer de plus de liberté.
  • 3 options pour aligner les éléments à l’horizontale :
    • Déplacer manuellement
    • Utiliser les options d’alignement en ayant pris soin de placer la zone de texte
    • Ajuster à l’aide de l’interlettrage
alignement

Je suggère pour le calage vertical de prendre comme point de départ une distance égale à la hauteur du plus petit texte.

  • Déplacer le texte sous le texte principal avec l’outil déplacement
inkscape déplacement
  • Placer un repère (tu places ta souris sur les règles situées sur les cotés de la zone de travail et maintient clic gauche enfoncé pendant que tu déplaces le repère)
calage vertical
  • Décaler le texte sous le repère
calage vertical

La fonction zoom est d’une grande utilité pour réaliser un travail précis.

inkscape zoom

Réaliser un fond de couleur

  • Tracer une forme étendue bien au delà du texte avec l’outil forme rectangulaire
fond couleur
  • Placer le rectangle de couleur en arrière plan
    Objet > Descendre à l’arrière plan
descendre arrière plan

Le crénage, le détail ultime pour un rendu professionnel

Je te présente le logo de l’entreprise Chanel.

logo chanel modifié avec un espacement entre les lettres identique

Quelque chose n’est pas à sa place mais quoi ?

Voici le vrai logo.

logo chanel

As-tu trouvé ce qui les différencie ?

La différence est peu perceptible au premier abord mais le second logo est indéniablement beaucoup plus harmonieux. L’espace entre les lettres (ou crénage) est parfait.

Voici les deux logos avec des guides qui aident à visualiser le crénage.

espacement lettres identique

Le premier logo présente une distance identique entre toutes les lettres.

Le logo original

espacement lettres logo oruginal

Tu remarques que la distance entre le A et le N est différente de celle entre le N et le E. Cette version nous semble pourtant parfaitement équilibrée. Le crénage idéal ne prend pas en compte la distance physique entre les lettres mais l’impression de distance.

Les points d’attention

Tu dois porter ton attention en priorité aux lettres A, K, V, W, Y, F, L, T et aux combinaisons V + A, V + T et F + une minuscule.

Je n’ai malheureusement pas de recette à appliquer pour réussir ton crénage. Tu dois te fier à ton œil. En général, deux lettres droites doivent avoir un peu plus d’espace qu’un mixte droit et rond et que des rondes ensemble.

Le crénage est l’étape finale. Il doit être réalisé en tout dernier après l’interlettrage et l’interlignage car la disposition des éléments influence la perception.

Réaliser le crénage sous Inkscape

  • Sélectionner seulement 2 lettres
  • Modifier le crénage avec l’interlettrage
Inkscape crénage

Dans cet exemple l’espace entre le u et le k paraît plus important que les autres. Je le diminue un peu.

avant crénage
apres crénage

C’est subtil mais le diable est dans les détails.

Tu vas me maudire dans un premier temps de t’avoir présenté le crénage. Je suis cependant persuadé que tu me remercieras ensuite quand tu regarderas les versions de ton logo avant et après crénage.

Finaliser le logo sous Inkscape

  • Sélectionner tous les éléments avec CTRL + A
  • Chemin > Objet en chemin
objet en chemin
  • Sélectionner une lettre qui servira de référence pour l’espacement autour du logo
  • Placer des repères autour de la lettre
repère
  • Créer un rectangle sur l’espace autour de la lettre
rectangle
repère
  • Déplacer le rectangle en haut à gauche
  • Copier-coller le rectangle et en placer un aux 3 coins restants
repère
  • Placer des repères autour du nouvel espace
  • Ajuster la taille du fond à cet emplacement si besoin avec l’outil déplacement et les poignées sur les cotés
dimensionne fond couleur

Enregistrement

Fichier > Enregistrer
Cette version servira si tu as besoin de réaliser des modifications ultérieures

  • Sélectionner tout avec CTRL + A
  • Grouper tous les éléments
    Objet > Grouper
grouper
  • Redimensionner au format final en sélectionnant PX
dimentionner sélectionner pixels
  • Cocher le cadenas pour conserver les proportions
cadenas
  • Entrer ses dimensions
    Si tu ne connais pas encore le format final, tu réalises un premier essai avec une largeur et une hauteur maximale de 250 px.

Fichier > Propriétés du document

propriétés document
  • Bouton + Redimensionner la page au contenu
redimensionner
  • Bouton Ajuster la page au dessin ou à la sélection
ajuster
  • Supprimer les cales :
    • Outil de sélection des nœuds (1)
    • Sélectionner la forme (2)
    • Outil de déplacement (3)
    • Touche Suppr du clavier
suppression cales

Fichier > Exporter au format PNG

export png
  • Bouton OK

Fichier > Enregistrer une copie

enregistrer copie
  • Sélectionner SVG Simple
    Conseil : Annoter le nom du fichier avec le format par ex motozuka-250X250
svg simple

Pour parfaire le travail, tu optimises le PNG et le SVG avec Compressor.io.

  • Glisser le fichier
compressor interface
  • Bouton Download
compressor télécharger
  • Récupérer dans téléchargement

Voici le résultat.

logo finalisé au format 250 px de large

Voici des idées pour ajouter des effets sur le texte de ton logo.

Il ne s’agit pas de tout cumuler mais de piocher un ou plusieurs effets qui renforceront l’image que tu souhaites projeter.

Donne du relief au texte de ton logo

Je te présente 10 effets pour personnaliser le texte de ton logo : découpe, ajout d’une ombre, modifier les formes, colorer, supprimer la barre du A, initiales…

Réaliser une découpe des lettres

  • Créer une barre qui dépasse du texte avec l’outil rectangle
barre
  • Régler sa hauteur dans le menu en haut de la zone de travail
réglage hauteur barre
  • Placer précisément la barre sur le texte avec l’outil de Sélection et un fort niveau de zoom
outil sélection


Les touches du pavé numérique se révèlent d’une grande aide pour déplacer des éléments.

placement barre zoom
  • Sélectionner le texte avec l’outil de Sélection
  • Maintenir la touche MAJ du clavier enfoncée et cliquer sur la barre pour sélectionner les deux éléments
sélection de 2 éléments
  • Découper avec Chemin > Différence
chemin différence
logo 1 barre

Des barres de tailles différentes peuvent créer un effet intéressant.
Dans cet exemple, j’ai utilisé des hauteurs de 3, 2 et 1 PX sur un logo de 60 px de haut espacées de 6 et 4 px.

  • Procéder une barre par une barre pour effectuer la différence
logo 3 barres

Les barres verticales fonctionnent très bien.

logo barres verticales

Réaliser une barre oblique

  • Cliquer à nouveau sur la barre avec l’outil de Sélection pour faire apparaître les flèches de rotation
fléches de rotation
  • Cliquer sur la flèche à une des extrémités et maintenir appuyé pour pivoter
logo barres obliques

Tu peux utiliser le même principe pour détacher certaines parties des lettres.

placement des formes pour détacher une partie des lettres
logo parties de lettres détachées

Utiliser d’autres formes

Nous rencontrons un problème spécifique avec les formes plus volumineuses. Il n’est pas possible dans certains cas de traiter une lettre sans affecter sa voisine.

lettre voisine affectée par la découpe

Ici l’ellipse pour arrondir le M a effacé le o.

Pour remédier à cela, nous allons vectoriser le texte. Chaque lettre sera désormais considérée comme une forme à part entière.

  • Sélectionner le texte
  • Vectoriser le texte avec Chemin > Objet en chemin
objet en chemin
  • Sélectionner la lettre et la forme avec Éditer les noeuds
outil édition des noeuds
  • Découper avec Chemin > Différence
Le rond

Créer un rond ou une ellipse avec l’outil Créer des cercles
Note : pour avoir un cercle parfait maintenir la touche CTRL du clavier et effectuer une diagonale

Les ronds de grandes tailles permettent de modifier la structure des lettres et les petits de réaliser des découpes dans les lettres.

placement des ronds de découpe
logo effets ronds

Voici ce que cela donne utilisé avec parcimonie.

logo effet découpe rond léger
Le cercle
  • Réaliser un rond
  • Placer des guides sur la croix au centre qui apparait quand la forme est sélectionnée pour faciliter le travail de superposition
  • Dupliquer en copiant-collant
  • Diminuer légèrement la taille du second
  • Superposer les croix des 2 ronds
supperposer 2 ronds
  • Sélectionner les 2
  • Opérer la découpe avec Chemin > Différence
cercle

Il ne faut pas hésiter à multiplier les cercles pour obtenir un effet.

multiplier les cercles de découpe
logo découpe cercles
logo découpe cercle variante
Triangles, étoiles, polygones

L’outil Étoiles est très flexible et va nous permettre de multiplier les formes en modifiant des réglages.

outil étoiles
  • Tracer une forme

Pour la transformer en triangle :

réglages étoiles

– Sommets : 3
– Ratio des rayons : 0,5

triangle
triangles placement
logo découpe triangle

Pour la transformer en étoile :

– Sommets : 5
– Ratio des rayons : 0,5

logo découpe étoiles

Modifier la forme des lettres

  • Sélectionner le bloc texte
  • Vectoriser les lettres avec Chemin > Objet en chemin
  • Outil Édition de nœuds
outil édition des noeuds
  • Cliquer sur une lettre

Tu découvres les points d’ancrages qui construisent cette lettre.

point ancrages lettre vectorisée

Tu peux déplacer les points d’ancrages en les sélectionnant et en conservant le bouton appuyé.
Tu peux également agir sur la forme du tracé en déplaçant les bords.

Rallonger certaines parties de lettres

  • Poser deux guides de chaque coté de la partie de lettre à allonger
  • Ajouter un troisième guide à la longueur souhaitée
  • Déplacer les points d’ancrages sur ces nouveaux repères avec l’outil Éditer les nœuds
outil édition des noeuds
déplacer un point d'ancrage

Le résultat

logo lettres allongées

Modifier les points des i

Changer la couleur

  • Vectoriser le texte avec Chemin > Objet en chemin
  • Cliquer sur l’outil de Remplissage
inkscape remplissage
  • Cliquer sur le point du i
sélection point
  • Cliquer sur fond pour définir une couleur
colorer le point du i

Changer la forme

  • Poser des guides autour du point pour faciliter le placement de l’élément qui le remplacera
guides
  • Cliquer sur le point avec Éditer les nœuds
  • Cliquer sur chacun des nœuds qui constituent le point
  • Retirer avec Supprimer les nœuds sélectionnés
supprimer le pointdu i
supprimer le point du i suite

Remplacer le point

  • Placer des repères autour du point
  • Supprimer le point
  • Créer une forme et la dimensionner dans l’espace occupé par le point

– Un astérisque

logo replacer le point du i par un astérisque

– Un carré

logo remplacer le point du i par un carré

– Une spirale

point i spirale

– Une étoile…

point i étoile

Colorer partiellement les lettres

  • Vectoriser la police avec Chemin > Objet en Chemin
  • Copier-coller la lettre à colorier
dupliquer une lettre
  • Superposer les deux lettres avec l’outil de Sélection
  • Déformer en déplaçant ou supprimant des points d’ancrages
déformer une lettre
déformer une lettre
déformer une lettre

Tu peux régler l’opacité dans la fenêtre Fond et contour pour avoir un résultat moins tranché.

réduire opacité
logo colorer une partie du logo

Barre de séparation

  • Ajouter un i majuscule
  • Déformer la lettre si besoin en déplaçant les points d’ancrages
logo séparation avec i

Autre option : tracer une barre

logo séparation avec une barre

Initiales

  • Vectoriser la police avec Chemin > Objet en Chemin
  • Sélectionner la lettre à dupliquer avec Éditer les nœuds
  • Copier-Coller
  • Positionner avec l’outil Sélectionner
positionner carré
logo monogramme

Extension à la verticale

  • Ajouter le texte de l’extension dans une zone à part
  • Cliquer deux fois sur la zone de texte avec l’outil sélection pour faire apparaitre les outils de rotation
  • Effectuer une rotation
rotation du texte
  • Ajuster la taille en cliquant une nouvelle fois sur la zone de texte pour faire apparaître les poignées de dimensionnement
    Note : bien activer le cadenas pour ne pas déformer la police
logo extension à la verticale

Superposition

Pour superposer deux textes, il faut créer deux zones de texte indépendantes.

  • Passer les textes en arrière plan avec Objet > Descendre à l’arrière plan
descendre à l'arriere plan
logo texte arrière plan

Ombre

Si l’ombre n’est pas un vrai plus pour ton logo, il est préférable de s’abstenir.

  • Sélectionner le texte
  • Filtre > Ombres et lueurs > Ombre portée
ombre portée
  • Faire des essais en cochant Aperçu en direct
ombre réglages

Dans cet exemple :
– Rayon du flou : 2
– Décalage horizontal : 3
– Décalage vertical : 2

Dans l’onglet Couleur du flou
A (transparence) : 70

  • Bouton Appliquer
logo ombre

Ombre manuelle

  • Copier-coller le texte
  • Passer en gris ou en noir
  • Diminuer l’opacité à 30%
  • Superposer
  • Décaler très légèrement en bas à droite
  • Passer en arrière plan
logo ombre manuelle

Sur le même principe, tu peux obtenir un effet graphique en prenant deux couleurs contrastées utilisées à 100%.

logo ombre manuelle forte

Supprimer la barre du A

Cet effet est souvent observé dans les logos.

  • Cliquer sur la lettre avec Édition de nœuds
4 points ancrage barre A
  • Placer deux guides sur la pointe du A
points ancrage a
  • Supprimer les points d’ancrage du triangle du A un par un en cliquant sur le point puis sur Supprimer les nœuds sélectionnés
supprimer noeud
  • Supprimer un des points qui restent sous la barre
bas de la lettre a
  • Déplacer le point restant en haut sur la croix des guides

Ta lettre doit probablement avoir une drôle de forme. Tu observes des traits avec un rond au bout reliés au points d’ancrage. Il s’agit des poignées de nœuds qui indiquent l’incurvation de la courbe.

outil sélection noeud
  • Déplacer les poignées de nœud en direction du point d’ancrage opposé pour obtenir une droite
déplacement de la poignée
logo supprimer la barre du a

Le texte de ton logo offre de nombreuses possibilités de personnalisation. Inkscape permet absolument toutes les fantaisies.

L’erreur est souvent de vouloir trop en faire. Se limiter à deux effets me semble une bonne option pour ne pas diluer la force de l’idée.

Par quel effet vas-tu commencer ?

Ton logo doit vivre et s’adapter en fonction des situations. Un logo en longueur sera, par exemple, peu approprié pour le visuel de ton profil Twitter.

logo inadapté pour le profil Twitter

Adapte ton logo en fonction des usages

Je te présente des idées de déclinaisons graphiques de ton logo en fonction des usages.

Réalise les déclinaisons de ton logo à l'aide d'exemples concrets. #logo

Le logo principal

Ce logo est celui que tu privilégies. Il accompagne la majorité de tes créations et publications. Tes clients et lecteurs l’identifient facilement.

logo principal

Je présume que tu disposes déjà de ce logo si tu consultes cet article.

Ton logo est souple d’utilisation. Il s’adapte déjà à la majorité des besoins sans modifications.

Les variations communes

Toutes ces déclinaisons ne sont pas nécessaires. Tu compléteras ton portefeuille de logos au fur et à mesure de tes besoins.

Pour débuter, je commencerais avec mon logo principal adapté pour une parfaite lisibilité sur les fonds clair et foncé, la version carrée pour les réseaux sociaux et le favicon.

Le profil des réseaux sociaux

Tu peux utiliser ton logo comme image de profil sur les réseaux sociaux.

Il s’agit de présenter en un espace très restreint ton logo. Les marques courtes sont avantagées.

Une solution naturelle est d’isoler le symbole de ton logo

icône

ou d’utiliser une version condensée.

logo condensé

Si ton logo comporte uniquement du texte, les initiales ou un monogramme fonctionnent parfaitement.

monogramme
monogramme plus sophistiqué

Pour éviter de multiplier les formats, tu insères ton logo dans un cercle et sauvegarde au format carré.

calage pour les réseaux sociaux

Je te renvoie à l’article du Blog du modérateur pour découvrir tous les formats des images sur les réseaux sociaux.

Le favicon

Il s’agit de l’icône dans les onglets des navigateurs. Tu ne disposes que de quelques millimètres pour t’exprimer.

Ton visuel pour les réseaux sociaux devrait être adapté mais nécessitera éventuellement une simplification pour être parfaitement lisible.

Le résultat à taille réelle

favicon

Comme tu le vois, j’ai simplifié au maximum le logo. La bordure blanche ne se voit pas à taille réelle mais accentue la démarcation du M.

favicon en grand format

Note : ton favicon peut apparaître sur un onglet foncé en fonction des navigateurs. Un fond de couleur t’assurera une visibilité en toutes circonstances.

Avec accroche

Ce logo est particulièrement indiqué pour figurer sur la page d’accueil de ton site.

logo complet

L’accroche permet au visiteur de comprendre immédiatement ton activité. Elle confirme à ton lecteur qu’il trouvera ce qu’il est venu chercher.

Le plus simple est de résumer ta proposition unique de vente en quelques mots.

Simplifiée

Quand ton document est déjà très chargé, la version minimaliste évite la saturation.

logo en version simplifiée

Cette version trouve naturellement sa place dans les signatures d’e-mails qui comportent de nombreux éléments.

Monochromes

Cette version est de moins en moins utilisée avec la généralisation de la couleur sur tous les supports.

Les objets publicitaires comportent encore des tarifications en fonction du nombre de couleurs.

Le mieux est de partir de la version simplifiée de ton logo. Les visuels sophistiqués passent mal.

Tu penses naturellement à une version en noir ou blanc.

noir sur fond blanc
déclianison blanc et noir

Je préfère une version en teintes de gris qui retranscrit mieux le rouge initial.

monochrome gris sur fond blanc

Déclinaisons des couleurs et des fonds

Ces versions t’assurent un rendu harmonieux en fonction de l’environnement.

Fond clair

La très grande majorité des logos fonctionnent avec un arrière plan blanc mais cela peut vite jurer avec d’autres associations de couleurs.

logo inadapté sur fond de couleur clair

Un fond de couleur neutre résout ce problème.

Le blanc se marie parfaitement avec l’ensemble des couleurs.

logo avec un masque blanc sur fond clair

Tu peux ajouter un peu de transparence pour une meilleure intégration.

déclinaison avec un masque blanc transparent

C’est subtil. Je te l’accorde. Mais je préfère nettement cette version.

Fond foncé

Ton logo peut vite perdre en lisibilité s’il a été pensé pour un fond blanc.

probleme d'intégration du logo sur un fond foncé

La solution avec un fond blanc est également adaptée dans ce cas.

masque blanc sous le logo sur un fond foncé

Le semi-transparent conserve son efficacité.

fond foncé masque transparent

Tu peux également envisager de passer ton texte en blanc.

fond foncé passe le texte en blanc

Une légère transparence s’envisage dans ce cas également mais peut dénaturer ton logo.

ajout de transparence au texte

Ta palette de couleurs

Nous allons jouer avec la palette de couleur de ta marque pour ajouter des versions de logos. Ce n’est pas indispensable mais apporte de la variété.

Tu peux les utiliser pour différentier les activités de ton entreprise : pro et particulier…

Voici le résultat pour les 3 couleurs de la palette de MotoZuKa. J’ai ajouté le texte blanc qui donne de bons résultats.

association beige kaki
beige rouge
blanc et beige
blanc et kaki
blanc sur fond rouge
kaki et beige

Toutes les versions ne seront pas utilisables. Attention aux yeux !

kaki sur fond rouge

Les formats spéciaux

Les bannières publicitaires, cartes de visites, les photos de couverture des réseaux sociaux… imposent des formats spécifiques qui peuvent t’obliger à caser ton logo dans des emplacements limités.

Large

Tu positionnes tous les éléments sur une ligne.

Mon exemple ne convient pas. Je vais prendre le logo du site.

version standard du logo sur 2 niveaux

Voici la version allongée.

transformation au format alongé

Haut

Il s’agit de découper ton texte.

logo en hauteur

J’ai choisi une justification à gauche. La différence de taille de mes lettres ne permettaient pas un alignement sur les 2 cotés.

J’ai ajouté un espace simple entre Mo et to et doublé celui-ci avec Zu et Ka pour ne pas dénaturer le rythme de lecture.

Compact

Une version condensée se faufile dans les espaces les plus réduits.

Tu peux réduire au maximum l’interlettrage et jouer sur la taille de certaines lettres.

logo condensé au maximum

Le positionnement sur plusieurs lignes est à envisager.

condensé décliné sur 2 lignes

L’exercice peut se révéler périlleux. Un espacement trop restreint altère la lisibilité. Un fort contraste entre le texte et l’arrière plan facilite la lecture sur les petites tailles.

Animé

Tu peux passer ton logo au stade supérieur avec une version animée.

Ton logo attire immédiatement l’attention sur ton site même sur des petits formats. Il prendra tout son intérêt pour la vidéo.

logo animé

J’ai utilisé Clipmaker de Panzoid. Cet outil nécessitera un article à part entière. Ezgif assure le passage en GIF et l’optimisation.

Conclusion

Tu disposes désormais de ton logo. Tu l’as décliné en fonction de tes besoins : réseaux sociaux, en version noir et blanc…

C’est une énorme étape au niveau de l’identité graphique de ta marque.

Découvre comment créer seul ton logo à l'aide d'un logiciel professionnel gratuit. Cliquez pour tweeter

N’hésites pas à m’adresser ton chef-d’œuvre et à partager avec tous ceux qui cherchent à créer leur site ou leur entreprise. Les lecteurs heureux sont mes principaux ambassadeurs pour faire connaître ce site.

signature de Jean du site pour pas un rond

Ces articles devraient t’intéresser :

Retrouve tous les tutoriels pour Créer ta marque

bannière pour l'inscription à la newsletter

Ressources

Un article agréablement illustré qui retrace toutes les étapes à prendre en compte avant de se lancer dans le création de son logo : Créer un logo d’entreprise.

Les tutoriels dédiés à Inkscape

Inscape propose des tutoriels pour apprendre à bien manier l’outil.

Les fiches du Lycée du Menée sont détaillées et accessibles. Le mémento qui synthétise toutes les fonctions sur 2 pages est à imprimer et à garder sous la main.

Imppao propose de nombreuses vidéos consacrées à Inkscape. Je recommande celle sur la réalisation d’un logo (commence à 4’40). Elle présente de bonnes pratiques mais le niveau est plutôt avancé.

Damien Albiser présente un tutoriel pour un logo simple qui permet de découvrir les outils.

portrait jean lochet fondateur pourpasunrond.fr  1

Jean

Fondateur, auteur et homme à tout faire

J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

Cet article a 6 commentaires

  1. Michel Pinosa

    Bravo pour ce tuto !
    Je me permet de partager un outil en ligne gratuit qui permet de tester un logo une fois créé..
    https://logolab.app/lab
    Il suffit d’uploader ton logo (en png ou svg), et les résultats de test apparaissent.
    Version en niveaux de gris, accessibilité, équilibre, comportement à différentes tailles, mise en situation avec d’autres logos, ou sous forme de l’icône d’un application smartphone.
    Ce test permet de prendre du recul, et de corriger des points de détail, comme le contraste, la taille des éléments ou le choix des couleurs.
    J’espère que ce partage sera utile 😉

    1. Jean

      Je te remercie de ton partage. Je ne connaissait pas ce site qui permet de tester facilement son logo. C’est facile d’utilisation et rend un excellent service.
      Je l’intégrerai lors de la refonte de l’article.

  2. Rémi

    Bonjour,

    Super logiciel et merci pour les explications.
    Cependant je galère pour obtenir un logo net en png. Effectivement en vectoriel c’est toujours net. Par contre quand j’ouvre le .png (exporté d’Inkscape) c’est flou et pixelisé même sans zoomer (image a 50 pixels qui correspond à la taille de l’image que je veux au final sous WP). Avez vous une idée?

    Merci

    1. Jean

      Bonjour Remi,

      Je te confirme. Ce n’est absolument pas normal. Ton ficher en PNG devrait être parfaitement net.

      Il doit probablement s’agir d’un problème de dimensionnement de ton fichier en amont qui ne correspond pas à la taille de ton export.

      Regarde bien les dimensions que tu as défini pour ton fichier dans Inkscape.

      L’avantage c’est que tu peux les changer à volonté sans aucune perte de qualité.

      Sélectionne tous tes éléments
      Sélectionne le cadenas
      Trouve Px dans le menu déroulant
      Indique tes dimensions finales

      A bientôt,
      Jean

  3. zahra

    Merci infiniment Jean pour ce tutoriel excellent comme toujours je suis entrain d’essayer d’améliorer mon logo si j’y arrive je t’envois le résultat par mail.

    zahra

    http://www.astucesetmerveilles.fr

    1. Jean

      Bonjour Zahra,

      Je suis impatient de contempler le résultat.

      A bientôt

Laisser un commentaire