技術書典7に出す予定の新刊『Math Poker Girl』の表紙を作ってみた。
イラスト描けないのに頑張って作ったので、そのメモがてら、どうやって作ったのかを書いてみたい。
ベースの作成
まずはベースの作成。
これは『数学ガール』のデザインをパクリ参考にして、Graphicで作ってみた。
ちなみに、タイトルに使ってるフォントは、ネットで見つけたSpinweradというフリーフォント。
OpenFontLicenseというライセンスで頒布されていて、フォント自体を販売するということをしない限り、自由に使えて(商用も可)、再頒布も可能みたい。
あと、オリジナルのデザインだと、下の方が空いていて帯でアオリが追加されてるんだけど、帯をつけるのは大変だし、かといって、「なんちゃって帯」デザインにするのも微妙だったので、グラデーションで誤魔化してアオリを追加してみた(^^;
イラストの作成
ここからが大変だったところで、なにせ自分はイラストが描けない・・・
いや、いろいろ描いてはいるんだけど、ねw
イラスト、上手くなりたいなぁ・・・
ということで、以下の手順でなんとかイラストを用意してみた:
- 欲しい構図の写真を撮る
- 線画っぽくするアプリで加工
- プリントしてトレース
- 鉛筆で陰影つけたり変更したり
- 写真に撮ってデータ化
- 線画っぽく加工
1. 欲しい構図の写真を撮る
頭の中にはイメージがあるのだけど、その3次元の構図を2次元に落とし込めなかったので、欲しい構図を実際に3次元で作ってみて、その写真を撮ってみた。
それがこちら:
ガルパンの島田愛里寿嬢(水着ver.)w
いやー、ピッタリなフィギュアがあってよかったw
2. 線画っぽくするアプリで加工
このままだとさすがにトレースも難しいので、線画っぽくするアプリを使って加工してみた。
これでパラメータをいじって出した画像が、こんな感じ:
うん、まぁ、構図は分かるよね?
3. プリントしてトレース
これを一旦プリントして、紙を重ねてトレース。
トレース台とか持ってなかったけど、窓に紙を押し付ければ、外の明るさでけっこう普通にトレースできるのね。
4. 鉛筆で陰影つけたり変更したり
そこから、鉛筆で陰影をつけたり、欲しいイメージに合わせて変更したりで、出来上がったのがコレ:
島田愛里寿どこいったw
うん、イメージしてたのがFateのライネス ・エルメロイ・アーチゾルテ嬢だったから、ちかたないね。
5. 写真に撮ってデータ化
これを再び写真に撮ってデータ化し(スキャナ? 知らない子ですね・・・)、表紙で使えるように加工しようとした。
このとき、さっきの線画っぽくするアプリとか、他の画像加工アプリ(Waterlogue)も使ってみたんだけど、あまりいい感じに出来なかった。
6. 線画っぽく加工
どうしたものかと困ったんだけど、FireAlpacaで上手いこと出来た。
まず、現状の写真データだと何が困るのかというと、以下のようなこと:
- グレースケールじゃなくて色味が乗ってる
- 背景部分がアルファで抜けてない
- 線の色を表紙に合わせられない
これらを以下のようにして解決していった。
まず、FireAlpacaを起動し、必要な部分だけ切り抜いた写真を読み込ませる。
そして、メニューから「フィルタ」-「線画抽出」を選択し、パラメータをいい感じのところ(山になってるところあたり)にして「OK」。
すると、こんな感じになる:
線の濃淡がアルファとして抽出されている感じっぽい。
(ちゃんとは調べてない)
そしたら、下に背景のレイヤーを用意し、白く塗っておく。
これ、背景の部分がちゃんと透明に抜けてない(アルファが0%になってない)ので、消しゴムツールを使って背景部分をゴシゴシと消していく。
頑張って消すと、こんな感じになる:
そして、レイヤーを8bitレイヤーに変換。
8bitレイヤーというのは、アルファ値のみ持ってるレイヤーっぽい。
他のレイヤーのマスクなどに使える。
レイヤーを変換するには、メニューから「レイヤー」-「変換」-「8bitレイヤーに変換」を選択する。
あまり変わってないように見えるけど、赤丸で囲ったところで8bitレイヤーになっていることが分かる。
あとは、下にレイヤーを用意して、線の色にしたい色で塗っておく。
そして、上の線画レイヤーを選択して、メニューから「レイヤー」-「変換」-「ステンシルレイヤー」を選択すると、こうなる。
おぉ、いい感じ!
イラストの追加
あとは背景色の白のレイヤーを見えなくしてPNGで書き出し、Graphicで作っていたベースに取り込み。
サイズを調整し、ブレンドを「乗算」にしてやれば、こんな感じになる:
これをPNGに書き出したのが、こちら:
なかなかいい感じに出来たのでは!?
今日はここまで!