イラストを描こう 実践編2 (チャンネル不使用バージョン)

こちらもイラストを描く手法ですが、「実践編1」ほど手間が掛からない方法かもしれません。
また、こちらの手法はチャンネルを使用しません。Photoshop 4.0LE や同 5.0LE などでも実行できるはずです。
ただし、作者は LE 版は持っておりませんので、確認できません。どなたかレポートをお願いしたいです(^^;


ただし、良いことばかりではなく、こちらの方法のポイントが「原稿を大きく取り込むこと」なので
実践編1よりもメモリがより多く必要になります。快適に作業するにはメモリ増設が必要になるかもしれません。
また、途中の行程のせいで線が潰れ易かったり、線の滑らかさが失われがちなので、細かい線が多かったり、
微妙な線が必要なイラスト、鉛筆のボウっとした線を生かしたいイラストなどにはやや不向きで、
実践編1よりも修正作業にさらに多くの時間が掛かる場合があるかもしれません。




さてさて、「実践編1」でイラストを完成させた助手ですが・・・・・・・。

[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
博士〜。イラストは描けましたけど、もっと楽な方法はないんですか?
楽をしようとする人生には落とし穴が待っているぞい。
それはそうかもしれませんけど、あの方法だと修正が大変で・・
でもお前のへっぽこマシンでも綺麗に描けたじゃろーが。
へっぽこマシンで悪かったですねっ!
まあ、もう少し楽な方法も無いことはないがのぅ・・・・
なんでそっちを先に教えてくれなかったんですかぁぁぁ(;_;)
メモリも多めに必要じゃし、細い線が多いともっと手間が掛かるかもしれんぞい。
あらま。そんな落とし穴があるんですか( ̄▽ ̄; でも教えて〜(笑)


まずは準備

画材 説明
ケント紙などの白色度が高く、滑らかな紙が向いています。
画材屋さんには漫画用などの専用原稿用紙などもあるらしいです。
プリンター用紙は表面のコーティングによっては掘れてゴミが出てしまい、不向きな物もあります。
筆記具 基本的にはどんな物でもかまいませんが、できれば下絵は鉛筆で描き、
その後は黒インクや墨汁などでペン入れをする方がコントラストの高い原稿になりますので
後の行程が非常に楽になります。

とりあえず必要なのは鉛筆、消しゴム、ペン入れ用のペン、修正液位でしょう。
ペンには様々な種類がありますが、よく使われる物は以下の様なタイプです。
とは言え、最初は細いサインペンやボールペンの様なお手軽なペンでも十分でしょう。

〜 ペンのタイプ色々 〜

線に強弱を出しやすいタイプ

 カブラペン  : ペン先をインクに浸すタイプ(つけペン)の標準的なもの。
  Gペン   : つけペン。カブラペンよりもさらに線の強弱が出しやすい。

同じ太さが引き易いタイプ

 ボールペン  : 安価、入手が簡単でお手軽。太さの種類がやや少ないかも。
  丸ペン   : つけペン。細い線が描ける。線の強弱も多少出せる。
ロットリング  : 製図などに使われるペン。太さに様々な種類がある。高価。

これらは文房具店や画材店などで容易に入手できるはずです。
利点欠点注意点や使い勝手の詳細は漫画の描き方の本などを参考にしてください。

[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
・・・・・・博士ぇ〜。これじゃ実践編1と全く同じじゃないですか?
CG初心者なら紙に描いて取り込む方がやりやすいし、タブレット使いこなせるなら初心者じゃないじゃろ?
それもそうですね。パソコン買ったから絵を描こうって人は少ないでしょうしね。で、どこが違うんですか?
主線の変換方法が違うだけじゃ。
確かに主線の変換が一番の問題ですけど・・・・それだけなのにメモリを沢山使うんですか?
お前、楽がしたいと言ったじゃろーが。シンプルなイラストなら細かい修正作業は少なく済むかもしれんぞ。
ふむう。メモリか手間か・・・どちらかは必要になるんですね。人生そうそう甘くはないわ。
そんなことで人生悟ってどーする(笑) じゃ、今回も素材は ままるん♪さん の原稿で行くか。
人生の真理はあちこちにあるもんですねぇ。・・・で、素材ですけど・・・・使い回しますね(笑)
一部の画像を使い回ししたりもできるからの。
・・・このHPの管理人も楽がしたいんですね(笑)
見てくれる人が快適に読み込めると言わんかっ!・・・本当の内幕を気軽にバラしては長生きできんぞ(笑)

原稿を取り込もう

スキャナ側設定

お使いのスキャナの説明書をよく読んで設定して下さい。
ドライバ(兼 TWAIN インターフェース)はメーカーのHPで最新版の物を使う事をおすすめします。

Photoshop設定

スキャナのドライバをインストールしたら
[ファイル] - [入力用プラグ] - [TWAIN対応機器の選択] で使うスキャナを選択します。
これは最初1度だけ設定すれば OK です。

原稿を取り込む

ガラス面に埃や指紋などの汚れがない事を確認して原稿をまっすぐにセットしましょう。
殆どのスキャナの場合、読み込みをするには
[ファイル] - [入力用プラグ] - [TWAIN32対応機器からの入力] を選択します。
これで取り込み用のインターフェースが起動するはずです。例えば・・・・

●起動中画面 ( Canon ScanGear 使用) はこちら GIF形式 30KB PNG形式 25KB

このときの取り込みの設定は以下のようにします。

解像度 144dpi 以上の任意
イラストであれば 144dpi 程度でも十分綺麗に取り込めると思います。
HPは印刷が前提ではないので、これ以上の解像度で有れば何 dpi でも
不満は出ないはずです。
dpi 値にこだわるよりも最終的な出来上がりピクセルサイズを考えて解像度を決めましょう。
ただし、こちらの方法は途中の行程で細かい線が潰れやすいので
なるべく大きく取り込みましょう。一辺当たり完成サイズの4倍が良いでしょう。
完成サイズが 800 * 600 であれば 3200 * 2400 になるように取り込みます。
1辺が4倍ですから、面積で言うと4*4の16倍になります。
これは、大きく取り込むことで線の潰れを防いだり、
後の行程で縮小してしまう事で微妙な線のずれや線の粗さを目立たなくするためです。

カラーモード グレースケール
この時点では主線だけなので RGB カラーモードで有る必要はありません。
グレースケールで有れば RGB モードよりメモリの消費量が少ないので
大きく取り込んでも快適に作業できるでしょう。
主線を黒以外にしたい場合は彩色の行程の前に色を変えてください。

スキャナに依ってはそのまま PSD 形式で保存出来ない場合があるかもしれません。
その場合は BMP や TIFF などのフルカラーをサポートしたファイル形式で保存し、
Photoshop で開き直してからグレースケールモードにします。


ゴミ消し(準備)

まずはこの取り込みが終わった時点でファイルを [別名で保存] しておきます。
ここまではレイヤーなどもありませんので、[複製を保存] で PSD 以外の BMP , PNG のどちらかの
フォーマットで保存されても結構です。
グレースケールですので色数は 階調数と同じ 256 色しか無いので GIF でも良いのですが、
インデックスカラーへの変換が面倒ですからパス。
JPG はどんな設定でも保存時に画質が劣化するのでこの様な場合では JPG での保存はダメです。

何故ここで保存するかと言うと、もし、加工の行程で致命的な失敗をしたとしても、
また原稿の取り込みからやり直すのは面倒ですからね。その為の保険です。
適当な名前を付けて保存したら加工に入りましょう。

取り込み直後 さて、取り込んだデータには埃などゴミや色むらが
 どうしても出てきてしまいます。
 また、この原稿用紙は枠線を引くための基準線が薄い青で印刷されています。

 左の絵は取り込んだ絵の一部分ですが、
 1.中央上部から左下へ下絵の鉛筆の線
 2.目の下に埃によるゴミ
 3.全体的な背景色(白)の色むらと灰色っぽさ

がそれぞれ発生しています。これらは注意して作業しても発生してしまうものですが、
綺麗なイラストにするにはこれらを消さなければなりません。

(小さくて判りにくい方はこちらを参照してください。JPG形式 34KB

ゴミ消し(実践 その1)

では、ゴミを消すと同時に主線を「黒〜透明」への階調にする下準備です。
現在はグレースケールの画像ですが、これを白と黒の2色しか使わない画像に変換します。

[イメージ] - [色調補正] - [2階調化] を実行します。
すると2階調化する境界のしきい値と言うダイアログが出てきます。
スライダの△マークをマウスでドラッグして白と黒に分けるポイントを調整します。
[プレビュー] のチェックボックスをオフにすれば元の画像が見られますので見比べてみて、
「線がちょっと細くなったな」と、言う辺りを探しましょう。
線がギザギザになったり、かすれる部分が出たりしますが、細部よりも全体を見て決めて下さい。

2階調化
右の画像が2階調化した直後の状態。
これはかなり縮小してあるのでちょっとわかりにくいですね。
画像をクリックすると大きいサイズで見られますので
細かく観察したい方はどうぞ。。
・・・・・これでも線は気持ち太めかもしれません。

さて、これだけで殆ど薄いゴミは消えていると思います。
もし目立つゴミが残っていたら鉛筆ツールを使い、
白でポチポチと塗り潰して消しておきましょう。
必ず鉛筆ツールを使ってください。ブラシやエアブラシなどの
ぼかしが出るブラシツールで塗りつぶすと
この行程を行った意味が無くなってしまいます。

ただし、ここでは細かい修正は必要ありません。
もし明らかなゴミが残っていれば消しておいたり、
この画像では外枠線がありますが、これがやや乱れています。これを修正する程度で十分です。
この作例では右側のキャラクターの汗など、細かい部分がかすれていますが、この程度の線のかすれや
多少の線の潰れは後で修正しますので線のアタリが付けば全く問題ありません。
(この作例でもこの段階では何も修正していません)

階調の変換

2階調化の作業で線がギザギザになっていると思います。
ここでこの画像を黒から白への階調の画像から、黒から透明への階調の画像にしましょう。

レイヤーパレット -画像統合状態-
 まずは画像のレイヤーの名前が [背景] と
 なっているか見てみましょう。
 これは画像が統合されているとこうなっているはずです。
 この状態で消しゴムツールをかけると透明にはならず、
 背景色で塗りつぶされます。

 この先の作業のために画像をレイヤー化しましょう。
 レイヤーパレットをWクリックします。( ← 左の図)
 すると [レイヤー作成] と言うダイアログが
 出てきますのでレイヤー名を 主線 として OK を押しましょう。
 これで画像がレイヤー化されました。
 名前が [背景] から [主線] と変わりましたね?
名前が [背景] ではなく [背景] となっていてもこの先の作業の効率化の為には
レイヤーの名前は変更しておいた方がベターですので、この作業は必ずしておいて下さい。
まだレイヤーはこれ1枚だけですが、この先、枚数が増えて来た時にレイヤーに名前を付けていないと
「このレイヤーは何のレイヤーだっけ?」と言うことになってその確認に手間が掛かります。
作業の効率化の為に名前はきちんと付ける癖を付けておきましょう。

これで階調変換への準備が出来ました。

さて、画像がレイヤー化されたら色域選択で白の部分を選択、もしくは自動選択ツール 自動選択ツールアイコン
[SHIFT] キーを押しながら白の部分を全てクリックします。これで白の部分が全部選択されたはずです。
[編集] - [カット] を実行します。これで白はカットされ、透明になったはずです。
ここで仮の背景色を入れましょう。新しいレイヤーを作り、[仮背景] と言う名前を付けて、
とりあえずは緑色で塗りつぶしてみて、その仮背景のレイヤーを主線レイヤーの下に配置します。

画像に白い色はありませんね?もし残っていたら [主線] のレイヤーに移動してカットします。
残っていなければ仮の背景レイヤーを白で塗りつぶし、次の作業に入ります。

主線はまだギザギザなままですので、主線のレイヤーに戻り、線を滑らかにしましょう。

[フィルタ] - [ぼかし] - [ぼかし(ガウス)] でガウスぼかしを 0.3 〜 1.5 ピクセル程度の
ごく僅かで適度な量をかけ、ギザギザ感が減る程度にぼかします。
具体的に何ピクセルぼかせば良いのかは、ナビゲーターパレットを使い、等倍表示と完成サイズ
(この作例では4倍に拡大しているので 25% )の両方で表示してみて、
どちらの場合でもボケすぎずギザギザ感の少ない、と言うバランスの取れた所を探します。

ここでも線のかすれや潰れなどを優先する事はありません。
この行程はギザギザ感を減らすのが目的ですので、まずはそれだけを主眼に置き作業します。
この作業を行う事で黒と透明だけの画像から、ぼかしたせいで線の縁にある程度の階調が出来て、
線が滑らかに見える様になります。

黒から透明への階調の画像

 ぼかし具合が決まったら、これで黒から透明への階調への
 変換作業は終わりです。
 ただ、2階調化とぼかしを行った過程のせいで
 線が汚くなったかもしれませんが、
 ここでまたもや一旦ファイルを [別名で保存] しておきましょう。

 ナビゲータパレットで完成サイズまで縮小表示してみて、
 線が粗いと感じたらこの段階で細かく修正します。
 線のかすれや潰れ、線の波打ちなどが目立つようなら
 元の線と違和感が出ないようにブラシのぼかしの開始位置を
 調整して線のアンチエリアシングの掛かり具合に合わせて
 塗ったり、消したりすることで修正していきます。
 (←右下部の汗などのかすれた部分を修正中・・・の図)

最初に取り込む時に大きく取り込んでおいた場合は、2階調化した時に線がかすれにくく、
また、ぼかしをかけた時に線が潰れにくく、この段階での修正が必要になり難いのです。
完成サイズの4倍と言う巨大なサイズを基本として取り込んだのはこの修正作業で楽をするためです。

必要な修正が終わったら、主線だけをコピーして新規ファイル(画像モードは RGB カラー、背景は透明)を
作り、そこへペーストします。
ここまで作業していたファイルは[別名で保存] しておきます。
もし、2階調化と主線のレイヤー化した直後の状態が不要だと思ったら普通に [保存] でもかまいません。
どちらの場合でも保存したら、ここまでのファイルは閉じておきます。
ここから先は新規に作った主線をペーストしたファイルの方に手を入れていきます。

残りメモリのチェック

これでやっと主線の一応の完成です(^^)
さて、ここまでの作業ではカラーモードはグレースケールで色情報がなく、
レイヤーの枚数も数枚だったためにメモリの消費量はそう多くなかったと思います。

しかし、ここから先の作業はカラーですし、レイヤーの枚数もかなり多くなります。
1辺を4倍以上で取り込んだ場合はここで完成サイズ、もしくは
完成サイズの2倍まで縮小した方がよいでしょう。

メモリ消費量を少なく抑えたいのであれば完成サイズまで(1/4 に)縮小。
完成サイズの2倍まで(1/2 に縮小)すると塗る際に主線が塗りしろになりますので、塗る作業が楽です。
縮小しないと塗りしろとなってくれる主線も太いままですので、
塗る作業はかなり楽です。ただし、膨大なメモリを消費します。

どれにするかは画像の大きさやマシンの搭載メモリ量と相談してください。
CGをいじるには本当にメモリが沢山必要です・・・(^^;

縮小するならば [レイヤー] - [変形] - [数値入力] [拡大・縮小] に 50% を設定、[縦横比を固定]
チェックを入れ、OK を押して実行します。これで 1/2 まで縮小出来ます。
完成サイズまで縮小するのであれば、これをもう一度繰り返します。

これで主線のレイヤーの大きさは小さくなりました。が、画像のサイズは変わっていませんので、
画像のサイズも合わせて縮小しておきましょう。 [イメージ] - [画像サイズ] で、
数値を入力してレイヤーに合ったサイズに変更します。

いよいよ彩色

では彩色に入ります。
色を乗せる為のレイヤーを新しく作り、主線を利用して範囲選択をして
まずはベースになる色を大雑把に塗って行きましょう。
塗る範囲を選択するのは [自動選択ツール] を使います。
[選択する色の範囲] を 0 、[アンチエイリアス] [サンプル結合] は共にオフの状態にします。

主線のレイヤーを選択し、同じ色を塗りたい部分を [SHIFT] キーを押しながらクリックします。

範囲選択 デフォルト
 ほら、どんどん選択範囲が広がっていきますね?
 まずはこうして大ざっぱに範囲を選択します。
 (← 左の図)

 *この画像は前の実践編1の物をそのまま使い回しをしてるので
 線の太さなど見た目が違います^^;


 しかし、この選択範囲は完全に透明な部分までしか
 選択されていませんので、このまま色を塗ると、
 主線との間に隙間が出来てしまいます。

 きっちり塗れる様に [選択範囲の拡張] をしましょう。
 [選択範囲] - [選択範囲の変更] - [拡張]
 選択範囲を拡張します。その拡張量は主線の中心辺りまでが適当です。
その辺りまで拡張すれば色の境界線は主線の下に隠れて隙間やはみ出しが殆ど出ないはずです。

範囲選択 拡張
ここでは 3 ピクセル拡張してみました。(右の図 →)

*この画像も使い回し・・・^^; 

これで選択範囲が主線の中心部に殆ど重なりました。
こうなれば後は色のレイヤーに戻り
[塗りつぶしツール] で塗りつぶし、[選択範囲を解除] します。
これで主線の真下まで色が回り込み、綺麗に仕上がります。

それではまず右側の謎の生物(笑)のベース色を塗ってみます。
塗ったらはみ出しや塗り忘れが無いかチェックします。
もし、そのような部分があれば、手作業で修正します。

ここでは眉毛(?) の部分は主線以外の他の色とは接していないので、
塗り残しが起こらない様に念のためにブラシツールで塗りつぶしました。

さて、これでまず1色塗れました。この過程でそれぞれのレイヤーの状態は下の通りになっています。
(この他に仮背景レイヤーが一番下にありますが、白一色なのでここでは省略してます)

主線レイヤー(位置は上) 色レイヤー1(位置は下) 両方を表示した状態

次はまた新しいレイヤーを作り、同じように別の色を塗っていきます。
これを繰り返し、ベースの色が全て塗れたら必要に応じて影やその他の効果も加えて行きます。

こうして色のレイヤーをそれぞれの色やハイライト、影などの役割ごとに分けることで
レイヤーが多く必要になってしまいますが、後々修正が必要になった場合に不都合のあるレイヤーだけを
単独でやり直すだけで済むので楽になりますし、万が一塗るのに失敗したときも修正が楽です。
ただ、塗るべきレイヤーは間違えないように注意しましょう。
ノってくるとついつい新しいレイヤーを作り忘れたり、主線レイヤーに塗ったりしてハマる事がよくあります(笑)

閉じてない線

絵の中には「線は切れているけど別の色の境界が必要」と言う部分も出てくるでしょう。

閉じてない線での範囲選択

主線に穴を開けてみました。(赤い矢印の部分)
この様に線が切れている場合、選択ツールは
本来有って欲しい境界を認識することは出来ません。
そのままでは外側も範囲選択してしまいます。

このような場合は、先に色のレイヤーに
ブラシなどで適当に色を塗り塞いでしまいます。
その後主線のレイヤーで範囲を選択するときに
[自動選択ツール] のオプションの [サンプル結合]
オンにします。
こうすると下のレイヤーの状態も考慮して
範囲選択をしてくれるようになります。
境界線は後でゆっくり修正すればいいのです。

編集サイズから表示サイズへ

さて、彩色にミスは無いかもう一度よく確認しましょう。無ければファイルを [保存] して
これでマスターファイルの完成です(^^)

このマスターファイルさえあれば、あとはよほどの修正が必要で無い限りは
これまでの作業過程で別名で保存してきたファイルは不要でしょう。削除してもかまいません。
後々修正が必要な場合はこのマスターファイルを元にしていけば良いのです。

では、彩色ミスなどの問題がなければ完成サイズに縮小しましょう。
(前の段階で完成サイズまで縮小してあれば不要です。)
一時的に BMP形式に書き出します。
[ファイル] - [複製を保存][ALT] + [CTRL] + [S] )でBMP形式に書き出します。

一時的にBMPに書き出したらマスターファイルはもう使いません。閉じておきましょう。

一時的に書き出した BMP ファイルを開き、レイヤーパレットをWクリックして画像をレイヤー化。
[範囲選択] - [全てを選択][CTRL] + [A] )をした後に
[レイヤー] - [変形] - [数値入力] ( [SHIFT] + [CTRL] + [T] ) で [拡大・縮小]
[縦横比を固定] をオンにしてどちらかに 50% を設定します。
(反対側は自動的に同様に 50% に設定されます。)

これを実行すると画像は 50% の大きさになり、表示させるためのサイズになります。
元々4倍で作業していた場合はもう一度 50% 縮小の行程を繰り返します。
実際に使っている方の実感からなのですが、縮小は 50% が一番綺麗だという話があります。
取り込むときに2倍、4倍にこだわったのはこれが根拠です。まあ、宗教ががった話かもしれませんが。

これでレイヤーのサイズは表示の為のサイズになりましたが、画像自体の大きさは変わっていませんので
画像のサイズを合わせます。[イメージ] - [画像サイズ]で画像サイズを合わせたら
あとは GIF なり JPG なり、お好きな形式に書き出して下さい。

さて、今までは別名で保存していたのに、何故この行程では一旦 BMP に書き出したのでしょう?
マスターファイル自体を縮小して書き出しても良いのですが、最後にファイルを閉じるときに
「閉じる前に、Photoshop 書類 XXXX.PSD に変更を保存しますか?」と聞かれます。
これはマスターファイルとして保存したあとでファイルが変更されたためですが、
ここでうっかり [はい] を押してしまうとこの縮小した状態がマスターファイルに上書き保存されてしまい、
修正が必要になったときに困る事になりかねないからです。そんなことしない自信がある方は
マスターファイルの画像を統合してレイヤー化。縮小して BMP に書き出しても結構です。
・・・・・・私はこう言ううっかりミスで何度泣いたことか・・・・(^^;

完成品
 これが完成です。実践編1では GIF で書き出しましたので、
 今度は PNG 形式で書き出してみました。
 PNG が見られない方はブラウザを新しくするかこちらをどうぞ。



 さて、最後にクイズです。左イラストCGと実践編1の
 完成イラストCGとでは明らかな違いがいくつかあります。
 線の太さや潰れなど細かい違いを除いたもののうち、
 さて、それはどこで何ヵ所あるでしょう?(笑)

 このイラストは 「ままるん♪のほーむぺーぢ」 のコンテンツ [ばな奈画報] より
  [ Vol.4 アレイズ] の一部分を作者の許諾を得て素材としています。

 「ままるん♪のほーむぺーぢ」ではこのコンテンツはすでに公開を終了しております。
 現在はこちら に転載されておりますので、オリジナル ( JPG ) を参考にしたい方はどうぞ

Illustration by ままるん♪


戻る