Un bouton arrondi

Ce tutoriel 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 : Edition/Preferences/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 elipse.

- 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.

- Vérifiez que le calque que vous venez de dupliquer est bien sélectionné et sélectionnez l'outil déplacement dans la palette outils.

- Servez vous des flèches de direction pour déplacer le nouveau calque vers la droite. (Utilisez la grille come repère).

- 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 jusq'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.

- 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 apparraissent autour de votre forme

-Sélectionnez Edition/Remplir. Votre forme se remplit de la couleur que vous avez sélectionné en premier plan. (FormeRemplie.jpg)

 

Relief :

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é.

Texte :

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.

Sélectionnez le format Gif, cochez la case Transparence (sans cela le fond de l'image sera blanc !), diminuez le nombre de couleurs et sélectionnez la perte de qualité sans que cela altère votre image. Vous pourrez voir le résultat de vos réglages dans la fenêtre de droite et leur impact sur la taille de l'image en bas de cette fenêtre.

Quand le résultat vous convient, cliquez sur OK et enregistrez votre image à l'endroit désiré.
Vous n'avez plus qu'à l'inclure dans vos pages Web ou dans vos documents.