イラレで背景が透明になる画像を作る方法

こんにちは、yoenです。

イラレで画像を書き出す方法は色々ありますが背景を透明に描き出せるものはそう多くありません。

現在はAdobeソフトの連携が優秀なので単純にコピペでいけてしまい背景を透明に書き出さなければと考える必要もあまりありません。

ですがクライアントからの要望などでバーツとして渡さなければならずその背景を透明にする場合もありますのでその方法を見ていきたいと思います。

それではいきましょう。

イラレで背景が透明になる画像を作る方法

今回は以下のオブジェクトを使います。

丸の中の白い部分と周りを透明に書き出していきます。

オブジェクトの余白はアートボードで制御します。

余白などが必要なければ余計な余白ができないようにアートボードをオブジェクトぴったりになるようにしましょう。

アートボードの調整方法は以下の記事を参照してください。簡単なので大丈夫ですよ。

以下の記事の目次からオブジェクトを動かさないでアートボードのセンターに配置に飛んでください。

それでは早速書き出していきます。

Web用に保存

書き出し方法は色々ありますが、今回はファイル→書き出し→Web用に保存（従来）を使って説明していきますね。ショートカットは⌘+option+shift+Sです。

書き出す画像形式を選べますが背景が透明になるのはGIFとPNGの2種類です。

プレビュー内で背景がグレーと白のチェック模様になっていたら背景は透明です。Photoshopと同じですね。

背景を透明にしない方法

逆に背景を白にしたい場合を説明します。

答えは簡単で白のオブジェクトを作ることです。以下はオレンジの丸の中の塗りを白に設定して書き出したものです。

まとめ

このように書き出した画像はwebに使われたり他の要素と組み合わせて使ったりと用途は色々あります。

ですが初めにも書きましたが個人の作業に関してはAdobe間の連携はほぼコピペで済んでしまいますのであまり書き出しを使う機会はないでしょう。

この間はイラレからインデザインにテキストの書式を保持したままのコピペもサポートされましたしね。

ですが、データ納品という意味ではまだまだ需要がありそうですので活用してください。

それでは、よきデザインライフを