Modes de fusion : un guide complet pour la conception graphique et Web

Les modes de fusion sont un excellent moyen d'améliorer numériquement vos images et vos conceptions. Il existe plusieurs façons d'utiliser les modes de fusion en tant que graphiste (à l'aide d'un logiciel de conception) ou en tant que concepteur Web (à l'aide de CSS ou de Divi). Dans cet article, nous allons couvrir tout ce que vous devez savoir sur les modes de fusion, y compris une ventilation détaillée de chacun, ainsi que la façon de les utiliser dans Photoshop et sur votre site Web.

Nous couvrirons :

Comment fonctionnent les modes de fusion
Descriptions des modes de fusion
Comment utiliser les modes de fusion de Photoshop
Modes de fusion CSS pour la conception Web
Modes de fusion avec Divi

Et il y a plus. Allons-y !

Qu'est-ce qu'un mode de fusion ?

Un mode de fusion est une équation mathématique qui définit la façon dont les pixels se mélangent lorsque deux couches de pixels ou plus sont combinées. Bien que les algorithmes derrière les modes de fusion soient complexes, ils sont assez faciles à utiliser à l'aide d'outils de conception ou de logiciels de retouche photo comme Photoshop. Avec ce type de logiciel, les concepteurs peuvent mélanger des calques (photos, couleurs, texte) de manière créative pour des conceptions uniques en quelques clics. Vous pouvez mélanger n'importe quel nombre de combinaisons de calques. Mais, au minimum, pour obtenir un effet de mode de fusion, vous aurez besoin d'au moins deux calques : un calque de base et un calque de fusion.

Comment fonctionnent les modes de fusion ?

Les modes de fusion combinent un calque de base avec un calque de fusion pour obtenir différents effets. Chaque effet (ou mode) utilise une équation mathématique qui combine les codes de couleur rouge, vert et bleu (RVB) ou cyan, magenta, jaune et noir (CMJN) avec des niveaux d'obscurité et de lumière pour créer des effets multicouches. Pour la plupart des modes de fusion, l'opacité est nécessaire pour faire ressortir l'effet de fusion. Vous pouvez utiliser les modes de fusion pour appliquer des superpositions de couleurs aux images, mélanger des images, manipuler les niveaux de couleur sur les photos, et bien plus encore.

À titre d'exemple, examinons la combinaison de deux calques et l'application de Multiplier. En utilisant un calque photo comme calque de base et un dégradé avec les couleurs #ff0f0f et #4a00e8 comme calque de fusion, l'image résultante apparaît assombrie et prend l'apparence des couleurs du dégradé.

Pour qu'ils fonctionnent, il doit y avoir au moins deux couches. Chaque option produit des résultats différents selon le mode choisi. Ça se décompose comme ça. Tout d'abord, la couche de base est la couleur ou l'image d'origine. Ensuite, le calque de fusion s'applique directement au calque de base en utilisant un mode spécifique. Le résultat est un mélange des deux couches, qui modifie les couleurs pour révéler une image avec une apparence complètement modifiée.

Introduction aux modes de fusion de Photoshop

Il existe plus de 27 modes de fusion dans Photoshop. Certains sont utilisés pour ajuster l'opacité, tandis que d'autres assombrissent l'apparence des photos et des dessins. Il existe également des modes de fusion qui éclaircissent les images, tandis que d'autres fonctionnent simplement pour régler le contraste.

Opacité vs remplissage avec les modes de fusion

Il est important de noter que même si les modes de fusion fonctionnent principalement avec le réglage des niveaux d'opacité, il existe 8 modes de fusion spéciaux qui fonctionnent mieux lors du réglage de la valeur de remplissage (ou du pourcentage). Par exemple, lorsque vous combinez un calque photo de base avec un calque de mélange de couleurs unies à l'aide de Hard Mix, vous pouvez voir que le réglage de la valeur de remplissage du calque de mélange à 50 % a un effet plus agréable que le réglage de l'opacité à 50 %.

En plus du mélange dur, les huit modes de fusion spéciaux restants sont la gravure de couleur, la gravure linéaire, l'esquive de couleur, l'esquive linéaire (ajout), la lumière vive, la lumière linéaire et la différence.

Descriptions des modes de fusion

Dans Photoshop, chaque mode de fusion est classé par type (normal, soustractif, additif, contraste, comparatif et composite). Voici une liste expliquant chaque mode de fusion et comment ils peuvent être utilisés.

Normal

Cette catégorie contient les modes de fusion normal et fondu. Dans cette catégorie, les opacités des calques de fusion devront être ajustées pour que les effets soient perceptibles.

Normal

C'est le mode par défaut dans Photoshop. Il nécessite des ajustements d'opacité pour toute différence notable dans vos images. Lorsqu'une opacité de 100 % est appliquée, le calque de fusion bloque complètement le calque de base. Dans notre exemple, vous pouvez voir qu'il n'y a pas d'image visible sous notre image, couleur ou dégradé.

Dissoudre

Dissoudre prend les couleurs de pixel du calque de base et peint sur les couleurs de pixel dans le calque de fusion (apparemment au hasard) pour produire un résultat de fusion pixélisé unique. Comme avec le mode normal, le réglage de l'opacité est le seul moyen d'obtenir une différence visuelle dans les images et les conceptions. Dans notre exemple, nous montrons le mode fondu avec une opacité de 75% appliquée à nos calques de fusion pour créer un motif de tramage.

Additif

Comme leur nom l'indique, ces modes de fusion ajouteront des tons sombres à vos images et à vos conceptions. La catégorie additive contient assombrir, multiplier, brûler les couleurs et couleur plus foncée.

Assombrir

Assombrir compare les pixels du calque de base avec le calque de fusion, puis sélectionne les pixels les plus sombres pour donner au calque une apparence assombrie. Dans notre exemple, vous pouvez voir l'image s'assombrir avec une superposition de photo, de couleur ou de dégradé en utilisant ce mode.

Multiplier

C'est l'un des modes de fusion les plus couramment utilisés dans Photoshop. Cela fonctionne en multipliant les couleurs du calque de base avec le calque de mélange. Il en résulte une image avec un aspect assombri. Tous les blancs des calques sont intacts, tandis que les tons plus sombres apparaissent beaucoup plus sombres que la photo ou le dessin d'origine.

Brûlure des couleurs

Semblable à la multiplication, Color Burn augmente le contraste pour assombrir les couleurs du calque de base avant de le mélanger avec les couleurs du calque de fusion. Le mélange avec des couleurs blanches ne change en rien l'apparence des images. Bien que la gravure de couleur soit similaire au mode de fusion multipliée, elle rend les images beaucoup plus sombres.

Combustion linéaire

Semblable à Color Burn, cet effet de « brûlure » ​​est créé en réduisant la luminosité des couleurs du calque de base avant de les mélanger avec les couleurs du calque de fusion. Les résultats rendent le calque de base beaucoup plus sombre sans affecter les pixels blancs du calque.

Couleur plus foncée

Darker Color compare les pixels du calque d'image avec les pixels du calque de fusion, puis affiche la couleur de valeur inférieure. Contrairement à Darken, Darker Color ne crée pas de troisième couleur car il choisit en fait les valeurs de couleur les plus basses des calques de base et de fusion. Dans notre exemple, vous pouvez voir que les bruns de notre calque d'image sont les plus sombres, ils ressortent donc beaucoup plus que la couleur bleue de notre calque de fusion.

Soustractif (modes de fusion plus légers) :

Les modes de fusion soustractive donneront à vos images et conceptions une apparence plus claire car ils soustraient la lumière (ou les tons clairs) lors de la fusion des calques. La catégorie Soustractive contient la lumière, l'écran, l'esquive de couleur, l'esquive linéaire (ajout) et la couleur plus claire.

Alléger

Cela sélectionnera la couleur la plus claire des deux calques pour remplacer les pixels plus sombres que le calque de fusion sans modifier les pixels plus clairs que le calque de fusion.

Filtrer

Ce mode sélectionne l'inverse des calques de fusion et de base, puis le multiplie pour créer une apparence plus claire. Les couleurs noir et blanc restent les mêmes.

Esquive de couleur

Ce mode éclaircit le calque de base tout en diminuant le contraste entre les calques de base et de fusion. La couleur noire reste la même.

Esquive linéaire (Ajouter)

Cela éclaircira le calque de base pour refléter le calque de fusion tout en augmentant la luminosité. Le noir reste le même.

Couleur plus claire

Similaire à éclaircir, plus clair compare les calques de base et de fusion, puis conserve le plus clair des deux. La différence entre une couleur plus claire et une couleur plus claire réside dans le fait que la couleur plus claire regarde les canaux RVB dans leur ensemble, tandis que la couleur plus claire regarde les canaux individuels pour compléter le mélange.

Contraste

Ces modes de fusion créent différents effets en utilisant le contraste et sont basés sur le fait que le calque de base ou de fusion a une couleur plus claire que 50 % de gris. Cette catégorie contient la superposition, la lumière douce, la lumière dure, la lumière vive, la lumière linéaire, la lumière des broches et le mélange dur.

Recouvrir

L'un des modes les plus couramment utilisés, la superposition utilise essentiellement le mode écran à 50% de force sur des couleurs plus claires que le gris. Fondamentalement, les tons sombres modifient les tons moyens pour devenir plus sombres, et les tons clairs modifient les tons moyens pour créer des couleurs plus claires.

Lumière douce

Semblable à la superposition, la lumière douce applique un effet plus sombre ou plus clair en fonction des valeurs de lumière d'une image ou d'une couleur, mais dans une apparence plus subtile.

Lumière forte

En combinant la multiplication et l'écran, la lumière dure utilise la luminosité dans le calque de fusion pour calculer son résultat. Habituellement, il est préférable de réduire l'opacité du calque de fusion lors de l'utilisation d'une lumière dure pour obtenir de bons résultats.

Vive lumière

50 % de gris s'assombrit, mais tout ce qui est plus léger que 50 % est éclairci. La lumière vive est l'une des 8 spéciales, ce qui lui permet de se fondre différemment selon que vous réglez le remplissage ou l'opacité.

Lumière linéaire

Un autre membre de la spéciale 8, la lumière linéaire combine les effets d'esquive linéaire (ajout) sur les pixels plus clairs et de brûlure linéaire sur les plus sombres.

Broche Lumière

Ce mode combine un mélange sombre et clair en même temps. Cela supprimera tous les tons moyens de votre image. Ajuster l'opacité peut produire des résultats très différents.

Mélange dur

Le mélange dur fonctionne en ajoutant la valeur de chaque canal RVB du calque de fusion aux calques RVB correspondants du calque de base. L'apparition d'une lumière dure entraîne une perte de couleur à l'exception du noir, du blanc, du gris ou du RVB et du CMJN.

Comparatif

Ceux-ci créent des variations de couleur en fonction des valeurs du calque de fusion et du calque de base. La différence, l'exclusion, la soustraction et la division sont incluses.

Différence

Le mode différence prend les informations de chaque canal de couleur et soustrait soit le calque de mélange du calque de base, soit le calque de base du calque de mélange. Le résultat dépend de laquelle des deux couches est la plus brillante. Les couleurs noires ne produisent aucun changement.

Exclusion

L'exclusion est similaire au mode de fusion des différences, mais réduit le contraste. Si vous mélangez avec du blanc, la couche de base devient inversée. Cependant, les couleurs noires ne changent pas.

Soustraire

Ce mode examinera tous les canaux de couleur, puis supprimera les couleurs du calque de fusion du calque de base.

Diviser

Cela examine tous les canaux de couleur, puis divise le calque de fusion du calque de base.

Modes de fusion composite :

Cette catégorie fonctionne pour modifier la qualité des couleurs. Il utilise une combinaison de blanc, ainsi que des couleurs primaires telles que le rouge, le vert, le bleu (RVB) et le cyan, le magenta, le jaune et le noir (CMJN) pour créer le mode de fusion.

Teinte

La teinte fonctionne en forçant les couleurs du calque de base à être recolorées avec la teinte du calque de fusion. Fondamentalement, il garde toutes les couleurs sombres sombres et toutes les couleurs claires claires, mais ne remplace que la teinte du calque de fusion. Dans notre exemple, vous pouvez voir que les couleurs les plus claires de l'image des arbres (moins les blancs) sont transformées en la teinte du bleu dans notre calque de couleur de mélange.

Saturation

Pour la saturation, les résultats sont similaires à la teinte, sauf que la saturation des images est affectée. La couleur et la teinte les plus claires du calque de base restent les mêmes, tandis que la saturation est remplacée par la couleur de fusion.

Couleur

La couleur fonctionne un peu comme la teinte, sauf qu'elle ne conserve que les couleurs les plus claires des couches de base. Il ajoute ensuite la teinte et la saturation du calque de fusion. Dans notre exemple, vous pouvez voir que les tons clairs des couleurs unies sont remplacés par du bleu. De même, les couleurs plus claires de notre 3ème exemple sont remplacées par les dégradés de couleurs rouge et bleu du calque de fusion.

Luminosité

La luminosité est le contraire de la couleur. Il parvient à maintenir à la fois la teinte et la saturation dans le calque photo de base de notre exemple, tout en remplaçant ses couleurs les plus claires (luminosité) par les couleurs du calque de fusion.

Autres modes de fusion

En plus des 27 modes de fusion de calques répertoriés, quelques autres sont disponibles dans certaines situations ou avec certains outils. Par exemple, Derrière peut être utilisé pour éditer ou peindre dans la partie transparente d'un calque. Cela ne fonctionnera que dans les calques où le verrouillage de la transparence n'est pas sélectionné. Effacer n'est disponible que lorsque vous utilisez les outils forme, pot de peinture, pinceau, crayon, ainsi que les commandes de remplissage et de trait. Il est utilisé pour éditer ou peindre chaque pixel pour le rendre transparent.

Comment utiliser les modes de fusion de Photoshop

Lorsque vous travaillez dans Photoshop, les modes de fusion peuvent être situés dans deux zones. Le premier se trouve dans le panneau des calques. Pour accéder aux modes de fusion, cliquez sur le menu déroulant sous Calques .

À partir de là, vous avez le choix entre les options de mode de fusion du calque 27.

Les 8 modes de fusion spéciaux ont un moyen supplémentaire d'accéder. Dans les styles de calque , vous pouvez décocher la case du calque de forme de transparence. Cela vous donne un niveau supplémentaire de capacités de mélange. Pour y accéder, cliquez sur l'option fx en bas du panneau des calques.

Ensuite, choisissez les options de fusion dans le menu déroulant.

Enfin, décochez le calque des formes de transparence.

Création d'un mélange simple

Afin de montrer comment les utiliser, nous fournirons un exemple de base utilisant Photoshop afin que vous puissiez comprendre comment chacun fonctionne.

Étape 1 : Choisissez une image

La première étape consiste à ouvrir une photo comme calque de base. Nous utiliserons la photographie que nous avons utilisée dans nos autres exemples. Assurez-vous que ce calque est réglé sur normal .

Étape 2 : créer un nouveau calque de couleur

Accédez à Calque> Nouveau calque de remplissage> Couleur unie pour créer un nouveau calque.

Nommez le calque Blend Layer , affectez le bleu comme mode et cliquez sur ok .

Ensuite, remplissez-le avec #8f42ec , puis cliquez sur OK pour créer le calque.

Étape 3 : appliquer un mode de fusion

Ensuite, appliquez le mode de fusion de la lumière des broches au calque de fusion que vous venez de créer.

Étape 4 : Ajustez l'opacité

Enfin, ajustez l'opacité de votre calque de fusion à 50 %. Les résultats devraient maintenant montrer que la couleur violette est plus atténuée et a une apparence moins forte.

Si vous souhaitez un didacticiel plus détaillé, consultez notre didacticiel sur l'utilisation des modes de fusion pour combiner des images dans Photoshop.

Modes de fusion CSS pour la conception Web

Les modes de fusion fonctionnent généralement de la même manière dans la conception Web (avec CSS) que dans les éditeurs vidéo et graphiques. Cela étant dit, vous devrez utiliser des règles et du code CSS pour les utiliser sur votre site Web. Il existe 2 propriétés CSS principales qui vous permettent d'ajouter des modes de fusion dans la conception Web :

• mode de fusion d'arrière-plan
• mode mix-blend

Discutons de ce que chacun fait et donnons des exemples afin que vous puissiez mieux comprendre ce qu'ils font.

Propriété CSS Background-Blend-Mode

Background-blend-mode est une propriété CSS utilisée pour ajouter des modes de fusion à plusieurs arrière-plans d'un même élément HTML. En CSS, vous pouvez ajouter un arrière-plan à un élément en utilisant les propriétés background, background-image ou background-color. Si un élément contient au moins deux images d'arrière-plan, des dégradés linéaires ou des couleurs, vous pouvez utiliser la propriété background-blend-mode pour attribuer un mode de fusion à ces arrière-plans.

Par exemple, voici un élément div avec trois classes CSS ("element", "backgrounds" et "with-blend-mode").

<div class="element backgrounds with-blend-mode"></div>

Comme le suggèrent les noms des classes CSS, il s'agit d'un élément qui aura des arrière-plans avec un mode de fusion. En utilisant CSS, nous pouvons ajouter nos arrière-plans et notre mode de fusion d'arrière-plan en ciblant ces classes.

Dans l'exemple CSS ci-dessous, vous pouvez voir que la classe "backgrounds" ajoute trois arrière-plans à l'élément (une image d'arrière-plan, un dégradé d'arrière-plan et une couleur d'arrière-plan. La classe "with-blend-mode" applique le mode de fusion Screen à l'élément. trois arrière-plans de l'élément.

.with-blend-mode {
  background-blend-mode: screen;
}

.backgrounds {
  background-image: url("/image.jpg"),
    linear-gradient(90deg, #ff0f0f 0%, #4a00e8 100%);
  background-color: darkblue;
}

.element {
  height: 400px;
  width: auto;
  max-width: 600px;
}



Cela permet à l'élément d'afficher non seulement un arrière-plan, mais un mélange des trois ! Voici un avant et après de l'image avec et sans le background-blend-mode :



Voir le CodePen

Propriété CSS Mix-Blend-Mode

Mix-blend-mode est une propriété CSS utilisée pour ajouter un style de mode de fusion à plusieurs éléments, pas seulement aux arrière-plans d'un seul élément comme background-blend-mode. Il peut fusionner un élément avec son élément parent ou avec d'autres éléments frères qui se chevauchent.

Par exemple, ci-dessous, nous avons un élément div à l'intérieur d'un élément div parent.

<div class="parent">
  <div class="element with-mix-blend"></div>
</div>

En utilisant CSS, nous pouvons ajouter un dégradé d'arrière-plan à l'élément parent et une image d'arrière-plan à l'élément enfant. Ensuite, nous ciblons l'élément enfant en utilisant la classe "with-mix-blend" pour ajouter le Screen mix-blend-mode.

.with-mix-blend {
  mix-blend-mode: screen;
}

.parent {
  background-image: linear-gradient(90deg, #ff0f0f 0%, #4a00e8 100%);
}

.element {
  background-image: url("/image.jpg");
}

Le résultat est un mélange des arrière-plans des deux éléments pour un effet unique !



Voir le CodePen

Modes de fusion CSS utilisant Divi (une solution simple sans code)

Si vous ne voulez pas prendre le temps de coder en CSS pour votre site WordPress mais que vous souhaitez tout de même utiliser les modes de fusion, alors Divi est la meilleure option pour vous. Divi est l'outil de conception le plus puissant dont vous aurez besoin dans un créateur de thème ou de page. À bien des égards, Divi est à la fois un créateur de site Web et un éditeur de photos. En utilisant l'exemple ci-dessus, nous pouvons appliquer les mêmes effets de mode de fusion sans avoir besoin de codage.

Divi dispose de 16 modes de fusion intégrés qui vous permettent de mélanger des couches d'éléments Web (couleurs, images d'arrière-plan, formes et images multiples) pour obtenir des designs époustouflants. Vous pouvez mélanger du texte dans des images, des images d'arrière-plan dans des lignes et des sections, et bien plus encore. Jetez un œil à certains des tutoriels proposés sur notre blog afin d'avoir une meilleure idée de la façon dont vous pouvez incorporer des modes de fusion dans vos conceptions.

Outils de conception utilisant les modes de fusion

Il existe une variété d'outils de conception puissants qui vous permettent d'utiliser les modes de fusion. Les plus populaires sont ceux d'Adobe, mais il y en a d'autres qui pourraient vous être utiles (dont certains pour la conception de vidéos et de sites Web). Voici une liste de quelques outils de conception de mode de fusion utiles à votre disposition.

1. Photoshop : En tant que géant de la retouche photo de longue date, Photoshop a essentiellement mis les modes de fusion sur la carte. Comme déjà mentionné, il existe 27 modes de fusion dans Photoshop qui permettent une variété d'effets lors de l'édition de photos.
2. Illustrator : Illustrator est l'une des solutions les plus populaires pour la conception graphique. Il existe 15 modes de fusion disponibles dans Illustrator pour appliquer des effets aux fichiers vectoriels d'autres éléments de conception.
3. Premiere Pro Premiere Pro est l'un des logiciels de montage vidéo incontournables du marché. Les modes de fusion sont disponibles dans la chronologie pour mélanger les clips ensemble afin de créer différents effets. Semblable à Photoshop, Premiere Pro propose 27 modes de fusion.
4. After Effects : les options d'After Effects sont identiques à celles utilisées dans Photoshop et Premiere Pro à une exception près, le fondu enchaîné. Les modes sont utilisés pour fusionner les calques contenant des animations. De plus, ces plugins After Effects peuvent amener vos vidéos à un tout nouveau niveau de créativité.
5. Corel : Corel propose plusieurs programmes qui utilisent des modes de fusion, notamment Paintshop Pro, Pinnacle Studio et Corel Draw. 18 modes de fusion sont disponibles.
6. Figma Il existe 16 options dans Figma pour mélanger les calques afin d'obtenir des effets variés. Figma est un programme Web utilisé pour la conception d'interfaces Web et utilisateur.
7. Divi : En tant que thème WordPress d'édition de site complet, Divi dispose de 16 modes de fusion inclus dans le Divi Builder et d'effets de filtre supplémentaires qui peuvent être utilisés dans n'importe quel élément avec des options de couleur et d'arrière-plan.

Astuces et meilleures pratiques pour le mode de fusion

L'utilisation des modes de fusion est un excellent moyen d'ajouter de l'intérêt à vos photos et conceptions. Cela étant dit, il y a certaines choses que vous devriez considérer lors de leur utilisation.

Ajuster le remplissage et/ou l'opacité

La plupart des modes de fusion fonctionnent mieux lors du réglage de l'opacité du calque de fusion. Cependant, il y en a quelques-uns qui nécessitent d'ajuster le remplissage à la place. Comme mentionné précédemment, il existe un groupe de modes appelé le spécial 8. Il s'agit de la gravure de couleur, de la gravure linéaire, de l'esquive de couleur, de l'esquive linéaire (ajout), de la lumière vive, de la lumière linéaire, du mélange dur et de la différence. Bien que vous puissiez régler l'opacité pour le spécial 8, vous remarquerez une différence radicale lors du réglage du remplissage.

Comprendre les types de mode de fusion

Lorsque vous utilisez les modes de fusion, familiarisez-vous avec les catégories. Par exemple, si vous retouchez une photo trop claire, vous voudrez utiliser un mode de la catégorie assombrir. L'utilisation de la multiplication pour assombrir votre photo sera mieux adaptée à cette utilisation, plutôt que l'assombrissement. En revanche, si vous avez une image trop sombre, utilisez un mode de la catégorie éclaircir. Les modes tels que la superposition peuvent ajouter trop de tons clairs, vous pouvez donc utiliser la lumière des broches à la place car elle est plus subtile. Le fait est que vous devriez prendre le temps d'expérimenter chaque mode pour acquérir une meilleure connaissance de ce que chacun fait.

Utilisez des filtres avec des modes de fusion pour de meilleurs résultats

Utiliser un filtre passe-haut pour rendre les images plus nettes



Bien que le passe-haut ne soit pas un mode de fusion, vous pouvez le combiner avec le mode de superposition pour affiner les images. Commencez avec l'image que vous avez choisie comme calque d'arrière-plan. Ensuite, dupliquez le calque. De là, sélectionnez filtre> autre> passe-haut . Ajustez le curseur pour choisir la netteté souhaitée. Enfin, définissez la couche supérieure avec le filtre passe-haut appliqué à la superposition . C'est un moyen rapide et facile d'ajouter de la netteté aux photos qui peuvent être un peu floues.

Utilisez le filtre Lens Flare comme point focal



Un autre excellent filtre à utiliser est la lumière parasite. Lorsqu'il est combiné avec diviser à une opacité réduite, il peut fournir un point focal sur votre image. Ajoutez un calque au-dessus de votre calque photo. Remplissez-le de noir. Ensuite, accédez à filtre> rendu> lumière parasite . Ajustez l'emplacement de votre lumière parasite puis cliquez sur Appliquer . Ensuite, définissez le mode de fusion du calque de lumière parasite sur diviser , puis réglez l' opacité sur 50 % .

Quand utiliser les modes de fusion CSS au lieu des images Photoshop dans la conception Web

Les modes de fusion sont les plus couramment utilisés dans Photoshop pour concevoir des images qui sont ensuite téléchargées sur une page Web. Les modes de fusion CSS fonctionnent à l'aide du code CSS que votre navigateur utilise pour afficher les styles à l'aide des pixels sur votre moniteur. Cela vous permet d'appliquer ces conceptions à n'importe quel élément de la page d'une manière que vous ne pouvez pas faire avec des images préconçues dans Photoshop. Voici quelques façons d'envisager.

Pour la conception de texte

Le contenu important du site Web (en particulier le texte) doit toujours être lisible par les moteurs de recherche (pour le référencement). Les modes de fusion CSS vous permettent d'ajouter des styles de fusion aux éléments de texte (comme les en-têtes) pour créer de superbes conceptions de texte avec une bien meilleure qualité.

Pour les effets de survol

Les modes de fusion CSS sont également parfaits pour ajouter des effets de survol interactifs à l'aide des modes de fusion. Par exemple, vous pouvez ajouter un style de fusion aux images au survol pour booster le design de votre galerie photo avec quelques lignes de CSS.

Pour l'efficacité et la performance

Les modes de fusion CSS facilitent la modification dynamique de la conception des éléments avec un petit ajustement du code. Cela vous permet de modifier la conception de votre site Web sans avoir à vous soucier de créer de nouvelles images dans Photoshop. De plus, dans de nombreux cas, les conceptions générées via CSS se chargeront plus rapidement que les grandes images.

Conclusion

Les modes de fusion sont parfaits pour ajouter des effets spéciaux aux images et aux conceptions dans les éditeurs graphiques et vidéo, ainsi que dans les applications Web. Savoir comment chacun fonctionne est utile pour explorer de nouvelles possibilités de conception passionnantes. De plus, Photoshop n'est pas le seul outil de conception qui les utilise. En ce qui concerne le Web, les modes de fusion CSS vous permettent d'ignorer complètement Photoshop pour appliquer les modes de fusion directement à votre site Web. Et, avec Divi, vous n'avez même pas besoin de connaître CSS pour créer des designs époustouflants à l'aide des modes de fusion. J'espère que ce guide vous aidera tout au long de votre parcours de conception, où que vous soyez.

Quel outil utilisez-vous pour appliquer des effets de fusion à vos conceptions ? Faites-nous savoir dans la section commentaires ci-dessous.

h2 {scroll-margin-top : 80px ;}