簡単!Illustratorにトレースしたデータを送信できるアプリ「Adobe Capture CC」の使い方~紙に描いた手描きのイラストをトートバッグのデータに~ | オリジナルトートバッグWEB

レレカの電話番号は0120828117

簡単!Illustratorにトレースしたデータを送信できるアプリ「Adobe Capture CC」の使い方~紙に描いた手描きのイラストをトートバッグのデータに~

トートバッグコラム

簡単!Illustratorにトレースしたデータを送信できるアプリ「Adobe Capture CC」の使い方~紙に描いた手描きのイラストをトートバッグのデータに~

簡単!Illustratorにトレースしたデータを送信できるアプリ「Adobe Capture CC」の使い方~紙に描いた手描きのイラストをトートバッグのデータに~

手描きのデザインから素早くトートバッグの入稿データを作るには!?

ペンタブなんか持っていない……。
手元には手描きで描いたイラストと、Illustratorのソフトだけ……。
そんな方でもスマートフォンがあれば、簡単にイラストのトレースができる(パスのアウトラインが取れる)方法があります。
今回は、手描きのイラストを、トートバッグや不織布などのバッグに印刷して、袋を制作する簡単な方法をご紹介します!

 

↓例えば、こんな手描きのイラストが・・・

手描きのイラスト

 

↓入稿データを作りたい時などの元データになり、トートバッグを作るなんて事も!
手描きイラストで作ったトートバッグ

※写真のモックアップはコットントートバッグのイメージです。
※実際の商品とは異なります。

 

実はこれ、難しくはありません!
Illustrator初心者の方にもオススメの方法です!

 

目次

記事に出てくる用語の解説

こちらの記事にはIllustratorの専門用語が出てきます。
よく出てくる用語をいくつか解説いたしますので、Illustrator初心者の方はご参考にしてください。

アウトライン(outline)
アウトラインとは、OUT(外側の)LINE(線)の名の通り、
Illustrator上で文字や画像、線のデータでなく、塗りだけのデータになっている状態です。
文字や線を塗りだけのデータに変換することを「アウトライン化」と呼びます。
パス(path)
線で描かれたベクターデータのことです。
ベクターデータとは、Illustrator特有の綺麗に印刷できるデータで、
線が画像ではなく、計算式で描かれているので、
どこまで拡大しても解像度が乱れません。
トレース(trace)
直訳すると、「足跡」という意味もあるこの言葉ですが、
Illustrator上では、画像のデータを計算式で描かれたIllustrator特有のデータに変換する事です。
そのため、どこまで拡大しても解像度が乱れません。

【必要なもの】3つだけ!イラスト/スマートフォン/Illustrator

  • 紙に描いたイラスト(またはスマートフォンに入っている画像データ)
  • スマートフォン
  • Illustrator

※ご注意※
こちらで紹介する方法は、簡単にトレースできる反面、精度が機械に依存しています。
また、自分以外の方に著作権がある場合や、他社の著作物を使用する権利及び改変する権利がない場合は、ご利用にならないようお気をつけください。

【手順】ざっくり手順(3ステップで簡単!Illustratorにイラストのアウトラインが取れたデータを送信!)

  1. アプリのカメラで『撮影』! または、アプリで画像を『開く』!
  2. シンプルで簡単な『調整』!
  3. Illustratorへ『送信』!

詳しい使い方はこちら

以上です!シンプルですね!

必要な操作がかなりシンプルで明快なので、覚えてしまえばあっという間にトレースされたデータをパソコンに送信できます!

 

そして、実際にIllustratorで開いてみると、この通り!
illustratorへ送信した手描きイラスト

使い勝手が良さそうですね!

【概要】そもそも、Adobe Capture CC(アドビ キャプチャー)って何?

ご存知でしょうか?
「Adobe Capture CC」
聞いたことがあるような、ないような……。

 

ここで使用する、このアプリは、IllustratorやPhotoshopで有名なアドビ社の出している公式アプリです。
iPhoneの方はApple Store、Androidの方はGoogle playからダウンロードできます。
公式サイトにも書かれているように、無料です。

 

Adobe公式サイト Adobe Capture CC
このアプリの公式サイトを見ると分かる通り、“多機能”です。
多機能だけに、一見とっつきにくそうにも見えるのですが、ここでは迷わず自分に必要な機能だけを使いましょう!
他の機能は後から知っても良いということで……。

【使い方】トレースって何?という人にも簡単にトレースが出来てしまう便利機能を使ってみよう!

さて、Adobe Capture CC の機能の中には、「手軽にトレースをしたい」人にとって断トツに便利な機能があります。
それが、「シェイプ」機能です。

なんと、Illustratorの「画像トレース」機能の簡易版が、スマートフォンのアドビ公式アプリから簡単に出来るようになっています!
まずは気軽な気持ちで、実際にやってみましょう!

1.紙に書かれた絵を、アプリで「撮影」!

1-1.イラストを描く時のポイント

イラストを描く時のポイント※用紙に罫線(グリッド)があったり、紙が透けていると、データに反映されてしまいますので、真っ白な紙に描きましょう。
※イラストの色と紙の色がクッキリと区別できる状態になっていると、綺麗に撮影できます。
※イラストにグラデーションがあると、データに綺麗に反映されず、全体の精度も落ちる場合があります。

 

1-2.撮り方のポイント

イラストの撮り方のポイント※出来る限り正面から撮影しましょう!
※明るい場所で、手やスマートフォンの影が入らないように撮影しましょう!

 

トレースしたい箇所だけが認識されるよう調整します

※画面下のスライドを左右に動かし、トレースしたい箇所だけが認識されるよう調整しましょう!撮影前でも、「タップして停止」中でも、スライドを動かしてトレースしたい箇所を決めることができます。
※撮影ボタンで撮影する前に、画面をタップすることで一時停止できる機能(タップして停止)が便利です!
調整が終わったらチェックマークを押して次に進みましょう!

 

1-3.調整のポイント

調整のポイント

※「切り抜き」 で不要な部分をトリミングしましょう!トリミングしきれなかった不要な部分は、後々Illustratorで取り除けます!
※「スムーズ」で滑らかさの自動補正が出来ます。オンかオフを選びましょう!画面で確認して、お好みの方を選びましょう。

調整が終わったら、右上の「保存」をタップしましょう!

2.Illustratorへ「送信」!

2-1.サムネイルの画面に戻ります。

サムネイルの画面に戻ります。

左下の「×」ボタンを押すと、サムネイルの画面に戻れます。

 

2-2.サムネイルの右下の「…」をタップします。

サムネイルの右下の「…」をタップします。

無事、先程トレースしたイラストが書き出されています!
「…」をタップして詳細を開きましょう!

 

2-3.PDFやSVGで書き出し!

「書き出し形式…」をタップし、Illustratorで開ける形式である「PDF」または「SVG」をタップします。メールやチャットなど、お好みの方法でパソコンへ送ります。

Illustrator CCでクラウドで同期の設定されている場合は、「アプリで開く…」をタップし、「Illustrator」をタップして少し待つだけで、Illustratorに表示されます。これは近年できた方法なので、ちょっと上級者向け(?)かもしれないですね。

3.Illustratorで「開く」!

3.受信したメールやチャットの添付ファイルをIllustratorで開いてみましょう!

受信したメールやチャットの添付ファイルをIllustratorで開いてみましょう!

これだけの手順でIllustratorで使えるトレースされたデータが仕上がりました!

トレースされているので、もちろん、色を変えることも、サイズを変えることも出来ますね!不要なパーツは消すことも出来ます!

 

※トレースされたデータは、ご注文予定の商品の入稿ガイドに合わせた形に調整をしましょう!
※特に、線幅が細すぎるとかすれたり、抜き幅が狭すぎると潰れてしまうことがあるので、ご注文予定の該当商品のガイドラインで注意点を確認してみましょう。

【比較】従来のトレースとアプリでのトレースの違い

既に手描きの絵は紙に描かれている(ペンタブ等を使ってデジタル上で描かれたデータではない)という前提で、従来のIllustratorでの画像トレースと、Adobe Capture CCでの画像トレースのスピード感とメリット・デメリットを比較をしてみました。

▼パソコン
Illustratorでのトレース
▼アプリ
Adobe Capture CCでのトレース
取り込み(Illustrator) 1.手描きのイラストをスキャン

<メリット>
○ 縦横比が崩れない
○ シワや影などの不要なノイズが入りにくい

<デメリット>
× スキャナが必要
× 手間がかかる

1.写真撮影&調整

<メリット>
○ 速い
○ その場で確認できる

<デメリット>
× 傾いて撮影される可能性
× 用紙のシワや影が映らないようにする工夫が必要

2.読み込み 2.送信
調整 3.画像トレースを作成

<メリット>
○ しきい値、パスの割合、コーナーの数、ノイズの大きさなど細かく調整できる

<デメリット>
× 慣れていないと調整方法が分かりづらい可能性あり

(調整は撮影と同時に行える)

<メリット>
○ シンプルで分かりやすい

<デメリット>
× 微調整ができない

4.拡張
完成 5.編集元になるイラストデータが完成 3.Illustratorで確認、編集元になるイラストデータが完成

 

従来の方法では、元のイラストをなるべく変化させずに、ベクターデータにトレースできます。再現度が高いことと微調整が可能であることが特徴です。
しかし、スキャナをお持ちではない方や、急いでいる方には不向きで、気軽さには劣ります。

 

アプリを使った方法は、とにかく速く、分かりやすいことが特徴です。
Illustratorでの画像トレースに比べると若干劣るとは言えど、なかなかの精度の高さを実感いただけるかと思います。
また、『そのイラストを最終的に使うかどうかは確定してはいないけど、ちょっとIllustrator上で様子を見たい……』なんて時には、かなり重宝できそうです。

【まとめ】簡易版のトレースではあるが、意外と高い精度!そして、速い!

いかがでしょうか?
精度の必要なデザインには使いづらいこともありますが、手っ取り早いことは、このツールの最大の強みです。

私自身、ここまでアプリの性能が上がっていることには正直驚きました。
ぜひ、パソコンのIllustrator上でトレースが分からない方も、一度お試しいただければと思います。

ベテランの方にとっても、微調整は不要なイラストや急がないといけない時、Illustratorに配置した時の様子だけ気軽に見たい時には、かなり便利なツールとなりそうですね!

【予備知識】トレースやパスのアウトラインを取っていないと、どうなる?

ものすごく簡単に言うと、トレースをしていない画像での入稿では、不鮮明に印刷される場合があります。
パスのアウトラインを取っていないと、他人が開いた時にデザインが変わってしまう可能性があります。

 

また、印刷したい対象物によっては、画像で入稿すると、別途費用がかかってしまうことも多々あります。
細部がほんの少し変わってしまうのは良いとしても、仕上がりのデザイン部分がガタガタになってしまうのは避けたいものですね。

 

ちょっと大げさに書きましたが、実はよくあるトラブルなのです。
トラブルを避けるためにも、今回の方法でのトレースの出番があるかもしれません!
トレースをすることによるメリットとデメリットを挙げてみると、次の通りです。

トレースのメリット
  • トレース後のデータはIllustrator上で拡大や縮小をしても、解像度が乱れない。
  • Illustrator上でベクターデータとして微修正が出来る。
  • Illustrator上で色の変更も可能。
  • 基本的には、別のパソコンから開いてもデザインが変わらない。

※特殊な環境を除きます。

トレースのデメリット
  • イラストのトレースをすると、原画に比べて細部が微妙に異なる形になる。

※気になる所があった場合は、Illustrator上で微修正をしましょう。

【関連情報】その他、関連性のある入稿データ作成時の注意事項

画像での入稿の注意点

解像度が低いと線がガタついたり、かすれたりします。
必要な画像の解像度は商品によって異なりますので、入稿先の該当商品の入稿ガイドを確認してみましょう。画像での入稿の注意点

 

線の効果を使っているが、パスのアウトラインが取れていない場合の注意点

開く環境、貼り付け方、グループ化、レイヤー変更など、様々な条件を受けて線の効果が微妙に変動してしまう事があります。
(効果も計算式で出来ているため、土台となる条件が変わると計算結果が変わってしまうのです。)

 

文字のアウトラインが取れていない場合の注意点

データ作成に使用したフォントがインストールされていないパソコンで開くと、別のフォントに置き換えられてしまいます。
せっかく作ったデザインが別物になってしまいます。文字のアウトラインが取れていない場合の注意点

 

パスのアウトラインと、文字のアウトラインが取れている場合のメリット

良い意味で、形状が変化しにくい状態になります。
他人へデータを渡した際に、崩れるリスクが最小限になります!
入稿時には必ず文字のアウトラインを行いましょう!(アウトライン前のデータも編集用に残しておきましょう。)
デザインによっては、パスのアウトラインも使っていきましょう!パスのアウトラインと、文字のアウトラインが取れている場合のメリット