【ONEレイヤーチャレンジ】光沢系ボタン

はじめまして、ONEレイヤーチャレンジに参加したいがためだけにnoteを始めたました。　サボ(@sabotennda)と申します。
アプリUIをデザインしているUIデザイナーです。

ゲームUIのデザイン関連の交流がしたい今日この頃、どこを探してもノウハウを共有する場所がない...イラスト関連は多いのになぁ...

そんな時に見つけたこの取り組み！

最高じゃないですか！これは参加せねば！
というわけで、ONEレイヤーチャレンジ始めます！

本編

ルール

・デザインツールはPhotoshopを使用
・ボタン、テキスト、装飾など各々好きなパーツをデザインする
・「ひとつのレイヤー」に「レイヤースタイル」だけを使って表現（必須）
・可能であればレイヤー効果を公開する（任意）

そして出来たものがこちら！

目標として、ファンタジー系のゲームにありそうなデザインのボタンを作りたいということで作成しました。

制作過程

僕の制作工程は、
形状を決める→立体感を出す→グラデーションを決める→パターン作成→色を決める
っという手順で制作しています。

これはレイヤー効果を登録しておけば形状が変わっても、下記のようにある程度は対応ができるからです。

　色が手順の最後になっている理由としては、メインとサブのボタンで色を変えたい場合やイメージが違うとなって最初に決めても、変更の可能性があっていちいち変えるのが面倒だからです。

　更に、最後に貼っておくデータを確認して頂けると分かりますが基本ベースの色は黒で作ってます。これは個人的に色のコントロールも全てレイヤー効果内のカラーオバーレイで行いたいからです。

　そのため基本の構成として、凹凸感や丸みをベベルでつけて、質感と奥行きを出すために白黒のグラデーションとパターンを組み合わせ、後からカラーオバーレイで色を付けるという流れです。

ボタン1.psd

私、気になります！

正直、僕の作業工程はほぼ晒したのであとは、ボタンや装飾を作って紹介していこうと思います。

ONEレイヤーチャレンジ、非常に面白いですし実務レベルで使える技術もあります（他力本願）
そこで見ているアナタも！ぜひ参加してアナタのデザインを見せてください、お願いします！