photoshopの切り抜きが誰でもわかる!必見の技4つを徹底解説!

デザイン

2017/02/22

デザイン

photoshopにおける画像の切り抜きについて、普段からphotoshopを多用するWebデザイナーの筆者が解説します。

本記事では、見やすい画像を使ってphotoshopでコントラストがハッキリしている時としない時の切り抜き方法・髪の毛を綺麗に切り抜く方法・サイズを指定して画像を切り抜く方法の4つについて解説します。

photoshop初心者でも理解できるように丁寧に解説しているので、ぜひご覧ください。

本記事で、photoshopの切り抜きをマスターしましょう!

 

コントラストがはっきりしている場合の切り抜き

はじめに紹介するのは、最も簡単な、背景と切り抜きたいもののコントラストがはっきりしている場合の切り抜き方です。

以下の写真のように、コントラストがはっきりしている場合使用できます。

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

クリック選択ツールを選択します。

クリック選択ツール

クイック選択ツールを選択したら、そのまま、ハートの部分クリック&ドラックをすると綺麗にハートが塗られます。(図のように、点線の部分が切り取り線です。)

点線の部分

クイック選択ツールの下の自動選択ツールも使うことができます。

クイック選択ツールは境界線がはっきりしている場合、自動選択ツールは明暗(明るさ)がはっきりしている場合に使いましょう。

もし余計な部分を選択してしまったら、ブラシをマイナスにして選択しましょう。

ブラシをマイナスにして選択

また、ブラシの大きさも変更できます。

ブラシの大きさを変更する方法

選択ができたら、今度は切り抜きましょう。

切り抜きの解説画像

レイヤーからレイヤーマスクを選択します。

レイヤーからレイヤーマスクを選択

するとこのように切り抜きができました!しかし、少しぼんやりしていますね。

そこで、マスクの調整を行います。

メニューバー>選択範囲>選択とマスク を選びます

選択とマスク

すると、以下のような画面になります。

選択とマスクをし結果

この数値を調整し、OKを押せば、変更されます!

数値を調整

少しですが、さきほどよりもはっきりしました!

 

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

今度は、以下のようにすべてのトーンが同じでコントラストが明確でない場合の切り抜きについてです。

コントラストが明確でない場合

ペンツールで切り抜くのが定番でしたが、cc2015.5では境界線をより細かく設定できるようになりこちらも同クオリティで、できるようになったのでこちらを紹介します。

写真をいれたら、レイヤーの隣にあるウィンドウ、チャンネルを選択します。(なければウィンドウから出します。)

ウィンドウ、チャンネルを選択

ここで、目のアイコンをクリックし、表示を変更します。一番コントラストが強いものを選択します。(今回はブルーを選択しました。)

そして、クイック選択ツールを使用し、切り抜きたい部分を選択します。

切り抜きたい部分を選択

だいたい切り抜いたら、「選択とマスク」を選択しましょう。

「選択とマスク」を選択

以下のようなウィンドウが出てきます。

ウィンドウ

表示モードをオーバーレイにすると作業しやすいです。

半径やグローバル調整を調整します。出力は新規レイヤーを選択します。

新規レイヤーを選択

以下のように綺麗に切り抜くことができました!

綺麗に切り抜いた結果

 

髪の毛を綺麗に切り抜く方法

上記のコントラストに使用した方法を使えば、photoshopでもっとも使われる髪の毛の切り抜きも簡単にそしてきれいにできます。

チャンネルを変更します。

チャンネルを変更

チャンネルを変更

今回もブルーのチャンネルを使用します。

クイック選択ツールで選択したら、境界線を調節します。

境界線を調節

境界線を調節

スマート半径を選択し、プレビューをみながら調節します。

プレビューをみながら調節

以上のようにできました!

背景をつけてみると以下のような感じです。

背景をつけた場合

かなり綺麗に切り取れることがわかると思います。

以上で紹介した方法はもちろん人物などのオブジェクトや一部分切り抜きに便利なのでマスターして使いましょう!

 

サイズを指定して切り抜く方法

いわゆるトリミングの方法について最後にお教えいたします。

以下の画像を縦に切り抜きたいといったときに使えます。

縦に切り抜きたい画像

トリミングを選択します。

トリミングを選択

左上の数字が書いて有るところの▼を押すとこのように出てきます。まずは縦をやってみましょう。

4:5を選択します。

4:5を選択

このような画面になるので、矢印やドラックで切り抜きたい場所を選択します。

そのままenterボタンを押せば切り抜かれます。

photoshop切り抜きの解説

photoshop切り抜きの解説

同様に、様々な大きさにすることもできます。

様々な大きさにする場合

幅×高さ×解像度を選択します。

幅×高さ×解像度を選択

この部分に記入します。

例えば、web のバナーなどサイズが決まっている場合に便利です。

photoshop切り抜きの解説

上と同じような手順で切り抜きます。

 

いかがでしたか?

photoshopの切り抜き方法4つが理解できましたか?

切り抜きというスキルはphotoshopでも多用するスキルの一つなので、ぜひマスターしておきましょう!

udemyでは、フォトショップ初心者でも確実にスキルアップできる講座を用意しています。

プロのデザイナーが丁寧に教えて売れるとても売れている講座なので、ぜひこれを機にフォトショップをマスターしてみてはいかがでしょうか?

  

実際にアウトプットをしながら、実践的にphotoshopのスキルを習得できる動画講座です。

未経験からプロを目指す!実践PhotoshopCC講座 - Udemy

未経験からプロを目指す!実践PhotoshopCC講座 - Udemy

Photoshopが初めての人が中級レベルまでスキルアップできるコースです。単なる機能説明をするような、つまらないコースではなく、写真加工、バナー作成、フライヤー制作、Webページの制作など、実際の制作をしながら実践力を身につけます。

動画で学習する

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事