ホームページ制作 名古屋

問い合わせ先


インクスケープ(Inkscape)でパスを重ねて切り取る

 

パス同士を重ねて図形をカットする

インクスケープを使ってワンランク上のデザインをするならば、ぜひ使いこなしたいのが今回の技です。
パス図形どうしを重ねて、色々なパターンで図形を切り取ることができます。

インクスケープ(Inkscape)でパスを重ねて切り取る01

サンプル図形として本コラムでは上の2枚を用意しました。

 

インクスケープ(Inkscape)でパスを重ねて切り取る02

画像のように2枚の図形を重ねた状態で、順番に見ていきます。

 

インクスケープ(Inkscape)でパスを重ねて切り取る03

インクスケープ(Inkscape)の重ねる系の加工には全部で8種類が用意されています。
統合~分解までを目次にしましたのでご活用ください。

統合

インクスケープ(Inkscape)でパスを重ねて切り取る04

「統合」すると、2つの図形は完全に一体化します。色などのスタイルは下にあった図形のものを引き継ぎます。
統合した図形はグループ解除をしてもバラバラにはなりません。

目次にもどる

差分

インクスケープ(Inkscape)でパスを重ねて切り取る05

「差分」を行うと、上に重なっていた図形の形で下の図形を型抜きします。
一見バラバラになっているように見えますが、これもグループ化で解除はできず、1つの図形となります。

目次にもどる

交差

インクスケープ(Inkscape)でパスを重ねて切り取る06

「交差」をすると、2つの図形の重なっていた部分だけが残り、それ以外の部分かカットされます。
クッキーの型抜きのような感じですね。

目次にもどる

排他

インクスケープ(Inkscape)でパスを重ねて切り取る07

「排他」は言葉で説明しにくいですね。
手の先と足の先が下の図形の色になっています。“2枚が重なっているところ”と“重なっていないところ”という2つに分けている感じでしょうか。
こちらもグループ解除をしても分解はできません。

目次にもどる

分割

インクスケープ(Inkscape)でパスを重ねて切り取る08

「分割」は差分とちょっと似ていますが、加工後の選択部分を見ると違いが明らかです。

 

インクスケープ(Inkscape)でパスを重ねて切り取る09

上に重ねていた図形のパスに沿って型抜きされ、それぞれがバラバラの図形に分解できます。

目次にもどる

パスをカット

インクスケープ(Inkscape)でパスを重ねて切り取る10

「パスをカット」は一見わかりにくいでしょうか。上の図形が消えて下の☆のパスだけが残り、ところどころちぎれたようになっています。

 

インクスケープ(Inkscape)でパスを重ねて切り取る11

上に重なっていた図形を戻すとよくわかります。
2つの図形の“パスの交点”の部分で切り離されたというわけですね。

目次にもどる

結合(連結)と分解

インクスケープ(Inkscape)でパスを重ねて切り取る12

「結合(連結)」は2つのパスが合体して1つになります。

 

インクスケープ(Inkscape)でパスを重ねて切り取る13

結合(連結)した図形を選択し、「分解」するともとの2つの図形に戻ります。

 

インクスケープ(Inkscape)でパスを重ねて切り取る14

もとに戻すとなぜか重なりが逆になりましたが、移動してみるともとの2つの図形に戻ったことがわかります。

目次にもどる

作成者:J-ACT Co.,Ltd.
http://j-act.jp/
Copyright(C) 2015
名古屋のホームページ制作・システム・デザイン会社J-ACT-ジェイアクト
All Rights Reserved.