Ad Network

あわせて読みたい

  • あわせて読みたい

« Web2.0を活用する10の方法、その4 | Main | 「ウェブ進化論」はなぜ「書籍」として出版されなければならなかったのか »

色や大きさを後から変更できる AQUA風ボタンの作り方

 二日ほど前のブックマークの人気エントリーに入っていた、「AQUA風ボタンの作り方リンク集」を見てつくづく思ったのだが、Photoshopは奥が深く、同じような効果を作り出すのに何通りも方法があるのが興味深い。そこで、今日は、Photoshopにも関わらずあえて全てをベクターデータで書くという特殊な技法(知り合いのデザイナーから教わった技法)でAQUA風ボタンを描いてみた。

 まず最初に、"Rounded Rectangle Tool"で適当な大きさの角の丸い四角を書く。角の丸みは、Radiusの値で変更できるが、この場合は16pxとした。

Aqua_1

 この時自動的に作られたレイヤーをダブルクリックして、レイヤースタイルのInner Glow属性をオンにする。Blend ModeはMultiplyで、Opacityは40%程度が適切、色は黒にする(黒にしておくと、後でメインの色を変更したときにここを変更しないですむ)。

Aqua_2

 次に同じレイヤースタイルのダイアログボックスで、Drop Shadow属性をオンにする。Blend ModeはやはりMultiplyで、Opacityは75%。色はInner Glowと同じく黒にしておくと手間がかからなくて良いのだが、透過した光の効果を出したいときは少しメインの色を混ぜると良い。(ただし、その場合はメインの色を変更したときに、ここにも変更を加える必要がある。)

Aqua_3

 ダイアログボックスを閉じ、レイヤーをコピーする。コピーしたものをctrl+Tで変換モードにし、Altキーとマウスで半分より少し小さいぐらいにしてから、位置を調整する。次にこのレイヤーをダブルクリックしてレイヤースタイルダイアログを開き、Fill Opacityを0にしてしまう(そうしないと、メインの色を変更したときにこのレイヤーの色まで変更しなければならなくなる)。レイヤースタイルはGradient Overlayのみオンにし、Blend ModeをNormalで、Gradientを白で100%から25%上から下に向けてかける。これで「てかり」の完成だ。

Aqua_4

 次に「てかり」のレイヤーをコピーし、上下反転し、位置合わせをし、ctrl+Tではみ出ない程度に少し大きくする。次にこのレイヤーをダブルクリックしてレイヤースタイルダイアログを開き、Fill Opacityは0のまま、今度はInner Glowのみをオンにする。Blend ModeはScreen、Opacityは75%、ただし色は白で0%から50%のOpacityとしておく。これで完成だ。

Aqua_5

 この手法で作っておくと、全てのデータはベクターデータとして入っているので、後からサイズの変更が簡単にできる。その上、色情報を持っているのは一番下のレイヤーのみなので、そこの色を変更するだけで、簡単に他の色のボタンが作れてしまうのである。

Aqua_3buttons

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c4f9853ef00d8342503fb53ef

Listed below are links to weblogs that reference 色や大きさを後から変更できる AQUA風ボタンの作り方:

» Webサイトのボタン今昔 from r202.org
デザインの神は細部(ディティール)に宿るので、小さなボタンでもおろそかにはできな... [Read More]

» [開発]メメタァボタン開発 from かえるの開発工房
とりあえず何か絵関連がさびしいので開発をしてみようかなと思い 作ってみました。画像はイメージです。 flashでもすればいいのですかね。うーんJava scriptでは限界がありますしねぇ。 でも、Java scriptで頑張ってみましょうか。ほむ。 あ、ちなみになんだかつやつやにaqua風味にしてみました。 [http://satoshi.blogs.com/life/2006/02/_aqua.html:title=Life is beautiful]さんを参考につやつやと。 なんでもつやつ... [Read More]

Comments

lala

its all foreign....

toorisugarinotabibitodesu

何通りくらいあるか興味深く検索で引っかかったのでお邪魔しました
手法としては単純な方法で解りやすいと思います。
ここのソフトとブログは、英語が標準ですかね・・・
本文自体が日本語で書かれつつ色々な所が英語版で
対応する箇所が見つけづらいです。。
英語版のphotoshopを使う時はいつもこれに悩まされます。

toorisugarinotabibitodesu

何通りくらいあるか興味深く検索で引っかかったのでお邪魔しました
手法としては単純な方法で解りやすいと思います。
ここのソフトとブログは、英語が標準ですかね・・・
本文自体が日本語で書かれつつ色々な所が英語版で
対応する箇所が見つけづらいです。。
英語版のphotoshopを使う時はいつもこれに悩まされます。

Post a comment

This weblog only allows comments from registered users. To comment, please Sign In.