イラストレーターで書き出しの方法をお探しですね。
広告
Illustratorで作ったデザインをキレイに画像化しよう!JPEGとPNGの書き出し完全ガイド
Illustratorで作ったデザインをJPEGやPNGで保存したとき、「なんか画像が粗い…」「背景が透明にならなくて白くなっちゃった…」って困ったことありませんか?実は、書き出すときの設定をちょっと変えるだけで、びっくりするくらいキレイな画像が作れるんです。
この記事では、IllustratorからJPEGやPNGをキレイに書き出す方法を、初心者の方にもわかりやすく解説していきます。
背景を透明にする方法や、必要な部分だけを切り出す方法など、つまずきやすいポイントもしっかりカバーしますよ!
まず知っておきたい!JPEGとPNGの違いと書き出し機能の選び方
Illustratorで作ったデザインを画像にするとき、まず「JPEGとPNG、どっちで保存すればいいの?」って迷いますよね。
この2つ、実は得意なことが全然違うんです。
**JPEGとPNGの一番大きな違い**は、「背景を透明にできるかどうか」です。
JPEGは写真みたいに色がたくさん使われている画像を小さいサイズで保存するのが得意ですが、背景を透明にすることはできません。
必ず何かしらの色(たいてい白)で塗りつぶされちゃいます。
一方、**PNGは背景を透明にして保存できる**のが最大の特徴!だから、ロゴやアイコン、Webサイトに貼る素材なんかはPNGで保存するのがおすすめです。
しかも、はっきりした線で描かれたイラストの場合、PNGの方がJPEGよりもキレイに見えることが多いんですよ。
どの書き出し機能を使えばいいの?
Illustratorには画像を書き出す機能がいくつかあって、最初はちょっと混乱するかもしれません。
でも、覚えておきたいのは主に2つだけです。
**「スクリーン用に書き出し」**は、WebサイトやSNS用の画像を作るときにすごく便利な機能です。
複数のサイズやフォーマット(JPEGとPNGなど)を一度にまとめて書き出せるので、作業がとってもスムーズになります。
操作も直感的でわかりやすいので、普段使いならこっちがおすすめ。
**「書き出し形式」**は、解像度や色の設定を細かくいじりたいときに使います。
1枚の画像をじっくり設定して書き出したいときはこちらを選びましょう。
基本的には「スクリーン用に書き出し」を使っておけば間違いありません!
用途に合わせた解像度とアンチエイリアスの設定方法
「書き出した画像がなんかぼやけてる…」「線がギザギザしてる…」そんなときは、解像度とアンチエイリアスの設定を見直してみましょう。
ここを押さえておけば、グッと画質が良くなりますよ!
解像度(ppi)はどれくらいに設定すればいい?
**WebサイトやSNSで使う画像なら、基本は72ppi**でOKです。
でも、最近のスマホやRetinaディスプレイみたいな高画質な画面だと、72ppiだとちょっとぼやけて見えちゃうことがあるんです。
そんなときは、こんな工夫をしてみてください:
– 最初からアートボードのサイズを2倍で作っておく
– 書き出すときの解像度を150ppiくらいに上げる
– 「スクリーン用に書き出し」でスケールを「2x(2倍)」に設定する
**印刷物を作るときは、もっと高い解像度が必要**です。
一般的には300ppi以上に設定しましょう。
チラシやポスターなど、紙に印刷するものは解像度が低いとすごく粗く見えてしまうので要注意です!
アンチエイリアスって何?どう設定すればいい?
アンチエイリアスは、文字や線のギザギザを滑らかに見せてくれる機能です。
Illustratorには3種類の設定があります:
**「文字に最適」** → 文字がたくさん入ったバナーやインフォグラフィックを作るときに選びましょう。
文字がくっきり読みやすくなります。
**「アートに最適」** → イラストや図形メインのデザインならこれ!曲線が滑らかでキレイに仕上がります。
迷ったらこれを選んでおけば間違いなしです。
**「なし」** → わざとドット絵みたいなカクカクした感じを出したいとき以外は使いません。
普通のデザインなら「アートに最適」、文字をしっかり見せたいなら「文字に最適」と覚えておけばバッチリです!
PNGで背景を透明にする方法と失敗しないコツ
ロゴやキャラクターのイラストをWebサイトに載せるとき、背景が透明じゃないと使いにくいですよね。
ここでは、背景を透明にしたPNG画像の作り方を説明します。
大前提:透明にしたいならPNG一択!
まず覚えておいてほしいのは、**背景を透明にしたいときは必ずPNGで保存する**ということ。
JPEGは仕組み上、透明な部分を持てないので、どうやっても背景が白(または他の色)で塗りつぶされてしまいます。
「書き出し形式」で透明にする方法
1. 「ファイル」→「書き出し」→「書き出し形式」を選ぶ
2. ファイル形式で「PNG」を選択して保存ボタンを押す
3. PNGオプションの画面が出てくるので、**「背景色」の項目を必ず「透明」に設定**する
4. OKを押せば完成!
ここで背景色が「白」や「黒」になっていると透明にならないので、必ずチェックしてくださいね。
「スクリーン用に書き出し」で透明にする方法
こっちの方法はもっと簡単です!
1. 「ファイル」→「書き出し」→「スクリーン用に書き出し」を選ぶ
2. フォーマットで「PNG」を選ぶ
3. 基本的にはこれだけで背景が透明になります!
もし背景が白くなってしまったら、フォーマットの横にある歯車マーク(設定)を押して、背景色の設定を確認してみてください。
透明になったか確認する方法
書き出した後は、**必ず画像をブラウザや画像ビューアで開いて確認**しましょう。
透明な部分が本当に透明になっているかチェックするのが大事です。
Photoshopなどの画像編集ソフトで開くと、透明な部分が市松模様(チェッカーボード)で表示されるのでわかりやすいですよ。
必要な部分だけを切り出して書き出す方法
「このロゴだけ書き出したいのに、余白がたくさん入っちゃう…」「複数のデザイン案の中から1つだけ画像にしたい…」そんなときに使える、範囲を指定して書き出す方法を紹介します!
アートボードごとに書き出す方法
一番基本的なのは、**アートボードの範囲で切り取って書き出す**方法です。
1. 「書き出し形式」を開く
2. 画面の下の方にある**「アートボードごとに作成」にチェックを入れる**
3. 特定のアートボードだけ書き出したいときは、「範囲」を選んで番号を入力(例:「1」とか「1-3」とか)
このチェックを忘れると、アートボードの外にはみ出してるものや、作業中の不要なデータまで全部入った巨大な画像になっちゃうので気をつけてください!
特定のオブジェクトだけを書き出す方法
アートボードの余白を無視して、**オブジェクトのサイズぴったりで書き出したい**ときは「アセットの書き出し」パネルが便利です。
1. 書き出したいオブジェクト(図形やテキストなど)を選択ツールでクリック
2. 「ウィンドウ」メニューから「アセットの書き出し」パネルを開く
3. 選択したオブジェクトをパネルの中にドラッグ&ドロップ
4. 形式(JPEGかPNG)を選んで書き出しボタンを押す
この方法なら、ボタンやアイコンみたいな小さなパーツを1個ずつキレイに切り出せます。
Web制作でパーツをたくさん書き出すときは、この機能を使うとめちゃくちゃ時短になりますよ!
まとめ
いかがでしたか?最初はちょっと複雑に感じるかもしれませんが、何回かやってみるとすぐに慣れます。
用途に合わせてJPEGとPNGを使い分けて、キレイな画像をバンバン作っちゃいましょう!
広告
