[Illustrator]継ぎ目のないパターンの作り方

お盆休みの間は、猛暑日が続いて、この調子じゃ、秋なんてまだまだ程遠いなぁ、なんて思っていたら急転、寒い日が続いております。

そんな気候に、思い切りやられまして、喉の痛みを感じて、「あら?風邪!?」なんていう不安を抱えております。スタッフ「ほ」です。

あまりにも更新がないこのブログを見かねた他のスタッフが、交代で執筆をしてくれるようになりまして、にわかに活気づいてきました。

今週は、私の番なので、張り切っていきたいと思います。

今回のテーマはイラレ。で、ちょっとWeb寄りです。DTPにも応用はできますので、DTPの人もぜひ読んでみてください。

Webの背景画像や、DTPの台紙の模様などにパターンを利用する機会は多いと思います。
Illustratorでは、比較的カンタンにパターンを作成することができますが、実際にそれを適用してみると、いかにも「タイル状に並べました」という雰囲気になってしまいます。

シームレスでないパターン

これをもっと、自然に並んだ時に、どこが継ぎ目なのかわからないように作れないか?というのが、今回のテーマです。

実は、シームレスパターン(継ぎ目のないパターン)の作り方には、あるルールがありまして、その条件を満たせれば、それほど作成は難しくありません。

ではやってみましょう。

まず、Illustratorの新規ファイルを作成します。
正方形で作成してみましょう。
ここでは300×300ピクセルで作成しました。

新規ファイル作成

ファイルが作成されたら、長方形ツールで300×300ピクセルの正方形を描き、好きな色を付けておきます。線は「なし」にしてください。

アートボードと同サイズの正方形を描く

整列パレットやスマートガイドを使って、描いた正方形をアートボードのラインとぴったり一致させます。

正方形をアートボードに合わせる

次に模様を描いていきますが、ここでのポイントは、「正方形の2辺だけはみ出すようにパーツを配置」します。
こんな状態ですね。

2辺をはみだすように

まずは、ここまでのパーツを正方形を含めてグループ化します。

グループ化したパーツをコピー移動して、この点を吸着します。

コピー移動と吸着

この時に、はみ出させたパーツが他のパーツと重なってしまったりする場合は、戻ってパーツの位置や大きさを調整します。

この2セットをさらにグループ化した後、コピー移動して、このように配置します。

4つに増やす

すべてをグループ化します。

これまでの作業で、元のアートボードの位置は、四辺にパーツが配置された状態になっているはずです。

アートボードの位置は四辺にパーツが配置された

Web用に保存をした後、Webサイトの背景画像として配置してみてください。

元はどのような四角形パターンだったかわからないものができていると思います。

シームレスなパターン

これをDTPで活かすにはどうすればいいの?ここで書き出したファイルをWebページの背景に表示させるにはどうすればいいの?という方は、バンフートレーニングスクールの「イラストレーター講座」や「HTML+CSS講座」にてお待ち致しております。


バンフートレーニングスクールでは、イラストレーター講座を開講しています。

このブログで記事を書いているスタッフ「の」やスタッフ「ほ」が基本操作からマニアックなテクニックまで幅広くレクチャー!

まったくの初心者の方大歓迎!ある程度ご経験のある方向けの実践編もご用意しております。

詳しくは、下記詳細ページをご覧ください。

イラストレーター講座の詳細

The following two tabs change content below.
アバター

スタッフ 「ほ」

ホームページ制作講座、イラストレーター講座、フォトショップ講座を担当しています。カップヌードルはシーフード派。 Webクリエイター能力認定試験 認定インストラクター

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ