WAN Will Way > 素材集TOP > パーツ素材作成講座 > 

ぼかしを入れた背景素材を作ってみよう

Adobe® Photoshop®csで、ぼかしを入れた背景素材を作ってみましょう。Adobe® Photoshop®csのスクリーンショットはMac版ですが、Windows版でも同じです。

今回作る作品はこれ!
背景画像サンプル

STEP 1 素材の用意

ブログ背景などに使える、ぼかしを入れた画像を作りましょう。市販の素材写真から作ると美しくできますが、自分で室内で撮った写真でも加工すると利用できます。


使用例元画像

(使用例と、元の写真)


この見本では、室内で花瓶の花をデジタルカメラで撮りました。フラッシュをたくと、色味が失われ、補正しても使えなくなるので、室内光だけです。画像の補正は、手持ちのデジカメで素材や資料の写真を撮らなければならないときなどにも使える技術です。



STEP 2 ファイルを開く

元画像
写真をPhotoshopで開きます。[ファイル]-[開く]


STEP 3 全体の大まかな調整

元の写真の状態により、必要であればこのステップをいれます。

トーンカーブ

写真がとても暗い場合、全体にトーンカーブ補正をかけます。[イメージ]-[色調補正]-[トーンカーブ]

斜めの直線をドラッグして、S字に近づけていくと、明るくはっきりした画像になります。ここでは少しだけ補正して次に進みます。


トリミング

写真に不要な部分がある場合、写真の使う部分をトリミングします。トリミングとは切り抜くツールです。


ツールパレットのトリミングボタン(トリミング)をクリックし、残す領域をドラッグし、ダブルクリックして実行します。



STEP 4 メインになる部分を補正

メイン部分の選択

投げ縄ツールでドラッグし、メイン画像を選択します。このまま補正をかけると、処理後の境界が目立ちますので、[選択範囲]-[境界をぼかす]で、選択範囲の境界をぼかし、つなぎ目の違和感をすくなくします。例では、元の画像が2048×1536と大きいので、境界も30ピクセルと多めにとっています。


カラーバランス
カラーバランス設定

選択範囲内のカラーバランスを補正します。[イメージ]-[色調補正]-[カラーバランス]
カラーレベル30,10,-10

数値は、プレビューを見ながら、元の写真の状態と、仕上がりをイメージして調整します。




STEP 5 メイン画像の背景になる部分を補正

選択範囲を反転

[選択範囲]-[選択範囲を反転]で、先ほど補正しなかった部分を選択します。


明るさ・コントラスト

背景画像になり、白くぼかし消す部分なので、色味をうすく、明るく補正します。
[イメージ]-[色調補正]-[明るさ・コントラスト]
数値は、見本では50としていますが、プレビューを見ながら、元の写真の状態と、仕上がりをイメージして、調整します。


自動レベル補正

メインの部分と、背景になる部分の色味の補正が終わったら、[選択範囲]-[選択範囲を解除]で選択を解除して、全体に自動レベル補正をかけます。
[イメージ]-[色調補正]-[自動レベル補正]




STEP 6 ぼかして消す

左上を矩形に選択

背景をぼかしつつ消すため選択範囲を作ります。左上にあわせて、右と下を残します。


境界をぼかす

[選択範囲]-[境界をぼかす]で、150に設定します。


反転して消した状態

[選択]-[選択範囲の反転]で選択範囲を反転し、deleteキーをいちど押します。画像の端にむかってぼかして消されています。



STEP 7 画像解像度を変更して調整

画像解像度変更

実際に使うサイズに合わせて、画像解像度を変更します。
[イメージ]-[画像解像度]
ピクセル数の縦幅を、ブログのデザインで必要な高さに設定しました。

幅と高さの右端に、鎖のマークがついている場合は、縦横比固定で、どちらかの数値を入れるともう一方は計算された値が入ります。




STEP 8 カラーバランスの調整

サイトの傾向にあわせて、カラーバランスの最終調整を行います。以下はカラーバランス補正の例です。

カラーバランスの調整例 カラーバランスの調整例

STEP 9 完成

補正が終了したらWeb用に書き出します。[ファイル]-[Web用に保存]をクリックします。


JPGで書き出して、背景素材の完成です。


完成


by みもちゃん 

 

素材集TOP