手書きマンガをPhotoshopでWeb用素材に変換してみた

風流な暮らしを夢見るbatanqです。

画用紙に手書きで描いたイラストや漫画。

illustratorなどで作った画像とは違って、線の崩れやにじみやボケなどの破綻が伴う画像です。

でもこんな素材を使いたいときってありますよね。

普通ですとjpegやping画像をそのまま貼り付けたりしますが、自由に編集できません。

photoshopを使えば、紙に描いた絵を輪郭だけなぞった編集しやすい画像データにすることができます。

微妙な位置合わせや、色塗りなどのちょっとした手を加えることで思わぬ効果を上げることができます。

でもどうやって作ったらいいのでしょうか。

画像を取り込む

作りやすいのは輪郭線の濃淡がしっかりした、ポンチ絵のような絵です。

あまり小さい絵だと改造度が荒くなるので注意しましょう。

このような手書きのイラストや漫画を、スキャナーなどを使ってPDFにします。

次にphotoshopでこのpdfを取り込みます。

このとき注意したいのが、pdfをグレースケール形式で取り込むことです。

カラーで描いた素材は、輪郭線を読み取る時に色が邪魔になります。

ですからカラーの素材も色を省いたグレースケールにして取り込みます。

上手くいかない場合は設定がモノクロ二階調になっていることがあります。

モノクロ二階町も画面では同じモノクロにみえるのでまぎらわしい。

新規レイヤーを作ることができなかった時はまず疑ってください。

操作方法は[イメージ][モード]を開いて確認し、[グレースケール]にするだけです。[note]サイズは150dpiが最適です。ウェブで使用する場合は、よほど小さく描いた場合をのぞいて100〜200dpiくらいで取り込めばサイズ的には充分間に合います。カラー印刷で使うのが目的だったら350〜400dpiが目安です。[/note]

画像を線画にする

ptotoshopの作業を簡単に説明します。

取り込んだ画像の汚れを取り除き、背景の色(白色)を透明にして、線の部分を黒く塗りつぶすという流れです。

簡単です。

取り込んだ画像の輪郭は基本は黒色です。

ところが中には100%黒ではないものも売ります。不純な黒です。

混じりけがあると線がかすれたりするので、しっかりした黒に整えます。

また背景の白色も、よく見ると薄い汚れがある場合があります。

線の色を純黒にして、汚れ等のゴミを飛ばすためレベル補正をかけます。

作業は[色調補正][レベル補正]で行います。

画面中央下に見える▲の突起は左右に動かすことができます。

動かすと画像の見え方が変わるので、気に入った画像になるよう調整します。

背景の白色にあった汚れも、白く飛ばすことで消し去ることができます。

次は汚れを取り除いた背景の白色を透明にします。

背景の白色を透明にすることで輪郭線だけが浮き上がるという仕掛けです。

操作は6ステップです。

1.線が黒(#000000)になってることを確認します。

2.チャンネルウィンドウを表示して、そのサムネイル部分を押したまま[ctrl]+[クリック]します。

3.輪郭線部分に点線が点滅するので、さらに[ctrl]+[shift]+[n]で新規レイヤーをつくります。

photoshop画面では分かりづらいのですが、背景の白色が取り除かれた新規レイヤーができています。

※ショートカットキーを押すタイミングが覚えにくいことや、レイヤーとチャンネルの違いが分かりにくいことから最初のうちは戸惑います。私もショートカットキーを間違えて何度も挫折しました。

4.新規レイヤーに名前を付けてokを押します。(名付けなくてもよし)

5.[ctrl]+[shift]+[i]で選択範囲を反転します。(輪郭線を黒で着色するための前作業です)

6.そのままの状態で[alt]+[delete]を押します。これで点線部分が黒く染まります。できあがり。

[note]線の塗りつぶしについては黒の代わりに別の色を付ける方法もあるようです。[/note]

これで元絵の描線部分だけデータ化された画像データが完成しました。

整形作業・・・ゴミ取りです。

透明にしたはずの白色部分にゴミが残っている場合があります。

細かな点が残ると見苦しいので取り除きましょう。

ゴミを赤く目立たせると作業がはかどります。

そのために使うのが境界線です。

まず、モードをRGBに変え、[レイヤースタイル]を表示して[境界線]をに✓を入れます。

すると輪郭線やゴミの位置が目立つようになりました。

輪郭を赤くするとさらに作業がしやすくなります。

消しゴムツールを使ってピンポイントにゴミを消し続けます。

消去した後、作業に使った境界線は不要になるので消去します。これで完成。

まとめ

輪郭だけの線は背景が透明なため扱いが楽です。

拡大縮小や着色、いくつか重ねてのコラージュなど、自由自在に組み合わせを楽しむことができます。