Maison / Skype / Couleur PNG. Remplacement d'une couleur d'image spécifique par une couleur spécifiée en ligne

Couleur PNG. Remplacement d'une couleur d'image spécifique par une couleur spécifiée en ligne

L'essentiel est de spécifier une image sur votre ordinateur ou votre téléphone, de sélectionner les couleurs que vous souhaitez remplacer, d'appuyer sur le bouton OK en bas de la page, d'attendre quelques secondes et de télécharger le résultat final.

Photo d'une rose inchangée et avec la couleur rose remplacée par : violet, bleu, turquoise, vert Et jaune:


Les paramètres suivants ont été utilisés pour créer les exemples ci-dessus : " Couleur de remplacement" - "rose", " Couleur à remplacer" - "violet" (pour le prochain traitement "bleu", etc.), " Intensité de remplacement de couleur" - "45".

Si tout devient une seule couleur, si trop de choses sont remplacées ou si d'autres couleurs sont affectées, vous devez alors réduire «l'intensité de remplacement des couleurs». A l'inverse, si aucun changement n'est visible ou si la couleur n'est pas complètement remplacée, alors vous devez augmenter l'« Intensité de remplacement des couleurs », et également vous assurer que vous avez correctement indiqué les couleurs et que vous n'avez pas confondu, par exemple, le rouge avec le rose. Pour une spécification de couleur plus précise, vous pouvez utiliser le format HEX. Pour différentes images, les paramètres peuvent être différents, cela dépend à la fois de la couleur et de la taille en pixels.

Veuillez noter que vous ne pouvez pas remplacer noir, gris ou couleur blanche sur quelques couleur saturée, mais vous pouvez remplacer une couleur saturée par une couleur presque blanche, noire ou grise. En termes simples, vous pouvez remplacer n'importe quelle couleur de l'arc-en-ciel ou proche des couleurs disponibles dans les listes déroulantes des paramètres. La raison en est que l’algorithme de remplacement des couleurs est lié au changement de tonalité, qui n’affecte pas les images en niveaux de gris ou en noir et blanc. Si vous devez traiter grande image plus de 14 mégapixels (≈4592x3048), puis envoyez-le à la boîte aux lettres avec les paramètres dont vous avez besoin - cela sera fait gratuitement dans la journée.

L'image originale n'est en aucun cas modifiée. Vous recevrez une autre image traitée.

1) Spécifiez une image au format BMP, GIF, JPEG, PNG, TIFF :

2) Paramètres de remplacement des couleurs
Couleur de remplacement : rouge rose violet bleu turquoise ciel vert lime jaune orange ou au format HEX : palette ouverte

Couleur à remplacer : rouge rose violet bleu turquoise ciel vert lime jaune orange noir gris blanc ou au format HEX : ouvrez la palette Intensité de remplacement des couleurs : (de 1,0 à 100,0)

Lissage des transitions de couleurs nettes : (0-50)

Gain de couleur remplacé : (1-100)

En fait il y a de nombreuses façons de changer la couleur d'un objet dans Photoshop. Plus tôt, nous avons déjà vu comment procéder avec et également appris comment changer la couleur des cheveux dans Photoshop avec.

Ce ne sont pas toutes des méthodes, aujourd'hui j'en montrerai deux très simples, et dans les prochains articles je parlerai de quelques méthodes supplémentaires utilisant d'autres calques de réglage.

Méthode numéro 1

Décrivez brièvement l'application de cette méthode. Ouvrez l'image et créez un nouveau calque (rappelez-vous toutes les astuces).

Modifiez ensuite le mode de fusion de ce calque en choisissant Teinte dans la liste déroulante en haut de la palette Calques (située en bas de la liste).

Après cela, sélectionnez en appuyant sur la touche B, cliquez sur l'indicateur de couleur de premier plan, dans la boîte de dialogue de la palette qui apparaît, sélectionnez une teinte et cliquez sur le bouton OK. Avec le nouveau calque sélectionné, peignez sur l’objet.

Si vous peignez trop, vous pouvez sélectionner temporairement l'outil Gomme en appuyant longuement sur la touche E. Et vous pouvez éviter de telles situations à l'avance en ajoutant un masque de calque au nouveau calque et en masquant les zones qui n'ont pas besoin d'être modifiées avec du noir.

Note

Si la zone à repeindre est entourée de couleurs noir, blanc et gris, vous pouvez peindre ces dernières en toute sécurité et elles ne changeront pas du tout. En effet, dans le mode de fusion Teinte, les zones remplies de couleur affectent uniquement les zones du calque sous-jacent qui contiennent déjà de la couleur.

Méthode numéro 2

Vous vous souvenez de la commande de menu ? Commande de menu similaire Remplacer la couleur peut être utilisé pour mettre en valeur une teinte et la remplacer par une autre. Cette commande fonctionne très bien si la couleur à remplacer est plus ou moins uniforme et concentrée dans une zone, comme la carrosserie de la voiture sur l'image ci-dessus.

Sélection de la commande dans le menu Image - Correction - Remplacer la couleur, vous verrez la boîte de dialogue du même nom.

L'outil Pipette est déjà sélectionné, alors cliquez sur la teinte de l'image que vous souhaitez remplacer. Il apparaîtra dans un carré avec l'inscription Couleur dans un groupe de contrôles Sélection en haut de la boîte de dialogue.

Dans un groupe de contrôles Remplacement en bas de la boîte de dialogue, cliquez sur le carré situé au dessus de l'inscription Résultat pour sélectionner une nouvelle teinte. Lorsque vous cliquez sur le bouton OK. Si vous devez corriger la teinte sélectionnée, vous pouvez utiliser les curseurs Tonalité de couleur, Saturation Et Luminosité(également présent dans le groupe Contrôles de sélection). Voici ce qui s'est passé :

Veuillez noter qu'en plus d'une pipette ordinaire, il existe des pipettes avec de petits signes "+" (plus) et "-" (moins) à proximité. Utilisez-les pour élargir/réduire la gamme de nuances que vous souhaitez modifier.

Comme vous pouvez le voir, j'en ai un peu exagéré et les roues de ma voiture sont également devenues violettes. Ceci suggère que cette méthode peut ne pas toujours être utile.

Vous avez remarqué une erreur dans le texte - sélectionnez-la et appuyez sur Ctrl + Entrée . Merci!



Changer la couleur de l'image PNG via CSS ? (dix)

Modifier--

Font-Awesome utilise différents noms de classe dans nouvelle version, probablement parce que cela réduit considérablement la taille des fichiers CSS et évite les classes CSS ambiguës. Alors maintenant, vous devez utiliser :

Il n'est pas nécessaire de définir la police entière si vous ne voulez qu'une seule icône, et je pense qu'elle est plus "propre" en tant qu'élément autonome. Ainsi, à cet effet en HTML5, vous pouvez placer le SVG directement dans le flux de documents. Vous pouvez ensuite définir la classe dans votre feuille de style .css et accéder à sa couleur de fond à l'aide de la propriété fill :

Notez que dans l'exemple que j'ai utilisé :hover pour illustrer le comportement ; si vous souhaitez simplement changer la couleur de l'état "normal", vous devez supprimer la pseudo-classe.

Je réponds parce que je cherchais une solution à ce problème.

le stylo dans @chrscblls répond bien si vous avez un fond blanc ou noir, mais pas le mien. De plus, les images ont été générées avec ng-repeat, je ne pouvais donc pas avoir mon URL dans mon CSS et vous ne pouvez pas utiliser ::after sur les balises img.

J’ai donc décidé de m’impliquer et j’ai pensé que cela pourrait aider les gens s’ils trébuchaient également par ici.

J'ai donc fait à peu près la même chose avec trois différences majeures :

  • url qui est dans ma balise img, je la mets (et étiquette) dans un autre div sur lequel :: après le travail.
  • "mix-blend-mode" est réglé sur "différence" au lieu de "multiplier" ou "écran".
  • J'ai ajouté un ::before avec exactement la même valeur pour que ::after fasse la "différence" des "différences" faites par ::before et l'annule.

Pour le changer du noir au blanc ou du blanc au noir, la couleur de fond doit être blanche. Du noir à la couleur, vous pouvez choisir n'importe quelle couleur. Du blanc à la couleur, vous devez cependant choisir la couleur opposée à celle que vous souhaitez.

DivClass( position : relative ; largeur : 100 % ; hauteur : 100 % ; alignement du texte : gauche ; ) .divClass:hover::after, .divClass:hover::before( position : absolue ; largeur : 100 % ; hauteur : 100 % ; arrière-plan : #FFF ; mix-blend-mode : différence ; contenu : "" ; )

Les balises img ont une propriété d'arrière-plan comme les autres. Si vous avez un PNG blanc avec une forme transparente, comme un pochoir, vous pouvez faire ceci :

Pour changer littéralement la couleur, vous pouvez inclure une transition CSS avec un filtre -webkit où, lorsque quelque chose se produit, vous utiliserez le filtre -webkit de votre choix. Par exemple:

Img ( -webkit-filter: niveaux de gris (0%); transition: -webkit-filter .3s linéaire; ) img: survol ( -webkit-filter: niveaux de gris (75%); )

J'ai trouvé cet excellent exemple de codepen que vous avez mis dans une valeur couleur hexagonale, et il renvoie le filtre requis pour appliquer cette couleur au png

par exemple, j'avais besoin que mon png ait la couleur suivante #1a9790

alors vous devez vous appliquer le filtre png suivant

Filtre : inverser (48 %) sépia (13 %) saturer (3 207 %) teinte-rotation (130 degrés) luminosité (95 %) contraste (80 %) ;

J'ai pu le faire avec un filtre SVG. Vous pouvez écrire un filtre qui multiplie la couleur de l'image originale par la couleur que vous souhaitez modifier. Dans l'extrait de code ci-dessous couleur d'inondation est la couleur avec laquelle nous voulons changer la couleur de l'image (dans ce cas, c'est le rouge). FeComposite indique au filtre comment nous traitons la couleur. La formule feComposite avec arithmétique est (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4) où i1 et i2 sont respectivement les couleurs d'entrée pour in/in2. Donc, spécifier uniquement k1 = 1 signifie que cela ne fera que i1 * i2, ce qui signifie multiplier les deux couleurs d'entrée ensemble.

Note. Cela ne fonctionne qu'avec HTML5 car il utilise le SVG en ligne. Mais je pense que vous pouvez faire fonctionner cela avec un ancien navigateur en mettant le SVG dans fichier séparé. Je n'ai pas encore essayé cette approche.

Voici un extrait :

Si vous devez modifier le fichier dans Format PNG, beaucoup sont pressés de télécharger Photoshop, qui est non seulement distribué sur une base payante, mais aussi assez gourmand en ressources informatiques. Tous les anciens PC ne sont pas capables de fonctionner avec cette application. Dans de tels cas, divers éditeurs en ligne viennent à la rescousse, vous permettant de redimensionner, redimensionner, compresser et effectuer de nombreuses autres opérations avec des fichiers.

Aujourd'hui, nous examinerons les sites les plus fonctionnels et les plus stables qui vous permettent de travailler avec des images PNG. Les avantages de ces services en ligne incluent le fait qu'ils ne sollicitent pas les ressources de votre ordinateur, puisque toutes les manipulations de fichiers sont effectuées à l'aide des technologies cloud.

Les éditeurs en ligne n'ont pas besoin d'être installés sur un PC, ce qui réduit considérablement le risque d'attraper un virus.

Méthode 1 : éditeur d'images en ligne

Le service le plus fonctionnel et le plus stable qui ne dérange pas les utilisateurs avec des publicités intrusives. Adapté à toute manipulation d'images PNG, absolument peu gourmand en ressources de votre ordinateur, peut être exécuté sur des appareils mobiles.

Les inconvénients du service incluent l'absence de langue russe. Cependant, avec une utilisation prolongée, cet inconvénient devient à peine perceptible.


Le site ne nécessite pas d'inscription, il est facile de gérer le service, même si vous ne connaissez pas l'anglais. N'ayez pas peur d'expérimenter, si quelque chose ne va pas, vous pouvez toujours l'annuler en un seul clic.

Méthode 2 : Photoshop en ligne

Les développeurs positionnent leur service comme un Photoshop en ligne. La fonctionnalité de l'éditeur est vraiment similaire à celle de l'application de renommée mondiale, elle prend en charge le travail avec des images dans différents formats, y compris PNG. Si vous avez déjà travaillé avec Photoshop, il ne sera pas difficile de comprendre les fonctionnalités de la ressource.

Le seul inconvénient du site, mais plutôt important, est le blocage constant, surtout si vous travaillez avec de grandes images.


Lors de la mise en œuvre manipulations simples travaillez avec le service de manière pratique et confortable. Si vous devez traiter un fichier volumineux, il est conseillé de télécharger et d'installer un logiciel spécial logiciel, ou soyez patient et préparez-vous à des gels constants du site.

Méthode 3 : photo

Un site pratique, fonctionnel et surtout gratuit pour travailler avec des images au format PNG Fotor vous permet de recadrer, de faire pivoter, d'ajouter des effets et d'utiliser d'autres outils. La fonctionnalité de la ressource a été testée sur des fichiers de différentes tailles et aucun problème n'a été détecté. Le site est traduit en russe, dans les paramètres vous pouvez sélectionner une langue différente pour l'interface de l'éditeur si nécessaire.

Accès à caractéristiques supplémentaires est fourni aux utilisateurs uniquement après l'achat d'un compte PRO.


Fotor est un outil puissant pour travailler avec le PNG : en plus d'un ensemble de les fonctions de base il contient de nombreux effets supplémentaires qui raviront même les utilisateurs les plus exigeants.

Les éditeurs de photos en ligne sont faciles à utiliser, ils ne nécessitent pas d'installation sur un ordinateur, grâce à quoi ils sont accessibles même avec appareil mobile. L'éditeur à utiliser dépend de vous.