creatersnest44

Illustratorでシームレスなチェックのパターンを作る方法


可愛いお洒落な絵柄を作れるのも、Illustratorの醍醐味です。
ちょっとした背景に使ったり、アイコンに使ってみたり、
イラストを描いてみて洋服や図形の柄にしてみたり。

一度、作った柄を保存して、何度でも様々なところで使用できるのも
Illustratorならではの利点です。

そこで、ちょっと凝った感じを出せる、
シームレスなチェックのパターンを作る方法を紹介します。

作業時は「グリッドを表示」して作業すると作りやすいです。

 

ブレンドツールを使って素早くチェックを作る方法

シームレスの土台をつくる

ここでは、シームレスなチェックの例として、ギンガムチェックを作ります。

好きな色を土台に四角を塗りつぶしましょう。
この時、枠線は無いようにしましょう。

四角をつくる

チェックの線を作る

長方形ツールで、チェックのラインになる線を作ります。

 

ギンガムチェックのかすれた雰囲気を出すために、効果を入れます。

メニューバーの「効果」→「ブラシストローク」→「ストローク(スプレー)」

 

ストロークパネルで、ストロークの長さや、スプレー半径を調節することで、
お好みのギザギザ感がでます。

ストロークスプレー

 

ブレンドツールで縦ストライプを作る

平行移動した反対側にもう一本コピー&ペーストし、両はしに配置します。

コピー

両はしの直線を選択し、ブレンドツールで縦シマを作ります。

その際にブレンドオプションで「ステップ数」を 隙間と線が等間隔に並ぶように設定しましょう。

たてブレンド

回転ツールで横シマを作る

ブレンドで作ったストライプを「回転ツール」で、横ボーダーを作り真上にコピーします。

「回転ツール」を選択すると、中心点がでてくるので、「Alt」キーを押しながら、
「回転ツール」をダブルクリックすると、オプションパネルが出てくるので、

「90°」に設定し、「コピー」をクリックすると、真上に横線がコピーされます。

これで、ギンガムチェックの完成です。

回転こぴー

 

パターン登録する

メニューバーの「オブジェクト」から「パターン」を選び「作成」をクリックします。
そうすると、下記のような、まばらなパターンがでてくるので、
「パターンオプション」パネルの左上に「パターンタイルツール」をクリックすると、
選択範囲を自由変形できるバウンディングボックスが出てくるので、
それで隙間のないように調整します。

パターン

じゆうへんけい

隙間なく、パターンを調整できたら、パターンに名前をつけて保存します。

かんせい

これで完成です。

パターンに登録された「ギンガムチェック」を選択して、パスツールで図形を描いたり、
図形ツールで図形を作ってみたり、ギンガムチェック柄の図形を作成できます。

ぎんがむちぇっく

 

ブレンドツールを使わずに太線と細線のチェックを作る方法

ブレンドツールで作ったものは、その後の編集が困難ですが、
図形を組み合わせて作ったものは、あとでデザインを変えたりしやすいです。

 

長方形の帯を縦に3つ作る

まずは一つの長方形帯を作り、アートボード上にコピー&ペーストで、 もう二つ作ります。

 

コピーをする際に、まず「Ctrl」キーでコピーし、「Shift」キーを押しながらドラッグすると、
まっすぐ横にスライドするので、位置が決まったら、「Alt」キーを押してマウスを離すとまっすぐコピーされます。

 

そして均等に並ぶように、整列ツールで等間隔に整列します。

 

整列オプションパネルで、「キーオブジェクトに対して」にチェックを入れて、
「等間隔に整列」をクリックし、プレビューで確認しながら、間隔幅の数値を決めます。

せいれつ

回転ツールで横シマを作る

次に、横の帯を作りますが、ギンガムチェックの時と同様、回転ツールでコピーします。
かいてんn

ここで、太めのチェックができるので、太線と細線のチェックを作ってみましょう。

細線のチェックを作る

細線のチェックをつくるために、太めのチェックをすべて選択し、
「Ctrl」+「2」でロックをかけましょう。

細線のチェックを太線のチェックの間に配置します。

ほそせん

背景を配置

また、好きな背景色で塗りつぶした正方形を最後方に配置します。

これで、太線と細線のブランケットのようなチェックが出来上がりました。

ぶらんけっと

同じチェックから、さらに手を加えて違うチェックを作る

今回は図形ツールで作っているので、ここからさらに違うチェックを作れます。

太い線の透明度を変え、細線をもっと細くすると、柔らかい雰囲気のチェックができます。

ふとうめいど

また、太い線のみを選択し、パスファインダーで「中マド」を選ぶと、重なった部分が切り取られます。

ぱすふぁいんだー

そこで、細線を増やして均等に配置すると、マフラーの柄のようになります。

まふらー

これを、45°回転させると違う柄になります。
この時に、図形が菱形になっても、パターン作成時に必要な箇所のみ選択できるので、
問題ありません。

ななめ

 

最後に

シームレスなチェック柄を作る手順は、どんな模様であれ、基本は同じです。

もちろん、人によって作り方は様々ですが、この方法でつくる場合は、

・縦シマ横シマをつくり、交差させてチェックをつくる

・最背面に背景を置き、塗りつぶす

・透明度を低くする

(プラスアルファとして、違うテイストのチェックを作り、最初のチェックの間に挿入するなど)

です。

あとは、パターン登録すれば、常時使えるようになります。

また、図形作成時にロックを使うと作業しやすいですが、パターン作成する前に、
すべてのロックを解除することを必ず行ってください。

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

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

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


Next ArticleWordPressをバックアップする必要性と、便利なプラグイン