to pagetop
:)
spec5zigen Creator's Lab.

    Fireworksのココのココを、もう少しナントカしたい… 小技のメモ

  • 2012.11.20
  • ,

滑らか綺麗な円を描きたい

Fireworksで円を描くと(特に小さな円)、4つの点部分(※図を参照)が滑らかな曲線を描かないことで綺麗な円を描けていません。直線になってしまいます。

滑らか綺麗な円を描く


そこで解決方法:

① 円を描く(ここでは直径50px)。
② 変更 > 数値を入力して変形 > 「拡大・縮小」で縦横比保持にチェックをし、99%に縮小する。

滑らか綺麗な円を描く



③ すると気になっていた部分のピクセルがぼけて、滑らかな曲線に見えるようになります。

Fireworksで滑らか綺麗な円を描くチュートリアルtutorial

ちなみに円が大きくなればなるほど99%の縮小でも円の直径はピクセル単位で縮小されてしまいます。
ピクセルに厳密なデザイン時に、大きな円にこの方法を使うときは注意したほうがいいかも。小さいほど威力を発揮します!

切れ目のない自然なドロップシャドウを敷きたい

Fireworksのフィルタ>ドロップシャドウは徐々に透明になっていく過程でぶつっと切れたような見え方がとても気になります。
というか問題です。まったく美しくありません!涙

自然で綺麗なドロップシャドウを敷く


そこで解決方法:
① ドロップシャドウをかけたいオブジェクトをコピーし黒く塗りつぶす。
② 黒く塗りつぶしたオブジェクトを、エッジをぼかす>20 ほどぼかす。
③ ドロップシャドウをかけたいオブジェクトの下に敷く。必要であれば透明度を調整する。

自然で綺麗なドロップシャドウを敷く


自然で綺麗なドロップシャドウを敷く


左がそのままドロップシャドウをかけたもので、右が一手間加えたもの(黒の塗りつぶした矩形は透明度を80%にしました)。矩形の角の影も自然に見えます。

異なるフォントにかんたんに同じ視覚効果をつけたい

異なるフォントに同じ視覚効果を与えようとすると(フォントをコピーして右クリック>編集>属性をペースト)コピーしたフォントの属性までもう一方のフォントにペーストされてしまいます。
またフォントを選び直すのも手間だし、カーニングなど整えた後などは2度手間になってしまう…

そんなときの解決方法:
① フォントをコピーする。
② 適当な矩形を作成。その矩形にコピーした効果を編集>属性をペースト
③ 矩形をコピー。同じ効果を与えたいフォントに編集>属性をペースト

異なるフォントにかんたんに同じ効果をつける


すると、異なるフォントにそれぞれのフォント情報を保ったまま同じ視覚効果を与えることができます。地味に時短、塵も積もれば…です。

三角形の頂点を正確に1辺の中央(1pxの中央)に移動させたい

ボタンの頭やリストマークなどに使用することの多い小さな三角形を簡単にきれいに作成したいときには画素数が奇数のほうがよりするどい三角形になります。

9

けれど、奇数の場合、頂点をピクセルの間に持ってこなければならなく、正確な0.5pxという場所にポイントを移動するのは難しいし手間もかかる…

そんなときの解決方法:
① 一辺が奇数の正方形をつくる。
② 正方形の右下のポイントを削除。
③ 左下のポイントだけをダイレクト選択ツールでもつ。

三角形の頂点を正確に1辺の中央(1pxの中央)にもってくる方法


④ パスパネルのポイントを編集>ポイントを変形でこのポイントを奇数辺の中央に移動させる。今回は99pxの正方形だったのでX軸に対して「49.5」と入力。

1_1


1_2


そうすると、99pxの辺に対して、ちょうどど真ん中の49.5pxという場所に頂点が移動し、するどく綺麗な三角形がつくれます。あとは微調整。

1_3


こんな感じで1秒でも早く手を動かして、よりいいものを作れるように日々昇進していきたいと思います!汗