• ベストアンサー

Fireworksで縦方向に立体的なボタンをつくるには

Fireworks MX 2004を使っています。 以下のサイトの上部にあるようなボタンを 作ってみたいと思っています。 http://www.nri.co.jp/ 画像をみると縦方向にベベルのようなエフェクトが かかっていて立体的になっているのですが 描画した矩形に対してどのようなエフェクトを 指定したらよいのでしょうか? 詳しい方よろしくお願いいたします。

  • lxw
  • お礼率38% (24/62)

質問者が選んだベストアンサー

  • ベストアンサー
  • altosax
  • ベストアンサー率56% (473/830)
回答No.2

>ホーム サービス・プロダクト などの横一列のボタン あはん、失礼しました… Fireworksは横のグラデーションはできるけど縦のグラデーションができないから お困り、ということですね。 私も原寸ではこれは立体なのか平面なのか全然ぴんと来なかったのですが、400%ぐらいに拡大してようやくわかり ました。 塗りパレットのなかにグラデーションの自由編集ができるのはわかりますか? (わからなかったらヘルプに絵入りで載っています) これで横方向で仕方ないけどグラデーションを作って、縦長の長方形を描けばいいんじゃないでしょうか? その後に90度回転で、目的の縦グラデーションにする、というのはどうでしょう? 拡大してみると、一番下は白とグレーの直線を引いてあって、右の縦辺だけに濃いめの青を一本直線で引くことで立体的に見せてますね。 どうぞがんばってみてください。

lxw
質問者

お礼

ありがとうございます! グラデーションツール、忘れていました。 プロパティインスペクタばかりさわって探していました。(^-^; 貴重なヒントをいただきましたので チャレンジしてみようと思います。

その他の回答 (1)

  • altosax
  • ベストアンサー率56% (473/830)
回答No.1

こんにちわ、 「お客様へ」「メディアの方へ」…とあるボタンでよろしいでしょうか? わたしのFireworksはMXではなくて相当古いバージョン3なのですが、多分新しいもので古い機能は必ずできると思うので試してみて下さい。 水色(など好きな色)で長方形をべたぬりで作成 この時、透明度は100よりは少し少なめ(お好みの濃さで)のほうがいい感じで出来ました。 ↓ エフェクトはぼかしのガウス (半径はお好みの効果で色々やってみてください) …にしてみたら、ほぼそれっぽい物ができました。 透明度とガウスの半径がポイントみたいですので、色々試してみて下さい。

lxw
質問者

補足

説明が悪くてすいません! ホーム サービス・プロダクト などの横一列のボタンです。色をひろっていくと縦方向にグラデーションしているようなんです。もしお分かりになりましたらよろしくお願いいたします。

関連するQ&A

  • webデザイン 画像の罫線を立体的にしたい

    webデザイン 画像の罫線を立体的にしたい 下記のwebサイトのメニューバーの縦の罫線(項目の区切り) のような立体的な罫線のPhotoShop、Fireworksでの作り方を、どなたか 教えてくださいますでしょうか.. 。 http://www.chem.keio.ac.jp/

  • Fireworksでよく使うエフェクトをワンクリックで設定できますか?

    マクロメディアのFIREWORKS MX2004もしくは8の画像編集作業で、ほぼ毎回使うエフェクトにシャープ、明るさ・コントラスト、自動レベル補正のセットがあるのですが、今のところいちいちまず自動レベル補正→明るさ・コントラスト→シャープのようにボックスから選択してひとつずつエフェクトをかけていますが、これをコマンドやショートカットキーのようなかたちで一発ですべてのエフェクトをかける方法などないでしょうか。

  • FireWorksでアニメーションGIFにならない

    FireWorks MX 2004で、アニメーションGIFを書き出ししたら、 通常のGIFファイル(1フレーム目のみの画像)になってしまい、アニメーションGIFになりません。 FireWorks MX 2004が入っている知人のPCで行った場合にこの現象になります。 (OSはwin7です。) 自分のPCにもFireWorks MX 2004が入っていて、そちらで行うと、 問題無くアニメーションGIFが作成できます。 ごく普通のやりかたで、フレームを複製してフレーム毎に数パターンの画像を作成し、 「書き出しのプレビュー」で「アニメーションGIF」を指定して、スライス上にも 「アニメーションGIF」と指定されていることを確認した上で、右クリックして、 通常の方法で書き出しているのですが、なぜ知人のPCでだけ、書き出しが うまくいかないのかが不明です。 「自分のPCでできるなら、自分のPCでやればいい」のですが、知人のPCでの 操作もできるようにしたい為、解決策を探しています。 それと、「バージョンが古いから」というご指摘は抜きでお願いします。 何か対処法などありましたら教えて頂けると幸いです。

  • fireworksでスライスした画像の保存先

    fireworksでスライスした画像を、1つ1つ書き出しているのですが、「選択スライスの書き出し」で最初に表示されるフォルダの場所は変更できないものでしょうか… たくさんスライスしたいものがある為、1つ1つ正しい保存場所を指定するだけでも時間がかかってしまうのです… 知ってらっしゃる方、回答よろしくおねがいいたします。 (ちなみにバージョンはFireworks MX 2004です)

  • fireworksで2枚の写真の境目をぼかす

    はじめまして。質問させていただきます。 Fireworksで以下のような画像を作成する場合、 どのように作業すればいいのでしょうか? FireworksのMXを使っています。 http://www.kanseki.co.jp/common_images/top_visual.jpg ※2枚の写真が少しぼかして合成されています。 また、このように、1枚の写真をカラーに溶け込ませる方法も教えてください。 http://www.ddnj.com/product/hp/awbs/awbs_sample/image/AWDL090-002.gif ちなみに、Photoshop・Dreamweaver使用しています。ある程度勉強したのですが、知識が足りない部分がかなりありますので、いろいろとお教えいただけるとうれしいです!

  • Dreamweaver CS4とFireworks CS4の連携につい

    Dreamweaver CS4とFireworks CS4の連携について質問です。 連携機能を使ってDreamweaverからFireworksを呼び出して画像を編集し、 編集を終了してDreamweaverに戻るとHTMLの日本語の部分が文字化けしてしまいます。 具体的な手順は以下のとおりです。 ・FireworksでFireworks PNG形式の画像ファイルを作成。 ・作成した画像ファイルからJPGファイルを作成。 ・Dreamweaverで作成したJPGファイルをHTMLに挿入する。 ・Dreamweaverのプロパティインスペクタにある編集ボタンを押してFireworksを呼び出す。 ・Fireworksで画像を編集し、Dreamweaverに戻ると、日本語の部分が文字化けしている。 作業環境はMac OSX 10.5 DreamweaverとFireworksは30日間の試用版を使っています。 解決策があれば教えていただけないでしょうか? よろしくお願いいたします。

  • 困ってます:Fireworks パスの結合2

    以前のスレで私がアップした画像が分かりにくいというご指摘を受けましたので、以下のスレから異動しました。 http://okwave.jp/qa/q6656538.html 今回は、パス結合後とパス結合前の画像をそれぞれアップしました。また、分かりやすいようにパス結合前の画像では二つのパスの色を分けてあります。 質問: ペンツールで添付してある 画像のような羽の絵を描いたとします。この画像は二つのパスを結合して作っていますが、見てのとおり、上から二段目の羽の一部が着色されません。 どのようにすればよいのでしょうか? 操作方法を教えてください。 Fireworksは 2004 MXですが、他のバージョンでも操作は同じだと思います。 よろしくお願いします。

  • 複合フーチングのフーチング形状

    複合フーチングのフーチング形状は以下の画像のとおり矩形ではなく台形になっています.これはなぜなのでしょうか? 自分なりに考えたのは画像でいう縦方向のずれを防ぐためだと思うのですがこれであってるでしょうか,それとも別の意味なのでしょうか? ご存知の方がいればご教授ください.

  • CSSで横方向の可変ボックスの作り方

    [ ] ←画像(縦方向のグラデーション) [ テキスト ] [ テキストテキストテキスト ] 上記のようにテキストの量によって自動で背景画像が可変するような CSS指定をしたいのですが、これって可能でしょうか? 縦の可変はわかるのですが、横の可変がわかりません… すみませんが、わかるかたいましたらご教授お願いします。

  • Photoshopでシェイプの位置を指定する方法について

    Photoshopを使い始めたばかりの者です。 Photoshopではシェイプを位置を指定して描画することはできるのでしょうか。 画像ソフトはFireworksを利用してきました。FireworksではX,Yといったプロパティで位置を設定できます。 同様のことをPhotoshopでどのように行うのかが、 分からずに困っております。 よろしくお願いいたします。