アナログイラストを線画抽出するには?デジタルで色塗りするための準備

アナログイラスト 線画抽出

アナログで描いたイラストの線画を、スマホやタブレットのカメラやスキャナで取り込んで気軽にデジタルペイントを楽しみませんか?「写真が暗くなる」「線画を切り抜けない」という方に、CLIP STUDIO PAINT・Photoshop・アイビスペイントを使用して、アナログ線画をデジタルで塗るためのプロセスを紹介します。

 

 

 

1.アナログの線画をお絵描きアプリで開く

 

スマートフォン・タブレットのカメラで撮影した画像やスキャナーで取り込んだ画像をもとにイラストを描いてみませんか?

 

CLIP STUDIO PAINT・Photoshop・アイビスペイントといったお絵描きアプリを使うと、紙に描いた線画をもとにデジタルで色を塗ることが可能です。
「スマホだと線を引くのが難しい」というお絵描き初心者の方も、まずはアナログ線画からデジタルイラストにチャレンジできますよ。

 

アナログイラストをデジタルにする方法  アナログの線画をお絵描きアプリで開く

 

取り込んだ画像のままでは、左図のように全体的にグレーがかったり、線画が薄くなってしまうことがあります。

問題を解消するために、線画はハッキリと黒く、それ以外は白くなるような調整方法をお絵描きアプリごとに紹介します。

 

 

2.CLIP STUDIO PAINT・Photoshopを使った線画抽出

 

CLIP STUDIO PAINT ver.3.1.0以降では、線画抽出が簡単に!

 

CLIP STUDIO PAINTのVer. 3.1.0以降、タブレット・スマホ版のシンプルモードでは簡単に線画を抽出できるようになりました。

 

①新しいキャンバスを作成します。

②[レイヤーを追加]を長押しし、撮影した画像やフォトライブラリから画像を追加します。

③[線画を抽出]のポップアップメニューをタップすると線画抽出が実行されます。

④線画の濃さを調整し、[OK]をタップします。

 

すると、画面には線画のみが残り、すぐに色塗りを始められる状態になります。

※すでにキャンバスに描かれたイラストの場合は、効果メニューから[線画抽出]を選択することで、同様に線画抽出が可能です。

 

 

■取り込み

 

PC:[ファイル]メニュー→[開く]
タブレット・スマートフォン:[ファイル]メニュー→[読み込み]→[フォトライブラリから]
上記の手順で、スキャンもしくは撮影した画像ファイルを選択します。

 

CLIP STUDIO PAINT クリスタ Photoshop UI画像 画像を開く方法

 

■明るさ・コントラスト

 

調整レイヤー(色調補正レイヤー)を使用して、色を調整します。
まずは、[明るさ・コントラスト]で全体を明るくします。
画像全体がグレーっぽくなってしまった場合、明るさを調整すると下地の色を本来の白に近づけられます。また、コントラストを調整すると明暗のバランスを調整できます。

 

Photoshop:

[レイヤー]メニュー→[調整レイヤー]→[明るさ・コントラスト]

 

CLIP STUDIO PAINT:

[レイヤー]メニュー→[新規色調補正レイヤー]→[明るさ・コントラスト]

 

設定画面が表示されたら、[明るさ]のスライダーを操作して、線以外の部分が白くなるよう調整します。

 

アナログイラストをデジタルにする方法 線画抽出方法 明るさ・コントラスト

 

この際、スライダーを上げすぎると図のように線が細くなりすぎて飛んでしまいます。注意してくださいね。

 

アナログイラストをデジタルにする方法 線画抽出方法 明るさ・コントラスト NG例

 

■レベル補正

 

次に、[レベル補正]で線画をはっきりとさせます。[レベル補正]では、画像のシャドウ(陰)となる部分、中間調、ハイライトの照度を調整できます。

 

Photoshop:

[レイヤー]メニュー→[調整レイヤー]→[レベル補正]

 

CLIP STUDIO PAINT:

[レイヤー]メニュー→[新規色調補正レイヤー]→[レベル補正]

 

設定画面が表示されたら、グラフの下にある▲(ノード)をドラッグで動かし、紙の色や影の部分を白くなるように飛ばし、線の太さや濃度がちょうど良いと思えるところまで調整します。

 

アナログイラストをデジタルにする方法 レベル補正

 

調整が終わると、調整レイヤー(色調補正レイヤー)が作成されます。
調整レイヤーのアイコンをダブルタップすると、レイヤーの設定画面が表示されるので、もう少し調整を進めたい場合に便利です。

 

CLIP STUDIO PAINT クリスタ Photoshop UI画像 レベル補正

 

最後に、[レイヤー]メニュー→[画像を統合]を選択し、調整レイヤー(色調補正レイヤー)と線画のレイヤーを結合します。

念のため、統合する前のファイルは複製し、バックアップを取っておくことをおすすめします。

 

CLIP STUDIO PAINT クリスタ Photoshop UI画像 画像を統合

 

■線画を抽出する

 

現在のレイヤーは、白地に線画が描かれている状態です。

着色などの作業がしやすいように、黒い線画以外の白い部分を透明に変換する「線画抽出」の作業が必要です。

 

アナログイラストをデジタルにする方法 線画を抽出する

 

[輝度を透明度に変換]を使用して、白い部分を透明に変換します。

 

CLIP STUDIO PAINT:
[編集]メニュー→[輝度を透明度に変換]

これで、線画の抽出が完成しました!

 

アナログイラストをデジタルにする方法 線画を抽出の完成

 

POINT
CLIP STUDIO PAINTでは、[輝度を透明度に変換]を実行したあと、透明部分に市松模様が表示されます。
[レイヤー]メニュー→[新規レイヤー]→[用紙]を選択すると、用紙レイヤーが新規作成され、市松模様が非表示になります。

 

Photoshop:

アルファチャンネルを使用して、白い部分を透明に変換します。
アルファチャンネルは、画像の透明部分を抽出でき、選択範囲をマスクとして編集したり、保存したりできる機能です。

 

1.線画の切り取り
キャンバスから、線画を切り取ります。
(1)[選択範囲]メニュー→[すべて選択]を選択します。
(2)[編集]メニュー→[カット]を選択します。

 

2.アルファチャンネルを作成する
[ウィンドウ]メニュー→[チャンネル]を選択して、[チャンネル]パネルを表示し、アルファチャンネルを作成します。
(1)[チャンネル]パネルで、[新規チャンネル作成]をクリックします。
(2)作成されたアルファチャンネルを選択します。
(3)[編集]メニュー→[ペースト]を選択し、アルファチャンネルに線画を貼り付けます。

 

Photoshopの場合 UI画像 アルファチャンネルを作成

 

3.選択範囲を作成する

線画の太さだけではなく、濃淡(不透明度)の情報を含めた、選択範囲を作成します。
(1)[選択範囲]メニュー→[選択範囲を読み込む]を選択します。
(2)[チャンネル]で、先ほど作成したアルファチャンネルを選択します。
(3)[反転]のチェックをオンにして、[OK]をクリックします。

 

Photoshopの場合 UI画像 選択範囲を作成

 

4.線画を作成する

新しい線画用のレイヤーを作成し、選択範囲から線画を作成します。

(1)[レイヤー]パネルの[新規レイヤーを作成]をクリックし、新規レイヤーを作成します。

(2)キャンバスに選択範囲が表示されます。

 

アナログイラストをデジタルにする方法 線画を作成 Photoshop 

(3)[編集]メニュー→[塗りつぶし]を選択します。
(4)[内容]から、塗りつぶす色を選択します。
(5)[透明部分の保持]のチェックをオフにして、[OK]をクリックします。

 

Photoshopの場合 UI画像 塗りつぶし

 

これで、線画の抽出が完成しました!

 

アナログイラストをデジタルにする方法 線画の抽出が完成

 

 

3. アイビスペイントを使った線画抽出

 

■取り込み

 

アイビスペイントを起動し、[マイギャラリー]の[+]をタップします。

[写真読み込み]をタップし、撮影した写真を読み込みましょう。

 

アイビスペイントの場合 UI画像 画像を読み込む

 

 

■色補正

 

読み込むと、線画抽出についてのポップアップが表示されるので[OK]をタップします。

 

アナログイラストをデジタルにする方法 線画抽出のポップアップ

 

イラストを色補正するためのスライダーが表示されます。

 

アイビスペイント 色補正 UI画像

 

まずは下地の白色がはっきりと白くなるよう、[白側]のスライダーを右側に動かします。

その後、線画の色が薄いと感じたら[黒側]のスライダーを動かしましょう。

 

■線画抽出完成!

 

線画抽出ができました!

[レイヤー]メニューの[+]をタップするとレイヤーが新規作成でき、色を塗ることができますよ。

 

アナログイラストをデジタルにする方法 線画抽出完成

 

 

4.完成した線画を使ってみよう!

線画抽出されたイラストは、線画以外が透過されています。
線画の下にレイヤーを作ることで、線画をもとに色を塗ることができます。
線画抽出を使って、スマホ・タブレットでもアナログ線画のデジタル塗りにチャレンジしてみてくださいね。

 

アナログイラストをデジタルにする方法 完成

 

 

スマホを使った色塗りの方法はこちらで詳しく紹介しています!

 

スマホ指描きに挑戦!初心者がすぐに綺麗な線を描くコツ【メイキング】

【メイキング】スマホアプリ&指描きでお絵描きするコツ

  • twitter
  • LINE
  • Pinterest
  • Facebook
  • URL Copy
  • twitter
  • LINE
  • Pinterest
  • Facebook
  • URL Copy