素材

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

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

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

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

パターンとは

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

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

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

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

パターンの概念

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

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

パターン素材_ユニット

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

パターンのいろいろ

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

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

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

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

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

 

inkscapeでパターンを作る方法

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

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

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

 

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

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

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

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

 

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

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

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

inkscape_スナップ設定

 

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

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

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

 

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

パターン作成_04

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

 

切り取ったエリアをパターンとして登録します。

パターン作成_05

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

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

 

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

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

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

 

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

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

tipLog

WordPressテーマ

WordPressテーマ「MAG(TCD036)」

スポンサードリンク

関連記事

  1. 素材

    inkscapeで「次へ」「前へ」「トップへ」のアイコン画像の作成をしてみた

    今まで「ページトップへ」のようなテキストリンクでページ内リンクを作成し…

  2. 設定

    inkscapeにフォント専用フォルダを追加する方法

    inkscapeにはフォント用のフォルダを登録する機能がありませんが、…

  3. レイアウト

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

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

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

    GIMPでトリミング画像に影をつけてサクッと立体感を生み出すチュートリアル

    写真から切抜きした画像単体では、立体感がなく物足りないような印象を受け…

  5. ウェブコーディング

    WordPressの記事内でPHPを実行した結果を表示する方法

    WordPressの記事内でPHPを実行できると、記事に表示できるコン…

  6. 素材

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

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

コメント

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

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

CAPTCHA


スポンサードリンク

ピックアップ記事

おすすめの本

使用している素材

カテゴリー

 
  1. ブログ収益化

    月額100円から使える「ロリポップレンタルサーバー」
  2. グラフィックデザイン

    自作?外注?その前にコレ!ブログのロゴデザインをするなら「Logaster」を使…
  3. ブログ収益化

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

    レイアウトデザインに最適な無料ソフト「inkscape」(≒Illustrato…
  5. グラフィックデザイン

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