「PhotoshopでWebデザイン」をするためのテクニックを紹介するこの連載。前回は、ベクターシェイプとレイヤースタイルを用いて、Webサイトの素材に欠かせない「ボタン」のさまざまな表現を取り上げました。

今回は、写真やイラストなどの画像素材を加工して、バナーや背景を作成する際に役立つCS6ならではの新機能を、いくつかご紹介したいと思います。

おさらい
【レポート】Photoshop CS6で快適にWEBデザインするテクニック vol.1
【レポート】Photoshop CS6で快適にWEBデザインするテクニック vol.2
【レポート】Photoshop CS6で快適にWEBデザインするテクニック vol.3

多彩なぼかしフィルターを活用する

例えば、背景に大きく写真を配置したWebサイトがあったとします。クライアントから、「これから画面の右側にイベントレポートの文章を載せたい。文字が読みやすくなるように、左下の椅子にピントを合わせ、　一眼レフ風に周囲をぼかしてほしい!」と指示された場合、どう対処するのがてっとり早いでしょうか？

例として用いるWebサイトのトップページ

「選択範囲で左下の椅子を囲って、選択範囲の境界線をぼかし、さらに"ぼかし"フィルターをかけて……」と順を追って加工して方法でも実現できますが、Photoshop CS6からは、今回のような際に役立つ、新たなぼかしフィルターが追加されました。

新たに登場したぼかしフィルターは、「フィルター＞ぼかし」の中にある「フィールドぼかし」、「虹彩絞りぼかし」、「チルトシフト」の計3種類です。

これらのいずれかを選択すると、マウスカーソルが"画びょうと＋"のマークに変化します。この状態で、左下の椅子をクリックするとぼかし効果がかかります。

左下の椅子を中心にピントが合い、周囲にぼかしがかかる

これらのぼかし指定の便利な点は、基準点を1カ所だけでなく、複数箇所に置くことができて、それぞれのぼかしの強さや範囲を別個に設定できるところです。

具体的には、下図のように、"左下の椅子"と"中央のステージ"と"遠方の男性"……といった具合で、複数箇所にそれぞれ異なった、ぼかし効果を同時に設定できます。

複数の箇所を指定して、それぞれにぼかし効果をかけることができる

これらの効果を使うことで、チルトシフト写真(ミニチュア風写真)のような効果も、簡単に作成することができます。また、ECサイトの商品バナーやサムネイル画像で、注目させたい箇所への視線誘導に使うこともできますね。