せっかく切り抜いたので、扉絵も合成写真にしてみました ;D
Photoshop の切り抜き、みなさんどんな風にしてますか？今回紹介する切り抜きは、定番みたいなものだと思うんですけど、私の近くに Photoshop 達人がいないので聞く事もできず、もっといい方法無いのかなーなんて思ったりもしてます。この記事を読んでくれた人で、「こうした方がいいよー」とかあったらコメントいただけると嬉しいです！
また、私は今 Photoshop CS5 を使っているので、それを基準にしています。CS4 以前を使っている人は、選択範囲の調整の代わりに抽出プラグイン（フィルター → 抽出）で代替えしてみてくださいね（注意：Web 用の切り抜きを前提にしています。）。
Photoshop 切り抜きの目次
1. コントラストがハッキリしている場合の切り抜き
この写真の花びらと背景のように、コントラストがはっきりとしている写真の場合、切り抜きは比較的簡単です。実際はこんな風にコントラストがはっきりしている写真ばかりではないので、もっといろいろ工夫して切り抜きをしなければなりませんが、まずは一番手軽で簡単な切り抜き、選択範囲の作り方からご紹介です。
1.1. クイック選択ツールを使う
まずはクイック選択ツールや自動選択ツールで切り抜きを作ってみます。
クイック選択ツール
クイック選択ツールは、境界線がハッキリしている場合に使います。それに対して自動選択ツールは、同じような色や明るさの部分を選択してくれます。上手く使い分けるようにしたいですね！
クイック選択ツールは、写真の切り抜きしたい部分（選択したい部分）を、クリック & ドラッグするだけで、簡単に選択範囲を作ってくれます。もし余計なところを選択してしまったら、option（alt）キーを押しながらクリック、ドラッグすれば、選択を解除できます。ブラシの大きさを調整しながら選択範囲を作りましょう。
場合によっては、自動選択ツールを利用してもいいかも。自動選択ツールは、同じような色、同じような明るさの部分を選択してくれます。選択範囲が作れたら、マスクを追加して、切り抜きの状態をチェックしてみます。
レイヤーマスクを追加
まず、を押してレイヤーマスクを追加します。そして option キーを押しながら、レイヤーマスクサムネイル
をクリックすると、白黒のマスクを確認できます。また、クイックマスクという機能もあるので、どちらかお好きな方で作業してください。クイックマスクは、“メニュー → 選択範囲 → クイックマスクで編集” で作ることができます。
完成したマスク
※上記はクイックマスクの場合の表示です。レイヤーマスクの場合は白黒になります。選択範囲に違いがある訳ではありません。
あんまり滑らかではなく、エッジが少しルーズな感じですねー。なので、“メニュー → 選択範囲 → マスクを調整” から、マスクを少し調整してみます。クイックマスクの場合は “マスクを調整” が出来ないので、一度クイックマスク編集モードを抜けて、“境界線を調整” で、マスクの調整と同じことができます。
マスクを調整
エッジの検出や、エッジの調整を、ほんの少しいじります。今回はエッジの検出の半径を 1px にしてみます。
マスクの調整後と調整前
が調整前、
が調整後のマスクで切り抜いた状態です。よーく見ると、調整前よりも調整後の方が輪郭がはっきりしてますね！とはいえ、ハサミで切ったようなハッキリした輪郭にはなりません。少しぼんやりした輪郭になってしまいます。1px くらいのぼかしならいいのですが…。クオリティーより効率重視の時には、サクッとできるので便利なことは便利ですね！
1.2. チャンネルを使って切り抜く
コントラストがハッキリしている画像なら、チャンネルを使って切り抜きを作る事もできます。
チャンネル
Web のカラーは RGB なので、レッド、グリーン、ブルーの 3色に分ける事ができます。その各色の中で、一番コントラストのはっきりしているものを使って、選択範囲を作ってみます。
RGB 各色
チャンネルをコピー
ブルーのチャンネルを、そのまま新規チャンネルを作成アイコンにドラッグしてあげれば、コピーが簡単に作れます。
コピーを作ったら、“メニュー → イメージ → 色調補正 → レベル補正” を開き、レベル補正を使ってよりコントラストをはっきりさせます。レベル補正は、command + L キーのショートカットでも開くことが出来るので、覚えておくと便利ですね！
レベル補正
レベル補正は、チャンネルの画像を見ながら、白黒のコントラストがハッキリするように調整します。
スライドバーの 3つのうち、両端を真ん中に向けてスライドさせると、白黒がはっきりしてくるのでちょうどいい感じに調整します。もちろんチャンネル画像を見ながら調整しましょう。
レベル補正後のブルーチャンネル
レベル補正したブルーのコピーが、上記の画像です。切り抜きしたい範囲がくっきりと出てきました。花の真ん中部分が残っているので、ブラシを使って白く塗りつぶします。また、背景部分にも白く残っている部分があるので、こちらは黒く塗りつぶします。
ブラシで塗りつぶし後
最後にブルーチャンネルのコピーを、選択範囲として読み込みます。下の部分のアイコンをクリックするだけで OK です。
チャンネルを選択範囲として読み込む
あとは選択範囲から、さっきと同じようにマスクを作れば完了です（下の図）！
チャンネルを使った方が、さっきのクイック選択ツールを使った時よりも、境界線がはっきりしますねー。
完成
1.3. パスとチャンネルを組み合わせて使う
今度は髪の毛のような、クイック選択ツールなどでは選択できそうもない場合です。ここではペンツール（パス）と、チャンネルを組み合わせて切り抜きをしてみます。
オリジナル画像
背景と髪の毛の部分のコントラストがはっきりしているので、身体の部分はペンツールで、髪の毛の部分はチャンネルを使って切り抜きます。
ペンツールで髪の毛以外を切り抜き
とりあえずこんな感じで、髪の毛部分を残して、パスで選択範囲を作ります。パスは気持ち輪郭の内側に描いていきます。
パスを描き終えたら、パスウインドウの下の “パスを選択範囲として読み込む” アイコンをクリックして、選択範囲にします。ここまでの選択範囲は、メニュー → 選択範囲 → 選択範囲を保存 などで一度保存しておきます。一応クイックマスクで確認してみると、以下ようような状態です。
髪の毛を残して切り抜いた状態
次に髪の毛の部分を、チャンネルを加工して作っていきます。さっきの花のときのように、チャンネルで RGB の各色を確認して、一番コントラストの強いチャンネルを選びます。
ブルーチャンネル
3色を確認すると、ブルーが一番コントラストがはっきりしていたので、ブルーのチャンネルを加工して髪の毛部分の選択範囲を作っていくことにします。
先ほどと同じように、ブルーのチャンネルを複製してから、レベル補正で白黒に調整します。今度はこれを command + I キーでネガ反転します（白い部分が選択範囲になるので）。
ネガ反転
ちょっと怖い … X( 加工したチャンネルを先ほどと同じように、選択範囲として読み込んで状態を確認してみると、次の図のように髪の毛の部分（ネガ写真の白い部分）が切り抜かれています。
髪の毛の部分を切り抜いた状態
これでふたつの選択範囲ができたので、さっきの と、この
を合成しましょう！合成といっても、ここまでできたらあとは簡単です。
選択範囲を合成
まずチャンネルウインドウで、先ほど作った髪の毛以外の保存した選択範囲を選択します。ウインドウ下部の “チャンネルを選択範囲として読み込む” アイコンをクリックします。
次に のブルーチャンネルのコピーを選択しておいてから、先ほどと同じように“チャンネルを選択範囲として読み込む” アイコンをクリックしますが、今度は shift キーを押しながらクリックします。
選択範囲の合成
するとこのように、別々のチャンネルからひとつの選択範囲を作ることができました！合成した選択範囲から作ったマスクが次の画像です。
合成して作ったマスク
髪の毛の細かいところまで、きれいに切り抜かれてるのが分かると思います！
完成
背景とのコントラストがはっきりしている画像だと、仕上がりもキレイだし、簡単に切り抜きができますね！
2. 輪郭がハッキリしていない場合
写真のネコのように、輪郭がフワフワではっきりしない場合はどうしましょう…。Photoshop CS4 以前の場合は、抽出プラグインを使って切り抜きができました。今回は CS5 なのでそちらのご紹介です。
まずはクイック選択ツールや自動選択ツール、投げ縄ツールなどを使って、ざっくりとおおまかに選択します。
おおまかに選択
自動選択ツールを使って、おおまかに選択してみました。
当然切り抜きの状態は、以下のようになっています …。
おおまかな切り抜き
それではここから、ふわふわ部分を選択していきます。おおまかな選択範囲が選択されているじょうたいで、“メニューバー → 選択範囲 → 境界線を調整”を開きます。
境界線を調整
のエッジの検出で、スマート半径にチェックを入れて、半径を指定します。今回は 30pxくらいにしてみました。スマート半径機能によって、もともとのエッジから 30px以内の輪郭をきれいに検出してくれます。
でも、まだちょっと微妙 … という場合は、の半径調整ツールを使って、輪郭をなぞります。ブラシツールと連動しているので、大きさを調整しながら微調整します。
境界線を調整した切り抜き
最終的にはエアブラシツールなどで、微妙なエッジ部分を塗りつぶして調整します（花の真ん中部分を塗ったように）。
ちょっと仕上げが微妙だったかも … とっても便利な機能ですが、輪郭と背景がとけ込んでるような写真はできないので、作業をする前に切り抜きに適した写真かどうかをチェックしてくださいね。
3. コントラストがはっきりしていない場合の切り抜き
コントラストがハッキリとした画像ばかりではないのが現実ですよね … X( 今回はクイック選択ツールを使わずに、全体はペンツールで切り抜いて、髪の毛の部分は “境界線を調整”（またはマスクの調整）で選択してみたいと思います。パスは気持ち輪郭の内側に描いていきます。
3.1 髪の毛の部分をおおざっぱに選択しておく
まず髪の毛の部分は、おおざっぱに選択しておくパターンで挑戦してみます。まずはペンツールで、白い線のように切り抜いてみました。その後パスを選択範囲として読み込み準備完了です。
パスを選択範囲として読み込む
今までと同じように、アイコンをクリックして、パスを選択範囲として読み込みます。その後、“メニュー → 選択範囲 → 選択範囲の調整” で、スマート半径にチェックして、ネコのところでやったみたいに髪の毛の部分を半径調整ツールでなぞります。
完成した切り抜き
髪の毛のところも何とか選択できましたが、若干薄いかも …。
3.2. 髪の毛の部分を後から選択する
今度はさっきと逆に、髪の毛の部分を後から選択してみます。CS4 の時は、抽出フィルターを使って選択してたりしたので、このパターンで切り抜いてました。ネコの時もこのパターンでできましたね。
さっきと同じようにパスを選択範囲として読み込み後、再び “選択範囲を調整” で、髪の毛の部分を調整してみます。
完成した切り抜き
ぱっと見、さっきと変らないように見えますが、やってみた実感としては、前者の の「髪の毛の部分をおおざっぱに選択しておく」やり方の方が、細かいところも拾ってくれる気がします。
髪の毛の選択は 前者の方がキレイにいくっぽいですね。コントラストがはっきりしてない場合、細かい部分の切り抜きはなかなかキレイにいきません…。教材に出ているような画像は、最初からコントラストがはっきりしていて、割と簡単にキレイに仕上がるものばかりだったりしますからねー … X(
3.3. 色域指定とチャンネルミキサーを使ったきり抜き
コントラストが足りない場合は、事前に画像を補正して、コントラストをつけておいて切り抜く … ということも必要になります。でも、単純にトーンカーブなどでコントラストをつけてもダメなんですよねー … X( なのでここでは、色域指定とチャンネルミキサーを使って、切り抜き用の画像を作ってみたいと思います。
色域指定
まずは元画像をコピーしておいてから、“メニュー → 選択範囲 → 色域指定” から、色域指定ウインドウを開きます。
範囲は 100%にして、許容量は画像を見ながら調整します … が、指定する色域は、画像の背景部分をクリックして探します。今回は以下のポイントをクリックしました。
色域指定したポイント
このとき、shift キーを押しながらクリックすると、複数の色域を指定できるので、色域指定ウインドウのプレビューを見ながら、調度いいように調整します。あくまで背景と髪の毛のところのコントラストがポイントです！
調整し終わったら、OK をクリック。すると以下のように、指定した色域だけが選択されます。
色域を選択した状態（コピー画像）
チャンネルミキサー
今度は上記の状態（選択したままの状態）から、チャンネルミキサーを使って、選択された部分を白く飛ばしてしまいます。
まず のように、レッド、グリーン、ブルーのスライダーを右いっぱいの +200まで移動させます。出力先チャンネルは、
のように レッド、ブルー、グリーンの 3つがあるので、各チャンネル全部のスライダーをいっぱいの +200にしてしまいます。すると …
白く飛ばした画像
こんな風に、選択された部分が白く飛ばされた画像が出来上がります。髪の毛の部分のコントラストが、しっかりとついているのが分かると思います！これを元にすれば、”選択範囲を調整” や、チャンネルを使った切り抜きもきれいに出来そうですねー。
出来上がった切り抜き
さっきより、髪の毛の部分がハッキリ選択できるようになりました。ちょっと首のところ切り抜くの忘れました … X(
完成！
海に行ってないけど、行ってきましたー XD … みたいな w
4. 追記：パスの作り方、ベジェ曲線
たくさんの人が見てくれているようなので、少し追記させてください。サンプル中、ペンツール（パス）について説明不足だったので、補足しておきます。
ペンツールは アンカーというポイントを打って、
ハンドルをドラッグすると
のようなセグメントを描きます。このようにペンツールを使って作ったものをパスと呼んでいて、特にパスで描かれた曲線のことを、ベジェ曲線 と呼んでいます。このベジェ曲線を描くには、ちょっと練習というか、コツがいると思いますが、こんな風にしてベジェ曲線を描きながら、切り抜き、選択範囲を作って行きます。
ペンツールで一度クリックして アンカーを打ち、そのままドラッグすると
ハンドルがでるので、ハンドルの角度や長さを調整しながら、曲線
を描きます。なれないうちはなかなか難しいですけど、切り抜きをするなら必須のテクニックなので、Webデザイナーを目指すなら覚えておきたいスキルのひとつですね！
パスで切り抜きに挑戦
輪郭にそって、ベジェ曲線を描いていきます。気持ち内側に描くのがポイントです！
パスを描いた状態
アンカーは少ない方が滑らかな曲線を描けます … 慣れればずっと少ないアンカーでキレイな切り抜きができるようになりますが …。
パスを描くのがうまい人は、アンカーがもっと少ないです… X( 私はあまりパスが得意ではありませんので…。
ひどいサンプルでごめんなさいでした…。最後に、こんな風にトーンを調整して、部分的に明るくしたり暗くしたりして背景と馴染ませて行きます。
この合成写真は、顔を明るくして向かって右側を明るく、左側を暗くしてます。あと唇をちょっとピンクに w 参考にしてもらえると嬉しいです ;D
5. 追記
ベジェ曲線、パスについて新しく記事を書きました。ペンツールの使い方について、参考にしてもらえればうれしいです！
Comments
Thank you for the comment.