ブログ

2018.05.28

photoshopとillustratorの互換性について
photoshopとillustratorの互換性について

Web制作

こんにちは。制作部の神谷です。
今回は、photoshopデータをillustratorで編集したい!というときのやり方についてです。

ホームページ制作の際、最も使用頻度が高いソフトといえば、やはりphotoshopだと思います。
ところが先日、ホームページ用に制作したデータを印刷したいから、同じものをai形式でほしい、という要望をいただきました。
ネット全盛期ではありますが、まだまだ紙媒体も必要よね…と、対応しかけたところ、なんとphotoshopからillustratorへデータを変換するやり方がわからず…;;
文章をちまちまとコピペしながら思いました。
「絶対に、もっと、簡単な方法があるはずだ…!」
無事変換終了後、調べたら案外簡単だったので、本日はそのやり方+αをお話ししたいと思います。

*やりたかったこと
Photoshopからillustratorへの変換 + 配置後のサイズの微調整 + 色彩調整

*これはダメでした!パターン集
パターン1:フォトショデータをイラレ上にドラッグ&ドロップ
結果:全てピクセルのままなのでフチがバリバリ、拡大縮小非対応、透過解除

パターン2:フォトショ機能の「書き出し→illustratorへのパス書き出し」
結果:aiファイルが作成されるも、開いたら真っ白。
慌てて調べて「アウトライン」で表示をするも色情報、レイヤースタイル共になし。

パターン3:SVGで書き出し
結果:レイヤースタイル解除

パターン4:フォトショをコピペ
結果:反応なし

という事で、1時間近く戦ってもテキストのみがなんとか画面にいる…という惨敗ぶり。
これでは1日かかっても終わらない!と、再度調べて何とか見つけました。
やり方はずばり、

「psdファイルのうえで右クリック → illustratorで開く」!!!

たったこれだけです!
このワンクリックでテキストも編集可能なまま、背景透過も効いたまま、オブジェクトがベクターに置き換わったキレイなデータが開けます!
もうこれだけで感無量でした。

しかし、まだまだ問題が出てきます。
レイヤースタイルが持ってこれない…!!!
(当然といえば当然ですが…)
今回のデータではいくつかの個所にスタイルを当てていたのですが、どうしてもベクターになりません。
これでは困る、という事で調べてみたのですが…ほぼすべてのレイヤースタイルはベクターに置き換わらないようです。
唯一、パターンオーバーレイのみ「ベクター画像+ラスター(バリバリ)パターン」というデータになりました。
よってパターンの大小の変化はないけど、外側の形のみ構うかもしれない…というときには対応できます。
ただやはり、外枠も変化を付け、中のパターンも縮めたい…!となった時は、パターンの複雑さにもよりますが、スウォッチなどにして互換性をもたせるしかないようです。
Photoshop-illustrator間はスウォッチのやり取りができるので、スウォッチさえできてしまえば後はらくちんなのですが…繰り返しパターンのスウォッチを作るのはなかなか大変だったりします。
このあたりについては、今後も何かいい方法を探していきたいと思います。

さて、今回はphotoshopからillustratorへのデータのやり取りでした。
イラレ形式のものをフォトショへ入れ込むことは多々あるのですが、その逆がこんなにも大変だとは思いませんでした。
もし、もっといい方法や、この部分はこうするともっと簡単!というやり方等がありましたらそっと教えていただけるとありがたいです。

WEBコンサルティング

最適化・最大化させる。

制作、集客、解析、改善、検証まで一気通貫した完全オーダーメイドのWebコンサルティング。
お客様のビジネスゴールに向けた戦略的コンサルティングを行います。

VIEW MORE くわしく見る

ホームページ制作

キレイなだけじゃない。

競合分析・サイト設計から更新・運用までトータルサポート。
Web集客のプロが在籍しているアクシスだからこそ実現するデータに基づき最適化されたHPを制作します。

VIEW MORE くわしく見る

ネット集客・広告

来てほしい人が来てくれる。

御社にとっての最適解は、本当にリスティング広告で集客することですか?
リスティング運用者全員がWebコンサルタントのアクシスでは、そこから話を始めます。

VIEW MORE くわしく見る

解析・分析・改善

あなたのサイトを丸裸に。

Webサイトの現状を正しく把握し、目指すべき姿とのギャップを知る。
“2軸思考”であなたのWebサイトを丸裸にし、Webサイトで今何が起きているかを正しく把握します。

VIEW MORE くわしく見る

お問い合わせ

メールフォームからの
お問い合わせ