51

画像またはCSSを使用してPhotoshopのマルチレイヤーモードを複製する良い方法を知っている人はいますか？

サムネイルにカーソルを合わせるとカラーオーバーレイが表示されるプロジェクトに取り組んでいますが、デザイナーがレイヤーセットを使用して乗算しているため、ウェブ上でサムネイルを作成する方法がわかりません。

私が思いついた最高のことは、rgbaまたはtransparent pngのいずれかを使用することですが、それでも正しく見えません。

4

8 に答える 8

23

このことを行うために導入された新しいCSSプロパティがblend-modeありbackground-blend-modeます。

現在、これらは非常に新しく、Chrome Canary（実験用ウェブブラウザ）とWebkit Nightlyでのみサポートされているため、どのような種類の本番環境でも使用できません。

これらのプロパティは、フォトショップのブレンディングモードとほぼ同じように機能するように設定されており、、、、、、などのさまざまな異なるモードをこれらのプロパティの値として設定できoverlayます。screenlightencolor-dodgemultiply

blend-modeこのブレンド効果を適用するために、画像（およびおそらくコンテンツ？この時点でそれを示唆するものは何も聞いていません。）を重ねることができます。

background-blend-mode非常に似ていますが、実際の画像要素ではなく、背景画像（backgroundまたはを使用して設定）を対象としています。background-image

編集： ブラウザのサポートが拡大するにつれて、次のセクションは少し無関係になります。このチャートをチェックして、どのブラウザがこれをサポートしているかを確認してください：http: //caniuse.com/#feat=css-backgroundblendmode

最新バージョンのChromeがコンピューターにインストールされている場合は、ブラウザーでいくつかのフラグを有効にすることで、これらのスタイルが実際に使用されていることを確認できます（アドレスバーにこれらをスローするだけです）。

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

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

それらの悪い男の子を有効にしてから、このフィドルをチェックしてください：http: //jsfiddle.net/cqzJ5/ （ブラウザでスタイルが適切に有効になっている場合は、2つの画像をブレンドして、シーンが水中にあるように見せます）

この機能はほとんど完全にサポートされていないため、現時点ではこれが最も正当な答えではないかもしれませんが、最近のブラウザが近い将来これらのプロパティを採用し、この問題に対する本当に素晴らしく簡単な解決策を提供することを期待できます。

ブレンディングモードとcssプロパティに関するいくつかの追加の読書リソース：

于 2014-01-09T04:16:59.037 に答える
18

少し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>

といくつかのCSS：

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

フィドル： http： //jsfiddle.net/7uCQQ/381/

于 2014-01-06T06:53:00.973 に答える
17

念のため、この男はそうするためのライブラリを開発しています。私は研究をしているときにそれに入ったばかりで、まだ試していません。

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

于 2011-07-12T22:15:15.347 に答える
11

トリックを知っていれば、24.pngで可能です。

イラストレーターでは、グラフィックを24.pngとしてエクスポートできますが、これは乗算のようには機能しないようです。

私は離れて見つけました。

  1. 乗算されたグラフィックを独自に取得する
  2. その後ろに黒一色の100％ボックスを配置し、両方のグラフィックを選択します
  3. 透明度ウィンドウで、[マスクの作成]、[マスクの反転]の順に選択します。
  4. 24.pngファイルとしてエクスポート

画像の上にz-index（ed）を付けると、乗算のように機能します。

于 2012-11-29T03:37:27.323 に答える
9

そのような能力は利用できません。あなたが得る唯一の合成オプションは、さらに近いものです：

  • lighterHTML5の合成モード<canvas>（これはa*bではなくa+bであり、乗算とはほぼ逆の効果があります）

  • minまたはsubtract CompositorIEのみでフィルタリングします。

どちらも実際には実用的ではありません。

一般に、Photoshopのカンプをレイヤーとしてエクスポートするのではなく、単一の不透明な画像にレンダリングする必要があります。ロールオーバーの場合、2つの画像（1つは通常の状態用、もう1つはホバー状態用）を作成し、CSS:hoverスタイルを使用してそれらを交換して別の背景画像を選択できます。または、プリロードが不要でHTTPリクエストが少ないため、両方の画像を組み合わせて1つを使用し、background-image/background-positionを使用して、各状態のその画像の右側を背景画像として表示します。（「CSSスプライト」）

于 2010-06-02T15:55:21.000 に答える
5

私は最近、OPが要求したことを正確に実行する必要があったので、周りを検索しました。Photoshopで透明なPNGを作成することにより、乗算効果を再現するための優れた方法を見つけました。

  1. 乗算レイヤーと同じ寸法の新しいドキュメントを作成します。
  2. ドキュメントを黒で塗りつぶします。
  3. ベクターマスクを追加します（レイヤーウィンドウの下部にあるレイヤー「fx」の左側にあるアイコン）。
  4. Alt/Option + clickマスク自体に。
  5. 次に、乗算レイヤーをコピーしてマスクに貼り付けます。
  6. Cmd/Ctrl + i貼り付けたレイヤーを反転します。
  7. このレイヤーの下に新しいレイヤーを作成し、乗算オーバーレイの後ろに画像を追加します。
  8. すべてが希望の結果にかなり近いように見えるはずです。必要に応じて、opacity作成したマスクレイヤーのを調整できます。
  9. 見栄えが良ければ、最下層の可視性を切り替えて、マスクされた層をPNGなどとして保存します。

すべてのクレジットはhttps://superuser.com/questions/381704/multiply-blending-mode-to-pngからソジョンに送られます

于 2012-12-10T15:13:52.310 に答える
3

これをチェックしてください： http ：//www.webdesign.org/photoshop/photoshop-basics/remove-white-using-channels.10545.html

これらの手順を使用して、暗い背景（私の場合は木）に白黒の画像（私の場合はインクで描画し、白一色の背景に黒とグレーを使用）に透かしを入れることに成功しました。Adobeの実際のMultiplyフィルターとほとんど違いはありません。

Photoshopの手順を使用して、画像から白を削除し、透明な背景に黒と灰色だけを残しました。これをPNGに保存し、CSS / HTMLの木材に配置することは、乗算よりもはるかに悪いように見えましたが、PNGの明るさを大幅に下げることで解決しました（以前は薄い灰色が目立ち、醜いものになりました）。

一般に、フォトショップで遊んで、Webの状況を再現することをお勧めします。無地の背景の上に半透明（特別なものはありません）のレイヤーを配置します。上記のようなチュートリアルでは、掛け算やその他の派手な効果を再現できる場合があります。

于 2012-07-28T16:37:55.183 に答える
0

運がいいかどうかわからない。私の知る限り、高度なJavaScriptを統合しようとしても不可能です。

于 2010-06-02T15:00:58.497 に答える