Comment enregistrer rapidement une image sans arrière-plan au format PNG dans Photoshop. Comment créer un PNG avec transparence dans Adobe Photoshop (CC et versions supérieures)

2 voix

Bonne journée, chers lecteurs. La possibilité de créer des images avec des arrière-plans transparents est incroyablement nécessaire pour tout développeur de site Web novice, concepteur et même une personne ordinaire.

C'est la fonction la plus populaire de Photoshop, c'est pourquoi j'ai décidé de vous expliquer le plus en détail possible non seulement le processus lui-même, mais aussi comment enregistrer une image dans Photoshop sans arrière-plan.

Il s'avère que beaucoup ont des difficultés avec cela, mais il n'y a aucune publication sur Internet sur ce sujet sur Internet. Peu de sujets sur les forums. Mais, je me donne pour mission de corriger cette injustice...

Alors, maintenant, je vais mettre une armure de chevalier et dissiper toutes les peurs, les doutes, les malentendus et transformer les difficultés de l'art de Photoshop en une routine naïve. Je vais aussi vous parler de toutes les subtilités du métier. Sois prêt. Je vais «savoir» dans un langage très simple, pour que cela devienne clair pour tout le monde, alors je m'excuse auprès des lecteurs qui sont gênés par une telle minutie et eux-mêmes savent très bien tout.

Je remercie le plus patient pour votre compréhension. Commençons.

Ce que vous devez réaliser pour qu'une photo soit vraiment transparente

La transparence de l'image est généralement affichée avec un tel vérificateur. Si vous le voyez sur Google, alors l'image peut être téléchargée sans problème et lorsque cet objet est superposé sur un autre fond, la couleur ne changera pas.

Comme vous pouvez le voir, un tel vérificateur ne s'affiche pas si l'image de la recherche est reflétée à travers une vignette. Vous devez cliquer sur l'image et des informations supplémentaires s'ouvriront.

Regarde, j'ai copié ce dessin et je l'ai collé sur la photo du terrain. Je ne vais pas expliquer exactement comment j'ai fait, cela n'a pas d'importance maintenant. Le plus important est que vous puissiez voir toutes les parties du champ, les cubes semblent avoir été découpés et superposés sur la photo.

Si je n'avais pas trouvé de photo avec un vérificateur dans la recherche, l'illustration aurait été complètement différente. Le fond serait blanc et rectangulaire.

Pourquoi donc? Ce damier est un signe généralement accepté, si vous le voyez, alors il n'y a aucune couleur dans cette partie de l'illustration, et lorsqu'il est superposé, vous verrez la partie inférieure de l'image. De même, la transparence est affichée et. Si vous devez supprimer l'arrière-plan de la photo, vous devez vous assurer qu'au lieu de la couleur, vous pouvez voir ce motif chéri. Vérificateur.

Comment stocker correctement les images transparentes

Nous sommes tous habitués à un format photo tel que jpeg. Certaines personnes ne sont même pas conscientes de l'existence des autres. Cependant, il ne comprend pas ce qu'est la transparence. Afin de télécharger et de stocker les photos "correctes" sur votre ordinateur, vous devrez comprendre et mémoriser le nouveau format - png.

Vous voyez, en plus des vérificateurs, dans Google, vous pouvez presque toujours voir cette combinaison de lettres avec les images nécessaires.

Ensuite, choisissez le type de fichier que vous voulez, png, et vous avez terminé. Il est disponible dans n'importe quelle version. Si vous ne voyez pas, regardez plus attentivement. Vous ne pouvez pas vous en passer. Croyez-moi.

Pourquoi était-il nécessaire de proposer un format différent ? Le fait est que le jpeg populaire ne comprend pas ce qu'est la transparence. Il le change en blanc habituel.

Comment se débarrasser de l'arrière-plan : un moyen simple et assez rapide sans tracas inutiles

Sur mon blog, vous pouvez trouver un article dans lequel je montre 4 outils et donne une vidéo dans laquelle vous pouvez trouver 3 façons de se débarrasser de l'arrière-plan de l'image (). Vous pouvez le lire si cela vous intéresse. Maintenant, je voudrais vous montrer une autre technique, car je pense que sans cela, l'article ne serait pas complet. On ne sait jamais, quelqu'un ne veut pas grimper sur mon blog. Et ici, tout est au même endroit.

Alors, ouvrons l'image.

Trouvez l'outil Gomme d'arrière-plan. Si vous ne le trouvez pas, maintenez la souris avec le bouton gauche enfoncé sur la touche d'une gomme ordinaire pendant quelques secondes. L'outil requis s'ouvrira. Vous pouvez l'ajouter en cliquant dessus.

Vous pouvez augmenter le diamètre de la gomme pour faciliter le lavage.

Maintenant, bricolez sur les éléments inutiles de l'image. Vous verrez comment le vérificateur commence à apparaître et la couleur disparaît !

J'espère qu'une fois que vous aurez terminé, vous ne vous demanderez pas dans quel format enregistrer le dessin traité. Bien sûr PNG.

Cette méthode d'effacement n'est ni la meilleure ni la plus pratique. Par conséquent, je vous recommande de toujours prêter attention à mon article précédent, entièrement consacré à ce sujet.

Et si vous êtes intéressé à travailler sur Photoshop, alors je vous conseille de commencer à gagner de l'argent dessus ! Il y a une demande. Vous pouvez facilement essayer, traiter des images et faire beaucoup de choses intéressantes. Croyez-moi, c'est vraiment nécessaire. Vous pouvez vérifier en ouvrant plusieurs sites indépendants.

Tu penses que tu ne réussiras pas ou tu es trop vieux pour cette merde ? Pas assez de temps? Croyez-moi, ce sont toutes des excuses ridicules. Je suis avocat et je gagne assez d'argent, mais ... avez-vous un passe-temps, votre passe-temps préféré ? Vivez-vous pleinement la vie ? Vous vous ennuyez vraiment ?

Tout ce que vous savez et tout ce qui vous intéresse. Internet ouvre beaucoup de nouvelles possibilités. Apportez du changement dans votre vie. Si l'argent ne vous intéresse pas, c'est encore mieux. Cela donne à votre projet une meilleure chance de devenir cher, cool et réussi. Toutes les personnes célèbres ne travaillent pas pour le profit, elles travaillent parce qu'elles aiment ce qu'elles font. Peu d'entre eux l'appellent « travail ».

Le temps est révolu où une personne passait le plus clair de son temps devant un ordinateur ou une télévision. Maintenant, tout le monde se développe, améliore certaines de ses compétences et partage avec les gens ce qu'il sait. En fait, cela a toujours été le cas, seule l'échelle a augmenté.

À propos, il n'y a pas si longtemps, j'ai lu les secrets de la longévité des montagnards du Caucase. L'un des principes est que la jeune génération vient constamment les consulter pour des questions importantes. Les personnes âgées se sentent nécessaires et ne ressentent donc aucune émotion négative à propos de la vieillesse. Dans le Caucase, n'ayez pas peur de vieillir.

Soit dit en passant, une attitude positive est un autre secret. Les aînés soutiennent que personne ne veut communiquer avec des personnes en colère, irritées et ennuyeuses qui n'ont pas de passe-temps intéressants et, par conséquent, un tel mode de vie est extrêmement peu rentable, surtout chez les personnes âgées.

Faites quelque chose de nouveau. Si vous aimez photoshop - faites attention au cours de Zinaida Lukyanova - " Photoshop à partir de zéro Et le maîtriser parfaitement. Très vite, vous aurez un hobby rentable. Pas si passionné par le design? Faites attention à cela et créez vos projets.

Si vous avez aimé cet article et que vous m'intéressez au moins un peu, abonnez-vous à la newsletter. Ne le laissez pas maintenant, mais donnez-vous une chance de faire quelque chose de nouveau. Je vous enverrai mes publications sur la façon dont vous pouvez gagner de l'argent sur Internet.

Peut-être que l'un d'eux vous inspirera quelque chose de nouveau et encore inconnu. Vous comprendrez que c'est intéressant et aurez envie de l'essayer vous-même, et puis... qui sait ce qui va se passer ensuite ?

Le passe-temps se transformera-t-il en quelque chose de plus, ou allez-vous simplement montrer le résultat de votre travail à vos amis afin d'obtenir leurs éloges et leur admiration ? Contrairement à beaucoup, vous sortirez du canapé et ferez quelque chose qui vous sortira de l'ordinaire. Vous allez essayer de changer votre vie. C'est très louable.

Je vous souhaite sincèrement de réussir dans vos efforts et j'espère que cette réunion ne sera pas la dernière.

Salutations, chers lecteurs de mon blog!

j'ai récemment eu besoin supprimer l'arrière-plan d'après la photo, je ne suis pas particulièrement ami avec photoshop. Et je vais vous dire que je ne l'ai même pas sur mon ordinateur. (Eh bien, c'est vrai, en général, pourquoi ai-je besoin de quelque chose avec lequel je ne sais pas comment travailler).

Mais l'arrière-plan de l'image a dû être supprimé d'une manière ou d'une autre, j'ai commencé à surfer sur Internet à la recherche d'une solution à mon problème. Il y a beaucoup d'options, en fait, mais je cherchais quelque chose de plus facile)). J'ai trouvé un moyen très facile et simple de supprimer l'arrière-plan de l'image.

Et donc, commençons. Nous aurons besoin de photoshop, mais comme je ne l'ai pas. J'utilise photoshop en ligne. Une chose très pratique, je vais vous dire. Et bien sûr l'image de fond que nous voulons rendre transparente.

Je vais vous montrer avec un exemple, voici une telle image, nous allons supprimer le fond blanc

Nous allons dans photoshop en ligne. j'ai utilisé celui-ci PIXLR

On choisit : Charger une image depuis un ordinateur.

Maintenant à droite dans la fenêtre "COUCHES" besoin d'ouvrir la serrure

Clique dessus 2 fois avec le bouton gauche souris, une coche devrait apparaître dans la case.

Allez maintenant dans le panneau de gauche, sélectionnez l'outil "Baguette magique" et réglez la tolérance sur 21.

Cela semble être tout, mais je ne suis pas entièrement satisfait de la photo, il y a encore des restes du fond, je clique à nouveau sur l'endroit que je veux supprimer. Puis "éditer" ---- "effacer". Et ainsi de suite jusqu'à ce que vous enleviez tout ce dont vous avez besoin.

Bonne journée!
Vous êtes-vous déjà demandé comment fonctionnent les fichiers PNG ? Non? Je vais vous dire quand même.
Le format PNG (Portable Network Graphics) a été inventé en 1995 pour remplacer GIF, et en 1996, avec la sortie de la version 1.0, il a été recommandé par le W3C comme format de réseau à part entière. Le PNG est aujourd'hui l'un des principaux formats graphiques Web.

Sous la coupe, vous trouverez une description générale de la structure du fichier PNG, un certain nombre d'images schématiques, une préparation dans un éditeur hexadécimal et, bien sûr, un lien vers la spécification.

Structure générale

La structure PNG dans sa forme la plus générale est illustrée dans la figure suivante.

C'est-à-dire que le fichier se compose d'une signature et d'un certain nombre de blocs (chunks, chunks), dont chacun contient des informations (merci à KO !). Mais pourquoi la signature ne peut-elle pas être considérée comme l'un des morceaux ? Regardons de plus près.

Signature de fichier

La signature du fichier PNG est toujours la même, se compose de 8 octets et est (en hexadécimal)

Qu'est-ce que ça veut dire?

89 est un caractère non ASCII. Empêche PNG d'être reconnu comme un fichier texte et vice versa.
50 4E 47 - Notation PNG en ASCII.
0D 0A - CRLF (retour chariot, saut de ligne), saut de ligne de style DOS.
1A - arrête la sortie d'un fichier en mode DOS (fin de fichier) afin que vous n'obteniez pas une image de plusieurs kilo-octets sous forme de texte.
0A - LF, saut de ligne de style Unix.

Morceaux

Les morceaux sont des blocs de données qui composent un fichier. Chaque morceau se compose de 4 sections.

Jetons un coup d'œil à ces sections dans l'ordre.

Longueur

Eh bien, tout semble être clair avec la longueur. Juste une valeur numérique pour la longueur du bloc de données.

Tapez (nom)

Le type est un peu plus intéressant. Le type est de 4 caractères ASCII sensibles à la casse. Les registres des caractères (le cinquième bit dans la notation numérique du caractère) dans le nom du bloc diffèrent pour une raison : ce sont des indicateurs qui indiquent au décodeur des informations supplémentaires.

La casse du premier caractère détermine si ce morceau est critique (majuscule) ou auxiliaire (minuscule). Les morceaux critiques doivent être reconnus par chaque décodeur. Si le décodeur rencontre un fragment critique dont il ne peut pas reconnaître le type, il doit se terminer par une erreur.
La casse du deuxième caractère définit le "public" (majuscule) ou "privacy" (minuscule) du morceau. Les morceaux "publics" sont officiels, documentés, reconnus par la plupart des décodeurs. Mais si soudainement vous avez besoin d'encoder des informations spécifiques pour certains de vos besoins, alors faites simplement le deuxième caractère petit dans le nom du morceau.
Le registre du troisième personnage est réservé aux réalisations futures. Il est destiné à être utilisé pour différencier les différentes versions de la norme. Pour les versions 1.0 et 1.1, le troisième caractère doit être grand. S'il s'avérait (soudain !) petit, tous les décodeurs actuels devraient agir avec un morceau, comme avec n'importe quel autre décodeur non reconnu (c'est-à-dire sortir avec une erreur si le morceau est critique, ou sauter sinon).
Le registre du quatrième caractère signifie la possibilité de copier ce morceau par des éditeurs qui ne peuvent pas le reconnaître. Si la casse est en minuscule, le morceau peut être copié, quel que soit le degré de modification du fichier, sinon (majuscule) il n'est copié que si aucun morceau critique n'a été affecté lors de la modification.

Pour une meilleure compréhension, examinons les drapeaux en utilisant l'exemple d'un morceau contenant du texte.

Vous trouverez ci-dessous une liste de types de blocs avec de brèves explications.
Morceaux critiques

IHDR- en-tête de fichier, contient des informations de base sur l'image. Doit être le premier morceau.
PLTE- palette, liste de couleurs.
IDAT- contient, en fait, l'image. L'image peut être divisée en plusieurs morceaux IDAT pour la diffusion en continu. Chaque fichier doit avoir au moins un morceau IDAT.
IEND- le dernier morceau doit être le dernier du fichier.

Morceaux auxiliaires

bKGD- ce morceau définit la couleur d'arrière-plan principale.
cGRH utilisé pour définir l'espace colorimétrique CIE 1931.
gAMA- définit la gamme.
hIST- ce morceau peut stocker un histogramme ou le contenu total de chaque couleur de l'image.
iCCP- Profil de couleur ICC
iTXt- contient du texte en UTF-8, éventuellement compressé, avec une balise de langue optionnelle. Le bloc iTXt avec le mot clé « XML : com.adobe.xmp » peut contenir la plate-forme de métadonnées extensible (XMP).
pHY- contient la taille de pixel estimée et/ou le rapport hauteur/largeur de l'image.
sBIT(bits significatifs) - définit la précision des couleurs de l'image (noir et blanc, pleine couleur, noir et blanc avec transparence, etc.), pour un décodage plus facile.
sPLT- propose une palette à utiliser si la gamme complète de couleurs n'est pas disponible.
sRVB- indique l'utilisation du schéma sRGB standard.
sTER- indicateur d'images stéréoscopiques.
texte- peut contenir du texte au format ISO / IEC 8859-1, avec une paire nom = valeur pour chaque morceau.
temps- mémorise la date du dernier changement de l'image.
tRNS- contient des informations sur la transparence.
zTXt- texte compressé, avec les mêmes restrictions que tEXt.

Plus de détails peuvent être trouvés dans la spécification.

CRC

Somme de contrôle CRC-32. Soit dit en passant, l'autre jour, il y avait un sujet sur le comptage dans Windows.

PNG minimal

Nous avons défini la structure générale. Voyons maintenant le contenu des morceaux requis. Mais lesquels d'entre eux sont obligatoires (non critiques, critiques doivent être reconnus par le décodeur, et non présents dans chaque fichier), et à quoi ressemble le fichier PNG minimal ? C'est comme ça:

IHDR

Le bloc de données dans l'IHDR contient les champs suivants :

Largeur, 4 octets
Hauteur, 4 octets
Profondeur de bits, détermine le nombre de bits par échantillon (pas de pixel), 1 octet
Type de couleur, se compose de 3 drapeaux 1 (la palette est utilisée), 2 (la couleur est utilisée, pas le monochrome) et 4 (le canal alpha est présent), 1 octet
Méthode de compression. Pour le moment, seule la valeur 0 est disponible - compression utilisant l'algorithme deflate. Si la valeur est différente de 0, le morceau est considéré comme non reconnu et le décodeur signalera une erreur. 1 octet
Méthode de filtration. Tout comme dans le cas de la compression, pour le moment il ne peut être que nul. 1 octet
Méthode entrelacée. Détermine l'ordre dans lequel les données sont transmises. Pour le moment, 2 valeurs sont disponibles : 0 (pas d'entrelacement) et 1 (entrelacement Adam7). 1 octet

L'entrelacement Adam7 illustre parfaitement l'image de Wikipedia (oui, GIF dans l'article sur PNG):

IEND

Signale la fin du fichier, le bloc de données de ce morceau ne contient rien.

IDAT

Contient des données codées selon le champ de méthode de compression d'en-tête. L'algorithme de décodage dépasse le cadre de cet article (cependant, s'il y en a qui le souhaitent, il peut apparaître dans le suivant), mais il est assez bien décrit (et en russe).

Ainsi, le fichier PNG le plus simple (par exemple) ressemble à ceci.

Conclusion

Lors de la rédaction de cet article, je me suis fixé pour tâche de donner au lecteur une connaissance générale de la structure d'un fichier PNG ; pour une compréhension plus approfondie, il est recommandé de lire les spécifications.

Un sujet sur Habré sur la structure du JPEG : habrahabr.ru/blogs/algorithm/102521
Un sujet sur Habré sur la structure du GIF : habrahabr.ru/blogs/algorithm/127083

Merci pour votre attention, je serai heureux de toute critique!

06/05/16 27.2K

Parfois, vous devez charger une image contenant des éléments transparents à travers lesquels l'arrière-plan d'origine apparaîtra. Dans ces cas, il serait pratique de charger des images PNG car elles sont capables de préserver la transparence.

Dans cet article, nous vous dirons, comment faire de la transparence dans Photoshop.

Création de fichier

La première étape consiste à créer un fichier. Pour cela, ouvrez Adobe Photoshop et dans le menu Fichier ( Déposer) en haut de la page, sélectionnez Créer ( Nouveau).

Ensuite, dans la fenêtre "Nouveau document" qui apparaît ( Nouveau document) créez le fichier que vous voulez et assurez-vous que votre document est à 72 pixels par pouce ( puisque le fichier est destiné à une utilisation Web). Et aussi que vous avez sélectionné la valeur "Transparent" ( Transparent) dans la liste déroulante "Contenu d'arrière-plan" ( Contenu de l'arrière-plan).

* Avant de faire un PNG avec transparence dans Photoshop, vous devez préciser que dans cet exemple nous créons une image à télécharger comme arrière-plan pour le site, donc la taille du document est définie comme suit : largeur 3000 pixels, hauteur 1730 pixels, ce qui sont les tailles recommandées pour les téléchargements d'images HD :

Une fois que vous avez spécifié les valeurs des paramètres, cliquez sur OK pour ouvrir un nouveau document.

Puis dans le panneau "Calques" ( Couches) assurez-vous que vous travaillez sur un calque transparent et non sur l'arrière-plan :

Une fois que vous avez fini de créer et que vous êtes prêt à enregistrer l'image transparente, selon la version de Photoshop que vous utilisez, allez dans le menu Fichier ( Déposer) vous pouvez utiliser l'une des options possibles :

Versions de Photoshop antérieures à CC 2015 :

Maintenant on va dire comment rendre une image transparente dans Photoshop qui est sorti avant CC 2015. Ces versions utilisent l'option Enregistrer pour le Web ( Enregistrer pour le Web et les appareils) pour enregistrer et optimiser les images PNG à utiliser sur le Web. Pour utiliser cette méthode, il suffit d'aller dans le menu Fichier ( Déposer), puis - "Enregistrer pour le Web" ( Enregistrer pour le Web et les appareils):

Ensuite, dans la fenêtre qui apparaît, sélectionnez PNG-24 dans le menu déroulant des valeurs possibles, puis assurez-vous que le "Transparence" ( Transparence) et " Convertir en sRGB» ( Convertir en sRGB). Cela confirme que l'image contiendra un fond transparent et que son mode de couleur sera converti en sRGB, l'espace colorimétrique recommandé pour le Web.
Les champs " Taille de l'image» ( Taille de l'image) sont automatiquement renseignés avec les valeurs que vous avez spécifiées lors de la création du fichier. Mais si vous souhaitez redimensionner le fichier avant de l'enregistrer, vous pouvez le faire maintenant.

Version de Photoshop CC 2015 :

Avant, comment rendre une photo transparente dans Photoshop, vous devez savoir qu'à partir de CC 2015, le "Save for Web" ( Enregistrer pour le Web et les appareils) dans le menu Fichier ( Déposer) est marqué comme Héritage. Et remplacé par une nouvelle option "Exporter" ( Exportation), qui offre des fonctionnalités identiques avec un enregistrement plus rapide dans une taille de fichier plus petite et une meilleure qualité. Pour utiliser l'option Exporter, cliquez sur le menu Fichier ( Déposer), puis - " Exporter en tant que» ( Exporter en tant que).

Remarque : Adobe propose toujours une option Enregistrer pour le Web ( Enregistrer pour le Web et les appareils) dans Photoshop CC 2015, et il est disponible via Fichier> Exporter ( Fichier> Exporter) ou en utilisant le raccourci clavier Commande + Option + Maj + S (pour Mac) ou Ctrl + Alt + Maj + S (pour PC) :

Ensuite, dans la fenêtre qui apparaît, sélectionnez PNG dans le menu déroulant Format ( Format) et assurez-vous que la transparence ( Transparence) et " Convertir en sRGB» ( Convertir en sRGB).

Les champs " Taille de l'image» ( Taille de l'image) et la taille de la toile ( Taille de la toile) doit être automatiquement renseigné avec les valeurs que vous avez spécifiées lors de la création du fichier. Mais si vous le souhaitez, vous pouvez modifier ces paramètres avant comment faire un effet de transparence dans Photoshop.