【未経験の人・初心者向け】photoshop(フォトショップ)の画像切り抜きツールを効率よく活用する方法




中の人
こんにちは。
coffeebreakの中の人です。

私の記事へようこそ。
ということは、フォトショップを使った素材の切り抜きやマスク処理の方法をどうやればいいのか悩んでいるのではないでしょうか?
実はこれ「いい質問」なのです!

フォトショップは画像加工ソフトというのはご存知だと思いますが、万能ソフトなのですよ!

だから、素材の切り抜き方法でも何通りもやり方が存在します。

  • ①選択範囲
  • ②クイックマスク
  • ③レイヤーマスク
  • ④クイック選択ツール
  • ⑤ペンツール
  • ⑥シェイプ
  • ⑦消しゴム

ざっくりと考えてみてもこれだけ思いつきますし、やり方はまだまだ存在しています!

中の人
どんどんキャリアを詰めばもっと沢山の方法がみつかるよ!

おそらく、記事を読んでいる人ならすでに知っていると思うので、

「この程度の事なら本にも載っているよ!

ネットで探せばtipsはすぐ見つかるよ!」

とお考えなのでは。

そうですね。その通りです。

でも、

「本に載っている事を上手く活用できていますか?

「ネットの情報を自分の成果物にちゃんと落とし込めていますか?

「いい質問」はこの事が言いいたいのです。

中の人
万能ツールは便利だけど使いこなさないといけないんだ

未経験からWebデザイナーを目指すと覚える事もいっぱいなので大変な事だと思います。
Webデザインの勉強を初めて、フォトショップに出会って加工処理を勉強する中で沢山のやり方にまどわされてどの方法が一番良いのか分からないのではないでしょうか?

「じゃあ、どの方法がいいの!」

このようにお考えになると思いますが、方法を一つに絞るのは間違っています。

答えとしては「どれも正しい方法」がベストです。
さらに具体的に付け加えると、「デザイン制作ではどの画像処理方法をチョイスすれば一番有効なのかを考える」がベストです。

中の人
ここからは、未経験の人、初心者向けに切り取りツールの仕様用途を詳しく勉強していくよ

今回の素材の切り抜きやマスク処理なら、

何番を選択すれば納期に間に合うかとか

何番を優先的に活用すれば品質を落とさずに時短できるか

何番でやってたけど、もっと便利な方法は無いか

こういった取捨選択をデザイン制作に合わせて出来る様にしておきましょう。
上手く使い分ける事で、フォトショップで作ったバナーやウェブサイト、ランディングページ(LP)のデザイン工数をショートカットした割にクオリティが上がっています!

中の人
フォトショップは素材の切り抜き一つでも複数のやり方があるんだよ。
いきなり全て覚えなくても大丈夫だから、少しずつ使い分けてみて。
ご注意
独学出身という事もあり私のデザインノウハウはセオリーと違う場合が多々あります。
そんな時は、やっぱり変な人だなと思いながら記事を読んでいただければ幸いです。

なぜ制作するデザインに合わせて使い分けるのか?

Webデザイナーのお仕事はウェブサイト等を制作しますが、案件によって時間はかぎられています。
全てのデザインに全力を注ぐのは良い事ですが、予算であったり職場の工数(この場合は時間給)が定められているので全て同じやり方だけでは上手くいかない案件もあります。

なので今回の素材の切り抜きやマスク処理も時短と品質をWで解決する方法を模索しないといけません。

切り抜きツールはフォトショップだけではありません。
最近は人物なら無料で、しかも優秀なツールがあるので、手っ取り早く切り取り処理を済ませたい方は「切り取りのツールremove.bgのレビュー記事」も参考にしてください。

対策としてこのような使い分けをしていきましょう!

小さなもの、背景と同化しそうな素材、複雑すぎる素材の切り抜きはクイックツールで処理をしたほうが早い

向いている処理

  • ②クイックマスク
  • ④クイック選択ツール

このような細かい切り抜きはある程度自動処理に任せてから、後で手作業を加えていくのほうがスムーズです。
パスツールでやると詰みます。

形をはっきり見せる場合はパスでマスクをかけたほうがキレイ

向いている処理

  • ⑤ペンツール

高解像度で撮影した商品画像や人物モデルは切り取りやマスクを加えてもクッキリ見せておきたいですよね。シャープに切り取りたい画像はパスツールで抜き取るほうが品質を保てます

グラデーション効果のように背景をぼかすならマスク処理が適している

向いている処理

  • ①選択範囲
  • ③レイヤーマスク
  • ⑦消しゴム

画像素材を消しゴムで消すともとに戻せなくなる。そんな時はレイヤーマスクをかけておきマスクをなぞって消していきましょう。塗り直しすと元に戻せます。
ブラシ調整をしておくとグラデーションがきれいにかかったマスク処理が可能なので背景をちょっと消したいけど、すぐ元に戻せる状態にしておきたい場合はレイヤーマスクをかけておくのがおすすめです。

仕様用途をまとめる

画像処理を時間で早い遅い。品質で高い低いの軸で図にして①〜⑦をまとめてみました。
フォトショップの素材の切り抜きやマスク処理方法を選択する時に活用してください。

仕様用途をまとめる理由は、過去の私の経験からです。「切り取りツールを使いこなしていなかった為に招いた大失敗」を記事にしているので勉強の幅を広げる意味で読んでいただければ幸いです。

素材の切り取りとマスク処理の方法

①②⑥⑦は補足的に処理する事で身につけていけるので、活用の幅が広い③④⑤をピックアップして簡単な操作方法をご紹介しておきます。

クイックツールの処理

短時間で出来るのは自動ならではの特徴ですが、雑に仕上がるのはたまに傷です。


選択ツールかを自動モードにて、人物素材の輪郭をざっくりなぞります。



ある程度自動選択できました。これで設定完了です。


選択範囲を反転してから削除するとざっくりと切り抜きができる時短ツールですね。

適している素材はこちら

・髪の毛処理
ご紹介した方法ですね。素材の中には処理がまったくうまく切り取れないものあります。
その場合はペンツールやレイヤーマスクとの併用でカバーします。

・背景白抜き素材
白を選択すれば切り抜きできるので自動じゃなくても良いのですが一応できるので。

・水しぶき
缶ビールやジュースの画像素材に水しぶきを合成しているデザインがありますよね。
あの処理もクイック選択ツールで対応できます。水しぶきの中には切り取りにくい物があるので限られた水しぶきしかできません。

パスツールの処理

時間が一番かかる処理ですが、シャープでキレイに仕上がります。


人物素材や商品素材の輪郭にそって打ち込んでいきましょう。


出来上がったパスはシェイプなので、そのままクリッピングマスクして完成です。
※選択範囲の反転だとあとで修正できないくなるのでクリッピングマスクをかけます

適している素材

・商品写真
ご紹介した方法です。予算も時間がある時はできるだけこの処理を施しておきます。
個人的には贅沢な処理方法ですね。

・人物のシルエット
髪の毛やふわふわの服はニガテ。その場合は自動ツールと併用してのりきりましょう。

レイヤーマスクの処理

レイヤーにマスクをかけることで、画像素材を消したり戻したりして修正が可能なのがレイヤーマスクの凄い所ですです。
なんども修正調整が必要な素材はレイヤーマスクをかけて処理する事が多いですね。
マスク処理は現役Webデザイナーさんなら全員が使っているくらい活用範囲が広い処理方法なので、未経験からWebデザイナーを目指すならレイヤーマスク処理方法は絶対覚えておきましょう!



上のレイヤーにマスクをかけブラシで消してみました。


反対に消しゴムで消した部分を元に戻しました。

適している素材

・グラデーション
ご紹介した一番簡単なマスク処理方法です。
背景処理を別の素材とふんわりつなげたい時はこの処理を多様します。
まぁ、うまくごまかす方法ですね。

・輪郭がはっきりしていない素材
ブラシは不透明度の調整で強弱を調整できます。
トントントンとたたきながら輪郭を徐々に削っていきましょう。

・微調整とやり直しをしやすい作業向き
自動ツールやパスツールで処理しきれない範囲はやり直しが効きやすいマスク処理の出番です。
それぞれを上手く併用して短い時間でキレイに切り抜きましょう

用途をまとめる

それぞれの適している素材を先ほどの図に加えておきました。
制作するデザインに合わせてフォトショップの素材の切り抜きやマスク処理方法を活用してください。

本日のまとめ

  • 切り抜きやマスク処理の方法はいくつもある
  • どれが正解ではなく全て正解
  • 用途に合わせてマスク処理を使い分けるのがベスト
  • 自動とパスとマスク処理は覚えておく

私の記事はヘタクソなので上手くノウハウを受け取ってもらえないかもですが、最後まで読んでいただいて感謝いたします。

この記事はここまで!
ここからはよく読まれる記事をまとめてご紹介します。ひとあじ違うデザインに出会えるかもしれません。

そのフォント使ってる?「NexusFont」で大量のフォントを管理してPCの負荷を抑えよう

2017.11.12

【たった1問】遷移型アンケートページの構成とデザインを調べてみる

2018.09.01

記事でもランディングページ(LP)でもないアンケートページの構成・デザインの作り方

2018.08.26

日本語フリーフォントお探しですか?未経験・新米Webデザイナーさんにおすすめなフォントを選んでみました!

2019.02.11

【検証】本物のデザイナーだけが知っているCVエリアのボタンは何色がよいか?

2018.06.03

転職に有利なポートフォリオが作れる人と作れない人の違い

2019.06.02


お気に入りの情報
が無かったでしょうか?
この記事の最後にデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google