Tous navigateurs modernes normes de support balisage hypertexte Style HTML5 et CCS3. Et si votre site (modèle) prend en charge normes modernes, vous pouvez alors apporter des modifications à la conception telles que des coins arrondis, des ombres, remplissage en dégradé 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 photographies du site sans utiliser programmes tiers, en utilisant uniquement CSS.

Pour que les exemples donnés dans l'article s'affichent correctement sur votre écran, vous devez utiliser le plus dernières versions navigateurs, FireFox, Chrome et ceux créés à partir de ceux-ci : 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

Bloquer avec 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 balises html code. 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, balise WordPress IMG définit plusieurs classes de style. Un par un nom unique fichier avec une image, de taille différente, et également alignée. 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 le vôtre Thèmes WordPressécrivez ce qui suit :

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

Soit le plus méthode difficile pour tous ceux qui ont une photo sur le 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 fais attention. Si vous remplacez les options d'affichage des balises IMG tu vas changer apparence TOUTES les photos sur le 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.

Maintenant, les images de des 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.

Tu auras besoin de

• 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éer 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, faites Nouvelle Couche. Sélectionnez l'outil Rectangle arrondi et dessinez un rectangle ou un carré. la bonne taille. 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.

Cliquez sur 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.

Activer couche inférieure 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 dans Format PSD, de sorte que les couches 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 Programme 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. 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 glisser et déposer l'image dans fenêtre de travail programmes avec la souris.

Sélectionnez Lasso dans la barre d'outils. En cliquant clic-droit Passez la souris 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 alors le mettre en évidence rapidement en utilisant « baguette magique"situé 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 panneau standard outils. 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 panneau du haut vous verrez le bouton « Ajouter. bord..." Clique 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

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.

Très d'une manière simple(avec la participation objet vectoriel) tout est permis anglesà 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.

note

Veuillez noter que lorsque vous importez une image dans un document Corel Draw fichier original L'image n'est pas modifiée, vous pouvez donc l'utiliser dans sa forme originale si vous n'êtes pas satisfait du résultat des coins arrondis.

Conseil utile

À 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 sur le travail avec Corel Draw, M. Matthews, K. Matthews, 1997
• Comment lisser les angles vifs ?

Tu auras besoin de

• - ordinateur
• - Programme Adobe Photoshop
• - photo

Instructions

Faites un clic droit sur Couche 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. apparaîtra menu supplémentaire si nécessaire (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 goût (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, cliquez 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

note

Les fichiers png transparents sont un excellent format, mais tous les services en ligne ne le sont pas ( réseaux sociaux, blogs, etc.) prennent en charge les fichiers png transparents. Si l'effet des coins arrondis ne fonctionne pas, il existe une autre solution.

Sélectionnez pour arrière-plan(Couche 2) est la couleur la plus proche de celle définie sur la page où vous placez la photo. Enregistrez ensuite le fichier au format jpg.

Dans ce court tutoriel, je vais vous montrer comment créer des coins arrondis dans Photoshop en utilisant méthodes simples masquage et filtres.

Vous pouvez ajuster le rayon du coin pour arrondir le bord de votre forme, texte, etc. Il s'agit d'une méthode simple et rapide qui permettra de créer des coins arrondis. Pour les créer, vous pouvez utiliser un masque de calque.

Utiliser une série étapes simples dans Photoshop, vous pouvez créer un rectangle aux coins arrondis. Photoshop n'a pas de filtre ni d'outil pour créer immédiatement coin rond mais tu peux le faire avec en utilisant Illustrator. Il vous permettra de créer un effet de coin arrondi pour presque tous les objets. Dans celui-ci, vous devez aller au menu Effets > Stylisation > Coins arrondis(Effets > Styliser > Coins arrondis).

Étape 1

En cela leçon rapide Je vais vous montrer une méthode simple qui vous permettra de créer des coins arrondis dans Photoshop en utilisant du texte pixellisé, une forme ou une image. Prenons image vectorielle des étoiles avec des angles vifs (cette méthode fonctionnera également bien avec des angles droits).

Étape 2

Vous devez maintenant pixelliser le calque. Pour ce faire, faites un clic droit sur la vignette du calque étoile dans la palette des calques et dans menu contextuel sélectionner Pixelliser le calque(Rasteriser le calque). Vous devriez faire de même si vous utilisez un calque de texte.

Étape 3

Aller au menu Filtre > Flou(Filtre > Flou) et sélectionnez flou gaussien(Flou gaussien). Le rayon de flou dépendra de la taille de votre image et du résultat que vous souhaitez obtenir. Je choisirai un rayon de 5 pixels.

Étape 4

Maintenez la touche Ctrl enfoncée et cliquez sur la vignette du calque pour activer la sélection d'image. Ensuite, nous allons au menu Sélection et choisissez Améliorer le contour(Sélectionnez > Affiner le contour). Vous pouvez expérimenter avec les paramètres Anti crénelage(Lisse) et Ombres(Plume) pour sélectionner l’effet souhaité. Contraste(Contraste) faites-en 100.

Étape 5

Prenez la couleur de la forme, dans notre cas c'est jaune et remplissez toute la sélection avec cette couleur. Vous pouvez le faire en appuyant sur la combinaison de touches « Shift + F5 ».

Étape 6

Sans supprimer la sélection, vous devez ajouter un masque de calque en cliquant sur l'icône qui se trouve en bas de la palette des calques. C'est tout, maintenant la star a des coins arrondis.

Vous pouvez utiliser la même méthode pour créer du texte avec des coins arrondis, comme indiqué dans l'image ci-dessous. Vous pouvez maintenant créer votre propre police.

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 ;

Réception de l'original et Beau design 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 en créant d'abord un nouveau document avec dimensions données, déplacez-y 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 résultant se chevauche 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 plus simple et façon rapide comment arrondir les bords dans Photoshop. C’est maintenant à votre imagination de décider où vous pouvez appliquer vos nouvelles connaissances.