FC2ブログ
--.--.--(--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2007.09.02(Sun)

Photoshopでかっこよいボタンを作る方法。ボタンをいちから作ると大変な場合はボタンの背景部分をジェネレータで生成して、ボタンのテキスト部分だけをPhotoshopで作ると、簡単にかっこよいボタンが作れます。

ボタンをが生成できるジェネレーターはいくつかありますが、お手軽&かっこよいというところでは「My cool button」

07090201.jpg

こういった高機能でかっこよいジェネレータは英語がほとんどなんで、日本語で使うにはちょっとしたコツがあります

ボタン自動生成ジェネレータの使い方

07090201.jpg

基本的にはサイト上の1~4を順番に指定していけばボタンが作れます。まず1で生成するボタンのサイズを指定する。指定できるのはボタンの横幅、ピクセル単位で100~200まで指定できます。高さは横幅100pxで35px、200pxで70pxで固定されているので、高さを変えたい場合は使えないです。横幅を小さくしたい場合は、100pxで作ってphotoshopでサイズを変えればOK。

07090203.jpg

次は2の色指定。ボタンの色として指定できるのは21色。バックグラウンドは任意の色が指定できる。

07090204.jpg

3ではボタン上に乗せるアイコンを指定できるが、あんまり使い勝手がよくないのでここでは「No icon」を選んでおいて、Photoshopでアイコンを入れた方がかっこよくなります。

07090205.jpg

4は、ボタン上の文言の指定。ふつう日本のサイトの場合ここが日本語になる。しかし、ジェネレータが英語圏のものなので日本語指定すすると文字化けするんです。で、ここはtextには何も指定しない、空欄がだめな場合は半角スペースを1個していします。するとボタンの背景だけができあがるので、ダウンロード後Photoshopを使って文言を入れます。 これは、日本語以外のWeb上のグラフィックジェネレータ使う場合のちょっとしたコツ。

07090206.jpg

全部指定し終わったら「apply changes」をクリックするとボタンイメージが表示される。「download」でローカルに保存できます。ファイル形式はpng。

07090207.jpg

作ってみたのがこれ。ボタンの文言は入れてません

07090208.gif

Photoshopで文言入れてみました

スポンサーサイト

[タグ]
photoshop 画像ジェネレータ

[関連エントリー]
Comment












管理者にだけ表示を許可する

TrackBack
  1. 無料アクセス解析
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。