photoshop

Photoshopで文字(テキスト)のSVGがうまく書き出せない時の対応

Photoshopの画像アセットや書き出し形式で画像を書き出したけれど、テキストの文字間が変わってしまった!

PhotoshopでSVGがうまくかき出せなかったのだか、原因がわからない。

という方むけの記事です。

photoshopでのSVG書き出しについて

svgはwebサイトに配置できるベクターデータを書き出せる形式で、ピンチインなどで表示拡大しても画像が荒れず、大変便利です。

phoshopCC2018では、「画像アセット」、「書き出し形式」でSVG(Scalable Vector Graphics)形式での素材書き出しができます。(「web用に保存(従来)」は非対応)

photoshopでwebデザインのデータを制作しているので、Illustratorなど他のソフトではなく、photoshopでsvg書き出しできるのはありがたい。

ただ、きちんと設定しないとおかしな書き出しになることもあります。

テキストレイヤーでの表示対応もその一つです。

設定を変えないと行間が詰まってしまいます。

例えば、pngで書き出すとこうなのに、

svgで書き出すとこうなってしまいます。

この場合は、テキストレイヤーをシェイプレイヤーに変換すると書き出すことができます。

Photoshopで文字のSVGを書き出すポイント

テキストレイヤーはシェイプレイヤーに変換しないと正しく書き出されません。

テキストレイヤーをシェイプレイヤーに変換する方法

1.テキストレイヤーを選択し、「右クリック」、または、「controlキー+クリック」を押す。

2.選択メニューより、「シェイプを変換」を選択する。

SVGはもともとパスを書き出すための形式であるため、Illustratorでいうアウトライン済みデータのようにパスになっている方が適切なのでしょうね。

また、マスクレイヤーも綺麗に書き出されなかったです。

(マスク前の形で書き出されてしまった)

シェイプレイヤーの色設定でのグラデーションは問題なく表示されました。

photoshopでのSVG書き出しの注意点

シェイプレイヤーに変換すると、テキストレイヤーの場合、再編集できなくなります。

別ファイルに複製してから画像書き出しするか、ファイル保存に気をつける必要があるかなと感じました。

まとめ

その他にもphotoshopでのweb素材作成ではたまに「はう!」となることがあります。

例えばこんな感じです。

あわせて読みたい
PhotoshopCCで画像を開いたら破損表示でおかしい(とりあえずの対応策も) PhotoshopCCでダウンロードした画像を開いたところ、画像が破損したような表示になってしまった。どうにかして開く方法はない...

しかし、画像アセットは便利ですし、要素の移動時に単位が出たり、どんどん追加機能が出てphotoshopが進化していくことはとてもありがたいです。

あわせて読みたい
画像アセット(PhotoshopCC)の使い方とjpgでの注意点 photoshopの画像アセット機能はどんな感じなんだろう。使い方を知りたい。 アセットを使う上での注意点が知りたい!...

参考になれば幸いです。