HOME -> ソフトウェア -> FireWorks -> 透明感のあるBOX

透明感のあるBOX

 Web2.0のデザイン風という感じでパーツを作成してみたいと思います。 まずは、ヤフーの検索文字入力の背景等に使用されている透明感のあるBOXを作成してみたいと思います。

 ドキュメントの大きさ等は任意で結構ですが、ここではとりあえず 500px , 500px として作成しています。  次に矩形を設置します。 幅400px、高80pxとして、角丸の半径を10とします。 これにより長細く角が丸い矩形が出来上がります。 矩形からだけでなく、ツールバーから直接「角丸矩形」で作成することもできます。  次に塗りつぶし色を設定します。 色の横のセレクトバーが基本になっていると思いますが、これを「グラデーション」の「線形」に変更します。 次に色をクリックしてグラデーション色を設定します。 #DDFFFFから#FFFFFFにグラデーションするように設定します。 もしグラデーション方向が間違っている場合は選択ツールで矩形を選択し、表示される「グラデーション方向バー」を動かして希望の位置にもって行きます。丸が位置、四角が方向になります。
 外郭線の設定ですが、色に#66CCFFを指定します。  最後にうすくグローを追加してみましょう。
「フィルタ」の「グローとシャドウ」から色#6699cc、幅0、柔らかさ5、オフセット0、透明度65% として完成です。  周囲の余分な余白が気になる場合はメニューの「修正」>「キャンバス」>「キャンバスをフィット」によって余分な余白部分を省いておきます。  色の設定などはサイトのイメージ等にあわせて変更をおこなうとよいでしょう。


2008年 11月 3日ドキュメント作成
2008年 11月 3日ドキュメント更新