Je veux consacrer cette leçon à cela moment intéressant, comme la transparence des calques dans Photoshop. La superposition est l'une des compétences les plus essentielles pour travailler dans Adobe Photoshop. Si vous avez déjà essayé de comprendre ce fonctionnement, vous êtes certainement tombé sur la définition de « l’opacité des calques ». De quoi s'agit-il et avec quoi le mange-t-on ?
Quelle couche est considérée comme transparente ?
Regardons la première situation. Disons que nous avons une image originale. Disons une photo. Et nous devrions créer Nouvelle Couche. Disons en utilisant la combinaison de touches ctrl+shift+n.
Ce nouveau calque sera transparent.
Deuxième situation. Vous disposez déjà d’un document à deux calques. Les deux sont opaques. Cela ressemble à ceci.
Le fait que nous ayons deux calques dans l’image originale peut être vu dans la fenêtre des calques. Essayons de rendre le calque Harley Quinn transparent.
Pour ce faire, dans la fenêtre des calques, nous sélectionnons celui du haut et réduisons sa transparence à zéro en déplaçant le curseur.
Le calque avec Harley est devenu transparent et l'image de Deadpool est apparue sur le fichier source. C’est comme ça que tout s’est avéré simple.
Comment rendre un calque semi-transparent ?
Revenons à la même source avec Deadpool et Harley. Mais cette fois, nous ne déplaçons pas le curseur sur zéro. Laissons-le à, disons, 50 pour cent.
L'accueil est très utile. Souvent utilisé dans la conception de sites Web et lors de la création de collages.
Par quelle autre méthode pouvons-nous influencer la transparence d’un calque ?
La transparence du calque peut être modifiée via les options de fusion. Ce n’est pas une solution de contournement très pratique. Même si, à mon époque, je l’ai rencontré assez souvent, je vais donc vous en parler. Accédez aux options de fusion.
Dans la fenêtre qui apparaît, nous voyons le même curseur avec une échelle de pourcentage. Long et fastidieux, bien sûr. Mais en fait, une telle chose existe et avec son aide, vous pouvez vraiment réduire la transparence d'un calque.
Avec l'avènement de CSS3, le travail des concepteurs de mise en page est devenu à bien des égards plus simple et plus logique : après tout, vous pouvez désormais configurer de manière vraiment flexible n'importe quel objet, en recourant de moins en moins à JavaScript. Disons que vous devez ajuster la transparence de l'arrière-plan - CSS propose immédiatement plusieurs options.
L'arrière-plan est spécifié par un ensemble d'attributs, background-repeat, background-attachment, background-origin, background-clip, background-color), et chacun d'eux peut être spécifié séparément ou combiné sous l'attribut background. Examinons chacun d'eux plus en détail.
attribut de couleur d'arrière-plan
Même IE8 prend en charge cette méthode. Plusieurs images sont utilisées comme arrière-plan pour une mise en page flexible. L'essentiel est que lorsque vous utilisez une image, n'oubliez pas de spécifier également Couleur CSS arrière-plan, car les utilisateurs peuvent tout simplement ne pas charger l'image.
attribut de position d'arrière-plan
Si vous utilisez une image pour définir l'arrière-plan d'un bloc, CSS vous permettra de positionner l'image n'importe où sur l'écran. Par défaut, l'image est située à gauche coin supérieur. L'attribut accepte soit des indications verbales (haut, bas, gauche, droite) ou numériques (pourcentages, pixels et autres unités de mesure). Dans ce cas, vous devez spécifier deux valeurs : horizontalement et verticalement :
body (background-position: right center;) - dans cet exemple, l'arrière-plan sera situé sur le côté droit de la page et les distances entre le bas et le haut de l'image sont les mêmes.
attribut taille d'arrière-plan
Parfois, vous devez utiliser CSS pour étirer l’arrière-plan ou réduire sa taille. Pour ce faire, utilisez l'attribut background-size, et la taille de l'arrière-plan peut être définie soit en pixels, soit en pourcentages, ou dans toute autre unité de mesure.
Il y a quelques problèmes avec cet attribut : afin d'afficher correctement l'arrière-plan dans les versions antérieures des navigateurs, des préfixes doivent être utilisés. Certainement, versions actuelles prennent entièrement en charge cet attribut et le besoin de propriétés spécifiques a disparu.
attribut de pièce jointe d'arrière-plan
Cet attribut spécifie le comportement image de fond lors du défilement. Ainsi, il peut prendre 3 valeurs (sans tenir compte de l'héritage, qui est commun à tous les attributs présentés dans cet article) :
- fixé— rend l'image immobile sur l'arrière-plan ;
- faire défiler— l'arrière-plan défile avec d'autres éléments ;
- locale— l'image de fond défile si le contenu est défilant. L’arrière-plan qui s’étend au-delà du contenu est corrigé.
Exemple d'utilisation :
corps (fixation d'arrière-plan fixe).
Firefox ne prend actuellement pas en charge la dernière propriété (locale).
attribut d'origine d'arrière-plan
Cet attribut est responsable du positionnement de l'élément. Navigateurs versions précédentes nécessitent l’utilisation de préfixes. La propriété elle-même a trois paramètres :
- boîte de rembourrage positionne le fond par rapport au bord en tenant compte de l'épaisseur du cadre ;
- bordure-boîte diffère de la propriété précédente en ce que la ligne de bordure peut chevaucher complètement ou partiellement l'arrière-plan ;
- boîte de contenu Positionne l'image en la liant au contenu.
Si plusieurs valeurs sont spécifiées, les navigateurs peuvent réagir différemment : Firefox et Opera n'acceptent que la première option.
attribut de répétition d'arrière-plan
En règle générale, si l'arrière-plan est donné par une image, celle-ci doit être répétée horizontalement ou verticalement. C'est à cela que sert l'attribut background-repeat. Ainsi, l'arrière-plan d'un bloc dont le CSS contient une telle propriété peut avoir l'un de plusieurs paramètres :
- pas de répétition— l'image apparaît sur la page dans une seule version ;
- répéter— l'arrière-plan est répété le long des axes x et y ;
- répéter-x- uniquement horizontalement ;
- répéter- uniquement verticalement ;
- espace— le fond est répété, mais si l'espace ne peut pas être rempli, des vides apparaissent entre les images ;
- rond— l'image est mise à l'échelle s'il n'est pas possible de remplir toute la zone avec des images entières.
Exemple d'utilisation d'attribut :
corps (répétition d'arrière-plan : répétition sans répétition)- similaire répétition d'arrière-plan : répétition-y.
En CSS3, il est possible de définir des valeurs pour plusieurs images si vous listez les paramètres séparés par des virgules.
attribut background-clip
Cet attribut définit le comportement du fond sous les bordures (par exemple, dans le cas de bordures en pointillés) :
- boîte de rembourrage— l'arrière-plan est affiché strictement à l'intérieur du bloc ;
- bordure-boîte- l'image rentre dans le cadre ;
- boîte de contenu— l'image en arrière-plan apparaît uniquement à l'intérieur du contenu.
Exemple d'utilisation :
corps (clip d'arrière-plan : content-box ;).
Chrom et Safari nécessitent le préfixe -webkit-.
Attributs d'opacité et de filtre
L'attribut opacity vous permet de définir la transparence de l'arrière-plan - la propriété CSS fonctionnera dans tous les navigateurs. La valeur peut être définie entre 0,0 et 1,0 inclus. Avec cela, vous pouvez définir la transparence Arrière-plan CSS sans valeur entière : au lieu de 0,3 il suffit d'écrire.3 :
.block (image d'arrière-plan : url(img.png) ; opacité : .3 ;).
Pour définir la transparence de l'arrière-plan, dont le CSS fonctionnera même pour IE inférieur à la version 9, utilisez l'attribut filter :
.block (image d'arrière-plan : url(img.png); filtre : alpha(opacity=30);).
Dans ce cas, la valeur d'opacité est définie dans la plage de 0 à 100. Veuillez noter que l'attribut d'opacité diffère du réglage de la transparence à l'aide de RGBA par hérédité : lors de l'utilisation de l'opacité, non seulement l'arrière-plan devient transparent, mais également tous les éléments à l'intérieur du bloc. .
Surveillez toujours les statistiques d'utilisation du navigateur pour la CEI et tous les autres pays. Le plus un gros problème tous les maquettistes disposent d'anciennes versions d'IE, qui ne permettent pas l'utilisation complète de CSS3. Lors du codage, n'oubliez pas d'utiliser services spéciaux, qui vérifie si votre navigateur prend en charge une propriété CSS particulière. Si vous ne pouvez pas installer d'anciennes versions de navigateurs, recherchez un service qui vérifiera le fonctionnement du site dans différents navigateurs en ligne.
Par défaut, tous les nouveaux calques dans Photoshop sont créés avec une opacité de 100 %. Mais le degré de transparence du calque peut être modifié à l'aide des paramètres Opacité Et Remplir situé en haut de la palette Calques.
Opacité(Opacité) est un paramètre avec une échelle de 100 % qui permet de modifier le degré de transparence de l'ensemble du calque, avec tous les effets appliqués. Si la valeur est différente de 100%, le calque sous-jacent sera visible. Un niveau de transparence de 0% indique une absence totale d'images visibles.
La transparence de la couche peut être comparée au papier calque que l'on applique sur les dessins afin de les copier.
Remplir(Remplir) est un paramètre mis à l'échelle à 100 % qui vous permet de modifier la visibilité d'un calque sans affecter ses superpositions.
À quoi ressemble la transparence dans Photoshop
Logiquement, la transparence Image digitale est un manque de saturation et de densité des couleurs. Si vous imaginez la couleur comme un film, alors la transparence est l’intensité de la lumière qui la traverse. Mais Comment afficher la translucidité sur un ordinateur ?
Photoshop introduit symbole transparence envers le monde infographie — fond d'échecs.
Aujourd’hui, cette convention est devenue une norme. De nombreux programmes et services Web utilisent des arrière-plans en damier en matière de transparence. Par exemple, Yandex.Images ou Google Images affichent des images avec des éléments transparents sur un fond en damier.
3 façons de rendre un calque d'image transparent
Pour commencer, vous avez besoin de la couche nécessaire. La technique consistant à en sélectionner deux ou plus en utilisant Touches Ctrl ou Maj .
Note
Le calque d'arrière-plan (avec l'icône de verrouillage) ne peut pas être transparent. Pour lui, ces paramètres sont inactifs.
Encore une remarque
La vignette du calque ne changera pas, quelle que soit la valeur d'opacité que vous définissez.
Méthode 1 : Saisir des chiffres
Entrez la valeur de transparence requise en nombres de 0 à 100 dans la fenêtre des paramètres spéciaux de la palette. Étant donné que les deux paramètres ont presque le même effet, vous pouvez utiliser l’un ou l’autre, rappelez-vous simplement de quoi il s’agit.
Méthode 2 Contrôle du curseur
Un peu à droite des chiffres se trouve un bouton avec une petite flèche. Si vous cliquez dessus, un curseur apparaîtra. Vous devez le déplacer avec la souris vers la gauche ou la droite pour diminuer ou augmenter la transparence du calque, respectivement.
L'affichage numérique affichera la valeur actuelle et l'image elle-même changera avec le mouvement de votre main.
Méthode 3 sur 3: Utiliser le clavier
Pour un certain nombre d'outils Photoshop, il est possible de modifier l'opacité d'un calque à l'aide du clavier. Sélectionnez un outil, par exemple, ou (il existe également de nombreux autres outils, vous pouvez les trouver par force brute).
Appuyez maintenant sur les chiffres de votre clavier :
- Le chiffre 1 changera l'opacité à 10 %, 2 à 20 %, 5 à 50 % et ainsi de suite ;
- Le chiffre 0 signifie 100 % ;
- Composez le 55 et vous obtenez 55%, 67 fait 67% et ainsi de suite
Utiliser la même technique pour changer Remplissages, maintenez la touche Maj enfoncée ainsi que les chiffres.
Comment rendre transparente une section distincte d'un calque
Pour rendre transparent non pas tout le calque, mais seulement lui terrain séparé, cela demandera un certain effort. Il n’existe aucun outil en tant que tel à cet effet. Cependant, selon le problème, il existe au moins deux solutions.
Les deux solutions sont unies par le travail initial, peut-être le plus long : créer un espace dédié. La logique de l'action est simple : vous devez sélectionner un fragment de l'image avec lequel un travail ultérieur aura lieu.
Dans notre exemple, disons que vous devez rendre transparent un fond rond gris. Pour ce faire, j'utiliserai l'outil. Sur le panneau des paramètres, vous devez définir le paramètre Ajouter à la sélection, puis cliquez sur toutes les zones souhaitées jusqu'à ce que vous les sélectionniez toutes.
Une fois la zone sélectionnée apparue, vous pouvez rendre ce fragment transparent.
Méthode 1 : Couper zone requise images vers un nouveau calque
Vous devez d’abord vous assurer qu’aucun des outils permettant de créer une zone sélectionnée n’est actif. Par exemple baguette magique , qui a été utilisé à l’étape précédente.
Maintenant vous pouvez cliquer clic-droit souris par sélection. apparaîtra menu contextuel. Nous sommes intéressés par l'équipe Couper vers un nouveau calque.
En conséquence, ce fragment sera séparé de l'image actuelle et déplacé vers un nouveau calque. Et puis vous pouvez faire ce que vous voulez avec ce nouveau calque, y compris modifier la transparence.
Méthode 2 sur 3: Utiliser une gomme
Cette méthode convient si vous devez obtenir non pas une réduction uniforme de la transparence, mais une réduction flottante, c'est-à-dire rendre cet effet plus fort à certains endroits et plus faible à d'autres.
Sélectionnez , dans la barre d'options, définissez la valeur Opacité différent de 100 %. Effacez ensuite les zones de l'image qui se trouvent dans la zone sélectionnée. L'outil n'affectera que les pixels que vous avez sélectionnés.
Changer la valeur Opacité, si vous devez obtenir un effet inégal.
Comment enregistrer une image avec transparence
Il y en a beaucoup, mais seuls deux d'entre eux prennent en charge la transparence : PNG et GIF.
GIF a une limitation - le pixel doit être transparent ou non, il n'y a pas de troisième option, c'est-à-dire qu'une valeur de transparence, par exemple 59 %, ne sera plus prise en charge. Ce format comporte également des restrictions sur le nombre de couleurs utilisées - il ne peut y en avoir plus de 256.
Par conséquent, l'image doit être enregistrée au format PNG. Seulement, il est dépourvu de tous défauts et est capable d'afficher des pixels translucides.
Pour créer une image PNG dans Photoshop, vous devez exécuter la commande : Fichier - Enregistrer sous. Une boîte de dialogue apparaîtra dans laquelle vous devrez spécifier un emplacement à enregistrer sur votre ordinateur, ainsi que sélectionner dans la liste déroulante Type de fichier — PNG(*.PNG).
Si vous remarquez une erreur dans le texte, sélectionnez-la et appuyez sur Ctrl + Entrée. Merci!
De nos jours, il est devenu très à la mode d'utiliser des blocs et des ombres translucides sur le site. Lorsqu'ils sont combinés correctement, vous pouvez obtenir un design plutôt élégant. Aujourd'hui, je vais vous expliquer et vous montrer comment rendre un bloc translucide ou transparent, et je vous parlerai également des avantages et des inconvénients de chaque méthode. Il s'avère que tout le monde ne sait pas qu'en plus d'utiliser un png translucide en arrière-plan d'un bloc, il existe d'autres méthodes.
Méthode n°1
Je pense que tout le monde connaît cette méthode, pour la mettre en œuvre on utilise du translucide image png par exemple, 1 pixel par 1 pixel, et multipliez-le par l'arrière-plan du bloc. Image translucide peut être fait dans n'importe quel moderne éditeur graphique. Pourquoi png et pas jpg ou gif ? Jpg ne prend pas du tout en charge la transparence et lorsqu'il est enregistré dans ce format rend toutes les parties transparentes blanches. Gif - prend en charge la transparence, mais pas la translucidité. Mais png contient toutes les propriétés dont nous avons besoin.
Exemple de fond de bloc translucide :
Méthode numéro 2
La deuxième méthode est basée sur en utilisant CSS propriété d'opacité qui n'est pas compatible avec tous les navigateurs, mais le problème est résolu en utilisant d'autres propriétés similaires directement prises en charge par Dinosaur. Par exemple, pour ie6, vous devrez utiliser propriété CSS qui utilise des filtres alpha et ressemble à ceci filtre : alpha (opacité = 80) ; Le nombre 80 dans ce cas est un pourcentage. Pour les anciennes versions Mozilla Firefox vous pouvez utiliser la propriété -moz-opacité : 0,8 ; ici comme dans la propriété opacité un bloc opaque a un coefficient de un, et pour la transparence nous fixons sa valeur décimale (par exemple, 0,8 signifiera 80 %).
Exemple de fond translucide du bloc 2 :
Dans ce cas, la teinte de transparence est définie par la propriété backgroud, sur laquelle vous pouvez définir n'importe quelle couleur dont vous avez besoin et que vous souhaitez rendre translucide. En utilisant cette méthode vous constaterez peut-être que toutes les informations du bloc seront translucides.
Méthode numéro 3
Cette méthode Je l'aime mieux, c'est beaucoup plus simple, mais comme la méthode que j'ai présentée ci-dessus, elle n'est pas entièrement compatible avec les anciens navigateurs. Cette méthode est implémentée en définissant la couleur du bloc à l'aide de rgba couleurs dont le dernier paramètre est responsable du canal alpha (pour la translucidité). Les trois premiers paramètres sont des nuances de rouge, de vert et de bleu qui, une fois mélangées, donnent une couleur spécifique. Cette méthode n'est pas supportée par IE jusqu'à la version 8, assez triste bien sûr, mais aujourd'hui ce n'est pas non plus normal navigateur moderne, et personnellement, je ne me souciais pas de lui.
Exemple de fond translucide du bloc 3 :
C'est tout, personnellement, j'aime bien la méthode 3, elle est assez simple, et vous n'avez pas besoin de contacter le serveur pour vous faire une idée. C'est à vous de décider quelle méthode choisir. Si vous connaissez d'autres moyens, écrivez-nous.
Transparence dans Photoshop- l'un des concepts clés. Si vous venez de commencer à apprendre Photoshop et que vous ne savez pas encore comment rendre transparent l'arrière-plan d'une photo ou comment rendre transparente une partie d'un dessin, ce court tutoriel avec des illustrations vous sera utile.
Comment créer un arrière-plan transparent dans Photoshop
Afin de faire un fond transparent dans une photo ou un dessin, il suffit de créer 2 calques : le fond transparent couche d'arrière-plan et en haut couche visible, dans lequel supprimer les zones inutiles de l’image.
1. Ouvrir Photoshop. Ouvrez-le avec l'image que vous souhaitez y placer. arrière-plan transparent (Fichier->Ouvrir…).
2. Sélectionnez l'image/photo entière ( Ctrl+O).
3. Copiez l'image sélectionnée ( Ctrl+C).
4. Ouvrir nouveau fichier dans Photoshop ( Fichier->Nouveau… ou Ctrl+N). Dans la fenêtre qui apparaît, dans la liste déroulante du bas, sélectionnez la valeur Transparent- "transparence":
Cliquez sur Entrer et on voit ça Photoshop créé un nouveau fichier avec un arrière-plan composé de carrés blancs et gris. Ces carrés dans Photoshop indiquent des zones complètement transparentes.
5. Collez l'image précédemment copiée dans un nouveau fichier avec un arrière-plan transparent. Pour cela, nous utilisons du traditionnel Ctrl+V. En conséquence, le courant, complètement vide et couche transparente L'image précédemment copiée sera collée.
6. Sélectionnez la zone que vous souhaitez supprimer à l'aide des outils de sélection habituels ( M)
ou en utilisant des outils « magiques » ( W):
Appuyez sur une touche de votre clavier Supprimer et au lieu de l'arrière-plan ou du fragment d'image sélectionné, vous verrez des carrés blancs et gris - cette zone sera transparente. Ensuite, vous pouvez soit enregistrer l'image avec transparence, soit continuer à expérimenter l'image dans Photoshop.
Comment créer du texte et un filigrane translucides
Dans Photoshop, en plus de l'état " entièrement visible" Et " complètement transparent» il y a une condition visibilité partielle ou transparence partielle. La visibilité partielle d'un objet dans l'image est indiquée en pourcentage.
Texte, logo ou autres marquages translucides sur le dessus images originales souvent utilisé pour protéger le droit d’auteur. Ils sont généralement appliqués à l'aide de Photoshop ou plugins spéciaux. Leur objectif est d'indiquer la source originale de l'image, d'en indiquer la paternité et de rendre la vie difficile à ceux qui veulent voler l'image.
Disons que nous devons publier sur le site Web de l'entreprise photo exclusive voiture, indiquant une inscription translucide sur la photo. Ce type de translucidité est très simple à créer dans Photoshop :
1. Lancez Photoshop et ouvrez notre photo dedans ( Fichier->Ouvrir…).
2. Sélectionnez l'outil Texte ( T) et écrivez une inscription en haut de la photo la bonne taille, couleur et style :
Dans ce cas, le texte sera automatiquement placé dans un calque séparé et sera visible à 100 %.
3. Réglez la visibilité du texte blanc sur la photo à 40 %. Pour cela, dans la fenêtre des calques ( Couches) déplacez le curseur de propriété Opacitéà une valeur de 40% :
Tous. Désormais, une image avec une inscription translucide peut être enregistrée dans Format JPG et publiez-le sur le site Web. De même, au lieu du texte, vous pouvez insérer n'importe quelle autre image, par exemple un logo BMW ou un logo de site Web.
Dans quel format dois-je enregistrer une image avec transparence ?
Veuillez noter que l'enregistrement d'une photo traitée dans Photoshop avec des zones transparentes dans Format JPEG Vous ne pouvez pas : ce format ne prend pas en charge la transparence. Les zones transparentes enregistrées au format JPG seront automatiquement remplies de couleur (blanc par défaut). Parmi les formats utilisés sur le Web, seuls GIF et PNG s'affichent correctement par les navigateurs et prennent en charge la transparence. Format natif Photoshop PSD n'est pas affiché par les navigateurs.
Malheureusement, formats graphiques GIF et PNG ont leurs limites. Format GIF, comme le PNG 8 bits, peut stocker un maximum de 256 couleurs, il ne convient donc pas à l'enregistrement de photographies. Bien que le format PNG 24 bits soit adapté au stockage de photos et d'autres graphiques avec dégradés et transparence, de nombreux sites imposent des restrictions sur les formats de graphiques que les visiteurs peuvent télécharger. Par conséquent, vous pouvez télécharger vos photos ou avatars sur ces sites uniquement au format JPG ou GIF. Dans ce cas, vous devrez enregistrer la photo non pas sur un fond transparent, mais insérer dans Photoshop le fond sur lequel elle sera placée sur le site, enregistrer les résultats au format JPG et ensuite seulement la télécharger sur le site.