ランディングページのデザイン作成時に便利なFireworks スタイル135

Publish:

Category:Design

Tag:,

  • Hatena Bookmark:
  • Twitter:

Webページをデザインする時に、ボタンのデザインは欠かせません。
FireworksもCS5になってようやくデフォルトで使えそうなスタイルが増えましたが、やっぱりPhotoshopのスタイルに比べるとどこか物足りない。どうせなら作ってみるかっということで、スタイルファイルを作成してみました。

自分バックアップとしてあげていたのですが、いろんな方のお役に立っているようなので、pngデータ(ベクターデータ)を追加公開しました。(

ページ内の見出し一覧

LP Button 135の特長

ランディングページに最適なカラー群。
クリックひとつでボタンのデザインが完成。

フィルター効果を重ねる事で細かいところまで作り込まれたボタンスタイルを135個(カラーバリエーション含む)ご用意。
スタイルパレットからページに合わせたデザインを選択できます。
ランディングページ向けという括りで、比較的鮮やかな色を揃えています。

fireworks style135

オブジェクトの角丸の半径100%に対応

ほぼすべてのスタイルにおいて、角丸の半径100%に対応。
大きなオブジェクト、小さなオブジェクトにも適用できます。

ダウンロード

LP Button 135 *Fireworks style

スタイルファイルをインストールすることで、スタイルパネルよりクリックひとつでスタイルを適用することができます。

» LP Button 135 *Fireworks style(418.87 kB)

LP Button 135 *Fireworks png

スタイル作成時の元ファイル(ベクターデータ)です。
オブジェクトをコピーし、対象オブジェクトに「属性をペースト」することでスタイルを適用することもできます。

» LP Button 135 *Fireworks png(649.36 kB)

  • 個人利用・商用利用共に制限ありません。
    Commercial use & personal use OK.
  • 再配布禁止。
    Please do not re-distribute anything in this site.
  • 画像や圧縮ファイルへ直接リンクしないでください。
    Please do not link directly to a picture or zip. Thank you.

スタイルファイルをインストールするための3つの方法

  1. スタイルパネルからインストールし、次回からも起動時に読み込ませる
  2. 一時的に使用可能にする
  3. 直接アプリフォルダに入れてFireworks起動時に読み込ませる

1.スタイルパネルからインストールし、次回からも起動時に読み込ませる

スタイルパネルの右端上部のメニューの「スタイルライブラリを読み込み…」から使用したいファイルを選択し、読み込ませることでインストールすることができます。
読み込まれたスタイルはFireworksの次回起動時にも表示されます。

右端上部のメニューの「スタイルライブラリを読み込み...」

2.一時的に使用可能にする

スタイルパネルのプルダウンメニュー最下部の「その他のライブラリ…」から使用したいファイルを選択し、読み込ませることで一時的に使用可能になります。
読み込まれたスタイルは、Fireworksの次回起動時には表示されません。

プルダウンメニュー最下部の「その他のライブラリ...」

3.直接アプリフォルダに入れてFireworks起動時に読み込ませる

スタイルファイルを直接アプリケーションのフォルダに入れる事で起動時に自動的にスタイルファイルを読ませることができます。
[USER NAME]は各OSのログインユーザー名にあたります。

Win XP C:\Documents and Settings\[USER NAME]\Application Data\Adobe\Fireworks CS5\Styles
Win Vista/ 7 C:\Users\[USER NAME]\AppData\Roaming\Adobe\Fireworks CS5.1\Styles
Mac /Users/[USER NAME]/Library/Application Support/Adobe/Fireworks

スタイルファイルを間違ってインストールしてしまったり常時表示する必要がなくなった場合は、上記フォルダよりファイルを削除もしくは移動させることでアンインストールすることができます。

更に活用するためのカラーバリエーション作成のヒント

直接塗り設定やフィルターを変更するか、もしくはフィルターのドロップシャドウ直上に「カラーを調整>色相・彩度…」フィルターを追加する事により色の変更をすることができます。

fireworks style色変更

免責事項

  • 本ファイルはFireworks CS5にて動作確認しております。下位バージョンにての動作は確認できてません。たぶん使えると思います。
  • 本ファイルはどなたでもご自由にお使いいただけますが、本ファイルを使用する事により発生したいかなる問題にも責任を追う事ができません。ご使用は自己責任でお願いします。
    These files are not guaranteed for your computer, Please use by your own risk.

Comment [8]

素敵ですね〜、DLさせていただきます
大切に使います☆

Miu

>Miuさん
コメント有り難うございます。励みになります。
この素材が何かのお役に立てれば幸いです。

indigo

とてもとても助かりました!
ありがとうございました!
大切に使わせていただきます(^^)

Emi

>Emiさん
コメント有り難うございます。励みになります。
デザインワークを手助けするモノになっていれば幸いです。

indigo

とても素晴らしいスタイルです。ありがとうございます。

santa

かけだしwebデザイナーです。
ランディングページを作っていてデフォルトのスタイルに物足りなさを感じていました。。
使わせて頂きます!!有り難うございます!!!

0120

>0120さん
年明けてから気持ち緩みまくっている現在、コメントがとても励みになりました。
暇つぶしに作ったスタイルがお役に立てれば何よりです。

indigo

とても素晴らしいです、使わせて頂きます。文字にも違和感なく適用できて最高です。

makinos

Post Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Return to page top