Ce forum ne sert qu'à la publication de tutoriels, et à leur commentaires. Pour tout support graphique, allez dans la rubrique au même nom.
Ils ont des boutons ronds, vive la Bretagne ...
Si vous vous êtes risqués à réaliser de tout petits boutons ronds pour votre site internet ou pour coller sur un fond quelconque,
vous vous êtes certainement rendu compte qu'il n'était pas facile de gérer la transparence des "angles" de l'image du bouton,
et de conserver une forme bien ronde, sans impression de pixelisation.
Voici un exemple de différentes techniques utilisées et de leur résultat en fonction du fond.
- Sur la première ligne nous avons utilisé une méthode classique sans changer le diamètre de la sélection,
pour appliquer la transparence à la partie extérieure à la sélection elliptique.
- Sur la 2ème et la 3ème ligne, nous avons utilisé la technique qui sera développée ci-dessous.
- Sur la 2ème le fond du bouton était blanc
- Sur le 3ème, le fond du bouton était bleu marine
Moralité : il est très difficile de réaliser des transparences avec des contours en courbes sans bavure, si on ne tient pas compte du fond.
Voici donc une méthode pour y parvenir en 15 étapes :
Nous allons réaliser un bouton de 26 pixels pour fond sombre :
- Ouvrir une nouvelle image 120 x 120 pixels. Tout sélectionner => Vignette 1
- Clic droit / Paramètrage manuel => Automatique : centré / Taille 104 x 104 (104=4*26) / Forme : Ellipse => Vignette 2
- Filtre / Module externe / Dégradé
=> Forme : Droit / Style : Convexe / Angle : 270 / 4 couleurs de la même palette
en partant d'une couleur claire vers une plus foncée sur la même ligne.
Valeurs TLS identiques pour T et S. => Vignette 3
- Filtre / Bruit / Ajouter du bruit : 20 unifrome => Vignette 4
- Filtre / Effet d'optique / Flou gaussien : 6 => Vignette 5
- Filtre / Effet d'optique / Flou radial => Vignette 6
- Sélection / Contracter 1 pixel - Clic droit / Inverser la sélection - Clic droit / Contour et remplissage :
=> Choisir une couleur sombre dans la gamme du fond de destination. => Vignette 7
- Clic droit / Paramètrage manuel :
=> Automatique : centré / Taille 104 x 104 / Forme : Rectangle / Inverser : décoché => Vignette 8
- Clic droit / Recadrer l'image => Vignette 9
On peut vérifier qu'il reste un pixel entre le bouton et le bord de l'image.
- Clic droit sur la Barre de titre de l'image / Taille de l'image : => 26 x 26 pixels => Vignette 10
- Zoomer à 800 % => Vignette 11
=> On peut voir que le bouton a complètement rempli la nouvelle taille d'image,
malgré la marge de 1 pixel que nous avions réservée.
- Tout sélectionner. Clic droit / Paramètrage manuel :
=> Automatique : centré / Taille 24 x 24 / Forme : Ellipse / Inverser : coché => Vignette 12
- Nous allons atténuer ces parties du bouton, de sorte qu'elles se fondent avec le fond : - Réglage / Correction gamma :
=> Dans notre cas, sur fond sombre nous abaissons le Niveau à 50.
=> Sur un fond clair, il faudra augmenter le niveau à 150
- Masquer la sélection => Vignette 13
- Tout sélectionner. Clic droit / Changer la forme / Ellipse => Vignette 14
- Menu Image / Transparence automatique / Région extérieure à la sélection => Vignette 15
- Qu'en pensez-vous ? Il est magnifique ce bouton avec tous ces vilains défauts !!!
Pas de panique, n'oubliez pas vous êtes en mode zoom.
Vous pouvez l'enregistrer en gif et le superposer sur un fond sombre de couleur différente.
Moralité : l'image numérique n'est souvent qu'une illusion.
- J'espère que vous ne serez pas trop déçus.
Ajout de mots clés pour la recherche : petit bouton rond relief TroisD
