PerfectVector
著者: Irene Kim1 分で読める

ibisPaintで画像をベクター化できる?ベクターレイヤーとSVGの違い

ibisPaintのベクターレイヤーでできること、ラスター画像を自動トレースしない理由、適したPNGやJPGを他でも使えるSVGにする方法を解説します。

目次

ibisPaintはベクターレイヤーで拡大縮小可能なストロークを作成・編集できますが、現在の公式ガイドには既存のPNGやJPGをベクターパスにする自動コマンドは記載されていません。「トレース」のチュートリアルは参考画像の上から手動で描く意味です。既存のラスターの絵を他でも使えるSVGにしたいなら、ibisPaintの外で変換または描き直し、結果のパスを確認します。

この違いを理解すると、よくある失望を防げます。ベクターレイヤーへラスター画像を追加しても、ピクセルはベクターになりません。レイヤーの種類は新しいブラシ形状の記録方法を示すもので、キャンバスに見えるすべてを変換する処理ではありません。

ベクター化と呼ばれやすい3つの作業
  • ベクターレイヤーに描く: 新しい編集可能なibisPaintのブラシ形状を作ります。
  • 手動でトレースする: 下にスケッチを置き、自分で線を描き直します。
  • 既存画像をベクター化する: ラスターの見える領域をSVGなどのベクター形式のパスへ再構成します。

ibisPaintのベクターレイヤーが実際に行うこと

公式のベクターレイヤーガイドは、頂点とパスで線を記録するとしています。アプリは各線をブラシ形状と呼びます。通常のラスターレイヤーの線とは異なり、ベクターレイヤーの線は同じピクセル劣化なしで繰り返し拡大縮小できます。

ブラシ形状を選択し、頂点、重なり順、ペン種類、太さ、色も編集できます。整った線画、文字のストローク、吹き出し、後で修正する図形に役立ちます。

ガイドには2つの始め方があります。レイヤーウィンドウから特殊なベクターレイヤーを追加するか、Vector Dip Pen(ベクターGペン)またはVector Felt Tip Pen(ベクターサインペン)で描きます。どちらも新しいベクターレイヤー内容を作ります。既存写真や統合された絵を分析してピクセルをパスにする手順ではありません。

そのため、次の2つは両方とも正しいと言えます。

  • ibisPaintには実際のベクターベースの描画機能がある。
  • ibisPaintはビットマップからSVGへの自動ベクター化ツールとしては記載されていない。

「Let's Trace」は手動のトレースを意味する

Let's Trace(トレースしよう)という公式レッスンは、検索結果では自動機能のように聞こえるかもしれません。手順は描画レイヤーを選び、ブラシツールを選び、スケッチを拡大してペンで上から描くものです。従来の手動トレースの練習です。

手動トレースが正しい選択になることはよくあります。署名、キャラクターの輪郭、様式化したイラストには、自動変換ツールが推測できない芸術的判断が必要かもしれません。どの揺れが絵の一部か、どこでストロークを細くするか、2つの印を接続するかを自分で決めます。

作業時間もかかります。複数の塗り領域を持つ平面的ロゴなら、全境界を手で描くより、自動SVG候補を1つ作って必要な少数のパスを修正するほうが速い場合があります。

新しいベクターストロークの描画、参考画像の手動トレース、ラスターの絵からSVGパスへの自動変換を比較する概念図
ベクターレイヤーは新しいストロークを記録し、手動トレースは参考画像を描き直し、自動ベクター化は既存ピクセルを再構成します。概念図であり、製品画面ではありません。

既存のibisPaintの絵をSVGにできるか

ibisPaintの書き出し結果を別の変換の素材にできますが、それは新しいトレースです。内部のベクターレイヤーのブラシ形状を、そのまま他でも使えるSVGパスへ移すものではありません。

現在のibisPaintの機能・書き出し資料は、作品の共有メニューをImage(PNG/JPEG/PSD)と説明しています。その手順にSVGは載っていません。形式は変わり得るため、インストール済み版の共有メニューとリリースノートを確認します。「ベクターレイヤー」がSVG書き出しを保証すると仮定しないでください。

作業に合う受け渡しを選びます。

出発点実用的な方法保持できるもの
ibisPaintで描く新しい線画編集可能なibisPaintファイルを保ち、次のツール向けに鮮明な高解像度PNGか対応するレイヤー形式を書き出すibisPaint独自形式の作業文書は編集可能。PNGはラスター
既存の平面的PNGやJPG元素材を直接SVGへ変換してベクターエディターで確認元素材から再構成したパスと塗り
正確なロゴ、文字、幾何学的マークベクターエディターで意図した曲線と図形で描き直す自動解釈ではなく制御した形状
絵画、写真、質感のあるイラスト画風を適切に簡略化できない限り高解像度ラスターを保つ連続した色調と質感

元画像が残っているなら、余分なラスター生成を増やさないようにします。ibisPaint内でスクリーンショットを撮り、それを書き出し、新しいコピーをトレースするより、きれいな原本を変換するほうが適しています。

信頼できるラスターからSVGへの手順

適した平面的な絵なら、最短の方法は次のとおりです。

  1. 最良の素材を探します。 SNSのスクリーンショットではなく元のPNG、JPG、WebPを使います。
  2. 切り抜いて整えます。 図形にすべきでない無関係な空間、影、紙の質感、圧縮ノイズを除きます。
  3. 残すべきものを決めます。 絵を定義する輪郭、色の領域、穴、線の太さ、小さな隙間を列挙します。
  4. ベクター候補を1つ作ります。 原本から画像をベクターパスに変換します。
  5. 見た目だけでなく構造を確認します。 選択可能なパス、妥当な色のレイヤーがあり、隠れたラスター画像がないかを確認します。
  6. 最終サイズで比較します。 タブレット画面で残る細い隙間が、小さい印刷、ステッカー、カットファイルでは閉じる場合があります。
  7. 編集可能な原本を保管します。 SVGをibisPaint素材や統合した納品画像とは別に保存します。

平面的な図形主体の絵で、次のアプリにSVGパスが必要な場合にPerfectVectorが適しています。ibisPaintの元レイヤー、ブラシ履歴、作者の意図は復元しません。アップロードしたラスターから見える領域を再構成します。写真や質感のある絵は通常、ピクセルのほうが忠実です。

Androidからベクターエディターへ渡すには、Infinite DesignのトレースとSVG書き出しの確認に従います。アプリのベクターという名称が結果を保証すると仮定せず、パスを元の絵と比較します。

ibisPaintのベクターレイヤーを使い続ける場合

線画を描くか修正し、最終納品物を現行版の対応形式のいずれかにできるならibisPaintを使い続けます。ベクターレイヤーは、描画後のストロークの色や太さの変更、頂点移動、構図内での線画のサイズ変更に特に役立ちます。

レイヤーの制限も理解します。公式ガイドは、ぼかし、指先、アルファロック、遠近変形やメッシュ変形、フィルターなどにはラスター化が必要としています。一度ラスター化すると、そのレイヤーをベクターレイヤーに戻せないとも警告しています。変更前に編集可能なレイヤーかファイルを複製します。

ベクターレイヤーが色塗りや質感に最適とは限りません。ibisPaint自身も通常のラスターレイヤーを一般的な描画や加工に柔軟な選択肢とし、ベクターレイヤーを線に特化したものとしています。混在文書では各方式の得意な部分を使えます。

外部SVGが適した原本になる場合

ウェブサイト、ベクターエディター、レイアウトツール、カッター、印刷会社、開発者間で絵を移す必要があれば、別のSVG原本を使います。SVGは交換形式であり、アプリ固有のベクターレイヤーは1つの文書システム内の編集機能です。

外部の方法が役立つのは次の場合です。

  • 顧客が明示的にSVGを求めた。
  • ロゴを多数の印刷・ウェブサイズで使う。
  • 別の担当者に選択可能な図形と塗りが必要である。
  • カットや製造に閉じた輪郭が必要である。
  • 透明で検査可能なベクター原本が必要である。

線画には塗りの輪郭が必要か、中心線1本が必要かを決めます。通常のラスターベクター化は太いストロークの見える両縁を追い、閉じた図形を作ります。印刷や図形カットには適します。プロッター、ペン、彫刻機には中央を通る1パスが必要な場合があります。単線描画のガイドで違いを説明しています。

変換したSVGを判断する方法

ダウンロード成功は完了ではありません。ベクターエディターで開いて次を確認します。

  • シルエット: 曲線と角が参照に一致する。
  • 空白: 文字やアイコンの穴が開いたまま。
  • 色数: 縁のアンチエイリアスが多数の小さな塗りになっていない。
  • ノード: 図形に十分な点があり、ノイズの各ピクセルに点がない。
  • ストロークと塗り: 次のツールで使う方法に構造が合う。
  • 埋め込み画像: 元のビットマップを入れ物に収めただけではない。
  • 最終寸法: 制作が期待するサイズで開く。

粗いトレースなら、無作為なパス簡略化より先に素材を改善します。コントラストを上げると灰色の縁の断片が除けるかもしれません。背景を整えるとページサイズの長方形が除け、大きな素材で小さな文字の穴が残るかもしれません。線画からSVGへの手順で素材の判断を詳しく扱います。

よくある質問

ibisPaintにはベクターレイヤーがありますか? はい。新しく描くブラシ形状を頂点とパスで保存し、ラスターのストロークと同じ劣化なしで拡大縮小・編集できます。既存ラスターレイヤーは自動変換しません。

ibisPaintはPNGやJPGを自動ベクター化できますか? 現在の公式ベクターレイヤー・トレースガイドには、ビットマップからベクターへの自動コマンドは記載されていません。トレースのチュートリアルはスケッチへの手描きです。既存ピクセルからパスが必要なら、別の変換ツールか描き直しを使います。

ibisPaintはSVGを書き出せますか? 現在の公式共有資料は画像書き出しにPNG、JPEG、PSDを挙げ、SVGはその手順にありません。製品の形式は変わり得るので、インストール済み版の書き出しメニューとリリースノートを確認します。

ibisPaintの絵を別のツールでベクター化できますか? はい。現行アプリが提供する最も鮮明で高解像度のラスターを書き出し、ベクター化の素材にします。変換は見える図形を再構成し、元のibisPaintのベクターレイヤー構造を復元しないため、結果のSVGを確認します。

ibisPaintではベクターレイヤーとラスターレイヤーのどちらを使うべきですか? サイズやスタイルを変える編集可能な線画にはベクターレイヤーを使います。描画、質感、ぼかし、指先、フィルターなどのピクセル処理にはラスターを使います。多くのイラストは両方が役立ちます。

参考資料

  1. ibisPaint — ベクターレイヤー — パス、編集操作、作成手順、制限、ラスター化の動作の公式説明。
  2. ibisPaint — トレースしよう — ブラシツールでスケッチの上から描くトレースを示す公式チュートリアル。
  3. ibisPaint — 新機能 — 現在の公式機能とPNG/JPEG/PSDの共有手順の情報。

絵がピクセルとしてすでに存在し、納品形式がSVGなら、元画像をベクターパスに変換してトレースを原本と比較し、ibisPaintファイルは別の編集可能な描画原本として保管してください。

ブログのその他の記事

画像を
きれいで編集可能なベクターパスに変換