Une image avec des angles arrondis

Bienvenue sur le premier tutoriel de la Source dédicacé tout spécialement à Jean-Sébastien et à Thanh 😉

Etape # 01

ouverture

Ouvrez Photoshop, le meilleur ami des designers puis ouvrez votre image.

Etape # 02

rec-arrondi

Sélectionnez l’outil « rectangle arrondi » sur votre barre d’outils et créer votre rectangle par dessus votre photo.

Etape # 03

position-calque

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

masque

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

resultatEt 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

Etape02

Etape02bis

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

definirselection01

« Clic droit » sur l’image et sélectionner « définir une sélection ».

definirselection02

Sélectionner les options telles qu’affichées sur la capture et valider.

definirselection03

Résultat : vous avez une sélection et toujours un seul et unique calque.

Etape # 04

masque

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

final02

Résultat : Tout pareil que ci-dessus, une belle image aux angles arrondis !

***********
That’s all folks !

***********

8 Commentaires

  1. Oh ça se fait en CSS maintenant ^^

  2. border-radius c’est pas fait pour les chiens 🙂

  3. Vu mes connaissances en css je l’ignorais.
    Merci 🙂

  4. Moi je dis merci, j’oublie toujours comment on fait.

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

  6. @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. 🙂

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

  8. excellant ! merci.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *