素材

inkscapeのタイルクローンでマスキングテープを張り合わせたパターンを作るチュートリアル

パステルカラーのマスキングテープを張り合わせたようなパターンを作成したときの方法を紹介します。

 

  • ノードをギザギザにする
  • ランダムに色を変える
  • 大量に複製する

このあたりの方法を上手に使うと、あっという間にマスキングテープのパターンを作ることができます。

では順番にどうぞ。

この記事は2015年8月9日に執筆したものを、2016年10月15日に修正・加筆したものです。

テープのベースとなるパスを作る

はじめにテープの元となるオブジェクトをペンツールとノードツールを使って作っていきます。

まずは、テープを切った部分のギザギザから作っていきます。

ペンツールで1本線を引きます。

2016-10-11_09h25_28_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

 

この線をノードツールで選択して、ノードを挿入していきます。

2016-10-11_09h28_57_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

直線の両端のノードを選択して、ツールコントロールバーの「ノードの挿入」をクリックするとノードが挿入されていきます。

ノードの数を30個位になるまで追加を繰り返します。(大体5回くらい挿入を繰り返す)

ギザギザはノードを揺らすエクステンションで

これをギザギザにしていくには、エクステンションを利用します。

エクステンションから[ノードの変形]→[ノードを揺らす]を選択します。

2016-10-11_09h36_43_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

 

ノードを揺らすときの設定をします。

2016-10-11_09h40_56_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

横方向にノードが動けばぎざぎざになるので、X軸の変化量だけを設定します。

Y軸はゼロにすればOKです。

ライブプレビューがあるので、出来上がりを確認しながら最後に「適応」をクリックします。

ギザギザをつないでテープの形にする

ギザギザを複製して、テープの両端として利用します。

まずは複製・・・

2016-10-11_10h16_25_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

 

複製とオリジナルは重なっているので、移動します。

2016-10-11_10h17_42_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

 

複製を上下左右反転させておきます。

2016-10-11_10h21_53_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

 

テープの端を平行に並べるために、「整列と配置」で位置を合わせます。

2016-10-11_10h25_00_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

Shiftキーを押しながら選択ツールで2つの線を選択。

[Shift+Ctrl+A]で「整列と配置」を開くことができるので、位置合わせをします。

 

ノードツールに切り替えて、2つのギザギザをつなぎます。

2016-10-15_13h49_53_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

ノードツールでShiftキーを押しながら2つを選択して、ノードを新たなセグメントでつなぎます。

 

下側の2点も同じようにつなぎます。

2016-10-15_13h52_58_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

 

最後にギザギザを平行に離していくと、テープのような形状になります。

2016-10-15_14h04_33_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

片側のギザギザをドラッグして選択して、キーボードの矢印キーで動かすと、平行に移動できます。

 

ちょっと脱線:試しに色を付けてみる

形はマスキングテープになってきましたが、色を付けるとさらに雰囲気がでます。

テープを選択して「フィル/ストローク」から色を設定します。

2016-10-15_14h19_01_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

ストロークを消して、パステルカラーにすると、それっぽくなります。

パステルカラーは主に白色が混ざったような淡い色のことを言います。

HSLなら、ライトネス(L)を50%(128)より大きくします。

1つずつテープを作る場合はここまでで完成になります。

テープを大量に複製してあり合わせた状態にする

タイルクローンを使うと、

  • ランダム化した配色
  • 傾きをランダムで設定

の2つが同時できます。

今回のように同じオブジェクトを大量に並べるときにすごく役に立ちます。

元オブジェクトの設定

テープの塗りをタイルクローンで自動的に割り当てるために、フィルストロークから「アンセット」にしておきます。

2016-10-15_16h11_25_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

これをしておかないと、同じ色で何個も複製されるだけになってしまいます。

真っ黒になりますが、黒くなったのではなく、「未定義」の状態なっただけで、塗りが設定されていないことを表しています。

あと結構重要なのが、不透明度です。

マスキングテープってなんとなくスケ感があるので、そのあたりも最初に設定しておきます。

タイルクローンの設定

今回の目標は、「方向を変えながら1箇所にテープをたくさん貼る」ことなので、タイルクローンの設定を上手に使って再現してきます。

まずはタイルクローンを開きましょう。

2016-10-15_14h53_05_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

タイルクローンを開くには、[編集]→[クローン]→[タイルクローン]を選択します。

右側にタイルクローンの設定画面が表示されるので、それぞれ設定しいきます。

対称化 P1:シンプル移動

2016-10-15_15h48_28_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

対称化とはタイルをどうやって並べていきますか?ということ。

今回は一番よく使うタイプの「P1:シンプル移動」を選択します。

 

シフト タイルを考慮しない+ランダム化

2016-10-15_16h32_50_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

シフトはタイルを行ごと、列ごとにどのくらい移動させるか?ということ。

ペタペタ貼ったような雰囲気にしたいので、「タイルを考慮しない」のところに2つチェックを入れ、「ランダム化」のところを「100%」に設定します。

 

行ごと、列ごとの移動はランダムにして、元のオブジェクトの初期位置からバラバラに並べることができます。

回転 ランダム化

2016-10-15_15h51_23_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

回転は行ごと列ごとに何度ずつ回転させるか?ということ。

今回はランダムにシフトさせた位置でランダムに回転させたいので、「ランダム化」を「100%」にするだけでOKです。

 

色 初期色の設定+色相のランダム化

2016-10-15_15h57_37_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

色は、行ごと列ごとにどのくらい色を変えるか?ということ。

最初の色を設定して、そこからどうやって変化させるかを決めることができます。

すべて0%なら色は変わりません。

今回はパステルカラーを設定したいので、「初期の色」をパステルカラーになるように設定します。

HSLで「S:255 L:190」とすると、パステルカラーになります。

 

タイルクローンの設定に戻って、色相のみ「ランダム化」を「100%」にします。

こうすることで、ランダムな色相でパステルカラーをたくさん作ることができます。

タイルの数 行のみ200+作成

2016-10-15_16h43_32_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

最後にクローンをいくつ作るのかを決めて実行します。

行のみにしてあるのは、数を調整しやすいからです。

とりあえず200個ほどあればそれなりのものができるので、200にしました。

2016-10-15_16h46_10_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

 

最後に[作成]をクリックすると自動的にテープを張ってくれます。

だいぶ重なっているので、ちょっと散らしておきます。

2016-10-15_16h49_19_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

オリジナルのテープを削除

ある程度散らしたら、オリジナルのテープは削除しておきましょう。

タイルクローンを作成した後だと、オリジナルが選択されているので、Deleteキーを押すだけで削除できます。

どこか別のところをクリックしたりすると、選択が解除されているのでクローンからオリジナルを探します。

2016-10-15_16h59_13_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

オリジナルが選択されるので、Deleteキーで削除します。

 

再スタックでちょっと手直し

このままでもいのですが、下側のテープと上側のテープをちょっと入れ替えてみます。

入れ替えるにはクローンで作成したテープを全部選んで、再スタックという機能を使います。

2016-10-15_17h04_59_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

重ね順を変えるときはプレビューで確認しながら、最後に適用して確定する。

2016-10-15_17h21_20_inkscape%e3%83%9e%e3%82%b9%e3%82%ad%e3%83%b3%e3%83%86%e3%83%bc%e3%83%97%e3%82%92%e5%bc%b5%e3%82%8a%e5%90%88%e3%82%8f%e3%81%9b%e3%81%9f%e3%83%91%e3%82%bf%e3%83%bc%e3%83%b3%e3%82%92

ここまでで完成となります。

お疲れ様でした。

  • ちょっと散らし方が足りない
  • 重ね順の変更はしなくてもいい

とか自分の感性で作ってみてもいいと思います。

あとはページ設定などをして、画像として出力すれば、冒頭のような画像になります。

あとがき

今回のように同じものを複製して、一つのグラフィックとして出力するときは

  • 素材の作り方
  • 複製の方法

の2つを覚えておけばいくらでも応用が効きます。

ちなみに、元ネタはこの書籍の48ページ「016 マスキングテープのパターン」から持ってきました。

素材作成スキルとアイディアが身につくのですごくおすすめです。

では今回はこのへんで。

記事が気に入ったら
tipLog を "いいね!"
Facebookで更新情報をお届け。

tipLog

WordPressテーマ

WordPressテーマ「MAG(TCD036)」

スポンサードリンク

関連記事

  1. リファレンス

    inkscape 円形ツールの基本操作をマスターしよう【映像あり】

    初めてinkscapeを使う方向けの、円形ツールを使ったシェイプの作り…

  2. 素材

    アイコンの基本は抽象化!特徴を見つけて基本図形に落としこむ方法

    作りたいアイコンやロゴがあるときに、なかなかアイデアが浮かばないという…

  3. チュートリアル

    無料素材を集めてコラージュを作るチュートリアル

    デザインを独学で学ぶとき、何をすればいいかわからないということも多ので…

  4. 素材

    手作業は最小限で!inkscapeで「カラフルなドットパターン」の作り方【SVG/PNGサンプルあり…

    「ドットパターンを作る」って聞いて、難しく感じる人が多いような気がする…

  5. チュートリアル

    PHPで配列と文字列の変換をデータベースに応用する方法

    データベース検索などを利用するときに、$_POSTや$_GETで受け取…

  6. チュートリアル

    簡単にテキストレイアウトができるinkscapeの「テキストの流し込み」機能の使い方

    写真付きのパンフレットでよくあるテキストレイアウトには被写体を邪魔しな…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


スポンサードリンク

ピックアップ記事

おすすめの本

使用している素材

カテゴリー

 
PAGE TOP