画像の背景をなくして、イラストレーター上で背景にイラストを使う

イラストレーターで作成したイラストの前面に画像を配置。しかし、画像自体に白い背景が付いているので背景をなくしたい。

この場合、大きくわけて2通りの方法がよく使われると思います。


  • イラストレーター上で、イラストレーターの機能でマスクをかける

  • 画像編集ソフト(フォトショップ等)で画像自体にマスクをかけて、イラストレーターに配置する。

今回の場合は、おそらく画像自体にあらかじめマスクをかけた方が良いかと思います。

イラストレーター上でマスクする場合は、単純なパスなら良いのですが、複雑にパスを引いて、マスクした後、万が一マスクをずらしてしまうミスをした場合面倒です。

Illustratorで画像にマスクする方法: 画像にマスクをかける

単純に画像を丸くマスクしたり、四角や角丸の四角などでマスクする場合はこの方法で良いかと思います。

次は2つめの方法、画像にマスクをあらかじめかけておく方法。

これなら、すでに画像自体にマスクしてあるので、配置した時点でもう背景はありません。 クリッピングマスクといいます。

フォトショップで説明しますと

  1. 画像をフォトショップで開く。
  2. 背景以外(表示したい部分)にパスを引く
  3. パスを保存する。
  4. クリッピングマスクをする。
  5. 保存してイラストレーターに配置。

手順はこんな感じです。

パスを引く時に使われるベジェ曲線は独特の動かし方をするので最初は慣れてないと扱いにくいかもしれません。

例としてクマの頭をクリッピングマスクしてみます。

フォトショップで開いた画像

フォトショップで画像を開きました。

パスを引く

パスを頭の輪郭で引いていきます。

パスで囲む

パスを引いて最初のパスにゴール。頭がパスで囲まれました。

パスの保存

パスを保存します。パスのパレットの右上の三角マークをクリックすると「パスを保存」が出てくるのでクリックします。

パス名

パス名はパス1のままで良ければ「OK」をクリックします。

クリッピングマスク

もう一回パレットの三角マークをクリック。「クリッピングマスク」をクリック。

「パス1」を選んで「OK」

これで、クリッピングマスクができました。

保存、もしくは別名保存。

イラレに配置すると、画像がマスクされている事がわかります。パス引くのが面倒な場合は、色選択という方法で白色部分を選択して、選択範囲を反転させて、選択範囲をパスに変換する方法もありますが、微妙に粗いパスになったりする事もあり、あまりおすすめできません。・・。

上記2つの方法がよく使われますが、方法としては、ほかにもあります。


その他の方法1

マスクではなく、画像の背景を透明にしてGIF画像にする方法。しかしGIFは実写の写真や色数の多い画像だと粗くなり見た目が汚くなります。単純なイラスト等だったらGIFで良いかもしれません。※ただ印刷所に出すデータの場合は、JPGの高解像度の画像をEPS形式にしてイラレに配置します。(一般的に実寸サイズで300dpi以上のEPS画像)


その他の方法2

PhotoShopで画像上の背景を取り、イラレで作成したイラストを画像上にペースト。 つまり1枚の画像にします。イラストが大きすぎると画像サイズがおおきくなるデメリットあります。さらにイラレだと拡大が楽だけど、画像だと拡大の際、解像度を気にしなければならないデメリットもあります。


画像に関して過去記事のもマスクなど掲載してるので、ご参考までに。

カテゴリ:画像について



広告


この記事へのコメント

  • 桜パパの≡Slowlife

    始めまして
    いきなりでゴメンンサイ
    操作についてご存知でしたら教えてください

    cs2を使っているのですが
    四角を書いて、大きさを変えようとしたのですが、何かの関係で矢印が機能しません。
    「選択ツール」矢印で動いていたのですが
    「自由変形ツール」では可能ですが
    何かロックでもかかっているのでしょうか??

    お手数かけます
    宜しくお願い致します。☆彡

    2009年09月25日 09:14
  • 管理人BB

    桜パパの≡Slowlifeさんこんにちは。
    CS2は使った事がないのですが、自由変形ツールで可能なら、選択ツールで拡大・縮小できそうに思いますね。矢印が白色のダイレクト選択ツールって事はないですか。
    うーん、ちょっとわからないですね。
    ただの不具合の可能性も考えて、とりあえず、保存して再起動も試した方がよいかもしれないです。
    2009年09月25日 14:59

この記事へのトラックバック

広告