[Fireworks]線つき矩形の角丸をキレイに見せる方法

  • あとで読みたい人は…

こんばんは、@cappeeです。

Fireworksで角丸のボタンをデザインするときに、外側に線を引いて、更に内側に1pxの線を引きたい場合のお話。

結論から言うと、一番外側の線を「内側」もしくは「中央」指定にすると角丸がジャギってしまうんです。①だけジャギっているのわかりますか?

kadomaru [Fireworks]線つき矩形の角丸をキレイに見せる方法

わかりやすいように拡大。

kadomaru2 [Fireworks]線つき矩形の角丸をキレイに見せる方法

こういうボタンを作りたい場合の一番角丸がキレイで簡単な方法は、

  1. 作りたいボタンのサイズから-2pxした矩形を作成。
  2. 一番外側の濃い線は「外側」指定してカラーを選択。
  3. 同じ矩形を複製して薄い線を「内側」指定して中にグラデーションをかける。

という具合です!

「Photoshopライブ効果」を使った方法

線を指定するには上記以外にも「Photoshopライブ効果」を使った方法もあります。「Photoshopライブ効果」の「線」の「内側」は角丸がキレイに表示されるのでこちらでも線分の幅を調整しなくてもいいので便利です。だた、上記のように二重線を引きたい場合は、「Photoshopライブ効果」の「外側」と通常の線の「内側」を指定する必要がありますが、矩形を複製せずに簡単にできるので追加でご紹介します。(2012.12.17追記)

  1. 作りたいボタンのサイズから-2pxした矩形を作成。
  2. 一番外側の濃い線は「Photoshopライブ効果」の「線」の「外側」指定してカラーを選択。
  3. 薄い線は通常の線の「内側」を指定して中にグラデーションをかける。

ちなみに、線自体にグラデーションがかけられる機能Fireworksにも早くほしいですよね。IllustratorにはCS6から新機能としてあるみたいですけどっ。

Pocket
article clipper [Fireworks]線つき矩形の角丸をキレイに見せる方法

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>