creer un bouton arrondi

Ce tutorial vous montre comment créer un bouton sous Photoshop avec un fond transparent.

Pour donner un effet de relief, nous utiliserons les effets de calques aussi bien sur le bouton que sur le texte.

Créez un nouveau fichier de 300 pixels sur 100 pixels avec une résolution de 72 dpi.

Faites apparaître la grille en sélectionnant Affichage/Afficher/Grille

Réglez les paramètres de la grille : Édition/Préférences/Repères et grilles

En réglant le pas à 20 pixels et la subdivision à 1

Cliquez sur l'outil rectangle dans la palette outils, à droite de l'outil plume

Dans la barre d'outils en haut de l'écran, sélectionnez l'outil ellipse.

Tracez un cercle en vous servant de votre grille comme repère. (Pour tracer un cercle vraiment rond, maintenez la touche Shift (Maj) enfoncée pendant que vous le tracez.)

Dupliquez votre calque (Calque/Dupliquer le calque)

Désactivez l'affichage du fond en cliquant dans la palette des calques sur l'oeil qui se trouve à gauche du calque Fond.

Créez un nouveau calque (Calque / Nouveau / Calque)

Sélectionnez l'outil rectangle dans la palette d'outils et tracez un rectangle en partant du milieu haut du premier calque jusqu'au milieu bas du second calque.

Vous obtenez un rectangle dont les deux bouts sont arrondis.
Une fois vos calque positionnés correctement vous pouvez les fusionner de manière à n'en faire plus qu'un: - Calque/Fusionner les calques visibles.

Dans la palette des calques, vous n'avez plus que deux calques. Un calque contenant votre forme, un calque contenant le fond.
Si vous ne désirez pas que le fond soit associé à votre forme quand vous enregistrerez votre travail, vous pouvez supprimer ce dernier.
Pour ce faire, vous devez d'abord convertir votre fond en calque en double cliquant sur ce dernier et en validant la boite de dialogue qui apparaît.
Une fois cela fait, vous pouvez supprimer ce calque (calque/supprimer ce calque). Vous n'avez plus qu'un calque dans votre palette des calques. - Calque/Fusionner les calques visibles.Désactivez l'affichage de la grille (Affichage/Afficher/Grille) Grille ne doit plus être coché.
Changez la couleur de votre forme :
- Sélectionnez une couleur de premier plan
- Sélectionnez votre forme en faisant Ctrl + clic sur votre calque (des pointillés apparaissent autour de votre forme
-Sélectionnez Édition/Remplir.
Votre forme se remplit de la couleur que vous avez sélectionné en premier plan. (FormeRemplie.jpg)

Vous pouvez donner un effet de relief très rapidement à votre forme en utilisant les effets du calque.
- Double-cliquez sur votre calque dans la palette des calques.
Une nouvelle fenêtre s'ouvre vous permettant de modifier les réglages de votre calque (vous pouvez utiliser les commandes Calques/Style de calques/Option de fusion.

Sélectionnez l'option Biseautage et estampage et jouez sur les différents paramètres pour obtenir l'effet désiré.

Pour finir, saisissez un texte sur votre bouton, double cliquez sur votre calque texte et essayez différents effets pour obtenir le résultat qui vous convient.

Il vous faut maintenant sauvegarder votre travail dans un format vous permettant de le récupérer et l'incorporer à vos pages Web.

Enregistrement de l'image
- Sélectionnez Fichier/Enregistrer pour le Web
Un nouvel écran s'ouvre vous permettant d'effectuer vos réglages pour optimiser votre image. Le jeu consiste à trouver le meilleur compromis entre la qualité de l'image et son poids, (sa taille en ko).
Dans le haut de l'écran sélectionnez l'onglet 2 vignettes de cette manière, vous voyez l'image originale dans la partie gauche et l'image optimisée dans la partie droite.

Dans le bas de chacune des fenêtres se trouvent différentes informations vous renseignant sur la taille de l'image, son format etc.
Plusieurs formats d'enregistrement sont à votre disposition.

Le format GIF:
Ce format permet de produire des images de petite taille. Le format gif utilise une compression qui ne dégrade pas les images, mais ils ne comptent que 256 couleurs ce qui convient mal aux photographies. Ce format est néanmoins très intéressant car il permet d'utiliser une couleur transparente comme le fond de notre image par exemple ou est utilisé pour les animations.

Le format JPG:
Le format jpg permet d'utiliser plus de 16 millions de couleurs mais, contrairement au gif, le format jpg compresse les images en les dégradant. De plus, il ne sait pas reconnaître une couleur de transparence ce qui peut être gênant dans certains cas.
Le format Jpg sera donc plutôt réservé aux Photos ou aux images contenant beaucoup de couleurs, dégradés et trames alors que le format Gif sera plutôt utilisé pour les dessins et logos.
Dans le cas qui nous intéresse, notre image ne compte pas beaucoup de couleurs et nous désirons surtout que le fond reste transparent de manière à placer notre bouton sur n'importe quel page web, quel que soit son fond.
Il faut donc enregistrer cette image au format Gif.

Photoshop vous permet de créer un fichier GIF avec perte de données. L'utilisation de l'option Perte de qualité permet de créer des fichiers nettement moins volumineux en réduisant la qualité de l'image. Vous Pouvez sélectionner les différents réglages dans la partie droite de l'écran dans la fenêtre Paramètres.