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 !

***********

7 Commentaires

  1. Le Jeudi 04 février 2010 à 11h21, par Olivier G.

    Oh ça se fait en CSS maintenant ^^

  2. Le Jeudi 04 février 2010 à 11h27, par Samy

    border-radius c’est pas fait pour les chiens :)

  3. Le Jeudi 04 février 2010 à 11h30, par Floriane

    Vu mes connaissances en css je l’ignorais.
    Merci :)

  4. Le Jeudi 04 février 2010 à 11h35, par Thanh

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

  5. Le Jeudi 04 février 2010 à 11h42, par Webmaster Code Promo

    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. Le Jeudi 04 février 2010 à 11h46, par Floriane

    @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. Le Jeudi 04 février 2010 à 12h31, par Florent V.

    @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. ;)

Soumettre un commentaire

Votre adresse email n'est jamais publiée ni partagée. Les champs requis sont marqués par *

*
*