ボタンのデザインを変えるだけでもサイトの印象は大きく変わるのではないでしょうか。

本日は、ボタンやバッジのデザインに関するサイトをいろいろとまとめてみました。

ButtonBuilder – Web Button creation for Mac OS X

ボタンを作成するソフトです。あらかじめ用意されている50種類のボタンのスタイルから選んで、文字をのせるだけ。PNG、JPGで保存できます。とってもシンプルなんですが、結構使えるMac用のフリーソフト。

ジェネレータ

ButtonBoost – The Button Generator

現在150種類ほど、かなり豊富なスタイルが用意されているボタンジェネレータです。

Buttonator

きれいなボタンがいろいろなジェネレータ。

My cool button

とってもシンプルなボタンジェネレータです。

Free Web Button Maker – ButtonGenerator.com

中には、有料のメンバーのみのボタンもありますが、無料でコーディングされたファイルをダウンロードできます。

Web 2.0 Badges

とってもきれいなバッジジェネレータ

Fresh Badge Generator

こちらもバッジのジェネレータです。

ベクターダウンロード

77 Vector Buttons hot off the press.

とってもきれいな77種類のベクターボタンがダウンロードできます。

165 Vector Icons, Now in 5 Colours

こちらは、アイコンも含まれていますがボタンもいろいろあります。

Free Vector Buttons and Icons – Metal and Glass

グラスの感じがきれいなボタン素材です。

72 Free Vector Glass Buttons and Bars

シンプルなボタン素材。

Free Vector Badges – Glass

きれいなバッジもベクターでどうぞ。

チュートリアル

39 Photoshop Button Tutorials You Should Have in Your Arsenal

39種類のきれいなボタンを作るPhotoshopのチュートリアルがまとめられています。

45 Photoshop Tutorials for Better Navigation

こちらは、ナビゲーションのチュートリアルですが、ボタンっぽいものも多かったので、ご紹介。

Photoshop Button Maker

とってもリアルなバッジを作るチュートリアルです。

Flag Button Devkit

国旗のバッジを作るチュートリアル。

Handy Web 2.0 Icons In Photoshop

かわいいバッジを作るPhotoshopのチュートリアル。

How to design a cool web 2.0 button in Illustrator and Photoshop

質感のあるボタンをIllustratorで作るチュートリアル。

Toxiclab.org – Web buttons tutorial

シンプルなボタンを作るPhotoshopのチュートリアルです。

インスピレーション

107 Add to Cart Buttons of the Top Online Retailers

いろいろなサイトの｢カートに入れる｣ボタンが集められています。ご参考に。

いよいよ、明日アメリカで発売されますiPhoneですが。。。

実際の使い心地ってどうなんでしょうか？週末にアップルストアに行ったら実際に手にとってみれるんでしょうか？
時間があったら、いってみようと思います。。。

っちゅうわけで、本日はiPhone風ボタンデザインについて、まとめてみました。。。

1. iPhone風ボタンのPhotoshopチュートリアル
それほど難しくないので、Photoshopをお持ちの方はお試しください。。

2. iPhone風ボタンのPhotoshopファイル
Photoshopは持ってるけど、上のチュートリアルやるのは面倒な方はこちら・・・Photoshopファイルを公開されております。

3. Glossy.js
このサイトで配布されているスクリプトを使うと、下のような画像ファイルが、CSSで簡単に角丸で、glossyな画像に変わります。。。iPhone風ボタンとはちょっと違うかもしれませんが・・・

Photoshopを使って、ボタンのデザインを作るときに、いろいろなサイトを参考にしているのですが・・・

こちらの”Button collection”
では、↓のように、ひたすら、いろんなサイトのボタンを130個！集めてくれていて、なかなか便利でございます。。

こちらの、”107 Add to Cart Buttons of the Top Online Retailers“では、107個の「カートに入れる」ボタンを集められています。。これまた、参考になりますね。。

っちゅうわけで、わたくしも集めようかと思ったのですが。。。せっかくなので、以前ご紹介した「Photoshopのレイヤースタイルファイルを日本の伝統色で作ってみた」みたいに、あとあと簡単にボタンが作れるように、Photoshopのレイヤースタイルファイルにしてみました。。

こんなん↓が簡単につくれますよん。

今回、作ったレイヤースタイルファイルは。。。左上から・・・

1. mixiの検索ボタン風
2. YouTubeのタブのところ風
3. Amazonの「ショッピングカートに入れる」風
4. Amazonの「ウィッシュリストに追加する」風
5. ニコニコ動画のタグ選択されてるとき風
6. ニコニコ動画のタグ選択風
7. Seesaaのタグサーチ風
8. JUGEMのヘッダーのところ風
9. 英語版CNETの検索ボタン風
10. 英語版Appleのヘッダーボタン風
11. Stage6のヘッダーボタン風
12. AOLの検索ボタン風
13. WordPressのスタートボタン風
14. Monster Jobsの検索ボタン風
15. FOX Sportsの検索ボタン風
16. Expediaの検索ボタン風
17. Veohの検索ボタン風
18. Pogoのヘッダーボタン風
19. StumbleUponのスタートボタン風
20. Tumblrのスタートボタン風
21. finetuneの検索ボタン風

っと、われながら微妙な選択ですが・・・日米の有名どころのサイトからボタンデザインを参考にさせていただきました。

欲しい方はこちらからPhotoshopのstyleファイルをダウンロードして使ってくださいな。。。

Photoshopを使って、ボタンなどの素材を作ってみても、なかなかしっくり来ない・・・という方も多いのではないでしょうか。

グラデーションのバランスや色味などを調節するだけで、見た目もかなり向上します。

Deziner Folioというブログで、Photoshop用のグラデーションファイルを無料配布されていたので、試してみました。。

まずは、↓から無料のグラデーションファイルをダウンロード。きれいなグラデーションが多数登録されています。。

ファイルをダウンロードすると、『web_20_gradients_v2.grd』という名前のファイルが開きます。
Photoshopを起動して、ツールボックスから、グラデーションツールを選択。すると、上のメニューにグラデーションのプルダウンが表示されるので、右側の矢印をクリックして、ダウンロードした、グラデーションファイルを読み込みます。

ファイルの読み込みが完了すると、グラデーションファイルのサムネイルが↓こんな感じで表示されます。これで、準備完了です。。

角丸長方形ツールなどを使って、ボタンの形を描きます。

描いたボタンのレイヤーをダブルクリックして、レイヤースタイルウインドウを開きます。グラデーションオーバーレイをクリックします。

さきほど、インストールしたお好きなグラデーションを選択して完成！

ボタンだけじゃなくて、サイトのヘッダー部分の画像に使ったり、アイコン素材に使ったり。。いろいろと使い道がありそうですね。。

buttonator

ちょっとしたボタンとかって、ブログ書いてたりすると、ほしいなぁって思うことあると思うんですよねぇ。
まぁ、わたくしの場合は、腐っても一応デザインやっておりますので、Photoshop立ち上げて、作っちゃえばいいのですが・・・

一般ユーザーさんには、なかなか、難しいですよねぇ。

このブログでも、無料でランキングバナー配っておりますが・・・（ここ参照）

自分で、文字を変えたりとか、結構大変ですよねぇ～。
で、今日たまたま見つけたんですが・・・このサイトお勧めですわ。

非常に簡単にボタン素材作ってくれます。

あらかじめ、用意されてるボタンスタイルから、気に入ったデザインを選んで、「Your Text Here」って書いてるところをクリックすると、好きな文字を入力できます！！（最初、気づかんかった・・・）

で、フォント選んで、背景色えらんで。。。ダウンロードボタンをクリックすれば出来上がりですわ。
便利ですねぇ～。

っちゅうわけで、試しに作ってみたボタンが・・・