【PS】カードフレームの作り方

ゲーム系出身のデザイナー兼イラストレーターのスミ マミさんに、ゲームUIデザインレシピの記事を依頼し、作成していただきました！

お題は、カードフレームの作り方になります。

Adobe Photoshop 2023を使用して、作成しています。

有料版は、ページ最下部からPhotoshopデータをダウンロードすることができます。
Illustratorデータ,キャラクターの立ち絵イラスト,背景イラストは
付属しておりませんのでご注意ください。

キャラクター立ち絵素材
©ジュエルセイバーFREE　[ https://jewel-s.jp/ ]　

カード・サムネイル背景素材
©七三ゆきのアトリエ https://nanamiyuki.com/

01｜カードフレームの作り方

STEP1│形をつくる

今回はファンタジーだけど、あっさり目でシンプルなフラットの枠を
作っていこうと思います。

私個人の印象ですが、
ここ最近ファンタジーが舞台のゲームでも
ベベルエンボスをがっつり使った、
煌びやかな金属フレームより、シンプルかつフラットな
デザインが多く採用されている気がします。

私はIllustratorで形を作りました。(PhotoshopのシェイプでかいてもOKです)

形を作る上でのポイントを２つ解説します。

1. 角を凹ませる
   Illustratorでは、四角を作った後にoptionで角を押すことで、
   簡単に角を凹ますことができます。
   角を凹ますと、「それっぽく」なりますよ。
   （Photoshopでも「CornerEditor」のようなスクリプトが
   　あれば似たような枠作れます。)
   

2. うっすら模様をひく
   ゲームUIはキャラ名が可変するため、文字数によっては背景が
   寂しくなってしまうことも。
   そんなときは下地に丸や四角など簡単な図形を置きましょう。
   また、今回はうっすら斜線のパターンもひいて、ディティールもUPしました。