銀の月動画計画mobile■Photoshopでセル画

Photoshopでセル画

デジタル彩色でアニメのセル画っぽい塗りをするときの主線や色の扱いについて述べていきます。

1　二値化の利点と欠点

「動画下準備」アクションでは主線およびシャドウ・ハイライトの指定線を二値化していました。これは以下のような利点があるからです。

真っ黒で均一な線を得ることができる。
修正時は鉛筆ツールでドット単位での修正になるので、仕上がりが個人の筆圧などに左右されない。
色を塗りつぶすとき、線と色の間に隙間ができない。
色数が少なく、ベタ面が多くなるので圧縮時にファイルが軽くなる。
塗り色の修正、線の色トレスが容易。

しかし二値化には問題点もあります。

ギザギザが目立って格好悪い。
線がくっきりしすぎて、線の味を殺してしまう。

ということです。たくさんの絵を均質に描かなければならないアニメの場合や、静止画であっても均一な線であることが味であるキャラクターならばそれでもいいかもしれませんが、緻密な書き込みや線の入り抜きで表現したいものがある場合には二値化は適当ではありません。表現したいものに応じて主線の抽出方法や処理方法を変えましょう。

2　ギザギザが見えるのを避けたい

アニメの場合、主線は二値化を推奨します。作業量が大幅に減るからです。ただ、主線がギザギザなのはかっこわるいので、なんとかしたいと思います。

2.1　作業時高解像度→縮小する方法

私もこの方法をとっています。スキャン（または主線の描画）・着色までは、縦横比がアニメに使うサイズの倍ないしそれ以上の大きさで二値化して作業し、作業終了したらアニメに使うサイズに縮小するのです。または、動画編集ソフト上で縮小します。
仕上がりの倍くらいで作業する人が多いです。私は霊珠１話～3話では、仕上がりのサイズの5倍で作業していました。高解像度のほうが線が途切れにくいのと、拡大していろいろ使いまわせるからですが、彩色スタッフには不評だったので、霊珠4話からは2倍サイズに変更しました。

なお縮小するとき、アンチエイリアスをかけない設定で縮小すると、主線はギザギザのままになります。それだと高解像度で作業する意味がないので、Photoshopのように縮小時にアンチエイリアスをかけることのできるソフトを使いましょう。

photoshopで50%縮小（バイキュービック法）

2.2　主線をなじませるソフトを使う

二値化した状態で作業したのち、画像処理ソフトを使って主線をなじませます。

2.2.1　角滑

自主制作アニメ作家等から支持されている素晴らしいフリーソフト。bmp画像を読み込んで主線をなじませます。残念ながら公開停止されてしまいましたがいちおう参考に載せておきます。

こんなかんじになる
（webページを保存するサイト、InternetArchiveにてダウンロードできるようです）

2.2.2　PhotoshopCS

フィルタ「ぼかし（ガウス）」をかけるとこんなかんじに全体がぼけます
まあ、数値をうまく調整すればなんとかなる鴨

フィルタ「ぼかし（レンズ）」をかけるとけっこういいかんじになります

参考までに、フィルタ「ぼかし（詳細）」をかけると主線以外の境界がボケる

2.2.3　Jagi

ねこらさんが開発中のツール。
こちらでダウンロードできます
Jagi （新・ねこら対策要塞秘密研究基地本部）

ジャギ

こんなかんじになる

2.2.4　その他同様の処理ができるソフト

アニメ製作用のツールだと同様の処理が標準装備されているのが多いようです。以下のサイトなどで詳しく解説されています。
「アンチジャギツール」を羅列してみる（ねこまたや）

3　主線を二値化しない

二値化というのは階調をとばすということですから、線の味が死にます。
入り抜きを重視した、静止画イラストの場合は、二値化しないで作業することをおすすめします。

3.1　AniLaPaintを使う

AniLaPaintはアニメの彩色に特化したソフトです。
シェアウェアですがβ版はフリーで、有料化前に開発が中断してるようです。
こちらでDLすることができます。
アニメ彩色ソフトAniLaPaint βテスト版 (おのぎん's ほ?むページ)

AniLaPintは実線を二値化せず、色部分だけ二値化して彩色し、
塗り残しの補正やドットノイズの自動削除などもしてくれる素晴らしいツールです。
ほんとにセル画っぽい絵がつくれるので、これまでフリーソフトで絵を描いてた方はお試しください。

ただ、photoshopに慣れた人には、ツール類の動作は使いづらいかも......？

3.2　Photoshop上でセル画っぽい絵を描く

元画像

3.2.1　主線の抽出-g_action4

g_action4を使って主線を抽出します。
g_action4は私が用意したアクション集です。ここから拾ってください。
で、線の抽出（非二値化）【C+F5】を実行します。

レイヤー１が主線＋透明部分になっている

拡大してみるとアンチエイリアスかかってるのがわかります

線を修正するときは、ブラシツールと、消しゴムツールのブラシモードを使ってください。
鉛筆モードは×

g_actionではいまいち思った通りの線にならない、という方は、
photoshopでの主線の抽出を扱っているサイトを紹介いたしますので
そちらをお試しください。

『主線レイヤーの透明化』（『南の色白』天ノ原シリウス☆のスケッチブック）
Photoshop(フォトショップ) CG講座人物の着色方法（Pastime）
線画だけのレイヤの作り方（outsider reflex）

3.2.2　地の色を塗る

色指定ファイルを開き、「色」レイヤー上でパーツ毎に塗り分けます。

他に表示するレイヤーは「主線」のみ
ツールは塗りつぶしツールで、
塗りつぶしツールオプション

選択する色の範囲0
アンチエイリアス
すべてのレイヤーを使用する
隣接
のすべてにチェック

地の色で塗りつぶしたところ

3.2.3　拡張2px

この状態ですと、線と地の色の間に多少の隙間があいています。

解像度によっては目立たないのでこのままでもよい場合もあります。
気になる場合は以下の作業を行います。

まず、同じ色の範囲を選択します。
ツールは自動選択ツールで、
自動選択ツールオプション

選択する色の範囲0
アンチエイリアス
すべてのレイヤーを使用する
隣接
のすべてのチェックを外す

選択したら、スポイトツールで描画色を選択した色に設定し、
「色」レイヤーがアクティブになっていることを確認して、
g_action4の拡張2px【S+F2】を実行します。
すると選択範囲が外側に2px拡張されて塗りつぶされ、選択が解除されます。

2pxというのは350dpi、私の線の太さでちょうどいい設定なので
作業している解像度によっては1pxとかに改造してください。

すべての色に対して拡張2px【S+F2】を実行してもまだ隙間があいている部分は
鉛筆ツールを使って、線からはみださないように穴を埋めてください。

先っちょ

こういう部分ね

3.2.4　ハイライト・シャドウをパスを使って塗る

ハイライト・シャドウは線を抽出せず、原画の線を乗算で重ねてパスでなぞって清書しながら塗ると、階調を保ったまま美しい仕上がりになります。

まず、原画のレイヤー（ここでは「元レイヤー」）を一番上のレイヤーにし、モードを「乗算」にします。

線が見えづらい場合は、色のレイヤーの透明度を下げてください。

ハイライト、シャドウを塗るレイヤーは地の色とは分けておくと、修正が容易になります。

まず地の色のレイヤー上でパーツ毎に範囲選択し、
パスツールを使って、塗る部分を囲みます。

パスは一見とっつきづらいツールですが、線を引くならともかく原画をなぞって色を塗る程度ならてけとーでも割とそれなりに見れたりします

始点をちょん、と左クリック