web2.0という言葉と個性は無いが透明感のあるグラデーションボタンに食傷気味どころか、すでにあきれてる皆さんこんばんは。そういう流行もの寿命が尽きる前にとりあえずやっておこうぜ！ということで、今回はそのチュートリアルを、というか作り方を順を画層を使って説明したいと思います。
今回はクイックマスクを利用したやり方です。とりあえず判りやすく基礎編ということでいきましょう。
まずPhotoShopを買ってきましょう。
いやまぁそれっぽいソフトなら良いです。フリーソフトのGIMPでも出来るんじゃないかな。（責任もてませんが）
ではまず新規作成です
今回は適当に150×50pxで作ってみます
こうなりますね。
ではとりあえず背景の上に新規レイヤーを作って黒く塗りつぶします。
はい、真っ黒です。
その次はもうひとつ新規レイヤーを作り、今度は白で塗りつぶします
はい、真っ白ですね。
ちなみにレイヤーはこんな感じです
ではここからまず、今作ったばかりの白いレイヤーを選択して、下半分だけ消します。
きっちり計っても良いのですが今回はまぁラフにいきます。
では次は、レイヤー2を選択している事を確認して[クイックマスクモードで編集]のアイコンを押します。
クイックマスクモードに入ったなら、グラデーションツールを選択します。
グラデーションツールでは[背景色から透明に]を選択します。
では、レイヤー2にグラデーションを使用します。
だいたいこんな感じでグラデをひきます。
では丁度よさげなグラデができたら[クイックマスクモード]を終了させます。
すると自動的に範囲が選択されます。
Deleteを押して選択されてある範囲を消去します。
はいとりあえずこれで完成です。
これだけだとまだまだですが、とりあえずこれの作業を基本としてボタンを作っていく事になります。
ではとりあえずこれに少し手を加えて自然な色にしてみましょう。
まずレイヤー1を選択して、レイヤースタイルを開きます。今のままじゃあまりにも黒々としすぎていてコテコテなので、もう少しソフトにしてみましょう。カラーオーバーレイで色味をグレーにしてみましょう。
今回はだいたい#8d8d8d
次は境界線で全体の縁取りしてみましょう。
当然ですが縁を強調するので先ほどのカラーオーバーレイで塗りつぶした色より濃い色を選択します。
今回は サイズ：1px 位置:内側 カラー：#707070
次は光彩内側です。
色は#fff 不透明度:54％ サイズ:5px 範囲:60％
それで出来上がるのがこんな感じです
まぁこんな感じです。
今回指定した数値はあくまでも例なので、その時々によって丁度良い塩梅をさがしてみてください。
もちろんこのままじゃぱっとしませんが、このなかにロゴやちょっとしたアイコンを入れるとそれっぽくなりますよ
…たぶん。
カラーオーバーレイでグレーにするときは気持ち程度にグラデをかけた方がいいかもしれません。
今風のものを作るには、浅いグラデを使いこなせないといけませんね。
クイックマスクをかけたレイヤーの白く塗りつぶした部分の形を変えたりするのも良いですね。
あと解説し忘れたのですが、クイックマスクをかける白いやつを、下のレイヤーの境界線分縮小して境界線には被らないようにするのもお勧めです。
こういう感じの素材を作るには他にもグラデのバランスのみで作る場合もあります。それはまた近々解説してみます。たぶん。
ちなみにこれは俺がちょっと前に見た英語圏のサイトで知った作り方を、記憶に基づき再現してます。
できればそこも貼れたら良いのですが…もうどこかわからないｗ
まぁ興味がある方は探してみてください。