TechAcademy（テックアカデミー） Webデザインコース WebデザインPhotoshopPhotoshopで髪の毛を綺麗に切り抜く方法【初心者向け】
Photoshop

Photoshopで髪の毛を綺麗に切り抜く方法【初心者向け】

Photoshopで髪の毛を綺麗に切り抜く方法を初心者向けに解説した記事です。髪の毛などの細かい切り抜きをするには、選択範囲を作成する際「境界線を調整」というオプション機能を使用します。記事を読んでいざチャレンジ！

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

Photoshopでは、画像の切り抜きがよく使われます。ただし、髪の毛を綺麗に切り抜くには一工夫が必要です。

選択範囲を作成する際、「境界線を調整」というオプション機能を使用することができます。これによって人物の髪の毛などの細かい部分を簡単に綺麗に切り抜くことが可能です。

 

なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。

(※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)

 

20160620

 

田島メンター！！人物の切り抜きをするとき、境界線の部分に髪の毛があるとうまくいかなくて……どうすればいいですか～？

 

20163020-2

 

選択ツールだけでうまくいかないときは、「境界線を調整」機能を使ってみよう。

 

20160620

 

その機能はどこにあるんですか？

 

20163020-2

 

そうだね、まずは普通に選択範囲を作成するところから始めてみようか。

 

髪の毛を綺麗に切り抜く

今回はこの写真画像を使用します。

ps_kamic_1

 

画像が背景レイヤーの場合は、レイヤーを右クリックして「背景からレイヤーへ」を選択します。

ps_kamic_2

 

レイヤーの名前を入力し、「OK」をクリックします。ここでは「レイヤー0」としています。

ps_kamic_3

 

左のツールアイコンから「クイック選択ツール」を選びます。

ps_kamic_4

 

人物の部分をドラッグしていきます。

選択範囲がはみ出した場合はAlt＋ドラッグで消去、複数の場所を選択したい場合はShift＋ドラッグで範囲を追加しましょう。

ps_kamic_5

 

人物全体を選択した状態です。この時はまだ髪の毛の細かい部分は意識しなくてOKです。

ps_kamic_6

 

20160620

 

ここまではできるんですが、細かい髪の毛が範囲外に残ったままですね……

 

20163020-2

 

ここで「境界線を調整」を選択してみよう。選択範囲の点線が出ている状態で、上のメニューバーに表示されるよ。

 

20160620

 

はい！やってみます！

 

選択範囲を作成した状態で「境界線を調整」をクリックします。

ps_kamic_6_2

 

「境界線を調整」のウィンドウが表示されます。「表示モード」を「白黒」に変更してください。

ps_kamic_7

 

「エッジの検出」内の「スマート半径」にチェックを入れ、半径を調整します。

ps_kamic_8

 

白いシルエットが今選択されている部分です。髪の毛の辺りをドラッグすると、その部分が自動的により細かく調整されます。

ps_kamic_9

 

調整ができたら「OK」を押して「境界線を調整」のウィンドウを閉じます。

選択範囲が作成されている画面に戻るので、そのままの状態で「選択範囲」→「選択範囲を反転」をクリックしましょう。

ps_kamic_10

 

これで人物以外の部分が選択されている状態になりました。「編集」→「消去」を選択します。

ps_kamic_11

 

最後に「選択範囲」→「選択を解除」をクリックして完成です。

ps_kamic_12

 

先ほど調整した髪の毛を含む、人物の部分以外の場所が透過の状態(何も描かれていない状態)になります。これで髪の毛もうまく抽出できたことがわかるのではないでしょうか。

ps_kamic_13

 

下にレイヤーを作成し、一色で塗りつぶした状態です。

ps_kamic_14

 

拡大してみると、髪の細かい部分が切り取られているのが分かります。

ps_kamic_15

 

あとは背景用のレイヤーを変えることによって自由に加工が可能です。

ps_kamic_16

これで完了です。このテクニックを使いこなして、Photoshopの上達にお役立てください。

 

20163020-2

 

人物の切り抜きはうまくいったかな？

 

20160620

 

髪の毛の一本一本まで、きれいに切り抜けました！

 

20163020-2

 

髪以外でも、木の枝など細かい部分の切り取りを行うときは是非この「境界線を調整」を使ってみよう。

 

20160620

 

はい！ありがとうございました！

 

さらにPhotoshopを使いこなしたい場合は、Photoshopで逆光の写真を補正をする方法 も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。

記事を検索

関連するキーワード

関連する記事

Photoshopで画像のノイズを除去する方法【初心者向け】

デジカメなどで写真を撮影した際、ノイズと呼ばれる小さな粒が画像に生じることがあります。Photoshopでは、このノイズをプレビューを見ながら調整しつつ軽減する...
Photoshop

Photoshopで画像を角丸にする方法【初心者向け】

Photoshopは、選択範囲の機能を使って、写真の四隅を角丸に加工することが可能です。 今回は初心者向けにその方法を解説します。   ...
Photoshop

Photoshopのカスタムブラシの作り方【超初心者向け】

Photoshopでは、描画に使うブラシを自由に作成、編集することが可能です。 そこで今回は初心者向けに「カスタムブラシの作り方」を紹介します。 &...
Photoshop

Photoshopで写真の背景をぼかす方法【初心者向け】

Photoshopを使うと簡単に写真の加工が可能ですが、写真の背景をぼかすこともできます。 今回は、選択範囲機能とフィルター機能を使って、対象物以外の背景...
Photoshop

Photoshopの代用になる！無料で使える画像編集ツール・ソフト10選

Photoshopの代用になる無料で使えるツール・ソフトをまとめて紹介しています。 Photoshopは少し高額なソフトウェアでこれから試しに使ってみよう...
Photoshop

Photoshopでコピースタンプツールを使う方法【初心者向け】

Photoshopでは「コピースタンプツール」を使うと、画像の一部分を別の場所に複製することができます。そこで今回は、Photoshopのコピースタンプツールの...
Photoshop

あわせてよく読まれている記事

意外と簡単？Photoshopで画像を切り抜く方法

初心者の方でもAdobe Photoshopの使い方がわかる記事です。 Photoshopでは写真を切り抜いて加工することができるので、これが使えるようになると便利です。この記事を見ながらぜひ試してみてください。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。 (※今回の作業はすべてAdobe PhotoShop CCのバージョンでおこなっています)     田島メンター！！画像同士を加工するので切り抜きをしたいのですが、なかなかうまくいかなくて……     切り抜きの方法は、対象の形や周りとの色の関係などによって色々と使う機能も違ってくるよ。切り抜きたい画像の内容を一度確認してみよう。     具体的にはどういうところを見ればいいんですか～？     そうだね、まずは一番簡単な自動選択ツールが使えるケースについて考えてみよう。   目次 自動選択ツールを使った切り抜き ペンツールを使った切り抜き 「境界線を調整」機能を使った切り抜き   自動選択ツールを使った切り抜き ある程度コントラストがはっきりしているものは自動選択ツールを使用するとすぐに切り抜きを行うことができます。   画像が背景レイヤーの場合はレイヤーを右クリックし、「背景からレイヤーへ」を選択します。   次に左メニューから以下のアイコンを右クリックし、「自動選択ツール」を選択します。   画面内の、切り抜きたい部分以外の箇所でクリックします。(切り抜く対象の方が単色で選びやすい場合はそちらをクリックし、上メニューの「選択範囲」から「選択範囲を反転」を選びます。)   このとき「許容値」の値が大きいほど自動選択される範囲が広くなり、小さいほど狭くなります。   選択範囲が作成されたら上メニューの「編集」から「消去」を選択します。   切り抜く対象以外の部分が透過の状態になりました。 [PR] Webデザインで挫折しない学習方法を動画で公開中ペンツールを使った切り抜き 周囲とのコントラストがはっきりしていない場合や自由な形の切り抜きを行うときは、ペンツールを使用した方法が有効です。   先ほどと同様に画像が背景レイヤーの場合はレイヤーを右クリックし、「背景からレイヤーへ」を選択します。   以下のアイコンを右クリックし、「ペンツール」を選択します。   以下のメニューから「パス」を選択します。   切り抜きの対象に沿ってクリックし、アンカーポイントを追加していきます。このとき、対象の少し内側を選択していくときれいに切り抜くことができます。   対象をパスで囲みました。   次に、右下のレイヤーが表示されているメニューから「パス」のタブを選択します。（「パス」のタブが表示されていない場合は、上メニューの「ウィンドウ」から「パス」を選択します）   下の「パスを選択範囲として読み込む」アイコンをクリックします。   対象に沿って選択範囲が作成されました。   上メニューの「選択範囲」から「選択範囲を反転」をクリックします。   上メニューの「編集」から「消去」を選択します。   切り抜く対象以外の部分が透過の状態になりました。     自動選択ツールがうまくいかない場合は、パスを使うんですね。     対象のちょっとだけ内側をなぞるようにすると、合成後の画像で余白が目立たなくなるよ。     人物とか、複雑な輪郭のものだとこのやり方は大変そうですね……     そういうときは「境界線を調整」を使おう。この機能ではかなり細かい部分まできれいに切り取れるようになるんだ。   「境界線を調整」機能を使った切り抜き PhotoShop CS5から追加された「境界線を調整」という機能を使うことで、比較的簡単にPhotoshopで写真の人物だけを切り抜くことが可能です。   ツールパネルの選択ツールアイコンを右クリックし、「クイック選択ツール」を選びます。   選択したい部分を内側からドラッグすると自動で選択範囲が作成されます。 はみ出した部分はAltを押しながらドラッグすることで解除できます。   下の画像のように選択したいものが離れて複数ある場合は、Shiftを押しながらドラッグすることで同時選択することが可能です。   また、選択範囲の追加と削除は、上のメニューからツールアイコンをクリックすることで切り替えることもできます。   サンプルの画像で切り取る部分を選択した状態です。 ここから髪の毛の部分も切り抜きますが、詳しくは、Photoshopで髪の毛を綺麗に切り抜く方法をご覧ください。   下のメニューより「境界線を調整」をクリックします。   「表示モード」で「白黒」にします。 ここで見ると、髪の毛やまつ毛などの細かい部分が選択されていないのがわかります。   次に、同じように「表示モード」から「レイヤー上」をダブルクリックします。   「スマート半径」を選択し、大きさを調整します。   髪の毛に沿ってドラッグします。（髪の毛以外の部分がドラッグしたあと、見えなくなりますが問題ありません）   まつ毛の部分も同様にドラッグします。   もう一度「表示モード」の「白黒」で見てみると、先ほどと違って細かい部分が追加されていることがわかります。   「出力先」から「新規ドキュメント」を選びOKを押します。   人物の部分だけ切り抜きされ、背景がと透明の画像が新規に作成されます。まわりの白と灰色の模様は透過（透明）の状態（なにも描かれていない状態）です。   レイヤーを新規追加します。 ここでは「背景レイヤー」という名前にしています。   レイヤーの順番を入れ替えます。（背景レイヤーが下になるようにします）   「背景レイヤー」をツールパネルの「塗りつぶしツール」で塗りつぶしてみると、髪の毛などの細かい部分も切り取られているのが分かります。   あとは背景レイヤーを変更することで自由に編集が可能です。   いかがでしたか？ ぜひバナー作成などにチャレンジしてみてください。     「境界線を調整」を使ったやり方は以上だよ。     髪の毛までキレイに切り取れちゃいました！     自動選択だけでできるものならこの機能は必要ないときもあるかもしれないし、逆に人物などをパスや自動選択でやろうとすると大変になる。画像の状態によってツールを使い分けよう。     対象をよく見て方法を選ぶのが大事ですね。ありがとうございました！   Photoshopで文字を加工する方法の記事も公開しているので、初心者の方はあわせてご覧ください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

Photoshopで写真の背景をぼかす方法【初心者向け】

Photoshopを使うと簡単に写真の加工が可能ですが、写真の背景をぼかすこともできます。 今回は、選択範囲機能とフィルター機能を使って、対象物以外の背景部分だけをぼかす方法を紹介します。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。 (※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)     写真の背景だけをぼかして人物はそのままはっきりと表示させたいんですが、そういうことは可能ですか～？     そういうときは選択範囲とぼかしの機能を合わせて使うといいよ。     選択範囲を使って、人物の部分だけをぼかさないようにする感じですか？     そうだね。ただそれだけだとちょっと不自然になる場合も出てくるので、そういうときにどうしたらいいのかも見てみよう。   Photoshopで写真の背景をぼかす 今回はサンプルとしてこの画像を使用します。   左のメニューから選択ツールアイコンを右クリックし、「クイック選択ツール」を選んでください。   ぼかし効果をかけない部分(今回は人物の部分)をドラッグして選択していきます。Alt＋ドラッグで選択範囲を消去、Shift＋ドラッグで選択範囲を複数作成することができます。   人物の部分が選択されました。   「選択範囲」→「選択範囲を反転」を選びます。   これで人物以外の、背景の部分が選択された状態になりました。   そのままの状態で「フィルター」から「ぼかし」→「ぼかし(ガウス)」を選択します。   ここでプレビューを見ながら調整します。「半径」の数値が大きいほどぼかしが強くなります。 ウィンドウ内のプレビュー画面はドラッグで表示場所を移動できるほか、下の「＋」と「－」で拡大縮小することもできます。また、ウィンドウの後ろの実際のキャンバスにもプレビューは反映されています。   「選択範囲」から「選択を解除」をクリックして完成です。   これで人物の部分以外にぼかし効果が反映された状態になりました。     写真の背景をぼかす仕上げ ここまで紹介した方法の場合、ぼかしの強度を上げるとこのように処理されます。境界の部分を見ると、髪の毛などの色が背景に反映されているのがわかると思います。     さっきの手順でぼかし強度をだいぶ上げた状態だとこうなる。     人物の輪郭の部分までぼやけてしまって、半分背景に溶け込んだ感じになってしまってますね。     これを回避するために、先ほどとは違うぼかし機能を使ってみよう。   あえてこのように表現する場合はOKですが、完全に対象の部分だけをはっきりとさせたい場合は別の方法を使います。 先ほどと同じように選択範囲を作成したあと「フィルター」から「ぼかし」を選び、次は「ぼかし(レンズ)」をクリックします。   ぼかし(レンズ)の調整ウィンドウが開きます。「半径」の数字を大きくするとぼかしが強くなります。   この写真が、ぼかし(レンズ)で処理した状態です。先ほどと違って、ぼかした背景の境界線部分に人物の色が反映されてないのがわかるでしょう。   左がぼかし(ガウス)を使った場合、右がぼかし(レンズ)を使った場合です。状況によって使い分けると便利です。   今回の記事は以上です。     ふたつの画像を比べるとどんな感じかな？     右の方は、まさに私のやりたかったことですね！     人物や対象の切り抜きには今回自動選択ツールを使ったけれど、画像の色合いやコントラストがはっきりしない場合はペンツールなどを使った範囲作成をしてみよう。     はい！背景と人物の写っている写真でいくつか練習してみます！   さらにPhotoshopを使いこなしたい場合は、Photoshopで逆光の写真を補正をする方法も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

Photoshopで画像を角丸にする方法【初心者向け】

Photoshopは、選択範囲の機能を使って、写真の四隅を角丸に加工することが可能です。 今回は初心者向けにその方法を解説します。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。 (※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)     田島メンター！！画像の四隅を丸い角にしたいのですが、何か方法はありますか～？     角丸は、選択範囲を変形させることで簡単に作成できるよ。     選択範囲ってあとから変形したりできるんですか？     拡大縮小の他にも、色々な編集機能があるんだ。実際にやってみよう。   写真を角丸にする 今回はサンプルとしてこの画像を使用します。   まず、角丸にする対象の画像が背景レイヤーの場合は通常のレイヤーに変換する必要があります。レイヤーパレット内で編集するレイヤーを右クリックし「背景からレイヤーへ」を選択します。   レイヤー名を入力し、「OK」を押します。ここでは「レイヤー0」としています。 (カラー・描画モード・不透明度などは変更する必要はありません)   先ほど設定した名前の通常レイヤーに変換されます。 この作業をするのは「背景レイヤー」のままだと画像の一部を切り抜いたときに透過の処理ができないためです。角丸に切り取った後のバックを白色にする場合は背景レイヤーのままでOKです。   左のツールアイコンの選択範囲ツールを右クリックし、「長方形選択ツール」を選びます。   全てを選択、あるいは角丸の形で切り抜きたい部分を選択します。 今回は以下の部分を選択しています。上下左右の縁の幅を揃えたい場合はグリッドを表示させると便利です。   上のメニューの「選択範囲」から「選択範囲を変更」→「滑らかに」を選びます。   「半径」の数値を入力します。ここの数字が大きいほど角が丸くなり、小さいほど普通の直角に近くなります。   入力後「OK」を押すと、下のように選択範囲の形が変更されます。四隅が角丸の形になっていることが確認できます。     選択範囲を見るとどんな形になってるかな？     ちゃんと角が丸くなってますね！     ここまできたらあとはこの形に沿って切り抜くだけだね。次の手順に移ってみよう。   「選択範囲」から「選択範囲を反転」をクリックします。これで枠内以外の縁の部分が選択されることになります。   そのまま「編集」→「消去」を選択します。   このように四隅が角丸になった状態で、最初に選択した部分が切り抜かれます。   あとは「選択範囲」から「選択を解除」をクリックして完成です。   角丸で切り抜かれた部分以外の場所は透過の状態(何も描かれていない状態)になります。   透過の部分は下にレイヤーを新規作成し、塗りつぶしや画像を入れるとそれが反映されます。   今回の記事は以上です。     「半径」の数値によって形が変わるのを覚えておこう。大きければ大きいほど丸い形になるんだ。     形の関係上、どうしても透過の部分ができてしまいますね。     角丸の外を残したい場合は、選択範囲から切り抜きではなく塗りつぶしを使うこともできるからね。     なるほど、ありがとうございます！   もっとPhotoshopを使いこなしたい場合は、Photoshopで画像を左右反転にする方法も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

初心者でも簡単！Photoshopで画像を合成する方法

初心者の方でもAdobe Photoshopの使い方がわかる記事です。 今回のテーマは「画像を合成（結合）する方法」です。この方法を覚えると、画像の編集がよりおもしろくなります。Photoshopでは、複数の写真を簡単な手順で合成することができますので、試してみましょう。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。     今回は、画像合成の基本を練習してみよう。     田島メンター！！最初は何をしたらいいんでしょうか～？     まずは合成する画像を確認しよう。極端に大きさが違ったりする場合はある程度揃えないといけないからね。     なるほど、分かりました！次はどうしましょう？     用意ができたらさっそく画像の切り取りをしてみようか。最初は選択範囲の作成だよ。   事前準備 まず、切り取りたい部分がある画像と、背景に使いたい画像の2つを用意します。 画像を選ぶときは、各画像の明るさ・大きさなどがある程度似ているものを揃えると編集がしやすくなります。 今回はこの2つの写真を使って基本的な合成をしてみます。     切り取る画像の加工 それでは画像加工を始めてみましょう。 最初に、切り取りたい方の画像を開きます。   選択ツールのアイコンを右クリックし、「クイック選択ツール」を選びます。 シンプルな図形など、対象によっては「自動選択ツール」でも可能ですが、基本的にはクイック選択ツールを使います。   切り取りたい部分に沿ってドラッグし、選択します。 花などの細かい部分は「境界線を調整」から「エッジの検出」内の「スマート半径」にチェックを入れ、対象の部分をドラッグすることで、より正確に選択範囲を作成することができます。   「編集」にある「コピー」を選びます。（もちろんショートカットキーを使ってもOKです）     画像の切り取りはできたかな？     今コピーしたものを次の画像内に貼り付けるんですね。     Photoshop内では複数のファイルを開いて同時に作業できるからね。もうひとつの画像を開いてみよう。     [PR] Webデザインで挫折しない学習方法を動画で公開中背景にする画像へ移動 続いて、コピーした画像を背景の画像に移動させてみましょう。 切り取る画像をそのままにした状態で、次に背景にする画像を新規で開きます。   ここでレイヤーを一つ追加します。 このように貼り付ける用のレイヤーを作成すると、後の編集がとても楽になります。3つ以上の画像を合成するときにも、各画像ごとにレイヤーを分けておいた方が安心です。 たくさんのレイヤーを作成するときは、どんなパーツかがわかるように名前を付けておくと良いでしょう。   追加したレイヤーを選択した状態で「編集」にある「ペースト」を選びます。（ショートカットキーも使えます）   また、この時「特殊ペースト」から「同じ位置にペースト」を選ぶと、元の画像であった位置と同じところに貼り付けることができます。   これが2つの画像を合成した状態です。   「移動ツール」を使うと、貼り付けたものを自由に動かすことができます。 また、前述のようにレイヤーを分けておけば、後でいつでもこのツールで動かすことが可能です。   「編集」になる「変形」を使うことで大きさを変えたり、回転することも可能です。 合成する二つの画像のサイズが違う時などに便利です。これもレイヤーを分けておけばいつでも作業できます。   うまくできましたか？ ぜひ自分が持っている画像でも試してみてください。     透過の部分は下のレイヤーの情報が表示されるので、手前に見せたい画像ほど上のレイヤーに配置するんだ。     それぞれが別レイヤーだから、加工も別々にできるってことですね！     切り取る方の画像は、選択範囲内に余白がないように気をつけておくとより自然な合成になるよ。場合によっては「選択範囲」→「選択範囲を変更」→「縮小」なども使ってみよう。     なるほど、ありがとうございます！     Photoshopで画像を切り抜く方法をまとめた記事もあるので、ぜひ一緒にご覧ください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

Photoshopで画像の背景を透明（透過）にする方法【初心者向け】

Photoshopの使い方を初心者向けに解説した記事です。 画像を合成する際、不要な部分を「透過」の状態（何も描画されていない、透明の状態）にしなければいけない場合があります。 Photoshopの機能を使うと簡単に、綺麗に透明（透過）の処理を行うことができます。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。 (※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)     今回は透過について勉強するよ。画像合成には欠かせない要素なので必ず覚えておこう。     田島メンター！！透過っていうのは何ですか～？     レイヤーの中で、該当のピクセルに何も描かれていない状態のことを言うんだ。透過の部分にはその下のレイヤーの情報が適用されるよ。     なるほど、透明な部分ってことですね！   目次 今回の記事では下記の3つの画像を透明（透過）にしていきます。 人物写真の背景を透明にする 背景が一色の画像を透明にする 手描きのイラストの背景を透明にする（線画抽出する）   人物写真の背景を透明にする まずは人物写真を使って、基本的な透過の方法を解説します。 今回はこちらの画像を使用していきます。   まず、画像のレイヤーが「背景」の場合は、通常のレイヤーに変換する必要があります。 レイヤーを右クリックし、「背景からレイヤーへ」を選択します。   左のメニューから選択ツールアイコンを右クリックして「クイック選択ツール」を選びます。   人物の形に沿ってドラッグしていきます。 この際、Alt＋ドラッグで選択範囲の消去、Shift＋ドラッグで複数の選択範囲を作成することができます。   だいたい全体を選択した状態です。髪などの細かい部分が選択できていないので調整していきます。   上メニューから「境界線を調整」を選択し、「表示モード」を「白黒」にします。   「エッジの検出」内の「スマート半径」を選択し、半径の長さを調整します。   髪の修正したい所を塗りつぶすようにドラッグします。   細かい部分が選択された状態になります。   「境界線を調整」ウィンドウを閉じます。これで背景以外の部分が選択された状態になりました。   画像の選択が完了したら、上のメニューの「選択範囲」→「選択範囲を反転」をクリックします。   今度は逆に、人物以外の背景の部分が全て選択された状態になりました。   メニューの「編集」から「消去」を選択します。   先ほど選択されていた部分が消されて「透過」の状態になりました。   下にレイヤーを作成し、それを緑で塗りつぶした状態です。 透過の部分には下のレイヤーの状態が反映されます。 基本的な透過の方法は以上です。     選択範囲を作成して、それ以外の部分を「消去」する方法だよ。消去された部分は透過の状態になるんだ。     この白とグレーの格子になっているのが透過なんですね。     そうだね。「消去」以外では消しゴムツールで消された部分なんかも透過になるよ。なので背景が一色だったりした場合はもっと簡単な方法があるんだ。     へー！どんなのですか？   [PR] Webデザインで挫折しない学習方法を動画で公開中背景が一色の画像を透明にする 記号や文字列などのはっきりした画像で、背景が一色の場合はもっと簡単です。   今回はこの画像を例にします。   左のメニューから消しゴムツールのアイコンを右クリックし、「マジック消しゴムツール」を選択します。   上の設定項目の「隣接」にチェックが入っていることを確認します。   背景にしたい部分の中の適当なところをクリックします。   すると、クリックした部分と同じ色の所がその場で透過状態に切り替わります。   また、この時「隣接」にチェックが入っていないと処理が少し変わってきます。試しに「隣接」のチェックを外してみましょう。   先ほどとは違って、中の「f」の文字内まで透過になっているのがわかります。   下に青色で塗りつぶしたレイヤーがある場合の違いです。特に文字列の背景を透過にしたい時は、「隣接」のチェックを外しておくと便利です。   手描きのイラストの背景を透明にする（線画抽出する） スキャンによって取り込んだ紙に描いたイラストなどを、加工しやすくするために背景を透明にする（線画を抽出する）方法です。 ここではチャンネルを使用した方法と、クイックマスクを使用した方法のふたつを解説します。   線画を抽出する前の共通の手順です。 スキャンした画像をPhotoshopで開きます。   まず最初に、スキャン時に入った大きな汚れなどをブラシツールで白く塗りゴミ取りをします。   次に、「イメージ」から「色調補正」→「明るさ・コントラスト」を選択します。   「明るさ」の部分を右に移動して画像を明るくすることで細かい汚れを消すことができます。   画像が背景レイヤーになっている場合は、右クリックして「背景からレイヤーへ」を選択します。   チャンネルを使用した方法 レイヤーの一覧が表示されているメニューから「チャンネル」タブを選択します。(「チャンネル」タブが表示されていない場合は上メニューの「ウィンドウ」から「チャンネル」を選択します)   以下のアイコン「チャンネルを選択範囲として読み込む」をクリックします。   線画以外の部分が選択されました。   上メニューの「選択範囲」から「選択範囲を反転」をクリックします。   線画の部分のみが選択された状態になりました。   「レイヤー」タブに戻り、新規レイヤーを作成して元のレイヤー(下のレイヤー)を非表示にします。   線画の色として使用したい色を選びます。今回は黒としています。(カラーのメニューが表示されていない場合は「ウィンドウ」から「カラー」を選択します)   上メニュー「編集」から「塗りつぶし」を選択します。   線画以外の部分が透過の状態になり、線画抽出が完了しました。   クイックマスクモードを使用した方法 線画を抽出する画像を開き、上メニュー「選択範囲」から「すべてを選択」をクリックします。   上メニュー「編集」から「コピー」を選択します。   レイヤーメニューから新規レイヤーを作成し、そのレイヤーを選択した状態にします。元のレイヤー(下のレイヤー)は非表示にします。   左メニューから「クイックマスクモードで編集」をクリックします。   上メニュー「編集」から「ペースト」を選択します。   画面ではこのようになります。   左メニューから先ほどと同じアイコンをクリックします。(今度は「画像描画モードで編集」となっています)   線画以外の部分が選択されました。   上メニューの「選択範囲」から「選択範囲を反転」をクリックします。   線画の部分のみが選択された状態になりました。   先ほどと同じように線画として使用したい色を選択し、上メニュー「編集」から「塗りつぶし」を行います。今回は暗めの赤色にしています。     線画以外の部分が透過の状態になり、線画抽出が完了しました。   線画の色は好きな色に設定することができます。スキャンした際にグレースケールなどで読み込んでいた場合は「イメージ」→「モード」「RGBカラー」などに変更することでカラーでの抽出が可能になります。   いかがでしたか？     最後に、スキャンした線画だけを残して他を透過にする方法を紹介したよ。     クイックマスクモードというのは、こういうこともできるんですね。     透過はレイヤーをうまく活用するためにも不可欠な機能なので、しっかり覚えておこう。     そうですね。ありがとうございます！   背景が透明にできたら、Photoshopで画像の合成にもチャレンジしてみてください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

Photoshopで鉛筆風のイラストを描く方法【初心者向け】

Photoshopで鉛筆風のイラストを描く方法を初心者向けに解説した記事です。 Photoshopでは、「選択範囲」機能と「ペンツール」を使用することで鉛筆風の効果をつけることができます。   なお本記事は、TechAcademyのオンラインPhotoshop講座のカリキュラムをもとに執筆しています。     田島メンター！！Photoshopを使って鉛筆で描いたような雰囲気のイラストを入れたいんですが、どうしたらいいんですか～？     Photoshopの「ブラシツール」にはデフォルトで鉛筆っぽい表現をするブラシがあるので、それを使うのがいいかもしれないね。     できれば簡単に、それっぽくしたいんですが……     そんなときは写真や画像から選択範囲を作成するという手もあるよ。実際にやってみようか。   Photoshopで鉛筆風のイラストを描く 今回は例としてこの画像を使用します。 背景に白で塗りつぶした「レイヤー1」があり、その上に鉛筆風に加工したいオブジェクトがある「レイヤー2」があります。レイヤー2では、加工する対象の部分以外は透過の状態（何も描かれていない状態）になっています。   まず、鉛筆風に加工するオブジェクトのあるレイヤーを選択しましょう。   左のメニューの選択範囲ツールアイコンを右クリックし、「自動選択ツール」を選びます。   上のオプションで「隣接」のチェックを外してから、背景の適当なところでクリックしてください。   お菓子のシルエット以外の部分が選択されました。   上メニューの「選択範囲」から「選択範囲を反転」をクリックします。   これで加工したい部分が選択されました。 対象によっては「自動選択ツール」などを使用してもOKです。 ※文字レイヤーの場合はレイヤーを右クリックして「作業用パスを作成」→パスのタブに移動し「作業用パス」で右クリックし「選択範囲を作成」から範囲を選択することができます   鉛筆で加工するためのレイヤーを1つ新規に追加します。ここでは「レイヤー3」としています。 次に、シルエットのあるレイヤー2を非表示にしてください。   図のように選択範囲だけが表示された状態になりました。     これで下準備は完了だよ。     鉛筆ブラシでの描画を適用させる範囲を、先に作ってしまうんですね！     用意ができたら、ブラシツールから「鉛筆」を使って描きこんでいこう。   先ほど作成した新規レイヤーを選択した状態で、左のメニューから「ブラシツール」を選択してください。   ブラシの種類の中から「鉛筆（木炭）」を選択し、不透明度やブラシの直径などを調整します。   選択範囲の中を塗っていきます。途中で色などを変えても大丈夫です。 あまり塗りつぶしすぎないほうが自然な仕上がりになります。(塗りきれていない部分には下レイヤーの状態が反映されます)   塗り終わったら「選択範囲」から「選択を解除」をクリックすれば完成です。   やり直したい部分がある場合は「選択範囲」→「再選択」を選ぶと、続きを塗ることができます。 今回の記事は以上です。     先ほど作った選択範囲の中だけに「ブラシツール」による描画が適用されるんだ。     範囲の中をブラシで塗っただけなのに、不思議と手描きの雰囲気が出ますね。面白いです。     鉛筆ツールを使う時はあまりしっかり全部を塗りつぶさず、適度に間を開けるのがそれっぽくなるコツだね。     鉛筆以外にも、色々な画材風ツールでやってみると面白そうですね。ありがとうございます！   さらにPhotoshopを使いこなしたい場合は、Photoshopで木目を描く方法も合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でも1週間でフォトレタッチをマスターできるオンラインPhotoshop講座を開催しています。現役デザイナーに毎日チャットで質問することができます。
Photoshop

WEEKLY RANKING

TechAcademy（テックアカデミー） Webデザインコース WebデザインPhotoshopPhotoshopで髪の毛を綺麗に切り抜く方法【初心者向け】