CSS Selector Generator | CSS のセレクタ一覧を一発で自動生成!

13

11月2008年

Fireworksでボタン画像を作る8つのステップ

sakai 16:29 PM

  • はてなブックマークに登録
  • livedoorクリップに登録
  • Yahoo!ブックマークに登録
  • deliciousに追加

ボタン画像を作る手順やテクニックは色々とありますが、そのうちのひとつをご紹介します。

使用したソフトは Fireworks8 です。今回は、たった 8 つのステップでそれなりに見栄えの良いボタンが作れるのが特長です。

Step 1

矩形の上にテキストを置いて、準備オッケー。

Step 2

矩形をほんの少し角丸にします。
アールをきつくすると素人っぽい画像になってしまうので注意。

Step 3

矩形の塗りをグラデーションにします。

Step 4

矩形とテキストの間に上記のようなパス(透過率50%)を置きます。
パスは矩形をコピーしてパスにし、ナイフツールでスパっとやると簡単に作れます。

Step 5

先ほど作ったパスのサイズ・位置を微調整して、塗りのエッジをぼかします。

Step 6

そのままだと立体感に欠けるので、最初に置いた矩形にフィルタ:シャドウ(内側)を適用します。

Step 7

テキストが少し沈んでいるので、テキストにフィルタ:ドロップシャドウを適用します。
フィルタ:グローでも同じような効果が出ますが、個人的にはドロップシャドウを小さくかけたほうが柔らかい感じがして好きです。

Step 8

ボタンっぽさを強調するために、矩形にフィルタ:ドロップシャドウを適用します。

以上で完成です。
お好みによって途中のステップでやめてしまっても良いと思います。

バシャログスタッフによるWebサイト制作サービス

トラックバック

このエントリーのトラックバックURL
http://c-brains.jp/cgi-bin/mt/###/1709
###はmt-tb.cgiに変更してください。

コメントを投稿

ページの先頭へ

POPULAR TAGS
  • バシャログスタッフによるWebサイト制作サービス

ARCHIVE

特集

  • ステップアップ!CakePHP
  • 作って学ぶjQuery

RECENT COMMENTS

ty on Flashで動画を再生しよう!第 3 回 FLVプレーヤーをつくろう1/2。
お返事ありがとうございます。説明が足りなかったようで、もう少
minami on 【Fireworks】Fireworks の振る舞い 基本的なとこ
> nishiuraさん コメントありがとうございます。
minami on Flashで動画を再生しよう!第 3 回 FLVプレーヤーをつくろう1/2。
> tyさん コメントありがとうございます。 コンポーネント
ty on Flashで動画を再生しよう!第 3 回 FLVプレーヤーをつくろう1/2。
参考にさせていただきました。ありがとうございました。 とこ
Chakotay on 【Fireworks】Fireworks の振る舞い 基本的なとこ
現場では上級のデザイナーの人、レベルの高いセンスのあるデザイ