サイトバナー作ってみた

サイトバナーとは！すなわち！ウェブサイトの顔である！
顔が無い人間はいないのだから、須らくウェブサイトは直ちにバナーを作る必要がある！

バナーサイズ

個人サイトにおける最も一般的なバナーサイズ、それは「200×40」!らしい！理由はわからん。
今どきのバナーはもっとデカくてフレキシブルにデザインが可能だが200×40、昔のサーチエンジンに登録するときとかの規定サイズはだいたいこれ！な気がする。

200×40の真っ白なキャンパスに、サイト名とかロゴとかイラストとか載せて個性を出していくわけですがこの200×40が中々に曲者です。
まあ縦横比5:1で明らかに横に長くて、そもそも解像度が低くて画質ガビガビ。

使う画像

イラストが描ければいいのだけれど、残念ながら先天的にアレなのでプロの描いたイラストを、トレスしてパロって技術と経験にタダ乗りすることにします。

serial experiments lainのキャラクター原案、安倍吉俊氏が岩倉玲音を描いた名画をもとにつくります。

絶版でとんでも無いプレミア価格が付いているlainのps1ソフトのジャケット。
画集「An omnipresence in wired/『lain』」にも乗ってた気がする。ちなみにこの画集もプレミアがついてる。
この玲音の知世ちゃんverを作りたいと考えています。

3Dモデルを用いて補完する

このlainのイラストは右腕や胴体部分は描かれていないので、バナーに用いる際に不便だと考えました。
そこで3Dモデルを使います。クリスタに最初からついてるやつを使ってなんやかんやしたのがこれです。

すごい！3Dモデルすごい！
ただこれだと小指が見切れたままなので更に手を加えます。

3Dモデルの指は意外に柔軟性が無いので、指だけ別にモデルを動かす必要がありました。

知世ちゃんを合成

今となってはどのようにして出来たのかが分からないlain×知世イラストのベースが出来上がりました。

色塗り

色塗りの経験もありませんが、イラスト完成後解像度を200×40まで下げることを考えるとバケツツールを使って仕上げても様になると考えてました。当初は。
しかし！ここで友人のナナシマが色塗りを買って出たのです。

ばばーん。そんな訳でナナシマくんのおかげで色塗りの課題もクリアー。あとはバナーデザインを考えるだけ！

ナナシマについて

色塗りをしていただいたナナシマくんもなんとサイトを持っているようです。
ナナシマくんは音楽やイラストと割と多彩な趣味をお持ちなので、この公式のキャプチャ画像でごっこ遊びをしているようなサイトよりもよっぽど有意義なコンテンツを発信しています。

SEVES-ISLAND -平成に残る最後の秘境
https://nanashima.vivian.jp/

バナーデザイン

当然のごとくデザインも出来ないので、イラスト×サイト名だけで勝負を仕掛けます。
となると拘るべきはサイト名に使うフォントになります。

そこで出てくるのが「Love Letter Typewriter」。
これはlainに使われているフォントでlain脚本家の小中千昭氏のHPで無料配布されています。

LoveLetterTypewiter – A free-ware font that had been used in “lain”. | resources – serial experiments lain
http://www.konaka.com/alice6/index2.html

Alice 6 | 特殊脚本家 小中千昭の網頁
http://www.konaka.com/

こんなかっこいいフォントが公式から配布されているのです。
これを使えばサイト名を大きく表示させてもサマになると考えました。

初めは、このlainのイラストの文字を描いているような姿を生かした形にしようとしました。

200×40には向かない案だったようで、右に馬鹿みたいにスペースが余ってしまいました。
この横長をデザインするには、知世ちゃんとサイト名をもっと配置させる必要がありそうです。
でも知世ちゃんの全体が写っていないと、せっかく3Dモデルで足りない部分を補完した意味がなにより色を塗ってくれたナナシマくんに申し訳が立ちません。
どうにかイラスト全体を移す構成でデザインを考えなくてはなりません。

完成

完成しました！
イラストは結局かなりトリミングされました。
頑張って服とかも塗ってくれたのに全カットです。草。

サーチエンジンに登録する予定は今のところないので、tomoyo.loveのトップページとナナシマくんのサイトトップにとりあえず鎮座させて置きます。
中々気に入ってます。知世ちゃんかっこいい。