Comment créer des boutons Web avec Illustrator

gradients simples peuvent ajouter de sophistication à des images graphiques et texte.

Articles Liés

1. Appuyez sur « Ctrl-N » pour afficher la boîte de dialogue Nouveau, puis cliquez sur « Web » du contrôle du profil et « 640x480 » de la commande Taille. Cliquez sur « OK » pour créer le document.

2. Cliquez sur le rectangle ou un autre outil de forme à partir du panneau Outils. Cliquez et faites glisser sur le plan de travail pour commencer à dessiner le contour du bouton. Lorsque vous faites glisser, Illustrator affiche les dimensions de la forme. Relâchez la souris lorsque la hauteur est comprise entre 35 et 50 pixels et la largeur est que vous le souhaitez.

3. Cliquez sur l'icône de menu dans l'en-tête du contrôle de remplissage qui se trouve sur le panneau de configuration. L'icône de menu apparaît comme plusieurs lignes horizontales empilées dans un carré.

4. Cliquez sur l'article « Open Library Swatch » puis cliquez sur le « Web » pour ouvrir le panneau Web, dont les couleurs sont compatibles avec le Web. Cliquez sur le swatch « Remplir » dans le panneau Outils, puis sur un échantillon à partir du panneau Web pour colorer le bouton.

5. Cliquez sur « Ombre portée » ou un autre effet dans le menu Effets styliser le bouton Appuyez sur « T » pour lancer l'outil de type;. Puis cliquez dans le bouton pour indiquer l'emplacement du premier caractère du texte du bouton.

6. Cliquez sur une police sans-serif contrôle de police du panneau de commande, tels que « Arial ». Cliquez sur une taille comprise entre 12 et 24 points de la commande Taille de la police et puis tapez le texte qui décrit succinctement l'objectif du bouton. Par exemple, tapez « Envoyer ».

7. Appuyez sur « Ctrl-A » pour sélectionner le texte et les objets de forme; puis appuyez sur « Ctrl-G » pour regrouper ces objets. Double-cliquez sur l'élément « Layer 1 » dans le panneau Calques et entrez « Off » pour qualifier l'état « off » du bouton.

8. Cliquez sur l'icône du menu du panneau Calques, puis cliquez sur la commande « Dupliquer » pour dupliquer l'état « off » du bouton. Nommez la nouvelle couche « hover » pour indiquer l'état qui apparaît lorsque la souris survole le bouton.

9. Cliquez sur un nuancier dans le panneau Web ou un effet dans le menu Effets pour représenter l'état « hover » du bouton. Par exemple, cliquez sur la vignette « Stroke » dans le panneau Outils, puis cliquez sur un swatch rouge dans le panneau Web pour rendre le rouge contour du bouton.

10. Créer une autre copie de la couche « off » et entrez « sur » pour le nom du double. Cette étiquette indique l'état cliqué du bouton.

11. Utilisez les effets commandes ou les nuanciers de panneau Web pour que le bouton apparaissent enfoncé. Par exemple, si le « sur » l'état a pour effet Ombre portée, dans le panneau Aspect cliquez sur « Ombre », puis baisser le décalage en X et Y Offset valeurs pour réduire la distance apparente entre le bouton et son ombre. Cela rend le bouton enfoncé apparaissent.

12. Cliquez sur le sous-menu « Plans de travail » du menu objet; puis cliquez sur la commande « Ajuster à l'œuvre » pour supprimer l'arrière-plan étrangers de tous les trois états du bouton.

13. Cliquez sur les icônes pour les yeux de tous, mais la couche « off » dans le panneau Calques pour révéler juste cette couche. Cliquez sur « Enregistrer pour le Web » dans le menu Fichier, puis cliquez sur le bouton Enregistrer « Enregistrer » de boîte de dialogue Web. Entrez un nom de fichier comme « Upload-Off.JPEG » puis cliquez sur « Enregistrer » pour enregistrer l'image « off » du bouton. Enregistrez le « vol stationnaire » et « sur » les images de la même manière.

A propos de l'auteur

Jean-Pierre Koltow a écrit sur les logiciels informatiques jusqu'à ce que les programmes graphiques réveillèrent sa passion tout au long de devenir un maître designer et dessinateur. Il est maintenant engagé à acquérir la formation pour une position de la conception des personnages, des créatures et des environnements pour les jeux vidéo, des films et d'autres médias de divertissement.

Crédits photo

recherches associées

plus d'articles

Comment effacer des parties d'une image dans Illustrator