Photoshopで簡単に画像を切り抜く3つの方法!用途によって切り抜き方を使い分けよう!

Photoshop講座
この記事は約 3 分で読むことができます。

Photoshopを使った画像の切り抜き方を知りたい!
でも難しい操作は嫌だ!簡単ですぐできる方法ってないかなぁ…

ASK
ASK
はい、あります!しかも3つも!
今回は用途に合わせた画像の切り抜き方を紹介していきます。
デザイナーになるうえでこれらは必須テクニックなので、完ぺきにマスターしましょう!
この記事で分かること!

  • 簡単に画像を切り抜く3つの方法
  • 3つの切り抜き方法の使い分け
  • 切り抜きをする際の注意点

簡単に画像を切り抜く3つの方法

色域指定による切り抜き

色域指定による切り抜き説明
メニューの「選択範囲」から「色域指定」を選びます。
色域指定による切り抜き説明
スポイトアイコンを選択した後、プレビュー内の背景をクリックします。

許容量」の値を調整し、切り抜きたい対象がくっきり見えるように調整したあとOKをクリック。

色域指定による切り抜き説明
「Ctrl」+「Shift」+「I」で選択範囲を反転させてから
「Ctrl」+「J」で切り抜きレイヤーが作成されます。
色域指定による切り抜き説明
元画像のレイヤーを非表示にすれば完成!
色域指定のメリット
  • 背景が単色の場合一瞬で切り抜き作業が終わる
  • 色を選択するだけであとは自動でフォトショップが選択範囲を作成してくれる
色域指定のデメリット
  • 背景が単色じゃないと使えない
  • 背景の色と切り抜き対象の色が近いと使えない

クイック選択による切り抜き

クイック選択による切り抜き説明
ツールバーの選択ツールを長押しして、クイック選択ツールを選択してください。
クイック選択による切り抜き説明
切り抜き対象をクリックしながらマウスを動かしていくと、自動的に境界線を識別して選択範囲が作成されていきます。

この時、「Alt」を押しながら右クリックで左右にドラッグすることでブラシサイズを変更することができます!

クイック選択による切り抜き説明
もしはみ出してしまった場合は、「Alt」を押しながらクリックすることで選択範囲が縮小していきます。

選択し終わったら「Ctrl」+「J」で切り抜きレイヤーが作成されます。

クイック選択による切り抜き説明
元画像のレイヤーを非表示にすれば完成!
クイック選択のメリット
  • 簡単に選択範囲を作成できる
  • 自分で選択範囲を決められるので微調整が可能
クイック選択のデメリット
  • 背景との境界線が曖昧な場合に不向き
  • 細部の切り抜きがアバウト

ペンツールによる切り抜き

ペンツールによる切り抜き説明
ツールバーからペンツールを選択してください。
ペンツールによる切り抜き説明
切り抜き対象の境界線に沿ってクリックしていきアンカーポイントを作成していきます。

どこから開始してもいいですが、グルっと一周して最終的には開始地点のアンカーポイントと繋がるようにしましょう。

ペンツールによる切り抜き説明
このように囲み終わったら右クリックして選択範囲を作成

その後「Ctrl」+「J」で切り抜きレイヤーが作成されます。

ペンツールによる切り抜き説明
元画像のレイヤーを非表示にすれば完成!
上級者が使うテクニック

境界線をぼかす説明

選択された状態で右クリック⇒境界線をぼかす⇒0.3pxほどをぼかす

これによってペンツールで作った選択範囲特有のカクカクとした輪郭を自然になじませることができます。

ASK
ASK
このひと手間をいれることで切り抜き特有の不自然さがだいぶ緩和されますよ!
ペンツールのメリット
  • 境界線を全て自分で決められるので丁寧な切り抜きができる
  • 3つの切り抜き方法で一番仕上がりが綺麗
ペンツールのデメリット
  • ペンツールを上手に扱う技術が必要
  • 3つの切り抜き方法で1番手間がかかる

3つの切り抜き方法の使い分け

背景が単色ならまずは色域指定による切り抜き

背景が単色の場合はまず色域指定による切り抜きを試してみましょう。

背景によって左右されるのが難点ですが、うまくいけば最速で切り抜くことができます。

ASK
ASK
僕は画像を切り抜く場合、まずこの方法が使えるかを考えますね!

画像サイズによって切り抜き方法を変える

切り抜き方に迷ったら、完成した時の画像サイズを基準にするといいです。

例えば、切り抜いた画像を使ってTwitterアイコンを作成する場合。

Twitterアイコンの推奨サイズは400×400ピクセルです。(公式サイト参照)

さらに実際に表示されるときはもっと小さく表示されます。

ペンツールを使うのが一番正確に切り抜けますが、小さいサイズだとある程度雑に切り抜いても違いは分かりません。

そこに労力を割くのはもったいないので、クイック選択ツールでサクッと切り抜いちゃいましょう!

ペンツールによる切り抜き

ペンツール

クイック選択ツールによる切り抜き

クイック選択

迷ったらペンツール切り抜きが間違いない

最終的に迷ったらペンツールによる切り抜きが間違いないです。

手間はかかりますが、手動で選択範囲を作れるため3つの中で一番正確に切り抜くことができます。

どの切り抜き方にするか迷ったり、他の方法を試したけどうまく切り抜けなかった!

となるくらいなら、最初からペンツールを使って切り抜くことをオススメします。

切り抜きをする際の注意点

切り抜く画像の画質に気を付ける

どんなに丁寧に切り抜いても、元の画像の画質が悪かったりサイズが小さいと台無しになります。

画質の悪い写真切り抜き例

ASK
ASK
このように境界線が違和感バリバリです…
切り抜く前に元の画像をしっかり確認しましょう!

人物を切り抜く場合は別の技術が必要

ASK
ASK

実は今回紹介した3つの方法では髪の毛を綺麗に切り抜くことが出来ないんです。

でも安心してください、髪の毛の綺麗な切り抜き方を解説した記事があります!

こちらを合わせて読んで切り抜きマスターになりましょう!

Photoshopで髪の毛をたった30秒で簡単に切り抜く方法!これであなたも切り抜きマスター!

まとめ

  • 色域指定による切り抜き
  • クイック選択による切り抜き
  • ペンツールによる切り抜き

今回紹介した3つのテクニックを使いこなすことで様々な画像を切り抜くことができます。

デザイナーになるためには必須テクニックですので、何回も練習して完ぺきに使いこなせるようになりましょう!

デザイナーを目指すならスクールに通おう

当サイトでは、
本気でWebデザイナーになりたいならデザインスクールに通うことをおすすめしています。

なぜかというと、デザインの勉強は独学では難しいからです。

独学が難しい理由

  • モチベーション維持が難しい
  • 自分のデザインの良し悪しを判断できない
  • 無意識のうちに、好きなデザインばかりを作ってしまう
  • いくら勉強しても就職できるかは別問題

デザインというものは勉強すればするほど上達できるわけではありません。

プロに見てもらいながら、正しく勉強して初めて、デザインは上達するんです。

独学で無駄な時間を費やすくらいなら、多少お金はかかってもWebデザインスクールに通って最速でデザイナーになるべきです!

当サイトおすすめのWebデザインスクールについては下記リンクよりご覧ください!

おすすめWedデザインスクール17選!現役デザイナーが解説します!
Photoshop講座

応援クリックをポチッとお願いします!
ブログランキング・にほんブログ村へ   

ハジデザ | 初めてのWebデザイナー転職

コメント