btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

Web制作全般

Illustrator から psd や jpg の画像に書き出すときにフチをきれいにする方法。

投稿日:

超常識のような気がしないでもないですけど、「困ってる人も居るはず!」ということで勇気を振り絞ってポスト。

Web サイトを作るためには、最終的には jpg なり png なりの画像にする必要があります。当たり前ですが。
最初から Photoshop を使ってれば問題ないんでしょうけど、手間とか慣れの関係で Illustrator や Fireworks でデザインすることも多い。
そうなると、デザインが完成した暁には、画像に書き出すという工程がある訳です。

ところが、その書き出した画像を見ると、フチがアンチエイリアスでボワッと膨らんでる感じになったり、そのせいでサイズが 1px ほど大きくなっている場合があります。


で、その原因はというと、書き出すときの Illustrator 側のオブジェクトの状態にあります。
(ここでは Illustrator を例に出してますが、確か Fireworks でも同じことが起こるはず。たぶん。未検証。すいません)
具体的には、オブジェクトの座標です。

何も考えずに置いてしまうと、小数点以下まで表示される感じのキリの悪い数値になりますね。
これが良くない。サイズまで誤差が出ちゃってるし。

こいつを、キリの良い数値(つまり整数)にしてやります。

で、同じように書き出してやると、

きれいに書き出せた! サイズも変わってない!

という訳です。至極単純。

ほんの一手間ですが、それによって結果も大きく変わっちゃうんですよねー。

しかし、今まで書き出すときに Illustrator で 1px 分小さくしてから書き出したり Photoshop でチマチマ調整していた苦労は一体……。
もっと早く知りたかった…………。







-Web制作全般
-, , , , , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

Google Analytics のトラッキングコードがちょっとだけ変更されていた。

Google Analyticsにプロファイルを追加したときに気が付いたのですが、トラッキングコードがビミョーに変わってますね。 ほとんど同じなんですが、2つめのスクリプトの中身がちょっとだけ書き替え …

no image

「Vitroperlo[ヴィトロペルロ]」というサイトを制作しました。

書こうかどうか迷ったんですが、やっぱり書いときます。 最近、ちょっと人に頼まれて Web サイトを制作しました。 »Vitroperlo[ヴィトロペルロ] 仕事ではなく、個人事業です。 事 …

no image

CSS Nite in OSAKA, Vol.17 に参加してきました。

7/18(土)に開催された「CSS Nite in OSAKA, Vol.17 powered by KAGOYA Internet Routing」に参加してきました。 参加というか、まぁ勉強ですね …

no image

Webサイト制作でよく出てくるコンテンツとそれによく使うディレクトリ・ファイル名の一覧

ディレクトリ名とかファイル名って、ちゃんとしようとすると意外に時間がかかるもの。 ページタイトルを直訳すれば良いってもんでもなく、いくつかある候補から内容に一番合った単語を見付けてこないといけない。 …

no image

.htaccess で gzip 圧縮してデータ転送量を少なくする方法。

メモ的エントリー。 タイトルのまんまです。 Web ページを表示するときには、まず HTML やら CSS やら JavaScript やら 画像やらをダウンロードする必要があります。 それら各ファイ …