04 fév 2010 11h13
Bienvenue sur le premier tutoriel de la Source dédicacé tout spécialement à Jean-Sébastien et à Thanh 
Etape # 01
Ouvrez Photoshop, le meilleur ami des designers puis ouvrez votre image.
Etape # 02
Sélectionnez l’outil « rectangle arrondi » sur votre barre d’outils et créer votre rectangle par dessus votre photo.
Etape # 03
L’image est en « arrière plan », double cliquer sur le calque pour la déverrouiller. Ensuite déplacez le calque avec le rectangle en dessous de votre image.
Etape # 04
Dans la fenêtre des calques, positionnez vous sur le calque de l’image, faire un « clic droit » et sélectionner « créer un masque d’ écrêtage ».
***********
Un autre moyen d’arriver au même résultat est de positionner le curseur de la souris entre les deux calques, d’appuyer sur la touche « alt » (un symbole avec deux ronds et une flèche apparait) et de cliquer.
Etape # 05
Et voilà le travail ! Vous avez une magnifique image avec des jolis angles ronds et ça ne vous a prit que 2 minutes !
***********
Photoshop étant un outil formidable, il y a bien sûre d’autres manières de faire. Alexandra par exemple utilise le système des « masques de fusion« .
***********
Etape #01
Ouverture de votre image. Je vous fais grâce de la capture d’écran. 
Etape # 02
Vous allez répéter quasiment la même opération que l’étape # 02 précédente à un détail près.
Dans la barre horizontale, sélectionner la forme vectorielle avec la plume au centre. Ainsi, vous obtiendrez seulement le tracé de votre rectangle arrondi.
Etape # 03
« Clic droit » sur l’image et sélectionner « définir une sélection ».
Sélectionner les options telles qu’affichées sur la capture et valider.
Résultat : vous avez une sélection et toujours un seul et unique calque.
Etape # 04
Dans votre barre d’outils, vérifier que le noir est au dessus du blanc, puis en bas du bloc des calques, cliquez sur « ajouter un masque vectorielle ».
Etape # 05
Résultat : Tout pareil que ci-dessus, une belle image aux angles arrondis !
***********
That’s all folks !
***********
7 Commentaires
Oh ça se fait en CSS maintenant ^^
border-radius c’est pas fait pour les chiens
Vu mes connaissances en css je l’ignorais.
Merci
Moi je dis merci, j’oublie toujours comment on fait.
Alors, moi, je dois être un gros bourrin: je choisi l’outil sélection rectangle arrondi, je selectionne comme sur 2.2, je fais Selection->inverser la selection, puis j’appuie sur la touche SUPPR
@Webmaster Code Promo L’inconvénient de cette méthode c’est que si tu dois recadrer ton image ou revenir dessus pour X raisons, ce n’est plus possible et tout est à refaire depuis le début. Après tant que ça marche et qu’on a le résultat désiré, la méthode importe peu.
@Olivier, @Samy: bien sûr vous êtes au courant que border-radius sur une image ça marche que sous Webkit? Et il n’est pas sûr que du côté de Mozilla on modifie l’implémentation de border-radius, vu que la spécification CSS3 parle bien des bordures et du background d’un élément, mais pas de la forme des éléments remplacés tels que les images. C’est donc à la libre appréciation des implémenteurs.