web-dev-qa-db-fra.com

Comment répliquer le mode couche multipliée PS

Est-ce que quelqu'un connaît un bon moyen de reproduire le mode de calques multiples de Photoshop en utilisant une image ou un CSS?

Je travaille sur un projet comportant des vignettes qui se superposent en couleur lorsque vous les survolez, mais le concepteur a utilisé un jeu de calques pour se multiplier et je ne vois pas comment le produire sur le Web.

La meilleure chose que j'ai imaginée est d'utiliser rgba ou un png transparent, mais même dans ce cas, cela ne semble pas correct.

cssimageoverlayphotoshoprgba
48
Andrew Philpott

De nouvelles propriétés CSS sont introduites pour faire cela, il s'agit de blend-mode et background-blend-mode.

Actuellement, vous ne pourrez pas les utiliser dans n'importe quel environnement de production, car ils sont très récents et ne sont actuellement pris en charge que par Chrome Canary (navigateur Web expérimental) et Webkit Nightly.

Ces propriétés sont configurées pour fonctionner presque exactement de la même manière que les modes de fusion de photoshop et permettent de définir différents modes en tant que valeurs pour ces propriétés, telles que overlay, screen, lighten, color-dodge et bien sûr multiply .. entre autres.

blend-mode autoriserait les images (et peut-être le contenu? Je n'ai rien entendu qui puisse suggérer que, à ce stade-ci), superposées pour que cet effet de fusion soit appliqué.

background-blend-mode serait assez similaire, mais serait destiné aux images d'arrière-plan (défini à l'aide de background ou background-image) plutôt que d'éléments d'image réels.

EDIT: La section suivante est en train de perdre de son importance à mesure que le support des navigateurs grandit .. Consultez ce tableau pour voir quels navigateurs prennent en charge cette fonctionnalité: http://caniuse.com/#feat=css -backgroundblendmode

Si la dernière version de Chrome est installée sur votre ordinateur, vous pouvez réellement voir ces styles utilisés en activant certains indicateurs dans votre navigateur (il suffit de les ajouter dans votre barre d'adresse :)

chrome://flags/#enable-experimental-web-platform-features
chrome://flags/#enable-css-shaders

* note that the flags required for this might change at any time

Activez ces mauvais garçons puis vérifiez ce violon: http://jsfiddle.net/cqzJ5/(Si les styles sont correctement activés dans votre navigateur, les deux images doivent être fusionnées pour la scène a l'air d'être sous l'eau)} _

Bien que cela ne soit pas la réponse la plus légitime pour le moment en raison de la prise en charge quasi-inexistante de cette fonctionnalité, nous pouvons espérer que les navigateurs modernes adopteront ces propriétés dans un proche avenir, ce qui nous donnera une solution vraiment simple et agréable à ce problème .

Quelques ressources de lecture supplémentaires sur les modes de fusion et les propriétés css:

23
Blake Mann

Simple avec un peu de SVG:

<svg width="200" height="200" viewBox="10 10 280 280">
    <filter id="multiply">
        <feBlend mode="multiply"/>
    </filter>
    <image id="kitten" x="0" y="0" width="300" height="300" xlink:href="http://placekitten.com/300" />
</svg>

et quelques CSS:

#kitten:hover {
    filter:url(#multiply);
}

Le violon: http://jsfiddle.net/7uCQQ/381/

18
tnt-rox

Pour mémoire, ce gars est en train de développer une bibliothèque pour le faire. Je viens juste d’y entrer en faisant une recherche, je n’ai pas encore essayé.

https://github.com/Phrogz/context-blender

17
Tolomelli

C'est possible avec un 24.png - si vous connaissez le truc.

Dans illustrator, vous pouvez exporter le graphique en tant que 24.png, mais cela ne semble jamais fonctionner comme si vous le multipliiez.

J'ai trouvé loin.

  1. obtenez votre graphique multiplié seul
  2. placez un rectangle noir à 100% derrière celui-ci et sélectionnez les deux graphiques
  3. dans la fenêtre de transparence, sélectionnez "Make Mask" puis "Invert Mask"
  4. exporter en tant que fichier 24.png

fonctionne comme une multiplication quand z-index (ed) au-dessus d'une image.

11
user1861969

Aucune telle capacité n'est disponible. Les seules options de composition que vous obtenez et qui sont même proches sont:

  • Mode de composition lighter sur un <canvas> HTML5 (qui est a + b et non a * b, et a le même effet de se multiplier)

  • Filtres min ou subtractCompositor dans IE uniquement.

Ni sont vraiment pratiques.

En règle générale, vous ne devez pas essayer d'exporter des compositions Photoshop sous forme de calques, mais les rendre en une seule image opaque. Pour les survols, vous pouvez créer deux images (une pour l'état normal et une pour le survol) et les permuter entre elles en utilisant le style CSS :hover pour choisir une image d'arrière-plan différente. en un et utilisez background-image/background-position pour afficher la partie droite de cette image dans chaque état en tant qu'image d'arrière-plan. («Sprites CSS»)

9
bobince

J'ai eu récemment le besoin de faire exactement ce que le PO a demandé, alors j'ai cherché. J'ai trouvé un excellent moyen de reproduire l'effet de multiplication en créant un fichier PNG transparent dans Photoshop.

  1. Créez un nouveau document avec les mêmes dimensions que votre couche multiplie
  2. Remplissez le document en noir.
  3. Ajoutez un masque vectoriel (l’icône située à gauche du calque "fx" en bas de la fenêtre des calques).
  4. Alt/Option + click sur le masque lui-même.
  5. Maintenant, copiez et collez votre couche de multiplication dans le masque.
  6. Cmd/Ctrl + i pour inverser le calque que vous venez de coller.
  7. Créez un nouveau calque sous ce calque et ajoutez l'image derrière la superposition multipliée.
  8. Tout devrait sembler assez proche du résultat souhaité. Si nécessaire, vous pouvez ajuster la opacity du calque masqué que nous avons créé.
  9. Lorsque le résultat est satisfaisant, il suffit de basculer la visibilité de la couche inférieure et de sauvegarder la couche masquée au format PNG et le tour est joué!

Tout le crédit revient à Sojeong de https://superuser.com/questions/381704/multiply-blending-mode-to-png

5
cfx

Découvrez ceci: http://www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html

En utilisant ces instructions, j'ai eu beaucoup de succès en filigrane une image en noir et blanc (dessin à l'encre dans mon cas, avec des noirs et des gris sur un fond blanc uni) sur un fond sombre (bois dans mon cas). Il n’ya guère de différence avec le véritable filtre Multiply d’Adobe.

J'ai utilisé les instructions de Photoshop pour supprimer les blancs de mon image, ne laissant que les noirs et les gris sur un fond transparent. Enregistrer cela au format PNG et le placer sur le bois en CSS/HTML paraissait encore bien pire que multiplier, mais la luminosité du fichier PNG a été résolue (les gris clairs se distinguaient auparavant, le rendant laid).

En général, je vous recommande de jouer dans photoshop et de reproduire la situation Web: une couche semi-transparente (sans objet particulier) au-dessus d'un arrière-plan solide. Des didacticiels tels que ceux décrits ci-dessus peuvent vous permettre de reproduire des effets multiples ou fantaisistes.

3
Bart Van Hove

Je ne sais pas si vous aurez de la chance. Autant que je sache, ce n'est pas possible, même si vous tentez d'intégrer du code JavaScript avancé.

0
kilrizzy