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

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

2016.02.4
iqe_メイン
ノウハウ

はじめまして。N高等学校のWEBデザインを担当しているiqeです。

以前はゲーム業界にいたこともあり「ゲームといえばコンシューマ! じっくり腰を据えてプレイするもんだろう!」と思っていましたが、スマホの台頭とソーシャルゲームの運営にしてやられ、スマホで毎日ポチポチしている今日この頃、皆様いかがお過ごしでしょうか?

さて、そんな訳で、ソシャゲガチャって、激レアがなかなか出ませんよね?

出ないなら、作ってしまおう、SSR!

レア度高めなカード枠の作成方法をご紹介します。
※ 作成後、今世紀最大級の虚しさに襲われても、一切責任は負いません。

目次

  • カードのラフイメージを作成
  • 枠のベースを作成
  • 枠を装飾する
    • 光沢感を出すためグラデーションを設定
    • 立体感を出すため、シャドウ(内側)と光彩(内側)を設定
    • さらに立体的にするために境界線とドロップシャドウを設定
    • 枠の内側にも立体感を出す
  • タイプ表示用の装飾を作る
    • 円形の金色枠を作る
  • 円形枠を装飾する
    • 光沢を出すためグラデーションを設定
    • 光彩(内側)で溝を表現
    • 立体感を出すためシャドウ(内側)とドロップシャドウを設定
  • 模様を付ける
  • タイプを表す石を作成
  • 石を装飾する
    • 立体感を出すため、グラデーション、光彩(外側)、ドロップシャドウを設定
    • 質感を出すため、パターンオーバーレイ、光彩(内側)、シャドウ(内側)を設定
    • ブラシでハイライトを置く
  • タイプを表すアイコンをクリップ
  • カード枠の完成

カードのラフイメージを作成

ざっくりとカード内に入れる要素をラフにします。

イメージがある程度固まっている場合は、装飾の形や色などの詳細を描き込んでも良いと思います。

枠のベースを作成

photoshopを起動して、新規ファイルをサイズ「w640px × h800px」で作成します。
今回はこのサイズで作成しますが、特に決まりはありません。

枠の形を長方形ツールやペンツールなどを使用して、作成します。
002
シェイプで作成しておくと、後から形を微調整できるので便利です。

枠を装飾する

枠の装飾はゲームの世界観などによって様々ですが、今回は王道の金色の枠にしようと思います。ブラシなどを使って描き込んでいった方がよりリッチな雰囲気になっていきますが、今回はさっくりとレイヤースタイルで装飾します。シェイプの色は#e8c72cです。

設定するスタイルは以下です。

  • 境界線
  • シャドウ(内側)
  • 光彩(内側)
  • グラデーションオーバーレイ
  • ドロップシャドウ

枠のベースのレイヤーをダブルクリックして、レイヤースタイルを設定していきます。

◆光沢感を出すためグラデーションを設定

003

  • 描画モード:スクリーン
  • 不透明度:70%
  • スタイル:角度

グラデーションで色を指定しても良いですが、後から色の調整がしやすい白黒で作るのがオススメです。描画モードはベースの色によって見た目も変わるので、その都度調整します。
iqe_004
今回はスクリーンでちょうど良く黄金感が出ました。

◆立体感を出すため、シャドウ(内側)と光彩(内側)を設定

シャドウ(内側)の設定

  • 描画モード:通常 白
  • 不透明度:86%
  • 角度:120度
  • 距離:3px
  • チョーク:0%
  • サイズ:5px

光彩(内側)の設定

iqe_005_2

  • 描画モード:オーバーレイ
  • 不透明度:94%
  • カラー:黒
  • テクニック:さらにソフトに
  • ソース:エッジ
  • チョーク:23%
  • サイズ:16px
  • 輪郭:線形 アンチエイリアス
  • 範囲:71%iqe_006

立体感が出ました。奥にキャラがいるイメージが湧いてきそうですね。

◆ さらに立体的にするために境界線とドロップシャドウを設定

境界線の設定

iqe_007

  • サイズ:4px
  • 位置:外側
  • カラー:#967d05

ドロップシャドウの設定

iqe_007_2

  • 描画モード:乗算 黒
  • 不透明度:93%
  • 角度:120度
  • 距離:0px
  • スプレッド:35%
  • サイズ:18px

iqe_007_3
より立体感が出ました。そろそろレアキャラが見えてきたでしょうか?

◆枠の内側にも立体感を出す

このままでも良いですが、枠の内側に溝を入れるとより雰囲気が出ます。

枠のベースのシェイプの、内枠のポイントを選択し、新しいレイヤーにコピーします。

内枠と同じ形状のマスクが作成されます。このレイヤーをバケツツールを使って黒く塗りつぶします。

枠以外が黒くなりましたね。このレイヤーを「枠ベース」レイヤーにクリッピングマスクすると黒い部分は非表示なります。

クリップしたレイヤーにスタイル、光彩(外側)を設定していきます。
iqe_008_3

  • 描画モード:焼き込みカラー
  • 不透明度:100%
  • カラー:黒
  • テクニック:精細
  • スプレッド:26%
  • サイズ:51px
  • 輪郭:画像参照
  • 範囲:50%

iqe_008_4
枠に溝ができました。高級感が出ましたね。

タイプ表示用の装飾を作る

いわゆる属性ですね。今回は丸い石をモチーフに作成します。

◆円形の金色枠を作る

まずは楕円形ツールを使って円を作成し左上に配置します。色は先に作ったカード枠と同じ金色にします。
iqe_009

円形枠を装飾する

カード枠と同じようにスタイルを設定していきます。

設定するスタイルは以下です。

  • シャドウ(内側)
  • 光彩(内側)
  • グラデーションオーバーレイ
  • ドロップシャドウ

◆光沢を出すためグラデーションを設定

  • 描画モード:スクリーン
  • 不透明度:70%
  • スタイル:角度

カードの枠よりもサイズが小さいのでグラデーションが緩やかになってます。
iqe_009_3

◆光彩(内側)で溝を表現

  • 描画モード:焼き込みカラー
  • 不透明度:60%
  • カラー:黒
  • テクニック:さらにソフトに
  • ソース:エッジ
  • チョーク:30%
  • サイズ:24px
  • 輪郭:リング-二重 アンチエイリアス
  • 範囲:65%

iqe_009_5

◆立体感を出すためシャドウ(内側)とドロップシャドウを設定

シャドウ(内側)の設定

iqe_009_6

  • 描画モード:通常 白
  • 不透明度:86%
  • 角度:120度
  • 距離:3px
  • チョーク:0%
  • サイズ:5px

ドロップシャドウの設定

iqe_009_7

  • 描画モード:乗算 黒
  • 不透明度:60%
  • 角度:120度
  • 距離:0px
  • スプレッド:14%
  • サイズ:18px

iqe_009_8

模様を付ける

このままでも良いですが豪華さを出すため、画像を用意して縁に模様をつけてみます。
iqe_010
フリーのフレーム素材などを使用するのも良いと思います。

円形枠の上に画像を移動しサイズを調整します。円形枠のレイヤーにクリップし、レイヤーの描画モードと不透明度を設定します。

  • 描画モード:オーバーレイ
  • 不透明度:50%


これで円形枠の完成です。豪華ですね。

タイプを表す石を作成

楕円形ツールを使って円形枠の上に小さい円を作成をします。色は今回は青で作成しましたが他の色でも問題ありません。
iqe_011

石を装飾する

宝玉のようなイメージでスタイルを設定してきます。

設定するスタイルは以下です。

  • シャドウ(内側)
  • 光彩(内側)
  • グラデーションオーバーレイ
  • パターンオーバーレイ
  • 光彩(外側)
  • ドロップシャドウ

◆立体感を出すため、グラデーション、光彩(外側)、ドロップシャドウを設定

グラデーションの設定

iqe_011_1

  • 描画モード:オーバーレイ
  • 不透明度:70%
  • スタイル:円形

光彩(外側)の設定

  • 描画モード:ソフトライト
  • カラー:白
  • テクニック:さらにソフトに
  • スプレッド:14%
  • サイズ:13px
  • 輪郭:アンチエイリアス
  • 範囲:53%

ドロップシャドウの設定

iqe_011_3

  • 描画モード:乗算 黒
  • 不透明度:80%
  • 角度:120度
  • 距離:0px
  • スプレッド:34%
  • サイズ:8px

◆質感を出すため、パターンオーバーレイ、光彩(内側)、シャドウ(内側)を設定

パターンの設定

iqe_011_4

  • 描画モード:乗算
  • 不透明度:33%
  • パターン:雲模様
  • 比率129%

光彩(内側)の設定

iqe_011_5

  • 描画モード:オーバーレイ
  • 不透明度:92%
  • カラー:白
  • テクニック:さらにソフトに
  • ソース:エッジ
  • チョーク:1%
  • サイズ:59%
  • 輪郭:アンチエイリアス
  • 範囲:65%

シャドウ(内側)の設定

iqe_011_6描画モード:覆い焼きカラー 白

  • 角度:120度
  • 距離:0px
  • チョーク:20%
  • サイズ:46%
  • 輪郭:アンチエイリアス

iqe_011_7
何かしらの力を秘めていそうな雰囲気になりましたね!

ブラシでハイライトを置く

ソフト円ブラシなどでハイライトを置くとより質感がでます。

輝きが眩しいですね。

 

タイプを表すアイコンをクリップ

お好みのアイコンをレイヤーにクリップします。

iqe_012
光彩やシャドウなどお好みのスタイルを試してみてください。

カード枠の完成


これでカードの枠が完成しました。長かったですね!お疲れさまでした。

ベースの色や境界線の色を変更すると差分の作成もできますので、ぜひお試しください。

iqe_011_etc

あとは皆さんの推しメンの画像を入れるだけです。

iqe_014

ええ、虚しいですね!

 

では、良きソシャゲライフを〜。

 

編集部オススメ

  • このエントリーをはてなブックマークに追加

あわせて読みたい記事

この記事を書いたメンバー

iqe

iqe

Designer

ゲームが好きです。積みすぎて消化しきれず絶望中。

ドワンゴデザイナー メンバー募集 ! !