De temps en temps, de nombreux utilisateurs sont confrontés à la nécessité de modifier la transparence d'une image. Tout d'abord, cette action consiste à supprimer l'arrière-plan, mais vous devez parfois rendre l'image ou la photographie entière transparente à un degré ou à un autre. Nous parlerons de chacune de ces options dans notre article d'aujourd'hui.

Bien sûr, il est beaucoup plus pratique de traiter et de modifier des fichiers graphiques, d'en supprimer l'arrière-plan ou d'autres éléments à l'aide de programmes spécialisés– les éditeurs. Mais lorsqu'un tel logiciel n'existe pas ou que l'on ne souhaite pas l'installer sur l'ordinateur, il est tout à fait possible de recourir à l'un des nombreux. Heureusement, ils s'acquittent bien de la tâche qui nous est assignée, nous permettant non seulement de rendre l'image transparente, mais également d'effectuer un certain nombre d'autres manipulations.

Note: Vous pouvez obtenir l’effet de transparence souhaité sans trop d’effort avec les fichiers PNG. Mais avec le format JPEG, dans lequel sont enregistrées par exemple les photographies, certains problèmes peuvent survenir.

Méthode 1 : IMGOnline

Ce service Web offre des opportunités assez étendues pour travailler avec fichiers graphiques. Ainsi, son arsenal comprend des outils pour redimensionner, compresser, recadrer, convertir des images et les traiter avec des effets. Bien sûr, il y a aussi une fonction dont nous avons besoin ici : changer la transparence.

1. Une fois sur le site, cliquez sur le bouton "Choisir le fichier". Une fenêtre standard s'ouvrira "Conducteur" Windows, allez dans le dossier contenant l'image dont vous souhaitez modifier la transparence. Sélectionnez-le et cliquez sur le bouton "Ouvrir".



2. L'étape suivante consiste à configurer les paramètres de remplacement d'arrière-plan. Si vous avez besoin de transparence, nous ne changeons rien dans cette section. Si vous devez le remplacer par un autre arrière-plan uni, sélectionnez-en un disponible dans la liste déroulante. De plus, vous pouvez saisir le code de couleur HEX ou ouvrir la palette et y sélectionner la teinte appropriée.



3. Après avoir décidé des paramètres d'arrière-plan, nous sélectionnons le format de sauvegarde de l'image traitée. Nous vous recommandons de cocher la case à côté de l'extension PNG, puis de cliquer sur "D'ACCORD".



4. L'image sera traitée instantanément.
   
   

   Sur page suivante vous pouvez l'ouvrir dans un onglet séparé pour Aperçu(cela vous aidera à comprendre si l'arrière-plan est vraiment devenu transparent)

   
   ou enregistrez-le immédiatement sur votre ordinateur.


C'est dire à quel point il est simple de modifier la transparence d'une photo, ou plutôt son arrière-plan, grâce au service en ligne IMGOnline. Cependant, cela présente également des inconvénients : seul un arrière-plan homogène peut idéalement être modifié avec une très haute qualité. S'il présente des nuances ou s'il est simplement multicolore, une seule des couleurs sera supprimée. De plus, les algorithmes du service ne peuvent pas être qualifiés d'assez intelligents, et si la couleur d'arrière-plan correspond à la couleur d'un élément de l'image, elle deviendra également transparente.

Méthode 2 : Rue Photo

Le prochain site que nous examinerons propose une approche complètement différente de la création images transparentes. Cela donne en fait l'impression que cela lui ressemble, plutôt que de simplement supprimer l'arrière-plan uniforme. Le service web Photo Street sera utile dans les cas où il est nécessaire d'éclaircir une image, par exemple pour la superposer sur une autre ou l'utiliser comme fond de marque pour un document ou un filigrane. Voyons comment travailler avec.

1. Sur page d'accueil site cliquez sur le bouton "Ouvrir l'éditeur de photos".



2. Ensuite, vous devrez peut-être autoriser l'utilisation du service Web, pour lequel il vous suffit de cliquer sur le champ vide puis de cliquer sur "Permettre" dans une fenêtre pop-up. Dans l'éditeur de photos qui apparaît, cliquez sur celui situé à droite coin supérieur bouton "Télécharger une photo".



3. Cliquez ensuite "Télécharger d'un ordinateur" ou choisissez la deuxième option si vous disposez d'un lien vers l'image sur Internet.



4. Sur la page du service Web mise à jour, cliquez sur le bouton "Sélectionner une photo", dans la fenêtre système qui s'ouvre "Conducteur" allez dans le dossier avec l'image, sélectionnez-le et cliquez "Ouvrir".



5. Lorsque l'image est ajoutée à l'éditeur de photos, cliquez sur le bouton situé en bas du panneau de gauche "Effets".



6. Sur la droite zone supérieure en cliquant sur l'icône ronde «–» , modifiez la transparence de l'image.



7. Après avoir obtenu un résultat acceptable, cliquez sur "Effondrement" pour ouvrir le menu principal de l'éditeur sur le site Web de Photo Street.



8. Cliquez ici sur le bouton "Sauvegarder" situé en dessous.



9. Ensuite, sélectionnez votre option de téléchargement préférée. Définir par défaut "Enregistrer sur l'ordinateur", mais vous pouvez en choisir un autre. Une fois que vous avez décidé, cliquez sur "D'ACCORD".



10. Le service vous donnera la possibilité de choisir la qualité fichier final. Cochez la case à côté de l'élément « Grande taille» et près de la ligne ci-dessous "Ne pas imprimer le logo". Cliquez sur "D'ACCORD".



11. La procédure de sauvegarde du résultat va commencer, ce qui, pour des raisons inconnues, peut prendre plusieurs minutes.



12. Une fois l'image modifiée enregistrée, le service en ligne vous fournira un lien pour la télécharger. Cliquez dessus - l'image s'ouvrira dans un onglet du navigateur, à partir duquel vous pourrez l'enregistrer sur votre PC. Cliquez sur clic-droit souris et sélectionnez "Enregistrer le fichier sous...". Spécifiez votre répertoire préféré pour placer le fichier téléchargé et cliquez sur "Sauvegarder".


Changer la transparence d'une image à l'aide de l'éditeur intégré au service en ligne Photo Street nécessite un peu plus d'efforts et d'étapes que ceux évoqués dans méthode précédente IMGEn ligne. Mais il effectue également le traitement selon un principe complètement différent. Il est important de prendre en compte les points suivants : pour les images Format JPG en fait, ce n'est pas la transparence qui sera modifiée, mais la luminosité, c'est-à-dire que l'image deviendra simplement plus claire. Mais avec Fichiers PNG qui prennent en charge la transparence par défaut, tout se passera exactement comme prévu - l'image, tout en devenant visuellement moins lumineuse, deviendra en réalité plus transparente proportionnellement à la diminution de cet indicateur.

Vlad Merjevitch

La transparence partielle, lorsqu’elle est utilisée correctement, est très impressionnante dans la conception de sites Web. L'essentiel est que sous les blocs translucides il n'y a pas un dessin monochromatique, mais une image, c'est dans ce cas que la transparence devient perceptible. Cet effet est obtenu différentes façons et si vous vous souvenez de tout, y compris des méthodes à l'ancienne, il utilise une image PNG comme arrière-plan, créant une image en damier et la propriété d'opacité. Mais dès qu'il est nécessaire de réaliser un sol dans le bloc arrière-plan transparent, ces méthodes présentent un inconvénient désagréable. Je vais le faire brève revue, afin qu'il devienne clair de quoi nous parlons, ainsi que pour les lecteurs qui ne sont pas familiers avec les options non traditionnelles pour créer un effet translucide.

PNG comme arrière-plan

DANS éditeur graphique Un motif translucide monochrome est pré-préparé et enregistré au format PNG-24 (Fig. 1). Une particularité de ce format est qu'il prend en charge 256 niveaux de transparence, ou tout simplement, il peut afficher des images translucides.

Riz. 1. Image pour créer l'arrière-plan

Ensuite, nous ajoutons l'image comme arrière-plan via la propriété background, comme le montre l'exemple 1.

Exemple 1 : Utiliser un motif translucide

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Résultat cet exemple montré sur la fig. 3.

Riz. 2. Appliquer une image d'arrière-plan

L'ancien navigateur Internet Explorer 6 ne fonctionne pas avec la translucidité en PNG-24, si pour une raison quelconque vous devez prendre en charge ce navigateur, vous devrez utiliser des scripts pour celui-ci.

La méthode ci-dessus présente un certain nombre de limites. Ainsi, lorsque vous désactivez les images dans le navigateur, l'arrière-plan disparaît complètement. De plus, il n'est pas si simple de modifier la couleur d'arrière-plan et la valeur de transparence ; pour ce faire, vous devrez à nouveau modifier l'image.

Image à carreaux

Cette méthode fait référence à des méthodes complètement anciennes de mise en œuvre de la translucidité, lorsque les navigateurs « ne pouvaient rien faire » et qu'il fallait rechercher des solutions non standard. L'astuce consiste à créer une image qui alterne entre des pixels transparents et opaques (Figure 3). Cette structure régulière crée un effet translucide, l'imitant essentiellement.

Riz. 3. Damier agrandi

Voilà à quoi cela ressemble au final (Fig. 4).

Riz. 4. Simuler la translucidité

Les inconvénients de cette méthode sont comparables à la précédente : un motif de moiré peut également apparaître et le texte se détériorera.

Propriété d'opacité

La propriété CSS 3 opacity spécifie la valeur d'opacité et va de 0 à 1, où zéro est la transparence complète de l'élément, et un, au contraire, est opaque. La propriété opacity a une fonctionnalité spéciale : la transparence s'applique à tous les éléments enfants et ils ne peuvent pas dépasser la valeur d'opacité de leur parent. Il s'avère qu'il ne peut pas y avoir de texte opaque sur un fond translucide (exemple 2).

Exemple 2 : Utiliser l'opacité

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Le résultat de l'exemple est présenté sur la Fig. 5.

Riz. 5. Translucidité du texte et du fond

Dans les versions d'Internet Explorer jusqu'à la version 8.0 incluse, l'opacité ne fonctionne pas, elle utilise donc la propriété de filtre spécifique au navigateur. Naturellement, cela entraîne un code CSS invalide.

RVBA

L'approche moderne est beaucoup plus simple et visuelle que les méthodes ci-dessus et consiste à utiliser le format RGBA pour les couleurs et les arrière-plans. Les trois premières lettres sont familières à beaucoup et représentent le rouge, le vert, le bleu (rouge, vert, bleu), la dernière symbolise le canal alpha et définit la transparence de l'élément. Le format d'enregistrement est le suivant.

couleur d'arrière-plan : rgba(r, g, b, a);

Entre parenthèses, au lieu de lettres, la valeur du composant de couleur est placée ; elle peut être visualisée dans n'importe quel éditeur graphique ; la dernière valeur définit la transparence et coïncide avec la valeur de la propriété d'opacité.

Tous les navigateurs ne supportent pas ce format : Internet Explorer depuis la version 9, Opera depuis la version 10, Firefox depuis la version 3, Safari depuis la version 3.2. Mais en général, navigateurs modernes afficher correctement la transparence. Pour les anciennes versions d'IE, vous pouvez spécifier séparément la couleur dans son format habituel et, bien sûr, il n'y aura pas de transparence. Ou utilisez à nouveau la propriété filter, mais vous devrez alors accepter le fait que la transparence affectera également le texte (exemple 3). Se conformer code valide CSS, j'ai utilisé des commentaires conditionnels.

Exemple 3 : Utilisation de RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Le résultat de l'exemple peut être vu sur la Fig. 6.

Riz. 6. Fond translucide avec texte opaque

Comparez l'image avec la précédente, les lettres sont devenues plus lumineuses et plus claires.

DANS navigateur Internet Explorer 7 a découvert un bug lors de la combinaison de la couleur d'arrière-plan avec différentes significations. Par exemple, si vous définissez la couleur d'arrière-plan sur rouge, comme indiqué ci-dessous, l'arrière-plan dans IE7 n'apparaîtra pas du tout.

Div ( couleur d'arrière-plan : rouge ; /* Non applicable dans IE7 */ couleur d'arrière-plan : rgba(255, 0, 0, 0.5); )

Ceci est résolu en remplaçant la propriété background-color par background .

Div ( background: red; /* Et cela fonctionne */ background: rgba(255, 0, 0, 0.5); ) Cependant, il y a une mise en garde. Le validateur CSS se plaint de l'arrière-plan si vous lui donnez une valeur dans Format RVBA. Mais en même temps, il fait correctement référence à background-color . En général, comme toujours, il faut choisir entre les navigateurs et la validité.

Comment faire un fond transparent dans Photoshop ?

Photoshop est l'un des plus programmes populaires parmi les personnes intéressées par le design, le graphisme et le dessin. Les personnes qui sont loin d'être créatives, mais qui ont besoin de ses fonctions, peuvent également avoir besoin de Photoshop. Par exemple, vous deviez utiliser une sorte d'image dans le texte, mais il était inacceptable de la placer avec l'arrière-plan existant. Pour ce faire, vous pouvez soit changer le fond, soit utiliser un fond transparent. Essayons de comprendre comment créer un arrière-plan transparent dans Photoshop.

Comment créer un arrière-plan transparent dans Photoshop - la première méthode :

Faites un clic gauche sur « Fichier » (dans le coin supérieur gauche). Sélectionnez « Nouveau » dans la liste déroulante. Dans « Contenu d'arrière-plan », sélectionnez « Transparent ». Cette méthode devrait être utilisée par ceux qui souhaitent créer propre image Sans fond. Cela ne fonctionnera pas si vous souhaitez supprimer l'arrière-plan de l'image finale. Pour ce faire, vous devez utiliser la deuxième méthode.

Comment créer un fond transparent dans Photoshop - la deuxième méthode :

L'éditeur graphique Photoshop est différent dans la mesure où il utilise des calques. L'image derrière laquelle le fond transparent est réalisé doit être copiée sur un nouveau calque. Cela se fait en appuyant simultanément sur Touches Ctrl et J (nous utiliserons ci-après une abréviation couramment utilisée, par exemple Ctrl+J). Pour ce faire, vous pouvez utiliser une autre méthode : cliquez avec le bouton droit sur le calque et sélectionnez « Dupliquer le calque » dans le menu déroulant. Dans la fenêtre suivante qui apparaît, cliquez sur "OK". Vous devriez vous retrouver avec deux calques identiques, un seul d’entre eux sera appelé « calque 1 » et l’autre « fond ».

La deuxième étape consiste à masquer le calque appelé « arrière-plan ». Pour cela, il vous suffit de cliquer sur l'image de l'œil située à gauche du calque.

La troisième étape consiste à séparer l'image de l'arrière-plan. Cela peut être fait à l'aide d'un outil appelé élastique. Sur le clavier, il est activé par la touche "E". Les dimensions de l'outil élastique peuvent être modifiées à l'aide des touches "[" et "]" sur Mise en page anglaise. Vous devrez modifier la taille de l'outil afin de « effacer » soigneusement l'arrière-plan autour de l'objet. Si vous avez tout fait correctement, vous aurez alors un "échiquier" autour de l'objet - c'est l'absence de fond, c'est-à-dire un fond transparent.

La dernière étape consiste à enregistrer l'image avec un fond transparent. L’épargne est standard. Dans le coin supérieur gauche, avec le bouton gauche de la souris, sélectionnez « Fichier » et sélectionnez « Enregistrer sous » dans la liste déroulante. Sous l'image et la ligne « Nom du fichier », il y aura une ligne « type de fichier ». Dans cette ligne, vous sélectionnez le format dans lequel l'image sera enregistrée. Vous pouvez sélectionner le format « .psd » ou « .png ». Il est recommandé d'utiliser le dernier format. Après cette action, cliquez sur « enregistrer ». DANS Format JPEG la transparence n’est pas assurée.

Vous pouvez désormais utiliser l'image sans l'arrière-plan d'origine en l'insérant dans le document requis. A noter que l'outil « élastique » est assez difficile pour les débutants si la main n'est pas « bourrée » travail quotidien dans ce programme. Par conséquent, des difficultés peuvent survenir lorsque l'on essaie d'« effacer » l'arrière-plan autour de petits objets, comme l'herbe, par exemple. Nous pouvons vous conseiller soit d'améliorer vos compétences, soit de les utiliser pour le travail Tablette graphique(ce qui est plus typique pour les professionnels), ou essayez une autre méthode.

Comment créer un arrière-plan transparent dans Photoshop - la troisième méthode :

Il est nécessaire de convertir l’arrière-plan de l’image en calque. Pour ce faire, faites un clic droit sur l'arrière-plan dans la zone de droite où sont affichés les calques. Sélectionnez « Couche depuis l'arrière-plan » / « Depuis l'arrière-plan » (la plupart des versions de Photoshop téléchargées à partir de torrents sont activées). langue anglaise. Cette remarque est également vraie pour de nombreux tutoriels). Dans le menu qui s'ouvre, cliquez sur « OK ». Sélectionnez l'outil « Baguette magique ». Il ne peut être utilisé que si le fond à découper est de couleur uniforme (sinon nous utilisons l'outil Lasso). Sélectionnez l'arrière-plan. Cliquez sur Supprimer. Après cela, nous voyons notre objet sur le fond d'un terrain d'échecs. C'est le fond transparent. Il ne reste plus qu'à sauvegarder l'image en utilisant la méthode décrite ci-dessus.

Il y a un un grand nombre de tutoriels vidéo sur ce sujet. Par exemple, vous pouvez suivre la séquence d'actions dans la vidéo de l'article.

Vous êtes maintenant sur le point d’apprendre les bases. programme graphique Photoshop et en même temps réalisé leur besoin de qualité aspect visuel ton travail. Toutes nos félicitations!

Parfois, vous tombez sur une image très appropriée pour votre article et tout irait bien... Mais l'arrière-plan de l'image ne correspond pas à l'arrière-plan du blog ou du bloc de texte. Apparemment, personne n'a ce problème et personne n'a un fond blanc, ce qui conviendrait dans la plupart des cas. J'ai besoin arrière-plan transparent!

Je n'ai trouvé aucune bonne idée sur Internet. comment faire un fond transparent Pour photo terminée, j'ai donc commencé à expérimenter moi-même et j'ai trouvé une solution plus ou moins adaptée !

Comment créer un fond transparent pour une image

Prenons un exemple une simple image au format .jpg (en général le format n'est pas particulièrement important) :

Il y a fond blanc, dont je souhaite me débarrasser et créer un arrière-plan transparent à la place. Pixlr, une version en ligne de Photoshop, nous y aidera.

Téléchargement de notre image. À droite dans la fenêtre « Couches », un calque « Arrière-plan » apparaîtra, sur lequel se trouve un verrou (empêche la suppression de l'arrière-plan de l'image).

En double-cliquant avec le bouton gauche de la souris sur ce verrou, vous pouvez supprimer le verrou de l'arrière-plan. Une coche apparaîtra à la place d'un cadenas.

Maintenant prenons baguette magique(barre d'outils, colonne de droite, deuxième bouton en partant du haut), précisez les paramètres suivants : tolérance = 21, cases à cocher pour le lissage et la continuité(généralement, ces paramètres sont standard), bien que vous puissiez expérimenter avec les paramètres ; et cliquez sur le fond de l'image (dans notre cas, sur le fond blanc).

Maintenant, nous supprimons l'arrière-plan en appuyant sur le bouton « Supprimer » et obtenons l'image dont nous avons besoin avec un arrière-plan transparent.

En conséquence, le résultat est la même image avec un arrière-plan transparent.

Le seul point négatif de Pixlr- vous ne pouvez pas enregistrer l'image au format .gif, qui conserve également un fond transparent, mais est beaucoup plus léger que le format .png. Mais s’il n’y a pas d’autre choix, pourquoi ne pas en profiter ?

merci à Natalia Petrova