creatersnest2

【Illustrator】シンプルで継ぎ目のないパターン素材を作成するチュートリアルまとめ


Illustratorでのデザイン制作において、様々な場面に大活躍するパターン。
シンプルで継ぎ目のないデザインは汎用性が高く、用意しておけば多様に活用できます。
定番のドットやストライプ、幾何学模様、和柄、イラストなどのチュートリアル30点をまとめてみました。
ご覧ください。

 

パターン機能の解説や活用法(envatotuts+)

パターンの機能と活用法

http://design.tutsplus.com/tutorials/everything-you-ever-want-to-know-about-creating-seamless-patterns-in-illustrator–vector-3286

パターン作成に慣れていない方におすすめのページです。
完成したデザインと使用したパターンの例などが参考になります。
簡単なデザインのパターンは、画像を見ながら真似てみると理解が深まるでしょう。

 

ドット(CO-JIN)

ドット1

http://co-jin.net/design/post-1063

基本デザインから応用編まで、3つのパターン作成を紹介されています。
シンプルなドットのパターン作成から、ドットの間に星を混ぜたり装飾的なモノグラムも作成できます。
初めてパターンを作成する方にも分かりやすく、参考になります。

 

ドット(FACTORY70BLOG)

ドット2

http://blog.factory70.com/tips-of-design-and-illustration/easy-dotpattern_1

こちらもドットパターンを紹介された記事です。
基本となるドットデザインから、自分好みのデザインに調整する方法や色変更の方法も紹介されています。
分かりやすく解説されていて初心者の方におすすめです。

 

波打ったドット(Vector boom)

波打つドット

http://vectorboom.com/load/tips/techniques/create_wavy_dotted_seamless_pattern/16-1-0-443

波打ったようなドットの表情が面白いパターンです。
英語表記ですが、各手順にキャプチャー画像がついていますので操作方法を理解できます。
少し工程が多いので、Illustratorに慣れている方におすすめします。

 

ストライプ(FACTORY70BLOG)

ストライプ

http://blog.factory70.com/tips-of-design-and-illustration/easy-stripepattern_1

1分以内に作成できるストライプ柄のパターン作成方法が紹介されています。
斜め、ピンストライプ、ランダムなストライプなど応用例も分かりやすいです。
パターンを活用したイラスト作例も参考になります。

 

ストライプ(7日間イラストレーター超速マスター)

斜めストライプ

http://scaleslaw.com/illustrator-qa/vius

斜めストライプパターンの作成方法です。
手順のポイントアドバイスもあり、分かりやすく紹介されています。
シンプルで様々な場面に活躍しそうなパターンです。

 

ストライプ(WEGRAPHICS)

細いストライプ

http://wegraphics.net/blog/tutorials/illustrator-quick-tip-using-the-blend-tool-to-create-repeating-patterns/

細い線のストライプパターンを作成します。
線をブレンドで増やしています。
同様の方法で作成したパターン作例も紹介されています。

 

線に強弱のあるストライプ(Vector boom)

線の強弱ストライプ

http://vectorboom.com/load/tips/basix/how_to_create_diagonal_seamless_pattern_in_adobe_illustrator/15-1-0-433

こちらは線の太さに強弱のあるストライプのチュートリアルです。
表情のあるストライプは珍しいですね。
英語表記ですが、Illustratorの機能を理解していれば理解できるでしょう。

 

チェック柄(7日間イラストレーター超速マスター)

チェック

http://scaleslaw.com/illustrator-pattern/check

チェック柄の作成方法が紹介されています。
各手順にキャプチャー画像があって分かりやすいです。
ステップ20まであるので一見難しそうですが、コピーや移動の繰り返しを丁寧に追っていきましょう。

 

チェッカー柄(DESIGN TIPS)

チェッカー

http://designers-tips.com/archives/1762

チェッカー柄の作り方です。
正方形のオブジェクトを分割する事で、元になる四角形を簡単に作成できます。
幾つかのバリエーションを作成しておけば、背景などに活躍しそうです。

 

幾何学模様(CREATIVE BLOQ)

シンプル幾何学模様

http://www.creativebloq.com/illustrator/quick-and-easy-repeat-pattern-making-adobe-illustrator-41514744

シンプルなモチーフから作成するパターンを紹介しています。
ブレンド機能を使用して作成するデザインや、3Dを使用するアイデアが参考になります。
表記は英語となっています。

 

円形の幾何学模様(envatotuts+)

円の幾何学模様

http://design.tutsplus.com/tutorials/how-to-create-a-bright-geometric-circle-pattern-in-adobe-illustrator–cms-20837

明るい円形の幾何学模様を配置したパターンです。
ソフトライトにしたレイヤーを重ねて柔らかいグラデーションをかけています。
背景などに使用すれば、画面がぱっと華やぎそうです。

 

六角形の幾何学模様(envatotuts+)

六角形の幾何学模様

http://design.tutsplus.com/tutorials/how-to-create-a-blended-hexagonal-print-design-in-adobe-illustrator–vector-26021

こちらも幾何学模様のパターンですが、六角形のモチーフとなっています。
万華鏡を覗いたような華やかで美しいデザインを作成できます。
コメント欄では作例を見ることもできます。

 

グリッドから作る幾何学模様(Vector boom)

グリッドで幾何学模様

http://vectorboom.com/load/tips/techniques/how_to_create_hexagonal_grids_for_making_patterns_in_illustrator/16-1-0-490

グリッドを作成し幾何学模様を作る方法です。
どのように配色するかによって表情が違ったパターンを作成できます。
色々なバリエーションを作成しておくと役立ちそうですね。

 

カラフルな六角形の幾何学模様(vectips)

六角形の幾何学模様

http://vectips.com/tutorials/rainbow-hexagon-pattern-vector/

カラフルな幾何学模様のパターン作成方法です。
グラデーションが大変美しい仕上がりです。
英語表記ですが解説画像が分かりやすいチュートリアルです。

 

繋がった六角形の幾何学模様(veerle’s blog)

繋がった六角形の幾何学模様

http://veerle-v2.duoh.com/blog/comments/creating_geometric_patterns_in_illustrator/

六角形がつながった面白いデザインのパターンです。
使用ツールや数値が詳しく解説されています。
手順が少ないので、初心者の方にも取り組みやすいと思います。

 

レトロな三角の幾何学模様(SPOON GRAPHICS BLOG)

レトロ三角形幾何学模様

http://blog.spoongraphics.co.uk/tutorials/create-a-retro-triangular-pattern-design-in-illustrator

グリッドから作成する三角形の幾何学模様です。
くすんだ色合いと重ねられたテクスチャで、独特の雰囲気を醸し出しています。
色を調整すれば、様々な表情に応用できるでしょう。

 

千鳥格子(envatotuts+)

千鳥格子

http://design.tutsplus.com/tutorials/create-a-houndstooth-pattern-in-both-adobe-illustrator-and-photoshop–cms-22589

千鳥格子のパターンです。グリッドを作成して作成しています。
服飾のデザイン等に活用できそうです。
表記は英語となっていますが、作成時の数値や使用ツールが太文字で記載されているので分かりやすいです。

 

青海波(envatotuts+)

青海波

http://design.tutsplus.com/tutorials/quick-tip-how-to-make-a-repeating-japanese-wave-pattern-in-adobe-illustrator–vector-4933

和柄の青海波のパターン作成を紹介しています。
バリエーションの作成方法も記載されています。
数値も記載された丁寧な解説で分かりやすい記事です。

 

菊格子(KDblog(仮))

菊格子

http://kross-design.blogspot.jp/p/blog-page_25.html

和柄の菊格子のパターン作成を紹介されています。
菊模様の花びらは三角形から作成されています。
華やかで美しいデザインです。

 

ねじ梅(KDblog(仮))

ねじり梅

http://kross-design.blogspot.jp/p/blog-page_9581.html

和柄のねじ梅を配置した美しいパターンです。
梅の作り方から解説されており、花のモチーフ作成例として他の制作時にも役立ちそうです。
和風のデザイン時に活躍しそうです。

 

矢絣(KDblog(仮))

矢絣

http://kross-design.blogspot.jp/p/blog-page_6812.html

和柄の矢絣のチュートリアルです。
シンプルな手順で、初心者の方にも取り組みやすいでしょう。
背景やデザインのポイントや、袴や着物のファッションデザインなどに活躍しそうです。

 

花柄(envatotuts+)

花

http://design.tutsplus.com/tutorials/how-to-create-a-spring-floral-pattern-in-adobe-illustrator–cms-21049

こちらは花柄のシームレスパターンです。
モチーフとなる花の作成方法から解説されています。
英語表記ですが、ツールや数値が詳しく紹介されているので手順を追うことが出来ます。

 

桜の花(株式会社LIG)

桜の花

http://liginc.co.jp/web/design/illustrator/81794

桜の花と花びらのデザインのパターンです。
色変更の方法も記載されていて参考になります。
パターン作成に不慣れな方にも分かりやすくまとめられています。

 

植物(creative MARKET)

植物

 

https://creativemarket.com/blog/2015/05/06/learn-the-trick-to-creating-seamless-patterns-in-illustrator

植物のモチーフを使用したパターンが紹介されています。
英語表記ですが動画で手順を確認できますので、英語が苦手な方にも理解しやすいと思います。
色変更の操作も紹介されています。

 

ポリゴン風(togetter)

ポリゴン風

http://togetter.com/li/723537

ポリゴン風パターンの作成方法です。画像付きで手順を見ることができます。
色彩豊かで華やかなデザインです。
画面が寂しい時などに活躍してくれそうです。

 

ハチの巣模様(envatotuts+)

ハチの巣

http://design.tutsplus.com/tutorials/create-a-sweet-honeycomb-pattern-in-adobe-illustrator–cms-20656

イラスト系の仕上がりですが、ハチの巣模様のパターンです。
中にハチミツが入っているような光沢が美しいです。
陰影を省略すれば、もっとシンプルなハチの巣となりそうです。

 

イラスト(envatotuts+)

イラスト

http://design.tutsplus.com/tutorials/quick-tip-how-to-create-a-seamless-pattern-in-adobe-illustrator-cs6–vector-5618

こちらは、イラストを使用したパターン作成方法です。
一つのイラストから方向やサイズを変更してパターンを作成する手順が参考になります。
モチーフをシンプルなオブジェクトにすれば、汎用性の高いパターンを作成できそうです。

 

矢印(envatotuts+)

矢印

http://design.tutsplus.com/tutorials/how-to-create-a-nature-inspired-arrow-pattern-in-adobe-illustrator–cms-24232

装飾的な矢印をモチーフにしたパターンのチュートリアルです。
モチーフ一つ一つの解説が記載されています。
落ち着いた色合いの中に、矢や装飾のデザインが可愛らしいです。

 

テクスチャ(VectorCove)

テクスチャ

https://vectorcove.com/tools-tips/create-textures-in-illustrator/

テクスチャとして使用できるパターンの作成方法です。
点が散ったパターンや小石が転がったようなパターンが記載されています。
記事の最後にはパターンを使用した作例が紹介されています。

 

まとめ

いかがでしたでしょうか?
初心者の方は日本語のチュートリアルから取り組むと理解しやすいと思います。
英語表記のチュートリアルも、解説画像や数値を参考に挑戦してみて下さい。
ぜひお気に入りのパターンを作成して、デザイン制作にお役立てください。

 

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Illustratorってとっつきにくいなあと思っていたのですが、便利な機能を知っていくうちに楽しくなってきました。 「illustratorって楽しいな」と感じるきっかけになることができれば嬉しいです。

Next Article【WordPress】記事にソーシャルブックマークを設置する方法