+10%ウキウキ生活

せっけん作り、ホームベーカリー、アルカリ洗濯、風水、家庭菜園、仕事、子育て・・・
ちょっとだけ生活を楽しくしたい主婦の試行錯誤の記録です。


Archive for the 'パソコン・ソフトのカスタマイズ' Category

2010 年 1 月 20 日

カテゴリー: パソコン・ソフトのカスタマイズ |

なんていうの?WEB2.0っぽい半分半分グラデのボタン

こういうボタンよくあるじゃないですか。
WEB2.0風っていうんでしょうか(WEB2.0ってまだ生きてるのかな・・・)

WEB2.0風のボタン
毎回色合いがうまくいかずに、なんだかんだ時間かかったりして作るの苦労してたんですが、Fireworks CS3ですんごく簡単に作れる方法を見つけちゃいました。
(今まではどっかのサイトにあるやつを参考にもってきて、スポイトで何箇所もとりながらやってたんですけどね^^;)
すでに知っている人いたら、戯言なんで、無視したってください(笑)

【作り方】

(1)四角を描く。塗りはとりあえず「基本」でOK。最初からグラデーションになってたら(2)からはじめる。

塗りをグラデーション「線形」にする
(2)塗りをグラデーション「線形」にする。とりあえず色は何でもいい。今回の場合、グラデーションの方向は上→下という方向で。

グラデーションの中間を2箇所クリックする
(3)グラデーションの両側の色を感じのグラデーションになるように決める。上を濃い色、下を淡い色にする。

上を濃い色、下を淡い色にする
(4)グラデーションの中間を2箇所クリックする(画像のように)。クリックすると自動で色が決定されて2箇所にマーカーがつく。色を選ぶ必要は無い。
マーカーの感覚によって少しづつグラデーションの具合が変わるので、その辺はお好みで。
はっきり境界線を出したい場合は、上の画像くらい開け、はっきりしすぎないように境界線を出したい場合は下の画像くらいに。

グラデーションの中間を2箇所クリックする
(5)右端と左端のマーカーを入れ替える。(画像の赤丸)

右端と左端のマーカーを入れ替える
(6)真ん中二つのマーカーが重なるくらいに寄せ、ちょうど境界線がはっきり出るところでとめたら出来上がり。

境界線がはっきり出るところでとめたら出来上がり
今まで1個のボタン作るのに何分もかかってたのだけど、1分もかからずできあがりました!
なんでもっとこの方法を見つけれなかったんだろう;
もう参考にする画像無くてもいけちゃいます!

早く次のデザインの仕事こねえかな(笑)

ちなみに参考。
グラデーションの作業を楽チンにするエクステンション「Fireworks Gradient Panel」。
グラデーションの方向は、Fireworksのデフォルトでは、なにやら棒(笑)の方向を動かして変えるしかなかったんですが、コレはワンクリックで縦方向・横方向を入れ替えることができます。
一応、Windows版MX・8・CS3では動作確認済み。

Fireworks Gradient Panel
難点としては、このエクステンションのウィンドウを開いた状態だと、テキストツールが正しく動かないっつうこと。
使い終わったら、さっさと「Fireworks Gradient Panel」のウィンドウは閉じてしまうこと。
エクステンションの中にはテキストツールに不具合(?)が出るものがいくつかある。
これもそのひとつ。

[Ohter List]

タグ: , , ,

コメントをどうぞ

2010 年 9 月
« 8 月    
 12345
6789101112
13141516171819
20212223242526
27282930  

手作りせっけんRing

手作りせっけんをしている方のWEBリングです。趣味として作られている方、ソーパー仲間を増やしましょう^^

次へ 前へ ランダム 一覧 参加


(c)Plus10%Uukiuki Life