[Illustrator] - Créer un logo au look Web 2.0 sous Illustrator

Tutorial - Comment créer un logo type Web 2.0 pour votre site web en quelques clics

Vous venez de créer un site web 2.0 ou vous voulez tout simplement rajeunir le look de votre design, et pour cela, il faut créer un webdesign à la mode. Et aujourd'hui, la mode c'est le Web 2.0 !
Depuis quelques temps, on voit l'emergence des sites web 2.0 comme flock ou silverorange et beaucoup d'autres. Il n'y a pas de vrais règles pour créer un design Web 2 mais certains styles reviennent souvent (ombres, coins arrondis, design épuré, taille de police disproportionnée ...). Dans ce tutorial, je vais vous apprendre comment créer un logo type Web 2.0 très facilement grâce à Adobe Illustrator.

Les sources illustrator sont disponibles à la fin de ce tutorial.






Tout au long de ce tutorial, vous allez utiliser Illustrator CS. Si vous ne l'avez pas, vous pouvez télécharger une version d'évaluation d'Illustrator CS.
Cette version n'est pas limitée dans ses fonctionalités mais est limitée à 30 jours d'utilisation (ce qui devrait être largement suffisant ;) ).


Voici le logo que vous allez créer vous-même.
Bien sur, vous pouvez rajouter des éléments mais le look de base est là (reflection, effet aqua, badge). L'avantage d'utiliser Illustrator plutôt que Photoshop réside dans le fait que vous pourrez agrandir ou rétrecir votre logo sans aucune perte de qualité puisqu'il sera entièrement vectoriel.










Tout d'abord, créez un nouveau document (Fichier > Nouveau...) et entrez ces informations :


Sélectionnez "100%" dans le menu déroulant tout en bas à gauche pour voir votre document en taille réelle. Ouvrez la palette Texte (Fenêtre>Texte>Caractère) puis prenez l'outil Texte.


Cliquez n'importe où dans votre espace de travail puis entrez votre texte. Dans la plupart des logos Web 2.0, le texte est entièrement en minuscule mais c'est à vous de voir ;). Cliquez sur l'outil Sélection de votre boîte à outils (le curseur noir en haut à gauche), votre texte est alors selectionné. Vous pouvez alors bouger votre texte en restant cliqué dessus avec l'outil Sélection. Changez la taille de votre texte pour du 72pt et la police pour de l'Arial Black:


Toujours avec votre texte selectionné, vous allez en changez la couleur. Pour cela, double-cliquez sur le carré noir en bas de la barre d'outils.


Trouvez la couleur qui vous convient, pour ce tutorial nous allons utiliser un bleu clair (#4096EE).


Vous pouvez trouver les couleurs typiques du Web 2.0 dans cet article : Web 2.0 Colour Palette. Sélectionnez votre texte et faîtes-en une copie (ctrl+C, ctrl+V). Délacez cette copie autre part sur le plan de travail, elle vous sera utile plus tard. Ouvrez la palette Dégradés (Fenêtre > Dégradé de Couleurs) qui v'a s'ouvrir la droite de votre espace de travail puis cliquez sur les deux petites flèches pour accéder à plus d'options.


Prenez l'outil rectangle dans la boîte à outils


Tracez un rectangle autour du texte comme sur cette image :


Cliquez ensuite sur la barre de dégradé de la palette Dégradés. Votre rectangle devient un dégradé du blanc vers le noir. Modifiez l'angle (0°->90°) et déplacez les poignées de la barre de dégradé afin d'arriver à cette situation :


Avec l'outil de sélection, faîtes un cadre de séléction autour de votre rectangle, ce qui va sélectionner aussi bien le texte que le rectangle Cliquez sur l'onglet Transparence, juste à droite de l'onglet Dégradé de Couleurs et cliquez ensuite sur la fleche juste à droite puis choisissez "créer un masque d'opacité".


Votre logo est alors un dégradé du bleu vers le blanc. Prenez cette fois l'outil Ellipse (restez appuyé sur l'outil rectangle pour faire apparaître la liste des formes).


Tracez une ellipse en dessous de votre logo comme ceci :


Changez ensuite la couleur du fond pour du blanc comme vous l'avez fait pour le texte. Dans la palette Transparence, indiquez une opacité de 20%. Vous pouvez modifier la taille de l'ellipse en utilisant les poignées qui l'entoure et arriver à un résultat similaire.


Sélectionnez la copie de texte que vous avez fait plus tot et faîtes Objet > Transformation > Miroir et cochez Horizontal puis OK. Refaîtes la même manipulation avec le rectangle (tracez un rectangle autour du texte renversé puis dégradé) mais cette fois-ci, votre palette Dégradé de Couleurs doit ressembler à celle-ci:

Séléctionnez l'image inversée et le rectangle dégradé en faisant un cadre de séléction et créer un masque d'opacité comme fait juste avant. Placez ensuite cet élément sous l'autre texte. Pour un placement plus fin, vous pouvez utiliser les touches fléchées de votre clavier.


Indiquez une Opacité de 50% dans la palette Transparence pour attenuer sa couleur.




Copiez-collez le signe "registered" directement sur votre scène : ® .


Ouvrez la palette Texte (Fenêtre > Texte > Caractère) puis changez la police vers du Windings et vous obtenez la forme du badge Web 2. Changez la couleur de fond (vous savez faire maintenant ;) ) vers un jaune vif (#FFCC00) puis appliquez-lui une ombre portée (Effet > Spécial > Ombre Portée...). Entrez ces paramètres :

• Mode : Normal
• Opacité : 40%
• Décalage sur X : 3px
• Décalage sur Y : 3px
• Atténuation : 5px
• Couleur : Noir (défaut)

Ensuite, rajoutez un petit "BETA" en blanc sur votre badge (la plupart des sites Web 2.0 sont en béta :D ) en Verdana, Bold, 9 pixels. Vous pouvez aussi rajouter une petite ellipse à 25% d'opacité sur le côté de votre badge comme sur le résultat final.

• Pour modifier la taille de votre image, sélectionnez tout (ctrl+A) et utilisez les poignées pour modifier la taille.
• Pour conserver les proportions, restez appuyé sur la touche Shift lorsque vous bougez les poignées.
• Pour exporter l'image, tracez un rectangle sur la zone à exporter puis avec ce rectangle sélectionné, Objet > Zone de recadrage > Créer.
• Pour sauvegarder votre image en une image de type .png, .jgp ou .gif, Fichier > Exporter pour le Web et modifier les paramètres comme vous le souhaitez.

Si vous voulez allez plus vite, vous pouvez télécharger la source du projet. Il ne vous reste qu'à modifier le texte (double cliquez-dessus) et à modifier les couleurs et positions.
Le mieux est d'avoir suivi le tutorial pour bien comprendre les outils fournis par illustrator CS.

Télécharger la source Illustrator du tutorial sur le design de logo web 2.0.