Photoshopの切り抜き、選択範囲をつくるいくつかの方法をまとめてみました。
CS5を基準にしているので、それ以外のバージョンの方は抽出フィルタなどで代替えできると思います。

photoshop3 150x150 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?Photoshopの切り抜き、みんなどんな風にしてますか?
今回紹介する切り抜きは定番みたいなものだと思うんですけど、私の近くにPhotoshop達人がいないので、聞く事もできず、もっといい方法無いのかなーなんて思ったりもしてます。
この記事を読んでくれた人で、「こうした方がいいよー」とかあったらコメントいただけると嬉しいです!

私は今、CS5を使っているのでそれを基準にしています。
CS4以前を使っている人は、選択範囲の調整の代わりに抽出プラグイン(フィルター→抽出)で代替えしてみてくださいね。
(注意:Web用の切り抜きを前提にしています。)

目次

  1. クイック選択ツールを使う
  2. チャンネルを使う
  3. パスとチャンネルを合わせて使う
  4. 輪郭がはっきりしてない場合(動物など)
  5. コントラストがはっきりしてない場合

コントラストがハッキリしている場合

flower Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

この写真の花びらと背景のように、コントラストがはっきりとしている写真の場合切り抜きは比較的簡単です。
実際はこんな風にコントラストがはっきりしている写真ばかりではないので、もっといろいろ工夫して切り抜きをしなければなりませんが、まずは簡単な切り抜き、選択範囲の抽出の仕方からご紹介です。

1. クイック選択ツールを使う

クイック選択ツールで切り抜きを作ってみます。

quick Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

写真の切り抜き、選択したい部分をクリック&ドラッグするだけで選択範囲を作ってくれます。
余計なところを選択してしまったら、option(alt)キーを押しながらクリック、ドラッグすれば選択を解除できます。
ブラシの大きさを調整しながら選択範囲を作ります。

quick select Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

割とサクッと選択範囲を作れますが…

mask Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

レイヤーマスクを追加して、マスクを確認してみると…
(optionキー + レイヤーマスクのサムネイルをクリックで確認できます。)

mask1 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

かなりギザギザしているのが分かります。
なので、メニューバー→選択範囲→マスクの調整から少し調整します。
(マスクを作ってない場合は境界線の調整)

mask adj Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

エッジの検出、エッジの調整をほんのほんのすこしいじります。
コントラストも必要に応じてちょっと変更。

mask21 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

こんな感じに滑らかになりますが、はさみで切ったようにはなりません。
1pxくらいのぼかしならいいのですが…。
クオリティーより効率重視の時にはサクッとできるので便利です。

完成

layer1 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

↑目次へ

2. チャンネルを使う

コントラストがハッキリしている画像ならチャンネルを使ってサクっと切り抜きを作る事もできます。

chanel Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

WebはRGBなのでレッド、グリーン、ブルーの3つの色にわける事ができます。
その各色の中で、一番コントラストのはっきりしているものを使います。

RGB Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

ブルーが一番コントラストがはっきりしているので、ブルーをもとに選択範囲を作っていきます。

チャンネルのメニュー(右側のちっこいの)からブルーのチャンネルのコピーを作ります。
メニューバー→イメージ→色調補正→レベル補正を開き、よりコントラストをはっきりさせます。

level Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

スライドバーの3つのうち、両端を真ん中に向けてスライドさせると白黒がはっきりしてくるので、ちょうどいい感じに調整します。

mask3 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

調整後のブルーチャンネルのコピー、切り抜きしたい範囲がくっきりと出てきました。

chanel load Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

ブルーチャンネルのコピーを選択範囲として読み込みます。

mask5 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

選択範囲から作ったマスクはこんな感じです。真ん中の部分は白く塗りつぶせばOK。
さっきのクイック選択ツールを使った時よりも境界線がはっきりします。
本当は1pxくらい境界線をぼかした方がしっくりきますよ。

完成

layer2 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

↑目次へ

3. パスとチャンネルを組み合わせて使う

nori20 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

背景と髪の毛の部分のコントラストがはっきりしているので、身体の部分はパス(ペンツール)で、髪の毛の部分はチャンネルを使って切り抜きます。

nori211 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

とりあえずこんな感じで髪の毛部分を残してパスで選択範囲を作ります。
パスは気持ち輪郭の内側に描いていきます。

nori25 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

こんな感じの選択範囲ができました。次に髪の毛の部分をチャンネルを加工して作ります。

nori23 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

チャンレルのレッド、グリーン、ブルーを確認するとブルーが一番コントラストがはっきりしているので、ブルーを加工して髪の毛部分の選択範囲を作ります。

メニューバー→イメージ→色調補正→レベル補正で調節後(前述)、commad + I キーでネガ反転。(白い部分が選択されるので)

nori22 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

ちょっと怖い w
加工したチャンネルを選択範囲として読み込み、先ほどの選択部分と重ねてみます。

nori27 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

これを組み合わせると…

nori28 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

こんな感じの選択範囲ができあがります!
チョー簡単なのにいい感じです :)

完成

nori29 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

背景とのコントラストがはっきりしていると仕上がりもキレイだし、簡単に切り抜きができますね!

↑目次へ

輪郭がハッキリしていない場合

cat2 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

写真のネコ、我が家のスーです :) のように輪郭がふわふわではっきりしない場合はどうしましょう…
CS4以前の場合は、抽出プラグインを使って切り抜きができました。
今回はCS5なのでそちらのご紹介です。

selected1 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

まずはざっくりとクイック選択ツールや投げ縄ツールを使って選択します。
メニューバー→選択範囲→境界線の調整を開きます。

line adj Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

masked Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

ネコが白いので背景色は黒にしてあります。

adj Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

エッジの検出を少し調整するだけで、ふわふわの部分を検出してくれます!
これはスゴイかも。

cat21 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

さっきよりネコのふわふわな部分が選択されてます。
さらに、半径調整ツール(スマート半径をチェック)を使って輪郭をなぞるだけで飛び出たふわふわな毛とか、選択されるようになります。

adj2 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

ブラシの大きさも調整できるのでかなり細かい部分もOK。

mask6 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

できたマスクがこちら。フワフワ感な部分もしっかり選択されて切り抜かれてます。

完成

cat3 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

すっごい違和感ですが、背景だけ変えてみました w
ちゃんと補正すれば見れるようになると思いますが、今回は切り抜きがテーマなので :)
とっても便利な機能ですが、輪郭と背景がとけ込んでるような写真はできないので、作業をする前に切り抜きに適した写真かどうかをチェックしてくださいね。

↑目次へ

コントラストがはっきりしていない場合

nori5 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

コントラストがハッキリとした画像ばかりではないのが現実…orz
今回はクイック選択を使わずにパス(ペンツール)で切り抜いて、髪の毛の部分はコントラストがハッキリしないので境界線の調整(マスクの調整)で選択してみたいと思います。
パスは気持ち輪郭の内側に描いていきます。
(パスをものすごく細かくやってしまったけど気にしないでください w)

1. 髪の毛の部分をおおざっぱに選択しておく

nori6 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

まずは髪の毛をおおざっぱに選択しておくパターンで挑戦。

pass Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

パスを選択範囲として読み込んで、メニューバー→選択範囲→選択範囲の調整で髪の毛の部分を調整してみます。

nori71 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

ネコのところでやったみたいに半径調整ツールを使って髪の毛の部分をなぞって行きます。
最後にエッジの調整で微調整を行います。
今回は「滑らかに」と1px程「ぼかし」を入れています。できたマスクがこちら。

nori8 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

髪の毛のところも何とか選択できました。

2. 髪の毛の部分を後から選択する

nori9 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

今度はさっきと逆に髪の毛の部分を後から選択してみます。
CS4の時はは抽出フィルターを使って選択してたりしたのでこのパターンでした。
ネコの時もこのパターンでできましたね。

さっきと同じようにパスを選択範囲として読み込み後、メニューバー→選択範囲→選択範囲の調整で髪の毛の部分を調整してみます。

nori10 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

パッと見、さっきと変らないように見えますが、ハッキリと髪の毛を選択できませんでした。
二つ並べるとはっきりと違いが分かると思います。

hair Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

髪の毛の選択は前者の方がキレイにいくっぽいですね。
コントラストがはっきりしてない場合の細かい部分の切り抜きはなかなかキレイにいきません…。
教材に出ているような画像は最初からコントラストがはっきりしていて、割と簡単にキレイに仕上がるものばかりだったりしますからねー。

CS5、来たばっかりなのでいろいろ勉強してみたいと思います!

せっかくなので海の背景を置いてみました :)

beach32 Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの?

海に行ってないけど、証拠写真!…みたいな…

もっとこうした方がいいよーとか、こっちの方が効率的!とか、コメント頂けると嬉しいです!

to top
Comments
Wanna share your thoughts? Leave a message
1
  1.  

    写真を扱いながらいつも試行錯誤の切り抜き作業。
    いろいろと試しているのに、こうして記事にしていただければ悩まなくて済んだのに。
    基本的には切り抜きが必要な場合は、切り抜き前提で撮影していますが、私の場合はペンツール使いを練習しないと。
    と言っても、モデル撮影には最近縁がないのです(涙)

Trackbacks
Wanna share your blog? Leave a message
2
  1.  

    [...] Photoshopの切り抜き、選択範囲いろいろ:で、結局どれがいいの? (tags: photoshop) [...]

  2.  

    Photoshopの切り抜きいろいろ

    今日の『気になるニュース』    ~今日あったニュースの中から、注目ニュースをPickUp~   [一覧]  ・逮捕、勾留された件 [la gaya scienza]     読んでるだけでブルーになってきた…

Leave a Reply
Tell me what you think

Trackback URL

Hello I am Nori Takahashi

  • email:mail@quarter4.info
  • Shimoda-city Shizuoka Japan
  • XHTML
  • CSS
  • Javascript
  • PHP
  • MySQL
  • Wordpress
  • Photoshop
  • Illustrator
  • Flash
  • Dreamweaver
Tags
words that define my posts in a personal manner

フリーランス Art blog browser color CSS design font Icon jQuery logo photo Photoshop products SEO Twitter WordPress

to top