Photoshop comment faire des coins arrondis. Comment créer rapidement des coins arrondis d'une image, d'une photographie ou de tout autre objet 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.
Dernière mise à jour : 18/01/16
Comment arrondir les coins d'une image dans Photoshop
Lors de la conception de blogs, j'ai à plusieurs reprises arrondi les coins des images, mais ce qui n'est pas fait si souvent et pas assez automatiquement est vite oublié. Et je me suis encore plaint de la nécessité de décrire tout de suite le travail effectué. Par conséquent, maintenant, presque sans délai, je vais décrire la séquence d'actions. Certes, à cause de la maladie, les « pistes chaudes » n'étaient plus chaudes.
Pour ceux qui aiment tout regarder, une petite vidéo sur « comment arrondir les coins dans Photoshop » :
Tout d'abord, vous avez besoin de Photoshop. Où l'obtenir, il y a deux options :
- acheter sur le site officiel
- trouver sur les torrents
Quelle option choisir dépend de vous.
Alors, lançons Photoshop. Ouvrez l'image dont les coins doivent être arrondis dans Photoshop (Fichier → Ouvrir). Si les dimensions de l'image sont plus grandes que nécessaire, vous pouvez modifier les dimensions (Image → Taille de l'image).
A droite, dans l'image d'aperçu, il y a un petit verrou qui bloque l'édition de l'image originale (calque d'arrière-plan). Pour créer un nouveau calque et travailler avec, double-cliquez dessus avec le bouton gauche de la souris, ne changez rien dans la fenêtre qui apparaît, cliquez sur « Oui ».
S'il n'y a pas de verrou, alors deux choses sont possibles :
ou dans votre version de Photoshop le calque d'arrière-plan peut être modifié (ce qui est douteux, mais du coup)
ou ce qui précède peut être fait en utilisant une autre opération : depuis le haut, dans la barre de menu, sélectionnez « Calques », dans le sous-menu qui s'ouvre, sélectionnez « Nouveau » et suivez la flèche - « depuis l'arrière-plan », et dans la même fenêtre qui s'ouvre, cliquez sur « Oui ».
Sélectionnez «Rectangle aux coins arrondis» dans les outils.
Sélectionnez le mode en haut du panneau de paramètres : « Contours ». Définissez le rayon pour arrondir les coins dans Photoshop. J'ai choisi 40 pixels, vous pouvez choisir celui qui convient à votre photo.
Dessinez un rectangle de la taille souhaitée dans l'image : placez le curseur (il prend la forme d'une croix) au point souhaité en haut à gauche et, sans relâcher le bouton de la souris, déplacez-vous vers le coin opposé au point souhaité. Notre image présente un rectangle transparent aux coins arrondis.
Faites un clic droit sur le rectangle. Dans le menu contextuel, sélectionnez « Créer une zone sélectionnée », définissez le rayon d'adoucissement sur 1 pixel et cliquez sur le bouton « Oui ».
A l'aide du menu Sélectionner → Inverser, sélectionnez tout ce qui se trouve en dehors du rectangle arrondi et supprimez la sélection avec la touche Suppr.
Si vous n'avez pas superposé de rectangle sur toute l'image, l'arrière-plan transparent en excès peut être supprimé à l'aide de la séquence de commandes Image → Recadrage → Basé sur des pixels transparents → Oui.
Nous avons reçu une photo aux coins arrondis. Nous l'enregistrons pour le Web : Fichier → Enregistrer pour le Web et les appareils. Sélectionnez Préréglage : PNG-24, Transparence et cliquez sur Enregistrer. Au format PNG-24, l’image est enregistrée avec un arrière-plan transparent afin de pouvoir être intégrée dans n’importe quelle conception de site Web. 
La même chose peut être faite avec l'outil Ellipse, vous obtiendrez alors une image ronde ou dans un cadre elliptique.
Ainsi, aujourd'hui, nous avons appris à arrondir les coins de n'importe quelle image dans Photoshop.
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.
CTRL+N, ou sélectionnez la fonction « Créer » dans la liste déroulante du menu « Fichier ». Ensuite, dans la même liste, sélectionnez l'opération « Importer » ou appelez-la avec la combinaison de touches CTRL+I. Ensuite, spécifiez le chemin d'accès au fichier image dans la boîte de dialogue et cliquez sur le bouton « Importer ». Le vôtre sera affiché sur celui-ci.
Dans la barre d'outils, recherchez le panneau déroulant « Éditeur de nœud » et sélectionnez l'outil « Forme ». Cet outil peut également être appelé en appuyant sur la touche F10.
A droite du coin que vous devez arrondir, faites un clic gauche sur le bord de l'image. Un nouveau nœud apparaîtra dans l'image, en plus de ceux des quatre coins. Ensuite, sélectionnez l'option Convertir la ligne en courbe dans le panneau Editeur de nœuds. Des marques rondes apparaîtront à gauche du nœud nouvellement créé.
À la même distance du coin, ajoutez un nouveau nœud sur le côté perpendiculaire de l'image. Sans changer l'outil Forme, double-cliquez sur le nœud du coin principal, il sera supprimé. Le coin arrondi de l’image deviendra immédiatement visible. Vous pouvez utiliser les repères de ligne droite pour modifier le rayon du coin.
De manière très simple (à l'aide d'un objet vectoriel) vous pouvez tout faire angles dans une image rectangulaire. Sans recourir à la méthode d'édition de nœuds ci-dessus, dessinez un rectangle de même taille à côté de l'image importée avec l'outil Rectangle ou appelez l'outil avec la touche F6.
Avec l'outil « Forme » que vous connaissez déjà, cliquez sur le rectangle et faites glisser la souris sur l'un de ses nœuds vers le rectangle. Les coins seront arrondis. Le rayon de courbure peut être ajusté avec le même outil.
Marquez votre image avec la flèche de l'outil de sélection.
Ensuite, dans la liste du menu principal, recherchez le panneau déroulant « Effets » et sélectionnez l'option « PowerClip » et la fonction « Placer à l'intérieur du conteneur » dans la liste déroulante. Utilisez une large flèche pour pointer vers le rectangle que vous avez dessiné avec des coins arrondis. Il deviendra le cadre dans lequel votre image sera placée.
Veuillez noter
Notez que l'importation d'une image dans un document Corel Draw ne modifie pas le fichier image d'origine. Vous pouvez donc l'utiliser sous sa forme originale si vous n'êtes pas satisfait du résultat aux coins arrondis.
Conseils utiles
À l'aide de la fonction PowerClip, vous pouvez placer des images dans une variété de cadres aux formes les plus bizarres.
Sources :
- Guide officiel de Corel Draw, M. Matthews, K. Matthews, 1997
- Comment lisser les angles vifs ?
Vous aurez besoin
- - ordinateur
- - Programme Adobe Photoshop
- - photo
Instructions
Faites un clic droit sur le calque d'arrière-plan, sélectionnez Dupliquer le calque et cliquez sur OK (ou Ctrl+J). Créez ensuite un nouveau calque (Ctrl+Shift+N), placez-le entre l'arrière-plan et sa copie comme indiqué dans la capture d'écran (vous pouvez le remplir avec de la couleur, par exemple du blanc). Désactivez le calque verrouillé (cliquez sur « l’œil » à gauche) ou supprimez-le.
Dans la palette d'outils, recherchez le bouton avec un rectangle (outil Rectangle) et maintenez-le enfoncé avec le bouton gauche de la souris. Un menu supplémentaire apparaîtra là où vous en avez besoin (outil Rectangle arrondi). Définissez les paramètres dans la partie supérieure comme dans la capture d'écran et modifiez le champ Rayon à votre guise (plus il est grand, plus les coins seront arrondis et plus l'image sera recadrée.
Sélectionnez ensuite la partie de la photo que vous souhaitez utiliser (par exemple comme avatar). Si vous faites une erreur, appuyez sur la touche Échap et répétez la sélection. Une fois le fragment souhaité sélectionné, cliquez dessus avec le bouton droit et sélectionnez Effectuer une sélection... et cliquez sur OK.
C'est fait, vous avez un calque photo aux coins arrondis. Désormais, le calque 2 (celui qui sert d'arrière-plan) peut être rempli de n'importe quelle couleur ou laissé transparent.
Vidéo sur le sujet
Veuillez noter
Les fichiers png transparents sont un excellent format, mais tous les services en ligne (réseaux sociaux, blogs, etc.) ne prennent pas en charge les fichiers png transparents. Si l'effet des coins arrondis ne fonctionne pas, il existe une autre solution.
Sélectionnez une couleur pour l'arrière-plan (Couche 2) la plus proche de la couleur de la page où vous placez la photo. Enregistrez ensuite le fichier au format jpg.
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