イラストを描こう (実践編)

どうにかフラットベッドスキャナを買ってきた助手。やっと Photoshop の出番らしいです。


[助手]
[博士]
[助手]
[博士]



[助手]
博士〜。スキャナ買いました〜。博士のおすすめの SCSI タイプです〜。
よし、ではまず紙に主線だけを描くのじゃ。
主線だけですか? それも紙に? パソコン使わないんですか?
慌てなくとも良い。全体の大ざっぱな流れとしては
[主線を紙に描く] - [主線を取り込む] - [色を付ける]
と言うプロセスを踏むのじゃ。絵の骨格である主線部分を、慣れた画材である紙に描くので
線の滑らかさを出しやすく、失敗が少ないと言うのがこの方法のメリットじゃ。
なるほど。では早速描きます!


まずは準備

画材 説明
ケント紙などの白色度が高く、滑らかな紙が向いています。
画材屋さんには専用の原稿用紙などもあるらしいです。
スキャナが読みとれる用紙サイズに出来るだけ大きく描きましょう。
筆記具 基本的にはどんな物でもかまいませんが、できれば下絵は鉛筆で描き、
その後は黒インク+Gペンなどを使う方がコントラストの高い原稿になりますので
後の行程が非常に楽になります。
これならば安価で入手も容易にできるはずです。

この辺の詳細は漫画の描き方の本などを参考にしてください。

[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]

[助手]
[博士]

描けました!見て下さい。
ほお、なかなか味のある芸術的な絵じゃのぅ。
博士。紙の天地が逆です・・・・。
・・・・・・なんと。 ・・・・これを元に解説するのはイヤじゃ。もっと綺麗な絵を持ってきなさい。
そんな無茶を言わないでください。私にはこれが精一杯ですよ(^^;
まあ、いいわい。こんな事もあろうかとワシが用意しておるからこれを教材にするぞい。
博士〜(泣
えーい、泣くな。素材は ままるん♪さん の原稿じゃ。ワシが往復5時間も掛けてお借りして来たのじゃ。
これ、漫画形式になってますね。
うむ、笑いもしっかり取れるから出版関係の方、ツバつけるなら今のウチじゃぞい。
業界向けのままるん♪さんの宣伝ですか?
ここで宣伝などせずともよいのじゃが、やはりタダで使わせて貰うんじゃからその程度のことはせんとな。
・・・・くすくす・・・・おもろいな、これ。
こらこら、素材を読みふけっておらんで、さっさとスキャナとパソコンの電源を入れてドライバのインストール、
各種設定を全部終わらせてPhotoshop を立ち上げい。
くすくすくす・・・・流しの裁判長って・・・(笑)
ワシの話を聞け〜ぃ!

原稿を取り込もう

スキャナ側設定

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

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

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

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

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

解像度 144〜300 dpiの任意
イラストであれば 144dpi 程度でも十分綺麗に取り込めると思います。
HPは印刷が前提ではないので、これ以上の解像度で有れば何 dpi でも
不満は出ないはずです。
dpi 値にこだわるよりも最終的な出来上がりピクセルサイズを考えて解像度を決めましょう。
完成サイズの 2倍、もしくは4倍が適当です。それに合わせて解像度を調節します。
例えば完成サイズが 800*600 であれば、1600 * 1200 、もしくは 3200 * 2400 で
取り込むのが良いでしょう。

これは、最終行程で縮小する事で微妙な線のずれや粗を目立たなくするためです。
どちらの大きさにするかはメモリ搭載量と出来上がりのサイズを考慮して決めて下さい。

カラーモード グレースケール
この時点では主線だけなのでカラーモードで有る必要はありませんし、
グレースケールで有ればメモリの消費量が少ないので快適に作業できます。

ここでは A4 サイズの原稿を 144 dpi で取り込んであります。
取り込み直後の画像(一部分)はこちら(50% に縮小 JPG 形式 29KB)

ゴミ消し、色修正(準備)

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

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

が発生しています。
(小さくて判りにくい方はこちらを参照してください。拡大400% JPG形式 34KB

分かり易く色の分布を見るには [イメージ] - [色調補正] - [レベル補正] を選択します。

レベル補正グラフ -補正前-

このグラフは色の明るさの分布を表しています。
表の一番左が黒(暗い点)、一番右が白(明るい点)です。
このグラフを見ても判る通り、この画像は完全な白よりやや暗い色が一番多く、
ある点から急激に白の成分が減り、完全な白(グラフの一番右)はほとんどないのが判ります。
また、黒(グラフ左)は完全な黒からやや明るい点に小さなピークが来ています。

本当で有れば主線は完全な黒であるべきで、主線の成分である小さなピークは
もっと左側にあるべきですし、一番広い面積の背景が完全に白で有れば
最大のピークはもっと右にあるはずです。

レベル補正グラフ -現状と理想-

つまり赤で表示されるような両端にピークが来ているようなグラフが理想ですね。
これは背景は真っ白に、主線は真に黒くなればこうなるはずです。

ゴミ消し、色修正(実践 その1)

では、この赤のグラフになるべく近くなるように補正しましょう。
これは後で主線だけを綺麗に抜き出すのに必要な作業です。

まずは全体的な白の色むらを消し、背景を白くしましょう。
1の▲ のスライダをグラフがぐっと大きく立ち上がって行く辺りまで左にずらしてみましょう。
上の入力レベルの数値が現在のスライダの位置です。
ずらしていくと最初は 255 だった数値がスライダに連動してだんだん下がっていきます。
ここではだいたいピークよりやや下辺りの 0 - 1.00 - 230 までずらしました。<

この状態で画像を見てください。どうですか?背景はかなり白くなりましたね?
この補正は元の画像の白(明るさ)のレベル 230 の点を 255(つまり純白)になるように
補正するのです。
(元の画像で 230以上のピクセルは全て 255 になります。)

[プレビュー] のチェックボックスをオフにすれば元の画像が見られます。
見比べてみて「主線が気持ち細くなったかな?」と言う辺りが良いでしょう。

今度は反対に2のスライダです。こちらは黒のレベルのスライダです。
こちらもやや右方向に動かしましょう。こちらの方ははっきりとピークの位置が判るので
設定が楽です。ピークよりほんの少し右位がよいかも知れません。
ここでは 13 に設定しました。これで入力レベルの数値は 13 - 1.00 - 230 になりました。

黒のレベルも上げましたので若干暗めになったかも知れません。
最後に全体的なレベルを修正しましょう。
[プレビュー] のチェックボックスをオンオフしながら、元の線の太さより気持ち細めになるように、
また、全体の明るさを確認しながら設定していきます。
ここでは数値は 13 - 0.90 - 230 になりました。

レベル補正グラフ -補正後-これが補正後のグラフです。どうですか?
白黒共にピークがきっちり両端に出来ていますよね。
黒の方はちょっと判りにくいのですが、
0 のレベルは最大まで上がっています。

グラフが櫛の歯状に抜けているのは
補正を掛けた所為です。
気にすることはありません。

ゴミ消し、色修正(実践 その2)

さてさて、これでかなり理想的になってきました。
ぱっと見た目ではもう完璧に見えるかも知れません。
しかし、まだまだ今の作業で消し切れていないゴミが残っているはずですので、
これらを手作業で消し(潰し)て行きます。

まず、[SHIFT] + [D] を押し、描画色と背景色を初期設定に戻し、入れ替えて
描画色を白に設定します。
そのまま [範囲選択] - [色域選択] を選び、[許容量]は 0 で実行します。
これで純白の部分が選択されました。
背景の多くの部分がこれで選択されたことでしょう。
しかし本来白であるべきところが全部選択されては居ないはずです。
これが先ほどの作業で消しきれなかった色むらやゴミ部分なのです。
これを全て消していきます。非常に細かく単調な作業ですが頑張っていきましょう。

ここからは [画像描画モード] では少々無理がありますので
[クイックマスクモード] へ移行しましょう。

ついでにここでWクリックをして [クイックマスクオプション] を呼び出し設定を確認してみましょう。
着色表示
[マスク範囲に色を付ける][選択範囲に色を付ける] どちらでもかまいません。
編集する内容によって使い分けましょう。
ただ、消す作業より塗る作業の多い方が効率は良いです。
表示色と不透明度
[表示色]はその画像にあまり使われていない色やコントラストの高く見える色が適当です。
人物の画像で赤やオレンジを使ったり、森の画像で緑を使ったりすると
画像の色とマスクの色の境目が掴み辛いので作業効率が著しく落ちます。
面倒がらずに画像にあった表示色をこまめに設定しましょう。
不透明度
50% のままで良いでしょう。

クイックマスクモード -修正前-

この画像に対して設定が適当かどうか確認しましょう。
ここでは [マスク範囲に色を付ける]
[設定色] は緑、 [不透明度] は 50% に設定し、
クイックマスクモードに入ります。
その状態が右の画像です。( 50% に縮小) →

猫 (?) の顔の上部などはおおむね良好ですが、
よく見ると、顎から身体にかけての部分や
線が入り組んだ所や太いところの周りなどには
かなり広い範囲でマスクが掛かってしまってる範囲が
有ることが判るでしょう?
これが先ほどの作業でも消し切れなかったゴミです。

クイックマスクモード -修正後-
これをブラシツールや消しゴムツールを使い、修正していきます。
400 〜 800% 程度に拡大して作業すると作業がし易いでしょう。

ここではかなり細かく線を追い込んでいる様に見えますが、
あまり神経質に作業する必要はありません。
追い込みすぎるとまた後で修正が必要になって
しまいますので、若干の余裕を持って気軽に作業して下さい。
修正が終わった状態がが左の画像です。


線を追い込みきったら、また [画像描画モード] に戻り、色むらと最後のお別れしましょう。
選択された範囲を白で塗りつぶします。
ここで一つ注意が必要です。クイックマスクモードの時、オプションで[選択範囲に色を付ける]
選択した方は、主線部分の方が選択されていますので、で [CRTL] + [ALT] + [I] を押して
[選択範囲の反転] をしておきましょう。
そうしないとただの真っ白な画面になってしまいます(^^;

[編集] - [塗りつぶし] で 白 、[不透明度] は 100% [描画モード] は通常で塗りつぶしましょう。
塗りつぶしが終わればこれでゴミ消しは終了です。

では彩色に入ります・・・?

[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]
[博士]
[助手]

[博士]
[助手]
[博士]
[助手]
[博士]


[助手]
[博士]
[助手]
[博士]
[助手]
[博士]





そろそろ休憩にするかの。おい、お茶じゃ。渋ーい奴な。それとお茶受けは「東京ばな奈」が良いのう。
博士、ままるん♪さんのCGを素材にしてる影響ですか?
そうかもしれんの。それに頭脳労働をすると甘い物が欲しくなるしの。さ、はよ持ってこい。
ここにはありませんよ。
買ってこい。
お店が遠いからイヤです(きっぱり
んじゃ「埼玉銘菓 十万石饅頭」でええわい。
それも遠いからイヤです。だいたい埼玉県民以外には殆ど知られてないですよ、十万石饅頭は(^^;
お前は埼玉県民じゃないのに知ってるではないか。
博士が五月蠅いのでインターネットで検索しました。
うまいっ!うますぎるっ!(驚きと力を込めて
だから埼玉県民以外に判らないようなこと言うのはやめてください(^^;
しゃあないのぅ。駅前のアンナミラーズ行ってブルーベリーパイでも買ってくるか。ワシが直々に。
そんなこと言ってまた藤井美沙子さん(18)を2時間くらい鑑賞しに行く気ですね。行かせませんよ。
む、ワシの考えてることが読めるとはおぬし、さては超能力を身につけよったかっ!
博士のいつもの行動を知っていれば誰でも判りますっ!
うぬう(泣
それにしても取り込んでから随分いじりましたね。
うほほほ。ここまでは根気さえ有れば出来る作業じゃ。ここからが本題の作業じゃ。
いよいよこの Tips のメイン作業ですか。
うむ。ここからは一気に色を付けて作品として完成させるぞ。
もうすぐ完成ですか。待ち遠しいです、博士〜
うほほほ。言葉で説明するとアッという間じゃが、実際はここからの方が時間が掛かるんじゃぞい。
あらま。じゃあ、完成までは・・・・
まだかなりの時間が必要じゃな。さあ、休憩もこの位にして次の作業じゃ。
いよいよ色を塗る作業ですね?(わくわく
いや・・・・うーむ、まあいいじゃろ。塗ってみなさい。
わーい!塗りつぶしツールでだーっと・・・あ、あれ?博士〜。
どうしたんじゃ。透過色と HTMLの色がド派手に合ってない透過 GIF 画像みたいにでもなったのか?
博士こそ何時の間に超能力を・・・。そうです、その通りなんです〜!
こんな風に滅茶苦茶汚くなっちゃいました。● (原寸 GIF 形式 36KB)
そらそうじゃろーなぁ(笑)
こうなると初めから知っていたんですか?博士のイジワル〜!塗るのに掛かった時間を返して下さ〜い(泣
東京ばな奈の恨みじゃ(笑) それに失敗をせんと人はなかなか覚えないもんじゃからのぅ。
うう。・・・・でもどうしてこうなったんですか?
それはな。この画像は黒から白への階調だったからじゃ。白に色を載せれば白と黒の境界線である
灰色の所は白ではないから、塗りつぶしツールでは色は乗らん。つまり灰色のままじゃろ?
だから主線の周りにこんな隙間が出来て汚い画像になってしまったんじゃ。
じゃあ塗れないじゃないですか。ここまでの苦労はいったい何なんだったんですか(泣
慌てるでない。もしこの主線が黒から白への階調ではなく、黒から透明の階調で有ったらどうじゃ?
同じじゃないんですか?
レイヤー機能を使って、色は別のレイヤーに載せて主線のレイヤーの下に置いたらどうじゃ?
あっ!そうか!博士って頭良いんですね。
・・・お前、今までワシをなんだと思っていたんじゃ?(怒

当然ですがこれはフィクションですので実在の人物とは何ら関係有りませんし、作者は話の種に
  1回だけ行った事があるだけです。勘ぐりやツッコミは無用です。却下です。聞く耳持ちませんっ!(笑)
ちなみにバニーさんの居る飲み屋には行ったことはありません。
でも誰かのおごりなら行くかもしれない(まてこら


階調変換

さて、この画像を黒から白への階調の画像から、黒から透明への階調の画像にしましょう。

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

この先の作業のために画像をレイヤー化しましょう。
レイヤーパレットをWクリックします。
すると [レイヤー作成] と言うダイアログが
出てきますのでOKを押しましょう。
これで画像がレイヤー化されました。
名前が [背景] から [レイヤー0] と変わりましたね?

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

チャンネルパレットでは、今度はチャンネルパレットを表示してください。
[チャンネルを選択範囲として読み込む] を押します。
赤い矢印の所にあるボタンです。

選択範囲のラインが現れましたね?
これは白部分が選択された状態なので
選択範囲を反転しましょう。[CTRL] + [ALT] + [ I ]
ショートカットキーです。

ちゃんと反転できましたね?そうしたらここで
チャンネルからレイヤーへ表示を切り替えます。
新規レイヤーを1つ作り、黒で塗りつぶします。
※ここがポイント!

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

[選択範囲を解除][CTRL] + [D])をして
レイヤー 0 を非表示にしてみて下さい。
どうですか?左の画像の様に透明レイヤーの上に
主線だけが黒一色で現れましたね?

これで黒から透明への階調に変換出来ました。


さて、ここでもうレイヤー0 はこれからの作業には不要です。
とは言え万が一のことを考えて保存しておきましょう。
こう言うときは [別名で保存] [SHIFT] + [ALT] + [S] )です。


保存が終わったらレイヤー0 を削除して、レイヤー1(主線のレイヤー) に「主線」と名前を付けておきましょう。

ついでにこの時点でカラーモードを [グレースケール] から [RGBカラー] へ変更しましょう。
[イメージ] - [モード] - [RGBカラー] を選択します。

それと背景が透明なままでは見辛く、作業効率も落ちてしまいます。
新しいレイヤーを作り、主線レイヤーの下に配置して白で塗りつぶしておきましょう。
これが仮の背景になります。これには仮背景と言う名前を付けておきましょうか。

さて、仮背景を作ったところで気が付いた事があるかもしれません。
それは主線が思ったより細い、もしくはかすれた部分があると言うことです。

この問題は主線レイヤーをコピーして重ねることで修正できます。
これは「小さい文字と微細な縁取り」の項で使った手ですね。
適当な太さになるまで主線レイヤーをコピーして重ね、調整しましょう。
ただし、重ねすぎると主線がギザギザになってしまいますので注意しましょう。
ここでは3枚だとやや濃く、2枚ではちょっと薄い感じがしたので合計3枚重ねて
そのうちの1枚の不透明度を 50% にしてみました。

決定したら主線レイヤーとそのコピーをリンクして結合します。
主線レイヤーを選択してから [リンクと結合] させるとレイヤー名がそのまま保持されます。
ただし、仮背景も結合したり、画像を統合はしないこと。
そうすると階調を変換するというこの作業の意味が無くなってしまいます。

これで変換作業は終了です。

次にペン入れ段階で出来ていた無駄な線やここまでの作業の中で出来た線の大きなかすれ
などを確認します。そのような部分がありましたらブラシなどで手作業で修正します。

これでやっと主線の一応の完成です(^^)

残りメモリのチェック

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

しかし、ここから先の作業はカラーですし、レイヤーの枚数もかなり多くなります。
マシンの搭載メモリの量をよく考えてください。
1辺を4倍で取り込んだ場合はここで 50% 縮小し、最終的なサイズの2倍まで縮小した方が
よいかも知れません。
メモリを追加するのも良いでしょうが、それが出来ない場合はある程度の覚悟が必要です(笑)

いよいよ彩色
では彩色に入りましょう。おっと、今の状態はモノクロ画像しか扱えないグレースケールモードですので、
[モード] - [RGB カラー] でカラーを扱えるようにモードを変更しましょう。これで色を付けることが出来ます。

まずは塗りつぶしツ−ルで広い面から1色づつ塗っていきましょう。
色を載せるレイヤーを新しく作りましょう。
塗る範囲を選択するのは [自動選択ツール] を使います。
[選択する色の範囲] を 0 、[アンチエイリアス] [サンプル結合] は共にオフの状態にします。

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

範囲選択 デフォルト


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

しかし、このまま色を塗ってはやや狭い範囲にしか
塗れませんので、[選択範囲の拡張] をしましょう。
[選択範囲] - [選択範囲の変更] - [拡張]
選択範囲を拡張します。
その拡張量は主線の中心辺りまでが適当です。

範囲選択 拡張


ここでは 3 ピクセル拡張してみました。(右の図 →)
これで選択範囲が主線の中心部に殆ど重なりました。

こうなれば後は色のレイヤーに戻り
[塗りつぶしツール] で塗りつぶし、[選択範囲を解除] します。

これでかなりの部分の色は塗れたはずですが、塗られていない部分や
主線から外にはみ出した部分もあるでしょう。
この部分は主線レイヤーを表示したままブラシツールなどで
手作業で修正します。
主線が塗りしろになりますので範囲選択よりは楽な作業です。
ただ、塗るべきレイヤーは間違えないようにしましょう(笑)


また、光による反射の白や、影の色なども独立したレイヤーに塗ると修正が楽です。

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

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

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

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

編集サイズから表示サイズへ
さて、彩色にミスは無いかもう一度よく確認しましょう。
問題がなければ編集サイズから表示のためのサイズに縮小しましょう。
一時的に BMP形式に書き出します。
[ファイル] - [複製を保存][ALT] + [CTRL] + [S] )でBMP形式に書き出します。

一時的にBMPに書き出したら本体のファイルはもう使いません。保存しておきましょう。

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

これを実行すると画像は 50% の大きさになり、表示させるためのサイズになります。
元々4倍で取り込んだ場合はいきなり 25% に縮小させて下さい。
50% 縮小を2回繰り返しても同じ事の様に見えますが、25% で縮小する方が綺麗仕上げることができます。
50% の縮小では縦横の1辺の長さが 1/1.4 (約 70% ) になり、かなり補完が必要にますが、
25% 縮小では縦横の1辺の長さが 1/2 になり、補完が最小限に抑えられる為です。
これはイラストだけでなく、全ての画像に言える事です。

画像は範囲選択されたままですので、これを [編集] - [コピー][CTRL] + [C] ) でコピー、
[ファイル] - [新規作成][CTRL] + [N] )で新規ファイルを開き、
[編集] - [ペースト][CTRL] + [V] ) で張り付けます。

後は GIF なり JPG なり、お好きな形式に書き出して下さい。

完成品

 ここでは塗り方がべた塗り(アニメ塗り)に近いのと、
 画像のサイズが小さいので GIF 形式で書き出してみました。
 これで完成です。




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

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

Illustration by ままるん♪


戻る