非破壊的で再利用可能なぼやけた/つや消しのガラス効果を作成する方法は？

以下の例のように、複数の画像で使用できる一般的なぼやけた背景を作成するにはどうすればよいですか？

白いつや消しガラスのようなpngが必要です。これを使用して、通常の画像の上に重ねてすりガラスの外観をすべて与えることができます（その背後にあるものをほとんど確認できるように、おそらくいくつかの色）。

例：

^{画像をクリックしてフル解像度に}

たぶん白い背景にテクスチャ（ざらざらしたテクスチャ）を付けてからガウスぼかしをかけて、それをすべての画像のレイヤーとして使用します。

上記で投稿したリンクは、単にぼやけた画像であることがわかっていますが、iOSプロジェクトで再利用できるレイヤーが必要です。このようにして、画像のセクション上のビューレイヤーを使用し、下の画像をぼやけて見えるようにすることができます。ここでの用語としてぼかしを使用しないでください。すりガラスの外観を探しています。

この画像で私がやろうとしているのは、それをiOSアプリにインポートして、ビューの背景として使用することです。次に、このビューが他のビュー（マップビュー、写真など）の上にあるとき、それらはすべてつや消しになります。私はiOS 7からこの画像の効果を作成しようとしています。そして、ほとんどのユーザーはまだiOS 5を使用しているので、新しいiOS 7デザイン機能を使用したくありません。いいえ、強制的にアップグレードさせたくありません。

背後のランダム画像をぼかす「ぼやけた」画像を単に重ねることはできません。ぼかし効果は、ピクセルを転置/拡散するために背後の画像をサンプリングする必要があるため、そこに適用する必要があります。

ただし、砂のようなテクスチャーを作成し、それを乗算レイヤーとして使用して、粒子の粗いテクスチャーの外観を得ることができます。

更新-Derekが別の答えで示唆しているように、画像レイヤーをスマートオブジェクトに変換して非破壊的なぼかしを作成し、それにぼかしを適用できます。その後、スマートオブジェクトを入力し、ぼかしとは無関係にスマートオブジェクトを編集できます。

指定した2番目の画像を見ると、PNGオーバーレイではこのようなことはできません。これは、PNGオーバーレイではなく、何らかの方法でプログラムによって完全に行われます。私はここに投稿された他の提案のいくつかを試してみましたが、どれも近くに来ませんでした（しかしおそらくあなたは幸運があります）

これは実際には要件の範囲外になっていますが、これはオーバーレイで行う必要がありますか？この種の方法を使用して達成したい効果が得られるかどうかはわかりません。能力がある場合は、代わりにプログラムでこれを行います。

私はあなたのアプリケーションがどのようにセットアップされているかについての見識はありませんが、これを行うことができる1つの方法はCSS3フィルターを使用することです

.blurred {
  filter: blur(2px);
  -webkit-filter: blur(2px);
}

[わかりやすくするために注意：プロセスは、アルファマスクを使用した製品の前景画像と、CSSフィルターを使用してぼかした背景画像です]

前

後

^{画像著作権：フィリップリーラ}

こちらのライブデモをご覧ください

将来的には、これは提案されたbackdrop-filterCSSスタイルを使用してはるかに簡単になる可能性がありますが、これに対する現在のサポートはnon-existentの次にあります。

別のオプションは、スマートオブジェクトを作成し、ぼかしと効果をスマートオブジェクトに適用することです。このようにすると、スマートオブジェクトを開いて、その中にあるものを変更できます。

---編集---

上記の回答を投稿したので、質問は編集され、わずかに変更されました。iOSアプリでブラーを実現することが要求されています。コードを使用してブラーを行うことをお勧めします。これにより、任意の画像に影響を与えることができます。

private static Bitmap Blur(Bitmap image, Int32 blurSize)
{
    return Blur(image, new Rectangle(0, 0, image.Width, image.Height), blurSize);
}

これに関する詳細はこちら：http : //notes.ericwillis.com/2009/10/blur-an-image-with-csharp/

Dribbleには、Photoshopでぼかしを作成する方法に関するいくつかの優れたフィルターがあります。たぶん、これらはあなたにとっても役立つかもしれません。私は特に、効果を得るためのこの非破壊的な方法が好きです。私はすでにこれについて何かがあることを知っていますが、ここにリンクがあります：

http://dribbble.com/shots/1210251-Live-Blur-Free-PSD

http://dribbble.com/shots/1109921-iOS7-Blur-Photoshop-Action

それでもこれが必要な場合は、同じ効果を達成しようとしていましたが、できませんでした。

http://jsfiddle.net/WtQjY/201/にあるhtml2canvasとstackBlurというプラグインを使用して作成しました。

私はプラグインの作者ではありません。そして、これは単にコードの断片です。私はそれをよりシンプルかつ高速に変更しました：

.blur {
    -webkit-filter：blur（7px）;
-moz-filter：blur（7px）;
-o-filter：blur（7px）;
-ms-filter：blur（7px）;
フィルター：blur（7px）;

}

///////////////////////////////////
// jqueryライブラリを含める
// jQuery
$（document）.ready（{
$（ '＃YourButton'）。click（{

$（ '＃YourContainer'）。toggleClass（ 'blur'）;

}）;
}）;

まだ非常に遅いですが動作します。

そこで、共有したいと思ったこのスクリプトの独自のバージョンを作成しました。2つの背景画像を作成し、そのうちの1つを子divに添付してから、鮮明でクリアなバージョンをプライマリ背景に添付しました。両方のオブジェクトの背景を固定および中央に設定するだけで、それらは一致します。

デモはこちら：http : //www.palandforsale.us/frosted-glass/

私があなたの質問を正しく理解していれば、あなたができるとは思いません。「ぼかし」は、それぞれ独自の方法でソフトウェアで実行される操作です。スケッチがぼかしを適用する方法は、PhotoshopやGoogle Chromeが行う方法とは異なる場合があります。

したがって、「ぼかし」を使用して画像をエクスポートすることはできません。ぼかしは常にその背後にあるものと相互作用し、作成中のアプリケーションからエクスポートすることはできません。

1. ぼやけた、つや消しのレイヤーを作成するレイヤーの上に50％グレーのレイヤーを作成します。
2. 必要に応じて量を調整します
3. 必要に応じてガウスぼかしでぼかします。
4. このレイヤーの上に、カーブレイヤーを追加し、カーブレイヤーの白い端を引き下げるか、黒い端を押し上げることにより、白と黒の値を調整できます。

これらの2つのレイヤーは、冷ややかなぼやけた効果を与えるはずです。これらの2つのレイヤーの順序は変更できます。

画像を複製し、ガウスぼかしを適用するアクションを作成します。これは、これを行う唯一のPS方法です。