Illustratorを他のアプリケーションと連動させて使うコツ

2016年11月15日デジ絵ソフトウエア

Adobe Illustrator CS6 Macintosh版 (旧製品)

Illustrator10の時代からIllustratorcs6まで使用して約15年…。

多々あるAdobeのアプリケーションの中で一番多くの方が使っているソフトがIllustratorとphotoshopだと思います。

そこでIllustratorをメイン使いながらphotoshopと連動させて活用するポイントをいくつか紹介したいと思います。

>>私が絶対おすすめする液タブ・ペンタブランキングはこちら


Illustratorで制作するデータはベクターデータ

これは一番始めに覚えておいて頂きたい事です。

長い間デザインをしている方でも意外と知らなかったり、上手く活用できていない様に感じますのでこれからIllustratorを使う方もすでにデザインを生業としている方にもおすすめです。

Illustratorで作成されたデータは全てパス(ベクターデータ)であるという事。

これはどういう事かというとどんなに拡大しても劣化しないデータです。

試しに、Illustratorのパスデータを画面で拡大してみて下さい。

綺麗な線になっています。

比べてphotoshopの画面で画像を拡大してみて下さい。

細かい四角いドットがガタガタしていると思います。

これがIllustratorのデータの扱いです。

このイラストレーターの特性を知っていると知っていないでは制作物にかなりの差がでますので始めに書きました。

次にそれぞれのアプリケーションとの活用方法を記述します。

>>私が絶対おすすめする液タブ・ペンタブランキングはこちら


Illustratorの活用方webデザイン編

まずwebデザインを作成する時にどの様にIllustratorを活用するかですが、webのデザインをする時に一番のおすすめはアイコンやロゴなど画像以外のデザイン要素はIllustratorで作成してしまう事です。

これは始めに述べた拡大しても劣化しないデータである事に紐づきます。

webデザインのカンプはphotoshopで作成するケースが多いかと思います。

そんな時にリテイクが発生して画面の幅を広げたいとかアイコンを大きくしたいといったケースがあると思います。

そんな時にIllustratorで作成されたデータであれば拡大・縮小しても劣化する事はありません。

これが画像データだと劣化するので貼り直したり再度作成する手間が発生します。

スマートオブジェクトとシェイプレイヤー

では、Illustratorで作成した図形やイラストをphotoshopにコピペしてみて下さい。

スマートオブジェクト、ピクセル、パス、シェイプレイヤーの4つが選択できると思います。

単色、もしくはphotoshop上でレイヤースタイルを加える場合はシェイプレイヤーを選択して下さい。

一般的に画像文字やアイコンがそれに当たります。

ロゴやイラストなど基本的に大幅な修正が無い時やイラストレーターベースで作成したデータはスマートオブジェクトを選択して下さい。

スマートオブジェクトはIllustratorで加工修正するとphotoshop側にも反映されるので大変便利です。

もしイラストの修正が出た場合はIllustratorで修正すればphotoshopにも反映されますが、スマートオブジェクトのままにしておく事が条件です。

SVGを活用する

Illustratorを活用するメリットとして.svgという拡張子でかき出せる点です。

svgはwebブラウザーでレンダリングする際に、座標で表現します。

これは時代の進化に伴い多くの画面サイズやデバイスがありますがそれに対応します。

レスポンシブデザインのwebサイトがスタンダードになっていますが、Illustratorで作成された.svgのデータは27インチのimacであろうとスマートフォンであろうと綺麗な表現を可能にします。

このデータをhtmlコーディングで記述してcssで%で指定します。

このsvgを利用して海外のサイトなどで3Dを巧みに表現しているサイトも参考になります。

パスデータの活用方インテリアデザイン編⑴

次にIllustratorは建築関係やインテリアデザインでも活用しやすいです。

これを知っていると作業効率がアップします。

例えばクライアントから図面が送られてきてそれを0からトレースしていませんか?

例えばPDFで送られて来たデータをIllustratorで立ち上げてコピペか.dxfや.dwgという拡張子でかき出してみてください。

それを建築CADやvecterworksなどのソフトで読み込むとそのまま活用できるベクターデータとして読み込まれます。

パスデータの活用方インテリアデザイン編⑵

これは逆のケースも使えます、建築の資料やプレゼンテーションの資料をIllustratorで装飾して使いたい時です。

vecterworksで作成した3Dデータをレンダリング(ワイヤーフレーム)してIllustratorにコピペしてみて下さい。

すると3Dの状態で線画の状態で読み込まれます。

もしIllustratorで3Dを書く時間と労力を考えると立体は3Dで起こして、そのデータを読み込んだ方が活用の幅が広がります。

また建築のシンボルも作業性が高いIllustratorで作成しておいてCADに取り込む使い方もいいとおもいます。

Illustrator拡張機能編

Illustratorには機能を拡張するプラグインが多く存在します。

無料から有料のモノまで様々なので好みや作業環境に合わせて活用して下さい。

対応するバージョンがありますので、お使いのバージョンに対応するプラグインを入れて下さい。

その中で「これはおすすめ!」という機能を書きます。

定番ですが、「Xtream Path」は入れておいていいと思います。

パスを綺麗に書ける、フォントをオリジナルに見せる時に活躍します。

他に便利なのがPhantasmというプラグイン。

これはphootshopにある様な色の補正をIllustrator上でできてしまう機能です。

表現の幅が広がるし、感覚的に色を補正できて便利です。

筆者はIllustratorCS6ですがCCになってからより多くの機能が充実してきてますし、クラウド上で随時更新されるのも利点になります。

手描きをIllustratorで活用する

今の時代デジタル化が進んで、デザイン業界では整理されすぎたPCで作られたモノより手描きの要素が好まれるケースが増えている様に思います。

もちろんクライアントワークで使う場合は求められているモノを提供する為のツールですが要望も多様化している為、手描きのデザインでもパス化しておく必要性があると思います。

手描きをデータが化する方法として手描きで書いたモノをスキャンしてIllustratorに配置して画像トレース→拡張を押すとパス化されます。

※イラストなどの場合は個別にトレースする必要があります。

同様によく利用するのがQRコードのパス化です。

上記の方法でも可能ですが、もう一つの方法を記述しておきます。

QRコードの画像をphootshopで開き、解像度を1200px程までに引き延ばし、自動選択する。

後はパスパレットでパスとしてIllustratorにペーストしましょう。

まとめ

Illustratorの様々な活用法を記述してみましたが、いかがでしたでしょうか?

ただあくまでIllustratorは表現する為のツールです。

使いながらクライアントの求めるモノ、それを超えるものをどう提供するかという事が大事になると思います。

効率よく、機能的にIllustratorを活用していく上で少しでも参考になれば幸いです。






2016年11月15日デジ絵ソフトウエア