つなぎ目のないパターン素材の作り方(クリスタ&イラレCS5)

つなぎ目のないパターン素材の作り方(クリスタ&イラレCS5)ストックイラスト

先日初めてパターン素材というものを作って投稿してみました。
思っていた以上に楽しくてハマってしまいました、パターン作り。

今回は私なりのパターン素材作成手順をご紹介します。

題材となるイラストについて

題材にするパターン素材はこちら↓

秋のパターン みかんと葉(イラストAC)

みかんと葉をモチーフに、秋を感じさせる色彩で仕上げました。
最終的にはAdobe Illustratorのスウォッチに登録して配布します。

シームレス(つなぎ目がない)パターンなので広いサイズでも違和感なく使うことができます。
またベクターイラストなので綺麗なまま拡大できます

Illustratorで作成したシームレスパターン

実際の素材配布ページはこちら↓

無料イラストなら「イラストAC」
イラストACは、無料イラスト・アート・年賀状・年賀・画像などの素材がフリー。AI・EPS形式の素材も無料でダウンロードOK!商用利用、編集もOK。かわいいフリーイラストも豊富!

制作編1:みかん・葉・枝のイラストを用意する

元となるイラストはCLIP STUDIO PAINTで作成しました。

使ったブラシはペンツールの中のミリペン
速いスピードでシュッと描くと線幅が細くなります。

↓上の線2本:ゆっくり描いた時、下2本:速く描いた時

クリスタ「ミリペン」の挙動(上2本:ゆっくり描く、下2本:早く描く)

木の枝を描くときにこのブラシを使うと楽しいです。自然なデコボコ感・節の太さを楽に表現できます。

ミリペンを使ってベクターレイヤーに線画を描きます。ベクターレイヤーに描いておくと、後から拡大・変形しても画質が荒くなりません。

2枚のベクターレイヤーを用意して、1枚には輪郭線、もう1枚にみかんのヘタや模様、葉脈の線を描きました。描き上がったらレイヤーごとに画像に書き出します。

ここでクリスタでの作業は終わりです。

描き出した画像はベクターデータに変換しておきます。
私はCocoapotraceというMac用ソフトを使っています。
イラレのライブトレース機能でもベクター化できます。

イラストをベクター化

Cocoapotraceを使ったベクター化の方法は前回の記事で紹介しています。

Cocoapotraceについて(クリックで過去記事の該当箇所へ飛びます。)

制作編2:モノクロのパターンを作る

続いてAdobe Illustratorでの作業です。

イラレのライブペイントツールを使ってみかんと葉の塗りつぶし部分を作成します。

ライブペイントツールについて(クリックで過去記事の該当箇所へ飛びます。)

ライブペイントツールで塗りつぶし部分を作成

↑今回は輪郭線と塗りつぶし部分を同じ色にしました。
最終的な色は後から決めるので、まずはモノクロの状態で配置を考えます。

つなぎ目のないパターンの作り方(CS5以前)

Adobe IllustratorのバージョンCS6以降にはパターンオプションという機能があり、つなぎ目のないパターンを楽に作成できます。
↓CCではこのような画面になります。

Illustrator CC パターンオプション

残念ながら私のイラレはCS5なのでパターンオプションがありません…。

そこでググったところCS5以前でも作成可能な方法がありました!先人の知恵…ありがたい…!!
次の記事を参考にさせていただきました↓

↑こちらの記事どおりに作業しているので、CS5以前のイラレを使用中の方はぜひ上の記事をご参照ください。

簡単に手順をまとめると

  1. 100×100pxの正方形パス(線あり塗りなし)を作成
  2. 新しいレイヤーに500×500pxの正方形パス(線なし塗りなし)を作成
  3. 1と2の正方形パスの中央を揃える
  4. 2のレイヤー全体に 効果>パスの変形>変形 を4セットかける
    ・水平方向に100px移動&コピー
    ・水平方向に-100px移動&コピー
    ・垂直方向に100px移動&コピー
    ・垂直方向に-100px移動&コピー

↑これで準備は完了。

あとは効果をかけたレイヤーにイラストを配置するだけ。バランスを見ながら試行錯誤で並べます。

正方形の中にイラストを配置する

モノクロで作成したパターン2種類

↑できたパターンがこちら。
まずモノクロで2種類作成しました。

パターンをスウォッチに登録する方法

モノクロのパターンをスウォッチに登録します。
※以下はCS5以前の手順です

100×100pxの正方形パス(線なし塗りなし)を作成して最背面に配置します。
この正方形パスとイラスト・背景色のオブジェクトをまとめて選択し、スウォッチパネルにドラッグ&ドロップします。

パターンを構成するオブジェクト

パターンをスウォッチに登録する

制作編3:配色でバリエーションを増やす

今回は「秋っぽいパターン」を作りたかったので落ち着いた色味で仕上げました。

暖色系と寒色系、暗い色〜明るい色、彩度高め〜モノクロ、背景をストライプにしたバージョンも用意して、全10種類が完成!

完成したパターン10種類

完成したパターンは背面に置いた線なし塗りなしの正方形パスごとスウォッチパネルにドラッグ&ドロップして登録しておきます。

制作編4:サムネイルで見つけてもらえる工夫を

次に配布用のイラレデータを作成します。
今回は横1600px × 縦1200pxのキャンバスにパターンの見本を並べます。

上で作ったパターンを塗りに設定し、10個の長方形を作成します。

パターンの並べ方にひと工夫、あえて「規則的」を崩す

画面にメリハリをつけるためあえて寒色系と暖色系を交互に並べました。

パターンの並び順を模索

↑初めは上段を寒色系・下段を暖色系にまとめていましたが、バラバラの方が目に留まりやすい、気がします。

タイトルには英語表記も入れる

今回の素材を投稿したイラストACは海外の方も利用されています。
タイトルには英語表記も入れておくとよいと思います。

海外の方にも見つけてもらえるよう願いを込めて、必死にGoogle翻訳に打ち込みます。

タイトルは英語表記に

↑今回は英語表記のみ。
10種類スウォッチセットであることも明記しています。
(”10 Seamless Patten Swatches”の方がよかったかも。)

テーマとなるイラストを大きめに配置する

パターンを並べただけではサムネイルだと何の柄だかさっぱり分かりません。

タイトルに文字で書くのもありですが、より見つけやすいようにテーマとなるイラストをドーンと大きく配置することにしました↓

テーマのイラストを大きく配置

↑これでサムネイルで見ても「みかんが描かれている」と分かってもらえるはずです。

完成したパターン素材&別バージョンの紹介

これでつなぎ目のないパターン素材の完成です!

秋のパターン みかんと葉(イラストAC)

一度作ってコツを掴むと、モチーフや配色を変えることで素材を量産できます。
パターン制作未経験の方もぜひ試してみてください!

題材にしたパターン素材の配布ページはこちら↓

無料イラストなら「イラストAC」
イラストACは、無料イラスト・アート・年賀状・年賀・画像などの素材がフリー。AI・EPS形式の素材も無料でダウンロードOK!商用利用、編集もOK。かわいいフリーイラストも豊富!

「秋のパターン」を投稿した後、配色を変えて夏バージョンも作ってみました↓

無料イラストなら「イラストAC」
イラストACは、無料イラスト・アート・年賀状・年賀・画像などの素材がフリー。AI・EPS形式の素材も無料でダウンロードOK!商用利用、編集もOK。かわいいフリーイラストも豊富!
※ダウンロードには「イラストAC」の無料会員登録が必要です。会員登録がお済みでない方はこちらから↓

おまけ:サムネイルのイラスト素材の紹介

サムネイルで使用している女性のイラスト手描きの円は、私が個人で運営しているフリーイラスト素材サイト「ジェントルダウンロード」にて無料配布しています。
こちらもぜひ見てみてください!

両手を使って説明するスーツ姿の女性1(上半身・グレー)
素材をダウンロードPNG画像データ(背景透過)PNG ベクターデータ(ai ver10)ベクターAI 似ているイラスト素材を見る
手描きの円1
素材をダウンロード黒線・白塗りつぶしPNG 黒線PNG 白線PNG ベクターデータ(ai ver10)ベクターAI 似ているイラスト素材を見る