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

.htaccessで「Redirect permanent」が使えない場合に「RewriteRule」を使ってリダイレクトする方法。

.htaccess でリダイレクトする場合、一般的に使うのはこんな↓書式だと思います。 Redirect permanent /old/ http://www.btmup.com/new/ 「/old …

no image

AdSense 管理画面に新しく追加された「カバレッジ」の意味。

最近、AdSense の管理画面がリニューアルしました。 というか、厳密には「しつつあります」ですかね。 変わったり戻ったりを繰り返してるので、どの時点で変わったか分かりづらいんですが。 もうそろそろ …

no image

ファーストサーバでCGIが「505 Internal Server Error」になる問題。

久々、ファーストサーバネタです。 まぁ別にファーストサーバが悪い訳ではないんですし、ここに限った話でもないんですけど、なぜか色々ややこしいことになることが多いもんで。 今回は CGI の設置方法につい …

no image

4 月 7 日(土)『「Web な人」大阪お話し会』開催のお知らせ。

Twitter やら Facebook やらで散々告知してるにも関わらず、ブログという手段をすっかり忘れてました。 という訳で、いきなりですが告知! 4 月 7 日(土)に『「Web な人」大阪お話し …

no image

最高の UX を提供する Web サイトやアプリを作るただ一つの方法。

とっても簡単なことです。 それは、ユーザーのことをちゃんと考えて作ること。 以上!