【photoshop】簡単!キレイ!白黒シルエット画像の切り抜き方

web

グラフィック

素材として送られてきたロゴが透過画像じゃなかった!?

mv_2

こんにちは。
WEBデザイナー兼中川ラボ研究員の中川です。

最近けん玉を始めたんですが、もしもしかめよ~のもしかめ、玉を持って剣(もち手のほう)を振り上げて挿す飛行機という技をメイク(成功)させてウキウキな気分です。
しかし、まだ始めたばかり!もっと難易度の高い技をメイクできるよう研究していきたいですね!

 

さて、今回は我々の業界でもよくある、画像の切り抜きのお話です。

・シルエットのデータを間違えてjpgで保存してしまった。(元のデータがない)
・過去に作ったデータがあるが透過されていない。

皆さんも上記のような経験ありませんか?
そんなあなたに朗報!

 

Photoshopを使って簡単でキレイにロゴを切り抜く方法があるのです!

 

切り抜きといってもパスを使って地道に切り抜く方法や色域選択を使う方法などもありますが、
今回ご紹介する方法は、パスや色域選択で微妙に漏れてしまうロゴの淵もきれいに切り抜くことができます。

 

まずは、完成形のご紹介。

 

1_

最終形としては、上記の左図を目標に作業進めてまいります。

 

目次

  1. 1、photoshopを開き、画像を貼り付けます。
  2. 2、「すべてを選択」をクリック→コピー
  3. 3、クイックマスクモード→ペースト→画像描画モードで編集
  4. 4、選択範囲を反転→塗りつぶし
  5. 5、配置

 

 

 

 

1、photoshopを開き、画像を貼り付けます。

 

1

 

 

 

 

2、「すべてを選択」(Ctrl+A)→コピー(Ctrl+C)

 

2

3

 

すべてを選択(Ctrl+A)→コピー(Ctrl+C)をして、読み込んだ画像をコピーします。
※まだ貼り付けません(ペーストしません)。

 

 

 

 

3、クイックマスクモード→ペースト(Ctrl+V)→画像描画モードで編集

 

4

クイックマスクモードで編集

 

 

ここでポイントになるのが「クイックマスクモード」です。

名称未設定-1

ツールパレットの一番下にあります。

 

クイックマスクモードってなに?詳しく知りたい!という方はadobe社公式サイトでも紹介されているのでそちらを参照されてください。
http://www.adobe.com/jp/digitalimag/tips/phs7qmask/printable.html

要するに、このボタンが押されている間にブラック(色)で描かれたもの以外が選択範囲になる!というモードです。(黒以外でも可能ですが、色により透過されます。一度やってみるとわかると思います。)

 

図で表すと。

 

名称未設定-3

名称未設定-4

 

左がクイックマスクモード中にブラシで描いた落書き、その後クイックマスクモードを解除したときにできる選択範囲。

この技術を使い・・・

 

5

ペースト(Ctrl+V)

7

画像描画モード(クイックマスクモード解除)

8

選択範囲ができた。

 

 

先程、コピーした画像をクイックマスクモードでペーストし、「画像描画モード」(左図参照)を押します。(クイックマスクモード解除)すると、左の図のように黒のシルエット部分以外が選択された状態になります。

 

今、白い部分が選択されています。

 

つまり・・・

 

 

 

 

4、選択範囲を反転(Shift+Ctrl+I)→新規レイヤー追加→塗りつぶし

 

9

1111

 

今は白い部分が選択されているので、反転して黒い部分を選択範囲とします。
その後、[新規レイヤーを追加]し選択範囲の[塗りつぶし]を行います。

 

13

 

できました!
ここで色を変えて塗りつぶすこともできますね。

 

なぜ塗りつぶすかというと、この選択範囲で元の画像をコピーすると、元画像のロゴの淵にあるにじみ部分(灰色な部分)までコピーしてしまい、キレイに淵がついてしまうからです。

 

名称未設定-6

 

 

 

 

5、配置

 

あとは、実際に使う場面によってロゴを配置して頂ければと思います。

 

完成

 

あっという間に画像の切り抜きが出来るので、

デザイナーにとってはすごく助かるツール「クイックマスクモード」。

 

今回の方法は、切り抜きたいものが黒・背景が白の場合に

キレイに切り抜くことができるという方法でしたが、

次回は、様々な色に対応できる切り抜き方法をご紹介しますので、ぜひお楽しみに!

 

 

 

【おまけ】

mv02

透過されているので、レイヤー効果などで色もつけれます!

 

名称未設定-5

にじんでいる箇所までしっかり範囲選択できています!

 

関連コラム