Rectangle aux bords arrondis. Comment arrondir les bords dans Photoshop

Travailler dans Photoshop vous permet d'obtenir le même résultat de différentes manières. Mais, bien entendu, il sera plus rationnel d’utiliser la voie la plus simple et la plus efficace possible. Il convient de noter que le recadrage rectangulaire des photos dans Photoshop s'effectue à l'aide d'un simple outil de « recadrage ». Dans le même temps, obtenir un résultat similaire, mais avec des bords arrondis, est assez difficile pour les utilisateurs novices, car le programme n'offre pas de solution évidente.

Avant d’arrondir les bords dans Photoshop, vous devez comprendre pourquoi cela est nécessaire. Les principales raisons sont :

Obtenir une image ou ses détails qui ont la forme requise, sans nécessiter de retouches supplémentaires ;

Obtenir un design original et magnifique pour la photographie.

Ainsi, après avoir lancé Photoshop, vous devez ajouter le fichier qui sera recadré. Pour ce faire, vous pouvez utiliser les éléments de menu « Fichier », « Ouvrir » ou simplement faire glisser la photo dans l'environnement de travail du programme. Afin d'arrondir les bords dans Photoshop, vous devez d'abord donner à l'image la taille appropriée. Cela peut être fait via « Image », « Taille » ou, après avoir préalablement créé un nouveau document avec les dimensions données, y déplacer le fichier souhaité. Là, vous pouvez le déformer à votre guise en utilisant « Édition », « Transformation ».

Après avoir préparé un échantillon de travail de cette manière, vous pouvez passer directement à la procédure d'arrondi des bords dans Photoshop. Pour ce faire, vous devez trouver l'un des outils sur le panneau de gauche, appelé "rectangle" (appelé par la touche "U") et sélectionner dans la liste de ses variétés - "avec bords arrondis". L'utilisateur peut ajuster l'angle des bords arrondis à l'aide de l'option « rayon », qui deviendra disponible sur le panneau supérieur.

Ensuite, vous devez sélectionner la partie souhaitée de l'image. Ici, vous devez faire attention à savoir si le rectangle obtenu chevauche la photo originale. Si tel est le cas, dans le panneau des calques situé à droite, vous devez abaisser le calque nouvellement formé avec une sélection à une position qui sera inférieure à l'échantillon de travail. La sélection - dans ce cas un « rectangle arrondi » - peut être déplacée à l'aide des outils habituels du programme.

Afin de comprendre comment arrondir les bords dans Photoshop, vous devez cliquer avec le bouton droit sur le calque avec le rectangle obtenu et sélectionner "Créer une sélection". Ensuite, sur le panneau principal en haut, cliquez sur « Sélectionner », « Inverser ». Il reste ensuite à accéder au calque avec l'image principale et à appliquer la commande "Supprimer", qui s'effectue en appuyant sur le bouton correspondant du clavier ou via la touche de raccourci "D". Le résultat ne peut être enregistré que via le menu « Fichier », « Enregistrer » pour le format PSD « natif ». Ou vous pouvez utiliser « Enregistrer sous... » pour obtenir le résultat dans n'importe quel autre format courant.

C'est le moyen le plus simple et le plus rapide d'arrondir les bords dans Photoshop. C’est maintenant à votre imagination de décider où vous pouvez appliquer vos nouvelles connaissances.

Sur certains sites qui n'ont pas d'angles vifs dans leur conception, les illustrations des articles et des actualités ont également des bords arrondis. Très souvent, les webdesigners ne pensent pas au fait que réaliser de telles illustrations avec des coins arrondis sera difficile pour le propriétaire du site qui n'a pas forcément les connaissances nécessaires ; Photoshop. Cependant, le client du site lui-même est responsable. Même s'il exige que tout soit beau, il ne pense souvent pas à la manière dont il ajoutera ensuite des images aux bords arrondis aux articles et aux actualités de son site.

Dans cette leçon Photoshop nous verrons combien il est facile d'arrondir les coins d'une image en prenant l'exemple d'un avatar, sans être limité par l'épaisseur de 1px:

Lorsque j’ai eu besoin pour la première fois d’arrondir les coins d’une illustration destinée à un site Web, la réponse n’était pas évidente pour moi. J'ai cherché sur Google et suis tombé sur quelques instructions de traduction trop abstruses pour qu'un débutant puisse avoir du mal avec les canaux, les chemins, les flous, les guides et autres outils destinés aux utilisateurs avancés. Photoshop Même un professionnel est paresseux, et pour un débutant, un tel processus peut sembler incompréhensible et fastidieux. Après avoir réfléchi un peu, j'ai trouvé ma propre façon d'arrondir rapidement et facilement les bords du motif dont j'avais besoin.

Arrondissez tous les coins du dessin à l'aide d'une forme Photoshop

Disons que vous devez le réaliser avec des bords arrondis. Cependant, vous n’avez pas une image similaire avec des bords lisses. Vous proposant un modèle très simple, mais très détaillé et illustré Tutoriel Photoshop sur la façon de créer une image avec des coins arrondis pour un débutant.

1. Ouvrez Photoshop. Ce tutoriel utilise ma version préférée. Adobe Photoshop CS3, mais toute autre version installée sur votre ordinateur fera l'affaire.

2. Ouvrez le dessin original dont nous arrondirons les bords. Si le dessin diffère en taille et en forme de celui dont nous avons besoin, il est nécessaire et/ou dans Photoshop avant de commencer à arrondir les coins.

3. Appuyez sur le clavier Ctrl+A pour sélectionner l'image entière, puis cliquez sur Ctrl+C pour le copier. Ouvrez une nouvelle fenêtre dans Photoshop ( Ctrl+N) et collez-y l'image copiée ( Ctrl+V). Dans ce cas, l'arrière-plan de la nouvelle fenêtre doit être soit , soit la couleur qui doit entourer l'image aux bords arrondis sur le site.

4. Créez un nouveau calque ( Ctrl+Maj+N). Et dans ce nouveau calque en utilisant l'outil Outil Rectangle Arrondi (U) dessinez un carré ou un rectangle de la taille requise :

5. La couleur de fond du rectangle dessiné n'a pas d'importance. Paramètre Rayon, caractérisant le degré de rondeur du coin, car cette leçon est égale à 8 , mais vous pouvez le modifier à votre guise :

6. La forme dessinée dans le nouveau calque peut être déplacée à l'aide des touches fléchées du clavier. Sa forme peut être modifiée en appuyant sur le clavier Ctrl+T puis étirer la forme avec la souris. Si vous faites glisser dans un coin tout en maintenant la touche enfoncée Changement, la taille de la figure changera proportionnellement. Grâce à toutes ces actions, nous veillerons à ce que la figure aux bords arrondis ait la taille et la forme dont nous avons besoin :

7. Tout en maintenant la touche enfoncée Ctrl cliquez sur l'aperçu du calque dans le panneau des calques Calques(pour nous c'est un carré rouge). Cela nous permettra de sélectionner un rectangle rouge aux coins arrondis, comme en témoigne la ligne pointillée qui apparaît le long de sa bordure :

8. Dans le panneau des calques Calques allez au calque inférieur avec l'image principale et appuyez sur la combinaison Ctrl+Maj+I(ou Sélectionnez -> Inverse dans le menu principal de Photoshop). Cela mettra en évidence la zone située à l’extérieur du carré arrondi rouge.

9. Appuyez sur une touche du clavier Supprimer pour supprimer cette partie de l’image principale dont nous n’avons pas besoin. Après cela, rendez invisible la couche supérieure avec le carré rouge (dans le panneau Calques Cliquez sur l'icône en forme d'œil à côté du calque avec le carré rouge). Appuyez sur le clavier M et cliquez n'importe où sur la toile de dessin pour désélectionner l'image d'avatar terminée avec les coins arrondis. Si nous définissons l'arrière-plan sur transparent, nous obtenons ce qui suit :

10. Le dessin sans angles vifs est prêt. Vous pouvez également l'utiliser comme avatar ou illustration sur le site.

Si vous avez souvent besoin de réaliser des images avec des coins arrondis et qu'elles ont toutes la même taille et le même style, il serait logique de sauvegarder le résultat de cette leçon. Photoshop au format PSD afin que les calques restent modifiables. Ensuite, le processus de création de nouvelles images sans angles vifs sera simplifié en sélectionnant le contour de l'image terminée, en inversant la sélection et en supprimant la partie inutile de la nouvelle image.

Si vous devez arrondir un seul coin du motif, tandis que le reste doit rester net, les instructions ci-dessus sont également parfaites. Pour ce faire, utilisez simplement la combinaison Ctrl+T Le rectangle rouge est plus grand que l'image que vous modifiez. Dans ce cas, les bords du carré rouge se termineront à l'extérieur de la toile et un tel rectangle pourra être superposé au dessin de sorte qu'un seul coin chevauche la zone visible du dessin et que le reste reste à l'extérieur. En inversant et en supprimant la partie sélectionnée de l'image, nous arrondirons un seul coin souhaité de l'image et les coins restants resteront nets. De même, vous pouvez arrondir rapidement et facilement n’importe quel nombre de coins de n’importe quelle image.

De plus, pour créer une image avec des bords irréguliers ou tout autre effet similaire, vous pouvez utiliser une image avec de tels bords irréguliers ou coins arrondis, téléchargée à partir d'un site. Dans ce cas, vous devez supprimer l'arrière-plan qui n'est pas lié à l'image, par exemple à l'aide de l'outil Outil Baguette Magique (W).

Vous pouvez en savoir plus sur la promotion des applications mobiles sur le site advertmobile.net. Ce service propose des installations motivées en gros volumes pour l'application que vous avez développée, ainsi qu'une promotion compétente dans l'App Store et Google Play.

De nos jours, les images aux bords arrondis sont populaires. Ce n'est pas du tout difficile à faire, surtout si vous préparez un modèle pour des travaux ultérieurs.

Vous aurez besoin

• Programme Adobe Photoshop

Instructions

Ouvrez l'image avec laquelle vous souhaitez travailler dans Photoshop. Si finalement vous avez besoin d'un dessin d'une taille différente de l'original, réduisez-le ou découpez le fragment souhaité. Pour sélectionner l'image entière, utilisez le raccourci clavier Ctrl+A. Copiez-le en utilisant le raccourci clavier Ctrl+C. Créez un nouveau document dans Photoshop et collez-y le contenu du presse-papiers à l'aide du raccourci clavier Ctrl+V. L'arrière-plan du document doit être transparent ou de la couleur qui entourera éventuellement votre dessin une fois les bords arrondis.

À l’aide du raccourci clavier Ctrl+Shift+N, créez un nouveau calque. Sélectionnez l'outil Rectangle arrondi et dessinez un rectangle ou un carré de la taille souhaitée. La couleur de fond de ce rectangle n'a pas d'importance. Définissez le paramètre Rayon, qui caractérise le degré d'arrondi des coins, par exemple 9. Vous pouvez déplacer la forme dessinée à l'aide du clavier à l'aide des touches fléchées. A l'aide du raccourci clavier Ctrl+T vous pouvez modifier la forme de cette forme. Si vous appuyez sur la touche Maj lors de la modification de la forme d'une figure, la taille changera proportionnellement. Assurez-vous que cette forme correspond exactement à celle que vous souhaitez.

Appuyez sur la touche Ctrl et cliquez sur la vignette du calque dans la palette Calques. Après cela, la forme que vous avez dessinée sera mise en surbrillance.

Activez le calque inférieur et dans le menu principal exécutez la commande Select – Inverse. Après cela, sélectionnez la zone située à l’extérieur de la figure que vous avez dessinée.

Utilisez la touche Suppr pour supprimer la partie de l’image dont vous n’avez pas besoin. Rendre la couche supérieure invisible. Cliquez n'importe où sur l'image pour la désélectionner. La photo aux bords arrondis est prête

Si vous devez souvent arrondir les bords de l'image et qu'ils ont la même taille, vous pouvez enregistrer l'image que vous venez de créer au format PSD afin que les calques restent. Après cela, pour créer une image aux coins arrondis, vous devrez sélectionner le contour de l'image finie, inverser la sélection et supprimer la partie inutile.

Astuce ajoutée le 6 juillet 2011 Astuce 2 : Comment arrondir les bords dans Photoshop Adobe Photoshop propose une large gamme d'outils pour éditer des photos et créer de nouvelles images à partir de zéro. L'un des principaux outils consiste à sélectionner des objets individuels pour les couper et les coller ultérieurement, ainsi que pour créer des transitions fluides lors de la création de divers effets. C’est là que la possibilité d’arrondir les bords s’avère très utile.

Instructions

Dans Adobe Photoshop, ouvrez le menu Fichier, puis Ouvrir. Sélectionnez l'image sur laquelle vous allez travailler. Vous pouvez simplement faire glisser l'image dans la fenêtre de travail du programme avec la souris.

Sélectionnez Lasso dans la barre d'outils. En cliquant avec le bouton droit sur l'icône de l'outil, vous pouvez sélectionner « Lasso rectangulaire » ou « Lasso magnétique » dans le menu déroulant. Si l'arrière-plan de l'image est monochrome, vous pouvez le sélectionner rapidement à l'aide de la « Baguette magique » située sous l'outil « Lasso ». Sélectionnez la zone du dessin dont vous avez besoin.

Vous pouvez ajuster les limites de la sélection à l'aide de l'outil Masque rapide. Il est généralement situé tout en bas de la barre d’outils standard. A l'aide d'un pinceau ou d'une gomme, sélectionnez les zones dont vous avez besoin (la gomme soustraira la zone de la sélection, et le pinceau, au contraire, l'ajoutera). Cliquez à nouveau sur le masque rapide. Vous disposez désormais d’une sélection la plus proche possible de ce que vous souhaitiez.

Il ne reste plus qu'à arrondir les bords pour rendre la transition plus douce. Pour ce faire, passez à nouveau en mode sélection (en cliquant sur n'importe quel outil de sélection). Sur le panneau supérieur, vous verrez le bouton « Affiner ». bord..." Cliquez dessus. Dans la fenêtre qui s'ouvre, vous pouvez régler le rayon de détection des bords de sélection. De plus, en déplaçant les curseurs pour ajuster le lissage, l’adoucissement et le contraste, vous pouvez obtenir le degré de ces effets dont vous avez besoin. Pour agrandir ou réduire la sélection, utilisez l'outil Déplacer le bord.

Vous pouvez maintenant faire ce que vous voulez avec l'objet sélectionné : le découper ou ajouter un effet à l'arrière-plan ou à l'objet lui-même.

Comment arrondir les bords dans Photoshop - Version imprimable

Tous les navigateurs modernes prennent en charge les normes de balisage hypertexte HTML5 et les styles de conception CCS3. Et si votre site (modèle) prend en charge les normes modernes, vous pouvez alors apporter des modifications à la conception, telles que des coins arrondis, des ombres, des remplissages dégradés, sans recourir à des éditeurs graphiques.

Partout dans le monde, les webmasters utilisent des coins arrondis sur les blocs et les cadres des sites Web. Dans cet article, je vais vous expliquer comment arrondir les coins des images et des photographies d'un site Web sans utiliser de programmes tiers, uniquement en utilisant CSS.

Pour que les exemples donnés dans l'article s'affichent correctement sur votre écran, vous devez utiliser les dernières versions des navigateurs, FireFox, Chrome et ceux qui en découlent : Yandex.Browser, Amigo, etc.

Arrondir les coins des blocs DIV

Selon la norme CSS3, pour que le bloc DIV avait des coins arrondis, il doit être stylé rayon de frontière, par exemple comme ceci :

Rayon de bordure : 10 px ;

Pour plus de clarté, dessinons deux blocs aux coins droits et arrondis :

Bloc à angles droits

Bloc aux coins arrondis

Arrondir les coins des images

Par analogie avec l'exemple ci-dessus, vous pouvez arrondir les coins des images du site, par exemple des photographies. Pour plus de clarté, arrondissons les coins de la photo de la page

Voici l'image sans traitement CSS

Et maintenant avec des coins arrondis :

Rayon de bordure : 10 px ;

Pour que ce soit vraiment « beau », ajoutons un liseré dès le début...

Rayon de bordure : 10 px ; bordure : 5px #ccc solide ;

et puis les ombres :

Rayon de bordure : 10 px ; bordure : 5px #ccc solide ; ombre de la boîte : 0 0 10px #444 ;

L'option ci-dessous (coins arrondis avec ombre sans bordure) ressemble beaucoup à un tapis de souris :

Rayon de bordure : 10 px ; ombre de la boîte : 0 0 10px #444 ;

Et finalement, une dérision totale de l'image

Rayon limite : 50 % ; bordure : 5px #cfc solide ; ombre de la boîte : 0 0 10px #444 ;

Si vous ouvrez l'image dans une nouvelle fenêtre, vous verrez qu'elle (l'image) est inchangée et que tous les coins, ombres, etc. ne sont que le résultat du traitement. CSS styles par votre navigateur.

Une petite digression lyrique

Style frontière augmente la taille de l'image de la taille de la bordure. Si une valeur est spécifiée bordure : 5px, l'image finale deviendra alors plus large et plus haute de 10 pixels. Gardez cela à l’esprit, dans certains cas, la mise en page du site peut ne pas fonctionner.

Un style boîte-ombre n'affecte pas la taille de l'image, l'ombre semble courir sur les éléments voisins. Lors de son utilisation, la mise en page du site n'en souffre pas.

Comment arrondir les coins des images dans WordPress

Dans tous les exemples ci-dessus, j'ai écrit des styles directement dans les balises du code HTML. Par exemple, le dernier ressemble à ceci :

C'est bien lorsque vous devez réorganiser une image ou une photographie. Et si vous vouliez tout changer ? Eh bien, vous n’allez pas parcourir tout votre site pour modifier l’affichage de chacun. Dans la plupart des cas, la balise WordPress IMG définit plusieurs classes de style. Un par le nom unique du fichier image, un autre par taille et un autre par alignement. Vous pouvez compléter l'un d'entre eux avec les paramètres ci-dessus.

Par exemple, pour toutes les images pour lesquelles l'alignement n'est pas spécifié, dans le fichier style.css Pour votre thème WordPress, saisissez ce qui suit :

Alignnone ( border-radius : 10px ; border : 5px #cfc solid ; box-shadow : 0 0 10px #444 ; )

Soit la méthode la plus stricte pour toutes les photos du site. Redéfinissons le style de toutes les balises IMG:

Img ( border-radius : 10px ; border : 5px #cfc solid ; box-shadow : 0 0 10px #444 ; )

La dernière option convient non seulement à WordPress, mais à n’importe quel CMS. Et même pour simple HTML pages dans le cas où, lors de l'affichage des images, la balise IMG aucune classe de style n'est attribuée. Mais soyez prudent. Si vous remplacez les options d'affichage des balises IMG vous changerez l'apparence de TOUTES les images du site !

Au lieu d'une conclusion

Tous les exemples de l'article sont conditionnels et visent uniquement à démontrer certaines des capacités du CSS pour le traitement d'images et à montrer à quel point c'est simple.

Cette leçon est assez simple, mais le résultat sera agréable à l'œil : des coins arrondis et soignés de vos photos. Et cela est très facile à réaliser si vous avez une version d'Adobe Photoshop dans votre arsenal et une photo à traiter.

L'arrondi des coins d'une image se déroule en plusieurs étapes :

1. Ouvrez l'image dans Photoshop. Pour ce faire, cliquez sur « Fichier » et « Ouvrir » ou sur le raccourci clavier Ctrl + O.


2. Créez un nouveau calque en cliquant sur Calques, puis sur Nouveau calque.


3. Sur le côté gauche du programme se trouve une barre d'outils verticale. Vous y trouverez l'outil Rectangle. Nous n’en avons pas besoin pour le moment, alors faites un clic droit dessus et sélectionnez l’outil « Rectangle arrondi ».


4. Un panneau de paramètres pour cet outil apparaîtra en haut du programme. Ici, vous pouvez définir le rayon d'angle souhaité, c'est-à-dire vous pouvez augmenter ou diminuer l'arrondi. La valeur par défaut est de 10 pixels. Veuillez noter que pour utiliser l'outil, vous devez avoir activé l'option « Contours », qui se trouve également dans le panneau des paramètres.


5. Sélectionnez l'image entière, en commençant par le coin supérieur gauche et en terminant par le coin inférieur droit.


6. Faites un clic droit sur l'image et sélectionnez l'option « Créer une sélection ». Une ligne de sélection en pointillés apparaîtra.


7. Allez maintenant dans la barre d'outils horizontale et ouvrez l'onglet "Sélection", puis sélectionnez "Inverser".




8. Maintenant, tout est inversé - ce n'est pas l'image elle-même qui est sélectionnée, mais les coins inutiles. Pour les supprimer, appuyez simplement sur la combinaison de touches Ctrl+Suppr de votre clavier.


9. Désélectionnez-le maintenant en appuyant sur Ctrl+D sur votre clavier. Profitez du résultat!


N'oubliez pas de sauvegarder la photo terminée sur votre ordinateur.