このiOS7ぼかし効果を再作成する方法


回答:


29

下部はガウスぼかしで、半透明の白いオーバーレイがあります。

ステップ1:背景(元の画像)のオーバーレイ領域を選択し、半径12pxのガウスぼかしを適用します。

ステップ2:新しいレイヤーを作成し、オーバーレイに同じパーツを選択して白で塗りつぶし、このレイヤーに66%の不透明度を与えます

参照画像の上部で再現:
EDIT: オリジナルと一致する新しいパラメーター

ここに画像の説明を入力してください


これがスクリーンショットの場合、これはコードで行われると思います。私はそれが彼/彼女が作曲やモックアップでこれを行うか、それをオンラインで実装することを求めているかどうかにかかっていると思います。
エリック

@Peter Walserレイヤーがさらにある場合にガウスに適用されるオーバーレイ領域を作成する方法は?最初にそれらをマージする必要がありますか?
フレッドコリンズ

1
@FredCollins:はい、最初にそれらをマージして選択範囲をぼかすか、またはマージされた選択範囲のコピーを使用して新しいレイヤーを作成します(レイヤーが変更されるたびに再作成する必要があります)。
ピーター

@PeterWalserありがとう。最後の質問。不透明度66%の新しい透明レイヤーを作成するには、長方形ツールを使用しますが、もっと良い方法があると感じています。ぼやけたレイヤーのマスク/クリッピングマスクの作成など。何を指示してるんですか?
フレッドコリンズ

別のレイヤーを使用すると、全体の不透明度をすばやく調整できます。不透明度マスクソリューションも同じ結果になります。ここでは、ピクセルごとの不透明度を調整することもできます。そして、もちろん両方のアプローチ(マスク+レイヤーの透明度)を組み合わせることができます。どちらがあなたに最も適しています。
ピーター

7

使用しているプログラムまたはテクノロジーを定義しませんでした。そのため、PeterはPhotoshopそれを実現する良い方法を説明しましたが、この効果はCSS3を使用して作成することもできます。

必要なCSSのピークは次のとおりです。

#iOSblur
{
    -webkit-filter: blur(12px);
    -moz-filter: blur(12px);
    -o-filter: blur(12x);
    -ms-filter: blur(12px);
    filter: blur(12px);
}

#iOSopacity
{
    opacity: 0.6;
}

これがあなたがそれをするべき方法であると言っていない…実際、私は個人的にピーターの手順を使うだろう。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.