写真の「ボケ」をウェブデザインにとりいれるためのスタディ
Post on:2010年1月27日
写真の主題を引き立たせるために使用される「ボケ」をウェブデザインにとりいれるためのスタディをPSDFanから紹介します。
![ボケのキャプチャ](/wp-content/uploads-2010/2010012701.png)
Inspirational Examples of the Bokeh Effect
以下、各ポイントを意訳したものです。
ボケとは
ボケとは、写真撮影の際にレンズを利用して光の焦点をぼかしたものです。このボケは、レンズによってもさまざまなものを楽しむことができます。
通常、ボケは主題を引き立たせるために使用されるもので、主題以外のものをぼんやりとさせます。
ボケの実例
写真撮影でのボケを実際に見てみます。
![ボケのキャプチャ](/wp-content/uploads-2010/2010012702-01.png)
ボケのサークルが美しい七角形になっており、ソフトな印象を与えています。
![ボケのキャプチャ](/wp-content/uploads-2010/2010012702-02.png)
こういったボケは、レトロな感じをいっそう強める効果があります。
![ボケのキャプチャ](/wp-content/uploads-2010/2010012702-03.png)
これはボケとマクロフォーカスを組み合わせた例です。水滴が背景の円形のボケと類似しており、コンビネーションが機能しています。
デジタルアートでのボケ
ボケは写真撮影だけに限定されるものではありません。同様のエフェクトはPhotoshopでも作成することができます。
![ボケのキャプチャ](/wp-content/uploads-2010/2010012702-04.png)
典型的なボケのエフェクトです。明るくて、カラフルで、とれもきれいです。
![ボケのキャプチャ](/wp-content/uploads-2010/2010012702-05.png)
このボケでは都市の汚さを演出するために、グランジ風のボケを使用しています。
![ボケのキャプチャ](/wp-content/uploads-2010/2010012702-06.png)
このボケは通常の円形のボケではなく、ハート型のボケを使用しています。
ウェブデザインでのボケ
ウェブデザインでは背景やヘッダのパターンとして、ボケが利用されています。
![ボケのキャプチャ](/wp-content/uploads-2010/2010012702-07.png)
パステル調のボケを使用して、柔らかいイメージを演出しています。
![ボケのキャプチャ](/wp-content/uploads-2010/2010012702-08.png)
明るいボケのエフェクトはこのウェブサイトをより印象的なものにしています。
![ボケのキャプチャ](/wp-content/uploads-2010/2010012702-09.png)
典型的な明るいボケではなく、もっとずっと暗いボケを使用しています。
![ボケのキャプチャ](/wp-content/uploads-2010/2010012702-10.png)
ヘッダに巨大な光のエフェクトを使用しています。ボケの色味はサイトのカラースキームと合わせています。
![ボケのキャプチャ](/wp-content/uploads-2010/2010012702-11.png)
背景に使用されているボケのエフェクトは、使用しているカラースキームをより美しくみせています。
ボケのチュートリアル
ボケのエフェクトを作成するチュートリアルを紹介します。
![ボケのキャプチャ](/wp-content/uploads-2010/2010012702-12.png)
Awesome digital bokeh effect in Photoshop
![ボケのキャプチャ](/wp-content/uploads-2010/2010012702-13.png)
sponsors