空想曲線

吉里吉里2/KAG3でのゲーム制作に使える小ネタ置き場。ゲーム用素材も置いてます。

吉里吉里/KAG:5分で作れるグラフィカルボタン  

2012-12-16
2017-06-14
cm0
tb0

2012年ラストの吉里吉里/KAGちょいネタシリーズ。

グラフィカルボタン

↑このグラフィカルボタンを今から5分で作ります。
使用ソフトはPhotoshop(EL含む)やGIMPがオススメ。

では、いっしょに作っていきましょうヽ(・∀・ )ノ



1.新規キャンバスを作成する


200×50pxで新規キャンバスを作ります。背景は透明で。



2.ボタン台を作る


カスタムシェイプの角丸を選択します。サイズは200×50px(キャンバスと同じ大きさ)、角の半径は5pxに設定しておきます。色は後で変更するからテキトーでよし。
ボタン台
見づらいので余白を取っていますが本来はキャンバスにきっちり収まります。
このレイヤーの名前を「ボタン台レイヤー」にしておきます。



3.ボタン台レイヤーにグラデーションをかける


ボタン台レイヤーの上に新規塗りつぶしレイヤーを追加してグラデーションを選択。
グラデーションパターン
図の右上にあるブルー系のグラデーションで塗りつぶします。



4.内側に1pxのラインを入れる


スポイトを選択してグラデーションの下側の色を選びます。
ボタン台レイヤーの不透明部分(色のついてる箇所)を選択したら
「選択範囲の境界線を描く」をクリックして次のように設定します。
境界線の設定

ボタンの周囲に縁取りが出来たのが見えるでしょうか。
あまり目立たないようにするのがポイントです。
ボタンに縁取りがついた
今回は濃い目の色で縁取りましたが明るい色でもOKです



5.パターンで塗りつぶす


ボタン台レイヤーの上に新規塗りつぶしレイヤーを追加して下図のパターンで塗りつぶします。
下のレイヤーとグループ化するのを忘れずに。
塗りつぶしパターンの設定

↑ちなみにこのパターンは1分程度で作れます。

◆1分で作る斜めパターン
1.5×5pxの新規キャンバスを作る
2.パレットから黒を選んでおく
3.グリッドの間隔を1pxに変更してスナップをかける
3.鉛筆ツールのサイズを1pxにして左上から右下にかけて
  1ドットずつ打っていく(アンチエイリアスはオフに)
4.「パターンを定義」をクリックして保存する


塗りつぶしたレイヤーのモードをオーバーレイにして透明度を15%に変更します。
パターンを追加した
こんなカンジになりました。この時点でボタン台レイヤーをすべて結合します。



6.文字を入力する


新規テキストレイヤーを作成して文字を入力します。
色は↓これを使いました。フォントはArialblackだったと思う。
テキストの色

位置調整が終わったらラスタライズ。レイヤーの名前を「文字レイヤー」に変更しておきます。
テキストが乗った



7.文字レイヤーにグラデーションをかける


文字レイヤーの上に新規塗りつぶしレイヤーを追加して
「白から黒」のグラデーションを「上から下」にかけます。
テキストレイヤーにグラデーション

レイヤーモードをオーバーレイに、透明度を70%に変更。
レイヤーモード変更
こんなカンジ。どことなく高級感が増した気がしなくもない。



8.文字レイヤーにスタイルを適用する


文字レイヤーにもう一手間かけます。
スタイルからベベル(内側)を選択します。光源は0度、ベベルの長さは0~1pxで設定。
テキストレイヤーにベベル処理
文字がへこんでいるように見えたらいいな。でも出っ張って見える人もいるはず。
もう一度左側に明るいラインを入れるとへこんで見えるのですが今回は端折ります。
これで文字部分は完成したのでボタン台レイヤーと同じように結合しておきましょう。



9.ボタン台レイヤーと文字レイヤーを複製する


グラフィカルボタンは3つ分の画像が必要なので、それぞれ2枚ずつレイヤーを複製します。
複製が終わったらレイヤーの名前と重ね順を変更します。

↓重ね方はこんなカンジです
レイヤーの重ね順



10.何もしてないバージョンを完成させる


ボタン台1と文字1だけを表示します。文字1のレイヤーモードを輝度にして透明度を50%にしたら「表示しているレイヤーを結合」をクリック。
何もしてないバージョン完成
ほい、できたヾ(*´∀`*)ノ< 手抜き!



11.ボタンをクリックしたバージョンを完成させる


ボタン台2と文字2だけ表示させて「表示しているレイヤーを結合」をクリック。
明るさを+20、コントラストを+5します。
クリックしたバージョン完成
ほい、できたヾ(*´∀`*)ノ< 手抜き!手抜き!

マウスが乗ったバージョンは最初に作ったやつを使うのでボタン台1と文字1を結合するだけ。



12.キャンバスサイズを変更する


キャンバスの横幅をボタン3つ分のサイズに変更します。
200pxの3つ分なので600px。拡大の基準点は左中央を選択。
キャンバスサイズの変更

13.ボタンの位置を調整する


ボタンの位置が1pxズレただけで悲惨なことになります。
移動させる前にグリッドを表示してスナップをかけておきましょう。
終わったら好きな名前をつけてpngファイルで出力。透明部分の保護を忘れずに。

完成

これにて終了。シンプルだけどちょっと洒落たカンジに見えたらいいなあ。
そのまま使うと粗が目立つので少し大きめに作って縮小するとよいかも。

あと、ボタン台がキッチリとくっついていますが別にくっつけなくていいです。
グラフィカルボタンで表示される画像の横幅は元の画像の横幅を三等分したものなので、
3つのボタン画像の表示開始位置さえ合っていればスキマが空いていても問題ありません。

では、また来年(*・ω・)ノ


関連記事

コメント

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://kopacurve.blog33.fc2.com/tb.php/277-c02c62d2
この記事にトラックバックする(FC2ブログユーザー)

Author

Recent

Category

Link

Comment

Mailform

Twitter