PR
Inkscapeで手描きのイラストを仕上げようLesson

Inkscapeで手描きのイラストを仕上げよう(1) 準備編

この記事は最終更新日から8か月経過しています。内容が古い可能性があります。

それでは今回から手描きのイラストを取り込んでInkscapeで線をトレース、着色して仕上げるという作業に入っていきましょう。

「トレース」というと「トレパク」や「トレス絵自作発言」などSNS上で見かける炎上案件を思い浮かべる方もいらっしゃるかと思います。もちろん、他人の著作物(絵や写真など)を著作者の許可なく勝手にトレースして使うのはNGです。ですがトレースという用語や手法自体は決して悪者ではないのです。

スポンサーリンク

トレースとは

ここでの意味をざっくり説明すると、下書きをなぞり書きして綺麗な線に清書するという作業になります。それならお絵かきする人はいつもやってるよ!とツッコミが入りそうですが、そうなんです。みんな下書きからペン入れの段階で無意識に自分の絵を「トレース」する作業をしているんです。(たまに下書きの線と清書が全然違う!という人もいますけど)

トレースという言葉が使われる場面について詳しくはこちらをご覧ください。

「トレース」とは?絵やITでの意味までわかりやすく解説 – スッキリ

線の少ないイラストやロゴマークなどの場合は下書きの画像の上からペンツールで手作業のトレースをした方がアンカーポイントの少ない滑らかな線で仕上がります。

ですが、線の数が増えてくると手動トレースが大変です。特にベクター系ソフト初心者の方はペンツールでのトレース自体が上手くできなくて嫌になってそのままソフトの習得を諦めてしまうことも多いです。……そんな時は自動でトレースしてくれる機能を使ってみましょう。

Inkscapeでは画像ファイルをインポートしてベクターデータに変換する[ビットマップのトレース]という機能があります。Adobe Illustratorでは[画像トレース(旧ライブトレース)]というのが同様の機能です。

画像編集について 基礎知識編で「ラスター画像とベクター画像は対応するソフトウェアを利用すれば相互に変換することも可能」と書きましたが、ベクターからラスターへの変換が「エクスポート」、ラスターからベクターへの変換が「ビットマップのトレース」や[画像トレース]ということになります。

ベクターからラスターへのエクスポートでは見た目はほぼ一緒の画像データとして保存されます。ですが、ラスターからベクターへの変換では、ベクター画像の「画像を点の座標や線や面の方程式として扱う」という特質上、元のラスター画像を100%再現できるものではないことをご理解ください。(実際試してみると分かると思いますが、写真や複雑なイラストは色の情報がかなり少なくなります。)

自動トレース機能を使う場合は、読み込む前の線画をある程度しっかりペン入れしておく必要があります。迷い線やアタリが残っていると余計な線までトレース時に拾ってしまうからです。

今回は下書きからペン入れまではアナログ作業で実際の紙の上で行います。(ペンタブレットをお持ちの方はデジタルで下絵から線画までを描いてもOKです。)

このブログのテーマとして「初期費用ゼロから」と題しているので、なるべくペンタブレットを使わない方向性で行きます。

スポンサーリンク

下絵を描く

まず下絵を描きます。

inkscape02_img01.jpg

下絵には鉛筆かシャープペンシルを使用しましょう。紙はなんでもいいのですが今回はダイソーのプランニングパッド A4を使用しました。

私は下絵のイメージと清書のイメージがかなり変わってしまって下絵の方が良かった!という事態が頻発するタイプの人間なので下絵の紙は残しておきたい派です。なのでシャーペンでガシガシ描いちゃってます。

下絵を描いた紙に直接ペン入れしたい人は、あまり強い筆圧で描かないように注意してください。筆圧が強いと消しゴムをかけても紙に跡が残ってしまうからです。

私は使ってないんですが、下絵を描いた紙に直接ペン入れをする場合は消しゴムで消せるタイプの水色のカラーシャープペンシルが便利だそうです。

水色の消せるカラー芯でイラストのアタリを取ってから画力アップしたかもしれない話 |
イラストや漫画原稿用のアタリ、下描きにuni COLORのミントブルーが人気です。印刷に出にくい色なのでプロの漫画家さんも水色の消しゴムで消せるカラー芯を愛用している方が多いです。私も実際に使用してみたら、その描き心地の良さに驚かされました...
スポンサーリンク

ペン入れをする

次にペン入れをします。

inkscape02_img02.jpg

下書きの紙の上に清書用の紙を重ねて、ゼムクリップで止めます。これだけだと下書きがほとんど見えませんので、ダイソーの書類ケースとライトで即席トレース台を作成しました。ケースの中にアルミホイルを敷いて多少光が反射するようにしてみました。

100均の材料を駆使して数百円で自作のトレース台を作っている人もいます。

ワンコインでトレース台自作 - しなの鍔工房
工芸・クラフト系同人サークル

私が昔アナログでお絵かきをしていた頃はトレース台を持っていなかったので、ガラスのテーブルの下に懐中電灯を置いて下から照らしてトレースしていました。他にも下書きの紙の裏側を4Bとかの濃いめの鉛筆で真っ黒に塗って(カーボン紙の代用)、下書きの紙の下に清書用の紙を重ねて上からなぞり書いて跡をつけ、そこから清書していました。当時コピックを持っていなくて色鉛筆での着色がメインで、下書きの筆跡が残ってしまうと綺麗に塗れなかったのでこんな感じの手法を取っていました。

透明な書類ケースとLEDライトがあれば最低限のトレース台は作れますので、利用頻度と予算に応じて色々試してみてください。(最近トレース台も安いので既製品を買うのもアリです。)

ペン入れに使用するペンですが、今回はミリペン(ドローイングペン)の一種であるサクラクレパスのピグマの005と01を使用しています。

サクラ ピグマ 黒【 003・005・01・02・03・04・05・08・1・2・3・ブラッシュ 】ブラック ESDK 耐水性 耐光性 水性顔料インキ ノート 手帳 手紙 イラスト図面 保存書類 重要書類コミック 漫画制作 スケッチ パターンアート

価格:220円
(2025/6/6 09:51時点)
感想(0件)

【★エントリーで全品ポイント10倍!★】サクラクレパス 水性ペン ピグマ 黒 5本セット ESDK-5A【製図・ノート・手紙・イラスト・マンガ】

価格:980円
(2025/6/6 09:59時点)
感想(1件)

【送料無料】サクラクレパス ピグマ 黒 全12種類セット 003 005 01 02 03 05 08 1 2 3 F BR マーカー ミリペン – メール便発送

価格:2312円
(2025/6/6 09:55時点)
感想(12件)

最終的にデジタル処理するのでボールペンでもサインペンでもマーカーでも100均のペンでもペンならなんでもいいっちゃいいんですけど、描きやすさと速乾性が段違いなのでアナログイラストをよく描く方はピグマかコピックマルチライナーをおすすめします。

原稿をスキャンする

ペン入れができたら次はスキャナーでスキャンします。

いきなりスキャナーって言われても持ってないんだけど!という人はお財布と原稿とスマホ(USBメモリでもOK)を持ってお近くのコンビニに行ってみてください。コンビニに必ずある(あると思う)マルチコピー機でスキャンできます。

イラストの線画をスキャンする場合はJPEGがいいかと思います。色についてはパソコンに取り込んだ後に画像編集ソフトで補正できるのでカラーでもグレーでも構いません。ただし、白黒モードで読み込むとイラストの濃さによってはうまく線を拾ってくれないこともあるのでご注意ください。プレビューできる場合はマルチコピー機の画面をよく見て確認しましょう。

今回は下書きとペン入れ後の二枚をスキャンしました。

ここだけ追加費用として数十円程度発生してしまいますが、スマホアプリで撮影するよりも正確にスキャンできるのでコンビニマルチコピー機の活用も視野に入れてみてください。

下準備が終わったところで文字数の関係で今回は終了です。次回はスキャンした線画を補正し、実際に自動トレース機能で読み込んでみましょう。

コメント

タイトルとURLをコピーしました
'); /* ヘッダーの高さの変化分、paddingで調整しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': `${threashold}px`, }); /* トップメニュータイプに変更する */ $("#header-container-in").removeClass('hlt-center-logo hlt-center-logo-top-menu').addClass("hlt-top-menu wrap"); $("#header-container").addClass("fixed-header"); $("#header-container").css({ 'position': 'fixed', 'top': '-100px', 'left': '0', 'width': '100%', }); const wpadminbar = document.getElementById('wpadminbar'); const headerContainerTop = wpadminbar ? wpadminbar.clientHeight : 0; $('#header-container').animate( { top: headerContainerTop, }, 500 ); } } /*固定ヘッダーの解除*/ function staticHeader() { if ($("#header-container").hasClass("fixed-header")) { /*センターロゴタイプに戻す*/ $("#header-container-in").removeClass("hlt-top-menu hlt-tm-right hlt-tm-small hlt-tm-small wrap").addClass(" hlt-center-logo"); $("#header-container").removeClass("fixed-header"); $("#header-container").css({ 'position': 'static', 'top': 'auto', 'left': 'auto', 'width': 'auto', }); /* ヘッダーの高さの戻る分、padding削除しスクロール位置を止まらせる */ $("#header-fixed").css({ 'padding-top': '0', }); $("#header-fixed").remove(); } } /* 境界値をヘッダーコンテナに設定 */ var threashold = $('#header-container').height(); var prevScrollTop = -1; var $window = $(window); var mobileWidth = 1023; $window.scroll(function() { var scrollTop = $window.scrollTop(); var s1 = (prevScrollTop > threashold); var s2 = (scrollTop > threashold); var w = $window.width(); /*スクロールエリアの位置調整*/ function adjustScrollArea(selector) { if ($(selector) && $(selector).offset()) { offset = $(selector).offset().top; h = $("#header-container").height(); pt = $(selector).css('padding-top'); if (pt) { pt = pt.replace('px', ''); } else { pt = 0; } if ((scrollTop >= offset - h) && (w > mobileWidth)) { if ((pt <= 1) && $("#header-container").hasClass('fixed-header')) { $(selector).css({ 'padding-top': h + 'px', }); } } else { if (pt > 0) { $(selector).css({ 'padding-top': 0, }); } } } } /*スクロール追従エリアの調整*/ function adjustScrollAreas() { adjustScrollArea('#sidebar-scroll'); adjustScrollArea('#main-scroll'); } /*固定ヘッダーのスタイル決め*/ function adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth) { if (s1 ^ s2) { if (s2 && (w > mobileWidth)) { stickyHeader(); } } /* 境界値に達したら固定化 */ if (scrollTop <= threashold || w <= mobileWidth) { staticHeader(); } } adjustFixedHeaderStyle(s1, s2, w, scrollTop, mobileWidth); adjustScrollAreas(); prevScrollTop = scrollTop; }); /*ウインドウがリサイズされたら発動*/ $window.resize(function () { /*ウインドウの幅を変数に格納*/ var w = $window.width(); if (w <= mobileWidth) { /*モバイル端末の場合*/ staticHeader(); } else { /*パソコン端末の場合*/ var scrollTop = $window.scrollTop(); if (scrollTop >= 50) { stickyHeader(); } } }); })(jQuery);