Fireworksでよく使う小技
とみながです。
今日は資料も何も届かず、特にする仕事もないので、このサイトのリニューアル用のカンプをがーっと作りました。
今のもそうなんだけど、私はWeb用のデザインは全部Fireworksで作っていて、今はCS3を使っています。
Photoshopと比べると美しくないとよく言われますが、工夫次第ではかなり良い感じに使えるのでは‥‥と思うのですが。現行バージョンだとテキストのアンチエイリアスがあまりキレイじゃないかなーと思うぐらいで、フィルタ関係は使い方を工夫すれば大丈夫です。
Fireworksでうまく影をつける
よくやるのが、ぼかしをフィルタでやらないで、ぼかしをつけたいオブジェクトを複製し、背面に配置してエッジをぼかす方法。
これはあれこれ試行錯誤して、どうやったらPhotoshopの「光彩（外側）」に近づけるかと考えて、結果的にこの方法になりました。
わかりにくいので図を作ってみました。
すごく単純な方法なのですが、なぜかよく質問されます、これ。
FWってそもそもPhotoshopとは違うソフトなので、同じエフェクトかけても、同じ見た目にはならないんだよねー‥‥。
上に書いたのは基本的な方法で、場合によっては、影の部分を変形したり、マスクをかけたりしています。
Fireworksで文字をきれいにハッキリさせる
あと、最近よくやるようにしているのが、これのテキスト版みたいのです。
文字をベタ打ちするだけじゃなく、下に少し濃い目の色を敷いたほうが、視認性が良く、ボタン画像なんかだときれいに仕上がる。ような気がする。
ちょっと右と左の差異が少なくて、一見わかりにくいですが、左のほうは、
- submitというテキストを複製し
- 濃い色（背景色を濃くした色）にして
- ぼかし（ガウス）を幅2～3pxぐらいでかけて
- 見せたい文字（白色）の下に敷いています
白い文字と重ねて見ると、若干濃いめのグローがかかっているように見えますが、文字に直接フィルタでグローを設定するよりずっときれいだと思います。
Fireworksって、Photoshopみたいにチュートリアルも沢山公開されているわけじゃないし、デザイン作業についての本もあまり無いし、本格的に使い始めてから4年ぐらい経過しますが、リソースが少なくて、最初は非常に苦労しました。
もうちょっと、ノウハウの共有みたいのがあったらいいよねぇ。
この前は外国のチュートリアルサイトを参考にしたので、今日は自分がよく使う小技を書いておきます。他によくやるちょっとした方法がある人は、教えてください。
おまけ。
これからFW使う人に。
Trackback URL :
最近のエントリー
カテゴリー
トラックバック
- location
- Sapporo, Japan
- job
- Webデザイナー、コーダー
- 趣味
- 写真と猫
札幌でフリーランスのWebデザイナーをしています。このブログは、主に日常の出来事とWeb制作に関するメモを書いています。
