![見出し画像](https://assets.st-note.com/production/uploads/images/113307780/rectangle_large_type_2_6a6edcffa2b570cfafee34fe7b0c26b6.png?width=800)
【PS】カードフレームの作り方
ゲーム系出身のデザイナー兼イラストレーターのスミ マミさんに、ゲームUIデザインレシピの記事を依頼し、作成していただきました!
お題は、カードフレームの作り方になります。
Adobe Photoshop 2023を使用して、作成しています。
有料版は、ページ最下部からPhotoshopデータをダウンロードすることができます。
Illustratorデータ,キャラクターの立ち絵イラスト,背景イラストは
付属しておりませんのでご注意ください。
キャラクター立ち絵素材
©ジュエルセイバーFREE [ https://jewel-s.jp/ ]
カード・サムネイル背景素材
©七三ゆきのアトリエ https://nanamiyuki.com/
01|カードフレームの作り方
STEP1│形をつくる
![](https://assets.st-note.com/img/1691972084592-Ym53CVcSGL.jpg?width=800)
今回はファンタジーだけど、あっさり目でシンプルなフラットの枠を
作っていこうと思います。
私個人の印象ですが、
ここ最近ファンタジーが舞台のゲームでも
ベベルエンボスをがっつり使った、
煌びやかな金属フレームより、シンプルかつフラットな
デザインが多く採用されている気がします。
私はIllustratorで形を作りました。(PhotoshopのシェイプでかいてもOKです)
![](https://assets.st-note.com/img/1691972084560-7WHAmk9e7a.jpg?width=800)
形を作る上でのポイントを2つ解説します。
角を凹ませる
Illustratorでは、四角を作った後にoptionで角を押すことで、
簡単に角を凹ますことができます。
角を凹ますと、「それっぽく」なりますよ。
(Photoshopでも「CornerEditor」のようなスクリプトが
あれば似たような枠作れます。)うっすら模様をひく
ゲームUIはキャラ名が可変するため、文字数によっては背景が
寂しくなってしまうことも。
そんなときは下地に丸や四角など簡単な図形を置きましょう。
また、今回はうっすら斜線のパターンもひいて、ディティールもUPしました。
ここから先は
¥ 800
この記事が気に入ったらサポートをしてみませんか?