creatersnest127

人や動物の毛も簡単に切り抜ける!photoshopの神ワザテクニック


写真を使って合成や編集を行うとき、被写体を「切り抜き」できたら、と思いませんか?
きちんと「切り抜き」できると背景を透過して、好きな背景色や違う画像と重ねてデザインの幅がグッと広がりますよね。

ただ切り抜くといっても、使いたい被写体は直線ばかりの単純な形ばかりではありません。
動物や人物を切り抜きたい場合も多いと思いますが、そこでネックになるのが動物の毛や
人物の髪の毛など細やかな切り取りが必要なこと。

今回はこの髪の毛レベルまで「切り抜き」できるテクニックをご紹介します。

はじめに

HIRO2_odoroitahyoujyounoneko

今回はぱくたそさんで配布されている猫の画像を使用しました。
丸い目が可愛い猫ちゃんですが、フワフワの毛を切り抜くのは複雑そうに見えますよね。

でも繊細な作業が必要なのでは、と不安になることはありません。

まずは大まかな切り抜き

さっそく切り抜きを始めましょう。
まずは大まかに切り抜きたい部分を選択します。この選択の仕方は[クイック選択ツール]や
[自動選択ツール]、[なげなわツール]など範囲を選択できるツールのどれを使って行っても
構いません。
neko2

Shiftを押しながら続けて選択をすると、複数の範囲を選択することができます。

境界線を調整

ここからがPhotoshopの範囲選択の秀逸なところです。
切り抜きたい部分を大まかに選択したら、[境界線を調整]をクリックします。
すると[境界線を調整]ウィンドウが表示されますので、表示モードを[オーバーレイ] にします。(選択範囲以外が赤くなります)
c67_2
[半径調節ツール]にチェックを入れ、選択範囲の境界線をなぞっていきます。

c67_3

赤い範囲が段々実際の毛に近づいてきました。

切り抜きの状態を確認

ではどのように切り抜かれているか、確認してみましょう。

c67_4

表示モードを切り替えることで黒地、白地などの背景で切り抜きの状態を見ることができます。背景の色によってずいぶん印象も違いますが、特に黒地で見ると耳の中の本来切り抜かなくて良い部分に地の色が見えていたり少しくっきりしすぎている部分、ぼんやりして繊細さに欠ける部分などがありますね。
切り抜いた後、合成したい内容にもよりますが、暗い色と重ねても粗が見えないよう少し
調整しましょう。

c67_5

[半径調整ツール]は通常デフォルトでチェックされていますがここを改めてクリックすると[調整消去ツール]が選べます。調整により少しシャープさが欠けていたり、切り抜きすぎたりしている箇所をなぞって調整していきましょう。プレビューで状態を確認しながら[半径調整ツール][調整消去ツール]を交互に使ってより自然に見えるよう調整します。

調整ができたら、出力先を[新規レイヤー(レイヤーマスクあり)]にしてOKをクリックします。

切り抜いた画像で合成

背景が透過され、切り抜きされた画像が表示されます。

c67_6では実際にこの画像を使って合成をするとどうなるか、試してみましょう。

合成の手順は[背景レイヤー]の上に新規レイヤーを作ります。
単色で塗りつぶしたい場合はこのレイヤーを選択した状態で[編集]→[塗りつぶし] の手順です。今回の画像のようにパターンを重ねる場合は[塗りつぶし]の際にお好みの
パターンを選んでください。レイヤーになっていますので風景画像をレイヤー上に
ドラッグすれば風景画像と、[レイヤー]→[新規塗りつぶしレイヤー]からグラデーション
で塗りつぶしたりと多様な合成ができます。

c67_7

実際に合成してみて、もう少しくっきり見せたいところ、逆に滑らかにみせたいところが
あればさらに微調整して仕上げましょう。

微調整をして仕上げ

今回の画像ではレトロポップなパターンとの合成のためもう少しシャープな方がすっきりと
切り取って見えます。

c67_8

合成する色や内容、雰囲気によってよりシャープな方が自然に見えたり、ぼんやりしていた方が自然に見えたりと、用途によりますのでその画像に合わせて微調整を行ってください。
微調整には[焼き込みツール]と[覆い焼きツール]を使います。

まずはレイヤーの[背景のコピー]を選択します。
色のある部分をよりくっきり見せたい箇所には[焼き込みツール]
白色をより真っ白にしたい時、明るく柔らかい印象にしたい箇所には[覆い焼きツール]
を使います。

ぼんやりしていた毛もくっきりと、ぼんやりかすんでいた部分がスッキリ消えて
よりはっきりとした切り抜きになりました。

c67_09

 

最後に

切り抜きが出来ればいろんな画像と合成できる素材の出来上がりです。
いろんな背景と合わせてデザインに活かしてくださいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticleWebデザイン初心者におすすめのHTMLを教えてくれる良質サイト12選