【various sun】第16笑:——で? (5P/21P) 公開!!2020.10.29

クリスタでSVGが入出力可能となり他ソフトとの連携が増えました!!

クリスタ:SVG入出力サムネ

ペイントツールのスタンダード【CLIP STUDIO PAINT PRO】

マンガ制作ソフトの最高峰【CLIP STUDIO PAINT EX】

 

皆さん、本日も閲覧ありがとうございます。

山本電卓と申します。

 

2020年9月30日に漫画制作ソフトCLIP STUDIO PAINT(クリップスタジオペイント)のアップデートが公開され、新しい機能が追加されました。

その中の1つにSVG形式の対応というものがあります。

 

今回はこのSVGとはどういうものか、その対応とはどういうものかを紹介させていただきたいと思います。

それではよろしくお願いいたします

( `・∀・´)ノ!

CLIP STUDIO PAINT(クリスタ)新対応の「SVG」って何?

データ形式(ファイル)の種類の1つ

「SVG」とはJPEGやPSDなどと同じように保存可能なデータ形式(ファイル)の1つで、拡張子は「.svg」です。

 

このSVGとは「Scalable Vector Graphics」の略で、「大きさを変えられるベクター画像」という意味になります。

このデータ形式は画像をデータとして扱っている為、その名の通り拡大・縮小しても劣化しないという特徴を持っています。

※画像を点の座標と線などの数値をもとに表示しています。

 

CLIP STUDIO PAINTでいう所の「ベクターレイヤー」に似ていますね。

ベクターレイヤー【これぞクリスタの特徴!】ベクターレイヤーでこんなことができる!!

ベクターレイヤーはCLIP STUDIO PAINT内で使用できる機能ですのでベクターレイヤー単体で保存することはできませんが。

 

編集用データとして扱われることが多いですがWEBデザインやアニメーションで使用されることもあるようです。

 

また、画素数が多く情報量が大きくなる写真などを保存するには不向きなデータ形式と言えます。

 

データを開くだけならブラウザでできる

SVGデータを開こうとするとブラウザの選択肢が表示されます。

svgデータを開く

 

「ブラウザ」とは今この記事を見ているようにインターネット上のWEBページを閲覧する為のソフトのことです。

Google ChromeやMicrosoft Edgeなどが有名ですね。

 

ブラウザを選択すると以下のようにブラウザ上でデータを見る事ができます。

SVGデータをブラウザで開く

 

「SVG」が使用(編集)できるソフト

SVGは上記のような特徴を持っている為、扱えるソフトも多くありません。

1番有名なのがAdobe Illustratorでしょう。

 

CLIP STUDIO PAINTのリリースノートでもIllustratorの名前が挙げられていますね。

 

その他にはCorel DRAWInkscapeなどがあるようです。

 

CLIP STUDIO PAINT(クリスタ)でSVGを読み込みする(入力)方法

CLIP STUDIO PAINTのメニューから読み込みする

CLIP STUDIO PAINTが入っているデバイス内にSVG形式のデータが保存されている場合はCLIP STUDIO PAINTのメニューから読み込みをすることができます。

 

キャンバスを作成している状態でCLIP STUDIO PAINT画面上部から「ファイル」→「読み込み」→「ベクター」と選択します。

※「ベクター」=「SVG」ということになります。

クリスタ:読み込み(ベクター)

 

するとデバイスのフォルダが開きますので保存されているSVGデータを選択して「開く」を選択、もしくはSVGデータをダブルクリックしましょう。

クリスタ:読み込み(ベクター)

 

これでキャンバス上にSVGデータをベクターレイヤーとして開くことができます。

クリスタ:読み込み(ベクター)

 

レイヤーパレットを見ますと読み込んだSVGデータは「ベクターレイヤー」として表示されています。

クリスタ:読み込み(ベクター)

 

クリップボードを利用したコピー&ペースト(貼り付け)で読み込みする

※「クリップボード」とはコピー&ペーストなどをする際にデバイス内で一時的にデータを保存する場所です。

 

SVGデータを編集できるソフト上で[Ctrl(Command)]+[C]などの操作でベクターデータをコピーし、CLIP STUDIO PAINTのキャンバス上で上部メニューの「編集」→「貼り付け」と選択、もしくは[Ctrl(Command)]+[V]と入力することでもSVGデータを開くことができます。

クリスタ:貼り付け

クリスタ:貼り付け(ベクター)

 

SVGデータをコピー&ペースト(貼り付け)で読み込みする場合の注意点…!

コピー&ペースト(貼り付け)でSVGデータを扱う場合、各ソフトでの設定が必要になります。

 

Illustratorの場合の設定

例えばIllustratorですと「環境設定」の「クリップボード」の項目に「コピー時:SVGコードを含める」などの項目があります。

 

ここにチェックが入っていないとベクターデータをSVG形式としてコピーしてくれません。

 

CLIP STUDIO PAINT側の設定

CLIP STUDIO PAINT画面上部から「ファイル(Mac OSの場合は「CLIP STUDIO PAINT」)→「環境設定」と選択して環境設定ウィンドウを表示させます。

クリスタ:環境設定

 

その中の「コマンド」の項目の中に「貼り付け」の設定を行う箇所がります。

クリスタ:環境設定(貼り付け)

 

↑ここで「クリップボードにSVGコードがあるとき」の設定を「ベクター線に変換」にしておかないとペースト(貼り付け)したSVGデータがベクターレイヤーになってくれません。

 

CLIP STUDIO PAINTへ読み込みしたSVGデータの特徴

CLIP STUDIO PAINTへSVGデータを読み込みしますとベクターレイヤーになります。

CLIP STUDIO PAINTのベクターレイヤーは性質上塗りつぶしができません

 

しかし、Illustratorでは塗りつぶしもベクターデータとして制作することができます。

では塗りつぶしも含まれるSVGデータを読み込んだ場合はどうなるかといいますと輪郭線だけに変換されて表示されます。

クリスタ:SVGデータ読み込み

 

その為、塗りつぶし部分はラスターレイヤーを作成して輪郭線と同じ色で塗りつぶしを行う必要があります。

レイヤー:サムネ【初めてのクリスタ】キャンバス作成後は「レイヤー」を作って絵を描こう!!

 

読み込みしたSVGデータでできること

CLIP STUDIO PAINTの編集機能が使える!

CLIP STUDIO PAINT上にSVGデータを読み込みしますとベクターレイヤーとして開く為、そこに描画されている線は「制御点」を持ったベクター線となっています。

クリスタ:制御点

 

ですのでCLIP STUDIO PAINTの制御点操作による編集ができるようになります。

ベクターレイヤー【これぞクリスタの特徴!】ベクターレイヤーでこんなことができる!! 【クリスタ便利機能】ベクターレイヤーでは「制御点」操作でこんなことができる!!

 

また、ベクター線は劣化しにくいですので「変形」も自由にできます。

クリスタ:変形【クリスタ】なら絵・イラストをこれだけ自在に変形できる!!

 

もちろん、追加で描画していくこともできますね。

クリスタ:描画

 

「ベクターから定規」機能で特殊な描画ツールも使用可能に!

CLIP STUDIO PAINTにはSVGデータの扱いが可能になったと同時に、ベクター線から「定規」を作成する機能もアップデートにより追加されました。

 

ベクターレイヤーを選択した状態でCLIP STUDIO PAINT画面上部から「レイヤー」→「定規・コマ枠」→「ベクターから定規」と選択することで選択したベクターレイヤー上に描画されている線と同じ形の「定規」を作成することができます。

クリスタ:ベクターから定規

クリスタ:ベクターから定規

※↑青いラインが定規です。

 

レイヤーパレットにも選択したベクターレイヤーに定規が作成されたことを表すアイコンが表示されます。

クリスタ:ベクターから定規

 

CLIP STUDIO PAINTでの「定規」は作成された定規の形に描画ツールの動きを固定することができるものです。

 

ですので読み込みしたSVGデータから定規を作成することで、CLIP STUDIO PAINT特有のツールを使用して描き直すことができるようになるのです。

クリスタ:ベクターから定規

 

ただし、この方法で作成した「定規」は選択したベクターレイヤー上に作成されますので、新しいレイヤーに別のツールで描き直したい場合はドラッグ移動で定規を新しいレイヤーに移動させて使用しましょう。

クリスタ:定規の移動

 

MEMO

定規機能で描画ツールの動きを固定したい場合は、

CLIP STUDIO PAINT画面上部メニューの「表示」内にある「定規にスナップ」にチェックが入っていることと、

描画ツール側のサブツール詳細で「スナップ可能」にチェックを入れることが条件になります。

クリスタ:スナップ(定規)

CLIP STUDIO PAINT画面【クリスタ補足】ウィンドウ(パレット)やアイコンが説明されている場所に見当たらない時は?

 

CLIP STUDIO PAINT(クリスタ)でSVGを書き出しする(出力)方法

SVGデータを書き出しする際の注意点…!

CLIP STUDIO PAINTのキャンバス内にベクターレイヤーがある場合、SVGデータとして書き出すことができます。

 

その際に注意しなければいけないのは、ベクターレイヤーもしくはベクターレイヤーが入っているレイヤーフォルダーを選択しなければならないという点です

 

ベクターレイヤーを選択している状態でないと書き出し作業を行うことができません

※非表示のベクターレイヤーを選択していても書き出し作業を行うことができません。

クリスタ:ベクターレイヤーの選択

 

また、この時のベクターレイヤーの選択は複数選択することもできます。

クリスタ:ベクターレイヤーの複数選択

 

複数選択の中、もしくはレイヤーフォルダーの中にベクターレイヤー以外のレイヤーが入っていたとしても書き出し作業を行うことはできますが、ベクターレイヤー以外のレイヤーの情報はSVGデータとして反映されません

 

CLIP STUDIO PAINTのメニューから書き出しする

ベクターレイヤーを選択している状態にしましたらCLIP STUDIO PAINT画面上部から「ファイル」→「ベクター書き出し」と選択します。

クリスタ:ベクター書き出し

 

するとデバイスのフォルダが開きますので保存場所を選択し、必要であればデータ名を入力して「保存」を選択します。

クリスタ:ベクター書き出し

 

これで指定したフォルダの場所に選択したベクターレイヤーがSVGデータとして保存されます。

クリスタ:ベクター書き出し

 

また、複数のベクターレイヤーを選択していた状態でも1つのSVGデータとして保存されます。

しかし、複数のベクターレイヤーを書き出しした1つのSVGデータをIllustratorで開くと複数レイヤーで開きました。

Illustrator:SVG読み込み

 

クリップボードを利用したコピー&ペースト(貼り付け)で書き出しする

※「クリップボード」とはコピー&ペーストなどをする際にデバイス内で一時的にデータを保存する場所です。

 

ベクターレイヤーを選択している状態でCLIP STUDIO PAINT画面上部から「編集」→「ベクターをSVG形式でコピー」と選択します。

※通常のコピーではSVGデータとしてコピーできないので注意しましょう。

クリスタ:ベクターをSVG形式でコピー

 

これででデバイスのクリップボードに一時保存することができますので、Illustratorなどの編集画面でペースト(貼り付け)作業をするとベクターレイヤーの情報をそのソフト上で開くことができます。

※CLIP STUDIO PAINT内でしたら通常のコピー&ペースト(貼り付け)でベクターレイヤーのまま扱うことができます。

 

CLIP STUDIO PAINTから書き出ししたSVGデータの特徴

CLIP STUDIO PAINTはペイントソフトですのでペンや筆などのツールに加え、入り抜きの描写やアンチエイリアス、ブラシ先端を変えて描画することもできます。

これらをベクターレイヤーの上で描画し、それをSVGデータとして書き出しした場合はどうなるのかという疑問が出てきます。

 

結論を言えばSVGデータとして書き出しされる情報は「線」「ブラシサイズ」「描画色」のみになります。

SVGデータ:クリスタ・イラレ比較

 

↑筆圧によって細く描画された線も元のブラシサイズの太さで統一された線になっています。

 

ですので「デコレーションツール」などで柄のある線を描画しても普通の線として書き出しされます。

SVGデータ:クリスタ・イラレ比較

 

CLIP STUDIO PAINT(クリスタ)でSVGデータを入出力できるようになったことによる利点!

CLIP STUDIO PAINTはPSDデータを入出力できるため、Photoshopとは以前からデータの共有はできていました。

※Photoshopはベクターレイヤーに対応していません。

 

今回新たにSVGデータを扱えることになり、さらにデータを共有できるソフトが増えました。

特にIllustratorとの共有は大きいです。

 

Illustrator専用のデータ形式(AI)はイラストの仕事などでもクライアントから最終データとして要望されることが多いので、メインの制作をCLIP STUDIO PAINTで行い、SVGデータをIllustratorに移して最終データをIllustrator形式で仕上げるというやり方もできるようになります。

 

また、制作データを共有することのできるソフトが増えれば各ソフトのいい所を利用しながら、もしくは各ソフトの苦手な部分を他のソフトで補いながら1つの作品を制作することができます。

 

CLIP STUDIO PAINT(クリスタ)でのSVGデータ取り扱いまとめ

2020年9月30日のアップデートにより、CLIP STUDIO PAINT特有のベクターレイヤーによるデータ情報がメジャーなIllustratorとの繋がりを持てるようになってさらにCLIP STUDIO PAINTの幅が広がりました。

 

また、各ソフト特有の情報は共有できないという弱点も、同時にアップデートによって追加された「ベクターから定規」機能によって補うこともできています。

 

これからペイントソフトを探す方、Illustratorをお持ちで補助ソフトが欲しい方はCLIP STUDIO PAINTをその候補に入れてみてはいかがでしょうか◎

 

それではここまで閲覧ありがとうございました!

お疲れ様でした!!

 

パルミー

 

ペイントツールのスタンダード【CLIP STUDIO PAINT PRO】

マンガ制作ソフトの最高峰【CLIP STUDIO PAINT EX】