個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

無料の名刺・ビジネスカードテンプレート200+

クオリティが高いにもかかわらず、無料で利用できる名刺・ビジネスカードテンプレートって、かなり多く出回

記事を読む

デザイン性・アイディアに富んだパッケージ/プロダクトデザインvol.35

デザイン性・アイディアに富んだパッケージ/プロダクトデザインvol.35

優れたパッケージデザイン・プロダクトデザインをご紹介している金曜日企画、第35回目です。 35回目

記事を読む

パッケージデザインvol.12 参考になる優れたパッケージ/プロダクトデザイン20をご紹介(金曜日企画)

デザイン性・アイディアに富んだパッケージ/プロダクトデザインvol.12

優れたパッケージデザイン・プロダクトデザインをご紹介している金曜日企画、第12回目です。 今回は和

記事を読む

逆にカッコイイ!1970年代編纂のロゴ作品集を丸ごと見られる「Vintage Logos」

逆にカッコイイ!1970年代編纂のロゴ作品集を丸ごと見られる「Vintage Logos」

ロゴが好きな方、ロゴを作成する方、ロゴを作りたい方、必見のサイトをご紹介します。 1970年代半ば

記事を読む

レジご担当者も思わずニヤリ!おしゃれすぎるデザインされたバーコードたち56

ふだん見かける味気ないバーコード。 バーコードってこんなもの、という先入観から、何の疑問ももつこと

記事を読む

パッケージ/プロダクトデザインvol.33 参考になる優れたデザインをご紹介

デザイン性・アイディアに富んだパッケージ/プロダクトデザインvol.33

優れたパッケージデザイン・プロダクトデザインをご紹介している金曜日企画、第33回目です。 33回目

記事を読む

楽しみながらデザインの知識&スキルがアップするゲームまとめサイト「Games for designers」

楽しみながらデザインの知識&スキルがアップするゲームまとめサイト「Games for designers」

デザイナーのための楽しみながら知識&テクニックがアップするゲームまとめサイトをご紹介。 海外ではデ

記事を読む

商用利用可!無料で使える月の高画質画像/写真

商用利用可!無料で使える月の高画質画像/写真

月の無料画像/写真をご紹介します。 ハイクオリティーで、サイズも十分です。 しかも、パブリックド

記事を読む

写真/画像に3DCGポリゴン風エフェクトをかけてくれる無料/フリージェネレーター5つ

写真/画像に3DCGポリゴン風エフェクトをかけてくれる無料/フリージェネレーター5つ

密かなブームとなっている3DCGポリゴンの背景/画像。 とくにスマホなどではよく見かけます。 清

記事を読む

商用利用無料で高画質・ハイクオリティな写真を探すなら「picjumbo」もチェック!

先日、「超ハイクオリティな写真素材を無料ダウンロードできるサイト12」「高画質な写真が商用でも使える

記事を読む