Photoshopを使って
WEBデザインができるようになりたいあなた！

Photoshopを使えるようになりたいけれど
難しそうで手も足も出せないでいるあなた！

Photoshopの勉強って何から始めたらいいの？
と途方に暮れているあなた！

この記事を見ながら一緒に手を動かせば

1日10分 10日間の学習で
WEBデザインの現場で必須の機能だけを覚えながら
Photoshopの基本機能を覚えて
バナーの作成ができるようになります！

今日は写真の切り抜き方法
を覚えます！

画像の人物と机上のパソコン類だけを切り抜く方法を解説します。

“アス子”

大丈夫！
アス子は全くの初心者にデザインを教えてきた経験があります！
美術畑出身の直感的なあなたが
遠回りすることなく
実務で必須の機能だけを学びながら
Photoshopでデザインができるように教えます！
アス子のプロフィールはこちらから。

DAY1からDAY３がまだの方はこちらからどうぞ

初めてのphotoshop超簡単な使い方

DAY１【10分で完成】フォトショの使い方｜初心者必須ツール３選。
・新規ドキュメントの作成
・フォトショ操作画面の解説
・レイヤーとは
・長方形ツール、文字ツール、移動ツール
・簡単なデザインtips（文字詰め・余白を揃える）
・画像の書き出し方
こちらを作成していきます。

初めてのphotoshop超簡単な使い方

DAY２フォトショの使い方｜ドロップシャドウで一気にプロ級。
ドロップシャドウをマスターして一気にプロクオリティーに爆上げします！
こちらを作成、解説していきます。

初めてのphotoshop超簡単な使い方

DAY３は【初心者入門編】Photoshop使い方｜画像補正が3分で！
画像補正が3分で完了する現場の技を伝授します。
・調整レイヤー
・トーンカーブ
・レベル補正
・レンズフィルター
・明るさ、彩度
こちらを作成、解説していきます。

Contents

写真をレイヤーマスクで切り抜く
DAY1〜DAY３までの機能を使用してバナー作成
まとめ
ちょっと一休み

写真をレイヤーマスクで切り抜く

サンプル画像を見てみましょう

今日はこちらの写真を切り抜いていきます。

因みに、こちらの写真素材はAdobeStockからダウンロードしています。
AdobeStockはサブスク契約により素材のダウンロードができるサービスです。3億点を超える豊富な素材は全て商用利用可能。クオリティーの高いビデオ、オーディオ、写真、イラストなどが揃っています。

こちらを右の画像のように、必要な部分だけを切り抜いていきます。

このように画像の必要な部分だけ切り抜いて、デザインに使用する場面は実務でも非常に多いです。
是非最後までついてきてくだいね。

レイヤーマスクとは？

今回は選択範囲を選択して「レイヤーマスク」で切り抜く方法を解説します。

レイヤーマスクとは、元の画像の上にマスクとなるレイヤーを重ねることで画像の一部を隠す機能のことです。

レイヤーマスクを作成したら、レイヤーパネルでは白黒になっているサムネイルが表示されるのが特徴です。

たとえば、元の画像に見せたい部分の形に切り抜いたレイヤーを重ねることによって、その部分だけが見えるようになります。

黒いところが隠す部分、白いところが見せたい部分です。
つまり、元の画像を切り抜かなくても、レイヤーマスクを使うことで切り抜いたのと同じ効果が得られるのです。
元の画像に手を加えていないので、あとから他の編集作業も可能です。

では早速行っていきましょう！

手順①　クイック選択ツールで大まかに選択範囲を決める

１　新規ファイルから、画像を取り込みます。
２　レイヤー右の鍵マークをクリックし、ロックを解除します。
３　選択ツールのアイコンを長押しし、クイック選択ツールをクリックします。　オプションバーの表示が変わります。
４　被写体を選択をクリックします　　取り込んだ画像が点線で大まかに囲まれました。この点線で囲まれている部分が選択範囲です。

5　３選択ツールを選択した状態で１０プラスかマイナスマークをクリックし、画像内の点線で囲まれた選択範囲を大まかにドラッグしながらさらに詳細に決定していきます。プラスマークは選択、マイナスマークは選択を除外できます。右にある丸いマークで使用するブラシサイズを変更できます。細かい部分はピクセル数を下げ、大まかな部分がピクセル数を上げて作業しましょう。
ここまでで、まずは大まかに選択範囲を決定していきます。

手順② 詳細に選択範囲を決めていく

７　選択とマスクをクリック　８　描画モードをオーバーレイを選択すると図のように選択範囲外が赤く表示されて、切り抜かれる部分が見やすくなります。不透明度のスライダーで赤い塗りの不透明度を見やすい濃さに調整しながら、さらに詳細に選択範囲を決定していきます。
９　選択ツールで５と同じように操作をしながら、詳細に選択範囲を決定していきます。必要に応じて画像を拡大（commandと＋を一緒にクリック)、縮小(commandとーを一緒にクリック)しながら行いましょう。※windowsではcommandキーではなくCtrlキーです。
選択ツールの下にある境界線調整ツールで選択範囲の境界線をなぞると髪の毛や動物の毛などをが詳細に選択できます。
選択範囲は１１のグローバル調整のスライダーで微調整が可能です。
こちらもそれぞれ動かしてみて、いい感じに選択範囲の詳細を決定していきましょう。
１２　出力先は新規レイヤー（レイヤーマスクあり）を選択して決定をクリックします

1３　被写体が切り抜かれました！

手順③ 切り抜かれた画像の確認と微調整

１４　最初に取り込んだ画像レイヤーが目玉が消えて非表示になり、新たなレイヤーができています。

詳細を確認しやすいように切り抜いた画像の下のレイヤーに着色する

１５　最初に取り込んだ非表示のレイヤーを選択した状態でプラスボタンをクリックします新たなレイヤーが作成できました。そのレイヤーをクリックした状態で　メニューバーの選択範囲をクリック　すべてを選択をクリック
１８　塗りのアイコンが上になるように右上の矢印で入れ替える　　塗りのアイコンをダブルクリック
１９　カラーピッカーで濃いめで被写体が引き立ちそうな色を選択　OKをクリック

21 　塗りつぶしツールで１５で選択したどこかをクリックすると２２塗りつぶすことができました　選択範囲はcommand とDを同時にクリックして解除します。

細部を修正する

切り抜いて新たに作成された一番上のレイヤーの右側のアイコン（マスク）をクリックして選択します。

切り抜いた画像の細部を修正していきましょう。
小さいですが、白い部分が見えている部分、黒い部分がマスクされて見えなくなっていて、画像が切り抜かれて表示されます。
ブラシツールなどで黒い色で塗るとその部分がマスクされて見えなくなります。逆に白く塗ると表示されます。画像では多角形選択ツールで選択範囲を選択して、塗りつぶしツールで塗りつぶして非表示にしています。

２５　白か黒の色の選択はこの部分で行います。画像では白黒ではなく他の色が選択されているので左下の白黒のタイルの方をクリックして白黒タイルを表示させています。

綺麗に切り抜きが完成したら、塗りつぶした背景を非表示にして完成です。
一番上の切り抜き画像のレイヤを選択した状態でコピー（commandとCを同時クリック）して、作成するバナーにペースト（commandとVを同時クリック）することができます。

“アス子”

ぜひ、あなたの作成したバナーに切り抜き画像を挿入してみてくださいね。

DAY1〜DAY３までの機能を使用してバナー作成

初めてのphotoshop超簡単な使い方

DAY1がまだの方はまずはこちらからどうぞ。長方形ツール、文字ツール、移動ツールと簡単なデザインtipsでバナーを作成します。
こちらを作成していきます。

初めてのphotoshop超簡単な使い方

DAY２がまだの方はまずはこちらからどうぞ。ドロップシャドウをマスターします！
こちらを作成、解説していきます。

初めてのphotoshop超簡単な使い方

DAY３はこちら。
画像補正が3分で完了する現場の技を伝授します。
こちらを作成、解説していきます。

そして今回DAY４で学んだ画像補正の機能だけを使用してバナーを作成してみました。

“アス子”

ここまでで学習した機能だけで、かなり色々出来ると思いますので、ぜひあなたも作成してみてくださいね。

まとめ

この記事を参考にあなたも
Photoshopでレイヤーマスクを使用して画像を切り抜くことができましたか？

次回以降も
さらに実務で必須の機能を
実際に手を動かしながら学習していきます！

初めてのphotoshop超簡単な使い方

DAY5は【初心者用】フォトショの使い方｜実務で頻出写真加工表現、3種！
・図形や文字で画像を切り抜く（レイヤーマスク/クリッピングマスク）
・アナログ写真風加工（境界線）
・ふわふわ加工（レイヤーマスク/ブラシツールでマスク）
・スマートオブジェクトに変換
こちらを作成、解説していきます。