SVGの書き出しかた + IllustratorからPhotoshopにシェイプをコピー

2017/06/30

make-svg-mv
SVGは拡縮可能なベクター画像です。
PhotoshopでもIllustratorでも、CCであればjpgやpngと同じようにアセット機能で書き出しができます。

上手くいかないあるある

Photoshopから書き出しする時には、パス情報がきちんととれる状態か、というところが大事です。

ラスタライズされている

ビットマップデータですので、もちろんSVGにはなりません。
一応フリーの変換ツールというのがあります。
BMP SVG 変換

スマートオブジェクトになっている

別ファイルを置いているような形で、そこにパス情報自体はないのでダメです。
パスの編集が可能な状態(シェイプ)である必要があります。
Photoshopにシェイプとして持ってくる方法は下で説明しています

テキストになっている

テキスト情報のままSVGに含めた文字は、テキストなので環境によって見た目が変わることがあります。
アイコンやイラストのようなフォントであっても、それはあくまでもテキストです。
均一な表示を求めるならアウトライン化(シェイプに変換)するのが望ましいです。
レイヤーパネル上で右クリックし、「シェイプに変換」してください。

make-svg01
その際、「太字」などテキスト用の効果をかけてしまっていると変換できません
もしそのままのデザインでSVGにしたいなら、Illustratorでそのテキストを作成してアウトライン化し、パスのオフセットなどで調整する必要があります。

make-svg02

 

IllustratorからPhotoshopに、シェイプとしてデータを持ってきたい

Illustratorからイラストを持ってきたらスマートオブジェクトになった。
そして、それをPhotoshopで開くとIllustratorが起動しちゃう。
というのはよくあることですね。

アイコンなどシンプルなパーツは、いちいちIllustratorを開くよりPhotoshop上でそのまま編集したい。
また、スマートオブジェクトの状態でサイズを変更していると、中身を開いた時の実際のサイズが違う、というのもちょっと嫌な時があります。

そういう時は、ドラッグ&ドロップではなくコピー&ペーストで持ってきましょう。
Illustratorでシェイプを選択してコピーし、Photoshop上でペーストすると、どの状態でデータを置くのかが選択できます。
ここでシェイプを選択すればOK。

make-svg03

ただし、Photoshopが認識できないデータ(複合パスなど)の場合は綺麗に持ってくることができません。
これをシェイプとして持ってくるためには下記のようなひと手間が必要です。

  • ・不要なパスや重なっているパスを整理し、見た目通りのひとかたまりのシェイプにする
    アウトライン化や、パスファインダーで結合・刈り込みなどの処理をする
  • ・別の色のシェイプは分けて持ってくる

また、マスクがかかっている場合もPhotoshopに持ってくることができません。
特に素材として配布されているaiデータなどで、クリップグループで綺麗に整理されていることがよくありますね。
その場合はクリップグループ全体ではなく、中身のみを選択してコピーするようにしてください。

make-svg04

今までスマートオブジェクトを置いていたのを、最終的に書き出しする段階になってから上記の手間をかけてシェイプにするのはあまり意味がありません。
Photoshopにシェイプとして持ってきたいのは、その方がデザイン作成の際に編集がしやすいからです。
わざわざそうする必要がなければ、普通にIllustratorで書き出ししましょう。

Photoshop CC 2018・Illustrator CC 2018でSVGが書き出しできない(18/03/09 追記)
→先日のアップデートで解消されていました!(18/05/21 追記)

CC 2018にアップデートしたところ、アセット生成でもSVGをコピーでもSVGが作成できなくなっているようでした。

★Illustrator の場合
aiファイルをダブルクリックで直接開くのではなく、Illustrator を起動しておいてからファイルを開けば問題ないようです。

★Photoshop の場合
古いバージョンのCC 2017で書き出ししましょう。
Creative Cloud の「他のバージョン」からダウンロードで、最新バージョンと使い分けて利用できます。

make-svg05

川端