Tutorial illustrator: comment faire un bon gros logo web 2.0 qui tache

Les tutoriels illustrator sont rares sur le web, aujourd'hui je vous en ai concocté un pour faire un logo dans le plus pur style web2.0 qui claque, avec les règles à respecter pour ne pas faire fausse route.

logopourri_001.jpglogopourri_002.jpg

Vous savez à quel point j'aime cette mode actuelle dans le logo qui consiste à faire un logo vide de sens et le moins déclinable possible ? Et bien devant l'invasion, je vais vous apprendre comment en réaliser un, pour ne pas que vous ratiez le train du web2.0 et que vous soyez tout démunis quand des caïds2.0 vous souffleront les contrats2.0 sous votre nez1.0.

Comme toute discipline ancestrale, la création de logo web2.0 se repose sur des préceptes2.0 fondamentaux que l'on ne peut ignorer:

  1. Du brief aucun compte tu ne tiendras
  2. Aucun conseil conceptuel au client tu ne donneras
  3. La sémantique totalement tu négligeras
  4. En RVB, ton espace colorimétrique tu définiras
  5. Des formes bateau et vides de sens toujours tu emploieras
  6. débauche de reflets, reliefs et dégradés tu ajouteras
  7. Le nom de marque avec une typo bâton dafont en majuscule et en deux couleurs minimum tu écriras
  8. Le fond autant que le logo tu peaufineras
  9. Aucun test de lisibilité ou de monochromie tu ne réaliseras
  10. Toutes les modifs sans discuter tu exécuteras

En plus de ces règles vient s'en ajouter une autre, plus discutable:
Le vrai puriste du logo web2.0, celui qui sévit sur les forums et les plateformes discount, vous dira qu'un vrai bon logo2.0, ça ne peut se faire que sur photoshop, et que faire son logo sur un autre logiciel est une hérésie. Certains esprits chagrins rétorqueront que si le "spécialiste" tiens ce discours, c'est qu'il a cracké trouvé photoshop dans une pochette surprise et ne fait pas la différence entre word et illustrator, logiciel que par ailleurs il n'a jamais ouvert et dont il ne sait pas se servir, vu que les tutos aqua, y'en pas des masses sur ce soft.
Mais voilà que de viles médisances, si le "professionnel" utilise photoshop, c'est parceque "de toutes façons, tu mets 300dpi et c'est bon". Voilà qui est dit.

Je tenais à ce que les choses soient claires, même si l'utilisation d'illustrator est une hérésie pour un logo (aïe oO' ), je m'en excuse et je vais quand même effectuer mon tutorial en me basant sur ce logiciel. :HONTE:

à partir de maintenant, c'est très simple, il faut respecter à la lettre les préceptes des anciens.

Étape 1

Ignorons totalement le brief, un brief ça fait rien qu'à brider notre créativité2.0, nous on a pas besoin de réfléchir, on peut commencer directement grâce à notre méthode secrète2.0. Même si le client demande quelque chose d'aberrant et d'injustifié, genre un raton laveur pour un site de vidéo (je dis n'importe quoi ;-) ), pas la peine d'en discuter avec lui, de toutes façons au final rien ne correspondra, et notre boulot c'est de créer, pas de donner notre avis.

Notre devise: "le client est roi".

Étape 2

fichier >nouveau document, n'oublions surtout pas de régler le mode colorimétrique sur RVB, sinon les couleurs seront toutes ternes et on ne pourra pas taper dans les gammes flashy.

Étape 3

Maintenant que nous nous sommes vidés la tête de toute considérations d'ordre conceptuel et que nous avons préparé notre plan de travail, nous pouvons commencer à vraiment travailler. Trouvons une forme passe partout, à la mode, et qui ne veut rien dire, le cercle est un bon exemple, mais il existe des formes un peu plus exotiques, comme le triangle à bords arrondis, les lettres en défonce sur une forme basique, ou encore les formes composées par 2 formes, que vous aurez trouvés au pif en jouant avec le pathfinder. Appliquez à cette forme une couleur flashy bien sympa: bleu pétrole, orange vif, vert anis.

Étape 4

Une fois la forme sélectionnée, nous allons nous employer à ajouter une tonne d'effet. La clef du succès se situe dans cette étape. Si vous ratez ça, votre logo ne sera pas vraiment web2.0 et ne fonctionnera pas.

Voici les effets à ajouter systématiquement:

  • Des ombres
  • Des lumières
  • Des dégradés
  • Des contours progressifs
  • éventuellement une ombre portée ou une lueur externe, pour rester dans la subtilité

Le but de l'opération est d'obtenir le Saint Graal2.0 des logos web2.0, j'ai nommé: l'effet aqua, ou jelly. Un logo web2.0 sans effet aqua, c'est comme un site de t-shirts sans concours bidons, ça perd toute raison d'être. Le fait que dans illustrator, les effets soient rendus pixellisés ne doit pas vous freiner, le principal, c'est que ce soit aqua !

Pour travailler les effets, il convient de zoomer un maximum, style 600%, comme ça chaque raie de lumière, chaque ombre subtile, chaque variation minime de teinte est sublimée, on en profite un maximum.

voilà un petit schéma explicatif de la manière de procéder:

tutologo_001.jpg

Étape 5

Maintenant que le plus gros du boulot est fait, on peut chercher une typo convenable sur Dafont. Le choix de la typo est loin d'être essentiel pour un logo2.0, n'importe quelle typo sans-serif classée dans le top10 fera l'affaire (même si il y a écrit "pour un usage non commercial seulement", on la trafiquera un peu et ça ira).
Écrivons maintenant le nom de la marque en majuscule, parce-que les majuscules, c'est plus la classe. Maintenant que c'est fait, il faut trouver une césure intelligente au nom de la marque pour qu'on puisse appliquer 2 couleurs différentes aux deux parties du mot. Évidemment on ajoute ensuite l'effet aqua d'usage. Si une césure intelligente n'est pas envisageable, faites-en une quand même, sinon votre logo sera désespérément web1.0.

Note: pour le texte, des effets style "focus/flou" sur la typo sont aussi tolérés.

Tant qu'on en est à parler du texte, on peut parler de l'importance énorme de la baseline: une baseline, c'est comme un ".com" ou un "bêta", ça peut vous équilibrer un logo d'un seul coup, c'est un avantage à ne pas négliger. Si le client n'a pas de baseline et que votre logo semble bancal, inventez-en une, c'est du bonus et tout le monde est content.

Étape 6

À ce stade, le logo en lui même est terminé. Mais dans un bon logo logo web2.0, le fond est aussi important que le logo lui même. Oublions les fonds blancs. Les fonds blancs, c'est has-been, et le logo ressortira mal dessus. De toutes façons si un logo devait être affiché à même un support blanc un jour, ça se saurait. Pour le fond, tous les coups sont permis, mais si vous voulez être sûr de cartonner, il y a des poncifs qui marchent très fort: Le dégradé radial "ton sur ton" qui reprend la couleur principale du logo par exemple, ou le dégradé anthracite2.0/noir, ou les stries2.0 en diagonales. Le reflet du logo complet marche très bien aussi. Vous pouvez combiner le tout pour être sûr de faire mouche.

Étape 7

Ça y est, votre logo est prêt ! exportez le dans une taille assez importante, pour que les effets puissent bien se voir. 500×500 pixels est un bon compromis pour apprécier les qualités de notre logo. Pas la peine de faire plus petit, ni de faire de test avec moins de couleurs, c'est trop 1.0.

logopourri_001.jpglogopourri_002.jpg

Étape 8

Si le client demande des modifs, exécutez-les sans discuter, comme notre logo ne contient de toutes manières aucun mécanisme conceptuel, il est encore plus facile de le modifier (encore un avantage, vous voyez). Souvent, la femme ou la secrétaire du client préfèrera un mauve pâle ou un vert soutenu plutôt que la couleur initiale. Ça ne coute rien de faire plaisir, et après tout cette couleur ou une autre ça ne change rien, chacun ses gouts, après tout le logo n'est pas pour vous et nous avions choisi une couleur au hasard.

Conclusion

Et voilà, en peu d'étapes nous avons créé un magnifique logo web2.0, très efficace. Quand je pense que certaines agences ou des infographistes sans scrupules demandent des millions pour faire des choses au moins 10 fois moins belles, je me dis que le monde est trop injuste, et que tout le monde peut être infographiste, il suffit de DL la CS3 en version d'essai, suivre un tuto, et c'est bon !

L'autre avantage d'un logo créé selon cette méthode, c'est que vos propositions ne sont pas perdues !! Si un autre client se pointe, vous pouvez sans problème lui revendre les propositions non-retenues d'un client précédent, il suffira de changer le nom de marque !

Une fois que votre logo est réalisé, n'hésitez pas à demander des félicitations critiques au sein d'une communauté de graphiste2.0 avertie, vous n'attendrez pas longtemps avant de récolter moult avis2.0 constructifs tels que "+1", "le rendu est toujours trop top +10", "ça claque grave les reflets !", ou encore "super trop classe, ça mixe de la femelle ornithorynque à mort !".
Ignorez les critiques portant sur le fond, ou de manière plus générale, les commentaires1.0 de plus de 10 mots, paskeu ça fait mal à la tête.

Luttons contre ces indécrottables passéistes1.0 qui prônent le logo en temps que synthèse du vécu et de l'identité de l'entreprise, rempli de sens, avec des mécanismes graphiques intelligents et déclinable sur tout supports, y compris en monochromie. Si ils disent ça c'est qu'ils ne savent pas bien dessiner les reflets.

n00bs. ;-)

Votre commentaire a été publié.

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.

Haut de page