素材

inkscapeでパターン素材を作るチュートリアル

inkscapeを使うと簡単にパターン素材を作ることができます。

いわゆるシームレス(継ぎ目のない)パターンを作る方法のチュートリアルです。

ドットパターン・ストライプ・チェック柄など、好きなモノを作って下さい。

パターンとは

唐草模様やストライプなどの絵柄は、1つの絵柄を繰り返し使うことで表現されています。

このときの元となる1つの絵柄をパターンといいます。

アパレルデザイン関連の書籍や記事ではパターンを原型などと呼ぶこともあります。

グラフィック系のパターンの利用はウェブサイトの背景画像や商品のパッケージ、飾りテープなどの装飾用の小物によく使われています。

パターンの概念

パターン素材_ユニットを使った例

この縦のストライプは1つのパターンを繰り返し並べたものです。

パターン素材_ユニット

パターン素材_ユニットを使った例_ユニット表示

パターンのいろいろ

ストライプはパターンを変えるだけで色々なものが作れます。

パターン素材_ユニットを使った例_ストライプ2 パターン素材_ユニットを使った例_ストライプ3

波線やドットでパターンを作ることもできます。

パターン素材_ユニットを使った例_波線 パターン素材_ユニットを使った例_ドット3 パターン素材_ユニットを使った例_ドット2

繰り返しされても継ぎ目が見えないようなパターンを作成することがポイントです。

inkscapeでパターンを作る方法

inkscapeではパターンを作成してオブジェクトのフィルとして設定する方法があります。

これを使えば作成したパターンをどんな形のオブジェクトにも適応することができます。

では、作り方の解説をしていきます。

パターンのエリアを設定する

パターンにするエリアを矩形(長方形)ツールで作成します。

パターン作成_レイアウト01

サイズ:100px × 100px
フィル:グレー30%
不透明度:50%

で作成すると以下の作業がやりやすいと思います。

オブジェクトを配置する

パターンのエリアにオブジェクトを配置し、パターンに変換したいオブジェクトを全てグループ化します。

パターン作成_レイアウト03

オブジェクトを配置するときは、スナップ機能を有効にして、パターンのエリアの中心やエッジ(角)にスナップさせると簡単に配置できます。

inkscape_スナップ設定

オブジェクトをクリップして切り抜く

パターンのエリアとして配置している長方形オブジェクトを最前面へ移動します。

パターン作成_レイアウト02

移動するときは選択ツールでオブジェクトを選択して、[オブジェクト]→[最前面へ]で移動できます。

パターンのエリアを使って、下側にあるパターンを構成しているオブジェクトグループを、クリップ機能で切り抜きます。

パターン作成_04

パターンを構成しているオブジェクトグループと、パターンのエリアとして配置している長方形オブジェクトを複数選択して、[オブジェクト]→[クリップ]→[設定]をすると切り抜きができます。

パターンに登録する

切り取られたオブジェクトを選択した状態で、[オブジェクト]→[パターン]→[オブジェクトをパターンに]をすると、パターンとして登録されます。

長方形を新たに作成して、フィルをパターンに変更し、「pattern****」を選択すると、パターンを利用することができます。

パターン作成_05

ストライプを作るときはドットの代わりに、長方形ツールで細長い長方形をいくつか組み合わせることでできます。

波線の場合はペンツール(ベジェ曲線ツール)で波線をつくり、クリップ機能で切り取れば同じように作ることができます。

色々なパターンを作成してみてください。

感想や質問などのコメントをお待ちしております。

その他のチュートリアル

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

tipLog

WordPressテーマ

WordPressテーマ「MAG(TCD036)」

スポンサードリンク

関連記事

  1. チュートリアル

    超簡単!inkscapeで直角三角形を作る方法

    inkscapeには正三角形を作る機能(多角形・星形ツール)はあるので…

  2. レイアウト

    inkscapeの「整列と配置」でオブジェクトを綺麗に並べて表を作る方法

    inkscapeには整列と配置を調整するための機能があります。この…

  3. グラフィックデザイン

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

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

  4. 素材

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選

    デザイナーやクリエイターでなくても、クオリティの高い写真やイラストを使…

  5. グラフィックデザイン

    inkscapeで立体的な文字の作り方(テキストと押し出しの組み合わせ技)

    飛び出てくるようなテキストのロゴを作る方法をまとめてみました。今回…

  6. チュートリアル

    無料のURL短縮ツール「ClickScope」をサーバーに設置する方法

    コスト削減も兼ねて、無料のURL短縮ツール「ClickScope」をサ…

コメント

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

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

CAPTCHA


スポンサードリンク

ピックアップ記事

スポンサードリンク

カテゴリー

  ロゴマルシェ - LogoMarche   ボタンマルシェ - ButtonMarche
WordPressテーマ「OOPS!(TCD048)」
  1. ブログ収益化

    無料レポートスタンドの「メルぞう・Xam」を120%使い倒す方法
  2. グラフィックデザイン

    レイアウトデザインに最適な無料ソフト「inkscape」(≒Illustrato…
  3. ブログ収益化

    脱初心者しませんか?Amazon・楽天のアフィリエイトを上手に活用するための予備…
  4. グラフィックデザイン

    フォトレタッチ・グラフィックデザインの無料ソフト「GIMP」(≒Photosho…
  5. 素材

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
PAGE TOP