デザインメモ

蛙の同じ轍は踏まぬためのメモ Vol.1 〜Twitterプロフィール画像編〜

投稿日:2016年11月1日 更新日:

この記事はヤマズゲームスのアートワーク担当・蛙(弟)が「同じ轍を踏まぬために」書き残しておきたい経験譚を記したものです。理系の兄に「おまえの記憶媒体フロッピーディスクかいや!」と罵倒されるくらい記憶力が乏しく、「あ、そやった・・・」が口癖の僕にとってこの記事が今後何よりの助けになることを祈って。。。

下絵をもとに線画を描いた話

下絵をスキャンし、その画像をPainterで開く。今回のようなイラストちっくな絵ならば下絵の線を完璧になぞるように書く。なので紙に書く段階でかなり綺麗な状態に仕上げる。Painter上でラフな下絵を描いて整えていくというやり方をしている絵師さんは多いが、僕の場合ラフな下絵をもとに出来上がる絵は、やはりラフになってしまうため下絵の段階で本気を出すのだ。

今回のミスで痛感した。65%くらいの出来でスキャンして書き始めてしまったのだ。その絵がこちら。

スクリーンショット 2016-10-26 17.21.06

清書していて気がついた。まだまだ絵を描くことに慣れてない人は下絵をどれだけ薄くしてもそれに引っ張られるのだ。歌のハモりができない感覚に似ている。僕はまだハモれない。

使う筆は「スクラッチボード」という筆。ペン。これは漫画家の使うGペンと同じだと言われている。

このペンを透明度100%で使う。

今回の絵では透明度65%で書いていた。これが後に大問題を引き起こすことを僕はその時まだ知る由もなかった。

手書きの絵をベクター化(アウトライン化)した話

線画が描けたらこれをPhotoshop形式で保存する。そしてIllustratorを開き.psdファイルを開くと、なんかいろいろ出てきて全部OKしたら開ける。Illustratorで新規ドキュメントを作り(新規アートボードを作り)、そこに線画のレイヤーをコピペ。コピペしたものを選択状態にすると以下の画像のボタンたちが上のバーに出てくる。

画像トレース

この「画像トレース」というボタンが世に言うアウトライン化を施してくれる。プルダウンメニューのモードを選んでクリックするとバーの表示がこんな風に変わる。

プリセット

プリセットと書いてあるボタンのところで別のモードに変えられる。この段階でモードを全部試して一番ベストな出来のやつにする。決まったら「拡張」を押して完了だ。

さてここで線画を清書する際のペンの透明度問題が発生した。65%で描いた線は部分的に濃さが違う。このペンタブの見事な筆圧感知機能のおかげで薄い線の部分がしっかりとトレースされないのだ。されたとしてもパスごとに色が若干違ったり、一本の線が3つに分割されていたりと、個性的なパスが豪快に出現する。ということで、なるべく同じ濃さで描いておくべきなのだ。この修正に製作時間の約7割が費やしたといっても過言ではない。

ちなみにだが、そもそもIllustratorのブラシで直接イラストが描ける人はこのような問題とは一切無関係である。

アウトライン後の修正作業の話

さてここからが仕上げ。というか、始まり?線画をアウトライン化すると当然手書きの線が少しなめらかになって一気にイラスト感が出る。ここで嬉しくなって満足してはいけない。

それは寝起きの女性が寝癖を整えたくらいの変化でしかない。

psd ani

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓illust ani

今から洗顔、朝食、歯磨き、化粧、着替え、締めに玄関先の鏡でチェックして完成である。

洗顔(ー)、朝食(+)、歯磨き(ー)、化粧(+)、着替え(カラー)、玄関先チェック(評価)である。

+とーは線を書き足したり、減らしたり。オールバックの髪の生え際の調整で+ー(プラマイ)。目のハイライトとシワと歯で+ー(プラマイ)。

絵のタッチによるのだが、今回の絵は両端がシュピンって尖ってるやつにしたかった。なので「塗り」はナシにして「線」の色を黒に設定し、線のサイズや線の種類(プリセット)を変えて描いた。

塗りと線 線の設定

どうしても手書き感のある線(筆圧で変わる線)が描きたいと思ったら「塗りブラシツール」を使う。このツールのアイコンをダブルクリックしたら何やら設定画面が出てくる。ここでこんな感じに設定した。

塗りブラシツール 塗りブラシツール設定

サイズの項目の右側の変位をサイズと同じ数字にすれば筆圧の幅が広がる。多くの絵師はこの塗りブラシツールで下絵を描くらしい。

色ぬりの話

カラーはこのサイトを使っている。NIPPON COLORS – 日本の伝統色

基本僕思考法色濃く影響を与えいるのが日本食日本色だ。それゆえ兄に黙って色は全て日本色を取り入れている。あと気にしているのは一つの絵に3色までとか、色相環の類似色&補色にするとかとか。

僕は大学時代カラーコーディネーター検定3級を取得した男である。配色のこだわりを魅せたらそれはもう・・・。(英検5級相当の難易度だということは誰も知らない)まあなんにせよ、三色までルールは世間のオシャレさんが口を揃えて言う色理論なので間違いはない。

背景の話

最後に背景なのだが、こればっかりは今回はノープランだった。見て分かる通り四角と四角と立体的な加工を施した四角だ。

Twitter-prof-YG

Illustratorには塗りつぶしというものがないので、塗りつぶしたい箇所の形を作って「塗り」で色付けするしかない。(これも僕にとっては戸惑いの一つだった。「アートボードの塗りつぶし方法」で調べたが出てこないので。)

あとはフォントの立体加工。一番上のメニューバーの「効果」の欄にある「3D」「押し出し・ベベル」を使った。注意点はプレビューボタンを最終確認時以外は押さないこと。3D加工という重加工をしているので、PCのスペックによってはカッチカチに固まってしまう。頻繁に上書き保存する癖のない僕は目の前の固まった画面同様、顔面を微動だにさせずに pray to the screen。1分後動き出した。僕は安堵の息を漏らした。

しかしなぜかこの処理をしたファイルは、一度閉じてまた開く時にかなりの時間がかかる。それほど重いファイルでもないのに。「プレビューを制作しています」、というあの恐怖映像が再び画面上に姿を表すのだ。メモリも増設したのにまだ足りんというのか!

以上がTwitterプロフィール画像製作時に犯したミスと覚えておきたい事柄でした。

kawazu
アートワーク担当。 ヤマズゲームスの弟の方。

-デザインメモ
-, ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

box_art-01

蛙の同じ轍は踏まぬためのメモ Vol.2〜ボドゲの立体箱絵パッケージデザイン編〜

illustrationは便利。ですが、どうにも多機能すぎて記憶の容量が足りません。てなわけで、制作にかなり苦労した、ボードゲームの「立体箱絵」の作り方を”自分のために”メモしときます。 利用ツールは …