あけましておめでとうございます！

デザイナーのAkiです。

まだ若干正月ボケが抜け切りません…9連休は見事に寝正月となりました。。

今年も頑張ります！

 

今回はソーシャルゲーム風？な立体感のある正円のボタンの作り方をご紹介します。
3つの円に効果をかけて組み合わせるだけで、簡単にリッチな質感のボタンを作れますよ！

 

STEP:01 

丸を用意します。

作りたい想定サイズより、気持ち大きめに描きます。（これがボタンの乗るステージになるため）

 

 

 

 

 

 

 

 

 

 

 

 

 

STEP:02 

レイヤー効果をかけていきます。

ドロップシャドウとグラデーションオーバーレイを下記のようにかけます。

 

 

すると、このようになります。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

STEP:03

次に、先ほどつくった円から数ピクセル小さい円を重ねます。

下記のようにレイヤー効果をかけていきます。

 

バランスを見ながら、上下をずらして配置します。

これでステージが完成しました。

 

 

 

 

 

 

 

 

 

 

STEP:04

 いよいよボタン本体を作っていきます。

STEP03で作った円より数ピクセル小さい円をセンターに配置します。

 

 

 

 

 

 

 

 

 

 

効果をかけていきましょう。

今回はドラ〇ンボールのような、燃えるようなオレンジ色にしたかったので、下記のようにグラデーションをかけました。

 

 

グラデーションが掛かった状態です。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

エンボスをかけて、立体感を出していきます。

ベベルとエンボスをベベル内側に設定。

また、輪郭の範囲は87％に設定しています。

 

ぷっくりしました。

 

 

 

 

 

 

 

 

 

 

シェーディングを入れて、ステージの上に乗っている感を出します。

「ドロップシャドウ」「シャドウ内側」「光彩内側」を下記の通りかけます。

 

シェーディングがかかり、より立体感が強まりました。

 

 

 

 

 

 

 

 

 

 

 

次に、サテンをかけます。

この工程で、単調なグラデーションに一気に表情が出ます。

サテンはボタンを作るときに重宝。

 

 

サテンをかけたことにより、一気に奥行きのようなものが出たように見えます。

 

 

 

 

 

 

 

 

 

 

最後に、ニュアンスを出すために、新規レイヤーをクリッピングマスクし、うっすらパターンをかけました。

 

殆どわからないのですが、ボタンの奥の方で細かなひび割れ？のような表現ができました。

溶岩とか、鉱石のような。。

 

 

 

 

 

 

 

 

 

 

STEP:05

最後にあれこれやって完成です。

今回はパターンレイヤーとボタンレイヤーの間に光のエフェクトなどをソフトライトで加えました。

背景はクロムっぽいパターンに、円形グラデを白黒乗算でかけています。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

立体視だのパースだのがまったくちんぷんかんぷんな私でもできる、お手軽な作り方でした！