ホームページ作成をしていると、サイズを１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分多く指定する必要があります。
