Si vous devez éditer un fichier 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 vieux 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, mettre à l'échelle, compresser et effectuer de nombreuses autres opérations avec des fichiers.
Aujourd'hui, nous allons examiner 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, car toutes les manipulations de fichiers sont effectuées à l'aide de technologies cloud.
Les éditeurs en ligne n'ont pas besoin d'être installés sur un PC - cela réduit considérablement la probabilité 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. Convient pour toute manipulation d'images PNG, absolument peu gourmande en ressources de votre ordinateur, peut être exécuté sur des appareils mobiles.
Les inconvénients du service incluent l'absence de la langue russe, cependant, avec une utilisation prolongée, cet inconvénient devient subtil.
Le site ne nécessite pas d'inscription, il n'est pas difficile de comprendre 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 appuyant simplement sur un bouton.
Méthode 2 : Photoshop en ligne
Les développeurs positionnent leur service comme photoshop en ligne. La fonctionnalité de l'éditeur est vraiment similaire à l'application de renommée mondiale, il 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, mais assez important, du site est le blocage constant, en particulier lorsque vous travaillez avec de grandes images.
Lors de manipulations simples, travailler avec le service est pratique et confortable. Si vous devez traiter un fichier volumineux, il est conseillé de télécharger et d'installer un logiciel spécial sur votre PC, ou d'être patient et de vous préparer à des blocages constants du site.
Méthode 3: Fotor
Pratique, fonctionnel et surtout un site gratuit pour travailler avec des images au format PNG Fotor vous permet de recadrer, faire pivoter, ajouter des effets et 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é trouvé. Le site a été traduit en russe, dans les paramètres, vous pouvez sélectionner une autre langue pour l'interface de l'éditeur, si nécessaire.
L'accès à des fonctions supplémentaires est fourni aux utilisateurs uniquement après l'achat d'un compte PRO.
Fotor est un outil puissant pour travailler avec PNG : en plus d'un ensemble de fonctions de base, il contient de nombreux effets supplémentaires qui raviront même l'utilisateur le plus exigeant.
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 à partir d'un appareil mobile. L'éditeur à utiliser dépend de vous.
Existe réellement de nombreuses façons de changer la couleur d'un objet dans Photoshop... Auparavant, nous avons déjà vu comment faire cela à l'aide et avons également appris comment changer la couleur des cheveux dans Photoshop à l'aide.
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 autres méthodes utilisant d'autres calques de réglage.
Méthode numéro 1
Je parlerai brièvement de l'application de cette méthode. Ouvrez l'image et créez un nouveau calque (qui rappelle toutes les techniques).
Modifiez ensuite le mode de fusion de ce calque en choisissant Ton de couleur 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 nuance et cliquez sur le bouton OK. Avec un nouveau calque sélectionné, peignez sur l'objet.
Si vous peignez l'excédent, vous pouvez sélectionner temporairement l'outil Gomme en appuyant sur la touche E et en la maintenant enfoncée. Ou vous pouvez prévenir de telles situations à l'avance en ajoutant un masque de calque à un nouveau calque et en masquant les zones qui n'ont pas besoin d'être modifiées avec du noir.
Noter
Si la zone à recolorer est entourée de couleurs noir, blanc et gris, vous pouvez peindre en toute sécurité sur ces dernières, et elles ne changeront pas du tout. En effet, dans le mode de fusion Teinte, les zones remplies n'affectent que les parties du calque sous-jacent qui contiennent déjà de la couleur.
Méthode numéro 2
Vous vous souvenez de la commande de menu ? Une commande de menu similaire Remplacer la couleur peut être utilisé pour mettre en évidence une nuance 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 certaine zone, comme la carrosserie de la voiture sur la photo ci-dessus.
En choisissant la commande dans le menu Image - Correction - Remplacer la couleur, vous verrez une 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é étiqueté Couleur dans un groupe de contrôles Mise en évidence 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é 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 de contrôle Sélection). Voici ce qui s'est passé :
Veuillez noter qu'en plus d'une pipette ordinaire, il y a des pipettes à côté d'elles avec de petits signes "+" (plus) et "-" (moins). Utilisez-les pour élargir / rétrécir la gamme de nuances qui doivent être modifiées.
Comme vous pouvez le voir, j'en ai un peu exagéré et les roues de ma voiture sont également devenues violettes. Cela suggère que cette méthode peut ne pas toujours être utile.
Si vous avez remarqué une erreur dans le texte, sélectionnez-la et appuyez sur Ctrl + Entrée. Merci!
L'essentiel est de spécifier l'image sur votre ordinateur ou votre téléphone, de sélectionner les couleurs souhaitées pour le remplacement, de cliquer sur le bouton OK en bas de la page, d'attendre quelques secondes et de télécharger le résultat final.
Photo de la rose inchangée et avec la couleur rose remplacée par : violet, bleu, turquoise, vert et jaune:
Pour créer les exemples ci-dessus, les paramètres suivants ont été utilisés : " Couleur de remplacement" - "rose", " Couleur à remplacer"-" violet " (pour le prochain traitement " bleu ", etc.), " Intensité de remplacement de couleur" - "45".
Si tout devient monochrome, si trop de couleurs sont remplacées ou si d'autres couleurs sont touchées, vous devez réduire l'"Intensité du remplacement des couleurs". Inversement, si vous ne voyez aucun changement ou si la couleur n'est pas complètement remplacée, vous devez augmenter l'"Intensité du remplacement de la couleur", et assurez-vous également que vous avez spécifié les bonnes couleurs et que vous n'avez pas confondu, par exemple, le rouge avec rose. Le format HEX peut être utilisé pour spécifier la couleur avec plus de précision. 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 blanc pour certains couleur saturée, mais vous pouvez remplacer la couleur saturée par une couleur presque blanche, noire ou grise. En termes simples, vous pouvez remplacer toutes les couleurs de l'arc-en-ciel ou celles proches des couleurs disponibles dans les listes déroulantes des paramètres. La raison en est que l'algorithme d'échange de couleurs traite un changement de teinte qui n'affecte pas les niveaux de gris ou les niveaux de gris. Si vous devez traiter une grande image de plus de 14 mégapixels (≈4592x3048), envoyez-la dans la boîte avec les paramètres dont vous avez besoin - cela sera fait gratuitement dans les 24 heures.
L'image originale ne change en aucune façon. Une autre image traitée vous sera présentée.
Changer la couleur d'une image PNG via CSS ? (Dix)
Éditer--
Font-Awesome utilise des noms de classe différents dans la nouvelle version, probablement parce que cela rend les fichiers CSS considérablement plus petits et évite les classes CSS ambiguës. Alors maintenant, vous devez utiliser:
Il n'est pas nécessaire de définir toute la police si vous ne voulez qu'une seule icône, et je pense que c'est plus propre en tant qu'élément séparé. Ainsi, à cette fin en HTML5, vous pouvez placer le SVG directement dans le flux de documents. Ensuite, vous pouvez définir la classe dans la 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 voulez juste changer la couleur pour l'état "normal", vous devez supprimer la pseudo-classe.
Répondre parce que je cherchais une solution pour cela.
la poignée de @chrscblls répond bien si vous avez un fond blanc ou noir, mais je ne l'ai pas fait. De plus, les images ont été générées avec ng-repeat, donc je ne pouvais 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'attaquer et j'ai pensé que cela pourrait aider les gens s'ils trébuchaient ici aussi.
J'ai donc fait à peu près la même chose avec trois différences principales:
- url située dans ma balise img, je la mets (et son étiquette) dans une autre div sur laquelle :: après avoir travaillé.
- Le mode mix-blend est réglé sur la différence au lieu de multiplier ou de filtrer.
- J'ai ajouté un :: before avec exactement la même signification pour que :: after prenne la "différence" des "différences" faites par :: before et l'annule.
Pour passer 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 choisir la couleur opposée à celle que vous souhaitez.
DivClass (position : relative ; largeur : 100 % ; hauteur : 100 % ; text-align : gauche ;). 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 activer une transition CSS avec le 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 linear ;) img : survol (-webkit-filter : niveaux de gris (75%);)
J'ai trouvé cet excellent exemple de codepen que vous insérez dans value couleur hexadécimale, 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 (3207%) teinte-rotation (130deg) 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 dont on veut changer la couleur de l'image (dans ce cas, c'est le rouge). FeComposite indique au filtre comment nous traitons la couleur. La formule pour feComposite avec arithmétique est (k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4), où i1 et i2 sont les couleurs d'entrée pour in / in2, respectivement. Donc, spécifier uniquement k1 = 1 signifie qu'il ne fera que i1 * i2, ce qui signifie multiplier les deux couleurs d'entrée ensemble.
Noter. Cela ne fonctionne qu'avec HTML5 car il utilise le SVG en ligne. Mais je pense que vous devriez pouvoir faire cela avec un ancien navigateur en mettant le SVG dans un fichier séparé. Je n'ai pas encore essayé cette approche.
Voici un extrait :
