ライブトレースをAdobe・Illustrator持ってなくてもやりたい人はInkscapeを試してみよう

2020年9月29日

※当サイトにはプロモーションが含まれています



2020/09/29 Inkscape Ver1.0.1での操作方法に若干変更がありましたので記事をリニューアルしました。

●。スポンサーリンク





●。

アナログのつけペン線を「きれいに」「安く整える」ための「線のパス化」をやってみよう

私は画像をアナログで線入れる→スキャナーで取り込む→PCで仕上げ
というお絵かきをしておりますが、アナログ線取り込みで困るのが画像の拡大縮小です。

ペン入れを原寸でやればいい話ですが、やむを得ず拡大縮小する、または流用を頻繁にするタイトルロゴなどはパス化して印刷に耐えられるようにベクターデータで作りたい!
ってことありますよね。私はよくあります。
アナログ漫画描き大好き人間としては、アナログの線を生かしつつ、絵が劣化しないデジタル処理を目指したいものですね。

手書きした線は取り込むとラスターになるので、ベクター化したいならイラストレータの「ライブトレース機能」を使うしかない。
Illustrator高いよね。
ライブトレースぐらいしか使わないのに買うのはためらう。
フリーソフトでイラストレータみたいなソフトないの?
というわけで探したらありました。
Inkscape(インクスケープ)っていうフリーソフトです。

Inkscapeってどうやってダウンロードして使うの?

大体「Inkscape 使い方」れば出てくるの割愛しますが
公式サイトは
https://inkscape.org/
です。
ダウンロードは現在
https://inkscape.org/ja/release/
からできますので、全然アドレス違うところからダウンロードしないように注意してください。
最近公式以外のURLからダウンロードさせようとする怪しいサイトも多いですので…。

日本語版のサイトにするには、Englishをクリックすると言語変更できますよ。

↓【検索して見つけた使い方リンク】↓

サイト

Inkscape@JP.
inkscapeでDesign
おうちDTP

Youtube 検索結果

Inkscape 使い方 動画検索結果

InksScapeでアナログ線画をパス化しよう!

アナログイラスト線画を用意して、bmp形式でスキャンしました。

今回ゴミとりは後でにします。

ところどころ空白なのは別パーツとしてかきたすためです。

解像度は600ぐらいが限界だと思います。解像度高ければ高いほど、Inkscapeがクラッシュしやすくなると思われ。私のマシンスペックはそんなカツカツじゃないんですけど、Inkscape側の処理かなと思う。今回は解像度350で取り込んでます。(参考:私のマシンスペックはこちら)
ファイルで開いてインポートします

「ビットマップをトレース」を選択します

パス(P)にビットマップのトレース(T)はあります

ここからが旧式のInkscapeと微妙に動作が違うように感じるのですが、Ver1.0.1だと一部しか日本語化していないのでちょっと参考サイトさん見てもわかりづらくなってるかと思います。
旧バージョンのビットマップトレース方法はこちら
数値の入れる場所が英語なんですよね
公式のビットマップトレースの使い方はこちら↓

参考
Inkscape tutorial: Tracing bitmaps

Inkscape の特徴の一つにビットマップをトレースして <パス> 要素を作成するツールがあります。このチュートリアルはこのツールがどう動くかを知る助けになるはずです。

https://inkscape.org/ja/doc/tutorials/tracing/tutorial-tracing.html

Ver1.0.1バージョンの調整方法になりますが、基本線画をパス化するなら

Single scan で
Brightness cutoff でOKです。黒線画でパス化します。
カラーでやりたいときはAutotraceを選択してください。

Brightness threshold は 明るさのしきい値 です
大体ここの数値を入れて
Update を押した後、OKを押します。

OKを押した後、画像サイズによっては時間かかりますが、「レイヤー1」に読み込んだ画像の上に、パス化されたものが重なって出来上がってます。
OKを押した後は、×ボタンを押してメニューを窓を閉じて大丈夫です。
最初「あれ?どこにパス化されたヤツあるの??」ってなるんですけど、移動ツールで画像選択して動かしてみてください。

動かしてパスができたなら、別のレイヤーに移動しておくと次の操作がやりやすいです
(画像クリックで拡大)

※今確認中のメニュー(検証中)
Speckles は 直訳すると「斑点なし」になるんですが不明

アナログ線とパス化したものの違いです。パス化(ベクター化)したのはわかりやすく色替えしました

パスができましたのでファイルから別名で保存を選択して、
Photoshopに配置したいときは svg形式 または eps形式 で保存
Photoshop以外のソフトで呼び出して利用したいときはeps形式 か、
eps非対応の時は ファイル から PNG形式でエクスポート を選んで保存してください
これでOKです。

関連記事
Photoshopエレメンツでベクター画像を配置する方法

PhotoshopでInkscapeでベクター化した線画を置く方法

今回はPhotoshop2020での操作案内ですが、どのPhotoshopバージョンでもやり方は同じです。
出力したいサイズのpsdファイルをあらかじめ作って保存した後、
ファイル から 埋め込みを配置 または リンクを配置 を選んで、ファイルを選択します。

Photoshopのファイルメニュー

配置二種類あるんですけど、初心者は「埋め込みを配置」で大丈夫です。
サイズを決めてentreキーを押すとサイズ確定します。
解像度の高いファイルでも、ベクターファイルなら線が劣化しません。
(画像クリックで拡大)

Inkscape ビットマップトレースに必要な最小限の操作について

ファイルを開く、保存するときのポイント

ファイルを開く

ビットマップトレースでファイルを開くときは必ずインポートを使ってください
メニューの ファイル(F) から インポート(I)です。

ファイルを保存する

メニューの ファイル(F) から 名前を付けて保存(A)です。

別名で保存するとき、形式はいろいろ選べます

絵の表示倍率を変更する方法

ショートカットキー

 で 表示拡大
 で 表示縮小

メニュー


z(ズーム)虫眼鏡マーク を押した後
左クリック で 表示拡大
shift 押しながら 左クリック で 表示縮小

表示の切り替え、パスの確認

メニュー 表示(V) 配下の 表示モード(D) に以下のメニューがあるので

通常
↓↑
アウトライン

に表示を切り替えつつ、見ると、どういったパスになってるか見やすいです。

アウトラインモードでパス編集に切り替えた画面がこちら
(画像クリックで拡大表示)

ノードツール(N)でパスの調整をできます。

Adobe illustratorだと「ダイレクト選択ツール」メニューにあたります

画面表示中の移動

キーボード操作

矢印キーボード ↑ ↓ → ← でちょっとずつ表示画面が動きます。

スペースキーを押し続けながらマウスを動かすことで、マウスの動きに合わせて表示画面が動いてくれます。

最後に。

デジタルで今は何でもできますが、アナログ漫画やイラスト描き続けていた人は長年培ってきた「自分の線」があるはずです。線画まで無理にデジタル化する必要はなく、一番楽な方法をデジタルとアナログでいいとこ取りして作業効率上げていけたらいいですね!私はデジタルソフト触って●●年たとうしてますが、まだ試行錯誤してますし、新しいツールたくさん出てますし、自分にあったものを探していければと思ってます。

趣味の絵描きなんて、デジタルでもアナログでもどっちでも楽しめれば オッケーなんです。
やり方なんざ決まってません。趣味は楽しくね!!

 
 
 
 

補足:ここまで読んでみて、Inkscape難しそう!と思ったら

ある程度簡単な線で、既に修正が必要ない、という状態の画像ならオンラインサイトで変換する手もあります。

VectorMagic(アメリカ海外サイト 日本語版あり)
https://ja.vectormagic.com/

簡単に JPG、PNG、GIF ファイルを PDF、SVG、EPS ベクターに変換
世界最高のフルカラー自動トレーサーで、迅速に作品を印刷、刺繍、切り抜き、その他に活用してください!

実際使ってみたのがこちら↓

あえてギザギザpng画像からの変換をしてみた(画像クリックで拡大)

こちらの良い点は、そんなに手間かけなくてもepsとかsvg、pdfに変換できるところですね。CSSアニメーションとかで使う簡単なアイコンものだったらこれでもいいかもしれないですね。
デメリットとしては、漫画線などのパス化したあとについて、細かい修正ができないこと。パス修正・追加をキチンをしようとすると結局Inkscape立ち上げることになるので、それだったら最初からInkscape使った方がいい感じになりますよ。
あとどうしても快適な通信回線が必要になるので、作業中はオフライン派の人にはちょっと違うかなーというものですね。

補足2 クリスタ持ってれば、線画抽出svgで可能です。

Inkscape使うまでもないなー。クリスタ持ってる!って人向けです。

●。スポンサーリンク













●。
●。