いわゆるWeb2.0風って言われるようなボタンなどの素材。
既にいろんなところで頻出だけれども、これを知ってるだけで簡単にかっこいいデザインが出来るのでぜひ覚えておこう。

１．ボタンを作る

まずは何でもいいのでシェイプでボタンを作る。
べベルをかけたりしてちょっと立体感を出しておこう。

こんな感じで。あとグラデーションをかけておこう。
※グラデーションはあまりわかりやすく多用すると全体がでこぼこして見えてよくないが、
現実世界では必ず光の加減があるのでかすかなグラデーションをかけておくことは非常に大切。

２．光沢をつける

Web2.0風というのはいわゆる光沢があるようなボタンのこと。
光沢があるというのはある部分に光の反射が起こるので、特に白く輝かせる。
本当はいろいろなものを映りこませることでリアルに出来るが、そんなことをする必要はなく、
ちょっと左上に白くグラデーションをかけるだけでよい。
とりあえず、グラデーションをかけるように次のように楕円の領域を作る。

わかりやすいように色をつけている。
光の反射をあらわすときは重ね合わせのモードはスクリーンを使う。
また、あまり白すぎてもウソっぽいのでグラデーションをかけて加減する。
楕円の部分をグラデーションツールで色を塗るだけ。

こんな感じ。
実はこれだけでボタン部分だけ見るとWeb2.0風になっている。
あとはマスクをかけて余分な部分を取り除くだけ。

ボタンの枠を選択範囲にしたいときは、ボタンのレイヤーをCTRLを押しながら左クリック。
その領域を使ってマスクをかけるだけ。

たったこれだけで、光沢のあるボタンの出来上がり。
カンタン、カンタン！これをいろいろなものに使えばどんなものでも光り輝くボタンになる。

３．おまけ

いろんな形でやってみた。

なんでもかんでも光沢のあるものになる。
写真でもキャラクターでもなんでもいいのでとりあえずこのやり方をすればWeb2.0風になる。

タイトルに使ってるボタンはMaterialandExに登録した。
こういうかっこいいボタンも、作るのはそんなに難しくないのがわかったね。