2004.11.15

ボタンを作る Vol.1

Web で使用するボタン画像をきれいに作る場合は、直線部分にアンチエイリアスがかからないようにします。
「Photoshop」と「Illustrator」で以下の条件で作成、比べてみました。
10ピクセルのグリッド線にスナップ。
80×20ピクセルの赤い四角を作成。中に14ピクセルの白文字。
16色、ディザ無しの「.gif」に変換。

b_psd.gif

b_ai.gif


上が「Photoshop」、下が「Illustrator」です。この違いがわかりますか?

それでは拡大してみましょう。

b_psd_ai.gif

「Illustrator」は四角の周囲に薄い赤が入っているのでシャープさに欠けます。
「Illustrator」では単純に80×20ピクセルの四角を作成しても、「.gif」画像に書出す際にアンチエイリアスが効いて、81×21ピクセルの画像として切り取られます。
Web で使用する直線の多い単純な形の画像は「Photoshop」で作するのが良いようです。

次回は「Photoshop」で簡単なボタンの作成方法を書いてみたいと思います。

photo
hashimoto