株式会社リースエンタープライズ 大阪南森町発、最強のホームページ制作集団

ソーシャルゲーム風のカード枠の素材を簡単に作る方法

ソシャゲ風のカード枠を簡単に作成する方法

ソーシャルゲーム風のカード枠の素材を簡単に作る方法

どうも、ぺとらです。
今回は、Photoshopでソーシャルゲーム(略してソシャゲ)でのカード等では欠かせない、枠・フレームの素材メイキング講座をやっていきたいと思います。
コツとセンス次第で、凝った装飾が出来たりしますが、それほど難しくない方法から説明していく予定ですので、是非チャレンジしてみて下さいね。

下地カード枠を作る

1_下地フレームを作る-その1

今回は、スマホ版で綺麗に表示される事を想定して、横640pxと縦800pxで作成したいと思います。こちらは案件によりけりだと思いますので、決してこのサイズで! と言う事はありません。

1_下地フレームを作る-その2

まずは、キャンバスのサイズに合わせて長方形のシェイプを作成し、レイヤースタイルの「境界線」を使って、カード枠を作成します。

1_下地フレームを作る-その3

境界線のスタイルは上図の通りです。
今回は25pxの「内側」の境界線を作成しました。

1_下地フレームを作る-その4

続いて、下地のシェイプの「塗り」を0%まで下げます。
この「塗り」を下げないと、下に更にレイヤーを重ねて作業が非常に面倒くさくなる、もしくは場合によっては下地に置けなくなるので、絶対に忘れないで下さい。

これで下地のカード枠は完成です。
こちらの下地のカード枠を使って今度は装飾を施していきましょう。

カード枠の装飾を行う

2_フレームの装飾を行う-その1

先程作ったカード枠を装飾しやすい様にスマートオブジェクトに変更します。
カード枠のレイヤーを選択した状態で、「レイヤー」→「スマートオブジェクト」→「スマートオブジェクトに変換」をクリックします。

これで境界線にのみスタイルをあてる事が出来るので、何か枠をデザインする際に、覚えておきたいテクニックですね。

2_フレームの装飾を行う-その2

まずはグラデーションで、カード枠に色をつけていきましょう。
今回は頻繁に使われるであろう、金色のカード枠にしてみました。

2_フレームの装飾を行う-その3

使用したグラデーションのカラーコードは上図の通りです。

2_フレームの装飾を行う-その4

これだけだと立体感がないので、レイヤースタイルの「ベベルとエンボス」を上図の様に設定し、立体感を出します。

2_フレームの装飾を行う-その5

更に、レイヤースタイルの「光彩(内側)」を上図の様に、設定し反射光を再現します。どうでしょうか? 少しずつではありますが、カード枠に近づいてきた様に見えませんか?

2_フレームの装飾を行う-その6

ここで更に質感をプラスしたいので、カード枠のレイヤーを複製してレイヤースタイルを全て外して「塗り」を0%にした状態で、カード枠レイヤーの上に重ねます。
そして、このレイヤーの「パターンオーバーレイ」で、ざらざらとした質感のパターンを、レイヤースタイルの絵画モード「オーバーレイ」で重ねます。

不透明度が強すぎるようであれば調整して、質感をプラスする工程はの完成です。

カード枠の細かい装飾を行う

3_カード枠の細かい装飾を行う-その1

あとはこのカード枠に細かい装飾を行っていけば、ソーシャルゲーム風のカード枠にもっと近づける事ができます。例えば、属性を表記したアイコンを設置してみたりするだけでもカード枠感がぐっとあがりますね。

3_カード枠の細かい装飾を行う-その2

ちなみに背景とその他装飾もつけてみるとこんな感じに仕上がりました。
あとはここにイラスト等が入れば、カードとしてあるある感が出せるのではと思いましたが、調度良いイラストが手元になかったので、自分でなりきってみる事にしました。

3_カード枠の細かい装飾を行う-その3

どうですか? 私、レア度高めでしょう?
こんな感じで今回はカード枠についてメイキングさせて頂きました。
装飾の部分はもっと掘り下げてメイキングしてみたいので、もしかしたら今後メイキングとして記事になるかもしれません!

それではまた、次回お会いしましょう! アデュー!!

新着記事と笑いは鮮度が命や!

「ソーシャルゲーム風のカード枠の素材を簡単に作る方法」記事が気に入った方はいいねしよう!!