「選択範囲の書き出し」について

[Takahiro_M]

「選択範囲を書き出し」を行うと、自動的にビットマップ画像になってしまうのですが、なぜでしょうか？

書き出そうとしているものはアウトライン化したロゴタイプで、さほど複雑なものでも、大きなデータでもありません。

[Yamonov]

「形式」にビットマップファイル形式のPNGを選んでいるからです。

SVGやPDFを選べばベクターで書き出せます。が、見たままで書き出せる保障はありません。

ビットマップにしないで書き出したい理由はなんでしょう？（これが大事かなと思いますので回答お願いします。

[Takahiro_M]

ご回答、ありがとうございます。

ビットマップだと画質が粗くなってしまうからです。

また、背景を透過した状態で書き出しをしたいので、pngを選んでいました。

[Takahiro_M]

Yamo74様

自分でも色々調べてみたのですが、背景を透過した状態で、

ベクター形式を保ったままオブジェクトを書き出す方法はないという理解に至りました。

もし何かあれば、追加でアドバイスいただければ幸いです。

[Yamonov]

書き出しメニューを使用し、背景を透過したい…ということは、WEBで使われるのですよね？

書類を別名保存しておき、

• ファイル＞ドキュメントのカラーモードをRGBに変更
• 編集＞プロファイルの指定で「sRGB IEC61966-2.1」を選択
• ファイル＞ドキュメント設定で「単位」をピクセルに変更
• アートボードサイズをWEBで使用するサイズに変更
• 表示＞ピクセルプレビューをオンにする
• オプションバーのピクセルスナップオプションを表示して全てチェックオン↓

ここまでやっておいて、ピクセルになっている様子を確認しながらロゴサイズをうまく調整すれば良いかと。

書き出し時に、今72ppiとなっているところに1と入れれば72、2と入れればRetina対応の２倍サイズでpng書き出しできます。

※もっと簡単にできる方法もあると思いますが、きっちりプレビューしながら作れる方が良いかと。

[Takahiro_M]

丁寧なご説明、ありがとうございます。

はい、webサイト制作の一環としてロゴタイプ を作成する過程での質問でした。

試行錯誤する中で、書き出しの際の解像度を高めに設定することで、改善されました。

ご提示いただいた手順も試してみたのですが、

「表示＞ピクセルプレビューをオンにする」の時点で画像がかなり荒れてしまい（※）、

「オプションバーのピクセルスナップオプション」も見つけられませんでした。

※部分について、illustratorで編集している時点で画像が荒れてしまうということは、

書き出し以前の問題なのでしょうか？

編集部分はW:33px、H:15px程度で小さめではありますが。。

[Yamonov · Accepted solution]

最終的に欲しいサイズは33×15なんですよね。

解像度を高めにして書き出された画像を開いてみてください。33px*15pxではなくなっているはずです。

ピクセルプレビューは、その名の通りでラスタライズされた状態をプレビューするものです。ですので、書き出し以前に、

・最終的な画像サイズが小さすぎる

または

・求めている画像サイズに対してデザインが細かすぎる

のだと思います。

[Takahiro_M]

解像度を高めにして書き出した画像、サイズが大きくなっていました。

つくった画像のサイズが小さすぎたのですね。

色々とご教示いただき、ありがとうございました。

[kawacoco]

背景を透過した状態で、ベクター形式を保ったままオブジェクトを書き出すのであればsvg形式でかき出してください。

以下が、33x15px 、SVG形式、背景透過でかき出しをしたサンプルです。
Dropbox - test.svg

ただ、＠Takahiro_M  さんはおそらくWeb用の画像の形式や解像度について理解がないと思うので、そのあたりもう一度調べてみたほうがいいのではないでしょうか。

33x15pxは原寸表示だとかなり小さいのでラスター（ビットマップ）画像にすればだいたい荒れます。ロゴなどは現状ではスマホや高精細ディスプレイ対策としてはx2やx4など大きくかき出して縮小表示するなどの対応をする場合が多いです。
SVGはブラウザによって対応していないものやアス比が変わるものなどもあるので、採用にあたってはそのあたりの事情を考慮して最適な画像形式を選ぶようにしてください。

[Takahiro_M]

kawacoco様

ご回答、ありがとうございます。

背景を透過した状態でSVG形式での書き出し、できました。

こちらで質問させていただく前に独学できることがまだあったようで、失礼しました。

画像の形式や解像度について、基本的なところをきちんとさらいたいと思います。