こんにちは。
グラフィックデザイナーの大鹿です。
私の主業務はクラッシュフィーバーのアプリ内外で使われる
「バナー」制作ですが次いで頻繁に作るモノがあります。
それは「シルエット素材」です。
シルエット素材は文字通りキャラクターイラストをシルエット化したものです。
最高難易度クエストのバナーやお知らせ記事内でよく使用されます。
今回はそのシルエット素材を作る行程をご紹介したいと思います
1.シルエット化するイラストpsdを用意
今回、解説用にシルエット化するのは最高難易度ボスの一人「織田信長」です。
デザイン、性能ともにユーザー人気の高いキャラクターです。
2.光彩エフェクトを取り除く
クラッシュフィーバーのキャラクターイラストは
すべてのフチに「光彩エフェクト」が施されています。
これらはシルエット化にあたり輪郭がボケてしまうので取り除きます。
上図はキャラクターやエフェクトの周囲にあった「光彩エフェクト」を
取り払ったものです。
3.余分なエフェクトイラストを取り除く
キャラクターの周りに張り巡らされるエフェクトイラストは
動作感や空気感を表現する大事な部分です。
とはいえ、シルエット化するとキャラクターの輪郭が隠れてしまうため
一部を残して取り除きます。
4.シルエットのベースカラーを配置する
キャラクターのレイヤーを統合し、上からグラデーションレイヤーを重ねます。
クリッピングマスクでグラデーションレイヤーを切り抜いたら
乗算もしくは不透明度90%程度に設定して少し元絵が見えるようにします。
ついでに横線パターンを追加して「走査線」っぽく見せたりします。
また、キャラクターのシルエットをより目立たせたり
全体のバランスが崩れないようにエフェクトの一部はシルエット化せずに残します。
5.顔部分に濃い色を配置して隠す
ベースカラーの上に新規レイヤーを作成します。
円形グラデーションツールでキャラクターの顔を中心に
不透明度100%のグラデーションを配置します。
色は黒だったり、ベースカラーをより濃くした色を使用します。
これで明度を上げられたりしてもキャラクターの顔だけは隠し通すことができます。
さらに奥行き感も演出できます。
6.目を光らせる
シルエット化させるキャラクターは大半が最高難易度ボス。
強敵感を演出するためにも、目を光らせます。
場合によっては口も光らせたり、目の残像を描き入れたりもします。
7.隙間を塗りつぶす
線画と塗りの間など、キャラクターイラストには
拡大しないと見えないような隙間がたくさんあります。
普段は光彩エフェクトやサイズ感のおかげで目立たないのですが
色を載せてシルエット化すると、隙間が白い筋となって見え始めます。
↑隙間どころか穴が開いているケースも...
↑よく見ると武器周辺にも隙間がたくさん...
手間ですが、下側に新規レイヤーを作成して塗りつぶします。
隙間を全部埋めれば、シルエット素材の完成です。
最後に...
シルエット素材はクラッシュフィーバーがスタートしてから
小さく地味な改修を重ねて今に至ります。
「元絵を少し見せたほうが、顔が気になって期待感が上がるかもしれない」
「走査線っぽいエフェクトがあったほうが世界観にあっている」
「エフェクトを少し残したほうがシルエットがもっと目立つ」
ただのベタ塗りでも良かったのかもしれません。
しかし、クラッシュフィーバーのデザイン感とマッチするように
ユーザーの目にもっと留まるように、面白そうと思ってもらえるように。
なんてことのない素材の一つですが、キチンとこだわって作ることが
大事なのだと信じて、作成しています。
もし気が向いたらお知らせ欄にいるシルエットを眺めて
どんなキャラクターなのかを妄想していただけると幸いです。