[Illustrator] - Créer des boutons au look Web 2.0 sous Illustrator

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

Après l'article sur la création de logo web 2.0, je vous propose de créer des boutons type Web 2.0. Comme pour les logos, aucun standards mais certains styles redondants (dégradés, ombres, coins arrondis...). Dans ce tutorial, je vais vous apprendre comment créer des boutons 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 bouton que vous allez créer vous-même.


Bien sur, vous pouvez rajouter des éléments mais le look de base est là (dégradé sec, coins arrondis ...). L'avantage d'utiliser Illustrator plutôt que Photoshop réside dans le fait que vous pourrez agrandir ou rétrecir votre bouton sans aucune perte de qualité puisqu'il sera entièrement vectoriel.










Créez un nouveau document Illustator (Fichier>Nouveau...) avec comme paramètres :

• Unité : Pixels
• Largeur : 250px
• Hauteur : 100px
• Mode : RVB

Sélectionnez "100%" dans le menu déroulant tout en bas à gauche pour voir votre document en taille réelle. Prenez l'outil Rectangle Arrondi (restez appuyé sur l'outil rectangle pour faire apparaître la liste des formes).


Cliquez sur votre plan de travail et indiquez les valeurs suivantes :


Changez la couleur de fond en #22A5C4 et le contour en #2956A9 en double-cliquant sur les icones ci-dessous (le carré en haut à gauche représente le fond, l'autre le contour).


Appliquez au rectangle, une lueur interne (Effet > Spécial > Lueur Interne...) :


Appliquez au rectangle, une ombre portée (Effet > Spécial > Ombre Portée...) avec comme paramètres :


Tracez un nouveau rectangle, dont le bas arrive au milieu du rectangle bleu comme sur cette figure


Assignez lui un coutour et une couleur de fond blanche (#FFFFFF). Ouvrez la palette Transparence : Fenêtre > Transparence. Réglez l'opacité de ce rectangle à 20%.

Ouvrez la palette Texte : Fenêtre>Texte>Caractère. Sélectionnez l'outil texte et cliquez sur votre plan de travail pour entrer votre texte.


Grâce à la barre d'outils en haut de votre écran, choisissez comme police, du Tahoma, en bold, 22 pts. Changer la couleur de fond du texte comme vous l'avez fait pour le rectangle, prenez du blanc (#FFFFFF).

Utilisez le curseur noir de la boîte à outils pour positionnez votre texte au centre du rectangle. Utilisez les touches fléchées de votre clavier pour un positionnement plus fin. Et voila le résultat !

• 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 bouton web 2.0.