Web2.0的ボタンの作成方法について
- Web2.0的ボタンの作成方法を探しています。ウェブ制作会社のホームページなどでよく見かける、立体的で反射しているデザインのボタンの作り方を知りたいです。
- 具体的には、曲線を入れて反射しているように見せるボタンや、複雑な図形による立体感を表すボタンを簡単に実現できるツールを探しています。
- また、Web2.0素材の作り方に特化したPhotoshopの書籍も探しています。Web2.0的なデザインを学びたい方にとって、役立つ書籍があると嬉しいです。
- ベストアンサー
Web2.0的ボタンの作成方法について
よくウェブ制作会社のホームページなどで見かける、 Web2.0的？ボタンの作り方を探しています。 http://www.dezinerfolio.com/2007/05/06/ultimate-web-20-layer-styles/ にあるような、画像（今回の場合はボタン）の中段から上下に濃い色と薄い色に 分けて立体的に見せるようなデザインではなく、どちらかというと http://www.web20badges.com/ にあるような、 (1)曲線を入れて反射しているように見せる (2)ページ下の方にある赤いボール（Pool ball）の白い部分にある ような、複雑な図形による反射（立体感）を表す を簡単に実現できるツール（ソフトやウェブサイト上のサービスなど）を探しています。 (2)については http://www.forest.impress.co.jp/lib/inet/homepage/logobutton/aquamaker.html という素晴らしいソフトがありますが、やはり(2)の白い部分のような複雑な図形を作ったり、 ボタン自体の形を自在に作れないところが難点です。 Web 2.0 Badgesは作成レイヤーをpsd形式で落とせる みたいですが、ある程度バッジの大きさが出来上がってしまって いるので、ここから新たに作りたい図形のレイヤーを組み込んでいく のは手間がかかってしまいます。。 なので簡単に上記(1)(2)を作成できるツールをご存知であれば教えてください。 あと、話変わりますがPhotoshopの書籍で、写真の加工とかではなく こういったWeb2.0素材の作り方に絞った書籍があればかなり売れると 思うんですけどね・・。本屋で100冊くらいの書籍を探しましたが ありませんでした。見つけた方は是非ともレスいただけると ありがたいです。 それではよろしくお願いいたしますm(__)m
- tak_goo_00
- お礼率63% (21/33)
- CSS
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
ボタン一つというわけにはいかないですが、Photoshopは結構簡単に作れると思いますよ。 実際、慣れれば５分ほどでいいものが作れます。 それに、いろんなボタンバリエーションが必要になってくるので、ある程度自由度がきくものでないと、後で物足りなくなります。 書籍は、Ｍｄｎ「Photoshopプロフェッショナルロゴデザイン」５月発売のものは、参考になると思いますよ。
その他の回答 (1)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
「ボタン アクア」とか「ボタン aqua」で検索すると出てきそうなボタンではダメでしょうか？ 主にPhotoshopとかFireworksが使われると思います。
お礼
talooさん、 ご回答どうもありがとうございますm(__)m http://www.web20badges.com/generator/badge6.jpg このような画像は恐らく「ボタン aqua」で出てくる サイトの開設では補えない部分かと思います。 （私も「ボタン aqua」の検索結果20ページくらいまで 探して、いくつか試してみたんですが、無いようでした・・） 通常の立体的なaquaならPhotoshopで作れるんですが、 上記バッジみたいな立体感で、好きな形（バッジだけではなく） を作るとなると意外とリファレンスが無いもんだなーと 思ってお聞きしていました。 どこかご存知であれば是非ご教示お願いいたしますm(__)m
関連するQ&A
- Webデザインにおいて「押しやすいボタン・バナー」とは
Webデザインにおいて「押しやすいタン・バナー」とはどのようにお考えですか？ ここではカーソルをもっていったらロールオーバーするのでボタンだとわかった、ではなく、見てすぐに「タン・バナーだ、これは押せるものだ」と認識できるもの、です。 ●周りと違う色をしている ●立体的である と言うのがあると思いますが、あとはどうでしょうか？ 三角を頭につけるとボタンっぽいですけど、リストのマークとしても使えます。 この前作っていて、立体的であるにもかかわらず、押しにくいものに仕上がってしまいました。 ボタンの文言をかえれば分かりやすいのでしょうか… 例えばバナーですが http://www.ikesai.com/ のように、左下に広告のバナーがありますけど、押せるかどうかはカーソルもっていかないとわかりませんよね。 ただの絵にみえるんですが… こういうのをもっと押させたい場合にはどのような工夫があるとよりよいでしょうか？」
- ベストアンサー
- グラフィックソフト
- 角丸ボタン等のweb素材の透明部分について
ボタンやら見出しやらに角丸使って、ボタンがつるつるしてるweb2.0風？のサイトって多いですよね？ それらのボタンやdivの画像をフォトショで造る際、カンバスの形は矩形だから、角丸意外の背景は消去しないといけないですよね？ でもjpgだと透明部分を持つことができないし、gifだとボタン等のグラデーション（鏡面反射みたいなつるつるしたやつ）がキレイにでませんよね？ プロの皆さんはグラデーション等を使った角丸の素材を造る際、どうしてるんですか？ Bodyの色と同じ色のレイヤーを重ねて画像を統合してからweb用に保存したり、 またはサイトの背景はだいたい白だからあんまり気にしないとかそういうことなんでしょうか？ 初心者なものですいません。教えて下さい。
- ベストアンサー
- デザイナー・クリエイティブ職
- ビー球みたいな立体感のある、透明ボタンの作成方法
色のついたビー球みたいなボタンは、ホームページビルダーのテンプレートにあるものです。 私がしたいのは、色のある文字をこのボタンの中に、重ねたいので、色がない透明（多少、白く濁ってもよい）のボタンを作成したいのです。 ところが、ホームページビルダーのテンプレートには色のついたボタンのファイルしかありません。自分で作る必要があります。 ＜質問内容＞ このようなビー球みたいな立体感のある、透明ボタンの作成方法について、photoshopでの作成方法か、もしくは無料でダウンロードできる素材集のサイトを教えて下さい。
- ベストアンサー
- グラフィックソフト
- 画像にテキストを埋め込むジェネレーターの作成方法
http://www.web20badges.com/ 上記URLのサイトのように自分で用意した画像に WEB上でテキストを加工（色やサイズ・ボールドや回転等）して 画像を作成するジェネレーターを作成したいと思いますが 参考になるようなサイトやスクリプトなどありましたら 教えていただきたいと思います。 宜しくお願いいたします。
- ベストアンサー
- PHP
- 水面に写ったようなロゴや立体的なボタンの作成方法を教えてください。
はじめまして。 現在、photoshopを勉強中のものです。 illustratorはある程度使えるんですが、illustratorだけでは限界を感じ最近photoshopでいろいろなボタンやロゴを見て作り方を勉強しています。 そこで、皆様にお聞きしたいのが、以下のサイトにあるような２つのボタンやロゴの作成方法を教えていただけないでしょうか？ (1)水面に写った様なロゴ（ここのサイトのロゴや記事中のピンクのロゴ） http://www.dezinerfolio.com/ (2)メニューの緑の立体的なボタンになります。 http://www.jahma.jp/ （２）についてはよく見かける立体的なボタンより少し複雑なつくりになっているような気がするんですが・・・ 真ん中から上の部分によく見かける立体的なボタンを配置して、下に斜線のボタンを配置しているような・・・間違ってたらご指摘お願いいたします。 また、よく見かける斜線のデザインはphotoshopで作成されたものなのでしょうか？ illustratorを使用して作成することは簡単だと思うんですが・・・illustratorだと少し面倒でして・・・本当ならphotoshopのほうが向いている作業なんじゃないかと・・・ こちらもよく使われている作成方法などあれば教えていただけないでしょうか？ 質問が多岐にわたってしまいましたがどうか宜しくお願いいたします。
- ベストアンサー
- グラフィックソフト
- ｗｅｂ拍手ボタンを設置したいです。
おはようございます。 ＦＣ２ブログのプロフィール欄かフリーエリア欄に、 ｗｅｂ拍手を設置したいです。 ｗｅｂ拍手公式サイト http://www.webclap.com/index.html で設置しようと思い、HTMLタグをコピペしたのですが、 ブログを確認してみると、ボタン全体の色が白タイプで、オンマウスで色が変わらないタイプの拍手ボタンになってしまいます。 全体的にグレイで、オンマウスにすると水色になるボタンにしたいのですが、どうすればいいでしょう？？
- ベストアンサー
- ブログ
- Photoxhopでボタン
初めまして、どうぞよろしくお願いします。 ・フォトショップで角丸の立体的なボタンを作ろうと思ってます。 角丸長方形ツールで枠を取って、その中をグラデーションツールで色をつけると角を丸くした四角形以外の外側もグラデーションされてしまいます。結局、角が尖った長方形になってしまいます。。 角の丸い長方形のボタンで中をグラデーションするにはどうしたらいいでしょうか？ よろしくお願いします。
- ベストアンサー
- グラフィックソフト
- フォトショップについて
現在フォトショップを使い図面に色を塗ったりする仕事を依頼されます。私はこれまで使ったことがなく、わからないことだらけです。 まず、レイヤーの意味は分かるのですが、一定の箇所に色をつけようとペンツールで囲う作業をしていると、レイヤーが新規に出来、色を塗るときにもレイヤーが新規に出来ます。また同じ色を違うところに塗ろうと思い、先ほどの作業を繰り返すとまたレイヤーが新たに出来ます。増えても後でレイヤーの結合をすればよいのですが、もっとスマートなやり方はないのでしょうか。 それと、図形を図面の中に書きたいのですが、楕円形ツールを選択し図面の中でクリックすると、大きな円が出てきてしまい大きさの調整が出来ません。フォトショップで図形の挿入はどのようにするのですか。 最後に、テキストの挿入について、文字を線で囲いたい場合、囲んだ文字を中央にしたい場合はどのようにすればよいのでしょうか。 長々と書きましたが、質問の意味は分かっていただけるでしょうか？？なんか複雑です。。。。。。ご存知の方助けてください。。。。。
- ベストアンサー
- その他([技術者向] コンピューター)
- クリックしたときにボタンの色や立体表示を変えたいのですが。
Access2000(Windows XP)を勉強中の初心者です。 フォーム上で、ツールボックスによりラベルまたはコマンドボタンでボタンを作成し、クリックしたときにボタンの色または、立体表示を変えることは可能でしょうか。可能でしたら方法を教えてください。
- ベストアンサー
- オフィス系ソフト
- VB.NETのWebアプリで、ボタンの見た目をGoogleのボタンのように変えたい
VB.NETでボタンを使うと以下のような見た目になるのですが、Googleのようなボタンの見た目にしたいのですが可能でしょうか？また、マウスをもっていくと色が変わるのも実装したいです。 HTMLファイルにただのinputタグを書くとGooGleと同じ見た目になり、マウスを持っていくと色が変わります。これと同じようにしたい＞＜ よろしくおねがいします。 VB.NETのボタンの見た目 http://vbdotnet.fc2web.com/vbnet/control/Button01.htm GooGleのボタンの見た目 http://www.google.co.jp/
- ベストアンサー
- Visual Basic
お礼
webteraさん、ご回答ありがとうございます。 やはりPhotoshopを極めるのが正攻法なんですね。 ある程度触ることは出来ますので、更に磨きをかけていけるよう がんばります。 また、書籍のご紹介ありがとうございました。 （これはまだ見たことありませんでした・・） 早速買いに行ってきます！ ありがとうございましたm(__)m
補足
webteraさん、 本日、教えていただいた書籍を見に行きました。 求めていた内容が全て載っていました！！ 完全解決です。 非常に助かりました。 どうもありがとうございます！！