【PS】本アイコンの作り方

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

お題は、本アイコンの作り方になります。

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

有料版は、ページ最下部からPhotoshopをダウンロードすることができます。今回はラフなど途中経過のデータも入っています。

01｜本アイコンの作り方

STEP1｜ラフを描く

今回はPhotoshopを使用しています。
CLIP STUDIOなどのイラスト制作ソフトでも制作手順と考え方は同じです。
テーマはファンタジーの世界観にあった「本」のアイテムアイコン素材でしたので以下の点を意識してラフを進めます。
1・シルエット、形状
2・世界観にあった模様や飾り
3・アイテムアイコンを前提とした絵の密度
この三点はそれぞれ「使用用途にあっているか」「世界観やテーマにあっているか」「視認性が高いか」をクリアするための項目でもあります。
依頼で絵の仕事を受ける際の判断基準としておすすめです。

1・シルエット、形状
わかりやすく閉じた状態の洋書にしました。
本の素材といわれるとそんなにシルエットの種類は無いように思えますが、開いた状態、鍵付き、和書ならば右綴じ等選択肢はあるのでテーマにあるシルエットを選んでください。

2・世界観にあった模様や飾り
ファンタジーの世界の本ということで革張りの洋書イメージで、エンボス加工風の模様を入れました。具体的な指定もなかったので汎用的に使えそうな模様にしています。

3・アイテムアイコンを前提とした絵の密度
スマホのゲームなどでよくあるアイテムのアイコンサイズは
128×128、256×256、512×512あたりになります。
基本的に縮小されるので、あまり繊細な塗り方や模様はつぶれてしまいます。今回は２の条件と合わせて視認性が下がらないように塗の密度のバランスを取りました。

STEP2｜塗の流れ

ラフを元にカラーの本を描きます。
デザインのおおよそはラフの時点で出来ているので新たに考える事としてはカラーリングですが、今回はオーソドックスな赤茶の革張りに金の装飾にしてみました。
カラーの作業でラフの時に曖昧だった模様や形を整える作業もします。

塗の流れ
1・面でのパーツごとの塗分け
2・簡単に凹凸の陰影入れ（最後に整えるのできっちりいれない）
3・表紙にラフで考えた模様を入れる
4・表紙の模様の下塗り（仕上げ時に整えるのでここでもバランスを見る程度の塗）
5・表紙の模様の凹凸が出るような陰影を入れつつ、形を整える
6・金装飾のラインを入れる
7・金が入って物足りなくなった背表紙にフレネルをいれる
8・表紙に赤系のライトを当てる

STEP3｜塗をつめる