写真でいらない背景を消す方法（バナー制作編1）

こんばんは。今回から数回に分けて前回作ったバナーの制作手順を紹介します。
まずは写真、バナーに作った写真は、もともとはこんな感じでした。

お花がボックスに入っている部分だけが欲しかったので、いらない背景を消していきます。
この時、考えられる方法としていくつかあるとは思いますが、主なものをあげると、

1.欲しい部分をパスで切りぬく
2.マスクを使ってグラデーションで消す
3.なんかいろいろな機能を使って（消しゴムとか、スタンプとか）いろいろ消す
こんな感じではないでしょうか？

今回ご紹介するのは、ブラシを使って消していく方法です。

写真をスマートオブジェクトに変換

お花の背景の黄色い色はイキとするので、バナーの背景色は同じ色で塗りつぶしておきます。その上に写真レイヤーをのせていきます。
写真は拡大縮小をしながら、バランスを見るのでスマートオブジェクトに変換しておきましょう。
写真のレイヤーを右クリックするとメニューに「スマートオブジェクトに変換」を選ぶだけです。

ここまできたら、レイヤーをグループ化し、バナーサイズのマスクをかけます。

web制作の現場ではバナーを制作するときは、そのバナーがのるページのキャプチャ画面に実際載った状況を想定してデザインします。
ですので、レイヤーをグループ化しマスクをかけておけば、はみ出た写真などが見えなくなって便利です。

写真の背景をブラシを使って消す

写真を好きな大きさに縮小したら、写真レイヤーの上に新規レイヤーを作ります。
スポイトツールで写真の黄色部分をクリックし、色をひろいます。
次にブラシツールを持ち「ソフト円ブラシ（100px）」などのボケあしのあるブラシを選択します。
オプションで不透明度を下げたあと、消したい部分をクリックしていきます。

ブラシでの調整だけでこのように加工できました。

今回は、「お花」ということで、やわらかくてふんわりした雰囲気が欲しかったので、ブラシのボケを使って背景を消していきました。
物によっては、パスできっちり切り抜いた方がいいものや、グラデマスクで徐々に消えていった方がいいものもあります。
どのようにして写真を加工していくのかは、「伝えたいこと」によって違ってきます。

「ポップな雰囲気にしたいなら」とか「クラシックな雰囲気にしたいなら」など、それぞれにあった加工の仕方を研究しても面白いと思います。