クリエイター入門

背景透過PNG画像をIllustratorで書き出す方法!

Illustrator(イラストレーター)で作成したデータの背景を透明にして書き出す方法をご紹介します!LINEスタンプの作成にも必要なテクニックですし、WEB素材の作成にも使用されることも多いので、まだ知らない方はぜひ覚えておきましょう!

背景透過画像とは?

背景透過画像とは、上の画像のようにオブジェクト(今回はパソコン)の背景が「白」ではなく「透明」になっている状態です。グレーと白の市松模様が「透明」の意味です。

もし背景透過画像ではない画像をWEBや紙面のデザインに入れようとするとこのように背景に白い四角が出てしまったり、文字をすぐ横に入れたい時に困ったことになります。

背景透過画像であればこのように綺麗に配置することができます。

このパソコンのオブジェクトごとIllustratorデータで扱えれば問題はないのですが、WEBなどIllustratorデータを直接アップロードできない際には背景が透明になったPNG画像に書き出す必要があります。

PNG画像って何?という方は以下の記事をご覧ください。

IllustratorでのPNG画像の書き出しかた

書き出したいIllustratorオブジェクトが完成したら「ファイル」→「書き出し」→「Web用に保存」選択してください。

右上の「プリセット」の「名前:」を「PNG-24」にします。

「透明部分」にチェックを入れます。

右横の「アートボードサイズでクリップ」にチェックが入っているとアートボードのサイズの余白ができます。

アートボードサイズの余白が不要の場合は「アートボードサイズでクリップ」のチェックを外すと画像ぴったりの背景透過画像が書き出すことができます。

最後に、一番下にある保存を選択します。

これで書き出しは完了です!

このような手順でIllustratorのオブジェクトを背景透過画像に書き出すことができました!

LINEスタンプの作成や、WEB素材の作成、ロゴデータの納品などにも使用されることが多いので、ぜひ抑えておきましょう!

それでは、背景透過画像の作り方をマスターして、クリエイターとしての新しい一歩を踏み出しましょう!

関連記事

  1. 制作ツール

    アトリエ整理整頓におすすめ!バンカーズボックスのご紹介!

    アトリエや作業部屋の整理整頓ってなかなか難しいですよね。配置変えのこ…

  2. イベント出展・展示

    イベント出展!気になる4大イベント出展費比較!

    はじめてのイベント出展!イベントの傾向と選び方!こちらの記事…

  3. Ambiance Paper

    制作ツール

    通販用の商品撮影に最適!小物撮影用の背景紙Ambiance Paperで快適な撮影を

    通販商品の撮影や、SNS用の写真撮影で背景に悩むことはありま…

  4. クリエイター入門

    必読!クリエイターの教科書!『「好き」を仕事にする自分ブランドのつくりかた』

    好きなことを仕事にしたい、自分で作った物を売りたい、ブランドとして成…

  5. クリエイター入門

    RGBとCMKYの違いとは?

    IllustratorとPhotoshopで何かを作成する時に、必ず…

  6. クリエイター入門

    解像度って何だろう?画像の基本を学ぼう!

    画像を扱っていると「解像度」という言葉が出てきますよね。「dpi」と…

スポンサーリンク

CREMAGAとは

これからクリエイターになる人のためのWEBマガジン CREMAGA(クリマガ)。日々のスキマ時間にサクッと読める記事を掲載します。 人に聞きにくいすごく初歩的なことから、クリエイターのリアルな気持ちまで。

CREMAGAライター

渡部学/クリエイター
2015年 株式会社ワンダーマーク設立。​2022年現在「もにまるず」「Ambiance Paper」「TRFG」などオリジナルブランドの運営をしながら、グラフィックデザイン・WEBデザイン・Udemy講師などをしています。武蔵野美術大学 視覚伝達デザイン学科 2010年度卒。
https://www.watabemanabu.com/

最近の記事

  1. 通販用の商品撮影に最適!小物撮影用の背景紙Ambiance …
  2. ラフスケッチ専用ノート「Roughly (ラフリー)」で快適…
  3. Illustrator(イラストレーター)傾いたオブジェクト…
  4. Illustrator(イラストレーター)で共通オブジェクト…
  5. 一枚からオリジナルTシャツを制作!!ショップ制作も簡単な「p…

スポンサーリンク

  1. 制作ツール

    デザインアプリ「Canva」がすごい!! SNS用画像作成から名刺・フライヤー制…
  2. 傾いたオブジェクトを戻す方法

    制作ツール

    Illustrator(イラストレーター)傾いたオブジェクトを正確な水平に戻す方…
  3. アプリの画像

    制作ツール

    アプリでも見ることができるグラフィック系おすすめサイト3選!!
  4. Hotcorner

    制作ツール

    Macの「ホットコーナー」の設定で作業効率UP!!一瞬でデスクトップに移動できる…
  5. クリエイター入門

    一冊は持っておきたい!紙の種類と厚さがわかる紙見本帳!
PAGE TOP