Design et Photoshop

Des rectangles arrondis sous Photoshop

Le 23 octobre 2007 à 19:03 par Séverin

imageCa peut paraitre basique comme tutoriel, mais si vous décidez d’utiliser des images pour les coins arrondis de votre interface graphique, autant le faire facilement, rapidement et proprement.

D’abord, il faut savoir que la technique de la sélection rectangulaire puis Sélection > Modifier > Lisser est une très mauvaise technique. Parce qu’on a pas le contrôle visuel sur la taille de l’arrondis et surtout parce que l’arrondi sera sans anti-aliasing. Pour rappel, l’anti-aliasing c’est le léger dégradé d’opacité sur le bord des objets qui évite l’impression de crènelage.

Après plusieurs tentatives, voilà la solution qui me parait proposer le meilleur résultat en peu de temps.

1 - Créer un nouveau calque (ctrl+shift+N).

2 - Tracer une sélection ronde de la taille de l’arrondi désiré. Maintenez la touche shift pour faire un rond parfait.

3 - Remplir la sélection. La couleur importe peu pour le moment.

4 - Maintenez les touches ctrl+alt enfoncez puis appuyez plusieurs fois sur la flèche droite du clavier jusqu’à atteindre la largeur désirée.

5 - Récupérer la sélection du calque : ctrl+clic gauche sur le calque.

6 - Maintenez les touches ctrl+alt enfoncez puis appuyez plusieurs fois sur la flèche bas du clavier jusqu’à atteindre la hauteur désirée.

7 - Récupérer la sélection du calque : ctrl+clic gauche sur le calque.

8 - Créer un nouveau calque et remplir la sélection avec la couleur finale.

Voilà, un premier tutoriel assez simpliste donc mais à mon avis pas inutile.

9 commentaires »

Gravatar

Commentaire de eMeRiKa

le 23 octobre 2007 à 19:24

heu et l’outils rectangle avec bord arrondi? il dérive d’un tracé de plume, il est donc avec l’anti-aliasing… Là je comprends pas l’intéret du tuto!!

Gravatar

Commentaire de Séverin

le 23 octobre 2007 à 19:29

En fait, il a aussi ces défaut l’outils rectangle. Mais contrairement au lissage en effet il garde l’anti-aliasing et de manière général, c’est une technique pas trop critiquable.

Là où je suis pas fan, c’est qu’il lui arrive d’aussi mettre de l’anti-aliasing sur la tranche et pas seulement dans l’arrondis. En plus, le contrôle sur la taille de l’arrondis est moins facile qu’avec la sélection ronde.

Gravatar

Commentaire de Olivier

le 24 octobre 2007 à 9:21

Je ferais le même commentaire que eMeRiKa : pourquoi ne pas conseilelr l’outil rectangle à bord arrondi.
Il te génère un calque, vectoriel et donc complètement modifiable via la Plume et anti-aliasé.
Et pour derrière appliquer des dégradés et autres effets “2.0″, c’est vraiment facile !

Gravatar

Commentaire de bruno bichet

le 24 octobre 2007 à 10:47

J’utilise la même technique qu’eMeRiKa, à savoir le rectangle vectoriel qui permet de spécifier précisément la valeur de l’arrondi. En plus c’est très facile de transformer ce rectangle vecto en sélection avec Ctrl+Enter ;)

Gravatar

Commentaire de spylberg

le 24 octobre 2007 à 11:39

Sympa.
Moi pour ce type de graphisme (2.0), je suis définitivement passé à Fireworks, bien plus simple et avec une bien meilleur gestion du vectoriel.

Gravatar

Commentaire de Séverin

le 24 octobre 2007 à 13:57

En terme de design, il existe toujours plusieurs façon d’arriver au résultat désiré. C’en est une tout comme l’outil rectangle à bord arrondi. Après, chacun choisit la méthode qui lui correspond le mieux.

Gravatar

Commentaire de eMeRiKa

le 24 octobre 2007 à 18:02

Oui mais utiliser une technique beaucoup plus longue pour la même chose, et je trouve la liaison des angles avec les cotés “crades” dans cette méthode!!

Gravatar

Commentaire de Séverin

le 24 octobre 2007 à 18:17

C’est vrai que si ton arrondi est très petit, la liaison est pas nickel.

Et encore une fois, ca ne fait pas exactement la même chose. Avec cet technique, seuls les angles arrondis sont anti-aliasés. Les faces droites sont parfaitement nettes, ce qui n’est pas le cas de la forme rectangle arrondis.

Mais c’est vrai que quand on a pas besoin de faces nettes, autant utilisé le rectangle arrondis.

Comme je l’ai dis, j’ai testé plusieurs solutions avant de m’arrêter sur celle-ci. Après il y’a d’autres techniques comme par exemple le feather + niveaux qui permet de contrôler la quantité d’anti-aliasing et qui donnent des résultats vraiment bons visuellement mais qui a ses défauts.

Plusieurs solutions, chacune ses avantages et ses inconvénients.

Gravatar

Commentaire de shane plasebo

le 10 novembre 2007 à 11:34

Utlise des script qui donne un canvas sur les bordures de tes images. Pas besoin de les manipuler sur photoshop ou fireworks…

Laisser un commentaire

Votre Nom

Votre E-mail (obligatoire mais ne sera pas publié)

Votre Site ou blog

Votre commentaire

Valid XHTML 1.0 Transitional