実践的なデジタルの知識を体系的に学ぶ

本サイトについて掲載・取材等のお問い合わせ

解析ツール

ミンウェブ

オウンドメディアライブラリ

ミンウェブニュース

ミンウェブ辞書

運営：株式会社セルリア

ビジネスを成功へと導くWebコンサルティング・インターネット広告・Web制作を提供する会社です。

企業情報

サービス一覧

オウンドメディア制作

Webサイト制作・リニューアル

SEOコンサルティング

Webサイト課題診断

Photoshopでアナログ線画を簡単に抽出・着色する方法

Photoshopでは手書きデザインの線画を抽出することができます。抽出作業は簡単にできますが、事前に明るさやコントラスト、色温度の調整が必要になります。また、Photoshopでは抽出した線画に色をつけることができます。

更新： 2020/01/30

カテゴリ：

今回は手描きで描いたイラストをデジタル化して抽出する方法を紹介します。

抽出した線画は後から加工できるので色を塗ることも可能です。手書きのデザインをデジタルに起こして印刷 したり、データとして共有 したりすることができるので、知っておくとデザイン制作に便利です。

手書きのデザインをデジタル化して抽出するには、Photoshopを使用します。難しい技術が必要ない簡単な作業ですので、その方法を解説します。

目次

1 線画抽出する方法
2 抽出した線画に色をつける
3 まとめ

線画抽出する方法

線画抽出は以下の流れに沿っておこないます。

①手書きデザインの写真をPhotoshopで立ち上げる ②レイヤーのロックを解除 ③必要のない部分を切り取る ④線画を強調させる ⑤線画を抽出する

手書きのデザインを撮影し、Photoshopで開く

まず手書きのデザインを撮影し、パソコンに取り込みます。 Photoshopを立ち上げ、左端の「開く」をクリック。

線画を抽出したい写真を選択します。

選択した画像がPhotoshopで表示されます。

レイヤーのロックを解除する

レイヤーにロックがかかっていると線画の抽出を行う事ができません。鍵マークをクリックしてロックを外します。

鍵マークが解除されている事を確認しましょう

切り抜きツールを使用し不要部分を取り除く

線画抽出をする時にPhotoshopが間違えて絵以外の物を読み込まないように「切り抜きツール」を使用して不用なものを切り抜きます。

左端のメニューにある「切り抜きツール」をクリックします。

稀に、「切り抜きツール」がメニューに表示されていない場合があります。その場合、他のツールに隠れてしまっています。

「切り抜きツール」が表示されていない代わりに「切り抜きツール」と同じグループに含まれているツールが表示されているので、そちらを右クリックすると「切り抜きツール」を選択する事ができます。

「切り抜きツール」と同じグループに含まれているツールは3種類です。「遠近法の切り抜きツール」「スライスツール」「スライス選択ツール」のいずれかが表示されている場合、切り抜きツールが隠れていますので、見当たらない場合は確認してみましょう。

切り抜きツールを選択したら、画像の不要な箇所を取り除きます。外側の枠をドラッグする事で切り抜く範囲を調整できます。

「Enter」キーを押すと切り抜きが完了します。以下の画像では、写真の余白部分やコードの部分がなくなっているのが確認できます。

線画を強調させる

線の部分を黒色、それ以外の部分を白色にします。線画を強調させることでPhotoshopが線画を読み込みやすくなります線画の強調は「Camera Raw フィルター」を使用します。

Camera Raw フィルターを表示させる

Camera Raw フィルタでは、写真に関する基本的な編集をする事ができます。

今回は「Camera Raw」フィルターを使用して明るさ、コントラスト、色温度を調整します。

Camera Raw フィルターは画面左上の「フィルター」→「Camera Raw フィルター」から選択します。

明るさを調節する

明るさを調整します。「露光量」のつまみを左右に動かす事で明るさが変更できますので、適度な明るさに調整します。

コントラストを調整する

コントラストを上げる事で線画がはっきりしてPhotoshopが読み込みやすくなります。「コントラスト」のつまみを20~30くらいに移動させましょう。

色温度を変更する

カメラの設定によっては、白い部分を撮影しても赤みがかって見えてしまったり、暗く見えてしまったりする場合があります。

暖色（赤色や黄色など暖かみのある色）よりの写真の場合はつまみを左に、寒色（青系統など寒い印象の色）よりの写真はつまみを右に移動させる事で色を白にする事ができます。

明るさ、コントラスト、色温度の補正が完了したら右下の「OK」をクリックします。

線画を抽出する

補正が完了したら線画を抽出します。「レイヤーメニュー」の右にある「チャンネル」をクリックします。

右下にある「チャンネルを選択範囲として読み込む」　をクリックします。

次に画面上部にある「選択範囲」→「選択範囲を反転」をクリックして線画だけを選択します。

線画の部分が抽出されました。

次に、「レイヤー」→「新規レイヤーを作成」をクリックしレイヤーを作成します。

新しく作成したレイヤーを「塗りつぶしツール」で抽出したい色で塗りつぶします。

塗りつぶしを行ったら「選択範囲」→「選択を解除」をクリックして選択範囲を解除します。選択されていた箇所に線画が表示されます。

抽出した線画に色をつける

色をつける場合、線画のレイヤーをコピーし複数用意します。

レイヤーのコピーが作成できたら、ブラシツールを使って色を付けていきます。

ブラシツールは、以下の部分にあります。

着色時のコツは、「一色ずつ広い部分からやっていく」です。例えば、上記の雪だるまの絵であれば、一番広い白い部分を大まかに塗り、目の部分など細かい部分を塗り終えてから次の色を着色します。

1つの色を塗り終えたら、1つ上のレイヤーを選択し、次の色を塗っていきます。フォトショップでは、1つのレイヤーにたくさんの色を乗せるのではなく、1つのレイヤーにつき１色あるいは２色を乗せます。

また、線が消えてしまわないよう、一番上のレイヤーには色を載せないことをおすすめします。全ての色を塗り終えたら完成です。

まとめ

アナログで描いた物を抽出することで、後で色を付けたりデータ化する事ができます。手書きのデザインを形にして編集する、他の人とデザインを共有すると言うこともできますので、Photoshop初心者の方も挑戦してみてください。

最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

記事に対するご意見・ご要望フォーム

minweb編集部（株）セルリア

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ！完全無料のダウンロード資料

無料でできるWebマーケティング11選 <MIDORIBON>

ダウンロード資料画像

Webマーケティングに取り組もうとしている方に向けて、無料で利用できるWebマーケティングに役立つツールを9つ集めました。ツールの始め方からWebマーケティングに利用するメリット、実践的な活用方法まで解説します。

コストをかけずにまずはWebマーケティングに取り組んでみたい思いの方にぴったりの一冊です。

【全3種】他の資料もチェックする

無料で資料をダウンロードする

運営会社

セルリアのロゴ

Web制作・広告・コンサルティングのセルリア

集客力を強化するWeb制作

オウンドメディア制作・立ち上げ

SEOコンサルティング・内製化

無料Webサイト課題診断

コーポレートサイトへ

Facebook・Twitter

人気の記事TOP20

今週

今月

全て

　

ランキングTOP100

Web制作・集客ならセルリア