Webデザインで大流行!すりガラスの様なぼかし効果がかかった画像作成のチュートリアル

すりガラスの作り方

2013年頃からにわかに流行りだしたすりガラスっぽいのフィルターをかけた見せ方は、iOS7で取り入れられ一気に認知度が広がりました。

例えば下から上に向かってスワイプすることで出せるコントロールセンターには、白いすりガラスが。ホームボタンを長押ししてだせるSiriには、黒いすりガラスのフィルターがかけられており、とても美しいですね。このすりガラスのフィルターは、ブラー(blur)効果と言われております。

1.Webサイトでブラー効果が使われている例

フルスクリーンでバックグラウンドに深くボカした背景を敷き、そのレイヤーの上にコンテンツを敷くことで奥行き感をもたせるデザインが流行っています。

1-1.danielfiller.com

ブラー効果を使ったWebデザイン

http://danielfiller.com/

パソコン画面以外の人物・背景にブラー効果を浅くかけ、パソコンに注目させる視覚的な効果を表現しています。

1-2.davidmassiani.com

ブラー効果を使ったWebデザイン

http://www.davidmassiani.com/

雪山画像全体に深めのブラー効果をかけ、UX UI DESIGNERという大きなテキストを背景の上に配置することで、注目度もインパクトも持たすことができます。

1-3.happytables.com

ブラー効果を使ったWebデザイン

http://www.happytables.com/

iPhoneと持っている手以外の床の背景にブラー効果をかけ、携帯画面に焦点を合わせている人間の視覚を表現しています。

2.photoshopでのブラー効果の作り方

それではボカし効果を使った画像を作ってみましょう。

2-1.ボカしたい素材を用意する

素材はなんでも良いです。今回は雄大な自然の画像を用意してみました。

すりガラス効果の作り方手順1

2-2.新規レイヤーを作成する

先ほど用意した素材レイヤーの上に新規でレイヤーを作ります。

すりガラス効果の作り方手順2

2-3.新規レイヤーでボカしたい範囲を選択し白で塗りつぶす

ボカしたい範囲を選択します

すりガラス効果の作り方手順3

選択範囲を白で塗りつぶします

すりガラス効果の作り方手順4

2-4.不透明度を調整する

先ほど白で塗りつぶした部分の不透明度を調整します。今回は、不透明度:10%に設定しました。

すりガラス効果の作り方手順5

2-5.素材にボカしの選択範囲を指定する

レイヤーウィンドウでさきほど新規で作ったレイヤーのサムネイルを[Command + クリック]し、ボカす選択範囲を指定します。

その状態で、素材レイヤーを選択します。

すりガラス効果の作り方手順6

2-6.選択範囲にぼかし(ガウス)をかける

[フィルター]→[ぼかし]→[ぼかし(ガウス)]を選択

すりガラス効果の作り方手順7

半径を20pxに設定して完成!

すりガラス効果の作り方手順8

3.ブラー効果の様々な使い方

3-1.背景全体にブラー効果をかける

素材の元画像全体にブラー効果をかけて、サイトの背景として活用しちゃいましょう!CSSの指定は固定値でbackground-attachment: fixed;がおすすめ。

すりガラス効果ケース

3-2.注目してもらいたい部分以外にブラー効果をかける

注目してもらいたい部分と背景画像を合成し、背景画像にだけブラー効果をかける方法です。より注目を惹かせるために効果的です。

すりガラス効果ケース

3-3.ブラー効果をかけた部分を帯にする

本記事のアイキャッチで使用したように、テキストなどを入れる部分の帯に使用してもかっこいいですね。

ベタ塗りの帯を使用する方法は汎用的に使われているので、すりガラスのように見せるのも、一つのデザインの幅として覚えておいても損はないかと思います。

すりガラスの作り方

4.まとめ

Webサイトでは半透明を表現する場合、不透明度の調整のみ使われてきました。そこにボカしを加える事により、より遠近感を演出することができます。sitebookでもそろそろ、ブラー効果レイアウトの採用を考えてみようかな・・・

関連記事

Follow this page

はてなブックマーク
Bookmark 30
Pocket
入れる 121