ichiusa_patern_CS6

Illustratorで継ぎ目のないパターン素材を作る方法


環境を整える

まずパターン作成の前に環境を整えます。
新規ファイル作成からA4タテを選択してください。
アートボードが表示されたら、以下の環境を整えてください。

・表示メニュー→定規で定規を表示(Ctl+R)
・表示メニュー→グリッドでグリッドを表示(Ctl+¥)
・編集メニュー→環境設定→単位(Ctl+shift+U)から、「一般」を「ピクセル」に変更

画面がこのようになっていたら環境設定は完了です。

01

材料を揃える

次に、パターン作成に必要な、次の3つの材料を用意します。

(A)枠  塗り:透明 線:なし 好きなサイズの正方形

長方形ツールはCtl+Mで呼び出せます。今回はサイズを300×300pxで作成しました。

(B)背景 塗り:パターンの背景色にしたい色 線:なし (A)枠と同じサイズの正方形

(A)をコピー(Ctl+C)して前面に貼り付け(Ctl+F)し、塗りと線を変更すると作業が簡単です。

(C)画像 好きな画像×5つ

画像を配置し、コピーして同じ画像を5つ作りました。
この時リンク画像ではパターン登録できないので、フォルダからドラッグ&ドロップでなく
ファイル→配置から画像挿入を行ってください。

202

それぞれの材料を配置する

(C)画像の各中心点と、(B)背景の四隅の点とが重なるように配置していきます。

204

スマートガイド機能でこの配置は簡単にできますが、
きっちりポイントが合っているかどうか確認したいという時は、
表示→アウトライン(Ctl+Y)でアウトラインモードに切り替えると便利です。
元のプレビューモードに戻りたいときは、同じくCtl+Yで切り替えが可能です。

205

または、少しステップが増えますが、座標指定で合わせる方法もあります。

(B)背景を選択した状態で、定規の始点(画面左上)の四角から枠の左上の点をめがけて
ドラッグすると、枠の左上の点を始点として定規の目盛り表示が変わります。

0607すると、自ずと(B)背景の四隅の座標が以下のようになっていることが確認できますね。
左上x:0px y:0px     右上x:300px y:0px   左下x:0px、y:300px   右下x:300px y:300px
ウィンドウ→変形(Shift+F8)パレットを呼び出し、(C)画像のうち一つを選択した後に変形パレットの基準点を中央に変更します。

基準点の横の「x」「y」と書かれているのが、選択しているオブジェクトの中心点の座標になります。
ここで(B)背景の四隅の座標に(C)画像の中心座標を重ねればOKです。
残ったあと1つの(C)画像は、(B)背景の中心に配置します。

211

 

最後に(A)枠を(B)背景に完全に重なるよう移動し、
すべてのオブジェクトの最背面に配置します。

200

まず(B)背景を選択して右クリック→重ね順→最前面へ移動(Ctl+Shift+])、
次に(C)画像をすべて選択して同じく最前面へ移動すれば、
(A)枠は自然と最背面になります。

スウォッチパレットへ登録する

難しい作業はすべて終わりました。あとは登録だけです。

(A)枠、(B)背景、(C)画像すべてを選択(Ctl+A)し、
その状態のままスウォッチパレットへドラッグ&ドロップすれば、パターン登録の完了です。
適当なオブジェクトにパターンを適用してみて仕上がりを確認してください。

215

手順通りにやったのになぜか継ぎ目ができてしまう・・・という時は、
表示倍率を変えてみてください。
ズームなどでそれまで見えていた継ぎ目が見えなくなった場合は、データ上は問題ないので安心してください。

おまけその1 <CS6「パターン作成機能」>

もしお使いのIllustratorのバージョンがCS6の場合、これまでにご紹介したステップとは
比べものにならないほど簡単にパターン作成ができてしまいます。

お好きな画像を配置して選択状態のまま、オブジェクト→パターン→作成を実行すると、
パターンプレビューパレットが現れます。

ここで微調整しながら、画像と画像の間隔などを細やかに設定することができます。

212

213

 

おまけその2 <登録したパターンを別ファイルでも使えるようにする>

折角苦労して作ったパターン、別のファイルでも使いたいという時は、
パターンを作成したファイルをai形式で名前をつけて保存してください。

保存したaiファイルをコピーし、
Program Filesの中からIllustratorのスウォッチフォルダのディレクトリを探し出し、
そこへペーストしてください。

お使いのパソコンによってディレクトリは違ってきますので、
どこにコピーを置いたらいいか分からないというときは、
Illustratorのスウォッチパレットオプションから
スウォッチライブラリを開く→その他のライブラリ を選択すると
ディレクトリが表示されますので参照してください。

21417

別ファイルで使うときは、デフォルトでスウォッチパレットに表示されているわけでは
ありませんので、ディレクトリを確認する時と同じ手順で
スウォッチパレットオプション→スウォッチライブラリを開く→その他のライブラリから読み込んでください。

 

まとめ

みなさん、Illustratorで継ぎ目のないパターン素材を作る方法はお分かりいただけたでしょうか。
パターン素材は使うことが多いので、自分で思うままのデザインができれば一気にデザインの幅が広がります。
ぜひ習得して、自分でオリジナルの素材を作ってみてください。

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

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

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


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article拾ってきた画像も簡単アレンジ!Photoshopで画像のノイズを軽減する方法