- ベストアンサー
Illustratorかphotoshopを使ってナビゲーションボタンを作りたいのですが。
下記のホームページのボタンのように、透明で、しかも立体感のあるボタンを作りたいのですが、どちらのソフトでどのように作ったらいいのでしょうか? http://www.imgt.jp/about/index.html
- chibihuku
- お礼率46% (30/65)
- グラフィックソフト
- 回答数5
- ありがとう数3
- みんなの回答 (5)
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 これはPhotoshopのほうです。 半透明に見えているのはHP制作時のプログラムによるものでなく、 もともと透明も含めて、画像というものです。 (しかしHP制作時のプログラムによるもので半透明にしている時もあります。) Photoshopはレイヤーを扱いますが、 レイヤーは透明のセル画と考えてください。 一番下のセル画(レイヤー)に鳥の画像があって、 その上のセル画(レイヤー)に半透明のグラデーションなどがあって、 その上のセル画(レイヤー)にボタンのフチだけの画像があって、 一番上のセル画(レイヤー)に文字を書くと、 ↓ 4枚を合わせたときにこのような画像が出来上がります。 後はそのセル画(レイヤー)を1枚に「統合」して (ここで4枚のレイヤーが1枚になる) それでボタンの部分だけ選んで切り抜いて、 JPEGやGIFにして画像化するとできます。 ちなみにマウスオーバーでボタンの画像が変わるのは、 HP制作の際にロールオーバーイメージの指定をしているからです。 この場合はつまりマウスオーバー前と マウスオーバー時の、両方の画像を作っているということです。 この文章は難しいと思いますが、Photoshopの基本が分かれば 必ず理解できる内容になっていると思います。 ぜひ参考になりましたら幸いです。
その他の回答 (4)
- ryo2501
- ベストアンサー率46% (15/32)
こちらのサイトでは数々の良質なボタン作成方法が掲載されています。貴方が仰ってるいる表現は[glass]の質感だとおもわれますが、意外にメタルな表現であったりと数々のTipsが投稿されています。
お礼
とてもおもしろいサイトですね! さっそくいろいろつくってみました! ありがとうございました!
- valvalval
- ベストアンサー率57% (105/184)
「会社概要」のように背景画像が透けて見えるボタンでしたら、 photoshopで作ります。 立体感は下の人が回答しているように、グラデーションで作ります。 透けて見えるのは、重なる部分の背景をボタンに合成することで、そのように見せています。 http://www.imgt.jp/about/images/a_r2_c1_.jpg
お礼
なるほど、半透明のボタンを作って、htmlやcssでレイアウトするときに重ねているのかとおもっていました。 最初から鳥の部分もボタンで作るのですね。 そういえば、スタイルシートを適用させないで表示したら、そうなっていました。 ありがとうございました。
- papuatama
- ベストアンサー率52% (47/89)
「ご挨拶」「企業理念」のボタンでしょうか? それとも「サービス概要」「料金比較」? どちらも単純なグラデーションで作れる画像です。 特別なテクニックは必要ないので、どちらのソフトでも同じように作れますよ。 むしろ、作り手のデッサン力がものをいうかもしれません。
- Gizensha
- ベストアンサー率34% (207/608)
ベクタ画像でなさそうなのでPhotoShopの方が向いていそう。
関連するQ&A
- イラストレーターで立体的なボタン
イラストレーター10を使用しています。 下記のサイトの右の「全講座の一覧へ」「資料請求」のような ボタンを作るにはどうすれば良いでしょうか? 立体的なボタンの作り方が載っているサイトを 教えていただければ助かります。 よろしくお願いします。 http://www.u-can.co.jp/index.html
- ベストアンサー
- グラフィックソフト
- IllustratorとPhotoshopについて
はじめまして。 現在、ホームページ制作ソフトで悩んでいます。 今は、ホームページの画像などをFireworksで制作しているのですが、IllustratorとPhotoshopで制作してみたいと考えています。 ですが、いざ制作に入ろうとすると、どれをIllustratorで制作して、どれをPhotoshopで制作したらいいのかがまったくわかりません。 Fireworksの時は一つのソフトで全てがまかなえたのですが、二つの高機能ソフトだと役割分担がまったく見えてきません。 たとえば、Illustratorでもphotoshopでもボタンは作れるようです。 イラストと画像修正などの区別があるようなのはわかりました。上記のようなボタンの制作などホームページの部品作りについてがわかりません。 このような(例:画像中心のHP)ホームページならこちらのソフトで制作するというような使い分けなどはあるのでしょうか? ご回答よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- ナビゲーションボタンについて
どうぞ、よろしくおねがいします。 ホームページを作る際に、 「TOP」ですとか「Q&A」といったページなどに誘導する ナビゲーションボタンがありますが、 これは、普通にボタン用の画像を貼り付けて、 それにリンクを貼って並べる、というやり方は一般的ではないのでしょうか? 色々なサイトのソースを見て調べているのですが、 このようなやり方で記述されているサイトがなく、 質問させていただきました。
- 締切済み
- HTML
- 助けてください!!
助けてください!! 下記のサイトのビルのような クリスタルのような表現をするにはどうしたらいいのでしょうか? 使用しているソフトはフォトショップとイラストレータです。 近いやり方でも何でもいいので、教えてくださると救われます。 お願いいたします。 http://www.swatchgroup.jp/about/index.html
- 締切済み
- デザイナー・クリエイティブ職
- 文字が動くボタンを作成したい
こちらで質問してよいのかどうか悩んだのですが、お願いします。 下記のHPのボタンを見て下さい。 http://www2.wind.ne.jp/maniackers/index-2.html カーソルをあわせると文字がくるっと動きますよね。このボタンを作成してみたいのですが、どうやればよいのか、どうやって調べればよいのかがよくわかりません。ソースを見てみたのですが、onmouseoutや onmouseoverといった内容がそれに当たるように思えます。 ホームページビルダーを使用していますが、枠組みだけに使用するのであまり活用してはいません。WEBデザインに興味はありますが、初心者です。 こういったボタンを作成するのには特殊なソフトや知識が必要なのでしょうか?ずっと作ってみたいと思っていたボタンなので、ぜひ作成方法を伝授していただきたいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- コマンドボタン 立体感がなくなってしまったのですが
アクセス2010です。 フォーム上のコマンドボタンの色を変えたら 立体感がなくなってしまったのですが デフォルトの立体的なコマンドボタンに戻すにはどうすればいいですか? 背景色:アクセント 1, 明るめ 40% にしました。 新しく挿入するしかないのでしょうか?
- ベストアンサー
- その他MS Office製品
- イラストレータで作成したボタン
ホームページに載せるボタンをイラストレーターで作ってウェブ用に保存し掲載しましたが、ボタンの中の文字がにじんで読みにくくなってしまいました。印刷した場合はよく読めるのですが、どうしたらきれいな文字のままホームページにのせる事ができるのでしょうか。
- 締切済み
- ホームページ作成ソフト
- イラレで立体的なボタンを作る方法を教えて下さい
webのデザインの制作初心者です。 立体的な問合せボタンを作ろうと考えているのですが、下記URLの画像のようなイメージで、ボタンアイコンを、イラストレーターで作る方法を教えてください。 完成イメージURL http://www.gizmodo.jp/upload_files2/121210apple_tv1.jpg 参考URL http://ameblo.jp/ca-1pixel/entry-11424360340.html ※こちらのようなボタンを作りたいのですが、初心者のため細かい作り方がわかりません。 環境はイラストレーターcs5(mac)です。 よろしくお願いします。
- ベストアンサー
- グラフィックソフト
- ビー球みたいな立体感のある、透明ボタンの作成方法
色のついたビー球みたいなボタンは、ホームページビルダーのテンプレートにあるものです。 私がしたいのは、色のある文字をこのボタンの中に、重ねたいので、色がない透明(多少、白く濁ってもよい)のボタンを作成したいのです。 ところが、ホームページビルダーのテンプレートには色のついたボタンのファイルしかありません。自分で作る必要があります。 <質問内容> このようなビー球みたいな立体感のある、透明ボタンの作成方法について、photoshopでの作成方法か、もしくは無料でダウンロードできる素材集のサイトを教えて下さい。
- ベストアンサー
- グラフィックソフト
お礼
やはりphotoshopのほうが作りやすそうですね。 やってみます。ありがとうございました。