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

Photoshopレイヤーから直接SVGに書き出せる便利なスクリプトをご紹介します。
Photoshopで作成していたデータをSVGに変換したいというときに重宝するスクリプトです。
ご参考になれば幸いです。
Photoshopレイヤーから直接SVGに書き出せる便利なスクリプト「Save as SVG」
「Save as SVG」は、Photoshopレイヤーから直接SVGに書き出せる便利なスクリプトです。
Photoshopで作成したものをSVGに変換したいというケースに重宝するスクリプトです。
シェイプレイヤーをレイヤーごとにSVGに変換してくれます。
CS5以上に対応しています。
スクリプト「Save as SVG」の使い方
こちらのサイトからスクリプトをダウンロードします。
スクリプトファイルをApplications/Adobe Photoshop/Presets/Scripts内に移動します。
Photoshopを立ち上げて、Photoshopデータを作成/あるいは開きます。
シェプレイヤーをレイヤーごとに作成します。
注意点として、複数からなるシェイプは必ず結合させること。
CS6以上なら簡単に結合できますが、CS5はそうもいきません。
そんなときには、以下の手順で結合させましょう。
複数からなるシェイプのレイヤーを選択。メニュー>レイヤー>ラスタライズ>シェイプを選択します。
ラスタライズできたら、レイヤーパネルで先ほどラスタライズしたシェイプをcommandを押しながらクリックします。
すると、シェイプの形状に沿って選択できます。
選択できたらパスパネルを開き、パネルメニューから「作業用パスを作成」を選択します。
パスが作成できたら、そのまま、メニュー>レイヤー>新規塗りつぶしレイヤー>ベタ塗りを選択します。
OKを押して、新規レイヤーを作成し、塗りつぶしのカラーを選択します。
これでようやく、結合できたシェイプが出来上がりました。
どんだけ面倒やねん! CS6まで放置していたというのは信じがたい行為のAdobe!!
それはさておき、続きです。
SVGに書き出したいレイヤー名を「◯◯.svg」と変換します。
1つひとつ変換するのは面倒という場合には、「Renamy」や「Group Layer Renaming (Script)」といったプラグインやスクリプトがありますので、活用してください。
Group Layer Renamingの使い方は過去の記事Photoshopのレイヤー名をまとめて変更・一括リネームできるスクリプト「Group Layer Renaming」をご覧ください。
ファイル>スクリプト>Save as SVGを選択します。
すると、自動的にIllustratorが立ち上がり、psdファイルが保存されているのと同じフォルダにSVGファイルが書き出されます。
CS5だとシェイプ作業が面倒ですが、CS6以上なら問題なし!
いとも簡単にSVGに書き出してくれるこのスクリプト、便利ですよね!
ご参考になれば幸いです。
Free script: Export your layers from photoshop to SVG in a single click!
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
必携!プロダクトやコンテンツを引き立てるハイクオリティー背景画像49
プロダクトやコンテンツを引き立てる必携のハイクオリティー背景画像をご紹介します。 この有用な背景画
-
-
チェック柄の無料素材!フリーのチェック柄パターン素材700+
チェック柄の無料素材コレクションです。 かわいく見せたり、あたたかみのあるデザインにしたいときなど
-
-
無料の写真+名言でデザイン性は大幅アップさせるPabloがいい!
無料の写真+名言でデザイン性は大幅アップさせるPabloをご紹介します。 「時間がないから、すぐに
-
-
デザインと写真の勉強に最適!海外のプロ写真家のサイトがかっこ良すぎる
美しい写真は好きですか? 美しい写真は見ているだけでワクワクしてきますね。 今回はこんな美しい写
-
-
商用利用無料で高画質・ハイクオリティな写真を探すなら「picjumbo」もチェック!
先日、「超ハイクオリティな写真素材を無料ダウンロードできるサイト12」「高画質な写真が商用でも使える
-
-
デザイン性・アイディアに富んだパッケージ/プロダクトデザインvol.16
優れたパッケージデザイン・プロダクトデザインをご紹介している金曜日企画、第16回目となりました。
-
-
名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料!Dribble発Photoshop用サイトテンプレート45
今回もDribbbleから。 Dribbbleは世界の名だたるデザイナーが作品をアップしているコミ
-
-
ハイクオリティ!商用利用可能な無料のビンテージ/レトロ風ロゴデータ140+(PSD or AI)
商用利用可能な無料ビンテージ/レトロ風ロゴデータをまとめてご紹介。 ファイル形式はPhotosho
-
-
商用でも利用できる無料画像配信サービス「IM-Free」がおしゃれ
以前、無料でサイトを制作できる「月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービ
-
-
複雑なものからシンプルなものまで!シームレスなパターンを作るための方法/チュートリアル33
シームレスパターンを利用する場合、配布されているものを利用するよりは、自分でイチから作成した方がいい