fireworksで幅100pxぴったりの囲み枠あり画像を作る

この記事について

つまずきポイント要約

• ストロークの囲み枠は元画像の外側に描かれる(100px画像+2px枠だと104pxになってしまう)
• ストローク1pxは画像に隠れて表示されない。描きたい幅+1pxで指定する

ホームページ作成をしていると、サイズを１px単位で指定して、画像を作りたいときがあります。

htmlのwidthやheightで出力時にリサイズすることもできますが、ブラウザによっては画像が潰れます。きれいに表示するには、作成時にぴったりサイズの画像を作るのが確実です。

今回は、fireworksでバナーをつくったのでメモしときます。

バナーの条件

・幅100pxちょうど
・バナーを2pxのボーダーで囲む。ボーダーを含めて100px

fireworksで囲み線をつくるときは、「ストローク」を使います。
100pxの画像を作りたいからといって、画像を100pxちょうどで作るとうまくいきません。
ストロークでつくる囲み枠は元画像に外側に描かれます。したがって100pxの画像を2pxのボーダーで囲うと、合計で104pxの画像になってしまいます。

100pxちょうどにするには、画像サイズを96pxに指定します。
その後、ストロークを3pxに指定すると、画像の左右に2pxずつボーダーが描かれてぴったり100pxとなります。

ストロークは1pxで指定すると、画像の後に隠れて表示されません。したがって、1pxのボーダーを描きたいなら、2px、2pxのボーダーを描きたいなら3pxと、1px分多く指定する必要があります。