FireworksマニアTOP > Fireworksベーシック,ダウンロード > くぼんだような表現ができる14色のボタン&角丸長方形活用術【スタイルダウンロードつき】

くぼんだような表現ができる14色のボタン&角丸長方形活用術【スタイルダウンロードつき】

カテゴリー: Fireworksベーシック,ダウンロード

みなさんはFireworksでボタンを作る時、どのように作っていますか?

2つのオブジェクトを重ねて様々な質感を出したりすることも多いと思うのですが、
シンプルなボタンならボタンのベースはできるだけ1オブジェクトで作っておくと、
サイズ変更があったときもあっという間でラクチンですよね♪

 

今回はあると便利なカラフルなボタンスタイルを用意してみました。

シンプルなので、モックアップ作成のときなどにも便利ですよ♪

 

 

ボタンスタイル&サンプルのダウンロードはこちらから

サンプルファイルとスタイルファイルのダウンロードはこちらからどうぞ

スタイルファイルの使い方がわからない方はこちらのエントリーを参考にどうそ

 

 

色相・彩度の調整を使えばもっと作れるカラーバリエーション

また、モノクロでベースを作って、
フィルタメニューの色相・彩度でカラーバリエーションを作っていますので
これ以外のカラーも簡単に作れます。

初心者のうちは単色系のグラデーションを作る時、
例えば薄いブルーと濃いブルーの色選びが難しく、
違和感のあるグラデーションしか作れない場合がありますが

この方法でモノクロのボタンからカラーカラーバリエーションを作れば
だれでも確実にきれいなカラーグラデーションが作れます。

色相・彩度の変更を使ってのカラーバリエーションの作り方はこちらをどうぞ

 

角丸長方形ツール活用術

ベースの形ですが、サンプルファイルではすべて
【角丸長方形】のオートシェイプで描いています。
リサイズも楽々です。

ちなみに角丸長方形ツールは、
四隅の黄色のポイントをクリックすると形状が変えられるので
かなりいろいろなバリエーションが作れます。

ドラッグすると丸みなどの値が変更でき、クリックすると形状が変更できます。

またShiftキーを押しながら四隅のどれでもよいので一度クリックすると、4隅の関連のロックが解除され、
それぞれ四隅をバラバラに変更できます。

もういちどShiftキーを押しながら四隅のどれでもよいので一度クリックすると、4隅が同時に変更できるようになります。

サンプルファイルのようにいろいろな形が簡単に作れるので
ぜひ試してみてください!

いろんなものをくぼませてみる

サンプルでは【楕円】のオートシェイプで描いた円をくぼませ、その上に矢印を描いて配置していますが、
【矢印】のオートシェイプを使ってこんな風に矢印をくぼませてみるのも面白いと思います^^

今回のボタンはPhotoshopライブエフェクトのみを使用して作っています。
どのような設定になっているかはここでは割愛しますので、サンプルファイルを確認してみてくださいね。

 

 

 


 

 

 

 

 

 

   

Photoshopライブエフェクトだけでなく
Fireworksのフィルタをうまく組み合わせれば1オブジェクトでもこんな感じでけっこういろいろな表現が可能です。

他にもこんな感じで、いろんなボタンができます。
すべてベースは1つのオブジェクトです。

また違う種類のボタンスタイルも用意しようと思いますのでお楽しみに☆

最後までお読み頂き、本当にありがとうございました。お気に召しましたらぜひ共有orクリップして頂けますと幸いです。またお会いできますように♪

Check このエントリーをはてなブックマークに追加 この記事をクリップ! コメントを見る Yahoo!ブックマークに登録 Yahoo!ブックマークに登録

関連エントリー

このサイトを運営している人

YUKIと申します。福岡で働く会社員WEBデザイナーです。
フロッグマンオフィス所属。ショッピングカートのCS-Cartとかもやってます。

仕事以外でも趣味でいろいろサイトを作っています。
こういったTipsサイトや無料の素材屋さんにたくさんたくさんお世話になりながら勉強して、今ではWebデザインをお仕事としてやらせてもらえるようにまでなりました。

私もいつか誰かの役に立つサイトを作りたい!とずっと思っていたので、あいた時間を見つけてはこうしたサイトを作っています。
すこしでもお役に立てればとてもうれしいです^^

まわりの人にもご紹介いただけるとうれしいです。

たくさんの方に見ていただき、たくさんのご意見を頂くことは、記事の正確さや有益性を高めるだけでなく、新しい記事を書くモチベーションになります!
お気に召しましたらぜひまわりの方にもご紹介いただけるとうれしいです。リンクはご自由にどうぞ!

Fireworksマニア

バナーが必要な方はこちらをどうぞ♪
サイト名:Fireworksマニア URL:http://fw.v-colors.com/