Photoshopの切り抜き、選択範囲をつくるいくつかの方法をまとめてみました。
CS5を基準にしているので、それ以外のバージョンの方は抽出フィルタなどで代替えできると思います。
Photoshopの切り抜き、みんなどんな風にしてますか?
今回紹介する切り抜きは定番みたいなものだと思うんですけど、私の近くにPhotoshop達人がいないので、聞く事もできず、もっといい方法無いのかなーなんて思ったりもしてます。
この記事を読んでくれた人で、「こうした方がいいよー」とかあったらコメントいただけると嬉しいです!
私は今、CS5を使っているのでそれを基準にしています。
CS4以前を使っている人は、選択範囲の調整の代わりに抽出プラグイン(フィルター→抽出)で代替えしてみてくださいね。
(注意:Web用の切り抜きを前提にしています。)
目次
コントラストがハッキリしている場合
この写真の花びらと背景のように、コントラストがはっきりとしている写真の場合切り抜きは比較的簡単です。
実際はこんな風にコントラストがはっきりしている写真ばかりではないので、もっといろいろ工夫して切り抜きをしなければなりませんが、まずは簡単な切り抜き、選択範囲の抽出の仕方からご紹介です。
1. クイック選択ツールを使う
クイック選択ツールで切り抜きを作ってみます。
写真の切り抜き、選択したい部分をクリック&ドラッグするだけで選択範囲を作ってくれます。
余計なところを選択してしまったら、option(alt)キーを押しながらクリック、ドラッグすれば選択を解除できます。
ブラシの大きさを調整しながら選択範囲を作ります。
割とサクッと選択範囲を作れますが…
レイヤーマスクを追加して、マスクを確認してみると…
(optionキー + レイヤーマスクのサムネイルをクリックで確認できます。)
かなりギザギザしているのが分かります。
なので、メニューバー→選択範囲→マスクの調整から少し調整します。
(マスクを作ってない場合は境界線の調整)
エッジの検出、エッジの調整をほんのほんのすこしいじります。
コントラストも必要に応じてちょっと変更。
こんな感じに滑らかになりますが、はさみで切ったようにはなりません。
1pxくらいのぼかしならいいのですが…。
クオリティーより効率重視の時にはサクッとできるので便利です。
完成
2. チャンネルを使う
コントラストがハッキリしている画像ならチャンネルを使ってサクっと切り抜きを作る事もできます。
WebはRGBなのでレッド、グリーン、ブルーの3つの色にわける事ができます。
その各色の中で、一番コントラストのはっきりしているものを使います。
ブルーが一番コントラストがはっきりしているので、ブルーをもとに選択範囲を作っていきます。
チャンネルのメニュー(右側のちっこいの)からブルーのチャンネルのコピーを作ります。
メニューバー→イメージ→色調補正→レベル補正を開き、よりコントラストをはっきりさせます。
スライドバーの3つのうち、両端を真ん中に向けてスライドさせると白黒がはっきりしてくるので、ちょうどいい感じに調整します。
調整後のブルーチャンネルのコピー、切り抜きしたい範囲がくっきりと出てきました。
ブルーチャンネルのコピーを選択範囲として読み込みます。
選択範囲から作ったマスクはこんな感じです。真ん中の部分は白く塗りつぶせばOK。
さっきのクイック選択ツールを使った時よりも境界線がはっきりします。
本当は1pxくらい境界線をぼかした方がしっくりきますよ。
完成
3. パスとチャンネルを組み合わせて使う
背景と髪の毛の部分のコントラストがはっきりしているので、身体の部分はパス(ペンツール)で、髪の毛の部分はチャンネルを使って切り抜きます。
とりあえずこんな感じで髪の毛部分を残してパスで選択範囲を作ります。
パスは気持ち輪郭の内側に描いていきます。
こんな感じの選択範囲ができました。次に髪の毛の部分をチャンネルを加工して作ります。
チャンレルのレッド、グリーン、ブルーを確認するとブルーが一番コントラストがはっきりしているので、ブルーを加工して髪の毛部分の選択範囲を作ります。
メニューバー→イメージ→色調補正→レベル補正で調節後(前述)、commad + I キーでネガ反転。(白い部分が選択されるので)
ちょっと怖い w
加工したチャンネルを選択範囲として読み込み、先ほどの選択部分と重ねてみます。
これを組み合わせると…
こんな感じの選択範囲ができあがります!
チョー簡単なのにいい感じです
完成
背景とのコントラストがはっきりしていると仕上がりもキレイだし、簡単に切り抜きができますね!
輪郭がハッキリしていない場合
写真のネコ、我が家のスーです のように輪郭がふわふわではっきりしない場合はどうしましょう…
CS4以前の場合は、抽出プラグインを使って切り抜きができました。
今回はCS5なのでそちらのご紹介です。
まずはざっくりとクイック選択ツールや投げ縄ツールを使って選択します。
メニューバー→選択範囲→境界線の調整を開きます。
ネコが白いので背景色は黒にしてあります。
エッジの検出を少し調整するだけで、ふわふわの部分を検出してくれます!
これはスゴイかも。
さっきよりネコのふわふわな部分が選択されてます。
さらに、半径調整ツール(スマート半径をチェック)を使って輪郭をなぞるだけで飛び出たふわふわな毛とか、選択されるようになります。
ブラシの大きさも調整できるのでかなり細かい部分もOK。
できたマスクがこちら。フワフワ感な部分もしっかり選択されて切り抜かれてます。
完成
すっごい違和感ですが、背景だけ変えてみました w
ちゃんと補正すれば見れるようになると思いますが、今回は切り抜きがテーマなので
とっても便利な機能ですが、輪郭と背景がとけ込んでるような写真はできないので、作業をする前に切り抜きに適した写真かどうかをチェックしてくださいね。
コントラストがはっきりしていない場合
コントラストがハッキリとした画像ばかりではないのが現実…orz
今回はクイック選択を使わずにパス(ペンツール)で切り抜いて、髪の毛の部分はコントラストがハッキリしないので境界線の調整(マスクの調整)で選択してみたいと思います。
パスは気持ち輪郭の内側に描いていきます。
(パスをものすごく細かくやってしまったけど気にしないでください w)
1. 髪の毛の部分をおおざっぱに選択しておく
まずは髪の毛をおおざっぱに選択しておくパターンで挑戦。
パスを選択範囲として読み込んで、メニューバー→選択範囲→選択範囲の調整で髪の毛の部分を調整してみます。
ネコのところでやったみたいに半径調整ツールを使って髪の毛の部分をなぞって行きます。
最後にエッジの調整で微調整を行います。
今回は「滑らかに」と1px程「ぼかし」を入れています。できたマスクがこちら。
髪の毛のところも何とか選択できました。
2. 髪の毛の部分を後から選択する
今度はさっきと逆に髪の毛の部分を後から選択してみます。
CS4の時はは抽出フィルターを使って選択してたりしたのでこのパターンでした。
ネコの時もこのパターンでできましたね。
さっきと同じようにパスを選択範囲として読み込み後、メニューバー→選択範囲→選択範囲の調整で髪の毛の部分を調整してみます。
パッと見、さっきと変らないように見えますが、ハッキリと髪の毛を選択できませんでした。
二つ並べるとはっきりと違いが分かると思います。
髪の毛の選択は前者の方がキレイにいくっぽいですね。
コントラストがはっきりしてない場合の細かい部分の切り抜きはなかなかキレイにいきません…。
教材に出ているような画像は最初からコントラストがはっきりしていて、割と簡単にキレイに仕上がるものばかりだったりしますからねー。
CS5、来たばっかりなのでいろいろ勉強してみたいと思います!
せっかくなので海の背景を置いてみました
海に行ってないけど、証拠写真!…みたいな…
もっとこうした方がいいよーとか、こっちの方が効率的!とか、コメント頂けると嬉しいです!
related posts
-
時短:覚えちゃえば便利なPhotoshopショートカット 40+
覚えておくと作業効率がアップするPhotoshopのショートカットまとめです。
-
PhotoshopでWebサイトのモックアップをつくるチュートリアル
PhotoshopでWebサイトのモックアップをつくるときのチュートリアル
Sep 15th, 2010
at 11:30 AM
写真を扱いながらいつも試行錯誤の切り抜き作業。
いろいろと試しているのに、こうして記事にしていただければ悩まなくて済んだのに。
基本的には切り抜きが必要な場合は、切り抜き前提で撮影していますが、私の場合はペンツール使いを練習しないと。
と言っても、モデル撮影には最近縁がないのです(涙)