記事・特集リスト
無料お役立ち資料
本サイトについて
お問い合わせ
閉じる

Illustratorで背景が透明な画像を作成する方法

Illustratorでデザインや資料を作成する場合背景を透明にしてオブジェクトを切り抜かなければならない場面が出てきます。 その際に必要な背景を透明にする設定について解説します。

カテゴリ: Illustrator

背景が透明な画像データは、オブジェクトが切り抜かれているのでロゴやキャラクターのイラストなどで広く用いられています。本記事ではIllustratorを使って背景が透明な画像データを作成する方法を解説します。

Illustratorの背景はデフォルトで透明

Illustratorは、作業しやすいようにアートボードの背景がモニターに白で表示されていますが、実はデフォルトの設定では透明の背景です。以下の設定を行うと、透明グリッド(透明を示すグレーと白の市松模様に見えるグリッドのこと)が表示されます。ここでは、上の画像のような文字が切り抜かれたオブジェクトを使って説明します。

1.メニューバーから「透明グリット」を選択

画面上部にあるメニューバーから表示をクリックし、「透明グリッドを表示」を選択します。

2.アートボードの背景が透明グリットで表示される

上の画像のようにアートボードに透明グリッドが表示されるようになりました。

Illustratorで作成したオブジェクトを透過画像として出力する方法

Illustratorで作成した画像データは基本的に背景が透明だということは、これまでの説明でわかったと思いますが、印刷用のデータやWeb用のデータとして画像を保存・出力するときには注意が必要です。背景が透明な画像に対応しているファイル形式で保存しないと透過(背景を透明にすること)にならないからです。

以下のその出力方法を説明します。

1.メニューバーから「書き出し形式…」を選択

画面上部にあるメニューバーからファイルをクリックし、「書き出し」から「書き出し形式…」を選択します。

2.ファイル形式をPNGにして書き出し

「書き出し形式…」を選択すると、書き出しパネルが表示されます。このパネルで、ファイルの名前や保存先を設定し、ファイル形式をPNG(png)を選択し「書き出し」ボタンをクリックします。ここでは透過画像に対応しているPNGというファイル形式で保存します。

画像のファイル形式については、以下の表でおさらいしておきましょう。一般的に流通しているファイル形式で透過画像が扱えるのはPNGとGIFになります(近年、ロゴ画像などでよく使われているSVGというコードで記述された画像ファイル形式も透過画像に対応しています)。

  メリット デメリット
PNG
  • 透過画像が作成できる
  • GIFと同じ色数のPNG-8、フルカラー(約1670万色)を扱えるPNG-24、PNG-24に透過情報をもたせたPNG-32という3つのファイルタイプがある
  • 可逆圧縮なので画質が劣化しない
  • PNG-24やPNG-3は、データサイズが大きくなる
  • 古いブラウザでは対応していないものもある
  • JPG
  • フルカラー(約1670万色)を扱えるので、写真やグラデーションになどをきれいに表示できる
  • 高い画質を保ったまま圧縮をかけることができる
  • 非可逆圧縮なので、保存を繰り返すと画像が劣化する
  • 透過画像にできない
  • データサイズが重くなる
  • GIF
  • 透過画像が作成できる
  • データサイズが軽く、可逆圧縮なので画質が劣化しない
  • GIFアニメーションが作成できる
  • 色数が256色しか使えないので写真やグラデーションに不向き
  • 3.PNGオプションパネルで背景色を透明に設定

    「書き出し」ボタンをクリックすると、PNGオプションパネルが開くので、背景色を透明に設定して「OK」ボタンをクリックします。

    4.出力された画像が透過になっているか確認

    プレビューで出力された画像を開くと、上のように透過画像として出力されています。

    プレビューでは少し分かりづらいので、写真画像の上に作成した透過画像を配置してみましょう。上の画像のように、切り抜かれたテキスト部分がしっかりと透明になってることが確認できました。

    まとめ

    背景が透明な画像を作成する方法は、ハイクオリティな制作物を作成していく上では欠かせない知識・スキルです。基礎知識ではありますが、初学者が躓きやすいポイントでもあるので、本記事を参考に作成方法を覚えてしまいましょう。

    最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
    以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

    この記事がお役に立ちましたら、"いいね!"をお願いします
    minwebの最新情報をお届けします

    minweb編集部(株)セルリア

    ”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
    企画し実装まで支援する伴走型Webコンサルティング会社です。

    こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

    Googleサーチコンソール使い倒し活用術  <AOHON>

    ダウンロード資料画像

    Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。

    サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。