Comment convertir un PNG transparent couleur en PNG transparent blanc (et non noir et blanc)?


8

J'essaie de créer deux états pour une image. J'ai une icône png transparente de couleur et j'en ai besoin d'un duplicata qui soit un png transparent "blanc". Ceci sera utilisé pour un effet de survol en CSS (fondu de l'un à l'autre). J'ai déjà vu le résultat final de cela, mais je ne sais pas comment procéder pour le produire moi-même.

Je n'ai pas besoin de noir et blanc ou de désat, mais j'ai besoin d'une version transparente `` blanche '' pure que lorsqu'un calque de couleur unique est placé en dessous, le détail de l'icône transparente blanche est affiché.

Quelqu'un peut-il me dire comment y parvenir dans Photoshop ou similaire?


Est-ce sur le sujet? Je ne vois aucune pertinence pour la photographie. Est-ce que Super User serait mieux?
Reid

Je ne pense pas que ce soit sur le sujet, je le crains, ce n'est pas une question liée à la photographie.

Je suis désolé, mais ce n'est pas sur le sujet ici à Photo.SE. Nous ne traitons pas avec CSS ou l'édition d'image générale, et cela relève de ces deux catégories (malgré l'utilisation de photoshop.) Vous pourriez avoir de meilleurs résultats sur superuser.com. Vous pouvez également essayer de parcourir les sites sur area51.stackexchange.com et voir s'il existe un site bêta qui pourrait vous offrir une meilleure aide. Je vais clore cette question comme hors sujet.
jrista

Quelqu'un l'a déjà publié, il semble que l'ajout d'un style de calque "Superposition de couleurs" devrait être la solution la meilleure et la plus rapide, mais ... dépend du type de contenu de l'image, cela vous dérangerait-il de mettre à jour en ajoutant un aperçu du png original ou quelque chose comme ça nous pouvons mieux vous aider? Merci!
Sam

Réponses:


11

Deux approches différentes:

  1. Utilisez le Magic wandsélecteur pour sélectionner la zone transparente (en tant que sélection non contiguë)
  2. Inverser la sélection
  3. Dessinez un rectangle rempli de blanc sur l'icône ou Fillla sélection avec du blanc
    • la sélection doit empêcher les modifications en dehors de la zone des icônes.

OU

  1. Verrouillez la couche transparence / alpha. (Cela doit être fait à partir de la palette des calques)

    entrez la description de l'image ici

  2. Dessinez un rectangle rempli de blanc sur l'icône ou Filll'image avec du blanc

    • le verrou de transparence empêche toute modification de la transparence (c'est-à-dire le canal alpha)

texte alternatiftexte alternatif

Quoi qu'il en soit, je ne sais pas comment le résultat va vous être utile.


1
Je pense que cette dernière méthode est plus rapide et plus précise, je le recommanderais!
Jari Keinänen

pourquoi ne pas simplement ajouter le style de calque -> superposition de couleurs au blanc?
Sisir

6

La réponse de Roddy donne une méthode très rapide, mais destructrice.

Si vous souhaitez conserver les calques - même uniquement le calque d'arrière-plan - dans vos fichiers source, envisagez de créer un nouveau calque entièrement blanc qui est Clipping maskdestiné au calque d'icônes lui-même. Si vous devez ultérieurement modifier le calque d'icônes, l'utilisation du masque d'écrêtage remplira toujours les nouveaux pixels de blanc ou supprimera ceux inutiles.

Lorsque vous êtes sur le point d'exporter l'icône, vous pouvez basculer la visibilité du masque d'écrêtage pour exporter les deux png à partir du même fichier source.


5

En huit frappes. Cette solution nécessite CS4 ou supérieur.

Si votre image est un seul calque, effectuez uniquement les étapes 4 et 6-8. Sous Windows, utilisez CTRL au lieu de CMD.

  1. Fn+ F7ou F7(ouvrez le panneau des calques)
  2. ALT+ CMD+ a (sélectionner tous les calques)
  3. CMD+ g(mettre les calques dans un dossier)
  4. CMD+ MAJ + n(créer un nouveau calque)
  5. CMD+ ](déplace le nouveau calque hors du dossier)
  6. d (change les couleurs par défaut bg et fg noir / blanc)
  7. CMD+ delete(remplit le nouveau calque de blanc)
  8. ALT+ CMD+ g(coupe la nouvelle couleur sur le calque ou le dossier immédiatement en dessous)

+1 pour une approche non destructive à actionnement par touches.
Farray
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.