イラレ(Illustrator)で画像の背景を透過させる方法を知りたい
この記事は上記の課題に向けて作成しています。
イラレで書き出した画像の背景が透過されていないことがあると思います。
実はイラレで画像の背景を透過させるのは簡単です。
この記事ではイラレで背景を透過させて画像を書き出す方法を紹介します。
この記事を読むメリット
- イラレで書き出す画像の背景を透過させる方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
Figmaで背景を透過させる方法も紹介しています。
イラレの画面は背景透明？
イラレのアートボードを見ると背景が白くなっていますよね。
しかし実際の背景色は透明なのです。
※アートボードの背景が白くなっているのは使用者が作業しやすくするためです。ですが実際の背景色は透明です。
「透明グリッド」という機能を使うことで背景が透明だとわかります。
透明グリッドの使用方法
メニューバーの「表示」→「透明グリッドを表示」を選択します。
するとアートボードの背景が透明になります。
透明のグリッドを使用することで画像が透過されているか確認出来ます。
イラレで画像の背景を透過させて書き出す方法
では実際にイラレで背景を透過させた画像を書き出す方法を紹介します。
イラレで背景が透過された画像を書き出す手順
- 「書き出し形式」を選択する
- ファイル形式で「PNG」または「WebP」を選択する
- オプションを設定する
「書き出し形式」を選択する
まず始めに「書き出し形式」を選択します。
画像を選択した状態で「ファイル」→「書き出し」から「書き出し形式」を選択します。
ファイル形式で「PNG」または「WebP」を選択する
続いてファイル形式から「PNG」または「WebP」を選択します。
※他にもJPGやSVGなどありますが、背景を透過するにはPNGまたはWebPとなります。
オプションを設定する
最後に書き出しのオプションを選択します。
PNGのオプション
PNGのオプションは下記のように設定してください。
- 解像度：「スクリーン(72ppi)」
- web制作では解像度は72ppiで設定します。ちなみに印刷物の場合は300ppiを選択します。
- アンチエイリアス：「アートに最適(スーパーサンプリング)」
- 画像のエッヂを滑らかにする機能です。
- 背景色：「透明」
WebPのオプション
WebPのオプションもPNGと同様に設定してください。
書き出された画像を確認して背景が透過されていたら完成です。
背景が透過されない原因
設定を間違えると背景が透過されません。
背景が透過されない原因
- JPEGなど異なる拡張子を選択している
- 画像の背景に白色の図形が含まれている
JPEGなど異なる拡張子を選択している
JPEGなど異なる拡張子を選択していると透過されません。
JPEG自体はweb制作では頻繁に使用します。
しかしJPEGには背景を透過させる機能が備わっていません。
そのため透過させたいのであればPNGやWebPで書き出してください。
画像の背景に白色の図形が含まれている
画像の背景に白色の図形が含まれていると透過されません。
アートボードが白色なので、同色の図形が含まれていても中々気づけません。
「透明グリッド」を使って透過されているか確認してください。
イラレで背景を透過するのは簡単
この記事ではイラレで画像の背景を透過する方法を紹介しました。
書き出す画像の背景を透過することは簡単です。
知らなかった方は是非やってみてください。