Inkscapeのクリップグループの凄さに感動したのでご紹介

似たようなタイトルの記事が有ったような気もしますが（よく感動する奴だな・・・）気のせいでしょう。以前の記事の関連記事です。

wata-ire-hanten-17.hatenablog.com

シームレスパターンを作る際に「クリップグループ」を作るところが重要なポイントの一つだったですが、その「クリップグループ」でいろいろやってみた結果です。
なお細かいところを端折ってますので、分かりにくい部分などございましたら上の記事をご参照ください。
また後半ではクローンを使ってますので、こちらは前回の記事（Inkscapeで四つ葉のクローバー的な何かを描いてみる（その１） - お世話になっているオープンソースソフトウェアの備忘録的ブログ）をご参照ください。

1. サンプル画像を用意する

矩形、星形、丸、と、画像を用意しました。
なお画像は「Nikon A10」と言う高級コンデジ（当時のお値段なんと９，８００円！）で私が撮ったものです。ちなみに単３乾電池が使えるという、環境にもサイフにも優しいカメラです。まあ、乾電池と言うもののエネループばっか使ってます。最近のカメラは専用バッテリーパックのばかりで悲しい・・・本筋とは全く関係ない話ですみませんでした。

2. 丸を「クリップグループ」にし、画像をグループの直下に追加する

丸（path2）を選択し、右クリックから「クリップグループを作成」します。

画像（image1）をクリップグループに追加します。クリップした形（path2）で追加した画像が表示されました。ここまでは以前の記事とほぼ一緒です。違うのは「矩形じゃなくて丸でクリップした」のと「直下に置くオブジェクトに画像を使った」ところだけです。

3. 星形と矩形を「クリップグループ」の「Clip」フォルダの直下に移動する

星形を丸の下に移動し、「レイヤーとオブジェクト」で「Clip」フォルダの直下に移動すると・・・
なんと丸＋星形に切り取られました！ついでに矩形も移動してみると・・・

何か変ちくりんな形に切り取られました。つまり、「Clip」フォルダの直下に置いた形に切り取られるんですね。

ちなみに画像をクリップグループの外に移動すると、元の丸星形矩形に戻ります。ストロークは何もいじってないけど、「Clip」フォルダの一番下（画面では星形）はストロークが全部消えて、丸と矩形のストロークはクリップ内のものだけ残るみたいです。

蛇足ですが、画像をクリップグループの外に移動してしまうと、もう一度画像を動かすために選択しようとしてマウスでクリックしても選択できません。この場合は「レイヤーとオブジェクト」画面で画像（image1）を選択して上の座標の数字を直接打ち換えるか（上の四角で囲った部分）、一度「レイヤーとオブジェクト」画面で画像をクリップグループの外（layer1の直下とか）に移動させて表示状態にしてから選択するか、等する必要があります。

4. 「クリップグループ」を選択し、クローンを作成する

オマケです。
画像のクリップのクローンを作って、水平方向と垂直方向に反転させてみました。

これだけでは何ですので、「オブジェクトー変形」を選択して

「回転ー４５度」と「回転ーマイナス４５度」を行いました。 斜めになったところで、万華鏡みたいに並べてみました。 オリジナルの画像をドラックすると本当の万華鏡みたいに動いて楽しいです。

ところで「Clip」フォルダに入れたオブジェクトを不可視にすると（上の画像では「rect1」を不可視にしてます）、そのオブジェクトもクリップから外れます。画像のクリップから四角い部分が無くなっているのが分かると思います。もちろん不可視を外すと元に戻ります。ちょっと感動

5. クリップ無しで手軽に切り取る方法（エクスポートの場合限定）

エクスポートの場合限定になりますが、範囲を指定するだけで手軽に切り抜く方法も有ります。

一例で、丸を３つ重ねたものの中央部だけをpng画像にしたい場合です。
切り取る範囲に合わせ矩形を追加します。（「レイヤーとオブジェクト」画面のrect2）
今回は枠線を付けたくなかったので、フィル、ストロークとも「なし」にしておきます。
この矩形を選択した状態で、画面上の「エクスポートダイアログ」を開きます。

右側にプレビューが出ますので確認します。上の画面でサイズやDPIの変更もできます。
問題なかったら保存先のフォルダを選択、ファイル名を設定します。終わったら下にある「エクスポート」ボタンを押下します。特にメッセージ等は出ませんので、フォルダを開いて保存されていることを確認します。
ワンポイントの画像なんかを作るのに便利です。

以上です。

Inkscapeのカリグラフィツールで習字を描く

「習字」って描く？書く？する？よく分からないので、まあいいか。 と言いつつ、そんなに大した話では有りません・・・すみません。

1. カリグラフィツールを起動する

カリグラフィツールを起動します。上段にパラメータが有りますが、個人的にはデフォルトが一番使いやすいと思います。
ちなみに「筆圧を感知して云々」と言うパラメータも有りますが、私は生憎マウス一本で勝負しておりますので、どのような効果があるのかは不明です。・・・安いペンタブ買おうかな・・・

2. 選択ツールを使って部品の位置を修正する

これぞInkscapeの真骨頂ですね！
カリグラフィツールでは、書いた文字は部分ごとに別々のパスになりますので、「へん」や「つくり」、点の位置の修正などはお手の物です。

3. ノードツールを使って部品の形を修正する

これぞInkscapeの真骨頂ですね！二回目です。
先述したようにカリグラフィツールでは書いた文字は別々のパスになりますので、ノードツールを使えばノードの位置、ハンドルの調整、等々で修正し放題です。
経験的に、余計なノードを削除した方が見栄えが良くなるような気がします。削除しすぎたら「元に戻す」でOK。

4. 完成

今年もお付き合いのほど、よろしくお願いいたします。

Inkscapeで四つ葉のクローバー的な何かを描いてみる（その２）

前回の記事の関連記事です。

wata-ire-hanten-17.hatenablog.com

１～６までは前回と同じですので割愛させていただきます。これを世間では「最適化」と言います。（手抜きとも言います）

7. グループ化したクローンの状態で全部選択する

「レイヤーとオブジェクト」画面の「g2、g4、g6、g8」を全て選択します。g8の中を見ていただくとお分かりのように、中身はまだクローンです。

8. 全部選択したまま「シェイプビルダーツール」を起動、シェイプを選択する

シェイプビルダーツールを起動します。今回は部分的に選択してみます。

ハート形の部分はドラッグして一つのシェイプにしています。そのため中央の線が無くなっています。（上図参照）
重なった部分は別々に分けています。（単独でクリックすると別々になります）
この状態でg8の中を見ていただくとお分かりのように、中身はまだクローンです。

9. 「選択ツール」を押して確定する

「選択ツール」を押すと「シェイプビルダーツール」が終了し、シェイプが確定されてクローンがパスになります。前回は全部を一つのシェイプにしたのでpathは一つになりましたが、今回は別々にしたためpathが８つになっています。

この時点ではパスはピッチリ並んでいますが、実はバラバラになっています。試しにパスを２つだけ移動してみるとこんな感じです。

10. フィル、ストロークを調整する

パスのフィル、ストロークを調整します。今回は複数のpathを選択してフィルを設定していますが、もちろんpath毎に別々の色を設定することもできます。

こちらはpathを拡大後、回転させてみました。
ちなみにこの「シェイプビルダーツール」、開発がえらく難航したという話をどこかで読んだ記憶があります。皆様もぜひ、開発者の皆様に感謝しつつ有難く利用させて頂きましょう！

以上です。

Inkscapeで四つ葉のクローバー的な何かを描いてみる（その１）

前回の記事の関連記事です。

wata-ire-hanten-17.hatenablog.com

Inkscapeのクローン機能に感動していたところ、こちらのサイトを見つけました。「InkscapeでMirrorモディフィアーのようなこと – ホームページの作り方」
こちらを応用して何かできないかと思ってやってみたのが以下です。
一言で言うと「クローンは移動しても回転しても変形してもクローン」と言う事です。意味わからない？大丈夫です。今回の記事を読んでいただければわかると思います知らんけど。

なお、一部説明を端折っているところがございますので、分かりにくいところがありましたら前回の記事（Inkscape：シームレスパターンの作り方（我流）その１．縦横パターンの場合 - お世話になっているオープンソースソフトウェアの備忘録的ブログ）もお読みいただけると幸いです。
基本的なところは、こちらのサイトが非常に良くまとまってますので参照ください。「Inkscape入門(1.2 / 1.3版)」

1. 矩形を作り内部にパスを描く

パスを取り扱うのに使いやすいように矩形を準備し、その上にパスを描いていきます。縦位置を合わせる必要がありますので、グリッドのスナップを有効にしておくと楽です。
なお、パスを描くときはペンツール（下の四角）を使うと思いますが、個人的には細かい調整はノードツール（上の四角）を使った方が楽ですので、最初はこんな適当な感じです。

2. 中心線を連結し、閉じたパスにする

ノードツールで端点を二つとも選択し（ドラッグするか、シフトを押したままクリックして選択）上の四角の「端点ノード同士を新しいセグメントで連結」を実行します。これで閉じたパスにすることができました。

縦の線が引かれたのを確認したら矩形とグループ化しておきます。（「レイヤーとオブジェクト」画面でg1と言うやつ）矩形と一緒にしておかないと選択が大変です。

3. グループ化したもののクローンを作成、複製する

前回はタイルクローンで作ったのでらくちんでしたが、今回はクローンをコピーして移動したりするので、一つずつ作っていきます。
画面上の四角の「クローンを作成」を押下します。

出来たクローン（「レイヤーとオブジェクト」画面でuse1というやつ）をオリジナルから離れたところに移動して、複製を作成します。

4. クローンの複製を水平方向に反転し、元のクローンとグループ化する

クローンuse1の複製use2を選択し（「レイヤーとオブジェクト」画面で選ぶと簡単）、「水平方向に反転のオブジェクト」を実行します。（画面上の四角）

水平方向に反転しました。

反転したものを横に移動し、元のクローンとピッタリ合うように移動します。移動後、扱いやすいようにグループ化しておきます。（「レイヤーとオブジェクト」画面のg2）

5. グループ化したクローンを複製し、９０度回転する

上でグループ化したg2を複製し（「レイヤーとオブジェクト」画面のg4）、画面上の「90度反時計回り回転のオブジェクト」を実行します。 複製したg4を、g2の中心と重なるように移動します。スナップを有効にしておけば比較的簡単です。

これを繰り返して、クローンのグループを４つ作ります。（「レイヤーとオブジェクト」画面のg2、g4、g6、g8）

6. オリジナルのパスを調整し形を決める

「レイヤーとオブジェクト」画面で、オリジナルのグループ（g1）から矩形（rect1）を外します。やり直す時以外は使いませんので、レイヤの外にでも置いておきます。

オリジナルのパスのハンドルを操作してシェイプを決めます。オリジナルを操作すると万華鏡みたいに変わっていくので、ちょっと感動

もちろんノードを追加してもOK。こんな感じ。

7. クローンをパスにする

これ以降の作業でundoが上手く出来なかった事があります（経験者談）。ので、ここで一度保存しておく事を強くお勧めいたします。
クローンのグループ（「レイヤーとオブジェクト」画面のg2、g4、g6、g8）を全て選択し、「グループ解除」を押下します。

グループを解除すると「レイヤーとオブジェクト」の直下にクローンが並びますので、改めてクローンを８つ全部選択し、「クローンのリンク解除」を押下します。

これでクローンがグループになります（例：「クローンuse1」が「グループuse1」）。
新しくできたグループを全部選択し、再度「グループ解除」します。

8. 「シェイプビルダーツール」でパスを一体化する

「レイヤーとオブジェクト」の直下にパスが並んでいますので（path8からpath15まで）、全て選択します。
パスを選択した状態で「シェイプビルダーツール」（画面の左端の四角）を押下するとパスが灰色になりますので、灰色の部分をドラッグします。ドラッグした部分が青色になります。

青色部分に白い線が残っていると、その部分は別の部分（セグメント）になってしまいますので、残らないようにドラッグします。
なお、よくある操作方法で複数選択するためにシフトを押したくなりますが（自分だけ？）、シフトを押すと部分が消えてしまいますのでご注意。その場合は「元に戻す」で元に戻します。

全部青くなったら画面左端の「選択ツール」を押せば確定されます。
画面ではpath8からpath15までが消えてpath16になっています。（ちなみにこの画面は確定した後で「シェイプビルダーツール」を押してます。本当は「選択ツール」を押して確定した時点で「シェイプビルダーツール」は終了します。単にスクショ撮り忘れですはい）
今回は複製、回転のみでしたが、変形（拡大縮小）しても同様の手順で操作できます。

9. パスのフィル、ストロークを調整する

後は通常のパスと同じです。適当にフィル、ストロークを調整します。
今回は美的センスのイマイチな人が作ったのでパッとしませんが、美的センスの優れた人が作れば凄いものができるのではないかと思われます。
なお、実はクローンの状態からいきなり「シェイプビルダーツール」で仕上げる方法も有りますので、次の記事にでも・・・

以上です。

Inkscape：シームレスパターンの作り方（我流）その３．斜めパターンの場合（簡易版）

前回の続きです。

wata-ire-hanten-17.hatenablog.com

簡易的に簡単に斜め線パターンを作る方法です。考え方は単純で、横線と文字のパターンを別々に作り、横線のパターンだけ回転させる。と言う事です。

1. パターンを二つ作る

パターンの元となるオブジェクトを作ります。なお、どちらにも背景色を付けていますが、このままだと色が濃くなってしまいますので、後にどちらかを「塗りなし」にします。

2. パターンを適用するオブジェクトを準備し、コピーして二つ重ねる

パターンを適用するオブジェクトとして、今回は簡単に矩形（rect7）をコピーして作りました（rect7-0）。
「同じ場所に張り付け」を使うと簡単です。

3. 各々のオブジェクトにパターンを張り付ける

rect7に文字のパターンを、rect7-0に横線のパターンを張り付け、同時に横線のパターンに方向（斜め角度）を設定します。今回は２０度で設定しました。
これで完成です。

4. 注意事項

今回ご紹介した方法は、ご覧になってお分かりのように、あくまでも別々のパターンを重ねているだけです。そのため、パターンを作るたびに毎回バランスを見て倍率やら角度やらを調整するか、パラメータをスクショ撮るか何かして控えておく必要があります。また以前の独自パターンを保存する方法（Inkscape：独自パターンを保存する方法（超簡単） - お世話になっているオープンソースソフトウェアの備忘録的ブログ）は使えません。文字と線が別々に保存されますので、それぞれを使いまわす事はできますが。

まあ、毎回バランスを変更できる。と考えると、それはそれで利点かもしれません。（はい。単なる言い訳ですね！）

以上です。

Inkscape：シームレスパターンの作り方（我流）その２．斜めパターンの場合（通常版）

前の記事の続きです。今回は斜めのパターンを作ります。 なお、前の記事と同じ部分は省略しています。

wata-ire-hanten-17.hatenablog.com

クローンの作り方などは、詳しくは前回の記事を参照ください。

1. ベースのグループを作成しクローンを作る

ベースとなる正方形rect1を作成し、それをグループg1にしました。
g1のクローンを作成し、大まかな位置に配置しました。
縦横の場合は十文字に並べるだけでしたが、今回は斜め方向も考慮する必要があるため、とりあえず３行３列で作っています。

2. パターンの元となるオブジェクトを準備する

今回は横方向の文字と斜めになる横棒を用意しました。

3. オブジェクトをベースのグループ内に入れる

横方向の文字と斜めになる横棒をグループg1の下に入れました。併せて最終的にクリップグループとするrect10を作成し、中央に配置しました。
・・・が、パターンの中心となる矩形（rect10）を見てみると、左上と右下の線が不足しているようです。

4. 斜め線の不足が無いようにクローンを移動する

一番右下と真上のクローンは使われていないようなので、斜め線の不足を補うように右上に移動しました。
よく見ると斜め線が短いために不連続になっていますが、今回はこれで行きます。
斜め線を長くすれば連続になる・・・と言うのは嘘です。詳しくは後ほど。

5. クリップグループを作成しパターンを作る

先ほど作成したrect10をクリップグループにして、それをパターンにした結果です。
拡大すると２点問題が見つかりました。なお、これはあくまでも説明のために「故意に」間違えたものだと思います。たぶん。

１．斜め線の色が不連続（上の四角）
斜め線（と言うか、矩形を斜めにしたもの）を作る際、不透明度（アルファ値）を30%くらいにしてありました。そのため、つなぎ目で色が濃くなってしまっています。
色の濃淡のためにアルファをいじるのは止め、彩度で調整しましょう。

２．斜め線が不連続
斜め線を長くすれば連続になる・・・そう思っていた時代が私にもありました。
画像を見ていただくと分かりますが、長くしても段差ができるだけです。
おそらく斜め線の角度と、繰り返しになるベースの横幅が合っていないんだろうな・・・とは思いますが、具体的にどうやったら良いのか分かりません。三角関数に詳しい方、教えてくださいplz！

6. 斜め線を調整し仕上げる

「調整」と言うと聞こえが良いですが、要は「現物合わせ」「XMLエディタで適当にいじって合わせましょう」と言う事です。
まずベースとなるグループg1の中の斜線rect9を選択し、XMLエディタで開きます。
長さが足りなかったので、長さ（矩形なのでwidth）を大きくし、十分に長くします。

続いて、右下のパターンを張り付けた矩形を確認しながら、transformのmatrixの数値を少しずつ変えていきます。（数値の具体的な内容はよく理解していませんすみません）
今回は一番最初のパラメータを少しいじったら、ほぼ直線になりましたので、これで良しとします。

何とも締まらない終わり方ですが、以上です。
なお、簡単に斜め線を引くこともできます。方法については、その３で・・・

Inkscape：シームレスパターンの作り方（我流）その１．縦横パターンの場合

以前の記事の続き的な話です。
wata-ire-hanten-17.hatenablog.com
上の記事を書く前にパターンについて調べていたところ、「ファイルーテンプレートから作成」の「その他」の中に「シームレスパターン」と言うものを発見しました。
ただ使い方が（私のアタマでは）イマイチ分からなかったので、いろいろ試してみた結果です。
なお、斜め線などの斜めパターンがある場合は難易度が爆上がりしますので、まずは無い場合です。

1. 下準備でグリッドの設定を変更する

パターンにした場合、オブジェクトの微妙な位置ずれで不連続になってしまいますので、XMLエディタで直接数値を入力する機会があります。
XMLエディタで開いたところ、Inkscapeは内部ではミリメートルで処理しているようなので、分かりやすいように予めグリッドをミリメートルで設定しておきます。 具体的には、用紙の上で右クリック、ドキュメントのプロパティを開き、グリッドの単位をmm、間隔を適当な数値にします。ついでに右上の「スナップ」（磁石のアイコンみたいなやつ）を有効にしておきます。

2. パターンの元となるオブジェクトのベースを作成する

まず、ベースとなる矩形を矩形ツールを使って作ります。今回は正方形で行きます。もちろん長方形でもOK。
右上の「スナップ」を有効にしてあるので大体はドラッグするだけでOKですが、XMLエディタで開くと微妙にズレているのがわかります。
修正は、エディタで直接打ち込んでも良いし、上の座標やらサイズやらをクリックして直しても良いです。座標の＋とーを一回ずつクリックすると楽に修正できます。

終わったら「レイヤーとオブジェクト」画面でオブジェクトを選択し、右クリックから「グループ化」をしておきます。

3. 文字を追加する

今回は簡単に水平方向のみのパターンで作りました。テキストに矩形を組み合わせてグループ化（g2という名前のやつ）し、それをコピーしてずらして張り付けてあります。当然ですが、これらのオブジェクトは高さ幅ともベースより小さくないと、パターンが重なって訳分からないことになります。小さければ位置はベースよりはみ出しても問題ありません。
今回は、コピーした分は半分ベースからはみ出し、互い違いになるように配置します。

4. 貫通する横線を追加する

横線が斜めになっているとパターンのつなぎ目でガタガタになるので、もしエディタに「transform rotate」と言う項目があった場合はゴミ箱を押して削除して、水平に戻しておきます。 またアルファ値が１より小さい場合（透過設定をしている場合）は横幅もベースに合わせておきます。ベースより長いと、重なった部分の色が濃くなってしまいます。それはそれで面白い効果かもしれませんが。

5. 縦方向のオブジェクトを追加する

縦方向のオブジェクトとして多角形ツールで三角形を作成し、二つ追加しました。 縦方向へ貫通する線を引く場合は、上の横線と同じ要領です。

6. ベースのクローンを作る

今回のキモですので、ここで一度セーブ推奨です。（セーブしてなくて何度泣いたことか・・・）
以降は「レイヤーとオブジェクト」画面から操作します。

まず、先ほど作ったオブジェクトのベースをグループ化したもの（「レイヤーとオブジェクト」画面では「g1」と言う名前）を選択し、「編集ークローンータイルクローンを作成」をクリックします。

行、列を３×２で設定し、作成を押します。

こんな感じでクローンが６個作られました。 「レイヤーとオブジェクト」画面では「use1」から「use6」と名前が付いています。

7. クローンを十字型に並べる

６つのうち５つのクローンを使って、オリジナルから離れたところに十字型に並べます。クローンの一つはオリジナルと重なっているので注意。
十字の中心のクローンが最終的にパターンになります。今回は「レイヤーとオブジェクト」画面で一番下のクローンを中心に置いてしまいましたが、重ね塗りを考えると一番上のクローンを使った方が良かった・・・。
１つ余りますが、これはオリジナルから離れたところに適当に置いておきます。
クローンを選択しXMLエディタで開き、項目「transform」を確認します。これはオリジナルからの距離を表しますので、ズレていたら修正します。
なお移動中に変形させたり回転させてしてしまうと、項目「transform」内に距離以外の項目が入りますので、その場合は一度「transform」をゴミ箱送りにします。するとクローンが元に戻りオリジナルと重なるので、再度移動します。

8. ベースのグループにオブジェクトを入れ、パターンを確認する

作った文字やら横棒やらのオブジェクトをすべて選択し（Shiftキーを押しながら最初と最後をクリックするか、Ctrlキーを押しながら1つずつクリックすると選択できます）、ベースのグループ下にドラッグします。
パターンの元ができましたので確認します。左下の三角が文字と干渉しているようなので、ちょっと修正したいと思います。

修正はベースのグループ（「レイヤーとオブジェクト」のg1）に対して行います。マウスで操作しても良いのですが、上の座標で操作した方が微妙な修正が楽です。

9. クリップグループを作成する

最初にベースと同じサイズの矩形を作成します。これを十文字に置いたクローンの中心のものと同じ位置に移動します。（予めクローンの中心のものは非表示にします）
移動後、XMLエディタで位置とサイズの確認をお忘れなく。大切なので二回確認を！

確認出来たら、右クリックから「クリップグループを作成」を実行します。作成後、フィル、ストロークとも「塗りなし」にしておきます。

10. クリップグループに追加する

先ほど作成したクリップグループ（画面のg4と言うハサミの付いたフォルダ）の直下に全てのクローンを移動します。

これでパターンにするオブジェクトの元ができました。

11. パターンを作成する

作成したクリップグループ（画面のg4と言うハサミの付いたフォルダ）を選択し、「オブジェクトーパターンーオブジェクトをパターンに」でパターンにします。パターンが登録されたらオブジェクトに戻しておいた方がよろしいかと思います。

パターンの作り方の詳細は「Inkscape：独自パターンでのパターンフィルが簡単すぎて感動したのでご紹介 - お世話になっているオープンソースソフトウェアの備忘録的ブログ」をご覧ください。

以上です。