ちょっとだけシャレオツなボタンを作る

デザインセンスがなくてもゲームを作ってると
どうしてもUIを作らざるを得なくなります。
まぁ別に適当でもいいんですが、せっかくなら見栄えいい物にしたいのが人のサガ。

ゲームの雰囲気にあった物が一番ですがちょっとだけ見栄えのいい汎用性のあるボタン(UI)を作りましょう。












btrec_0.png


こちら、ダメな例です。


ダメというほどでもないですが非常にさみしい。
俺のゲームはこんなんばっかりなのでチープ極まりないです。
少しだけ手を加えて直視できるボタンにしましょう。



さて、きれいなボタンや図形を作るにはそれなりのソフトが欲しいところです。
欲をかけばイラストレーターなど。

しかしそんな高価なソフトはあいにくと持ち合わせておりません。
持ってたところで、宝の持ち腐れでしょう。

saiを持ってるのでこれを使って何とかします。


まずはフチを作ります。
今回は黒でいいでしょう。
塗り潰して、真ん中をくりぬけばOKです。saiに図形ツールはないのであしからず。

btrec_1.png



次にちょっとだけ豪華にするべく内側にもフチを作ります。
濃いめの色にしましょう。

btrec_2.png



メインとなる下地の色をセット。
さっきのフチと似たような色でさっきよりは薄めに。

btrec_3.png



ここでこういう感じのテクスチャを用意しましょう。

btrec_tex.png


フリー素材を使ってもいいですし自作してもいいです。
ちなみにこれはsaiでちまちま四角を作ってくっつけた自作の物です。


下地とフチの上に乗せて、レイヤーをオーバーレイにします。

btrec_4.png


効果がきついので透明度を調整していい感じにします。30%くらいかな。

btrec_5.png


次に、グラデーションをかぶせましょう。
残念ながらsaiにグラデーション機能はありませんが、強引に作ることは可能です。


1*3のキャンバスを作り、色を3色載せます(拡大した図)

btrec_grad.png


これをコピーして、拡大すると中間色が補完されてグラデーションになります。
荒技ですね。

btrec_grad2.png



ほんで、さっきのオーバーレイにかぶせてこれもオーバーレイにします。

btrec_6.png


透明度もお好みで。70くらいにしてみましょう。

btrec_7.png



できました。

btrec_8.png


そんな大したもんじゃないですが、ちょっとの手間でべた塗りのボタンより幾分マシになりました。
フォントもちょっといじりましょう。

btrec_9.png

あんまりやりすぎると逆に安っぽくなりますが…


テクスチャを変えると雰囲気も変わります。
パターンテクスチャじゃなくて石や木のテクスチャでもいいですね。
他の図形描画ソフトがあるなら、四角じゃなくてちゃんと形を作ると
もっとまともな感じのボタンになります。

btrec_10.png

btrec_12.png

btrec_11_0.png





ボタン作るのと考えるの面倒な人はこんな感じで作ってみるとどうでしょう。
四角に色塗って光付けるだけよりはマシに見えます。
ほんとはゲームの雰囲気にあったデザインが一番ですけどね。



関係ないけど明日大腸内視鏡検査です。イヤダー




テーマ : ゲーム製作 関連
ジャンル : ゲーム

コメントの投稿

Secret

プロフィール

いすぃ

Author:いすぃ
ゲームを作ってたりゲームしてたり何もしてなかったりしてます

お仕事あれば請け負います。
ゲーム作ってみたい!とか初歩からプログラムやってみたい!って人もご一報ください。

ゲーム面白かったよ!
今後も応援するよ!などなどの意味で下記から心ばかりの支援をしていただけると本当に助かります。
Enty


twitter
ニコニココミュ
pixiv

最新記事
カテゴリ
最新コメント
最新トラックバック
月別アーカイブ
kaunta-
検索フォーム
リンク
スポンサードリンク