Adobe Photoshop 2022以降の書き出し形式でSVGを作成する方法
Adobe Photoshop 2022以降では仕様が変わってしまいました。
画像イメージを書き出すために、以下2点の用途により適した方法があります。
- 画像のカンバス全体のイメージをSVGファイルとして書き出す
- 部分的な画像イメージのみをSVGファイルとして書き出す
いずれにしても、Photoshop2022からは環境設定を確認する必要があります。
事前準備として環境設定を確認
まずはPhotoshopの環境設定を確認します。
メニューバー➡編集➡環境設定➡書き出しをクリックします。
もしくはファイル➡書き出し➡書き出しの環境設定をクリックしても同じダイアログボックスが開きます。
環境設定のサイドリストに『書き出し』が選択された状態の画面が表示されます。
いちばん下のオプション項目に従来の「書き出し形式」を使用があります。
このチェックボックスにチェックを入れ、OKボタンをクリックします。
では次にSVGファイルの書き出し方法について説明します。
Adobe Photoshop で SVGファイルとして書き出す方法
冒頭でもお話しました通り、用途によって適した方法が異なります。
順を追って説明します。
画像全体のイメージをSVGとして書き出す方法
前述のように書き出しの環境設定で、従来の書き出し形式を使用をアクティブにすると、書き出し項目に消されてしまったSVG項目が復活しします。
したがいまして、メニューバーのファイル➡書き出し➡書き出し形式をクリックします。
書き出し形式のダイアログが立ち上がります。
右サイドのファイル設定の形式に、Photoshop2022では消されてしまったSVGの選択肢が復活しています。
ここでSVGを選択しましょう。
右下の書き出しボタンを押すと、保存場所を選択する書き出し画面が立ち上がります。
保存を押すとSVGファイルが書き出されます。
部分的イメージをSVGとして書き出す方法
Photoshopのレイヤーで、SVGファイルとして書き出したいいイメージをグループ化します。
下のフォルダをクリックし、グループ1というフォルダが作成されます。
グループ1のフォルダ名を *****.svg (ドットSVG)とリネームします。
このフォルダの中に、書き出したいイメージを入れて下さい。
メニューバーのファイル➡生成➡画像アセットにチェックが入っていなければ、クリックしてチェックを入れます。
その状態でメニューバーのファイル➡別名で保存、ファイルの種類をPhotoshopのPSDファイルとして保存します。
イメージの容量にもよりますが、保存された直後もしくは数秒後、PSDファイルと同じ場所にアセットフォルダが保存されます。
このフォルダの中に該当のイメージファイルがSVGとして保存されています。
まとめ
Adobe Photoshop 2022 で廃止されたSVGとして書き出す項目を、従来の方法で書き出す方法の説明をしました。
注意点として、この方法で書き出したSVGファイルはicomoon上ではエラーとして弾かれます。
基本的にPhotoshopは座標や関数などの情報から演算によって描画を再現する仕様ではないため、対応したドローソフトを使う必要があります。
IcomoonのSVGファイルはIllustratorなどで作成したドロー画像を使いましょう。
SVGはサイズを変更しても画質が劣化せず、色を簡単に変更したり、切り抜きやアニメーションなど様々な効果を簡単に追加できるファイル形式です。メリットが多い形式なのに、需要が低かったのかPhotoshop2022では廃止撤廃されました。もっと認知度が高まれば良いですね。