個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプトをご紹介します。
Photoshopで作成していたデータをSVGに変換したいというときに重宝するスクリプトです。
ご参考になれば幸いです。

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト「Save as SVG」

「Save as SVG」は、Photoshopレイヤーから直接SVGに書き出せる便利なスクリプトです。
Photoshopで作成したものをSVGに変換したいというケースに重宝するスクリプトです。
シェイプレイヤーをレイヤーごとにSVGに変換してくれます。
CS5以上に対応しています。

スクリプト「Save as SVG」の使い方

こちらのサイトからスクリプトをダウンロードします。

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

スクリプトファイルをApplications/Adobe Photoshop/Presets/Scripts内に移動します。
Photoshopを立ち上げて、Photoshopデータを作成/あるいは開きます。
シェプレイヤーをレイヤーごとに作成します。

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

注意点として、複数からなるシェイプは必ず結合させること。
CS6以上なら簡単に結合できますが、CS5はそうもいきません。

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

そんなときには、以下の手順で結合させましょう。
複数からなるシェイプのレイヤーを選択。メニュー>レイヤー>ラスタライズ>シェイプを選択します。

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

ラスタライズできたら、レイヤーパネルで先ほどラスタライズしたシェイプをcommandを押しながらクリックします。
すると、シェイプの形状に沿って選択できます。

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

選択できたらパスパネルを開き、パネルメニューから「作業用パスを作成」を選択します。

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

パスが作成できたら、そのまま、メニュー>レイヤー>新規塗りつぶしレイヤー>ベタ塗りを選択します。

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

OKを押して、新規レイヤーを作成し、塗りつぶしのカラーを選択します。

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

これでようやく、結合できたシェイプが出来上がりました。
どんだけ面倒やねん! CS6まで放置していたというのは信じがたい行為のAdobe!! 
それはさておき、続きです。
SVGに書き出したいレイヤー名を「◯◯.svg」と変換します。
1つひとつ変換するのは面倒という場合には、「Renamy」や「Group Layer Renaming (Script)」といったプラグインやスクリプトがありますので、活用してください。
Group Layer Renamingの使い方は過去の記事Photoshopのレイヤー名をまとめて変更・一括リネームできるスクリプト「Group Layer Renaming」をご覧ください。

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

ファイル>スクリプト>Save as SVGを選択します。
すると、自動的にIllustratorが立ち上がり、psdファイルが保存されているのと同じフォルダにSVGファイルが書き出されます。

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト

CS5だとシェイプ作業が面倒ですが、CS6以上なら問題なし! 
いとも簡単にSVGに書き出してくれるこのスクリプト、便利ですよね!
ご参考になれば幸いです。

Free script: Export your layers from photoshop to SVG in a single click!

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 6
  • 11

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

フライヤー・チラシ・パンフレット用無料テンプレート80(ベクター形式)

ベクター形式のフライヤー・チラシ・パンフレットに使える無料テンプレートがあったのでご紹介します。

記事を読む

Illustratorでのカラーワークで役立つ無料のカラースウォッチライブラリー12

デフォルトのIllustratorはスウォッチパネルがほぼ空状態です。 これは具合が悪い。 いち

記事を読む

インパクト大な名刺はコミュニケーションツールに!名刺ビジネスカード・コレクション1000+!第4部

「え?これが名刺ですか!」「これって紙ですか?」 インパクトのある名刺だと、上記のような質問をされ

記事を読む

無料なのにハイクオリティなロゴ用テンプレートをダウンロードできるサイト8

ロゴはサイト制作に限らず、企業や個人活動を支えるもっとも重要な要素の1つです。 「顔」になるもので

記事を読む

商用無料! 国内外の画像配布サイトまとめ!フリーストックフォトサイト88

商用無料! 国内外の画像配布サイトまとめ!フリーストックフォトサイト88

商用無料で利用できる国内外の画像配布サイトをまとめました。 画像を無料で利用するなら、これらをチェ

記事を読む

Adobe製品の代わりになるベストなソフト5

Adobe製品の代わりになるベストなソフト5

Adobeソフトはデザインになくてはならない、そんなふうに思っていませんか。 確かにそのとおりなの

記事を読む

超ハイクオリティ!商用利用無料の写真素材をダウンロードできるサイト17

超ハイクオリティ!商用利用無料の写真素材をダウンロードできるサイト17

無料の写真素材をダウンロードできるサイトは色々と増えています。 しかし、最初は有難がっていた利用者

記事を読む

30日間限定!フォント、アイコン、テンプレートなどが入った商用利用OKな無料素材集「ZERO Bundle」を今すぐゲット!

「ZERO Bundle」は数人のデザイナーが作成したベクターアイコン、Photoshopアクション

記事を読む

最新スマホからTシャツなどのプロダクトまで!無料のモックアップ用PSDファイル150+

モックアップを自分でつくるのは時間がかかりますし、ありもので間に合うならそれに越したことはありません

記事を読む

壁紙に使いたい美しいピクセルパターンの壁紙15

タイル風の美しい壁紙が、「15 Calming Color Palette and Tile Wal

記事を読む