web-dev-qa-db-ja.com

PSマルチプルレイヤーモードを複製する方法

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

私は、サムネイルの上にマウスを重ねると色がオーバーレイされるプロジェクトに取り組んでいますが、デザイナーはレイヤーセットを使用して乗算し、Web上でそれを作成する方法がわかりません。

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

cssimageoverlayphotoshoprgba
48
Andrew Philpott

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

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

これらのプロパティは、Photoshopのブレンドモードとほぼ同じように動作するように設定されており、overlay、screen、lightenなどのさまざまなモードをこれらのプロパティの値として設定できます。 color-dodge、そしてもちろんmultiply ..など。

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

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

EDIT：次のセクションは、ブラウザのサポートが拡大しているため、少し無関係になっています。このグラフをチェックして、このブラウザをサポートしているブラウザを確認してください： 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プロパティに関する追加の参考資料：

23
Blake Mann

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

18
tnt-rox

記録のために、この男はそうするためのライブラリを開発しています。私はまだ研究をしている間にそれに入りましたが、まだ試していません。

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

17
Tolomelli

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

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

私は見つけました。

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

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

11
user1861969

そのような能力は利用できません。さらに近い合成オプションは次のとおりです。

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

  • minまたはsubtractCompositorは、IEのみでフィルターします。

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

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

9
bobince

私は最近、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 からSojeongに送られます

5
cfx

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

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

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

一般に、Webの状況を再現したphotoshopで遊んでみることをお勧めします：単色の背景の上に半透明（特別なものなし）レイヤー。上記のようなチュートリアルでは、乗算またはその他の派手な効果を再現できる場合があります。

3
Bart Van Hove

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

0
kilrizzy